/* ============================================================
   olentra-theme.css — Olentra brand skin for the application
   ------------------------------------------------------------
   ADDITIVE. Loaded immediately AFTER styles.css. styles.css is not
   edited: it keeps full ownership of layout, components and flows.
   This file only restates colour tokens and the handful of purely
   cosmetic rules the two appended theme blocks introduced.

   WHY IT LOOKS LIKE THIS
   styles.css ends with two appended override blocks that supersede
   the dark palette declared at its top:

     1. line ~4156  "Random Pool Manager — federal instrument theme"
        Re-declares the tokens on :root, [data-theme=light] AND
        [data-theme=dark] together, so the app is LIGHT in every
        stored theme. The dark palette at line 1 is dead code.

     2. line ~4181  "GOVERNMENT THEME — matches the Platform Admin
        console" (appended 2026-07-04). Navy masthead sidebar with a
        seal.svg mark, Georgia serif headings, and a red/white/blue
        rule under each page title.

   A theme that only overrode the tokens at line 1 would therefore
   change nothing, and one that assumed a dark app would break every
   screen. This targets what is actually in effect.

   Both appended blocks are matched selector-for-selector so the
   cascade resolves cleanly at equal specificity, later file wins.
   ============================================================ */

/* ------------------------------------------------------------
   1. Palette — Olentra light. Mirrors the selector list of the
   federal-instrument block so it wins in all three theme states.
   ------------------------------------------------------------ */
:root,
:root[data-theme="light"],
:root[data-theme="dark"] {
  /* Bone and warm graphite, replacing the neutral greys. */
  --bg:        #F4F6FA;
  --panel:     #FFFFFF;
  --panel-2:   #EDEFF4;
  --panel-3:   #E2E6EE;
  --border:    #DDE1E9;
  --border-2:  #C6CCD8;
  --text:      #131B28;
  --text-2:    #3D4756;
  --muted:     #69737F;

  /* Single copper signal, replacing federal blue. */
  --accent:        #0B57D0;
  --accent-hover:  #0A47AC;
  --accent-soft:   rgba(11, 87, 208, 0.10);

  /* Status keeps its meanings; hues moved off the federal primaries
     so no state reads as a government cue or as the brand. */
  --info:         #47617F;
  --info-soft:    rgba(71, 97, 127, 0.10);
  --success:      #2E7D6B;
  --success-soft: rgba(46, 125, 107, 0.10);
  --warning:      #8A6D3B;
  --warning-soft: rgba(138, 109, 59, 0.12);
  --danger:       #B4453C;
  --danger-soft:  rgba(180, 69, 60, 0.10);

  --shadow:    0 1px 2px rgba(20, 24, 27, 0.05), 0 8px 24px -16px rgba(20, 24, 27, 0.22);
  --shadow-lg: 0 16px 40px -12px rgba(20, 24, 27, 0.18);
  --radius:    6px;
  --radius-lg: 10px;
}

/* The government block re-sets --accent after the instrument block,
   on plain :root and on [data-theme=light]. Both are restated here
   so copper is not overwritten by federal blue in either state. */
:root,
:root[data-theme="light"] {
  --accent:        #0B57D0;
  --accent-hover:  #0A47AC;
  --accent-soft:   rgba(11, 87, 208, 0.10);
}

/* ------------------------------------------------------------
   2. Sidebar — graphite instead of the navy masthead.
   The seal mark is removed rather than restyled: Olentra is an
   independent tool and the site disclaims government affiliation,
   so a seal in the product chrome works against that. Replaced with
   the Olentra aperture mark, drawn in CSS (no new asset to deploy).
   ------------------------------------------------------------ */
.sidebar {
  background: #131B28;
  border-right: 1px solid #222B38;
}
.sidebar .brand {
  color: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
  /* Georgia was part of the government treatment; the product wordmark
     belongs in the interface face. */
  font-family: inherit;
  font-weight: 640;
  letter-spacing: -0.02em;
}
/* One inline SVG rather than two pseudo-elements: the earlier
   border-plus-offset-dot version rendered as a filled square because the
   ::after could not be positioned inside the ::before box. A data URI also
   means no new file has to be deployed alongside the stylesheet. */
.sidebar .brand::before {
  content: "";
  width: 30px;
  height: 30px;
  flex: none;
  border: 0;
  filter: none;
  /* Real brand mark. The supplied artwork is transparent-backed, so it sits
     directly on the graphite rail with no plate behind it. */
  background: url("/olentra-mark-64.png") center/contain no-repeat;
}
.sidebar .nav-section { color: #7A838F; opacity: 1; }
.sidebar .nav-btn { color: #C7CDD6; }
.sidebar .nav-btn:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.sidebar .nav-btn.active {
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
  border-left: 3px solid #4D8DF5;   /* was --gov-gold */
  padding-left: 9px;
}
.sidebar-footer { border-top-color: rgba(255, 255, 255, 0.08); }
.sidebar-footer .ghost,
.sidebar-footer button,
.sidebar-footer a { color: #C7CDD6; }
.sidebar-footer .ghost:hover,
.sidebar-footer button:hover,
.sidebar-footer a:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }

/* ------------------------------------------------------------
   3. Page headings — drop the serif and the tricolour rule.
   A red/white/blue bar under every page title reads as a federal
   system; a single copper rule reads as Olentra.
   ------------------------------------------------------------ */
.view-header h1 {
  font-family: inherit;
  font-weight: 650;
  letter-spacing: -0.022em;
}
.view-header h1::after {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  margin-top: 8px;
  border-radius: 1px;
  background: #0B57D0;
}

/* ============================================================
   4. AUTH / PUBLIC CHROME  (chq-nav.css override)
   ------------------------------------------------------------
   chq-nav.css scopes its variables to .gov-band and .site-head
   rather than :root, deliberately, so they are redefined at the
   same scope here. This file is loaded AFTER chq-nav.css on those
   pages — without that ordering none of this can win.

   These pages are the login, signup, password-reset, invite,
   verify and MFA screens. The marketing pages that also carried
   this header now 301 to getolentra.com, so in practice this is
   the signed-out chrome of the product.
   ============================================================ */
.gov-band,
.site-head {
  --navy:   #131B28;   /* graphite, was federal navy */
  --navy-2: #0D1420;
  --blue:   #0B57D0;   /* copper, was federal blue */
  --blue-soft: rgba(11, 87, 208, .09);
  --gold:   #4D8DF5;
  --line:   #DDE1E9;
  --ink-2:  #3D4756;
  --muted:  #69737F;
}

/* The seal was a filled navy disc with a gold ring reading "CHQ".
   Replaced with the Olentra aperture mark; the text node is gone
   from the markup, so the disc styling is cleared out too. */
.site-head .seal {
  width: 42px;
  height: 42px;
  border-radius: 0;
  background: url("/olentra-mark-64.png") center/contain no-repeat;
  border: 0;
  box-shadow: none;
  font-size: 0;
}

.site-head { border-bottom-color: var(--line); }
.site-head .brand-t1 { color: #131B28; font-weight: 700; letter-spacing: -.02em; }
.site-head .brand-t2 { color: var(--muted); }
.site-head .btn { border-width: 1px; border-radius: 6px; padding: 9px 16px; font-weight: 600; }
.site-head .btn.solid { background: var(--blue); border-color: var(--blue); }
.site-head .btn.solid:hover { background: #0A47AC; border-color: #0A47AC; }
.site-head .nav a.n:hover { color: #0B57D0; }

/* The primary auth action is hardcoded to a near-black in styles.css
   rather than reading a token. Its real hook is #submit-btn on the auth
   forms — the earlier .btn-primary guess matched nothing. Scoped to the
   login card so no other button in the product is affected. */
.login-card #submit-btn,
.login-card button[type="submit"] {
  background: #0B57D0;
  border-color: #0B57D0;
  color: #fff;
}
.login-card #submit-btn:hover,
.login-card button[type="submit"]:hover {
  background: #0A47AC;
  border-color: #0A47AC;
}

/* ============================================================
   5. COLLECTOR DIRECTORY — loading state
   The directory fetch is normally ~100ms, so this is deliberately
   quiet: a thin indeterminate bar, not a spinner that flashes.
   It also covers a genuinely slow connection, where the list used
   to appear with no feedback at all.
   ============================================================ */
.cc-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 2px 18px;
}
.cc-bar[hidden] { display: none; }
.cc-bar__track {
  position: relative;
  flex: 1 1 auto;
  height: 3px;
  border-radius: 2px;
  background: var(--panel-2, #EDEFF4);
  overflow: hidden;
}
.cc-bar__fill {
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 34%;
  border-radius: 2px;
  background: var(--accent, #0B57D0);
  animation: ccSlide 1.15s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes ccSlide {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(330%); }
}
.cc-bar__label {
  flex: none;
  font-size: 12.5px;
  color: var(--muted, #69737F);
}
@media (prefers-reduced-motion: reduce) {
  .cc-bar__fill { animation: none; width: 100%; opacity: .45; }
}

/* The "Add tokens" button in Workspace > Tokens & Billing is inline-styled
   background:#111827 inside app.js, so it survived the palette change.
   Overridden here (needs !important to beat an inline style) rather than
   editing app.js for a colour. */
#ws-billing a.primary {
  background: var(--accent) !important;
  border-radius: 6px !important;
}
#ws-billing a.primary:hover { background: var(--accent-hover) !important; }