:root{
  --bg:#F4F3F1; --surface:#FFFFFF; --ink:#1C1917; --muted:#716A64; --line:#E6E2DE; --chip:#F6F4F2;
  --roast:#1C1917; --roast-2:#2C2724; --on-roast:#FAF7F2; --on-roast-muted:#B5ADA6;
  --gold:#F18E25; --gold-ink:#1C1917; --tomato:#F18E25;
  --btn-out:#1C1917; --btn-out-fg:#FAF7F2; --sel:#1C1917; --sel-fg:#FAF7F2;
  --in:#3F8A55; --out:#D13F2E; --warn:#B7740A; --mustard:#F18E25; --mustard-ink:#1C1917;
  --r-lg:22px; --r-md:14px; --r-sm:10px;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#131211; --surface:#1D1B19; --ink:#F4F0EB; --muted:#A39B94; --line:#33302C; --chip:#282523;
    --roast:#0C0B0A; --roast-2:#262220; --in:#5DB077; --out:#F0604E; --warn:#E8A33A; --btn-out:#FAF7F2; --btn-out-fg:#1C1917; --sel:#F18E25; --sel-fg:#1C1917;
  }
}
:root[data-theme="dark"]{
  --bg:#131211; --surface:#1D1B19; --ink:#F4F0EB; --muted:#A39B94; --line:#33302C; --chip:#282523;
  --roast:#0C0B0A; --roast-2:#262220; --in:#5DB077; --out:#F0604E; --warn:#E8A33A; --btn-out:#FAF7F2; --btn-out-fg:#1C1917; --sel:#F18E25; --sel-fg:#1C1917;
}
*,*::before,*::after{box-sizing:inherit}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);
  font-family:"IBM Plex Sans Arabic","Rubik",Tahoma,Arial,sans-serif;font-size:16px;line-height:1.6}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.wrap{max-width:820px;margin:0 auto;padding:20px 16px 56px}

/* ---- Hero band: the brand moment ---- */
.hero{background:var(--roast);color:var(--on-roast);position:relative;overflow:hidden}
.logo-bg,.hero::after{background:url(logo-dark.webp) no-repeat center/contain}
.hero::after{content:"";position:absolute;inset-inline-start:-40px;bottom:-60px;width:340px;height:312px;opacity:.07;pointer-events:none}
.hero-in{max-width:820px;margin:0 auto;padding:16px 16px 26px;position:relative;z-index:1}
.bar{display:flex;align-items:center;gap:12px}
.mark{width:78px;height:72px;flex:none}
.bt{display:flex;flex-direction:column;line-height:1.2}
.bt b{font-family:"Rubik",sans-serif;font-weight:700;font-size:17px;letter-spacing:.3px}
.bt span{font-size:15px;color:var(--on-roast);font-weight:500;border-inline-start:1px solid var(--roast-2);padding-inline-start:12px}
#mgrOut{white-space:nowrap;flex:none}
.bt span{white-space:nowrap}
.net{margin-inline-start:auto;font-size:12px;color:var(--on-roast-muted);display:inline-flex;align-items:center;gap:6px}
.net::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--on-roast-muted)}
.net.on::before{background:#6FD08C}.net.off::before{background:var(--tomato)}
.clock{padding:26px 0 0}
.clock .time{font-family:"Rubik",sans-serif;font-size:clamp(56px,17vw,96px);font-weight:700;line-height:.95;letter-spacing:-2px;font-variant-numeric:tabular-nums}
.clock .time .dp{font-size:.34em;font-weight:600;color:var(--gold);margin-inline-start:.25em;letter-spacing:0;vertical-align:.9em}
.clock .date{color:var(--on-roast-muted);margin-top:10px;font-size:15px}
.tagline{margin-top:14px;font-family:"Rubik",sans-serif;font-weight:600;font-size:14px;color:var(--gold);letter-spacing:.4px}
body.compact .clock{padding-top:14px}
body.compact .clock .time{font-size:34px;letter-spacing:-.5px}
body.compact .tagline{display:none}

/* ---- Navigation ---- */
nav.tabs{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--surface);border-bottom:1px solid var(--line)}
nav.tabs .tabs-in{max-width:820px;margin:0 auto;display:flex;gap:4px;padding:6px 10px;overflow-x:auto}
nav.tabs button{border:0;background:transparent;padding:9px 14px;border-radius:12px;cursor:pointer;white-space:nowrap;font-size:15px;color:var(--muted);
  display:inline-flex;align-items:center;gap:8px;font-weight:500}
nav.tabs button svg{width:19px;height:19px;flex:none}
nav.tabs button[aria-selected="true"]{background:var(--roast);color:var(--on-roast)}
nav.tabs button[aria-selected="true"] svg{color:var(--gold)}
@media (max-width:640px){
  nav.tabs{position:fixed;top:auto;bottom:0;left:0;right:0;border-top:1px solid var(--line);border-bottom:0;
    padding-bottom:env(safe-area-inset-bottom,0px)}
  nav.tabs .tabs-in{justify-content:space-around;padding:6px 4px;gap:0}
  nav.tabs button{flex-direction:column;gap:3px;font-size:11px;padding:6px 6px;min-width:58px;border-radius:12px}
  nav.tabs button svg{width:22px;height:22px}
  nav.tabs button[aria-selected="true"]{background:transparent;color:var(--ink)}
  nav.tabs button[aria-selected="true"] svg{color:var(--tomato)}
  .wrap{padding-bottom:110px}
}

/* ---- Surfaces ---- */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px}
.panel+.panel,.panel+.actions,.actions+.panel{margin-top:14px}
h2{font-family:"Rubik",sans-serif;font-size:21px;margin:0 0 14px;font-weight:700;letter-spacing:-.2px}
h3{font-family:"Rubik",sans-serif;font-size:17px;margin:0 0 8px;font-weight:600}
.muted{color:var(--muted)}
.small{font-size:14px}
label{display:block;font-size:13.5px;color:var(--muted);margin-bottom:5px;font-weight:500}
input,select{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;background:var(--bg);transition:border-color .15s}
input:focus,select:focus{border-color:var(--gold);outline:none}
input:disabled{opacity:.6}
.row{display:grid;gap:12px;grid-template-columns:1fr 1fr}
.row3{display:grid;gap:10px;grid-template-columns:repeat(3,1fr)}
@media (max-width:560px){.row,.row3{grid-template-columns:1fr}}
.btn{border:0;border-radius:12px;padding:12px 20px;cursor:pointer;background:var(--roast);color:var(--on-roast);font-weight:600}
.btn.alt{background:var(--chip);color:var(--ink);border:1px solid var(--line);font-weight:500}
.btn.mustard{background:var(--gold);color:var(--gold-ink)}
.btn.danger{background:transparent;color:var(--out);border:1px solid var(--line);font-weight:500}
.btn.small{padding:8px 12px;font-size:13.5px}
.btn:disabled{opacity:.5;cursor:default}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}

/* ---- Login & punch ---- */
#tab-punch .wrap-lift{margin-top:-8px}
.ticket{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.ticket .head{padding:18px 20px;display:flex;justify-content:space-between;gap:10px;align-items:center}
.ticket .head .name{font-family:"Rubik",sans-serif;font-size:22px;font-weight:700}
.perf{height:0;border-top:2px dashed var(--line);margin:0 18px;position:relative}
.perf::before,.perf::after{content:"";position:absolute;top:-12px;width:22px;height:22px;border-radius:50%;background:var(--bg);border:1px solid var(--line)}
.perf::before{right:-30px}.perf::after{left:-30px}
.ticket .body{padding:22px 20px 24px;text-align:center}
.punch{width:196px;height:196px;border-radius:50%;border:0;cursor:pointer;font-family:"Rubik",sans-serif;font-size:30px;font-weight:700;
  color:var(--fg);background:var(--c);box-shadow:0 0 0 12px color-mix(in srgb,var(--c) 20%,transparent),0 18px 40px -16px color-mix(in srgb,var(--c) 70%,transparent);transition:transform .12s}
.punch:active{transform:scale(.97)}
.punch.in{--c:var(--gold);--fg:var(--gold-ink)}.punch.out{--c:var(--btn-out);--fg:var(--btn-out-fg)}
.punch small{display:block;font-family:"IBM Plex Sans Arabic",sans-serif;font-size:14px;font-weight:500;opacity:.85;margin-top:6px}
.punch[disabled]{opacity:.45;cursor:default;box-shadow:none}
.status{margin-top:18px;min-height:24px}
.stamp{display:inline-flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:18px}
.stamp div{background:var(--chip);border-radius:var(--r-md);padding:10px 18px;min-width:120px}
.stamp b{display:block;font-family:"Rubik",sans-serif;font-size:20px;font-variant-numeric:tabular-nums}
.msg{padding:12px 14px;border-radius:12px;margin-top:12px;font-size:15px}
.msg.ok{background:color-mix(in srgb,var(--in) 13%,transparent);color:var(--in)}
.msg.err{background:color-mix(in srgb,var(--out) 12%,transparent);color:var(--out)}
.msg.info{background:var(--chip);color:var(--muted)}

/* ---- Chips, tags, lists ---- */
.checks{display:flex;flex-wrap:wrap;gap:8px}
.checks label{display:inline-flex;align-items:center;gap:8px;margin:0;padding:10px 14px;border:1.5px solid var(--line);border-radius:14px;background:var(--bg);
  color:var(--ink);cursor:pointer;font-size:15px;font-weight:500}
.checks input{width:auto;margin:0;accent-color:var(--roast)}
#branchPick input{position:absolute;opacity:0;pointer-events:none}
.checks label:has(input:checked){background:var(--sel);color:var(--sel-fg);border-color:var(--sel)}
.checks label:has(input:focus-visible){outline:3px solid var(--gold);outline-offset:2px}
.checks label:has(input:disabled){opacity:.8;cursor:default}
.tag{display:inline-block;font-size:13px;padding:4px 11px;border-radius:999px;background:var(--chip);white-space:nowrap;font-weight:500}
.tag.in{background:color-mix(in srgb,var(--in) 15%,transparent);color:var(--in)}
.tag.out{background:color-mix(in srgb,var(--muted) 16%,transparent);color:var(--muted)}
.tag.late{background:color-mix(in srgb,var(--warn) 17%,transparent);color:var(--warn)}
.tag.abs{background:color-mix(in srgb,var(--out) 13%,transparent);color:var(--out)}
.list{list-style:none;margin:0;padding:0}
.list li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid var(--line)}
.list li:last-child{border-bottom:0}
.branchHead{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px}
.branchHead h3{margin:0}

/* ---- Tables & figures ---- */
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -4px}
table{border-collapse:collapse;width:100%;min-width:640px;font-size:14px}
th,td{padding:11px 10px;text-align:start;border-bottom:1px solid var(--line);white-space:nowrap}
th{color:var(--muted);font-weight:500;font-size:13px;background:var(--chip)}
thead th:first-child{border-start-start-radius:10px;border-end-start-radius:10px}
thead th:last-child{border-start-end-radius:10px;border-end-end-radius:10px}
td.num{font-variant-numeric:tabular-nums;font-family:"Rubik",sans-serif}
td.pay{font-weight:700;color:var(--ink)}
.sums{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:12px 0 16px}
@media (max-width:560px){.sums{grid-template-columns:repeat(2,1fr)}}
.sums div{background:var(--chip);border-radius:var(--r-md);padding:12px 14px}
.sums div:first-child{background:var(--roast);color:var(--on-roast)}
.sums div:first-child span{color:var(--on-roast-muted)}
.sums b{display:block;font-family:"Rubik",sans-serif;font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}
.sums span{font-size:13px;color:var(--muted)}
.emp-row{border:1px solid var(--line);border-radius:var(--r-md);padding:14px;margin-bottom:10px;background:var(--bg)}
.emp-row input,.emp-row select{background:var(--surface)}
.badge{display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:var(--gold);color:var(--gold-ink);
  font-family:"Rubik",sans-serif;font-size:11.5px;font-weight:700;line-height:1}
nav.tabs button{position:relative}
nav.tabs button .badge{position:absolute;top:2px;inset-inline-end:10px}
@media (min-width:641px){nav.tabs button .badge{position:static}}
.notes{list-style:none;margin:0;padding:0}
.notes li{padding:12px 14px;border-radius:12px;background:var(--chip);margin-bottom:8px;display:flex;gap:10px;align-items:flex-start}
.notes li.new{background:color-mix(in srgb,var(--gold) 14%,var(--surface));border:1px solid color-mix(in srgb,var(--gold) 45%,transparent)}
.notes li.new::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--gold);flex:none;margin-top:8px}
.notes time{display:block;font-size:12.5px;color:var(--muted)}
.bell{position:relative}
.bell .badge{position:absolute;top:-7px;inset-inline-start:-7px}
.closed{background:var(--chip);border-radius:14px;padding:14px 16px;margin-bottom:22px}
.closed b{display:block;font-family:"Rubik",sans-serif;font-size:17px;margin-bottom:2px}
.closed span{color:var(--muted);font-size:14.5px}
.linkbtn{border:0;background:none;padding:0;color:var(--gold);font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.newrow{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 14px;border-radius:12px;margin-bottom:8px;
  background:color-mix(in srgb,var(--gold) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--gold) 40%,transparent)}
.newrow .who b,.newrow .who>span.small{display:block}
.foot{text-align:center;color:var(--muted);font-size:12.5px;margin-top:28px}
.hidden{display:none!important}
@media (prefers-reduced-motion:reduce){.punch,input,select{transition:none}}