/* One set of records and permissions, with a usable narrow-screen layout. */
.mobile-menu-toggle,.mobile-menu-close{display:none}
@media(max-width:1000px){
 .layout{display:block;min-width:0}
 .layout>aside{position:relative;inset:auto;height:auto;overflow:visible;padding:12px 16px;min-width:0;width:100%;background:#18313f;color:#fff}
 aside .brand{padding:2px 100px 2px 0;min-height:44px}
 .mobile-menu-toggle{display:flex;align-items:center;gap:12px;position:absolute;right:16px;top:16px;min-height:44px;background:#ffffff18;border:1px solid #ffffff50;color:white}
 .mobile-nav-ready aside:not(.mobile-nav-open)>.section-nav,.mobile-nav-ready aside:not(.mobile-nav-open)>.square-menu-status,.mobile-nav-ready aside:not(.mobile-nav-open)>.aside-bottom{display:none!important}
 /* A single opaque, viewport-sized menu. Its own scroll stops at the final
    action; the underlying page stays locked until the menu is closed. */
 html.mobile-menu-visible{overflow:hidden;overscroll-behavior:none;background:#18313f}
 .mobile-menu-visible .layout>aside.mobile-nav-open{position:fixed;inset:0;width:100%;height:100vh;height:100dvh;max-height:100dvh;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;z-index:10000;background:#18313f;padding-bottom:max(16px,env(safe-area-inset-bottom))}
 .mobile-menu-visible .page{visibility:hidden;pointer-events:none}
 .layout>aside nav.section-nav{display:flex;flex-direction:column;margin-top:12px;max-height:none;overflow:visible;background:#18313f;color:#fff}
 aside nav.section-nav>a,aside nav.section-nav .completed-submenu>a{color:#fff;background:#18313f;white-space:normal;overflow-wrap:anywhere}
 aside nav.section-nav>a:hover,aside nav.section-nav>a.active,aside nav.section-nav .completed-submenu>a:hover,aside nav.section-nav .completed-submenu>a.active{background:#2f596c;color:#fff}
 aside .completed-submenu,aside .completed-period{background:#18313f;color:#fff}
 aside .completed-period label{color:#fff}
 aside .aside-bottom{display:block;position:static;margin:16px 4px 0}
 aside .square-menu-status{margin:12px 0 0}
 aside .section-nav a{min-height:44px;display:flex;align-items:center}
 aside .mobile-menu-close{display:block;margin-top:12px;min-height:44px;background:#2f596c;color:#fff;border:1px solid #7592a0;width:100%}
 .page>header{padding:14px 16px;flex-wrap:wrap;align-items:flex-start}
 .header-title,.header-title>div{min-width:0}
 .page>header h1{font-size:clamp(20px,3vw,24px);overflow-wrap:anywhere}
 main{padding:16px;max-width:100%;min-width:0}
 .columns.wide-left{grid-template-columns:minmax(0,1fr)}
 .report-filter{grid-template-columns:repeat(2,minmax(0,1fr))}
 .table-card,.table-wrap,.mobile-table-scroll{max-width:100%;overflow:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
 .mobile-table-scroll{margin-bottom:14px}
 .mobile-table-scroll:focus-visible{outline:3px solid var(--green);outline-offset:2px}
 .filters input[type=search]{min-width:0}
 .card-head,.form-actions,.header-actions,.tabs{flex-wrap:wrap}
 .tabs{overflow:auto;max-width:100%}
 button,.button,select,input:not([type=checkbox]):not([type=radio]){min-height:44px}
 input,select,textarea{font-size:16px}
 iframe,object,embed{max-width:100%}
 dialog{max-width:calc(100vw - 24px);max-height:90dvh;overflow:auto;padding:16px}
}
@media(max-width:600px){
 .auth{padding:16px;min-height:100dvh;align-items:flex-start}
 .auth-card{width:100%;max-width:440px;margin:24px auto;padding:24px 20px}
 .auth input{width:100%;font-size:16px;min-height:44px}
 .auth button{min-height:44px;width:100%}
 .metrics.four,.metrics.three,.metrics.five,.columns,.bank-cards,.quick-grid,.report-filter,.form-grid,.review-equation{grid-template-columns:minmax(0,1fr)}
 .form-grid .wide,.form-grid .span-2{grid-column:auto}
 .filters,.report-filter,.bar{align-items:stretch}
 .filters>label,.filters>input,.filters>select,.report-filter>label{width:100%;min-width:0}
 .filters>button,.report-filter>button{flex:1}
 .card,.metric{padding:12px;min-width:0}
 .card p,.card a,main>p{overflow-wrap:anywhere}
 .doc-preview,.statement-preview,.evidence-preview,.payroll-payslip-preview{height:55dvh;min-height:260px}
 .header-title{gap:8px}
 .page>header p{display:none}
}