/* Presence theme — ported from at.html reference design */
:root{
  --bg:#0D1016;
  --panel:#161A22;
  --panel-2:#1C212B;
  --line:#262D39;
  --line-soft:#20262F;
  --ink:#EAEDF3;
  --ink-2:#9AA3B2;
  --ink-3:#646D7C;
  --live:#3FD69A;
  --wfh:#5B9BFF;   /* work from home  */
  --wfo:#22C55E;   /* work from office*/
  --field:#F0A742; /* on-field        */
  --danger:#FF6B6B;
  --radius:16px;
  --shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 18px 40px -24px rgba(0,0,0,.8);
}
*{box-sizing:border-box}
html,body{margin:0}
/* ---------- themed scrollbars (app-wide) ---------- */
*{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px;border:2px solid var(--panel)}
::-webkit-scrollbar-thumb:hover{background:var(--ink-3)}
::-webkit-scrollbar-corner{background:transparent}
body{
  background:
    radial-gradient(1100px 600px at 82% -10%, rgba(63,214,154,.06), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(91,155,255,.05), transparent 55%),
    var(--bg);
  color:var(--ink);
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  padding:28px 20px 60px;
}
/* One frame width for every page; fluid below the cap so all mobile sizes fit */
.shell{max-width:1140px;width:100%;margin:0 auto}
.shell.wide{max-width:1140px}
.shell.full{max-width:none}

/* ---------- header ---------- */
header.top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit}
.glyph{
  width:34px;height:34px;border-radius:10px;position:relative;flex:none;
  background:linear-gradient(150deg,#1f2733,#141922);
  border:1px solid var(--line);
  display:grid;place-items:center;
}
.glyph img{width:80%;height:80%;object-fit:contain}
.brand h1{font-family:"Space Grotesk";font-size:16px;font-weight:600;letter-spacing:.2px;margin:0}
.brand p{margin:1px 0 0;font-size:11.5px;color:var(--ink-3);letter-spacing:.3px}
.main-nav{margin-left:8px}
.top-right{display:flex;align-items:center;gap:16px;margin-left:auto}
/* Below 900px there isn't room for the icon row in the header at all — drop
   it to a fixed bottom tab bar instead (WhatsApp/Instagram-style), out of
   the header's flex flow entirely, so profile + logout keep the top row to
   themselves. Desktop is untouched (.main-nav above stays inline). */
@media (max-width:900px){
  /* nav.main-nav (element+class), not just .main-nav — .chip-actions is
     also applied to this same <nav> and is declared later in the file, so a
     plain .main-nav selector here would lose ties on shared properties
     (gap, align-items) to it despite being inside the narrower media query. */
  nav.main-nav{
    position:fixed;left:0;right:0;bottom:0;z-index:60;margin:0;
    display:flex;justify-content:space-around;align-items:stretch;gap:2px;
    background:var(--panel);border-top:1px solid var(--line);
    padding:6px max(6px,env(safe-area-inset-left)) calc(6px + env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-right));
    box-shadow:0 -8px 24px -12px rgba(0,0,0,.6);
  }
  /* nav.main-nav prefix again here for the same reason — .link-btn.icon-only
     (equal specificity to a plain .main-nav .link-btn) is declared later in
     the file and would otherwise win the width/padding tie-break. */
  nav.main-nav .link-btn{
    flex:1 1 0;width:auto;max-width:72px;height:46px;margin:0 auto;
    border:0;background:transparent;border-radius:10px;
  }
  nav.main-nav .link-btn:hover{background:var(--panel-2)}
  nav.main-nav .link-btn.active{background:rgba(63,214,154,.14);color:var(--live)}
  /* Room for the fixed bar so page content (especially a long table's last
     row) never ends up hidden behind it. */
  body{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
}
.today-label{font-size:12.5px;color:var(--ink-2);font-variant-numeric:tabular-nums;text-align:right}
.today-label b{display:block;color:var(--ink);font-family:"Space Grotesk";font-weight:600;font-size:14px}

/* user chip + menu */
.user-actions{display:flex;align-items:center;gap:8px}
.user-chip{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;padding:6px 12px 6px 6px}
.user-chip .u-name{font-family:"Space Grotesk";font-weight:600;font-size:13px;line-height:1.2}
.user-chip .u-sub{font-size:11px;color:var(--ink-3)}
.chip-actions{display:flex;align-items:center;gap:8px}
/* anchors and <button>s render with different default metrics — the fixed
   height + inline-flex keeps Overview / Admin / Sign out identical */
.link-btn{appearance:none;border:1px solid var(--line);background:transparent;color:var(--ink-2);
  cursor:pointer;font-family:inherit;font-size:12px;font-weight:500;height:38px;padding:0 14px;
  border-radius:9px;line-height:1;text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;
  transition:color .18s,background .18s,border-color .18s}
.link-btn:hover{color:var(--ink);background:var(--panel-2);border-color:#38414f}
.link-btn.icon-only{width:38px;padding:0}
.link-btn.icon-only svg{display:block}
.link-btn.accent{color:var(--live);border-color:rgba(63,214,154,.35)}
.link-btn.accent:hover{background:rgba(63,214,154,.08)}
.link-btn.danger{color:var(--danger);border-color:rgba(255,107,107,.4)}
.link-btn.danger:hover{background:rgba(255,107,107,.1)}
.link-btn.active{background:var(--panel-2);color:var(--ink);border-color:#38414f}

/* ---------- tabs ---------- */
.tabs{display:flex;gap:4px;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;padding:4px;margin-bottom:20px;width:fit-content}
.tab{appearance:none;border:0;background:transparent;color:var(--ink-2);cursor:pointer;
  font-family:inherit;font-size:13px;font-weight:500;padding:8px 16px;border-radius:9px;
  transition:color .18s,background .18s}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{background:var(--panel-2);color:var(--ink);box-shadow:0 1px 0 rgba(255,255,255,.04) inset}
.tab:focus-visible{outline:2px solid var(--live);outline-offset:2px}
.tab-badge{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;
  padding:0 4px;margin-left:4px;border-radius:8px;background:var(--live);color:#06231a;
  font-size:10.5px;font-weight:700;font-variant-numeric:tabular-nums;vertical-align:1px}

.view{display:none;animation:rise .3s ease both}
.view.active{display:block}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- session card ---------- */
.session{
  position:relative;overflow:hidden;border-radius:var(--radius);
  background:linear-gradient(180deg,var(--panel),#12161e);
  border:1px solid var(--line);box-shadow:var(--shadow);padding:26px 26px 24px;
}
.session .edge{position:absolute;inset:0 auto 0 0;width:4px;background:var(--live);opacity:.9}
/* Check-in card must not clip the location dropdown menu */
.session.no-clip{overflow:visible}
.session.no-clip .edge{border-radius:var(--radius) 0 0 var(--radius)}
.live-row{display:flex;align-items:center;gap:10px;margin-bottom:20px;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;
  letter-spacing:.5px;text-transform:uppercase;padding:5px 10px;border-radius:999px;
  border:1px solid var(--line);color:var(--ink-2);background:var(--panel-2)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--live);flex:none}
.pill.live .dot{animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(63,214,154,.55)}50%{box-shadow:0 0 0 6px rgba(63,214,154,0)}}
.pill.mode{color:var(--ink)}
.pill.missed{color:#9A6100;background:rgba(255,215,140,.12);border-color:rgba(255,215,140,.3)}

.timer{font-family:"JetBrains Mono";font-weight:600;letter-spacing:-1px;
  font-size:clamp(46px,12vw,76px);line-height:1;font-variant-numeric:tabular-nums;margin:2px 0 4px}
.timer small{font-size:.34em;color:var(--ink-3);font-weight:500;margin-left:6px;letter-spacing:0}
.sub{color:var(--ink-2);font-size:13.5px;margin:0}
.sub b{color:var(--ink);font-weight:600}

.session-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-top:22px;flex-wrap:wrap}

/* check-in launcher (when out) */
.prompt-h{font-family:"Space Grotesk";font-size:18px;font-weight:600;margin:0 0 3px}
.prompt-p{color:var(--ink-2);font-size:13.5px;margin:0 0 20px}
.modes{display:flex;gap:9px;margin-bottom:16px;flex-wrap:wrap}

.mode-btn{flex:1;min-width:120px;appearance:none;cursor:pointer;font-family:inherit;
  text-align:left;background:var(--panel-2);border:1px solid var(--line);border-radius:12px;
  padding:13px 14px;color:var(--ink-2);transition:border-color .18s,background .18s,transform .12s}
.mode-btn:hover{transform:translateY(-1px)}
.mode-btn .mb-top{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.mode-btn .swatch{width:9px;height:9px;border-radius:3px;flex:none}
.mode-btn .mb-name{font-family:"Space Grotesk";font-weight:600;font-size:14px;color:var(--ink)}
.mode-btn .mb-desc{font-size:11.5px;color:var(--ink-3);line-height:1.4}
.mode-btn[aria-pressed="true"]{background:var(--panel);color:var(--ink)}
.mode-btn.wfh[aria-pressed="true"]{border-color:var(--wfh);box-shadow:0 0 0 1px var(--wfh) inset,0 0 26px -12px var(--wfh)}
.mode-btn.wfo[aria-pressed="true"]{border-color:var(--wfo);box-shadow:0 0 0 1px var(--wfo) inset,0 0 26px -12px var(--wfo)}
.mode-btn.field[aria-pressed="true"]{border-color:var(--field);box-shadow:0 0 0 1px var(--field) inset,0 0 26px -12px var(--field)}
.mode-btn:focus-visible{outline:2px solid var(--live);outline-offset:2px}

.loc-field{display:flex;align-items:center;gap:10px;background:var(--panel-2);border:1px solid var(--line);
  border-radius:12px;padding:0 14px;margin-bottom:18px}
.loc-field svg{flex:none;color:var(--ink-3)}
.loc-field input{flex:1;background:transparent;border:0;outline:0;color:var(--ink);
  font-family:inherit;font-size:14px;padding:13px 0}
.loc-field input::placeholder{color:var(--ink-3)}

/* ---------- custom dropdown ---------- */
.dd{position:relative;margin-bottom:18px}
.dd .loc-field{margin-bottom:0}
.dd-toggle{appearance:none;width:100%;cursor:pointer;font-family:inherit;font-size:14px;color:var(--ink);
  padding-top:13px;padding-bottom:13px;transition:border-color .18s}
.dd-toggle:hover,.dd.open .dd-toggle{border-color:#38414f}
.dd-toggle:focus-visible{outline:2px solid var(--live);outline-offset:2px}
.dd-label{flex:1;text-align:left}
.dd-chev{color:var(--ink-3);transition:transform .18s}
.dd.open .dd-chev{transform:rotate(180deg)}
.dd-menu{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:30;display:none;
  background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:5px;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.9);animation:rise .16s ease both}
.dd.open .dd-menu{display:block}
.dd-item{appearance:none;border:0;width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:transparent;color:var(--ink-2);cursor:pointer;font-family:inherit;font-size:13.5px;
  padding:11px 12px;border-radius:9px;text-align:left;transition:background .15s,color .15s}
.dd-item:hover{background:var(--panel);color:var(--ink)}
.dd-item .dd-check{color:var(--live);opacity:0;flex:none}
.dd-item[aria-selected="true"]{color:var(--ink)}
.dd-item[aria-selected="true"] .dd-check{opacity:1}

.btn{appearance:none;border:0;cursor:pointer;font-family:"Space Grotesk";font-weight:600;
  font-size:14.5px;border-radius:12px;padding:13px 22px;transition:transform .12s,filter .18s,opacity .18s}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* hover/active restate colors — Bootstrap's .btn:hover would otherwise reset
   the background to transparent (its --bs-btn-* vars are unset on bare .btn) */
.btn-in,.btn-in:hover,.btn-in:active{background:var(--live);color:#06231a}
.btn-in{width:100%}
.btn-in:hover{filter:brightness(1.06)}
.btn-in:disabled{opacity:.6;cursor:wait}
.btn-out,.btn-out:active{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn-out:hover{background:var(--panel-2);color:var(--ink);border-color:#38414f}
.form-err{color:var(--danger);font-size:12.5px;margin:-8px 0 12px;min-height:0}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.stat .k{font-size:11.5px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.6px;margin-bottom:8px}
.stat .v{font-family:"Space Grotesk";font-weight:700;font-size:26px;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.stat .v span{font-size:14px;color:var(--ink-3);font-weight:500;margin-left:3px}
.bar{height:5px;border-radius:3px;background:var(--panel-2);margin-top:11px;overflow:hidden}
.bar > i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--live),#63b7ff)}

/* overview count tiles (clickable filters) */
.stats-7{grid-template-columns:repeat(7,1fr)}
.stat.tile{appearance:none;cursor:pointer;font-family:inherit;text-align:left;color:var(--ink);
  position:relative;transition:border-color .18s,transform .12s}
.stat.tile:hover{transform:translateY(-1px);border-color:#38414f}
.stat.tile.active{border-color:var(--live);box-shadow:0 0 0 1px var(--live) inset,0 0 26px -14px var(--live)}
.stat.tile:focus-visible{outline:2px solid var(--live);outline-offset:2px}
/* The Out tile's own "notify everyone" button, tucked in its corner —
   stopPropagation-equivalent handling in the click listener keeps this from
   also toggling the tile's filter. */
.tile-notify-form{position:absolute;top:10px;right:10px;margin:0}
.tile-notify-btn{appearance:none;width:22px;height:22px;border-radius:7px;border:1px solid var(--line);
  background:var(--panel-2);color:var(--ink-2);cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .15s,color .15s,border-color .15s}
.tile-notify-btn:hover{background:var(--panel);color:var(--ink);border-color:#9F7BFF}
@media (max-width:760px){.stats.stats-7{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.stats.stats-7{grid-template-columns:repeat(2,1fr)}}

/* ---------- card + table ---------- */
/* color is set explicitly — Bootstrap's own .card would otherwise paint the
   headings with its near-black body color, invisible on the dark panel */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-bottom:18px;color:var(--ink)}
.card-h h3{color:var(--ink)}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:16px 18px;border-bottom:1px solid var(--line-soft)}
.card-h h3{margin:0;font-family:"Space Grotesk";font-size:14px;font-weight:600}
.card-title-actions{display:flex;align-items:center;gap:10px}
/* Base size/color for every ".muted" span — without this, one used outside
   a scoped context (e.g. inline next to a field, not in a .card-h) falls
   back to the browser's default 16px body text instead of matching the
   app's small gray text everywhere else. */
.muted{font-size:12px;color:var(--ink-3)}
.card-h .muted{font-size:12px;color:var(--ink-3)}
.hist-nav{display:flex;align-items:center;gap:10px}
.hist-nav .muted{font-variant-numeric:tabular-nums;min-width:96px;text-align:center}
.nav-btn{appearance:none;width:28px;height:28px;border-radius:8px;border:1px solid var(--line);
  background:var(--panel-2);color:var(--ink-2);cursor:pointer;display:grid;place-items:center;
  font-size:15px;line-height:1;padding:0;flex:none;text-decoration:none;transition:color .15s,border-color .15s}
.nav-btn svg{display:block}
/* Same footprint as .nav-btn, invisible — keeps the icon columns aligned
   across rows where the notify bell doesn't apply (already checked in
   today, or on leave), instead of the row silently having one fewer icon. */
.nav-btn-spacer{display:inline-block;width:28px;height:28px;flex:none}
.nav-btn:hover:not(:disabled){color:var(--ink);border-color:#38414f}
.nav-btn:disabled{opacity:.35;cursor:default}
.nav-btn.cal-open{color:var(--wfh);background:rgba(91,155,255,.12);border-color:rgba(91,155,255,.35)}
.nav-btn.cal-open:hover{color:var(--wfh);background:rgba(91,155,255,.2);border-color:rgba(91,155,255,.55)}
.card-body{padding:18px}
.tbl-scroll{overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse;min-width:560px}
.tbl thead th{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--ink-3);
  text-align:left;font-weight:600;padding:11px 18px;background:var(--panel-2)}
.tbl tbody td{padding:13px 18px;font-size:13.5px;border-top:1px solid var(--line-soft);color:var(--ink-2);white-space:nowrap}
.tbl tbody tr:hover{background:rgba(255,255,255,.015)}
td.date{color:var(--ink);font-weight:500}
td.dur{font-family:"JetBrains Mono";color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}
.tag{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;
  padding:3px 9px;border-radius:7px;border:1px solid transparent}
.tag .swatch{width:7px;height:7px;border-radius:2px}
.tag.wfh{color:var(--wfh);background:rgba(91,155,255,.10);border-color:rgba(91,155,255,.25)}
.tag.wfh .swatch{background:var(--wfh)}
.tag.wfo{color:var(--wfo);background:rgba(34,197,94,.10);border-color:rgba(34,197,94,.25)}
.tag.wfo .swatch{background:var(--wfo)}
.tag.field{color:var(--field);background:rgba(240,167,66,.10);border-color:rgba(240,167,66,.25)}
.tag.field .swatch{background:var(--field)}
.tag.missed{color:#FFB35C;background:rgba(255,140,60,.10);border-color:rgba(255,140,60,.3);text-transform:uppercase;font-size:10px;letter-spacing:.5px}
.tag.blocked{color:var(--danger);background:rgba(255,107,107,.10);border-color:rgba(255,107,107,.3);text-transform:uppercase;font-size:10px;letter-spacing:.5px}
.tag.ok{color:var(--live);background:rgba(63,214,154,.10);border-color:rgba(63,214,154,.3);text-transform:uppercase;font-size:10px;letter-spacing:.5px}
.bell-on{color:var(--live);flex:none}
tr.row-blocked td{opacity:.55}
tr.row-blocked td:last-child{opacity:1}
.nav-btn.danger{color:var(--danger);border-color:rgba(255,107,107,.4)}
.nav-btn.danger:hover{background:rgba(255,107,107,.1)}
.tag.role-admin{color:var(--live);background:rgba(63,214,154,.10);border-color:rgba(63,214,154,.25)}
.row-live td{background:rgba(63,214,154,.05)}
td .live-mini{color:var(--live);font-family:"JetBrains Mono";font-weight:600}
.tag.all{color:var(--ink-2);background:var(--panel-2);border-color:var(--line)}
.tag.all .swatch{background:var(--ink-3)}
.tag.manual{color:#4FD1C5;background:rgba(79,209,197,.10);border-color:rgba(79,209,197,.3);text-transform:uppercase;font-size:10px;letter-spacing:.5px}
/* Plain small text (no pill/border) — sits directly under a status line
   right-aligned same as its siblings, which a bordered .tag couldn't quite
   match without looking offset. Used wherever a single line needs to name
   who did a manual check-in/check-out. */
.manual-note{font-size:10.5px;font-weight:600;color:#4FD1C5;margin-top:3px;font-variant-numeric:tabular-nums}
.row-holiday td{background:rgba(159,123,255,.05);color:var(--ink-2)}
.row-holiday td.date{color:#9F7BFF}
.row-leave td{background:rgba(79,209,197,.05);color:var(--ink-2)}
.row-leave td.date{color:#4FD1C5}
/* The merged Public-holiday/leave cell spans 4 normal columns worth of
   width — left as the table's default `white-space:nowrap`, one long line
   of text+tag forces the whole table's auto column widths to stretch to
   fit it, throwing every other row's columns out of alignment with the
   header. Let this one cell wrap instead. */
.row-holiday td[colspan], .row-leave td[colspan]{white-space:normal;line-height:1.6}
.row-holiday td[colspan] .tag, .row-leave td[colspan] .tag{vertical-align:middle;margin-left:2px}
.tag.lv-pending{color:#F0A742;background:rgba(240,167,66,.10);border-color:rgba(240,167,66,.25);text-transform:capitalize}
.tag.lv-approved{color:var(--live);background:rgba(63,214,154,.10);border-color:rgba(63,214,154,.25);text-transform:capitalize}
.tag.lv-declined{color:var(--danger);background:rgba(255,107,107,.10);border-color:rgba(255,107,107,.25);text-transform:capitalize}
.st-leave{color:#9F7BFF;font-weight:600}
.avatar.hol-day{background:var(--panel-2);border:1px solid var(--line);color:#9F7BFF;
  font-family:"Space Grotesk";font-weight:700;font-size:16px}
.empty{padding:26px 18px;color:var(--ink-3);font-size:13px;text-align:center}

/* ---------- upcoming birthdays + holidays, side by side ---------- */
.today-split{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px;align-items:start}
.today-split .card{margin:0}
@media (max-width:700px){.today-split{grid-template-columns:1fr}}

/* ---------- birthdays ---------- */
.bday-avatar{color:#3a0b26;font-family:"Space Grotesk";font-weight:700;font-size:15px}
.bday-avatar.lg{width:56px;height:56px;border-radius:15px;font-size:19px;flex:none;
  box-shadow:0 0 0 3px rgba(255,255,255,.12)}
.tag.bday-tag{color:#FF7CB0;background:rgba(255,124,176,.12);border-color:rgba(255,124,176,.3)}
.tag.anniv-tag{color:#F0C24B;background:rgba(240,194,75,.12);border-color:rgba(240,194,75,.3)}

.bday-banner{
  display:flex;align-items:center;gap:16px;border-radius:var(--radius);
  padding:20px 24px;margin-bottom:18px;position:relative;overflow:hidden;
  background:linear-gradient(120deg,#3a0f3a,#5c1740 45%,#8a2a4d 100%);
  border:1px solid rgba(255,140,190,.35);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 18px 40px -22px rgba(180,20,90,.55);
}
.bday-faces{display:flex;flex:none}
.bday-faces .bday-avatar.lg{margin-left:-12px;border:2px solid #3a0f3a}
.bday-faces .bday-avatar.lg:first-child{margin-left:0}
.bday-title{font-family:"Space Grotesk";font-weight:700;font-size:17px;color:#fff;letter-spacing:.1px}
.bday-sub{font-size:13px;color:rgba(255,255,255,.75);margin-top:2px}
.service-banner{
  background:linear-gradient(120deg,#173423,#1f5137 48%,#3d7651 100%);
  border-color:rgba(99,214,154,.34);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 18px 40px -22px rgba(63,214,154,.45);
}
.bday-faces .service-avatar.lg{border-color:#173423}
.missed-banner{
  align-items:flex-start;justify-content:space-between;gap:24px;
  background:linear-gradient(120deg,#3a2408,#5c3a10 45%,#8a5a1f 100%);
  border-color:rgba(255,179,92,.35);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 18px 40px -22px rgba(255,140,20,.45);
}
.missed-banner-copy{flex:1;min-width:0}
.missed-banner-pills{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.missed-banner-action{flex:none;display:flex;flex-direction:column}
.missed-banner-action label{color:rgba(255,255,255,.75);font-size:11px;margin-bottom:6px}
.missed-banner-row{display:flex;gap:10px}
.missed-banner-row .input{width:160px}
.missed-banner-row .btn{width:auto;padding:11px 20px;white-space:nowrap}
.missed-banner .form-err{margin-top:8px}
@media (max-width:640px){
  .missed-banner{flex-direction:column;align-items:stretch}
  .missed-banner-row{flex-direction:column}
  .missed-banner-row .input{width:100%}
  .missed-banner-row .btn{width:100%}
}
@media (max-width:560px){
  .bday-banner{padding:16px 18px;gap:12px}
  .bday-avatar.lg{width:44px;height:44px;border-radius:13px;font-size:15px}
  .bday-title{font-size:15px}
}

/* ---------- team ---------- */
.team{display:flex;flex-direction:column}
.member{display:flex;align-items:center;gap:14px;padding:16px 18px;border-top:1px solid var(--line-soft)}
/* The download/history/notify icon group — a single flex item so it can be
   centered as a unit against the row (see the mobile column layout below,
   where it stacks vertically instead of sitting side by side). */
.row-icons{display:flex;align-items:center;gap:14px;flex:none}
.member:first-child{border-top:0}
.member:hover{background:rgba(255,255,255,.015)}
.avatar{width:40px;height:40px;border-radius:11px;flex:none;display:grid;place-items:center;overflow:visible;
  font-family:"Space Grotesk";font-weight:600;font-size:15px;color:#0c0f14;position:relative}
.avatar img{width:100%;height:100%;object-fit:cover;border-radius:11px}
.avatar.sm{width:32px;height:32px;border-radius:9px;font-size:12px}
.avatar.sm img{border-radius:9px}
.avatar .presence{position:absolute;right:-2px;bottom:-2px;width:12px;height:12px;border-radius:50%;
  border:2.5px solid var(--panel)}
.m-main{flex:1;min-width:0}
.m-name{font-family:"Space Grotesk";font-weight:600;font-size:14px;display:flex;align-items:center;gap:8px}
.m-role{font-size:12px;color:var(--ink-3);margin-top:1px}
.m-status{text-align:right;font-size:12.5px;color:var(--ink-2)}
/* When a celebrations row carries more than one badge (e.g. someone's
   birthday and work anniversary land on the same day), stack them instead
   of letting them crowd onto one line. */
.m-status:has(.tag + .tag){display:flex;flex-direction:column;align-items:flex-end;gap:4px}
/* Colored per working mode — same palette as the attendance calendar
   (WFH blue, WFO green, On-field orange) instead of one flat "live" green */
.m-status .st-in{color:var(--live);font-weight:600}
.m-status .st-in.wfh{color:var(--wfh)}
.m-status .st-in.wfo{color:var(--wfo)}
.m-status .st-in.field{color:var(--field)}
.m-status .st-sub{font-size:11.5px;color:var(--ink-3);margin-top:2px;font-variant-numeric:tabular-nums}
.m-duration{text-align:right;min-width:60px;flex:none}
.m-duration .dur-val{font-family:"Space Grotesk";font-weight:600;font-size:13.5px;color:var(--ink);font-variant-numeric:tabular-nums}
.m-duration .dur-val.muted{color:var(--ink-3);font-weight:500}
.m-duration .dur-label{font-size:10px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em;margin-top:1px}
@media (max-width:700px){.m-duration{display:none}}

/* ---------- forms (admin) ---------- */
.field-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.input,.select{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;color:var(--ink);
  font-family:inherit;font-size:13.5px;padding:10px 12px;outline:none;transition:border-color .18s}
.input:focus,.select:focus{border-color:var(--live)}
/* Native time/date picker icon renders black by default — invisible on our
   dark inputs. Invert it to white everywhere, not just this one field. */
.input[type="time"]::-webkit-calendar-picker-indicator,
.input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(1);cursor:pointer}
.input.range-date{width:115px}
.select option{background:var(--panel-2);color:var(--ink)}
.btn-sm{appearance:none;border:1px solid var(--line);background:var(--panel-2);color:var(--ink);cursor:pointer;
  font-family:"Space Grotesk";font-weight:600;font-size:12.5px;border-radius:9px;padding:8px 14px;
  transition:background .18s,border-color .18s}
.btn-sm:hover{border-color:#38414f}
.btn-sm.accent{background:var(--live);border-color:var(--live);color:#06231a}
.btn-sm.accent:hover{filter:brightness(1.06)}
.day-check{display:inline-flex;align-items:center;gap:7px;background:var(--panel-2);
  border:1px solid var(--line);border-radius:10px;padding:8px 12px;cursor:pointer;
  font-size:12.5px;color:var(--ink-2);user-select:none;transition:border-color .15s,color .15s}
.day-check:hover{border-color:#38414f}
.day-check:has(input:checked){color:var(--ink);border-color:rgba(63,214,154,.45);background:rgba(63,214,154,.07)}
.day-check input{accent-color:var(--live);margin:0}

/* ---------- themed checkbox (e.g. "Half day" toggles) ---------- */
.checkbox{display:inline-flex;align-items:center;gap:7px;cursor:pointer;user-select:none;
  font-size:12.5px;color:var(--ink-2);white-space:nowrap}
.checkbox input{position:absolute;opacity:0;width:1px;height:1px}
.checkbox .box{width:16px;height:16px;flex:none;border-radius:5px;border:1px solid var(--line);
  background:var(--panel-2);display:inline-flex;align-items:center;justify-content:center;transition:.15s}
.checkbox .box svg{opacity:0;transform:scale(.5);transition:.15s;color:#06231a}
.checkbox input:checked ~ .box{background:var(--live);border-color:var(--live)}
.checkbox input:checked ~ .box svg{opacity:1;transform:scale(1)}
.checkbox input:focus-visible ~ .box{outline:2px solid var(--live);outline-offset:2px}
.checkbox:hover .box{border-color:#38414f}

/* ---------- compact settings grid (Admin) ---------- */
/* gap is the only source of spacing here — each .card's own margin-bottom
   must be zeroed, otherwise it stacks on top of the grid gap and compounds
   unevenly between rows. 18px matches the spacing every other card on this
   page already uses, so the grid reads as part of the same rhythm. */
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}
.settings-grid .card{display:flex;flex-direction:column;margin-bottom:0}
@media (max-width:820px){.settings-grid{grid-template-columns:1fr}}
/* A card split into two side-by-side halves (e.g. Auto checkout | Session &
   security) — each half is its own mini card-h/card-body stack, divided by
   a hairline border instead of a gap so it still reads as one card. */
.split-row{display:flex;flex:1}
.split-half{flex:1;display:flex;flex-direction:column;min-width:0}
.split-half + .split-half{border-left:1px solid var(--line-soft)}
@media (max-width:560px){.split-row{flex-direction:column}.split-half + .split-half{border-left:0;border-top:1px solid var(--line-soft)}}
/* One consistent 12px rhythm for every gap inside a compact settings card —
   flex gap instead of scattered margins, so spacing can't drift uneven */
.card-body.compact{padding:16px;flex:1;display:flex;flex-direction:column;gap:12px}
.card-body.compact form{margin:0}
.card-body.compact form:not(.field-row){display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.card-body.compact .field-row{gap:12px}
.field-hint{font-size:11.5px;color:var(--ink-3);line-height:1.4;margin:0}
/* Leave-type policy note (e.g. "Request leave" — shown when Sick/Annual is picked) */
.leave-note{font-size:12px;line-height:1.55;color:var(--ink-2);background:var(--panel-2);
  border:1px solid var(--line);border-left:3px solid var(--wfh);border-radius:8px;
  padding:10px 12px;margin-bottom:12px}
.field-label{font-family:"Space Grotesk";font-weight:600;font-size:12.5px;color:var(--ink);white-space:nowrap}
.field-grid{display:grid;grid-template-columns:auto 1fr;gap:12px 14px;align-items:center;margin:0}

/* toggle switch */
.toggle{display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none}
.toggle input{position:absolute;opacity:0;width:1px;height:1px}
.toggle-track{width:34px;height:20px;flex:none;background:var(--panel-2);border:1px solid var(--line);
  border-radius:999px;position:relative;transition:background .18s,border-color .18s}
.toggle-thumb{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;
  background:var(--ink-3);transition:transform .18s,background .18s}
.toggle input:checked ~ .toggle-track{background:rgba(63,214,154,.18);border-color:var(--live)}
.toggle input:checked ~ .toggle-track .toggle-thumb{transform:translateX(14px);background:var(--live)}
.toggle input:focus-visible ~ .toggle-track{outline:2px solid var(--live);outline-offset:2px}
.toggle-label{font-size:12px;color:var(--ink-2)}
.alert{border-radius:12px;padding:12px 16px;font-size:13px;margin-bottom:18px;border:1px solid}
.alert.ok{color:var(--live);background:rgba(63,214,154,.08);border-color:rgba(63,214,154,.3)}
.alert.err{color:var(--danger);background:rgba(255,107,107,.08);border-color:rgba(255,107,107,.3)}

/* ---------- confirmation modal ---------- */
.modal-overlay{position:fixed;inset:0;z-index:150;display:grid;place-items:center;padding:20px;
  background:rgba(13,16,22,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  animation:rise .2s ease both}
.modal-overlay[hidden]{display:none}
.modal-card{width:100%;max-width:400px;border-radius:var(--radius);
  background:linear-gradient(180deg,var(--panel),#12161e);border:1px solid var(--line);
  box-shadow:var(--shadow);padding:24px 26px}
.modal-card h3{font-family:"Space Grotesk";font-size:16px;font-weight:600;margin:0 0 8px;color:var(--ink)}
.modal-card p{color:var(--ink-2);font-size:13.5px;line-height:1.55;margin:0 0 20px}
.modal-actions{display:flex;justify-content:flex-end;gap:10px}
.btn-sm.danger{background:var(--danger);border-color:var(--danger);color:#2a0b0b}
.btn-sm.danger:hover{filter:brightness(1.08)}

/* ---------- employee details modal ---------- */
.modal-card.wide{max-width:520px;position:relative}
.modal-x{position:absolute;top:16px;right:16px;appearance:none;border:0;background:transparent;
  color:var(--ink-3);cursor:pointer;padding:6px;border-radius:8px;display:grid;place-items:center;
  transition:color .18s,background .18s}
.modal-x:hover{color:var(--ink);background:var(--panel-2)}
.avatar.md{width:52px;height:52px;border-radius:14px;font-size:19px}
.avatar.md img{border-radius:14px}
.ed-head{display:flex;align-items:center;gap:14px;margin-bottom:18px;padding-right:28px}
.ed-head h3{margin:0}
.ed-head p{margin:2px 0 0;color:var(--ink-3);font-size:12.5px}
.ed-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}
.ed-row{min-width:0}
.ed-label{display:block;font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.03em;margin-bottom:3px}
.ed-value{display:block;font-size:13.5px;color:var(--ink);word-break:break-word}
.ed-value.ed-empty{color:var(--ink-3);font-style:italic}
.ed-state{grid-column:1 / -1;padding:24px 0;text-align:center;color:var(--ink-3);font-size:13px}
.ed-state-error{color:var(--danger)}
@media (max-width:520px){.ed-grid{grid-template-columns:1fr}}

.hist-void-btn{display:inline-grid;width:20px;height:20px;border-radius:6px;vertical-align:middle;margin-left:6px;color:var(--danger)}
.hist-void-btn:hover{background:rgba(255,107,107,.12);border-color:rgba(255,107,107,.3)}
.nav-text-btn{appearance:none;width:54px;height:28px;flex:none;border-radius:8px;border:1px solid transparent;
  font-family:"Space Grotesk";font-weight:700;font-size:10.5px;letter-spacing:.2px;cursor:pointer;
  transition:filter .15s,background .15s}
.nav-text-btn.checkin{background:rgba(63,214,154,.14);border-color:rgba(63,214,154,.35);color:var(--live)}
.nav-text-btn.checkin:hover{background:rgba(63,214,154,.24)}
.nav-text-btn.checkout{background:rgba(255,107,107,.14);border-color:rgba(255,107,107,.35);color:var(--danger)}
.nav-text-btn.checkout:hover{background:rgba(255,107,107,.24)}
.nav-text-btn-spacer{display:inline-block;width:54px;height:28px;flex:none}
/* ---------- session history modal (eye icon on each employee row) ---------- */
.modal-card.wide.hist-modal-card{max-width:920px;width:92vw;padding:0;overflow:hidden;position:relative}
.hist-modal-card .card-h{padding:18px 56px 15px 22px}
.hist-modal-card .card-h h3{margin:0}
.hist-scroll{max-height:60vh;overflow-y:auto}
@media (max-width:600px){.modal-card.hist-modal-card{width:100vw;max-width:100vw;border-radius:0}}

/* ---------- toast ---------- */
.toast{position:fixed;right:24px;bottom:24px;z-index:200;display:flex;align-items:flex-start;gap:10px;
  max-width:min(480px,calc(100vw - 48px));padding:13px 14px 13px 18px;border-radius:13px;font-size:13.5px;
  background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--line);
  box-shadow:0 18px 40px -18px rgba(0,0,0,.9);animation:toast-in .3s cubic-bezier(.21,1.02,.55,1) both}
.toast svg{flex:none;margin-top:1px}
.toast span{min-width:0;flex:1;line-height:1.5}
.toast-close{flex:none;appearance:none;border:0;background:transparent;color:var(--ink-3);
  cursor:pointer;font-size:18px;line-height:1;padding:2px 4px;border-radius:6px;align-self:flex-start}
.toast-close:hover{color:var(--ink);background:var(--panel-3,rgba(255,255,255,.06))}
.toast.ok{color:var(--live);border-color:rgba(63,214,154,.35)}
.toast.ok span{color:var(--ink)}
.toast.err{color:var(--danger);border-color:rgba(255,107,107,.35)}
.toast.err span{color:var(--ink)}
.toast.hide{animation:toast-out .35s ease both}
@keyframes toast-in{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@keyframes toast-out{from{opacity:1}to{opacity:0;transform:translateY(10px)}}

/* ---------- login ---------- */
.auth-wrap{min-height:calc(100vh - 120px);display:grid;place-items:center}
.auth-card{width:100%;max-width:420px;border-radius:var(--radius);
  background:linear-gradient(180deg,var(--panel),#12161e);
  border:1px solid var(--line);box-shadow:var(--shadow);padding:34px 30px}
.auth-card .glyph{width:44px;height:44px;margin-bottom:18px}
.auth-card h2{font-family:"Space Grotesk";font-size:20px;font-weight:600;margin:0 0 6px}
.auth-card p{color:var(--ink-2);font-size:13.5px;margin:0 0 24px}
.btn-sso{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  background:var(--ink);color:#0c0f14;border:0;border-radius:12px;cursor:pointer;
  font-family:"Space Grotesk";font-weight:600;font-size:14.5px;padding:13px 20px;text-decoration:none;
  transition:filter .18s,transform .12s}
.btn-sso:hover{filter:brightness(.92)}
.btn-sso:active{transform:translateY(1px)}
.btn-sso.disabled{opacity:.45;pointer-events:none}
.hint{font-size:11.5px;color:var(--ink-3);margin-top:16px;line-height:1.5}

/* ---------- redirect loader overlay ---------- */
.redirect-overlay{position:fixed;inset:0;z-index:100;display:none;place-items:center;
  background:rgba(13,16,22,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.redirect-overlay.show{display:grid;animation:rise .25s ease both}
.redirect-box{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;
  background:linear-gradient(180deg,var(--panel),#12161e);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:38px 44px}
.redirect-box .glyph{width:44px;height:44px;margin-bottom:14px}
.spinner{width:34px;height:34px;border-radius:50%;margin:2px 0 14px;
  border:3px solid var(--line);border-top-color:var(--live);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.redirect-title{font-family:"Space Grotesk";font-weight:600;font-size:15.5px;color:var(--ink)}
.redirect-sub{font-size:12.5px;color:var(--ink-2)}

@media (max-width:560px){
  /* Same bottom-bar clearance as the 900px breakpoint above — this rule
     would otherwise win at this width (declared later, equal specificity)
     and shrink it back down, hiding content behind the fixed nav. */
  body{padding:20px 14px calc(76px + env(safe-area-inset-bottom))}
  /* Dashboard History stats: Verified hours + Days present side by side,
     Availability (with its progress bar) on its own full-width row below.
     Scoped to #view-history so it doesn't touch Overview's .stats-7 tiles,
     which also happen to be .stats elements. */
  #view-history .stats{grid-template-columns:repeat(2,1fr)}
  #view-history .stats .stat:nth-child(1){order:1}
  #view-history .stats .stat:nth-child(3){order:2}
  #view-history .stats .stat:nth-child(2){order:3;grid-column:1 / -1}
  /* Leave tab balances (Annual/Sick/Other) — Annual Leave (with its progress
     bar) gets its own full-width row, Sick + Other share a row below it */
  .stats.lv-balances{grid-template-columns:repeat(2,1fr)}
  .stats.lv-balances .stat:nth-child(1){grid-column:1 / -1}
  .session-foot .btn{width:100%}
  .today-label{display:none}
  /* Small screens: profile chip shrinks to just the avatar + logout icon */
  .user-chip{padding:4px}
  .user-chip .u-info{display:none}

  /* Overview employee list + dashboard Team tab rows only (not the
     birthdays/holidays cards, which also use .member but have no
     export/eye icons and should stay on their normal inline layout).
     Restructured as a proper mobile list-item "card": identity block up top
     (avatar + name + status, full-width text instead of a squeezed right-
     hand column), then a separate divided footer row underneath for
     actions — utility icons grouped on the left, the primary Check-in/
     Check-out button pinned to the right — instead of stacking every icon
     (including that button) into one floating top-right column, which is
     what made this cramped and hard to scan before. */
  #empList .member, #teamList .member{
    display:grid;
    grid-template-columns:40px 1fr;
    grid-template-areas:
      "avatar main"
      "avatar status"
      "footer footer";
    align-items:start;
    row-gap:6px;
    column-gap:14px;
  }
  #empList .member .avatar, #teamList .member .avatar{grid-area:avatar;margin-top:1px}
  #empList .member .m-main, #teamList .member .m-main{grid-area:main}
  #empList .member .m-status, #teamList .member .m-status{grid-area:status;text-align:left}
  /* Small dot separating name/designation from the status lines below */
  #empList .member .m-status::before, #teamList .member .m-status::before{content:"•";display:block;color:var(--ink-3);margin-bottom:4px;font-size:11px}
  /* Footer action row — full width, visually separated from the identity
     block above by its own divider. csv/eye/bell keep their normal
     side-by-side order on the left; the Check-in/Check-out button (or its
     spacer, always the group's last element) is pushed to the far right
     with auto margin instead of being just another icon in the stack. */
  #empList .member .row-icons, #teamList .member .team-csv{
    grid-area:footer;flex-direction:row;justify-content:flex-start;
    gap:10px;margin-top:4px;padding-top:10px;border-top:1px solid var(--line-soft);
  }
  #empList .member .row-icons > :last-child{margin-left:auto}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* ---------- attendance calendar ---------- */
.cal-nav{display:flex;align-items:center;gap:4px}
.cal-month-label{min-width:118px;text-align:center;display:inline-block;font-variant-numeric:tabular-nums}
.cal-legend{display:flex;flex-wrap:wrap;gap:8px;padding:14px 18px;border-bottom:1px solid var(--line-soft)}
.cal-chip{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--ink-2);
  background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:4px 10px 4px 4px}
.cal-chip b{width:18px;height:18px;border-radius:5px;display:inline-flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;color:#0c0f14;flex:none}

table.cal-tbl{min-width:100%;border-collapse:separate;border-spacing:0}
.cal-tbl thead th{font-size:10.5px;text-align:center;padding:8px 3px;min-width:30px;color:var(--ink-3)}
.cal-tbl .cal-dow{display:block;font-size:8.5px;color:var(--ink-3);text-transform:uppercase;font-weight:400;margin-top:1px}
.cal-tbl th.cal-rest-col{color:var(--ink-3);opacity:.6}
.cal-sticky{position:sticky;left:0;z-index:2;background:var(--panel);text-align:left!important;
  padding:10px 14px!important;min-width:168px;max-width:168px}
.cal-tbl thead .cal-sticky{z-index:3;border-bottom:1px solid var(--line-soft)}
.cal-tbl tbody tr:hover .cal-sticky{background:#1b2029}
.cal-cell{text-align:center;vertical-align:middle;height:46px;width:34px;padding:0;
  border-top:1px solid var(--line-soft);border-left:1px solid var(--line-soft);color:#11151c}
.cal-cell.cal-blank{background:transparent}
.cal-code{font-size:12px;font-weight:800;line-height:1.2;color:#fff}
.cal-dur{font-size:8.5px;font-weight:700;line-height:1.2;color:#11151c;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.cal-count{text-align:center;font-size:12.5px;font-variant-numeric:tabular-nums;color:var(--ink-2);
  border-top:1px solid var(--line-soft);border-left:1px solid var(--line-soft);min-width:32px}
.cal-count-a{color:#DC2626;font-weight:600}

/* One color per day-type, reused from the same variables used everywhere
   else in the app (live status tiles, mode badges, leave/holiday rows) */
.cal-wfh, .cal-chip b.cal-wfh{background:var(--wfh)}
.cal-wfo, .cal-chip b.cal-wfo{background:var(--wfo)}
.cal-field, .cal-chip b.cal-field{background:var(--field)}
.cal-leave, .cal-chip b.cal-leave{background:#FF6B6B}
.cal-holiday, .cal-chip b.cal-holiday{background:#9F7BFF}
.cal-absent, .cal-chip b.cal-absent{background:#DC2626}
.cal-rest, .cal-chip b.cal-rest{background:var(--panel-2);color:var(--ink-3);border:1px solid var(--line)}
td.cal-cell.cal-rest{color:var(--ink-3)}

@media (max-width:820px){.cal-sticky{min-width:150px;max-width:150px}}

/* ---------- calendar modal ---------- */
.modal-card.cal-modal-card{max-width:1500px;width:97vw;padding:0;overflow:hidden;position:relative}
.cal-modal-card .card-h{padding:18px 56px 15px 22px}
.cal-modal-card .cal-legend{padding:12px 22px}
.cal-modal-card .cal-scroll{max-height:calc(100vh - 170px);overflow-y:auto}
.cal-modal-card .cal-tbl thead th{position:sticky;top:0;background:var(--panel);z-index:2}
.cal-modal-card .cal-tbl thead .cal-sticky{z-index:4}
.cal-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;padding:90px 20px;color:var(--ink-2);font-size:13px}
.cal-loading .spinner{margin:0}
@media (max-width:600px){.cal-modal-card{width:100vw;max-width:100vw;border-radius:0}}

/* ---------- organization chart (full page, /organization) ---------- */
.org-tree{padding:18px 22px 32px;min-height:220px}
.org-hint{margin:0 0 16px;padding:12px 14px;border:1px solid rgba(240,167,66,.28);border-radius:12px;
  color:#F0C47A;background:rgba(240,167,66,.08);font-size:12.5px;line-height:1.45;white-space:normal}

/* Branching tree — plain nested ul/li for layout (flex column per node:
   box on top, its children row below), but the actual connector LINES are
   drawn as an SVG overlay by JS from each box's real measured position
   (see public/js/organization.js). That's what makes this robust for a real,
   unevenly-branched tree — a pure-CSS "50% split" trick looks fine for a toy
   tree but visibly misaligns once one branch is much wider/deeper than its
   siblings, which is normal for a real org chart. */
.org-tree-scroll{overflow-x:auto;padding-top:4px}
.org-tree-inner{position:relative;display:inline-block;min-width:100%}
.org-tree-lines{position:absolute;top:0;left:0;pointer-events:none;overflow:visible}
.org-tree-lines path{stroke:var(--line);stroke-width:1;fill:none}
.org-tree-branches, .org-tree-branches ul{display:flex;justify-content:center;list-style:none;margin:0;padding:0;gap:32px}
.org-tree-branches{flex-wrap:wrap}
.org-tree-branches li{display:flex;flex-direction:column;align-items:center;list-style:none}
.org-tree-branches li > ul{margin-top:44px}

.org-node{display:inline-flex;align-items:center;gap:9px;width:190px;text-align:left;
  border:1px solid var(--line);border-top:3px solid var(--line);border-radius:12px;
  background:var(--panel-2);box-shadow:0 1px 0 rgba(255,255,255,.03) inset;padding:10px 11px;
  position:relative;z-index:1}
.org-node .avatar.sm{width:34px;height:34px;border-radius:10px;font-size:12px;color:#0c0f14;font-weight:800;flex:none}
.org-node-main{min-width:0;flex:1}
.org-name{font-family:"Space Grotesk";font-weight:600;font-size:12.5px;color:var(--ink);line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.org-role{font-size:11px;color:var(--ink-3);margin-top:2px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.org-meta{font-size:10px;color:var(--ink-3);margin-top:3px;font-family:"JetBrains Mono"}
@media (max-width:700px){
  .org-node{width:150px}
}