/*
  InVitro Manager — visual theme tokens layered over Tabler.
  Forest/cream/gold "earthy lab" palette from the Claude Design handoff.
  Loaded after tabler.min.css so its variable overrides win the cascade.
*/

:root {
  /* Claude Design tokens (from shared.css in handoff package) */
  --ivm-paper:        #fbfaf5;
  --ivm-paper-2:      #f4f2ec;
  --ivm-paper-3:      #ececea;
  --ivm-card:         #ffffff;
  --ivm-card-tint:    #fdfcf7;

  --ivm-ink:          #0e1410;
  --ivm-ink-2:        #2a302c;
  --ivm-ink-3:        #5a605c;
  --ivm-ink-4:        #8a8f8b;

  --ivm-forest:       #0f2a1c;
  --ivm-forest-2:     #15391f;
  --ivm-accent:       #1f5c3d;
  --ivm-accent-soft:  #e8efe8;
  --ivm-accent-tint:  #f1f5ee;
  --ivm-cream:        #f3ead2;
  --ivm-gold:         #c8a25b;

  --ivm-rule:         #e6e4dc;
  --ivm-rule-soft:    #efede5;

  --ivm-warn:         #b65b1f;
  --ivm-cool:         #2c4a6e;

  /* Override Tabler's brand color — the cascade of `primary` everywhere */
  --tblr-primary:                 #1f5c3d;
  --tblr-primary-rgb:             31, 92, 61;
  --tblr-primary-fg:              #ffffff;
  --tblr-primary-darken:          #15391f;
  --tblr-primary-lt:              #e8efe8;

  /* Page surfaces */
  --tblr-body-bg:                 #fbfaf5;
  --tblr-bg-surface:              #fbfaf5;
  --tblr-bg-surface-secondary:    #f4f2ec;
  --tblr-bg-surface-tertiary:     #ececea;

  /* Text */
  --tblr-body-color:              #0e1410;
  --tblr-body-color-rgb:          14, 20, 16;
  --tblr-secondary-color:         #5a605c;
  --tblr-tertiary-color:          #8a8f8b;
  --tblr-muted:                   #8a8f8b;
  --tblr-heading-color:           #0e1410;

  /* Borders / rules */
  --tblr-border-color:            #e6e4dc;
  --tblr-border-color-translucent: #e6e4dc;

  /* Cards */
  --tblr-card-bg:                 #ffffff;
  --tblr-card-color:              #0e1410;
  --tblr-card-border-color:       #e6e4dc;
  --tblr-card-cap-bg:             #fdfcf7;

  /* Status */
  --tblr-warning:                 #b65b1f;
  --tblr-warning-rgb:             182, 91, 31;
  --tblr-info:                    #2c4a6e;
  --tblr-info-rgb:                44, 74, 110;

  /* Border radius — Claude Design wants tighter corners */
  --tblr-border-radius:           4px;
  --tblr-border-radius-sm:        3px;
  --tblr-border-radius-lg:        6px;
}

/* Sidebar uses dark theme — override the forest tones in that scope */
[data-bs-theme="dark"] {
  --tblr-bg-surface:              #0f2a1c;
  --tblr-body-bg:                 #0f2a1c;
  --tblr-body-color:              #f3ead2;
  --tblr-secondary-color:         #cbc6a8;
  --tblr-border-color:            #15391f;
  --tblr-card-bg:                 #15391f;
}

/* Body typography — Claude Design uses Inter Tight */
body {
  font-family: "Inter Tight", "Inter", system-ui, -apple-system, sans-serif;
  background: var(--ivm-paper);
  color: var(--ivm-ink);
}

.font-monospace, .num, code {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

/* Cards — flat, no shadow, hairline border (Claude Design pattern) */
.card {
  box-shadow: none;
  border: 1px solid var(--ivm-rule);
  border-radius: 4px;
}
.card-header {
  background: var(--ivm-card-tint);
  border-bottom: 1px solid var(--ivm-rule);
  padding: 14px 22px;
  font-weight: 600;
  /* Tabler default is `display: flex` which makes h3 + p sit side-by-side.
     Stack vertically by default; opt-in to row layout with .d-flex.flex-row */
  flex-direction: column;
  align-items: stretch;
}
.card-header.d-flex {
  flex-direction: row;
  align-items: center;
}
.card-body { padding: 22px; }

/* ---------- Layout: full-width topbar above sidebar ---------- */
:root {
  --ivm-topbar-height: 56px;
  --ivm-sidebar-width: 244px;
}

.ivm-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1040;
  height: var(--ivm-topbar-height);
  background: var(--ivm-paper);
  border-bottom: 1px solid var(--ivm-rule);
  padding: 0 1rem;
}

@media (min-width: 992px) {
  .ivm-sidebar.navbar-vertical {
    position: fixed;
    top: var(--ivm-topbar-height);
    left: 0;
    bottom: 0;
    width: var(--ivm-sidebar-width);
    z-index: 1030;
    overflow-y: auto;
  }
  .page-wrapper {
    margin-left: var(--ivm-sidebar-width);
    padding-top: var(--ivm-topbar-height);
  }
}

@media (max-width: 991.98px) {
  .page-wrapper {
    padding-top: var(--ivm-topbar-height);
  }
  /* Sidebar slides in from the left as an overlay */
  .ivm-sidebar.navbar-vertical {
    position: fixed;
    top: var(--ivm-topbar-height);
    bottom: 0;
    left: 0;
    width: var(--ivm-sidebar-width);
    z-index: 1035;
    overflow-y: auto;
    background: var(--ivm-forest);
  }
  .ivm-sidebar.navbar-vertical .navbar-collapse {
    display: block;
  }
  /* Hidden by default on mobile — show only when collapse is .show */
  .ivm-sidebar.navbar-vertical .navbar-collapse:not(.show) {
    display: none;
  }
  /* When collapsed, hide the whole sidebar so it doesn't block clicks */
  .ivm-sidebar.navbar-vertical:not(:has(.navbar-collapse.show)) {
    transform: translateX(-100%);
    transition: transform 0.25s ease;
  }
  .ivm-sidebar.navbar-vertical:has(.navbar-collapse.show) {
    transform: translateX(0);
    transition: transform 0.25s ease;
  }
}

/* Sidebar active item — gold left rule (Claude Design hallmark) */
.navbar-vertical .nav-item .nav-link.active,
.navbar-vertical .nav-item.active > .nav-link {
  background: rgba(200, 162, 91, 0.08);
  border-left: 2px solid var(--ivm-gold);
  color: var(--ivm-cream);
}

/* Sidebar brand — cream text */
.navbar-vertical .navbar-brand a {
  color: var(--ivm-cream) !important;
}
.navbar-vertical .navbar-brand strong {
  color: var(--ivm-gold);
}

/* Section dividers in sidebar — uppercase eyebrow with top rule */
.navbar-vertical .nav-section {
  list-style: none;
  margin: 0;
  padding: 0;
}
.navbar-vertical .nav-section-title {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ivm-gold);
  margin: 18px 0 6px 0;
  padding: 8px 22px 6px 22px;
  border-top: 1px solid rgba(200, 162, 91, 0.18);
}
/* No top border for the very first section, and tight top margin */
.navbar-vertical .navbar-nav > .nav-section:first-child .nav-section-title {
  border-top: none;
  margin-top: 0;
}

/* Sidebar inner padding — kill Tabler's default container-fluid padding
   that reserved space for a brand we removed */
.navbar-vertical .container-fluid {
  padding: 0;
  align-items: flex-start !important;
}
.navbar-vertical .navbar-collapse {
  padding: 0;
  align-items: flex-start !important;  /* Tabler defaults to center; we want top */
  align-self: stretch;
}
.navbar-vertical .navbar-nav {
  margin: 0;
  padding: 8px 0;
  width: 100%;
  flex-direction: column;
}
/* The aside itself should stack contents from top */
.navbar-vertical {
  align-items: stretch !important;
  justify-content: flex-start !important;
}

/* Dropdown chevron on collapsible nav items */
.navbar-vertical .nav-link[data-bs-toggle="collapse"] {
  position: relative;
  padding-right: 32px;
}
.navbar-vertical .nav-link[data-bs-toggle="collapse"]::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 0 4px 6px;
  border-color: transparent transparent transparent currentColor;
  transform: translateY(-50%) rotate(0deg);
  transition: transform 0.2s ease;
  opacity: 0.7;
}
.navbar-vertical .nav-link[data-bs-toggle="collapse"][aria-expanded="true"]::after {
  transform: translateY(-50%) rotate(90deg);
  opacity: 1;
}

/* Submenu indent + softer styling — tighten spacing to remove dead space */
.navbar-vertical .nav-submenu {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.navbar-vertical .nav-submenu .nav-link {
  padding: 6px 22px 6px 38px;
  font-size: 13px;
}
.navbar-vertical .nav-submenu .nav-submenu .nav-link {
  padding: 6px 22px 6px 54px;
  font-size: 12.5px;
}

/* Kill Tabler's default extra padding on .collapse panels inside the sidebar */
.navbar-vertical .collapse,
.navbar-vertical .collapsing {
  padding: 0;
  margin: 0;
}
.navbar-vertical .collapse > .nav-submenu,
.navbar-vertical .collapsing > .nav-submenu {
  padding: 4px 0;
}

/* Tighten parent nav-link vertical padding so groups don't feel sparse */
.navbar-vertical .navbar-nav > .nav-item > .nav-link {
  padding-top: 8px;
  padding-bottom: 8px;
}

/* Page header */
.page-title {
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ivm-ink);
}

/* Status pills — Claude Design variants */
/* Light (low-saturation) badges: muted background, dark accent text */
.badge.bg-green-lt    { background: var(--ivm-accent-soft) !important; color: var(--ivm-accent) !important; }
.badge.bg-yellow-lt   { background: #f5eedd !important; color: #8a6a3b !important; }
.badge.bg-red-lt      { background: #f6e3d6 !important; color: var(--ivm-warn) !important; }
.badge.bg-blue-lt     { background: #e2e8f0 !important; color: var(--ivm-cool) !important; }

/* Dark / saturated badges: ensure cream text for contrast.
   Tabler doesn't pair foreground with bg-* utility classes by default,
   so without these the text inherits body ink (dark) and disappears.

   :not() exclusions skip badges that have already opted into a different
   contrast pairing — bg-opacity-* makes the background TRANSLUCENT (light)
   so cream-on-light is unreadable; text-dark / text-body explicitly
   request dark text. Respect those signals. */
.badge.bg-primary:not(.bg-opacity-10):not(.bg-opacity-25):not(.bg-opacity-50):not(.text-dark):not(.text-body):not(.text-body-emphasis),
.badge.bg-secondary:not(.bg-opacity-10):not(.bg-opacity-25):not(.bg-opacity-50):not(.text-dark):not(.text-body):not(.text-body-emphasis),
.badge.bg-success:not(.bg-opacity-10):not(.bg-opacity-25):not(.bg-opacity-50):not(.text-dark):not(.text-body):not(.text-body-emphasis),
.badge.bg-danger:not(.bg-opacity-10):not(.bg-opacity-25):not(.bg-opacity-50):not(.text-dark):not(.text-body):not(.text-body-emphasis),
.badge.bg-warning:not(.bg-opacity-10):not(.bg-opacity-25):not(.bg-opacity-50):not(.text-dark):not(.text-body):not(.text-body-emphasis),
.badge.bg-info:not(.bg-opacity-10):not(.bg-opacity-25):not(.bg-opacity-50):not(.text-dark):not(.text-body):not(.text-body-emphasis),
.badge.bg-dark:not(.bg-opacity-10):not(.bg-opacity-25):not(.bg-opacity-50):not(.text-dark):not(.text-body):not(.text-body-emphasis),
.badge.bg-green:not(.bg-opacity-10):not(.bg-opacity-25):not(.bg-opacity-50):not(.text-dark):not(.text-body):not(.text-body-emphasis),
.badge.bg-red:not(.bg-opacity-10):not(.bg-opacity-25):not(.bg-opacity-50):not(.text-dark):not(.text-body):not(.text-body-emphasis),
.badge.bg-blue:not(.bg-opacity-10):not(.bg-opacity-25):not(.bg-opacity-50):not(.text-dark):not(.text-body):not(.text-body-emphasis),
.badge.bg-azure:not(.bg-opacity-10):not(.bg-opacity-25):not(.bg-opacity-50):not(.text-dark):not(.text-body):not(.text-body-emphasis),
.badge.bg-yellow:not(.bg-opacity-10):not(.bg-opacity-25):not(.bg-opacity-50):not(.text-dark):not(.text-body):not(.text-body-emphasis),
.badge.bg-orange:not(.bg-opacity-10):not(.bg-opacity-25):not(.bg-opacity-50):not(.text-dark):not(.text-body):not(.text-body-emphasis),
.badge.bg-purple:not(.bg-opacity-10):not(.bg-opacity-25):not(.bg-opacity-50):not(.text-dark):not(.text-body):not(.text-body-emphasis),
.badge.bg-indigo:not(.bg-opacity-10):not(.bg-opacity-25):not(.bg-opacity-50):not(.text-dark):not(.text-body):not(.text-body-emphasis),
.badge.bg-cyan:not(.bg-opacity-10):not(.bg-opacity-25):not(.bg-opacity-50):not(.text-dark):not(.text-body):not(.text-body-emphasis),
.badge.bg-teal:not(.bg-opacity-10):not(.bg-opacity-25):not(.bg-opacity-50):not(.text-dark):not(.text-body):not(.text-body-emphasis),
.badge.bg-pink:not(.bg-opacity-10):not(.bg-opacity-25):not(.bg-opacity-50):not(.text-dark):not(.text-body):not(.text-body-emphasis) {
  color: var(--ivm-cream) !important;
}

/* Same fix for alerts that use bg-* utilities */
.alert.bg-primary,
.alert.bg-green,
.alert.bg-red,
.alert.bg-azure {
  color: var(--ivm-cream);
}

/* Card headers with dark/saturated bg-* utilities. Templates often use
   `<div class="card-header bg-primary text-white">` — but my override of
   --tblr-card-color (used as the default text color inside cards) was
   beating .text-white in some cases. Force cream on the dark backgrounds
   for the header AND any direct children (h5/h6/spans/icons inherit). */
.card-header.bg-primary,
.card-header.bg-secondary,
.card-header.bg-success,
.card-header.bg-danger,
.card-header.bg-warning,
.card-header.bg-info,
.card-header.bg-dark,
.card-header.bg-green,
.card-header.bg-red,
.card-header.bg-blue,
.card-header.bg-azure,
.card-header.bg-yellow,
.card-header.bg-orange,
.card-header.bg-purple,
.card-header.bg-indigo,
.card-header.bg-cyan,
.card-header.bg-teal,
.card-header.bg-pink,
.card-header.bg-primary *,
.card-header.bg-secondary *,
.card-header.bg-success *,
.card-header.bg-danger *,
.card-header.bg-warning *,
.card-header.bg-info *,
.card-header.bg-dark *,
.card-header.bg-green *,
.card-header.bg-red *,
.card-header.bg-blue *,
.card-header.bg-azure *,
.card-header.bg-yellow *,
.card-header.bg-orange *,
.card-header.bg-purple *,
.card-header.bg-indigo *,
.card-header.bg-cyan *,
.card-header.bg-teal *,
.card-header.bg-pink * {
  color: var(--ivm-cream) !important;
}

/* Buttons — keep Bootstrap classes, retint to forest */
.btn-primary {
  background: var(--ivm-accent);
  border-color: var(--ivm-accent);
  color: var(--ivm-cream);
}
.btn-primary:hover {
  background: var(--ivm-forest-2);
  border-color: var(--ivm-forest-2);
  color: var(--ivm-cream);
}
.btn-outline-primary {
  color: var(--ivm-accent);
  border-color: var(--ivm-accent);
}
.btn-outline-primary:hover {
  background: var(--ivm-accent);
  border-color: var(--ivm-accent);
  color: var(--ivm-cream);
}

/* Table chrome — Claude Design table treatment */
.table thead th {
  background: var(--ivm-card-tint);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ivm-ink-3);
  border-bottom: 1px solid var(--ivm-rule);
}
.table tbody td {
  font-size: 13.5px;
  border-bottom: 1px solid var(--ivm-rule-soft);
}

/* Big numbers in stat cards — tabular nums */
.h1, .h2, .display-1, .display-2 {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* Top header bar — slightly tinted, hairline border */
.page > header.navbar {
  background: var(--ivm-paper);
  border-bottom: 1px solid var(--ivm-rule);
}

/* Subheader (eyebrow) */
.subheader {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ivm-ink-4);
  font-size: 11px;
  font-weight: 500;
}

/* Avatar in topbar — soft accent ring */
.avatar.bg-primary {
  background: var(--ivm-accent) !important;
  color: var(--ivm-cream) !important;
}

/* Progress bars — retint */
.progress-bar.bg-primary { background: var(--ivm-accent) !important; }
.progress-bar.bg-green   { background: var(--ivm-accent) !important; }
.progress-bar.bg-azure   { background: var(--ivm-cool) !important; }
.progress-bar.bg-red     { background: var(--ivm-warn) !important; }

/* Status dots — adjust to palette */
.status-dot.bg-red    { background: var(--ivm-warn) !important; }
.status-dot.bg-yellow { background: var(--ivm-gold) !important; }
.status-dot.bg-azure  { background: var(--ivm-cool) !important; }

/* Alerts — subtle */
.alert-info {
  background: var(--ivm-accent-tint);
  color: var(--ivm-ink-2);
  border-color: var(--ivm-rule);
}

/* ---------- FullCalendar button + icon contrast ---------- */
/* FullCalendar's prev/next/today/view buttons inherit text color via the
   --fc-button-text-color CSS variable, which I wasn't setting — so the
   chevrons fell back to the page's --tblr-body-color (dark ink) and were
   invisible against FC's dark button background.

   Set FC's own CSS variables to forest+cream so every element FC styles
   (buttons, today highlight, event chips) automatically picks them up. */
:root {
  --fc-button-text-color: #f3ead2;            /* cream */
  --fc-button-bg-color: #1f5c3d;              /* forest accent */
  --fc-button-border-color: #1f5c3d;
  --fc-button-hover-bg-color: #15391f;        /* forest-2 */
  --fc-button-hover-border-color: #15391f;
  --fc-button-active-bg-color: #15391f;
  --fc-button-active-border-color: #15391f;
  --fc-today-bg-color: rgba(200, 162, 91, 0.10);  /* gold tint */
  --fc-event-bg-color: #1f5c3d;
  --fc-event-border-color: #1f5c3d;
  --fc-event-text-color: #f3ead2;
  --fc-page-bg-color: #fbfaf5;
  --fc-border-color: #e6e4dc;
  --fc-neutral-bg-color: #f4f2ec;
  --fc-list-event-hover-bg-color: rgba(200, 162, 91, 0.08);
}

/* Belt-and-suspenders: even if FC's CSS gets re-loaded after ours and
   resets the vars, force the styling directly on the buttons + icons
   without requiring a .fc ancestor (selector .fc was too restrictive
   when FC mounts on isolated containers). */
.fc-button-primary,
.fc-button.fc-button-primary,
.fc-button-primary:disabled {
  background-color: #1f5c3d !important;
  border-color: #1f5c3d !important;
  color: #f3ead2 !important;
}
.fc-button-primary:hover,
.fc-button-primary:focus,
.fc-button-primary:active,
.fc-button-primary.fc-button-active,
.fc-button-primary:not(:disabled).fc-button-active,
.fc-button-primary:not(:disabled):active {
  background-color: #15391f !important;
  border-color: #15391f !important;
  color: #f3ead2 !important;
  box-shadow: none;
}
.fc-button-primary:focus {
  box-shadow: 0 0 0 2px rgba(31, 92, 61, 0.25) !important;
}

/* Chevron icons inside FC buttons.

   FullCalendar uses a custom "fcicons" font for chevrons (::before with
   a private-use Unicode codepoint like \e900). When that font fails to
   load (which it does on our setup), the chevron just renders as an
   invisible empty glyph. Override with plain Unicode arrow characters
   that work in any font, plus white color so they're clearly visible
   on the forest button background. */
.fc-button .fc-icon,
.fc-button-primary .fc-icon,
.fc-icon {
  color: #ffffff !important;
  font-family: "Inter Tight", system-ui, sans-serif !important;
  font-size: 1.2em !important;
  line-height: 1 !important;
  font-weight: bold !important;
}
.fc-icon-chevron-left::before  { content: "‹" !important; }
.fc-icon-chevron-right::before { content: "›" !important; }
.fc-icon-chevron-up::before    { content: "˄" !important; }
.fc-icon-chevron-down::before  { content: "˅" !important; }
.fc-icon-chevrons-left::before  { content: "«" !important; }
.fc-icon-chevrons-right::before { content: "»" !important; }
.fc-icon-x::before { content: "×" !important; }

/* Bootstrap .btn-close inside a dark-bg .badge — the SVG X is hard to
   see at the default size + filter combo. Replace with a visible × glyph
   sized at 1em so it's tappable. Specifically targets badges that wrap
   a close button (e.g. plant tag chips on network properties). */
.badge .btn-close,
.badge .btn-close-white {
  background-image: none !important;
  filter: none !important;
  width: auto;
  height: auto;
  padding: 0 4px;
  margin-left: 6px;
  font-size: 1.1em !important;
  line-height: 1;
  color: var(--ivm-cream);
  opacity: 1;
}
.badge .btn-close::before,
.badge .btn-close-white::before {
  content: "×";
  font-weight: bold;
}
.badge .btn-close:hover,
.badge .btn-close-white:hover {
  color: #ffffff;
  opacity: 1;
}

/* Table header rows — ensure readable contrast regardless of utility class.
   Bootstrap .table-light, .table-dark, etc. set CSS vars for bg/color.
   With our --tblr-secondary-color override (mid grey), some headers ended
   up dark grey background with mid-grey text — illegible. Force explicit
   cream-tint background with ink-2 text on all table headers, then keep
   the eyebrow styling I had before. */
.table > thead,
.table > thead th,
.table > thead.table-light,
.table > thead.table-light th,
.table > thead.table-secondary,
.table > thead.table-secondary th {
  background-color: var(--ivm-card-tint) !important;
  color: var(--ivm-ink-2) !important;
  --bs-table-bg: var(--ivm-card-tint);
  --bs-table-color: var(--ivm-ink-2);
}
.table > thead th {
  font-weight: 600;  /* bump from 500 — readability over eyebrow style */
}
.table > thead th small,
.table > thead th .text-muted {
  color: var(--ivm-ink-3) !important;
  font-weight: 400;
}

/* ---------- Brand logo (root mark) ----------
   Source artwork is the green-root-on-forest square (invitromanager-root.png).
   The .ivm-logo-mark renders the square fit inside a circular badge. The
   badge background matches the artwork's own dark background so the round
   edge reads as part of the mark. */
.ivm-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ivm-ink);
  text-decoration: none;
  --ivm-logo-size: 42px;
}

.ivm-logo-mark {
  width: var(--ivm-logo-size);
  height: var(--ivm-logo-size);
  border-radius: 999px;
  background: var(--ivm-forest) url("../img/brand/invitromanager-root.337c3a6db0d9.png") center 40% / 202% no-repeat;
  display: inline-block;
  flex: 0 0 auto;
  overflow: hidden;
}

.ivm-logo-wordmark {
  font-weight: 760;
  font-size: 24px;
  line-height: 1;
  letter-spacing: -0.035em;
}

.ivm-logo-wordmark span:last-child {
  color: var(--ivm-ink-3);
  font-weight: 620;
}

/* On-dark / dark-theme variants only change the wordmark color — the
   mark itself already reads correctly on any surface because the artwork
   carries its own forest background. */
.ivm-logo--on-dark { color: var(--ivm-cream); }
.ivm-logo--on-dark .ivm-logo-wordmark span:last-child { color: rgba(243, 234, 210, 0.7); }

[data-bs-theme="dark"] .ivm-logo { color: var(--ivm-cream); }
[data-bs-theme="dark"] .ivm-logo-wordmark span:last-child { color: rgba(243, 234, 210, 0.7); }

/* ============================================================
   A/B lot-compare chart accents (from design handoff). The
   experiment_lot_compare.html template references these
   variables; without them, it falls back to the hardcoded
   defaults inside the template.
   ============================================================ */
:root {
  --ivm-accent-a:        #2c6ea3;
  --ivm-accent-a-fill:   rgba(44, 110, 163, 0.30);
  --ivm-accent-b:        #b87333;
  --ivm-accent-b-fill:   rgba(184, 115, 51, 0.32);
  --ivm-photo-well:      #1a2420;
}