/* EUTROPY — marine overlay on the shinyswatch `superhero` base.
   Tokens are defined for the default (dark) look and overridden under
   :root[data-theme="light"] by the navbar toggle. Component styling (cards,
   value boxes, sidebar, brand) is expressed through the tokens so both themes
   stay consistent. Palette echoes the migration decision-report artifact. */

:root {
  --eu-accent: #2bb3a3;          /* marine teal (bright, for dark ground) */
  --eu-accent-2: #7fd8c7;        /* lighter teal */
  --eu-gold: #e4b23c;            /* diatom gold — one accent, used sparingly */
  --eu-surface: #24405a;         /* card surface on the dark navy base */
  --eu-surface-2: #1c3247;       /* sidebar / insets */
  --eu-ink: #eaf1f4;
  --eu-ink-soft: #9fb4c4;
  --eu-line: #365068;
}

:root[data-theme="light"] {
  --eu-accent: #0f766e;
  --eu-accent-2: #12908a;
  --eu-gold: #9a6a16;
  --eu-surface: #ffffff;
  --eu-surface-2: #eef3f2;
  --eu-ink: #12292c;
  --eu-ink-soft: #4c6265;
  --eu-line: #d7e3e0;
  /* Drive Bootstrap/bslib components to a light scheme — superhero is a dark
     theme, so without these its light-on-dark text leaks onto our light
     surfaces (unreadable sidebar/labels/table). */
  --bs-body-bg: #e9eff0;
  --bs-body-color: #12292c;
  --bs-emphasis-color: #12292c;
  --bs-secondary-color: #4c6265;
  --bs-tertiary-color: #4c6265;
  --bs-secondary-bg: #dbe6e3;
  --bs-tertiary-bg: #eef3f2;
  --bs-border-color: #d7e3e0;
  --bs-heading-color: #12292c;
  --bs-link-color: #0f766e;
  --bs-link-hover-color: #0b5c56;
}
:root[data-theme="light"] body { background: var(--bs-body-bg) !important; color: var(--eu-ink); }

/* Belt-and-braces: force dark text where superhero's defaults still leak in. */
:root[data-theme="light"] .card,
:root[data-theme="light"] .card-body,
:root[data-theme="light"] .bslib-sidebar-layout > .sidebar,
:root[data-theme="light"] .bslib-sidebar-layout > .sidebar .sidebar-title,
:root[data-theme="light"] label,
:root[data-theme="light"] .control-label,
:root[data-theme="light"] .shiny-input-container,
:root[data-theme="light"] table,
:root[data-theme="light"] .shiny-html-output { color: var(--eu-ink) !important; }
:root[data-theme="light"] .bslib-value-box .value-box-title,
:root[data-theme="light"] table thead { color: var(--eu-ink-soft) !important; }

/* Form controls: light field, dark text (superhero styles them dark). */
:root[data-theme="light"] .form-select,
:root[data-theme="light"] .form-control,
:root[data-theme="light"] .selectize-input,
:root[data-theme="light"] .selectize-input input {
  background-color: #fff !important; color: var(--eu-ink) !important;
  border-color: var(--eu-line) !important;
}
:root[data-theme="light"] .selectize-dropdown {
  background-color: #fff !important; color: var(--eu-ink) !important;
}

/* Navbar: lighten to match, with a hairline rule (keeps the brand + toggle readable). */
:root[data-theme="light"] .navbar {
  background-color: #ffffff !important;
  border-bottom: 1px solid var(--eu-line);
  --bs-navbar-color: #4c6265;
  --bs-navbar-hover-color: #0f766e;
  --bs-navbar-active-color: #12292c;
}
:root[data-theme="light"] .navbar-brand { color: var(--eu-ink) !important; }

/* ── brand in the navbar ─────────────────────────────────────── */
.navbar-brand {
  font-weight: 700; letter-spacing: .06em;
  display: inline-flex; align-items: center; gap: .5rem;
}
.navbar-brand::before {
  content: ""; width: 1.15rem; height: 1.15rem; border-radius: 5px;
  background: linear-gradient(135deg, var(--eu-accent), var(--eu-accent-2));
}
.eu-theme-toggle {
  cursor: pointer; background: none; border: 1px solid var(--eu-line);
  color: var(--eu-ink-soft); border-radius: 6px; padding: .2rem .6rem;
  font-size: .85rem;
}
.eu-theme-toggle:hover { color: var(--eu-accent); border-color: var(--eu-accent); }

/* Share-link (bookmark) button — override Bootstrap btn-default to match the
   theme toggle. */
.eu-share-btn {
  background: none !important; border: 1px solid var(--eu-line) !important;
  color: var(--eu-ink-soft) !important; border-radius: 6px !important;
  padding: .2rem .6rem !important; font-size: .85rem !important;
  font-weight: 500; box-shadow: none !important; margin-right: .4rem;
}
.eu-share-btn:hover {
  color: var(--eu-accent) !important; border-color: var(--eu-accent) !important;
}
.eu-share-btn .action-icon { margin-right: .3rem; }

/* ── cards ───────────────────────────────────────────────────── */
.card {
  background: var(--eu-surface) !important;
  border: 1px solid var(--eu-line) !important;
  border-top: 3px solid var(--eu-accent) !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.15), 0 8px 24px rgba(0,0,0,.08);
}
.card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--eu-line) !important;
  color: var(--eu-ink) !important;
  font-weight: 650; letter-spacing: .02em;
}
.card-header .eu-eyebrow {
  display: block; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--eu-accent); font-weight: 700;
}

/* ── value boxes (stat tiles) ────────────────────────────────── */
.bslib-value-box {
  border-left: 4px solid var(--eu-accent) !important;
  border-radius: 8px !important;
  background: var(--eu-surface-2) !important;
}
.bslib-value-box .value-box-title { color: var(--eu-ink-soft) !important;
  font-size: .72rem !important; letter-spacing: .08em; text-transform: uppercase; }
.bslib-value-box .value-box-value { color: var(--eu-ink) !important;
  font-variant-numeric: tabular-nums; }

/* ── sidebar ─────────────────────────────────────────────────── */
.bslib-sidebar-layout > .sidebar {
  background: var(--eu-surface-2) !important;
  border-right: 1px solid var(--eu-line) !important;
}

/* ── accents: primary buttons, headings, links ──────────────── */
.btn-primary {
  background: var(--eu-accent) !important; border-color: var(--eu-accent) !important;
  color: #04231f !important; font-weight: 600;
}
.btn-primary:hover { background: var(--eu-accent-2) !important; border-color: var(--eu-accent-2) !important; }
h1, h2, h3, h4 { color: var(--eu-ink); }
a { color: var(--eu-accent); }

/* run-progress bar fill picks up the accent */
.eu-bar-fill { background: var(--eu-accent) !important; }

/* server-rendered plot image scales to the card width */
.card .shiny-plot-output img { max-width: 100%; height: auto; }

/* vertical stack of cards on a page */
.eu-stack { display: flex; flex-direction: column; gap: 1rem; }
.eu-stack > .card { margin-bottom: 0; }