/* ============================================================
   Rowing Precision Operations — Theme
   Ported from the CrewLogger analytics dashboard's color system
   (see CREWLOGGER_COLOR_THEME.md): black / red / white / grey,
   red gradients — no blue, no rainbow. Color is always meaningful:
   red = brand/action, green = genuinely good only, grey = secondary.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
  /* ---- Core palette ---- */
  --bg: #f0e6e6;
  --panel: #ffffff;
  --line: #e2cdcd;
  --line-soft: #efdede;
  --ink: #16090b;
  --ink-2: #4a3d3f;
  --dim: #6e5a5c;
  --faint: #9a8b8d;
  --accent: #dc2626;
  --accent-dk: #b91c1c;
  --accent-lt: #ef4444;
  --ok: #059669;
  --amber: #d97706;
  --dark: #120b0c;
  --dark-2: #1c1214;
  --dark-line: rgba(255, 255, 255, .09);
  --dark-dim: #b7a6a8;

  /* ---- Gradients ---- */
  --grad: linear-gradient(90deg, #b91c1c, #ef4444);
  --hero-grad: linear-gradient(135deg, #7f1d1d 0%, #dc2626 55%, #ef4444 100%);

  /* ---- Sequential ramp (ordered/zone data) ---- */
  --z1: #f6d8d8;
  --z2: #ef9a9a;
  --z3: #e56a6a;
  --z4: #dc2626;
  --z5: #7f1d1d;

  /* ---- Shape & shadow ---- */
  --radius: 18px;
  --radius-lg: 28px;
  --shadow-sm: 0 2px 6px rgba(40, 5, 5, .10);
  --shadow: 0 18px 40px -18px rgba(220, 38, 38, .22);
  --shadow-lg: 0 40px 80px -32px rgba(20, 5, 5, .35);
}

/* ------------------------------------------------------------
   Bootstrap theme remap — retints every var(--bs-*)-driven
   utility and component (text-*, bg-*, border-*, alerts, badges,
   cards, tables, links, nav-tabs, focus rings…) from one place.
   Bootstrap 5.3 drives most of its theming through these root
   custom properties, so this covers the large majority of the UI
   without touching individual templates.
   ------------------------------------------------------------ */
:root,
[data-bs-theme="light"] {
  --bs-body-bg: var(--bg);
  --bs-body-bg-rgb: 250, 247, 247;
  --bs-body-color: var(--ink);
  --bs-body-color-rgb: 22, 9, 11;
  --bs-emphasis-color: var(--ink);
  --bs-emphasis-color-rgb: 22, 9, 11;
  --bs-secondary-color: var(--dim);
  --bs-secondary-color-rgb: 110, 90, 92;
  --bs-tertiary-color: var(--faint);
  --bs-tertiary-color-rgb: 154, 139, 141;
  --bs-tertiary-bg: var(--line-soft);
  --bs-tertiary-bg-rgb: 246, 236, 236;
  --bs-secondary-bg: var(--line-soft);
  --bs-secondary-bg-rgb: 246, 236, 236;
  --bs-border-color: var(--line);
  --bs-border-color-translucent: var(--line);
  --bs-heading-color: var(--ink);
  --bs-code-color: var(--accent-dk);

  --bs-box-shadow-sm: var(--shadow-sm);
  --bs-box-shadow: var(--shadow);
  --bs-box-shadow-lg: var(--shadow-lg);

  --bs-link-color: var(--accent);
  --bs-link-color-rgb: 220, 38, 38;
  --bs-link-hover-color: var(--accent-dk);
  --bs-link-hover-color-rgb: 185, 28, 28;

  /* Primary = brand red — actions, highlights, active states */
  --bs-primary: var(--accent);
  --bs-primary-rgb: 220, 38, 38;
  --bs-primary-text-emphasis: var(--accent-dk);
  --bs-primary-bg-subtle: #fbe2e2;
  --bs-primary-border-subtle: #f3b6b6;

  /* Secondary = warm grey — supporting info */
  --bs-secondary: var(--dim);
  --bs-secondary-rgb: 110, 90, 92;
  --bs-secondary-text-emphasis: var(--ink-2);
  --bs-secondary-bg-subtle: var(--line-soft);
  --bs-secondary-border-subtle: var(--line);

  /* Success = "good" green only — positive deltas, success states */
  --bs-success: var(--ok);
  --bs-success-rgb: 5, 150, 105;
  --bs-success-text-emphasis: #04543c;
  --bs-success-bg-subtle: #d9f2ea;
  --bs-success-border-subtle: #a6ddc8;

  /* Danger = deep red — dedicated error meaning, distinct shade from
     primary action red so the two don't read as the same thing */
  --bs-danger: var(--accent-dk);
  --bs-danger-rgb: 185, 28, 28;
  --bs-danger-text-emphasis: #7f1d1d;
  --bs-danger-bg-subtle: #fbe2e2;
  --bs-danger-border-subtle: #f3b6b6;

  /* Warning = amber — dedicated meaning, never decorative */
  --bs-warning: var(--amber);
  --bs-warning-rgb: 217, 119, 6;
  --bs-warning-text-emphasis: #7c4a05;
  --bs-warning-bg-subtle: #faecd6;
  --bs-warning-border-subtle: #f0cd9b;

  /* Info = grey, not blue — theme rule is "no blue, no rainbow" */
  --bs-info: var(--dim);
  --bs-info-rgb: 110, 90, 92;
  --bs-info-text-emphasis: var(--ink-2);
  --bs-info-bg-subtle: var(--line-soft);
  --bs-info-border-subtle: var(--line);

  --bs-light: var(--bg);
  --bs-light-rgb: 250, 247, 247;
  --bs-light-text-emphasis: var(--dim);
  --bs-light-bg-subtle: var(--bg);
  --bs-light-border-subtle: var(--line);

  --bs-dark: var(--dark);
  --bs-dark-rgb: 18, 11, 12;
  --bs-dark-text-emphasis: var(--dark);
  --bs-dark-bg-subtle: var(--line-soft);
  --bs-dark-border-subtle: var(--faint);
}

body {
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 800;
  letter-spacing: -.01em;
}

/* ------------------------------------------------------------
   Components Bootstrap bakes as fixed hex at build time — these
   don't follow the var(--bs-*) remap above (buttons, table state
   variants, form focus/checked rings), so they're overridden
   directly here. Every value is still a var(--token) reference,
   so the whole UI still re-themes from the tokens at the top.
   ------------------------------------------------------------ */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--accent-dk);
  --bs-btn-hover-border-color: var(--accent-dk);
  --bs-btn-active-bg: var(--accent-dk);
  --bs-btn-active-border-color: var(--accent-dk);
  --bs-btn-disabled-bg: var(--accent);
  --bs-btn-disabled-border-color: var(--accent);
  --bs-btn-focus-shadow-rgb: 220, 38, 38;
}
.btn-outline-primary {
  --bs-btn-color: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-bg: var(--accent);
  --bs-btn-hover-border-color: var(--accent);
  --bs-btn-active-bg: var(--accent);
  --bs-btn-active-border-color: var(--accent);
  --bs-btn-disabled-color: var(--accent);
  --bs-btn-disabled-border-color: var(--accent);
  --bs-btn-focus-shadow-rgb: 220, 38, 38;
}
.btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--dim);
  --bs-btn-border-color: var(--dim);
  --bs-btn-hover-bg: var(--ink-2);
  --bs-btn-hover-border-color: var(--ink-2);
  --bs-btn-active-bg: var(--ink-2);
  --bs-btn-active-border-color: var(--ink-2);
}
.btn-outline-secondary {
  --bs-btn-color: var(--dim);
  --bs-btn-border-color: var(--line);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--dim);
  --bs-btn-hover-border-color: var(--dim);
  --bs-btn-active-bg: var(--dim);
  --bs-btn-active-border-color: var(--dim);
  --bs-btn-disabled-color: var(--faint);
}
.btn-success {
  --bs-btn-bg: var(--ok);
  --bs-btn-border-color: var(--ok);
  --bs-btn-hover-bg: #04785a;
  --bs-btn-hover-border-color: #04785a;
  --bs-btn-active-bg: #04785a;
  --bs-btn-active-border-color: #04785a;
  --bs-btn-focus-shadow-rgb: 5, 150, 105;
}
.btn-outline-success {
  --bs-btn-color: var(--ok);
  --bs-btn-border-color: var(--ok);
  --bs-btn-hover-bg: var(--ok);
  --bs-btn-hover-border-color: var(--ok);
  --bs-btn-active-bg: var(--ok);
  --bs-btn-active-border-color: var(--ok);
  --bs-btn-focus-shadow-rgb: 5, 150, 105;
}
.btn-danger {
  --bs-btn-bg: var(--accent-dk);
  --bs-btn-border-color: var(--accent-dk);
  --bs-btn-hover-bg: #94181d;
  --bs-btn-hover-border-color: #94181d;
  --bs-btn-active-bg: #94181d;
  --bs-btn-active-border-color: #94181d;
  --bs-btn-focus-shadow-rgb: 185, 28, 28;
}
.btn-outline-danger {
  --bs-btn-color: var(--accent-dk);
  --bs-btn-border-color: var(--accent-dk);
  --bs-btn-hover-bg: var(--accent-dk);
  --bs-btn-hover-border-color: var(--accent-dk);
  --bs-btn-active-bg: var(--accent-dk);
  --bs-btn-active-border-color: var(--accent-dk);
  --bs-btn-focus-shadow-rgb: 185, 28, 28;
}
.btn-warning {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--amber);
  --bs-btn-border-color: var(--amber);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #b5650a;
  --bs-btn-hover-border-color: #b5650a;
}

/* Table state variants — also baked as fixed hex by Bootstrap */
.table-light {
  --bs-table-bg: var(--line-soft);
  --bs-table-color: var(--ink);
  --bs-table-border-color: var(--line);
  --bs-table-striped-bg: #f1e3e3;
  --bs-table-hover-bg: #f1e3e3;
}
.table-danger {
  --bs-table-bg: #fbe2e2;
  --bs-table-color: var(--ink);
  --bs-table-border-color: #f0c2c2;
  --bs-table-hover-bg: #f6d4d4;
}
.table-warning {
  --bs-table-bg: #faecd6;
  --bs-table-color: var(--ink);
  --bs-table-border-color: #f0d9ac;
  --bs-table-hover-bg: #f5e2c1;
}
.table-success {
  --bs-table-bg: #d9f2ea;
  --bs-table-color: var(--ink);
  --bs-table-border-color: #a6ddc8;
  --bs-table-hover-bg: #c7ecdd;
}

/* Form controls default their background to var(--bs-body-bg) (the
   page background) directly, not through a var(--bs-card-bg)-style
   indirection — same issue as the card/table fix above, so it needs
   its own override to stay a clean panel surface instead of picking
   up the page's tint. */
.form-control,
.form-select,
.form-check-input,
.input-group-text {
  background-color: var(--panel);
}

/* Focus ring & checked states are hard-coded blue in Bootstrap's
   distributed build, not var()-driven */
.form-control:focus,
.form-select:focus {
  border-color: var(--accent-lt);
  box-shadow: 0 0 0 .25rem rgba(220, 38, 38, .2);
}
.form-check-input:checked {
  background-color: var(--accent);
  border-color: var(--accent);
}
.form-check-input:focus {
  border-color: var(--accent-lt);
  box-shadow: 0 0 0 .25rem rgba(220, 38, 38, .2);
}

.list-group-item.active {
  --bs-list-group-active-bg: var(--accent);
  --bs-list-group-active-border-color: var(--accent);
}
.nav-pills {
  --bs-nav-pills-link-active-bg: var(--accent);
}
.dropdown-menu {
  --bs-dropdown-bg: var(--panel);
  --bs-dropdown-link-active-bg: var(--accent);
  --bs-dropdown-link-hover-bg: var(--line-soft);
}
.page-link {
  color: var(--accent);
}
.page-item.active .page-link {
  background-color: var(--accent);
  border-color: var(--accent);
}

/* .text-{color} utilities read the raw semantic color (e.g.
   --bs-warning-rgb, the amber used for buttons/badges) rather than a
   shade calibrated for text-on-light-background contrast. Amber and
   green in particular fail WCAG AA (~3.2:1 and ~3.8:1) as body text
   on white/panel — redirect every one to its "-text-emphasis" token
   (already defined above, and what Bootstrap's own alerts use) so
   status text stays reliably readable. */
.text-success {
  color: var(--bs-success-text-emphasis) !important;
}
.text-danger {
  color: var(--bs-danger-text-emphasis) !important;
}
.text-warning {
  color: var(--bs-warning-text-emphasis) !important;
}
.text-info {
  color: var(--bs-info-text-emphasis) !important;
}
.text-secondary {
  color: var(--bs-secondary-text-emphasis) !important;
}

/* Bootstrap defaults card/table/modal/list-group backgrounds to
   var(--bs-body-bg) — i.e. the page background — so without this
   they'd render as literally the same color as the page instead of
   the "panel" surface color, killing all contrast between content
   and the page it sits on. */
.card,
.modal-content {
  --bs-card-bg: var(--panel);
  --bs-modal-bg: var(--panel);
  --bs-card-border-radius: var(--radius);
  --bs-modal-border-radius: var(--radius);
}
.table {
  --bs-table-bg: var(--panel);
}
.list-group {
  --bs-list-group-bg: var(--panel);
}

/* ------------------------------------------------------------
   App-specific chrome
   ------------------------------------------------------------ */

/* Navbar — dark chrome, used sparingly (nav bar only), per theme */
.bg-rp {
  background-color: var(--dark) !important;
}
.navbar-brand {
  letter-spacing: 0.02em;
  font-weight: 800;
}
.navbar-dark .navbar-nav .nav-link.active {
  color: #fff;
  font-weight: 600;
}
.navbar-dark .navbar-nav .nav-link:hover {
  color: var(--accent-lt);
}
.navbar-dark .navbar-nav .dropdown-menu {
  --bs-dropdown-bg: var(--dark-2);
  --bs-dropdown-color: var(--dark-dim);
  --bs-dropdown-link-color: #fff;
  --bs-dropdown-border-color: var(--dark-line);
  /* --bs-secondary-color (what .text-muted reads) is --dim app-wide —
     calibrated for light panels. On this dark dropdown surface (e.g.
     the account email) that's ~2.9:1, a real failure — override to
     the token built for dark surfaces so it inherits down correctly. */
  --bs-secondary-color: var(--dark-dim);
  /* Bootstrap's default hover treatment (--bs-dropdown-link-hover-bg)
     is the pale line-soft tint meant for light dropdowns — white text
     on that here is ~1.3:1, nearly invisible. Use a subtle light-on-
     dark overlay instead, so hover stays legible on this dark panel. */
  --bs-dropdown-link-hover-color: #fff;
  --bs-dropdown-link-hover-bg: var(--dark-line);
}
/* .text-danger (Logout) inherited --bs-danger-text-emphasis from the
   global .text-danger rule below — a deep maroon calibrated for white
   panels, ~1.8:1 here and effectively unreadable. Needs its own
   light-on-dark treatment, same reasoning as the hover fix above. */
.navbar-dark .navbar-nav .dropdown-menu .text-danger {
  color: var(--accent-lt) !important;
}
.navbar-dark .navbar-nav .dropdown-menu .text-danger:hover,
.navbar-dark .navbar-nav .dropdown-menu .text-danger:focus {
  color: #fff !important;
  background-color: var(--accent-dk) !important;
}

/* Main content offset for fixed navbar */
.main-content {
  margin-top: 62px;
  min-height: calc(100vh - 62px);
}

/* Stat cards on dashboard — numbers stay ink; color is reserved for
   genuinely meaningful states, never one arbitrary hue per metric */
.stat-card {
  transition: box-shadow 0.15s;
}
.stat-card:hover {
  box-shadow: var(--shadow) !important;
}
.stat-icon {
  font-size: 2rem;
  line-height: 1;
  margin-bottom: .25rem;
  color: var(--faint);
}
.stat-value {
  font-size: 2.25rem;
  font-weight: 900;
  line-height: 1.1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stat-label {
  font-size: .75rem;
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
}

/* Table improvements */
.table th {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--dim);
  font-weight: 700;
}

/* Card headers */
.card-header {
  font-size: .9rem;
  border-bottom: 1px solid var(--line);
}

/* QC table radio buttons */
.form-check-inline .form-check-label {
  cursor: pointer;
  user-select: none;
}

/* Status badges */
.badge {
  font-weight: 600;
  letter-spacing: .02em;
}

/* Notification bell */
.nav-link .badge {
  font-size: .6rem;
  min-width: 1rem;
  height: 1rem;
  line-height: 1rem;
  padding: 0 .3rem;
}
/* Was top-0 + translate-middle, which centers the badge on the nav-link's
   own top edge — half the badge's height ends up above that edge. Inside
   the fixed-top navbar (nothing above it to render into) that pushed the
   badge above the bar entirely, clipped by the top of the viewport.
   Anchor it a bit down from the top instead, keeping only the horizontal
   centering (translate-middle-x) that translate-middle used to provide. */
.notif-badge {
  top: .35rem;
}

/* Thin progress bar */
.progress {
  border-radius: 99px;
}

/* Print: clean QC checklist */
@media print {
  .navbar, .btn, .alert { display: none !important; }
  .main-content { margin-top: 0 !important; }
  .card { box-shadow: none !important; border: 1px solid var(--line) !important; }
}