/* ============================================================================
 * Apex Reserve Studio — Attio-style monochrome design tokens
 * ============================================================================
 * Phase A1 of the restyle: new ink ramp + Attio kanban-style pill palette.
 * Legacy token names (--navy, --accent, --gray-*) are kept as aliases pointing
 * at the new ink ramp so every existing template renders without breaking
 * during the migration. The literal aliases will be removed in Phase A3
 * cleanup once every template uses --ink-* directly.
 */

/* ----- Brand tokens ------------------------------------------------------- */
:root {
  /* === NEW: Attio-aligned ink ramp =====================================
   * The entire app surface lives on this monochrome ramp. Color appears
   * ONLY on functional status pills (see --pill-* below) and on risk
   * indicators (--risk-* below) — never decoratively.
   */
  --ink-1000: #0A0A0A;   /* primary surface — dark buttons, headlines */
  --ink-900:  #161616;   /* hover state for dark buttons */
  --ink-800:  #1F1F1F;
  --ink-700:  #2D2D2D;   /* body text */
  --ink-600:  #4A4A4A;
  --ink-500:  #6B6B6B;   /* secondary text */
  --ink-400:  #8E8E8E;   /* tertiary text */
  --ink-300:  #C8C8C8;   /* borders */
  --ink-200:  #E5E5E5;   /* dividers */
  --ink-100:  #F2F2F2;   /* hover backgrounds */
  --ink-50:   #FAFAFA;   /* sidebar / panel backgrounds */
  --ink-0:    #FFFFFF;   /* canvas */

  /* === NEW: Attio kanban-style status pills =============================
   * Saturated pill colors — the ONLY chromatic element in the UI besides
   * functional risk indicators.
   */
  --pill-prospect-bg:    #F0E7FC;  --pill-prospect-fg:    #6B3FA0;  /* purple */
  --pill-meeting-bg:     #FCE7CC;  --pill-meeting-fg:     #A85F00;  /* orange */
  --pill-procurement-bg: #DCE7FC;  --pill-procurement-fg: #1F47B8;  /* blue */
  --pill-trial-bg:       #FCDDEC;  --pill-trial-fg:       #B8276A;  /* pink */
  --pill-won-bg:         #D6F2DE;  --pill-won-fg:         #1F7A3F;  /* green */

  /* === Risk palette (functional only, never decorative) =================
   * Slightly muted from the original to match Attio's restraint while
   * remaining unmistakably status colors on financial KPIs.
   */
  --risk-high:        #C8341F;
  --risk-high-tint:   #FBE6E2;
  --risk-med:         #B86B0F;
  --risk-med-tint:    #FCEED5;
  --risk-low:         #1F7A3F;
  --risk-low-tint:    #DBF1E1;

  /* Status pill aliases — restyled to Attio-style monochrome chips */
  --pill-progress-bg: var(--pill-procurement-bg);
  --pill-progress-fg: var(--pill-procurement-fg);
  --pill-hold-bg:     var(--ink-100);
  --pill-hold-fg:     var(--ink-700);
  --pill-pending-bg:  var(--ink-100);
  --pill-pending-fg:  var(--ink-700);
  --pill-tag-bg:      var(--ink-100);
  --pill-tag-fg:      var(--ink-700);

  /* === Customer brand-color presets (Phase D pre-flight) ================
   * 8 pre-vetted brand colors a firm can pick during onboarding (Sprint
   * 13's wizard step 3). Each is pre-tested for WCAG AA contrast against
   * white (text use) and against ink-1000 (background use). Sprint 11
   * will use the chosen firm's brand color in PDFs + dashboard accent.
   * See design-tokens.md for full spec.
   */
  --brand-preset-1: #0F4C75;  /* Steel Blue   — conservative / corporate */
  --brand-preset-2: #5C7E58;  /* Sage         — earthy / calming */
  --brand-preset-3: #8B2C3A;  /* Burgundy     — premium / warm */
  --brand-preset-4: #2E2E2E;  /* Charcoal     — default-safe */
  --brand-preset-5: #1A2B4C;  /* Navy         — corporate / trustworthy */
  --brand-preset-6: #2C5530;  /* Forest       — natural / stable */
  --brand-preset-7: #475569;  /* Slate        — modern / neutral */
  --brand-preset-8: #B8543F;  /* Terracotta   — warm / distinctive */
}

/* === Design system reference page ====================================
 * Layout helpers used only by /design-system (no impact elsewhere).
 */
.ds-section { margin-bottom: 48px; }
.ds-section-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ink-1000);
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.ds-section-sub {
  font-size: 0.82rem;
  color: var(--ink-500);
  margin-bottom: 18px;
}
.ds-swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
.ds-swatch {
  border: 1px solid var(--ink-200);
  border-radius: 8px;
  overflow: hidden;
  background: var(--ink-0);
}
.ds-swatch-color {
  height: 64px;
  border-bottom: 1px solid var(--ink-200);
}
.ds-swatch-meta {
  padding: 8px 10px;
}
.ds-swatch-name {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ink-1000);
}
.ds-swatch-hex {
  font-size: 0.74rem;
  color: var(--ink-500);
  font-family: 'JetBrains Mono', monospace;
}
.ds-type-row {
  border-top: 1px solid var(--ink-200);
  padding: 14px 0;
}
.ds-type-row:first-child { border-top: none; }
.ds-type-label {
  font-size: 0.72rem;
  color: var(--ink-500);
  font-family: 'JetBrains Mono', monospace;
  margin-bottom: 4px;
  letter-spacing: 0.04em;
}
.ds-component-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 0;
  border-top: 1px solid var(--ink-200);
}
.ds-component-row:first-child { border-top: none; }
.ds-component-label {
  flex: 0 0 140px;
  font-size: 0.74rem;
  color: var(--ink-500);
  font-family: 'JetBrains Mono', monospace;
}

/* ----- Base ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  background: var(--ink-50);
  color: var(--ink-1000);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-feature-settings: 'tnum', 'ss01', 'cv11';   /* tabular nums + Inter stylistic alt */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 14px;
  line-height: 1.55;
}

a { color: var(--ink-1000); text-decoration: none; }
a:hover { color: var(--ink-700); text-decoration: underline; text-underline-offset: 2px; }

code {
  font-family: 'JetBrains Mono', 'Cascadia Code', Consolas, 'Courier New', monospace;
  font-size: 0.85em;
  background: var(--ink-100);
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--ink-700);
}

/* Numerals everywhere are tabular */
table, .tnum, .apex-mono { font-variant-numeric: tabular-nums; }

/* ----- App shell layout ------------------------------------------------- */
.apex-app {
  display: grid;
  grid-template-columns: 268px 1fr;
  grid-template-rows: 56px 1fr;
  min-height: 100vh;
  grid-template-areas:
    "topbar topbar"
    "sidebar main";
}

/* ----- TOP BAR — Attio-style white with thin bottom border ------------- */
.apex-topbar {
  grid-area: topbar;
  background: var(--ink-0);
  color: var(--ink-1000);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  border-bottom: 1px solid var(--ink-200);
  position: sticky; top: 0; z-index: 30;
}
.apex-topbar-title {
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: -0.005em;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-1000);
  text-transform: none;       /* Attio uses sentence case, not uppercase */
}
/* Logo image filter override — the base.html sets brightness(0) invert(1)
 * to make the logo white for the dark top bar. With the new light top bar
 * we need it dark instead. Highest specificity wins.
 */
.apex-topbar-title img {
  filter: none !important;
}
.apex-topbar-search {
  flex: 0 1 420px;
  background: var(--ink-50);
  border: 1px solid var(--ink-200);
  border-radius: 8px;
  padding: 7px 12px;
  color: var(--ink-1000);
  font-size: 0.88rem;
  font-family: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.apex-topbar-search::placeholder { color: var(--ink-400); }
.apex-topbar-search:focus {
  outline: none;
  border-color: var(--ink-1000);
  background: var(--ink-0);
  box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.06);
}

.apex-topbar-right { display: flex; align-items: center; gap: 14px; }

/* Override the "+ New" button in the top bar — base.html inlines a dark
 * style that no longer matches the new monochrome topbar. The button now
 * sits on a white surface and needs subtle borders. */
.apex-topbar-right .btn {
  background: var(--ink-0) !important;
  color: var(--ink-1000) !important;
  border: 1px solid var(--ink-300) !important;
}
.apex-topbar-right .btn:hover {
  background: var(--ink-100) !important;
  border-color: var(--ink-1000) !important;
}

.apex-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--ink-1000);
  color: var(--ink-0);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 0.74rem;
  letter-spacing: 0.02em;
}

/* ----- SIDEBAR — Attio-style light gray with subtle nav --------------- */
.apex-sidebar {
  grid-area: sidebar;
  background: var(--ink-50);
  border-right: 1px solid var(--ink-200);
  padding: 18px 12px;
  display: flex; flex-direction: column;
  position: sticky; top: 56px;
  height: calc(100vh - 56px);
  overflow-y: auto;
}

/* Workspace switcher card at the top of the sidebar */
.apex-context-card {
  background: var(--ink-0);
  border: 1px solid var(--ink-200);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 16px;
  text-decoration: none;
  transition: border-color 0.12s ease;
}
.apex-context-card:hover {
  border-color: var(--ink-300);
  background: var(--ink-0);
}
.apex-context-avatar {
  width: 28px; height: 28px;
  border-radius: 6px;
  background: var(--ink-1000);
  color: var(--ink-0);
  font-weight: 600; font-size: 0.74rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}
.apex-context-name {
  font-weight: 600;
  color: var(--ink-1000);
  font-size: 0.88rem;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: -0.005em;
}

/* Nav items — Attio-style: subtle hover background, gentle active state */
.apex-nav-section-label {
  font-size: 0.66rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-500);
  margin: 18px 0 4px 12px;
}
.apex-nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 12px;
  border-radius: 6px;
  font-weight: 500;
  font-size: 0.86rem;
  color: var(--ink-700);
  cursor: pointer;
  margin-bottom: 1px;
  text-decoration: none;
  transition: background 0.12s ease, color 0.12s ease;
  position: relative;
}
.apex-nav-item:hover {
  background: var(--ink-100);
  color: var(--ink-1000);
  text-decoration: none;     /* override the global a:hover underline */
}
.apex-nav-item.is-active {
  background: var(--ink-100);
  color: var(--ink-1000);
  font-weight: 600;
}
.apex-nav-item.is-active::before {
  /* Thin black indicator on the left edge — Attio's subtle active cue */
  content: "";
  position: absolute;
  left: 0; top: 7px; bottom: 7px;
  width: 2px;
  background: var(--ink-1000);
  border-radius: 0 2px 2px 0;
}
.apex-nav-item.is-active:hover { background: var(--ink-100); color: var(--ink-1000); }
.apex-nav-icon {
  width: 16px; text-align: center;
  font-size: 0.92rem; opacity: 0.9;
}

.apex-bottom-pill {
  margin-top: auto;
  background: var(--ink-1000);
  color: var(--ink-0);
  padding: 9px 14px;
  border-radius: 6px;
  text-align: center;
  font-weight: 500;
  font-size: 0.82rem;
  text-decoration: none;
  letter-spacing: -0.005em;
  transition: background 0.12s;
}
.apex-bottom-pill:hover {
  background: var(--ink-900);
  color: var(--ink-0);
  text-decoration: none;
}

.apex-firm-block {
  color: var(--ink-400);
  font-size: 0.74rem;
  line-height: 1.5;
  margin-top: 16px;
  padding: 0 8px;
}
.apex-firm-block strong { color: var(--ink-700); font-weight: 700; }

/* ----- MAIN ------------------------------------------------------------ */
.apex-main {
  grid-area: main;
  padding: 32px 44px;
  overflow-x: hidden;
  max-width: 1400px;
  /* Center within whatever space the grid cell allocates. Matters most
     when the sidebar is collapsed and main has the entire viewport
     width to itself; previously left-aligned which looked off-center
     on wide monitors. */
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

/* ----- Page header — Attio-style restrained editorial ------------------ */
.apex-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--ink-200);
}
.apex-breadcrumbs {
  color: var(--ink-500);
  font-size: 0.78rem;
  margin-bottom: 8px;
  display: flex; align-items: center; gap: 6px;
  /* Drop the uppercase + heavy weight — Attio uses sentence case here */
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}
.apex-breadcrumbs a { color: var(--ink-500); text-decoration: none; }
.apex-breadcrumbs a:hover { color: var(--ink-1000); text-decoration: none; }
.apex-breadcrumbs .sep { color: var(--ink-300); }
.apex-page-title {
  font-size: 1.7rem;
  font-weight: 600;       /* Attio uses 600 for display headlines, not Light */
  color: var(--ink-1000);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.apex-page-subtitle {
  color: var(--ink-500);
  margin-top: 6px;
  font-size: 0.9rem;
  max-width: 760px;
  line-height: 1.5;
}
.apex-action-row { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.apex-action-link {
  color: var(--ink-1000);
  font-weight: 500;
  font-size: 0.82rem;
  display: inline-flex; align-items: center; gap: 5px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.apex-action-link:hover { color: var(--ink-700); text-decoration: none; }

/* ----- Buttons — Attio-style monochrome -------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  font-family: inherit;
  font-weight: 500;
  font-size: 0.86rem;
  border-radius: 8px;       /* slightly more generous corners */
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.12s ease;
  text-decoration: none;
  letter-spacing: -0.005em;
}
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.10);
}

.btn-primary {
  background: var(--ink-1000); color: var(--ink-0);
  border-color: var(--ink-1000); font-weight: 600;
}
.btn-primary:hover {
  background: var(--ink-900); border-color: var(--ink-900);
  color: var(--ink-0); text-decoration: none;
}

.btn-secondary {
  background: var(--ink-0); color: var(--ink-1000);
  border-color: var(--ink-300);
}
.btn-secondary:hover {
  border-color: var(--ink-1000); background: var(--ink-50);
  color: var(--ink-1000); text-decoration: none;
}

/* .btn-accent — legacy gold CTA, now restyled to match primary for
 * any pages that haven't been migrated yet. Will be removed in A3b. */
.btn-accent {
  background: var(--ink-1000); color: var(--ink-0);
  border-color: var(--ink-1000); font-weight: 600;
}
.btn-accent:hover {
  background: var(--ink-900); border-color: var(--ink-900); color: var(--ink-0);
}

.btn-ghost { background: transparent; color: var(--ink-500); border-color: transparent; }
.btn-ghost:hover {
  background: var(--ink-100); color: var(--ink-1000);
  text-decoration: none;
}

.btn-sm { padding: 5px 11px; font-size: 0.8rem; }
.btn-lg { padding: 11px 22px; font-size: 0.92rem; }

/* ----- Form controls --------------------------------------------------- */
.form-row { margin-bottom: 14px; }
.form-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ink-700);
  margin-bottom: 6px;
  letter-spacing: 0;
  text-transform: none;     /* drop the uppercase — Attio uses sentence case */
}
.form-help { font-size: 0.78rem; color: var(--ink-500); margin-top: 5px; }
.form-input, .form-select, .form-textarea {
  width: 100%;
  background: var(--ink-0);
  border: 1px solid var(--ink-300);
  border-radius: 8px;
  padding: 9px 12px;
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--ink-1000);
  transition: all 0.12s ease;
  font-variant-numeric: tabular-nums;
}
.form-input:hover, .form-select:hover, .form-textarea:hover { border-color: var(--ink-400); }
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none;
  border-color: var(--ink-1000);
  box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.06);
}

/* ----- Cards — flatter, lighter chrome -------------------------------- */
.apex-card {
  background: var(--ink-0);
  border: 1px solid var(--ink-200);
  border-radius: 10px;
  padding: 22px 24px;
  box-shadow: none;          /* drop the shadow entirely — Attio is flat */
}
.apex-card-title {
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--ink-1000);
  margin-bottom: 4px;
  letter-spacing: -0.005em;
}
.apex-card-sub {
  color: var(--ink-500);
  font-size: 0.84rem;
  margin-bottom: 14px;
  line-height: 1.5;
}

/* ----- Status pills — Attio-style saturated chips --------------------- */
.apex-pill {
  display: inline-flex; align-items: center;
  padding: 2px 9px;
  border-radius: 12px;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  letter-spacing: 0.005em;
}
/* These map our project/task statuses onto Attio's kanban-style palette.
 * Reserved for things-the-board-cares-about. */
.apex-pill-in-progress  { background: var(--pill-procurement-bg); color: var(--pill-procurement-fg); }  /* blue */
.apex-pill-on-hold      { background: var(--ink-100);             color: var(--ink-700); }
.apex-pill-not-started  { background: var(--ink-100);             color: var(--ink-700); }
.apex-pill-complete     { background: var(--pill-won-bg);         color: var(--pill-won-fg); }          /* green */
.apex-pill-tag          { background: var(--ink-100);             color: var(--ink-700); }
.apex-pill-risk-high    { background: var(--risk-high-tint);      color: var(--risk-high); }
.apex-pill-risk-med     { background: var(--risk-med-tint);       color: var(--risk-med); }
.apex-pill-risk-low     { background: var(--risk-low-tint);       color: var(--risk-low); }
.apex-pill-trend-up     { background: var(--pill-won-bg);         color: var(--pill-won-fg); }

/* ----- Metric tiles — flat, monochrome, no gold top-border ------------ */
.apex-metric-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.apex-metric-tile {
  background: var(--ink-0);
  border: 1px solid var(--ink-200);
  border-radius: 10px;
  padding: 18px 20px;
  box-shadow: none;
  transition: border-color 0.12s ease;
}
.apex-metric-tile:hover { border-color: var(--ink-300); }
.apex-metric-label {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ink-500);
  margin-bottom: 8px;
  letter-spacing: 0;
  text-transform: none;     /* sentence case — Attio's voice */
  display: flex; align-items: center; gap: 6px;
}
.apex-metric-value {
  font-size: 1.55rem;
  font-weight: 600;         /* tighter weight — Attio uses 500-600 for the hero number */
  color: var(--ink-1000);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.apex-metric-sub {
  color: var(--ink-500);
  font-size: 0.8rem;
  margin-top: 6px;
  line-height: 1.5;
}

.apex-metric-tile.is-highlight {
  background: var(--ink-1000);
  border: 1px solid var(--ink-1000);
  color: var(--ink-0);
}
.apex-metric-tile.is-highlight .apex-metric-label,
.apex-metric-tile.is-highlight .apex-metric-sub { color: rgba(255,255,255,0.7); }
.apex-metric-tile.is-highlight .apex-metric-value { color: var(--ink-0); }

/* Icon-led tile (Component Detail page) */
.apex-icon-tile {
  background: var(--ink-0);
  border: 1px solid var(--ink-200);
  border-radius: 10px;
  padding: 18px 20px;
  display: flex; gap: 14px; align-items: flex-start;
  box-shadow: none;
  transition: border-color 0.12s ease;
}
.apex-icon-tile:hover { border-color: var(--ink-300); }
.apex-icon-tile .apex-icon-circle {
  width: 40px; height: 40px;
  border-radius: 8px;          /* squarer than 50% — matches Attio's data icons */
  background: var(--ink-100);
  color: var(--ink-1000);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

/* ----- Tables — quieter chrome, Attio-style ---------------------------- */
.apex-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--ink-0);
  border-radius: 10px;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--ink-200);
}
.apex-table thead th {
  background: var(--ink-50);
  color: var(--ink-600);
  font-weight: 500;
  font-size: 0.74rem;
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--ink-200);
  white-space: nowrap;
  letter-spacing: 0;
  text-transform: none;       /* sentence case */
}
.apex-table td {
  padding: 12px 14px;
  font-size: 0.86rem;
  border-bottom: 1px solid var(--ink-200);
  vertical-align: middle;
  color: var(--ink-1000);
}
.apex-table tr:last-child td { border-bottom: none; }
.apex-table tr:hover td { background: var(--ink-50); }
.apex-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.apex-table .center { text-align: center; }
.apex-table tr.is-category-header td {
  background: var(--ink-100);
  color: var(--ink-700);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0;
  text-transform: none;
  padding: 8px 14px;
}
.apex-table tfoot td {
  background: var(--ink-50);
  font-weight: 600;
  border-top: 1px solid var(--ink-300);
  border-bottom: none;
  color: var(--ink-1000);
}

/* ----- Tabs — Attio-style underline ------------------------------------ */
.apex-tabs {
  display: flex;
  gap: 24px;
  border-bottom: 1px solid var(--ink-200);
  margin-bottom: 22px;
}
.apex-tab {
  text-transform: none;
  letter-spacing: -0.005em;
  font-weight: 500;
  font-size: 0.88rem;
  color: var(--ink-500);
  padding: 11px 2px;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.12s ease, border-color 0.12s ease;
  margin-bottom: -1px;        /* overlap parent border so active line sits flush */
}
.apex-tab:hover { color: var(--ink-1000); text-decoration: none; }
.apex-tab.is-active {
  color: var(--ink-1000);
  border-bottom-color: var(--ink-1000);
  font-weight: 600;
}

/* ----- Banners / alerts — monochrome chrome --------------------------- */
.apex-banner {
  background: var(--ink-50);
  border: 1px solid var(--ink-200);
  border-radius: 10px;
  padding: 12px 16px;
  display: flex; align-items: center; gap: 12px;
  color: var(--ink-1000);
  font-size: 0.88rem;
  margin-bottom: 18px;
}
.apex-banner-icon {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--ink-1000); color: var(--ink-0);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 0.74rem;
  flex-shrink: 0;
}
.apex-banner-info {
  background: var(--pill-procurement-bg);
  border-color: rgba(31, 71, 184, 0.20);
  color: var(--pill-procurement-fg);
}
.apex-banner-info .apex-banner-icon { background: var(--pill-procurement-fg); }
.apex-banner-warn {
  background: var(--risk-med-tint);
  border-color: rgba(184, 107, 15, 0.25);
  color: var(--risk-med);
}
.apex-banner-warn .apex-banner-icon { background: var(--risk-med); }

/* ----- Kanban (Projects) ---------------------------------------------- */
.apex-kanban-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(230px, 1fr));
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 10px;
}
.apex-kanban-col {
  background: var(--ink-50);
  border: 1px solid var(--ink-200);
  border-radius: 10px;
  padding: 12px;
  min-height: 220px;
}
.apex-kanban-col-header {
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--ink-1000);
  padding: 2px 4px 10px 4px;
  border-bottom: 1px solid var(--ink-200);
  margin-bottom: 12px;
  text-transform: none;
  letter-spacing: -0.005em;
  display: flex; justify-content: space-between; align-items: center;
}
.apex-kanban-count {
  background: var(--ink-1000);
  color: var(--ink-0);
  border-radius: 10px;
  padding: 1px 7px;
  font-size: 0.7rem;
  font-weight: 600;
}
.apex-project-card {
  background: var(--ink-0);
  border: 1px solid var(--ink-200);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 8px;
  box-shadow: none;
  transition: border-color 0.12s ease;
}
.apex-project-card:hover {
  border-color: var(--ink-400);
}
.apex-project-card-title {
  color: var(--ink-1000);
  font-weight: 600;
  font-size: 0.9rem;
  margin: 4px 0;
}
.apex-project-card-desc {
  color: var(--ink-500);
  font-size: 0.8rem;
  line-height: 1.4;
  margin-bottom: 8px;
}
.apex-progress {
  height: 5px;
  background: var(--ink-200);
  border-radius: 3px;
  overflow: hidden;
  margin: 4px 0 8px 0;
}
.apex-progress > div { height: 100%; background: var(--ink-1000); }

/* ----- Section title -------------------------------------------------- */
.apex-section-title {
  color: var(--ink-1000);
  font-weight: 600;
  font-size: 1.05rem;
  margin: 22px 0 12px 0;
  letter-spacing: -0.005em;
}
.apex-section-title-accent {
  color: var(--ink-500);
  font-size: 0.74rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}

/* ----- Empty state ---------------------------------------------------- */
.apex-empty {
  background: var(--ink-0);
  border: 1px dashed var(--ink-300);
  border-radius: 10px;
  padding: 36px;
  text-align: center;
  color: var(--ink-500);
  font-size: 0.92rem;
  line-height: 1.5;
}

/* ----- Chart card ----------------------------------------------------- */
.apex-chart-card {
  background: var(--ink-0);
  border: 1px solid var(--ink-200);
  border-radius: 10px;
  padding: 18px 20px;
  box-shadow: none;
  margin-bottom: 16px;
}

/* ----- Utility -------------------------------------------------------- */
.apex-muted { color: var(--ink-500); }
.apex-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.apex-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

/* ----- Sidebar toggle ------------------------------------------------- */
/* Visible-always control in the top bar. Used for collapsing the sidebar
   so the main canvas can fill the screen (handy for screenshots + focus). */
.apex-sidebar-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-right: 4px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 6px;
  color: var(--ink-700);
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
  flex-shrink: 0;
}
.apex-sidebar-toggle:hover {
  background: var(--ink-100);
  color: var(--ink-1000);
}
.apex-sidebar-toggle:focus-visible {
  outline: none;
  border-color: var(--ink-1000);
  box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.08);
}

/* Smooth grid transition when collapsing. */
.apex-app {
  transition: grid-template-columns 0.18s ease;
}
.apex-sidebar {
  transition: transform 0.18s ease, opacity 0.18s ease;
}

/* Collapsed state — sidebar hidden, main content claims its space. */
body.is-sidebar-collapsed .apex-app {
  grid-template-columns: 0 1fr;
}
body.is-sidebar-collapsed .apex-sidebar {
  transform: translateX(-100%);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}
.apex-stack > * + * { margin-top: 18px; }
.mb-3 { margin-bottom: 14px; }
.mb-4 { margin-bottom: 18px; }
.mb-6 { margin-bottom: 24px; }
.mt-3 { margin-top: 14px; }
.mt-4 { margin-top: 18px; }

@media (max-width: 920px) {
  .apex-app {
    grid-template-columns: 1fr;
    grid-template-rows: 56px auto 1fr;
    grid-template-areas: "topbar" "sidebar" "main";
  }
  .apex-sidebar { height: auto; position: relative; }
  .apex-grid-2, .apex-grid-3 { grid-template-columns: 1fr; }
}

/* ----- Selection ------------------------------------------------------ */
::selection { background: var(--ink-1000); color: var(--ink-0); }