/* ============================================================
   PRO360 OneAgency — App shell & components
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--app-bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
h1, h2, h3, h4, h5 { margin: 0; font-weight: 650; letter-spacing: -0.01em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--text-3); background-clip: content-box; }

.hidden { display: none !important; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--text-2); }
.dim { color: var(--text-3); }
.tiny { font-size: 11px; }
.sm { font-size: 12.5px; }
.center { text-align: center; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.row { display: flex; align-items: center; gap: var(--sp-3); }
.row.wrap { flex-wrap: wrap; }
.between { justify-content: space-between; }
.col { display: flex; flex-direction: column; gap: var(--sp-3); }
.grow { flex: 1 1 auto; min-width: 0; }
.gap-1 { gap: var(--sp-1); } .gap-2 { gap: var(--sp-2); } .gap-4 { gap: var(--sp-4); }
.mt-2 { margin-top: var(--sp-2); } .mt-4 { margin-top: var(--sp-4); } .mt-6 { margin-top: var(--sp-6); }

/* ---------- Login ---------- */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card {
  width: min(420px, 100%); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-xl); padding: 34px 30px; box-shadow: var(--shadow-lg);
}
.login-persona {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 11px 13px; border-radius: var(--r-md); border: 1px solid var(--line);
  background: var(--surface-2); cursor: pointer; transition: all var(--dur) var(--ease);
}
.login-persona:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: var(--shadow-sm); }

/* ---------- Shell ---------- */
.shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }
.shell.collapsed { grid-template-columns: var(--sidebar-w-collapsed) 1fr; }

/* ---------- Sidebar ---------- */
.sidebar {
  background: var(--sidebar-bg); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
  padding: 18px 12px 14px; gap: 4px; z-index: 30;
}
.side-brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 16px; min-height: 46px; }
/* The "OneAgency" sub-line under the wordmark, and its twin on the login card,
   were removed — the mark carries the brand on its own. Their styling went with
   them rather than being left behind to be puzzled over later. */
.collapsed .nav-label,
.collapsed .nav-caret, .collapsed .subnav, .collapsed .side-foot .lbl { display: none; }
.collapsed .side-brand { justify-content: center; padding-left: 0; padding-right: 0; }

/* ---------- Brand logo ----------
   Two colourways of the same wordmark ship with the brand: navy text for light
   backgrounds, white text for dark. Swapping them in CSS means the theme toggle
   is instant and no JavaScript has to know about it. */
.brand-logo { height: 24px; width: auto; object-fit: contain; }
.login-logo { height: 42px; width: auto; object-fit: contain; }

.brand-full { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.collapsed .brand-full { display: none; }

/* The round badge carries the collapsed rail. It is navy on transparent, which
   would disappear against the dark sidebar, so in dark mode it sits on a white
   chip — reading as a deliberate app badge rather than a washed-out mark. */
.brand-round { width: 34px; height: 34px; flex: 0 0 34px; object-fit: contain; display: none; }
.collapsed .brand-round { display: block; }
[data-theme="dark"] .brand-round { background: #fff; border-radius: 50%; padding: 2px; }

/* Keep the light/dark swap LAST so nothing later re-declares display and shows
   both colourways at once — which is exactly what happened on the login card. */
.logo-light { display: block; }
.logo-dark { display: none; }
[data-theme="dark"] .logo-light { display: none; }
[data-theme="dark"] .logo-dark { display: block; }

.nav-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; margin: 0 -4px; padding: 0 4px; }
.nav-group-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-3);
  font-weight: 700; padding: 14px 12px 6px;
}
.collapsed .nav-group-label { text-align: center; font-size: 9px; letter-spacing: 0; padding: 12px 0 4px; }
.nav-item {
  display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 12px;
  border-radius: var(--r-sm); border: 0; background: transparent; cursor: pointer;
  color: var(--text-2); font-weight: 550; font-size: 13.5px; text-align: left;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.collapsed .nav-item { justify-content: center; padding: 10px 0; }
.nav-item:hover { background: var(--surface-3); color: var(--text); }
.nav-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 650; }
.nav-ico {
  width: 28px; height: 28px; flex: 0 0 28px; border-radius: 9px; display: grid; place-items: center;
  background: var(--surface-3); color: var(--text-2); transition: all var(--dur) var(--ease);
}
.nav-item.active .nav-ico { background: var(--grad-hero); color: #fff; box-shadow: 0 4px 10px var(--accent-soft); }
.nav-ico svg { width: 15px; height: 15px; }
.nav-caret { margin-left: auto; opacity: 0.5; transition: transform var(--dur) var(--ease); }
.nav-item[aria-expanded="true"] .nav-caret { transform: rotate(90deg); }
.subnav { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 6px 27px; padding-left: 11px; border-left: 1.5px solid var(--line); }
.subnav-item {
  padding: 6px 10px; border-radius: 8px; border: 0; background: transparent; cursor: pointer;
  color: var(--text-2); font-size: 12.5px; text-align: left; transition: all var(--dur) var(--ease);
}
.subnav-item:hover { background: var(--surface-3); color: var(--text); }
.subnav-item.active { color: var(--accent); font-weight: 650; background: var(--accent-soft); }
.side-foot { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 6px; }

/* ---------- Topbar ---------- */
.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px;
  padding: 12px 26px; background: var(--topbar-bg); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.avatar {
  width: 38px; height: 38px; border-radius: 50%; flex: 0 0 38px; display: grid; place-items: center;
  font-weight: 700; font-size: 13px; color: #fff; background: var(--grad-hero); letter-spacing: -0.02em;
}
.avatar.sm { width: 28px; height: 28px; flex-basis: 28px; font-size: 11px; }
.avatar.lg { width: 52px; height: 52px; flex-basis: 52px; font-size: 17px; }
.hello { font-size: 15.5px; font-weight: 700; letter-spacing: -0.02em; }
.searchbox {
  display: flex; align-items: center; gap: 8px; background: var(--surface-inset);
  border: 1px solid var(--line); border-radius: var(--r-pill); padding: 7px 14px; min-width: 210px;
}
.searchbox input { border: 0; background: transparent; outline: none; color: var(--text); width: 100%; font-size: 13px; }
.searchbox input::placeholder { color: var(--text-3); }
.icon-btn {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface);
  display: grid; place-items: center; cursor: pointer; color: var(--text-2); position: relative;
  transition: all var(--dur) var(--ease); flex: 0 0 36px;
}
.icon-btn:hover { color: var(--accent); border-color: var(--accent); }
.icon-btn .dot {
  position: absolute; top: -2px; right: -2px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 99px; background: var(--gold); color: #17313A; font-size: 10px; font-weight: 800;
  display: grid; place-items: center; border: 2px solid var(--surface);
}

/* ---------- Page ---------- */
.page { padding: 22px 26px 60px; display: flex; flex-direction: column; gap: var(--sp-5); }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.page-title { font-size: 21px; font-weight: 700; letter-spacing: -0.025em; }
.page-sub { color: var(--text-2); font-size: 13px; margin-top: 3px; }
.tabs { display: flex; gap: 4px; background: var(--surface-inset); padding: 4px; border-radius: var(--r-pill); border: 1px solid var(--line); flex-wrap: wrap; }
.tab {
  padding: 7px 15px; border-radius: var(--r-pill); border: 0; background: transparent; cursor: pointer;
  color: var(--text-2); font-size: 12.5px; font-weight: 600; transition: all var(--dur) var(--ease); white-space: nowrap;
}
.tab:hover { color: var(--text); }
.tab.active { background: var(--surface); color: var(--accent); box-shadow: var(--shadow-sm); }

/* ---------- Cards / grid ---------- */
.grid { display: grid; gap: var(--sp-4); }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-2-1 { grid-template-columns: 2fr 1fr; }
.g-1-2 { grid-template-columns: 1fr 2fr; }
.g-3-2 { grid-template-columns: 3fr 2fr; }
@media (max-width: 1180px) { .g4 { grid-template-columns: repeat(2, minmax(0,1fr)); } .g-2-1, .g-1-2, .g-3-2, .g3 { grid-template-columns: 1fr; } }
@media (max-width: 780px) { .g2, .g4 { grid-template-columns: 1fr; } }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--sp-5); box-shadow: var(--shadow-sm); min-width: 0;
}
.card.tight { padding: var(--sp-4); }
.card.flush { padding: 0; overflow: hidden; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: var(--sp-4); }
.card-title { font-size: 14px; font-weight: 680; letter-spacing: -0.01em; }
.card-sub { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }

.hero-card { background: var(--grad-card); color: #06282B; border: 0; position: relative; overflow: hidden; }
.hero-card::after {
  content: ""; position: absolute; right: -60px; bottom: -80px; width: 220px; height: 220px;
  border-radius: 50%; background: rgba(255, 255, 255, 0.16);
}
.hero-card .muted, .hero-card .dim { color: rgba(6, 40, 43, 0.66); }
[data-theme="dark"] .hero-card { color: #04252B; }

.navy-card { background: var(--grad-navy); color: #EAF6F4; border: 0; }
.navy-card .muted { color: #9DBDC1; }

/* ---------- Stat ---------- */
/* A stat card that leads somewhere. The chevron is the standing signal; the
   lift and accent border confirm it on hover so the whole card reads as the
   target, not just the number. */
.card-link { cursor: pointer; transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.card-link:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow); }
.card-link:active { transform: translateY(0); }
.card-link:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.stat-go { display: inline-flex; color: var(--text-3); opacity: 0.55; transition: all var(--dur) var(--ease); }
.card-link:hover .stat-go { color: var(--accent); opacity: 1; transform: translateX(2px); }

/* A name that opens the record behind it. Reads as ordinary text until the
   pointer is on it — a table of underlined names is noise. */
.link-name { cursor: pointer; }
.link-name:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* Unsaved-work banner — quiet until it matters, then unmissable. */
.unsaved-note {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 15px; border-radius: var(--r-md);
  background: var(--warn-soft); color: var(--text);
  border: 1px solid var(--warn);
}
.unsaved-note > span:first-child { color: var(--warn); display: flex; }

/* Scope switch inside a stat card — small enough not to compete with the number. */
.seg-toggle.tiny-seg { padding: 2px; }
.seg-toggle.tiny-seg button { font-size: 10.5px; padding: 3px 8px; }

/* The leader's own book inside the line's card: present, but quieter than the
   headline it already forms part of. */
.own-strip {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  padding: 8px 12px; margin-top: 4px; border-radius: var(--r-md);
  background: var(--surface-3); border: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.own-strip:hover { border-color: var(--accent); }
.own-strip:hover .stat-go { color: var(--accent); transform: translateX(2px); }
.own-strip:focus-visible { outline: none; box-shadow: var(--ring); }

/* A donut that opens the list behind the number. */
.donut-link { cursor: pointer; border-radius: 50%; transition: transform var(--dur) var(--ease); }
.donut-link:hover { transform: scale(1.02); }
.donut-link:focus-visible { outline: none; box-shadow: var(--ring); }

/* ---------- Expandable hierarchy ---------- */
.tree-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 6px;
  border-bottom: 1px solid var(--line); border-radius: var(--r-sm);
  transition: background var(--dur) var(--ease);
}
.tree-row:hover { background: var(--surface-3); }
.tree-children { position: relative; }
/* The guide rail. Indentation alone stops reading as depth past two levels. */
.tree-children::before {
  content: ''; position: absolute; top: 0; bottom: 8px; left: 15px;
  border-left: 1px dashed var(--line);
}
.tree-caret {
  flex: 0 0 20px; width: 20px; height: 20px; display: grid; place-items: center;
  border: 0; background: none; color: var(--text-3); cursor: pointer; padding: 0;
  border-radius: 5px; transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
}
.tree-caret:hover { color: var(--accent); background: var(--surface-3); }
.tree-caret.open { transform: rotate(90deg); }
.tree-caret.empty { cursor: default; }
/* Upline rows are context, not your line — quieter, and never interactive. */
.tree-row.upline { opacity: 0.72; }
.tree-row.upline:hover { background: none; }
.tree-rank { flex: 0 0 3px; width: 3px; height: 26px; border-radius: 2px; }
.tree-num { min-width: 92px; }
.tree-bar { width: 132px; flex: 0 0 132px; }
@media (max-width: 860px) {
  .tree-num, .tree-bar { display: none; }
}

/* ---------- Weekly points grid ---------- */
/* Derived cells: same weight as a typed figure, but plainly not a field. */
.week-grid .auto-cell {
  display: inline-block; min-width: 56px; padding: 5px 6px;
  font-variant-numeric: tabular-nums; font-weight: 650; color: var(--text-2);
}
.week-grid .auto-cell.dim { color: var(--text-3); font-weight: 400; }
.week-grid .auto-cell.tick { color: var(--accent); font-size: 15px; }
.week-grid td.c, .week-grid th.c { text-align: center; }
.week-grid td.r, .week-grid th.r { text-align: right; }
.week-grid td.left, .week-grid th.left { text-align: left; }
/* Beats `.input.num-in`, which right-aligns numbers everywhere else. In a
   seven-column day grid a centred figure sits under its own date. */
.week-grid .input.grid-cell {
  width: 56px; padding: 5px 6px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.week-grid input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.week-grid tr.foot-row td { border-top: 1px solid var(--line); background: var(--surface-2); }
.week-grid tr.foot-row:last-child td { border-bottom: 0; }

/* Brief highlight when a stat card scrolls you to what it counts. */
@keyframes anchorFlash {
  0%   { box-shadow: 0 0 0 0 var(--accent-soft); }
  35%  { box-shadow: 0 0 0 6px var(--accent-soft); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.anchor-flash { animation: anchorFlash 1.2s var(--ease); border-radius: var(--r-md); }
@media (prefers-reduced-motion: reduce) { .anchor-flash { animation: none; } }

/* Clickable funnel rows — the whole row is the target, not just the label. */
.funnel-row.is-clickable {
  cursor: pointer;
  margin: 0 -8px; padding: 5px 8px 3px; border-radius: var(--r-2);
  transition: background var(--dur) var(--ease);
}
.funnel-row.is-clickable:hover { background: var(--surface-2); }
.funnel-row.is-clickable:focus-visible { outline: none; background: var(--surface-2); box-shadow: var(--ring); }
.funnel-go { display: inline-flex; margin-left: 5px; color: var(--text-3); opacity: 0; transition: all var(--dur) var(--ease); vertical-align: -1px; }
.funnel-row.is-clickable:hover .funnel-go,
.funnel-row.is-clickable:focus-visible .funnel-go { opacity: 1; color: var(--accent); transform: translateX(2px); }

.stat { display: flex; flex-direction: column; gap: 6px; }
.stat-label { font-size: 11.5px; color: var(--text-2); font-weight: 600; letter-spacing: 0.01em; }
.stat-value { font-size: 25px; font-weight: 750; letter-spacing: -0.03em; line-height: 1.1; }
.stat-value.sm { font-size: 19px; }
.stat-foot { font-size: 11.5px; color: var(--text-3); }
.stat-ico { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex: 0 0 36px; }
/* A stat carrying a tone should look like it — an alert icon in accent green
   reads as "fine" at a glance, which is exactly what it is not. */
.stat-ico.warn { background: var(--warn-soft); color: var(--warn); }
.stat-ico.danger { background: var(--danger-soft); color: var(--danger); }

/* ---------- Pills / badges ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--r-pill);
  font-size: 11px; font-weight: 650; background: var(--surface-3); color: var(--text-2); white-space: nowrap;
}
.pill.ok { background: var(--ok-soft); color: var(--ok); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.danger { background: var(--danger-soft); color: var(--danger); }
.pill.info { background: var(--info-soft); color: var(--info); }
.pill.gold { background: var(--gold-soft); color: var(--gold-600); }
[data-theme="dark"] .pill.gold { color: var(--gold-400); }
.pill.accent { background: var(--accent-soft); color: var(--accent); }
.pill .dotm { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.rank-badge { font-size: 10px; font-weight: 800; letter-spacing: 0.06em; padding: 2px 7px; border-radius: 6px; }
.rank-AM { background: var(--grad-gold); color: #3A2E05; }
.rank-UM2 { background: var(--accent-soft); color: var(--accent); }
.rank-UM1 { background: var(--info-soft); color: var(--info); }
.rank-ADV { background: var(--surface-3); color: var(--text-2); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 16px;
  border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface); color: var(--text);
  font-size: 13px; font-weight: 600; cursor: pointer; transition: all var(--dur) var(--ease); white-space: nowrap;
}
.btn:hover { border-color: var(--line-strong); background: var(--surface-2); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn.primary { background: var(--grad-hero); color: #fff; border-color: transparent; box-shadow: 0 4px 14px var(--accent-soft); }
.btn.primary:hover { filter: brightness(1.06); }
.btn.gold { background: var(--grad-gold); color: #3A2E05; border-color: transparent; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn.ghost:hover { background: var(--surface-3); color: var(--text); }
.btn.danger { color: var(--danger); border-color: var(--danger-soft); background: var(--danger-soft); }
.btn.sm { padding: 6px 11px; font-size: 12px; border-radius: 9px; }
.btn.block { width: 100%; }
.btn[disabled] { opacity: 0.45; pointer-events: none; }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field > label { font-size: 11.5px; font-weight: 650; color: var(--text-2); }
.field .hint { font-size: 10.5px; color: var(--text-3); }
.input, .select, textarea.input {
  width: 100%; padding: 9px 12px; border-radius: var(--r-sm); border: 1px solid var(--line);
  background: var(--surface-inset); color: var(--text); font-size: 13.5px; outline: none;
  transition: all var(--dur) var(--ease); font-family: inherit;
}
.input:focus, .select:focus, textarea.input:focus { border-color: var(--accent); box-shadow: var(--ring); background: var(--surface); }
.input.num-in { font-variant-numeric: tabular-nums; text-align: right; }

/* Number fields: no spinner arrows.
   They swallow a third of a narrow field, sit under the cursor when you go to
   click, and invite accidental clicks. Typing is the only sane way to enter
   these values, so the whole width goes to the digits. */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;   /* Firefox */
  appearance: textfield;
}
/* Table-row size: a full-height select turns a dense list into a form. */
.select.sm { padding: 5px 10px; padding-right: 26px; font-size: 12px; background-position: right 8px center; }
.select { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237D959A' stroke-width='3' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right 11px center; padding-right: 30px; }
.input-group { display: flex; align-items: stretch; }
.input-group .addon {
  display: grid; place-items: center; padding: 0 11px; background: var(--surface-3); border: 1px solid var(--line);
  color: var(--text-3); font-size: 12px; font-weight: 650;
}
.input-group .addon:first-child { border-right: 0; border-radius: var(--r-sm) 0 0 var(--r-sm); }
.input-group .addon:last-child { border-left: 0; border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.input-group .input:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group .input:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }

.seg-toggle { display: inline-flex; background: var(--surface-inset); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 3px; gap: 2px; }
.seg-toggle button {
  padding: 6px 13px; border-radius: 9px; border: 0; background: transparent; cursor: pointer;
  font-size: 12px; font-weight: 620; color: var(--text-2); transition: all var(--dur) var(--ease);
}
.seg-toggle button.active { background: var(--surface); color: var(--accent); box-shadow: var(--shadow-sm); }

.switch { position: relative; width: 40px; height: 22px; flex: 0 0 40px; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .track { position: absolute; inset: 0; background: var(--track); border-radius: 99px; cursor: pointer; transition: var(--dur); }
.switch .track::before { content: ""; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; background: var(--surface); border-radius: 50%; transition: var(--dur) var(--ease); box-shadow: var(--shadow-sm); }
.switch input:checked + .track { background: var(--accent); }
.switch input:checked + .track::before { transform: translateX(18px); }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; border-radius: var(--r-md); }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tbl thead th {
  text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--text-3); font-weight: 750; padding: 9px 12px; border-bottom: 1px solid var(--line);
  background: var(--surface-2); white-space: nowrap; position: sticky; top: 0;
}
table.tbl tbody td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.tbl tbody tr:last-child td { border-bottom: 0; }
table.tbl tbody tr:hover { background: var(--surface-2); }
table.tbl tfoot td { padding: 10px 12px; font-weight: 750; border-top: 2px solid var(--line-strong); background: var(--surface-2); }
table.tbl .r { text-align: right; font-variant-numeric: tabular-nums; }
table.tbl .c { text-align: center; }
table.tbl td.strong { font-weight: 700; }
table.tbl.compact tbody td, table.tbl.compact thead th { padding: 7px 10px; }

/* ---------- Progress ---------- */
.bar { height: 7px; border-radius: 99px; background: var(--track); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 99px; background: var(--grad-hero); transition: width 420ms var(--ease); }
.bar > i.gold { background: var(--grad-gold); }
.bar > i.warn { background: linear-gradient(90deg, #F0C674, var(--warn)); }
.bar > i.danger { background: linear-gradient(90deg, #F09A8C, var(--danger)); }
.bar.thick { height: 10px; }

.mini-ring { position: relative; width: 54px; height: 54px; flex: 0 0 54px; }
.mini-ring .lbl { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; font-weight: 750; }

/* ---------- Legend ---------- */
.legend { display: flex; flex-direction: column; gap: 8px; }
.legend-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.legend-row .sw { width: 9px; height: 9px; border-radius: 3px; flex: 0 0 9px; }
.legend-row .nm { color: var(--text-2); }
.legend-row .vl { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- Timeline / list ---------- */
.list-item { display: flex; align-items: center; gap: 11px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.list-item:last-child { border-bottom: 0; }
.list-item .ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: 0 0 32px; background: var(--surface-3); color: var(--text-2); }
.day-label { font-size: 11px; font-weight: 700; color: var(--text-3); padding: 12px 0 4px; letter-spacing: 0.02em; }

/* ---------- Kanban ---------- */
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(232px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 8px; }
.kcol { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 11px; min-height: 180px; }
.kcol.drop { border-color: var(--accent); background: var(--accent-soft); }
.kcol-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; font-size: 11.5px; font-weight: 700; }
.kcard {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 11px;
  margin-bottom: 8px; cursor: pointer; box-shadow: var(--shadow-sm); transition: all var(--dur) var(--ease);
}
/* Only the lead board is drag-and-drop. Case cards open on click, so the grab
   cursor there was promising something that does not work. */
.kcard[draggable="true"] { cursor: grab; }
.kcard[draggable="true"]:active { cursor: grabbing; }
.kcard:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: var(--shadow); }
.kcard:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.kcard.dragging { opacity: 0.4; }
.kcard-go { display: inline-flex; color: var(--text-3); opacity: 0; transition: all var(--dur) var(--ease); }
.kcard:hover .kcard-go, .kcard:focus-visible .kcard-go { opacity: 1; color: var(--accent); transform: translateX(2px); }

/* The column header filters the list below to that stage. */
.kcol-head.is-clickable { cursor: pointer; border-radius: var(--r-sm); margin: -3px -4px 6px; padding: 3px 4px; transition: background var(--dur) var(--ease); }
.kcol-head.is-clickable:hover { background: var(--surface-3); }
.kcol-head.is-clickable:focus-visible { outline: none; background: var(--surface-3); box-shadow: var(--ring); }

/* ---------- Modal ---------- */
.modal-back {
  position: fixed; inset: 0; background: rgba(6, 30, 38, 0.5); backdrop-filter: blur(4px);
  display: grid; place-items: center; z-index: 100; padding: 24px; animation: fade var(--dur) var(--ease);
}
.modal {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-lg);
  width: min(720px, 100%); max-height: 88vh; display: flex; flex-direction: column; animation: pop 220ms var(--ease);
}
.modal.wide { width: min(1000px, 100%); }
.modal.narrow { width: min(460px, 100%); }
.modal-head { padding: 20px 24px 14px; border-bottom: 1px solid var(--line); display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.modal-body { padding: 20px 24px; overflow-y: auto; }
.modal-foot { padding: 14px 24px 20px; display: flex; justify-content: flex-end; gap: 10px; border-top: 1px solid var(--line); }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(0.98); } }

/* ---------- Toast ---------- */
.toast-host { position: fixed; bottom: 22px; right: 22px; z-index: 200; display: flex; flex-direction: column; gap: 9px; }
.toast {
  background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--r-sm); padding: 11px 15px; box-shadow: var(--shadow-lg); font-size: 13px;
  min-width: 240px; animation: slidein 240ms var(--ease);
}
.toast.err { border-left-color: var(--danger); }
.toast.warn { border-left-color: var(--warn); }
@keyframes slidein { from { opacity: 0; transform: translateX(20px); } }

/* ---------- Empty ---------- */
.empty { padding: 44px 20px; text-align: center; color: var(--text-3); }
.empty .ic { width: 46px; height: 46px; border-radius: 14px; background: var(--surface-3); display: grid; place-items: center; margin: 0 auto 12px; }

/* ---------- Callout ---------- */
.callout {
  border-radius: var(--r-md); padding: 12px 15px; font-size: 12.5px; display: flex; gap: 10px;
  background: var(--info-soft); color: var(--text); border: 1px solid transparent;
}
.callout.warn { background: var(--warn-soft); }
.callout.danger { background: var(--danger-soft); }
.callout.ok { background: var(--ok-soft); }
.callout.gold { background: var(--gold-soft); }
.callout b { font-weight: 700; }

/* ---------- Misc ---------- */
.divider { height: 1px; background: var(--line); margin: var(--sp-4) 0; }
.kpi-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 1px; background: var(--line); border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); }
.kpi-strip > div { background: var(--surface); padding: 13px 15px; }
.kpi-strip .k { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-3); font-weight: 700; }
.kpi-strip .v { font-size: 19px; font-weight: 750; letter-spacing: -0.025em; margin-top: 3px; font-variant-numeric: tabular-nums; }
.kpi-strip .s { font-size: 11px; color: var(--text-3); }

.scroll-x { overflow-x: auto; }
.chart-svg { display: block; width: 100%; height: auto; overflow: visible; }

/* ---------- Narrow screens: the sidebar becomes a drawer ----------
   The old rule here narrowed the grid column to the collapsed width but
   never applied the `collapsed` class, so the sidebar went on rendering
   full-size labels inside a 74px column — "Log out" and the group headings
   spilled across the page. Squeezing a 246px navigation into a 375px phone
   was the wrong idea anyway: below 900px it slides in over the content and
   the page gets the whole width.

   `.nav-toggle` in the topbar opens it, the scrim or any destination closes
   it. Both live in app.js. */
.nav-toggle { display: none; }
.nav-scrim { display: none; }

@media (max-width: 900px) {
  .shell, .shell.collapsed { grid-template-columns: 1fr; }

  .sidebar {
    position: fixed; top: 0; left: 0; height: 100dvh; width: var(--sidebar-w);
    transform: translateX(-100%);
    transition: transform var(--dur) var(--ease);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.18);
  }
  body.nav-open .sidebar { transform: none; }

  /* Collapsing is a desktop idea — there is no rail to collapse to here. */
  .side-foot .nav-item:first-child { display: none; }

  .nav-scrim {
    display: block; position: fixed; inset: 0; z-index: 25;
    background: rgba(15, 23, 32, 0.45);
    opacity: 0; pointer-events: none;
    transition: opacity var(--dur) var(--ease);
  }
  body.nav-open .nav-scrim { opacity: 1; pointer-events: auto; }

  .nav-toggle { display: grid; }
  .page { padding: 16px 14px 50px; }
  .topbar { padding: 10px 14px; gap: 10px; }
  .searchbox { display: none; }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .sidebar, .nav-scrim { transition: none; }
}