/* ============================================================
   DIGISTREET MEDIA — Work Monitoring App
   Modern UI: light surfaces, black sidebar, yellow accent,
   soft shadows, glassmorphism, hover micro-interactions.
   Brand colours: black #141414  +  DIGISTREET yellow #ffd400.
   ============================================================ */

:root {
  --bg:           #f4f5f7;
  --surface:      #ffffff;
  --surface-2:    #f7f8fa;
  --surface-3:    #eef0f3;
  --border:       #e7e9ed;
  --border-2:     #d9dce2;
  --ink:          #141414;
  --text:         #1f2328;
  --text-dim:     #5f6672;
  --text-mute:    #99a0aa;
  --link:         #a16207;
  --yellow:       #ffd400;
  --yellow-d:     #e6c200;
  --yellow-sft:   #fff6c8;
  --yellow-faint: #fff9e0;
  --sidebar:      #161616;
  --sidebar-2:    #2b2b2b;
  --sidebar-tx:   #9aa0a6;
  --green:        #16a34a;
  --green-sft:    #dcfce7;
  --amber:        #d97706;
  --amber-sft:    #fef3c7;
  --red:          #dc2626;
  --red-sft:      #fee2e2;

  /* ---- Indigo: SECONDARY accent only ----
     Yellow + white + black stay primary (brand). Indigo adds a modern
     pop on charts, progress, highlights, secondary buttons & links. */
  --indigo:       #6366f1;
  --indigo-d:     #4f46e5;
  --indigo-dd:    #4338ca;
  --indigo-sft:   #eef2ff;
  --indigo-faint: #f6f7ff;
  --indigo-tx:    #4338ca;

  /* Rounder, friendlier corners (reference-app feel) */
  --radius:       18px;
  --radius-sm:    12px;
  --radius-lg:    24px;
  --radius-xl:    30px;
  --radius-pill:  999px;

  /* Deeper, more present shadows so cards clearly float on the canvas */
  --shadow-sm:    0 1px 3px rgba(28,28,55,.06);
  --shadow:       0 4px 16px rgba(28,28,55,.08), 0 1px 4px rgba(28,28,55,.05);
  --shadow-md:    0 16px 38px rgba(28,28,55,.12), 0 5px 12px rgba(28,28,55,.06);
  --shadow-lg:    0 28px 62px rgba(28,28,55,.17), 0 10px 22px rgba(28,28,55,.07);
  --shadow-glow:  0 12px 28px rgba(255,200,0,.34);
  --shadow-indigo:0 12px 28px rgba(99,102,241,.30);

  --glass:        rgba(255,255,255,.74);
  --ring:         0 0 0 3px rgba(255,212,0,.40);
  --ring-indigo:  0 0 0 3px rgba(99,102,241,.30);
  --ease:         cubic-bezier(.4,0,.2,1);
  --ease-spring:  cubic-bezier(.34,1.56,.64,1);
  --t-fast:       .14s var(--ease);
  --t:            .22s var(--ease);

  color-scheme: light;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
html { scroll-behavior: smooth; }

body {
  font: 15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  background-image:
    radial-gradient(1100px 520px at 100% -10%, rgba(255,212,0,.10), transparent 60%),
    radial-gradient(900px 480px at -8% 108%, rgba(99,102,241,.07), transparent 62%);
  background-attachment: fixed;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { line-height: 1.22; color: var(--ink); letter-spacing: -.02em; font-weight: 800; }
a { color: var(--link); text-decoration: none; transition: color var(--t-fast); }
a:hover { text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--yellow-d); outline-offset: 2px; border-radius: 3px; }

.muted { color: var(--text-dim); }
.small { font-size: .85rem; }
.mono  { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* ---------- Scrollbars ---------- */
* { scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-2); border-radius: 99px;
  border: 3px solid transparent; background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--text-mute); background-clip: padding-box; }

/* ---------- Brand wordmark ---------- */
.wordmark { font-weight: 800; letter-spacing: -.02em; }
.wordmark .s { color: var(--yellow); }
.wordmark-dark  { color: var(--ink); }
.wordmark-light { color: #ffffff; }
.wordmark-tag {
  font-size: .6rem; letter-spacing: .22em; font-weight: 700;
  color: var(--sidebar-tx); margin-top: .25rem;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .72rem 1.4rem; min-height: 44px; font: 700 .92rem/1 inherit;
  border: 1px solid var(--border-2); border-radius: var(--radius-pill);
  background: var(--surface); color: var(--text); cursor: pointer;
  box-shadow: var(--shadow-sm); white-space: nowrap;
  transition: background var(--t-fast), border-color var(--t-fast),
              box-shadow var(--t), transform var(--t-fast), opacity var(--t-fast);
}
.btn:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); text-decoration: none; }
.btn:active { transform: translateY(0) scale(.97); box-shadow: var(--shadow-sm); transition-duration: .06s; }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-primary {
  background: linear-gradient(180deg, #ffe24f, var(--yellow));
  border-color: var(--yellow-d); color: var(--ink); font-weight: 800;
  box-shadow: 0 6px 18px rgba(255,200,0,.30);
}
.btn-primary:hover { background: linear-gradient(180deg, #ffe24f, var(--yellow-d)); box-shadow: var(--shadow-glow); }
/* Indigo secondary CTA — for the "second action" on a screen */
.btn-indigo, .btn-accent {
  background: linear-gradient(180deg, var(--indigo), var(--indigo-d));
  border-color: var(--indigo-d); color: #fff; font-weight: 700;
}
.btn-indigo:hover, .btn-accent:hover {
  background: linear-gradient(180deg, var(--indigo), var(--indigo-dd));
  box-shadow: var(--shadow-indigo); color: #fff;
}
/* Solid black — high-contrast primary used in the reference mockups */
.btn-dark {
  background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 700;
}
.btn-dark:hover { background: #000; border-color: #000; color: #fff; box-shadow: var(--shadow-md); }
.btn-danger { background: var(--red); border-color: var(--red); color: #fff; }
.btn-danger:hover { background: #c81e1e; border-color: #c81e1e; }
.btn-ghost { background: transparent; border-color: transparent; box-shadow: none; }
.btn-ghost:hover { background: var(--surface-3); box-shadow: none; transform: none; }
.btn-block { width: 100%; }
.btn-sm { padding: .5rem 1rem; min-height: 36px; font-size: .84rem; }
.btn-lg { padding: .95rem 1.75rem; min-height: 54px; font-size: 1.05rem; font-weight: 800; }
/* Normalise bespoke per-page buttons to the global pill language + smooth hover.
   `.page X` (0,2,0) outranks the page's own `.X` (0,1,0) so radius/hover unify. */
.page .btn-pri, .page .btn-ghost, .page .btn-sec, .page .edit-btn, .page .save {
  border-radius: var(--radius-pill);
  transition: transform .15s var(--ease), box-shadow .2s var(--ease), background .15s, border-color .15s;
}
.page .btn-pri:hover, .page .btn-ghost:hover, .page .btn-sec:hover, .page .edit-btn:hover, .page .save:hover {
  transform: translateY(-2px); box-shadow: var(--shadow-md);
}
.page .btn-pri:active, .page .btn-ghost:active, .page .btn-sec:active, .page .edit-btn:active, .page .save:active {
  transform: translateY(0) scale(.97);
}

/* ---------- Unified elegant hover-lift across stat / KPI boxes ----------
   Same smooth motion language as cards + buttons, so every box feels consistent. */
.stat, .sec-stat, .tk-kpi .k, .be-kpi .k, .dg-kpi, .kpi, .el-kpi .kpi {
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.stat:hover, .sec-stat:hover, .tk-kpi .k:hover, .be-kpi .k:hover, .dg-kpi:hover, .kpi:hover, .el-kpi .kpi:hover {
  transform: translateY(-2px); box-shadow: var(--shadow-md);
}
/* …plus a subtle warm brand tint so the hovered section is clearly highlighted
   (colored tiles like .dg-kpi keep their own fill — excluded on purpose). */
.stat:hover, .sec-stat:hover, .tk-kpi .k:hover, .be-kpi .k:hover, .kpi:hover, .el-kpi .kpi:hover,
.ta-row:hover, a.card:hover, .card.is-clickable:hover, a.tcard:hover, .tcard.is-clickable:hover {
  background: var(--yellow-faint);
}

/* ---------- Forms ---------- */
.form { display: flex; flex-direction: column; gap: .95rem; }
.field { display: flex; flex-direction: column; gap: .35rem; min-width: 150px; }
.field > span { font-size: .85rem; color: var(--text-dim); font-weight: 600; }
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  width: 100%; padding: .72rem .95rem; font: inherit;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-2); border-radius: var(--radius-sm);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
/* keep every form control the same height so labels line up in filter bars */
input:not([type="checkbox"]):not([type="radio"]), select { height: 47px; }
/* Native, correctly-sized checkboxes/radios — never full-width (was stretching
   to 100% and overlapping adjacent controls, e.g. the bulk-verify toolbar). */
input[type="checkbox"], input[type="radio"] {
  width: 16px; height: 16px; flex: none; padding: 0; margin: 0;
  accent-color: var(--ink); cursor: pointer;
}
input:hover, select:hover, textarea:hover { border-color: var(--text-mute); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--yellow-d); box-shadow: var(--ring);
}

/* ---------- Alerts ---------- */
.alert {
  padding: .8rem 1.05rem; border-radius: var(--radius-sm);
  font-size: .88rem; border: 1px solid transparent;
}
.alert-error   { background: #fef2f2; border-color: #fab8b8; color: #991b1b; }
.alert-warn    { background: #fffbeb; border-color: #fcd34d; color: #92400e; }
.alert-success { background: #f0fdf4; border-color: #86efac; color: #166534; }
.alert-info    { background: #eff6ff; border-color: #93c5fd; color: #1e40af; }

/* ---------- Badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .22rem .6rem; border-radius: 999px;
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em;
}
.badge-productive   { background: #dcfce7; color: #15803d; }
.badge-unproductive { background: #fee2e2; color: #b91c1c; }
.badge-neutral      { background: #e9ebee; color: #4b5563; }
.badge-admin        { background: var(--ink); color: var(--yellow); }
.badge-hr           { background: #fef3c7; color: #92400e; }
.badge-manager      { background: #e0e7ff; color: #3730a3; }
.badge-employee     { background: #e9ebee; color: #4b5563; }
.badge-info         { background: #dbeafe; color: #1e40af; }
.badge-warning      { background: #fef3c7; color: #92400e; }
.badge-critical     { background: #fee2e2; color: #b91c1c; }
.badge-indigo       { background: var(--indigo-sft); color: var(--indigo-tx); }
.badge-yellow       { background: var(--yellow-sft); color: #92400e; }
.badge-success      { background: var(--green-sft); color: #15803d; }
.badge-dark         { background: var(--ink); color: #fff; }

/* ---------- Segmented pill control (filter tabs) ----------
   Mirrors the In Progress / To Do / Completed switchers in the references.
   Wrap a row of <a>/<button> in .segment; mark the current one .on. */
.segment {
  display: inline-flex; gap: .2rem; padding: .25rem;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-pill);
}
.segment > a, .segment > button {
  border: 0; background: transparent; cursor: pointer;
  padding: .42rem .95rem; border-radius: var(--radius-pill);
  font: 650 .82rem/1 inherit; color: var(--text-dim);
  display: inline-flex; align-items: center; gap: .4rem;
  transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}
.segment > a:hover, .segment > button:hover { color: var(--ink); text-decoration: none; }
.segment > .on, .segment > [aria-current="true"] {
  background: var(--ink); color: #fff; box-shadow: var(--shadow-sm);
}
.segment .seg-count {
  font-size: .72rem; font-weight: 800; padding: .05rem .4rem;
  border-radius: var(--radius-pill); background: rgba(0,0,0,.07);
}
.segment > .on .seg-count { background: rgba(255,255,255,.22); }

/* ---------- Avatar stack ---------- */
.avatar-stack { display: inline-flex; align-items: center; }
.avatar-stack > * { margin-left: -9px; border: 2px solid var(--surface); border-radius: 50%; }
.avatar-stack > *:first-child { margin-left: 0; }
.avatar-stack .more {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--indigo-sft); color: var(--indigo-tx);
  font-size: .7rem; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ---------- Cards ---------- */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  transition: box-shadow var(--t), border-color var(--t), transform var(--t);
}
/* Interactive cards (anchors / [data-href]) lift on hover */
a.card:hover, .card.is-clickable:hover {
  box-shadow: var(--shadow-lg); transform: translateY(-3px);
  border-color: var(--border-2); text-decoration: none;
}
.card-head {
  padding: 1.15rem 1.55rem; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.card-head h2 {
  font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em;
  display: flex; align-items: center; gap: .55rem;
}
/* Colored accent bar before every card-head title — clear section classification */
.card-head h2::before {
  content: ""; width: 4px; height: 18px; border-radius: 99px; flex-shrink: 0;
  background: linear-gradient(180deg, var(--indigo), var(--indigo-dd));
}
.card-body { padding: 1.6rem; }

/* Accent rail variants — a colored left edge for emphasis */
.card-accent       { border-left: 3px solid var(--indigo); }
.card-accent-yellow{ border-left: 3px solid var(--yellow); }
.card-accent-green { border-left: 3px solid var(--green); }
.card-accent-red   { border-left: 3px solid var(--red); }

/* ---------- Color-coded grouped section (forms + content) ----------
   Wrap related fields in <section class="fsec fsec-indigo"> with a
   <div class="fsec-h"><span class="fsec-ic">①</span><div><div class="t">Title</div>
   <div class="s">subtitle</div></div></div> header. The accent colour makes
   each section instantly distinguishable — the "clear classification" look. */
.fsec {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 1.5rem 1.65rem; position: relative; overflow: hidden;
}
.fsec::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--indigo); }
.fsec + .fsec { margin-top: 1.25rem; }
.fsec-h { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.25rem; }
.fsec-ic {
  width: 34px; height: 34px; border-radius: 11px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1rem; background: var(--indigo-sft); color: var(--indigo-tx);
}
.fsec-h .t { font-size: 1.08rem; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
.fsec-h .s { font-size: .8rem; color: var(--text-dim); margin-top: .12rem; line-height: 1.4; }
/* colour variants */
.fsec-indigo::before { background: var(--indigo); } .fsec-indigo .fsec-ic { background: var(--indigo-sft); color: var(--indigo-tx); }
.fsec-yellow::before { background: var(--yellow); } .fsec-yellow .fsec-ic { background: var(--yellow-sft); color: #92400e; }
.fsec-green::before  { background: var(--green); }  .fsec-green  .fsec-ic { background: var(--green-sft); color: #15803d; }
.fsec-amber::before  { background: var(--amber); }  .fsec-amber  .fsec-ic { background: var(--amber-sft); color: #92400e; }
.fsec-dark::before   { background: var(--ink); }    .fsec-dark   .fsec-ic { background: var(--ink); color: var(--yellow); }

/* ========== SOFT JOB/TASK CARD GRID — calm colored cards (reference style) ==========
   Markup: <div class="tk-list"><div class="tk-card tc0..tc5"> … </div></div>
   Rotate colour by index: class="tk-card tc<?= $i % 6 ?>". Dark text on muted pastels —
   colour gently codes each card without competing with the content. */
.tk-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}
@media(max-width:820px){.tk-list{grid-template-columns:1fr}}
.tk-card{position:relative;display:flex;flex-direction:column;border-radius:26px;padding:1.55rem 1.7rem 1.45rem;color:var(--ink);box-shadow:var(--shadow);transition:transform var(--t),box-shadow var(--t);cursor:pointer;overflow:hidden;min-height:206px}
.tk-card::after{content:"";position:absolute;right:-40px;bottom:-60px;width:170px;height:170px;border-radius:50%;background:rgba(0,0,0,.035);pointer-events:none}
.tk-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.tk-card.tc0{background:#e6e1f6}.tk-card.tc1{background:#f6ead0}.tk-card.tc2{background:#dde9d0}
.tk-card.tc3{background:#f6ddd2}.tk-card.tc4{background:#dbe7f4}.tk-card.tc5{background:#ecdeed}
.tk-card.done{opacity:.55}.tk-card.done .ttl{text-decoration:line-through}
.tk-card > *{position:relative;z-index:1}
.tk-card .top{display:flex;justify-content:space-between;align-items:flex-start;gap:.6rem;margin-bottom:.95rem}
.tk-card .pri{display:inline-flex;align-items:center;gap:.3rem;background:rgba(0,0,0,.06);color:var(--ink);font-size:.7rem;font-weight:800;padding:.34rem .72rem;border-radius:99px;text-transform:uppercase;letter-spacing:.04em}
.tk-card .chk{width:32px;height:32px;border-radius:50%;border:2px solid rgba(0,0,0,.2);background:rgba(255,255,255,.5);color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.92rem;flex-shrink:0;transition:all .15s;padding:0}
.tk-card .chk:hover{background:#fff;transform:scale(1.08)}
.tk-card .ttl{font-size:1.3rem;font-weight:850;line-height:1.22;letter-spacing:-.02em;margin:0;color:var(--ink)}
.tk-card .sub{font-size:.82rem;color:var(--text-dim);margin-top:.45rem;display:flex;gap:.45rem;flex-wrap:wrap;align-items:center}
.tk-card .sub .tag{background:rgba(0,0,0,.055);color:var(--ink);padding:.22rem .55rem;border-radius:99px;font-weight:700}
.tk-card .prog{margin-top:auto;padding-top:1.2rem}
.tk-card .bar{height:7px;border-radius:99px;background:rgba(0,0,0,.08);overflow:hidden}
.tk-card .bar>span{display:block;height:100%;border-radius:99px;background:rgba(0,0,0,.5);transition:width .5s var(--ease)}
.tk-card .plabel{font-size:.74rem;font-weight:800;color:var(--text-dim);margin-top:.4rem}
.tk-card .foot{display:flex;justify-content:space-between;align-items:center;gap:.6rem;margin-top:1rem}
.tk-card .due{display:inline-flex;align-items:center;gap:.35rem;background:rgba(0,0,0,.06);color:var(--ink);font-size:.78rem;font-weight:800;padding:.5rem .85rem;border-radius:99px}
.tk-card .due.over{background:#f6cdc8;color:#b3261e}.tk-card .due.today{background:#f6e3b2;color:#8a5a00}
.tk-card .arrow{width:46px;height:46px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0;transition:transform .18s;text-decoration:none;font-weight:800}
.tk-card:hover .arrow{transform:translateX(4px)}
.tk-card .acts{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.95rem;padding-top:.95rem;border-top:1px solid rgba(0,0,0,.09)}
.tk-card .acts button,.tk-card .acts a{background:rgba(255,255,255,.55);border:1px solid rgba(0,0,0,.09);color:var(--ink);font-size:.78rem;font-weight:800;padding:.46rem .9rem;border-radius:99px;cursor:pointer;text-decoration:none;transition:background .15s}
.tk-card .acts button:hover,.tk-card .acts a:hover{background:#fff}
.tk-card .acts .note{flex:1 1 100%;display:flex;gap:.45rem;align-items:center}
.tk-card .acts .note input{flex:1;min-width:0;font-size:.8rem;padding:.5rem .7rem;border:1px solid rgba(0,0,0,.14);border-radius:99px;background:#fff;color:var(--ink)}

/* Feature / hero card — the big colorful highlight tile from the references.
   Use .feature-card with a --fc accent var, or the named tints below. */
.feature-card {
  border-radius: var(--radius-lg); padding: 1.5rem 1.6rem;
  color: #fff; position: relative; overflow: hidden;
  box-shadow: var(--shadow-md);
  background: linear-gradient(135deg, var(--indigo), var(--indigo-d));
}
.feature-card.fc-yellow {
  background: linear-gradient(135deg, #ffe24f, var(--yellow-d)); color: var(--ink);
}
.feature-card.fc-dark   { background: linear-gradient(135deg, #2b2b3a, #141414); }
.feature-card.fc-green  { background: linear-gradient(135deg, #34d399, #059669); }
.feature-card::after {
  content: ""; position: absolute; right: -36px; bottom: -56px;
  width: 190px; height: 190px; border-radius: 50%;
  background: rgba(255,255,255,.10); pointer-events: none;
}

/* ========== GLOBAL HERO BANNER ==========
   The signature reference element — a bold indigo gradient welcome card.
   Drop <div class="hero-banner">…</div> at the top of ANY page.
   Variants: .hb-yellow .hb-dark .hb-green for different accents. */
.hero-banner {
  position: relative; overflow: hidden; border-radius: 26px;
  padding: 1.7rem 1.9rem; margin-bottom: 1.4rem; color: #fff;
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 55%, #4338ca 100%);
  box-shadow: 0 20px 44px -18px rgba(79,70,229,.55);
}
.hero-banner.hb-yellow { background: linear-gradient(135deg,#ffe24f 0%, var(--yellow) 55%, var(--yellow-d) 100%); color: var(--ink); box-shadow: 0 20px 44px -18px rgba(255,200,0,.5); }
.hero-banner.hb-dark   { background: linear-gradient(135deg,#2e2b57 0%, #232248 38%, #17161f 100%); box-shadow: var(--shadow-lg); }
.hero-banner.hb-green  { background: linear-gradient(135deg,#34d399 0%, #059669 100%); box-shadow: 0 20px 44px -18px rgba(5,150,105,.45); }
.hero-banner::after { content: ""; position: absolute; right: -60px; top: -90px; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.16), transparent 64%); pointer-events: none; }
.hero-banner::before { content: ""; position: absolute; left: -50px; bottom: -110px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(255,212,0,.13), transparent 66%); pointer-events: none; }
.hero-banner.hb-yellow::before { background: radial-gradient(circle, rgba(99,102,241,.16), transparent 66%); }
.hero-banner .hb-top { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: flex-start; gap: 1.2rem; flex-wrap: wrap; }
.hero-banner h1, .hero-banner .hb-title { font-size: 2.05rem; line-height: 1.08; font-weight: 850; letter-spacing: -.03em; color: inherit; margin: 0; }
.hero-banner .wave { display: inline-block; animation: wave 1.8s ease-in-out 1; transform-origin: 70% 70%; }
.hero-banner .hb-sub { font-size: .9rem; color: rgba(255,255,255,.82); display: flex; align-items: center; gap: .5rem; margin-top: .45rem; flex-wrap: wrap; font-weight: 500; }
.hero-banner.hb-yellow .hb-sub { color: rgba(20,20,20,.7); }
.hero-banner .live-dot { width: 9px; height: 9px; background: #a7f3d0; border-radius: 50%; display: inline-block; margin-right: 5px; box-shadow: 0 0 0 3px rgba(167,243,208,.25); }
.hero-banner .hb-pills { position: relative; z-index: 1; display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; }
.hero-banner .hb-pill {
  background: rgba(255,255,255,.16); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.2); border-radius: 999px; padding: .42rem .9rem;
  font-size: .82rem; font-weight: 700; color: #fff; display: inline-flex; align-items: center; gap: .35rem;
}
.hero-banner.hb-yellow .hb-pill { background: rgba(20,20,20,.08); border-color: rgba(20,20,20,.14); color: var(--ink); }
.hero-banner .hb-pill.warn   { background: rgba(254,243,199,.22); border-color: rgba(254,243,199,.4); }
.hero-banner .hb-pill.danger { background: rgba(254,202,202,.24); border-color: rgba(254,202,202,.45); }
.hero-banner .hb-pill.good   { background: rgba(167,243,208,.24); border-color: rgba(167,243,208,.5); }
/* Big stat shown inside the hero (the "Remaining Tasks / 6" treatment) */
.hero-banner .hb-bigstat { position: relative; z-index: 1; margin-top: 1rem; display: flex; align-items: baseline; gap: .6rem; }
.hero-banner .hb-bignum { font-size: 2.6rem; font-weight: 850; line-height: 1; letter-spacing: -.03em; }
@media (max-width: 680px) { .hero-banner { padding: 1.35rem 1.35rem; border-radius: 20px; } .hero-banner h1, .hero-banner .hb-title { font-size: 1.7rem; } }
/* Action buttons / links passed into a hero via $heroRightHtml — frosted glass on the dark gradient */
.hero-banner .hb-top .actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.hero-banner .hb-top .actions button,
.hero-banner .hb-top .actions a {
  background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.28);
  padding: .6rem 1.1rem; border-radius: var(--radius-pill); font-weight: 700; font-size: .85rem;
  cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: .35rem;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .15s, transform .12s;
}
.hero-banner .hb-top .actions button:hover,
.hero-banner .hb-top .actions a:hover { background: rgba(255,255,255,.27); transform: translateY(-1px); }
.hero-banner.hb-yellow .hb-top .actions button,
.hero-banner.hb-yellow .hb-top .actions a { background: rgba(20,20,20,.1); color: var(--ink); border-color: rgba(20,20,20,.18); }

/* ========== MODERN TASK / LIST CARD ========== */
.tcard {
  display: block; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1rem 1.15rem; text-decoration: none; color: inherit;
  box-shadow: var(--shadow); transition: transform var(--t), box-shadow var(--t), border-color var(--t);
  position: relative;
}
a.tcard:hover, .tcard.is-clickable:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); text-decoration: none; }
.tcard .tc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .7rem; }
.tcard .tc-title { font-weight: 750; color: var(--ink); font-size: .98rem; line-height: 1.3; }
.tcard .tc-meta { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: .5rem; font-size: .8rem; color: var(--text-dim); }

/* Section header — bold title + "view all" link, used above card groups */
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: .2rem 0 .9rem; }
.sec-head h3 { font-size: 1.22rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); display: flex; align-items: center; gap: .55rem; }
.sec-head h3::before { content: ""; width: 5px; height: 22px; border-radius: 99px; flex-shrink: 0; background: linear-gradient(180deg, var(--yellow), var(--yellow-d)); }
.sec-head .sec-count { font-size: .75rem; font-weight: 800; background: var(--ink); color: var(--yellow); padding: .12rem .5rem; border-radius: 999px; }
.sec-head a { font-size: .82rem; font-weight: 700; color: var(--indigo-tx); text-decoration: none; }
.sec-head a:hover { text-decoration: underline; }

/* ---------- Collapsible section (details/summary) ---------- */
details.fold > summary {
  padding: 1rem 1.25rem; cursor: pointer; list-style: none;
  font-size: .98rem; font-weight: 700; color: var(--ink);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::after {
  content: "+"; flex-shrink: 0;
  width: 22px; height: 22px; border-radius: 6px;
  background: var(--surface-3); color: var(--text-dim);
  font-size: 1.05rem; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
details.fold[open] > summary::after { content: "\2212"; }
details.fold[open] > summary { border-bottom: 1px solid var(--border); }
details.fold > .fold-body { padding: 1.25rem; }

/* ---------- Attendance calendar (hr/mine) ---------- */
.att-week-row {
  display: grid; gap: .4rem; margin-bottom: .45rem;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.att-week {
  font-size: .68rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-dim);
  text-align: center; padding: .25rem 0;
}
.att-cal {
  display: grid; gap: .4rem;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.att-day {
  aspect-ratio: 1; border: 1px solid var(--border);
  border-radius: 9px; padding: .35rem .45rem;
  display: flex; flex-direction: column; justify-content: space-between;
  background: var(--surface);
}
.att-day .att-d { font-size: .72rem; color: var(--text-mute); font-weight: 600; }
.att-day .att-lbl { font-weight: 800; font-size: 1rem; align-self: flex-end; }
.att-day.pad     { border: 0; background: transparent; }
.att-day.future  { background: var(--surface-2); }
.att-day.future .att-lbl { display: none; }
.att-day.off     { background: var(--surface-3); border-style: dashed; }
.att-day.off .att-lbl { display: none; }
.att-day.present { background: #ecfdf5; border-color: #a7f3d0; }
.att-day.present .att-lbl { color: var(--green); }
.att-day.half    { background: #fffbeb; border-color: #fcd34d; }
.att-day.half .att-lbl    { color: var(--amber); }
.att-day.leave   { background: #eff6ff; border-color: #93c5fd; }
.att-day.leave .att-lbl   { color: #1e40af; }
.att-day.holiday { background: #fef3c7; border-color: #fcd34d; }
.att-day.holiday .att-lbl { color: #92400e; }
.att-day.absent  { background: #fef2f2; border-color: #fca5a5; }
.att-day.absent .att-lbl  { color: var(--red); }

/* ---------- Today's attendance chips ---------- */
.att-chips { display: flex; flex-wrap: wrap; gap: .55rem; }
.att-chip {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .35rem .7rem .35rem .4rem;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 99px; font-size: .85rem; color: var(--text);
  text-decoration: none; transition: background var(--t-fast), border-color var(--t-fast);
}
.att-chip:hover { background: var(--yellow-faint); border-color: var(--yellow-d); text-decoration: none; }
.att-avatar { width: 26px !important; height: 26px !important; font-size: .7rem !important; }

/* ---------- Muster grid ---------- */
.muster-wrap { overflow-x: auto; }
table.muster {
  border-collapse: collapse; font-size: .78rem; width: auto; min-width: 100%;
}
table.muster th, table.muster td {
  padding: .35rem .45rem; text-align: center;
  border: 1px solid var(--border); white-space: nowrap;
}
table.muster th { background: var(--surface-2); font-weight: 700; color: var(--text-dim); }
table.muster th.wk    { background: var(--surface-3); }
table.muster th.today { background: var(--yellow-faint); color: var(--ink); }
table.muster td.muster-emp,
table.muster th.muster-emp {
  text-align: left; min-width: 170px; background: var(--surface-2);
  font-weight: 700; color: var(--ink); position: sticky; left: 0; z-index: 1;
}
table.muster td.p   { background: #ecfdf5; color: var(--green); font-weight: 800; }
table.muster td.hd  { background: #fffbeb; color: var(--amber); font-weight: 800; }
table.muster td.a   { background: #fef2f2; color: var(--red); font-weight: 800; }
table.muster td.l   { background: #eff6ff; color: #1e40af; font-weight: 800; }
table.muster td.ho  { background: #fef3c7; color: #92400e; font-weight: 800; }
table.muster td.off { background: var(--surface-3); }
table.muster td.f   { background: var(--surface-2); color: transparent; }

/* ---------- Auth pages ---------- */
.auth-body {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 2rem;
  background: var(--bg);
  background-image:
    radial-gradient(680px 420px at 18% 12%, rgba(255,212,0,.18), transparent 60%),
    radial-gradient(620px 460px at 88% 92%, rgba(20,20,20,.06), transparent 62%);
}
.auth-wrap { width: 100%; max-width: 410px; }
.auth-card {
  background: var(--surface); border: 1px solid var(--border);
  border-top: 3px solid var(--yellow); border-radius: var(--radius-lg);
  padding: 2.1rem 2rem; box-shadow: var(--shadow-lg);
}
.auth-brand { text-align: center; margin-bottom: 1.5rem; }
.auth-logo { margin-bottom: 1rem; }
.brand-logo { max-width: 210px; height: auto; display: block; margin: 0 auto; }
.auth-logo .wordmark { font-size: 1.7rem; }
.auth-brand h1 { font-size: 1.2rem; margin-bottom: .25rem; }
.auth-card .alert { margin-bottom: 1rem; }
.auth-foot { text-align: center; margin-top: 1.25rem; }

/* ---------- App shell ---------- */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 250px; flex-shrink: 0; z-index: 20;
  background: var(--sidebar);
  background-image: radial-gradient(360px 200px at 50% -8%, rgba(255,212,0,.10), transparent 72%);
  color: var(--sidebar-tx); display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.sidebar .brand {
  padding: 1.35rem 1.3rem 1.2rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.sidebar .brand .wordmark { font-size: 1.2rem; }
.sidebar .brand .brand-logo-side {
  display: block; width: 160px; max-width: 100%; height: auto;
}
.nav { padding: .8rem .7rem; display: flex; flex-direction: column; gap: .12rem; flex: 1; overflow-y: auto; }
.nav::-webkit-scrollbar { width: 6px; }
.nav::-webkit-scrollbar-thumb { background: #333; }
.nav-section {
  font-size: .67rem; text-transform: uppercase; letter-spacing: .13em;
  color: #6a6c71; padding: 1.05rem .8rem .4rem; font-weight: 700;
}

/* Collapsible nav groups (<details><summary>) */
.nav-group { margin: 0; padding: 0; border: none; background: none; }
.nav-group + .nav-group { margin-top: .25rem; }
.nav-group > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: #8b8d92;
  padding: .75rem .8rem .55rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  border-radius: 8px;
  transition: background .15s, color .15s;
  outline: none;
}
.nav-group > summary:hover { color: #fff; background: rgba(255,255,255,.04); }
.nav-group > summary::-webkit-details-marker,
.nav-group > summary::marker { display: none; content: ""; }
.nav-group > summary .chev {
  opacity: .55;
  transform: rotate(-90deg);
  transition: transform .18s ease, opacity .15s;
  flex-shrink: 0;
}
.nav-group[open] > summary { color: #ffd400; }
.nav-group[open] > summary .chev { transform: rotate(0deg); opacity: .9; }
.nav-group > .nav-group-body {
  display: flex; flex-direction: column; gap: .12rem;
  padding: .15rem 0 .35rem;
  animation: navExpand .18s ease;
}
@keyframes navExpand {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}
.nav-link {
  display: flex; align-items: center; gap: .65rem;
  padding: .62rem .8rem; border-radius: 10px;
  color: var(--sidebar-tx); font-size: .89rem; font-weight: 500;
  transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t);
}
.nav-link .nav-ico { flex-shrink: 0; opacity: .78; transition: opacity var(--t-fast), transform var(--t); }
.nav-link .nav-label { flex: 1; }
.nav-link:hover { background: var(--sidebar-2); color: #fff; text-decoration: none; }
.nav-link:hover .nav-ico { opacity: 1; transform: scale(1.1); }
.nav-link:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(255,212,0,.55); }
.nav-link.active {
  background: linear-gradient(180deg, #ffe24f, var(--yellow));
  color: var(--ink); font-weight: 700;
  box-shadow: 0 5px 14px rgba(255,200,0,.28);
}
.nav-link.active .nav-ico { opacity: 1; }

/* ===== Status dot for the Live Activity nav item ===== */
.nav-status-dot {
  flex-shrink: 0;
  width: 9px; height: 9px; border-radius: 50%;
  background: #6b7280;
  box-shadow: 0 0 0 2px rgba(255,255,255,.05);
  position: relative;
  animation: navDotPulse 2s ease-in-out infinite;
}
.nav-status-dot.ns-live  { background: #22c55e; box-shadow: 0 0 0 2px rgba(34,197,94,.18); }
.nav-status-dot.ns-warn  { background: #f59e0b; box-shadow: 0 0 0 2px rgba(245,158,11,.18); }
.nav-status-dot.ns-off   { background: #ef4444; box-shadow: 0 0 0 2px rgba(239,68,68,.18); animation: none; }
.nav-status-dot.ns-never { background: #9ca3af; animation: none; }
.nav-link.active .nav-status-dot { box-shadow: 0 0 0 2px rgba(10,10,10,.15); }
@keyframes navDotPulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: .55; transform: scale(.82); }
}

.sidebar .nav-foot {
  padding: .9rem 1.2rem; border-top: 1px solid rgba(255,255,255,.07); color: #66686d;
}

.content { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .8rem 1.7rem;
  background: var(--glass);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  border-bottom: 1px solid var(--border);
}
.topbar h1 {
  font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em;
  display: flex; align-items: center; gap: .6rem;
}
.topbar h1::before {
  content: ""; width: 4px; height: 19px; border-radius: 99px; flex-shrink: 0;
  background: linear-gradient(180deg, var(--yellow), var(--yellow-d));
}
.topbar .user { display: flex; align-items: center; gap: .65rem; font-size: .85rem; }
.avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(145deg, #313131, var(--ink));
  color: var(--yellow); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .82rem;
  box-shadow: 0 0 0 2px rgba(255,212,0,.30), var(--shadow-sm);
}

.page { padding: 2.15rem 2.15rem 2.6rem; display: flex; flex-direction: column; gap: 1.7rem; animation: pageRise .4s var(--ease) both; }
/* .page-head is now a gradient HERO banner globally — so every page that
   still uses it gets the modern look without per-page edits. Pages that opt
   into the richer partials/hero.php (pills, big numbers) simply don't use
   .page-head. */
.page-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; position: relative; overflow: hidden;
  background: linear-gradient(135deg, #2e2b57 0%, #232248 38%, #17161f 100%);
  color: #fff; border-radius: 22px; padding: 1.45rem 1.75rem;
  box-shadow: var(--shadow-lg);
}
.page-head::after {
  content: ""; position: absolute; right: -50px; top: -80px;
  width: 240px; height: 240px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,212,0,.12), transparent 64%);
  pointer-events: none;
}
.page-head > * { position: relative; z-index: 1; }
.page-head h2 { font-size: 1.7rem; font-weight: 850; letter-spacing: -.03em; color: #fff; }
.page-head h2 + p, .page-head .muted, .page-head .muted.small, .page-head p.muted,
.page-head .sub { color: rgba(255,255,255,.78) !important; margin-top: .2rem; }
.page-head strong { color: #fff; }
/* Buttons / nav inside the hero: translucent so they read on the dark bg */
.page-head .btn:not(.btn-primary):not(.btn-danger) {
  background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.22); color: #fff;
}
.page-head .btn:not(.btn-primary):not(.btn-danger):hover { background: rgba(255,255,255,.22); }
.page-head a:not(.btn) { color: #fff; text-decoration: underline; }

/* Custom per-page header wrappers → same gradient hero treatment.
   These pages built their own header div instead of using .page-head; none
   of them set their own background/text colour, so styling here is safe and
   converts them all at once (focus, retention, agents, announcements,
   accounts overview/reports, idle managers, payments, consents). */
.fc-head, .ret-head, .ag-head, .ann-head, .am-head, .rpt-head, .idle-head,
.pay-head, .cs-head {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #2e2b57 0%, #232248 38%, #17161f 100%) !important;
  color: #fff; border-radius: 22px; padding: 1.45rem 1.75rem; margin-bottom: 1.2rem;
  box-shadow: var(--shadow-lg);
}
.fc-head h2, .ret-head h2, .ag-head h2, .ann-head h2, .am-head h2, .rpt-head h2,
.idle-head h2, .pay-head h2, .cs-head h2 { color: #fff !important; }
.fc-head .sub, .ret-head .sub, .ag-head .sub, .ann-head .sub, .am-head .sub,
.rpt-head .sub, .idle-head .sub, .pay-head .sub, .cs-head .sub,
.fc-head p, .ret-head p, .ag-head p, .ann-head p, .am-head p, .rpt-head p,
.idle-head p, .pay-head p, .cs-head p { color: rgba(255,255,255,.82) !important; }
.fc-head strong, .ret-head strong, .ag-head strong, .ann-head strong, .am-head strong,
.rpt-head strong, .idle-head strong, .pay-head strong, .cs-head strong,
.am-head .now, .rpt-head .now { color: #fff; }
/* buttons / month-nav inside these headers → translucent so they read on dark */
.fc-head .btn, .ret-head .btn, .ag-head .btn, .ann-head .btn, .am-head .btn,
.rpt-head .btn, .idle-head .btn, .pay-head .btn, .cs-head .btn,
.am-head .am-month-nav a, .rpt-head .rpt-month-nav a {
  background: rgba(255,255,255,.14) !important; border-color: rgba(255,255,255,.24) !important; color: #fff !important;
}

/* More custom header wrappers: client scope, monitoring settings, payment
   client-board + invoice detail. Same gradient hero treatment. */
.cli-head, .ms-head, .cb-head, .iv-head {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #2e2b57 0%, #232248 38%, #17161f 100%) !important;
  color: #fff; border-radius: 22px; padding: 1.45rem 1.75rem; margin-bottom: 1.2rem;
  box-shadow: var(--shadow-lg);
}
.cli-head h2, .ms-head h2, .cb-head h2, .iv-head h2 { color: #fff !important; }
.cli-head .sub, .ms-head .sub, .cb-head .sub, .iv-head .sub,
.cli-head p, .ms-head p, .cb-head p, .iv-head p { color: rgba(255,255,255,.82) !important; }
.cli-head strong, .ms-head strong, .cb-head strong, .iv-head strong { color: #fff; }
.cli-head .btn, .ms-head .btn, .cb-head .btn, .iv-head .btn {
  background: rgba(255,255,255,.14) !important; border-color: rgba(255,255,255,.24) !important; color: #fff !important;
}
.cli-head a:not(.btn), .cb-head a:not(.btn), .iv-head a:not(.btn) { color: #fff; }

/* ---------- Soft tinted info chips / pills (reuse across pages) ---------- */
.chip-soft {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .7rem; border-radius: var(--radius-pill);
  font-size: .76rem; font-weight: 700; line-height: 1;
  background: var(--surface-2); color: var(--text-dim);
}
.chip-soft.cs-indigo { background: var(--indigo-sft); color: var(--indigo-tx); }
.chip-soft.cs-yellow { background: var(--yellow-sft); color: #92400e; }
.chip-soft.cs-green  { background: var(--green-sft);  color: #15803d; }
.chip-soft.cs-red    { background: var(--red-sft);    color: #b91c1c; }

/* Generic soft info box (replaces inline-styled ones over time) */
.info-box {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: .85rem 1rem;
}

@keyframes pageRise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Stat grid ---------- */
.stat-grid {
  display: grid; gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.stat { position: relative; padding: 1.4rem 1.5rem; overflow: hidden; }
.stat::before {
  content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--yellow), var(--yellow-d));
  opacity: 0; transition: opacity var(--t);
}
.stat:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: #f1da80; }
.stat:hover::before { opacity: 1; }
/* Indigo-accented stat (secondary metric tiles) */
.stat.stat-indigo::before { background: linear-gradient(180deg, var(--indigo), var(--indigo-d)); }
.stat.stat-indigo:hover { border-color: #c7cbf5; }
.stat .stat-label {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-dim); font-weight: 700;
}
.stat .stat-value { font-size: 2.1rem; font-weight: 850; margin-top: .4rem; color: var(--ink); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.stat .stat-sub { font-size: .8rem; color: var(--text-mute); margin-top: .25rem; }

/* ---------- Tables ---------- */
.table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.table th {
  text-align: left; padding: .85rem 1.1rem; color: var(--text-mute);
  font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 800;
  border-bottom: 1px solid var(--border); background: var(--surface-2);
}
.table td { padding: .92rem 1.1rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background var(--t-fast); }
.table tbody tr:hover { background: var(--yellow-faint); }
.table tfoot td { background: var(--surface-2); border-bottom: 0; }
/* Tables that aren't already inside a .card get the rounded floating-card chrome */
.page > .table,
.page > form > .table { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.page > .table th:first-child, .page > form > .table th:first-child { border-top-left-radius: var(--radius); }
.page > .table th:last-child,  .page > form > .table th:last-child  { border-top-right-radius: var(--radius); }
/* Lift the bespoke one-off tables to the same airy rhythm (higher specificity wins) */
.page .wl-table td, .page .pay-table td, .page .cs-table td, .page .wo-tbl td, .page .rpt-table td,
.page .dg-table td, .page .ta td { padding: .9rem 1.05rem; }
.page .wl-table th, .page .pay-table th, .page .cs-table th, .page .wo-tbl th, .page .rpt-table th,
.page .dg-table th, .page .ta th { padding: .82rem 1.05rem; font-size: .67rem; letter-spacing: .06em; font-weight: 800; }
.page .wl-table tbody tr:hover td, .page .pay-table tbody tr:hover td, .page .cs-table tbody tr:hover td,
.page .wo-tbl tbody tr:hover td, .page .rpt-table tbody tr:hover td { background: var(--yellow-faint); }

/* ---------- Key/value detail list ----------
   For label→value "Account Details" style cards. Avoids the half-row
   hover artefact you get when a 2-column th/td table picks up the table
   row-hover only on the <td>. */
.kv { margin: 0; }
.kv > div {
  display: flex; gap: 1rem; align-items: baseline;
  padding: .72rem .1rem; border-bottom: 1px solid var(--border);
}
.kv > div:last-child { border-bottom: 0; }
.kv dt {
  flex: 0 0 150px; color: var(--text-dim);
  font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700;
}
.kv dd { margin: 0; flex: 1 1 auto; font-size: .9rem; color: var(--ink); line-height: 1.5; }
@media (max-width: 560px) {
  .kv > div { flex-direction: column; gap: .15rem; }
  .kv dt { flex-basis: auto; }
}

/* ---------- Utilities ---------- */
.row { display: flex; gap: 1rem; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.grow { flex: 1; }
.empty { text-align: center; padding: 3rem 1rem; color: var(--text-mute); }

/* ---------- Pairing code ---------- */
.paircode {
  display: inline-block;
  font: 800 1.6rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .28em; color: var(--ink);
  background: var(--yellow-sft); border: 1px dashed var(--yellow-d);
  border-radius: 11px; padding: .9rem 1.1rem .9rem 1.4rem;
}

/* ---------- Monitoring views ---------- */
.bar { height: 9px; background: var(--surface-3); border-radius: 99px; overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--yellow-d); border-radius: 99px; transition: width .6s var(--ease); }
.bar.cat-productive   > span { background: var(--green); }
.bar.cat-unproductive > span { background: var(--red); }
.bar.cat-neutral      > span { background: var(--text-mute); }
.bar.cat-indigo       > span { background: linear-gradient(90deg, var(--indigo), var(--indigo-d)); }
.bar.cat-yellow       > span { background: linear-gradient(90deg, #ffe24f, var(--yellow-d)); }

.split { display: flex; height: 11px; border-radius: 99px; overflow: hidden; background: var(--surface-3); }
.split > div { height: 100%; transition: width .5s var(--ease); }
.split .p { background: var(--green); }
.split .u { background: var(--red); }
.split .n { background: #c7ccd2; }

.shot-strip {
  display: grid; gap: .8rem;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
}
.shot {
  border: 1px solid var(--border); border-radius: 11px;
  overflow: hidden; background: var(--surface); display: block;
  box-shadow: var(--shadow);
  transition: box-shadow var(--t), border-color var(--t), transform var(--t);
}
.shot:hover { border-color: var(--yellow-d); transform: translateY(-3px); box-shadow: var(--shadow-md); text-decoration: none; }
.shot img { width: 100%; height: 108px; object-fit: cover; display: block; }
.shot .noshot {
  display: flex; align-items: center; justify-content: center;
  height: 100%; color: var(--text-mute); font-size: .8rem;
}
.shot .cap { padding: .45rem .6rem; font-size: .74rem; color: var(--text-dim); }

.tl-item {
  display: flex; gap: .85rem; align-items: flex-start;
  padding: .6rem 0; border-bottom: 1px solid var(--border);
}
.tl-item:last-child { border-bottom: 0; }
.tl-time {
  color: var(--text-dim); font-size: .8rem; white-space: nowrap;
  font-variant-numeric: tabular-nums; padding-top: .15rem;
}

/* ---------- Live view ---------- */
.live-grid {
  display: grid; gap: 1.1rem;
  grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
}
.live-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--text); box-shadow: var(--shadow);
  transition: box-shadow var(--t), border-color var(--t), transform var(--t);
}
.live-card:hover { border-color: var(--yellow-d); transform: translateY(-4px); box-shadow: var(--shadow-lg); text-decoration: none; }
.live-shot { height: 132px; background: var(--surface-3); }
.live-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.live-shot .noshot {
  display: flex; align-items: center; justify-content: center;
  height: 100%; color: var(--text-mute); font-size: .8rem;
}
.live-info { padding: .8rem .9rem; }
.live-name {
  font-weight: 700; font-size: .92rem; color: var(--ink);
  display: flex; align-items: center; gap: .45rem;
}
.live-name .dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.dot-lg {
  display: inline-block; width: 10px; height: 10px;
  border-radius: 50%; margin-right: .15rem;
}

/* ---------- Sidebar alert badge ---------- */
.nav-badge {
  margin-left: auto; background: var(--red); color: #fff;
  font-size: .68rem; font-weight: 700;
  padding: .08rem .44rem; border-radius: 99px;
}
.nav-link.active .nav-badge { background: var(--ink); color: #fff; }

/* ---------- Download / setup page ---------- */
.dl-grid {
  display: grid; gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.dl-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 1.5rem; text-align: center;
  transition: box-shadow var(--t), border-color var(--t), transform var(--t);
}
.dl-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: #f1da80; }
.dl-card .os { font-size: 1.05rem; font-weight: 800; color: var(--ink); }
.dl-card .meta { font-size: .8rem; color: var(--text-mute); margin: .25rem 0 1rem; }
.steps {
  counter-reset: step; list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 1rem;
}
.steps li { position: relative; padding-left: 2.7rem; line-height: 1.55; }
.steps li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(145deg, #ffe24f, var(--yellow-d));
  color: var(--ink);
  font: 800 .85rem/26px system-ui, -apple-system, sans-serif;
  text-align: center;
  box-shadow: 0 3px 8px rgba(255,200,0,.4);
}

/* ---------- Consent gate ---------- */
.gate-body { background: var(--bg); min-height: 100vh; }
.gate-top {
  position: sticky; top: 0; z-index: 20;
  background: rgba(20,20,20,.86);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
  color: #fff;
  display: flex; align-items: center; justify-content: space-between;
  padding: .8rem 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.gate-logo { height: 30px; width: auto; }
.gate-main { max-width: 780px; margin: 0 auto; padding: 2rem 1.5rem; }

.terms-box {
  max-height: 420px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2); padding: 1.1rem 1.3rem;
}
.terms-box h3 { font-size: .95rem; margin: 1.15rem 0 .4rem; color: var(--ink); }
.terms-box h3:first-child { margin-top: 0; }
.terms-box p { font-size: .88rem; margin-bottom: .55rem; }
.terms-box ul { margin: 0 0 .65rem 1.15rem; }
.terms-box li { font-size: .88rem; margin-bottom: .3rem; }

/* ---------- Consent status (admin) ---------- */
.consent-ok   { color: var(--green); font-weight: 700; }
.consent-none { color: var(--red);   font-weight: 700; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Responsive ---------- */
/* === Mobile sidebar (fullscreen overlay) === */
.menu-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border);
  border-radius: 9px;
  width: 38px;
  height: 38px;
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
  margin-right: .55rem;
  flex-shrink: 0;
}
.menu-toggle svg { width: 20px !important; height: 20px !important; flex-shrink: 0; }
.sidebar-overlay { display: none; }      /* not used in fullscreen mode */
.sidebar-close {
  display: none;
  position: absolute;
  top: 14px; right: 14px;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px;
  max-width: 40px;
  min-height: 40px;
  max-height: 40px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
  z-index: 102;
  flex-shrink: 0;
  box-sizing: border-box;
}
.sidebar-close svg,
.sidebar-close > svg {
  width: 18px !important;
  height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  display: block !important;
  flex-shrink: 0;
}

/* === Bottom tab bar (mobile only) === */
.bottom-tabs {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  background: #fff;
  border-top: 1px solid var(--border);
  padding: 6px 0 calc(6px + env(safe-area-inset-bottom));
  box-shadow: 0 -4px 18px rgba(0,0,0,.06);
}
.bottom-tabs .row {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.bottom-tabs .tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 0 4px;
  text-decoration: none;
  color: #6b7280;
  font-size: 11px;
  font-weight: 700;
  transition: color .15s;
  position: relative;
  min-height: 50px;
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
}
.bottom-tabs .tab svg {
  width: 22px;
  height: 22px;
  stroke-width: 2;
}
.bottom-tabs .tab .badge {
  position: absolute;
  top: 2px;
  right: 30%;
  min-width: 16px;
  height: 16px;
  background: #ef4444;
  color: #fff;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}
.bottom-tabs .tab.active {
  color: #141414;
}
.bottom-tabs .tab.active::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 3px;
  background: var(--yellow);
  border-radius: 0 0 3px 3px;
}

@media (max-width: 900px) {
  .menu-toggle { display: inline-flex !important; }
  .topbar {
    padding: .65rem .85rem !important;
    gap: .35rem !important;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 80;
    border-bottom: 1px solid var(--border);
  }
  .topbar h1 { font-size: 1.05rem !important; font-weight: 800; }
  .topbar .user > div { display: none !important; }
  .topbar .user form button { padding: .35rem .65rem !important; font-size: .78rem !important; }
  .page { padding: .85rem .85rem 88px !important; }
  .page-head { flex-wrap: wrap; gap: .55rem; padding: 1.15rem 1.2rem; border-radius: 18px; }
  .page-head h2 { font-size: 1.35rem; }

  /* FULLSCREEN sidebar on mobile — override desktop width:240px */
  .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 100 !important;
    transform: translateY(-100%) !important;
    transition: transform .28s cubic-bezier(.4,0,.2,1);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 0 2rem !important;
    margin: 0 !important;
    box-sizing: border-box;
  }
  .sidebar.open { transform: translateY(0) !important; }
  .sidebar-close { display: inline-flex !important; }
  .sidebar .brand {
    padding: 1.4rem 1.25rem .85rem !important;
    padding-right: 70px !important;
  }
  .sidebar .nav { padding: .6rem 0 !important; }
  .sidebar .nav-link {
    font-size: 1rem !important;
    padding: .85rem 1.25rem !important;
    border-radius: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.06);
  }
  .sidebar .nav-link.active {
    background: rgba(255,212,0,.12) !important;
    color: #ffd400 !important;
    border-left: 4px solid var(--yellow);
    padding-left: calc(1.25rem - 4px) !important;
  }
  .sidebar .nav-section {
    padding: 1rem 1.25rem .35rem !important;
    font-size: .72rem !important;
  }
  .sidebar .nav-foot { padding: 1.5rem 1.25rem 2rem !important; }
  .content { width: 100% !important; min-width: 0 !important; }

  .bottom-tabs { display: block !important; }
}

@media (max-width: 480px) {
  .page { padding: .8rem .7rem 88px !important; }
  .topbar h1 { font-size: .95rem !important; }
}

/* Larger phones / small tablets: same fullscreen menu */
@media (min-width: 480px) and (max-width: 900px) {
  .topbar h1 { font-size: 1.1rem !important; }
}