/* Branch Portal theme — Material Design 3 tonal palette, warm orange accent.
   Source tokens (--md-*) define the real palette; everything else (--background,
   --primary, --border, …) is a semantic alias so markup never references a raw
   hex or a --md-* name directly. Light-only by design — no dark variant, no
   toggle, and the OS prefers-color-scheme setting is intentionally ignored. */

:root {
  /* ---- MD3 light tokens -------------------------------------------- */
  --md-primary: #e65100;
  --md-on-primary: #ffffff;
  --md-primary-text: #b23c00;
  --md-primary-container: #ffdbc9;
  --md-on-primary-container: #351000;
  --md-secondary: #77574a;
  --md-on-secondary: #ffffff;
  --md-secondary-container: #ffdbcc;
  --md-on-secondary-container: #2c160c;
  --md-tertiary: #6a5f00;
  --md-on-tertiary: #ffffff;
  --md-tertiary-container: #f6e388;
  --md-on-tertiary-container: #201c00;
  --md-surface: #fbf9f8;
  --md-surface-container-lowest: #ffffff;
  --md-surface-container-low: #ffffff;
  --md-surface-container: #ffe7d6;
  --md-surface-container-high: #efeeec;
  --md-surface-container-highest: #e7e5e2;
  --md-on-surface: #6b7280;
  --md-on-surface-variant: #6b7280;
  --md-heading: #111827;
  --md-outline: #78716c;
  --md-outline-variant: #ece6e4;
  --md-inverse-surface: #382e2a;
  --md-inverse-on-surface: #ffede6;
  --md-inverse-primary: #ffb68f;
  --md-success: #2e7d32;
  --md-on-success: #ffffff;
  --md-success-container: #c8e6c9;
  --md-on-success-container: #0a3d10;
  --md-error: #ba1a1a;
  --md-on-error: #ffffff;
  --md-error-container: #ffdad6;
  --md-on-error-container: #410002;

  /* ---- Hover/active tones (precomputed — a CSS var can't be
     algebraically darkened by a utility class) --------------------- */
  --primary-hover: #c84500;
  --primary-active: #a83a00;
  --destructive-hover: #9b1313;
  --destructive-active: #7e0f0f;
  --success-hover: #276b2a;
  --warning-hover: #564c00;

  /* ---- Semantic aliases: every template references these, never a
     --md-* name or a hex, so theming stays a one-file change ------- */
  --background: var(--md-surface);
  --foreground: var(--md-on-surface);
  --heading: var(--md-heading);
  --card: var(--md-surface-container-low);
  --card-foreground: var(--md-on-surface);
  --popover: var(--md-surface-container-lowest);
  --popover-foreground: var(--md-on-surface);
  --primary: var(--md-primary);
  --primary-foreground: var(--md-on-primary);
  --primary-text: var(--md-primary-text);
  --primary-container: var(--md-primary-container);
  --primary-container-foreground: var(--md-on-primary-container);
  --secondary: var(--md-secondary-container);
  --secondary-foreground: var(--md-on-secondary-container);
  --muted: var(--md-surface-container);
  --muted-foreground: var(--md-on-surface-variant);
  --accent: var(--md-tertiary-container);
  --accent-foreground: var(--md-on-tertiary-container);
  --destructive: var(--md-error);
  --destructive-foreground: var(--md-on-error);
  --destructive-container: var(--md-error-container);
  --destructive-container-foreground: var(--md-on-error-container);
  --success: var(--md-success);
  --success-foreground: var(--md-on-success);
  --success-container: var(--md-success-container);
  --success-container-foreground: var(--md-on-success-container);
  --warning: var(--md-tertiary);
  --warning-foreground: var(--md-on-tertiary);
  --warning-container: var(--md-tertiary-container);
  --warning-container-foreground: var(--md-on-tertiary-container);
  --border: var(--md-outline-variant);
  --input: var(--md-outline-variant);
  --ring: var(--md-primary);
}

/* Dark theme removed — the portal always renders the light MD3 palette
   defined above, regardless of OS prefers-color-scheme or any stored
   per-browser choice (theme.js no longer exposes a toggle). */

html {
  background: var(--background);
}
body {
  background-color: var(--background);
  color: var(--foreground);
}
:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}
::selection {
  background: color-mix(in srgb, var(--primary) 25%, transparent);
}

/* Sidebar gets its own off-white surface, independent of --card (shared
   by every other white surface — header, tables, forms, modals). An id
   selector beats the aside's own bg-[var(--card)] utility class without
   needing !important. */
#sidebar {
  background-color: #fffdfc;
}

/* Sidebar active/hover — same mechanism as before (plain CSS, not Tailwind
   utilities, since the active state is computed in Go, not toggled client
   side), just repainted onto the theme tokens. */
.sidebar-link.active {
  background-color: var(--primary-container);
  color: var(--primary-text);
  font-weight: 600;
}
.sidebar-link:hover {
  background-color: var(--muted);
  color: var(--primary-text);
}
.sidebar-link.active:hover {
  background-color: color-mix(in srgb, var(--primary-container) 80%, var(--primary) 20%);
}

/* Scrollbars — orange-tinted thumb (light at rest, full primary on hover),
   matching the sidebar's light-then-strong active treatment. Track stays
   transparent so it never adds its own background strip. */
* {
  scrollbar-color: var(--primary-container) transparent;
  scrollbar-width: thin;
}
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background-color: var(--primary-container);
  border-radius: 9999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover {
  background-color: var(--primary);
}

/* Material-style tables: a table's wrapping card keeps its shadow but
   drops the boxed outline around it — elevation (the shadow) is what says
   "this is a surface", a border on top of that just doubles the edge.
   Row dividers are dropped too, in favour of the header's own rule plus
   the hover highlight, so a long table doesn't read as a ruled grid.
   :has() targets only wrappers that actually contain a table, so plain
   form/stat cards elsewhere keep their border. */
div:has(table) {
  border-color: transparent;
}
table tbody tr {
  /* Beats Tailwind's divide-y (an arbitrary-value selector too specific
     to out-rank cleanly from a separate stylesheet without replicating
     its exact escaped selector). */
  border-top: none !important;
}

/* Pill-shaped controls: buttons, the sidebar's nav pills, and dropdowns.
   Each already carries a Tailwind rounded-* class; qualifying the
   selector with its tag name raises specificity just enough to win
   without !important. */
button.rounded-lg,
button.rounded-xl,
button.rounded-2xl,
a.sidebar-link.rounded-lg,
select.rounded-lg {
  border-radius: 9999px;
}

/* Dropdowns: plain white fill with just the border carrying the shape
   (most already have no bg class and are white by default; this also
   catches any, like the header's language select, that were explicitly
   tinted). On focus/open they pick up the sidebar's own light-orange
   treatment — the closest thing to "dropdown selection" a native <select>
   lets a stylesheet control reliably; <option> background/color is
   included as a best-effort extra since not every engine honors it. */
select {
  background-color: #ffffff;
}
select.rounded-lg:focus,
select:focus {
  background-color: var(--primary-container);
  color: var(--primary-text);
  border-color: var(--primary);
  outline: none;
}
select option:checked,
select option:hover {
  background-color: var(--primary-container);
  color: var(--primary-text);
}

/* Checkboxes and radios: accent-color recolors the native check/dot (and
   its focus ring) without needing custom markup — supported in every
   current browser engine. Doesn't touch the custom toggle switches built
   from a hidden checkbox + styled <span>, which already use --primary. */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--primary);
}

/* Headings read black (via --heading), independent of --foreground —
   which every other piece of text (table cells, labels, body copy) uses
   and is now a light gray. Every h1/h2/h3 in these templates already
   carries text-[var(--foreground)]; qualifying the selector with that
   class raises specificity enough to win without !important, with the
   bare tag selector as a harmless fallback for any heading that doesn't. */
h1, h2, h3 {
  color: var(--heading);
}
h1.text-\[var\(--foreground\)\],
h2.text-\[var\(--foreground\)\],
h3.text-\[var\(--foreground\)\] {
  color: var(--heading);
}

/* Mouse highlight: every hover surface that tints its background with
   --muted (table rows, list items, secondary buttons/links) turns its
   text dark orange too, not just the background. The attribute selector
   catches every element carrying that exact Tailwind arbitrary-value
   class, descendants included (a row's text usually sits in a child
   <td>/<span>, not the hovered element itself) — !important is needed
   since those descendants often carry their own explicit text-color
   utility class that would otherwise win. */
[class*="hover:bg-[var(--muted)]"]:hover,
[class*="hover:bg-[var(--muted)]"]:hover * {
  color: var(--primary-text) !important;
}