/* ================================================================
   Fathom Works — RAG App CSS Bundle
   Self-contained: tokens + components + app utilities.
   Drop into static/fathom.css and link from base.html.
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=Spectral:wght@400;500;600;700&display=swap');

/* ============================================================
   Fathom Works — Color
   ------------------------------------------------------------
   The palette reads like a depth sounder at night: near-black
   navy "depths" stacked from abyss to surface, a single SONAR
   CYAN that does almost all the accenting, and a tight set of
   signal colors (buy/hold/sell) carried over from the console.

   Base tokens describe the raw color. Semantic aliases below
   describe the JOB — reach for those in components.
   ============================================================ */

:root {
  color-scheme: dark;

  /* ---- Depths: background stack, abyss → surface ---- */
  --depth-1000: #030d14;  /* logo navy — deepest, hero fields */
  --depth-900:  #060a0f;  /* abyss — inset wells, code, input bg */
  --depth-800:  #0b0f14;  /* hull — app background */
  --depth-700:  #07101a;  /* card — raised card on the app bg */
  --depth-600:  #0f141b;  /* panel — bordered panel surface */
  --depth-500:  #14202b;  /* shoal — hover / active fill */
  --depth-400:  #041a24;  /* logo ink — alt deep navy */

  /* ---- Lines & rules ---- */
  --line:        #1d2a36;  /* panel borders, table rules, dividers */
  --line-soft:   #0f1820;  /* dashed list separators */

  /* ---- Foam: text stack ---- */
  --foam-100: #eaf3fa;  /* brightest — display over deep navy */
  --foam-200: #d6e1ea;  /* body text */
  --foam-300: #cce8f4;  /* pale sonar tint — logo wordmark text */
  --foam-500: #6b7d8f;  /* dim — labels, metadata, captions */

  /* ---- Sonar: the one accent ---- */
  --sonar-bright: #8be1ef;  /* hover state of sonar */
  --sonar:        #6cd5e6;  /* primary accent — links, focus, active */
  --sonar-deep:   #00b4d8;  /* logo cyan — denser sonar, on light */
  --sonar-ink:    #04161b;  /* text/icon ON a filled sonar surface */
  --sonar-wash:   rgba(108, 213, 230, 0.08);  /* tinted active fill */

  /* ---- Signals: trading verdicts (uppercase by convention) ---- */
  --buy:    #2ecc71;
  --buy-2:  #7be38c;
  --buy-ink:#042714;
  --hold:   #f4c95d;
  --hold-ink:#2e2204;
  --sell:   #ff7c7c;
  --sell-ink:#2e0a0a;

  /* ---- Auxiliary accents (use sparingly) ---- */
  --signal-magenta: #d57bff;  /* trader / emphasis <strong> */
  --signal-amber:   #f0a040;  /* risk-aggressive */
  --signal-slate:   #7aabf0;  /* risk-conservative */

  /* ============================================================
     Semantic aliases — prefer these in components
     ============================================================ */

  /* Surfaces */
  --surface-app:      var(--depth-800);
  --surface-panel:    var(--depth-600);
  --surface-card:     var(--depth-700);
  --surface-well:     var(--depth-900);
  --surface-hover:    var(--depth-500);
  --surface-hero:     var(--depth-1000);

  /* Text */
  --text-display:   var(--foam-100);
  --text-body:      var(--foam-200);
  --text-muted:     var(--foam-500);
  --text-accent:    var(--sonar);
  --text-on-accent: var(--sonar-ink);

  /* Lines */
  --border:        var(--line);
  --border-accent: var(--sonar);
  --divider:       var(--line-soft);

  /* Interactive */
  --focus-ring:    var(--sonar);
  --link:          var(--sonar);
}

/* ============================================================
   Fathom Works — Typography
   ------------------------------------------------------------
   Monospace-first. The mono is the working voice (everything in
   the console is mono); the serif appears only for the wordmark
   and the occasional editorial display line. No sans-serif —
   keeping it to two families is part of the brand.
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', Menlo, Consolas, monospace;
  --font-serif: 'Spectral', Georgia, 'Times New Roman', serif;

  /* Aliases by job */
  --font-body:    var(--font-mono);  /* body & UI — mono */
  --font-data:    var(--font-mono);  /* numbers, tickers, code */
  --font-display: var(--font-serif); /* wordmark & editorial heads */

  /* ---- Type scale (px) — dense terminal rhythm ---- */
  --text-2xs: 10px;   /* chips, micro-labels */
  --text-xs:  11px;   /* uppercase labels, metadata */
  --text-sm:  12px;   /* secondary UI, table cells */
  --text-base:13px;   /* body — the console default */
  --text-md:  15px;   /* emphasis figures, totals */
  --text-lg:  18px;   /* prices, sub-heads */
  --text-xl:  23px;   /* wordmark, panel display */
  --text-2xl: 32px;   /* section heads */
  --text-3xl: 46px;   /* page display */
  --text-4xl: 64px;   /* hero serif */

  /* ---- Weights ---- */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;
  --weight-black:   800;

  /* ---- Line heights ---- */
  --leading-tight: 1.2;
  --leading-snug:  1.35;
  --leading-normal:1.5;   /* console body default */
  --leading-relaxed:1.6;

  /* ---- Letter-spacing ---- */
  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.5px;   /* uppercase UI labels */
  --tracking-wider:  0.6px;
  --tracking-widest: 6px;     /* the FATHOM wordmark */
}

/* ============================================================
   Fathom Works — Spacing, Radius, Shadow, Motion
   ------------------------------------------------------------
   Tight and instrument-like. The console packs information, so
   the spacing scale is small and the radii are barely-there
   (3–6px) — hardware corners, not pillows. Shadows are used
   almost never; depth comes from the navy stack + 1px borders.
   ============================================================ */

:root {
  /* ---- Spacing scale ---- */
  --space-0:  0;
  --space-1:  2px;
  --space-2:  4px;
  --space-3:  6px;
  --space-4:  8px;
  --space-5:  10px;
  --space-6:  12px;   /* default panel padding / grid gap */
  --space-8:  16px;
  --space-10: 22px;   /* panel top padding (clears the [ title ]) */
  --space-12: 28px;
  --space-16: 40px;
  --space-20: 56px;

  /* ---- Radius — hardware corners ---- */
  --radius-xs: 2px;   /* chips, badges, code spans */
  --radius-sm: 3px;   /* buttons, inputs, tabs */
  --radius-md: 4px;   /* panels, cards */
  --radius-lg: 6px;   /* dialogs, auth card */
  --radius-pill: 999px;

  /* ---- Borders ---- */
  --border-width: 1px;
  --border-dashed: 1px dashed var(--line);

  /* ---- Shadow — depth is rare; reserve for overlays ---- */
  --shadow-none: none;
  --shadow-dropdown: 0 6px 18px rgba(0, 0, 0, 0.5);
  --shadow-overlay:  0 12px 40px rgba(0, 0, 0, 0.6);
  --glow-sonar: 0 0 0 1px var(--sonar), 0 0 12px rgba(108, 213, 230, 0.25);

  /* ---- Motion — quick, mechanical, no bounce ---- */
  --ease: cubic-bezier(0.2, 0, 0.2, 1); /* @kind other */
  --dur-fast: 0.12s; /* @kind other */
  --dur:      0.2s; /* @kind other */
  --dur-slow: 0.3s; /* @kind other */

  /* ---- Layout ---- */
  --topbar-h: 41px;
  --sidebar-w: 260px;
  --content-max: 900px;
}

/* ============================================================
   Fathom Works — Themes (registers)
   ------------------------------------------------------------
   The brand runs in two registers on ONE palette:

   - default (:root)   → DARK "depths" / Terminal-Sonar.
     The working register: the console, tools, dashboards.

   - .theme-paper       → LIGHT "chart-paper" / Polished Paper.
     The outward register: the marketing site, decks, client-
     facing docs. Serif leads, lots of air, deep cyan accent.

   .theme-paper only REMAPS the semantic aliases, so every
   token-driven component (fc-*) reflows to light automatically.
   Apply it on <body> (whole page) or any wrapper (a section).
   ============================================================ */

.theme-paper {
  color-scheme: light;

  /* ---- Paper depths (light surface stack) ---- */
  --paper-mist:  #eef3f6;  /* page background */
  --paper-card:  #ffffff;  /* cards / panels */
  --paper-well:  #f5f8fa;  /* insets */
  --paper-line:  #e2eaef;  /* hairline borders */
  --ink-900:     #041a24;  /* logo ink — headlines */
  --ink-700:     #1f3b48;  /* strong body */
  --ink-500:     #3a5563;  /* body */
  --ink-300:     #6f8694;  /* muted / labels */

  /* ---- Surfaces ---- */
  --surface-app:   var(--paper-mist);
  --surface-panel: var(--paper-card);
  --surface-card:  var(--paper-card);
  --surface-well:  var(--paper-well);
  --surface-hover: #e7eff4;
  --surface-hero:  #ffffff;

  /* ---- Text ---- */
  --text-display:   var(--ink-900);
  --text-body:      var(--ink-500);
  --text-muted:     var(--ink-300);
  --text-accent:    var(--sonar-deep);
  --text-on-accent: #ffffff;

  /* ---- Lines ---- */
  --border:        var(--paper-line);
  --border-accent: var(--sonar-deep);
  --divider:       #eef2f5;

  /* ---- Accent: remap sonar to the DEEP cyan (contrast on light) ---- */
  --sonar:        #0077a8;
  --sonar-bright: #0a93cb;
  --sonar-ink:    #ffffff;
  --sonar-wash:   rgba(0, 119, 168, 0.08);
  --link:         #0077a8;

  /* ---- Signal inks tuned for light chips ---- */
  --buy:  #1f9d57;
  --hold: #c98a16;
  --sell: #d8504f;

  background: var(--surface-app);
  color: var(--text-body);
}

/* ---- Component nudges that only make sense on light ---- */
.theme-paper .fc-btn--ghost { border-color: var(--paper-line); color: var(--ink-700); }
.theme-paper .fc-btn--ghost:hover:not(:disabled) { border-color: var(--sonar); color: var(--sonar); }
.theme-paper .fc-panel__title { background: var(--surface-app); }
.theme-paper ::selection { background: var(--sonar-wash); color: var(--ink-900); }

/* ============================================================
   Fathom Works — Base layer
   ------------------------------------------------------------
   Element defaults that establish the terminal surface. Kept
   minimal so it composes cleanly into a consuming project.
   ============================================================ */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--surface-app);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

::selection { background: var(--sonar-wash); color: var(--foam-100); }

/* Custom scrollbars — thin, instrument-like */
* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--line); border-radius: var(--radius-pill); }
*::-webkit-scrollbar-track { background: transparent; }

/* ---- Brand wordmark helpers ------------------------------------
   Use .fathom-wordmark for the typeset FATHOM WORKS lockup
   when an SVG logo isn't appropriate. */
.fathom-wordmark {
  font-family: var(--font-serif);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  color: var(--foam-300);
  line-height: 1;
}
.fathom-wordmark .sub {
  display: block;
  font-weight: var(--weight-regular);
  font-size: 0.48em;
  letter-spacing: var(--tracking-widest);
  color: var(--sonar);
  margin-top: 0.35em;
}

/* ---- The signature [ bracket label ] ---------------------------
   The console wraps every panel title in brackets. This utility
   reproduces it for ad-hoc headers. */
.bracket-label::before { content: '[ '; }
.bracket-label::after  { content: ' ]'; }
.bracket-label {
  color: var(--sonar);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: lowercase;
}

/* ---- The $ shell prompt mark ----------------------------------- */
.prompt-mark { color: var(--buy-2); }

/* ============================================================
   Fathom Works — Component styles
   ------------------------------------------------------------
   Class-based styling for the React primitives, lifted from the
   TradingAgents console vocabulary. Shipped to consumers via
   styles.css, so the classes work with or without the bundle.
   Prefix: fc-
   ============================================================ */

/* ---- Button ------------------------------------------------ */
.fc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text-body);
  padding: 8px 14px;
  font-family: var(--font-mono);
  font-size: var(--text-base);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.fc-btn--primary {
  background: var(--sonar);
  color: var(--sonar-ink);
  border-color: var(--sonar);
  font-weight: var(--weight-semibold);
}
.fc-btn--primary:hover:not(:disabled) { background: var(--sonar-bright); border-color: var(--sonar-bright); }
.fc-btn--ghost:hover:not(:disabled)   { border-color: var(--hold); color: var(--hold); }
.fc-btn--danger { border-color: var(--sell); color: var(--sell); }
.fc-btn--danger:hover:not(:disabled)  { background: rgba(255,124,124,0.1); }
.fc-btn--sm { padding: 4px 10px; font-size: var(--text-xs); }
.fc-btn--lg { padding: 10px 18px; font-size: var(--text-md); }
.fc-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.fc-btn:focus-visible { outline: none; box-shadow: var(--glow-sonar); }

/* ---- Panel ------------------------------------------------- */
.fc-panel {
  position: relative;
  border: 1px solid var(--line);
  background: var(--surface-panel);
  border-radius: var(--radius-md);
  padding: var(--space-10) var(--space-6) var(--space-6);
}
.fc-panel--accent { border-color: var(--sonar); }
.fc-panel--glow { box-shadow: var(--glow-sonar); }
.fc-panel__title {
  position: absolute;
  top: -10px;
  left: 12px;
  background: var(--surface-app);
  padding: 0 6px;
  color: var(--sonar);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: lowercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ---- Signal badge ------------------------------------------ */
.fc-badge {
  display: inline-block;
  text-transform: uppercase;
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  background: var(--line);
  color: var(--text-body);
}
.fc-badge--lg { font-size: var(--text-lg); padding: 6px 14px; }
.fc-badge--BUY     { background: var(--buy);  color: var(--buy-ink); }
.fc-badge--SELL    { background: var(--sell); color: var(--sell-ink); }
.fc-badge--HOLD    { background: var(--hold); color: var(--hold-ink); }
.fc-badge--UNKNOWN { background: var(--line); color: var(--text-muted); }
.fc-badge--OPTION  { background: transparent; border: 1px solid var(--line); color: var(--text-muted); }

/* ---- Conviction badge -------------------------------------- */
.fc-conviction {
  display: inline-block;
  font-weight: var(--weight-bold);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  padding: 1px 6px;
  border-radius: var(--radius-xs);
  background: var(--line);
  color: var(--text-body);
}
.fc-conviction--high { background: var(--buy);  color: var(--buy-ink); }
.fc-conviction--mid  { background: var(--hold); color: var(--hold-ink); }
.fc-conviction--low  { background: var(--sell); color: var(--sell-ink); }

/* ---- Tabs -------------------------------------------------- */
.fc-tabstrip { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.fc-tab {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text-muted);
  padding: 6px 14px;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.fc-tab:hover { color: var(--text-body); border-color: var(--sonar); }
.fc-tab--active {
  color: var(--sonar);
  border-color: var(--sonar);
  background: var(--sonar-wash);
}
.fc-tab--sm { padding: 4px 10px; font-size: var(--text-xs); }

/* ---- Field (label + input/select) -------------------------- */
.fc-field { display: flex; flex-direction: column; gap: var(--space-2); }
.fc-field__label {
  color: var(--text-muted);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}
.fc-input, .fc-select {
  background: var(--surface-well);
  color: var(--text-body);
  border: 1px solid var(--line);
  padding: 6px 8px;
  font-family: var(--font-mono);
  font-size: var(--text-base);
  border-radius: var(--radius-sm);
  outline: none;
  width: 100%;
  transition: border-color var(--dur) var(--ease);
}
.fc-input::placeholder { color: var(--text-muted); }
.fc-input:focus, .fc-select:focus { border-color: var(--sonar); }
.fc-input:disabled, .fc-select:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---- Progress row (agent state) ---------------------------- */
.fc-progress-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  font-size: var(--text-sm);
}
.fc-progress-row__name { color: var(--text-body); }
.fc-progress-row__state {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}
.fc-progress-row__state--pending     { color: var(--text-muted); }
.fc-progress-row__state--in_progress { color: var(--hold); }
.fc-progress-row__state--completed   { color: var(--buy-2); }

/* ---- Stat (totals item) ------------------------------------ */
.fc-stat { display: flex; flex-direction: column; gap: var(--space-1); }
.fc-stat__label {
  color: var(--text-muted);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}
.fc-stat__value { font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--text-body); }
.fc-stat__value--up   { color: var(--buy-2); }
.fc-stat__value--down { color: var(--sell); }
.fc-stat__value--accent { color: var(--sonar); }

/* ---- History item (sidebar) -------------------------------- */
.fc-history-item {
  display: flex;
  align-items: stretch;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.fc-history-item:hover { background: var(--surface-card); border-color: var(--line); }
.fc-history-item--active { background: var(--surface-hover); border-color: var(--sonar); }
.fc-history-item__main { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; min-width: 0; }
.fc-history-item__top { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.fc-history-item__tk { font-weight: var(--weight-semibold); color: var(--sonar); }
.fc-history-item__ts { color: var(--text-muted); font-size: var(--text-xs); }

/* ---- Footer banner ----------------------------------------- */
/* A slim brand sign-off for the bottom of a page, deck, or doc.
   Token-driven, so it reflows to .theme-paper automatically:
   navy hero + foam type on dark, white + ink on light. */
.fc-footer {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-8);
  background: var(--surface-hero);
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
}
.fc-footer__brand {
  font-family: var(--font-serif);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  color: var(--text-display);
  font-size: var(--text-sm);
  white-space: nowrap;
  /* widest tracking adds trailing space; pull the kerning back */
  margin-right: calc(var(--tracking-widest) * -1);
}
.fc-footer__sep { color: var(--text-accent); }
.fc-footer__tag {
  color: var(--text-muted);
  letter-spacing: var(--tracking-wide);
}
.fc-footer__mark { height: 20px; width: auto; display: block; align-self: center; flex: none; }
.fc-footer__meta {
  color: var(--text-muted);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
}
/* Split layout — brand left, meta right (console / app chrome) */
.fc-footer--split { justify-content: space-between; align-items: center; }
.fc-footer__lead { display: inline-flex; align-items: center; gap: var(--space-4); }

/* ---- Connection dot ---------------------------------------- */
.fc-dot { font-size: var(--text-2xs); vertical-align: middle; }
.fc-dot--live { color: var(--buy-2); }
.fc-dot--warn { color: var(--hold); }
.fc-dot--down { color: var(--sell); }
.fc-dot--idle { color: var(--text-muted); }


/* ================================================================
   RAG App — extra utility classes (topbar, layout, alerts, table)
   ================================================================ */

/* ---- Page shell ----------------------------------------------- */
body { display: flex; flex-direction: column; min-height: 100vh; }
.rag-body { display: flex; flex-direction: column; min-height: 100vh; }

/* ---- Topbar --------------------------------------------------- */
.rag-topbar {
  position: sticky; top: 0; z-index: 20;
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; height: 52px; padding: 0 18px;
  background: var(--surface-hero); border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.rag-topbar__brand { display: flex; align-items: center; gap: 10px; }
.rag-topbar__wordmark { font-size: 16px; font-weight: 800; }
.rag-topbar__sub {
  font-size: 10px; letter-spacing: 1px; color: var(--text-muted);
  border-left: 1px solid var(--line); padding-left: 10px; margin-left: 2px;
}
.rag-topbar__nav { justify-self: center; }
.rag-topbar__status { justify-self: end; display: flex; align-items: center; gap: 12px; }
.rag-topbar__user { font-size: 12px; color: var(--foam-300); }

/* ---- Main content -------------------------------------------- */
.rag-main { flex: 1; padding: 22px 16px; width: 100%; }
.rag-container   { max-width: 1080px; margin: 0 auto; }
.rag-container--md { max-width: 880px;  margin: 0 auto; }
.rag-container--sm { max-width: 680px;  margin: 0 auto; }
.rag-container--xs { max-width: 400px;  margin: 0 auto; }

/* ---- Auth page ----------------------------------------------- */
.rag-auth-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--depth-1000); position: relative; overflow: hidden;
}
.rag-auth-rings { position: absolute; top: 50%; left: 50%; width: 2px; height: 2px; pointer-events: none; }
.rag-auth-ring {
  position: absolute; left: 50%; top: 50%;
  width: 760px; height: 760px; margin: -380px 0 0 -380px;
  border: 1px solid var(--sonar); border-radius: 50%;
  opacity: 0; animation: ragping 7s linear infinite;
}
.rag-auth-ring:nth-child(2) { animation-delay: 2.33s; }
.rag-auth-ring:nth-child(3) { animation-delay: 4.67s; }
.rag-auth-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 47px, rgba(108,213,230,0.03) 47px, rgba(108,213,230,0.03) 48px);
}
.rag-auth-inner {
  position: relative; z-index: 1; width: 400px;
  display: flex; flex-direction: column; align-items: center; gap: 28px; padding: 40px 0;
}
.rag-auth-brand { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.rag-auth-headline { font-size: 38px; font-weight: 800; line-height: 1; }
.rag-auth-sub { font-size: 10px; letter-spacing: 4px; color: var(--text-muted); }

/* ---- Alerts -------------------------------------------------- */
.rag-alert {
  padding: 8px 12px; border-radius: var(--radius-sm);
  font-size: var(--text-sm); margin-top: 12px; display: block;
}
.rag-alert--danger  { background: rgba(255,124,124,0.08); border: 1px solid rgba(255,124,124,0.3); color: var(--sell); }
.rag-alert--success { background: rgba(46,204,113,0.08);  border: 1px solid rgba(46,204,113,0.3);  color: var(--buy-2); }
.rag-alert--info    { background: var(--sonar-wash);      border: 1px solid rgba(108,213,230,0.3);  color: var(--sonar); }
.rag-alert--warning { background: rgba(244,201,93,0.08);  border: 1px solid rgba(244,201,93,0.3);  color: var(--hold); }

/* ---- Loading spinner ----------------------------------------- */
.rag-spinner {
  width: 20px; height: 20px;
  border: 2px solid var(--line); border-top-color: var(--sonar);
  border-radius: 50%; animation: radspin 0.8s linear infinite;
  display: inline-block;
}

/* ---- Table --------------------------------------------------- */
.rag-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.rag-table th {
  padding: 8px 10px; text-align: left;
  font-size: var(--text-2xs); letter-spacing: 1px; text-transform: uppercase;
  color: var(--text-muted); border-bottom: 1px solid var(--line);
  cursor: pointer; user-select: none;
}
.rag-table td { padding: 10px 10px; border-bottom: 1px solid var(--line-soft); color: var(--text-body); }
.rag-table tr:last-child td { border-bottom: none; }
.rag-table tr:hover td { background: var(--surface-card); }

/* ---- Type chip (doc type badge) ----------------------------- */
.rag-type {
  font-size: 9px; letter-spacing: 1px; text-transform: uppercase;
  border: 1px solid var(--line); border-radius: var(--radius-xs);
  padding: 2px 6px; color: var(--text-muted);
}
.rag-type--pdf { border-color: var(--sonar); color: var(--sonar); }
.rag-type--url { border-color: var(--hold);  color: var(--hold); }
.rag-type--doc,
.rag-type--docx { border-color: var(--signal-slate); color: var(--signal-slate); }
.rag-type--txt  { border-color: var(--buy-2);         color: var(--buy-2); }

/* ---- Progress bar ------------------------------------------- */
.rag-progress { height: 4px; background: var(--surface-app); border: 1px solid var(--line); border-radius: var(--radius-xs); overflow: hidden; margin: 8px 0; }
.rag-progress__bar { height: 100%; background: var(--sonar); transition: width 0.4s var(--ease); border-radius: var(--radius-xs); }
.rag-progress__bar--success { background: var(--buy-2); }

/* ---- Stat row ----------------------------------------------- */
.rag-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 12px; margin-bottom: 18px; }

/* ---- Utility ------------------------------------------------ */
.d-none   { display: none !important; }
.text-muted { color: var(--text-muted); }
.text-sonar { color: var(--sonar); }
.text-success { color: var(--buy-2); }
.text-danger  { color: var(--sell); }
.mt-2  { margin-top: 8px; }
.mt-3  { margin-top: 12px; }
.mt-4  { margin-top: 16px; }
.mb-3  { margin-bottom: 12px; }
.w-100 { width: 100%; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }

/* ---- Keyframes ----------------------------------------------- */
@keyframes ragping {
  0%   { transform: scale(0.2); opacity: 0; }
  8%   { opacity: 0.45; }
  100% { transform: scale(1); opacity: 0; }
}
@keyframes ragpulse {
  0%, 100% { opacity: 0.4; }
  50%       { opacity: 1; }
}
@keyframes radspin {
  to { transform: rotate(360deg); }
}


/* ================================================================
   Bootstrap Compatibility Layer
   Maps Bootstrap classes used in JS-generated HTML to Fathom
   equivalents. Keeps ALL original JavaScript untouched.
   ================================================================ */

/* Layout utilities */
.d-none        { display: none !important; }
.d-flex        { display: flex; }
.d-inline-flex { display: inline-flex; }
.d-inline-block{ display: inline-block; }
.d-block       { display: block; }
.flex-wrap     { flex-wrap: wrap; }
.flex-column   { flex-direction: column; }
.flex-grow-1   { flex: 1; }
.align-items-center  { align-items: center; }
.align-items-start   { align-items: flex-start; }
.align-items-end     { align-items: flex-end; }
.align-items-stretch { align-items: stretch; }
.justify-content-between { justify-content: space-between; }
.justify-content-center  { justify-content: center; }
.justify-content-end     { justify-content: flex-end; }
.overflow-auto { overflow: auto; }
.h-100  { height: 100%; }
.w-100  { width: 100%; }

/* Text */
.text-center { text-align: center; }
.text-end    { text-align: right; }
.text-start  { text-align: left; }
.text-muted  { color: var(--text-muted) !important; }
.text-white  { color: #fff !important; }
.text-success{ color: var(--buy-2) !important; }
.text-danger { color: var(--sell) !important; }
.text-muted  { color: var(--text-muted); }
.text-decoration-none { text-decoration: none !important; }
.fw-bold     { font-weight: 700; }
.fw-semibold { font-weight: 600; }
.fst-italic  { font-style: italic; }
.small, small{ font-size: var(--text-sm); }
.font-monospace { font-family: var(--font-mono); }

/* Spacing */
.mb-0 { margin-bottom: 0; }  .mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px;}.mb-5 { margin-bottom: 20px; }
.mt-0 { margin-top: 0; }     .mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }   .mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }  .mt-5 { margin-top: 20px; }
.ms-1 { margin-left: 4px; }  .ms-2 { margin-left: 8px; }
.ms-3 { margin-left: 12px; } .me-1 { margin-right: 4px; }
.me-2 { margin-right: 8px; } .me-3 { margin-right: 12px; }
.gap-1{ gap: 4px; }          .gap-2{ gap: 8px; }
.gap-3{ gap: 12px; }
.p-2  { padding: 8px; }      .p-3  { padding: 12px; }
.p-4  { padding: 16px; }     .px-4 { padding-left: 16px; padding-right: 16px; }
.py-2 { padding-top: 8px; padding-bottom: 8px; }
.py-4 { padding-top: 16px; padding-bottom: 16px; }

/* Borders & radius */
.rounded    { border-radius: var(--radius-sm); }
.rounded-lg { border-radius: var(--radius-lg); }

/* Color fills (used in JS-generated badge HTML) */
.badge {
  display: inline-block; font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px;
  padding: 2px 6px; border-radius: var(--radius-xs);
}
.bg-primary   { background: var(--sonar) !important; color: var(--sonar-ink) !important; }
.bg-success   { background: var(--buy-2) !important; color: var(--buy-ink) !important; }
.bg-warning   { background: var(--hold)  !important; color: var(--hold-ink)  !important; }
.bg-danger    { background: var(--sell)  !important; color: var(--sell-ink)  !important; }
.bg-secondary { background: var(--line)  !important; color: var(--text-muted) !important; }
.bg-info      { background: var(--signal-slate) !important; color: var(--depth-900) !important; }
.bg-light     { background: var(--surface-card) !important; color: var(--text-body) !important; }
.bg-dark      { background: var(--surface-hero) !important; color: var(--foam-100) !important; }

/* Bootstrap buttons (used in JS-generated HTML) */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 6px 12px; font-family: var(--font-mono); font-size: var(--text-base);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: transparent; color: var(--text-body);
  cursor: pointer; transition: all var(--dur) var(--ease);
}
.btn-sm  { padding: 3px 8px; font-size: var(--text-xs); }
.btn-lg  { padding: 10px 18px; font-size: var(--text-md); }
.btn-primary   { background: var(--sonar); color: var(--sonar-ink); border-color: var(--sonar); font-weight: 600; }
.btn-primary:hover { background: var(--sonar-bright); border-color: var(--sonar-bright); }
.btn-success   { background: var(--buy-2); color: var(--buy-ink); border-color: var(--buy-2); font-weight: 600; }
.btn-success:hover { filter: brightness(1.1); }
.btn-outline-primary   { border-color: var(--sonar); color: var(--sonar); }
.btn-outline-primary:hover { background: var(--sonar-wash); }
.btn-outline-secondary { border-color: var(--line); color: var(--text-muted); }
.btn-outline-secondary:hover { border-color: var(--sonar); color: var(--sonar); }
.btn-outline-danger    { border-color: var(--sell); color: var(--sell); }
.btn-outline-danger:hover { background: rgba(255,124,124,.1); }
.btn:disabled, .btn[disabled] { opacity: .4; cursor: not-allowed; }

/* Bootstrap list-group (sources panel, manage sources) */
.list-group { display: flex; flex-direction: column; gap: 4px; }
.list-group-flush { border: none; }
.list-group-item {
  padding: 10px 12px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--surface-card); color: var(--text-body);
}
a.list-group-item, .list-group-item-action { color: var(--text-body); text-decoration: none; display: block; }
a.list-group-item:hover, .list-group-item-action:hover { background: var(--surface-hover); border-color: var(--sonar); }

/* Bootstrap table (Ollama models table in admin) */
.table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.table th { padding: 8px 10px; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); border-bottom: 1px solid var(--line); }
.table td { padding: 8px 10px; border-bottom: 1px solid var(--line-soft); color: var(--text-body); vertical-align: middle; }
.table-sm th, .table-sm td { padding: 4px 8px; }
.table-responsive { overflow-x: auto; }

/* Bootstrap progress (upload progress bars) */
.progress { height: 8px; background: var(--surface-app); border: 1px solid var(--line); border-radius: var(--radius-xs); overflow: hidden; }
.progress-bar { height: 100%; background: var(--sonar); transition: width .4s var(--ease); }
.progress-bar-striped { background-image: linear-gradient(45deg,rgba(255,255,255,.1) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.1) 50%,rgba(255,255,255,.1) 75%,transparent 75%); background-size: 1rem 1rem; }
.progress-bar-animated { animation: progmove 1s linear infinite; }
@keyframes progmove { to { background-position: 1rem 0; } }

/* Bootstrap alert (used in JS-generated feedback) */
.alert { padding: 10px 14px; border-radius: var(--radius-sm); font-size: var(--text-sm); margin-top: 12px; border: 1px solid; }
.alert-danger  { background: rgba(255,124,124,.08); border-color: rgba(255,124,124,.3); color: var(--sell); }
.alert-success { background: rgba(46,204,113,.08);  border-color: rgba(46,204,113,.3);  color: var(--buy-2); }
.alert-info    { background: var(--sonar-wash);     border-color: rgba(108,213,230,.3);  color: var(--sonar); }
.alert-warning { background: rgba(244,201,93,.08);  border-color: rgba(244,201,93,.3);  color: var(--hold); }

/* Code and pre (admin security card) */
code { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--sonar); background: var(--surface-well); padding: 1px 5px; border-radius: var(--radius-xs); }
pre  { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--foam-200); background: var(--surface-well); padding: 12px; border-radius: var(--radius-sm); overflow-x: auto; margin: 0; }

/* Spinner */
.spinner-border {
  width: 24px; height: 24px; border: 2px solid var(--line);
  border-top-color: var(--sonar); border-radius: 50%;
  animation: radspin .8s linear infinite; display: inline-block;
}


/* ================================================================
   Responsive — mobile-first breakpoints for Jinja2 templates
   ================================================================ */

/* Tablet (≤1100px): topbar tabs scroll, drop sidebar where used */
@media (max-width: 1100px) {
  .rag-topbar .rag-topbar__nav { overflow-x: auto; scrollbar-width: none; justify-content: flex-start; }
  .rag-topbar .rag-topbar__nav::-webkit-scrollbar { display: none; }
}

/* Narrow tablet (≤820px): single-column layouts, fewer topbar items */
@media (max-width: 820px) {
  .rag-topbar { grid-template-columns: 1fr auto !important; }
  .rag-topbar__status .rag-topbar__user { display: none; }
  .rag-main { padding: 14px 12px; }
}

/* Mobile (≤600px): stack everything */
@media (max-width: 600px) {
  .rag-topbar {
    display: flex; flex-wrap: wrap; height: auto; padding: 10px 14px 0;
  }
  .rag-topbar__brand { flex: 1; }
  .rag-topbar__nav {
    order: 3; width: 100%; padding: 8px 0;
    border-top: 1px solid var(--line);
    overflow-x: auto; scrollbar-width: none;
  }
  .rag-topbar__nav::-webkit-scrollbar { display: none; }
  .rag-topbar__status { gap: 8px; }
  .rag-topbar__status span:first-child { display: none; }

  .rag-stats { grid-template-columns: repeat(2, 1fr); }
  .rag-container, .rag-container--md, .rag-container--sm, .rag-container--xs {
    padding-left: 12px; padding-right: 12px;
  }

  /* Auth screens */
  .rag-auth-inner { width: 100%; max-width: 360px; padding: 24px 14px; }

  /* Form grids collapse to single column */
  .rag-form-2col { grid-template-columns: 1fr !important; }

  /* Admin sidebar hidden on mobile */
  .rag-admin-sidebar { display: none !important; }
  .rag-admin-main { grid-column: 1 / -1 !important; }

  /* Table: allow horizontal scroll */
  .rag-table-wrap { overflow-x: auto; }
  .rag-table { min-width: 480px; }

  /* Chat layout single column */
  .rag-chat-panel { width: 100%; }

  .fc-tab { padding: 5px 10px; font-size: 10px; }
}