/* ============================================================================
   JR&CO Brand Layer — brand stylesheet (derived from the Brand Guidelines Book,
   5.15.2025). Reference this on EVERY layout — see .cursor/rules/jrco-brand-styling.mdc.

   This sheet matches the house style established in receipt-queue.html:
   dark header w/ inset red-gradient underline, squared corners, red-gradient
   card top-accent bars, Arial Black headlines with tight (negative) tracking,
   red-gradient primary buttons/active states, gray table heads, no blue chrome.

   TWO SYNCED COPIES (repo has two web roots — keep them identical):
     • Style Guide/jrco-brand.css            <- CANONICAL source (edit here).
       Reachable from the repo root: demos, Style Guide site.
     • Project_Management/css/jrco-brand.css  <- SERVED MIRROR for the PM app.
       The PM server is rooted at Project_Management/, so a "Style Guide/" link
       from a PM page 404s. PM pages must use the css/ mirror. After editing the
       canonical file, copy it to Project_Management/css/jrco-brand.css.

   Link in <head> AFTER the page's own inline <style> so its tokens win:
     PM app:    <link rel="stylesheet" href="../css/jrco-brand.css">
     repo root: <link rel="stylesheet" href="Style%20Guide/jrco-brand.css">
   ============================================================================ */

/* Typeface: brand primary is Neue Haas Grotesk (Brand Book p.12), loaded via the
   JR&CO Adobe Fonts (Typekit) kit below — provides neue-haas-grotesk-display and
   neue-haas-grotesk-text. Arial / Arial Black remain the documented web-safe
   fallback (Brand Book p.13), listed after the Neue Haas families if the kit fails.
   NOTE: a CSS @import must stay above all style rules. */
@import url("https://use.typekit.net/dhj1sez.css");

/* Brand palette mapped onto the shared token vocabulary, on :root AND body.light
   so the brand light look wins whether the page is in its dark or light default. */
:root,
body.light {
  --jr-red:#E92A2C;
  --jr-red-dark:#A71F23;
  --jr-grad:linear-gradient(135deg,#E92A2C 0%,#A71F23 100%);
  --jr-grad-h:linear-gradient(90deg,#E92A2C,#A71F23);
  --jr-ink:#202020;
  --jr-gray:#404040;
  --jr-paper:#ffffff;

  /* remap existing tokens → brand (receipt-queue parity) */
  --red:#E92A2C;
  --red-dark:#A71F23;
  --red-bg:rgba(233,42,44,0.08);
  --black:#ffffff;            /* app background base (body adds a faint gradient) */
  --charcoal:#ffffff;         /* card surfaces */
  --steel:#F4F4F4;            /* secondary surfaces / table heads */
  --mid:#E6E6E6;
  --border:#D9D9D9;           /* hairline */
  --off-white:#202020;        /* primary text */
  --muted:#666666;            /* meta text */
  --green:#1F4D0F;  --green-bg:#e7f0e3;   /* functional OK (deepened for white) */
  --amber:#BA7517;  --amber-bg:#f7eede;   /* functional WARN */
  --blue:#404040;             /* no blue chrome → gray */
  --blue-bg:rgba(64,64,64,0.06);
  --radius:0;                 /* squared, industrial */
  --shadow:0 10px 24px rgba(32,32,31,0.08);
  --font:"neue-haas-grotesk-display","neue-haas-grotesk-text",Arial,Helvetica,sans-serif;
  --font-black:"neue-haas-grotesk-display","Arial Black",Arial,Helvetica,sans-serif;
}

/* Single brand typeface family for body text. */
* { font-family:var(--font) !important; }

body {
  background:linear-gradient(135deg, rgba(230,230,230,0.55), transparent 32%), #ffffff !important;
  color:#202020;
  -webkit-font-smoothing:antialiased;
}

/* ── Headlines: Arial Black, tight negative tracking (brand: spacing kept tight) ── */
h1, h2, h3,
.header-title, .title, .section-title, .page-title, .drawer-entity-name,
.vc-name, .kpi-val, .kpi-mock-val, .tile-n, .card-value, .col h3,
.sub-doc-section-title, .hdr, thead th, .cc-table th {
  font-family:var(--font-black) !important;
}
h1, h2, h3,
.header-title, .title, .section-title, .page-title, .drawer-entity-name,
.vc-name, .tile-n, .card-value, .hdr {
  letter-spacing:-0.03em !important; font-weight:800 !important;
}

/* ── Squared corners everywhere (round avatars/dots/spinners untouched) ── */
.btn, .btn-nav, .btn-cert, .btn-record, .btn-record-create, .btn-sm, .btn-card-action,
.btn-tbl, .btn-save, .btn-save-hdr, .theme-toggle, .za-ctrl, .form-input, .form-select,
.form-textarea, input, select, textarea, .card, .tile, .kpi, .kpi-mock-item, .pill,
.status-badge, .badge, .chip, .sub-card, .mock-table, .notif-card, .worklist, .modal,
.tab, .page-tab, .filter-tab, .org-type-badge {
  border-radius:0 !important;
}

/* ── Dark header + inset red-gradient underline (receipt-queue) ── */
header { background:#202020 !important; position:relative; border-bottom:0 !important; }
header::after {
  content:""; position:absolute; left:26px; right:26px; bottom:0; height:3px;
  background:var(--jr-grad-h); pointer-events:none;
}
header,
header div, header label,
header span:not(.notif-badge),
header .header-title, header .title { color:#E6E6E6 !important; }
header .header-sub, header .header-copy, header #hdr-sub, header .logo-sub { color:#BFBFBF !important; }
/* Official white/red logo (jrco-logo-white.svg, the Option Two mark) sits directly
   on the dark banner — no white chip. */
header .logo-img { background:transparent !important; padding:0 !important; }
header .logo-divider, header .nav-divider { background:rgba(230,230,230,0.22) !important; }
header .btn, header .btn-nav, header .theme-toggle {
  background:transparent !important; color:#E6E6E6 !important;
  border:1px solid rgba(230,230,230,0.24) !important;
}
header .btn:hover, header .btn-nav:hover, header .theme-toggle:hover {
  color:#fff !important; border-color:var(--jr-red) !important; background:rgba(233,42,44,0.10) !important;
}
header .btn-nav-primary, header .btn-primary, header .btn-save-hdr, header .btn.red {
  background:var(--jr-grad) !important; color:#fff !important; border-color:transparent !important;
  font-family:var(--font-black) !important; letter-spacing:-0.02em !important;
}

/* ── Cards: white, squared, 3px red-gradient top-accent bar ── */
.card, .tile, .kpi { position:relative; background:#fff !important; }
.card::before, .tile::before, .kpi::before {
  content:""; position:absolute; left:0; right:0; top:0; height:3px; background:var(--jr-grad-h);
  pointer-events:none;
}
/* keep functional VALUE colors so risk stays legible under the red accent */
.kpi-val.green { color:#1F4D0F !important; }
.kpi-val.amber { color:#BA7517 !important; }
.kpi-val.red   { color:#E92A2C !important; }
.kpi-val.blue  { color:#202020 !important; }

/* ── Primary buttons / active states: red gradient, Arial Black tight ── */
.btn.red, .btn-primary, .btn-nav.primary, .btn-nav-primary, .btn-nav.btn-nav-primary,
.btn-record-create, .btn-save,
.btn-sm.primary, .notif-tool-btn.primary,
.tab.active, .page-tab.active, .filter-tab.active {
  background:var(--jr-grad) !important; border-color:transparent !important; color:#fff !important;
}
.btn-nav-primary:hover, .btn-nav.btn-nav-primary:hover {
  background:var(--jr-grad) !important; border-color:transparent !important; color:#fff !important;
  filter:brightness(0.96);
}
.btn.red, .btn-primary, .btn-record-create, .btn-save, .btn-sm.primary {
  font-family:var(--font-black) !important; letter-spacing:-0.02em !important;
}

/* Links are dark red, not blue. */
a { color:var(--jr-red-dark); }

/* ── Tables: gray head, squared ── */
thead th, .cc-table th { background:#F4F4F4 !important; color:#404040 !important; letter-spacing:.04em; }

/* ── Diagonal 26° stripe markers before section headers ── */
.jr-stripe { display:inline-block; width:5px; height:18px; margin-right:9px;
  background:var(--jr-grad); transform:skewX(-26deg); vertical-align:-2px; flex-shrink:0; }
.section-title::before, .col h3::before {
  content:""; display:inline-block; width:5px; height:0.95em; margin-right:9px;
  background:var(--jr-grad); transform:skewX(-26deg); vertical-align:-1px;
}

/* ── Status pills (functional; critical = gradient like receipt badge-over) ── */
.status-badge.status-approved, .pill.ok   { background:var(--green-bg) !important; color:#1F4D0F !important; }
.status-badge.status-pending,  .pill.warn { background:var(--amber-bg) !important; color:#BA7517 !important; }
.status-badge.status-expired,  .pill.risk, .badge-over {
  background:var(--jr-grad) !important; color:#fff !important; border-color:transparent !important;
}

/* ── Risk rows / cards — red left border + faint tint ── */
tr.s-hold > td, tr.row-license-warn > td { background:rgba(233,42,44,0.06) !important; }
tr.s-hold > td:first-child, tr.row-license-warn > td:first-child { box-shadow:inset 3px 0 0 #E92A2C; }
.sub-card.high-risk-card, .sub-card.card-license-warn { border-left:3px solid #E92A2C !important; }
.lic-warn-badge { background:rgba(233,42,44,0.08) !important; color:#A71F23 !important; border:1px solid #f0c9ca !important; }

/* ── Home-list hardcoded-color fixes (job rows + info pills were dark/blue) ── */
.job-sub-row > td { background:#fafafa !important; border-bottom-color:#eee !important; border-left-color:#E92A2C !important; }
.job-sub-row:hover > td { background:#f0f0f0 !important; }
.vc-job-row { background:#fafafa !important; border-left-color:#E92A2C !important; }
.jsf-val.jsf-code, .vc-job-code { color:#A71F23 !important; }
.vc-jobs-pill, .scope-pill, .seq-primary, .contacts-pill.has-contacts, .badge-pin {
  background:#f0f0f0 !important; color:#404040 !important; border-color:#e0e0e0 !important;
}

/* ── Dark status-group banner (subcontractor list): force legible white text ── */
.sub-table tr.status-group-row td { background:#202020 !important; border-bottom-color:#202020 !important; }
.sub-table tr.status-group-row .status-group-title { color:#ffffff !important; }
.sub-table tr.status-group-row .status-group-count,
.sub-table tr.status-group-row .status-group-desc { color:rgba(255,255,255,0.72) !important; }
/* Card view uses the SAME dark banner for its group headers. */
.status-group-head {
  background:#202020 !important; border-bottom:0 !important;
  padding:12px 16px !important; align-items:baseline;
}
.status-group-head .status-group-title { color:#ffffff !important; }
.status-group-head .status-group-count,
.status-group-head .status-group-desc { color:rgba(255,255,255,0.72) !important; }
/* Any explicitly dark banner surface keeps white text. */
.banner-dark, .banner-dark * { color:#ffffff !important; }

/* ── Command-center hierarchy: paper columns, white cards; functional badges ── */
.kanban .col { background:#F4F4F4 !important; }
.badge-hold { background:#f7eede !important; color:#BA7517 !important; }
.renewal-status-replied, .renewal-status-ingested { border-color:#9a9a9a !important; color:#404040 !important; }

/* ── Marketing suite (Gantt / Calendar) ── */
.group-label, .month-title { font-family:var(--font-black) !important; letter-spacing:-0.03em !important; }
.gantt-scroll, .cal-wrap { background:#fff !important; }
