/* Cleared.live Platform — brand styles
   British Racing Green #004225, with the gold accent kept. The
   .text-navy / .bg-navy / .btn-navy utility classes keep their names —
   500+ references — and alias to the green through --cl-navy. */

:root {
  --cl-green:  #004225;   /* British Racing Green */
  --cl-green2: #002F1A;   /* hover / deep */
  --cl-gold:   #ffc107;
  --cl-bg:     #F4F7F4;

  --cl-navy:  var(--cl-green);    /* retired name, kept so nothing breaks */
  --cl-navy2: var(--cl-green2);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--cl-bg) !important;
}

/* ── Navbar ────────────────────────────────────────── */
.navbar {
  background: #fff !important;
  border-bottom: 1px solid #e5e7eb;
  box-shadow: 0 1px 4px rgba(0,0,0,.06) !important;
}
.navbar-brand { color: var(--cl-navy) !important; font-weight: 700; letter-spacing:-.01em; }
.navbar .nav-link { color: #374151 !important; font-size:.9rem; }
.navbar .nav-link:hover, .navbar .nav-link.active { color: var(--cl-navy) !important; }
.navbar .nav-link.active { font-weight: 600; }

/* ── Buttons ───────────────────────────────────────── */
.btn-primary, .btn-dark {
  background-color: var(--cl-navy) !important;
  border-color: var(--cl-navy) !important;
  color: #fff !important;
}
.btn-primary:hover, .btn-dark:hover {
  background-color: var(--cl-navy2) !important;
  border-color: var(--cl-navy2) !important;
}
.btn-outline-dark { color: var(--cl-navy) !important; border-color: var(--cl-navy) !important; }
.btn-outline-dark:hover { background-color: var(--cl-navy) !important; color: #fff !important; }

/* ── Cards ─────────────────────────────────────────── */
.card { border-radius: 10px; }
.card-header { border-radius: 10px 10px 0 0 !important; }

/* ── Tables ────────────────────────────────────────── */
.table > :not(caption) > * > * { padding: .75rem 1rem; }

/* ── Badges ────────────────────────────────────────── */
.badge { font-weight: 500; letter-spacing: .01em; }
/* Light badges (e.g. "Not Started", waived, N/A) default to white text on a
   near-white background — unreadable. Force dark text + a subtle border so
   every bg-light badge is legible without touching each template. */
.badge.bg-light {
  color: #343a40 !important;
  border: 1px solid #ced4da;
}

/* ── Utilities ─────────────────────────────────────── */
.text-navy { color: var(--cl-navy) !important; }
.bg-navy   { background-color: var(--cl-navy) !important; }
.btn-navy  { background-color: var(--cl-navy); border-color: var(--cl-navy); color: #fff; }
.btn-navy:hover, .btn-navy:focus { background-color: #002F1A; border-color: #002F1A; color: #fff; }
.btn-outline-navy { border-color: var(--cl-navy); color: var(--cl-navy); }
.btn-outline-navy:hover, .btn-outline-navy:focus { background-color: var(--cl-navy); color: #fff; }

/* ── AI redline diff (AI Audit / AI Redraft review) ── */
.rl-add { background: #dcfce7; color: #14532d; border-bottom: 1.5px solid #4ade80; border-radius: 2px; }
.rl-del { background: #fee2e2; color: #b91c1c; text-decoration: line-through; border-radius: 2px; }

/* ── Copy-protected proprietary content (submitter view) ── */
.cl-protected { position: relative; }
.cl-protected::before {
  content: "CLEARED.LIVE · PROPRIETARY · VIEW ONLY";
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(-24deg);
  white-space: nowrap; pointer-events: none; z-index: 1;
  font-size: 1rem; font-weight: 800; letter-spacing: .12em;
  color: rgba(13, 59, 110, 0.07);
}
html, body { overflow-x: hidden; max-width: 100%; }
/* `overflow-x: hidden` forces the OTHER axis to compute as `auto` (CSS overflow spec),
   which quietly makes body a scroll container and stops `position: sticky` engaging
   anywhere inside it — the music page's progress panel, for one. `clip` suppresses the
   overflow without creating a scroll container, so sticky works and nothing else moves.
   Guarded: browsers without `clip` (Safari < 16) keep the `hidden` rule above. */
@supports (overflow: clip) {
  html, body { overflow-x: clip; }
}

/* ── Platform BA sidebar nav ───────────────────────── */
.platform-nav .nav-link { color: rgba(255,255,255,.75); padding: .55rem 1rem; border-radius: 6px; font-size:.9rem; }
.platform-nav .nav-link:hover { color: #fff; background: rgba(255,255,255,.1); }
.platform-nav .nav-link.active { color: #fff; background: rgba(255,255,255,.18); font-weight:600; }

/* ── Clearance item row ────────────────────────────── */
.clearance-row { border-left: 4px solid transparent; transition: border-color .15s; }
.clearance-row.status-cleared   { border-left-color: #198754; }
.clearance-row.status-in_progress { border-left-color: #0dcaf0; }
.clearance-row.status-pending   { border-left-color: #ffc107; }
.clearance-row.status-waived    { border-left-color: #6c757d; }
.clearance-row.status-n_a       { border-left-color: #dee2e6; }

/* ── Submit form step indicator ────────────────────── */
.step-pill {
  display: inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:50%;
  background: var(--cl-navy); color:#fff;
  font-size:.75rem; font-weight:700; flex-shrink:0;
}

/* ── Progress tracker (submitter view) ─────────────── */
.tracker-item { padding: 1rem 1.25rem; border-radius:8px; background:#fff; margin-bottom:.5rem; border:1px solid #e9ecef; }
.tracker-item.done  { border-color:#d1fae5; background:#f0fdf4; }
.tracker-item.active { border-color:#bfdbfe; background:#eff6ff; }

/* ── Hero section ──────────────────────────────────── */
.hero { background: linear-gradient(135deg, var(--cl-navy) 0%, #00663A 100%); color:#fff; }

/* ── Stat card numbers ─────────────────────────────── */
.stat-number { font-size:2rem; font-weight:700; line-height:1; }

/* ── Nav tabs ──────────────────────────────────────── */
.nav-tabs .nav-link { color:#6c757d; border:none; border-bottom:2px solid transparent; padding:.6rem 1rem; font-size:.9rem; }
.nav-tabs .nav-link:hover { color: var(--cl-navy); border-bottom-color:#dee2e6; }
.nav-tabs .nav-link.active { color: var(--cl-navy); background:transparent; border-bottom:2px solid var(--cl-navy); font-weight:600; }

/* ── Info bubble button ────────────────────────────── */
.btn-info-bubble {
  display: inline-flex; align-items: center; gap: .25rem;
  background: none; border: none; padding: 0 2px;
  color: #6c757d; font-size: .78rem; cursor: pointer;
  line-height: 1; vertical-align: middle;
  transition: color .15s;
}
.btn-info-bubble:hover { color: var(--cl-navy); }
.btn-info-bubble .bi { font-size: .78rem; }

/* ── Field group labels ────────────────────────────── */
.field-group-label {
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: #9ca3af;
  padding: .5rem 0 .35rem;
  margin-top: .5rem; margin-bottom: .25rem;
  border-top: 1px solid #f0f0f0;
}
.field-group-label:first-child { margin-top: 0; border-top: none; }

/* ── Type card improvements ────────────────────────── */
.type-card { transition: border-color .15s, box-shadow .15s; }
.type-card:hover { border-color: var(--cl-navy) !important; box-shadow: 0 0 0 1px var(--cl-navy); }
.btn-check:checked + .type-card {
  border-color: var(--cl-navy) !important;
  background: #EDF4EF !important;
  box-shadow: 0 0 0 2px var(--cl-navy);
  /* Bootstrap turns a checked btn-outline-* white, which it should — its own checked
     state is a solid dark fill. We keep a pale fill instead, so the title has to be
     brought back or the selected card is the one you cannot read. */
  color: var(--cl-navy) !important;
}
.btn-check:checked + .type-card .bi { color: var(--cl-navy) !important; }
/* The description stays muted: only the title takes the navy. */
.btn-check:checked + .type-card .type-desc { color: #6c757d !important; }
.type-desc { display: block; }

/* ── Clearance item explain button ─────────────────── */
.item-explain-btn { opacity: .65; transition: opacity .15s; }
.item-explain-btn:hover { opacity: 1; text-decoration: none !important; }

/* ── API code block ────────────────────────────────── */
.api-block { background:#0d1117; color:#e6edf3; border-radius:8px; padding:1rem 1.25rem; font-size:.8rem; font-family:'SF Mono',monospace; }
.api-block .method { color:#7ee787; }
.api-block .path   { color:#79c0ff; }
.api-block .key    { color:#ff7b72; }
.api-block .val    { color:#a5d6ff; }

/* ── Published guidelines, as read by a submitter ──── */
/* The text is stored with markdown pipe tables (the deal-term table: Term / Preferred /
   Fallback / Escalate). Rendered through the guideline_html filter it becomes a real table,
   which on a phone must scroll inside its own box instead of squeezing four columns of
   sentences into 340px. */
.guideline-body { line-height: 1.7; }
.guideline-body > :first-child { margin-top: 0; }
.guideline-body > :last-child { margin-bottom: 0; }
.guideline-body h1 { font-size: 1.05rem; font-weight: 600; margin: 1.25rem 0 .5rem; }
.guideline-body h2 { font-size: .98rem; font-weight: 600; margin: 1.15rem 0 .45rem; }
.guideline-body h3 { font-size: .92rem; font-weight: 600; font-style: italic; margin: 1rem 0 .4rem; }
.guideline-body p, .guideline-body ul { margin-bottom: .75rem; }
.guideline-body ul { padding-left: 1.25rem; }
.guideline-body li { margin-bottom: .25rem; }
.guideline-body hr { margin: 1.25rem 0; }
.guideline-body figure.table { display: block; overflow-x: auto; margin: 0 0 1rem; }
.guideline-body table { width: 100%; min-width: 32rem; border-collapse: collapse; font-size: .82rem; }
.guideline-body th, .guideline-body td {
  border: 1px solid #dee2e6; padding: .4rem .55rem; vertical-align: top; text-align: left;
}
.guideline-body thead th { background: #f8f9fa; font-weight: 600; white-space: nowrap; }