/* ─── Self-hosted DM Sans / DM Mono ─────────────────────────────
   Was loaded from fonts.googleapis.com on every page. Self-hosted so first
   paint waits on no third-party request, and so visitor IPs are not handed to
   Google (the basis of the German Google Fonts rulings). The DM Sans files are
   variable: one download covers 300-800 instead of six static weights.
   Both families are SIL Open Font License 1.1, which expressly permits this.
   Paths are relative to this stylesheet so the same declarations resolve on
   the app host (/css/fonts/..) and the marketing host (rewritten to
   /site/css/fonts/..) without a separate rule. */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('fonts/dm-sans-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('fonts/dm-sans-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
  src: url('fonts/dm-sans-var-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
  src: url('fonts/dm-sans-var-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/dm-mono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/dm-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/dm-mono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/dm-mono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ═══════════════════════════════════════════════
   ALP PLATFORM — Enterprise Skin v1
   Design tokens + shared components from
   .claude/design/alp-crm-design-system.md.
   Load this AFTER every other stylesheet on the page —
   it deliberately overrides the per-module .btn-primary/
   .btn-secondary/.chip etc. rules that exist today via
   plain CSS cascade order, not specificity hacks.
   Reference: .claude/design/alp-crm-demo.html
   ═══════════════════════════════════════════════ */

:root{
  /* Brand chrome */
  --navy:#19223D;
  --navy-2:#222D4F;
  --blue:#22327D;
  --blue-rgb:34,50,125;   /* channel form of --blue, for rgba() intensity fills */
  --blue-soft:#E9EDF8;

  /* Canvas and surfaces */
  --bg:#F2F4F7;
  --surface:#FFFFFF;
  --border:#D8DDE6;
  --border-strong:#C3CAD6;

  /* Text */
  --text:#1F2733;
  --muted:#5B6472;
  --link:#22327D;

  /* Functional status only (RAG). Never decorative. */
  --green:#2E7D32;
  --amber:#B7791F;
  --red:#B3362B;

  --radius:6px;
}

body{
  font-family: Calibri, 'Segoe UI', Arial, sans-serif;
  font-size: 13px;
  color: var(--text);
}

/* ══════════════════════════════════════════════════════════
   Legacy variable remap — every module CSS file (taskboard.css,
   crm.css, tickets.css, etc — ~20 files) already uses a shared set
   of CSS custom property NAMES pervasively (thousands of call
   sites: var(--text-primary), var(--bg-secondary), var(--gold), …).
   Since enterprise.css loads last on every page, overriding those
   same names here re-colors every existing card/table/badge/button
   to the Enterprise Skin palette without editing each module file
   individually. This is the mechanism for "site-wide", not just
   the shell. Genuinely NEW components the old palette never had
   (metric strip, record chevron path, etc.) still need real markup
   changes per module — this only recolors what already exists.
   ══════════════════════════════════════════════════════════ */
:root{
  --text-primary: var(--text);
  --text-secondary: var(--muted);
  --text-muted: var(--muted);
  --text-dim: var(--muted);
  --text-tertiary: var(--muted);
  --text-inverse: #fff;
  --dim: var(--muted);

  --bg-primary: var(--bg);
  --bg-secondary: var(--surface);
  --bg-tertiary: #F7F8FA;
  --bg-input: #fff;
  --bg-hover: #EFF1F5;
  --bg-active: var(--blue-soft);
  --bg-overlay: rgba(25,34,61,.45);
  --bg2: var(--surface);
  --bg3: #F7F8FA;
  --bg-code: #F7F8FA;
  --panel-bg: var(--surface);
  --surface-alt: #F7F8FA;
  --sidebar-bg: var(--surface);
  --row-hover: #F5F7FB;

  --border-primary: var(--border);
  --border-subtle: var(--border);
  --border-secondary: var(--border);
  --border-focus: var(--blue);
  --border-active: var(--blue);
  --sidebar-border: var(--border);

  --blue2: var(--blue);
  --blue-dark: #1B2864;
  --blue-subtle: var(--blue-soft);
  --accent: var(--blue);
  --accent-glow: rgba(34,50,125,.15);
  --ac: var(--blue);

  --green-subtle: #E8F2E9;
  --gold: var(--amber);
  --orange: var(--amber);
  --purple: var(--blue);
  --cyan: var(--blue);

  --card-blue-bg: var(--blue-soft);
  --card-green-bg: #E8F2E9;
  --card-red-bg: #F9E7E5;
  --card-gold-bg: #FDF3E1;

  --sev-low-bg: #E8F2E9;
  --sev-high-bg: #FDF3E1;
  --sev-critical-bg: #F9E7E5;

  /* Spec: no drop shadows on resting elements */
  --panel-shadow: none;
  --panel-shadow-lg: none;
  --shadow: none;

  --scrollbar-thumb: #C9CFDA;
  --scrollbar-track: transparent;
  --track-bg: #EDF0F5;
}

h1{ font-size:19px; font-weight:bold; color:var(--navy); }

/* ── Buttons — retargets the existing .btn-primary/.btn-secondary/
   .btn-icon/.btn-danger/.btn-sm classes already used across every
   module rather than renaming them. ── */
.btn-primary{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 14px; border-radius:var(--radius); border:1px solid var(--blue);
  background:var(--blue); color:#fff;
  font-size:13px; font-weight:bold; cursor:pointer; font-family:inherit;
  transition:background .12s;
}
.btn-primary:hover{ background:#1B2864; opacity:1; transform:none; }

.btn-secondary{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 14px; border-radius:var(--radius);
  border:1px solid var(--border-strong); background:var(--surface);
  color:var(--blue); font-size:13px; font-weight:bold;
  cursor:pointer; font-family:inherit; transition:background .12s;
}
.btn-secondary:hover{ background:var(--blue-soft); border-color:var(--border-strong); color:var(--blue); transform:none; }

.btn-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:4px; border:none;
  background:transparent; color:var(--muted); cursor:pointer; font-size:15px;
  transition:background .12s;
}
.btn-icon:hover{ background:#EFF1F5; color:var(--text); }

.btn-danger{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 14px; border-radius:var(--radius); border:1px solid var(--red);
  background:var(--red); color:#fff;
  font-size:13px; font-weight:bold; cursor:pointer; font-family:inherit;
  transition:background .12s;
}
.btn-danger:hover{ background:#8E2B22; }

.btn-primary.btn-sm, .btn-secondary.btn-sm, .btn-danger.btn-sm{ padding:3px 10px; font-size:12px; }
.btn-ghost-sm{ background:transparent; border:1px solid transparent; color:var(--muted); font-weight:normal; padding:3px 10px; font-size:12px; border-radius:var(--radius); cursor:pointer; font-family:inherit; }
.btn-ghost-sm:hover{ background:#EFF1F5; color:var(--text); }

/* ── Chips — labels, categories, packages ── */
.chip{
  display:inline-flex; align-items:center; padding:0 10px; height:22px; box-sizing:border-box; border-radius:10px;
  font-size:11.5px; font-weight:bold;
  border:1px solid var(--border); color:var(--muted); background:#F7F8FA;
}
.chip.blue{ background:var(--blue-soft); border-color:#C9D3EE; color:var(--blue); }
.chip.managed{ background:var(--blue); border-color:var(--blue); color:#fff; }
.chip.g{ background:#E8F2E9; border-color:#CBE3CD; color:var(--green); }
.chip.a{ background:#FDF3E1; border-color:#F0DCB4; color:var(--amber); }
.chip.r{ background:#F9E7E5; border-color:#EFC9C4; color:var(--red); }

/* ── Status dots and health text ── */
.dot{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; vertical-align:1px; }
.dot.g{ background:var(--green); } .dot.a{ background:var(--amber); } .dot.r{ background:var(--red); }
.dot.b{ background:var(--blue); } .dot.grey{ background:#9AA3B0; }
.health{ font-weight:bold; }
.health.g{ color:var(--green); } .health.a{ color:var(--amber); } .health.r{ color:var(--red); }

/* ── Cards ── */
.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:none; }
.card-h{ padding:10px 14px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:8px; }
.card-h h3{ font-size:13px; font-weight:bold; color:var(--navy); }
.card-b{ padding:12px 14px; }

/* ═══════════════════════════════════════════════
   CROSS-PAGE VIEW TRANSITIONS — static shell between navigations
   Chrome-only progressive enhancement (unknown at-rule elsewhere).
   The rail, top bar and tab strip carry the same view-transition-name
   on every page, so the browser treats them as the SAME element across
   a navigation — with identical geometry (chrome normalisation below)
   they appear to simply stay put while the content cross-fades. This
   is what stops the shell flickering when moving between tabs.
   ═══════════════════════════════════════════════ */
@view-transition { navigation: auto; }
/* No root cross-fade at all: the blend exposed the (formerly white)
   transition backdrop between dark pages — an instant swap has nothing to
   flash. The named rail/topbar/tabstrip groups still hold steady. */
::view-transition-old(root){ animation:none; opacity:0; }
::view-transition-new(root){ animation:none; }
#sidebar{ view-transition-name: alp-rail; }
#topbar{ view-transition-name: alp-topbar; }
#alp-tab-strip{ view-transition-name: alp-tabstrip; }
@media (prefers-reduced-motion: reduce){
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*){ animation:none !important; }
}

/* ═══════════════════════════════════════════════
   CHROME NORMALISATION — one geometry for every page
   The shell must not shift between pages: same top-bar height, same
   control heights inside it, same tab-strip and crumb-bar bands. This
   file loads LAST on every page, so equal-specificity rules here beat
   any per-module leftovers; selectors below deliberately match the
   most specific per-page variants (e.g. taskboard's
   `#topbar .tb-right .btn-primary`) so they win everywhere.
   ═══════════════════════════════════════════════ */

/* Top bar: hard 48px on desktop — no growing on busy pages, which is
   what made the chrome jump when switching between tabs. Mobile keeps
   wrap behaviour (mobile.css). */
@media (min-width: 901px){
  #topbar{ height:48px; min-height:48px; max-height:48px; flex-wrap:nowrap; padding:0 16px; }
  #topbar .tb-right{ flex-wrap:nowrap; }
}

/* Every control in the top bar is exactly 32px tall, one colour scheme */
#topbar .tb-right .btn-primary,
#topbar .tb-right .btn-secondary,
#topbar .tb-right .btn-danger,
#topbar .tb-right select,
#topbar .tb-right .tb-view-toggle{
  height:32px !important; box-sizing:border-box;
  display:inline-flex; align-items:center;
  font-size:12px !important; line-height:1;
}
#topbar .tb-right .btn-primary,
#topbar .tb-right .btn-secondary,
#topbar .tb-right .btn-danger{ padding:0 14px !important; border-radius:6px !important; font-weight:bold !important; }
#topbar .tb-right .btn-icon{
  width:32px !important; height:32px !important; padding:0 !important;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:14px !important; border-radius:6px !important;
}
/* Secondary buttons sit on navy here — invert to translucent-white chrome */
#topbar .tb-right .btn-secondary{
  background:transparent !important; border:1px solid rgba(255,255,255,.35) !important;
  color:rgba(255,255,255,.9) !important;
}
#topbar .tb-right .btn-secondary:hover{ background:var(--navy-2) !important; color:#fff !important; }
#topbar .tb-right select{
  background:var(--navy-2); border:1px solid rgba(255,255,255,.18);
  color:#fff; border-radius:6px; padding:0 8px; font-family:inherit;
}
/* Native dropdown popups don't take the navy chrome but do inherit the white
   text — options were white-on-white on the light popup panel. */
#topbar .tb-right select option{
  background:var(--panel-bg,#fff); color:var(--text-primary,#1e293b);
}
/* Segmented view toggle + taskboard's member pills: same navy chrome as
   every other top-bar control (they were still white chips) */
#topbar .tb-right .tb-view-toggle{
  background:var(--navy-2) !important; border:1px solid rgba(255,255,255,.18);
}
#topbar .tb-right .tb-view-toggle .vt-btn{
  background:transparent; color:rgba(255,255,255,.7) !important; border:none;
}
#topbar .tb-right .tb-view-toggle .vt-btn:hover{ color:#fff !important; }
#topbar .tb-right .tb-view-toggle .vt-btn.active{
  background:var(--blue) !important; color:#fff !important;
}
#topbar .tb-right .bmp-private-badge,
#topbar .tb-right .bmp-invite-btn{
  background:transparent !important; border:1px solid rgba(255,255,255,.35) !important;
  color:rgba(255,255,255,.9) !important;
}
#topbar .tb-right .bmp-invite-btn:hover{ background:var(--navy-2) !important; color:#fff !important; }

/* Trailing utility buttons at the end of an in-page tab strip
   (e.g. Task Board's "new board" / "board options") */
.page-tabs .page-tab-trail{
  height:32px; padding:0 10px; border:none; background:transparent;
  color:var(--muted); font-size:14px; cursor:pointer; border-radius:6px 6px 0 0;
  display:inline-flex; align-items:center; font-family:inherit;
}
.page-tabs .page-tab-trail:hover{ background:#EFF1F5; color:var(--text); }

/* The bell/theme group and pin star must sit on one optical line: kill the
   group's own margin/padding/font overrides and give every icon button in
   the cluster identical 32px geometry with flex-centred contents. */
#topbar .tb-right .notif-controls{ margin-left:0 !important; gap:8px; align-items:center; }
#topbar .tb-right .btn-icon,
#topbar .tb-right .notif-controls .btn-icon,
#topbar .tb-right .notif-bell-btn{
  width:32px !important; height:32px !important; padding:0 !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  font-size:15px !important; line-height:1 !important;
}
#topbar .tb-right .notif-bell-icon{ display:inline-flex; align-items:center; }
#topbar .tb-right .btn-icon svg{ display:block; }
/* Pinned = solid white star on the navy bar — colour stays functional-only
   per the design system (no decorative amber) */
#topbar #alp-pin-page-btn.is-fav{ color:#fff !important; }
#topbar #alp-pin-page-btn.is-fav svg{ fill:currentColor; }

/* Global search: one shape and colour everywhere; width fixed on desktop
   only (mobile.css makes it full-width below 900px and must keep winning) */
#topbar .tb-search{
  height:32px !important; box-sizing:border-box;
  padding:0 12px !important; font-size:12.5px !important;
  border-radius:6px !important;
  background:var(--navy-2) !important; border:1px solid rgba(255,255,255,.18) !important;
  color:#fff !important; outline:none;
}
@media (min-width: 901px){
  #topbar .tb-search{ width:240px !important; }
}
#topbar .tb-search::placeholder{ color:rgba(255,255,255,.45); }
#topbar .tb-search:focus{ border-color:rgba(255,255,255,.45) !important; }

/* Workspace tab strip: fixed band */
#alp-tab-strip{ height:34px; min-height:34px; max-height:34px; }

/* In-page/record tabs: identical height and padding on every page */
.client-tab, .page-tab{ height:32px; padding:0 16px; box-sizing:border-box; }

/* Filter breadcrumb band: fixed height everywhere it appears */
.crumb-bar{ min-height:40px; padding-top:0; padding-bottom:0; display:flex; align-items:center; }
/* When the band sits directly under an in-page tab strip, fuse it into the
   content area: canvas background (matching the active tab) and no hard
   bottom border — filters read as the top of the board, not a chrome band */
#alp-page-tabs + .crumb-bar, #alp-page-tabs + #filter-drawer{
  background:var(--bg); border-bottom:none;
}

/* KPI numbers and numeric table cells: platform font with lining tabular
   digits — several module sheets asked for 'DM Mono', which most pages
   never load, so the browser fell back to raw monospace (Courier look on
   the £ figures). Spec: KPI numbers are bold Calibri in navy/status colour. */
.kpi-value, .report-table .num, .stat-value{
  font-family: inherit !important;
  font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════
   CRM MODULE — Clients list + client record
   Section 7 item 2: metric strip, filter breadcrumb,
   data table entity cell, record header, chevron
   lifecycle path, right-hand activity stream.
   Reference: .claude/design/alp-crm-demo.html
   ═══════════════════════════════════════════════ */

/* ── Metric strip (replaces stat/KPI cards) — spec 2.5 ── */
.metric-strip{ display:flex; margin:0 24px 14px; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; background:var(--surface); }
.metric-strip .metric{ flex:1; padding:10px 16px; border:none; border-right:1px solid var(--border); background:var(--surface); cursor:pointer; text-align:left; font-family:inherit; }
.metric-strip .metric:last-child{ border-right:none; }
.metric-strip .metric:hover{ background:#F7F9FC; }
.metric-strip .metric.sel{ background:var(--blue-soft); }
.metric-strip .metric .num{ font-size:20px; font-weight:bold; color:var(--navy); line-height:1.1; }
.metric-strip .metric .lbl{ font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; margin-top:2px; }
.metric-strip .metric.warn .num{ color:var(--amber); }
.metric-strip .metric.crit .num{ color:var(--red); }
.metric-strip .metric.ok .num{ color:var(--green); }

/* ── Filter breadcrumb bar — spec 2.6 ── */
.crumb-bar{ background:var(--surface); border-bottom:1px solid var(--border); padding:8px 24px; display:flex; align-items:center; gap:10px; font-size:13px; }
.crumbs{ display:flex; align-items:center; gap:6px; color:var(--muted); flex-wrap:wrap; }
.crumb{ background:var(--blue-soft); color:var(--blue); padding:3px 10px; border-radius:12px; font-weight:bold; font-size:12px; cursor:pointer; border:none; font-family:inherit; }
.crumb:hover{ background:#DDE4F5; }
.crumb.root{ background:transparent; color:var(--muted); font-weight:normal; padding-left:0; cursor:default; }
.crumb.root:hover{ background:transparent; }

/* ── Filter drawer → breadcrumb bar (Task Board, Tickets) — spec 2.6.
   The old collapsed "Filters ▾" full-width tab becomes an always-visible
   crumb bar; the panel still slides open below via the same toggle. ── */
#filter-drawer.crumb-bar{ flex-wrap:wrap; padding:6px 24px; row-gap:4px; }
#filter-drawer.crumb-bar .fd-tab{ width:auto; margin-left:auto; padding:4px 10px; border-radius:var(--radius); font-weight:normal; color:var(--muted); font-size:12.5px; }
/* Only the FIRST tab button pushes right — later ones sit beside it as one
   group (Views · Collapse all · Filters). Without this every fd-tab carried
   margin-left:auto and they spread across the whole bar. */
#filter-drawer.crumb-bar .fd-tab ~ .fd-tab{ margin-left:0; }
#filter-drawer.crumb-bar .fd-tab:hover{ background:#EFF1F5; color:var(--text); }
#filter-drawer.crumb-bar .fd-tab.fd-view-active{ color:var(--blue); font-weight:bold; background:var(--blue-soft); }
#filter-drawer.crumb-bar .fd-panel{ flex-basis:100%; order:10; }
.crumb-sep{ color:var(--muted); font-size:12px; margin:0 2px; }
#filter-drawer .fd-active-chip, .crm-filter-bar .fd-active-chip{
  background:var(--blue-soft); color:var(--blue); border:none;
  border-radius:12px; padding:3px 10px; font-size:12px; font-weight:bold;
}

/* ── Tickets stats strip → metric strip (spec 2.5, section 7.4) ── */
.tk-stats-strip{ display:flex; margin:0 0 12px; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; background:var(--surface); gap:0; padding:0; }
.tk-stat-item{ flex:1; padding:10px 16px; border:none; border-right:1px solid var(--border); cursor:pointer; background:var(--surface); border-radius:0; box-shadow:none; text-align:left; }
.tk-stat-item:last-child{ border-right:none; }
.tk-stat-item:hover{ background:#F7F9FC; transform:none; }
.tk-stat-item.active{ background:var(--blue-soft); border-color:var(--border); }
.tk-stat-val{ font-size:20px; font-weight:bold; line-height:1.1; }
.tk-stat-lbl{ font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; margin-top:2px; }

/* ── Data table refinements — spec 3.4 (site-wide via existing .data-table) ── */
.data-table th{ background:#F7F8FA; color:var(--muted); font-size:11.5px; letter-spacing:.4px; padding:9px 12px; border-bottom:1px solid var(--border-strong); }
.data-table td{ padding:9px 12px; border-bottom:1px solid #EAEDF2; }
.data-table tr:hover{ background:#F5F7FB; }
/* Identity hue comes inline (alpHueFor) — navy is only the fallback */
.entity-ava{ border-radius:5px !important; background:var(--navy); }

/* ── Record header — spec 3.6 ── */
.rec-head{ background:var(--surface); border-bottom:1px solid var(--border); padding:14px 24px 12px; }
.rec-title-row{ display:flex; align-items:flex-start; gap:14px; }
.rec-ava{ width:40px; height:40px; border-radius:8px; background:var(--navy); color:#fff; font-weight:bold; font-size:15px; display:flex; align-items:center; justify-content:center; flex-shrink:0; overflow:hidden; }
.rec-ava img{ width:100%; height:100%; object-fit:cover; }
.rec-title-row h1{ font-size:20px; font-weight:bold; color:var(--navy); line-height:1.2; }
.rec-title-row .sub{ font-size:12.5px; color:var(--muted); margin-top:2px; }
.rec-actions{ margin-left:auto; display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.rec-fields{ display:flex; gap:32px; margin-top:14px; flex-wrap:wrap; }
.rec-fields .rf .k{ font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; }
.rec-fields .rf .v{ font-size:13.5px; font-weight:bold; margin-top:2px; color:var(--text); }
.rec-fields .rf select{ font:inherit; font-weight:bold; font-size:13.5px; border:1px solid var(--border); border-radius:4px; background:transparent; padding:2px 4px; }

/* ── Chevron lifecycle path — spec 3.6 ── */
.path{ display:flex; background:var(--surface); border-bottom:1px solid var(--border); padding:10px 24px; flex-wrap:wrap; row-gap:6px; }
.path .step{ position:relative; background:#EDF0F5; color:var(--muted); font-size:12px; font-weight:bold; padding:7px 16px 7px 22px; clip-path:polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50%); margin-right:2px; white-space:nowrap; cursor:pointer; border:none; font-family:inherit;
  /* Share the full width of the record rather than huddling at the left. */
  flex:1 1 0; min-width:0; text-align:center; overflow:hidden; text-overflow:ellipsis; }
/* Below this the slices get too narrow to read, so fall back to content width
   and let them wrap onto a second line. */
@media (max-width:900px){
  .path .step{ flex:0 1 auto; text-align:left; }
}
.path .step:first-child{ clip-path:polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%); padding-left:14px; }
.path .step.done{ background:#DDE4F2; color:var(--blue); }
.path .step.current{ background:var(--blue); color:#fff; }

/* ── Record body columns + right-hand activity stream — spec 3.7 ── */
.rec-body{ display:flex; align-items:flex-start; }
.rec-col-centre{ flex:1; min-width:0; }
.rec-col-right{ width:300px; flex-shrink:0; border-left:1px solid var(--border); background:var(--surface); display:flex; flex-direction:column; }
.stream-h{ padding:12px 16px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:8px; }
.stream-h h3{ font-size:14px; font-weight:bold; color:var(--navy); }
.stream{ max-height:640px; overflow-y:auto; padding:12px 16px; }
.stream .entry{ display:flex; gap:10px; margin-bottom:16px; }
.stream .eava{ width:28px; height:28px; border-radius:50%; font-size:10.5px; font-weight:bold; color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.stream .eava.b{ background:var(--blue); } .stream .eava.n{ background:var(--navy); } .stream .eava.s{ background:#6B7280; }
.stream .who{ font-weight:bold; font-size:12.5px; }
.stream .when{ color:var(--muted); font-size:11.5px; margin-left:6px; }
.stream .body{ margin-top:5px; background:#F6F8FB; border:1px solid #E7EBF1; border-radius:6px; padding:8px 10px; font-size:12.5px; line-height:1.45; }
.stream .empty{ color:var(--muted); font-size:12.5px; padding:8px 0; }
.compose{ border-top:1px solid var(--border); padding:10px 14px; background:#FBFCFE; }
.compose textarea{ width:100%; border:1px solid var(--border-strong); border-radius:6px; resize:none; font-family:inherit; font-size:13px; padding:8px 10px; height:56px; outline:none; }
.compose textarea:focus{ border-color:var(--blue); }
.compose .row{ display:flex; margin-top:8px; align-items:center; }
.compose .hint{ font-size:11.5px; color:var(--muted); }
.compose .row .btn-primary{ margin-left:auto; }

/* ── Record / in-page tab strip (ServiceNow signature) — spec 2.3 ──
   .client-tabs = CRM record tabs; .page-tabs = the shared in-page tabs
   component (js/pagetabs.js) used by multi-view pages. Same visual. */
/* Breathing room under the workspace strip: the band opens with 10px of
   air before the tabs so the three chrome layers (topbar, workspace tabs,
   page tabs) don't read as one cramped stack. */
.client-tabs, .page-tabs{ background:#E6E9EF; border-bottom:1px solid var(--border-strong); padding:10px 24px 0; gap:4px; display:flex; align-items:flex-end; flex-wrap:wrap; }
.client-tab, .page-tab{ padding:8px 16px; border-radius:6px 6px 0 0; border:1px solid transparent; border-bottom:none; font-size:13px; color:var(--muted); font-weight:normal; background:transparent; cursor:pointer; font-family:inherit; display:inline-flex; align-items:center; gap:6px; }
.client-tab:hover, .page-tab:hover{ background:#EFF1F5; }
.client-tab.active, .page-tab.active{ background:var(--bg); border-color:var(--border-strong); color:var(--text); font-weight:bold; position:relative; top:1px; }
.page-tab-icon{ display:inline-flex; width:13px; height:13px; align-items:center; justify-content:center; }
/* Count badge on a shared in-page tab (e.g. "To grade 15"). Neutral by default;
   goes ALP-blue on the active tab. */
.page-tab[draggable="true"]{ cursor:pointer; }
.page-tab-dragging{ opacity:.45; cursor:grabbing; }
.page-tab-badge{ display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 6px; border-radius:9px; background:var(--muted); color:#fff; font-size:11px; font-weight:700; line-height:1; }
.page-tab.active .page-tab-badge{ background:var(--blue); }

/* ═══════════════════════════════════════════════
   DARK MODE — Enterprise Skin dark token set
   This file loads LAST and its light :root tokens were overriding every
   module's [data-theme=dark] theme by cascade order — which is why dark
   mode stopped working after the reskin. This block (even later in the
   same file) redefines the tokens AND the legacy-remap literals for dark,
   so both enterprise components and the old module CSS pick it up. The
   navy chrome (top bar, rail) is already dark and stays identical.
   ═══════════════════════════════════════════════ */
[data-theme="dark"]{
  /* Core tokens */
  --bg:#12151D; --surface:#1B212C; --border:#2A3242; --border-strong:#3B4457;
  --text:#E8ECF3; --muted:#9AA6B8; --link:#93A7EC;
  /* The navy brand --blue (#22327D) is unreadable as text/icon on a dark
     canvas, so dark mode gets a lighter, legible blue. enterprise.css loads
     last, so this [data-theme=dark] rule beats every per-module :root --blue.
     Works both as text-on-dark and as a button fill with white text. */
  --blue:#5B76E8;
  --blue-rgb:91,118,232;
  --blue-soft:#232D4D;
  --green:#4CAF6E; --amber:#D9A03F; --red:#E06A5E;

  /* Legacy remap literals (light values baked in the :root remap above) */
  --bg-tertiary:#161B25; --bg-input:#141922; --bg-hover:#232A38;
  --bg-active:var(--blue-soft); --bg-overlay:rgba(0,0,0,.6);
  --bg3:#161B25; --bg-code:#161B25; --surface-alt:#161B25;
  --sidebar-bg:var(--surface); --row-hover:#20283A;
  --blue-dark:#7E93E6;
  --green-subtle:rgba(76,175,110,.14);
  --card-blue-bg:#232D4D; --card-green-bg:rgba(76,175,110,.12);
  --card-red-bg:rgba(224,106,94,.12); --card-gold-bg:rgba(217,160,63,.12);
  --sev-low-bg:rgba(76,175,110,.12); --sev-high-bg:rgba(217,160,63,.12); --sev-critical-bg:rgba(224,106,94,.12);
  --scrollbar-thumb:#39435A; --track-bg:#232A38;
}
[data-theme="dark"] body{ background:var(--bg); color:var(--text); }

/* Component literals that carried light hexes */
[data-theme="dark"] .chip{ background:#20283A; border-color:var(--border); color:var(--muted); }
[data-theme="dark"] .chip.blue{ background:var(--blue-soft); border-color:#39466F; color:#AAB9F0; }
[data-theme="dark"] .chip.g{ background:rgba(76,175,110,.15); border-color:rgba(76,175,110,.35); color:var(--green); }
[data-theme="dark"] .chip.a{ background:rgba(217,160,63,.15); border-color:rgba(217,160,63,.35); color:var(--amber); }
[data-theme="dark"] .chip.r{ background:rgba(224,106,94,.15); border-color:rgba(224,106,94,.35); color:var(--red); }
[data-theme="dark"] .btn-secondary{ background:var(--surface); color:#AAB9F0; border-color:var(--border-strong); }
[data-theme="dark"] .btn-secondary:hover{ background:var(--blue-soft); }
[data-theme="dark"] .btn-icon:hover{ background:#232A38; color:var(--text); }
[data-theme="dark"] .btn-ghost-sm:hover{ background:#232A38; color:var(--text); }
[data-theme="dark"] .data-table th{ background:#161B25; border-bottom-color:var(--border-strong); }
[data-theme="dark"] .data-table td{ border-bottom-color:#232A38; }
[data-theme="dark"] .data-table tr:hover{ background:#20283A; }
[data-theme="dark"] .metric-strip .metric{ background:var(--surface); border-color:var(--border); }
[data-theme="dark"] .metric-strip .metric:hover{ background:#20283A; }
[data-theme="dark"] .metric-strip .metric.sel{ background:var(--blue-soft); }
[data-theme="dark"] .metric-strip .metric .num{ color:var(--text); }
[data-theme="dark"] h1, [data-theme="dark"] .card-h h3, [data-theme="dark"] .rec-title-row h1{ color:var(--text); }
[data-theme="dark"] .crumb:hover{ background:#2A3555; }
[data-theme="dark"] .client-tabs, [data-theme="dark"] .page-tabs{ background:#161B25; border-bottom-color:var(--border-strong); }
[data-theme="dark"] .client-tab:hover, [data-theme="dark"] .page-tab:hover{ background:#20283A; }
[data-theme="dark"] .page-tabs .page-tab-trail:hover{ background:#20283A; color:var(--text); }
[data-theme="dark"] .path .step{ background:#20283A; color:var(--muted); }
[data-theme="dark"] .path .step.done{ background:#26314F; color:#AAB9F0; }
[data-theme="dark"] .path .step.current{ background:var(--blue); color:#fff; }
[data-theme="dark"] .stream .body{ background:#161B25; border-color:#232A38; }
[data-theme="dark"] .compose{ background:#161B25; }
[data-theme="dark"] .compose textarea{ background:#141922; color:var(--text); border-color:var(--border-strong); }
[data-theme="dark"] .rec-head, [data-theme="dark"] .crumb-bar, [data-theme="dark"] .path, [data-theme="dark"] .rec-col-right{ background:var(--surface); border-color:var(--border); }
[data-theme="dark"] #alp-page-tabs + .crumb-bar, [data-theme="dark"] #alp-page-tabs + #filter-drawer{ background:var(--bg); }
[data-theme="dark"] .field .ctl{ background:#141922; border-color:var(--border-strong); color:var(--text); }
[data-theme="dark"] .field .ctl.ro{ background:#161B25; color:var(--muted); }
[data-theme="dark"] .tb-skel{ background:linear-gradient(90deg,#20283A 25%,#161B25 50%,#20283A 75%); background-size:400% 100%; }

/* ── Help Centre panel + platform tooltips (js/help.js) ─────────── */
#alp-help-panel{ position:fixed; top:0; right:0; bottom:0; width:400px; max-width:92vw;
  background:var(--surface); border-left:1px solid var(--border-strong);
  box-shadow:-8px 0 24px rgba(11,18,32,.18); z-index:1200; display:flex; flex-direction:column;
  transform:translateX(105%); transition:transform .18s ease; }
#alp-help-panel.open{ transform:translateX(0); }
#alp-help-panel .hc-head{ display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px 8px; }
#alp-help-panel .hc-title{ font-size:15px; font-weight:700; color:var(--text); }
#alp-help-panel .hc-close{ background:none; border:none; font-size:20px; line-height:1;
  color:var(--muted); cursor:pointer; padding:2px 6px; border-radius:var(--radius); }
#alp-help-panel .hc-close:hover{ background:var(--bg-hover, #F0F2F5); color:var(--text); }
#alp-help-panel .hc-search{ margin:0 16px 10px; padding:7px 10px; font:inherit; font-size:13px;
  border:1px solid var(--border-strong); border-radius:var(--radius); background:var(--bg-input, #fff);
  color:var(--text); outline:none; }
#alp-help-panel .hc-search:focus{ border-color:var(--blue); }
#alp-help-panel .hc-body{ flex:1; overflow-y:auto; padding:0 16px 24px; }
.hc-section-label{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); margin:16px 0 6px; }
.hc-article{ padding:10px 0 4px; }
.hc-article-title{ font-size:13.5px; font-weight:700; color:var(--text); margin-bottom:4px; }
.hc-overview{ font-size:12.5px; color:var(--muted); margin:0 0 8px; line-height:1.5; }
.hc-h{ font-size:12px; font-weight:700; color:var(--text); margin:8px 0 4px; }
.hc-list{ margin:0 0 8px; padding-left:16px; }
.hc-list li{ font-size:12.5px; color:var(--text); line-height:1.5; margin-bottom:4px; }
.hc-tips li{ color:var(--muted); }
.hc-acc{ border-bottom:1px solid var(--border); }
.hc-acc summary{ font-size:13px; font-weight:600; color:var(--text); padding:8px 0;
  cursor:pointer; list-style:none; display:flex; align-items:center; gap:6px; }
.hc-acc summary::before{ content:'›'; color:var(--muted); transition:transform .12s; }
.hc-acc[open] summary::before{ transform:rotate(90deg); }
.hc-acc summary::-webkit-details-marker{ display:none; }
.hc-empty{ font-size:13px; color:var(--muted); padding:24px 0; text-align:center; }
#alp-tooltip{ position:fixed; z-index:2000; max-width:260px; background:var(--navy, #1B2A4A);
  color:#fff; font-size:12px; line-height:1.45; padding:6px 10px; border-radius:var(--radius);
  box-shadow:0 4px 12px rgba(11,18,32,.28); pointer-events:none; opacity:0;
  transition:opacity .12s ease; }
#alp-tooltip.show{ opacity:1; }
[data-theme="dark"] #alp-help-panel .hc-close:hover{ background:#20283A; }
[data-theme="dark"] #alp-help-panel .hc-search{ background:#141922; }
[data-theme="dark"] #alp-tooltip{ background:#2A3555; box-shadow:0 4px 12px rgba(0,0,0,.5); }

/* Dark mode: tab strip legibility + view-transition backdrop.
   The cross-document root fade blends both page snapshots over the
   ::view-transition backdrop, which defaults to white — blinding between
   dark pages. Paint it the theme background instead. */
::view-transition{ background:#F2F4F7; }
html[data-theme="dark"]::view-transition{ background:#12151D; }
[data-theme="dark"] #alp-tab-strip{ background:#161B25; border-bottom-color:var(--border-strong); }
[data-theme="dark"] .alp-tab{ color:var(--muted); border-right-color:var(--border); }
[data-theme="dark"] .alp-tab:hover{ background:#20283A; color:var(--text); }
[data-theme="dark"] .alp-tab.active{ color:#fff; background:#232B3D; border-bottom-color:#5B76E8; }
[data-theme="dark"] .alp-tab-close:hover{ background:#2A3242; }
[data-theme="dark"] .alp-tab-add{ color:var(--muted); }
[data-theme="dark"] .alp-tab-add:hover{ color:#AAB9F0; }

/* Belt-and-braces for between-page paint: html itself carries the theme
   background (theme-boot also sets it inline pre-CSS). */
html{ background:var(--bg); }

/* Chrome view-transition groups swap INSTANTLY too — the default 0.25s
   snapshot cross-fade shimmered whenever the new page's chrome differed by
   a frame (now it can't: the rail and topbar cluster are static/pre-painted,
   so old and new pixels are identical and the swap is invisible). */
::view-transition-group(alp-rail), ::view-transition-group(alp-topbar), ::view-transition-group(alp-tabstrip){ animation:none; }
::view-transition-old(alp-rail), ::view-transition-old(alp-topbar), ::view-transition-old(alp-tabstrip){ animation:none; opacity:0; }
::view-transition-new(alp-rail), ::view-transition-new(alp-topbar), ::view-transition-new(alp-tabstrip){ animation:none; }

/* ── Content gutter normalisation (audit pass) ── */
/* audit-log.html — only page with no module stylesheet to hook (its
   css/audit-log.css link 404s — see audit notes). Scoped via the page's
   static #audit-main-dashboard child so nothing else matches. */
#page-content:has(> #audit-main-dashboard) { padding: 16px 20px 80px; }

/* Help Centre guides: numbered steps read as a procedure */
.hc-guide-steps{ padding-left:18px; }
.hc-guide-steps li{ margin-bottom:7px; }

/* ── One pill shape platform-wide ─────────────────────────────────
   Every status/label pill shares the same geometry; colour comes from
   the chip grammar (tinted/functional, neutral/label). Counters
   (.notif-badge etc.), filter controls (.fd-pill, .crm-type-pill) and
   tag inputs are deliberately excluded — they aren't status pills. */
.chip, .status-pill, .ragg-badge, .client-type-badge, .tier-tag,
.hr-badge, .tk-status-chip, .ticket-status-pill, .sla-badge, .sev-badge,
.wcc-badge, .prog-badge, .adm-role-badge, .adm-mod-badge,
.f9-status-pill, .f9-sys-badge, .type-badge, .disp-badge, .dir-badge,
.cat-pill, .doc-category-badge, .role-tag, .wf-meta-pill,
.wf-trigger-pill, .mc-priority-pill, .sl-ragg-badge, .fellow-badge {
  display:inline-flex; align-items:center; gap:5px;
  border-radius:10px; padding:0 10px;
  height:22px; box-sizing:border-box;
  font-size:11px; font-weight:700; line-height:1;
  white-space:nowrap; letter-spacing:.02em;
  vertical-align:middle;
}

/* ══════════════════════════════════════════════════════════════════
   TYPE GROUPS — one scale, allocated by meaning (2026-07-17).
   Every piece of text belongs to one of these groups; shared classes
   from the modules are retargeted here so the whole platform reads
   consistently without editing each file. Utility classes (.t-*) are
   for new markup. See the design doc addendum.
   1 Page title   16px bold      (topbar h1 — styled in sidebar.css)
   2 Section      15px bold      text colour — view/modal headings
   3 Card title   13px bold      navy — card and panel headers
   4 Body         13px regular   text colour — the default
   5 Secondary    12.5px regular muted — descriptions, sub-lines
   6 Label        11px bold      UPPERCASE, +.05em, muted — form/stat/column labels
   7 Meta         11px regular   dim — timestamps, counts, hints
   8 KPI numeral  20px bold      tabular-nums, navy — metric values
   ══════════════════════════════════════════════════════════════════ */
.t-section{ font-size:15px; font-weight:bold; color:var(--text); }
.t-card{ font-size:13px; font-weight:bold; color:var(--navy); }
.t-body{ font-size:13px; font-weight:normal; color:var(--text); }
.t-secondary{ font-size:12.5px; color:var(--muted); }
.t-label{ font-size:11px; font-weight:bold; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
.t-meta{ font-size:11px; color:var(--text-dim); }
.t-kpi{ font-size:20px; font-weight:bold; font-variant-numeric:tabular-nums; color:var(--navy); }

/* Group 2 — section/modal headings */
.modal-title, .hr-page-title, .sl-view-title { font-size:15px !important; font-weight:bold !important; color:var(--text) !important; }
/* Group 3 — card titles */
.settings-card-title, .hr-card-title, .card-h h3, .hc-article-title,
.wf-card-name, .cd-section-title { font-size:13px !important; font-weight:bold !important; color:var(--navy) !important; }
/* Group 5 — secondary/description lines */
.settings-desc, .hr-page-sub, .hc-overview, .settings-hint { font-size:12.5px !important; color:var(--muted) !important; }
/* Group 6 — labels */
.form-label, .modal-field label, .settings-field label, .hr-field label,
.hub-stat-label, .hr-stat-label, .tt-kpi-label {
  font-size:11px !important; font-weight:bold !important;
  text-transform:uppercase !important; letter-spacing:.05em !important; color:var(--muted) !important;
}
/* Group 8 — KPI numerals */
.hub-stat-val, .hr-stat-val, .tt-kpi-value { font-size:20px !important; font-weight:bold !important; font-variant-numeric:tabular-nums; }

/* Dark theme: navy card titles and KPI numerals read as light text */
[data-theme="dark"] .settings-card-title, [data-theme="dark"] .hr-card-title,
[data-theme="dark"] .card-h h3, [data-theme="dark"] .hc-article-title,
[data-theme="dark"] .wf-card-name, [data-theme="dark"] .cd-section-title,
[data-theme="dark"] .t-card, [data-theme="dark"] .t-kpi,
[data-theme="dark"] .modal-title, [data-theme="dark"] .hr-page-title { color:var(--text) !important; }

/* ── Chip colour groups: the ONLY pill colours on the platform ─────
   Seven pastel groups (deep text on a soft solid tint, hairline
   border). Data-driven hexes are snapped to a group by alpChipGroup()
   in db.js; static chips use these classes directly. Each class carries
   the FULL uniform pill geometry, so anything coloured like a chip is
   shaped like a chip (22px, radius 10, 0 10px padding). */
.chipc-grey,.chipc-blue,.chipc-green,.chipc-amber,.chipc-red,.chipc-purple,.chipc-teal{
  display:inline-flex;align-items:center;gap:5px;border-radius:10px !important;
  padding:0 10px;height:22px;box-sizing:border-box;font-size:11px;font-weight:700;
  line-height:1;white-space:nowrap;letter-spacing:.02em;vertical-align:middle;
}
.chipc-grey  { color:#5B6472 !important; background:#F1F3F6 !important; border:1px solid #D8DDE6 !important; }
.chipc-blue  { color:#22327D !important; background:#E9EDF8 !important; border:1px solid #C9D3EE !important; }
.chipc-green { color:#2E7D32 !important; background:#E8F2E9 !important; border:1px solid #CBE3CD !important; }
.chipc-amber { color:#B7791F !important; background:#FDF3E1 !important; border:1px solid #F0DCB4 !important; }
.chipc-red   { color:#B3362B !important; background:#F9E7E5 !important; border:1px solid #EFC9C4 !important; }
.chipc-purple{ color:#6D28D9 !important; background:#F1EBFB !important; border:1px solid #DCCEF5 !important; }
.chipc-teal  { color:#0F766E !important; background:#E6F4F2 !important; border:1px solid #BFE3DF !important; }
[data-theme="dark"] .chipc-grey  { color:#98A2B3 !important; background:#232B3A !important; border-color:#3B4457 !important; }
[data-theme="dark"] .chipc-blue  { color:#AAB9F0 !important; background:#26314F !important; border-color:#3B4A75 !important; }
[data-theme="dark"] .chipc-green { color:#7FC98B !important; background:#1F3327 !important; border-color:#2E4A38 !important; }
[data-theme="dark"] .chipc-amber { color:#E4B45E !important; background:#3A2F1B !important; border-color:#57472A !important; }
[data-theme="dark"] .chipc-red   { color:#E58379 !important; background:#3B2422 !important; border-color:#5A3532 !important; }
[data-theme="dark"] .chipc-purple{ color:#B79CE8 !important; background:#2E2542 !important; border-color:#463867 !important; }
[data-theme="dark"] .chipc-teal  { color:#6CC7BE !important; background:#1D3330 !important; border-color:#2E4C48 !important; }

/* Dark theme: functional TEXT tones lighten to the chip dark-text values
   so coloured text stays readable and matched to its chips. (--blue is
   left alone — it is also the button/link background.) */
[data-theme="dark"]{ --green:#7FC98B; --amber:#E4B45E; --red:#E58379; }

/* ── Change Log form (Add/Edit Change modal) ──────────────────────────
   Opened from the Change Log page, CRM client records, and the task/ticket
   completion prompts. These classes were referenced by changelog.js but
   never styled anywhere — the form rendered with raw browser defaults
   (inline labels, unsized inputs). Lives here (loads last on every page)
   so the modal is styled wherever it opens. */
.cl-form-label{
  display:block; font-size:11px; font-weight:bold; text-transform:uppercase;
  letter-spacing:.04em; color:var(--muted,#5B6472); margin:12px 0 4px;
}
.cl-form-input{
  width:100%; box-sizing:border-box; padding:8px 10px;
  border:1px solid var(--border,#D8DDE6); border-radius:6px;
  background:var(--surface,#fff); color:var(--text,#1F2633);
  font-size:13px; font-family:inherit;
}
.cl-form-input:focus{ outline:none; border-color:var(--blue,#22327D); }
textarea.cl-form-input{ resize:vertical; min-height:90px; }
.cl-form-row{ display:flex; gap:12px; }
.cl-form-row .cl-form-col{ flex:1; min-width:0; }
@media (max-width:600px){ .cl-form-row{ flex-direction:column; gap:0; } }

/* Chart copy button (js/chartcopy.js) — top-right of any chart */
.alp-chart-copy{ position:absolute; top:8px; right:8px; z-index:6; width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; padding:0; border:1px solid var(--border); border-radius:7px; background:var(--surface,#fff); color:var(--muted,#5d6577); cursor:pointer; opacity:.5; transition:opacity .15s,color .15s,border-color .15s; box-shadow:0 1px 3px rgba(20,30,55,.10); }
.alp-chart-copy:hover, *:hover > .alp-chart-copy, .alp-chart-copy:focus-visible, .alp-chart-copy.ok, .alp-chart-copy.err, .alp-chart-copy.busy{ opacity:1; }
.alp-chart-copy:hover{ color:var(--blue,#2C46C6); border-color:var(--blue,#2C46C6); }
.alp-chart-copy.ok{ color:var(--green,#2f8f5b); border-color:var(--green,#2f8f5b); }
.alp-chart-copy.err{ color:var(--red,#c2453d); border-color:var(--red,#c2453d); }
.alp-chart-copy.busy{ opacity:.6; cursor:default; }
@media print{ .alp-chart-copy{ display:none; } }

/* ══════════════════════════════════════════════════════════════════
   Availability planner (shared: HR ▸ Availability + My Hub ▸ Availability)
   Rendered by js/availability.js — tokenised so it themes with the app.
   ══════════════════════════════════════════════════════════════════ */
.avl-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:16px; }
.avl-title{ font-size:17px; font-weight:800; color:var(--text-primary,#111); }
.avl-sub{ font-size:12px; color:var(--text-dim,#9ca3af); margin-top:2px; }
.avl-tz{ display:flex; align-items:center; gap:8px; }
.avl-tz label{ font-size:12px; color:var(--text-dim,#9ca3af); }
.avl-empty{ padding:40px; text-align:center; color:var(--text-dim,#9ca3af); background:var(--bg-secondary,#fff); border:1px solid var(--border-primary,rgba(0,0,0,.08)); border-radius:12px; }
/* overflow:visible (not auto) so the wrap is NOT its own scroll container — the
   sticky header then pins against the page scroller (#hub-content) and there is
   only ONE scrollbar. Horizontal scroll on narrow screens is handled in mobile.css. */
.avl-wrap{ overflow:visible; border:1px solid var(--border-primary,rgba(0,0,0,.08)); border-radius:12px; background:var(--bg-secondary,#fff); }
/* table-layout:fixed pins the name/tz columns to a set width so the 24 hour
   columns share ALL the remaining width evenly (Andy 2026-07-28) — before this
   the name column absorbed the slack, leaving the grid squashed on the right. */
.avl-table{ border-collapse:separate; border-spacing:0; width:100%; font-size:12px; table-layout:fixed; }
.avl-table th{ padding:8px 6px 8px; font-size:9px; font-weight:700; color:var(--text-dim,#9ca3af); text-align:center; border-bottom:1px solid var(--border-primary,rgba(0,0,0,.08)); }
.avl-name-h{ text-align:left !important; width:210px; min-width:210px; padding-left:14px !important; font-size:11px !important; position:sticky; left:0; background:var(--bg-tertiary,#f5f7fa); z-index:2; border-bottom:1px solid var(--border-primary,rgba(0,0,0,.08)); }
.avl-tz-h{ width:70px; min-width:70px; font-size:11px !important; }
.avl-hr-h.now{ color:var(--blue,#2C46C6); }
/* Stacked common-timezone header rows: each row shows the same columns read in a
   different zone, so you can see what any hour is everywhere the team works. */
.avl-tz-rowlbl{ font-weight:800 !important; color:var(--text-muted,#6b7280) !important; text-align:center !important; }
.avl-hr-sub{ padding:2px 2px !important; font-size:8px !important; font-weight:600 !important; color:var(--text-dim,#9ca3af); }
.avl-hr-sub.now{ color:var(--blue,#2C46C6) !important; }
/* Sticky stacked-timezone header — the whole GMT/EST/CST/PST block stays pinned
   to the top of the scroll area while you scroll the team list (Andy 2026-07-29).
   Header cells need an opaque background so scrolling rows don't show through. */
.avl-table thead{ position:sticky; top:0; z-index:3; }
.avl-table thead th{ background:var(--bg-secondary,#fff); border-bottom-color:var(--border-secondary,rgba(120,130,150,.16)); }
.avl-table thead tr:last-child th{ border-bottom-color:var(--border-primary,rgba(0,0,0,.08)); }
.avl-table thead th.avl-name-h{ background:var(--bg-tertiary,#f5f7fa); z-index:4; }
.avl-row.alt{ background:rgba(0,0,0,.015); }
.avl-group{ padding:10px 14px 4px !important; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; }
.avl-name-c{ padding:5px 12px 5px 14px; width:210px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; position:sticky; left:0; background:var(--bg-secondary,#fff); z-index:1; }
.avl-name-c.alt{ background:var(--bg-tertiary,#f5f7fa); }
.avl-name-inner{ display:flex; align-items:center; gap:8px; }
.avl-name{ font-weight:600; color:var(--text-primary,#111); }
.avl-leave-tag{ font-size:10px; color:var(--amber-text,#b45309); font-weight:600; }
.avl-noset{ font-size:10px; color:var(--text-dim,#9ca3af); }
.avl-tz-c{ padding:5px 8px; font-size:11px; color:var(--text-muted,#6b7280); white-space:nowrap; text-align:center; }
.avl-cell{ padding:2px 0; width:28px; height:28px; vertical-align:middle; }
.avl-bar{ width:100%; height:18px; background:var(--green,#10b981); opacity:.85; border-radius:0; }
.avl-bar.l{ border-top-left-radius:5px; border-bottom-left-radius:5px; }
.avl-bar.r{ border-top-right-radius:5px; border-bottom-right-radius:5px; }
.avl-bar.active-now{ background:var(--green,#10b981); opacity:1; box-shadow:inset 0 0 0 2px var(--blue,#2C46C6); }
.avl-bar.now-empty{ background:var(--blue,#2C46C6); opacity:.14; border-radius:3px; box-shadow:inset 0 0 0 2px var(--blue,#2C46C6); }
.avl-leave-cell{ padding:6px 8px; }
.avl-leave-bar{ height:18px; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; letter-spacing:.04em; color:var(--amber-text,#92400e); border:1px dashed var(--amber,#d97706); border-radius:6px; background:repeating-linear-gradient(45deg,#fef3c7,#fef3c7 8px,#fde68a 8px,#fde68a 16px); }
.avl-legend{ display:flex; gap:20px; margin-top:14px; font-size:11px; flex-wrap:wrap; color:var(--text-muted,#6b7280); }
.avl-legend span{ display:flex; align-items:center; gap:6px; }
.avl-lg{ width:24px; height:12px; border-radius:4px; display:inline-block; }
.avl-lg-work{ background:var(--green,#10b981); opacity:.85; }
.avl-lg-now{ background:var(--green,#10b981); box-shadow:inset 0 0 0 2px var(--blue,#2C46C6); }
.avl-lg-cur{ background:rgba(44,70,198,.14); box-shadow:inset 0 0 0 2px var(--blue,#2C46C6); border-radius:3px; }
.avl-lg-leave{ background:repeating-linear-gradient(45deg,#fef3c7,#fef3c7 4px,#fde68a 4px,#fde68a 8px); border:1px dashed var(--amber,#d97706); border-radius:3px; }
.avl-note{ margin-top:16px; padding:12px 16px; background:var(--amber-bg,#fef3c7); border:1px solid var(--amber,#fcd34d); border-radius:8px; font-size:12px; color:var(--amber-text,#92400e); }
/* Availability editing affordances (see js/availability.js) */
.avl-note a{ color:inherit; text-decoration:underline; }
.avl-note a:hover{ opacity:.75; }
.avl-note .avl-fix{ display:inline-block; margin:2px 3px 0 0; padding:1px 7px; border:1px solid currentColor; border-radius:20px; text-decoration:none; font-weight:600; }
.avl-note-self{ background:var(--blue-bg,#eef2ff); border-color:var(--blue,#4f46e5); color:var(--blue-text,#3730a3); }
.avl-noset a{ color:var(--blue,#4f46e5); text-decoration:none; font-weight:600; }
.avl-noset a:hover{ text-decoration:underline; }
.avl-edit{ margin-left:5px; font-size:10px; color:var(--blue,#4f46e5); text-decoration:none; opacity:0; transition:opacity .12s; }
.avl-row:hover .avl-edit{ opacity:1; }
.avl-edit:hover{ text-decoration:underline; }

/* ── Shared subtab overflow (js/pagetabs.js) — collapse tabs that don't fit
   into a "⋯" menu instead of wrapping to a second row. Scoped to the shared
   #alp-page-tabs strip so the CRM record tab strip (.client-tabs) is untouched. */
#alp-page-tabs{ flex-wrap:nowrap; overflow:hidden; }
.page-tab-hidden{ display:none !important; }
.page-tabs-more{ flex:0 0 auto; align-self:flex-end; height:32px; padding:0 12px; border:1px solid transparent; border-bottom:none; border-radius:6px 6px 0 0; background:transparent; color:var(--muted); cursor:pointer; font-size:17px; line-height:1; display:inline-flex; align-items:center; font-family:inherit; }
.page-tabs-more:hover{ background:var(--bg-hover); color:var(--text); }
.page-tabs-more.active{ color:var(--blue); }
.ptab-more-menu{ position:fixed; z-index:1000; background:var(--surface); border:1px solid var(--border); border-radius:9px; box-shadow:0 12px 32px rgba(25,34,61,.18); padding:6px; min-width:180px; max-height:60vh; overflow:auto; display:flex; flex-direction:column; gap:2px; }
.ptab-more-item{ text-align:left; background:none; border:0; font-family:inherit; font-size:13px; color:var(--text); padding:8px 10px; border-radius:6px; cursor:pointer; white-space:nowrap; }
.ptab-more-item:hover{ background:var(--bg-hover); }
.ptab-more-item.active{ color:var(--blue); font-weight:700; }

/* ── Admin ▸ AI Prompts (central Claude prompt editor) ───────────────────── */
.aip-wrap{padding:0 24px 48px;max-width:1080px}
.aip-intro{margin:8px 0 4px;color:var(--text-secondary);font-size:13px;line-height:1.5}
.aip-intro strong{color:var(--text-primary)}
.aip-intro code,.aip-desc code{font-family:'DM Mono',monospace;font-size:11px;background:var(--bg-secondary);border:1px solid var(--border-secondary);border-radius:4px;padding:1px 5px}
.aip-warn{color:var(--amber);font-weight:600}
.aip-toolbar{display:flex;align-items:center;gap:12px;margin:14px 0 6px;position:sticky;top:0;background:var(--bg-primary);padding:8px 0;z-index:2}
.aip-search{flex:1;max-width:340px;padding:7px 12px;border:1px solid var(--border-primary);border-radius:var(--radius);background:var(--surface);color:var(--text-primary);font-size:13px}
.aip-count{color:var(--text-secondary);font-size:12px}
.aip-group{margin-top:22px}
.aip-group-title{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-secondary);margin:0 0 10px;padding-bottom:6px;border-bottom:1px solid var(--border-secondary)}
.aip-card{background:var(--surface);border:1px solid var(--border-primary);border-radius:var(--radius);padding:14px 16px;margin-bottom:12px}
.aip-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.aip-card-titles{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.aip-card-label{font-weight:600;font-size:13.5px;color:var(--text-primary)}
.aip-id{font-family:'DM Mono',monospace;font-size:11px;color:var(--text-secondary);opacity:.8}
.aip-badge{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;padding:2px 7px;border-radius:20px;border:1px solid var(--border-secondary);color:var(--text-secondary)}
.aip-badge-system{background:rgba(37,99,235,.10);border-color:transparent;color:var(--blue)}
.aip-badge-user{background:var(--bg-secondary)}
.aip-badge-combined{background:var(--bg-secondary)}
.aip-badge-where{background:transparent}
.aip-badge-over{background:rgba(217,119,6,.12);border-color:transparent;color:var(--amber)}
.aip-desc{color:var(--text-secondary);font-size:12.5px;line-height:1.5;margin:6px 0 10px}
.aip-text{width:100%;box-sizing:border-box;font-family:'DM Mono',monospace;font-size:12px;line-height:1.55;color:var(--text-primary);background:var(--bg-primary);border:1px solid var(--border-primary);border-radius:var(--radius);padding:10px 12px;resize:vertical;min-height:88px}
.aip-text:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 2px rgba(37,99,235,.15)}
.aip-vars{margin-top:8px;font-size:11px;color:var(--text-secondary)}
.aip-var{font-family:'DM Mono',monospace;font-size:11px;background:rgba(37,99,235,.08);color:var(--blue);border-radius:4px;padding:1px 5px;margin-right:2px}
.aip-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:10px}
.aip-status{margin-right:auto;font-size:12px;color:var(--text-secondary)}
.aip-status-ok{color:var(--green)}
.aip-status-err{color:var(--red)}
.aip-group-ro{opacity:.92}
.aip-relay{background:var(--bg-secondary);border:1px solid var(--border-secondary);border-radius:var(--radius);padding:10px 14px;margin-bottom:8px}
.aip-relay .aip-card-label{font-size:12.5px;margin-right:8px}
@media(max-width:640px){.aip-wrap{padding:0 12px 40px}.aip-actions{flex-wrap:wrap}}

/* Native colour picker rendered as a clean circular swatch (My Hub avatar
   "Custom" colour). Inline styles can't reach these pseudo-elements. */
.alp-color-tile::-webkit-color-swatch-wrapper{padding:0}
.alp-color-tile::-webkit-color-swatch{border:none;border-radius:50%}
.alp-color-tile::-moz-color-swatch{border:none;border-radius:50%}

/* ── Shared modal component ──────────────────────────────────────────
   Lives here (loaded by every page) so the #modal-overlay/.modal markup is
   styled everywhere — not just on pages that happen to load a module CSS
   that also defines it. Previously this was duplicated across ~16 module
   CSS files, so pages like Five9 Config (which load none of them) rendered
   an unstyled, broken modal. enterprise.css loads last, so this is the one
   canonical modal; mobile.css's !important bottom-sheet rules still win on
   phones. */
.modal-overlay{position:fixed;inset:0;background:var(--bg-overlay);z-index:500;display:none;align-items:center;justify-content:center}
.modal-overlay.open{display:flex}
.modal{background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:12px;padding:24px;width:90%;max-width:560px;max-height:85vh;overflow-y:auto;box-shadow:var(--panel-shadow-lg);animation:modalIn .2s ease}
@keyframes modalIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.modal-title{font-size:16px;font-weight:700;margin-bottom:16px}
.modal-field{margin-bottom:14px}
.modal-field label{display:block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin-bottom:5px}
.modal-field input,.modal-field select,.modal-field textarea{width:100%}
.modal-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:20px;padding-top:16px;border-top:1px solid var(--border-primary)}
.modal-section{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim);margin:16px 0 8px;padding-top:12px;border-top:1px solid var(--border-subtle)}

/* ── Shared collapsible filter bar (Andy 2026-08-29: filters hidden until opened) ── */
.alp-fbar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.alp-fbar-toggle{ display:inline-flex; align-items:center; gap:6px; }
.alp-fcount{ display:inline-flex; align-items:center; justify-content:center; min-width:16px; height:16px; padding:0 4px; border-radius:8px; background:var(--blue,#2C46C6); color:#fff; font-size:10px; font-weight:700; }
.alp-fpanel{ display:none; }
.alp-fpanel.open{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:12px 14px; margin-top:8px; background:var(--bg-secondary,#fff); border:1px solid var(--border-primary,rgba(0,0,0,.08)); border-radius:8px; }