/* ── LAYOUT ─────────────────────────────────────── */
.shell{display:flex;height:100vh;overflow:hidden}

/* sidebar */
.sb{width:220px;flex-shrink:0;background:var(--ink);display:flex;flex-direction:column}
.sb-head{padding:20px 18px;border-bottom:.5px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:11px}
.sb-logo{width:36px;height:36px;border-radius:9px;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center}
.sb-logo i{font-size:20px;color:#fff}
.sb-t{font-size:15px;font-weight:600;color:#fff}
.sb-s{font-size:11px;color:rgba(255,255,255,.35);margin-top:2px}
nav.sb-nav{flex:1;padding:10px 8px;overflow-y:auto}
.nb{width:100%;display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:7px;border:none;background:transparent;color:rgba(255,255,255,.5);cursor:pointer;text-align:left;font-size:14px;font-weight:400;font-family:var(--font);margin-bottom:2px;transition:background .12s,color .12s;position:relative}
.nb:hover{background:rgba(255,255,255,.08);color:rgba(255,255,255,.8)}
.nb.on{background:rgba(255,255,255,.14);color:#fff;font-weight:500}
.nb.on::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:20px;border-radius:0 2px 2px 0;background:rgba(255,255,255,.7)}
.nb i{font-size:20px;flex-shrink:0}
.nb .lbl{flex:1}
.nbadge{font-size:11px;border-radius:9px;padding:2px 8px;font-weight:600}
.nbadge.red{background:#dc2626;color:#fff}
.nbadge.amber{background:var(--am);color:#fff}
.nbadge.blue{background:var(--bm);color:#fff}
/* nav groups */
.nb-grp{margin-bottom:2px}
.nb-grp-hd{margin-bottom:0;font-size:13px;color:rgba(255,255,255,.4)}
.nb-grp-hd.has-active{color:rgba(255,255,255,.75)}
.nb-grp-hd:hover{color:rgba(255,255,255,.8)}
.nb-chevron{margin-left:auto;font-size:15px!important;flex-shrink:0}
.nb-sub{padding-left:30px;font-size:13px}
.nb-sub i{font-size:17px!important}
.sb-foot{padding:14px 18px;border-top:.5px solid rgba(255,255,255,.08);font-size:12px;color:rgba(255,255,255,.3)}

/* topbar */
.topbar{height:56px;background:var(--card);border-bottom:.5px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 26px;flex-shrink:0}
.tb-title{font-size:14px;color:var(--ink3)}
.tb-r{display:flex;align-items:center;gap:10px}

/* content */
.content{flex:1;overflow-y:auto;padding:24px 28px}

/* split panel */
.split{display:flex;flex:1;overflow:hidden}
.sm{display:flex;flex-direction:column;overflow:hidden;border-right:.5px solid var(--border)}
.sd{flex:1;overflow-y:auto;padding:22px 24px}

/* toolbar inside split (sticky top bar above table) */
.toolbar{padding:12px 18px;border-bottom:.5px solid var(--border);display:flex;gap:8px;flex-wrap:wrap;align-items:center;background:var(--card);flex-shrink:0}

/* bottom bar */
.regbar{background:var(--card);border-top:.5px solid var(--border);padding:12px 26px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}

/* status footer */
.statusbar{padding:7px 16px;border-top:.5px solid var(--border);font-size:13px;color:var(--ink3);background:var(--card);flex-shrink:0}

/* ── HAMBURGER BUTTON ────────────────────────────────────────── */
.tb-hamburger{display:none;width:40px;height:40px;border:none;background:none;cursor:pointer;align-items:center;justify-content:center;border-radius:8px;color:var(--ink2);flex-shrink:0}
.tb-hamburger:hover{background:var(--surface)}

/* ── SIDEBAR OVERLAY ─────────────────────────────────────────── */
.sb-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:299}
.sb-overlay.open{display:block}

/* ── BOTTOM NAV (Employee mobile) ───────────────────────────── */
.bottom-nav{display:none}

/* ── MOBILE ──────────────────────────────────────────────────── */
@media (max-width:768px){
  /* Shell */
  .shell{overflow:visible}

  /* Sidebar → off-canvas drawer */
  .sb{position:fixed;top:0;left:0;bottom:0;z-index:300;width:248px;transform:translateX(-100%);transition:transform .25s cubic-bezier(.4,0,.2,1)}
  .sb.open{transform:translateX(0);box-shadow:4px 0 24px rgba(0,0,0,.3)}

  /* Topbar */
  .topbar{padding:0 14px;height:52px}
  .tb-hamburger{display:flex}
  .tb-title{font-size:15px;color:var(--ink);font-weight:600}

  /* Content – bottom padding for bottom-nav */
  .content{padding:16px 16px 88px}

  /* Split panel → stack */
  .split{flex-direction:column}
  .sm{width:100%!important;border-right:none;border-bottom:.5px solid var(--border);min-height:260px;max-height:55vh}

  /* Toolbar */
  .toolbar{padding:10px 14px;gap:6px}
  .toolbar input{min-width:0}

  /* Regbar → hide (admin shortcuts desktop-only) */
  .regbar{display:none}

  /* Bottom nav → show */
  .bottom-nav{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:200;background:var(--card);border-top:.5px solid var(--border);box-shadow:0 -2px 16px rgba(0,0,0,.08);padding:0 0 env(safe-area-inset-bottom,0)}
  .bottom-nav button{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 0;border:none;background:none;cursor:pointer;font-family:var(--font);font-size:12px;font-weight:500;color:var(--ink3);transition:color .12s}
  .bottom-nav button.on{color:var(--ink)}
  .bottom-nav button i{font-size:24px}

  /* Status bar */
  .statusbar{font-size:12px;padding:6px 14px}
}