/* ==========================================================================
   NEBAWASCO design system: global layer
   --------------------------------------------------------------------------
   Source of truth: docs/NEBAWASCO_DESIGN.md (keep §5 tokens in sync).
   Loaded on every page by layouts/app-master.blade.php, after the theme CSS
   and after cn-design-system.css, so these rules win ties.

   What this file does
     1. Tokens        the doc's CSS variables, plus its opacity variants
     2. Base          Inter 14/20 body text, navy headings (Outfit for H1-H2),
                      ice-blue app background, cyan focus ring (doc §1, §5)
     3. App chrome    top bar, footer
     4. Theme fixes   colour-only swaps where material-dashboard shows its
                      pink on every page (outline inputs)
   The sidebar is styled in layouts/sidenav/sidebar.blade.php (its inline
   <style> loads after this file). Components (cards, buttons, tables...) are
   the cn-* classes in cn-design-system.css, which read these tokens.
   Bootstrap/material components (.btn, .card, .form-control) keep the theme's
   look until a page is converted.

   Derived colours use color-mix() (Chrome/Edge 111+, Firefox 113+, Safari 16.2+).
   ========================================================================== */

/* ── 1. Tokens ─────────────────────────────────────────────────────────── */
:root {
  --neb-ocean: #0052CC;
  --neb-navy: #0B192C;
  --neb-cyan: #00E5FF;
  --neb-teal: #009688;
  --neb-surface: #F4FAFF;
  --neb-text: #0F172A;

  --neb-radius-card: 12px;
  --neb-radius-card-lg: 16px;
  --neb-radius-pill: 9999px;

  --neb-shadow: 0 4px 6px -1px rgba(11,25,44,0.08);
  --neb-liquid: linear-gradient(90deg, var(--neb-ocean), var(--neb-cyan));

  --neb-font-display: 'Outfit', 'Inter', system-ui, sans-serif;
  --neb-font-sans: 'Inter', system-ui, sans-serif;
  --neb-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* From the doc's component patterns (§6) */
  --neb-ocean-hover: #0047B3;   /* primary button hover */

  /* The doc's opacity variants (neb-text/70, /20, /10), mixed with white so
     they stay solid when layered */
  --neb-text-70: color-mix(in srgb, var(--neb-text) 70%, white);
  --neb-text-50: color-mix(in srgb, var(--neb-text) 50%, white);
  --neb-line: color-mix(in srgb, var(--neb-text) 20%, white);     /* input borders */
  --neb-line-soft: color-mix(in srgb, var(--neb-text) 10%, white); /* dividers, outlines */
}

/* ── 2. Base ───────────────────────────────────────────────────────────── */
:root {
  /* Bootstrap / material read these */
  --bs-font-sans-serif: var(--neb-font-sans);
  --bs-body-font-family: var(--neb-font-sans);
  --bs-body-font-size: 14px;
  --bs-body-line-height: 20px;
  --bs-body-color: var(--neb-text);
  --bs-font-monospace: var(--neb-font-mono);
}
body {
  font: 400 14px/20px var(--neb-font-sans);
  color: var(--neb-text);
}
/* the layout's body carries .bg-gray-200 (!important) */
body.g-sidenav-show,
body.bg-gray-200 { background-color: var(--neb-surface) !important; }

h1, .h1, h2, .h2 { font-family: var(--neb-font-display); }
h3, .h3, h4, .h4, h5, .h5, h6, .h6 { font-family: var(--neb-font-sans); }
/* Headings take the surrounding text colour instead of the theme's #344767.
   On light pages that is --neb-text (next to the doc's navy); on the many dark
   banners that set color:#fff it is white, as those pages intend. Components
   that need the doc's navy set it themselves (e.g. .cn-page-title). */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { color: inherit; }
p { font-weight: 400; }                          /* theme sets 300 */
.card .card-body { font-family: inherit; }      /* theme forces Roboto */
code, kbd, pre, samp { font-family: var(--neb-font-mono); }

/* Doc §1.6: 2px cyan ring on everything interactive */
:focus-visible { outline: 2px solid var(--neb-cyan) !important; outline-offset: 2px; }
.modal:focus-visible,
[tabindex="-1"]:focus-visible { outline: none !important; }

/* ── 3. App chrome ─────────────────────────────────────────────────────── */
/* Top bar: a white card on the ice-blue page */
#navbarBlur {
  background: white !important;
  border-radius: var(--neb-radius-card-lg) !important;
  box-shadow: var(--neb-shadow) !important;
}
#navbarBlur .nav-link,
#navbarBlur .nav-link .nav-link-text { color: var(--neb-navy) !important; }
#navbarBlur .nav-link:hover { color: var(--neb-ocean) !important; }

.footer .copyright { color: var(--neb-text-70) !important; }
.footer a { color: var(--neb-ocean); }
.footer .nav-footer .nav-link { color: var(--neb-text-70) !important; }
.footer .nav-footer .nav-link:hover { color: var(--neb-ocean) !important; }
/* The loading overlay and sidebar toggle are styled inline in app-master. */

/* ── 4. Theme fixes (colour only) ──────────────────────────────────────── */
/* material-dashboard's outline inputs focus in pink; use ocean blue */
.input-group.input-group-outline.is-focused .form-label + .form-control,
.input-group.input-group-outline.is-filled .form-label + .form-control {
  border-color: var(--neb-ocean) !important;
  border-top-color: transparent !important;
  box-shadow: inset 1px 0 var(--neb-ocean), inset -1px 0 var(--neb-ocean), inset 0 -1px var(--neb-ocean);
}
.input-group.input-group-outline.is-focused .form-label,
.input-group.input-group-outline.is-filled .form-label { color: var(--neb-ocean); }
.input-group.input-group-outline.is-focused .form-label:before,
.input-group.input-group-outline.is-focused .form-label:after,
.input-group.input-group-outline.is-filled .form-label:before,
.input-group.input-group-outline.is-filled .form-label:after {
  border-top-color: var(--neb-ocean);
  box-shadow: inset 0 1px var(--neb-ocean);
}