/* TwinTech back office — responsive for phones, tablets and desktops */
[hidden]{display:none!important}
:root{--green:#0b7a3e;--green-d:#08602f;--green-l:#e7f5ed;--navy:#0f172a;--navy-2:#1e293b;--navy-3:#334155;--ink:#1f2937;--muted:#64748b;--line:#e6e9ee;--bg:#f2f5f4;--card:#fff;
  --red:#dc2626;--amber:#d97706;--blue:#2563eb;--radius:14px;--shadow:0 1px 2px rgba(15,23,42,.04),0 6px 20px rgba(15,23,42,.06);--side:252px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:"Plus Jakarta Sans",system-ui,-apple-system,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--ink);font-size:14px;line-height:1.5}
a{color:var(--green);text-decoration:none}
h1,h2,h3,h4{color:var(--navy);margin:0 0 .5em;line-height:1.25}h1{font-size:1.5rem;letter-spacing:-.01em}h3{font-size:1.02rem}
img{max-width:100%}

/* Shell */
.layout{display:flex;min-height:100vh}
.side{width:var(--side);background:linear-gradient(180deg,#0f172a,#111c33);color:#cbd5e1;flex:none;position:sticky;top:0;height:100vh;overflow-y:auto;padding:16px 12px 30px;scrollbar-width:thin;scrollbar-color:#334155 transparent;z-index:60}
.side .brand{display:flex;gap:10px;align-items:center;padding:4px 8px 16px;border-bottom:1px solid var(--navy-2);margin-bottom:10px}
.side .brand img{width:40px;height:40px;border-radius:10px;object-fit:cover;background:#fff}
.side .brand b{color:#fff;display:block;font-size:.98rem}.side .brand span{font-size:.72rem;color:#94a3b8}
.side .grp{font-size:.66rem;text-transform:uppercase;letter-spacing:.12em;color:#64748b;margin:16px 10px 4px;font-weight:700}
.side a{display:flex;align-items:center;gap:10px;color:#cbd5e1;padding:8px 10px;border-radius:9px;font-size:.9rem;font-weight:500;transition:background .12s}
.side a .ic{width:22px;text-align:center;flex:none}
.side a:hover{background:var(--navy-2);color:#fff}.side a.on{background:var(--green);color:#fff;box-shadow:0 4px 12px rgba(11,122,62,.35)}
.side a .n{margin-left:auto;background:var(--amber);color:#fff;border-radius:999px;font-size:.7rem;padding:0 7px;font-weight:700}
.side .pos-link{border:1px solid #12985a;color:#bbf7d0;font-weight:700;margin:6px 0}.side .pos-link:hover{background:#12985a;color:#fff}
.scrim{display:none}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topnav{background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--line);padding:10px 24px;display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:40}
.topnav .grow{flex:1}
.tsearch input{border:1px solid var(--line);border-radius:10px;padding:8px 12px;width:280px;font:inherit;background:#f8fafc}
.user-chip{display:flex;gap:8px;align-items:center;font-weight:600;color:var(--navy);line-height:1.2}.user-chip .av{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#12985a,#0b7a3e);color:#fff;display:grid;place-items:center;font-weight:800;flex:none}
.clock{display:flex}
.content{padding:22px 24px 48px;max-width:1520px;width:100%}
.menu-toggle{display:none;border:0;background:#f1f5f9;border-radius:10px;width:40px;height:40px;font-size:1.2rem;cursor:pointer}

/* Building blocks */
.page-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.page-head p{margin:2px 0 0;color:var(--muted)}
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;margin-bottom:16px;border:1px solid rgba(15,23,42,.03)}
.card.p0{padding:0;overflow:hidden}
.grid{display:grid;gap:16px}.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}.g21{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}.g12{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
.kpi{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;position:relative;overflow:hidden;display:block;color:inherit}
.kpi span{color:var(--muted);font-size:.8rem;font-weight:600}.kpi b{display:block;font-size:1.45rem;color:var(--navy);margin-top:4px;letter-spacing:-.01em}.kpi small{color:var(--muted)}
.kpi::after{content:"";position:absolute;right:-18px;top:-18px;width:70px;height:70px;border-radius:50%;background:var(--green-l)}
.kpi.warn::after{background:#fef3c7}.kpi.bad::after{background:#fee2e2}.kpi.blue::after{background:#dbeafe}
.btn{display:inline-flex;align-items:center;gap:6px;border:0;border-radius:10px;padding:9px 14px;font:inherit;font-weight:700;cursor:pointer;background:var(--green);color:#fff;white-space:nowrap;transition:.12s;text-decoration:none;line-height:1.2}
.btn:hover{background:var(--green-d);color:#fff}.btn-dark{background:var(--navy)}.btn-dark:hover{background:#000}.btn-light{background:#eef2f1;color:var(--navy)}.btn-light:hover{background:#e2e8f0;color:var(--navy)}
.btn-red{background:var(--red)}.btn-red:hover{background:#b91c1c}.btn-amber{background:var(--amber)}.btn-blue{background:var(--blue)}
.btn-sm{padding:6px 10px;font-size:.8rem;border-radius:8px}.btn[disabled]{opacity:.5;cursor:not-allowed}
label{display:block;font-weight:600;font-size:.82rem;margin:0 0 4px;color:#334155}
input:not([type]),input[type=text],input[type=email],input[type=password],input[type=number],input[type=tel],input[type=date],input[type=time],input[type=month],input[type=search],select,textarea{width:100%;padding:9px 11px;border:1px solid #cbd5e1;border-radius:10px;font:inherit;background:#fff;color:var(--ink);min-height:40px}
input[type=file]{max-width:100%}
input:focus,select:focus,textarea:focus{outline:3px solid rgba(11,122,62,.15);border-color:var(--green)}
.field{margin-bottom:12px}.inline{display:flex;gap:8px;align-items:end;flex-wrap:wrap}.inline .field{margin:0}
.check{display:flex;gap:8px;align-items:center;font-weight:500}
.table{width:100%;border-collapse:collapse}
.table th{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);text-align:left;padding:11px 12px;border-bottom:1px solid var(--line);background:#fafbfb;white-space:nowrap}
.table td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.table tbody tr:hover td{background:#fafcfb}.table .r{text-align:right}.table .c{text-align:center}.table tfoot td{font-weight:700;background:#fafbfb}
.table-wrap,.card.p0{overflow-x:auto}
.thumb{width:40px;height:40px;object-fit:contain;border-radius:8px;background:#f8fafc}
.badge{display:inline-block;padding:2px 9px;border-radius:999px;font-size:.72rem;font-weight:700;white-space:nowrap}
.badge-green{background:#dcfce7;color:#166534}.badge-amber{background:#fef3c7;color:#92400e}.badge-red{background:#fee2e2;color:#991b1b}.badge-blue{background:#dbeafe;color:#1e40af}
.badge-grey{background:#f1f5f9;color:#475569}.badge-teal{background:#ccfbf1;color:#115e59}.badge-purple{background:#ede9fe;color:#5b21b6}
.alert{padding:11px 14px;border-radius:10px;margin-bottom:14px;font-weight:500}.alert-success{background:#dcfce7;color:#166534}.alert-error{background:#fee2e2;color:#991b1b}.alert-info{background:#e0f2fe;color:#075985}.alert-warning{background:#fef3c7;color:#92400e}
.muted{color:var(--muted)}.small{font-size:.82rem}.r{text-align:right}.mono{font-family:ui-monospace,Consolas,monospace}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:end;margin-bottom:14px}.filters>*{width:auto}
.filters input,.filters select{width:auto;min-width:140px}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:14px;overflow-x:auto;scrollbar-width:none}
.tabs a{padding:9px 14px;color:var(--muted);font-weight:600;border-bottom:2px solid transparent;white-space:nowrap}.tabs a.on{color:var(--green);border-color:var(--green)}
.pager{display:flex;gap:4px;justify-content:flex-end;padding:12px;flex-wrap:wrap}.pager a,.pager span{padding:5px 10px;border-radius:8px;background:#f1f5f9;color:var(--navy);font-weight:600}.pager a.active{background:var(--green);color:#fff}
.bars{display:flex;align-items:flex-end;gap:6px;height:180px;padding-top:10px}
.bars .b{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%;justify-content:flex-end;min-width:0}
.bars .b i{display:block;width:100%;background:linear-gradient(180deg,#12985a,#0b7a3e);border-radius:5px 5px 0 0;min-height:2px}
.bars .b i.on2{background:linear-gradient(180deg,#60a5fa,#2563eb)}
.bars .b span{font-size:.62rem;color:var(--muted);white-space:nowrap}
.legend{display:flex;gap:14px;font-size:.8rem;color:var(--muted);flex-wrap:wrap}.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.hbar{height:8px;background:#eef2f1;border-radius:6px;overflow:hidden}.hbar i{display:block;height:100%;background:var(--green)}
.dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0}.dl dt{color:var(--muted)}.dl dd{margin:0;font-weight:600;word-break:break-word}
.empty{padding:30px;text-align:center;color:var(--muted)}
.avatar-lg{width:96px;height:96px;border-radius:18px;object-fit:cover;background:var(--green-l);display:grid;place-items:center;font-size:2rem;font-weight:800;color:var(--green)}
.profile-head{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
dialog{border:0;border-radius:16px;padding:0;box-shadow:0 20px 60px rgba(0,0,0,.25);max-width:600px;width:94vw;max-height:92vh}
dialog::backdrop{background:rgba(15,23,42,.5)}
dialog .dh{padding:14px 18px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
dialog .db{padding:18px;overflow-y:auto;max-height:70vh}dialog .df{padding:12px 18px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.quick-actions{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-bottom:16px}
.qa{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;display:flex;flex-direction:column;gap:6px;color:var(--navy);font-weight:700;border:1px solid transparent}
.qa:hover{border-color:var(--green);color:var(--green)}.qa .e{font-size:1.6rem}.qa small{color:var(--muted);font-weight:500}

/* Staff login */
.login-page{background:var(--navy)}
.login-shell{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr}
.login-art{background:radial-gradient(1200px 600px at 10% 10%,#14532d,transparent),linear-gradient(135deg,#0f172a,#0b3d26);color:#e2e8f0;display:grid;place-items:center;padding:40px}
.login-art img{width:84px;height:84px;border-radius:18px;background:#fff;object-fit:cover}.login-art h1{color:#fff;font-size:2rem;margin:18px 0 8px}.login-art p{max-width:380px;color:#cbd5e1}
.login-form{display:grid;place-items:center;padding:24px;background:var(--bg)}.login-form form{width:100%;max-width:400px;padding:28px}

/* Tablet */
@media (max-width:1150px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3,.g21,.g12{grid-template-columns:1fr}.tsearch input{width:200px}}

/* Phone & small tablet: off-canvas menu, stacked tables */
@media (max-width:860px){
  .side{position:fixed;left:0;top:0;bottom:0;transform:translateX(-105%);transition:transform .22s ease;box-shadow:0 0 40px rgba(0,0,0,.35)}
  body.nav-open .side{transform:none}
  body.nav-open .scrim{display:block;position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:55}
  body.nav-open{overflow:hidden}
  .menu-toggle{display:block}
  .topnav{padding:8px 12px;gap:8px}
  .tsearch{flex:1}.tsearch input{width:100%}.topnav .grow{display:none}
  .user-chip .who,.pos-quick span,.clock .muted{display:none}
  .content{padding:14px 12px 40px}
  h1{font-size:1.25rem}
  .g2{grid-template-columns:1fr}.g4{grid-template-columns:1fr 1fr;gap:10px}
  .kpi{padding:12px}.kpi b{font-size:1.05rem}.kpi small{font-size:.72rem}.kpi::after{width:46px;height:46px}
  .page-head .inline>.btn{padding:9px 10px}
  .filters{display:grid;grid-template-columns:1fr 1fr}.filters>*,.filters input,.filters select{width:100%;min-width:0}.filters .btn{justify-content:center}
  .page-head .inline{width:100%}.page-head .inline>.btn,.page-head .inline>form{flex:1;justify-content:center}
  .table.stackable thead{display:none}
  .table.stackable tr{display:block;border-bottom:1px solid var(--line);padding:6px 0}
  .table.stackable td{display:flex;justify-content:space-between;gap:12px;border:0;padding:6px 14px;text-align:right}
  .table.stackable td[data-l]::before{content:attr(data-l);color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;font-weight:700;text-align:left;flex:none;max-width:45%}
  .table.stackable td:empty{display:none}
  .table.stackable tfoot tr{display:flex;flex-wrap:wrap;justify-content:space-between}
  .card.p0{overflow:visible}
  .login-shell{grid-template-columns:1fr}.login-art{padding:28px 20px;text-align:center}.login-art h1{font-size:1.4rem}.login-art p{display:none}
  dialog .db{max-height:64vh}
}
@media (max-width:420px){.filters{grid-template-columns:1fr}.quick-actions{grid-template-columns:1fr 1fr}}
@media print{.side,.topnav,.no-print,.scrim{display:none!important}.content{padding:0}.card{box-shadow:none;border:0}body{background:#fff}}
.bell{position:relative;width:40px;height:40px;border-radius:10px;background:#f1f5f9;display:grid;place-items:center;font-size:1.1rem}
.bell span{position:absolute;top:-4px;right:-4px;background:var(--red);color:#fff;border-radius:999px;font-size:.68rem;font-weight:800;padding:1px 6px}