/*
  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:       #2F6B4F;
  --ivm-accent-soft:  #e7f1ea;
  --ivm-accent-tint:  #eef3ef;
  --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:                 #2F6B4F;
  --tblr-primary-rgb:             47, 107, 79;
  --tblr-primary-fg:              #ffffff;
  --tblr-primary-darken:          #15391f;
  --tblr-primary-lt:              #e7f1ea;

  /* 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 — hub look: softer corners (Phase 2) */
  --tblr-border-radius:           6px;
  --tblr-border-radius-sm:        4px;
  --tblr-border-radius-lg:        10px;
}

/* 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 — soft depth + rounded corners (hub look, Phase 2) */
.card {
  box-shadow: 0 1px 2px rgba(20, 40, 28, .05);
  border: 1px solid var(--ivm-rule);
  border-radius: 10px;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.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;
}

/* Segmented two-option control. Used by the topbar site-language toggle
   (superuser, desktop only — EN | ES) and by the planning week-label toggle
   (ISO week | week-start date). One definition, so a second toggle cannot
   drift away from the first visually. */
.ivm-lang-toggle,
.ivm-segmented {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--ivm-rule);
  border-radius: 5px;
  overflow: hidden;
  background: var(--ivm-card);
}

.ivm-lang-opt,
.ivm-segmented-opt {
  padding: 0.2rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.5;
  color: var(--ivm-ink-3);
  text-decoration: none;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.ivm-lang-opt + .ivm-lang-opt,
.ivm-segmented-opt + .ivm-segmented-opt {
  border-left: 1px solid var(--ivm-rule);
}

.ivm-lang-opt:hover,
.ivm-segmented-opt:hover {
  background: var(--ivm-accent-tint);
  color: var(--ivm-ink);
}

.ivm-lang-opt.is-active,
.ivm-segmented-opt.is-active {
  background: var(--ivm-accent);
  color: #fff;
}

/* ---------- Sidebar ----------
   Default: pinned open at >= 992px, with .page-wrapper indented by its width.
   Below 992px it is an off-canvas overlay that the logo mark opens.

   A page can opt into the overlay at EVERY width by putting
   `ivm-sidebar-overlay` on <body> via the `body_class` block in base.html.
   The assignment board does exactly that: it is full-bleed and wants the whole
   viewport, and on a small laptop a pinned sidebar costs it 244px it needs.

   The overlay rules carry `!important` on `display` because Tabler forces the
   panel open above 992px with
   `.navbar-expand-lg .navbar-collapse { display: flex !important }`. Everything
   else wins on source order (ivm-theme.css loads after Tabler at equal
   specificity). The <aside> keeps `navbar-expand-lg` because Tabler's
   vertical-nav styling hangs off it — only the forced visibility is overridden. */
.page-wrapper {
  margin-left: 0;
  padding-top: var(--ivm-topbar-height);
}

.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);
}

/* The page indent at >= 992px. Tabler already indents ANY sibling of a
   vertical navbar with
   `.navbar-expand-lg.navbar-vertical ~ .page-wrapper { margin-left: 15rem }`
   — specificity (0,3,0), so the plain `.page-wrapper { margin-left: 0 }` above
   never wins and cannot be relied on to clear it. Both cases below therefore
   restate the margin at higher specificity rather than assuming a zero base:

     pinned  -> our 244px, not Tabler's 240px
     overlay -> 0, because the sidebar is over the page, not beside it

   The `:has(.ivm-sidebar)` gate on the pinned case matters because HOOD_TECH
   and anonymous pages render no <aside> at all; Tabler's sibling selector
   already misses them, and we must not add an indent against nothing. */
@media (min-width: 992px) {
  body:not(.ivm-sidebar-overlay):has(.ivm-sidebar) .page-wrapper {
    margin-left: var(--ivm-sidebar-width);
  }
  body.ivm-sidebar-overlay .ivm-sidebar.navbar-vertical ~ .page-wrapper {
    margin-left: 0;
  }
  body:not(.ivm-sidebar-overlay) .ivm-sidebar.navbar-vertical {
    z-index: 1030;
  }
}

/* Off-canvas overlay — below 992px on every page. */
@media (max-width: 991.98px) {
  .ivm-sidebar.navbar-vertical .navbar-collapse {
    display: block !important;
  }
  .ivm-sidebar.navbar-vertical .navbar-collapse:not(.show) {
    display: none !important;
  }
  .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;
  }
}

/* Off-canvas overlay at EVERY width — opted-in pages only. */
body.ivm-sidebar-overlay .ivm-sidebar.navbar-vertical .navbar-collapse {
  display: block !important;
}
body.ivm-sidebar-overlay .ivm-sidebar.navbar-vertical .navbar-collapse:not(.show) {
  display: none !important;
}
body.ivm-sidebar-overlay .ivm-sidebar.navbar-vertical:not(:has(.navbar-collapse.show)) {
  transform: translateX(-100%);
  transition: transform 0.25s ease;
}
body.ivm-sidebar-overlay .ivm-sidebar.navbar-vertical:has(.navbar-collapse.show) {
  transform: translateX(0);
  transition: transform 0.25s ease;
}

/* On an overlay page the mark owns the toggle at every width, so the desktop
   wordmark link steps aside rather than sitting next to a second logo. */
body.ivm-sidebar-overlay .ivm-brand-full {
  display: none !important;
}
body.ivm-sidebar-overlay .ivm-brand-toggle {
  display: flex !important;
}

/* 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: #2F6B4F;              /* forest accent */
  --fc-button-border-color: #2F6B4F;
  --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: #2F6B4F;
  --fc-event-border-color: #2F6B4F;
  --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: #2F6B4F !important;
  border-color: #2F6B4F !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(47, 107, 79, 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;
}