/* RIC design system -- BGO Tool
 *
 * daisyUI 4 is loaded from CDN as a prebuilt stylesheet, so there is no
 * tailwind.config plugin block to declare a theme in. A theme is just a set of
 * CSS custom properties, though, so we can declare one here instead.
 *
 * Two things to know before editing:
 *
 *   * daisyUI 4 variables are OKLCH COMPONENT TRIPLES -- "L C H", no commas and
 *     no oklch() wrapper. daisyUI wraps them itself as oklch(var(--p)/<alpha>).
 *     A hex or hsl() value here silently breaks every component that uses it.
 *   * `ric-bgo` is a name daisyUI has never heard of, so it inherits NOTHING.
 *     Every variable daisyUI reads has to be present in this block. Deleting
 *     one does not fall back to a default; it produces an invalid colour.
 *
 * The sibling RIC Dev Tool carries a near-identical file. The shared tokens are
 * meant to stay in sync; --s and --sc are the deliberate difference, and are
 * the only reason the two apps look distinguishable.
 */

[data-theme="ric-bgo"] {
  color-scheme: light;

  /* Brand -------------------------------------------------------------- */
  /* RIC orange, darkened from the logo's #F26722 until white text on it
     clears 4.5:1. The logo keeps the brighter original; buttons do not. */
  --p: 60.4% 0.176 42;
  --pc: 100% 0 0;

  /* App identity. Emerald-teal for BGO, indigo in the Dev Tool. Held away
     from --su (green) so the header rail never reads as a "solved" signal. */
  --s: 58% 0.1 190;
  --sc: 100% 0 0;

  /* Accent is used sparingly -- quiet tinted fills, not actions. */
  --a: 96% 0.012 190;
  --ac: 38% 0.06 190;

  /* Neutral: dark surfaces (log panel, footer). */
  --n: 26% 0.015 250;
  --nc: 98% 0 0;

  /* Surfaces ----------------------------------------------------------- */
  --b1: 100% 0 0; /* cards */
  --b2: 98.2% 0.002 250; /* page background */
  --b3: 93.5% 0.005 250; /* hairlines, subtle fills */
  --bc: 25% 0.02 255; /* body text */

  /* Status ------------------------------------------------------------- */
  --in: 60% 0.13 250; /* Ready  */
  --inc: 100% 0 0;
  --su: 62% 0.14 155; /* Solved */
  --suc: 100% 0 0;
  --wa: 76% 0.15 75; /* Busy / Queue */
  --wac: 26% 0.05 75;
  --er: 58% 0.19 25; /* Error  */
  --erc: 100% 0 0;

  /* Shape -------------------------------------------------------------- */
  --rounded-box: 0.75rem;
  --rounded-btn: 0.5rem;
  --rounded-badge: 0.375rem;
  --animation-btn: 0.2s;
  --animation-input: 0.2s;
  --btn-focus-scale: 0.98;
  --border-btn: 1px;
  --tab-border: 1px;
  --tab-radius: 0.5rem;
}

/* ---------------------------------------------------------------------- *
 * Primitives
 *
 * Everything below is app-level, not daisyUI. Kept deliberately small --
 * anything expressible as Tailwind utilities belongs in the component, not
 * here. These exist because they are either impossible in utilities (focus
 * ring on a pseudo-class across every control) or repeated often enough that
 * a class earns its place.
 * ---------------------------------------------------------------------- */

html,
body {
  background-color: oklch(var(--b2));
  color: oklch(var(--bc));
  font-family:
    ui-sans-serif,
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* One focus treatment for the whole app. :focus-visible rather than :focus so
   pointer users do not get a ring on every click, keyboard users always do. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid oklch(var(--p));
  outline-offset: 2px;
  border-radius: var(--rounded-btn);
}

/* Card surface. `.surface` is the resting state; add `.surface-hover` for rows
   that are interactive. No resting shadow anywhere in the app -- depth comes
   from the hairline, which is what keeps dense lists calm. */
.surface {
  background-color: oklch(var(--b1));
  border: 1px solid oklch(var(--b3));
  border-radius: var(--rounded-box);
}

.surface-hover {
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.surface-hover:hover {
  border-color: oklch(var(--bc) / 0.18);
  box-shadow:
    0 1px 2px oklch(var(--bc) / 0.04),
    0 4px 12px oklch(var(--bc) / 0.06);
}

/* The 3px status rail down the left edge of a job card. Set --rail to a status
   colour; it is the only per-status styling a card needs. */
.rail {
  position: relative;
  overflow: hidden;
}

.rail::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background-color: var(--rail, oklch(var(--b3)));
}

/* Live solver output. Dark on purpose: it is machine output, and separating it
   from the surrounding chrome is what makes it scannable. */
.log-panel {
  background-color: oklch(var(--n));
  color: oklch(var(--nc) / 0.92);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    monospace;
  font-size: 0.8125rem;
  line-height: 1.55;
  border-radius: var(--rounded-btn);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: oklch(var(--nc) / 0.25) transparent;
}

.log-panel::-webkit-scrollbar {
  width: 10px;
}

.log-panel::-webkit-scrollbar-thumb {
  background-color: oklch(var(--nc) / 0.22);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}

/* Page scrollbar, so the app does not switch chrome styles between the log
   panel and everything else. */
* {
  scrollbar-width: thin;
  scrollbar-color: oklch(var(--bc) / 0.2) transparent;
}

/* daisyUI styles the file picker's button with --n, so it renders as a solid
   near-black slab. On the upload panel that out-weighs the only real call to
   action on the page. */
.file-input::file-selector-button {
  background-color: oklch(var(--b3));
  color: oklch(var(--bc));
  border: none;
  font-weight: 500;
  text-transform: none;
}

.file-input::file-selector-button:hover {
  background-color: oklch(var(--bc) / 0.14);
}

/* daisyUI renders tooltips via a ::before/::after pair with a fairly loud
   background. Toned down to match the rest of the chrome. */
.tooltip::before {
  background-color: oklch(var(--n));
  color: oklch(var(--nc));
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: var(--rounded-btn);
  padding: 0.25rem 0.5rem;
}

.tooltip::after {
  --tooltip-color: oklch(var(--n));
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}