/* ============================================================
   EUPDB - Material Design 3 system (AESTHETIC ONLY)
   ------------------------------------------------------------
   A real MD3 layer applied on top of the EXISTING palette:
   shape scale, tonal elevation, MD3 motion, interaction STATE
   LAYERS (8% hover / 12% pressed per MD3), MD3 label typography
   on controls, filled/outlined fields, elevated cards, chips,
   switches, dialogs and nav active states.
   It sets NO brand colours, changes NO layout structure, IDs,
   routes or behaviour, and is pure CSS. Remove this file (or its
   <link>) to fully revert. Loaded LAST so it refines the surface.
   ============================================================ */

:root {
  /* Shape scale */
  --md-xs: 4px; --md-sm: 8px; --md-md: 12px; --md-lg: 16px;
  --md-xl: 28px; --md-full: 999px;

  /* Tonal elevation (light, softened for a clean white UI) */
  --md-e1: 0 1px 2px rgba(10,12,30,.14), 0 1px 3px 1px rgba(10,12,30,.07);
  --md-e2: 0 1px 2px rgba(10,12,30,.16), 0 2px 6px 2px rgba(10,12,30,.08);
  --md-e3: 0 4px 8px 3px rgba(10,12,30,.09), 0 1px 3px rgba(10,12,30,.18);
  --md-e4: 0 6px 10px 4px rgba(10,12,30,.10), 0 2px 3px rgba(10,12,30,.18);

  /* Motion */
  --md-ease: cubic-bezier(.2,0,0,1);
  --md-ease-emph: cubic-bezier(.2,0,0,1);
  --md-ease-decel: cubic-bezier(.05,.7,.1,1);
  --md-t1: .15s; --md-t2: .28s; --md-t3: .4s;

  /* State-layer + neutral helpers (palette-safe) */
  --md-hover-dark: rgba(10,12,30,.08);   /* state layer on light surfaces (MD3 hover 8%) */
  --md-press-dark: rgba(10,12,30,.10);
  --md-hover-lite: rgba(255,255,255,.12); /* state layer on dark surfaces */
  --md-press-lite: rgba(255,255,255,.20);
  --md-ring: rgba(10,12,30,.60);          /* focus ring on light surfaces (>=3:1 on white) */
  --md-ring-lite: rgba(255,255,255,.92);  /* focus ring on dark / filled surfaces */

  /* ---- MD3 spec-named aliases (portability; rules below use the short names) ---- */
  --md-sys-shape-corner-extra-small: var(--md-xs);
  --md-sys-shape-corner-small:       var(--md-sm);
  --md-sys-shape-corner-medium:      var(--md-md);
  --md-sys-shape-corner-large:       var(--md-lg);
  --md-sys-shape-corner-extra-large: var(--md-xl);
  --md-sys-shape-corner-full:        var(--md-full);
  --md-sys-motion-easing-standard:              var(--md-ease);
  --md-sys-motion-easing-emphasized:            var(--md-ease-emph);
  --md-sys-motion-easing-emphasized-decelerate: var(--md-ease-decel);
  --md-sys-motion-duration-short:  var(--md-t1);
  --md-sys-motion-duration-medium: var(--md-t2);
  --md-sys-motion-duration-long:   var(--md-t3);
  --md-sys-elevation-level1: var(--md-e1);
  --md-sys-elevation-level2: var(--md-e2);
  --md-sys-elevation-level3: var(--md-e3);
  --md-sys-elevation-level4: var(--md-e4);
}

/* ---------- Global rhythm (MD3 body) ---------- */
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: .01em; }

/* ---------- Motion on interactive surfaces ---------- */
.btn, .btn-ghost, .btn-sm, .btn-primary, .btn-blue, .btn-icon, .btn-outline,
.btn-yellow, .btn-ink, .btn-blue-sm, .btn-submit, .btn-callout, button, a.btn,
.oauth-btn, .sim-oauth-btn, .nav-in, .plan-cta, .plan-cta-primary, .plan-cta-ghost,
.modal-cta, .sc-cta, .text-cta, .cw-next, .cw-back, .cw-chip, .cc-chip, .filter-chip,
.form-input, .form-select, .cw-field, .field, input, select, textarea,
.sidebar-item, .tab, .faq-q, .info-card, .metric-card, .plan-card, .news-card,
.portal-card, .selector-card, .stat-card, .airline-card, .pc-item, .toggle-option {
  transition:
    background-color var(--md-t1) var(--md-ease),
    background-image var(--md-t1) var(--md-ease),
    box-shadow var(--md-t2) var(--md-ease),
    border-color var(--md-t1) var(--md-ease),
    transform var(--md-t2) var(--md-ease-emph),
    color var(--md-t1) var(--md-ease);
}

/* ============================================================
   BUTTONS - MD3 shape + Label Large typography + state layers
   ============================================================ */
/* Every button on the site takes the MD3 full-round shape. This list is the one
   place that decides button shape: if a new button class is not in it, it will
   silently keep whatever radius its page happened to set, which is how buttons
   stacked on top of each other ended up with different shapes. Add new button
   classes HERE rather than setting border-radius on the page. */
.btn, .btn-ghost, .btn-sm, .btn-primary, .btn-blue, .btn-outline,
.btn-tonal, .btn-yellow, .btn-ink, .btn-blue-sm, .btn-submit, .btn-callout, a.btn,
.btn-back, .btn-oauth, .btn-proceed, .btn-cancel,
.btn-terms-accept, .btn-terms-cancel, .btn-terms-print,
.cw-onb-exit, .cw-skip, .cw-oauth-btn, .cw-upload, .cw-toggle a,
.oauth-btn, .sim-oauth-btn, .nav-in, .plan-cta, .plan-cta-primary,
.plan-cta-ghost, .modal-cta, .sc-cta, .cw-next, .cw-back {
  border-radius: var(--md-full);
  letter-spacing: .02em;
  font-weight: 600;
}

/* Chips are pills too (MD3 assist/filter chip). */
.aircraft-tag-sm, .cc-chip, .filter-chip { border-radius: var(--md-full); }
.btn-icon { border-radius: var(--md-full); }

/* State layer - FILLED / dark buttons (light overlay) */
.btn-primary:hover, .btn-blue:hover, .btn-ink:hover, .btn-blue-sm:hover,
.btn-submit:hover, .btn-callout:hover, .plan-cta-primary:hover, .modal-cta:hover,
.sc-cta:hover, .cw-next:hover, .oauth-btn.linkedin:hover, .sim-oauth-btn.linkedin:hover {
  background-image: linear-gradient(var(--md-hover-lite), var(--md-hover-lite));
  box-shadow: var(--md-e2);
}
.btn-primary:active, .btn-blue:active, .btn-ink:active, .btn-submit:active,
.plan-cta-primary:active, .modal-cta:active, .cw-next:active {
  background-image: linear-gradient(var(--md-press-lite), var(--md-press-lite));
  box-shadow: var(--md-e1);
}

/* State layer - LIGHT / tonal / outlined / text buttons (dark overlay) */
.btn-tonal:hover, .btn-ghost:hover, .btn-outline:hover, .btn-yellow:hover, .btn-icon:hover,
.text-cta:hover, .plan-cta-ghost:hover, .nav-in:hover, .cw-back:hover,
.oauth-btn.google:hover, .sim-oauth-btn.google:hover, .toggle-option:hover {
  background-image: linear-gradient(var(--md-hover-dark), var(--md-hover-dark));
}
.btn-tonal:active, .btn-ghost:active, .btn-outline:active, .btn-yellow:active,
.text-cta:active, .plan-cta-ghost:active {
  background-image: linear-gradient(var(--md-press-dark), var(--md-press-dark));
}

/* ============================================================
   TEXT FIELDS - MD3 outlined field feel
   ============================================================ */
/* EVERY form control shares one radius. This selector is deliberately broad
   (bare input/select/textarea, not just the helper classes) because pages that
   style their own fields inline were producing four different shapes on one
   screen: text inputs, selects, date pickers and search boxes all disagreeing.
   Search fields are pills to match the buttons they sit beside. */
.form-input, .form-select, .cw-field, .field,
input:not([type=checkbox]):not([type=radio]):not([type=range]),
select, textarea {
  border-radius: var(--md-sm) !important;
}
.form-input:focus, .form-select:focus, .cw-field:focus, .field:focus,
input:not([type=checkbox]):not([type=radio]):focus, select:focus, textarea:focus {
  box-shadow: 0 0 0 3px var(--md-hover-dark);
}

/* ============================================================
   CARDS / SURFACES - MD3 shape + tonal elevation
   ============================================================ */
.info-card, .metric-card, .plan-card, .news-card, .portal-card,
.selector-card, .stat-card, .airline-card, .pc-item, .attest-why-card,
.compliance-tag, .why-col, .intro-stat, .content-block, .tab-panel,
.faq-item, .path-step, .cards-2x2 > *, .card {
  border-radius: var(--md-md); /* MD3 card corner = medium (12dp) */
}
.info-card, .metric-card, .plan-card, .news-card, .airline-card,
.stat-card, .selector-card {
  box-shadow: var(--md-e1);
}
.info-card:hover, .metric-card:hover, .news-card:hover, .airline-card:hover,
.pc-item:hover, .selector-card:hover, .portal-card:hover {
  box-shadow: var(--md-e3);
  transform: translateY(-2px);
}

/* ============================================================
   CHIPS - MD3 chip
   ============================================================ */
.cw-chip, .cc-chip, .filter-chip, .page-header-chip, .hero-right-pill,
.badge, .badge-blue, .badge-green, .platform-badge, .marquee-item {
  border-radius: var(--md-full);
}
.cw-chip:hover, .cc-chip:hover, .filter-chip:hover {
  background-image: linear-gradient(var(--md-hover-dark), var(--md-hover-dark));
}

/* ============================================================
   SWITCHES / TOGGLES - MD3 pill
   ============================================================ */
.switch, .switch-track, .toggle-track, .toggle-option {
  border-radius: var(--md-full);
}
.switch-thumb, .toggle-thumb { border-radius: var(--md-full); }

/* ============================================================
   NAVIGATION - MD3 active indicator + state layer
   ============================================================ */
.sidebar-item { border-radius: var(--md-full); }
.sidebar-item:hover {
  background-image: linear-gradient(var(--md-hover-dark), var(--md-hover-dark));
}
.tab { border-radius: var(--md-sm) var(--md-sm) 0 0; }

/* ============================================================
   DIALOGS / MODALS - MD3 extra-large shape + elevation
   ============================================================ */
.modal { border-radius: var(--md-xl); box-shadow: var(--md-e4); }

/* ============================================================
   FOCUS - MD3 focus ring (accessibility)
   ============================================================ */
a:focus-visible, button:focus-visible, .btn:focus-visible, .nav-in:focus-visible,
.oauth-btn:focus-visible, .sim-oauth-btn:focus-visible, .sidebar-item:focus-visible,
.form-input:focus-visible, .form-select:focus-visible, .cw-field:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--md-ring);
  outline-offset: 2px;
}

/* ============================================================
   SCROLLBAR + SELECTION (subtle MD3 polish, palette-safe)
   ============================================================ */
::selection { background: rgba(10,12,30,.12); }
* { scrollbar-width: thin; }

/* ============================================================
   FOCUS RING on DARK / FILLED surfaces (a11y)
   The default --md-ring is near-invisible on dark buttons; give
   those a light ring instead so keyboard focus stays visible.
   (Same selector set as the FILLED-button state layer above.)
   ============================================================ */
.btn-primary:focus-visible, .btn-blue:focus-visible, .btn-ink:focus-visible,
.btn-blue-sm:focus-visible, .btn-submit:focus-visible, .btn-callout:focus-visible,
.plan-cta-primary:focus-visible, .modal-cta:focus-visible, .sc-cta:focus-visible,
.cw-next:focus-visible, .sim-btn:focus-visible,
.oauth-btn.linkedin:focus-visible, .sim-oauth-btn.linkedin:focus-visible {
  outline: 2px solid var(--md-ring-lite);
  outline-offset: 2px;
}

/* ============================================================
   SNACKBARS / TOASTS - MD3 surface + elevation
   Covers success / warning / error / info notifications.
   ============================================================ */
.toast, #_toast {
  border-radius: var(--md-md);
  box-shadow: var(--md-e3);
}

/* ============================================================
   SIGN-IN / RESET DIALOG (JS-injected) - MD3 shape on every
   part, including the inline ERROR & SUCCESS messages.
   (The injected stylesheet sets no border-radius, so these win.)
   ============================================================ */
.sim-card    { border-radius: var(--md-xl); box-shadow: var(--md-e4); }
.sim-input   { border-radius: var(--md-sm); }
.sim-btn     { border-radius: var(--md-full); letter-spacing: .02em; }
.sim-error, .sim-success { border-radius: var(--md-sm); }
.sim-backdrop { backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }

/* ============================================================
   DASHBOARD DIALOGS built inline (student / course / detail) -
   round the dialog card + blur the scrim. Reached via #id and
   #id > div; the inline styles set neither, so no markup change.
   ============================================================ */
#_studentModal, #_courseModal, #_courseDetailModal {
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
#_studentModal > div, #_courseModal > div, #_courseDetailModal > div {
  border-radius: var(--md-xl);
}

/* ============================================================
   BADGES - ensure every variant carries the MD3 pill shape
   ============================================================ */
.badge, .badge-blue, .badge-gold, .badge-green, .badge-red, .badge-gray {
  border-radius: var(--md-full);
}

/* ============================================================
   REDUCED MOTION - honour prefers-reduced-motion (a11y).
   Near-zero (not 0) so JS 'transitionend' listeners still fire,
   keeping every animation-gated behaviour intact.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .info-card:hover, .metric-card:hover, .news-card:hover, .airline-card:hover,
  .pc-item:hover, .selector-card:hover, .portal-card:hover { transform: none; }
}

/* ============================================================
   GLASSMORPHISM, "glass on chrome" surfaces ONLY
   (nav, menus, dialogs, overlays, toasts). Data tables and
   dashboard cards stay opaque + high-contrast for legibility.
   ============================================================ */
:root {
  --md-glass-bg:        rgba(255,255,255,.72);
  --md-glass-bg-strong: rgba(255,255,255,.85);  /* dialogs/toasts: keeps text crisp */
  --md-glass-blur:      saturate(180%) blur(20px);
  --md-glass-border:    rgba(255,255,255,.55);
  --md-glass-hairline:  rgba(10,12,30,.08);
  --md-scrim:           rgba(10,12,30,.34);      /* MD3 scrim behind dialogs */
}

/* Reusable utility */
.md-glass {
  background: var(--md-glass-bg);
  -webkit-backdrop-filter: var(--md-glass-blur);
  backdrop-filter: var(--md-glass-blur);
  border: 1px solid var(--md-glass-border);
}

/* Dialogs / form modals -> frosted glass */
.modal {
  background: var(--md-glass-bg-strong);
  -webkit-backdrop-filter: var(--md-glass-blur);
  backdrop-filter: var(--md-glass-blur);
  border: 1px solid var(--md-glass-border);
}
/* Sign-in dialog: SOLID WHITE (the logo sits flush on white, no glass seam),
   with the logo centred. The scrim behind stays glassy. Higher specificity
   beats the JS-injected .sim-card / .sim-logo rules. */
.sim-backdrop .sim-card {
  background: #fff;
}
.sim-backdrop .sim-logo { text-align: center; }

/* Toasts -> frosted glass (keeps the coloured status border-left) */
.toast, #_toast {
  background: var(--md-glass-bg-strong);
  -webkit-backdrop-filter: var(--md-glass-blur);
  backdrop-filter: var(--md-glass-blur);
}

/* Scrims behind dialogs -> unified MD3 scrim tint + light blur.
   !important overrides the JS-injected and inline scrim colours. */
.modal-overlay, .sim-backdrop,
#_studentModal, #_courseModal, #_courseDetailModal {
  background: var(--md-scrim) !important;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

/* ============================================================
   SKELETON LOADING, animated placeholder shown while real data
   is being fetched (replaces fake values flashing on load).
   ============================================================ */
@keyframes md-skeleton { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.skeleton {
  display: inline-block;
  border-radius: 6px;
  color: transparent !important;
  background: linear-gradient(90deg,
    rgba(10,12,30,.06) 25%, rgba(10,12,30,.13) 37%, rgba(10,12,30,.06) 63%);
  background-size: 200% 100%;
  animation: md-skeleton 1.4s ease-in-out infinite;
  user-select: none;
  pointer-events: none;
}

/* ============================================================
   FILLED TONAL BUTTON (MD3) - medium emphasis.
   Sits between the filled primary and a text/ghost button, for a
   secondary action that still needs to be noticed. No elevation at
   rest, per the MD3 spec.
   ============================================================ */
.btn-tonal {
  background: rgba(10,34,64,0.10);
  color: #0B1622;
  border: 1px solid transparent;
  box-shadow: none;
}
.btn-tonal:hover  { box-shadow: var(--md-e1); }
.btn-tonal:focus-visible { outline: 2px solid var(--md-ring); outline-offset: 2px; }
.btn-tonal .fa-solid, .btn-tonal .fa-regular { color: inherit; }

/* ============================================================
   SHAPE CONSISTENCY BACKSTOP
   ------------------------------------------------------------
   Pages set border-radius inline on their own buttons and fields,
   which is how one screen ended up showing pills, 12px rectangles
   and squares side by side. These rules are the final word on
   shape so a page cannot disagree with the design system.
   Buttons and chips: full round. Fields: small. Cards: medium.
   Dialogs: extra large.
   ============================================================ */
button:not(.btn-icon):not([class*="close"]):not([class*="chk"]),
.btn, a.btn, .modal-cta, .plan-cta, .sc-cta, .cw-next, .cw-back,
.cw-chip, .cc-chip, .filter-chip, .aircraft-tag-sm, .badge, .status-active,
.status-pending, .status-placed, .status-inactive, .flag-no-att, .col-spec-tag {
  border-radius: var(--md-full) !important;
}

/* Round icon-only controls stay circles. */
.btn-icon, .cw-close, .user-avatar, .cand-av, .sc-icon { border-radius: 50% !important; }

/* Search boxes sit next to buttons, so they take the same pill. */
input[type="search"], input[placeholder*="Search"], input[placeholder*="search"] {
  border-radius: var(--md-full) !important;
}