/* ============================================================
   SoundOps — Global Stylesheet
   Version: 1.0  |  March 2026
   Stack: Bootstrap 5 grid layer + custom component system
   
   TABLE OF CONTENTS
   1.  Google Fonts Import
   2.  Design Tokens (CSS Variables)
   3.  Base Reset & Typography
   4.  Layout — Sidebar
   5.  Layout — Main / Topbar
   6.  Cards (.so-card)
   7.  Filter Bar
   8.  Tables (.table-so)
   9.  Badges & Status Pills
   10. Buttons
   11. Forms
   12. Stat Cards
   13. Dashboard Components
   14. Detail View Components
   15. Info Boxes (note / warning / todo / done)
   16. Tag Pills & Social Links
   17. Activity Feed
   18. Utility Classes
   19. Responsive
   ============================================================ */


/* ── 1. FONTS ─────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');


/* ── 2. DESIGN TOKENS ─────────────────────────────────────── */
/* Brand palette per SoundOps_Design_Brief_2026 (soundops-brand-development skill):
   Ink / Paper / Slate / Signature Brass (the one accent, used sparingly for CTAs,
   active nav, north-star numbers) / Ledger Green (paid) / Slate Teal (pending) /
   Flag Red (overdue/error). Brand color and status colors never overlap -- don't
   reuse Brass for a status meaning, and don't introduce a new hue outside this set
   without updating the brief first. */
:root {
  /* Brand palette */
  --so-navy:        #14161B; /* Ink -- headings/primary text */
  --so-navy-dark:   #14161B; /* Ink -- sidebar surface */
  --so-navy-mid:    #23262E; /* Ink, one step lighter -- sidebar hover */
  --so-blue:        #3C7A89; /* Slate Teal -- links/informational accent (was a generic blue; teal is the palette's only cool hue) */
  --so-accent:      #3C7A89; /* Slate Teal -- alias of --so-blue, single usage site */

  /* Neutrals */
  --so-black:       #14161B; /* Ink */
  --so-charcoal:    #1D2027;
  --so-dark:        #2A2D35;
  --so-text:        #14161B; /* Ink */
  --so-mid:         #6B6F76; /* Slate */
  --so-muted:       #9A9DA3;
  --so-border:      #E4E1D9; /* warm-neutral, matches Paper's undertone */
  --so-border-soft: #EFECE3;
  --so-bg:          #FBF9F5; /* Paper */
  --so-bg-soft:     #F5F2EB;
  --so-white:       #fff;

  /* Aliases -- these two custom properties were referenced with var() in 41
     spots across 9 templates (plus 3 spots in this file) but never actually
     defined in :root, so every one of those usages was silently falling back
     to a hardcoded gray, completely bypassing the token system and this
     entire 2026-09-18 redesign pass. Found while fixing releases/
     readiness_report.html. Do not remove without re-checking those call
     sites first. */
  --so-text-muted:  var(--so-mid);
  --so-text-body:   var(--so-text);

  /* Semantic status colors -- Ledger Green (paid/settled), Slate Teal (pending),
     Flag Red (overdue/error). Never Signature Brass -- that's reserved for CTAs/
     active-nav/north-star numbers only. */
  --so-green:       #2F7D5A; /* Ledger Green */
  --so-green-bg:    #E3EFE8;
  --so-green-text:  #1F5A3F;
  --so-red:         #B23B3B; /* Flag Red */
  --so-red-bg:      #F5E7E6;
  --so-red-text:    #7A2828;
  --so-yellow:      #8C6D2F; /* muted amber -- deliberately distinct from Brass, "warning" not "action" */
  --so-yellow-bg:   #F2EAD9;
  --so-yellow-text: #5C4720;
  --so-orange-bg:   #F2EAD9;
  --so-orange-bdr:  #8C6D2F;
  --so-blue-bg:     #E1EBED; /* Slate Teal tint */
  --so-blue-text:   #244F59;
  --so-gray-bg:     #EFECE3;
  --so-gray-text:   #4A4D53;
  --so-slate-bg:    #E4E1D9;
  --so-slate-text:  #52555C;

  /* Soft border tints for tinted status boxes/banners (a -bg fill with an edge that
     reads against Paper). Same hues as the status colors above -- each sits between
     its -bg and its base color. Added 2026-09-19 for the template hex sweep. */
  --so-blue-bdr:    #B7CDD3;
  --so-green-bdr:   #B5D3C4;
  --so-red-bdr:     #E3BFBD;
  --so-yellow-bdr:  #DCCBA5;

  /* Info box colors (mirrors dev docs) -- same 4-way status mapping as above */
  --ib-note-bg:     #E1EBED;
  --ib-note-bdr:    #3C7A89;
  --ib-note-text:   #244F59;
  --ib-warn-bg:     #F2EAD9;
  --ib-warn-bdr:    #8C6D2F;
  --ib-warn-text:   #5C4720;
  --ib-todo-bg:     #F5E7E6;
  --ib-todo-bdr:    #B23B3B;
  --ib-todo-text:   #7A2828;
  --ib-done-bg:     #E3EFE8;
  --ib-done-bdr:    #2F7D5A;
  --ib-done-text:   #1F5A3F;

  /* Brand accent -- the ONE distinctive color, used sparingly (CTAs, active nav
     state, north-star numbers). Not used above for any status meaning. */
  --so-brass:       #B8863B;

  /* Typography -- Fraunces (display/logo/headlines/statement headers only),
     Inter (every working screen -- has real tabular-figure support for money
     tables via font-variant-numeric: tabular-nums, applied at the component
     level, not here). JetBrains Mono retained for genuine code/ID contexts only
     -- do not use mono for eyebrow/label styling, it reads as an AI tell. */
  --font-display:   'Fraunces', Georgia, serif;
  --font-body:      'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-mono:      'JetBrains Mono', 'Courier New', monospace;

  /* Sizing */
  --sidebar-w:      230px;
  --sidebar-w-sm:   60px;
  --topbar-h:       56px;
  --radius:         10px;
  --radius-sm:      6px;
  --radius-xs:      4px;

  /* Shadows */
  --shadow-sm:      0 1px 3px rgba(0,0,0,0.05);
  --shadow-md:      0 2px 8px rgba(0,0,0,0.08);
}

/* Bootstrap's semantic colors -> brand tokens (added 2026-09-19).
   Templates use Bootstrap utilities (.text-primary/.text-danger icons, .badge.bg-*,
   .alert-*, and models' status_color() -> bg-secondary/info/primary/warning/success/
   danger) and nothing remapped them, so they rendered Bootstrap's stock #0d6efd /
   #dc3545 / #ffc107 / #198754 -- the pre-brand look, most visible on dashboard card
   icons and release-status badges. Remapping the variables fixes every such class
   app-wide without touching each template.
   The -rgb triplets can't be derived from a var() hex, so they are literal copies of
   the token values above -- keep them in sync by hand. Mapping: primary = Slate Teal,
   info = deeper Slate Teal (so Mixing vs Mastering stay distinguishable),
   secondary = Slate, success = Ledger Green, danger = Flag Red, warning = muted
   amber. Never Brass -- see DESIGN_STANDARDS.md section 5. */
:root {
  --bs-primary:   var(--so-blue);       --bs-primary-rgb:   60,122,137;
  --bs-info:      var(--so-blue-text);  --bs-info-rgb:      36,79,89;
  --bs-secondary: var(--so-mid);        --bs-secondary-rgb: 107,111,118;
  --bs-success:   var(--so-green);      --bs-success-rgb:   47,125,90;
  --bs-danger:    var(--so-red);        --bs-danger-rgb:    178,59,59;
  --bs-warning:   var(--so-yellow);     --bs-warning-rgb:   140,109,47;

  /* Tinted surfaces for .alert-* / .list-group-item-* */
  --bs-primary-bg-subtle: var(--so-blue-bg);   --bs-primary-border-subtle: var(--so-blue-bdr);   --bs-primary-text-emphasis: var(--so-blue-text);
  --bs-info-bg-subtle:    var(--so-blue-bg);   --bs-info-border-subtle:    var(--so-blue-bdr);   --bs-info-text-emphasis:    var(--so-blue-text);
  --bs-secondary-bg-subtle: var(--so-gray-bg); --bs-secondary-border-subtle: var(--so-gray-bg); --bs-secondary-text-emphasis: var(--so-gray-text);
  --bs-success-bg-subtle: var(--so-green-bg);  --bs-success-border-subtle: var(--so-green-bdr);  --bs-success-text-emphasis: var(--so-green-text);
  --bs-danger-bg-subtle:  var(--so-red-bg);    --bs-danger-border-subtle:  var(--so-red-bdr);    --bs-danger-text-emphasis:  var(--so-red-text);
  --bs-warning-bg-subtle: var(--so-yellow-bg); --bs-warning-border-subtle: var(--so-yellow-bdr); --bs-warning-text-emphasis: var(--so-yellow-text);

  /* Link color -- what .btn-link and any Bootstrap-styled link inherits. Matches the
     global `a` rule below (Slate Teal, Ink on hover); rgb literals are copies of those. */
  --bs-link-color: var(--so-blue);        --bs-link-color-rgb: 60,122,137;
  --bs-link-hover-color: var(--so-navy);  --bs-link-hover-color-rgb: 20,22,27;
}

/* Checkboxes/radios/switches and overdue table rows also hardcode Bootstrap's blue/pink
   per class rather than via the variables above. */
.form-check-input:checked { background-color: var(--so-blue); border-color: var(--so-blue); }
.form-check-input:focus   { border-color: var(--so-blue); box-shadow: 0 0 0 .25rem rgba(60,122,137,.25); }
.table-danger {
  --bs-table-color: var(--so-text);
  --bs-table-bg: var(--so-red-bg);
  --bs-table-border-color: var(--so-border);
  --bs-table-striped-bg: var(--so-red-bg);
  --bs-table-hover-bg: var(--so-red-bg);
}

/* .btn-outline-* hardcode their colors per class in Bootstrap 5.3 (not via the
   variables above), so they need their own override. Same mapping. */
.btn-outline-primary   { --bs-btn-color: var(--so-blue);  --bs-btn-border-color: var(--so-blue);  --bs-btn-hover-bg: var(--so-blue);  --bs-btn-hover-border-color: var(--so-blue);  --bs-btn-active-bg: var(--so-blue);  --bs-btn-active-border-color: var(--so-blue);  --bs-btn-disabled-color: var(--so-blue);  --bs-btn-disabled-border-color: var(--so-blue);  --bs-btn-focus-shadow-rgb: 60,122,137; }
.btn-outline-secondary { --bs-btn-color: var(--so-mid);   --bs-btn-border-color: var(--so-mid);   --bs-btn-hover-bg: var(--so-mid);   --bs-btn-hover-border-color: var(--so-mid);   --bs-btn-active-bg: var(--so-mid);   --bs-btn-active-border-color: var(--so-mid);   --bs-btn-disabled-color: var(--so-mid);   --bs-btn-disabled-border-color: var(--so-mid);   --bs-btn-focus-shadow-rgb: 107,111,118; }
.btn-outline-success   { --bs-btn-color: var(--so-green); --bs-btn-border-color: var(--so-green); --bs-btn-hover-bg: var(--so-green); --bs-btn-hover-border-color: var(--so-green); --bs-btn-active-bg: var(--so-green); --bs-btn-active-border-color: var(--so-green); --bs-btn-disabled-color: var(--so-green); --bs-btn-disabled-border-color: var(--so-green); --bs-btn-focus-shadow-rgb: 47,125,90; }
.btn-outline-danger    { --bs-btn-color: var(--so-red);   --bs-btn-border-color: var(--so-red);   --bs-btn-hover-bg: var(--so-red);   --bs-btn-hover-border-color: var(--so-red);   --bs-btn-active-bg: var(--so-red);   --bs-btn-active-border-color: var(--so-red);   --bs-btn-disabled-color: var(--so-red);   --bs-btn-disabled-border-color: var(--so-red);   --bs-btn-focus-shadow-rgb: 178,59,59; }

/* Solid Bootstrap buttons. .btn-primary is a primary CTA, so it takes Signature Brass
   with the same Ink hover as .btn-so-primary (Jennifer's call, 2026-09-19). Secondary
   and danger stay on the Slate / Flag Red status mapping. */
.btn-primary   { --bs-btn-bg: var(--so-brass); --bs-btn-border-color: var(--so-brass); --bs-btn-hover-bg: var(--so-navy); --bs-btn-hover-border-color: var(--so-navy); --bs-btn-active-bg: var(--so-navy); --bs-btn-active-border-color: var(--so-navy); --bs-btn-disabled-bg: var(--so-brass); --bs-btn-disabled-border-color: var(--so-brass); --bs-btn-focus-shadow-rgb: 184,134,59; }
.btn-secondary { --bs-btn-bg: var(--so-mid);   --bs-btn-border-color: var(--so-mid);   --bs-btn-hover-bg: var(--so-dark); --bs-btn-hover-border-color: var(--so-dark); --bs-btn-active-bg: var(--so-dark); --bs-btn-active-border-color: var(--so-dark); --bs-btn-disabled-bg: var(--so-mid);   --bs-btn-disabled-border-color: var(--so-mid);   --bs-btn-focus-shadow-rgb: 107,111,118; }
.btn-danger    { --bs-btn-bg: var(--so-red);   --bs-btn-border-color: var(--so-red);   --bs-btn-hover-bg: var(--so-red-text); --bs-btn-hover-border-color: var(--so-red-text); --bs-btn-active-bg: var(--so-red-text); --bs-btn-active-border-color: var(--so-red-text); --bs-btn-disabled-bg: var(--so-red);   --bs-btn-disabled-border-color: var(--so-red);   --bs-btn-focus-shadow-rgb: 178,59,59; }


/* ── 3. BASE RESET & TYPOGRAPHY ───────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-body);
  background: var(--so-bg);
  color: var(--so-text);
  font-size: 14px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* No global link rule existed before 2026-09-18 -- every plain <a> without a
   specific class (invoice numbers, contract links, etc.) was silently
   falling back to Bootstrap's default blue (#0d6efd), off-brand. */
a {
  color: var(--so-blue);
}
a:hover {
  color: var(--so-navy);
}

/* Display headings — Playfair */
h1, .h1,
.so-display {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--so-navy);
}

/* Page title in topbar — Inter, not the display serif; Fraunces is reserved
   for the logo, marketing headlines, and the artist statement header only
   (DESIGN_STANDARDS.md #3). */
.topbar h1 {
  font-family: var(--font-body);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--so-navy);
  margin: 0;
  letter-spacing: 0.01em;
}

/* Card heading level */
.so-card-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--so-navy);
  margin: 0;
}

/* Section eyebrow label (above headings) */
.so-eyebrow {
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--so-muted);
  margin-bottom: 0.25rem;
  display: block;
}

/* Monospace — data, codes, numbers */
code,
.so-mono {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  background: var(--so-bg);
  border: 1px solid var(--so-border);
  padding: 1px 6px;
  border-radius: var(--radius-xs);
  color: var(--so-charcoal);
}

/* Dollar amounts: body font (Inter) with tabular figures so columns line up --
   NOT .so-mono, which is a boxed code chip for ISRCs / IPI numbers / filenames
   (DESIGN_STANDARDS.md section 2). */
.so-money {
  font-variant-numeric: tabular-nums;
}

pre {
  background: var(--so-black);
  color: #e8e8e8;
  padding: 18px 20px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.6;
  overflow-x: auto;
  margin-bottom: 1rem;
}

pre code {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
}

/* Text size utilities — named by role */
.so-text-xs    { font-size: 0.72rem; }   /* timestamps, sub-labels */
.so-text-sm    { font-size: 0.78rem; }   /* table headers, eyebrows */
.so-text-body  { font-size: 0.875rem; }  /* primary body / table rows */
.so-text-lg    { font-size: 0.95rem; }   /* card headings inline */

/* Text color utilities */
.so-text-muted    { color: var(--so-muted); }
.so-text-mid      { color: var(--so-mid); }
.so-text-navy     { color: var(--so-navy); }
.so-text-blue     { color: var(--so-blue); }
.so-text-dark     { color: var(--so-dark); }
.so-text-success  { color: var(--so-green); }
.so-text-danger   { color: var(--so-red); }


/* ── 4. LAYOUT — SIDEBAR ──────────────────────────────────── */
#sidebar {
  width: var(--sidebar-w);
  height: 100vh;
  background: var(--so-navy-dark);
  position: fixed;
  top: 0; left: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  transition: width 0.2s;
  overflow-y: auto;
  overflow-x: hidden;
}

#sidebar .brand {
  padding: 1.25rem 1.5rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}

#sidebar .brand .logo-text {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.05em;
}

#sidebar .brand small {
  color: rgba(255,255,255,0.35);
  font-size: 0.65rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  display: block;
  margin-top: 2px;
}

#sidebar .nav-section {
  padding: 0.75rem 0.75rem 0.2rem 1rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
  margin-top: 0.25rem;
}

#sidebar .nav-link {
  color: rgba(255,255,255,0.65);
  border-radius: var(--radius-sm);
  margin: 1px 8px;
  padding: 0.45rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  transition: all 0.15s;
  text-decoration: none;
  border-left: 2px solid transparent;
}

#sidebar .nav-link:hover {
  color: #fff;
  background: var(--so-navy-mid);
  border-left-color: rgba(255,255,255,0.25);
}

#sidebar .nav-link.active {
  color: #fff;
  background: var(--so-brass);
  border-left-color: transparent;
}

#sidebar .nav-link i {
  width: 18px;
  text-align: center;
  font-size: 0.95rem;
  flex-shrink: 0;
}

/* Indented sub-nav items (e.g. Productions / Budgets under Releases) */
#sidebar .nav-link.nav-sub {
  margin-left: 28px;
  font-size: 0.76rem;
  color: rgba(255,255,255,0.5);
}

#sidebar .nav-link.nav-sub:hover {
  color: rgba(255,255,255,0.85);
}

#sidebar .sidebar-footer {
  margin-top: auto;
  padding: 1rem 1.25rem 1.25rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}

#sidebar .sidebar-footer .user-name {
  color: #fff;
  font-weight: 600;
  font-size: 0.85rem;
}

#sidebar .sidebar-footer .user-info {
  color: rgba(255,255,255,0.5);
  font-size: 0.75rem;
}

#sidebar .sidebar-footer .user-info a {
  color: rgba(255,255,255,0.45);
  text-decoration: none;
}

#sidebar .sidebar-footer .user-info a:hover {
  color: rgba(255,255,255,0.8);
}


/* ── 5. LAYOUT — MAIN / TOPBAR ────────────────────────────── */
#main-content {
  margin-left: var(--sidebar-w);
  min-height: 100vh;
}

.topbar {
  background: var(--so-white);
  border-bottom: 1px solid var(--so-border);
  padding: 0 1.5rem;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: var(--shadow-sm);
}

.page-body {
  padding: 1.5rem;
}


/* ── 6. CARDS ─────────────────────────────────────────────── */
.so-card {
  background: var(--so-white);
  border-radius: var(--radius);
  border: 1px solid var(--so-border);
  box-shadow: var(--shadow-sm);
}

/* Standard card header bar with title + optional action */
.so-card .card-header-so {
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid var(--so-border-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.so-card .card-header-so h2,
.so-card .card-header-so .card-header-title {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--so-navy);
  margin: 0;
}

/* Card with Playfair display heading (for module-level headings) */
.so-card .card-header-display {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--so-border-soft);
}

.so-card .card-header-display h2 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--so-navy);
  margin: 0;
}

/* Detail view key-value row (replaces repeated inline d-flex justify-content-between) */
.so-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--so-border-soft);
  font-size: 0.875rem;
  gap: 1rem;
}

.so-detail-row:last-child {
  border-bottom: none;
}

.so-detail-row .detail-label {
  color: var(--so-muted);
  flex-shrink: 0;
  min-width: 120px;
}

.so-detail-row .detail-value {
  font-weight: 500;
  color: var(--so-text);
  text-align: right;
}

/* Danger zone card */
.so-danger-zone {
  border: 1px solid var(--so-red-bg);
  border-radius: var(--radius);
  background: var(--so-white);
}

.so-danger-zone .danger-header {
  padding: 0.75rem 1.25rem;
  background: var(--so-red-bg);
  border-radius: var(--radius) var(--radius) 0 0;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--so-red-text);
}

.so-danger-zone .danger-body {
  padding: 1rem 1.25rem;
}


/* ── 7. FILTER BAR ────────────────────────────────────────── */
.filter-bar {
  background: var(--so-white);
  border: 1px solid var(--so-border);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1.25rem;
  margin-bottom: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: flex-end;
}

.filter-bar .form-select,
.filter-bar .form-control {
  font-size: 0.82rem;
}


/* ── 8. TABLES ────────────────────────────────────────────── */
.table-so {
  font-size: 0.875rem;
  margin-bottom: 0;
}

.table-so thead th {
  background: var(--so-bg);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--so-mid);
  border-bottom: 2px solid var(--so-border);
  padding: 0.6rem 0.875rem;
  white-space: nowrap;
}

.table-so tbody td {
  padding: 0.625rem 0.875rem;
  border-bottom: 1px solid var(--so-border-soft);
  vertical-align: middle;
}

.table-so tbody tr:last-child td {
  border-bottom: none;
}

.table-so tbody tr:hover td {
  background: var(--so-bg-soft);
}

.table-so tfoot td {
  background: var(--so-bg-soft);
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.625rem 0.875rem;
  border-top: 2px solid var(--so-border);
}

/* Numeric / right-aligned columns -- money in the body face with tabular
   figures, not monospace (found 2026-09-18: this rule was the source of the
   "old computerized font" look on every table using .col-num -- budgets,
   royalty/touring detail pages -- while pages not using this class, like
   royalties/index.html, already looked correct). See DESIGN_STANDARDS.md #3. */
.table-so .col-num {
  text-align: right;
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  font-size: 0.82rem;
}

/* Muted secondary cell text */
.table-so td.so-cell-muted {
  color: var(--so-mid);
  font-size: 0.82rem;
}

/* Table action button pair (eye + pencil) */
.table-actions {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
}

/* Roster code badge */
.so-badge-roster-code {
  background: var(--so-blue-bg);
  color: var(--so-blue);
  font-size: 0.85rem;
  padding: 5px 12px;
  border-radius: var(--radius-xs);
  font-weight: 600;
}

/* Social links on roster detail */
.social-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.85rem;
  color: var(--so-blue);
  text-decoration: none;
  padding: 4px 10px;
  border: 1px solid var(--so-border);
  border-radius: var(--radius-xs);
  transition: background 0.15s;
}
.social-link:hover {
  background: var(--so-blue-bg);
  color: var(--so-navy);
}

/* Grouped table section header (releases group_by) */
.so-group-header {
  padding: 0.4rem 0.875rem 0.25rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--so-blue);
  background: var(--so-bg-soft);
  border-bottom: 1px solid var(--so-border);
}

.so-group-count {
  color: var(--so-muted);
  font-weight: 400;
}

/* Primary link in a table row */
.table-so .row-title a {
  font-weight: 600;
  color: var(--so-navy);
  text-decoration: none;
}

.table-so .row-title a:hover {
  color: var(--so-blue);
}


/* ── 9. BADGES & STATUS PILLS ─────────────────────────────── */

/* Base badge reset — use with status modifier */
.so-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 3px;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  white-space: nowrap;
  line-height: 1.5;
}

/* Status variants */
.so-badge-active     { background: var(--so-green-bg);  color: var(--so-green-text); }
.so-badge-inactive   { background: var(--so-gray-bg);   color: var(--so-mid); }
.so-badge-prospect   { background: var(--so-blue-bg);   color: var(--so-blue-text); }
.so-badge-former     { background: var(--so-slate-bg);  color: var(--so-slate-text); }
.so-badge-draft      { background: var(--so-gray-bg);   color: var(--so-gray-text); }
.so-badge-sent       { background: var(--so-blue-bg);   color: var(--so-blue-text); }
.so-badge-paid       { background: var(--so-green-bg);  color: var(--so-green-text); }
.so-badge-overdue    { background: var(--so-red-bg);    color: var(--so-red-text); }
.so-badge-void       { background: var(--so-gray-bg);   color: var(--so-mid); }
.so-badge-released   { background: var(--so-green-bg);  color: var(--so-green-text); }
.so-badge-cancelled  { background: var(--so-red-bg);    color: var(--so-red-text); }
.so-badge-closed     { background: var(--so-slate-bg);  color: var(--so-slate-text); }
.so-badge-archived   { background: var(--so-gray-bg);   color: var(--so-muted); border: 1px solid var(--so-border); }

/* Production status -- one pipeline, so it reads as a progression in a single hue
   family: Pre-production (slate, not started) -> Recording (teal) -> Post-production
   (teal with an outline, further along) -> Delivered (green, done). Amber is not used:
   it means "warning", and post-production is a normal stage. Also used for release
   statuses In Production / Mixing / Mastering via the status_badge filter (app.py). */
.so-badge-pre-production { background: var(--so-slate-bg); color: var(--so-slate-text); }
.so-badge-recording      { background: var(--so-blue-bg);  color: var(--so-blue-text); }
.so-badge-post-production{ background: var(--so-blue-bg);  color: var(--so-blue-text); box-shadow: inset 0 0 0 1px var(--so-blue); }
.so-badge-delivered      { background: var(--so-green-bg); color: var(--so-green-text); }

/* Contract alert badges (expiry) */
.so-badge-alert-30  { background: var(--so-red-bg);    color: var(--so-red-text); }
.so-badge-alert-60  { background: var(--so-yellow-bg); color: var(--so-yellow-text); }
.so-badge-alert-90  { background: var(--so-orange-bg); color: var(--so-yellow-text); }

/* Recoupable tag */
.so-badge-recoupable { background: var(--so-yellow-bg); color: var(--so-yellow-text); }

/* ── Budget nesting indicators ───────────────────────────── */
/* A row for a budget that has nested children — left accent + bolder name */
.row-budget-parent { border-left: 3px solid var(--so-blue); }
.row-budget-parent .row-title a { font-weight: 700; }
.so-nested-count {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 3px;
  font-size: 0.68rem;
  font-weight: 700;
  background: var(--so-blue-bg);
  color: var(--so-blue-text);
  vertical-align: middle;
}
/* Small round marker on a row for a budget nested under another one */
.so-nested-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  margin-left: 6px;
  background: var(--so-blue-bg);
  color: var(--so-blue-text);
  font-size: 0.62rem;
  font-weight: 700;
  text-decoration: none;
  vertical-align: middle;
}
.so-nested-chip:hover { background: var(--so-blue); color: #fff; }

/* Type pill (multi-service contract types, contact types) */
.so-type-pill {
  display: inline-block;
  background: var(--so-bg);
  border: 1px solid var(--so-border);
  color: var(--so-mid);
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  margin: 1px;
  white-space: nowrap;
}


/* ── 10. BUTTONS ──────────────────────────────────────────── */

/* Primary CTA — overrides Bootstrap btn-primary with Signature Brass, the one
   distinctive brand accent (per the design brief: CTAs, active nav, north-star
   numbers only — never used for status meanings). */
.btn-so-primary {
  background: var(--so-brass);
  color: #fff;
  border: none;
  font-weight: 600;
  font-size: 0.875rem;
  border-radius: var(--radius-sm);
  padding: 0.4rem 1rem;
  transition: background 0.15s;
}

.btn-so-primary:hover {
  background: var(--so-navy);
  color: #fff;
}

/* Action button (eye / pencil in table rows) */
.btn-so-action {
  padding: 2px 8px;
  font-size: 0.75rem;
  border-radius: var(--radius-xs);
  border: 1px solid var(--so-border);
  background: var(--so-white);
  color: var(--so-mid);
  line-height: 1.5;
  transition: all 0.12s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.btn-so-action:hover {
  background: var(--so-bg);
  border-color: var(--so-blue);
  color: var(--so-blue);
}

/* Ghost / outline secondary — consistent size */
.btn-so-ghost {
  background: transparent;
  border: 1px solid var(--so-border);
  color: var(--so-mid);
  font-size: 0.82rem;
  padding: 0.35rem 0.875rem;
  border-radius: var(--radius-sm);
  transition: all 0.15s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.btn-so-ghost:hover {
  border-color: var(--so-blue);
  color: var(--so-blue);
  background: var(--so-bg);
}

/* Danger/destructive */
.btn-so-danger {
  background: transparent;
  border: 1px solid var(--so-red-bg);
  color: var(--so-red);
  font-size: 0.82rem;
  padding: 0.35rem 0.875rem;
  border-radius: var(--radius-sm);
  transition: all 0.15s;
}

.btn-so-danger:hover {
  background: var(--so-red-bg);
  border-color: var(--so-red);
  color: var(--so-red-text);
}


/* ── 11. FORMS ────────────────────────────────────────────── */

/* Section divider title inside a card */
.form-section-title {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--so-blue);
  padding: 0.4rem 0 0.25rem;
  border-bottom: 1px solid var(--so-border);
  margin-bottom: 1rem;
}

/* Form labels — removes per-label inline style */
.so-label,
.form-label {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--so-dark);
  margin-bottom: 0.3rem;
}

/* Optional hint text next to label */
.so-label-hint {
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--so-muted);
  margin-left: 0.3rem;
}

/* Required asterisk */
.so-required {
  color: var(--so-red);
  margin-left: 2px;
}

/* Form control sizing — consistent sm across app */
.form-control-sm,
.form-select-sm {
  font-size: 0.875rem;
  border-color: var(--so-border);
  border-radius: var(--radius-xs);
}

.form-control-sm:focus,
.form-select-sm:focus {
  border-color: var(--so-blue);
  box-shadow: 0 0 0 3px rgba(60,122,137,0.12); /* Slate Teal at 12% -- was the old #2E86AB */
}

/* Read-only/variance fields */
.form-control-sm[readonly] {
  background: var(--so-bg-soft);
  color: var(--so-mid);
}

/* Right-aligned numeric inputs -- same fix as .col-num above: body face with
   tabular figures, not monospace. */
.input-num {
  text-align: right;
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  font-size: 0.82rem;
}

/* Multi-row dynamic selector rows (productions, contract types) */
.selector-row {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  align-items: center;
}

/* Form save sidebar card */
.form-save-card {
  position: sticky;
  top: calc(var(--topbar-h) + 1.5rem);
}


/* ── 12. STAT CARDS ───────────────────────────────────────── */
.stat-card {
  background: var(--so-white);
  border-radius: var(--radius);
  border: 1px solid var(--so-border);
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
}

.stat-card .stat-value {
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--so-navy);
  line-height: 1;
}

.stat-card .stat-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--so-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-top: 0.3rem;
}

.stat-card .stat-sub {
  font-size: 0.75rem;
  color: var(--so-muted);
  margin-top: 0.5rem;
}

.stat-card-headline {
  background: var(--so-navy);
  border-color: var(--so-navy);
}

.stat-card-headline .stat-value {
  color: var(--so-white);
  font-size: 2.5rem;
}

.stat-card-headline .stat-label {
  color: var(--so-accent);
}

a.stat-card-link {
  display: block;
  text-decoration: none;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

a.stat-card-link:hover {
  border-color: var(--so-navy);
  box-shadow: var(--shadow-md, var(--shadow-sm));
}

.stat-card .stat-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

/* Stat icon color variants */
.stat-icon-blue   { background: var(--so-blue-bg);   color: var(--so-blue); }
.stat-icon-green  { background: var(--so-green-bg);  color: var(--so-green); }
.stat-icon-red    { background: var(--so-red-bg);    color: var(--so-red); }
.stat-icon-yellow { background: var(--so-yellow-bg); color: var(--so-yellow); }
.stat-icon-navy   { background: var(--so-gray-bg);   color: var(--so-navy); } /* was rgba(30,58,95,0.1) -- the old navy */


/* ── 13. DASHBOARD COMPONENTS ─────────────────────────────── */

/* List rows inside dashboard cards (contracts, invoices, releases) */
.dash-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 1.25rem;
  border-bottom: 1px solid var(--so-border-soft);
  font-size: 0.875rem;
}

.dash-row:last-child {
  border-bottom: none;
}

.dash-row .dash-row-title {
  font-weight: 600;
  color: var(--so-navy);
  text-decoration: none;
  font-size: 0.875rem;
}

.dash-row .dash-row-title:hover {
  color: var(--so-blue);
}

.dash-row .dash-row-sub {
  font-size: 0.75rem;
  color: var(--so-mid);
  margin-top: 1px;
}

.dash-row .dash-row-meta {
  font-size: 0.7rem;
  color: var(--so-muted);
  margin-top: 2px;
  text-align: right;
}

.dash-row .dash-row-amount {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--so-navy);
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
}

/* Alert highlight rows (contract expiry) */
.dash-row-alert-30  { background: var(--so-red-bg); }
.dash-row-alert-60  { background: var(--so-yellow-bg); }
.dash-row-alert-90  { background: var(--so-orange-bg); }


/* ── 14. DETAIL VIEW COMPONENTS ───────────────────────────── */

/* Budget / financial summary progress bar */
.so-progress-bar {
  height: 6px;
  background: var(--so-border);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 0.5rem;
}

.so-progress-bar .so-progress-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}

.so-progress-fill-ok      { background: var(--so-blue); }
.so-progress-fill-warning { background: var(--so-yellow); }
.so-progress-fill-over    { background: var(--so-red); }

.so-progress-bar-lg {
  height: 10px;
  margin-top: 0;
}

/* Progress label above bar */
.so-progress-label {
  font-size: 0.72rem;
  color: var(--so-muted);
  margin-bottom: 3px;
}

/* Quarterly release-pace meter (executive dashboard) */
.release-pace-meter {
  padding: 1rem 1.25rem 1.1rem;
  border-bottom: 1px solid var(--so-border-soft);
}

.release-pace-meter-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.4rem;
}

.release-pace-meter-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--so-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.release-pace-meter-value {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--so-navy);
}

.release-pace-meter-sub {
  font-size: 0.75rem;
  color: var(--so-muted);
  margin-top: 0.4rem;
}

/* Variance text colors */
.so-variance-pos { color: var(--so-green); font-weight: 700; }
.so-variance-neg { color: var(--so-red); font-weight: 700; }
/* Inside a detail row, `.so-detail-row .detail-value` / `.detail-label` (two classes)
   out-ranked the single-class rules above, so a negative Tour result or an over-plan
   budget rendered in body black instead of red. Match their specificity. */
.so-detail-row .detail-value.so-variance-pos, .so-detail-row .detail-label.so-variance-pos { color: var(--so-green); }
.so-detail-row .detail-value.so-variance-neg, .so-detail-row .detail-label.so-variance-neg { color: var(--so-red); }

/* Detail profile header (icon + title + badge) */
.so-detail-header {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-bottom: 1.25rem;
}

.so-detail-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--so-blue), var(--so-navy));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: #fff;
  flex-shrink: 0;
}

.so-detail-header .detail-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--so-navy);
  line-height: 1.2;
}


/* ── 15. INFO BOXES ───────────────────────────────────────── */
/* Mirrors developer_docs.html — for use in app detail/notes */
.so-info-box {
  border-radius: var(--radius-xs);
  padding: 12px 16px;
  margin-bottom: 1rem;
  font-size: 0.875rem;
  line-height: 1.6;
  border-left: 3px solid;
}

.so-info-box .info-box-label {
  display: block;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 4px;
}

.so-info-box.ib-note    { background: var(--ib-note-bg); border-color: var(--ib-note-bdr); color: var(--ib-note-text); }
.so-info-box.ib-warning { background: var(--ib-warn-bg); border-color: var(--ib-warn-bdr); color: var(--ib-warn-text); }
.so-info-box.ib-todo    { background: var(--ib-todo-bg); border-color: var(--ib-todo-bdr); color: var(--ib-todo-text); }
.so-info-box.ib-done    { background: var(--ib-done-bg); border-color: var(--ib-done-bdr); color: var(--ib-done-text); }


/* ── 16. TAG PILLS & SOCIAL LINKS ─────────────────────────── */
.tag-pill {
  background: var(--so-slate-bg);
  color: var(--so-slate-text);
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 20px;
  display: inline-block;
  margin: 1px;
}

.social-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.82rem;
  color: var(--so-blue);
  text-decoration: none;
  margin-right: 6px;
}

.social-link:hover { text-decoration: underline; }


/* ── 17. ACTIVITY FEED ────────────────────────────────────── */
.activity-item {
  display: flex;
  gap: 0.75rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--so-border-soft);
  font-size: 0.82rem;
}

.activity-item:last-child { border-bottom: none; }

.activity-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--so-blue);
  margin-top: 5px;
  flex-shrink: 0;
}

.activity-dot-created { background: var(--so-green); }
.activity-dot-updated { background: var(--so-blue); }
.activity-dot-deleted { background: var(--so-red); }


/* ── 18. UTILITY CLASSES ──────────────────────────────────── */

/* Flash messages */
.flash-message { font-size: 0.875rem; }

/* Empty state inside tables / cards */
.so-empty-state {
  text-align: center;
  padding: 2rem;
  color: var(--so-muted);
  font-size: 0.875rem;
}

.so-empty-state i {
  font-size: 1.5rem;
  display: block;
  margin-bottom: 0.5rem;
  opacity: 0.4;
}

/* Spacing shorthand for common inner card padding */
.so-p { padding: 1.25rem; }
.so-p-sm { padding: 0.875rem 1.25rem; }

/* Divider */
.so-divider {
  border: none;
  border-top: 1px solid var(--so-border);
  margin: 1.25rem 0;
}

/* Copy-to-clipboard trigger */
.so-copy-btn {
  cursor: pointer;
  color: var(--so-muted);
  font-size: 0.8rem;
  transition: color 0.15s;
  background: none;
  border: none;
  padding: 0 4px;
}

.so-copy-btn:hover { color: var(--so-blue); }

/* Archived row opacity */
.row-archived { opacity: 0.6; }


/* ── 19. RESPONSIVE ───────────────────────────────────────── */
@media (max-width: 768px) {
  #sidebar {
    width: var(--sidebar-w-sm);
  }

  #sidebar .logo-text,
  #sidebar .brand small,
  #sidebar .nav-section,
  #sidebar .nav-link span,
  #sidebar .nav-link.nav-sub,
  #sidebar .sidebar-footer .user-name,
  #sidebar .sidebar-footer .user-info {
    display: none;
  }

  #sidebar .nav-link {
    justify-content: center;
    margin: 1px 4px;
    padding: 0.5rem;
    border-left: none;
    border-radius: var(--radius-sm);
  }

  #sidebar .nav-link i {
    width: auto;
  }

  #main-content {
    margin-left: var(--sidebar-w-sm);
  }

  .topbar {
    padding: 0 1rem;
  }

  .page-body {
    padding: 1rem;
  }

  .filter-bar {
    padding: 0.75rem 1rem;
  }
}

@media (max-width: 576px) {
  .stat-card .stat-value {
    font-size: 1.4rem;
  }

  .topbar h1 {
    font-size: 1.05rem;
  }
}

/* ── SONGS — Writer rows (song form) ─────────────────────────────────────── */
.so-col-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--so-text-muted);
  margin-bottom: 3px;
}

.writer-row {
  border: 1px solid var(--so-border);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  overflow: hidden;
  transition: box-shadow 0.15s;
}
.writer-row:hover { box-shadow: 0 1px 4px rgba(0,0,0,0.07); }

.writer-row-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: var(--so-bg-soft);
  border-bottom: 1px solid var(--so-border);
  cursor: pointer;
  user-select: none;
}
.writer-row-header:hover { background: var(--so-bg-hover); }

.writer-row-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--so-black);
}

.writer-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  background: var(--so-charcoal);
  color: #fff;
  border-radius: 50%;
  font-size: 0.72rem;
  font-weight: 700;
  flex-shrink: 0;
}

.writer-split-pill {
  font-size: 0.72rem;
  font-weight: 600;
  background: var(--so-green-bg);
  color: var(--so-green);
  padding: 1px 8px;
  border-radius: 20px;
}

.writer-name-display-field {
  height: calc(1.5em + 0.5rem + 2px);
  display: flex;
  align-items: center;
  font-size: 0.82rem;
  border: 1px solid var(--so-border);
  border-radius: var(--radius-xs);
  padding: 0.25rem 0.5rem;
  cursor: default;
  background: var(--so-bg-soft);
}
.writer-name-filled      { color: var(--so-black); }
.writer-name-placeholder { color: var(--so-text-muted); }

.writer-row-body { padding: 16px 14px 14px; }
.writer-row-body.collapsed { display: none; }

.writer-subheading {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--so-text-mid);
  border-bottom: 1px solid var(--so-border);
  padding-bottom: 4px;
  margin-bottom: 10px;
}

.split-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid transparent;
}
.split-ok    { background: var(--so-green-bg);  color: var(--so-green);  border-color: #b7e4cb; }
.split-warn  { background: var(--so-yellow-bg); color: var(--so-yellow); border-color: #f0d98a; }
.split-error { background: var(--so-red-bg);    color: var(--so-red);    border-color: #f5c6c2; }

.toggle-writer-btn .bi-chevron-up   { display: inline; }
.toggle-writer-btn .bi-chevron-down { display: none; }
.writer-row.collapsed .toggle-writer-btn .bi-chevron-up   { display: none; }
.writer-row.collapsed .toggle-writer-btn .bi-chevron-down { display: inline; }

/* ── SONGS — Publishing splits card (song detail) ────────────────────────── */
.splits-writer-divider { border-bottom: 1px solid var(--so-border); }

.splits-line-primary {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.splits-writer-name { font-size: 0.9rem; font-weight: 700; color: var(--so-black); }
.splits-divider     { color: var(--so-text-muted); font-weight: 400; }
.splits-pct         { font-size: 0.88rem; font-weight: 700; color: var(--so-green); }
.splits-role-pill {
  font-size: 0.68rem;
  font-weight: 600;
  background: var(--so-bg-soft);
  color: var(--so-text-mid);
  padding: 1px 7px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.splits-line-secondary {
  font-size: 0.78rem;
  color: var(--so-text-mid);
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}
.splits-label  { font-weight: 600; color: var(--so-dark); }
.splits-value  { color: var(--so-dark); }
.splits-parens { color: var(--so-text-mid); }

.splits-total-row {
  border-top: 2px solid var(--so-border);
  margin-top: 12px;
  padding-top: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.splits-total-label   { font-size: 0.78rem; font-weight: 600; color: var(--so-text-mid); text-transform: uppercase; letter-spacing: 0.4px; }
.splits-total-value   { font-size: 0.95rem; font-weight: 700; }
.splits-total-ok      { color: var(--so-green); }
.splits-total-error   { color: var(--so-red); }
.splits-total-warning { font-size: 0.72rem; color: var(--so-red); }

#copy-splits-btn.copied {
  background: var(--so-green-bg);
  border-color: var(--so-green);
  color: var(--so-green);
}

/* Utility color helpers */
.so-badge-inactive {
  background: var(--so-bg-soft);
  color: var(--so-text-mid);
  border: 1px solid var(--so-border);
  font-size: 0.7rem;
  padding: 1px 6px;
  border-radius: var(--radius-xs);
}
.so-text-success { color: var(--so-green); }
.so-text-danger  { color: var(--so-red); }

/* ── Info hint box (form sidebar) ─────────────────────────────────────────── */
.so-info-hint {
  background: var(--so-blue-bg);
  color: var(--so-blue);
  border-radius: var(--radius-xs);
  padding: 8px 12px;
  font-size: 0.78rem;
  line-height: 1.5;
}

/* ── Billing-specific utilities ───────────────────────────────────────────── */

/* Info banner (aging grand total, etc.) */
.so-info-banner {
  background: var(--so-blue-bg);
  border: 1px solid #bae6fd;
}

/* Accent borders for internal-only cards */
.so-left-accent-warning {
  border-left: 4px solid var(--so-yellow);
}

/* Soft background for non-print info cards */
.so-bg-soft {
  background: var(--so-bg-soft);
}

/* Action danger variant */
.so-action-danger {
  color: var(--so-red) !important;
}
.so-action-danger:hover {
  background: var(--so-red-bg) !important;
  border-color: var(--so-red-bg) !important;
}

/* Table thead shared style (replaces inline background:#f4f8fb) */
.so-thead {
  background: var(--so-bg-soft);
}

/* ── User Guide ────────────────────────────────────────────────────────────── */
.so-left-accent-blue {
  border-left: 4px solid var(--so-blue);
}

.so-guide-box {
  background: var(--so-bg-soft);
  border-radius: 8px;
  padding: 14px 18px;
}

.so-guide-box-warning {
  background: #fef3c7;
  color: #92400e;
}

/* tbody default text color */
.so-text-dark { color: #374151; }

.so-sort-link { color: inherit; text-decoration: none; white-space: nowrap; }
.so-sort-link:hover { color: var(--so-blue); }

/* ── Releases calendar (FullCalendar 5) ────────────────────────────────────── */
/* FullCalendar reads its colors from --fc-* variables with hardcoded fallbacks
   (button #2C3E50, event #3788d8, today highlight yellow), so remap them to
   brand tokens here. Event colors come from status classes set in
   releases.routes.calendar_data -- same status -> token map as the list view's
   status badges (Bootstrap secondary/info/primary/warning/success/danger). */
#releases-calendar {
  --fc-border-color: var(--so-border);
  --fc-page-bg-color: var(--so-white);
  --fc-neutral-bg-color: var(--so-bg-soft);
  --fc-neutral-text-color: var(--so-mid);
  --fc-today-bg-color: var(--so-blue-bg);
  --fc-highlight-color: var(--so-blue-bg);
  --fc-non-business-color: var(--so-bg-soft);
  --fc-list-event-hover-bg-color: var(--so-bg-soft);
  --fc-event-bg-color: var(--so-mid);
  --fc-event-border-color: var(--so-mid);
  --fc-event-text-color: var(--so-white);
  --fc-more-link-bg-color: var(--so-bg-soft);
  --fc-button-bg-color: var(--so-navy);
  --fc-button-border-color: var(--so-navy);
  --fc-button-hover-bg-color: var(--so-navy-mid);
  --fc-button-hover-border-color: var(--so-navy-mid);
  --fc-button-active-bg-color: var(--so-brass);
  --fc-button-active-border-color: var(--so-brass);
  font-family: var(--font-body);
}
#releases-calendar .fc-toolbar-title { font-family: var(--font-body); font-size: 1.25em; font-weight: 600; color: var(--so-navy); }
#releases-calendar .fc-col-header-cell-cushion,
#releases-calendar .fc-daygrid-day-number { color: var(--so-text); text-decoration: none; }
#releases-calendar .fc-button:focus { box-shadow: 0 0 0 .2rem rgba(184, 134, 59, .35); }
#releases-calendar .fc-list-day-cushion { background: var(--so-bg-soft); }

.fc-rel-in-production { --fc-event-bg-color: var(--so-mid);       --fc-event-border-color: var(--so-mid); }
.fc-rel-mixing     { --fc-event-bg-color: var(--so-blue-text); --fc-event-border-color: var(--so-blue-text); }
.fc-rel-mastering  { --fc-event-bg-color: var(--so-blue);      --fc-event-border-color: var(--so-blue); }
.fc-rel-delivered,
.fc-rel-scheduled  { --fc-event-bg-color: var(--so-yellow);    --fc-event-border-color: var(--so-yellow); }
.fc-rel-released   { --fc-event-bg-color: var(--so-green);     --fc-event-border-color: var(--so-green); }
.fc-rel-cancelled  { --fc-event-bg-color: var(--so-red);       --fc-event-border-color: var(--so-red); }
/* Delivery-date markers are a category, not a status: outlined teal, not a status hue. */
.fc-rel-delivery   { --fc-event-bg-color: var(--so-blue-bg);   --fc-event-border-color: var(--so-blue); --fc-event-text-color: var(--so-blue-text); }

/* ── Command bar ("What are you here to do?") ────────────────────────────
   Shared by the dashboard's inline bar (templates/dashboard.html) and the
   global Cmd/Ctrl+K palette (templates/base.html, any page) -- one set of
   classes so the two never drift visually. JS behind both: static/js/command_bar.js. */
.cmdbar {
  position: relative;
  background: var(--so-white);
  border: 1px solid var(--so-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  margin-bottom: 1rem;
}
.cmdbar-inner { display: flex; align-items: center; gap: 0.75rem; padding: 0.9rem 1.1rem; }
.cmdbar-icon { color: var(--so-blue); font-size: 1.05rem; flex-shrink: 0; }
.cmdbar-input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font-family: var(--font-body); font-size: 1rem; color: var(--so-navy);
}
.cmdbar-input::placeholder { color: var(--so-muted); }
.cmdbar-kbd { display: flex; gap: 3px; flex-shrink: 0; }
.cmdbar-kbd kbd {
  border: 1px solid var(--so-border); border-bottom-width: 2px; border-radius: var(--radius-xs);
  background: var(--so-bg-soft); padding: 2px 6px; font-family: var(--font-mono);
  font-size: 0.7rem; color: var(--so-muted);
}
.cmd-results { border-top: 1px solid var(--so-border-soft); max-height: 360px; overflow-y: auto; display: none; }
.cmd-results.open { display: block; }
.cmd-group-label {
  font-family: var(--font-body); font-weight: 700; font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--so-muted); padding: 0.6rem 1.1rem 0.2rem;
}
.cmd-item {
  display: flex; align-items: center; gap: 0.75rem; width: 100%; text-align: left;
  padding: 0.55rem 1.1rem; border: 0; background: none; cursor: pointer;
  text-decoration: none; color: var(--so-navy);
}
.cmd-item:hover, .cmd-item.active { background: var(--so-bg-soft); }
.cmd-swatch { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.cmd-item .cmd-label { font-size: 0.9rem; font-weight: 600; }
.cmd-item .cmd-sub { font-size: 0.78rem; color: var(--so-muted); margin-left: auto; padding-left: 0.75rem; white-space: nowrap; }
.cmd-empty { padding: 1.25rem 1.1rem; color: var(--so-muted); font-size: 0.875rem; text-align: center; }

/* Global palette modal (base.html) -- a plain Bootstrap modal reusing the
   .cmdbar-inner/.cmd-results classes above, sized to feel like a spotlight
   search rather than a standard dialog. */
#globalCmdModal .modal-dialog { max-width: 640px; margin-top: 12vh; }
#globalCmdModal .modal-content { border: 1px solid var(--so-border); border-radius: var(--radius); }
#globalCmdModal .cmdbar-inner { padding: 1rem 1.25rem; }
#globalCmdModal .cmd-results { max-height: 60vh; }