/* COSMOS shell kit - v2 - 12/08/2026 - Claude
 *
 * One stylesheet that brings an MRS tool in line with the COSMOS hub:
 * a permanently dark topbar (and optional dark footer), a light content
 * surface by default, an optional dark content theme, and the MRS token
 * set underneath. Derived from Apps/cosmos-platform/codex/tokens.css;
 * the canonical copy of this kit lives in Apps/cosmos-platform/design.
 * Each app vendors (copies) this file - do not hotlink across ports.
 *
 * Contract:
 * - All kit classes and custom properties are prefixed cosmos- to avoid
 *   colliding with app CSS or Bootstrap.
 * - The chrome (.cosmos-topbar, .cosmos-utility-line) is ALWAYS dark, in
 *   both themes, matching the hub's data-chrome="dark" rule.
 * - Content follows html[data-theme]: "light" (default) or "dark".
 *   cosmos-shell.js mirrors the value to data-bs-theme so Bootstrap 5.3
 *   components flip with it.
 * - No network requests: system font stacks only (Roboto/Open Sans if
 *   installed or loaded by the app, Arial otherwise).
 *
 * 12/08/2026 (v2): topbar background restored to Orion's original diagonal
 * gradient (Luke's call - "match Orion's original format, love the
 * gradient"), sourced verbatim from the pre-rebrand
 * orion-rework/mrs-client-portal-main navbar (`resources/views/navigation/
 * menu.blade.php`, inline style, never touched since). v1 had flattened
 * every app's topbar to one solid chrome colour; this reapplies the same
 * gradient everywhere so it's Orion's format shared by all five, not a
 * one-off. Each app keeps its own logo/name - only the bar's background
 * changed. The gradient's mid-band (its lightest teal stops) reads ~3.6:1
 * against the chrome ink colour - short of the 4.5:1 AA text minimum, the
 * same shortfall this kit already corrected elsewhere (see
 * cosmos-components.css's README entry on the teal-text WCAG fix). The
 * original got away with it because that band sits behind a decorative SVG
 * mark, not text (non-text UI only needs 3:1). Since .cosmos-topbar__brand
 * has real text next to the logo, it now gets its own solid dark backing
 * chip (--cosmos-chrome-brand-backing) so brand text stays legible
 * regardless of where it lands on the gradient - see that rule below.
 */

:root {
  /* MRS source colours. Keep these values exact. */
  --mrs-black: #000000;
  --mrs-orange: #FFA500;
  --mrs-warm-yellow: #FFC510;
  --mrs-light-teal: #00AFAA;
  --mrs-dark-grey: #2D2D2D;
  --mrs-mid-grey: #5A5A5A;
  --mrs-dark-teal: #009789;
  --mrs-bondi-blue: #2497B8;
  --mrs-application-grey: #DBDBDB;
  --mrs-backboard-grey: #ECECEC;
  --mrs-lime: #32CD32;
  --mrs-flamingo-pink: #E0457B;
  --mrs-vivid-cerulean: #0099FF;
  --mrs-space-cadet: #212B54;

  /* Chrome tokens - constant, never themed. */
  --cosmos-chrome-bg: color-mix(in srgb, var(--mrs-space-cadet) 74%, var(--mrs-black));
  --cosmos-chrome-raised: color-mix(in srgb, var(--mrs-space-cadet) 88%, var(--mrs-bondi-blue));
  --cosmos-chrome-soft: color-mix(in srgb, var(--mrs-space-cadet) 82%, var(--mrs-backboard-grey));
  --cosmos-chrome-line: color-mix(in srgb, var(--mrs-light-teal) 28%, transparent);
  --cosmos-chrome-ink: var(--mrs-backboard-grey);
  --cosmos-chrome-muted: color-mix(in srgb, var(--mrs-application-grey) 76%, var(--mrs-space-cadet));
  --cosmos-chrome-accent: color-mix(in srgb, var(--mrs-light-teal) 84%, var(--mrs-backboard-grey));
  /* Orion's original topbar gradient (v2, 12/08/2026) - verbatim stops from
     mrs-client-portal-main's pre-rebrand navbar. 90deg = left-to-right: dark
     purple -> navy -> a brief lighter-teal band (11-25%) -> near-black from
     35% on, holding to the right edge. Nav/actions live past 35% so they
     read against solid near-black; only the brand block overlaps the teal
     band, hence its own backing chip below. */
  --cosmos-chrome-gradient: linear-gradient(90deg,
    rgba(39, 8, 56, 1) 0%,
    rgba(31, 34, 80, 1) 4%,
    rgba(13, 109, 137, 1) 11%,
    rgba(15, 135, 140, 1) 15%,
    rgba(11, 135, 140, 1) 20%,
    rgba(14, 103, 98, 1) 25%,
    rgba(35, 36, 35, 1) 35%);
  /* Solid backing for text sitting on the gradient's lighter band - see the
     v2 changelog note above. Not themed; chrome text is always this dark.
     45%, not 38%: measured live against the gradient's worst stop, 38% left
     the app-name subtitle (--cosmos-chrome-muted, already a dimmer colour
     by design) at 4.43:1 - just under the 4.5:1 AA text minimum. 45%
     verified at ~4.9:1+ for that same worst case while still reading as a
     tint, not a solid box. */
  --cosmos-chrome-brand-backing: color-mix(in srgb, var(--mrs-black) 45%, transparent);

  /* Content tokens - light theme (default). */
  --cosmos-surface: color-mix(in srgb, var(--mrs-backboard-grey) 90%, var(--mrs-application-grey));
  --cosmos-surface-raised: color-mix(in srgb, var(--mrs-backboard-grey) 42%, white);
  --cosmos-surface-muted: var(--mrs-application-grey);
  --cosmos-ink: var(--mrs-dark-grey);
  --cosmos-ink-secondary: var(--mrs-mid-grey);
  --cosmos-rule: color-mix(in srgb, var(--mrs-mid-grey) 30%, var(--mrs-backboard-grey));
  --cosmos-accent: var(--mrs-light-teal);
  --cosmos-accent-strong: var(--mrs-dark-teal);
  --cosmos-accent-ink: color-mix(in srgb, var(--mrs-dark-teal) 80%, var(--mrs-black));
  --cosmos-focus: var(--mrs-orange);
  --cosmos-focus-ink: var(--mrs-space-cadet);

  /* MRS typography. Arial is the offline fallback. */
  --cosmos-font-display: "Roboto", "Arial", sans-serif;
  --cosmos-font-body: "Open Sans", "Arial", sans-serif;

  --cosmos-topbar-height: 4rem;
  --cosmos-radius: 0.5rem;
  --cosmos-radius-round: 999px;
}

/* Dark content theme - chrome tokens deliberately untouched. */
:root[data-theme="dark"] {
  --cosmos-surface: color-mix(in srgb, var(--mrs-space-cadet) 74%, var(--mrs-black));
  --cosmos-surface-raised: color-mix(in srgb, var(--mrs-space-cadet) 88%, var(--mrs-bondi-blue));
  --cosmos-surface-muted: color-mix(in srgb, var(--mrs-space-cadet) 82%, var(--mrs-backboard-grey));
  --cosmos-ink: var(--mrs-backboard-grey);
  --cosmos-ink-secondary: color-mix(in srgb, var(--mrs-application-grey) 76%, var(--mrs-space-cadet));
  --cosmos-rule: color-mix(in srgb, var(--mrs-light-teal) 28%, transparent);
  --cosmos-accent-ink: color-mix(in srgb, var(--mrs-light-teal) 84%, var(--mrs-backboard-grey));
}

/* ---------------------------------------------------------------- */
/* Base surface                                                      */
/* ---------------------------------------------------------------- */

body {
  background-color: var(--cosmos-surface);
}

/* ---------------------------------------------------------------- */
/* Topbar chrome - always dark                                       */
/* ---------------------------------------------------------------- */

.cosmos-topbar {
  min-height: var(--cosmos-topbar-height);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--cosmos-chrome-line);
  background: var(--cosmos-chrome-gradient);
  color: var(--cosmos-chrome-ink);
  font-family: var(--cosmos-font-body);
}

.cosmos-topbar a {
  color: var(--cosmos-chrome-ink);
  text-decoration: none;
}

.cosmos-topbar__brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.cosmos-topbar__brand img,
.cosmos-topbar__brand svg {
  height: 2.25rem;
  width: auto;
  flex: 0 0 auto;
}

/* The MRS logo is dark-on-transparent; back it with backboard grey on the
   dark bar, the same treatment as the hub's brand lockup. Scoped to the
   logo so avatars and other imagery are left alone. */
.cosmos-topbar img[alt="MRS Digital"] {
  max-height: 2.5rem;
  width: auto;
  background: var(--mrs-backboard-grey);
}

.cosmos-topbar__name {
  display: grid;
  line-height: 1.15;
  min-width: 0;
  /* v2, 12/08/2026: this is the element that actually carries brand text in
     every app that has any (ContentGuard/ContentWriter/Winston render it
     directly, leftmost in the bar, with no .cosmos-topbar__brand wrapper;
     Gravity wraps it in one, which adds no styling of its own so this still
     applies). Verified live: at typical topbar widths this text's right
     edge lands past the 11% mark, inside the gradient's lightest-teal band
     (~3.66:1 against --cosmos-chrome-ink - below the 4.5:1 AA text
     minimum). This backing pill guarantees legibility regardless of where
     it falls. Orion's own topbar carries no .cosmos-topbar__name at all -
     its brand is the original decorative SVG mark, which only needs 3:1
     and already clears it, so it needs no backing and gets none. */
  padding: 0.3rem 0.6rem;
  border-radius: var(--cosmos-radius);
  background: var(--cosmos-chrome-brand-backing);
}

.cosmos-topbar__name strong {
  font-family: var(--cosmos-font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

.cosmos-topbar__name span {
  color: var(--cosmos-chrome-muted);
  font-size: 0.75rem;
  white-space: nowrap;
}

.cosmos-topbar__nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
  flex: 1 1 auto;
}

.cosmos-topbar__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-left: auto;
}

/* Nav links and Bootstrap dropdown toggles sitting in the dark bar. */
.cosmos-topbar .nav-link,
.cosmos-topbar .droptogg,
.cosmos-topbar__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.7rem;
  border-radius: var(--cosmos-radius);
  color: var(--cosmos-chrome-muted);
  cursor: pointer;
  font-size: 0.9rem;
  transition: background-color 160ms ease-out, color 160ms ease-out;
  /* Normalise <button> toggles so they sit flush with the anchor links:
     a native button otherwise carries a UA border, background and font,
     rendering taller and proud of the row. */
  background: none;
  border: 0;
  font-family: inherit;
  line-height: inherit;
  -webkit-appearance: none;
  appearance: none;
}

.cosmos-topbar .nav-link:hover,
.cosmos-topbar .nav-link:focus-visible,
.cosmos-topbar .droptogg:hover,
.cosmos-topbar__link:hover,
.cosmos-topbar__link:focus-visible {
  background: var(--cosmos-chrome-raised);
  color: var(--cosmos-chrome-ink);
}

.cosmos-topbar .nav-link.active,
.cosmos-topbar__link.is-active {
  background: var(--cosmos-chrome-raised);
  color: var(--cosmos-chrome-ink);
  box-shadow: inset 3px 0 0 var(--cosmos-accent);
}

/* Dropdown menus opened from the dark bar stay dark. */
.cosmos-topbar .dropdown-menu {
  --bs-dropdown-bg: var(--cosmos-chrome-raised);
  --bs-dropdown-color: var(--cosmos-chrome-ink);
  --bs-dropdown-link-color: var(--cosmos-chrome-ink);
  --bs-dropdown-link-hover-color: var(--cosmos-chrome-ink);
  --bs-dropdown-link-hover-bg: var(--cosmos-chrome-soft);
  --bs-dropdown-link-active-bg: var(--cosmos-accent-strong);
  --bs-dropdown-border-color: var(--cosmos-chrome-line);
  border-radius: var(--cosmos-radius);
}

/* Scope / client chip, mirroring the hub's identity pill. */
.cosmos-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.25rem;
  padding: 0.2rem 0.75rem;
  border: 1px solid var(--cosmos-chrome-line);
  border-radius: var(--cosmos-radius-round);
  background: var(--cosmos-chrome-raised);
  color: var(--cosmos-chrome-ink);
  font-size: 0.8rem;
  white-space: nowrap;
}

.cosmos-chip__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--cosmos-radius-round);
  background: var(--cosmos-accent);
}

/* Theme toggle - same behaviour as the hub. */
.cosmos-theme-toggle {
  min-height: 2.25rem;
  min-width: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--cosmos-chrome-line);
  border-radius: var(--cosmos-radius-round);
  background: var(--cosmos-chrome-raised);
  color: var(--cosmos-chrome-ink);
  cursor: pointer;
  transition: background-color 160ms ease-out;
}

.cosmos-theme-toggle:hover {
  background: var(--cosmos-chrome-soft);
}

.cosmos-theme-toggle svg {
  width: 1rem;
  height: 1rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cosmos-theme-toggle__moon { display: none; }
:root[data-theme="dark"] .cosmos-theme-toggle__sun { display: none; }
:root[data-theme="dark"] .cosmos-theme-toggle__moon { display: inline; }

/* Utility footer - always dark, optional. */
.cosmos-utility-line {
  min-height: 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.25rem 1rem;
  border-top: 1px solid var(--cosmos-chrome-line);
  background: var(--cosmos-chrome-bg);
  color: var(--cosmos-chrome-muted);
  font-size: 0.75rem;
}

.cosmos-utility-line a {
  color: var(--cosmos-chrome-muted);
}

.cosmos-utility-line a:hover {
  color: var(--cosmos-chrome-ink);
}

/* ---------------------------------------------------------------- */
/* Bootstrap 5.3 bridge - content area family resemblance            */
/* ---------------------------------------------------------------- */

/* Primary actions go MRS teal; focus goes MRS orange (hub behaviour).
 *
 * 11/08/2026 correction: setting only the --bs-btn-* custom properties
 * doesn't reliably win. Several apps (ContentGuard/Winston/ContentWriter's
 * shared Tailwind-compiled app.css) carry their OWN hardcoded
 * `.btn-primary{background:#ffc700 ...}`-style rule at equal specificity,
 * loaded before this file — it wins the background-color property outright
 * because it's a literal value, not a variable read, so nothing later that
 * only sets --bs-btn-bg ever gets a chance to compete on that property.
 * Every rule below now sets the real properties directly, !important, so it
 * wins regardless of what a given app's own legacy CSS already claims.
 * Verified against ContentGuard's actual compiled output, not assumed. */
.btn-primary {
  background-color: var(--cosmos-accent-strong) !important;
  border-color: var(--cosmos-accent-strong) !important;
}
.btn-primary:hover, .btn-primary:focus {
  background-color: color-mix(in srgb, var(--cosmos-accent-strong) 82%, var(--mrs-black)) !important;
  border-color: color-mix(in srgb, var(--cosmos-accent-strong) 82%, var(--mrs-black)) !important;
}
.btn-primary:active {
  background-color: color-mix(in srgb, var(--cosmos-accent-strong) 70%, var(--mrs-black)) !important;
  border-color: color-mix(in srgb, var(--cosmos-accent-strong) 70%, var(--mrs-black)) !important;
}

.btn-outline-primary {
  color: var(--cosmos-accent-ink) !important;
  border-color: var(--cosmos-accent-strong) !important;
}
.btn-outline-primary:hover, .btn-outline-primary:active {
  background-color: var(--cosmos-accent-strong) !important;
  border-color: var(--cosmos-accent-strong) !important;
}

/* Component-kit addition, 11/08/2026: Bootstrap's stock semantic greens/
   blues showed up unbridged on client-facing screens (Orion's admin
   actions). Same MRS palette the rest of the bridge uses, not new hues. */
.btn-success {
  background-color: var(--mrs-dark-teal) !important;
  border-color: var(--mrs-dark-teal) !important;
}
.btn-success:hover, .btn-success:focus {
  background-color: color-mix(in srgb, var(--mrs-dark-teal) 82%, var(--mrs-black)) !important;
  border-color: color-mix(in srgb, var(--mrs-dark-teal) 82%, var(--mrs-black)) !important;
}
.btn-success:active {
  background-color: color-mix(in srgb, var(--mrs-dark-teal) 70%, var(--mrs-black)) !important;
  border-color: color-mix(in srgb, var(--mrs-dark-teal) 70%, var(--mrs-black)) !important;
}

.btn-info {
  background-color: var(--mrs-bondi-blue) !important;
  border-color: var(--mrs-bondi-blue) !important;
  color: #fff !important;
}
.btn-info:hover, .btn-info:focus {
  background-color: color-mix(in srgb, var(--mrs-bondi-blue) 82%, var(--mrs-black)) !important;
  border-color: color-mix(in srgb, var(--mrs-bondi-blue) 82%, var(--mrs-black)) !important;
  color: #fff !important;
}
.btn-info:active {
  background-color: color-mix(in srgb, var(--mrs-bondi-blue) 70%, var(--mrs-black)) !important;
  border-color: color-mix(in srgb, var(--mrs-bondi-blue) 70%, var(--mrs-black)) !important;
  color: #fff !important;
}

.btn-outline-light {
  color: var(--cosmos-ink) !important;
  border-color: var(--cosmos-rule) !important;
}
.btn-outline-light:hover, .btn-outline-light:active {
  background-color: var(--cosmos-surface-muted) !important;
  color: var(--cosmos-ink) !important;
  border-color: var(--cosmos-rule) !important;
}

/* Orange-on-black accent action — replaces per-app .btn-mrs/.cg-btn-mrs
   hand-rolled hex with the canonical token pair. */
.cosmos-btn-accent {
  color: var(--mrs-black) !important;
  background-color: var(--mrs-orange) !important;
  border-color: var(--mrs-orange) !important;
}
.cosmos-btn-accent:hover, .cosmos-btn-accent:focus {
  color: var(--mrs-black) !important;
  background-color: color-mix(in srgb, var(--mrs-orange) 85%, var(--mrs-black)) !important;
  border-color: color-mix(in srgb, var(--mrs-orange) 85%, var(--mrs-black)) !important;
}

.text-primary { color: var(--cosmos-accent-ink) !important; }
.bg-primary { background-color: var(--cosmos-accent-strong) !important; }

a {
  color: var(--cosmos-accent-ink);
}

.form-control:focus,
.form-select:focus,
.btn:focus-visible {
  border-color: var(--cosmos-focus);
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--cosmos-focus) 30%, transparent);
}

.badge.text-bg-primary {
  background-color: var(--cosmos-accent-strong) !important;
  color: var(--mrs-backboard-grey) !important;
}

/* Headings pick up the display face. */
h1, h2, h3, .h1, .h2, .h3 {
  font-family: var(--cosmos-font-display);
}