/* ═══ MAJA PAYROLL · THE PHONE LAYER (item 15 · payroll, 6 Sept 2026) ═══════════
   The same doctrine as the accounting app's phone layer, in the payroll app's
   own words: ONE breakpoint. Below it the sidebar becomes a drawer and a bottom
   tab bar stands in its place; the company bar shrinks; every grid is one
   column; every modal is a full-screen sheet with its buttons in thumb reach;
   every table with a header reads as a stack of labelled cards (js/mobile.js);
   every control is at least 40 px tall and every field 16 px so an iPhone does
   not zoom. Nothing above the breakpoint changes. Nothing here computes a
   salary, a gratuity or a deduction — the engine is the desktop's. */
:root{ --m-tab-h:60px; --m-safe-b:env(safe-area-inset-bottom,0px); }
.m-tabbar,#m-nav-backdrop,#m-sheet,#m-sheet-backdrop,.m-p3-back{display:none;}

@media (max-width:768px){
  html,body{height:100dvh;}
  #app,#app>div{height:100dvh !important;}
  /* ── the drawer: the sidebar slides in from the left edge, over the page ── */
  /* M1a (your word, 7 Sept: "in payroll the sidebar is not clickable") · the sidebar's inline z-index:10 was beating this rule, so the
     backdrop (1400) sat OVER the open drawer and every tap closed it instead of choosing a page. !important, as width and height already were. */
  #sidebar{position:fixed;left:0;top:0;bottom:calc(var(--m-tab-h) + var(--m-safe-b));height:auto !important;width:fit-content !important;min-width:232px;max-width:78vw;z-index:1500 !important;transform:translateX(-105%);transition:transform .22s ease;will-change:transform;overflow-y:auto;}
  #sidebar .nav-item{touch-action:manipulation;-webkit-tap-highlight-color:rgba(255,255,255,.12);}
  body:not(.m-nav-open) #sidebar{pointer-events:none;}
  body.m-nav-open #sidebar{pointer-events:auto;}
  #sidebar .nav-item,#sidebar .sb-group-head{white-space:nowrap;min-height:44px;font-size:14px;}
  #sidebar .sb-group .nav-item{font-size:13.5px;min-height:42px;}
  body.m-nav-open #sidebar{transform:none;box-shadow:12px 0 30px rgba(0,0,0,.35);}
  body.m-nav-open #m-nav-backdrop{display:block;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1400;}
  /* ── the tab bar ── */
  .m-tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;height:calc(var(--m-tab-h) + var(--m-safe-b));padding-bottom:var(--m-safe-b);background:var(--bg);border-top:1px solid var(--border);z-index:1600;box-shadow:0 -2px 10px rgba(6,42,58,.08);}
  .m-tabbar button{flex:1;min-width:0;height:var(--m-tab-h);border:none;background:transparent;font-family:inherit;color:var(--text3);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:10.5px;font-weight:700;cursor:pointer;-webkit-tap-highlight-color:transparent;}
  .m-tabbar button i{font-size:22px;line-height:1;}
  .m-tabbar button.active{color:var(--brand);}
  /* ── the company bar: 48 px, the name and the two buttons ── */
  #ch-bar{height:48px !important;padding:0 10px !important;}
  #ch-logo{width:34px !important;height:34px !important;border-radius:8px !important;}
  #ch-logo img{max-height:34px;}
  #ch-name{font-size:14px !important;}
  #ch-sub,#ch-page{display:none !important;}
  #ch-bar .m-menu{display:inline-flex !important;}
  #nf-panel{right:8px !important;left:8px !important;width:auto !important;top:56px !important;}
  #pay-switcher-popover{max-width:calc(100vw - 20px);}
  /* ── the page head: the title, then the actions wrapped under it ── */
  .topbar{flex-direction:column;align-items:stretch;padding:8px 12px;gap:6px;}
  .topbar-left h1{font-size:16px;}
  .topbar-right{flex-wrap:wrap;gap:6px;}
  .topbar-right .btn{min-height:36px;}
  .content{padding:12px 12px calc(var(--m-tab-h) + var(--m-safe-b) + 16px);}
  .dash-wrap{margin:-12px -12px;padding:12px 12px calc(var(--m-tab-h) + var(--m-safe-b) + 16px);}
  .dash-hero{padding:14px 14px;gap:10px;}
  .dash-hero>div[style*="flex:1"]{flex:1 1 100% !important;}
  .dash-hero>div[style*="flex:1"]>div:nth-child(2){font-size:16px !important;}
  .dash-hero-kpi{flex:1 1 40%;min-width:0;padding:8px 10px;}
  .dhk-v{font-size:15px;}
  .qa-grid{grid-template-columns:1fr 1fr;}
  .stats{grid-template-columns:1fr 1fr;}
  .stat-value{font-size:17px;}
  /* ── one column, whatever the desktop said ── */
  .g2,.g3,.g4,.auth-g2{grid-template-columns:1fr !important;}
  #content [style*="grid-template-columns"],.modal [style*="grid-template-columns"]{grid-template-columns:1fr !important;}
  #content [style*="width:300px"],#content [style*="width:320px"],#content [style*="width:340px"],#content [style*="width:360px"],#content [style*="width:400px"]{width:100% !important;max-width:100%;}
  #content [style*="justify-content:space-between"],#content .card-header{flex-wrap:wrap;gap:6px;}
  .filter-row{flex-direction:column;align-items:stretch;}
  .filter-row>*{width:100% !important;}
  .search-wrap{width:100%;}
  /* ── controls a thumb can hit; fields the phone does not zoom on ── */
  input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range]),select,textarea{font-size:16px !important;min-height:40px;height:auto;}
  .batch-inp{min-height:36px;width:64px;font-size:14px !important;}
  .btn{min-height:40px;}
  .btn-sm{min-height:36px;}
  .btn-xs{min-height:36px;}
  .btn-icon{min-width:36px;}
  button{min-height:36px;}
  .m-tabbar button,.sb-group-head{min-height:0;}
  .tab-btn,.p3-tab{min-height:40px;white-space:nowrap;flex-shrink:0;}
  .tabs,.p3-tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent);padding-right:36px;}
  .tabs::-webkit-scrollbar,.p3-tabs::-webkit-scrollbar{display:none;}
  /* ── a modal is the whole screen; its buttons stay at the bottom, in reach ── */
  .overlay{padding:0;align-items:stretch;}
  .modal,.modal-lg,.modal-xl{max-width:100% !important;width:100%;min-height:100%;border-radius:0;padding:14px 14px 0;display:flex;flex-direction:column;}
  .modal h2{font-size:16px;}
  .modal-actions{position:sticky;bottom:0;background:var(--bg);margin-top:auto;padding:10px 0 calc(10px + var(--m-safe-b));flex-wrap:wrap;z-index:2;}
  .modal-actions .btn{flex:1 1 auto;justify-content:center;min-height:44px;}
  #small-modal-body{max-height:none !important;}
  #pr-modal-body{flex:1;}
  /* ── tables: scroll inside their card, or read as cards (js/mobile.js) ── */
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .table-toolbar{flex-direction:column;align-items:stretch;}
  .table-toolbar>*{width:100%;}
  table:not([data-mcard]){display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;}
  .table-wrap:has(>table[data-mcard]),.table-wrap:has(table[data-mcard]){overflow:visible;border:none;background:transparent;box-shadow:none;}
  .table-wrap[data-mlist]{overflow:visible;border:none;background:transparent;box-shadow:none;}
  .table-wrap[data-mlist] .table-toolbar{background:var(--bg);border:1px solid var(--border);border-radius:10px;margin-bottom:8px;}
  table[data-mcard]{display:block;width:100% !important;min-width:0 !important;}
  table[data-mcard] thead{display:none;}
  table[data-mcard] tbody{display:block;}
  table[data-mcard] tbody tr{display:block;border:1px solid var(--border);border-radius:10px;margin:0 0 8px;padding:8px 12px;background:var(--bg);box-shadow:var(--shadow);}
  table[data-mcard] tbody tr:hover{background:var(--bg);}
  table[data-mcard] td{display:flex;justify-content:space-between;align-items:center;gap:12px;border:none;padding:5px 0;font-size:13px;text-align:right;}
  table[data-mcard] td::before{content:attr(data-l);color:var(--text3);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;flex-shrink:0;text-align:left;}
  table[data-mcard] td:empty,table[data-mcard] td[data-empty],table[data-mcard] td[data-mchk]{display:none;}
  table[data-mcard] td[data-mname]{font-weight:700;font-size:14px;justify-content:flex-start;text-align:left;}
  table[data-mcard] td[data-mname]::before{content:none;}
  table[data-mcard] td:not([data-l]),table[data-mcard] td[data-actions]{justify-content:flex-end;gap:8px;padding-top:8px;flex-wrap:wrap;}
  table[data-mcard] td:not([data-l])::before,table[data-mcard] td[data-actions]::before{content:none;}
  table[data-mcard] td[data-actions] .btn,table[data-mcard] td[data-actions] button{min-height:40px;padding:0 12px;}
  table[data-mcard] .name-cell{justify-content:flex-start;}
  table[data-mcard] .td-overflow{max-width:none;white-space:normal;}
  /* ── the employee 360 on a phone: the detail is the screen; Back returns to the list ── */
  .p3-wrap{grid-template-columns:1fr;height:auto;min-height:0;border:none;background:transparent;}
  .p3-list{display:none;}
  .p3-detail{padding:0;}
  .m-p3-back{display:inline-flex;margin-bottom:10px;}
  /* ── the row menu becomes a sheet (js/mobile.js) ── */
  .row-dd{display:none !important;}
  #m-sheet-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:1800;}
  #m-sheet{position:fixed;left:0;right:0;bottom:0;max-height:70vh;overflow-y:auto;background:var(--bg);border-radius:16px 16px 0 0;box-shadow:0 -10px 40px rgba(0,0,0,.3);z-index:1900;padding:8px 8px calc(12px + var(--m-safe-b));}
  body.m-sheet-open #m-sheet,body.m-sheet-open #m-sheet-backdrop{display:block;}
  .m-sheet-item{display:flex;align-items:center;gap:12px;width:100%;min-height:48px;padding:10px 14px;border:none;background:transparent;font-family:inherit;font-size:14px;font-weight:600;color:var(--text);text-align:left;border-radius:10px;cursor:pointer;}
  .m-sheet-item i{font-size:18px;color:var(--text3);width:22px;}
  .m-sheet-item:active{background:var(--bg2);}
  .m-sheet-title{font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;padding:8px 14px 4px;}
  /* ── toasts above the tab bar; the cloud banner under the company bar ── */
  #toast-container{left:12px;right:12px;bottom:calc(var(--m-tab-h) + var(--m-safe-b) + 12px);}
  .toast{max-width:none;font-size:13px;}
  /* ── the payslip and certificate papers scroll inside themselves ── */
  .payslip-doc{overflow-x:auto;padding:14px;}
  .payslip-doc table{display:table;}
  /* ── the sign-in card ── */
  .auth-card{padding:1.4rem 1.2rem;}
}