/* MOBILE.CSS — Android/iOS responsive bottom nav + auto-fit UI */
@media(min-width:769px){
    #mobileBottomNav,#mobileMoreDrawer,#mobileNavOverlay,#mobileTopBar{display:none!important}
}
@media(max-width:768px){
    html{font-size:clamp(13px,1.1vw+10px,16px)}
    body{overflow:auto;height:auto;min-height:100vh}
    .navbar{display:none!important}
    .container{padding:0.55rem 0.45rem calc(62px + env(safe-area-inset-bottom,0px));overflow:visible}

    /* Bottom nav */
    #mobileBottomNav{position:fixed;bottom:0;left:0;right:0;z-index:900;display:flex;align-items:stretch;justify-content:space-around;background:var(--card-bg-solid,#fff);border-top:1px solid var(--border);box-shadow:0 -3px 14px rgba(0,0,0,0.1);padding-bottom:env(safe-area-inset-bottom,0px);min-height:56px}
    .mb-item{flex:1;border:none;background:transparent;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:7px 3px;color:var(--text-muted);font-size:0.56rem;font-weight:700;min-height:56px;transition:color 0.15s}
    .mb-item svg{width:1.1rem;height:1.1rem}
    .mb-item.mb-active{color:var(--primary)}

    /* Overlay */
    #mobileNavOverlay{position:fixed;inset:0;z-index:950;background:rgba(15,23,42,0.6);opacity:0;visibility:hidden;transition:opacity 0.22s,visibility 0.22s}
    #mobileNavOverlay.show{opacity:1;visibility:visible}

    /* More drawer */
    #mobileMoreDrawer{position:fixed;left:0;right:0;bottom:0;z-index:960;background:var(--card-bg-solid,#fff);color:var(--text-main);border-radius:1.1rem 1.1rem 0 0;box-shadow:0 -8px 32px rgba(0,0,0,0.22);max-height:80vh;display:flex;flex-direction:column;transform:translateY(100%);transition:transform 0.25s ease;padding-bottom:env(safe-area-inset-bottom,0px)}
    #mobileMoreDrawer.open{transform:translateY(0)}
    .mm-header{display:flex;align-items:center;justify-content:space-between;padding:0.8rem 0.9rem 0.6rem;border-bottom:1px solid var(--border);flex-shrink:0}
    .mm-header span{font-size:0.84rem;font-weight:800}
    .mm-header button{background:var(--surface-tint);border:none;cursor:pointer;width:30px;height:30px;border-radius:50%;font-size:0.88rem;color:var(--text-main);display:flex;align-items:center;justify-content:center}
    .mm-body{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0.35rem 0 0.85rem}
    .mm-section-title{font-size:0.56rem;font-weight:800;text-transform:uppercase;letter-spacing:0.07em;color:var(--text-muted);padding:0.7rem 0.9rem 0.3rem}
    .mm-item{display:flex;align-items:center;gap:0.55rem;width:100%;text-align:left;border:none;background:transparent;padding:0.65rem 0.9rem;font-size:0.8rem;font-weight:600;color:var(--text-main);cursor:pointer}
    .mm-item:active{background:var(--surface-tint)}
    .mm-item svg{width:1rem;height:1rem;color:var(--text-muted);flex-shrink:0}
    .mm-item.mb-danger{color:var(--danger)}
    .mm-accounts{padding:0 0.35rem}
    .mm-accounts .nav-link{display:flex;width:auto;min-width:0;font-size:0.76rem;padding:0.55rem 0.55rem;margin:0.12rem 0;border-radius:0.5rem;color:var(--text-main)!important;background:var(--surface-tint);border:1px solid var(--border);flex-direction:row;gap:0.4rem;justify-content:flex-start;align-items:center}

    /* UI scaling */
    .filter-panel{padding:0.65rem 0.5rem}
    .filter-grid{grid-template-columns:1fr;gap:0.45rem}
    .filter-header{flex-direction:column;align-items:stretch}
    .filter-header h3{font-size:0.76rem}
    .form-group label{font-size:0.58rem}
    .input-field{font-size:0.78rem;padding:0.4rem 0.5rem;height:36px}
    .toggle-group{height:36px}
    .toggle-btn{font-size:0.72rem}
    .multi-select-box{font-size:0.78rem;min-height:36px;padding:0.4rem 0.5rem}
    .btn{font-size:0.74rem;padding:0.4rem 0.65rem;height:36px}
    .btn-icon-only{width:34px;height:34px}
    .summary-bar{grid-template-columns:repeat(2,1fr);gap:0.38rem}
    .sum-card{padding:0.5rem 0.6rem}
    .sum-card .label{font-size:0.56rem}
    .sum-card .value{font-size:0.92rem}

    /* SD/RF summary mobile */
    #sdSummaryBar,#rfSummaryBar,#sdDetailSummary{grid-template-columns:repeat(2,1fr)!important;gap:0.4rem!important;margin-bottom:0.65rem!important}
    #sdSummaryBar .sum-card,#rfSummaryBar .sum-card,#sdDetailSummary .sum-card{min-width:0!important;padding:0.65rem 0.5rem!important;margin:0!important;border-radius:10px!important}
    #sdSummaryBar .sum-card .label,#rfSummaryBar .sum-card .label,#sdDetailSummary .sum-card .label{font-size:0.58rem!important;text-align:center!important;white-space:normal!important}
    #sdSummaryBar .sum-card .value,#rfSummaryBar .sum-card .value,#sdDetailSummary .sum-card .value{font-size:1.1rem!important;text-align:center!important;overflow-wrap:break-word!important}

    /* KPI */
    .kpi-grid{grid-template-columns:repeat(2,1fr);gap:0.4rem}
    .kpi-card{padding:0.6rem 0.65rem}
    .kpi-card .kpi-icon{width:1.6rem;height:1.6rem}
    .kpi-card .kpi-label{font-size:0.56rem}
    .kpi-card .kpi-value{font-size:1rem}

    /* Tables */
    .table-container{overflow-x:auto;-webkit-overflow-scrolling:touch}
    .table-container table{min-width:460px}
    th,td{padding:0.42rem 0.48rem;font-size:0.7rem}

    /* Charts */
    .chart-grid{grid-template-columns:1fr;gap:0.5rem}
    .chart-card.wide{grid-column:span 1}
    .chart-card{padding:0.65rem 0.6rem}
    .chart-card h4{font-size:0.72rem}
    .chart-canvas-wrap{height:165px}

    /* Export bar */
    .export-bar{flex-wrap:wrap;gap:0.3rem;padding:0.35rem 0.6rem}
    .export-period{font-size:0.6rem;width:100%}
    .btn-export{font-size:0.64rem;padding:0.28rem 0.45rem}

    /* Modals — sheet style */
    .modal{padding:0.4rem;align-items:flex-end}
    .modal-content{padding:1.1rem 0.85rem 0.9rem!important;max-width:100vw!important;width:100%!important;max-height:90vh!important;border-radius:0.9rem 0.9rem 0 0}
    .close-btn{top:0.5rem;right:0.5rem;width:32px;height:32px}
    .modal-content h2{font-size:0.92rem}
    .modal-grid{grid-template-columns:1fr!important}
    .pconf-row{flex-direction:column;gap:0.35rem}
    .pconf-section{padding:0.5rem 0.45rem}
    #printConfigModal .modal-content,#salaryEntryModal .modal-content,#residentEntryModal .modal-content{max-width:100vw!important}
    #printPreviewModal .modal-content{padding:0.55rem!important;border-radius:0.7rem}
    #excelFilterPopup{width:195px;right:0;left:auto}

    /* Tree / report */
    .tree-container{overflow-x:auto;-webkit-overflow-scrolling:touch}
    .tree-container .report-node{min-width:380px}
    .tree-subgroup{margin-left:0.35rem}
    .report-node{padding:0.4rem 0.55rem;font-size:0.74rem}
    .tree-group-amount{font-size:0.82rem}
    .report-total-row{grid-template-columns:repeat(2,1fr);gap:0.28rem}
    #balanceReportContainer .summary-bar{grid-template-columns:repeat(2,1fr)}

    /* Calendar mobile */
    .calendar-page{flex-direction:column}
    .cal-sidebar{width:100%;max-height:180px}
    .cal-day{min-height:52px;padding:0.3rem}
    .day-number{font-size:0.65rem;width:18px;height:18px}
    .reminder-badge{font-size:0.54rem}

    /* Reminder toggle */
    .rf-view-toggle{height:34px}
    .rf-toggle-btn{font-size:0.7rem;min-width:76px;padding:0 0.6rem}
    .rf-reminder-btn{height:34px;font-size:0.72rem;padding:0 0.75rem}
}