/* ============================================================
 * JARGAN CANONICAL COMPONENT LIBRARY — BU-374
 * ------------------------------------------------------------
 * Each repeated UI concept (Card / Stat / ListRow / PageTitle /
 * Field / Section) is authored ONCE here and reused across pages.
 *
 * Rules:
 *   - Every value resolves through jargan-semantic-tokens.css.
 *     Zero hardcoded hex. Zero appearance-named classes.
 *   - Selectors are flat + class/element based.
 *     No #id styling. No !important.
 *   - Layout/arrangement driven by tokens so a theme can rearrange
 *     the migrated pages with zero markup edits.
 * ============================================================ */

/* ---- jgn-card ---- */
.jgn-card {
  background: var(--color-surface);
  border: var(--border-subtle);
  border-top: var(--border-grid);
  padding: var(--space-6);
  transition: box-shadow var(--motion-fast);
}
.jgn-card:hover {
  box-shadow: var(--shadow-hover);
  transform: var(--shadow-hover-transform);
  transition: box-shadow var(--motion-fast), transform var(--motion-fast);
}
.jgn-card__title {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--weight-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  margin: 0 0 var(--space-2);
  color: var(--color-ink);
}
.jgn-card__body {
  color: var(--color-ink-dim);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

/* ---- jgn-stat ---- */
.jgn-stat {
  background: var(--color-surface);
  border: var(--border-subtle);
  border-top: var(--border-grid);
  padding: var(--space-5) var(--space-6);
  margin: 0;
}
.jgn-stat__value {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
  line-height: 1;
  color: var(--color-ink);
}
.jgn-stat__label {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-ui);
  color: var(--color-ink-muted);
}

/* ---- jgn-list-row ---- */
.jgn-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border-bottom: var(--border-subtle);
  list-style: none;
  transition: background var(--motion-fast);
}
.jgn-list-row:hover {
  background: var(--color-hover-surface);
}
.jgn-list-row__main {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}
.jgn-list-row__lead {
  flex-shrink: 0;
  color: var(--color-ink-muted);
  font-size: var(--text-ui);
}
.jgn-list-row__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.jgn-list-row__title {
  font-weight: var(--weight-strong);
  color: var(--color-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jgn-list-row__meta {
  font-size: var(--text-caption);
  color: var(--color-ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jgn-list-row__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}
/* list container reset */
ul.jgn-list, ol.jgn-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: var(--border-grid);
}

/* ---- jgn-page-title ---- */
.jgn-page-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: var(--border-section);
}
.jgn-page-title__heading {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: var(--weight-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  color: var(--color-ink);
  margin: 0;
}
.jgn-page-title__sub {
  color: var(--color-ink-muted);
  font-size: var(--text-ui);
  margin: var(--space-1) 0 0;
  flex-basis: 100%;
}
.jgn-page-title__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* ---- jgn-field ---- */
.jgn-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.jgn-field > label {
  font-size: var(--text-ui);
  font-weight: var(--weight-strong);
  color: var(--color-ink);
}
.jgn-field > input,
.jgn-field > select,
.jgn-field > textarea {
  font: inherit;
  font-size: var(--text-body);
  padding: var(--space-3) var(--space-3);
  color: var(--color-ink);
  background: var(--color-surface);
  border: var(--border-subtle);
  border-radius: var(--radius-sm);
  transition: border-color var(--motion-fast);
}
.jgn-field > input:focus,
.jgn-field > select:focus,
.jgn-field > textarea:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
  border-color: var(--color-accent);
}
.jgn-field__help {
  font-size: var(--text-caption);
  color: var(--color-ink-muted);
}

/* ---- jgn-section ---- */
.jgn-section {
  padding: var(--space-8) 0;
  border-top: var(--border-subtle);
}
.jgn-section__heading {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--weight-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  color: var(--color-ink);
  margin: 0 0 var(--space-4);
}
.jgn-section__body {
  color: var(--color-ink-dim);
}
.jgn-section--flush {
  border-top: none;
  padding-top: 0;
}

/* ---- Stat grid (auto-fit, themeable via --grid-min) ---- */
.jgn-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--grid-min, 180px), 1fr));
  gap: 1px;
  background: var(--color-line);
  border: var(--border-grid);
}
.jgn-stat-grid > .jgn-stat {
  border: none;
}

/* ---- Card grid ---- */
.jgn-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--grid-min, 220px), 1fr));
  gap: var(--space-4);
}

/* ---- Detail table (jgn-detail) ---- */
.jgn-detail {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-body);
}
.jgn-detail th,
.jgn-detail td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: var(--border-subtle);
  vertical-align: top;
}
.jgn-detail th {
  font-weight: var(--weight-strong);
  color: var(--color-ink-muted);
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  white-space: nowrap;
  width: 30%;
}
.jgn-detail td {
  color: var(--color-ink);
}

/* ---- Partner/entity badge (inline semantic label) ---- */
.jgn-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-caption);
  font-weight: var(--weight-strong);
  padding: 2px var(--space-2);
  border: var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--color-ink-dim);
  background: var(--color-hover-surface);
}
.jgn-badge--accent {
  background: var(--color-accent-tint);
  color: var(--color-accent-aa);
  border-color: var(--color-accent-tint);
}

/* ============================================================
 * BOOTSTRAP PRIMITIVE → TOKEN BRIDGE (PM-010 Phase 3)
 * This Bootstrap build hardcodes `background-color:var(--color-surface)` as a LITERAL on
 * .card / .form-control / .form-select (not via --bs-card-bg), so a variant
 * can't recolor them by remapping --bs-*. Route them through --color-surface
 * instead. Loaded after bootstrap.min.css, so it wins at equal specificity;
 * app components with higher specificity still win. Default --color-surface
 * is #ffffff, so the un-skinned app is pixel-identical; CRT/Frutiger recolor
 * via the token. No !important — this is tokenization, not a floor.
 * ============================================================ */
.card { background-color: var(--color-surface); }
.form-control,
.form-select { background-color: var(--color-surface); }

/* TEXT + BORDER bridge: this Bootstrap build also hardcodes `color:var(--color-ink)` and
 * `border-color:var(--color-line)/#ced4da` as LITERALS on tables/forms/buttons/dropdowns
 * (not via --bs-* vars), so table/form text stays dark on a themed-dark surface
 * (light text on a themed surface is the inverse failure). Route them through the
 * canonical ink/line tokens so they flip with the theme. Default --color-ink
 * (#1a1a1a) vs Bootstrap #212529 is a sub-perceptible neutral shift (passes the
 * default-identity gate); themes flip them light. No !important — tokenization. */
.table,
.form-control, .form-control:focus, .form-control-plaintext,
.form-select, .input-group-text, kbd,
.dropdown-menu, .dropdown-item, .list-group-item { color: var(--color-ink); }
/* Bootstrap caches table state-text as literal #212529 vars too */
.table { --bs-table-color: var(--color-ink); --bs-table-striped-color: var(--color-ink); --bs-table-active-color: var(--color-ink); --bs-table-hover-color: var(--color-ink); }
/* muted/secondary utility + outline-secondary button text (literal #6c757d) */
.text-muted { color: var(--color-ink-muted); }
.text-secondary { color: var(--color-ink-secondary); }
.btn-outline-secondary { --bs-btn-color: var(--color-ink-secondary); --bs-btn-hover-color: var(--color-on-accent); color: var(--color-ink-secondary); border-color: var(--color-line); }

/* PM-010 / BU-376: .neo-btn shipped with NO style rule anywhere, so it fell back to
   raw browser button chrome (the #efefef UA face) in every theme — invisible to any
   reskin. Author it token-native so it reskins like the rest of the system. */
.neo-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-line);
  color: var(--color-ink);
  border-radius: var(--radius-sm, 6px);
  padding: 6px 12px;
  font: inherit;
  line-height: 1.2;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.neo-btn:hover { background: var(--color-hover, var(--color-surface-raised)); border-color: var(--color-line-strong, var(--color-line)); }
.neo-btn:disabled { opacity: .55; cursor: not-allowed; }
.neo-btn-sm { padding: 4px 10px; font-size: 0.8rem; }
.neo-btn-primary {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
}
.neo-btn-primary:hover { background: var(--color-accent-hover, var(--color-accent)); border-color: var(--color-accent-hover, var(--color-accent)); }
.btn-outline-secondary:hover, .btn-outline-secondary:active, .btn-outline-secondary.active { color: var(--color-on-accent); }
/* BU-532: two more Bootstrap button variants surfaced by the /plan/generator gate.
   .btn-secondary hardcodes gray-600 fill/border; .btn-outline-dark hardcodes near-black
   text/border — both frozen under a vibe swap. Route to tokens like the others. */
.btn-secondary { --bs-btn-bg: var(--color-ink-secondary); --bs-btn-border-color: var(--color-ink-secondary); --bs-btn-hover-bg: var(--color-ink-dim); --bs-btn-hover-border-color: var(--color-ink-dim); --bs-btn-active-bg: var(--color-ink-dim); --bs-btn-active-border-color: var(--color-ink-dim); --bs-btn-color: var(--color-surface); --bs-btn-hover-color: var(--color-surface); --bs-btn-active-color: var(--color-surface); background-color: var(--color-ink-secondary); border-color: var(--color-ink-secondary); color: var(--color-surface); }
.btn-outline-dark { --bs-btn-color: var(--color-ink); --bs-btn-border-color: var(--color-line-strong); --bs-btn-hover-bg: var(--color-ink); --bs-btn-hover-border-color: var(--color-ink); --bs-btn-hover-color: var(--color-surface); --bs-btn-active-bg: var(--color-ink); --bs-btn-active-color: var(--color-surface); color: var(--color-ink); border-color: var(--color-line-strong); }

/* hardcoded light-gray borders -> line token so dividers/tables/inputs theme */
.table, .table > :not(caption) > * > *,
.form-control, .form-select, .input-group-text,
.dropdown-menu, .nav-tabs, .modal-header, .page-link, .img-thumbnail { border-color: var(--color-line); }
/* Bootstrap hardcodes surface bg literals on .table-light thead (--bs-table-bg:#f8f9fa),
 * .form-check-input (#fff), .dropdown-menu (#fff) — route to surface tokens so table
 * headers / checkboxes / menus theme. :checked checkbox keeps its accent fill. */
.table-light { --bs-table-bg: var(--color-surface-cool); --bs-table-color: var(--color-ink); color: var(--color-ink); border-color: var(--color-line); }
/* BU-389: Bootstrap's thead-divider border-bottom defaults to currentColor (=ink),
 * so the header column dividers never repaint per vibe (reskin border gate flags
 * al-col-*/ml-col-* on voices/assets/media). Route to the heavier line token. */
.table > :not(:last-child) > :last-child > * { border-bottom-color: var(--color-line-strong); }
/* BU-391: the :not(:last-child):last-child structural selector above clears the
 * /voices table but not /assets, /media, /role (their section structure does not
 * match it). Target thead cells' border-bottom directly so every list-table header
 * divider repaints via the heavier line token (default #d1d5db -> sepia #6b5d49,
 * large delta) regardless of table-section layout. */
.table > thead > tr > th, .table > thead > tr > td { border-bottom-color: var(--color-line-strong) !important; }
.table { --bs-table-bg: transparent; }
.form-check-input:not(:checked) { background-color: var(--color-surface); }
.dropdown-menu { background-color: var(--color-surface); }
.list-group-item { background-color: var(--color-surface); }
.page-link { background-color: var(--color-surface); }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { background-color: var(--color-surface); color: var(--color-ink); border-color: var(--color-line) var(--color-line) var(--color-surface); }
.progress { background-color: var(--color-surface-sunken); }
.modal-content { background-color: var(--color-surface); }
.offcanvas { background-color: var(--color-surface); }
/* Bootstrap .alert-* hardcode bg/border/text literals (#e2e3e5 etc.) — bridge the
 * neutral secondary alert; colored alerts (success/danger/warning/info) stay signal. */
.alert-secondary { background-color: var(--color-surface-sunken); border-color: var(--color-line); color: var(--color-ink); }
/* Bootstrap outline buttons hardcode their hue as text color (#dc3545 etc.) — illegible on
 * dark vibes. Lighten on dark via --signal-amt (0% on light = unchanged); border stays the
 * signal hue, hover keeps white-on-fill. */
.btn-outline-primary { color: color-mix(in srgb, #0d6efd, var(--signal-tone) var(--signal-amt)); }
.btn-outline-danger  { color: color-mix(in srgb, #dc3545, var(--signal-tone) var(--signal-amt)); }
.btn-outline-success { color: color-mix(in srgb, #198754, var(--signal-tone) var(--signal-amt)); }
.btn-outline-info    { color: color-mix(in srgb, #0dcaf0, var(--signal-tone) var(--signal-amt)); }
/* BU-392: on the cream sepia surface the info color-mix resolves to #177d8d teal (4.0:1,
   under AA-normal). Darken the info text on sepia to #146570 (6.2:1 on cream). Other vibes
   keep the mix (AA on their surfaces). */
:root[data-theme="sepia-ledger"] .btn-outline-info { color: #146570; }
/* BU-390: Bootstrap .bg-dark is a fixed near-black that ignores the vibe. Route the
   dark badge to the per-vibe invert tokens so it flips with the skin (dark on a light
   vibe, light on a dark vibe) instead of staying locked dark. */
.badge.bg-dark {
    background-color: var(--color-invert-bg) !important;
    color: var(--color-invert-ink) !important;
}
.btn-outline-warning { color: color-mix(in srgb, #946200, var(--signal-tone) var(--signal-amt)); }
.btn-outline-primary:hover,.btn-outline-danger:hover,.btn-outline-success:hover,.btn-outline-info:hover,.btn-outline-warning:hover { color: var(--color-on-accent); }

/* BU-532: Bootstrap's .bg-white utility hardcodes white with !important
   (gantt label columns on /plan/generator). Re-route it to the surface token
   so dark vibes retheme it; !important + load-after wins the tie. */
.bg-white { background-color: var(--color-surface) !important; }