@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Inter:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap');
/* =========================================================
   Shared application shell / sidebar
   ========================================================= */
.app-shell{display:flex;align-items:stretch;min-height:100vh;}
.app-sidebar{width:230px;flex-shrink:0;background:var(--sidebar-bg);display:flex;flex-direction:column;padding:20px 14px;position:sticky;top:0;height:100vh;overflow-y:auto;z-index:40;}
.sidebar-logo{display:flex;align-items:center;gap:10px;padding:6px 4px 22px;color:#fff;font-weight:800;font-size:17px;}
.logo-badge{display:inline-flex;align-items:center;justify-content:center;background:#FFFFFF;padding:8px 14px;border-radius:12px;box-shadow:0 1px 2px rgba(0,0,0,0.15);}
.logo-badge img{height:60px;width:auto;display:block;}
.sidebar-logo svg{color:var(--gold-deep);flex-shrink:0;}
.sidebar-nav{display:flex;flex-direction:column;gap:3px;flex:1;}
.navitem{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:9px;color:var(--sidebar-text);text-decoration:none;font-size:13.5px;font-weight:600;transition:background .12s,color .12s;}
.navitem svg{flex-shrink:0;}
.navitem:hover{background:var(--sidebar-hover);color:#fff;}
.navitem.active{background:var(--gold-deep);color:#fff;}
.manager-only{display:none;}
.permission-nav{display:none;}
.nav-timeclock{margin-top:auto;border-top:1px solid rgba(255,255,255,.08);padding-top:14px;}
.sidebar-foot{padding-top:14px;border-top:1px solid rgba(255,255,255,.08);margin-top:10px;}
.main-area{flex:1;min-width:0;}
.sidebar-toggle{display:none;position:fixed;top:14px;left:14px;z-index:50;background:var(--ink);color:#fff;border:none;border-radius:8px;width:38px;height:38px;align-items:center;justify-content:center;cursor:pointer;}
@media(max-width:880px){
  .app-sidebar{position:fixed;left:-240px;transition:left .2s ease;}
  .app-sidebar.open{left:0;}
  .sidebar-toggle{display:flex;}
}

/* =========================================================
   index.html
   ========================================================= */

    body.page-login{
    --bg:#F1F5F9; --surface:#FFFFFF; --surface-2:#F8FAFC; --on-accent:#FFFFFF;
    --ink:#0F172A; --ink-soft:#475569; --ink-faint:#94A3B8; --border:#E2E8F0;
    --red:#DC2626; --red-soft:#FEE2E2; --green:#16A34A; --green-soft:#DCFCE7;
    --gold:rgba(37,99,235,0.12); --gold-deep:#2563EB;
    --sidebar-bg:#0F172A; --sidebar-hover:#1E293B; --sidebar-text:#94A3B8;
    --shadow: 0 1px 2px rgba(15,23,42,0.04), 0 4px 16px rgba(15,23,42,0.06);
  }
  body.page-login *{box-sizing:border-box;} body.page-login{margin:0;}
  body.page-login.dark{
    --bg:#18181B; --surface:#27272A; --surface-2:#303035; --on-accent:#FFFFFF;
    --ink:#F4F4F5; --ink-soft:#A1A1AA; --ink-faint:#71717A; --border:#3F3F46;
    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 4px 16px rgba(0,0,0,0.4);
  }

  html, body.page-login{background:var(--bg);color:var(--ink);font-family:"Inter",sans-serif;-webkit-font-smoothing:antialiased;height:100%;font-size:16px;}
  body.page-login h1, body.page-login h2{font-family:"Inter",sans-serif;font-weight:800;margin:0;}
  body.page-login .wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;}
  body.page-login .gate{max-width:420px;width:100%;}
  body.page-login .logo-badge{display:inline-flex;align-items:center;justify-content:center;background:#FFFFFF;padding:10px 18px;border-radius:14px;box-shadow:0 2px 6px rgba(0,0,0,0.12);}
  body.page-login .logo-badge img{height:60px;width:auto;display:block;}
  body.page-login .eyebrow{font-family:"Inter",sans-serif;font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep);text-align:center;margin-bottom:8px;font-weight:700;}
  body.page-login h1{font-size:28px;font-weight:600;text-align:center;margin-bottom:28px;line-height:1.3;}
  body.page-login .card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:30px;box-shadow:var(--shadow);}
  body.page-login label{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);display:block;margin-bottom:8px;}
  body.page-login select, body.page-login input{width:100%;padding:14px;border-radius:10px;border:1.5px solid var(--border);background:var(--surface);font-size:16px;color:var(--ink);margin-bottom:18px;}
  body.page-login select:focus, body.page-login input:focus{outline:2px solid var(--gold-deep);outline-offset:1px;}
  body.page-login input[type=password]{font-family:"Inter",sans-serif;font-weight:700;letter-spacing:6px;font-size:22px;text-align:center;}
  body.page-login button{width:100%;font-weight:700;font-size:16px;cursor:pointer;border-radius:10px;border:1px solid var(--gold-deep);background:var(--gold-deep);color:var(--on-accent);padding:15px 16px;}
  body.page-login button:hover{opacity:.88;}
  body.page-login .status-msg{font-size:14px;padding:11px 14px;border-radius:9px;margin-top:14px;font-weight:600;}
  body.page-login .status-msg.error{background:var(--red-soft);color:var(--red);}
  body.page-login .settings-toggle{display:block;text-align:center;margin-top:18px;font-size:13px;color:var(--ink-faint);cursor:pointer;text-decoration:underline;background:none;border:none;font-family:"Inter",sans-serif;}
  body.page-login .apibar{display:none;font-family:"Inter",sans-serif;font-weight:700;font-size:12.5px;color:var(--ink-faint);text-align:center;margin-top:14px;}
  body.page-login .apibar.show{display:block;}
  body.page-login .apibar input{display:inline-block;width:240px;margin:8px 4px 0 0;font-size:12.5px;padding:7px 9px;}
  body.page-login .apibar button{width:auto;padding:7px 12px;font-size:12.5px;display:inline-block;}

/* =========================================================
   basket.html
   ========================================================= */

    body.page-basket{
    --bg:#F1F5F9; --surface:#FFFFFF; --surface-2:#F8FAFC; --on-accent:#FFFFFF;
    --ink:#0F172A; --ink-soft:#475569; --ink-faint:#94A3B8; --border:#E2E8F0;
    --red:#DC2626; --red-soft:#FEE2E2; --green:#16A34A; --green-soft:#DCFCE7;
    --gold:rgba(37,99,235,0.12); --gold-deep:#2563EB;
    --sidebar-bg:#0F172A; --sidebar-hover:#1E293B; --sidebar-text:#94A3B8;
    --shadow: 0 1px 2px rgba(15,23,42,0.04), 0 4px 16px rgba(15,23,42,0.06);
  }
  body.page-basket *{box-sizing:border-box;} body.page-basket{margin:0;}
  body.page-basket.dark{
    --bg:#18181B; --surface:#27272A; --surface-2:#303035; --on-accent:#FFFFFF;
    --ink:#F4F4F5; --ink-soft:#A1A1AA; --ink-faint:#71717A; --border:#3F3F46;
    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 4px 16px rgba(0,0,0,0.4);
  }

  html, body.page-basket{background:var(--bg);color:var(--ink);font-family:"Inter",sans-serif;-webkit-font-smoothing:antialiased;height:100%;font-size:16px;}
  body.page-basket h1, body.page-basket h2, body.page-basket h3{font-family:"Inter",sans-serif;font-weight:800;margin:0;}
  body.page-basket .topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 22px;border-bottom:1px solid var(--border);background:var(--surface);}
  body.page-basket .eyebrow{font-family:"Inter",sans-serif;font-weight:700;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep);font-weight:700;}
  body.page-basket .topbar h1{font-size:19px;font-weight:600;}
  body.page-basket .whoami{font-size:14px;color:var(--ink-soft);text-align:right;}
  body.page-basket .whoami b{color:var(--ink);}
  body.page-basket .navlinks{font-family:"Inter",sans-serif;font-weight:700;font-size:12.5px;margin-top:4px;font-weight:700;}
  body.page-basket .navlinks a{color:var(--gold-deep);text-decoration:none;margin-left:12px;}
  body.page-basket .navlinks a:hover{text-decoration:underline;}
  body.page-basket .funcbar{display:flex;gap:8px;flex-wrap:wrap;padding:14px 22px 0;}
  body.page-basket .functab{font-weight:700;font-size:15px;padding:11px 20px;border-radius:999px;border:1.5px solid var(--border);background:var(--surface);color:var(--ink-soft);cursor:pointer;}
  body.page-basket .functab:hover{border-color:var(--gold-deep);color:var(--ink);}
  body.page-basket .functab.active{background:var(--gold-deep);color:var(--on-accent);border-color:var(--gold-deep);}
  body.page-basket .funcpanel{display:none;} body.page-basket .funcpanel.active{display:block;}

  body.page-basket .layout{display:grid;grid-template-columns:1fr 420px;gap:0;}
  @media(max-width:900px){body.page-basket .layout{grid-template-columns:1fr;}}
  body.page-basket .catalog{padding:18px 22px;}
  body.page-basket .searchrow{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap;}
  body.page-basket .searchrow input{flex:1;min-width:180px;padding:13px 14px;border-radius:10px;border:1.5px solid var(--border);background:var(--surface);font-size:16px;}
  body.page-basket .cattabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
  body.page-basket .cattab{font-size:14px;font-weight:700;padding:9px 16px;border-radius:999px;border:1.5px solid var(--border);background:var(--surface);color:var(--ink-soft);cursor:pointer;}
  body.page-basket .cattab.active{background:var(--gold-deep);color:var(--on-accent);border-color:var(--gold-deep);}
  body.page-basket .prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;}
  body.page-basket .prod-card{background:var(--surface);border:1.5px solid var(--border);border-radius:13px;padding:12px 14px 16px;cursor:pointer;box-shadow:var(--shadow);display:flex;flex-direction:column;justify-content:space-between;min-height:104px;}
  body.page-basket .pthumb{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:9px;margin-bottom:10px;background:var(--surface-2);}
  body.page-basket .pthumb-placeholder{display:flex;align-items:center;justify-content:center;color:var(--ink-faint);border:1px dashed var(--border);}
  body.page-basket .prod-card:hover{border-color:var(--gold-deep);}
  body.page-basket .prod-card.outofstock{opacity:.45;cursor:not-allowed;}
  body.page-basket .prod-card .pname{font-weight:700;font-size:15.5px;line-height:1.32;margin-bottom:8px;}
  body.page-basket .prod-card .pname{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  body.page-basket .prod-card .pmeta{display:flex;justify-content:space-between;align-items:flex-end;}
  body.page-basket .prod-card .pprice{font-family:"Inter",sans-serif;font-weight:700;font-weight:700;font-size:16px;}
  body.page-basket .prod-card .pstock{font-size:12px;color:var(--ink-faint);font-weight:600;}
  body.page-basket .prod-card .pstock.low{color:var(--red);font-weight:700;}
  body.page-basket .prod-card .pvariants{font-size:11.5px;color:var(--gold-deep);font-weight:700;margin-top:4px;}
  body.page-basket .catalog-pager{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:18px;color:var(--ink-soft);font-size:13px;flex-wrap:wrap;}
  body.page-basket .catalog-pager>span:last-child{display:flex;align-items:center;gap:10px;}
  body.page-basket .catalog-pager button{padding:8px 12px;font-size:13px;}

  body.page-basket .cartpane{background:var(--surface);border-left:1px solid var(--border);display:flex;flex-direction:column;}
  @media(max-width:900px){body.page-basket .cartpane{border-left:none;border-top:1px solid var(--border);}}
  body.page-basket .cart-head{padding:16px 20px;border-bottom:1px solid var(--border);}
  body.page-basket .quota-bar-track{height:10px;border-radius:999px;background:var(--surface-2);overflow:hidden;margin-top:10px;}
  body.page-basket .quota-bar-fill{height:100%;background:var(--green);border-radius:999px;transition:width .3s ease;}
  body.page-basket .quota-label{display:flex;justify-content:space-between;font-size:12.5px;color:var(--ink-soft);margin-top:6px;font-weight:600;}
  body.page-basket .cart-items{max-height:360px;overflow-y:auto;padding:10px 20px;}
  body.page-basket .cart-line{padding:10px 0;border-bottom:1px dashed var(--border);}
  body.page-basket .cart-line-top{display:flex;align-items:center;gap:8px;}
  body.page-basket .cart-line .cname{flex:1;font-size:14.5px;font-weight:700;}
  body.page-basket .cart-line .cprice{font-size:12.5px;color:var(--ink-faint);}
  body.page-basket .qtybtn{
    width:32px;
    height:32px;
    padding:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:var(--ink);
}
  body.page-basket .cart-line .qty{width:22px;text-align:center;font-family:"Inter",sans-serif;font-weight:700;font-size:14px;font-weight:700;}
  body.page-basket .cart-line .lineTotal{width:68px;text-align:right;font-family:"Inter",sans-serif;font-weight:700;font-size:14px;font-weight:700;}
  body.page-basket .rm{background:none;border:none;color:var(--red);cursor:pointer;font-size:17px;padding:0 4px;}
  body.page-basket .cart-line-disc{display:flex;align-items:center;gap:8px;margin-top:6px;padding-left:2px;}
  body.page-basket .cart-line-disc label{font-size:11.5px;color:var(--ink-faint);white-space:nowrap;margin:0;font-weight:600;}
  body.page-basket .cart-line-disc input{width:80px;padding:6px 8px;font-size:13px;border-radius:7px;}
  body.page-basket .cart-empty{color:var(--ink-faint);font-size:15px;text-align:center;padding:34px 0;}
  body.page-basket .cart-foot{padding:16px 20px;border-top:1px solid var(--border);}
  body.page-basket .sumrow{display:flex;justify-content:space-between;font-size:14px;color:var(--ink-soft);margin-bottom:6px;font-weight:600;}
  body.page-basket .totalrow{display:flex;justify-content:space-between;align-items:baseline;margin:10px 0 12px;}
  body.page-basket .totalrow .lbl{font-size:14.5px;color:var(--ink-soft);font-weight:700;}
  body.page-basket .totalrow .amt{font-family:"Inter",sans-serif;font-weight:700;font-size:26px;font-weight:700;}
  body.page-basket .orderdiscrow{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
  body.page-basket .orderdiscrow label{font-size:12.5px;font-weight:700;color:var(--ink-soft);white-space:nowrap;margin:0;}
  body.page-basket .orderdiscrow input{flex:1;padding:9px 11px;font-size:14px;}
  body.page-basket .togglerow{display:flex;align-items:center;gap:10px;margin:10px 0;}
  body.page-basket .more-options-toggle{display:flex;justify-content:space-between;align-items:center;width:100%;background:var(--surface-2);border:1px solid var(--border);border-radius:9px;padding:10px 14px;font-weight:700;font-size:13.5px;color:var(--ink-soft);cursor:pointer;margin:12px 0 4px;}
  body.page-basket .more-options-toggle:hover{background:var(--gold);}
  body.page-basket .more-options-toggle .badge{display:inline-block;background:var(--gold-deep);color:#fff;border-radius:999px;font-size:11px;font-weight:800;padding:2px 8px;margin-left:8px;}
  body.page-basket .more-options-panel{padding:4px 2px 2px;}
  body.page-basket .togglelabel{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;color:var(--ink-soft);text-transform:none;letter-spacing:0;margin:0;flex:1;}
  body.page-basket .togglelabel input[type=checkbox]{width:18px;height:18px;accent-color:var(--ink);}
  body.page-basket .denomrow{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0;}
  body.page-basket .denombtn{
    font-family:"Inter",sans-serif;
    font-weight:700;
    font-size:13.5px;
    padding:8px 12px;
    border-radius:8px;
    border:1.5px solid var(--border);
    background:var(--surface-2);
    color:var(--ink);
    cursor:pointer;
}
  body.page-basket .cashrow{display:flex;gap:10px;align-items:center;margin:10px 0;}
  body.page-basket .cashrow label{white-space:nowrap;font-weight:700;font-size:13px;color:var(--ink-soft);}
  body.page-basket .cashrow input{flex:1;padding:12px 12px;border-radius:9px;border:1.5px solid var(--border);font-family:"Inter",sans-serif;font-weight:700;font-size:17px;}
  body.page-basket .changeline{display:flex;justify-content:space-between;font-size:15px;margin-top:6px;font-weight:600;}
  body.page-basket .changeline .amt2{font-family:"Inter",sans-serif;font-weight:700;font-weight:700;}
  body.page-basket .changeline.short .amt2{color:var(--red);}
  body.page-basket .changeline.ok .amt2{color:var(--green);}
  body.page-basket button{font-weight:700;font-size:15px;cursor:pointer;border-radius:10px;border:1.5px solid var(--gold-deep);background:var(--gold-deep);color:var(--on-accent);padding:13px 18px;}
  body.page-basket button.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--border);}
  body.page-basket button:disabled{opacity:.4;cursor:not-allowed;}
  body.page-basket .btnrow{display:flex;gap:10px;flex-wrap:wrap;}
  body.page-basket .databar{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 20px;border-top:1px solid var(--border);flex-wrap:wrap;}
  body.page-basket .databar .stat{font-size:13.5px;color:var(--ink-soft);font-weight:600;}
  body.page-basket .databar .stat b{color:var(--ink);font-family:"Inter",sans-serif;font-weight:700;}
  body.page-basket .today-list{max-height:320px;overflow-y:auto;margin-top:12px;}
  body.page-basket .today-section{margin-top:8px;border-top:1px solid var(--border);}
  body.page-basket .today-row{display:flex;justify-content:space-between;font-size:14px;padding:8px 0;border-bottom:1px dashed var(--border);}
  body.page-basket .today-row .voidbtn{color:var(--red);background:none;border:none;font-size:12.5px;cursor:pointer;padding:0;font-weight:700;}
  body.page-basket .modal-bg{position:fixed;inset:0;background:rgba(61,43,31,.5);display:none;align-items:center;justify-content:center;z-index:50;padding:20px;}
  body.page-basket .modal-bg.show{display:flex;}
  body.page-basket .modal{background:var(--surface);border-radius:16px;max-width:440px;width:100%;max-height:88vh;overflow-y:auto;padding:26px;box-shadow:0 20px 60px rgba(0,0,0,.28);}
  body.page-basket .modal h2{font-size:21px;margin-bottom:6px;}
  body.page-basket .receipt{font-family:"Inter",sans-serif;font-weight:700;font-size:13.5px;line-height:1.7;margin-top:12px;}
  body.page-basket .receipt hr{border:none;border-top:1px dashed var(--border);margin:10px 0;}
  body.page-basket .receipt .rline{display:flex;justify-content:space-between;}
  body.page-basket .receipt .center{text-align:center;}
  body.page-basket .variant-pick{display:flex;flex-direction:column;gap:10px;margin:14px 0;}
  body.page-basket .variant-opt{display:flex;justify-content:space-between;align-items:center;padding:13px 15px;border:1.5px solid var(--border);border-radius:11px;cursor:pointer;font-size:15px;font-weight:600;}
  body.page-basket .variant-opt:hover{border-color:var(--gold-deep);}
  body.page-basket .variant-opt.disabled{opacity:.4;cursor:not-allowed;}
  body.page-basket label{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);display:block;margin-bottom:6px;}
  body.page-basket input, body.page-basket select{width:100%;padding:11px 12px;border-radius:9px;border:1.5px solid var(--border);background:var(--surface);font-size:15px;color:var(--ink);}

  body.page-basket .page{max-width:1000px;margin:0 auto;padding:20px 22px 60px;}
  body.page-basket .card{background:var(--surface);border:1.5px solid var(--border);border-radius:15px;padding:20px 22px;box-shadow:var(--shadow);margin-bottom:18px;}
  body.page-basket .card h3{font-size:17px;font-weight:700;margin-bottom:4px;}
  body.page-basket .card .sub{font-size:14px;color:var(--ink-faint);margin-bottom:14px;}
  body.page-basket .form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:12px;}
  body.page-basket table{width:100%;border-collapse:collapse;font-size:14.5px;}
  body.page-basket th{text-align:left;font-family:"Inter",sans-serif;font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-faint);padding:10px 12px;border-bottom:2px solid var(--border);font-weight:700;}
  body.page-basket td{padding:11px 12px;border-bottom:1px solid var(--border);}
  body.page-basket tr:last-child td{border-bottom:none;}
  body.page-basket .empty{color:var(--ink-faint);font-size:14.5px;padding:18px 0;text-align:center;}
  body.page-basket .pill{display:inline-block;padding:4px 12px;border-radius:999px;font-size:12.5px;font-weight:700;}
  body.page-basket .pill.in{background:var(--green-soft);color:var(--green);}
  body.page-basket .pill.out{background:#EDE3D0;color:var(--gold-deep);}
  body.page-basket .trx-link{background:none;border:none;padding:0;font:inherit;font-weight:700;color:var(--gold-deep);cursor:pointer;text-decoration:underline;text-underline-offset:2px;}
  body.page-basket .trx-link:hover{color:var(--ink);}
  body.page-basket .clockcard{max-width:400px;margin:0 auto;text-align:center;}
  body.page-basket .clock-time{font-family:"Inter",sans-serif;font-weight:700;font-size:44px;font-weight:700;margin:12px 0;}
  body.page-basket .clock-status{font-size:15px;color:var(--ink-soft);margin-bottom:16px;min-height:20px;font-weight:600;}
  body.page-basket .qtybtn:hover, body.page-basket .denombtn:hover{
      border-color:var(--gold-deep);
      color:var(--gold-deep);
  }
  @media print{ body.page-basket *{visibility:hidden;} body.page-basket #printArea, body.page-basket #printArea *{visibility:visible;} body.page-basket #printArea{position:absolute;top:0;left:0;width:280px;} body.page-basket .receipt-pagebreak{page-break-after:always;} }
  
/* =========================================================
   timeclock.html
   ========================================================= */

body.page-timeclock{
  --bg:#F1F5F9; --surface:#FFFFFF; --surface-2:#F8FAFC; --on-accent:#FFFFFF;
  --ink:#0F172A; --ink-soft:#475569; --ink-faint:#94A3B8; --border:#E2E8F0;
  --red:#DC2626; --red-soft:#FEE2E2; --green:#16A34A; --green-soft:#DCFCE7;
  --gold:rgba(37,99,235,0.12); --gold-deep:#2563EB;
  --sidebar-bg:#0F172A; --sidebar-hover:#1E293B; --sidebar-text:#94A3B8;
  --shadow:0 1px 2px rgba(15,23,42,.04),0 4px 16px rgba(15,23,42,.06);
}
body.page-timeclock *{box-sizing:border-box;}
body.page-timeclock{margin:0;background:var(--bg);color:var(--ink);font-family:"Inter",sans-serif;-webkit-font-smoothing:antialiased;font-size:16px;}
body.page-timeclock.dark{
  --bg:#18181B; --surface:#27272A; --surface-2:#303035; --on-accent:#FFFFFF;
  --ink:#F4F4F5; --ink-soft:#A1A1AA; --ink-faint:#71717A; --border:#3F3F46;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 4px 16px rgba(0,0,0,.4);
}
body.page-timeclock h1,body.page-timeclock h2,body.page-timeclock h3{font-family:"Inter",sans-serif;margin:0;}
body.page-timeclock .topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 22px;border-bottom:1px solid var(--border);background:var(--surface);}
body.page-timeclock .eyebrow{font-weight:700;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep);}
body.page-timeclock .topbar h1{font-size:19px;font-weight:800;}
body.page-timeclock .whoami{font-size:14px;color:var(--ink-soft);text-align:right;}
body.page-timeclock .whoami b{color:var(--ink);}
body.page-timeclock .page{max-width:1180px;margin:0 auto;padding:30px 28px 56px;}
body.page-timeclock .timeclock-grid{display:grid;grid-template-columns:minmax(340px,430px) minmax(0,1fr);gap:22px;align-items:start;}
body.page-timeclock .card{background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);}
body.page-timeclock .clockcard{padding:24px;}
body.page-timeclock .clock-heading,body.page-timeclock .attendance-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;}
body.page-timeclock .section-kicker{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:4px;}
body.page-timeclock .clock-heading h2,body.page-timeclock .attendance-heading h2{font-size:20px;font-weight:800;}
body.page-timeclock .terminal-badge,body.page-timeclock .attendance-summary{display:inline-flex;align-items:center;white-space:nowrap;padding:6px 10px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);font-size:12px;font-weight:700;color:var(--ink-soft);}
body.page-timeclock .clock-display{margin:24px 0 20px;padding:24px 16px;text-align:center;border-radius:14px;background:var(--surface-2);border:1px solid var(--border);}
body.page-timeclock .clock-time{font-size:clamp(38px,5vw,54px);line-height:1;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.035em;color:var(--ink);}
body.page-timeclock .clock-date{margin-top:9px;font-size:13px;font-weight:600;color:var(--ink-soft);}
body.page-timeclock .clock-help{margin:0 0 18px;font-size:13.5px;line-height:1.55;color:var(--ink-soft);}
body.page-timeclock .clock-form{display:grid;gap:14px;}
body.page-timeclock .field-group label{display:block;margin-bottom:7px;font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);}
body.page-timeclock .field-group select,body.page-timeclock .field-group input{width:100%;min-height:46px;padding:11px 12px;border:1.5px solid var(--border);border-radius:10px;background:var(--surface);color:var(--ink);font:inherit;}
body.page-timeclock .field-group select:focus,body.page-timeclock .field-group input:focus{outline:2px solid var(--gold-deep);outline-offset:1px;border-color:var(--gold-deep);}
body.page-timeclock .field-group input[type=password]{font-weight:700;letter-spacing:7px;font-size:20px;text-align:center;}
body.page-timeclock .selected-status{display:flex;align-items:center;gap:9px;margin:16px 0 12px;padding:10px 12px;border-radius:10px;background:var(--surface-2);border:1px solid var(--border);font-size:13px;font-weight:700;color:var(--ink-soft);}
body.page-timeclock .status-dot{width:9px;height:9px;border-radius:50%;background:var(--ink-faint);flex:none;}
body.page-timeclock .selected-status.is-active .status-dot{background:var(--green);}
body.page-timeclock .selected-status.is-active{color:var(--green);background:var(--green-soft);border-color:transparent;}
body.page-timeclock .clock-action-btn{width:100%;min-height:50px;border-radius:10px;border:1px solid var(--gold-deep);background:var(--gold-deep);color:#fff;font:inherit;font-weight:800;font-size:15px;cursor:pointer;transition:filter .15s ease,transform .05s ease;}
body.page-timeclock .clock-action-btn:hover{filter:brightness(.94);}
body.page-timeclock .clock-action-btn:active{transform:translateY(1px);}
body.page-timeclock .clock-action-btn.is-clockout{background:var(--surface);color:var(--red);border-color:var(--red);}
body.page-timeclock .clock-status{min-height:20px;margin-top:12px;text-align:center;font-size:13px;font-weight:600;color:var(--ink-soft);}
body.page-timeclock .attendance-card{padding:22px 22px 8px;overflow:hidden;}
body.page-timeclock .attendance-heading{padding-bottom:16px;border-bottom:1px solid var(--border);}
body.page-timeclock .attendance-table-wrap{overflow-x:auto;}
body.page-timeclock table{width:100%;border-collapse:collapse;font-size:14px;}
body.page-timeclock th{text-align:left;padding:12px 10px;border-bottom:1px solid var(--border);font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-faint);white-space:nowrap;}
body.page-timeclock td{padding:14px 10px;border-bottom:1px solid var(--border);vertical-align:middle;}
body.page-timeclock tbody tr:last-child td{border-bottom:none;}
body.page-timeclock tbody tr:hover{background:var(--surface-2);}
body.page-timeclock td:nth-child(2),body.page-timeclock td:nth-child(3){font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap;}
body.page-timeclock .empty{padding:36px 12px;text-align:center;color:var(--ink-faint);}
body.page-timeclock .pill{display:inline-flex;align-items:center;padding:5px 9px;border-radius:999px;font-size:11.5px;font-weight:800;white-space:nowrap;}
body.page-timeclock .pill.in{background:var(--green-soft);color:var(--green);}
body.page-timeclock .pill.out{background:var(--surface-2);color:var(--ink-soft);border:1px solid var(--border);}
@media(max-width:980px){
  body.page-timeclock .timeclock-grid{grid-template-columns:1fr;}
  body.page-timeclock .clockcard{max-width:none;}
}
@media(max-width:620px){
  body.page-timeclock .page{padding:20px 14px 42px;}
  body.page-timeclock .topbar{padding:13px 14px 13px 62px;}
  body.page-timeclock .whoami{display:none;}
  body.page-timeclock .clockcard{padding:18px;}
  body.page-timeclock .attendance-card{padding:18px 14px 6px;}
  body.page-timeclock .clock-display{padding:20px 10px;margin:20px 0 18px;}
  body.page-timeclock th,body.page-timeclock td{padding-left:8px;padding-right:8px;}
}

/* =========================================================
   admin.html
   ========================================================= */

    body.page-admin{
    --bg:#F1F5F9; --surface:#FFFFFF; --surface-2:#F8FAFC; --on-accent:#FFFFFF;
    --ink:#0F172A; --ink-soft:#475569; --ink-faint:#94A3B8; --border:#E2E8F0;
    --red:#DC2626; --red-soft:#FEE2E2; --green:#16A34A; --green-soft:#DCFCE7;
    --gold:rgba(37,99,235,0.12); --gold-deep:#2563EB;
    --sidebar-bg:#0F172A; --sidebar-hover:#1E293B; --sidebar-text:#94A3B8;
    --shadow: 0 1px 2px rgba(15,23,42,0.04), 0 4px 16px rgba(15,23,42,0.06);
  }
  body.page-admin *{box-sizing:border-box;} body.page-admin{margin:0;}
  body.page-admin.dark{
    --bg:#18181B; --surface:#27272A; --surface-2:#303035; --on-accent:#FFFFFF;
    --ink:#F4F4F5; --ink-soft:#A1A1AA; --ink-faint:#71717A; --border:#3F3F46;
    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 4px 16px rgba(0,0,0,0.4);
  }

  html, body.page-admin{background:var(--bg);color:var(--ink);font-family:"Inter",sans-serif;-webkit-font-smoothing:antialiased;font-size:16px;}
  body.page-admin .app{max-width:1200px;margin:0 auto;padding:30px 22px 90px;}
  body.page-admin h1, body.page-admin h2, body.page-admin h3{font-family:"Inter",sans-serif;font-weight:800;margin:0;}
  body.page-admin .header{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid var(--border);}
  body.page-admin .eyebrow{font-family:"Inter",sans-serif;font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:8px;font-weight:700;}
  body.page-admin h1{font-size:30px;font-weight:600;}
  body.page-admin .header p{margin:8px 0 0;color:var(--ink-soft);font-size:15px;}
  body.page-admin .whoami{font-size:14px;color:var(--ink-soft);text-align:right;}
  body.page-admin .whoami b{color:var(--ink);}
  body.page-admin .navlinks{font-family:"Inter",sans-serif;font-weight:700;font-size:12.5px;margin-top:4px;font-weight:700;}
  body.page-admin .navlinks a{color:var(--gold-deep);text-decoration:none;margin-left:12px;}
  body.page-admin .navlinks a:hover{text-decoration:underline;}
  body.page-admin .tabs{display:flex;gap:8px;margin-bottom:26px;flex-wrap:wrap;}
  body.page-admin .tab{font-weight:700;font-size:15px;padding:11px 20px;border-radius:999px;border:1.5px solid var(--border);background:var(--surface);color:var(--ink-soft);cursor:pointer;}
  body.page-admin .tab:hover{border-color:var(--gold-deep);color:var(--ink);}
  body.page-admin .tab.active{background:var(--gold-deep);color:var(--on-accent);border-color:var(--gold-deep);}
  body.page-admin .panel{display:none;} body.page-admin .panel.active{display:block;}
  body.page-admin .subtabs{display:flex;gap:6px;flex-wrap:wrap;}
  body.page-admin .subtab{font-weight:700;font-size:13.5px;padding:8px 14px;border-radius:999px;border:1.5px solid var(--border);background:var(--surface);color:var(--ink-soft);cursor:pointer;}
  body.page-admin .subtab:hover{border-color:var(--gold-deep);color:var(--ink);}
  body.page-admin .subtab.active{background:var(--gold-deep);color:var(--on-accent);border-color:var(--gold-deep);}
  body.page-admin .subpanel{display:none;} body.page-admin .subpanel.active{display:block;}
  body.page-admin .dash-range{font-weight:700;font-size:13.5px;padding:8px 14px;border-radius:999px;border:1.5px solid var(--border);background:var(--surface);color:var(--ink-soft);cursor:pointer;}
  body.page-admin .dash-range:hover{border-color:var(--gold-deep);color:var(--ink);}
  body.page-admin .dash-range.active{background:var(--gold-deep);color:var(--on-accent);border-color:var(--gold-deep);}
  body.page-admin .exp-range{font-weight:700;font-size:13.5px;padding:8px 14px;border-radius:999px;border:1.5px solid var(--border);background:var(--surface);color:var(--ink-soft);cursor:pointer;}
  body.page-admin .exp-range:hover{border-color:var(--gold-deep);color:var(--ink);}
  /* Foot-traffic lookback-window picker on the dashboard — same look as .dash-range/.exp-range,
     kept as its own class (not shared) since it's wired to its own click handler with its own
     data attribute (data-days, not data-range) and must not be picked up by the .dash-range
     click handler's querySelectorAll('.dash-range'). */
  body.page-admin .traffic-range{font-size:12px;padding:6px 12px;border-radius:999px;border:1.5px solid var(--border);background:var(--surface);color:var(--ink-soft);cursor:pointer;font-weight:700;}
  body.page-admin .traffic-range:hover{border-color:var(--gold-deep);color:var(--ink);}
  body.page-admin .traffic-range.active{background:var(--gold-deep);color:var(--on-accent);border-color:var(--gold-deep);}
  body.page-admin .exp-range.active{background:var(--gold-deep);color:var(--on-accent);border-color:var(--gold-deep);}
  body.page-admin .modal-bg{position:fixed;inset:0;background:rgba(15,23,42,.5);display:none;align-items:center;justify-content:center;z-index:200;padding:20px;}
  body.page-admin .modal-bg.show{display:flex;}
  /* Generic confirmations can be opened from another modal (for example Add Product →
     Add new category), so they must sit above every feature modal regardless of DOM order. */
  body.page-admin #genericModal{z-index:12000;}
  body.page-admin .modal{background:var(--surface);border-radius:16px;max-width:440px;width:100%;max-height:88vh;overflow-y:auto;padding:26px;box-shadow:0 20px 60px rgba(0,0,0,.28);}
  body.page-admin .modal h3{margin-bottom:8px;}
  body.page-admin .modal .modal-msg{font-size:14.5px;color:var(--ink-soft);margin-bottom:16px;line-height:1.5;}
  body.page-admin .modal .modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px;}
  body.page-admin .jeline{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:8px;margin-bottom:8px;align-items:end;}
  body.page-admin .grid{display:grid;gap:18px;}
  body.page-admin .grid.cols-4{grid-template-columns:repeat(4,1fr);}
  body.page-admin .grid.cols-2{grid-template-columns:1.3fr 1fr;}
  @media(max-width:900px){body.page-admin .grid.cols-4{grid-template-columns:repeat(2,1fr);} body.page-admin .grid.cols-2{grid-template-columns:1fr;}}
  body.page-admin .card{background:var(--surface);border:1.5px solid var(--border);border-radius:15px;padding:20px 22px;box-shadow:var(--shadow);}
  body.page-admin .panel > .card,
  body.page-admin .subpanel > .card,
  body.page-admin .subpanel > .status-msg,
  body.page-admin .subpanel > .compliance-banner,
  body.page-admin #booksControls > .card,
  body.page-admin #fsControls > .card{margin-bottom:18px;}
  body.page-admin .card h3{font-size:17px;font-weight:700;margin-bottom:4px;}
  body.page-admin .card .sub{font-size:14px;color:var(--ink-faint);margin-bottom:14px;}
  body.page-admin .stat{font-family:"Inter",sans-serif;font-weight:700;font-size:26px;font-weight:700;}
  body.page-admin .stat-label{font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-faint);margin-bottom:6px;font-weight:700;}
  body.page-admin .trend{font-size:13.5px;font-weight:700;margin-top:6px;}
  body.page-admin .trend.up{color:var(--green);} body.page-admin .trend.down{color:var(--red);}
  body.page-admin table{width:100%;border-collapse:collapse;font-size:14.5px;}
  body.page-admin th{text-align:left;font-family:"Inter",sans-serif;font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-faint);padding:10px 12px;border-bottom:2px solid var(--border);font-weight:700;}
  body.page-admin td{padding:11px 12px;border-bottom:1px solid var(--border);}
  body.page-admin #isTable td:not(:first-child),
  body.page-admin #equityTable td:not(:first-child),
  body.page-admin #bsTable td:not(:first-child),
  body.page-admin #cfTable td:not(:first-child),
  body.page-admin #trialTable td:not(:first-child),
  body.page-admin #trialTable th:not(:first-child){text-align:right;}
  body.page-admin tr:last-child td{border-bottom:none;}
  body.page-admin .pill{display:inline-block;padding:4px 12px;border-radius:999px;font-size:12.5px;font-weight:700;}
  body.page-admin .pill.low{background:var(--red-soft);color:var(--red);}
  body.page-admin .pill.ok{background:var(--green-soft);color:var(--green);}
  body.page-admin .pill.dead{background:#EDE3D0;color:var(--gold-deep);}
  body.page-admin .form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:12px;align-items:end;}
  body.page-admin label{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);display:block;margin-bottom:6px;}
  body.page-admin input, body.page-admin select{width:100%;padding:11px 12px;border-radius:9px;border:1.5px solid var(--border);background:var(--surface);font-size:15px;color:var(--ink);}
  body.page-admin .variant-picker{position:relative;}
  body.page-admin .variant-picker-row{display:flex;gap:8px;align-items:center;}
  body.page-admin .variant-picker-row input[type=text]{flex:1;margin-bottom:0;}
  body.page-admin .variant-picker-list{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:40;background:var(--surface);border:1.5px solid var(--border);border-radius:9px;max-height:280px;overflow-y:auto;box-shadow:var(--shadow);display:none;}
  body.page-admin .variant-picker-list.show{display:block;}
  body.page-admin .variant-picker-item{padding:9px 12px;cursor:pointer;border-bottom:1px solid var(--border);}
  body.page-admin .variant-picker-item:last-child{border-bottom:none;}
  body.page-admin .variant-picker-item:hover,body.page-admin .variant-picker-item.active{background:var(--surface-2);}
  body.page-admin .variant-picker-item .vp-name{font-weight:700;font-size:14px;color:var(--ink);}
  body.page-admin .variant-picker-item .vp-meta{font-size:12px;color:var(--ink-faint);margin-top:2px;display:flex;justify-content:space-between;gap:8px;}
  body.page-admin .variant-picker-empty{padding:12px;color:var(--ink-faint);font-size:13px;}
  body.page-admin .vp-stock-badge{font-weight:700;color:var(--green);}
  body.page-admin .vp-stock-badge.zero{color:var(--red);}
  body.page-admin .vp-stock-pill{font-size:12px;font-weight:700;padding:6px 10px;border-radius:999px;background:var(--surface-2);color:var(--ink-soft);white-space:nowrap;flex:none;}
  body.page-admin .vp-stock-pill.zero{background:var(--red-soft);color:var(--red);}
  body.page-admin .vp-stock-pill:empty{display:none;}
  body.page-admin .import-preview-scroll{max-height:420px;overflow:auto;border:1px solid var(--border);border-radius:10px;}
  body.page-admin .import-flag{display:block;font-size:12px;font-weight:600;margin-top:2px;}
  body.page-admin .import-flag.error{color:var(--red);}
  body.page-admin .import-flag.warn{color:var(--gold-deep);}
  body.page-admin .import-flag.info{color:var(--ink-faint);font-weight:500;}
  body.page-admin tr.import-row-error{background:var(--red-soft);}
  body.page-admin tr.import-row-warn{background:#FFF7E6;}
  body.page-admin .import-select-cell{width:36px;text-align:center;}
  body.page-admin .import-select-cell input[type=checkbox]{width:17px;height:17px;cursor:pointer;}
  body.page-admin .import-stock-input{min-width:80px;max-width:110px;}
  body.page-admin .import-pager{min-height:30px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 2px;color:var(--ink-soft);font-size:12px;}
  body.page-admin .import-pager-actions{display:flex;align-items:center;gap:8px;}
  body.page-admin .import-pager .compact-btn{min-height:30px;padding:4px 10px;}
  body.page-admin button{font-weight:700;font-size:14.5px;cursor:pointer;border-radius:9px;border:1.5px solid var(--gold-deep);background:var(--gold-deep);color:var(--on-accent);padding:11px 18px;}
  body.page-admin button.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--border);}
  body.page-admin button.danger{background:var(--red);border-color:var(--red);}
  body.page-admin .btnrow{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px;}
  body.page-admin .empty{color:var(--ink-faint);font-size:14.5px;padding:18px 0;text-align:center;}
  body.page-admin .section-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;}
  body.page-admin .variant-block{border:1.5px dashed var(--border);border-radius:11px;padding:14px;margin-bottom:12px;}
  body.page-admin .variant-block .form-row{margin-bottom:8px;}
  body.page-admin .apibar{font-family:"Inter",sans-serif;font-weight:700;font-size:12.5px;color:var(--ink-faint);margin-bottom:16px;}
  body.page-admin .apibar input{display:inline-block;width:270px;padding:6px 9px;font-size:12.5px;}
  body.page-admin .status-msg{font-size:14px;padding:10px 14px;border-radius:9px;margin-bottom:14px;font-weight:600;}
  body.page-admin .status-msg.error{background:var(--red-soft);color:var(--red);}
  body.page-admin .status-msg.ok{background:var(--green-soft);color:var(--green);}
  body.page-admin #birPrintArea{display:none;}
  @media print{
    body.page-admin *{visibility:hidden;}
    body.page-admin #birPrintArea, body.page-admin #birPrintArea *{visibility:visible;}
    body.page-admin #birPrintArea{display:block;position:absolute;top:0;left:0;width:100%;padding:20px;}
    body.page-admin #birPrintArea table{margin-bottom:20px;}
  }
  
/* =========================================================
   tracker.html
   ========================================================= */

  body.page-tracker{
    --bg:#EFE6D8; --surface:#FBF7EF; --surface-2:#F3EBDB; --on-accent:#FFFFFF;
    --ink:#3D2B1F; --ink-soft:#6B5744; --ink-faint:#7A6852; --border:#DDD0B8;
    --red:#B23A2F; --red-soft:#F1DCD8; --green:#4A6741; --green-soft:#DFE6D3;
    --gold:#C9A876; --gold-deep:#A6824F;
    --shadow: 0 1px 2px rgba(61,43,31,0.06), 0 4px 16px rgba(61,43,31,0.06);
  }
  body.page-tracker *{box-sizing:border-box;} body.page-tracker{margin:0;}
  html, body.page-tracker{background:var(--bg);color:var(--ink);font-family:"Inter",sans-serif;-webkit-font-smoothing:antialiased;font-size:16px;}
  body.page-tracker .app{max-width:1200px;margin:0 auto;padding:30px 22px 90px;}
  body.page-tracker h1, body.page-tracker h2, body.page-tracker h3{font-family:"Fraunces",serif;margin:0;}
  body.page-tracker .header{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid var(--border);}
  body.page-tracker .eyebrow{font-family:"Space Mono",monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:8px;font-weight:700;}
  body.page-tracker h1{font-size:30px;font-weight:600;}
  body.page-tracker .header p{margin:8px 0 0;color:var(--ink-soft);font-size:15px;}
  body.page-tracker .whoami{font-size:14px;color:var(--ink-soft);text-align:right;}
  body.page-tracker .whoami b{color:var(--ink);}
  body.page-tracker .navlinks{font-family:"Space Mono",monospace;font-size:12.5px;margin-top:4px;font-weight:700;}
  body.page-tracker .navlinks a{color:var(--gold-deep);text-decoration:none;margin-left:12px;}
  body.page-tracker .navlinks a:hover{text-decoration:underline;}
  body.page-tracker .tabs{display:flex;gap:8px;margin-bottom:26px;flex-wrap:wrap;}
  body.page-tracker .tab{font-weight:700;font-size:15px;padding:11px 20px;border-radius:999px;border:1.5px solid var(--border);background:var(--surface);color:var(--ink-soft);cursor:pointer;}
  body.page-tracker .tab:hover{border-color:var(--gold-deep);color:var(--ink);}
  body.page-tracker .tab.active{background:var(--ink);color:var(--on-accent);border-color:var(--ink);}
  body.page-tracker .panel{display:none;} body.page-tracker .panel.active{display:block;}
  body.page-tracker .grid{display:grid;gap:18px;}
  body.page-tracker .grid.cols-4{grid-template-columns:repeat(4,1fr);}
  body.page-tracker .grid.cols-2{grid-template-columns:1.3fr 1fr;}
  @media(max-width:900px){body.page-tracker .grid.cols-4{grid-template-columns:repeat(2,1fr);} body.page-tracker .grid.cols-2{grid-template-columns:1fr;}}
  body.page-tracker .card{background:var(--surface);border:1.5px solid var(--border);border-radius:15px;padding:20px 22px;box-shadow:var(--shadow);}
  body.page-tracker .card h3{font-size:17px;font-weight:700;margin-bottom:4px;}
  body.page-tracker .card .sub{font-size:14px;color:var(--ink-faint);margin-bottom:14px;}
  body.page-tracker .stat{font-family:"Space Mono",monospace;font-size:26px;font-weight:700;}
  body.page-tracker .stat-label{font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-faint);margin-bottom:6px;font-weight:700;}
  body.page-tracker .trend{font-size:13.5px;font-weight:700;margin-top:6px;}
  body.page-tracker .trend.up{color:var(--green);} body.page-tracker .trend.down{color:var(--red);}
  body.page-tracker table{width:100%;border-collapse:collapse;font-size:14.5px;}
  body.page-tracker th{text-align:left;font-family:"Space Mono",monospace;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-faint);padding:10px 12px;border-bottom:2px solid var(--border);font-weight:700;}
  body.page-tracker td{padding:11px 12px;border-bottom:1px solid var(--border);}
  body.page-tracker tr:last-child td{border-bottom:none;}
  body.page-tracker .pill{display:inline-block;padding:4px 12px;border-radius:999px;font-size:12.5px;font-weight:700;}
  body.page-tracker .pill.low{background:var(--red-soft);color:var(--red);}
  body.page-tracker .pill.ok{background:var(--green-soft);color:var(--green);}
  body.page-tracker .pill.dead{background:#EDE3D0;color:var(--gold-deep);}
  body.page-tracker .form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:12px;}
  body.page-tracker label{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);display:block;margin-bottom:6px;}
  body.page-tracker input, body.page-tracker select{width:100%;padding:11px 12px;border-radius:9px;border:1.5px solid var(--border);background:var(--surface);font-size:15px;color:var(--ink);}
  body.page-tracker button{font-weight:700;font-size:14.5px;cursor:pointer;border-radius:9px;border:1.5px solid var(--ink);background:var(--ink);color:var(--on-accent);padding:11px 18px;}
  body.page-tracker button.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--border);}
  body.page-tracker button.danger{background:var(--red);border-color:var(--red);}
  body.page-tracker .btnrow{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px;}
  body.page-tracker .empty{color:var(--ink-faint);font-size:14.5px;padding:18px 0;text-align:center;}
  body.page-tracker .section-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;}
  body.page-tracker .variant-block{border:1.5px dashed var(--border);border-radius:11px;padding:14px;margin-bottom:12px;}
  body.page-tracker .variant-block .form-row{margin-bottom:8px;}
  body.page-tracker .apibar{font-family:"Space Mono",monospace;font-size:12.5px;color:var(--ink-faint);margin-bottom:16px;}
  body.page-tracker .apibar input{display:inline-block;width:270px;padding:6px 9px;font-size:12.5px;}
  body.page-tracker .status-msg{font-size:14px;padding:10px 14px;border-radius:9px;margin-bottom:14px;font-weight:600;}
  body.page-tracker .status-msg.error{background:var(--red-soft);color:var(--red);}
  body.page-tracker .status-msg.ok{background:var(--green-soft);color:var(--green);}

/* Static inline styles moved from index.html */
body.page-login .u-login-001{display: block; width:fit-content;margin:0 auto 18px;}

/* Static inline styles moved from basket.html */
body.page-basket .u-basket-001{display:flex;justify-content:space-between;align-items:baseline;}
body.page-basket .u-basket-002{font-size:17px;}
body.page-basket .u-basket-003{font-family:'Inter',sans-serif;font-weight:700;font-size:15px;font-weight:700;}
body.page-basket .u-basket-004{width:0%}
body.page-basket .u-basket-005{display:none;}
body.page-basket .u-basket-006{width:64px;}
body.page-basket .u-basket-007{font-size:13px;color:var(--ink-soft);}
body.page-basket .u-basket-008{display:none;}
body.page-basket .u-basket-009{display:none;font-weight:800;}
body.page-basket .u-basket-010{margin-top:12px;}
body.page-basket .u-basket-011{flex:1;}
body.page-basket .u-basket-012{flex:2;}
body.page-basket .u-basket-013{padding:0 20px 18px;}
body.page-basket .u-basket-014{font-size:13px;font-weight:700;color:var(--ink-soft);margin-bottom:4px;}
body.page-basket .u-basket-015{width:100%;}
body.page-basket .u-basket-016{margin-top:18px;}
body.page-basket .u-basket-017{flex:1;}
body.page-basket .u-basket-018{flex:1;}
body.page-basket .u-basket-019{margin-bottom:8px;}
body.page-basket .u-basket-020{font-size:14.5px;color:var(--ink-soft);line-height:1.5;margin-bottom:16px;}
body.page-basket .u-basket-021{justify-content:flex-end;}
body.page-basket .u-basket-022{flex:1;}
body.page-basket .u-basket-023{font-size:11.5px;color:var(--ink-faint);}


/* Static inline styles moved from admin.html */
body.page-admin .u-admin-001{margin-bottom:18px;}
body.page-admin .u-admin-002{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;}
body.page-admin .u-admin-003{margin:0;font-weight:700;color:var(--ink);}
body.page-admin .u-admin-004{margin:2px 0 0;}
body.page-admin .u-admin-005{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
body.page-admin .u-admin-006{margin:0;}
body.page-admin .u-admin-007{margin-top:14px;}
body.page-admin .u-admin-008{display:none;max-width:150px;}
body.page-admin .u-admin-009{display:none;max-width:150px;}
body.page-admin .u-admin-010{margin-bottom:18px;}
body.page-admin .u-admin-011{margin-bottom:18px;}
body.page-admin .u-admin-012{margin:4px 0 0;}
body.page-admin .u-admin-013{margin:4px 0 0;}
body.page-admin .u-admin-014{margin:4px 0 0;}
body.page-admin .u-admin-015{margin-bottom:18px;}
body.page-admin .u-admin-016{margin-bottom:18px;}
body.page-admin .u-admin-017{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px;}
body.page-admin .u-admin-018{margin:0;}
body.page-admin .u-admin-019{display:flex;align-items:flex-end;gap:4px;height:110px;margin-top:12px;}
body.page-admin .u-admin-020{margin-bottom:18px;}
body.page-admin .u-admin-021{color:var(--gold-deep);}
body.page-admin .u-admin-022{color:var(--gold-deep);}
body.page-admin .u-admin-023{margin-bottom:18px;}
body.page-admin .u-admin-024{margin-bottom:18px;}
body.page-admin .u-admin-025{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;}
body.page-admin .u-admin-026{margin-bottom:2px;}
body.page-admin .u-admin-027{margin:0;}
body.page-admin .u-admin-028{margin-bottom:18px;}
body.page-admin .u-admin-029{margin-bottom:10px;}
body.page-admin .u-admin-030{max-width:280px;}
body.page-admin .u-admin-031{margin-bottom:18px;}
body.page-admin .u-admin-032{align-items:end;}
body.page-admin .u-admin-033{display:flex;align-items:flex-end;}
body.page-admin .u-admin-034{margin-bottom:4px;}
body.page-admin .u-admin-035{margin-bottom:18px;}
body.page-admin .u-admin-036{margin:4px 0 0;}
body.page-admin .u-admin-037{margin-bottom:18px;}
body.page-admin .u-admin-038{margin-bottom:18px;}
body.page-admin .u-admin-039{align-items:end;max-width:520px;}
body.page-admin .u-admin-040{display:flex;align-items:flex-end;}
body.page-admin .u-admin-041{margin-bottom:18px;}
body.page-admin .u-admin-042{margin-bottom:18px;}
body.page-admin .u-admin-043{margin-top:12px;}
body.page-admin .u-admin-044{margin-top:10px;font-weight:700;}
body.page-admin .u-admin-045{margin-top:12px;}
body.page-admin .u-admin-046{margin-top:10px;font-weight:700;}
body.page-admin .u-admin-047{margin-top:12px;}
body.page-admin .u-admin-048{margin-bottom:18px;}
body.page-admin .u-admin-049{align-self:center;font-weight:700;}
body.page-admin .u-admin-050{margin-top:10px;}
body.page-admin .u-admin-051{margin-top:12px;}
body.page-admin .u-admin-052{margin-bottom:18px;}
body.page-admin .u-admin-053{max-width:320px;}
body.page-admin .u-admin-054{margin-top:10px;font-weight:700;}
body.page-admin .u-admin-055{margin-top:12px;}
body.page-admin .u-admin-056{margin-top:10px;font-weight:700;}
body.page-admin .u-admin-057{margin-top:12px;}
body.page-admin .u-admin-058{margin-bottom:18px;}
body.page-admin .u-admin-059{margin-top:12px;}
body.page-admin .u-admin-060{margin-bottom:18px;}
body.page-admin .u-admin-061{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;}
body.page-admin .u-admin-062{margin-bottom:2px;}
body.page-admin .u-admin-063{margin:0;}
body.page-admin .u-admin-064{margin-top:14px;}
body.page-admin .u-admin-065{display:none;max-width:150px;}
body.page-admin .u-admin-066{display:none;max-width:150px;}
body.page-admin .u-admin-067{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px;}
body.page-admin .u-admin-068{margin:0;}
body.page-admin .u-admin-069{margin-bottom:18px;}
body.page-admin .u-admin-070{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px;}
body.page-admin .u-admin-071{margin:0;}
body.page-admin .u-admin-072{margin-bottom:14px;}
body.page-admin .u-admin-073{display:none;max-width:150px;}
body.page-admin .u-admin-074{display:none;max-width:150px;}
body.page-admin .u-admin-075{margin-bottom:18px;}
body.page-admin .u-admin-076{margin-bottom:18px;}
body.page-admin .u-admin-077{margin-bottom:14px;}
body.page-admin .u-admin-078{max-width:320px;align-items:end;margin-bottom:16px;}
body.page-admin .u-admin-079{height:44px;padding:4px;}
body.page-admin .u-admin-080{max-width:420px;}
body.page-admin .u-admin-081{grid-column:1/-1;}
body.page-admin .u-admin-082{margin-top:18px;}
body.page-admin .u-admin-083{grid-column:1/-1;}
body.page-admin .u-admin-084{max-width:500px;}
body.page-admin .u-admin-085{grid-column:1/-1;}
body.page-admin .u-admin-086{max-width:500px;}
body.page-admin .u-admin-087{grid-column:1/-1;}
body.page-admin .u-admin-088{max-width:500px;}
body.page-admin .u-admin-089{grid-column:1/-1;}
body.page-admin .u-admin-090{max-width:500px;}
body.page-admin .u-admin-091{grid-column:1/-1;}
body.page-admin .u-admin-092{margin-top:12px;}
body.page-admin .u-admin-093{margin-top:12px;}
body.page-admin .u-admin-094{display:none;margin-bottom:6px;}
body.page-admin .u-admin-095{margin-top:10px;}
body.page-admin .u-admin-096{margin-top:10px;}
body.page-admin .u-admin-097{margin-top:10px;}
body.page-admin .u-admin-098{margin-top:10px;}
body.page-admin .u-admin-099{margin-top:10px;}
body.page-admin .u-admin-100{margin-top:10px;}
body.page-admin .u-admin-101{max-width:600px;}
body.page-admin .u-admin-102{margin-top:8px;}
body.page-admin .u-admin-103{font-weight:400;color:var(--ink-faint);}
body.page-admin .u-admin-104{display:none;max-height:100px;margin-top:8px;border-radius:8px;}
body.page-admin .u-admin-105{margin-top:8px;}
body.page-admin .u-admin-106{max-width:600px;}
body.page-admin .u-admin-107{margin-top:8px;}
body.page-admin .u-admin-108{font-weight:400;color:var(--ink-faint);}
body.page-admin .u-admin-109{display:none;max-height:100px;margin-top:8px;border-radius:8px;}
body.page-admin .u-admin-110{margin-top:10px;}
body.page-admin .u-admin-111{margin-top:10px;}
body.page-admin .u-admin-112{margin-top:10px;}
body.page-admin .u-admin-113{font-weight:400;color:var(--ink-faint);}
body.page-admin .u-admin-114{border-top:1px solid var(--border);padding-top:10px;margin-top:10px;}
body.page-admin .u-admin-115{font-weight:700;font-size:13.5px;margin-bottom:6px;}
body.page-admin .u-admin-116{font-weight:400;color:var(--ink-faint);}
body.page-admin .u-admin-117{width:40px;height:40px;object-fit:cover;border-radius:6px;}
body.page-admin .u-admin-118{width:40px;height:40px;border-radius:6px;background:var(--surface-2);}
body.page-admin .u-admin-119{margin-top:10px;}
body.page-admin .u-admin-120{padding-left:20px;}
body.page-admin .u-admin-121{margin-bottom:14px;border-bottom:1px solid var(--border);padding-bottom:10px;}
body.page-admin .u-admin-122{display:flex;justify-content:space-between;}
body.page-admin .u-admin-123{margin:0;}
body.page-admin .u-admin-124{margin-top:6px;}
body.page-admin .u-admin-125{color:var(--green);}
body.page-admin .u-admin-126{color:var(--red);}
body.page-admin .u-admin-127{padding-left:16px;}
body.page-admin .u-admin-128{padding-left:16px;}
body.page-admin .u-admin-129{color:var(--gold-deep);}
body.page-admin .u-admin-130{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px dashed var(--border);gap:12px;}
body.page-admin .u-admin-131{margin:2px 0 0;}
body.page-admin .u-admin-132{white-space:nowrap;}
body.page-admin .u-admin-133{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;}
body.page-admin .u-admin-134{font-size:10px;color:var(--ink-faint);margin-top:4px;white-space:nowrap;}
body.page-admin .u-admin-135-up{color:var(--green);font-weight:700;}
body.page-admin .u-admin-135-down{color:var(--red);font-weight:700;}
body.page-admin .u-admin-136{display:flex;align-items:center;gap:10px;margin:10px 0;}
body.page-admin .u-admin-137{width:150px;font-size:13px;color:var(--ink-soft);flex-shrink:0;}
body.page-admin .u-admin-138{flex:1;background:var(--surface-2);border-radius:4px;height:18px;overflow:hidden;}
body.page-admin .u-admin-139{width:36px;text-align:right;font-size:13px;font-weight:700;flex-shrink:0;}

/* Static inline styles moved from tracker.html */
body.page-tracker .u-tracker-001{display:none;}
body.page-tracker .u-tracker-002{padding:6px 12px;font-size:12.5px;}
body.page-tracker .u-tracker-003{margin-bottom:18px;}
body.page-tracker .u-tracker-004{margin:4px 0 0;}
body.page-tracker .u-tracker-005{margin-bottom:18px;}
body.page-tracker .u-tracker-006{margin-bottom:18px;}
body.page-tracker .u-tracker-007{margin-bottom:18px;}
body.page-tracker .u-tracker-008{margin-bottom:18px;}
body.page-tracker .u-tracker-009{align-items:end;}
body.page-tracker .u-tracker-010{display:flex;align-items:flex-end;}
body.page-tracker .u-tracker-011{margin-bottom:4px;}
body.page-tracker .u-tracker-012{margin-bottom:18px;}
body.page-tracker .u-tracker-013{margin:4px 0 0;}
body.page-tracker .u-tracker-014{margin-bottom:18px;}
body.page-tracker .u-tracker-015{margin-bottom:10px;}
body.page-tracker .u-tracker-016{max-width:280px;}
body.page-tracker .u-tracker-017{margin-bottom:18px;}
body.page-tracker .u-tracker-018{margin-bottom:18px;}
body.page-tracker .u-tracker-019{margin-top:10px;}
body.page-tracker .u-tracker-020{padding:10px 0;border-bottom:1px dashed var(--border);}
body.page-tracker .u-tracker-021{margin:0;}
body.page-tracker .u-tracker-022{font-size:14px;color:var(--ink-soft);}
body.page-tracker .u-tracker-023{padding:10px 0;border-bottom:1px dashed var(--border);}
body.page-tracker .u-tracker-024{margin:0;}
body.page-tracker .u-tracker-025{font-size:14px;color:var(--ink-soft);}

/* Planning Data Migration / historical analytics */
body.page-admin .migration-note{margin:16px 0;padding:14px 16px;border:1px solid var(--border);border-left:4px solid var(--gold-deep);border-radius:10px;background:var(--surface-2);line-height:1.55;}
body.page-admin .migration-file-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:16px 0;}
body.page-admin .migration-file-grid input[type="file"]{width:100%;}
body.page-admin .migration-actions{margin-top:14px;}
body.page-admin .migration-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:16px 0;}
body.page-admin .migration-summary-card{padding:14px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2);display:flex;flex-direction:column;gap:5px;}
body.page-admin .migration-summary-card span{font-size:12px;color:var(--ink-faint);}
body.page-admin .migration-summary-card b{font-size:20px;color:var(--ink);}
body.page-admin .migration-findings{margin-top:14px;padding:14px 16px;border-radius:10px;background:var(--surface-2);line-height:1.5;}
body.page-admin .migration-findings ul{margin:8px 0 0;padding-left:20px;}
body.page-admin .migration-history-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px;}
body.page-admin .migration-history-head h3{margin:0 0 4px;}
body.page-admin button.ghost.danger{background:transparent;color:var(--red);border-color:var(--red);}
body.page-admin .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
body.page-admin .list-toolbar{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap;}
body.page-admin .list-toolbar input{flex:1;min-width:240px;}
body.page-admin .list-toolbar select{width:auto;min-width:140px;}
body.page-admin .pager{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px;color:var(--ink-soft);font-size:13px;flex-wrap:wrap;}
body.page-admin .pager-actions{display:flex;align-items:center;gap:10px;}
body.page-admin .pager button{padding:8px 12px;font-size:13px;}
body.page-admin button:disabled{opacity:.45;cursor:not-allowed;}
body.page-admin .table-sub{font-size:11.5px;color:var(--ink-faint);margin-top:3px;}
body.page-admin #reportsSubtabs{margin-bottom:18px;}
body.page-admin #panel-reports>.subpanel>.card,
body.page-admin #panel-reports>.subpanel>.grid{margin-bottom:18px;}
@media (max-width:900px){
  body.page-admin .migration-file-grid{grid-template-columns:1fr;}
  body.page-admin .migration-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:520px){body.page-admin .migration-summary-grid{grid-template-columns:1fr;}}

/* Sales Report period toggle + sortable report table headers */
body.page-admin #srGranularityRow button.active{background:var(--gold-deep);color:var(--on-accent);border-color:var(--gold-deep);}
body.page-admin th.sortable{cursor:pointer;user-select:none;white-space:nowrap;}
body.page-admin th.sortable:hover{color:var(--gold-deep);}
body.page-admin th.sortable .sort-arrow{font-size:10px;margin-left:2px;}

/* Payment method selector (POS checkout) */
body.page-basket .u-paymethod.active{background:var(--gold-deep);color:var(--on-accent);border-color:var(--gold-deep);}
body.page-basket .u-paymethod{flex:1;min-width:0;}

/* Customer picker modal (POS checkout) */
body.page-basket #customerModal .modal{max-width:420px;}
body.page-basket #customerSearchInput{width:100%;margin-bottom:10px;padding:10px 12px;border-radius:9px;border:1.5px solid var(--border);font-family:"Inter",sans-serif;}
body.page-basket .u-customer-quickadd{margin-top:10px;padding-top:10px;border-top:1px dashed var(--border);}
body.page-basket .customer-row{display:flex;justify-content:space-between;align-items:center;margin:10px 0;padding:10px 12px;border:1.5px solid var(--border);border-radius:9px;}
body.page-basket .customer-row .cname{font-weight:700;font-size:14px;}
body.page-basket .customer-row .ctype{font-size:11.5px;color:var(--ink-soft);}

/* ---------- My Shift (Staff Portal) ---------- */
body.page-myshift{
  --bg:#F1F5F9; --surface:#FFFFFF; --surface-2:#F8FAFC; --on-accent:#FFFFFF;
  --ink:#0F172A; --ink-soft:#475569; --ink-faint:#94A3B8; --border:#E2E8F0;
  --red:#DC2626; --red-soft:#FEE2E2; --green:#16A34A; --green-soft:#DCFCE7;
  --gold:rgba(37,99,235,0.12); --gold-deep:#2563EB;
  --sidebar-bg:#0F172A; --sidebar-hover:#1E293B; --sidebar-text:#94A3B8;
  --shadow:0 1px 2px rgba(15,23,42,.04),0 4px 16px rgba(15,23,42,.06);
}
body.page-myshift *{box-sizing:border-box;}
body.page-myshift{margin:0;background:var(--bg);color:var(--ink);font-family:"Inter",-apple-system,sans-serif;}
body.page-myshift.dark{
  --bg:#18181B; --surface:#27272A; --surface-2:#303035; --on-accent:#FFFFFF;
  --ink:#F4F4F5; --ink-soft:#A1A1AA; --ink-faint:#71717A; --border:#3F3F46;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 4px 16px rgba(0,0,0,.4);
}
body.page-myshift .topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 22px;border-bottom:1px solid var(--border);background:var(--surface);}
body.page-myshift .eyebrow{font-family:"Inter",sans-serif;font-weight:700;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep);}
body.page-myshift .topbar h1{font-size:19px;font-weight:700;margin:4px 0 0;}
body.page-myshift .whoami{font-size:14px;color:var(--ink-soft);text-align:right;}
body.page-myshift .whoami b{color:var(--ink);}
body.page-myshift .page{max-width:1200px;margin:0 auto;padding:24px 22px 90px;}
body.page-myshift h4{font-size:14px;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.04em;}
body.page-myshift .grid{display:grid;gap:18px;}
body.page-myshift .grid.cols-4{grid-template-columns:repeat(4,1fr);}
body.page-myshift .grid.cols-2{grid-template-columns:1.3fr 1fr;}
@media(max-width:900px){body.page-myshift .grid.cols-4{grid-template-columns:repeat(2,1fr);} body.page-myshift .grid.cols-2{grid-template-columns:1fr;}}
body.page-myshift .card{background:var(--surface);border:1.5px solid var(--border);border-radius:15px;padding:20px 22px;box-shadow:var(--shadow);margin-bottom:18px;}
body.page-myshift .card h3{font-size:17px;font-weight:700;margin-bottom:4px;}
body.page-myshift .card .sub{font-size:14px;color:var(--ink-faint);margin-bottom:14px;}
body.page-myshift .stat{font-family:"Inter",sans-serif;font-weight:700;font-size:26px;}
body.page-myshift .stat-label{font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-faint);margin-bottom:6px;font-weight:700;}
body.page-myshift table{width:100%;border-collapse:collapse;font-size:14.5px;}
body.page-myshift th{text-align:left;font-family:"Inter",sans-serif;font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-faint);padding:10px 12px;border-bottom:2px solid var(--border);}
body.page-myshift td{padding:11px 12px;border-bottom:1px solid var(--border);}
body.page-myshift tr:last-child td{border-bottom:none;}
body.page-myshift .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
body.page-myshift .pill{display:inline-block;padding:4px 12px;border-radius:999px;font-size:12.5px;font-weight:700;}
body.page-myshift .pill.ok{background:var(--green-soft);color:var(--green);}
body.page-myshift .pill.low{background:var(--red-soft);color:var(--red);}
body.page-myshift .pill.neutral{background:var(--surface-2);color:var(--ink-soft);border:1px solid var(--border);}
body.page-myshift .form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:12px;}
body.page-myshift label{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);display:block;margin-bottom:6px;}
body.page-myshift input, body.page-myshift select, body.page-myshift textarea{width:100%;padding:11px 12px;border-radius:9px;border:1.5px solid var(--border);background:var(--surface);font-size:15px;color:var(--ink);font-family:"Inter",sans-serif;}
body.page-myshift button{font-weight:700;font-size:14.5px;cursor:pointer;border-radius:9px;border:1.5px solid var(--gold-deep);background:var(--gold-deep);color:var(--on-accent);padding:11px 18px;}
body.page-myshift button.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--border);}
body.page-myshift button.danger{background:var(--red);border-color:var(--red);}
body.page-myshift .btnrow{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px;}
body.page-myshift .empty{color:var(--ink-faint);font-size:14.5px;padding:18px 0;text-align:center;}
body.page-myshift .status-msg{font-size:14px;padding:10px 14px;border-radius:9px;margin-bottom:14px;font-weight:600;}
body.page-myshift .status-msg.error{background:var(--red-soft);color:var(--red);}
body.page-myshift .status-msg.ok{background:var(--green-soft);color:var(--green);}
body.page-myshift .shift-result{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px;}
@media(max-width:700px){body.page-myshift .shift-result{grid-template-columns:1fr;}}
body.page-myshift .shift-result .box{padding:14px;border-radius:11px;background:var(--surface-2);text-align:center;}
body.page-myshift .shift-result .box .lbl{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-faint);margin-bottom:4px;}
body.page-myshift .shift-result .box .val{font-size:20px;font-weight:700;}
body.page-myshift .shift-result .box.variance-ok .val{color:var(--green);}
body.page-myshift .shift-result .box.variance-short .val{color:var(--red);}
body.page-myshift .schedule-item{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--border);}
body.page-myshift .schedule-item:last-child{border-bottom:none;}
body.page-myshift .section-divider{border:none;border-top:1px dashed var(--border);margin:18px 0;}
body.page-admin .section-divider{border:none;border-top:1px dashed var(--border);margin:18px 0;}
body.page-admin .pill.neutral{background:var(--surface-2);color:var(--ink-soft);border:1px solid var(--border);}
body.page-admin .schedule-item{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--border);}
body.page-admin .schedule-item:last-child{border-bottom:none;}

/* Shift gate + status widget (POS) */
body.page-basket .shift-gate{position:fixed;inset:0;z-index:999;background:rgba(20,16,8,.55);display:flex;align-items:center;justify-content:center;padding:20px;}
body.page-basket .shift-gate-card{background:var(--surface);border-radius:16px;padding:28px 26px;max-width:420px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.3);}
body.page-basket .shift-gate-card h2{margin:0 0 6px;font-size:20px;}
body.page-basket .shift-widget{display:flex;align-items:center;gap:8px;margin-top:8px;}
body.page-basket .shift-widget .pill{padding:4px 11px;border-radius:999px;font-size:12px;font-weight:700;}
body.page-basket .shift-widget .pill.ok{background:var(--green-soft);color:var(--green);}
body.page-basket .shift-widget .pill.low{background:var(--red-soft);color:var(--red);}
body.page-basket .shift-close-form{margin-top:10px;padding:12px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2);}

/* Reports sub-links in the sidebar */
.navgroup-label{padding:14px 12px 4px;font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--sidebar-text);opacity:.6;display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none;}
.navgroup-label:hover{opacity:.9;}
.navgroup-chevron{flex-shrink:0;transition:transform .15s ease;}
.navgroup-chevron.rotated{transform:rotate(-90deg);}
.navgroup-items{overflow:hidden;max-height:2000px;transition:max-height .2s ease;}
.navgroup-items.collapsed{max-height:0;}
.navgroup-label-sub{padding:8px 12px 2px 20px;font-size:9.5px;opacity:.45;}
.navitem-sub{padding-left:20px;font-size:12.5px;}
.navitem-sub svg{width:14px;height:14px;}
.consolidation-reminder-badge{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#dc2626;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;line-height:1;}
.consolidation-reminder-badge[hidden]{display:none!important;}
.consolidation-reminder-toast{position:fixed;right:18px;bottom:18px;z-index:1200;width:min(390px,calc(100vw - 36px));padding:15px 16px;border:1px solid #f59e0b;border-radius:14px;background:#fff7ed;color:#7c2d12;box-shadow:0 16px 40px rgba(15,23,42,.2);display:grid;gap:9px;}
.consolidation-reminder-toast.overdue{border-color:#dc2626;background:#fef2f2;color:#991b1b;}
.consolidation-reminder-toast strong{font-size:14px;}
.consolidation-reminder-toast span{font-size:12.5px;line-height:1.45;}
.consolidation-reminder-actions{display:flex;gap:8px;justify-content:flex-end;}
.consolidation-reminder-actions a,.consolidation-reminder-actions button{border:1px solid currentColor;border-radius:8px;background:#fff;padding:7px 10px;color:inherit;font:inherit;font-size:12px;font-weight:700;text-decoration:none;cursor:pointer;}
@media(max-width:600px){.consolidation-reminder-toast{right:10px;bottom:10px;width:calc(100vw - 20px);}}

/* Cash Receipts / Disbursement Books — columnar special-journal format */
body.page-admin .cashbook-table{border-collapse:collapse;font-size:12.5px;white-space:nowrap;}
body.page-admin .cashbook-table th,body.page-admin .cashbook-table td{border:1px solid var(--border);padding:6px 9px;text-align:right;}
body.page-admin .cashbook-table thead th{background:var(--gold-deep);color:#fff;font-weight:700;text-align:center;position:sticky;top:0;z-index:1;}
body.page-admin .cashbook-table thead tr:first-child th{font-size:12.5px;}
body.page-admin .cashbook-table thead tr:last-child th{font-size:11px;font-weight:600;background:#1d4ed8;background:color-mix(in srgb, var(--gold-deep) 85%, black);}
body.page-admin .cashbook-table td:nth-child(1),body.page-admin .cashbook-table th:nth-child(1),
body.page-admin .cashbook-table td:nth-child(2),body.page-admin .cashbook-table th:nth-child(2),
body.page-admin .cashbook-table td:nth-child(3),body.page-admin .cashbook-table th:nth-child(3){text-align:left;}
/* isCompTable/bsCompTable/eqCompTable only have ONE text label column (not 3, unlike the cash
   books), so the rule above would incorrectly left-align their Q1/Q2 numeric columns too —
   reset everything but the actual first column back to right-aligned for these specifically. */
body.page-admin #isCompTable td:not(:first-child),body.page-admin #isCompTable th:not(:first-child),
body.page-admin #bsCompTable td:not(:first-child),body.page-admin #bsCompTable th:not(:first-child),
body.page-admin #eqCompTable td:not(:first-child),body.page-admin #eqCompTable th:not(:first-child){text-align:right;}
body.page-admin .cashbook-table tbody tr:hover td{background:var(--gold);}
body.page-admin .cashbook-table tfoot td{font-weight:800;background:var(--surface-2);border-top:2px solid var(--gold-deep);}
body.page-admin tr.cashbook-totals td{font-weight:800;background:var(--surface-2);border-top:2px solid var(--gold-deep);}


/* Settings: file-style top tabs + accordion subsections */
.settings-tabs-shell{
  margin-bottom:0;
  border-bottom:1px solid var(--border, #d9dde5);
  overflow-x:auto;
  overflow-y:hidden;
  padding:10px 10px 0;
  background:var(--surface-2, #f6f8fb);color:var(--ink, #111827);
  border-radius:0;
}
.settings-tabs{
  display:flex;
  align-items:flex-end;
  flex-wrap:nowrap;
  min-width:max-content;
  gap:0;
}
.settings-module-tab{
  appearance:none;
  position:relative;
  border:1px solid transparent;
  border-bottom:1px solid var(--border, #d9dde5);
  border-radius:0 !important;
  background:transparent;
  color:var(--ink-soft, #475569);
  padding:12px 20px 11px;
  font:inherit;
  font-weight:650;
  cursor:pointer;
  margin:0 0 -1px 0;
  white-space:nowrap;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.settings-module-tab + .settings-module-tab{
  border-left-color:transparent;
}
.settings-module-tab:hover{
  color:var(--gold-deep, #2563eb);
  background:color-mix(in srgb, var(--gold-deep, #2563eb) 7%, transparent);
}
.settings-module-tab.active{
  background:var(--surface, #fff);
  border:1px solid var(--border, #d9dde5);
  border-top:3px solid var(--gold-deep, #2563eb);
  border-bottom-color:var(--surface, #fff);
  border-radius:0 !important;
  color:var(--gold-deep, #2563eb);
  font-weight:750;
  padding-top:10px;
  z-index:2;
}
.settings-module-tab.active::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-2px;
  height:3px;
  background:var(--surface, #fff);
}
.settings-accordion-host{
  margin-top:0;
  padding:18px 14px 8px;
  border:1px solid var(--border, #d9dde5);
  border-top:0;
  border-radius:0;
  background:var(--surface, #fff);
}
.settings-accordion-module[hidden]{display:none!important;}
.settings-accordion-item{
  border:1px solid var(--border, #d9dde5);
  border-radius:0;
  background:var(--surface, #fff);
  overflow:hidden;
  margin-bottom:10px;
}
.settings-accordion-button{
  width:100%;
  appearance:none;
  border:0;
  border-radius:0;
  background:color-mix(in srgb, var(--gold-deep, #2563eb) 7%, var(--surface-2, #f6f8fb));
  color:var(--ink, #111827);
  padding:15px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  font:inherit;
  font-weight:750;
  text-align:left;
  cursor:pointer;
  transition:background .15s ease,color .15s ease;
}
.settings-accordion-button:hover{
  color:var(--gold-deep, #2563eb);
  background:color-mix(in srgb, var(--gold-deep, #2563eb) 12%, var(--surface-2, #f6f8fb));
}
.settings-accordion-item.open{
  border-color:color-mix(in srgb, var(--gold-deep, #2563eb) 35%, var(--border, #d9dde5));
}
.settings-accordion-item.open .settings-accordion-button{
  background:var(--gold-deep, #2563eb);
  color:var(--on-accent, #fff);
}
.settings-accordion-chevron{
  font-size:18px;
  line-height:1;
  transition:transform .15s ease;
}
.settings-accordion-item.open .settings-accordion-chevron{
  transform:rotate(180deg);
}
.settings-accordion-body{
  display:none;
  padding:16px;
  border-top:1px solid var(--border, #d9dde5);
}
.settings-accordion-item.open .settings-accordion-body{
  display:block;
}
.settings-accordion-body .subpanel{
  display:block!important;
}
.settings-accordion-body .subpanel > .card:first-child{
  margin-top:0;
}
@supports not (background: color-mix(in srgb, red 10%, white)){
  .settings-module-tab{background:transparent;}
  .settings-module-tab:hover{background:var(--surface-2, #f6f8fb);}
  .settings-accordion-button{background:var(--surface-2, #f6f8fb);}
}
@media (max-width:720px){
  .settings-tabs-shell{padding-left:6px;padding-right:6px;}
  .settings-module-tab{padding-left:14px;padding-right:14px;}
  .settings-module-tab.active{padding-top:10px;}
  .settings-accordion-host{padding:14px 10px 6px;}
  .settings-accordion-body{padding:12px;}
}

/* Direct sidebar destinations use the same top-level visual language as module groups. */
.navgroup-link{
  text-decoration:none;
  padding-top:12px;
  padding-bottom:8px;
  opacity:.72;
}
.navgroup-link:hover{
  opacity:1;
  background:var(--sidebar-hover);
  color:#fff;
  border-radius:9px;
}
.navgroup-link.active{
  opacity:1;
  background:var(--gold-deep);
  color:#fff;
  border-radius:9px;
}
.sidebar-logo-link{display:block;text-decoration:none;}
.sidebar-logo-link:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px;border-radius:12px;}


/* v15 — compact Roles & Permissions file tabs for tablet use */
.roles-permissions-card{padding:0;overflow:hidden}
.roles-permissions-head{padding:18px 20px 12px;border-bottom:1px solid var(--border)}
.role-file-tabs-shell{
  overflow-x:auto;overflow-y:hidden;
  border-bottom:1px solid var(--border);
  background:var(--surface-2);
  padding:10px 12px 0;
}
.role-file-tabs{display:flex;align-items:flex-end;gap:0;min-width:max-content}
.role-file-tab{
  appearance:none;border:1px solid transparent;border-bottom:1px solid var(--border);
  border-radius:0!important;background:transparent;color:var(--ink-soft);
  padding:11px 16px 10px;margin:0 0 -1px;font:inherit;font-weight:700;white-space:nowrap;cursor:pointer
}
.role-file-tab:hover{color:var(--gold-deep);background:color-mix(in srgb,var(--gold-deep) 7%,transparent)}
.role-file-tab.active{
  background:var(--surface);color:var(--gold-deep);border-color:var(--border);
  border-top:3px solid var(--gold-deep);border-bottom-color:var(--surface);
  padding-top:9px;position:relative;z-index:2
}
.role-file-tab-add{font-weight:650}
.role-file-content{background:var(--surface);padding:16px 18px 18px;min-height:150px}
.role-editor-pane{max-width:100%}
.role-editor-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:10px}
.role-editor-head h3{margin:0 0 4px}
.role-editor-note{
  padding:9px 11px;border-left:3px solid var(--gold-deep);
  background:var(--surface-2);font-size:13px;line-height:1.35;margin:8px 0 12px
}
.role-editor-section-title{
  font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-faint);
  margin:10px 0 7px
}
.compact-form-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:10px 12px;margin-bottom:12px}
.permission-module-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.permission-module{border:1px solid var(--border);background:var(--surface)}
.permission-module summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 12px;font-weight:750;background:var(--surface-2);text-transform:capitalize
}
.permission-module summary::-webkit-details-marker{display:none}
.permission-module summary::after{content:'▾';font-size:13px;color:var(--ink-faint);margin-left:4px}
.permission-module[open] summary::after{transform:rotate(180deg)}
.permission-module-name{min-width:0}
.permission-module-count{font-size:11px;color:var(--ink-faint);font-weight:700;margin-left:auto}
.permission-module-body{padding:9px 10px 10px;border-top:1px solid var(--border)}
.permission-module-actions{display:flex;gap:10px;justify-content:flex-end;margin-bottom:7px}
.text-button{
  appearance:none;border:0;background:transparent;color:var(--gold-deep);font:inherit;font-size:12px;
  font-weight:700;padding:2px 0;cursor:pointer
}
.permission-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 10px}
.permission-check{
  display:flex;align-items:flex-start;gap:7px;font-weight:400;text-transform:none;letter-spacing:0;
  font-size:13px;line-height:1.25;margin:0;padding:5px 6px;border-radius:4px
}
.permission-check:hover{background:var(--surface-2)}
.permission-check input{width:auto;flex:0 0 auto;margin-top:2px}
.permission-check span{min-width:0}
.permission-check b{display:block;font-size:13px;color:var(--ink)}
.permission-check small{display:block;font-size:11px;color:var(--ink-faint);margin-top:1px}
.role-editor-footer{display:flex;align-items:center;gap:12px;justify-content:flex-end;margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}

/* v15 — keep the BIR invoice-request control compact in the Sales Basket */
.invoice-request-compact{
  display:block;
  border:1px solid var(--border);
  background:var(--surface-2);
  padding:9px 10px;
  margin-bottom:8px;
}
.invoice-request-toggle{
  display:flex;align-items:center;gap:8px;
  font-size:13px;font-weight:700;line-height:1.3;margin:0;
  text-transform:none;letter-spacing:0;color:var(--ink)
}
.invoice-request-toggle input{width:auto;flex:0 0 auto;margin:0}
.nvc-confirm-label{display:flex!important;align-items:flex-start!important;gap:10px!important;margin:0!important;cursor:pointer}
.nvc-confirm-label input[type=checkbox]{appearance:auto!important;width:18px!important;height:18px!important;min-width:18px!important;flex:0 0 18px!important;margin:1px 0 0!important;accent-color:var(--gold-deep,#2563eb)}
.nvc-confirm-label span{line-height:1.4}
.invoice-number-link{appearance:none;border:0;background:none;padding:0;color:var(--gold-deep,#1d4ed8);font:inherit;font-weight:800;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.invoice-number-link.pending{font-weight:700}
.invoice-document{margin:8px 0 18px;border:2px solid #ef4444;border-radius:8px;background:#fff;color:#111;overflow:hidden}
.invoice-document header{display:grid;grid-template-columns:1fr minmax(180px,32%);border-bottom:2px solid #ef4444}
.invoice-document header>div{padding:10px 14px;display:flex;justify-content:space-between;gap:12px}.invoice-document header>div+div{border-left:1px solid #ef4444}
.invoice-document header span,.invoice-sold-to span{font-size:11px;color:#475569}.invoice-document header strong{color:#dc2626}
.invoice-sold-to{padding:10px 14px;border-bottom:2px solid #ef4444}.invoice-sold-to>div{display:grid;grid-template-columns:145px 1fr;gap:10px;margin-top:6px}.invoice-sold-to>div span:after{content:' :' ;float:right}
.invoice-items{width:100%;border-collapse:collapse}.invoice-items th,.invoice-items td{border:1px solid #94a3b8;padding:9px;text-align:right}.invoice-items th:first-child,.invoice-items td:first-child{text-align:left}.invoice-items td small{display:block;color:#64748b;margin-top:2px}
.invoice-totals{width:min(420px,100%);margin:12px 12px 12px auto;border:1px solid #94a3b8}.invoice-totals>div{display:flex;justify-content:space-between;padding:6px 10px;border-bottom:1px solid #cbd5e1}.invoice-totals>div:last-child{border-bottom:0}.invoice-totals .grand{font-weight:900}
@media(max-width:600px){.invoice-document header{grid-template-columns:1fr}.invoice-document header>div+div{border-left:0;border-top:1px solid #ef4444}.invoice-sold-to>div{grid-template-columns:110px 1fr}.invoice-document{overflow-x:auto}.invoice-items{min-width:560px}}
.invoice-rule-hint{
  margin:5px 0 0 26px;
  color:var(--ink-faint);
  font-size:11px;line-height:1.35;
  max-width:none;
}

/* v15 — dashboard tablet controls, view switcher, and collapsible sections */
.dashboard-identity{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:0 0 10px;padding:0 2px;color:var(--ink-faint);font-size:13px
}
.dashboard-view-switch{
  display:flex;align-items:center;gap:0;margin-left:auto;border:1px solid var(--border);background:var(--surface-2)
}
.dashboard-view-switch button{
  appearance:none;border:0;border-left:1px solid var(--border);border-radius:0!important;
  background:transparent;color:var(--ink-soft);padding:7px 11px;font:inherit;font-size:12px;font-weight:750;cursor:pointer
}
.dashboard-view-switch button:first-child{border-left:0}
.dashboard-view-switch button.active{background:var(--gold-deep);color:var(--on-accent,#fff)}
.dashboard-collapsible{position:relative;padding-right:44px}
.dashboard-collapse-toggle{
  position:absolute;right:10px;top:9px;width:30px;height:30px;padding:0!important;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border)!important;border-radius:4px!important;
  background:var(--surface-2)!important;color:var(--ink-soft)!important;
  font-size:15px!important;line-height:1!important;z-index:2
}
.dashboard-collapsible.is-collapsed > :not(:first-child):not(.dashboard-collapse-toggle){display:none!important}
.dashboard-collapsible.is-collapsed{padding-bottom:12px}
.dashboard-personal-stack{display:grid;gap:10px}
.dashboard-personal-stack > .card{margin:0}
[data-dashboard-hidden="1"]{display:none!important}

@media (max-width:900px){
  .permission-module-list{grid-template-columns:1fr}
  .permission-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .role-file-content{padding:14px}
}
@media (max-width:620px){
  .compact-form-grid,.permission-grid{grid-template-columns:1fr}
  .invoice-rule-hint{margin-left:0}
  .dashboard-identity{align-items:flex-start;flex-direction:column}
}



/* =========================================================
   v16 — tablet dashboard grouping + clear show/hide controls
   ========================================================= */
body.page-admin .dashboard-summary-card{
  padding:14px 16px 16px;
  margin-bottom:14px;
}
body.page-admin .dashboard-summary-head{
  padding-bottom:10px;
  border-bottom:1px solid var(--border);
}
body.page-admin .dashboard-range-row{
  margin:10px 0 12px;
}
body.page-admin .dashboard-kpi-grid{
  gap:10px;
}
body.page-admin .dashboard-kpi-grid > .card{
  margin:0;
  padding:14px;
  box-shadow:none;
  background:var(--surface-2);
}
.dashboard-identity{
  margin:0 0 8px;
  padding:0 2px;
}
.dashboard-collapsible{
  position:relative;
  padding-right:initial;
}
.dashboard-card-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  min-height:30px;
  margin-bottom:10px;
}
.dashboard-card-header > h3{
  margin:0;
}
.dashboard-card-title-wrap{
  min-width:0;
  flex:1;
}
.dashboard-card-header .dashboard-card-title-wrap h3{
  margin-top:0;
}
.dashboard-collapse-toggle{
  position:static!important;
  width:auto!important;
  min-width:64px;
  height:30px;
  flex:0 0 auto;
  padding:0 9px!important;
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  gap:5px;
  border:1px solid var(--border)!important;
  border-radius:4px!important;
  background:var(--surface-2)!important;
  color:var(--ink-soft)!important;
  font-size:11px!important;
  font-weight:750!important;
  line-height:1!important;
  z-index:auto;
}
.dashboard-collapse-toggle:hover{
  border-color:var(--gold-deep)!important;
  color:var(--gold-deep)!important;
}
.dashboard-collapsible.is-collapsed > :not(.dashboard-card-header){
  display:none!important;
}
.dashboard-collapsible.is-collapsed{
  padding-bottom:12px;
}
.dashboard-collapsible.is-collapsed .dashboard-card-header{
  margin-bottom:0;
}

/* Settings accordions: separate section label from the compact toggle state. */
.settings-accordion-button{
  min-height:48px;
  padding:10px 12px 10px 16px;
}
.accordion-toggle-state{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  min-width:62px;
  min-height:28px;
  padding:4px 8px;
  border:1px solid currentColor;
  font-size:11px;
  line-height:1;
  font-weight:750;
  flex:0 0 auto;
}
.settings-accordion-item.open .accordion-toggle-state{
  border-color:color-mix(in srgb, var(--on-accent,#fff) 55%, transparent);
}
.settings-accordion-chevron{
  width:12px;
  text-align:center;
  font-size:13px;
  transform:none!important;
}

/* Roles & Permissions details: make the affordance visibly separate on touch screens. */
.permission-module summary{
  min-height:44px;
  padding:8px 10px 8px 12px;
}
.permission-module summary::after{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  content:'Show  ⌄';
  min-width:58px;
  height:26px;
  padding:0 7px;
  margin-left:6px;
  border:1px solid var(--border);
  color:var(--ink-soft);
  background:var(--surface);
  font-size:10px;
  font-weight:750;
  transform:none!important;
}
.permission-module[open] summary::after{
  content:'Hide  ⌃';
  color:var(--gold-deep);
  border-color:var(--gold-deep);
}
.permission-module-count{
  margin-left:auto;
}

@media (max-width:900px){
  body.page-admin .dashboard-kpi-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width:560px){
  body.page-admin .dashboard-kpi-grid{
    grid-template-columns:1fr 1fr;
  }
  body.page-admin .dashboard-summary-card{
    padding:12px;
  }
  .dashboard-collapse-toggle{
    min-width:58px;
    padding:0 7px!important;
  }
}


/* =========================================================
   v17 — tablet-first dashboard hierarchy + sidebar-style toggles
   ========================================================= */
body.page-admin #panel-dashboard.panel.active{
  display:flex;
  flex-direction:column;
  gap:14px;
}
body.page-admin #panel-dashboard > *{
  margin-top:0;
  margin-bottom:0;
}
.dashboard-identity{
  order:0;
  margin-bottom:-4px;
}
.dashboard-context-row{
  order:1;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:0 2px 2px;
}
.dashboard-context-copy{
  min-width:0;
}
.dashboard-context-copy #dashBizLine{
  color:var(--ink);
  font-weight:750;
}
.dashboard-context-copy #dashClock{
  margin-top:3px;
  color:var(--ink-faint);
}
.dashboard-context-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex:0 0 auto;
}
.dashboard-role-stack{
  order:2;
  display:grid;
  gap:14px;
}
.dashboard-role-stack:empty{
  display:none;
}
/* General dashboard content always follows the role-specific stack. */
.dashboard-summary-card{order:3}
#panel-dashboard > .u-admin-016{order:4}
#panel-dashboard > .card:not(.dashboard-summary-card):not([data-role-dashboard]):not(#attendanceCard):not(#systemStatusCard){order:5}
#panel-dashboard > .grid{order:5}

/* Header layout for collapsible cards. */
.dashboard-card-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:30px;
  margin-bottom:10px;
}
.dashboard-card-header > h3,
.dashboard-card-header .dashboard-card-title-wrap{
  min-width:0;
  flex:1 1 auto;
}
.dashboard-card-controls{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex:0 0 auto;
}
.dashboard-collapsed-links{
  display:none;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.dashboard-collapsible.is-collapsed .dashboard-collapsed-links{
  display:flex;
}
.dashboard-collapsed-link{
  color:var(--gold-deep);
  font-size:12px;
  font-weight:700;
  text-decoration:none;
  white-space:nowrap;
}
.dashboard-collapsed-link:hover{
  text-decoration:underline;
}

/* Match the sidebar group chevron: icon-only, borderless, compact. */
.dashboard-collapse-toggle{
  position:static!important;
  width:28px!important;
  min-width:28px!important;
  height:28px!important;
  padding:0!important;
  display:inline-grid!important;
  place-items:center;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:var(--ink-faint)!important;
  cursor:pointer;
}
.dashboard-collapse-toggle:hover{
  color:var(--gold-deep)!important;
  background:color-mix(in srgb,var(--gold-deep) 7%,transparent)!important;
}
.dashboard-toggle-chevron{
  width:16px;
  height:16px;
  transition:transform .15s ease;
}
.dashboard-collapse-toggle.collapsed .dashboard-toggle-chevron{
  transform:rotate(-90deg);
}
.dashboard-collapsible.is-collapsed > :not(.dashboard-card-header){
  display:none!important;
}
.dashboard-collapsible.is-collapsed .dashboard-card-header{
  margin-bottom:0;
}

/* Settings accordions use the same simple chevron affordance. */
.settings-accordion-button{
  position:relative;
  padding-right:42px!important;
}
.settings-accordion-chevron{
  position:absolute;
  right:14px;
  top:50%;
  width:18px;
  height:18px;
  margin-top:-9px;
  display:grid;
  place-items:center;
  font-size:0!important;
  color:currentColor;
  transition:transform .15s ease!important;
}
.settings-accordion-chevron::before{
  content:'';
  width:7px;
  height:7px;
  border-right:1.8px solid currentColor;
  border-bottom:1.8px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px);
}
.settings-accordion-item.open .settings-accordion-chevron{
  transform:rotate(180deg)!important;
}
/* Remove v16 Show/Hide text treatment if present. */
.accordion-toggle-state{
  min-width:0!important;
  min-height:0!important;
  padding:0!important;
  border:0!important;
  font-size:0!important;
}

/* Roles & permissions accordion: icon only, matching side navigation. */
.permission-module summary::after{
  content:''!important;
  width:8px!important;
  min-width:8px!important;
  height:8px!important;
  padding:0!important;
  margin:0 4px 0 10px!important;
  border:0!important;
  border-right:1.8px solid var(--ink-faint)!important;
  border-bottom:1.8px solid var(--ink-faint)!important;
  background:transparent!important;
  transform:rotate(45deg)!important;
  transition:transform .15s ease!important;
}
.permission-module[open] summary::after{
  content:''!important;
  transform:rotate(225deg)!important;
  color:inherit!important;
  border-color:var(--gold-deep)!important;
}

@media (max-width:720px){
  .dashboard-context-row{
    align-items:flex-start;
  }
  .dashboard-context-actions{
    flex-direction:column;
    align-items:flex-end;
    gap:6px;
  }
  .dashboard-card-header{
    align-items:flex-start;
  }
  .dashboard-card-controls{
    max-width:55%;
  }
  .dashboard-collapsed-links{
    gap:5px;
  }
  .dashboard-collapsed-link{
    font-size:11px;
  }
}

/* v18 Cash Drawer */
.drawer-kpis{grid-template-columns:repeat(5,minmax(0,1fr));}
.drawer-payment-mix{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:12px 0;padding:10px 12px;border:1px solid var(--border);background:var(--surface-2);}
.drawer-payment-mix span{white-space:nowrap;color:var(--ink-soft);}
.shift-result .val.small{font-size:15px;}
@media (max-width:900px){.drawer-kpis{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:560px){.drawer-kpis{grid-template-columns:1fr;}.drawer-payment-mix{gap:8px 12px;}}


/* =========================================================
   v19 — tablet-first layout repair
   ========================================================= */

/* Cash Drawer gets its own page scope instead of inheriting accidental
   layout from unrelated pages. */
body.page-cashdrawer{
  --bg:#F1F5F9; --surface:#FFFFFF; --surface-2:#F8FAFC; --on-accent:#FFFFFF;
  --ink:#0F172A; --ink-soft:#475569; --ink-faint:#94A3B8; --border:#E2E8F0;
  --red:#DC2626; --red-soft:#FEE2E2; --green:#16A34A; --green-soft:#DCFCE7;
  --gold:rgba(37,99,235,.12); --gold-deep:#2563EB;
  --sidebar-bg:#0F172A; --sidebar-hover:#1E293B; --sidebar-text:#94A3B8;
  --shadow:0 1px 2px rgba(15,23,42,.04),0 4px 16px rgba(15,23,42,.06);
  margin:0;background:var(--bg);color:var(--ink);font-family:"Inter",sans-serif;
  -webkit-font-smoothing:antialiased;font-size:16px;
}
body.page-cashdrawer.dark{
  --bg:#18181B; --surface:#27272A; --surface-2:#303035; --on-accent:#FFFFFF;
  --ink:#F4F4F5; --ink-soft:#A1A1AA; --ink-faint:#71717A; --border:#3F3F46;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 4px 16px rgba(0,0,0,.4);
}
body.page-cashdrawer *{box-sizing:border-box}
body.page-cashdrawer .main-area{min-width:0;background:var(--bg)}
body.page-cashdrawer .topbar{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:18px 24px;border-bottom:1px solid var(--border);background:var(--surface);
  position:sticky;top:0;z-index:20;
}
body.page-cashdrawer .eyebrow{
  color:var(--gold-deep);font-size:11px;line-height:1.2;font-weight:800;
  letter-spacing:.10em;text-transform:uppercase;margin-bottom:3px;
}
body.page-cashdrawer .topbar h1{margin:0;font-size:24px;line-height:1.15;font-weight:800}
body.page-cashdrawer .whoami{font-size:13px;color:var(--ink-soft);text-align:right}
body.page-cashdrawer .whoami b{color:var(--ink)}
body.page-cashdrawer .page{
  width:min(1180px,100%);margin:0 auto;padding:20px 22px 48px;
  display:grid;gap:16px;
}
body.page-cashdrawer .card{
  background:var(--surface);border:1px solid var(--border);border-radius:14px;
  padding:18px;box-shadow:var(--shadow);margin:0;min-width:0;
}
body.page-cashdrawer .card h3{font-size:16px;margin:0 0 14px;font-weight:800}
body.page-cashdrawer .drawer-kpis{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:0;
}
body.page-cashdrawer .shift-result .box{
  min-width:0;background:var(--surface-2);border:1px solid var(--border);
  border-radius:10px;padding:13px 12px;text-align:left;
}
body.page-cashdrawer .shift-result .box .lbl{
  color:var(--ink-faint);font-size:10px;font-weight:800;letter-spacing:.055em;
  text-transform:uppercase;margin-bottom:5px;
}
body.page-cashdrawer .shift-result .box .val{
  color:var(--ink);font-size:18px;font-weight:800;line-height:1.2;
  overflow-wrap:anywhere;
}
body.page-cashdrawer .shift-result .box .val.small{font-size:13px;font-weight:700}
body.page-cashdrawer .drawer-payment-mix{
  display:grid;grid-template-columns:auto repeat(4,minmax(0,1fr));align-items:center;
  gap:8px;margin:12px 0 14px;padding:10px 12px;border:1px solid var(--border);
  border-radius:10px;background:var(--surface-2);font-size:13px;
}
body.page-cashdrawer .drawer-payment-mix b{white-space:nowrap}
body.page-cashdrawer .drawer-payment-mix span{
  min-width:0;white-space:nowrap;text-align:center;color:var(--ink-soft);
}
body.page-cashdrawer .btnrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px}
body.page-cashdrawer button{
  min-height:40px;border:1px solid var(--gold-deep);border-radius:9px;
  background:var(--gold-deep);color:var(--on-accent);padding:9px 14px;
  font:inherit;font-size:13px;font-weight:750;cursor:pointer;
}
body.page-cashdrawer button.ghost{
  background:var(--surface);color:var(--ink);border-color:var(--border);
}
body.page-cashdrawer button:hover{filter:brightness(.97)}
body.page-cashdrawer .form-row{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0;
}
body.page-cashdrawer .form-row label{
  display:block;margin-bottom:6px;color:var(--ink-soft);font-size:11px;
  font-weight:800;text-transform:uppercase;letter-spacing:.045em;
}
body.page-cashdrawer input{
  width:100%;min-width:0;min-height:42px;border:1px solid var(--border);
  border-radius:9px;background:var(--surface);color:var(--ink);padding:9px 11px;font:inherit;
}
body.page-cashdrawer input:focus{
  outline:2px solid color-mix(in srgb,var(--gold-deep) 28%,transparent);
  outline-offset:1px;border-color:var(--gold-deep);
}
body.page-cashdrawer .table-scroll{
  width:100%;overflow:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--border);
  border-radius:10px;background:var(--surface);
}
body.page-cashdrawer table{width:100%;border-collapse:collapse;font-size:12.5px;min-width:860px}
body.page-cashdrawer th{
  position:sticky;top:0;background:var(--surface-2);color:var(--ink-faint);
  text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.045em;
  font-weight:800;padding:10px 11px;border-bottom:1px solid var(--border);white-space:nowrap;
}
body.page-cashdrawer td{
  padding:10px 11px;border-bottom:1px solid var(--border);white-space:nowrap;color:var(--ink-soft);
}
body.page-cashdrawer tbody tr:last-child td{border-bottom:0}
body.page-cashdrawer .empty{color:var(--ink-faint);text-align:center;padding:18px}
body.page-cashdrawer .status-msg{
  border-radius:9px;padding:10px 12px;margin-bottom:12px;font-size:13px;font-weight:700;
}
body.page-cashdrawer .status-msg.ok{background:var(--green-soft);color:var(--green)}
body.page-cashdrawer .pill{
  display:inline-flex;align-items:center;padding:3px 8px;border:1px solid var(--border);
  border-radius:999px;background:var(--surface-2);font-size:11px;font-weight:750;color:var(--ink-soft);
}

/* Keep dashboard role cards compact and prevent stretched tablet layouts. */
body.page-admin #panel-dashboard{
  width:min(1180px,100%);margin-inline:auto;
}
body.page-admin #panel-dashboard .dashboard-role-stack > .card,
body.page-admin #panel-dashboard > .card,
body.page-admin #panel-dashboard > .grid{
  min-width:0;
}
body.page-admin #panel-dashboard .grid.cols-4{
  grid-template-columns:repeat(4,minmax(0,1fr));
}
body.page-admin #panel-dashboard .grid.cols-2{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
body.page-admin #panel-dashboard .card{
  overflow:hidden;
}
/* Fast movers / Slow-dead stock sit in a half-width card (.grid.cols-2) that clips overflow —
   without a min-width, table{width:100%} above squeezes every column down to fit instead of
   scrolling, which is what made "Fast movers" unreadably narrow. Force a real min-width so the
   surrounding .table-scroll wrapper scrolls horizontally instead. */
body.page-admin #panel-dashboard #fastTable,
body.page-admin #panel-dashboard #slowTable{
  min-width:520px;
}

/* Tablet landscape: dense without looking cramped. */
@media (max-width:1100px){
  body.page-cashdrawer .page{padding:16px;gap:14px}
  body.page-cashdrawer .drawer-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
  body.page-cashdrawer .drawer-payment-mix{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.page-cashdrawer .drawer-payment-mix b{grid-column:1/-1}
  body.page-admin #panel-dashboard .grid.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  body.page-cashdrawer .topbar{padding:14px 16px;align-items:flex-start}
  body.page-cashdrawer .topbar h1{font-size:20px}
  body.page-cashdrawer .whoami{max-width:45%}
  body.page-cashdrawer .page{padding:14px 12px 36px}
  body.page-cashdrawer .card{padding:14px}
  body.page-cashdrawer .drawer-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.page-cashdrawer .form-row{grid-template-columns:1fr}
  body.page-admin #panel-dashboard .grid.cols-2,
  body.page-admin #panel-dashboard .grid.cols-4{grid-template-columns:1fr}
}
@media (max-width:480px){
  body.page-cashdrawer .topbar{flex-direction:column}
  body.page-cashdrawer .whoami{max-width:none;text-align:left}
  body.page-cashdrawer .drawer-kpis,
  body.page-cashdrawer .drawer-payment-mix{grid-template-columns:1fr}
  body.page-cashdrawer .drawer-payment-mix span{text-align:left}
}


/* =========================================================
   v20.2 — My Attendance tablet-first layout repair
   ========================================================= */
body.page-myattendance{
  --bg:#F1F5F9; --surface:#FFFFFF; --surface-2:#F8FAFC; --on-accent:#FFFFFF;
  --ink:#0F172A; --ink-soft:#475569; --ink-faint:#94A3B8; --border:#E2E8F0;
  --red:#DC2626; --red-soft:#FEE2E2; --green:#16A34A; --green-soft:#DCFCE7;
  --gold:rgba(37,99,235,.12); --gold-deep:#2563EB;
  --sidebar-bg:#0F172A; --sidebar-hover:#1E293B; --sidebar-text:#94A3B8;
  --shadow:0 1px 2px rgba(15,23,42,.04),0 4px 16px rgba(15,23,42,.06);
  margin:0;background:var(--bg);color:var(--ink);font-family:"Inter",sans-serif;
  -webkit-font-smoothing:antialiased;font-size:16px;
}
body.page-myattendance.dark{
  --bg:#18181B; --surface:#27272A; --surface-2:#303035; --on-accent:#FFFFFF;
  --ink:#F4F4F5; --ink-soft:#A1A1AA; --ink-faint:#71717A; --border:#3F3F46;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 4px 16px rgba(0,0,0,.4);
}
body.page-myattendance *{box-sizing:border-box}
body.page-myattendance .main-area{min-width:0;background:var(--bg)}
body.page-myattendance .topbar{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:18px 24px;border-bottom:1px solid var(--border);background:var(--surface);
  position:sticky;top:0;z-index:20;
}
body.page-myattendance .eyebrow{
  color:var(--gold-deep);font-size:11px;line-height:1.2;font-weight:800;
  letter-spacing:.10em;text-transform:uppercase;margin-bottom:3px;
}
body.page-myattendance .topbar h1{
  margin:0;font-size:24px;line-height:1.15;font-weight:800;color:var(--ink);
}
body.page-myattendance .whoami{
  font-size:13px;color:var(--ink-soft);text-align:right;white-space:nowrap;
}
body.page-myattendance .whoami b{color:var(--ink)}
body.page-myattendance .page{
  width:min(1120px,100%);margin:0 auto;padding:20px 22px 48px;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;
}
body.page-myattendance .card{
  background:var(--surface);border:1px solid var(--border);border-radius:14px;
  padding:18px;box-shadow:var(--shadow);margin:0;min-width:0;
}
body.page-myattendance .card:nth-child(1),
body.page-myattendance .card:nth-child(2){
  grid-column:1 / -1;
}
body.page-myattendance .card h3{
  margin:0 0 14px;font-size:16px;line-height:1.2;font-weight:800;color:var(--ink);
}
body.page-myattendance .shift-result{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;margin:0;
}
body.page-myattendance .shift-result .box{
  min-width:0;background:var(--surface-2);border:1px solid var(--border);
  border-radius:10px;padding:13px 12px;text-align:left;
}
body.page-myattendance .shift-result .box .lbl{
  color:var(--ink-faint);font-size:10px;font-weight:800;letter-spacing:.055em;
  text-transform:uppercase;margin-bottom:5px;
}
body.page-myattendance .shift-result .box .val{
  color:var(--ink);font-size:20px;font-weight:800;line-height:1.2;
}
body.page-myattendance .table-scroll{
  width:100%;overflow-x:auto;border:1px solid var(--border);border-radius:10px;
}
body.page-myattendance table{
  width:100%;border-collapse:collapse;min-width:560px;background:var(--surface);
}
body.page-myattendance th{
  padding:10px 12px;text-align:left;font-size:10px;font-weight:800;
  text-transform:uppercase;letter-spacing:.055em;color:var(--ink-faint);
  background:var(--surface-2);border-bottom:1px solid var(--border);
}
body.page-myattendance td{
  padding:11px 12px;border-bottom:1px solid var(--border);
  color:var(--ink-soft);font-size:13px;
}
body.page-myattendance tbody tr:last-child td{border-bottom:0}
body.page-myattendance tbody tr:hover td{
  background:color-mix(in srgb,var(--gold-deep) 4%,var(--surface));
}
body.page-myattendance .empty{
  color:var(--ink-faint);font-size:13px;padding:16px 12px;text-align:center;
}
body.page-myattendance .schedule-item{
  display:grid;grid-template-columns:minmax(120px,1fr) auto;align-items:center;
  gap:14px;padding:11px 0;border-bottom:1px solid var(--border);
  color:var(--ink-soft);font-size:13px;
}
body.page-myattendance .schedule-item:last-child{border-bottom:0}
body.page-myattendance .schedule-item span:first-child{font-weight:700;color:var(--ink)}
body.page-myattendance .section-divider{
  border:0;border-top:1px dashed var(--border);margin:14px 0;
}
@supports not (background:color-mix(in srgb,red 10%,white)){
  body.page-myattendance tbody tr:hover td{background:var(--surface-2)}
}
@media (max-width:900px){
  body.page-myattendance .page{grid-template-columns:1fr;padding:16px 16px 40px}
  body.page-myattendance .card{grid-column:1!important}
  body.page-myattendance .shift-result{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  body.page-myattendance .topbar{
    align-items:flex-start;flex-direction:column;padding:14px 16px;gap:8px;
  }
  body.page-myattendance .whoami{text-align:left;white-space:normal}
  body.page-myattendance .page{padding:14px 12px 32px;gap:12px}
  body.page-myattendance .card{padding:14px;border-radius:12px}
  body.page-myattendance .shift-result{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  body.page-myattendance .shift-result .box{padding:11px 10px}
  body.page-myattendance .shift-result .box .val{font-size:18px}
}


/* =========================================================
   v22 — Attendance filters + full sidebar collapse
   ========================================================= */
body.page-myattendance .attendance-filter-card{grid-column:1 / -1}
body.page-myattendance .attendance-filter-head,
body.page-myattendance .attendance-section-head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
body.page-myattendance .attendance-filter-head{margin-bottom:14px}
body.page-myattendance .attendance-filter-head h3,
body.page-myattendance .attendance-section-head h3{margin:0}
body.page-myattendance .attendance-filter-tabs{
  display:flex;align-items:center;gap:0;border:1px solid var(--border);
  border-radius:10px;overflow:hidden;background:var(--surface-2);
}
body.page-myattendance .attendance-filter-btn{
  appearance:none;border:0;border-right:1px solid var(--border);border-radius:0;
  background:transparent;color:var(--ink-soft);padding:9px 13px;font:inherit;
  font-size:12px;font-weight:750;cursor:pointer;white-space:nowrap;
}
body.page-myattendance .attendance-filter-btn:last-child{border-right:0}
body.page-myattendance .attendance-filter-btn:hover{
  color:var(--gold-deep);background:color-mix(in srgb,var(--gold-deep) 6%,transparent);
}
body.page-myattendance .attendance-filter-btn.active{
  color:var(--on-accent);background:var(--gold-deep);
}
body.page-myattendance .attendance-custom-range{
  display:flex;align-items:end;gap:10px;padding:12px;margin:0 0 14px;
  border:1px solid var(--border);background:var(--surface-2);border-radius:10px;
}
body.page-myattendance .attendance-custom-range[hidden]{display:none!important}
body.page-myattendance .attendance-custom-range label{
  display:flex;flex-direction:column;gap:5px;color:var(--ink-soft);
  font-size:11px;font-weight:750;text-transform:uppercase;letter-spacing:.04em;
}
body.page-myattendance .attendance-custom-range input{
  min-width:165px;border:1px solid var(--border);background:var(--surface);
  color:var(--ink);border-radius:8px;padding:9px 10px;font:inherit;font-size:13px;
}
body.page-myattendance .attendance-custom-range .primary{
  border:0;border-radius:8px;background:var(--gold-deep);color:var(--on-accent);
  padding:10px 16px;font-weight:750;cursor:pointer;
}
body.page-myattendance .attendance-filter-error{
  color:var(--red);font-size:12px;font-weight:700;align-self:center;
}
@media(max-width:760px){
  body.page-myattendance .attendance-filter-head{align-items:flex-start;flex-direction:column}
  body.page-myattendance .attendance-filter-tabs{width:100%;overflow-x:auto}
  body.page-myattendance .attendance-filter-btn{flex:1}
  body.page-myattendance .attendance-custom-range{align-items:stretch;flex-wrap:wrap}
  body.page-myattendance .attendance-custom-range label{flex:1 1 160px}
  body.page-myattendance .attendance-custom-range input{min-width:0;width:100%}
}

/* Desktop/tablet sidebar may be fully collapsed, not only its nav groups. */
@media(min-width:881px){
  .app-sidebar{
    transition:width .18s ease,padding .18s ease,transform .18s ease;
    overflow-x:hidden;
  }
  .sidebar-toggle{
    display:flex;
    top:14px;
    left:204px;
    transition:left .18s ease,background .15s ease;
    background:var(--sidebar-hover,#1E293B);
    border:1px solid rgba(255,255,255,.12);
    box-shadow:0 2px 8px rgba(0,0,0,.18);
  }
  body.sidebar-collapsed .app-sidebar{
    width:0!important;
    padding-left:0!important;
    padding-right:0!important;
    border:0;
  }
  body.sidebar-collapsed .sidebar-toggle{left:14px}
}
@media(max-width:880px){
  .sidebar-toggle{display:flex}
}


/* =========================================================
   v23.2 — Cash Drawer modal layout repair
   ========================================================= */
body.page-cashdrawer .modal-bg{
  position:fixed;
  inset:0;
  z-index:400;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(15,23,42,.56);
  backdrop-filter:blur(2px);
}
body.page-cashdrawer .modal-bg.show{
  display:flex;
}
body.page-cashdrawer .modal{
  width:min(100%,560px);
  max-height:min(88vh,720px);
  overflow-y:auto;
  margin:0;
  padding:22px;
  border:1px solid var(--border,#e2e8f0);
  border-radius:14px;
  background:var(--surface,#fff);
  color:var(--ink,#0f172a);
  box-shadow:0 24px 70px rgba(15,23,42,.28);
}
body.page-cashdrawer .modal h3{
  margin:0 0 16px;
  font-size:18px;
  line-height:1.2;
  font-weight:800;
}
body.page-cashdrawer .modal .form-row{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin:0 0 12px;
}
body.page-cashdrawer .modal .form-row > div{
  min-width:0;
}
body.page-cashdrawer .modal label{
  display:block;
  margin:0 0 6px;
  color:var(--ink-soft,#475569);
  font-size:11px;
  line-height:1.2;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}
body.page-cashdrawer .modal input,
body.page-cashdrawer .modal select,
body.page-cashdrawer .modal textarea{
  width:100%;
  min-height:42px;
  padding:9px 11px;
  border:1px solid var(--border,#dbe3ee);
  border-radius:9px;
  background:var(--surface-2,#f8fafc);
  color:var(--ink,#0f172a);
  font:inherit;
}
body.page-cashdrawer .modal input:focus,
body.page-cashdrawer .modal select:focus,
body.page-cashdrawer .modal textarea:focus{
  outline:2px solid color-mix(in srgb,var(--gold-deep,#2563eb) 25%,transparent);
  border-color:var(--gold-deep,#2563eb);
}
body.page-cashdrawer .modal .sub{
  margin:6px 0 0;
  color:var(--ink-soft,#64748b);
  font-size:12px;
  line-height:1.45;
}
body.page-cashdrawer .modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:18px;
}
body.page-cashdrawer .modal-actions button{
  min-height:40px;
  padding:9px 15px;
}
body.page-cashdrawer #appMessageModal .modal{
  width:min(100%,460px);
}
body.page-cashdrawer #appMessageBody{
  color:var(--ink-soft,#475569);
  font-size:14px;
  line-height:1.55;
  white-space:pre-wrap;
}
body.page-cashdrawer.dark .modal-bg{
  background:rgba(0,0,0,.68);
}
@media (max-width:640px){
  body.page-cashdrawer .modal-bg{
    align-items:flex-end;
    padding:10px;
  }
  body.page-cashdrawer .modal{
    width:100%;
    max-height:82vh;
    padding:18px 14px;
    border-radius:14px 14px 8px 8px;
  }
  body.page-cashdrawer .modal .form-row{
    grid-template-columns:1fr;
    gap:10px;
  }
  body.page-cashdrawer .modal-actions{
    position:sticky;
    bottom:-18px;
    margin:18px -14px -18px;
    padding:12px 14px;
    background:var(--surface,#fff);
    border-top:1px solid var(--border,#e2e8f0);
  }
}


/* =========================================================
   v23.3 — Foot traffic + bottom sidebar collapse control
   ========================================================= */
.foot-traffic-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
  align-items:stretch;
}
.foot-traffic-item{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border:1px solid var(--border,#e2e8f0);
  border-radius:10px;
  background:var(--surface-2,#f8fafc);
}
.foot-traffic-label{
  min-width:0;
  color:var(--ink-soft,#475569);
  font-size:12px;
  line-height:1.3;
}
.foot-traffic-value{
  flex:0 0 auto;
  color:var(--ink,#0f172a);
  font-size:15px;
  font-weight:800;
}
@media (max-width:980px){
  .foot-traffic-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .foot-traffic-grid{grid-template-columns:1fr}
}

.sidebar-collapse-bottom{
  width:100%;
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  margin:8px 0 6px;
  padding:9px 12px;
  border:1px solid rgba(148,163,184,.18);
  border-radius:10px;
  background:rgba(148,163,184,.06);
  color:var(--sidebar-text,#94a3b8);
  font:700 12px/1 Inter,system-ui,sans-serif;
  cursor:pointer;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.sidebar-collapse-bottom:hover{
  background:rgba(148,163,184,.12);
  color:#fff;
  border-color:rgba(148,163,184,.28);
}
.sidebar-collapse-icon{
  width:22px;height:22px;
  display:grid;place-items:center;
  flex:0 0 auto;
}
.sidebar-collapse-bottom.is-collapsed .sidebar-collapse-icon{
  transform:rotate(180deg);
}
body.sidebar-collapsed .sidebar-collapse-text{
  display:none;
}
body.sidebar-collapsed .sidebar-collapse-bottom{
  justify-content:center;
  padding-left:8px;
  padding-right:8px;
}
#sidebarCollapseToggleLegacy,
.sidebar-collapse-float,
.sidebar-toggle-float{
  display:none !important;
}


/* =========================================================
   v23.5 — Single bottom sidebar collapse / expand control
   ========================================================= */
.sidebar-toggle,
#sidebarToggle{
  display:none !important;
}

.sidebar-footer{
  margin-top:auto !important;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding-top:12px;
}

.sidebar-getting-started-footer{
  order:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  width:100%;
  margin:0;
  padding:9px 11px;
  border:1px solid rgba(96,165,250,.38);
  border-radius:9px;
  background:rgba(37,99,235,.16);
  color:#dbeafe;
}
.sidebar-getting-started-footer:hover,.sidebar-getting-started-footer.active{background:rgba(37,99,235,.3);color:#fff}
.sidebar-setup-counter{flex:0 0 auto;padding:3px 7px;border-radius:999px;background:#2563eb;color:#fff;font-size:10px;font-weight:800;letter-spacing:0}

.sidebar-collapse-bottom{
  order:1;
  width:100%;
  min-height:42px;
  display:flex !important;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  margin:0 !important;
  padding:9px 11px;
  border:1px solid rgba(148,163,184,.16);
  border-radius:9px;
  background:rgba(255,255,255,.055);
  color:#e2e8f0;
  box-shadow:none;
  cursor:pointer;
}

.sidebar-collapse-bottom:hover{
  background:rgba(59,130,246,.14);
  border-color:rgba(59,130,246,.32);
  color:#fff;
}

.sidebar-collapse-bottom .sidebar-collapse-icon{
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border-radius:7px;
  background:rgba(255,255,255,.07);
}

.sidebar-collapse-bottom .sidebar-collapse-text{
  font-size:12px;
  line-height:1;
  font-weight:750;
}

.sidebar-collapse-bottom::after{
  content:none !important;
}

.sidebar-footer #sidebarLogout{
  order:2;
}

@media(min-width:881px){
  .app-sidebar{
    width:230px;
    min-width:230px;
    transition:width .18s ease,min-width .18s ease,padding .18s ease;
  }

  body.sidebar-collapsed .app-sidebar{
    width:58px !important;
    min-width:58px !important;
    padding-left:7px !important;
    padding-right:7px !important;
    border-right:1px solid rgba(148,163,184,.10);
    overflow:hidden;
  }

  body.sidebar-collapsed .sidebar-logo,
  body.sidebar-collapsed .sidebar-nav{
    visibility:hidden;
    opacity:0;
    pointer-events:none;
  }

  body.sidebar-collapsed .sidebar-logo{
    height:0;
    min-height:0;
    padding:0;
    margin:0;
    overflow:hidden;
  }

  body.sidebar-collapsed .sidebar-nav{
    flex:1 1 auto;
  }

  body.sidebar-collapsed .sidebar-footer{
    width:100%;
    margin-top:auto !important;
    padding:8px 0 10px !important;
    border-top:0;
  }

  body.sidebar-collapsed .sidebar-collapse-bottom{
    width:42px;
    height:42px;
    min-height:42px;
    margin:0 auto !important;
    padding:0;
    justify-content:center;
    border-radius:10px;
  }

  body.sidebar-collapsed .sidebar-collapse-bottom .sidebar-collapse-text,
  body.sidebar-collapsed #sidebarLogout{
    display:none !important;
  }

  body.sidebar-collapsed .sidebar-collapse-bottom .sidebar-collapse-icon{
    width:28px;
    height:28px;
    transform:rotate(180deg);
  }
}

/* On phones/tablets below desktop breakpoint, the sidebar still behaves as an overlay.
   The legacy top floating control is intentionally removed; the single footer control
   remains the sidebar close control once the drawer is open. */
@media(max-width:880px){
  .sidebar-toggle,
  #sidebarToggle{
    display:none !important;
  }
}


/* =========================================================
   v23.6 — Keep bottom Expand control visible when collapsed
   ========================================================= */
body.sidebar-collapsed .sidebar{
  width:72px !important;
  min-width:72px !important;
  max-width:72px !important;
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
}
body.sidebar-collapsed .sidebar .sidebar-brand,
body.sidebar-collapsed .sidebar .sidebar-nav,
body.sidebar-collapsed .sidebar .sidebar-section,
body.sidebar-collapsed .sidebar .sidebar-menu,
body.sidebar-collapsed .sidebar .nav-group,
body.sidebar-collapsed .sidebar .nav-item,
body.sidebar-collapsed .sidebar .sidebar-scroll{
  visibility:hidden !important;
  pointer-events:none !important;
}
body.sidebar-collapsed .sidebar-footer{
  visibility:visible !important;
  pointer-events:auto !important;
  margin-top:auto !important;
  width:100% !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  padding:10px 8px 12px !important;
  border-top:1px solid rgba(148,163,184,.12) !important;
}
body.sidebar-collapsed .sidebar-footer .sidebar-collapse-bottom{
  visibility:visible !important;
  pointer-events:auto !important;
  display:flex !important;
  width:48px !important;
  min-width:48px !important;
  height:46px !important;
  min-height:46px !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  margin:0 !important;
  border-radius:12px !important;
  background:rgba(37,99,235,.18) !important;
  border:1px solid rgba(59,130,246,.35) !important;
  color:#fff !important;
}
body.sidebar-collapsed .sidebar-footer .sidebar-collapse-bottom:hover{
  background:rgba(37,99,235,.32) !important;
  border-color:rgba(96,165,250,.55) !important;
}
body.sidebar-collapsed .sidebar-footer .sidebar-collapse-bottom .sidebar-collapse-icon{
  display:grid !important;
  place-items:center !important;
  width:30px !important;
  height:30px !important;
  margin:0 !important;
  visibility:visible !important;
  transform:rotate(180deg) !important;
}
body.sidebar-collapsed .sidebar-footer .sidebar-collapse-bottom .sidebar-collapse-text,
body.sidebar-collapsed .sidebar-footer .sidebar-collapse-bottom::after{
  display:none !important;
}
body.sidebar-collapsed .sidebar-footer #sidebarLogout,
body.sidebar-collapsed .sidebar-footer a[href*="logout"]{
  display:none !important;
}


/* =========================================================
   v23.9 — Foot Traffic: clear count-to-bucket association
   ========================================================= */
.foot-traffic-tiles{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
  margin-top:18px;
}
.foot-traffic-tile{
  min-width:0;
  padding:13px 14px;
  border:1px solid var(--border,#e2e8f0);
  border-radius:12px;
  background:var(--surface-2,#f8fafc);
}
.foot-traffic-tile-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.foot-traffic-tile-label{
  min-width:0;
  color:var(--ink-soft,#475569);
  font-size:12px;
  line-height:1.35;
  font-weight:650;
}
.foot-traffic-tile-count{
  flex:0 0 auto;
  color:var(--ink,#0f172a);
  font-size:21px;
  line-height:1;
  font-weight:850;
}
.foot-traffic-meter{
  height:7px;
  overflow:hidden;
  border-radius:999px;
  background:color-mix(in srgb,var(--gold-deep,#2563eb) 10%,var(--surface,#fff));
}
.foot-traffic-meter > span{
  display:block;
  height:100%;
  border-radius:inherit;
  background:var(--gold-deep,#2563eb);
}
@media (max-width:1100px){
  .foot-traffic-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:720px){
  .foot-traffic-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:480px){
  .foot-traffic-tiles{grid-template-columns:1fr}
}


/* =========================================================
   v24 — Cash Drawer rules + checkout-only Sales Basket lock
   ========================================================= */
body.page-basket .cartpane{
  position:relative;
}
body.page-basket .drawer-checkout-lock{
  position:absolute;
  inset:0;
  z-index:80;
  align-items:flex-start;
  justify-content:center;
  padding:86px 18px 18px;
  background:color-mix(in srgb,var(--surface,#fff) 88%,transparent);
  backdrop-filter:blur(2px);
}
body.page-basket .drawer-checkout-lock-card{
  width:min(100%,340px);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:9px;
  padding:20px 18px;
  border:1px solid var(--border,#e2e8f0);
  border-radius:14px;
  background:var(--surface,#fff);
  color:var(--ink,#0f172a);
  text-align:center;
  box-shadow:0 10px 30px rgba(15,23,42,.12);
}
body.page-basket .drawer-checkout-lock-card strong{
  font-size:15px;
}
body.page-basket .drawer-checkout-lock-card span{
  color:var(--ink-soft,#64748b);
  font-size:12px;
  line-height:1.45;
}
body.page-basket .drawer-lock-icon{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:color-mix(in srgb,var(--gold-deep,#2563eb) 10%,var(--surface-2,#f8fafc));
  font-size:18px;
}
body.page-basket .cartpane.drawer-locked > :not(.drawer-checkout-lock){
  pointer-events:none;
  user-select:none;
}
@supports not (background:color-mix(in srgb,red 10%,white)){
  body.page-basket .drawer-checkout-lock{background:rgba(255,255,255,.94)}
}
body.page-basket.dark .drawer-checkout-lock{
  background:rgba(24,24,27,.90);
}


/* =========================================================
   v24.2 — Cash Drawer discrepancy dashboard alert
   ========================================================= */
.drawer-discrepancy-card{
  border-left:4px solid #dc2626;
}
.drawer-discrepancy-list{
  display:grid;
  gap:10px;
}
.drawer-discrepancy-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 0;
  border-bottom:1px solid var(--border,#e2e8f0);
}
.drawer-discrepancy-row:last-child{
  border-bottom:0;
}
.drawer-discrepancy-main{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.drawer-discrepancy-main strong{
  color:var(--ink,#0f172a);
  font-size:13px;
}
.drawer-discrepancy-main span{
  color:var(--ink-soft,#64748b);
  font-size:11px;
}
.drawer-discrepancy-values{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:10px 14px;
  color:var(--ink-soft,#64748b);
  font-size:11px;
}
.drawer-discrepancy-values b{
  color:var(--ink,#0f172a);
}
.drawer-discrepancy-values .short{
  color:#dc2626;
}
.drawer-discrepancy-values .short b{
  color:#dc2626;
}
.drawer-discrepancy-values .over{
  color:#d97706;
}
.drawer-discrepancy-values .over b{
  color:#d97706;
}
@media (max-width:760px){
  .drawer-discrepancy-row{
    align-items:flex-start;
    flex-direction:column;
  }
  .drawer-discrepancy-values{
    justify-content:flex-start;
  }
}

/* v24.3 Smart Product Variation Builder */
.product-editor-modal{width:min(1180px,96vw)!important;max-width:1180px!important;max-height:92vh;overflow:auto;padding-bottom:0!important}
.product-editor-head{display:flex;justify-content:space-between;gap:16px;margin-bottom:16px}.product-editor-head h3{margin:0 0 4px}.product-editor-photo{margin:14px 0}
.product-image-preview{display:none;width:76px;height:76px;object-fit:cover;border-radius:12px;border:1px solid var(--border,#e2e8f0);margin-top:8px}
.variant-setup-card{margin-top:16px;padding:16px;border:1px solid var(--border,#e2e8f0);border-radius:14px;background:var(--surface-2,#f8fafc)}
.variant-section-head,.variant-builder-toolbar{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.product-type-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:12px 0}
.product-type-option{display:flex;align-items:center;gap:12px;width:100%;min-height:72px;padding:13px 14px;text-align:left;border:1px solid var(--border,#dbe3ef)!important;border-radius:12px!important;background:var(--surface,#fff)!important;color:var(--ink,#0f172a)!important;box-shadow:none!important}
.product-type-option.active{border-color:var(--gold-deep,#2563eb)!important;box-shadow:0 0 0 2px color-mix(in srgb,var(--gold-deep,#2563eb) 16%,transparent)!important;background:color-mix(in srgb,var(--gold-deep,#2563eb) 6%,var(--surface,#fff))!important}
.product-type-option span:not(.product-type-icon){display:flex;flex-direction:column;gap:3px}.product-type-option small{color:var(--ink-soft,#64748b);font-weight:600}.product-type-icon{width:36px;height:36px;display:grid;place-items:center;flex:0 0 auto;border-radius:10px;background:var(--surface-2,#f1f5f9)}
.compact-fields{grid-template-columns:repeat(5,minmax(130px,1fr))!important;margin-top:14px}.variation-builder{margin-top:14px}.compact-btn{padding:8px 11px!important;min-height:auto!important}
.attribute-builder-row{display:grid;grid-template-columns:32px minmax(150px,.7fr) minmax(260px,1.6fr) 36px;gap:10px;align-items:start;padding:12px;margin-bottom:8px;border:1px solid var(--border,#e2e8f0);border-radius:12px;background:var(--surface,#fff)}
.attribute-index{width:28px;height:28px;display:grid;place-items:center;margin-top:22px;border-radius:50%;font-size:11px;font-weight:800;color:var(--gold-deep,#2563eb);background:color-mix(in srgb,var(--gold-deep,#2563eb) 10%,var(--surface,#fff))}
.attribute-chip-preview{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px;min-height:24px}.attribute-chip-preview span{display:inline-flex;padding:4px 8px;border-radius:999px;background:color-mix(in srgb,var(--gold-deep,#2563eb) 9%,var(--surface,#fff));color:var(--gold-deep,#2563eb);font-size:11px;font-weight:700}
.icon-danger-btn{width:32px!important;height:32px!important;min-width:32px!important;padding:0!important;display:grid!important;place-items:center!important;margin-top:22px;border:1px solid rgba(220,38,38,.18)!important;border-radius:9px!important;background:rgba(220,38,38,.07)!important;color:#dc2626!important;font-size:19px!important}.table-remove-btn{margin-top:0!important}
.variant-generate-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:12px 0 16px}.generated-variant-area{margin-top:12px;padding-top:14px;border-top:1px solid var(--border,#e2e8f0)}
.variant-count-pill,.new-pill{display:inline-flex;padding:5px 9px;border-radius:999px;font-size:11px;font-weight:800;background:var(--surface,#fff);border:1px solid var(--border,#e2e8f0);color:var(--ink-soft,#64748b)}.new-pill{padding:3px 6px;color:var(--gold-deep,#2563eb)}
.variant-bulk-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:10px;padding:9px;border:1px solid var(--border,#e2e8f0);border-radius:10px;background:var(--surface,#fff)}.variant-bulk-bar select,.variant-bulk-bar input{flex:1 1 100px;min-width:90px;max-width:150px;height:38px}.variant-bulk-bar button{flex:0 0 auto}.bulk-title{flex:0 0 auto;font-size:11px;font-weight:800;color:var(--ink-soft,#64748b)}
.photo-input-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.camera-capture-view{position:relative;width:100%;aspect-ratio:3/4;max-height:65vh;background:#000;border-radius:12px;overflow:hidden;margin:10px 0}
.camera-capture-view video,.camera-capture-view canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:620px){
  /* On phones, give the capture UI the whole screen (like a native camera) instead of a small
     centered modal — there's no reason to waste space here, and it makes the live preview much
     easier to frame the item in. */
  #cameraCaptureModal{padding:0}
  #cameraCaptureModal .modal{max-width:100vw!important;width:100vw;max-height:100vh;height:100vh;border-radius:0;display:flex;flex-direction:column}
  #cameraCaptureModal .camera-capture-view{flex:1 1 auto;aspect-ratio:auto;max-height:none}
}
.variant-table-wrap{border:1px solid var(--border,#e2e8f0);border-radius:12px;background:var(--surface,#fff)}.variant-editor-table{min-width:900px;margin:0!important}.variant-editor-table th{white-space:nowrap;font-size:10px!important;text-transform:uppercase;letter-spacing:.04em}.variant-editor-table td{vertical-align:middle}
.table-input{width:100%;min-width:88px;height:38px!important;padding:7px 8px!important;border-radius:8px!important}.sku-input{min-width:150px}
.variant-name-cell{display:flex;align-items:center;gap:5px;flex-wrap:wrap;min-width:150px}.variant-name-cell span{display:inline-flex;flex-direction:column;padding:5px 7px;border-radius:8px;background:var(--surface-2,#f8fafc);border:1px solid var(--border,#e2e8f0);font-size:11px;font-weight:800;line-height:1.1}.variant-name-cell small{margin-bottom:2px;color:var(--ink-soft,#64748b);font-size:8px;text-transform:uppercase}
.new-variant-row{background:color-mix(in srgb,var(--gold-deep,#2563eb) 3%,var(--surface,#fff))}
.mini-switch{position:relative;display:inline-flex;width:36px;height:21px}.mini-switch input{opacity:0;width:0;height:0}.mini-switch span{position:absolute;inset:0;border-radius:999px;background:#cbd5e1}.mini-switch span:before{content:"";position:absolute;width:15px;height:15px;left:3px;top:3px;border-radius:50%;background:#fff;transition:.15s}.mini-switch input:checked+span{background:var(--gold-deep,#2563eb)}.mini-switch input:checked+span:before{transform:translateX(15px)}
.sticky-modal-actions{position:sticky;bottom:0;z-index:20;margin:18px -18px 0!important;padding:12px 18px!important;background:color-mix(in srgb,var(--surface,#fff) 94%,transparent);border-top:1px solid var(--border,#e2e8f0);backdrop-filter:blur(8px)}
@media(max-width:900px){.product-editor-modal{width:98vw!important;max-height:95vh}.compact-fields{grid-template-columns:repeat(2,minmax(0,1fr))!important}.variant-bulk-bar{grid-template-columns:repeat(2,minmax(0,1fr))}.bulk-title{grid-column:1/-1}.attribute-builder-row{grid-template-columns:28px 1fr 36px}.attribute-values-field,.attribute-name-field{grid-column:2/3}.attribute-index{grid-row:1/3}.attribute-builder-row>.icon-danger-btn{grid-column:3;grid-row:1}}
@media(max-width:620px){.product-type-picker{grid-template-columns:1fr}.compact-fields{grid-template-columns:1fr!important}.variant-bulk-bar{grid-template-columns:1fr 1fr}.variant-bulk-bar button{grid-column:1/-1}}


/* =========================================================
   v24.4 — Drawer discrepancy alert
   ========================================================= */
.drawer-discrepancy-alert-host{
  margin:0 0 14px;
}
.drawer-discrepancy-card{
  border:1px solid rgba(220,38,38,.24)!important;
  border-left:4px solid #dc2626!important;
  background:color-mix(in srgb,#dc2626 3%,var(--surface,#fff))!important;
}
.drawer-discrepancy-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:10px;
}
.drawer-discrepancy-header h3{
  margin:2px 0 3px;
}
.drawer-discrepancy-kicker{
  color:#dc2626;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.drawer-discrepancy-link{
  white-space:nowrap;
  font-size:12px;
  font-weight:800;
  color:var(--gold-deep,#2563eb);
}
.drawer-discrepancy-list{
  display:grid;
}
.drawer-discrepancy-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:11px 0;
  border-top:1px solid var(--border,#e2e8f0);
}
.drawer-discrepancy-main{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.drawer-discrepancy-main strong{
  color:var(--ink,#0f172a);
  font-size:13px;
}
.drawer-discrepancy-main span{
  color:var(--ink-soft,#64748b);
  font-size:11px;
}
.drawer-discrepancy-values{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:8px 14px;
  color:var(--ink-soft,#64748b);
  font-size:11px;
}
.drawer-discrepancy-values b{color:var(--ink,#0f172a)}
.drawer-discrepancy-values .short,
.drawer-discrepancy-values .short b{color:#dc2626}
.drawer-discrepancy-values .over,
.drawer-discrepancy-values .over b{color:#d97706}
@media(max-width:760px){
  .drawer-discrepancy-header,
  .drawer-discrepancy-row{
    flex-direction:column;
    align-items:flex-start;
  }
  .drawer-discrepancy-values{
    justify-content:flex-start;
  }
}


/* =========================================================
   v25 — Payable module
   ========================================================= */
.page-payables .payable-kpis{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-bottom:14px;
}
.page-payables .payable-kpi{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:16px;
}
.page-payables .payable-kpi span{
  color:var(--ink-soft,#64748b);
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.page-payables .payable-kpi strong{font-size:22px}
.page-payables .payable-toolbar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}
.page-payables .payable-toolbar h3{margin:0 0 4px}
.page-payables .payable-filters{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px;
}
.page-payables .payable-filters select{min-width:145px}
.page-payables .payables-table{min-width:1050px}
.page-payables .payable-overdue-row{
  background:color-mix(in srgb,#dc2626 4%,var(--surface,#fff));
}
.page-payables .payable-detail-modal{
  width:min(920px,96vw)!important;
  max-width:920px!important;
  max-height:92vh;
  overflow:auto;
}
.page-payables .payable-detail-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px;
}
.page-payables .payable-detail-head h3{margin:0 0 3px}
.page-payables .payable-detail-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-bottom:16px;
}
.page-payables .payable-detail-grid>div{
  padding:12px;border:1px solid var(--border,#e2e8f0);border-radius:10px;background:var(--surface-2,#f8fafc);
  display:flex;flex-direction:column;gap:4px;
}
.page-payables .payable-detail-grid span{
  color:var(--ink-soft,#64748b);font-size:9px;font-weight:800;text-transform:uppercase;
}
.page-payables .payable-detail-grid strong{font-size:16px}
.page-payables .payable-payment-card{
  margin:16px 0;padding:14px;border:1px solid var(--border,#e2e8f0);border-radius:12px;background:var(--surface-2,#f8fafc);
}
.page-payables .payable-payment-card h4{margin:0 0 10px}
@media(max-width:820px){
  .page-payables .payable-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .page-payables .payable-toolbar{flex-direction:column}
  .page-payables .payable-filters{justify-content:flex-start}
  .page-payables .payable-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:520px){
  .page-payables .payable-kpis{grid-template-columns:1fr 1fr}
  .page-payables .payable-filters{display:grid;grid-template-columns:1fr;width:100%}
}


/* =========================================================
   v26 — Purchase Receiving
   ========================================================= */
.stockin-mode-tabs{
  display:flex;
  gap:8px;
  margin:0 0 14px;
}
.stockin-mode-tab{
  min-height:40px;
  padding:9px 14px!important;
  border:1px solid var(--border,#dbe3ef)!important;
  border-radius:10px!important;
  background:var(--surface,#fff)!important;
  color:var(--ink,#0f172a)!important;
  font-weight:800!important;
  box-shadow:none!important;
}
.stockin-mode-tab.active{
  background:var(--gold-deep,#2563eb)!important;
  border-color:var(--gold-deep,#2563eb)!important;
  color:#fff!important;
}
.purchase-receiving-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}
.purchase-receiving-head h3{margin:0 0 4px}
.purchase-line-count{
  display:inline-flex;
  align-items:center;
  padding:6px 9px;
  border:1px solid var(--border,#e2e8f0);
  border-radius:999px;
  background:var(--surface-2,#f8fafc);
  color:var(--ink-soft,#64748b);
  font-size:11px;
  font-weight:800;
}
.purchase-header-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
.purchase-add-line{
  display:grid;
  grid-template-columns:minmax(280px,2fr) minmax(100px,.5fr) minmax(120px,.6fr) auto;
  align-items:end;
  gap:10px;
  margin:16px 0 10px;
  padding:12px;
  border:1px solid var(--border,#e2e8f0);
  border-radius:12px;
  background:var(--surface-2,#f8fafc);
}
.purchase-add-line button{height:42px}
.purchase-lines-wrap{
  border:1px solid var(--border,#e2e8f0);
  border-radius:12px;
  background:var(--surface,#fff);
}
.purchase-lines-table{min-width:760px;margin:0!important}
.purchase-lines-table td{vertical-align:middle}
.purchase-footer{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:end;
  gap:16px;
  margin-top:14px;
}
.purchase-total-box{
  min-width:210px;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:4px;
  padding:12px 14px;
  border:1px solid var(--border,#e2e8f0);
  border-radius:12px;
  background:var(--surface-2,#f8fafc);
}
.purchase-total-box span{
  color:var(--ink-soft,#64748b);
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.purchase-total-box strong{font-size:22px}
.purchase-save-row{
  justify-content:flex-end;
  margin-top:12px;
}
.purchase-history-table{min-width:800px}
@media(max-width:900px){
  .purchase-header-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .purchase-add-line{grid-template-columns:1fr 1fr}
  .purchase-add-variant{grid-column:1/-1}
  .purchase-add-line button{grid-column:1/-1}
}
@media(max-width:620px){
  .stockin-mode-tabs{display:grid;grid-template-columns:1fr 1fr}
  .purchase-header-grid{grid-template-columns:1fr!important}
  .purchase-add-line{grid-template-columns:1fr}
  .purchase-add-variant,.purchase-add-line button{grid-column:auto}
  .purchase-footer{grid-template-columns:1fr}
  .purchase-total-box{align-items:flex-start;min-width:0}
}


/* =========================================================
   v26.1 — Payable page Admin-shell integration
   ========================================================= */
body.page-admin.page-payables{
  min-height:100vh;
}
body.page-admin.page-payables .main-area{
  background:var(--bg);
  min-height:100vh;
}
body.page-admin.page-payables .payable-app{
  max-width:1220px;
  margin:0 auto;
  padding:0 28px 64px;
}
body.page-admin.page-payables .payable-header{
  padding:26px 0 18px;
  margin-bottom:18px;
}
body.page-admin.page-payables .payable-page{
  display:grid;
  gap:16px;
}
body.page-admin.page-payables .payable-kpis{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin:0;
}
body.page-admin.page-payables .payable-kpi{
  min-height:104px;
  justify-content:center;
  padding:16px 18px;
}
body.page-admin.page-payables .payable-kpi strong{
  font-size:24px;
  line-height:1.1;
}
body.page-admin.page-payables .payable-page > .card{
  margin:0;
  padding:18px;
}
body.page-admin.page-payables .payable-toolbar{
  align-items:center;
}
body.page-admin.page-payables .payable-filters select,
body.page-admin.page-payables .payable-filters button{
  height:40px;
}
body.page-admin.page-payables .payables-table{
  width:100%;
  min-width:1020px;
}
body.page-admin.page-payables .payables-table th{
  white-space:nowrap;
}
body.page-admin.page-payables .payables-table td{
  vertical-align:middle;
}
body.page-admin.page-payables .payables-table td:nth-child(6),
body.page-admin.page-payables .payables-table td:nth-child(7),
body.page-admin.page-payables .payables-table td:nth-child(8){
  text-align:right;
  font-variant-numeric:tabular-nums;
}
body.page-admin.page-payables .payables-table tbody tr:hover td{
  background:color-mix(in srgb,var(--gold-deep) 4%,var(--surface));
}
body.page-admin.page-payables .payable-detail-modal{
  color:var(--ink);
}
body.page-admin.page-payables .payable-detail-modal .form-row{
  margin-top:12px;
}
body.page-admin.page-payables .payable-payment-card{
  margin-top:18px;
}
@media(max-width:980px){
  body.page-admin.page-payables .payable-app{
    padding-left:20px;
    padding-right:20px;
  }
  body.page-admin.page-payables .payable-kpis{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media(max-width:620px){
  body.page-admin.page-payables .payable-app{
    padding-left:14px;
    padding-right:14px;
  }
  body.page-admin.page-payables .payable-header{
    align-items:flex-start;
  }
  body.page-admin.page-payables .payable-kpis{
    grid-template-columns:1fr 1fr;
  }
  body.page-admin.page-payables .payable-toolbar{
    align-items:stretch;
  }
}


/* =========================================================
   v26.3 — Purchase Receiving split payment
   ========================================================= */
.purchase-split-summary{
  width:100%;
  margin-top:7px;
  padding-top:7px;
  border-top:1px solid var(--border,#e2e8f0);
  display:grid;
  gap:4px;
}
.purchase-split-summary small{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  width:100%;
  color:var(--ink-soft,#64748b);
  font-size:10px;
  font-weight:700;
  text-transform:none;
  letter-spacing:0;
}
.purchase-split-summary b{
  color:var(--ink,#0f172a);
  font-size:11px;
}


/* =========================================================
   v26.4 — Quick Stock In split payment
   ========================================================= */
.quick-stockin-split-summary{
  grid-column:1/-1;
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
  padding:10px 12px;
  border:1px solid var(--border,#e2e8f0);
  border-radius:10px;
  background:var(--surface-2,#f8fafc);
}
.quick-stockin-split-summary span{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--ink-soft,#64748b);
  font-size:11px;
  font-weight:700;
}
.quick-stockin-split-summary b{
  color:var(--ink,#0f172a);
  font-size:12px;
}


/* =========================================================
   v27 — Flexible payment allocation builder
   ========================================================= */
.payment-allocation-builder{
  grid-column:1/-1;
  margin-top:4px;
  padding:12px;
  border:1px solid var(--border,#e2e8f0);
  border-radius:12px;
  background:var(--surface-2,#f8fafc);
}
.payment-allocation-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.payment-allocation-row{
  display:grid;
  grid-template-columns:minmax(130px,.8fr) minmax(160px,1.2fr) minmax(110px,.7fr) 34px;
  gap:8px;
  align-items:center;
  margin-bottom:8px;
}
.payment-allocation-row select,
.payment-allocation-row input{
  height:40px;
  min-width:0;
}
.payment-allocation-row .icon-danger-btn{
  margin:0!important;
}
.payment-allocation-summary{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:10px 20px;
  padding-top:9px;
  border-top:1px solid var(--border,#e2e8f0);
  color:var(--ink-soft,#64748b);
  font-size:11px;
  font-weight:700;
}
.payment-allocation-summary b{
  margin-left:4px;
  color:var(--ink,#0f172a);
}
@media(max-width:720px){
  .payment-allocation-row{grid-template-columns:1fr 1fr}
}

/* =========================================================
   v27 — Standalone Suppliers module
   ========================================================= */
.page-suppliers .suppliers-app{
  max-width:1220px;
  margin:0 auto;
  padding:0 28px 64px;
}
.page-suppliers .supplier-kpis{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-bottom:14px;
}
.page-suppliers .supplier-kpi{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:16px;
}
.page-suppliers .supplier-kpi span{
  color:var(--ink-soft,#64748b);
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
}
.page-suppliers .supplier-kpi strong{font-size:24px}
.page-suppliers .supplier-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}
.page-suppliers .supplier-toolbar h3{margin:0 0 4px}
.page-suppliers .supplier-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}
.page-suppliers .supplier-actions input[type=search]{min-width:220px}
.page-suppliers .supplier-inactive-filter{
  display:flex;
  align-items:center;
  gap:6px;
  color:var(--ink-soft,#64748b);
  font-size:12px;
}
.page-suppliers .supplier-table{min-width:900px}
.page-suppliers .supplier-modal{
  width:min(760px,94vw)!important;
  max-width:760px!important;
}
@media(max-width:800px){
  .page-suppliers .suppliers-app{padding-left:18px;padding-right:18px}
  .page-suppliers .supplier-toolbar{align-items:flex-start;flex-direction:column}
  .page-suppliers .supplier-actions{justify-content:flex-start;width:100%}
}
@media(max-width:520px){
  .page-suppliers .supplier-kpis{grid-template-columns:1fr 1fr}
}


/* =========================================================
   v27.1 — Suppliers layout + payable balance
   ========================================================= */
body.page-admin.page-suppliers .suppliers-app{
  width:100%;
  max-width:1220px;
  margin:0 auto;
  padding:0 28px 56px;
}
body.page-admin.page-suppliers .supplier-kpis{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:12px!important;
  margin:0 0 16px!important;
}
body.page-admin.page-suppliers .supplier-kpi{
  min-width:0!important;
  min-height:108px;
  margin:0!important;
  padding:16px 18px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center;
  align-items:flex-start;
  gap:5px!important;
}
body.page-admin.page-suppliers .supplier-kpi span{
  display:block;
  color:var(--ink-soft,#64748b);
  font-size:10px;
  line-height:1.2;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}
body.page-admin.page-suppliers .supplier-kpi strong{
  display:block;
  font-size:24px;
  line-height:1.1;
  font-variant-numeric:tabular-nums;
}
body.page-admin.page-suppliers .supplier-kpi small{
  color:var(--ink-soft,#64748b);
  font-size:10px;
  line-height:1.25;
}
body.page-admin.page-suppliers .suppliers-app > .card{
  margin:0!important;
  padding:18px!important;
}
body.page-admin.page-suppliers .supplier-toolbar{
  display:grid!important;
  grid-template-columns:minmax(220px,1fr) auto!important;
  align-items:end!important;
  gap:16px!important;
  margin-bottom:14px!important;
}
body.page-admin.page-suppliers .supplier-toolbar-title h3{
  margin:0 0 4px!important;
}
body.page-admin.page-suppliers .supplier-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:8px!important;
  flex-wrap:wrap;
}
body.page-admin.page-suppliers .supplier-actions input[type="search"]{
  width:min(340px,32vw)!important;
  min-width:220px!important;
  height:40px;
}
body.page-admin.page-suppliers .supplier-inactive-filter{
  height:40px;
  padding:0 10px;
  display:inline-flex!important;
  align-items:center!important;
  gap:7px!important;
  border:1px solid var(--border,#e2e8f0);
  border-radius:9px;
  background:var(--surface,#fff);
  white-space:nowrap;
}
body.page-admin.page-suppliers .supplier-inactive-filter input{
  margin:0!important;
}
body.page-admin.page-suppliers .supplier-table{
  width:100%!important;
  min-width:1030px!important;
}
body.page-admin.page-suppliers .supplier-table th{
  white-space:nowrap;
}
body.page-admin.page-suppliers .supplier-table td{
  vertical-align:middle;
}
body.page-admin.page-suppliers .supplier-table .money-col{
  text-align:right;
  font-variant-numeric:tabular-nums;
}
body.page-admin.page-suppliers .supplier-name-cell{
  min-width:180px;
}
body.page-admin.page-suppliers .supplier-note{
  margin-top:3px;
  max-width:260px;
}
body.page-admin.page-suppliers .supplier-contact-stack{
  display:grid;
  gap:2px;
}
body.page-admin.page-suppliers .supplier-address-cell{
  max-width:250px;
  white-space:normal;
}
body.page-admin.page-suppliers .supplier-balance{
  min-width:120px;
  display:grid;
  justify-items:end;
  gap:2px;
}
body.page-admin.page-suppliers .supplier-balance strong{
  font-size:14px;
}
body.page-admin.page-suppliers .supplier-balance small{
  color:var(--ink-soft,#64748b);
  font-size:9px;
  white-space:nowrap;
}
body.page-admin.page-suppliers .supplier-balance.has-balance strong{
  color:#b45309;
}
body.page-admin.page-suppliers .supplier-balance.zero-balance strong{
  color:var(--ink-soft,#64748b);
}
body.page-admin.page-suppliers .supplier-row-actions{
  white-space:nowrap;
}
body.page-admin.page-suppliers .supplier-row-actions button+button{
  margin-left:4px;
}
@media(max-width:980px){
  body.page-admin.page-suppliers .supplier-kpis{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  body.page-admin.page-suppliers .supplier-toolbar{
    grid-template-columns:1fr!important;
    align-items:start!important;
  }
  body.page-admin.page-suppliers .supplier-actions{
    justify-content:flex-start!important;
  }
  body.page-admin.page-suppliers .supplier-actions input[type="search"]{
    width:min(100%,360px)!important;
  }
}
@media(max-width:560px){
  body.page-admin.page-suppliers .suppliers-app{
    padding-left:14px!important;
    padding-right:14px!important;
  }
  body.page-admin.page-suppliers .supplier-kpis{
    grid-template-columns:1fr 1fr!important;
  }
  body.page-admin.page-suppliers .supplier-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
    width:100%;
  }
  body.page-admin.page-suppliers .supplier-actions input[type="search"],
  body.page-admin.page-suppliers .supplier-actions button,
  body.page-admin.page-suppliers .supplier-inactive-filter{
    width:100%!important;
  }
}


/* =========================================================
   v27.2 — Contacts / Customers
   ========================================================= */
body.page-admin.page-customers .contacts-page-app{
  width:100%;
  max-width:1220px;
  margin:0 auto;
  padding:0 28px 56px;
}
body.page-admin.page-customers .contact-kpis{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-bottom:16px;
}
body.page-admin.page-customers .contact-kpi{
  min-height:98px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  padding:16px 18px;
}
body.page-admin.page-customers .contact-kpi span{
  color:var(--ink-soft,#64748b);
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
}
body.page-admin.page-customers .contact-kpi strong{font-size:24px}
body.page-admin.page-customers .contact-toolbar{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:end;
  gap:16px;
  margin-bottom:14px;
}
body.page-admin.page-customers .contact-toolbar h3{margin:0 0 4px}
body.page-admin.page-customers .contact-actions{
  display:flex;
  gap:8px;
  align-items:center;
}
body.page-admin.page-customers .contact-actions input[type=search]{
  min-width:260px;
  height:40px;
}
body.page-admin.page-customers .contact-table{
  width:100%;
  min-width:980px;
}
body.page-admin.page-customers .contact-table td{vertical-align:middle}
body.page-admin.page-customers .money-col{text-align:right;font-variant-numeric:tabular-nums}
body.page-admin.page-customers .customer-edit-modal{
  width:min(820px,95vw)!important;
  max-width:820px!important;
}
@media(max-width:900px){
  body.page-admin.page-customers .contacts-page-app{padding-left:18px;padding-right:18px}
  body.page-admin.page-customers .contact-toolbar{grid-template-columns:1fr}
  body.page-admin.page-customers .contact-actions{justify-content:flex-start}
}
@media(max-width:560px){
  body.page-admin.page-customers .contact-kpis{grid-template-columns:1fr 1fr}
  body.page-admin.page-customers .contact-actions{display:grid;grid-template-columns:1fr;width:100%}
  body.page-admin.page-customers .contact-actions input[type=search],
  body.page-admin.page-customers .contact-actions button{width:100%;min-width:0}
}


/* =========================================================
   v27.3 — Employee directory modals + smart scheduling
   ========================================================= */
.employee-directory-card{padding:18px!important}
.employee-directory-head,.employee-schedule-head,.employee-modal-head{
  display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px;
}
.employee-directory-head h3,.employee-schedule-head h3,.employee-modal-head h3{margin:0 0 4px}
.u-admin-employee-modal,.employee-schedule-modal{
  width:min(920px,96vw)!important;max-width:920px!important;max-height:92vh;overflow:auto;
}
.employee-schedule-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:14px}
.employee-schedule-kpi{min-height:92px;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:15px 17px}
.employee-schedule-kpi span{font-size:10px;font-weight:800;text-transform:uppercase;color:var(--ink-soft,#64748b)}
.employee-schedule-kpi strong{font-size:24px}
.employee-schedule-card{padding:18px!important}
.employee-schedule-head select{min-width:220px}
.smart-coverage-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.smart-coverage-day{min-width:0;padding:10px;border:1px solid var(--border,#e2e8f0);border-radius:10px;background:var(--surface-2,#f8fafc)}
.smart-coverage-day.low{border-color:color-mix(in srgb,#dc2626 35%,var(--border))}
.smart-coverage-day.warn{border-color:color-mix(in srgb,#d97706 35%,var(--border))}
.smart-coverage-date{display:grid;gap:6px;margin-bottom:8px}
.smart-coverage-date strong{font-size:11px}
.smart-coverage-staff{display:grid;gap:4px}
.smart-coverage-staff>span:not(.sub){font-size:10px;font-weight:700;padding:4px 6px;border-radius:7px;background:var(--surface,#fff);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.employee-schedule-table{min-width:820px}
.schedule-day-picker{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px;margin-top:6px}
.schedule-day-picker label{display:flex;align-items:center;justify-content:center;gap:5px;padding:9px 6px;border:1px solid var(--border,#e2e8f0);border-radius:9px;background:var(--surface-2,#f8fafc);font-size:11px;font-weight:700}
.schedule-day-picker input{margin:0}
.schedule-quick-days,.schedule-time-presets{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin-top:8px}
.schedule-time-presets span{font-size:10px;font-weight:800;color:var(--ink-soft,#64748b);text-transform:uppercase}
@media(max-width:980px){
  .smart-coverage-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:680px){
  .employee-directory-head,.employee-schedule-head,.employee-modal-head{align-items:flex-start;flex-direction:column}
  .employee-schedule-head select{width:100%;min-width:0}
  .employee-schedule-kpis{grid-template-columns:repeat(3,1fr)}
  .smart-coverage-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .schedule-day-picker{grid-template-columns:repeat(4,minmax(0,1fr))}
}


/* =========================================================
   v27.4 — Bi-weekly schedule controls
   ========================================================= */
#smBiweeklyAnchorField .sub{
  margin-top:4px;
  font-size:9px;
  line-height:1.25;
}
.employee-schedule-table td:first-child .sub{
  margin-top:3px;
  font-size:9px;
}
.smart-coverage-day.has-holiday{background:color-mix(in srgb,var(--gold-soft) 35%,var(--surface))}
.schedule-coverage-holiday{display:grid;gap:2px;margin:7px 0;padding:7px;border-radius:8px;background:var(--gold-soft);color:var(--gold-deep)}
.schedule-coverage-holiday strong{font-size:11px;line-height:1.25}.schedule-coverage-holiday span{font-size:9px;color:var(--ink-soft)}


/* =========================================================
   v27.5 — Smart expense recording
   ========================================================= */
.smart-expense-modal{
  width:min(920px,96vw)!important;
  max-width:920px!important;
  max-height:92vh;
  overflow:auto;
}
.smart-expense-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:12px;
}
.smart-expense-head h3{margin:0 0 4px}
.expense-source-guides{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin:0 0 14px;
}
.expense-source-guide{
  min-height:64px;
  padding:10px 12px!important;
  display:flex!important;
  flex-direction:column;
  align-items:flex-start!important;
  justify-content:center!important;
  gap:3px;
  border:1px solid var(--border,#e2e8f0)!important;
  border-radius:10px!important;
  background:var(--surface-2,#f8fafc)!important;
  color:var(--ink,#0f172a)!important;
  text-align:left;
  box-shadow:none!important;
}
.expense-source-guide b{font-size:11px}
.expense-source-guide span{
  color:var(--ink-soft,#64748b);
  font-size:9px;
  line-height:1.25;
}
.smart-expense-primary{
  padding-top:4px;
}
.smart-expense-lock-hint{
  margin-top:10px;
  padding:9px 11px;
  border:1px solid var(--border,#e2e8f0);
  border-radius:9px;
  background:var(--surface-2,#f8fafc);
  color:var(--ink-soft,#64748b);
  font-size:10px;
}
.smart-expenses-table{
  width:100%;
  min-width:1120px;
}
.smart-expenses-table td{
  vertical-align:middle;
}
.smart-expenses-table .money-col{
  text-align:right;
  font-variant-numeric:tabular-nums;
}
.smart-expenses-table .pill + .sub{
  margin-top:3px;
}
@media(max-width:760px){
  .expense-source-guides{
    grid-template-columns:1fr;
  }
  .smart-expense-head{
    flex-direction:column;
  }
}


/* =========================================================
   v27.6 — COA-backed Expense account selector
   ========================================================= */
.expense-coa-hint{
  margin-top:4px;
  font-size:9px;
}
.smart-expense-modal #eCategory option:disabled{
  color:var(--ink-soft,#64748b);
}


/* =========================================================
   v27.7 — Optional Cash Drawer mode
   ========================================================= */
.drawer-optional-state{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:16px;
  margin:10px 0 4px;
  border:1px solid var(--border,#e2e8f0);
  border-radius:12px;
  background:var(--surface-2,#f8fafc);
}
.drawer-optional-state strong{
  display:block;
  margin-bottom:4px;
  font-size:14px;
}
.drawer-optional-icon{
  width:30px;
  height:30px;
  flex:0 0 30px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(22,163,74,.12);
  color:#15803d;
  font-weight:900;
}
.drawer-optional-note,
.drawer-required-note{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:5px 10px;
  padding:10px 12px;
  margin:8px 0 12px;
  border-radius:10px;
  font-size:10px;
}
.drawer-optional-note{
  border:1px solid rgba(22,163,74,.22);
  background:rgba(22,163,74,.06);
}
.drawer-required-note{
  border:1px solid rgba(217,119,6,.25);
  background:rgba(217,119,6,.07);
}
.drawer-optional-note span,
.drawer-required-note span{
  color:var(--ink-soft,#64748b);
}


/* =========================================================
   v27.8 — Smart Payroll + statutory file import
   ========================================================= */
.payroll-smart-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:14px;margin-bottom:14px}
.payroll-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:14px}
.payroll-section-head h3{margin:0 0 4px}
.payroll-hours-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:12px}
.payroll-hours-kpi{padding:12px;border:1px solid var(--border,#e2e8f0);border-radius:10px;background:var(--surface-2,#f8fafc);display:grid;gap:4px}
.payroll-hours-kpi span{font-size:9px;font-weight:800;text-transform:uppercase;color:var(--ink-soft,#64748b)}
.payroll-hours-kpi strong{font-size:16px}
.payroll-hours-kpi small{font-size:9px;color:var(--ink-soft,#64748b)}
.payroll-hours-total{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:10px;padding:12px;border-top:1px solid var(--border,#e2e8f0)}
.payroll-hours-total>div{display:grid;gap:3px}
.payroll-hours-total span{font-size:9px;text-transform:uppercase;font-weight:800;color:var(--ink-soft,#64748b)}
.payroll-hours-total strong{font-size:14px}
.payroll-hours-total button{margin-left:auto}
.payroll-calculation-note{margin-top:8px}
.smart-deduction-picker{margin-top:8px;padding:11px 12px;border:1px solid var(--border,#e2e8f0);border-radius:10px;background:var(--surface-2,#f8fafc)}
.smart-deduction-title{display:flex;justify-content:space-between;gap:10px;margin-bottom:7px}
.payroll-preview-card{margin-top:12px;border:1px solid var(--border,#e2e8f0);border-radius:12px;overflow:hidden}
.payroll-preview-totals{display:grid;grid-template-columns:repeat(3,1fr)}
.payroll-preview-totals>div{padding:12px;border-right:1px solid var(--border,#e2e8f0);display:grid;gap:4px}
.payroll-preview-totals>div:last-child{border-right:0}
.payroll-preview-totals span{font-size:9px;text-transform:uppercase;font-weight:800;color:var(--ink-soft,#64748b)}
.payroll-preview-totals strong{font-size:18px}
.payroll-preview-totals .net strong{font-size:21px}
.payroll-preview-table{min-width:520px}
.smart-payroll-table{min-width:1100px}
.smart-payroll-table .money-col,.payroll-preview-table .money-col{text-align:right;font-variant-numeric:tabular-nums}
.statutory-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px}
.statutory-kpi{min-height:92px;padding:15px 17px;display:flex;flex-direction:column;justify-content:center;gap:4px}
.statutory-kpi span{font-size:9px;font-weight:800;text-transform:uppercase;color:var(--ink-soft,#64748b)}
.statutory-kpi strong{font-size:24px}
.statutory-tools-card{padding:18px!important}
.statutory-filter-row{max-width:320px;margin-top:12px}
.statutory-bracket-modal,.statutory-import-modal{width:min(920px,96vw)!important;max-width:920px!important;max-height:92vh;overflow:auto}
.statutory-import-columns{margin-bottom:12px;padding:10px 12px;border:1px solid var(--border,#e2e8f0);border-radius:9px;background:var(--surface-2,#f8fafc);font-size:10px;line-height:1.5}
.statutory-replace-toggle{margin:8px 0 12px}
.statutory-import-preview{max-height:330px;overflow:auto}
.statutory-import-preview table{min-width:1100px}
@media(max-width:1050px){
  .payroll-smart-grid{grid-template-columns:1fr}
  .statutory-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
  .payroll-hours-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .payroll-preview-totals{grid-template-columns:1fr}
  .payroll-preview-totals>div{border-right:0;border-bottom:1px solid var(--border,#e2e8f0)}
  .payroll-section-head,.smart-deduction-title{flex-direction:column}
}

/* ============================================================
   eSMEra v28 — Planning & Insights
   ============================================================ */
.planning-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.planning-horizon-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.planning-horizon.active{box-shadow:0 0 0 2px var(--gold-deep, #2563eb) inset}
.planning-confidence{display:inline-flex;align-items:center;border-radius:999px;padding:6px 10px;font-size:12px;font-weight:700;border:1px solid var(--border,#d9dee7)}
.planning-confidence-high{background:rgba(22,163,74,.10);color:#15803d;border-color:rgba(22,163,74,.25)}
.planning-confidence-medium{background:rgba(202,138,4,.10);color:#a16207;border-color:rgba(202,138,4,.25)}
.planning-confidence-low{background:rgba(220,38,38,.10);color:#b91c1c;border-color:rgba(220,38,38,.25)}
body.dark .planning-confidence-high{color:#86efac} body.dark .planning-confidence-medium{color:#fde047} body.dark .planning-confidence-low{color:#fca5a5}
.planning-kpis{grid-template-columns:repeat(5,minmax(0,1fr))}
.planning-kpis .stat{font-size:clamp(20px,2.2vw,30px)}
.planning-recommendations{display:grid;gap:10px;margin-top:12px}
.planning-recommendation{display:grid;grid-template-columns:5px 1fr;gap:12px;padding:12px 14px;border:1px solid var(--border,#e2e8f0);border-radius:12px;background:var(--card,#fff)}
.planning-rec-marker{border-radius:999px;background:#64748b}.planning-recommendation.critical .planning-rec-marker{background:#dc2626}.planning-recommendation.warning .planning-rec-marker{background:#ca8a04}.planning-recommendation.positive .planning-rec-marker{background:#16a34a}
.planning-quality-item,.planning-quality-good{padding:10px 12px;border-radius:10px;margin-top:8px;font-size:13px}.planning-quality-item{background:rgba(202,138,4,.10);border:1px solid rgba(202,138,4,.22)}.planning-quality-good{background:rgba(22,163,74,.08);border:1px solid rgba(22,163,74,.18)}
.planning-bar-list{display:grid;gap:7px;margin-top:12px}.planning-bar-row{display:grid;grid-template-columns:90px minmax(100px,1fr) 105px;align-items:center;gap:10px;font-size:12px}.planning-bar-row>b{text-align:right}.planning-bar-track{height:10px;border-radius:999px;background:rgba(148,163,184,.18);overflow:hidden}.planning-bar{height:100%;border-radius:999px;background:var(--gold-deep,#2563eb)}
.planning-tag{display:inline-flex;padding:3px 7px;border-radius:999px;font-size:11px;text-transform:capitalize;border:1px solid var(--border,#ddd)}.planning-tag.recurring{background:rgba(37,99,235,.08)}.planning-tag.variable{background:rgba(124,58,237,.08)}.planning-tag.irregular{background:rgba(100,116,139,.08)}
.planning-waterfall-result td,.planning-waterfall-subtotal td{font-weight:800;border-top:2px solid var(--border,#dbe2ea)}.planning-waterfall-result td:last-child{font-size:18px}.planning-waterfall-inflow td:last-child{font-weight:700}.planning-waterfall-outflow td:last-child,.planning-waterfall-reserve td:last-child{font-weight:700}
.planning-metric-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.planning-metric-mini{padding:12px;border:1px solid var(--border,#e2e8f0);border-radius:12px}.planning-metric-mini .value{font-size:20px;font-weight:800;margin-top:4px}
.planning-settings-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.planning-settings-grid label{display:block}.planning-settings-grid input{width:100%}
.planning-whatif-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.planning-whatif-results{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:16px}.planning-whatif-result{border:1px solid var(--border,#e2e8f0);border-radius:12px;padding:14px}.planning-whatif-result strong{display:block;font-size:20px;margin-top:5px}
.planning-whatif-verdict{margin-top:16px;padding:14px;border-radius:12px;border:1px solid var(--border,#ddd)}.planning-whatif-verdict.good{background:rgba(22,163,74,.08);border-color:rgba(22,163,74,.25)}.planning-whatif-verdict.warning{background:rgba(202,138,4,.08);border-color:rgba(202,138,4,.25)}.planning-whatif-verdict.danger{background:rgba(220,38,38,.08);border-color:rgba(220,38,38,.25)}
.planning-method{font-size:12px;line-height:1.55;background:rgba(100,116,139,.07);border:1px solid var(--border,#e2e8f0);border-radius:12px;padding:12px}
@media(max-width:1100px){.planning-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.planning-whatif-results{grid-template-columns:repeat(3,minmax(0,1fr))}.planning-settings-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.planning-kpis,.planning-metric-strip,.planning-settings-grid,.planning-whatif-grid,.planning-whatif-results{grid-template-columns:1fr}.planning-bar-row{grid-template-columns:72px 1fr 88px}.planning-toolbar{align-items:flex-start}.planning-horizon-row{width:100%}}


/* =========================================================
   v28.1 — Smart Product Master + category synchronization
   ========================================================= */
.product-master-summary{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin-bottom:12px;
}
.product-summary-card{
  min-height:76px;
  padding:12px 14px;
  border:1px solid var(--border,#e2e8f0);
  border-radius:10px;
  background:var(--surface-2,#f8fafc);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:4px;
}
.product-summary-card span,
.category-summary-card span{
  color:var(--ink-soft,#64748b);
  font-size:9px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.product-summary-card strong,
.category-summary-card strong{
  font-size:22px;
  line-height:1;
}
.product-master-toolbar{
  display:grid;
  grid-template-columns:minmax(260px,1.8fr) minmax(170px,1fr) minmax(150px,.9fr) minmax(145px,.85fr) 92px auto;
  gap:8px;
  align-items:end;
}
.product-master-toolbar>div{
  min-width:0;
}
.product-master-toolbar label{
  display:block;
  margin-bottom:5px;
  font-size:9px;
  font-weight:800;
  text-transform:uppercase;
  color:var(--ink-soft,#64748b);
}
.product-master-toolbar input,
.product-master-toolbar select{
  width:100%;
  min-width:0;
}
.product-filter-reset{
  height:40px;
}
.product-filter-context{
  min-height:28px;
  padding-top:9px;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  color:var(--ink-soft,#64748b);
  font-size:10px;
}
.product-filter-chip{
  padding:4px 7px;
  border:1px solid var(--border,#e2e8f0);
  border-radius:999px;
  background:var(--surface-2,#f8fafc);
  color:var(--ink,#0f172a);
}
.product-category-cell{
  display:inline-block;
  max-width:180px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.category-page-summary{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-bottom:12px;
}
.category-summary-card{
  min-height:82px;
  padding:14px 16px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:5px;
}
.category-page-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}
.category-page-head h3{margin:0 0 4px}
.category-modal{
  width:min(560px,94vw)!important;
  max-width:560px!important;
}
@media(max-width:1050px){
  .product-master-toolbar{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}
@media(max-width:720px){
  .product-master-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
  .product-master-toolbar{grid-template-columns:1fr 1fr}
  .product-search-wrap{grid-column:1/-1}
  .category-page-summary{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:520px){
  .product-master-toolbar{grid-template-columns:1fr}
  .product-search-wrap{grid-column:auto}
  .category-page-summary{grid-template-columns:1fr 1fr}
  .category-page-head{flex-direction:column}
}
.product-filters-toggle-row{display:none;margin-bottom:10px}
@media(max-width:760px){
  /* Collapse the filter row by default on mobile so the product list itself is what greets you
     here, not a wall of search/category/stock controls above the fold — Show filters reveals them. */
  .product-filters-toggle-row{display:flex}
  .product-filters-panel{display:none}
  .product-filters-panel.open{display:block}
}
@media(max-width:760px){
  /* Product Master's table has 12 columns — unusable on a phone without constant left-right
     scrolling. Below this width each row becomes a self-contained card instead: thumbnail +
     status float top-right, the product name is the card's title, and the rest of the columns
     lay out as compact label/value lines (same pattern already used for the attendance/payroll
     tables), so the whole variant is readable in one glance without any horizontal scrolling. */
  body.page-admin #inv-products .table-scroll{overflow-x:visible}
  body.page-admin #productsTable{min-width:0!important}
  body.page-admin #productsTable thead{display:none}
  body.page-admin #productsTable tbody{display:grid;gap:10px;padding:2px}
  body.page-admin #productsTable tr{display:grid;background:var(--surface,#fff);border:1px solid var(--border,#e2e8f0);border-radius:12px;padding:34px 12px 10px;position:relative}
  body.page-admin #productsTable td{display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid var(--border,#e2e8f0);padding:6px 0;text-align:right}
  body.page-admin #productsTable td::before{content:attr(data-label);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft,#64748b);text-align:left}
  body.page-admin #productsTable td:nth-child(1){position:absolute;top:10px;right:10px;border-bottom:0;padding:0;width:auto}
  body.page-admin #productsTable td:nth-child(1)::before{display:none}
  body.page-admin #productsTable td:nth-child(1) img,body.page-admin #productsTable td:nth-child(1) .u-admin-118{width:38px;height:38px;border-radius:8px;display:block}
  body.page-admin #productsTable td:nth-child(2){position:absolute;top:10px;left:12px;right:56px;justify-content:flex-start;text-align:left;font-size:14.5px;border-bottom:0;padding:0}
  body.page-admin #productsTable td:nth-child(2)::before{display:none}
  body.page-admin #productsTable td:nth-child(11){justify-content:flex-start}
  body.page-admin #productsTable td:nth-child(11)::before{display:none}
  body.page-admin #productsTable td:last-child{justify-content:flex-end;border-bottom:0;padding-top:10px;gap:8px}
  body.page-admin #productsTable td:last-child::before{display:none}
  body.page-admin #productsTable td[colspan]{display:block;text-align:center;border-bottom:0}
  body.page-admin #productsTable td[colspan]::before{display:none}
}


/* =========================================================
   v28.2 — Strict drawer gate + beginning balances
   ========================================================= */
.drawer-opening-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin:10px 0 14px;
}
.drawer-beginning-balances{
  margin:12px 0 14px;
  padding:14px;
  border:1px solid var(--border,#e2e8f0);
  border-radius:12px;
  background:var(--surface-2,#f8fafc);
}
.drawer-beginning-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.drawer-balance-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
}
.drawer-balance-card{
  display:grid;
  gap:6px;
  padding:10px;
  border:1px solid var(--border,#e2e8f0);
  border-radius:10px;
  background:var(--surface,#fff);
}
.drawer-balance-card>span{
  font-size:10px;
  color:var(--ink-soft,#64748b);
}
.drawer-balance-card input{
  width:100%;
  height:38px;
  font-variant-numeric:tabular-nums;
}
.drawer-beginning-summary{
  margin:12px 0;
  padding:12px;
  border:1px solid var(--border,#e2e8f0);
  border-radius:10px;
  background:var(--surface-2,#f8fafc);
}
.drawer-beginning-summary>b{
  display:block;
  margin-bottom:8px;
}
.drawer-beginning-summary>div{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}
.drawer-beginning-summary span{
  display:grid;
  gap:3px;
  padding:8px 10px;
  border-radius:8px;
  background:var(--surface,#fff);
}
.drawer-beginning-summary small{
  color:var(--ink-soft,#64748b);
  font-size:9px;
}
.drawer-beginning-summary strong{
  font-size:13px;
  font-variant-numeric:tabular-nums;
}
.page-basket .u-paymethod:disabled{
  opacity:.45;
  cursor:not-allowed;
}
@media(max-width:900px){
  .drawer-opening-grid,
  .drawer-balance-grid,
  .drawer-beginning-summary>div{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
  .drawer-opening-grid,
  .drawer-balance-grid,
  .drawer-beginning-summary>div{grid-template-columns:1fr}
}


/* =========================================================
   v28.3 — One-time business beginning balances
   ========================================================= */
.drawer-beginning-setup-modal{
  width:min(900px,96vw)!important;
  max-width:900px!important;
  max-height:92vh;
  overflow:auto;
}
.drawer-ready-open{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px;
  margin-top:10px;
  border:1px solid var(--border,#e2e8f0);
  border-radius:12px;
  background:var(--surface-2,#f8fafc);
}
.drawer-ready-open strong{
  display:block;
  margin-bottom:4px;
}
@media(max-width:640px){
  .drawer-ready-open{
    align-items:flex-start;
    flex-direction:column;
  }
  .drawer-ready-open button{
    width:100%;
  }
}


/* =========================================================
   v28.4 — Global Audit Logs
   ========================================================= */
body.page-admin.page-logs .logs-app{
  width:100%;
  max-width:1280px;
  margin:0 auto;
  padding:0 28px 56px;
}
.audit-kpis{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-bottom:14px;
}
.audit-kpi{
  min-height:100px;
  padding:16px 18px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:4px;
}
.audit-kpi span{
  font-size:9px;
  font-weight:800;
  text-transform:uppercase;
  color:var(--ink-soft,#64748b);
}
.audit-kpi strong{font-size:25px}
.audit-kpi small{font-size:9px;color:var(--ink-soft,#64748b)}
.audit-filter-card,.audit-log-card{padding:18px!important}
.audit-section-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}
.audit-section-head h3{margin:0 0 4px}
.audit-filter-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(120px,1fr)) minmax(180px,1.3fr);
  gap:10px;
}
.audit-search-wrap{min-width:0}
.audit-log-table{
  width:100%;
  min-width:1040px;
}
.audit-log-table td{vertical-align:middle}
.audit-action{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:3px 8px;
  border-radius:999px;
  font-size:9px;
  font-weight:800;
  text-transform:capitalize;
  background:var(--surface-2,#f8fafc);
  border:1px solid var(--border,#e2e8f0);
}
.audit-action.post{background:rgba(37,99,235,.08);border-color:rgba(37,99,235,.18)}
.audit-action.put,.audit-action.patch{background:rgba(217,119,6,.08);border-color:rgba(217,119,6,.18)}
.audit-action.delete{background:rgba(220,38,38,.07);border-color:rgba(220,38,38,.18)}
.audit-pagination{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  padding-top:14px;
}
.audit-pagination span{font-size:10px;font-weight:700;color:var(--ink-soft,#64748b)}
.audit-detail-modal{
  width:min(840px,95vw)!important;
  max-width:840px!important;
  max-height:92vh;
  overflow:auto;
}
.audit-detail-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
  margin:12px 0;
}
.audit-detail-grid>div{
  padding:10px;
  border:1px solid var(--border,#e2e8f0);
  border-radius:9px;
  background:var(--surface-2,#f8fafc);
  display:grid;
  gap:3px;
}
.audit-detail-grid span{
  font-size:8px;
  font-weight:800;
  text-transform:uppercase;
  color:var(--ink-soft,#64748b);
}
.audit-detail-grid strong{font-size:11px}
.audit-json-wrap label{display:block;margin-bottom:6px}
.audit-json-wrap pre{
  max-height:380px;
  overflow:auto;
  padding:12px;
  border:1px solid var(--border,#e2e8f0);
  border-radius:9px;
  background:var(--surface-2,#f8fafc);
  font-size:10px;
  white-space:pre-wrap;
  word-break:break-word;
}
@media(max-width:1100px){
  .audit-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .audit-filter-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:700px){
  body.page-admin.page-logs .logs-app{padding-left:14px;padding-right:14px}
  .audit-filter-grid{grid-template-columns:1fr 1fr}
  .audit-detail-grid{grid-template-columns:1fr 1fr}
}


/* =========================================================
   v28.5 — Automatic cash tracking when drawer is optional
   ========================================================= */
.drawer-auto-starting{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:16px;
  margin:10px 0;
  border:1px solid var(--border,#e2e8f0);
  border-radius:12px;
  background:var(--surface-2,#f8fafc);
}
.drawer-auto-starting strong{
  display:block;
  margin-bottom:4px;
}
.drawer-auto-start-spinner{
  width:20px;
  height:20px;
  flex:0 0 20px;
  border:2px solid var(--border,#e2e8f0);
  border-top-color:currentColor;
  border-radius:50%;
  animation:esmera-drawer-spin .8s linear infinite;
}
@keyframes esmera-drawer-spin{to{transform:rotate(360deg)}}


/* =========================================================
   v28.6 — Audit filter completeness
   ========================================================= */
.audit-filter-hint{
  margin-top:4px;
  font-size:8px;
}


/* =========================================================
   v28.7 — Drawer close & reconciliation
   ========================================================= */
.drawer-close-modal{
  width:min(760px,95vw)!important;
  max-width:760px!important;
}
.drawer-close-summary{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px;
  margin:14px 0;
}
.drawer-close-summary>div{
  padding:11px;
  border:1px solid var(--border,#e2e8f0);
  border-radius:10px;
  background:var(--surface-2,#f8fafc);
  display:grid;
  gap:4px;
}
.drawer-close-summary span,
.drawer-close-variance span{
  font-size:8px;
  font-weight:800;
  text-transform:uppercase;
  color:var(--ink-soft,#64748b);
}
.drawer-close-summary strong{font-size:13px}
.drawer-close-summary .expected{
  border-width:2px;
}
#closeCountFields{
  margin:14px 0;
  padding:14px;
  border:1px solid var(--border,#e2e8f0);
  border-radius:11px;
}
#closeCountFields>label{display:block;margin-bottom:6px}
#closeActualCash{
  font-size:22px;
  font-weight:800;
  min-height:50px;
}
.drawer-close-variance{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:9px;
  padding:9px 11px;
  border-radius:9px;
  background:var(--surface-2,#f8fafc);
  border:1px solid var(--border,#e2e8f0);
}
.drawer-close-variance strong{font-size:15px}
.drawer-close-variance.balanced{background:rgba(22,163,74,.08);border-color:rgba(22,163,74,.25)}
.drawer-close-variance.short{background:rgba(220,38,38,.07);border-color:rgba(220,38,38,.22)}
.drawer-close-variance.over{background:rgba(217,119,6,.07);border-color:rgba(217,119,6,.24)}
.drawer-kpis .box.expected{border-width:2px}
.drawer-close-result-note{margin-top:10px}
@media(max-width:760px){
  .drawer-close-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
  .drawer-close-summary .expected{grid-column:1/-1}
}


/* =========================================================
   v28.8 — Sales Basket drawer reconciliation
   ========================================================= */
#basketDrawerCloseModal .drawer-close-modal{
  width:min(760px,95vw)!important;
  max-width:760px!important;
}
#basketDrawerCloseModal #basketCloseCountFields{
  margin:14px 0;
  padding:14px;
  border:1px solid var(--border,#e2e8f0);
  border-radius:11px;
}
#basketDrawerCloseModal #basketCloseCountFields>label{
  display:block;
  margin-bottom:6px;
}


/* =========================================================
   v28.9 — Daily drawer lifecycle
   ========================================================= */
.drawer-closed-today{
  border-color:rgba(22,163,74,.22);
  background:rgba(22,163,74,.05);
}


/* =========================================================
   v29.0 — Drawer reopen override authorization
   ========================================================= */
.drawer-reopen-override-modal{width:min(650px,94vw)!important;max-width:650px!important}
.drawer-reopen-override-modal #drawerReopenPin{letter-spacing:.28em;font-size:18px;font-weight:800}


/* =========================================================
   v29.1 — Mandatory drawer + deferred opening count
   ========================================================= */
.drawer-policy-fixed{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
  margin:12px 0;
}
.drawer-policy-fixed>div,
.drawer-open-expected{
  padding:11px 12px;
  border:1px solid var(--border,#e2e8f0);
  border-radius:10px;
  background:var(--surface-2,#f8fafc);
  display:grid;
  gap:4px;
}
.drawer-policy-fixed span,
.drawer-open-expected span{
  font-size:8px;
  font-weight:800;
  text-transform:uppercase;
  color:var(--ink-soft,#64748b);
}
.drawer-policy-fixed strong{font-size:12px}
.drawer-open-modal,
.drawer-opening-count-modal{
  width:min(700px,95vw)!important;
  max-width:700px!important;
}
.drawer-open-expected{
  margin:12px 0;
}
.drawer-open-expected strong{
  font-size:22px;
}
.drawer-open-choice{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  padding:10px 0;
}
#drawerOpenCountNow,
.drawer-opening-count-modal>div>div:not(.employee-modal-head){
  margin-top:10px;
}
#drawerOpenActualCash,
#openingCountCurrentCash{
  font-size:20px;
  font-weight:800;
  min-height:50px;
}
.drawer-opening-pending{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.drawer-opening-pending span{
  flex:1 1 320px;
}
@media(max-width:720px){
  .drawer-policy-fixed{grid-template-columns:1fr}
}


/* =========================================================
   v29.2 — Smart compliance mode state
   ========================================================= */
.compliance-mode-banner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 14px;
  margin:12px 0;
  border:1px solid var(--border,#e2e8f0);
  border-radius:10px;
  background:var(--surface-2,#f8fafc);
}
.compliance-mode-banner>div:first-child{
  display:grid;
  gap:3px;
}
.compliance-mode-banner span{
  font-size:8px;
  font-weight:800;
  text-transform:uppercase;
  color:var(--ink-soft,#64748b);
}
.compliance-mode-banner strong{font-size:13px}
.compliance-mode-banner.internal{
  border-color:rgba(37,99,235,.18);
  background:rgba(37,99,235,.05);
}
.compliance-mode-banner.registered{
  border-color:rgba(217,119,6,.24);
  background:rgba(217,119,6,.06);
}
.compliance-record{
  padding:10px 12px;
  margin-bottom:10px;
  border:1px solid var(--border,#e2e8f0);
  border-radius:9px;
  background:var(--surface-2,#f8fafc);
}
.compliance-mode-actions{
  margin-top:10px;
}
@media(max-width:700px){
  .compliance-mode-banner{
    align-items:flex-start;
    flex-direction:column;
  }
}


/* =========================================================
   v29.3 — Smart Cash Money In Out
   ========================================================= */
.smart-cash-movement-modal{
  width:min(820px,96vw)!important;
  max-width:820px!important;
  max-height:92vh;
  overflow:auto;
}
.cash-movement-route-guides{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin:12px 0;
}
.cash-movement-guide{
  padding:10px 12px;
  border:1px solid var(--border,#e2e8f0);
  border-radius:10px;
  background:var(--surface-2,#f8fafc);
  display:grid;
  gap:3px;
}
.cash-movement-guide b{
  font-size:10px;
}
.cash-movement-guide span{
  font-size:9px;
  line-height:1.35;
  color:var(--ink-soft,#64748b);
}
.smart-readonly-field{
  min-height:38px;
  display:flex;
  align-items:center;
  padding:8px 10px;
  border:1px solid var(--border,#e2e8f0);
  border-radius:8px;
  background:var(--surface-2,#f8fafc);
  font-size:11px;
  font-weight:700;
}
.smart-accounting-preview{
  margin-top:10px;
  padding:11px 12px;
  border:1px solid var(--border,#e2e8f0);
  border-radius:10px;
  background:var(--surface-2,#f8fafc);
}
.smart-accounting-preview-title{
  margin-bottom:7px;
  font-size:8px;
  font-weight:900;
  text-transform:uppercase;
  color:var(--ink-soft,#64748b);
}
.accounting-preview-line{
  display:grid;
  grid-template-columns:52px minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  padding:5px 0;
}
.accounting-preview-line span{
  font-size:9px;
  font-weight:800;
  text-transform:uppercase;
}
.accounting-preview-line strong{
  font-size:11px;
}
.accounting-preview-line b{
  font-size:11px;
  font-variant-numeric:tabular-nums;
}
.smart-drawer-movement-table{
  min-width:980px;
}
@media(max-width:700px){
  .cash-movement-route-guides{grid-template-columns:1fr}
  .accounting-preview-line{grid-template-columns:48px minmax(0,1fr)}
  .accounting-preview-line b{grid-column:2}
}


/* =========================================================
   v29.4 — Sales returns and supplier discounts
   ========================================================= */
.sales-return-modal,.return-lookup-modal{
  width:min(980px,96vw)!important;
  max-width:980px!important;
  max-height:92vh;
  overflow:auto;
}
.return-smart-note{
  padding:10px 12px;
  margin:10px 0 12px;
  border:1px solid var(--border,#e2e8f0);
  border-radius:10px;
  background:var(--surface-2,#f8fafc);
  font-size:10px;
}
.sales-return-items-table{min-width:880px}
.sales-return-items-table input[type="number"]{min-width:105px}
.return-item-complete{opacity:.55}
.return-restock-toggle{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:10px;
  font-weight:700;
}
.sales-return-summary{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
  margin:12px 0;
}
.sales-return-summary>div{
  padding:11px 12px;
  border:1px solid var(--border,#e2e8f0);
  border-radius:10px;
  background:var(--surface-2,#f8fafc);
  display:grid;
  gap:4px;
}
.sales-return-summary span{
  font-size:8px;
  font-weight:800;
  text-transform:uppercase;
  color:var(--ink-soft,#64748b);
}
.sales-return-summary strong{font-size:16px}
.return-tender-plan{
  margin:10px 0;
  padding:10px 12px;
  border:1px solid var(--border,#e2e8f0);
  border-radius:10px;
}
.return-tender-plan>div{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:6px;
}
.return-tender-plan span{
  padding:5px 8px;
  border-radius:999px;
  border:1px solid var(--border,#e2e8f0);
  font-size:9px;
}
.return-badge{
  display:block;
  margin-top:2px;
  font-size:8px;
  color:var(--ink-soft,#64748b);
}
.today-transactions-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.return-lookup-table{min-width:940px}
.supplier-discount-summary{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:8px;
}
.supplier-discount-summary span{
  padding:7px 9px;
  border:1px solid var(--border,#e2e8f0);
  border-radius:9px;
  background:var(--surface-2,#f8fafc);
  font-size:9px;
}
.smart-purchase-total-box{
  min-width:235px;
  display:grid!important;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:4px 10px;
}
.smart-purchase-total-box>span{
  display:contents;
}
.smart-purchase-total-box>strong{
  grid-column:2;
  font-size:20px;
}
.smart-purchase-total-box>small{
  grid-column:1/-1;
  color:var(--ink-soft,#64748b);
}
@media(max-width:700px){
  .sales-return-summary{grid-template-columns:1fr}
}


/* =========================================================
   v29.6 — Tablet-first Sales Basket / fixed checkout workspace
   ========================================================= */

/* The POS is an application workspace, not a long document page. */
body.page-basket{
  height:100dvh;
  min-height:100dvh;
  overflow:hidden;
}
body.page-basket .app-shell{
  height:100dvh;
  min-height:0;
  overflow:hidden;
}
body.page-basket .main-area{
  height:100dvh;
  min-height:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
body.page-basket .topbar{
  flex:0 0 auto;
  min-height:58px;
  padding:10px 20px;
}
body.page-basket .topbar h1{
  font-size:20px;
  line-height:1.1;
}
body.page-basket #func-checkout{
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
}
body.page-basket .layout{
  height:100%;
  min-height:0;
  overflow:hidden;
  grid-template-columns:minmax(0,1fr) minmax(360px,400px);
}

/* Left side: search/categories stay fixed, only product tiles scroll. */
body.page-basket .catalog{
  min-width:0;
  min-height:0;
  overflow:hidden;
  padding:12px 14px 10px;
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr) auto auto;
  gap:8px;
}
body.page-basket .basket-catalog-toolbar{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  margin:0;
}
body.page-basket .basket-catalog-toolbar input{
  min-height:42px;
}
body.page-basket .basket-page-size-control{
  display:flex;
  align-items:center;
  gap:7px;
  margin:0;
  white-space:nowrap;
}
body.page-basket .basket-page-size-control span{
  font-size:10px;
  text-transform:none;
  letter-spacing:0;
  color:var(--ink-soft);
}
body.page-basket .basket-page-size-control select{
  width:auto;
  min-width:64px;
  height:38px;
  padding:5px 25px 5px 9px;
  font-size:12px;
}
body.page-basket .cattabs{
  margin:0;
  max-height:76px;
  overflow:auto;
  align-content:flex-start;
  scrollbar-width:thin;
}
body.page-basket .prod-grid{
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  align-content:start;
  padding:2px 5px 6px 2px;
  grid-template-columns:repeat(auto-fill,minmax(142px,1fr));
  gap:10px;
  scrollbar-gutter:stable;
}
body.page-basket .prod-card{
  min-height:0;
}
body.page-basket .prod-card .pthumb{
  aspect-ratio:1.15/1;
  height:auto;
  min-height:92px;
}
body.page-basket .catalog-pager{
  margin:0;
  min-height:34px;
  flex-wrap:nowrap;
  padding:2px 0;
}
body.page-basket .catalog-pager button{
  padding:6px 10px;
  min-height:30px;
}
body.page-basket .basket-catalog-controls{display:flex;align-items:center;gap:8px}
body.page-basket .basket-view-switch{display:flex;align-items:center;border:1px solid var(--border);border-radius:9px;overflow:hidden}
body.page-basket .basket-view-switch button{min-height:38px;padding:6px 10px;border:0;border-radius:0!important}
body.page-basket .basket-view-switch button.active{background:var(--gold-deep);color:var(--on-accent,#fff)}
body.page-basket .prod-grid.product-list-view{grid-template-columns:1fr!important;gap:6px!important}
body.page-basket .prod-grid.product-list-view .prod-card{
  grid-template-columns:58px minmax(0,1fr) auto!important;
  grid-template-rows:1fr!important;align-items:center!important;min-height:58px!important;
  padding:6px 9px!important;gap:9px!important
}
body.page-basket .prod-grid.product-list-view .prod-card .pthumb{width:58px!important;height:46px!important;aspect-ratio:auto!important}
body.page-basket .prod-grid.product-list-view .prod-card .pname{min-height:0!important;-webkit-line-clamp:2}
body.page-basket .prod-grid.product-list-view .prod-card .pmeta{display:flex!important;flex-direction:column!important;align-items:flex-end!important;justify-content:center!important;margin:0!important}
body.page-basket .prod-grid.product-list-view .prod-card .pstock{max-width:82px!important}

/* Today's transaction list remains visible at the bottom of the catalog. */
body.page-basket .today-section{
  min-height:150px;
  max-height:190px;
  margin:0;
  padding-top:7px;
  overflow:hidden;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
}
body.page-basket .today-section .databar{
  display:none; /* counts are repeated in the transaction header / dashboard and consume valuable POS height */
}
body.page-basket .u-basket-013{
  min-height:0;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
}
body.page-basket .today-transactions-head{
  min-height:34px;
  padding:0 0 5px;
}
body.page-basket .today-transaction-tools{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
}
body.page-basket .transaction-page-size select{
  height:31px;
  min-width:58px;
}
body.page-basket .today-list{
  min-height:0;
  max-height:none;
  overflow-y:auto;
  margin:0;
  overscroll-behavior:contain;
}
body.page-basket .today-row{
  min-height:38px;
  padding:5px 2px;
  gap:8px;
  align-items:center;
}
body.page-basket .today-row-main{
  min-width:0;
  display:flex;
  align-items:baseline;
  gap:7px;
  flex-wrap:wrap;
}
body.page-basket .today-row-main small{
  color:var(--ink-soft);
  font-size:10px;
}
body.page-basket .today-row-actions{
  flex:0 0 auto;
  display:flex;
  gap:5px;
  align-items:center;
}
body.page-basket .today-row-actions .compact-btn{
  padding:4px 7px;
  min-height:27px;
  font-size:10px;
}
body.page-basket .today-pager{
  min-height:30px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding-top:4px;
  border-top:1px solid var(--border);
  color:var(--ink-soft);
  font-size:10px;
}
body.page-basket .today-pager-actions{
  display:flex;
  align-items:center;
  gap:6px;
}
body.page-basket .today-pager .compact-btn{
  min-height:26px;
  padding:3px 9px;
}

/* Right side: checkout is permanently visible; only cart lines / dense detail areas scroll. */
body.page-basket .cartpane{
  min-height:0;
  height:100%;
  overflow:hidden;
  display:grid;
  grid-template-rows:auto minmax(68px,1fr) auto;
  position:relative;
}
body.page-basket .cart-head{
  padding:10px 14px;
}
body.page-basket .cart-items{
  min-height:0;
  max-height:none;
  overflow-y:auto;
  padding:8px 14px;
  overscroll-behavior:contain;
}
body.page-basket .cart-foot{
  min-height:0;
  max-height:min(570px,72vh);
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:10px 14px 12px;
  scrollbar-width:thin;
}
body.page-basket .invoice-request-compact,
body.page-basket .customer-row{
  margin-bottom:7px;
}
body.page-basket .customer-row{
  padding:8px 10px;
}
body.page-basket .more-options-toggle{
  min-height:34px;
  padding:6px 10px;
}
body.page-basket .sumrow{
  margin:3px 0;
}
body.page-basket .totalrow{
  margin:6px 0;
}
body.page-basket .denomrow{
  gap:6px;
}
body.page-basket .denombtn{
  min-height:40px;
  padding:6px 8px;
}
body.page-basket .cashrow{
  margin-top:7px;
}
body.page-basket .cashrow input{
  padding:8px 10px;
}
body.page-basket .u-basket-010{
  position:sticky;
  bottom:-12px;
  z-index:4;
  padding:8px 0 12px;
  margin-top:8px;
  background:linear-gradient(to bottom,transparent 0,var(--surface) 18px,var(--surface) 100%);
}

/* Compact tablets: preserve two-column POS and keep touch targets comfortable. */
@media (min-width: 800px) and (max-width: 1180px){
  body.page-basket .layout{
    grid-template-columns:minmax(0,1fr) minmax(340px,36vw);
  }
  body.page-basket .catalog{
    padding:10px;
  }
  body.page-basket .prod-grid{
    grid-template-columns:repeat(auto-fill,minmax(132px,1fr));
    gap:8px;
  }
  body.page-basket .prod-card{
    padding:10px;
  }
  body.page-basket .prod-card .pname{
    font-size:12px;
  }
  body.page-basket .cart-head,
  body.page-basket .cart-items,
  body.page-basket .cart-foot{
    padding-left:11px;
    padding-right:11px;
  }
  body.page-basket .payMethodRow,
  body.page-basket #payMethodRow{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
  }
  body.page-basket #payMethodRow .denombtn{
    font-size:10px;
    padding-inline:4px;
  }
}

/* Narrow phones fall back to document scrolling; tablet/desktop keeps the fixed POS workspace. */
@media (max-width: 799px){
  body.page-basket,
  body.page-basket .app-shell,
  body.page-basket .main-area{
    height:auto;
    min-height:100dvh;
    overflow:visible;
  }
  body.page-basket #func-checkout,
  body.page-basket .layout,
  body.page-basket .catalog,
  body.page-basket .cartpane{
    height:auto;
    overflow:visible;
  }
  body.page-basket .layout{
    display:block;
  }
  body.page-basket .prod-grid{
    max-height:55vh;
    overflow-y:auto;
  }
  body.page-basket .today-section{
    max-height:240px;
  }
  body.page-basket .cart-foot{
    max-height:none;
    overflow:visible;
  }
}


/* =========================================================
   v29.7 — Responsive Sales Basket product cards
   ========================================================= */

/* Let card width, not a hard-coded tablet breakpoint, determine the grid. */
body.page-basket .prod-grid{
  grid-template-columns:repeat(auto-fit,minmax(clamp(118px,14vw,156px),1fr));
  grid-auto-rows:auto;
  align-items:stretch;
}

/* Cards use a stable internal grid so image/text/meta never overlap. */
body.page-basket .prod-card{
  min-width:0;
  min-height:0;
  height:100%;
  padding:8px;
  display:grid;
  /* Explicit 1fr column (not the default "auto") so the thumbnail always fills
     the card's full width. Without this, the column's width is derived from
     its content's own intrinsic size: a loaded photo happens to resolve to the
     full available width, but a broken image (0x0 intrinsic size) or the
     no-photo placeholder icon (tiny SVG) resolves to a much smaller max-content
     size instead — shrinking that one tile's thumbnail and its whole card
     below the others, which is what "tiles aren't the same size" looked like. */
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto minmax(38px,auto) auto;
  gap:6px;
  align-content:start;
  overflow:hidden;
  border-radius:11px;
}

/* Thumbnail scales with the actual card width and available vertical space. */
body.page-basket .prod-card .pthumb{
  width:100%;
  height:auto;
  min-height:0;
  max-height:none;
  aspect-ratio:1.22/1;
  object-fit:cover;
  margin:0;
  border-radius:8px;
}

/* Keep two readable lines and reserve their height on every card. */
body.page-basket .prod-card .pname{
  min-width:0;
  min-height:2.55em;
  margin:0;
  font-size:clamp(10px,1.05vw,13px);
  line-height:1.28;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  overflow-wrap:anywhere;
}

/* Variant text should not push the price outside the card. */
body.page-basket .prod-card .pvariants{
  margin:2px 0 0;
  font-size:clamp(8px,.85vw,10px);
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Price and stock are always the final row. */
body.page-basket .prod-card .pmeta{
  min-width:0;
  margin-top:auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:4px;
  align-items:end;
}
body.page-basket .prod-card .pprice{
  min-width:0;
  font-size:clamp(11px,1.1vw,14px);
  line-height:1.1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
body.page-basket .prod-card .pstock{
  max-width:54px;
  font-size:clamp(8px,.8vw,10px);
  line-height:1.1;
  text-align:right;
  overflow-wrap:anywhere;
}

/* Prevent old v29.6 tablet overrides from forcing cards too narrow. */
@media (min-width:800px) and (max-width:1180px){
  body.page-basket .prod-grid{
    grid-template-columns:repeat(auto-fit,minmax(126px,1fr));
    gap:8px;
  }
  body.page-basket .prod-card{
    padding:7px;
  }
  body.page-basket .prod-card .pthumb{
    aspect-ratio:1.18/1;
  }
}

/* Wider tablet/desktop catalog can comfortably show more columns. */
@media (min-width:1181px){
  body.page-basket .prod-grid{
    grid-template-columns:repeat(auto-fit,minmax(145px,1fr));
  }
}

/* Short landscape tablets need shorter thumbnails to preserve the transaction list. */
@media (min-width:800px) and (max-height:720px){
  body.page-basket .prod-card .pthumb{
    aspect-ratio:1.45/1;
  }
  body.page-basket .prod-card{
    gap:4px;
  }
  body.page-basket .prod-card .pname{
    min-height:2.35em;
  }
}

/* Very short POS viewport: prioritize readable product identity over large imagery. */
@media (min-width:800px) and (max-height:600px){
  body.page-basket .prod-card .pthumb{
    aspect-ratio:1.7/1;
  }
}

/* Phone fallback remains fluid. */
@media (max-width:799px){
  body.page-basket .prod-grid{
    grid-template-columns:repeat(auto-fit,minmax(132px,1fr));
  }
  body.page-basket .basket-catalog-toolbar{grid-template-columns:minmax(0,1fr) auto!important;gap:5px!important}
  body.page-basket .basket-catalog-controls>.basket-page-size-control{display:none!important}
  body.page-basket .basket-view-switch button{min-height:42px!important;padding-inline:9px!important;font-size:11px!important}
  body.page-basket .basket-catalog-toolbar input{min-height:42px!important}
  body.page-basket .prod-grid.product-list-view .prod-card{grid-template-columns:48px minmax(0,1fr) auto!important;min-height:52px!important;padding:5px 7px!important}
  body.page-basket .prod-grid.product-list-view .prod-card .pthumb{width:48px!important;height:40px!important}
}


body.page-basket .prod-grid[data-density="compact"]{
  grid-template-columns:repeat(auto-fit,minmax(118px,1fr));
}
body.page-basket .prod-grid[data-density="compact"] .prod-card .pthumb{
  aspect-ratio:1.35/1;
}
body.page-basket .prod-grid[data-density="wide"]{
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
}


/* =========================================================
   v29.8 — Administrator system update manager
   ========================================================= */
.system-manager-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.system-manager-kpis{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:9px;
  margin:12px 0;
}
.system-manager-kpis>div{
  padding:11px 12px;
  border:1px solid var(--border,#e2e8f0);
  border-radius:10px;
  background:var(--surface-2,#f8fafc);
  display:grid;
  gap:3px;
}
.system-manager-kpis span{
  font-size:8px;
  font-weight:800;
  text-transform:uppercase;
  color:var(--ink-soft,#64748b);
}
.system-manager-kpis strong{
  font-size:16px;
}
.system-update-source-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  align-items:end;
  padding:12px;
  margin:12px 0;
  border:1px solid var(--border,#e2e8f0);
  border-radius:10px;
}
.system-update-upload-action{
  display:flex;
  align-items:end;
}
.system-update-feed-details{
  margin:10px 0;
  padding:10px 12px;
  border:1px solid var(--border,#e2e8f0);
  border-radius:10px;
}
.system-update-feed-details summary{
  cursor:pointer;
  font-weight:800;
}
.system-update-actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}
.system-schedule-inline{
  display:flex;
  align-items:center;
  gap:7px;
}
.system-schedule-inline input{
  min-width:220px;
}
.system-scheduled-update{
  margin-top:8px;
  padding:8px 10px;
  border-radius:8px;
  background:rgba(217,119,6,.08);
  border:1px solid rgba(217,119,6,.22);
  font-size:10px;
}
.system-migration-table-wrap{
  max-height:360px;
  overflow:auto;
}
.system-migration-footer{
  margin-top:10px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}
.system-migration-footer .sub{
  margin-right:auto;
}
.migration-error-detail{
  display:block;
  max-width:360px;
  white-space:normal;
  font-size:9px;
  color:var(--red,#b91c1c);
}
.migration-checksum-warning{
  color:var(--red,#b91c1c)!important;
}

/* Global Administrator-only update notification */
.esmera-system-update-toast{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:9999;
  width:min(470px,calc(100vw - 36px));
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  padding:12px;
  border:1px solid var(--border,#e2e8f0);
  border-radius:12px;
  background:var(--surface,#fff);
  box-shadow:0 14px 38px rgba(15,23,42,.18);
}
.esmera-system-update-toast[hidden]{display:none!important}
.esmera-system-update-toast-icon{
  width:34px;height:34px;
  border-radius:999px;
  display:grid;place-items:center;
  font-size:18px;font-weight:900;
  background:rgba(37,99,235,.1);
}
.esmera-system-update-toast-copy{
  min-width:0;
  display:grid;
  gap:2px;
}
.esmera-system-update-toast-copy strong{
  font-size:11px;
}
.esmera-system-update-toast-copy span{
  font-size:9px;
  color:var(--ink-soft,#64748b);
}
.esmera-system-update-toast-actions{
  display:flex;
  gap:6px;
}
.esmera-system-update-toast-actions button{
  min-height:31px;
  padding:5px 8px;
  font-size:9px;
}
@media(max-width:760px){
  .system-manager-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .system-update-source-grid{grid-template-columns:1fr}
  .system-schedule-inline{width:100%;flex-wrap:wrap}
  .system-schedule-inline input{min-width:0;flex:1 1 210px}
  .esmera-system-update-toast{
    grid-template-columns:auto minmax(0,1fr);
  }
  .esmera-system-update-toast-actions{
    grid-column:1/-1;
    justify-content:flex-end;
  }
}


/* =========================================================
   Beta v1.3 — Controlled PWA updates
   ========================================================= */
.esmera-update-banner{
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  z-index:10050;
  width:min(720px,calc(100vw - 28px));
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:13px 14px;
  border:1px solid var(--border,#dbe3ef);
  border-radius:14px;
  background:var(--surface,#fff);
  color:var(--ink,#0f172a);
  box-shadow:0 16px 45px rgba(15,23,42,.18);
}
.esmera-update-banner[hidden]{display:none!important}
.esmera-update-copy{display:grid;gap:3px;min-width:0}
.esmera-update-copy strong{font-size:13px}
.esmera-update-copy span{font-size:11px;color:var(--ink-soft,#64748b);line-height:1.35}
.esmera-update-actions{display:flex;gap:8px;flex:none}
.esmera-update-actions button{white-space:nowrap}
.update-settings-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.update-settings-head h3{margin:0 0 4px}
@media(max-width:640px){
  .esmera-update-banner{align-items:stretch;flex-direction:column}
  .esmera-update-actions{justify-content:flex-end}
}


/* =========================================================
   Beta v1.4 — Administrator unified System Update card
   ========================================================= */
.admin-system-update-card{
  border-left:4px solid var(--primary,#8a6820);
}
.admin-update-card-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  margin-bottom:14px;
}
.admin-update-card-head h3{
  margin:4px 0;
}
.admin-update-card-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}
.admin-update-card-grid>div{
  min-width:0;
  padding:11px 12px;
  border:1px solid var(--border,#e2e8f0);
  border-radius:10px;
  background:var(--surface-2,#f8fafc);
}
.admin-update-card-grid span{
  display:block;
  color:var(--ink-soft,#64748b);
  font-size:9px;
  font-weight:800;
  text-transform:uppercase;
}
.admin-update-card-grid strong{
  display:block;
  margin-top:4px;
  font-size:15px;
  overflow-wrap:anywhere;
}
.admin-update-card-actions{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-top:12px;
}
@media(max-width:840px){
  .admin-update-card-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .admin-update-card-head,
  .admin-update-card-actions{align-items:stretch;flex-direction:column}
  .admin-update-card-grid{grid-template-columns:1fr 1fr}
}


/* =========================================================
   Beta v1.4.1 patch — truthful System Update state
   ========================================================= */
.unified-update-card .system-manager-kpis{margin-bottom:8px}
.system-version-explainer{
  margin:0 0 14px;
  padding:8px 10px;
  border-radius:8px;
  background:var(--surface-2,#f8fafc);
}
.unified-update-policy{
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid var(--border,#e2e8f0);
}
.unified-update-policy h4,
.technical-update-section h4{margin:0 0 4px}
.system-manager-head.compact{margin-bottom:10px}
.technical-update-section{
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid var(--border,#e2e8f0);
}
.unified-update-card details.system-update-feed-details{
  margin-top:14px;
}


/* =========================================================
   Beta v1.4.3 — SME Intelligence for Financial Insights
   ========================================================= */
.fi-simple-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:18px}
.fi-simple-intro h2{margin:4px 0 6px;font-size:22px}
.fi-smart-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}
.fi-smart-head h3{margin:0 0 4px}
.fi-existing-analysis-label{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:18px 2px 8px;padding-top:8px;border-top:1px solid var(--border,#e5e7eb)}
.si-grid{align-items:start}
.si-briefing{display:grid;gap:8px}
.si-brief-item{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 12px;border:1px solid var(--border,#e5e7eb);border-radius:11px}
.si-brief-item p,.si-alert p{margin:3px 0 0;font-size:11px;line-height:1.4;color:var(--ink-soft,#64748b)}
.si-brief-item>b{white-space:nowrap;font-variant-numeric:tabular-nums}
.si-status{font-size:10px;font-weight:800;padding:5px 9px;border-radius:999px;background:var(--surface-soft,#f1f5f9)}
.si-status[data-tone="risk"]{background:rgba(220,38,38,.10);color:#b91c1c}
.si-status[data-tone="good"]{background:rgba(22,163,74,.10);color:#15803d}
.si-number-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--border,#e5e7eb)}
.si-number-row strong{font-variant-numeric:tabular-nums}
.si-number-row.si-total{font-size:15px;border-top:2px solid var(--border,#dbe3ef);border-bottom:0;margin-top:3px}
.si-compare{display:flex;gap:14px;flex-wrap:wrap;padding:10px 0}
.si-compare span{font-size:11px}
.si-alert{padding:10px 0;border-bottom:1px solid var(--border,#e5e7eb)}
.si-alert:last-child{border-bottom:0}
.si-alert small{display:block;margin-top:4px;color:var(--ink-soft,#64748b)}
.si-alert-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.si-chip{font-size:9px;padding:2px 6px;border:1px solid var(--border,#dbe3ef);border-radius:999px}
.si-stock-row{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(78px,.7fr));gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--border,#e5e7eb)}
.si-stock-row-3{grid-template-columns:minmax(0,1.6fr) repeat(2,minmax(85px,.7fr))}
.si-stock-row:last-child{border-bottom:0}
.si-stock-row>div{display:grid;gap:2px}
.si-stock-row small{font-size:9px;color:var(--ink-soft,#64748b)}
.si-stock-row b{font-size:11px}
@media(max-width:760px){
  .fi-simple-intro,.fi-existing-analysis-label{align-items:flex-start;flex-direction:column}
  .si-brief-item{align-items:flex-start;flex-direction:column}
  .si-stock-row,.si-stock-row-3{grid-template-columns:1fr 1fr}
  .si-stock-row>div:first-child{grid-column:1/-1}
}


/* =========================================================
   Beta v1.4.4 — Financial Insights tablet-first redesign
   ========================================================= */
#panel-planning{max-width:1180px;margin:0 auto;padding-bottom:28px}
#panel-planning .planning-toolbar{padding:12px 14px}
#panel-planning .planning-horizon-row{gap:7px;align-items:center;flex-wrap:wrap}
#panel-planning .planning-horizon-row .sub{margin-right:2px}
#panel-planning .planning-horizon-row button{min-height:36px;padding:7px 12px}
#planningSubtabs{position:sticky;top:0;z-index:6;background:var(--page-bg,#f4f7fb);padding:8px 0;gap:7px;overflow-x:auto;white-space:nowrap}
#planningSubtabs .subtab{min-height:38px;padding:8px 14px;flex:0 0 auto}

/* Plan & Forecast: keep the title/filters row and status row fixed in place while
   scrolling, stacked above the (already-sticky) subtabs bar. Wrapping both in one
   sticky container avoids having to hand-calculate a stacked pixel offset for the
   subtabs bar underneath it — they scroll and stick together as a single unit. */
body.page-admin #panel-planning .pf-sticky-head{
  position:sticky!important;
  top:0!important;
  z-index:8!important;
  background:var(--page-bg,#f4f7fb)!important;
}

.fi-home-card,
.fi-tool-card,
.fi-advanced{background:var(--card-bg,#fff);border:1px solid var(--border,#dce4ee);border-radius:14px;box-shadow:0 3px 10px rgba(15,23,42,.05)}
.fi-home-card{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;padding:18px 20px;margin-bottom:12px}
.fi-home-copy{max-width:760px}
.fi-home-copy h2{font-size:25px;line-height:1.15;margin:4px 0 7px}
.fi-home-copy p{margin:0;color:var(--ink-soft,#64748b);font-size:12px;line-height:1.5}
.fi-home-actions{display:grid;justify-items:end;gap:8px;min-width:170px}
.fi-updated{font-size:10px;color:var(--ink-soft,#64748b)}
.fi-refresh-btn{min-height:38px}

.fi-tools-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.fi-tool-card{padding:16px;min-width:0}
.fi-tool-card-wide{grid-column:1/-1;margin-bottom:12px}
.fi-tools-grid .fi-tool-card-wide{margin-bottom:0}
.fi-tool-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:12px}
.fi-tool-heading h3{font-size:16px;line-height:1.2;margin:2px 0 4px}
.fi-tool-heading p{font-size:10.5px;line-height:1.45;color:var(--ink-soft,#64748b);margin:0;max-width:620px}
.fi-tool-kicker{display:block;font-size:9px;text-transform:uppercase;letter-spacing:.08em;font-weight:800;color:var(--ink-soft,#64748b)}
.fi-simple-metrics{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--border,#e5e7eb)}
.fi-simple-metrics>div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--border,#e5e7eb)}
.fi-simple-metrics span{font-size:10.5px;color:var(--ink-soft,#64748b)}
.fi-simple-metrics strong{font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap}
.fi-simple-metrics .fi-metric-total{padding-top:12px;border-top:1px solid var(--border,#dce4ee)}
.fi-simple-metrics .fi-metric-total span,.fi-simple-metrics .fi-metric-total strong{font-size:14px;font-weight:800;color:var(--ink,#111827)}
.fi-simple-metrics-2{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;border:0;margin-bottom:8px}
.fi-simple-metrics-2>div{display:grid;gap:3px;padding:10px;border:1px solid var(--border,#e5e7eb);border-radius:10px}
.fi-plain-advice{margin-top:10px;padding:10px 11px;border-radius:10px;background:var(--surface-soft,#f6f8fb);font-size:10.5px;line-height:1.45}
.fi-good-state{display:grid;gap:3px;place-items:center;text-align:center;padding:18px 10px;color:var(--ink-soft,#64748b)}
.fi-good-state strong{color:var(--ink,#1f2937);font-size:12px}
.fi-good-state span{font-size:10px;line-height:1.4;max-width:380px}

.si-briefing{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.si-brief-item{border-radius:10px;padding:11px 12px;background:var(--surface-soft,#f8fafc);border:1px solid var(--border,#e5e7eb);box-shadow:none}
.si-brief-copy strong{font-size:12px}
.si-brief-copy p{font-size:10px;line-height:1.4}
.si-brief-item>b{font-size:12px}
.si-status{font-size:9px;white-space:nowrap}

#siExpenseWatcher .si-compare{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:4px}
#siExpenseWatcher .si-compare span{display:grid;gap:3px;padding:9px;border-radius:9px;background:var(--surface-soft,#f8fafc)}
#siExpenseWatcher .si-compare b{font-size:13px}
.si-alert{padding:9px 0}
.si-alert strong{font-size:11.5px}
.si-alert p{font-size:10px;line-height:1.4}
.si-alert small{font-size:9px}
.si-stock-row,.si-stock-row-3{grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(72px,.65fr));gap:8px;padding:9px 0}
.si-stock-row-3{grid-template-columns:minmax(0,1.6fr) repeat(2,minmax(78px,.7fr))}
.si-stock-row strong{font-size:11px}
.si-stock-row b{font-size:10.5px}
.si-stock-row small{font-size:8.5px}

.fi-advanced{margin-top:14px;overflow:hidden}
.fi-advanced>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px}
.fi-advanced>summary::-webkit-details-marker{display:none}
.fi-advanced>summary>div{display:grid;gap:3px}
.fi-advanced>summary strong{font-size:13px}
.fi-advanced>summary span{font-size:10px;color:var(--ink-soft,#64748b)}
.fi-advanced-open{white-space:nowrap;font-weight:700}
.fi-advanced[open] .fi-advanced-open{font-size:0}
.fi-advanced[open] .fi-advanced-open::after{content:'Hide details';font-size:10px}
.fi-advanced-body{padding:0 14px 14px;border-top:1px solid var(--border,#e5e7eb)}
.fi-advanced-body>.grid:first-child{margin-top:14px}
.fi-advanced-body .planning-kpis{grid-template-columns:repeat(5,minmax(0,1fr))}
.fi-advanced-body .planning-kpis .stat{font-size:17px}

@media (max-width: 1024px){
  #panel-planning{max-width:none}
  .fi-home-card{align-items:flex-start}
  .fi-tools-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fi-advanced-body .planning-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width: 820px){
  #panel-planning{padding:0 2px 24px}
  #panel-planning .planning-toolbar{padding:11px 12px}
  .fi-home-card{flex-direction:column;align-items:stretch;padding:15px}
  .fi-home-actions{display:flex;justify-content:space-between;align-items:center;min-width:0}
  .fi-home-copy h2{font-size:22px}
  .fi-tools-grid{grid-template-columns:1fr;gap:10px}
  .fi-tool-card-wide{grid-column:auto}
  .fi-tool-card{padding:14px}
  .si-briefing{grid-template-columns:1fr}
  .fi-simple-metrics-2{grid-template-columns:1fr 1fr}
  .fi-advanced-body .planning-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fi-advanced-body .grid.cols-2{grid-template-columns:1fr}
}
@media (max-width: 520px){
  .fi-home-copy h2{font-size:20px}
  .fi-home-actions{align-items:flex-start;flex-direction:column}
  .fi-refresh-btn{width:100%}
  .fi-tool-heading{gap:8px}
  .fi-simple-metrics-2{grid-template-columns:1fr}
  .si-stock-row,.si-stock-row-3{grid-template-columns:1fr 1fr}
  .si-stock-row>div:first-child{grid-column:1/-1}
  .fi-advanced-body .planning-kpis{grid-template-columns:1fr}
}


/* =========================================================
   Beta v1.4.5 — standalone Financial Insights + balance correction
   ========================================================= */
.page-financial-insights #panel-planning{display:block!important}
.page-financial-insights .main-area>.app{max-width:1220px;margin:0 auto}
.page-financial-insights .header{margin-bottom:10px}
.money-balance-settings-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.money-balance-settings-head h3{margin:0 0 4px}
.money-balance-settings-list{display:grid;gap:9px;margin-top:12px}
.money-balance-setting-row{display:grid;grid-template-columns:minmax(150px,1.2fr) minmax(120px,.8fr) minmax(150px,1fr) minmax(180px,1.3fr) auto;gap:10px;align-items:end;padding:11px;border:1px solid var(--border,#e5e7eb);border-radius:11px}
.money-balance-setting-name,.money-balance-setting-current{display:grid;gap:3px}
.money-balance-setting-name span,.money-balance-setting-current span,.money-balance-setting-actual span,.money-balance-setting-reason span{font-size:9px;color:var(--ink-soft,#64748b)}
.money-balance-setting-current strong{font-size:14px;font-variant-numeric:tabular-nums}
.money-balance-setting-actual,.money-balance-setting-reason{display:grid;gap:4px}
.money-balance-setting-row button{min-height:38px;white-space:nowrap}
@media(max-width:1000px){
  .money-balance-setting-row{grid-template-columns:1fr 1fr}
  .money-balance-setting-reason{grid-column:1/-1}
  .money-balance-setting-row button{grid-column:1/-1}
}
@media(max-width:620px){
  .money-balance-settings-head{flex-direction:column}
  .money-balance-setting-row{grid-template-columns:1fr}
  .money-balance-setting-reason,.money-balance-setting-row button{grid-column:auto}
}

/* =========================================================
   Beta v1.4.12 — Bulk Payroll + Daily Rate
   ========================================================= */
.bulk-payroll-card{margin-bottom:14px}
.bulk-payroll-controls{display:grid;grid-template-columns:1.1fr repeat(3,minmax(130px,.75fr)) .7fr 1fr;gap:10px;align-items:end}
.bulk-payroll-controls>div,.bulk-payroll-secondary>div{min-width:0}
.bulk-payroll-secondary{margin-top:10px}
.bulk-payroll-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0 8px;flex-wrap:wrap}
.bulk-payroll-table-wrap{max-height:430px;overflow:auto;border:1px solid var(--border,#e2e8f0);border-radius:10px}
.bulk-payroll-table{min-width:980px;margin:0}
.bulk-payroll-table thead th{position:sticky;top:0;z-index:1;background:var(--card,#fff)}
.bulk-payroll-table td{vertical-align:middle}
.bulk-payroll-table th:first-child,.bulk-payroll-table td:first-child{width:44px;text-align:center}
.bulk-payroll-gross-input{min-width:105px;max-width:125px;text-align:right;font-variant-numeric:tabular-nums}
.bulk-payroll-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:10px}
.bulk-payroll-summary>div{padding:10px 12px;border:1px solid var(--border,#e2e8f0);border-radius:10px;background:var(--surface-2,#f8fafc);display:grid;gap:3px}
.bulk-payroll-summary span{font-size:9px;font-weight:800;text-transform:uppercase;color:var(--ink-soft,#64748b)}
.bulk-payroll-summary strong{font-size:16px;font-variant-numeric:tabular-nums}
.bulk-payroll-actions{justify-content:flex-end;margin-top:12px}
.bulk-deduction-picker{margin-top:0}
@media(max-width:1150px){.bulk-payroll-controls{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:720px){.bulk-payroll-controls,.bulk-payroll-summary{grid-template-columns:1fr 1fr}.bulk-payroll-secondary>div{grid-column:1/-1!important}.bulk-payroll-actions{justify-content:stretch}.bulk-payroll-actions button{flex:1}}
@media(max-width:480px){.bulk-payroll-controls,.bulk-payroll-summary{grid-template-columns:1fr}}

/* Beta v1.4.15 — System Update is the only release orchestrator.
   Hide the retired PWA-only Update Now banner even if an older cached pwa.js
   briefly executes during service-worker turnover. */
#esmeraUpdateBanner,
.esmera-update-banner{
  display:none !important;
}

/* Beta v1.4.17 — scheduling month preview / editable patterns */
.schedule-preview-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.schedule-preview-toolbar .ghost.active{background:var(--primary,#2563eb);color:#fff;border-color:var(--primary,#2563eb)}
.schedule-month-nav{display:inline-flex;align-items:center;gap:8px;padding:3px 6px;border:1px solid var(--border,#e2e8f0);border-radius:10px}
.schedule-month-nav strong{min-width:130px;text-align:center;font-size:12px}
.smart-coverage-month-grid{display:grid;gap:8px}
.schedule-month-weekdays,.schedule-month-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px}
.schedule-month-weekdays span{text-align:center;font-size:10px;font-weight:800;text-transform:uppercase;color:var(--ink-soft,#64748b);padding:4px}
.schedule-month-days .month-blank{min-height:76px}
.smart-coverage-day.month-cell{min-height:100px;padding:8px}
.smart-coverage-day.month-cell .smart-coverage-date{grid-template-columns:auto 1fr;align-items:center}
.smart-coverage-day.month-cell .smart-coverage-date .pill{justify-self:end;font-size:8px;padding:2px 5px}
.smart-coverage-day.month-cell .smart-coverage-staff>span:not(.sub){font-size:9px;padding:3px 5px}
.schedule-weekly-summary-card{padding:14px 18px!important;margin-top:14px}
.schedule-weekly-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.schedule-weekly-summary>div,.schedule-hours-preview>div{display:grid;gap:3px;padding:10px;border:1px solid var(--border,#e2e8f0);border-radius:9px;background:var(--surface-2,#f8fafc)}
.schedule-weekly-summary span,.schedule-hours-preview span{font-size:9px;font-weight:800;text-transform:uppercase;color:var(--ink-soft,#64748b)}
.schedule-weekly-summary strong,.schedule-hours-preview strong{font-size:15px}
.schedule-weekly-summary small{font-size:10px;color:var(--ink-soft,#64748b)}
.schedule-hours-preview{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:10px 0}
.schedule-hours-warning{grid-column:1/-1!important;border-color:#f59e0b!important;background:color-mix(in srgb,#f59e0b 10%,var(--surface,#fff))!important;font-size:11px;line-height:1.45}
.ok-text{color:#16a34a!important}.warn-text{color:#d97706!important}
@media(max-width:900px){.schedule-month-days,.schedule-month-weekdays{grid-template-columns:repeat(7,minmax(80px,1fr));min-width:680px}.smart-coverage-month-grid{overflow-x:auto}.schedule-weekly-summary{grid-template-columns:repeat(2,1fr)}.schedule-hours-preview{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.schedule-weekly-summary,.schedule-hours-preview{grid-template-columns:1fr}.schedule-preview-toolbar{justify-content:flex-start}.smart-coverage-day.month-cell{min-height:86px}}

/* =========================================================
   Beta v1.4.19 — dashboard security drill-down + theme sync
   ========================================================= */
body.dark{color-scheme:dark}
body:not(.dark){color-scheme:light}
body.page-admin.dark input,
body.page-admin.dark select,
body.page-admin.dark textarea,
body.page-myattendance.dark input,
body.page-myattendance.dark select,
body.page-myattendance.dark textarea{
  background:var(--surface);
  color:var(--ink);
  border-color:var(--border);
}
body.dark option{background:var(--surface);color:var(--ink)}

.system-status-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.system-status-card-head h3{margin-bottom:4px}
.system-status-link-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.system-status-link-card{
  display:grid;gap:6px;min-width:0;padding:18px;border:1px solid var(--border);border-radius:13px;
  background:var(--surface-2);color:var(--ink);text-decoration:none;transition:border-color .15s,transform .15s,background .15s;
}
.system-status-link-card:hover{border-color:var(--gold-deep);background:var(--gold);transform:translateY(-1px)}
.system-status-link-card .stat{font-size:24px;line-height:1.1}
.system-status-link-note{font-size:11px;color:var(--ink-soft);line-height:1.35}
@media(max-width:1100px){.system-status-link-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:680px){.system-status-link-grid{grid-template-columns:1fr 1fr}}
@media(max-width:440px){.system-status-link-grid{grid-template-columns:1fr}}

.employee-directory-filters{display:grid;grid-template-columns:minmax(220px,1.6fr) minmax(150px,.7fr) minmax(170px,.8fr) auto;gap:10px;align-items:center;margin:14px 0 6px}
.employee-directory-filter-note{margin-bottom:10px}
@media(max-width:900px){.employee-directory-filters{grid-template-columns:1fr 1fr}.employee-directory-filters input{grid-column:1/-1}}
@media(max-width:560px){.employee-directory-filters{grid-template-columns:1fr}.employee-directory-filters input{grid-column:auto}}

body.page-admin.page-security-details .security-details-app{max-width:1180px}
.security-detail-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}
.security-detail-tabs .active{background:var(--gold-deep);color:var(--on-accent);border-color:var(--gold-deep)}
.security-detail-panel[hidden]{display:none!important}
.security-detail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.security-detail-head h3{margin-bottom:4px}
.page-security-details table{min-width:760px}

/* Standalone pages use the same dark tokens once theme-sync adds body.dark. */
body.page-admin.dark .supplier-kpi,
body.page-admin.dark .payable-kpi,
body.page-admin.dark .contact-kpi,
body.page-admin.dark .audit-kpi,
body.page-admin.dark .audit-detail-grid>div,
body.page-admin.dark .payable-detail-grid>div,
body.page-admin.dark .payable-payment-card,
body.page-admin.dark .money-balance-setting-row{
  background:var(--surface-2);
  border-color:var(--border);
  color:var(--ink);
}

/* Beta v1.4.20 — payroll forecast + manual attendance correction */
body.page-admin .manual-attendance-card[hidden]{display:none!important}
body.page-admin .manual-attendance-card{margin-bottom:14px}
body.page-admin .manual-attendance-table-wrap{max-height:320px;margin-top:12px;border:1px solid var(--border,#e2e8f0);border-radius:10px;overflow:auto}
body.page-admin .manual-attendance-table-wrap table{margin:0;min-width:820px}
body.page-admin .manual-attendance-table-wrap thead th{position:sticky;top:0;z-index:1;background:var(--card,var(--surface,#fff))}
body.page-admin .bulk-payroll-controls{grid-template-columns:repeat(auto-fit,minmax(145px,1fr))}

/* =========================================================
   Beta v1.4.21 — Plan & Forecast
   Owner-facing forecasting, budgeting, payroll planning,
   goals, variance analysis, scenarios, and decision support.
   ========================================================= */
body.page-admin .pf-toolbar{display:grid;grid-template-columns:minmax(260px,1fr) auto minmax(180px,auto);gap:18px;align-items:end;margin-bottom:12px;}
body.page-admin .pf-toolbar h2{margin:3px 0 6px;font-size:24px;}
body.page-admin .pf-toolbar-controls{display:flex;align-items:end;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
body.page-admin .pf-toolbar-controls label{min-width:120px;margin:0;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);font-weight:700;}
body.page-admin .pf-toolbar-controls input,body.page-admin .pf-toolbar-controls select{margin:5px 0 0;min-height:38px;padding:8px 10px;font-size:13px;}
body.page-admin .pf-confidence-box{text-align:right;align-self:center;}
body.page-admin .pf-subtabs{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:thin;padding-bottom:4px;}
body.page-admin .pf-subtabs .subtab{white-space:nowrap;}
body.page-admin .pf-kpi-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-bottom:12px;}
body.page-admin .pf-kpi-grid-4{grid-template-columns:repeat(4,minmax(0,1fr));}
body.page-admin .pf-kpi{min-height:112px;display:flex;flex-direction:column;justify-content:center;gap:5px;}
body.page-admin .pf-kpi span{font-size:12px;color:var(--ink-soft);font-weight:700;text-transform:uppercase;letter-spacing:.03em;}
body.page-admin .pf-kpi strong{font-size:22px;line-height:1.18;font-variant-numeric:tabular-nums;}
body.page-admin .pf-kpi small{color:var(--ink-faint);font-size:11.5px;line-height:1.35;}
body.page-admin .pf-kpi .pf-negative,body.page-admin .pf-negative{color:var(--red)!important;}
body.page-admin .pf-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px;}
body.page-admin .pf-section-head h3{margin-bottom:3px;}
body.page-admin .pf-area-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;}
body.page-admin .pf-area-card{appearance:none;text-align:left;border:1px solid var(--border);background:var(--surface-2);color:var(--ink);border-radius:12px;padding:14px;min-height:136px;display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto 1fr auto;column-gap:9px;box-shadow:none;cursor:pointer;transition:transform .12s,border-color .12s,background .12s;}
body.page-admin .pf-area-card:hover{border-color:var(--gold-deep);transform:translateY(-1px);background:var(--surface);}
body.page-admin .pf-area-card .pf-area-icon{grid-row:1/5;width:30px;height:30px;border-radius:9px;background:var(--gold);color:var(--gold-deep);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;}
body.page-admin .pf-area-card b{font-size:14px;line-height:1.25;margin-bottom:4px;}
body.page-admin .pf-area-card small{font-size:11.5px;line-height:1.4;color:var(--ink-soft);font-weight:500;text-transform:none;letter-spacing:0;}
body.page-admin .pf-area-card strong{align-self:end;margin-top:10px;font-size:14px;color:var(--gold-deep);font-variant-numeric:tabular-nums;}
body.page-admin .pf-chart-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:12px;}
body.page-admin .pf-chart{width:100%;min-height:250px;overflow:hidden;}
body.page-admin .pf-chart-tall{min-height:310px;}
body.page-admin .pf-chart svg{display:block;width:100%;height:auto;max-height:360px;overflow:visible;}
body.page-admin .pf-chart-empty{height:220px;border:1px dashed var(--border);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--ink-faint);font-size:13px;text-align:center;padding:20px;}
body.page-admin .pf-chart-legend{display:flex;justify-content:flex-end;gap:14px;flex-wrap:wrap;font-size:11px;color:var(--ink-soft);margin:2px 4px 8px;}
body.page-admin .pf-chart-legend span{display:inline-flex;align-items:center;gap:5px;}
body.page-admin .pf-legend-swatch{width:12px;height:4px;border-radius:4px;display:inline-block;background:var(--ink-faint);}
body.page-admin .pf-svg-grid{stroke:var(--border);stroke-width:1;}
body.page-admin .pf-svg-axis-line{stroke:var(--ink-faint);stroke-width:1;}
body.page-admin .pf-svg-axis{fill:var(--ink-faint);font:10px Inter,sans-serif;}
body.page-admin .pf-svg-label{fill:var(--ink-soft);font:11px Inter,sans-serif;font-weight:600;}
body.page-admin .pf-svg-line{fill:none;stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round;}
body.page-admin .pf-svg-dot{stroke:var(--surface);stroke-width:1.2;}
body.page-admin .pf-series-0{stroke:#64748B;fill:#64748B;background:#64748B;}
body.page-admin .pf-series-1{stroke:var(--gold-deep);fill:var(--gold-deep);background:var(--gold-deep);}
body.page-admin .pf-series-2{stroke:var(--green);fill:var(--green);background:var(--green);}
body.page-admin .pf-svg-bar{stroke:none;opacity:.92;}
body.page-admin .pf-waterfall{stroke:none;}
body.page-admin .pf-waterfall-opening,body.page-admin .pf-waterfall-subtotal{fill:#64748B;}
body.page-admin .pf-waterfall-inflow,body.page-admin .pf-waterfall-result{fill:var(--green);}
body.page-admin .pf-waterfall-outflow{fill:var(--gold-deep);}
body.page-admin .pf-waterfall-reserve{fill:#A855F7;}
body.page-admin .pf-metric-list{display:grid;gap:0;}
body.page-admin .pf-metric-list>div{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--border);}
body.page-admin .pf-metric-list>div:last-child{border-bottom:0;}
body.page-admin .pf-metric-list span{font-size:13px;color:var(--ink-soft);}
body.page-admin .pf-metric-list strong{font-variant-numeric:tabular-nums;}
body.page-admin .pf-budget-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px;}
body.page-admin .pf-budget-flags{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end;}
body.page-admin .pf-check{display:inline-flex!important;align-items:center;gap:7px;margin:0!important;text-transform:none!important;letter-spacing:0!important;font-size:12px!important;color:var(--ink-soft)!important;}
body.page-admin .pf-check input{width:auto!important;margin:0!important;}
body.page-admin .pf-budget-table input,body.page-admin .pf-budget-table select{min-width:115px;margin:0;padding:8px;font-size:12px;}
body.page-admin .pf-budget-table td:nth-child(2) input{min-width:165px;}
body.page-admin .pf-budget-table td:nth-child(6) input{min-width:150px;}
body.page-admin .pf-system-lines{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px;}
body.page-admin .pf-system-line{border:1px solid var(--border);background:var(--surface-2);border-radius:10px;padding:12px 14px;display:flex;align-items:center;justify-content:space-between;gap:12px;}
body.page-admin .pf-system-line span{display:flex;flex-direction:column;gap:3px;}
body.page-admin .pf-system-line small{color:var(--ink-faint);font-size:11px;}
body.page-admin .pf-system-line strong{font-variant-numeric:tabular-nums;white-space:nowrap;}
body.page-admin .pf-budget-footer{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-top:14px;padding-top:14px;border-top:1px solid var(--border);}
body.page-admin .pf-budget-footer label{flex:1;margin:0;}
body.page-admin .pf-budget-footer input{margin:5px 0 0;}
body.page-admin .pf-notice{border:1px solid color-mix(in srgb,var(--gold-deep) 28%,var(--border));background:var(--gold);color:var(--ink);border-radius:10px;padding:12px 14px;margin-bottom:12px;font-size:13px;line-height:1.5;}
body.page-admin .pf-goal-form{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
body.page-admin .pf-goal-form label{margin:0;}
body.page-admin .pf-goal-form button{align-self:end;}
body.page-admin .pf-goals-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
body.page-admin .pf-goal-card{border:1px solid var(--border);border-radius:11px;padding:13px;background:var(--surface-2);}
body.page-admin .pf-goal-card.good{border-color:color-mix(in srgb,var(--green) 40%,var(--border));}
body.page-admin .pf-goal-card.watch{border-color:color-mix(in srgb,var(--gold-deep) 45%,var(--border));}
body.page-admin .pf-goal-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;}
body.page-admin .pf-goal-top>div{display:flex;flex-direction:column;gap:2px;}
body.page-admin .pf-goal-top small{color:var(--ink-soft);}
body.page-admin .pf-goal-values{display:flex;justify-content:space-between;gap:10px;margin:10px 0 7px;color:var(--ink-soft);font-size:11px;}
body.page-admin .pf-progress{height:8px;background:var(--border);border-radius:999px;overflow:hidden;margin-bottom:7px;}
body.page-admin .pf-progress i{display:block;height:100%;background:var(--gold-deep);border-radius:999px;}
body.page-admin .pf-save-scenario{display:grid;grid-template-columns:1fr 1.5fr auto;gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid var(--border);}
body.page-admin .pf-save-scenario input{margin:0;}
body.page-admin .pf-saved-scenarios{display:grid;gap:8px;margin-top:12px;}
body.page-admin .pf-scenario-row{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--border);background:var(--surface-2);padding:10px 12px;border-radius:10px;}
body.page-admin .pf-scenario-row>div:first-child{display:flex;flex-direction:column;gap:3px;}
body.page-admin .pf-scenario-row small{color:var(--ink-soft);}
body.page-admin .pf-scenario-row>div:last-child{display:flex;gap:6px;}
body.page-admin button.danger:not(.ghost){color:#fff;border-color:var(--red);}
body.page-admin button.ghost.danger{color:var(--red);border-color:color-mix(in srgb,var(--red) 35%,var(--border));}

@media(max-width:1200px){
  body.page-admin .pf-toolbar{grid-template-columns:1fr 1fr;}body.page-admin .pf-confidence-box{grid-column:1/-1;text-align:left;}
  body.page-admin .pf-kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  body.page-admin .pf-kpi-grid-4{grid-template-columns:repeat(2,minmax(0,1fr));}
  body.page-admin .pf-area-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media(max-width:820px){
  body.page-admin .pf-toolbar{grid-template-columns:1fr;}body.page-admin .pf-toolbar-controls{justify-content:flex-start;}body.page-admin .pf-confidence-box{text-align:left;}
  body.page-admin .pf-area-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  body.page-admin .pf-chart-grid{grid-template-columns:1fr;}
  body.page-admin .pf-system-lines,body.page-admin .pf-goals-list{grid-template-columns:1fr;}
  body.page-admin .pf-budget-toolbar,body.page-admin .pf-budget-footer{align-items:stretch;flex-direction:column;}
  body.page-admin .pf-budget-flags{justify-content:flex-start;}
  body.page-admin .pf-save-scenario{grid-template-columns:1fr;}
}
@media(max-width:560px){
  body.page-admin .pf-kpi-grid,body.page-admin .pf-kpi-grid-4{grid-template-columns:1fr 1fr;}
  body.page-admin .pf-area-grid{grid-template-columns:1fr;}
  body.page-admin .pf-goal-form{grid-template-columns:1fr;}
  body.page-admin .pf-kpi strong{font-size:19px;}
}

/* =========================================================
   Beta v1.4.22 — Employee self-service + mobile shell
   ========================================================= */
.mobile-sidebar-toggle{
  display:none;position:fixed;z-index:160;top:12px;left:12px;width:42px;height:42px;
  border:1px solid var(--border,#e2e8f0);border-radius:11px;background:var(--surface,#fff);
  color:var(--ink,#0f172a);box-shadow:0 6px 20px rgba(15,23,42,.16);cursor:pointer;
  align-items:center;justify-content:center;
}
.mobile-sidebar-toggle svg{width:22px;height:22px}
.mobile-sidebar-backdrop{display:none;position:fixed;inset:0;z-index:135;background:rgba(15,23,42,.48);backdrop-filter:blur(1px)}
.mobile-sidebar-backdrop.show{display:block}
@media(max-width:880px){
  .mobile-sidebar-toggle{display:flex}
  .app-sidebar{z-index:150!important;left:-250px!important;width:min(82vw,250px)!important;min-width:min(82vw,250px)!important;box-shadow:12px 0 32px rgba(15,23,42,.24)}
  .app-sidebar.open{left:0!important}
  .main-area{width:100%;min-width:0}
  body.page-admin .topbar,body.page-myattendance .topbar,body.page-timeclock .topbar,body.page-basket .topbar,body.page-cashdrawer .topbar{padding-left:66px!important}
}

body.page-timeclock .self-clock-employee select:disabled{opacity:1;color:var(--ink);background:var(--surface-2);cursor:not-allowed}
body.page-timeclock .self-clock-employee label::after{content:" · signed-in account";font-weight:600;text-transform:none;letter-spacing:0;color:var(--ink-faint)}

body.page-myattendance .employee-portal-page{grid-template-columns:1fr;max-width:1180px}
body.page-myattendance .employee-portal-page>.card,
body.page-myattendance .employee-portal-tabs{grid-column:1/-1}
body.page-myattendance .employee-portal-hero{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 22px}
body.page-myattendance .employee-portal-hero h2{margin:2px 0 4px;font-size:21px}
body.page-myattendance .section-kicker{font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:4px}
body.page-myattendance .employee-clock-cta,
body.page-myattendance .employee-payslip-link{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;border-radius:9px;background:var(--gold-deep);color:var(--on-accent);font-weight:800}
body.page-myattendance .employee-clock-cta{min-height:42px;padding:0 16px;white-space:nowrap}
body.page-myattendance .employee-payslip-link{min-height:34px;padding:0 12px;font-size:12px}
body.page-myattendance .employee-portal-tabs{position:sticky;top:77px;z-index:18;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:8px;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px);border:1px solid var(--border);border-radius:12px}
body.page-myattendance .employee-portal-tabs a{display:flex;align-items:center;justify-content:center;min-height:38px;padding:8px 10px;border-radius:8px;background:var(--surface);border:1px solid var(--border);color:var(--ink-soft);font-size:12px;font-weight:800;text-decoration:none;text-align:center}
body.page-myattendance .employee-portal-tabs a:hover{border-color:var(--gold-deep);color:var(--gold-deep)}
body.page-myattendance .employee-profile-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
body.page-myattendance .employee-profile-field{display:flex;flex-direction:column;gap:5px;min-width:0;padding:12px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2)}
body.page-myattendance .employee-profile-field span{font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint)}
body.page-myattendance .employee-profile-field strong{font-size:13px;color:var(--ink);overflow-wrap:anywhere;text-transform:none}
body.page-myattendance .employee-schedule-list{display:grid;gap:7px}
body.page-myattendance .employee-schedule-day{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 13px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2)}
body.page-myattendance .employee-schedule-day>div{display:flex;flex-direction:column;gap:3px;min-width:0}
body.page-myattendance .employee-schedule-day strong{font-size:13px;color:var(--ink)}
body.page-myattendance .employee-schedule-day span{font-size:12px;color:var(--ink-soft)}
body.page-myattendance .employee-schedule-day.is-off{opacity:.82}
body.page-myattendance .schedule-status{flex:none;display:inline-flex;padding:5px 9px;border-radius:999px;background:var(--surface);border:1px solid var(--border);font-size:11px!important;font-weight:800!important;color:var(--ink-faint)!important}
body.page-myattendance .schedule-status.is-work{background:var(--green-soft);border-color:transparent;color:var(--green)!important}
body.page-myattendance .employee-payroll-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:12px}
body.page-myattendance .employee-payroll-head h3{margin-bottom:4px}
body.page-myattendance .employee-payroll-year{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-faint)}
body.page-myattendance .employee-payroll-year select{min-height:38px;border:1px solid var(--border);background:var(--surface);color:var(--ink);border-radius:8px;padding:7px 10px;font:inherit;font-size:12px}
body.page-myattendance .employee-payroll-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:12px}
body.page-myattendance .employee-payroll-summary>div{display:flex;flex-direction:column;gap:5px;padding:12px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2)}
body.page-myattendance .employee-payroll-summary span{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-faint)}
body.page-myattendance .employee-payroll-summary strong{font-size:18px;color:var(--ink)}

/* Payslip */
body.page-payslip{margin:0;background:#eef2f7;color:#0f172a;font-family:"Inter",Arial,sans-serif;-webkit-font-smoothing:antialiased}
body.page-payslip *{box-sizing:border-box}
.payslip-page{width:min(900px,100%);margin:0 auto;padding:24px 16px 48px}
.payslip-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.payslip-actions a{color:#0f766e;font-weight:800;text-decoration:none}.payslip-actions button{border:0;border-radius:9px;background:#0f766e;color:#fff;padding:10px 15px;font-weight:800;cursor:pointer}
.payslip-sheet{background:#fff;border:1px solid #dbe3ee;border-radius:14px;box-shadow:0 12px 32px rgba(15,23,42,.08);padding:28px}
.payslip-header{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;padding-bottom:20px;border-bottom:2px solid #0f766e}.payslip-brand{font-size:12px;font-weight:900;letter-spacing:.1em;color:#0f766e;text-transform:uppercase}.payslip-header h1{font-size:21px;margin:4px 0}.payslip-header p{font-size:12px;color:#64748b;margin:0}.payslip-title{text-align:right}.payslip-title strong{display:block;font-size:25px;letter-spacing:.08em}.payslip-title span{font-size:12px;color:#64748b}
.payslip-meta-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px;padding:18px 0}.payslip-meta-grid>div{display:flex;flex-direction:column;gap:3px}.payslip-meta-grid span,.payslip-money-grid span{font-size:10px;font-weight:800;color:#94a3b8;text-transform:uppercase;letter-spacing:.05em}.payslip-meta-grid strong{font-size:13px}
.payslip-section{border-top:1px solid #e2e8f0;padding-top:16px;margin-top:4px}.payslip-section h2{font-size:13px;text-transform:uppercase;letter-spacing:.06em;margin:0 0 10px;color:#475569}.payslip-money-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.payslip-money-grid>div{display:flex;flex-direction:column;gap:5px;padding:12px;border:1px solid #e2e8f0;border-radius:9px}.payslip-money-grid strong{font-size:19px}.payslip-money-grid .net{background:#ecfdf5;border-color:#bbf7d0}.payslip-money-grid .net strong{color:#047857}
.payslip-columns{display:grid;grid-template-columns:1fr 1fr;gap:18px}.payslip-section table{width:100%;border-collapse:collapse}.payslip-section td{padding:7px 0;border-bottom:1px solid #eef2f7;font-size:12px}.payslip-section td:last-child{text-align:right;font-weight:800}.payslip-muted,.payslip-note{font-size:11px;line-height:1.5;color:#64748b}.payslip-footer{margin-top:18px;padding-top:14px;border-top:1px solid #e2e8f0;display:grid;grid-template-columns:1fr 1fr;gap:6px 16px;font-size:11px;color:#475569}.payslip-footer p{grid-column:1/-1;color:#94a3b8}.payslip-loading,.payslip-error{padding:40px;text-align:center;color:#64748b}
@media(max-width:720px){
  body.page-myattendance .employee-profile-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.page-myattendance .employee-portal-tabs{top:71px;grid-template-columns:repeat(2,minmax(0,1fr))}
  body.page-myattendance .employee-payroll-head{flex-direction:column}
  .payslip-page{padding:10px 8px 30px}.payslip-sheet{padding:18px 14px}.payslip-header,.payslip-columns{grid-template-columns:1fr;display:grid}.payslip-title{text-align:left}.payslip-money-grid{grid-template-columns:1fr}.payslip-footer{grid-template-columns:1fr}.payslip-footer p{grid-column:auto}
}
@media(max-width:560px){
  body.page-myattendance .topbar{padding-left:64px!important}
  body.page-myattendance .employee-portal-page{padding:12px 10px 30px}
  body.page-myattendance .employee-portal-hero{align-items:flex-start;flex-direction:column;padding:16px}
  body.page-myattendance .employee-clock-cta{width:100%}
  body.page-myattendance .employee-profile-grid{grid-template-columns:1fr}
  body.page-myattendance .employee-payroll-summary{grid-template-columns:1fr 1fr}
  body.page-myattendance .employee-payroll-summary>div:last-child{grid-column:1/-1}
  body.page-myattendance .employee-schedule-day{align-items:flex-start}
  body.page-myattendance .employee-payroll-table,body.page-myattendance .employee-attendance-table{min-width:0;border:0}
  body.page-myattendance .employee-payroll-table thead,body.page-myattendance .employee-attendance-table thead{display:none}
  body.page-myattendance .employee-payroll-table tbody,body.page-myattendance .employee-attendance-table tbody{display:grid;gap:10px;padding:8px;background:var(--surface-2)}
  body.page-myattendance .employee-payroll-table tr,body.page-myattendance .employee-attendance-table tr{display:grid;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:8px 10px}
  body.page-myattendance .employee-payroll-table td,body.page-myattendance .employee-attendance-table td{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--border);padding:8px 2px;text-align:right}
  body.page-myattendance .employee-payroll-table td:last-child,body.page-myattendance .employee-attendance-table td:last-child{border-bottom:0}
  body.page-myattendance .employee-payroll-table td::before,body.page-myattendance .employee-attendance-table td::before{content:attr(data-label);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-faint);text-align:left}
  body.page-myattendance .employee-payroll-table td[colspan],body.page-myattendance .employee-attendance-table td[colspan]{display:block;text-align:center}
  body.page-myattendance .employee-payroll-table td[colspan]::before,body.page-myattendance .employee-attendance-table td[colspan]::before{display:none}
  .payslip-meta-grid{grid-template-columns:1fr}
}
@media print{
  body.page-payslip{background:#fff}.no-print{display:none!important}.payslip-page{width:100%;padding:0}.payslip-sheet{border:0;box-shadow:none;border-radius:0;padding:0}
}

/* ========================================================================== 
   Beta v1.4.23 — Plan & Forecast visual decision dashboard
   Chart-first hierarchy, progressive disclosure, responsive owner planning.
   ========================================================================== */
body.page-admin #panel-planning{
  --pf-blue:var(--gold-deep,#2563eb);
  --pf-green:var(--green,#16a34a);
  --pf-teal:#0f9b8e;
  --pf-amber:#f59e0b;
  --pf-orange:#f97316;
  --pf-purple:#8b5cf6;
  --pf-slate:#64748b;
  --pf-red:var(--red,#dc2626);
}
body.page-admin #panel-planning .pf-page-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  margin:0 0 10px;padding:2px 2px 10px;
}
body.page-admin #panel-planning .pf-page-title h2{font-size:clamp(25px,2.4vw,34px);margin:2px 0 4px;letter-spacing:-.035em;}
body.page-admin #panel-planning .pf-page-title .eyebrow{color:var(--pf-teal);font-size:11px;font-weight:800;letter-spacing:.09em;}
body.page-admin #panel-planning .pf-head-controls{display:flex;align-items:flex-end;justify-content:flex-end;gap:8px;flex-wrap:wrap;}
body.page-admin #panel-planning .pf-head-controls label{min-width:118px;margin:0;font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);}
body.page-admin #panel-planning .pf-head-controls input,
body.page-admin #panel-planning .pf-head-controls select{min-height:38px;margin:5px 0 0;padding:8px 10px;font-size:12px;background:var(--surface);}
body.page-admin #panel-planning .pf-recalculate{min-height:38px;background:var(--pf-teal);border-color:var(--pf-teal);white-space:nowrap;padding:9px 14px;}
body.page-admin #panel-planning .pf-status-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:34px;margin-bottom:8px;padding:0 2px;}
body.page-admin #panel-planning .pf-status-right{display:flex;align-items:center;justify-content:flex-end;gap:10px;min-width:0;}
body.page-admin #panel-planning .pf-status-right .sub{max-width:480px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
body.page-admin #panel-planning .pf-subtabs{margin:0 0 14px;padding:0 0 5px;border-bottom:1px solid var(--border);gap:6px;}
body.page-admin #panel-planning .pf-subtabs .subtab{min-height:34px;padding:7px 14px;font-size:12px;border-radius:999px;}

body.page-admin #panel-planning .pf-kpi-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-bottom:12px;}
body.page-admin #panel-planning .pf-kpi-grid-5{grid-template-columns:repeat(5,minmax(0,1fr));}
body.page-admin #panel-planning .pf-kpi{position:relative;min-height:96px;padding:13px 14px;border-radius:13px;box-shadow:0 5px 16px rgba(15,23,42,.045);overflow:hidden;}
body.page-admin #panel-planning .pf-kpi::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,var(--pf-teal),transparent 70%);opacity:.55;}
body.page-admin #panel-planning .pf-kpi span{font-size:10px;letter-spacing:.035em;color:var(--ink-soft);}
body.page-admin #panel-planning .pf-kpi strong{font-size:clamp(18px,1.55vw,24px);letter-spacing:-.02em;}
body.page-admin #panel-planning .pf-kpi small{font-size:10.5px;line-height:1.32;}

body.page-admin #panel-planning .pf-dashboard-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:12px;align-items:stretch;}
body.page-admin #panel-planning .pf-dashboard-grid.pf-two{grid-template-columns:repeat(2,minmax(0,1fr));}
body.page-admin #panel-planning .pf-dashboard-grid .pf-span-2{grid-column:span 2;}
body.page-admin #panel-planning .pf-dashboard-card{margin:0;min-width:0;padding:0;border-radius:14px;overflow:hidden;}
body.page-admin #panel-planning .pf-card-head{min-height:58px;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:14px 15px 10px;border-bottom:1px solid transparent;}
body.page-admin #panel-planning .pf-card-head h3{margin:0 0 2px;font-size:14px;letter-spacing:-.01em;}
body.page-admin #panel-planning .pf-card-head .sub{font-size:10.5px;line-height:1.35;}
body.page-admin #panel-planning .pf-card-body{padding:5px 15px 14px;transition:opacity .15s ease;}
body.page-admin #panel-planning .pf-card-head + .pf-card-body{border-top:1px solid color-mix(in srgb,var(--border) 65%,transparent);}
body.page-admin #panel-planning .pf-head-actions{display:flex;align-items:center;gap:7px;}
body.page-admin #panel-planning .pf-collapse-toggle{width:28px;height:28px;min-width:28px;padding:0;border:1px solid var(--border);border-radius:8px;background:var(--surface-2);color:var(--ink-soft);font-size:14px;line-height:1;box-shadow:none;}
body.page-admin #panel-planning .pf-collapse-toggle:hover{border-color:var(--pf-teal);color:var(--pf-teal);background:color-mix(in srgb,var(--pf-teal) 7%,var(--surface));}
body.page-admin #panel-planning .pf-collapsible.is-collapsed .pf-card-body{display:none;}
body.page-admin #panel-planning .pf-collapsible.is-collapsed .pf-card-head{min-height:52px;align-items:center;}
body.page-admin #panel-planning .pf-text-link{display:block;margin:8px 0 0 auto;padding:3px 0;border:0;background:transparent;color:var(--pf-blue);font-size:11px;font-weight:700;box-shadow:none;}

body.page-admin #panel-planning .pf-chart{min-height:205px;}
body.page-admin #panel-planning .pf-chart-tall{min-height:275px;}
body.page-admin #panel-planning .pf-chart-compact{min-height:190px;}
body.page-admin #panel-planning .pf-chart svg{max-height:320px;}
body.page-admin #panel-planning .pf-chart-compact svg{max-height:230px;}
body.page-admin #panel-planning .pf-chart-legend{justify-content:flex-start;margin:2px 2px 8px;gap:10px;font-size:9.5px;}
body.page-admin #panel-planning .pf-svg-axis{font-size:9px;}
body.page-admin #panel-planning .pf-svg-label{font-size:10px;}
body.page-admin #panel-planning .pf-series-0{stroke:var(--pf-blue);fill:var(--pf-blue);background:var(--pf-blue);}
body.page-admin #panel-planning .pf-series-1{stroke:var(--pf-green);fill:var(--pf-green);background:var(--pf-green);}
body.page-admin #panel-planning .pf-series-2{stroke:var(--pf-amber);fill:var(--pf-amber);background:var(--pf-amber);}
body.page-admin #panel-planning .pf-series-3{stroke:var(--pf-purple);fill:var(--pf-purple);background:var(--pf-purple);}
body.page-admin #panel-planning .pf-donut-wrap{display:grid;grid-template-columns:minmax(120px,45%) 1fr;gap:10px;align-items:center;min-height:175px;}
body.page-admin #panel-planning .pf-donut-svg{width:100%;max-width:185px;margin:auto;overflow:visible;}
body.page-admin #panel-planning .pf-donut-center-main{fill:var(--ink);font-size:18px;font-weight:800;text-anchor:middle;}
body.page-admin #panel-planning .pf-donut-center-sub{fill:var(--ink-soft);font-size:8.5px;text-anchor:middle;}
body.page-admin #panel-planning .pf-donut-legend{display:grid;gap:7px;min-width:0;}
body.page-admin #panel-planning .pf-donut-row{display:grid;grid-template-columns:8px minmax(0,1fr) auto;gap:6px;align-items:center;font-size:10px;}
body.page-admin #panel-planning .pf-donut-row i{width:8px;height:8px;border-radius:50%;}
body.page-admin #panel-planning .pf-donut-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-soft);}
body.page-admin #panel-planning .pf-donut-row strong{font-size:10px;font-variant-numeric:tabular-nums;}

body.page-admin #panel-planning .pf-alert-list .planning-recommendation{padding:9px 10px;gap:9px;border-radius:9px;}
body.page-admin #panel-planning .pf-alert-list .planning-recommendation>div:last-child{font-size:11px;line-height:1.35;}
body.page-admin #panel-planning .pf-alert-list .planning-recommendation .sub{font-size:9.5px;margin-top:2px;}
body.page-admin #panel-planning .pf-insight-list{display:grid;gap:8px;}
body.page-admin #panel-planning .pf-insight{display:grid;grid-template-columns:24px 1fr;gap:8px;padding:8px 9px;border-radius:9px;background:var(--surface-2);border:1px solid var(--border);font-size:10.5px;line-height:1.4;}
body.page-admin #panel-planning .pf-insight-icon{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;background:color-mix(in srgb,var(--pf-blue) 12%,var(--surface));color:var(--pf-blue);font-weight:800;}
body.page-admin #panel-planning .pf-insight.good .pf-insight-icon{background:color-mix(in srgb,var(--pf-green) 12%,var(--surface));color:var(--pf-green);}
body.page-admin #panel-planning .pf-insight.warn .pf-insight-icon{background:color-mix(in srgb,var(--pf-amber) 15%,var(--surface));color:#b45309;}
body.page-admin #panel-planning .pf-insight.danger .pf-insight-icon{background:color-mix(in srgb,var(--pf-red) 12%,var(--surface));color:var(--pf-red);}
body.page-admin #panel-planning .pf-health-callout{margin-top:8px;padding:9px 10px;border-radius:9px;background:var(--surface-2);border:1px solid var(--border);font-size:10.5px;line-height:1.35;}
body.page-admin #panel-planning .pf-health-callout.good{border-color:color-mix(in srgb,var(--pf-green) 35%,var(--border));}
body.page-admin #panel-planning .pf-health-callout.warn{border-color:color-mix(in srgb,var(--pf-amber) 40%,var(--border));}
body.page-admin #panel-planning .pf-health-callout.danger{border-color:color-mix(in srgb,var(--pf-red) 40%,var(--border));}

body.page-admin #panel-planning .pf-progress-list{display:grid;gap:9px;}
body.page-admin #panel-planning .pf-progress-row{display:grid;grid-template-columns:minmax(88px,.9fr) minmax(110px,1.5fr) auto;align-items:center;gap:8px;font-size:10px;}
body.page-admin #panel-planning .pf-progress-row>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-soft);}
body.page-admin #panel-planning .pf-progress-track{height:8px;border-radius:999px;background:color-mix(in srgb,var(--border) 70%,transparent);overflow:hidden;}
body.page-admin #panel-planning .pf-progress-track i{display:block;height:100%;border-radius:999px;background:var(--pf-teal);}
body.page-admin #panel-planning .pf-progress-row strong{font-size:10px;font-variant-numeric:tabular-nums;}
body.page-admin #panel-planning .pf-overview-goals{display:grid;gap:10px;}
body.page-admin #panel-planning .pf-overview-goal{display:grid;grid-template-columns:minmax(100px,1fr) minmax(100px,1.4fr) 38px;gap:8px;align-items:center;font-size:10px;}
body.page-admin #panel-planning .pf-overview-goal span{color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
body.page-admin #panel-planning .pf-overview-goal b{text-align:right;font-size:10px;}

body.page-admin #panel-planning .pf-scope-chips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;}
body.page-admin #panel-planning .pf-scope-chips button{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:42px;padding:9px 10px;background:var(--surface-2);color:var(--ink);border:1px solid var(--border);border-radius:9px;text-align:left;font-size:10.5px;font-weight:700;box-shadow:none;}
body.page-admin #panel-planning .pf-scope-chips button strong{color:var(--pf-teal);font-size:9.5px;white-space:nowrap;}

body.page-admin #panel-planning .pf-summary-table{display:grid;gap:0;}
body.page-admin #panel-planning .pf-summary-row{display:grid;grid-template-columns:minmax(110px,1.5fr) repeat(3,minmax(70px,.8fr));gap:8px;align-items:center;padding:9px 3px;border-bottom:1px solid var(--border);font-size:10px;}
body.page-admin #panel-planning .pf-summary-row:last-child{border-bottom:0;}
body.page-admin #panel-planning .pf-summary-row strong{font-variant-numeric:tabular-nums;}
body.page-admin #panel-planning .pf-summary-row .pf-status-pill{justify-self:start;}
body.page-admin #panel-planning .pf-obligation-list{display:grid;gap:0;}
body.page-admin #panel-planning .pf-obligation{display:grid;grid-template-columns:1.4fr .8fr .7fr;gap:8px;padding:9px 2px;border-bottom:1px solid var(--border);font-size:10px;align-items:center;}
body.page-admin #panel-planning .pf-obligation:last-child{border-bottom:0;}
body.page-admin #panel-planning .pf-obligation span{color:var(--ink-soft);}
body.page-admin #panel-planning .pf-status-pill{display:inline-flex;padding:3px 7px;border-radius:999px;font-size:9px;font-weight:800;background:var(--green-soft);color:var(--green);}
body.page-admin #panel-planning .pf-status-pill.warn{background:color-mix(in srgb,var(--pf-amber) 16%,var(--surface));color:#b45309;}
body.page-admin #panel-planning .pf-budget-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px;padding:9px 10px;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;}
body.page-admin #panel-planning .pf-budget-controls>label:not(.pf-check){margin-left:auto;display:flex;align-items:center;gap:8px;font-size:10px;font-weight:800;text-transform:uppercase;color:var(--ink-soft);}
body.page-admin #panel-planning .pf-budget-controls select{margin:0;min-height:32px;padding:5px 8px;font-size:11px;}

body.page-admin #panel-planning .pf-goal-kpi-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:12px;}
body.page-admin #panel-planning .pf-goal-kpi{background:var(--surface);border:1px solid var(--border);border-radius:13px;padding:12px 13px;box-shadow:0 4px 14px rgba(15,23,42,.04);}
body.page-admin #panel-planning .pf-goal-kpi .pf-goal-ring{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;margin-bottom:8px;background:conic-gradient(var(--pf-teal) var(--progress),var(--surface-2) 0);position:relative;}
body.page-admin #panel-planning .pf-goal-kpi .pf-goal-ring::after{content:"";width:34px;height:34px;border-radius:50%;background:var(--surface);position:absolute;}
body.page-admin #panel-planning .pf-goal-kpi .pf-goal-ring b{position:relative;z-index:1;font-size:9px;}
body.page-admin #panel-planning .pf-goal-kpi>span{display:block;font-size:10px;color:var(--ink-soft);font-weight:700;}
body.page-admin #panel-planning .pf-goal-kpi>strong{display:block;margin-top:3px;font-size:15px;}
body.page-admin #panel-planning .pf-goals-list{grid-template-columns:1fr;}
body.page-admin #panel-planning .pf-goal-card{background:var(--surface-2);padding:10px 11px;}

body.page-admin #panel-planning .pf-scenario-card-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:12px;}
body.page-admin #panel-planning .pf-scenario-card{border:1px solid var(--border);background:var(--surface);border-radius:13px;padding:12px 13px;box-shadow:0 4px 14px rgba(15,23,42,.04);}
body.page-admin #panel-planning .pf-scenario-card.active{border-color:color-mix(in srgb,var(--pf-teal) 55%,var(--border));box-shadow:0 0 0 1px color-mix(in srgb,var(--pf-teal) 22%,transparent);}
body.page-admin #panel-planning .pf-scenario-card .pf-scenario-name{display:flex;justify-content:space-between;gap:8px;font-size:11px;font-weight:800;margin-bottom:8px;}
body.page-admin #panel-planning .pf-scenario-card .pf-scenario-values{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;}
body.page-admin #panel-planning .pf-scenario-card .pf-scenario-values span{font-size:8.5px;color:var(--ink-soft);}
body.page-admin #panel-planning .pf-scenario-card .pf-scenario-values strong{display:block;font-size:11px;color:var(--ink);margin-top:1px;}

body.page-admin #panel-planning .pf-notice-inline{margin:0 0 10px;padding:9px 12px;font-size:10.5px;}
body.page-admin #panel-planning .pf-compact-table{max-height:310px;overflow:auto;}
body.page-admin #panel-planning .pf-compact-table table{font-size:10px;}
body.page-admin #panel-planning .pf-compact-table th,body.page-admin #panel-planning .pf-compact-table td{padding:8px 7px;}
body.page-admin #panel-planning .pf-metric-list>div{padding:8px 0;}
body.page-admin #panel-planning .pf-metric-list span{font-size:10.5px;}
body.page-admin #panel-planning .pf-metric-list strong{font-size:11px;}
body.page-admin #panel-planning .planning-settings-grid label,
body.page-admin #panel-planning .planning-whatif-grid label,
body.page-admin #panel-planning .pf-goal-form label{font-size:10px;}
body.page-admin #panel-planning .planning-whatif-results{gap:8px;margin-top:10px;}
body.page-admin #panel-planning .planning-whatif-result{padding:10px 11px;}
body.page-admin #panel-planning .planning-whatif-result strong{font-size:16px;}
body.page-admin #panel-planning table{font-size:10.5px;}
body.page-admin #panel-planning th{font-size:9px;letter-spacing:.035em;}
body.page-admin #panel-planning td,body.page-admin #panel-planning th{padding:8px 7px;}

@media(max-width:1320px){
  body.page-admin #panel-planning .pf-kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  body.page-admin #panel-planning .pf-kpi-grid-5{grid-template-columns:repeat(3,minmax(0,1fr));}
  body.page-admin #panel-planning .pf-goal-kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  body.page-admin #panel-planning .pf-scope-chips{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media(max-width:1040px){
  body.page-admin #panel-planning .pf-page-head{align-items:flex-start;flex-direction:column;}
  body.page-admin #panel-planning .pf-head-controls{justify-content:flex-start;width:100%;}
  body.page-admin #panel-planning .pf-dashboard-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  body.page-admin #panel-planning .pf-dashboard-grid .pf-span-2{grid-column:span 2;}
  body.page-admin #panel-planning .pf-scenario-card-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:760px){
  body.page-admin #panel-planning .pf-status-row{align-items:flex-start;flex-direction:column;}
  body.page-admin #panel-planning .pf-status-right{align-items:flex-start;flex-direction:column;}
  body.page-admin #panel-planning .pf-status-right .sub{white-space:normal;}
  body.page-admin #panel-planning .pf-head-controls{display:grid;grid-template-columns:1fr 1fr;}
  body.page-admin #panel-planning .pf-head-controls label{min-width:0;}
  body.page-admin #panel-planning .pf-recalculate{grid-column:1/-1;width:100%;}
  body.page-admin #panel-planning .pf-kpi-grid,
  body.page-admin #panel-planning .pf-kpi-grid-5{grid-template-columns:repeat(2,minmax(0,1fr));}
  body.page-admin #panel-planning .pf-dashboard-grid,
  body.page-admin #panel-planning .pf-dashboard-grid.pf-two{grid-template-columns:1fr;}
  body.page-admin #panel-planning .pf-dashboard-grid .pf-span-2{grid-column:auto;}
  body.page-admin #panel-planning .pf-card-body{padding:5px 11px 12px;}
  body.page-admin #panel-planning .pf-card-head{padding:12px 11px 9px;}
  body.page-admin #panel-planning .pf-donut-wrap{grid-template-columns:1fr;}
  body.page-admin #panel-planning .pf-donut-legend{grid-template-columns:repeat(2,minmax(0,1fr));}
  body.page-admin #panel-planning .pf-scope-chips{grid-template-columns:repeat(2,minmax(0,1fr));}
  body.page-admin #panel-planning .pf-goal-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  body.page-admin #panel-planning .pf-scenario-card-grid{grid-template-columns:1fr 1fr;}
  body.page-admin #panel-planning .planning-whatif-grid{grid-template-columns:1fr 1fr;}
  body.page-admin #panel-planning .planning-whatif-results{grid-template-columns:repeat(2,minmax(0,1fr));}
  body.page-admin #panel-planning .pf-summary-row{grid-template-columns:1.4fr .9fr .9fr;}
  body.page-admin #panel-planning .pf-summary-row>:nth-child(4){display:none;}
}
@media(max-width:480px){
  body.page-admin #panel-planning .pf-head-controls{grid-template-columns:1fr;}
  body.page-admin #panel-planning .pf-recalculate{grid-column:auto;}
  body.page-admin #panel-planning .pf-kpi-grid,
  body.page-admin #panel-planning .pf-kpi-grid-5{grid-template-columns:1fr 1fr;gap:8px;}
  body.page-admin #panel-planning .pf-kpi{min-height:88px;padding:11px;}
  body.page-admin #panel-planning .pf-kpi strong{font-size:17px;}
  body.page-admin #panel-planning .pf-scope-chips,
  body.page-admin #panel-planning .pf-goal-kpi-grid,
  body.page-admin #panel-planning .pf-scenario-card-grid{grid-template-columns:1fr;}
  body.page-admin #panel-planning .pf-donut-legend{grid-template-columns:1fr;}
  body.page-admin #panel-planning .planning-whatif-grid{grid-template-columns:1fr;}
  body.page-admin #panel-planning .planning-whatif-results{grid-template-columns:1fr 1fr;}
  body.page-admin #panel-planning .pf-progress-row{grid-template-columns:95px 1fr;}
  body.page-admin #panel-planning .pf-progress-row strong{grid-column:2;text-align:right;margin-top:-4px;}
}

/* ========================================================================== 
   Beta v1.4.24 — Plan & Forecast mockup-fidelity layout
   Keeps the planning engine intact while matching the approved owner cockpit.
   ========================================================================== */
:root{
  --pf-blue:#2f80ed;
  --pf-green:#16a36a;
  --pf-teal:#129b92;
  --pf-amber:#f4b72b;
  --pf-red:#ef4d5b;
  --pf-purple:#8b5cf6;
  --pf-slate:#71839b;
}
body.page-admin.planning-mode .app{
  max-width:1480px!important;
  width:100%;
  margin:0 auto!important;
  padding:18px 20px 72px!important;
}
body.page-admin.planning-mode .header{display:none!important}
body.page-admin.planning-mode #panel-planning{max-width:none!important;width:100%!important;margin:0!important}
body.page-admin.planning-mode #statusMsg{max-width:1480px;margin:0 auto 8px}

body.page-admin #panel-planning .pf-page-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:22px!important;
  margin:0 0 10px!important;
  padding:0 0 14px!important;
  border-bottom:1px solid var(--border)!important;
}
body.page-admin #panel-planning .pf-page-title{flex:1 1 320px;min-width:250px}
body.page-admin #panel-planning .pf-page-title .eyebrow{font-size:9px;letter-spacing:.12em;margin-bottom:3px}
body.page-admin #panel-planning .pf-page-title h2{margin:0;font-size:24px;line-height:1.1;letter-spacing:-.025em}
body.page-admin #panel-planning .pf-page-title .sub{font-size:12px;margin-top:4px;color:var(--ink-soft)}
body.page-admin #panel-planning .pf-head-controls{
  flex:0 1 780px!important;
  width:min(780px,66%)!important;
  display:flex!important;
  align-items:flex-end!important;
  justify-content:flex-end!important;
  flex-wrap:nowrap!important;
  gap:9px!important;
  margin:0!important;
}
body.page-admin #panel-planning .pf-head-controls label{
  display:flex!important;
  flex-direction:column!important; /* was missing: without this, the label's caption text and
    its select/input lay out side-by-side (flex row default) inside a ~110-180px cell instead of
    stacking caption-above-control, which is what made "Planning Period"/"Date Range"/
    "Business / Branch" visually collide with their fields. */
  flex:1 1 150px!important;
  min-width:110px!important;
  max-width:180px!important;
  gap:4px!important;
  margin:0!important;
  font-size:9px!important;
  line-height:1.1!important;
  font-weight:800!important;
  letter-spacing:.03em!important;
  text-transform:none!important;
  color:var(--ink-faint)!important;
}
body.page-admin #panel-planning .pf-head-controls label:nth-child(2){flex-basis:112px;max-width:125px}
body.page-admin #panel-planning .pf-head-controls input,
body.page-admin #panel-planning .pf-head-controls select{
  width:100%!important;
  min-height:38px!important;
  height:38px!important;
  padding:7px 28px 7px 10px!important;
  border-radius:8px!important;
  background:var(--surface)!important;
  font-size:11px!important;
  font-weight:700!important;
}
body.page-admin #panel-planning .pf-settings-btn{
  flex:0 0 auto;min-height:38px!important;height:38px!important;padding:0 12px!important;border-radius:8px!important;white-space:nowrap;font-size:11px!important
}
body.page-admin #panel-planning .pf-status-row{
  min-height:30px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  margin:0 0 12px!important;
  padding:0 2px 8px!important;
  border-bottom:0!important;
  font-size:10px!important;
  color:var(--ink-faint)!important;
}
body.page-admin #panel-planning .pf-status-left,
body.page-admin #panel-planning .pf-status-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
body.page-admin #panel-planning .planning-confidence{padding:4px 8px!important;border-radius:999px!important;font-size:9px!important;font-weight:800!important}
body.page-admin #panel-planning .pf-recalculate{min-height:32px!important;padding:0 11px!important;border-radius:7px!important;font-size:10px!important}
@media(min-width:901px){body.page-admin #panel-planning .pf-subtabs{display:none!important}}

body.page-admin #panel-planning .pf-kpi-grid,
body.page-admin #panel-planning .pf-kpi-grid-5{
  display:grid!important;
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  gap:11px!important;
  margin:0 0 12px!important;
}
body.page-admin #panel-planning .pf-kpi{
  position:relative!important;
  min-width:0!important;
  min-height:104px!important;
  padding:13px 14px!important;
  border-radius:11px!important;
  overflow:hidden!important;
  box-shadow:0 3px 12px rgba(15,23,42,.045)!important;
}
body.page-admin #panel-planning .pf-kpi>span{display:block;font-size:9px!important;line-height:1.25;font-weight:800;letter-spacing:.025em;text-transform:none;color:var(--ink-soft);padding-right:4px}
body.page-admin #panel-planning .pf-kpi>strong{display:block;margin-top:8px;font-size:20px!important;line-height:1.05;letter-spacing:-.02em;color:var(--ink)}
body.page-admin #panel-planning .pf-kpi>small{display:block;max-width:80%;margin-top:6px;font-size:9px!important;line-height:1.3;color:var(--ink-faint)}
body.page-admin #panel-planning .pf-sparkline{position:absolute;right:12px;bottom:11px;width:58px;height:22px;opacity:.92}
body.page-admin #panel-planning .pf-sparkline svg{width:100%;height:100%;display:block}
body.page-admin #panel-planning .pf-mini-donut{position:absolute;right:14px;top:42px;width:42px;height:42px;border-radius:50%;background:conic-gradient(var(--pf-amber) var(--pf-mini-progress,0%),color-mix(in srgb,var(--border) 70%,transparent) 0);}
body.page-admin #panel-planning .pf-mini-donut:after{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--surface)}

body.page-admin #panel-planning .pf-dashboard-grid{
  display:grid!important;
  grid-template-columns:repeat(12,minmax(0,1fr))!important;
  gap:11px!important;
  align-items:stretch!important;
  margin:0 0 11px!important;
}
body.page-admin #panel-planning .pf-col-3{grid-column:span 3!important}
body.page-admin #panel-planning .pf-col-4{grid-column:span 4!important}
body.page-admin #panel-planning .pf-col-5{grid-column:span 5!important}
body.page-admin #panel-planning .pf-col-6{grid-column:span 6!important}
body.page-admin #panel-planning .pf-col-7{grid-column:span 7!important}
body.page-admin #panel-planning .pf-col-8{grid-column:span 8!important}
body.page-admin #panel-planning .pf-col-9{grid-column:span 9!important}
body.page-admin #panel-planning .pf-col-12{grid-column:1/-1!important}
body.page-admin #panel-planning .pf-span-2{grid-column:span 8!important}
body.page-admin #panel-planning .pf-two>*{grid-column:span 6!important}
body.page-admin #panel-planning .pf-three>*{grid-column:span 4!important}
body.page-admin #panel-planning .pf-sales-main>section:not(.pf-span-2),
body.page-admin #panel-planning .pf-budget-main>section:not(.pf-span-2),
body.page-admin #panel-planning .pf-cash-main>section:not(.pf-span-2),
body.page-admin #panel-planning .pf-payroll-main>section:not(.pf-span-2),
body.page-admin #panel-planning .pf-goals-main>section:not(.pf-span-2),
body.page-admin #panel-planning .pf-scenario-main>section:not(.pf-span-2){grid-column:span 4!important}

body.page-admin #panel-planning .pf-dashboard-card{
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  border-radius:11px!important;
  overflow:hidden!important;
  box-shadow:0 3px 13px rgba(15,23,42,.045)!important;
}
body.page-admin #panel-planning .pf-card-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  min-height:45px!important;padding:11px 13px 8px!important;border-bottom:0!important
}
body.page-admin #panel-planning .pf-card-head h3{margin:0!important;font-size:13px!important;line-height:1.2;letter-spacing:-.01em}
body.page-admin #panel-planning .pf-card-inline-note{font-size:9px!important;font-weight:500!important;color:var(--ink-faint)!important}
body.page-admin #panel-planning .pf-card-head-metric{font-size:10px!important;color:var(--ink-soft);font-weight:800}
body.page-admin #panel-planning .pf-card-body{padding:0 13px 12px!important;min-width:0}
body.page-admin #panel-planning .pf-card-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:4px;padding-top:8px;border-top:1px solid var(--border);font-size:9px!important;color:var(--ink-faint)}
body.page-admin #panel-planning .pf-head-actions{display:flex;align-items:center;gap:5px}
body.page-admin #panel-planning .pf-mini-select{min-height:27px!important;height:27px!important;padding:4px 24px 4px 8px!important;border-radius:6px!important;font-size:9px!important}
body.page-admin #panel-planning .pf-collapse-toggle{
  width:22px!important;height:22px!important;min-width:22px!important;min-height:22px!important;
  padding:0!important;margin:0!important;border:0!important;background:transparent!important;
  color:var(--ink-faint)!important;box-shadow:none!important;border-radius:5px!important;
  font-size:11px!important;font-weight:800!important;opacity:.45;line-height:1!important
}
body.page-admin #panel-planning .pf-dashboard-card:hover .pf-collapse-toggle{opacity:.82;background:var(--surface-2)!important}
body.page-admin #panel-planning .pf-text-link{border:0!important;background:transparent!important;color:var(--pf-blue)!important;padding:2px 0!important;min-height:0!important;font-size:9px!important;font-weight:800!important;box-shadow:none!important}
body.page-admin #panel-planning .pf-inline-link{margin-left:auto}

body.page-admin #panel-planning .pf-chart{width:100%;min-height:158px!important;overflow:hidden!important}
body.page-admin #panel-planning .pf-chart-hero{min-height:224px!important;height:224px!important}
body.page-admin #panel-planning .pf-chart-medium{min-height:185px!important;height:185px!important}
body.page-admin #panel-planning .pf-chart-small{min-height:145px!important;height:145px!important}
body.page-admin #panel-planning .pf-chart svg{display:block;width:100%!important;height:100%!important;max-height:100%!important;overflow:visible}
body.page-admin #panel-planning .pf-chart text{font-size:9px!important;fill:var(--ink-faint)}
body.page-admin #panel-planning .pf-grid-line{stroke:color-mix(in srgb,var(--border) 90%,transparent);stroke-width:1}
body.page-admin #panel-planning .pf-forecast-band{fill:color-mix(in srgb,var(--pf-green) 20%,transparent);opacity:.42}
body.page-admin #panel-planning .pf-actual-line{fill:none;stroke:var(--pf-blue);stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
body.page-admin #panel-planning .pf-forecast-line{fill:none;stroke:var(--pf-green);stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
body.page-admin #panel-planning .pf-bound-line{fill:none;stroke:var(--pf-slate);stroke-width:1.25;stroke-dasharray:5 4;opacity:.85}
body.page-admin #panel-planning .pf-bound-high{stroke:var(--pf-green)}
body.page-admin #panel-planning .pf-series-0{fill:var(--pf-blue)!important;stroke:var(--pf-blue)!important}
body.page-admin #panel-planning .pf-series-1{fill:var(--pf-green)!important;stroke:var(--pf-green)!important}
body.page-admin #panel-planning .pf-series-2{fill:var(--pf-amber)!important;stroke:var(--pf-amber)!important}
body.page-admin #panel-planning .pf-series-3{fill:var(--pf-purple)!important;stroke:var(--pf-purple)!important}
body.page-admin #panel-planning .pf-cash-in{fill:var(--pf-green)!important}
body.page-admin #panel-planning .pf-cash-out{fill:var(--pf-red)!important}
body.page-admin #panel-planning .pf-cash-line{fill:none!important;stroke:var(--pf-blue)!important;stroke-width:2.2!important}

body.page-admin #panel-planning .pf-alert-list .planning-recommendation{
  display:grid;grid-template-columns:8px 1fr;gap:9px;padding:9px 0!important;margin:0!important;border:0!important;border-bottom:1px solid var(--border)!important;border-radius:0!important;background:transparent!important;box-shadow:none!important
}
body.page-admin #panel-planning .pf-alert-list .planning-recommendation:last-child{border-bottom:0!important}
body.page-admin #panel-planning .pf-alert-list .planning-rec-marker{width:7px;height:7px;margin-top:4px;border-radius:2px}
body.page-admin #panel-planning .pf-alert-list strong{font-size:10px!important;line-height:1.25}
body.page-admin #panel-planning .pf-alert-list .planning-recommendation>div>div{font-size:9px!important;line-height:1.35;color:var(--ink-soft)}
body.page-admin #panel-planning .pf-alert-list .sub{font-size:9px!important;color:var(--pf-blue)!important;margin-top:2px}

body.page-admin #panel-planning .pf-progress-list{gap:8px!important}
body.page-admin #panel-planning .pf-progress-row{grid-template-columns:minmax(90px,1.1fr) minmax(110px,2fr) auto!important;gap:8px!important;align-items:center!important;font-size:9px!important}
body.page-admin #panel-planning .pf-progress-track{height:8px!important;border-radius:999px!important;background:var(--surface-2)!important}
body.page-admin #panel-planning .pf-progress-fill{height:8px!important;border-radius:999px!important}
body.page-admin #panel-planning .pf-mini-table{font-size:9px!important}
body.page-admin #panel-planning .pf-mini-table th{font-size:8px!important;padding:6px 5px!important}
body.page-admin #panel-planning .pf-mini-table td{padding:7px 5px!important}
body.page-admin #panel-planning .pf-overview-goal{display:grid;grid-template-columns:minmax(105px,1fr) minmax(90px,1.8fr) auto;gap:8px;align-items:center;padding:5px 0;font-size:9px}
body.page-admin #panel-planning .pf-overview-goal small{font-size:8px;color:var(--ink-faint);white-space:nowrap}

/* Employee self-service desktop correction: roomy two-column portal, not tiny stacked cards. */
body.page-myattendance .page.employee-portal-page{
  width:min(1180px,calc(100% - 40px))!important;
  max-width:1180px!important;
  margin:0 auto!important;
  padding:18px 0 42px!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:14px!important;
}
body.page-myattendance .employee-portal-hero,
body.page-myattendance .employee-portal-tabs,
body.page-myattendance .employee-profile-card,
body.page-myattendance .attendance-filter-card,
body.page-myattendance .employee-attendance-records-card{grid-column:1/-1!important}
body.page-myattendance .employee-schedule-card,
body.page-myattendance .employee-payroll-card{grid-column:span 1!important;min-width:0}
body.page-myattendance .employee-portal-page>.card{margin:0!important;min-width:0}
body.page-myattendance .employee-profile-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}

@media(max-width:1180px){
  body.page-admin #panel-planning .pf-head-controls{width:auto!important;flex:1 1 650px!important;flex-wrap:wrap!important}
  body.page-admin #panel-planning .pf-head-controls label{min-width:125px!important;max-width:none!important}
  body.page-admin #panel-planning .pf-kpi-grid,
  body.page-admin #panel-planning .pf-kpi-grid-5{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  body.page-admin #panel-planning .pf-col-3,
  body.page-admin #panel-planning .pf-col-4{grid-column:span 6!important}
  body.page-admin #panel-planning .pf-col-5,
  body.page-admin #panel-planning .pf-col-7,
  body.page-admin #panel-planning .pf-col-8,
  body.page-admin #panel-planning .pf-col-9,
  body.page-admin #panel-planning .pf-span-2{grid-column:span 12!important}
}
@media(max-width:900px){
  body.page-admin.planning-mode .app{padding:12px 12px 64px!important}
  body.page-admin #panel-planning .pf-page-head{align-items:flex-start!important;flex-direction:column!important}
  body.page-admin #panel-planning .pf-head-controls{width:100%!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.page-admin #panel-planning .pf-head-controls label{max-width:none!important;min-width:0!important}
  body.page-admin #panel-planning .pf-settings-btn{width:100%}
  body.page-admin #panel-planning .pf-subtabs{display:flex!important;overflow-x:auto;white-space:nowrap;padding-bottom:3px}
  body.page-admin #panel-planning .pf-dashboard-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.page-admin #panel-planning [class*="pf-col-"],
  body.page-admin #panel-planning .pf-span-2,
  body.page-admin #panel-planning .pf-two>*,
  body.page-admin #panel-planning .pf-three>*,
  body.page-admin #panel-planning .pf-sales-main>section,
  body.page-admin #panel-planning .pf-budget-main>section,
  body.page-admin #panel-planning .pf-cash-main>section,
  body.page-admin #panel-planning .pf-payroll-main>section,
  body.page-admin #panel-planning .pf-goals-main>section,
  body.page-admin #panel-planning .pf-scenario-main>section{grid-column:span 2!important}
  body.page-myattendance .page.employee-portal-page{width:calc(100% - 24px)!important;grid-template-columns:1fr!important}
  body.page-myattendance .employee-schedule-card,body.page-myattendance .employee-payroll-card{grid-column:1/-1!important}
  body.page-myattendance .employee-profile-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:560px){
  body.page-admin #panel-planning .pf-head-controls{grid-template-columns:1fr!important}
  body.page-admin #panel-planning .pf-status-row{align-items:flex-start!important;flex-direction:column!important}
  body.page-admin #panel-planning .pf-kpi-grid,
  body.page-admin #panel-planning .pf-kpi-grid-5{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.page-admin #panel-planning .pf-dashboard-grid{grid-template-columns:1fr!important}
  body.page-admin #panel-planning [class*="pf-col-"],body.page-admin #panel-planning .pf-span-2{grid-column:1!important}
  body.page-admin #panel-planning .pf-chart-hero{height:205px!important;min-height:205px!important}
  body.page-myattendance .employee-profile-grid{grid-template-columns:1fr!important}
}
/* v1.4.24 chart detail aliases */
body.page-admin #panel-planning .pf-svg-grid{stroke:color-mix(in srgb,var(--border) 90%,transparent)!important;stroke-width:1!important}
body.page-admin #panel-planning .pf-svg-axis{fill:var(--ink-faint)!important;font-size:9px!important}
body.page-admin #panel-planning .pf-svg-axis-line{stroke:var(--border)!important;stroke-width:1!important}
body.page-admin #panel-planning .pf-bound-conservative{stroke:var(--pf-slate)!important}
body.page-admin #panel-planning .pf-bound-optimistic{stroke:var(--pf-green)!important}
body.page-admin #panel-planning .pf-actual-dot{fill:var(--pf-blue)!important}
body.page-admin #panel-planning .pf-forecast-dot{fill:var(--pf-green)!important}
body.page-admin #panel-planning .pf-spark-green{fill:none;stroke:var(--pf-green);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
body.page-admin #panel-planning .pf-spark-red{fill:none;stroke:var(--pf-red);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
body.page-admin #panel-planning .pf-spark-blue{fill:none;stroke:var(--pf-blue);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
body.page-admin #panel-planning .pf-legend-actual{background:var(--pf-blue)!important}
body.page-admin #panel-planning .pf-legend-forecast{background:var(--pf-green)!important}
body.page-admin #panel-planning .pf-legend-bound{background:var(--pf-slate)!important}
body.page-admin #panel-planning .pf-legend-optimistic{background:var(--pf-green)!important;opacity:.65}
body.page-admin #panel-planning .pf-cash-in-swatch{background:var(--pf-green)!important}
body.page-admin #panel-planning .pf-cash-out-swatch{background:var(--pf-red)!important}
body.page-admin #panel-planning .pf-cash-line-swatch{background:var(--pf-blue)!important}
body.page-admin #panel-planning .pf-cash-dot{fill:var(--pf-blue)!important}

/* =========================================================
   Beta v1.4.25 — collapsed sidebar restore control hardening
   Keep Expand reachable even when a long navigation menu is collapsed.
   ========================================================= */
@media (min-width:881px){
  body.sidebar-collapsed .app-sidebar{
    width:58px!important;
    min-width:58px!important;
    padding:0 7px!important;
    overflow:visible!important;
  }

  /* visibility:hidden kept the full navigation height and could push the
     footer beneath the viewport. Remove collapsed content from layout. */
  body.sidebar-collapsed .app-sidebar > .sidebar-logo,
  body.sidebar-collapsed .app-sidebar > .sidebar-nav{
    display:none!important;
  }

  /* The footer becomes a viewport-anchored restore rail. This guarantees
     that the same control is reachable without scrolling. */
  body.sidebar-collapsed .app-sidebar > .sidebar-footer{
    position:fixed!important;
    left:8px!important;
    bottom:14px!important;
    z-index:220!important;
    width:42px!important;
    min-width:42px!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
    pointer-events:auto!important;
    align-items:center!important;
    justify-content:center!important;
    overflow:visible!important;
  }

  body.sidebar-collapsed .app-sidebar > .sidebar-footer #sidebarCollapseBottom{
    position:relative!important;
    inset:auto!important;
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
    pointer-events:auto!important;
    width:42px!important;
    min-width:42px!important;
    height:42px!important;
    min-height:42px!important;
    margin:0!important;
    padding:0!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:10px!important;
    background:var(--gold-deep,#0f9b8e)!important;
    border:1px solid rgba(255,255,255,.16)!important;
    color:var(--on-accent,#fff)!important;
    box-shadow:0 6px 18px rgba(15,23,42,.24)!important;
  }

  body.sidebar-collapsed .app-sidebar > .sidebar-footer #sidebarCollapseBottom:hover,
  body.sidebar-collapsed .app-sidebar > .sidebar-footer #sidebarCollapseBottom:focus-visible{
    filter:brightness(1.08);
    outline:2px solid rgba(255,255,255,.8)!important;
    outline-offset:2px!important;
  }

  body.sidebar-collapsed .app-sidebar > .sidebar-footer #sidebarCollapseBottom .sidebar-collapse-icon{
    display:grid!important;
    visibility:visible!important;
    opacity:1!important;
    width:28px!important;
    height:28px!important;
    transform:rotate(180deg)!important;
  }

  body.sidebar-collapsed .app-sidebar > .sidebar-footer #sidebarCollapseBottom .sidebar-collapse-text,
  body.sidebar-collapsed .app-sidebar > .sidebar-footer #sidebarLogout{
    display:none!important;
  }
}

/* =========================================================
   Beta v1.4.26 — viewport-pinned sidebar restore control
   The restore button is a BODY child, independent of sidebar/footer height.
   ========================================================= */
.sidebar-expand-viewport{
  display:none;
}
@media (min-width:881px){
  body.sidebar-collapsed #sidebarCollapseBottom{
    display:none!important;
  }
  body.sidebar-collapsed .sidebar-expand-viewport{
    position:fixed!important;
    left:8px!important;
    bottom:calc(12px + env(safe-area-inset-bottom, 0px))!important;
    z-index:10000!important;
    width:42px!important;
    min-width:42px!important;
    height:42px!important;
    min-height:42px!important;
    margin:0!important;
    padding:0!important;
    display:grid!important;
    place-items:center!important;
    border-radius:10px!important;
    border:1px solid rgba(255,255,255,.18)!important;
    background:var(--gold-deep,#0f9b8e)!important;
    color:var(--on-accent,#fff)!important;
    box-shadow:0 8px 24px rgba(15,23,42,.30)!important;
    cursor:pointer!important;
    visibility:visible!important;
    opacity:1!important;
    pointer-events:auto!important;
    transform:none!important;
  }
  body.sidebar-collapsed .sidebar-expand-viewport[hidden]{
    display:none!important;
  }
  body.sidebar-collapsed .sidebar-expand-viewport:hover,
  body.sidebar-collapsed .sidebar-expand-viewport:focus-visible{
    filter:brightness(1.08);
    outline:2px solid rgba(255,255,255,.85)!important;
    outline-offset:2px!important;
  }
  .sidebar-expand-viewport-icon{
    width:28px;
    height:28px;
    display:grid;
    place-items:center;
  }
}
@media (max-width:880px){
  .sidebar-expand-viewport{display:none!important}
}

/* =========================================================
   Beta v1.4.26 — compact Employee Self-Service workspace
   Real tabs + filtered/paged long lists keep My Account short.
   ========================================================= */
body.page-myattendance .employee-portal-tabs{
  grid-column:1/-1!important;
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:8px!important;
  padding:8px!important;
  border:1px solid var(--border)!important;
  border-radius:12px!important;
  background:var(--surface)!important;
  box-shadow:0 3px 12px rgba(15,23,42,.05)!important;
}
body.page-myattendance .employee-portal-tabs button{
  min-height:40px!important;
  border:1px solid var(--border)!important;
  border-radius:9px!important;
  background:var(--surface-2)!important;
  color:var(--ink-soft)!important;
  font-weight:800!important;
  cursor:pointer!important;
  box-shadow:none!important;
}
body.page-myattendance .employee-portal-tabs button.active{
  background:var(--gold-deep,#0f9b8e)!important;
  border-color:var(--gold-deep,#0f9b8e)!important;
  color:var(--on-accent,#fff)!important;
}
body.page-myattendance .employee-portal-section[hidden]{display:none!important}
body.page-myattendance .employee-portal-section.active{grid-column:1/-1!important}
body.page-myattendance .employee-table-tools{
  display:flex;align-items:end;justify-content:flex-end;gap:10px;flex-wrap:wrap;
  padding:10px 0 12px;border-bottom:1px solid var(--border);
}
body.page-myattendance .employee-table-tools label,
body.page-myattendance .employee-payroll-filters label{
  display:flex;flex-direction:column;gap:4px;font-size:10px;font-weight:800;color:var(--ink-soft);margin:0;
}
body.page-myattendance .employee-table-tools select,
body.page-myattendance .employee-payroll-filters select{
  min-height:34px;height:34px;padding:5px 28px 5px 9px;border-radius:8px;font-size:11px;
}
body.page-myattendance .employee-pager{display:flex;align-items:center;justify-content:center;gap:8px;margin-left:auto}
body.page-myattendance .employee-pager button{min-height:34px!important;height:34px!important;padding:0 10px!important;border-radius:8px!important}
body.page-myattendance .employee-pager button:disabled{opacity:.4;cursor:not-allowed}
body.page-myattendance .employee-pager span{min-width:86px;text-align:center;font-size:10px;font-weight:800;color:var(--ink-soft)}
body.page-myattendance .employee-table-footer{padding-top:10px;margin-top:8px;border-top:1px solid var(--border)}
body.page-myattendance .employee-payroll-filters{display:flex;align-items:end;justify-content:flex-end;gap:8px;flex-wrap:wrap}
body.page-myattendance .employee-schedule-list{max-height:560px;overflow:auto;padding-right:3px}
body.page-myattendance .employee-attendance-records-card{margin-top:12px!important}
body.page-myattendance [data-portal-section="attendance"].attendance-filter-card{margin-bottom:0!important}
@media(max-width:700px){
  body.page-myattendance .employee-portal-tabs{display:flex!important;overflow-x:auto!important;scrollbar-width:none}
  body.page-myattendance .employee-portal-tabs button{flex:0 0 auto;min-width:118px}
  body.page-myattendance .employee-table-tools{align-items:stretch;justify-content:stretch}
  body.page-myattendance .employee-table-tools label{flex:1 1 120px}
  body.page-myattendance .employee-pager{width:100%;margin-left:0;justify-content:space-between}
  body.page-myattendance .employee-payroll-head{align-items:flex-start;flex-direction:column}
  body.page-myattendance .employee-payroll-filters{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:480px){
  body.page-myattendance .employee-payroll-filters{grid-template-columns:1fr 1fr}
}

/* =========================================================
   Beta v1.4.26 — Plan & Forecast final mockup-fidelity polish
   ========================================================= */
body.page-admin.planning-mode .app{max-width:1600px!important;padding-left:18px!important;padding-right:18px!important}
body.page-admin #panel-planning .pf-chart.is-empty-chart{
  height:96px!important;min-height:96px!important;
}
body.page-admin #panel-planning .pf-chart.is-empty-chart .pf-chart-empty{
  height:96px!important;min-height:96px!important;padding:14px!important;border-radius:8px!important;font-size:10px!important;
}
body.page-admin #panel-planning .pf-dashboard-card:has(.pf-chart.is-empty-chart) .pf-card-body{padding-bottom:10px!important}
body.page-admin #panel-planning .pf-dashboard-card:has(.pf-chart.is-empty-chart){align-self:start!important}
body.page-admin #panel-planning .pf-page-head{position:relative!important}
body.page-admin #panel-planning .pf-status-left{max-width:68%;line-height:1.35}
body.page-admin #panel-planning .pf-status-left .pf-dot{opacity:.35}
body.page-admin #panel-planning .pf-chart-legend{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:8.5px!important;color:var(--ink-soft);margin:0 0 5px!important}
body.page-admin #panel-planning .pf-legend-swatch{display:inline-block;width:12px;height:3px;border-radius:99px;margin-right:4px;vertical-align:middle}
body.page-admin #panel-planning .pf-forecast-legend .pf-legend-bound,
body.page-admin #panel-planning .pf-forecast-legend .pf-legend-optimistic{height:0;border-top:1px dashed currentColor;background:transparent!important}
body.page-admin #panel-planning .pf-waterfall-connector{stroke:var(--ink-faint);stroke-width:1;stroke-dasharray:3 3;opacity:.7}
body.page-admin #panel-planning .pf-waterfall-opening,body.page-admin #panel-planning .pf-waterfall-subtotal{fill:var(--pf-slate)!important}
body.page-admin #panel-planning .pf-waterfall-inflow,body.page-admin #panel-planning .pf-waterfall-result{fill:var(--pf-green)!important}
body.page-admin #panel-planning .pf-waterfall-outflow{fill:var(--pf-red)!important}
body.page-admin #panel-planning .pf-waterfall-reserve{fill:var(--pf-purple)!important}
body.page-admin #panel-planning .pf-svg-value{fill:var(--ink)!important;font-size:8.5px!important;font-weight:800!important}
body.page-admin #panel-planning .pf-health-callout{margin-top:8px;padding:8px 9px;border:1px solid var(--border);border-radius:8px;font-size:9px;line-height:1.35}
body.page-admin #panel-planning .pf-health-callout.good{border-color:color-mix(in srgb,var(--pf-green) 38%,var(--border));background:color-mix(in srgb,var(--pf-green) 7%,var(--surface))}
body.page-admin #panel-planning .pf-health-callout.warn{border-color:color-mix(in srgb,var(--pf-amber) 45%,var(--border));background:color-mix(in srgb,var(--pf-amber) 8%,var(--surface))}
body.page-admin #panel-planning .pf-health-callout.danger{border-color:color-mix(in srgb,var(--pf-red) 45%,var(--border));background:color-mix(in srgb,var(--pf-red) 7%,var(--surface))}
@media(min-width:901px){
  body.page-admin #panel-planning .pf-head-controls label#pfQuarterWrap[hidden],
  body.page-admin #panel-planning .pf-head-controls label#pfQuarterYearWrap[hidden],
  body.page-admin #panel-planning .pf-head-controls label#pfMonthWrap[hidden]{display:none!important}
}

/* =========================================================
   Beta v1.4.27 — planning filters, collapsed home, role dashboards,
   drawer typography and Sales Basket usability polish
   ========================================================= */

/* Plan & Forecast: one consistent filter toolbar on every planning page. */
@media (min-width:1181px){
  body.page-admin #panel-planning .pf-page-head{
    display:grid!important;
    grid-template-columns:minmax(270px,.8fr) minmax(720px,1.65fr)!important;
    align-items:end!important;
    gap:18px!important;
    margin-bottom:10px!important;
  }
  body.page-admin #panel-planning .pf-head-controls{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(132px,1fr))!important;
    gap:8px 10px!important;
    align-items:end!important;
    justify-content:stretch!important;
    padding:10px!important;
    border:1px solid var(--border)!important;
    border-radius:12px!important;
    background:color-mix(in srgb,var(--surface) 94%,var(--pf-teal) 6%)!important;
    box-shadow:0 2px 10px rgba(15,23,42,.035)!important;
  }
  body.page-admin #panel-planning .pf-head-controls label{
    min-width:0!important;max-width:none!important;white-space:nowrap!important;
    font-size:9px!important;line-height:1.1!important;
  }
  body.page-admin #panel-planning .pf-head-controls input,
  body.page-admin #panel-planning .pf-head-controls select{
    width:100%!important;min-width:0!important;min-height:36px!important;height:36px!important;
    margin-top:4px!important;padding:6px 28px 6px 9px!important;font-size:11px!important;
  }
  body.page-admin #panel-planning .pf-settings-btn{
    width:100%!important;min-height:36px!important;height:36px!important;margin:0!important;
    align-self:end!important;
  }
}
@media (min-width:901px) and (max-width:1180px){
  body.page-admin #panel-planning .pf-head-controls{
    display:grid!important;grid-template-columns:repeat(3,minmax(135px,1fr))!important;
    gap:8px!important;width:100%!important;padding:10px!important;border:1px solid var(--border)!important;
    border-radius:12px!important;background:var(--surface)!important;
  }
  body.page-admin #panel-planning .pf-head-controls label{white-space:nowrap!important;min-width:0!important}
}
body.page-admin #panel-planning .pf-page-title h2{line-height:1.05!important}
body.page-admin #panel-planning .pf-page-title #pfPageSubtitle{max-width:460px;line-height:1.35}

/* Collapsed desktop rail always exposes a brand/home affordance at the top. */
.sidebar-collapsed-home{display:none}
@media(min-width:881px){
  body.sidebar-collapsed .app-sidebar > .sidebar-collapsed-home{
    display:grid!important;place-items:center!important;position:fixed!important;
    left:8px!important;top:14px!important;width:42px!important;height:42px!important;
    padding:4px!important;border-radius:10px!important;background:#fff!important;
    border:1px solid rgba(148,163,184,.22)!important;box-shadow:0 4px 14px rgba(15,23,42,.18)!important;
    z-index:10000!important;text-decoration:none!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important;
  }
  body.sidebar-collapsed .app-sidebar > .sidebar-collapsed-home img{width:32px!important;height:32px!important;object-fit:contain!important;display:block!important}
  body.sidebar-collapsed .app-sidebar > .sidebar-collapsed-home:hover,
  body.sidebar-collapsed .app-sidebar > .sidebar-collapsed-home:focus-visible{transform:translateY(-1px);outline:2px solid var(--gold-deep,#0f9b8e);outline-offset:2px}
}

/* Role dashboards: stronger visual hierarchy and color without changing permissions. */
body.page-admin #panel-dashboard .dashboard-summary-card{border-top:3px solid var(--gold-deep);overflow:hidden}
body.page-admin #panel-dashboard .dashboard-kpi-grid>.card{position:relative;overflow:hidden;border:1px solid var(--border);box-shadow:0 4px 14px rgba(15,23,42,.045)}
body.page-admin #panel-dashboard .dashboard-kpi-grid>.card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--dash-accent,var(--gold-deep));opacity:.9}
body.page-admin #panel-dashboard .dashboard-kpi-grid>.card:nth-child(1){--dash-accent:#0f9b8e;background:color-mix(in srgb,#0f9b8e 5%,var(--surface))}
body.page-admin #panel-dashboard .dashboard-kpi-grid>.card:nth-child(2){--dash-accent:#2563eb;background:color-mix(in srgb,#2563eb 5%,var(--surface))}
body.page-admin #panel-dashboard .dashboard-kpi-grid>.card:nth-child(3){--dash-accent:#16a34a;background:color-mix(in srgb,#16a34a 5%,var(--surface))}
body.page-admin #panel-dashboard .dashboard-kpi-grid>.card:nth-child(4){--dash-accent:#8b5cf6;background:color-mix(in srgb,#8b5cf6 5%,var(--surface))}
body.page-admin #panel-dashboard .dashboard-kpi-grid>.card:nth-child(5){--dash-accent:#f59e0b;background:color-mix(in srgb,#f59e0b 5%,var(--surface))}
body.page-admin #panel-dashboard .dashboard-kpi-grid>.card:nth-child(6){--dash-accent:#f97316;background:color-mix(in srgb,#f97316 5%,var(--surface))}
body.page-admin #panel-dashboard .dashboard-kpi-grid>.card:nth-child(7){--dash-accent:#dc2626;background:color-mix(in srgb,#dc2626 4%,var(--surface))}
body.page-admin #panel-dashboard .dashboard-kpi-grid>.card:nth-child(8){--dash-accent:#64748b;background:color-mix(in srgb,#64748b 4%,var(--surface))}
body.page-admin #panel-dashboard .u-admin-019{border-radius:10px;background:linear-gradient(180deg,color-mix(in srgb,var(--surface-2) 72%,transparent),transparent);padding:8px}

.role-personal-dashboard{padding:0!important;overflow:hidden;border-radius:16px!important}
/* Retail Associate only: footTrafficCard/fastSlowGrid get moved (as live nodes, not rebuilt) into
   this card by loadMyPerformance(), between the visual grid and "Inventory attention" — give them
   the same outer margin as .role-detail-card so they don't sit flush against the (padding:0) edges. */
.role-personal-dashboard > #footTrafficCard,
.role-personal-dashboard > #fastSlowGrid{margin:0 18px 12px}
.role-dashboard-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;background:linear-gradient(135deg,color-mix(in srgb,var(--gold-deep) 12%,var(--surface)),var(--surface));border-bottom:1px solid var(--border)}
.role-dashboard-heading h3{font-size:22px!important;margin:2px 0 4px!important}
.role-dashboard-account-link{font-size:12px;font-weight:800;color:var(--gold-deep);text-decoration:none;white-space:nowrap}
.role-kpi-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:16px 18px 4px}
.role-kpi{position:relative;padding:15px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2);overflow:hidden}
.role-kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--role-color,#0f9b8e)}
.role-kpi-sales{--role-color:#0f9b8e}.role-kpi-week{--role-color:#2563eb}.role-kpi-hours{--role-color:#8b5cf6}
.role-kpi span{display:block;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-faint)}
.role-kpi strong{display:block;margin:5px 0 2px;font-size:24px;line-height:1.05}.role-kpi small{color:var(--ink-soft);font-size:10px}
.role-visual-grid{display:grid;grid-template-columns:minmax(230px,.7fr) minmax(0,1.3fr);gap:12px;padding:12px 18px 18px}
.role-visual-card,.role-detail-card{border:1px solid var(--border);border-radius:12px;background:var(--surface);padding:14px;min-width:0}
.role-visual-title{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:12px}.role-visual-title h4{margin:0;font-size:13px}.role-visual-title span{font-size:9px;color:var(--ink-faint);text-align:right}
.role-progress-ring{--role-progress:0;position:relative;width:150px;height:150px;margin:8px auto;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#0f9b8e calc(var(--role-progress)*1%),#e7eef5 0)}
.role-progress-ring::after{content:"";position:absolute;inset:17px;background:var(--surface);border-radius:50%;box-shadow:inset 0 0 0 1px var(--border)}
.role-progress-ring>div{position:relative;z-index:1;text-align:center}.role-progress-ring strong{display:block;font-size:27px}.role-progress-ring span{font-size:10px;color:var(--ink-soft)}
.role-metric-bars{display:grid;gap:12px}.role-metric-bar-label{display:flex;justify-content:space-between;gap:12px;font-size:10px}.role-metric-bar-label span{color:var(--ink-soft)}.role-metric-bar-label strong{font-variant-numeric:tabular-nums}
.role-metric-track{height:9px;border-radius:999px;background:var(--surface-2);overflow:hidden;margin-top:4px}.role-metric-track i{display:block;height:100%;border-radius:999px;background:#0f9b8e}.role-metric-bar:nth-child(2) .role-metric-track i{background:#2563eb}.role-metric-bar:nth-child(3) .role-metric-track i{background:#8b5cf6}.role-metric-bar:nth-child(4) .role-metric-track i{background:#f59e0b}
.role-detail-card{margin:0 18px 12px;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:14px}.role-detail-card h4{margin:0 0 2px;font-size:13px}.role-detail-card>strong{font-size:24px;color:var(--gold-deep)}.role-detail-card>a{font-size:10px;font-weight:800;color:var(--gold-deep);text-decoration:none}.role-detail-wide{display:block}.role-detail-wide .role-visual-title{margin-bottom:10px}
@media(max-width:760px){.role-kpi-grid{grid-template-columns:1fr}.role-visual-grid{grid-template-columns:1fr}.role-detail-card{grid-template-columns:1fr auto}.role-detail-card>a{grid-column:1/-1}}

/* Cash Drawer: secondary labels should never compete with money values. */
body.page-cashdrawer .shift-result .box .drawer-kpi-note{font-size:10px!important;line-height:1.25!important;margin-top:2px!important;color:var(--ink-faint)!important;font-weight:500!important}
body.page-cashdrawer .drawer-beginning-summary{font-size:12px!important}
body.page-cashdrawer .drawer-beginning-summary b{font-size:14px!important}
body.page-cashdrawer .drawer-beginning-summary small{font-size:9px!important;color:var(--ink-faint)!important}
body.page-cashdrawer .drawer-beginning-summary strong{font-size:12px!important}
body.page-cashdrawer .drawer-balance-note{margin-top:6px!important;font-size:10px!important;line-height:1.3!important;color:var(--ink-faint)!important;max-width:760px!important}

/* Sales Basket: Total Discount is a primary checkout control; BIR request is optional detail. */
body.page-basket .total-discount-row{margin:10px 0 4px!important;padding:9px 11px!important;border:1px solid var(--border)!important;border-radius:9px!important;background:var(--surface-2)!important}
body.page-basket .total-discount-row label{font-size:12px!important;font-weight:800!important;color:var(--ink)!important}
body.page-basket .total-discount-row input{max-width:180px!important;margin-left:auto!important;background:var(--surface)!important}
body.page-basket .more-options-panel .invoice-request-compact{margin:8px 0 10px!important;padding:10px 12px!important;border-radius:9px!important}
body.page-basket .more-options-panel #manualInvoiceRow{margin:0 0 10px!important;padding:0 2px!important}
body.page-basket .cart-line-disc label{min-width:114px!important;font-size:11px!important;font-weight:700!important;color:var(--ink-soft)!important}
body.page-basket .receipt-thanks{margin-top:8px!important;font-weight:800!important}
body.page-basket .internal-summary-footer{margin-top:8px!important;padding-top:8px!important;border-top:1px dashed var(--border)!important}
body.page-basket .internal-summary-footer .internal-summary-note{font-size:10px!important;line-height:1.35!important;margin-top:3px!important}
body.page-basket .internal-manual-invoice{margin-top:4px!important;font-size:11px!important}
body.page-admin #panel-dashboard #attendanceStats>.card{position:relative;overflow:hidden;border-radius:12px}
body.page-admin #panel-dashboard #attendanceStats>.card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:#0f9b8e}
body.page-admin #panel-dashboard #attendanceStats>.card:nth-child(2)::before{background:#2563eb}
body.page-admin #panel-dashboard #attendanceStats>.card:nth-child(3)::before{background:#f59e0b}
body.page-admin #panel-dashboard #attendanceStats>.card:nth-child(4)::before{background:#dc2626}
.dashboard-payment-bars{display:grid;gap:10px;margin-top:8px}.dashboard-payment-bar>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11px}.dashboard-payment-bar span{color:var(--ink-soft)}.dashboard-payment-track{height:9px;border-radius:999px;background:var(--surface-2);overflow:hidden;margin-top:4px}.dashboard-payment-track i{display:block;height:100%;border-radius:999px;background:#0f9b8e}.dashboard-payment-bar:nth-child(2) .dashboard-payment-track i{background:#2563eb}.dashboard-payment-bar:nth-child(3) .dashboard-payment-track i{background:#8b5cf6}.dashboard-payment-bar:nth-child(4) .dashboard-payment-track i{background:#f59e0b}

/* Beta v1.4.28 — collapsed sidebar remains a functional module rail. */
.sidebar-collapsed-modules{display:none}
@media (min-width:881px){
  body.sidebar-collapsed .sidebar-collapsed-modules{
    position:fixed;
    z-index:48;
    left:7px;
    top:72px;
    bottom:68px;
    width:44px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:5px;
    padding:3px 0 6px;
    overflow-y:auto;
    overflow-x:hidden;
    scrollbar-width:none;
  }
  body.sidebar-collapsed .sidebar-collapsed-modules::-webkit-scrollbar{display:none}
  body.sidebar-collapsed .collapsed-module-link{
    width:40px;
    height:38px;
    flex:0 0 38px;
    display:grid;
    place-items:center;
    border-radius:9px;
    color:#91a2bc;
    text-decoration:none;
    transition:background .16s ease,color .16s ease,transform .16s ease;
  }
  body.sidebar-collapsed .collapsed-module-link svg{width:19px;height:19px;display:block}
  body.sidebar-collapsed .collapsed-module-link:hover,
  body.sidebar-collapsed .collapsed-module-link:focus-visible{
    color:#fff;
    background:rgba(20,184,166,.18);
    outline:none;
    transform:translateY(-1px);
  }
  body.sidebar-collapsed .collapsed-module-link.active{
    color:#fff;
    background:var(--accent,#0f9b8e);
    box-shadow:0 5px 16px rgba(15,155,142,.18);
  }
}

/* Beta v1.4.28 — report browsers, compact payroll workflow, self-service editing, Time Clock policy */
.report-browser-head,.report-browser-toolbar,.journal-toolbar,.trial-toolbar{
  display:flex;align-items:end;justify-content:space-between;gap:12px;flex-wrap:wrap
}
.journal-toolbar,.trial-toolbar{padding:12px 0 4px}
.journal-toolbar label,.trial-toolbar label,.inline-filter-label{display:grid;gap:5px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--muted,#8191ad)}
.journal-toolbar input,.journal-toolbar select,.trial-toolbar input,.trial-toolbar select{min-height:38px}
.journal-summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:10px 0 12px}
.report-mini-stat{border:1px solid var(--border,#dbe3ee);background:var(--panel-soft,#f8fafc);border-radius:10px;padding:10px 12px;display:grid;gap:3px}
.report-mini-stat span{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted,#8191ad);font-weight:800}
.report-mini-stat strong{font-size:18px;color:var(--ink,#0f172a)}
.journal-summary-table td,.journal-summary-table th{vertical-align:top}
.journal-detail-row>td{padding:0!important;background:var(--panel-soft,#f8fafc)}
.journal-detail-shell{padding:12px 18px 16px;border-top:1px dashed var(--border,#dbe3ee)}
.journal-detail-shell table{margin:0;background:transparent}
.report-table-pager{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:10px 0 0}
.report-table-pager button{min-height:34px}
.trial-balance-card .table-scroll,.journal-browser-card .table-scroll{max-height:560px;overflow:auto;border:1px solid var(--border,#dbe3ee);border-radius:10px}
.trial-balance-card table thead,.journal-browser-card table thead{position:sticky;top:0;z-index:2;background:var(--card,#fff)}

.bulk-payroll-card{padding:18px!important}
.bulk-payroll-card>.card-head{margin-bottom:12px}
.bulk-payroll-snapshot{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-bottom:12px}
.bulk-payroll-snapshot>div{border:1px solid var(--border,#dbe3ee);background:var(--panel-soft,#f8fafc);border-radius:10px;padding:9px 11px;display:grid;gap:3px;min-width:0}
.bulk-payroll-snapshot span{font-size:9px;text-transform:uppercase;letter-spacing:.055em;color:var(--muted,#8191ad);font-weight:800}
.bulk-payroll-snapshot strong{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bulk-payroll-workflow{display:grid!important;grid-template-columns:minmax(0,1.65fr) minmax(220px,.72fr) minmax(220px,.72fr);gap:10px;align-items:stretch;margin:0!important}
.bulk-workflow-card{border:1px solid var(--border,#dbe3ee);background:var(--panel-soft,#f8fafc);border-radius:12px;padding:12px;min-width:0}
.bulk-workflow-card h4{margin:0 0 8px;font-size:13px}
.bulk-setup-card .bulk-payroll-controls{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px!important;align-items:end!important;margin:0!important}
.bulk-setup-card .bulk-payroll-controls>div{min-width:0!important;margin:0!important;width:auto!important}
.bulk-setup-card .bulk-payroll-controls label{font-size:10px;margin-bottom:4px}
.bulk-setup-card .bulk-payroll-controls input,.bulk-setup-card .bulk-payroll-controls select{width:100%;min-width:0}
.bulk-setup-card .bulk-note-field{grid-column:span 2}
.bulk-deduction-grid{display:grid!important;grid-template-columns:1fr 1fr;gap:7px!important;margin:0!important}
.bulk-deduction-grid label{display:flex!important;align-items:center;justify-content:space-between;gap:8px;border:1px solid var(--border,#dbe3ee);background:var(--card,#fff);border-radius:9px;padding:8px 9px;margin:0!important;min-height:39px;font-size:11px}
.bulk-deduction-grid input{width:auto!important;margin:0!important}
.bulk-payroll-summary{display:grid!important;grid-template-columns:1fr 1fr;gap:7px!important;margin:0!important}
.bulk-payroll-summary>div{border:1px solid var(--border,#dbe3ee);background:var(--card,#fff);border-radius:9px;padding:8px;display:grid;gap:2px;min-width:0}
.bulk-payroll-summary span{font-size:9px;text-transform:uppercase;font-weight:800;color:var(--muted,#8191ad)}
.bulk-payroll-summary strong{font-size:14px}
.bulk-employee-selection-card{margin-top:10px;border:1px solid var(--border,#dbe3ee);border-radius:12px;overflow:hidden;background:var(--card,#fff)}
.bulk-employee-selection-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-bottom:1px solid var(--border,#dbe3ee);flex-wrap:wrap}
.bulk-payroll-table-wrap{max-height:300px!important;overflow:auto!important;border:0!important}
.bulk-payroll-table-wrap thead{position:sticky;top:0;z-index:3;background:var(--card,#fff)}
.bulk-payroll-actionbar{position:sticky;bottom:10px;z-index:8;display:flex!important;align-items:center;justify-content:flex-end;gap:8px;padding:10px 12px;margin-top:10px;border:1px solid var(--border,#dbe3ee);border-radius:12px;background:color-mix(in srgb,var(--card,#fff) 94%,transparent);box-shadow:0 10px 28px rgba(15,23,42,.10);backdrop-filter:blur(8px)}
.bulk-payroll-actionbar .bulk-action-status{margin-right:auto}

.employee-profile-edit-btn{white-space:nowrap}
.employee-profile-edit{border-top:1px solid var(--border,#dbe3ee);margin-top:14px;padding-top:14px}
.employee-profile-edit-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.employee-profile-edit-grid label{display:grid;gap:5px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--muted,#8191ad)}
.employee-profile-edit-grid input,.employee-profile-edit-grid textarea{width:100%;font:inherit;text-transform:none;letter-spacing:normal}
.employee-profile-edit-grid .profile-address-field{grid-column:1/-1}
.employee-profile-edit-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:12px}
.employee-profile-edit-actions #profileEditStatus{margin-right:auto}

.timeclock-access-settings{margin-top:16px;padding-top:16px;border-top:1px solid var(--border,#dbe3ee)}
.settings-section-head{display:flex;justify-content:space-between;gap:12px;margin-bottom:10px}.settings-section-head h4{margin:0 0 3px;font-size:14px}
.timeclock-access-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.compact-settings-actions{margin-top:8px!important}.settings-callout,.timeclock-access-hint{border:1px solid #b9ded8;background:#eefaf8;color:#166b62;border-radius:9px;padding:9px 11px;font-size:12px;line-height:1.35}
.timeclock-access-hint{margin:0 0 12px}

@media (max-width:1180px){
 .bulk-payroll-workflow{grid-template-columns:1fr 1fr}.bulk-setup-card{grid-column:1/-1}.bulk-payroll-snapshot{grid-template-columns:repeat(3,minmax(0,1fr))}.timeclock-access-grid{grid-template-columns:1fr 1fr!important}
}
@media (max-width:760px){
 .journal-summary-grid{grid-template-columns:1fr}.bulk-payroll-workflow{grid-template-columns:1fr}.bulk-payroll-snapshot{grid-template-columns:1fr 1fr}.bulk-setup-card .bulk-payroll-controls{grid-template-columns:1fr 1fr}.bulk-setup-card .bulk-note-field{grid-column:1/-1}.bulk-payroll-actionbar{position:static;flex-wrap:wrap}.employee-profile-edit-grid{grid-template-columns:1fr}.timeclock-access-grid{grid-template-columns:1fr!important}.report-table-pager{justify-content:center}
}

/* =========================================================
   Beta v1.4.29 — attendance workflow, self-service time off,
   report usability, planning filter fidelity and payroll polish
   ========================================================= */

/* Plan & Forecast controls: never squeeze select text below a readable width. */
@media (min-width:1181px){
  body.page-admin #panel-planning .pf-page-head{
    grid-template-columns:minmax(250px,.72fr) minmax(780px,1.75fr)!important;
    align-items:start!important;
  }
  body.page-admin #panel-planning .pf-head-controls{
    grid-template-columns:repeat(4,minmax(155px,1fr))!important;
    align-items:end!important;
  }
  body.page-admin #panel-planning .pf-head-controls label{min-width:155px!important;white-space:normal!important;line-height:1.2!important}
  body.page-admin #panel-planning .pf-head-controls select,
  body.page-admin #panel-planning .pf-head-controls input{min-width:155px!important;text-overflow:ellipsis!important;white-space:nowrap!important;padding-right:32px!important}
  body.page-admin #panel-planning .pf-settings-btn{min-width:155px!important}
}
@media (min-width:901px) and (max-width:1180px){
  body.page-admin #panel-planning .pf-head-controls{grid-template-columns:repeat(2,minmax(170px,1fr))!important}
  body.page-admin #panel-planning .pf-head-controls label,
  body.page-admin #panel-planning .pf-head-controls select,
  body.page-admin #panel-planning .pf-head-controls input{min-width:0!important}
}

/* Reports: compact date toolbar. Today is the default range in JS/markup. */
#reportDateFilterCard{padding:14px 16px!important}
.report-date-toolbar{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}
.report-date-toolbar>div{flex:0 1 190px;min-width:150px}
.report-date-toolbar>div:last-child{flex:0 0 auto;min-width:auto}
.report-date-toolbar label{font-size:10px!important;margin-bottom:4px!important}
.report-date-toolbar select,.report-date-toolbar input{width:100%;min-height:38px}
#reportDateLabel{margin-top:7px!important}
#panel-reports th.sortable{cursor:pointer;user-select:none;white-space:nowrap}
#panel-reports th.sortable:hover{color:var(--gold-deep)}
#panel-reports th.sortable .sort-arrow{font-size:9px;margin-left:3px;color:var(--gold-deep)}
@media(max-width:700px){.report-date-toolbar>div{flex:1 1 100%}.report-date-toolbar>div:last-child button{width:100%}}

/* Contacts > Employees > Attendance browser */
.employee-attendance-filters{display:grid;grid-template-columns:minmax(140px,.8fr) minmax(145px,.8fr) minmax(190px,1.25fr) minmax(150px,1fr) minmax(95px,.55fr);gap:9px;align-items:end;margin:12px 0 5px}
.employee-attendance-filters label{font-size:10px!important;margin:0!important}
.employee-attendance-filters select,.employee-attendance-filters input{width:100%;min-width:0;margin-top:4px}
.employee-attendance-range-label{margin:4px 0 9px}
.employee-attendance-admin-table-wrap{max-height:480px}
@media(max-width:1050px){.employee-attendance-filters{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.employee-attendance-filters{grid-template-columns:1fr}}

/* Bulk payroll: compact, balanced workflow cards. */
.bulk-payroll-workflow{grid-template-columns:minmax(0,1.72fr) minmax(250px,.78fr) minmax(250px,.78fr)!important;gap:12px!important}
.bulk-workflow-card{padding:14px!important;min-height:0!important}
.bulk-workflow-head{display:block!important;margin-bottom:10px!important}
.bulk-workflow-head .section-kicker{display:block;margin-bottom:2px}
.bulk-workflow-head h4{margin:0!important;line-height:1.2!important}
.bulk-workflow-help,.bulk-basis-help{font-size:10px!important;line-height:1.35!important;margin-top:5px!important;color:var(--ink-faint)!important;max-width:100%!important}
.bulk-deductions-card .bulk-deduction-grid{margin-top:4px!important;gap:8px!important}
.bulk-summary-card .bulk-payroll-summary{min-height:0!important}
.bulk-summary-placeholder{display:grid!important;gap:4px!important;padding:10px!important;min-height:0!important;border:1px dashed var(--border)!important;border-radius:8px!important;background:var(--surface-2)!important;font-size:10px!important;line-height:1.35!important;color:var(--ink-soft)!important}
.bulk-summary-placeholder strong{font-size:11px!important;color:var(--ink)!important}
.bulk-payroll-table td{vertical-align:middle!important}
.bulk-payroll-table td:last-child{min-width:150px}
.bulk-payroll-table .sub{line-height:1.25!important;margin-top:3px!important}
@media(max-width:1200px){.bulk-payroll-workflow{grid-template-columns:1fr 1fr!important}.bulk-setup-card{grid-column:1/-1}.bulk-summary-card{min-width:0}}
@media(max-width:760px){.bulk-payroll-workflow{grid-template-columns:1fr!important}.bulk-setup-card{grid-column:auto}.bulk-setup-card .bulk-payroll-controls{grid-template-columns:1fr!important}.bulk-setup-card .bulk-note-field{grid-column:auto!important}}

/* My Account: five real tabs and editable identity/PIN/time-off controls. */
body.page-myattendance .employee-portal-tabs{grid-template-columns:repeat(5,minmax(0,1fr))!important}
.employee-profile-edit-grid-expanded{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.employee-profile-edit-grid-expanded .profile-address-field{grid-column:span 2!important}
.employee-pin-panel{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding-top:12px;border-top:1px solid var(--border)}
.employee-pin-change{margin-top:10px;padding:12px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:end}
.employee-pin-change[hidden]{display:none!important}
.employee-pin-change label{font-size:10px;font-weight:800;color:var(--ink-soft)}
.employee-pin-change input{width:100%;margin-top:4px}
.employee-pin-change .employee-profile-edit-actions{grid-column:1/-1;margin-top:0}
.employee-timeoff-form{display:grid;grid-template-columns:minmax(160px,.7fr) minmax(145px,.65fr) minmax(145px,.65fr) minmax(240px,1.4fr);gap:10px;align-items:end;margin-top:12px}
.employee-timeoff-form label{font-size:10px;font-weight:800;color:var(--ink-soft)}
.employee-timeoff-form select,.employee-timeoff-form input,.employee-timeoff-form textarea{width:100%;margin-top:4px}
.employee-timeoff-form .timeoff-notes{grid-column:auto}
.employee-timeoff-submit{grid-column:1/-1;display:flex;align-items:center;justify-content:flex-end;gap:12px}
.timeoff-tools{margin-top:16px}
.employee-timeoff-table td{vertical-align:top}
.schedule-calendar-toolbar{display:flex;justify-content:flex-end;gap:8px;margin:12px 0}
.schedule-calendar-toolbar button,.employee-timeoff-submit button,.timeoff-tools button{min-height:40px!important;padding:0 15px!important;border-radius:9px!important;font-weight:800!important}
.employee-timeoff-submit button{background:var(--gold-deep)!important;color:var(--on-accent)!important;border-color:var(--gold-deep)!important}
.employee-timeoff-submit{min-height:42px}
.schedule-calendar-scroll{overflow-x:auto;border:1px solid var(--border);border-radius:12px;background:var(--surface)}
.schedule-calendar{display:grid;grid-template-columns:repeat(7,minmax(125px,1fr));min-width:875px}
.schedule-calendar-weekday{padding:10px;text-align:center;border-bottom:1px solid var(--border);background:var(--surface-2);font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft)}
.schedule-calendar-day{min-height:130px;padding:9px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--surface)}
.schedule-calendar-day:nth-child(7n){border-right:0}
.schedule-calendar-day.outside{background:var(--surface-2)}
.schedule-calendar-day.today{box-shadow:inset 0 0 0 2px var(--gold-deep)}
.schedule-calendar-day.has-holiday{background:color-mix(in srgb,var(--gold-soft) 45%,var(--surface))}
.schedule-calendar-date{display:flex;align-items:center;justify-content:center;width:27px;height:27px;margin-bottom:7px;border-radius:999px;font-size:12px;font-weight:900;color:var(--ink)}
.schedule-calendar-day.today .schedule-calendar-date{background:var(--gold-deep);color:var(--on-accent)}
.schedule-calendar-events{display:grid;gap:5px}
.schedule-calendar-holiday{display:grid;gap:1px;margin-bottom:6px;padding:6px 7px;border-radius:7px;background:var(--gold-soft);border:1px solid color-mix(in srgb,var(--gold-deep) 25%,transparent);color:var(--gold-deep)}
.schedule-calendar-holiday strong{font-size:10px;line-height:1.25}.schedule-calendar-holiday span{font-size:9px;color:var(--ink-soft)}
.schedule-calendar-event{display:grid;gap:2px;padding:6px 7px;border-radius:7px;background:var(--green-soft);color:var(--ink);font-size:10px}
.schedule-calendar-event strong{font-size:11px;overflow-wrap:anywhere}.schedule-calendar-event span{color:var(--ink-soft)}
.schedule-calendar-off{font-size:10px;color:var(--ink-faint)}
.employee-timeoff-form select,.employee-timeoff-form input,.employee-timeoff-form textarea,.timeoff-tools select{min-height:40px!important;border:1px solid var(--border)!important;border-radius:8px!important;background:var(--surface)!important;color:var(--ink)!important;padding:8px 10px!important}
.employee-timeoff-form textarea{min-height:64px!important;resize:vertical}
.timeoff-tools{margin-top:16px;padding-top:14px;border-top:1px solid var(--border)}
@media(max-width:960px){body.page-myattendance .employee-portal-tabs{display:flex!important;overflow-x:auto!important}.employee-profile-edit-grid-expanded{grid-template-columns:repeat(2,minmax(0,1fr))!important}.employee-timeoff-form{grid-template-columns:1fr 1fr}.employee-timeoff-form .timeoff-notes{grid-column:1/-1}}
@media(max-width:620px){.employee-profile-edit-grid-expanded,.employee-pin-change,.employee-timeoff-form{grid-template-columns:1fr!important}.employee-profile-edit-grid-expanded .profile-address-field,.employee-timeoff-form .timeoff-notes{grid-column:auto!important}.employee-pin-panel{align-items:flex-start;flex-direction:column}}

/* Dashboard pending leave/absence approvals. */
.dashboard-timeoff-card{border-left:4px solid #8b5cf6!important}
.dashboard-timeoff-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:12px}
.dashboard-timeoff-head h3{margin:2px 0 3px}
.dashboard-timeoff-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.dashboard-timeoff-grid>div{border:1px solid var(--border);border-radius:10px;padding:10px;background:var(--surface-2)}
.dashboard-timeoff-grid h4{margin:0 0 8px}
.dashboard-timeoff-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;border-top:1px solid var(--border)}
.dashboard-timeoff-row:first-of-type{border-top:0}
.dashboard-timeoff-main{display:grid;gap:2px;min-width:0}
.dashboard-timeoff-main span,.dashboard-timeoff-main small{font-size:10px;color:var(--ink-soft);line-height:1.3}
.dashboard-timeoff-actions{display:flex;gap:6px;flex:0 0 auto}
.compact-empty{padding:10px!important}
@media(max-width:800px){.dashboard-timeoff-grid{grid-template-columns:1fr}.dashboard-timeoff-row{align-items:flex-start;flex-direction:column}.dashboard-timeoff-actions{width:100%;justify-content:flex-end}}

/* Sales Basket BIR request checkbox: checkbox stays at the left of copy. */
body.page-basket .invoice-request-toggle{display:grid!important;grid-template-columns:18px minmax(0,1fr)!important;align-items:start!important;gap:9px!important}
body.page-basket .invoice-request-toggle input{width:16px!important;height:16px!important;margin:2px 0 0!important;justify-self:start!important}
body.page-basket .invoice-request-copy{display:grid!important;gap:3px!important;min-width:0!important}
body.page-basket .invoice-request-copy strong{font-size:12px!important;line-height:1.25!important;color:var(--ink)!important;text-transform:none!important;letter-spacing:0!important}
body.page-basket .invoice-request-copy small{font-size:10px!important;line-height:1.35!important;color:var(--ink-faint)!important;font-weight:400!important;text-transform:none!important;letter-spacing:0!important}
/* Beta v2.3 — offline POS queue and recovery state */
.offline-pos-bar{margin:0 0 14px;padding:11px 14px;border:1px solid #f59e0b;border-radius:12px;background:#fffbeb;color:#78350f;display:flex;align-items:center;justify-content:space-between;gap:14px}
.offline-pos-bar[hidden]{display:none}
.offline-pos-bar>div:first-child{display:flex;flex-direction:column;gap:2px}
.offline-pos-bar #offlinePosMessage{font-size:12px}
.offline-pos-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.offline-queue-modal{width:min(720px,94vw)}
.offline-queue-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.offline-queue-head h2{margin:0 0 4px}
.offline-queue-list{display:grid;gap:9px;margin:18px 0;max-height:55vh;overflow:auto}
.offline-queue-row{border:1px solid var(--border,#d9dde5);border-radius:10px;padding:11px;display:grid;grid-template-columns:1fr auto;gap:7px 14px}
.offline-queue-row .offline-queue-error{grid-column:1/-1;color:#b91c1c;font-size:12px}
.offline-queue-row small{color:var(--muted,#64748b)}
body.dark .offline-pos-bar{background:#422006;color:#fef3c7;border-color:#b45309}
@media(max-width:680px){.offline-pos-bar,.offline-queue-head{align-items:stretch;flex-direction:column}.offline-pos-actions{justify-content:flex-start}}

/* =========================================================
   Beta v2.5 — mobile-first usability and responsive hardening
   ========================================================= */
@media(max-width:880px){
  html,body{max-width:100%;overflow-x:hidden}
  body.mobile-nav-open{overflow:hidden;touch-action:none}
  .mobile-sidebar-toggle{top:max(10px,env(safe-area-inset-top));left:max(10px,env(safe-area-inset-left));width:44px;height:44px}
  .app-sidebar{height:100dvh!important;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);overflow-y:auto!important;overscroll-behavior:contain}
  .main-area{max-width:100vw!important;overflow-x:hidden!important}
  .topbar{min-height:66px!important;height:auto!important;padding-top:max(10px,env(safe-area-inset-top))!important;padding-right:14px!important;padding-bottom:10px!important;gap:10px!important}
  .topbar h1{font-size:clamp(20px,4vw,27px)!important;line-height:1.15!important;overflow-wrap:anywhere}
  .topbar .eyebrow{font-size:9px!important;line-height:1.3!important}
  .whoami{max-width:42%;font-size:10px!important;line-height:1.25!important;text-align:right;overflow-wrap:anywhere}
  .page{width:100%!important;max-width:100%!important;padding:16px 14px calc(28px + env(safe-area-inset-bottom))!important;overflow:visible!important}
  .card{max-width:100%;min-width:0;padding:16px!important;border-radius:12px!important}
  .grid.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .grid.cols-3{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .grid.cols-2{grid-template-columns:1fr!important}
  .form-row{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .form-row>*{min-width:0!important;max-width:100%!important}
  input:not([type="checkbox"]):not([type="radio"]),select,textarea{max-width:100%;min-height:44px;font-size:16px!important}
  button,.btn,a.button{min-height:44px;touch-action:manipulation}
  .compact-btn,button.compact-btn{min-height:40px!important}
  .btnrow,.modal-actions,.sticky-modal-actions,.list-toolbar,.product-master-toolbar,.contact-toolbar,.supplier-toolbar,.payable-toolbar,.report-browser-toolbar,.schedule-preview-toolbar{flex-wrap:wrap!important;gap:8px!important}
  .tabs,.subtabs,.settings-tabs,.employee-portal-tabs{max-width:100%;overflow-x:auto!important;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .tabs::-webkit-scrollbar,.subtabs::-webkit-scrollbar,.settings-tabs::-webkit-scrollbar,.employee-portal-tabs::-webkit-scrollbar{display:none}
  .tabs>*,.subtabs>*,.settings-tabs>*,.employee-portal-tabs>*{flex:0 0 auto;scroll-snap-align:start}
  .table-scroll{position:relative;max-width:100%!important;overflow-x:auto!important;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;border-radius:10px}
  .table-scroll>table{min-width:680px}
  table th,table td{padding:10px 9px!important;line-height:1.35}
  .modal-bg{padding:12px!important;align-items:center!important;overflow:hidden!important}
  .modal{width:min(680px,100%)!important;max-width:100%!important;max-height:calc(100dvh - 24px)!important;margin:0!important;padding:18px!important;overflow-y:auto!important;overscroll-behavior:contain;border-radius:14px!important}
  .sticky-modal-actions{position:sticky!important;bottom:-18px!important;z-index:12;margin:16px -18px -18px!important;padding:12px 18px calc(12px + env(safe-area-inset-bottom))!important;background:color-mix(in srgb,var(--surface) 96%,transparent)!important;border-top:1px solid var(--border)!important;box-shadow:0 -8px 20px rgba(15,23,42,.08)}
  .toast,.update-notice{max-width:calc(100vw - 24px)!important;right:12px!important;left:12px!important;bottom:calc(12px + env(safe-area-inset-bottom))!important}
  body.page-timeclock .timeclock-grid{grid-template-columns:1fr!important;max-width:720px!important}
  body.page-timeclock .timeclock-side-panel{min-height:0!important}
  body.page-payables .payable-filters,.employee-directory-filters,.audit-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .payable-detail-grid,.drawer-balance-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

@media(max-width:600px){
  .topbar{padding-left:64px!important}
  .topbar .whoami{display:none!important}
  .page{padding:10px 9px calc(22px + env(safe-area-inset-bottom))!important}
  .card{padding:13px!important;border-radius:11px!important}
  .grid.cols-4,.grid.cols-3,.grid.cols-2{grid-template-columns:1fr!important}
  .form-row,.payable-detail-grid,.drawer-balance-grid,body.page-payables .payable-filters,.employee-directory-filters,.audit-filter-grid{grid-template-columns:1fr!important}
  .form-row>*[style*="grid-column"]{grid-column:auto!important}
  .btnrow,.modal-actions,.sticky-modal-actions{align-items:stretch!important}
  .btnrow>button,.btnrow>a,.modal-actions>button,.modal-actions>a,.sticky-modal-actions>button,.sticky-modal-actions>a{flex:1 1 130px!important;justify-content:center!important;text-align:center!important}
  .modal-bg{padding:0!important;align-items:flex-end!important}
  .modal{width:100%!important;max-height:96dvh!important;padding:16px 14px!important;border-radius:16px 16px 0 0!important}
  .sticky-modal-actions{bottom:-16px!important;margin:14px -14px -16px!important;padding:10px 14px calc(10px + env(safe-area-inset-bottom))!important}
  .employee-modal-head,.system-manager-head,.attendance-section-head,.attendance-filter-head,.report-browser-head{align-items:flex-start!important;flex-direction:column!important}
  .employee-modal-head>button,.system-manager-head>button{align-self:stretch}
  .table-scroll>table{min-width:620px}
  .schedule-calendar-scroll{border:0!important;overflow:visible!important}
  .schedule-calendar{display:grid!important;grid-template-columns:1fr!important;min-width:0!important;gap:8px!important}
  .schedule-calendar-weekday,.schedule-calendar-day.outside{display:none!important}
  .schedule-calendar-day{display:grid!important;grid-template-columns:36px minmax(0,1fr)!important;gap:6px 9px!important;min-height:0!important;padding:10px!important;border:1px solid var(--border)!important;border-radius:10px!important}
  .schedule-calendar-day .schedule-calendar-date{grid-row:1/4;align-self:start;margin:0!important}
  .schedule-calendar-holiday,.schedule-calendar-events{grid-column:2!important;margin:0!important}
  .schedule-calendar-toolbar{display:grid!important;grid-template-columns:1fr 1fr 1fr!important;gap:6px!important}
  .schedule-calendar-toolbar button{min-width:0!important;padding:0 6px!important;font-size:11px!important}
  .smart-coverage-month-grid{overflow:visible!important}
  .schedule-month-weekdays,.month-blank{display:none!important}
  .schedule-month-days{display:grid!important;grid-template-columns:1fr!important;min-width:0!important;gap:8px!important}
  .smart-coverage-day.month-cell{min-height:0!important;border:1px solid var(--border)!important;border-radius:10px!important}
  body.page-basket .prod-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
  body.page-basket .catalog,body.page-basket .cartpane{padding-left:9px!important;padding-right:9px!important}
  body.page-basket .payMethodRow,body.page-basket #payMethodRow{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  body.page-basket .checkout-actions,body.page-basket .offline-pos-actions{display:grid!important;grid-template-columns:1fr!important}
  body.page-myattendance .employee-payroll-filters{grid-template-columns:1fr!important}
  body.page-myattendance .employee-payroll-summary{grid-template-columns:1fr!important}
  body.page-myattendance .employee-payroll-summary>div:last-child{grid-column:auto!important}
  .journal-summary-grid,.bulk-payroll-snapshot,.bulk-payroll-summary{grid-template-columns:1fr!important}
}

@media(max-width:380px){
  .page{padding-inline:7px!important}
  .card{padding:11px!important}
  body.page-basket .prod-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .schedule-calendar-toolbar button{font-size:10px!important}
}

/* Beta v2.6.1 — approved leave calendar overlays */
.schedule-calendar-event.schedule-shift,.smart-coverage-staff>.schedule-shift{background:#dbeafe!important;border:1px solid #93c5fd!important;color:#1e3a8a!important}
.schedule-calendar-event.approved-leave,.schedule-approved-leave{background:#fef3c7!important;border:1px solid #f59e0b!important;color:#92400e!important}
.schedule-approved-leave{display:block!important;border-radius:8px;padding:5px 7px;margin-top:5px;font-size:11px;line-height:1.3}
.schedule-approved-leave small{display:block;color:#a16207;margin-top:2px}
.schedule-calendar-day.has-approved-leave,.smart-coverage-day.has-approved-leave{box-shadow:inset 0 0 0 1px #fdba74}
/* Beta v2.6.5 — onboarding and supportability */
.onboarding-step,.health-item{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:14px;border:1px solid var(--border,#dbe3ef);border-radius:12px;margin-top:10px;background:var(--surface,#fff)}
.onboarding-step.complete{border-color:#86efac;background:#f0fdf4}.onboarding-step-number{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#2563eb;color:#fff;font-weight:800}.onboarding-step.complete .onboarding-step-number{background:#16a34a}
.onboarding-import-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:16px}.onboarding-import-grid>div{padding:16px;border:1px solid var(--border,#dbe3ef);border-radius:12px}.onboarding-import-grid p{min-height:66px;color:var(--muted,#64748b)}
.health-item{grid-template-columns:auto 1fr}.health-item.warning{border-color:#f59e0b}.health-item.critical{border-color:#ef4444}
@media(max-width:760px){.onboarding-import-grid{grid-template-columns:1fr}.onboarding-import-grid p{min-height:0}.onboarding-step{grid-template-columns:auto 1fr}.onboarding-step button{grid-column:1/-1;width:100%}}