/* ============================================================
   EUCCDB - 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
   ============================================================ */
.btn, .btn-ghost, .btn-sm, .btn-primary, .btn-blue, .btn-outline,
.btn-yellow, .btn-ink, .btn-blue-sm, .btn-submit, .btn-callout, a.btn,
.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;
}
.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-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-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
   ============================================================ */
.form-input, .form-select, .cw-field, .field,
input:not([type=checkbox]):not([type=radio]):not([type=range]),
select, textarea {
  border-radius: var(--md-sm);
}
.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, .school-badge, .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;
}