@import url('https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600;6..72,700&display=swap');

/* ============================================================================
   Orchid AI Advisors — "Midnight Indigo" theme overlay for the signed-in app
   pages (admin, client-admin, portal) and the glass-treated marketing pages
   (values, founder, form). Linked LAST (just before </head>) so it overrides
   each page's own <style>. CSS-ONLY and purely additive — it changes appearance
   only and never touches markup or scripts, so it can't break the forms,
   buttons, chat, or data flows. To revert: remove the one <link>.
   Matches the dark homepage: indigo aurora + frosted DARK glass + serif gold
   headings. (The token values in styles.css :root are already the dark palette.)
   ============================================================================ */

:root {
  --glass: rgba(255, 255, 255, 0.05);        /* subtle translucent panel on the midnight ground */
  --glass-strong: rgba(255, 255, 255, 0.09); /* slightly lifted (buttons, chips) */
  --glass-bd: rgba(255, 255, 255, 0.12);     /* hairline panel border */
  --gold-bd: rgba(129, 140, 248, 0.34);      /* indigo accent border (hover/active) */
  --g-blur: 14px;
}

/* ---- Serif, gold headings everywhere (matches the homepage) ---- */
h1, h2, h3, h2.sec, .sec, .hello h1, .modal-box h3, .modal-head h2 {
  font-family: 'Newsreader', Georgia, serif !important;
  letter-spacing: -0.01em;
}

/* ---- Indigo animated aurora behind everything (GPU transforms = smooth) ---- */
html { background: var(--cream, #0f172a); }
body { background: transparent !important; }
body::before, body::after {
  content: ""; position: fixed; border-radius: 50%; z-index: -1; pointer-events: none;
  filter: blur(90px); opacity: 0.3;
}
body::before { width: 58vw; height: 58vw; top: -14vw; left: -10vw;
  background: radial-gradient(circle, var(--purple-500, #818cf8), transparent 62%); animation: gb1 26s ease-in-out infinite; }
body::after { width: 50vw; height: 50vw; bottom: -18vw; right: -12vw;
  background: radial-gradient(circle, var(--pink-400, #a78bfa), transparent 62%); animation: gb2 30s ease-in-out infinite; }
@keyframes gb1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(7vw,5vw) scale(1.12); } }
@keyframes gb2 { 0%,100% { transform: translate(0,0) scale(1.08); } 50% { transform: translate(-6vw,-4vw) scale(1); } }

/* ---- Top bar → frosted dark glass ---- */
.bar {
  background: rgba(17, 24, 42, 0.72) !important;
  backdrop-filter: blur(16px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
  border-bottom: 1px solid var(--glass-bd) !important;
}

/* ---- Sidebar → dark glass ---- */
.side-nav {
  background: rgba(17, 24, 42, 0.55) !important;
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-right: 1px solid var(--glass-bd) !important;
}
@media (max-width: 780px) {
  .side-nav { border-right: 0 !important; border-bottom: 1px solid var(--glass-bd) !important; }
}

/* ---- Panels / cards → frosted dark glass ---- */
.panel, .pcard, .resp-item, .contact-card {
  background: var(--glass) !important;
  backdrop-filter: blur(var(--g-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--g-blur)) saturate(140%);
  border: 1px solid var(--glass-bd) !important;
  border-radius: 18px !important;
  box-shadow: var(--shadow) !important;
}
/* keep table headers legible over translucent panels */
th { background: rgba(255, 255, 255, 0.06); }

/* ---- Modals → high-opacity frosted dark so forms stay legible ---- */
.modal-box {
  background: rgba(23, 32, 51, 0.96) !important;
  backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--glass-bd) !important;
  border-radius: 22px !important;
}
.modal-overlay .modal-box, .cm .modal-box { box-shadow: var(--shadow-lg) !important; }
#row-menu { background: rgba(23, 32, 51, 0.98) !important; backdrop-filter: blur(12px); border-radius: 14px !important; }

/* ---- Chat box (form discussion) → glass shell, bubbles untouched ---- */
.chat-box { background: rgba(23, 32, 51, 0.94) !important; backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); }

/* ---- Buttons ---- */
.btn-out, .lnk {
  background: var(--glass-strong) !important;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--glass-bd) !important;
}
.btn-out:hover, .lnk:hover { background: rgba(255, 255, 255, 0.12) !important; border-color: var(--gold-bd) !important; }
.btn-gold { box-shadow: 0 10px 26px -8px rgba(67, 56, 202, 0.5); }

/* ---- Form controls → dark fields. Many app pages hardcode `background:#fff`
   on text inputs (both in class rules and inline style=""); loaded-last +
   !important flips them all to a dark field so the pearl text is legible.
   Scoped to text-like controls so checkboxes / radios keep native rendering.
   Border is left to each page (their `var(--border)` is already dark-correct)
   so :focus border/ring states survive. ---- */
input[type="text"], input[type="email"], input[type="search"], input[type="tel"],
input[type="url"], input[type="number"], input[type="password"], input[type="date"],
input:not([type]), textarea, select {
  background: #0b1120 !important;
  color: var(--ink) !important;
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }

/* ---- Shared app components that hardcode white backgrounds (chat, feedback,
   chips, misc panels — same class names recur across admin/portal/client-admin).
   Override background only; their text (var(--ink)/--purple-*) and borders
   (var(--border)) are already dark-correct. ---- */
.bubble.them { background: #1c263c !important; }
.chat-compose { background: rgba(255, 255, 255, 0.03) !important; }
.cc-iconbtn, .tagchip { background: var(--glass-strong) !important; }
.cc-iconbtn:hover, .tagchip:hover { border-color: var(--gold-bd) !important; }
.tagchip.on, .tagchip[aria-pressed="true"] { background: rgba(129, 140, 248, 0.18) !important; }
.fb-card, .dz-panel, .feat-role, .testi-card { background: var(--glass) !important; }
.fb-card:hover { border-color: var(--gold-bd) !important; }
/* Danger-zone confirm box → red-tinted dark instead of white */
.dz-confirm { background: rgba(192, 57, 43, 0.12) !important; border-color: rgba(240, 113, 113, 0.5) !important; }

/* ============================================================================
   Marketing pages (values.html, founder.html, form.html) — glass treatment
   over styles.css classes. These classes don't exist on the app consoles, so
   adding them here is safe for the shared file.
   ============================================================================ */
/* Sticky marketing header → frosted dark glass */
.site-header {
  background: rgba(17, 24, 42, 0.72) !important;
  backdrop-filter: blur(16px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
  border-bottom: 1px solid var(--glass-bd) !important;
}
/* Let the body aurora show through hero + alternating section bands */
.hero, .page-hero, .founder-hero, .section-contact { background: transparent !important; }
.section-alt { background: transparent !important; }
/* Content cards → frosted dark glass (NOT .stat / .founder-stats-strip — those
   are solid indigo cards with white text and must stay solid for contrast). */
.card, .track-card {
  background: var(--glass) !important;
  backdrop-filter: blur(var(--g-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--g-blur)) saturate(140%);
  border: 1px solid var(--glass-bd) !important;
}
.card-icon { border: 1px solid var(--gold-bd); }
.chip { background: var(--glass-strong) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--glass-bd) !important; }
.btn-ghost { background: var(--glass-strong) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--glass-bd) !important; }
/* Consultation modal (styles.css .modal) → high-opacity frosted dark */
.modal { background: rgba(23, 32, 51, 0.96) !important; backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); }

/* ---- Reduced motion: hold the aurora still ---- */
@media (prefers-reduced-motion: reduce) {
  body::before, body::after { animation: none; }
}