/* ═══════════════════════════════════════════════════════════════
   NADI Global Stylesheet
   Universiti Brunei Darussalam — NADI Platform v1.0
   Applies to ALL pages across the NADI platform.
═══════════════════════════════════════════════════════════════ */

/* ── Brand tokens ─────────────────────────────────────────── */
:root {
  /* NADI Brand Palette (per Brand Guideline v1, May 2026).
     Core: Indigo / Dodger / Aqua. Cold Morning is the neutral grey.
     Secondary: Pear / Lavender / Saffron / Ruby / Dark Jade — used
     sparingly for status pills and warning surfaces. */
  --nadi-indigo:    #2a1a8c;
  --nadi-dodger:    #397de8;
  --nadi-aqua:      #2de4e7;
  --nadi-cold:      #e5e5e5;
  --nadi-black:     #000000;
  --nadi-pear:      #d9e73c;
  --nadi-lavender:  #d5b4fb;
  --nadi-saffron:   #f9982f;
  --nadi-ruby:      #eb1763;
  --nadi-jade:      #047954;

  /* Legacy aliases — repointed to the NADI palette so existing
     `--ocean`/`--teal`/`--gold` references shift in lockstep. Kept
     for backwards-compat across thousands of usages; new code should
     prefer the `--nadi-*` names directly. */
  --ocean:        #2a1a8c;            /* was UBD Ocean #325494 → NADI Indigo */
  --ocean-dark:   #25147a;            /* darker shade of indigo */
  --ocean-deep:   #170c4a;            /* deepest indigo for hero stops */
  --teal:         #74c1a1;            /* kept — soft success / pill bg */
  --teal-light:   #a8d9c2;
  --gold:         #f9982f;            /* was UBD Gold #f5c946 → NADI Saffron */
  --white:        #ffffff;

  /* UI Surfaces */
  --canvas:       #f0f3f9;
  --surface:      #f8fafc;
  --text-h:       #0f172a;
  --text-b:       #374151;
  --text-m:       #686f7d; /* darkened from #6b7280 for AA contrast (4.5:1) against light card/page backgrounds — found by the Playwright QA sweep, tests/mobile-qa */
  --text-f:       #9ca3af;
  --border:       #e5e7eb;
  --border-light: #f1f5f9;

  /* Shadows */
  --shadow-sm:   0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --shadow-md:   0 4px 14px rgba(15,23,42,.08), 0 2px 6px rgba(15,23,42,.05);
  --shadow-lg:   0 12px 36px rgba(15,23,42,.10), 0 4px 12px rgba(15,23,42,.06);
  --shadow-card: 0 2px 8px rgba(42, 26, 140,.07), 0 1px 3px rgba(15,23,42,.05);
  --shadow-hover:0 12px 32px rgba(42, 26, 140,.14), 0 4px 12px rgba(15,23,42,.08);

  /* Radius scale */
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  24px;
  --pill:  999px;

  /* Layout */
  --topbar-h:    64px;
  --statusbar-h: 36px;

  /* ── Responsive tokens (mobile-responsiveness Phase 0) ──────
     See docs/mobile-responsiveness/05-responsive-strategy.md §1.
     Breakpoints: CSS custom properties can't be referenced inside an
     `@media` condition, so these are documentation/JS-readable
     constants only — every @media rule in the codebase must hardcode
     the matching px value, with a `/* --bp-* */` comment for
     traceability. New code must use one of these four tiers; no more
     one-off breakpoints in page `@push('page-css')` blocks. */
  --bp-sm:  640px;  /* phone → large phone: 1-col → 2-col tiles */
  --bp-md:  768px;  /* tablet portrait: secondary table columns, 2–3 col grids */
  --bp-lg: 1024px;  /* tablet landscape / small laptop: sidebar rail, multi-col dashboards. Single sidebar-collapse breakpoint app-wide. */
  --bp-xl: 1280px;  /* desktop: max content width, wider gutters */

  /* Content gutters — mobile-first, widen at each tier. */
  --gutter-sm: 16px;
  --gutter-md: 24px;
  --gutter-lg: 32px;

  /* Minimum touch-target size (WCAG 2.5.5). Apply to buttons, inputs,
     nav items, pagination controls — anything tappable. */
  --tap-min: 44px;

  /* Fluid type scale (rem-based) — for new/touched code. Migrating the
     ~5,000 existing px font-size declarations is a later, opportunistic
     pass (Doc 05 §4), not part of this token rollout. */
  --fs-xs:   0.75rem;   /* 12px */
  --fs-sm:   0.8125rem; /* 13px */
  --fs-base: 0.875rem;  /* 14px */
  --fs-md:   1rem;      /* 16px */
  --fs-lg:   1.25rem;   /* 20px */
  --fs-xl:   1.5rem;    /* 24px */
  --fs-2xl:  1.875rem;  /* 30px */
}

/* ── Reset ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--text-b);
  background: var(--canvas);
}

/* Headings keep Poppins — display-weight presence is part of the NADI
   identity, while body copy uses Inter (Brand Guideline v1, May 2026). */
h1, h2, h3, h4, h5, h6,
.dash-title, .dash-feature-headline, .dash-card-eyebrow,
.psc-title, .psc-eyebrow,
.hrms-title, .hrms-eyebrow,
.reg-step-title, .reg-step-eyebrow,
.tb-brand-name, .student-brand-name {
  font-family: 'Poppins', 'Inter', system-ui, sans-serif;
}

/* ── Accessibility ────────────────────────────────────────── */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ── Scrollbar ────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(42, 26, 140,.18); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(42, 26, 140,.30); }

/* ── Utility ──────────────────────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ═══════════════════════════════════════════════════════════════
   Project-branded SweetAlert2 modal header.

   Applies to every Swal popup that uses `customClass.popup =
   'swal-popup'` (the project convention). Reserves 78px at the top
   of the popup and paints the NADI logo on the left + UBD logo on
   the right via a `::before` pseudo, so the branding shows up on
   every modal without touching any JS.

   Specificity: chaining `.swal2-popup.swal-popup` lifts this to
   (0,2,0), which wins against the layer-specific `.swal-popup` rule
   in admin.css (0,1,0) regardless of stylesheet load order — so
   later !important paddings can't clobber the header reservation.
═══════════════════════════════════════════════════════════════ */
.swal2-popup.swal-popup {
  padding-top: 108px !important;
  position: relative;
}
.swal2-popup.swal-popup::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 90px;
  /* Left = canonical NADI brand chip (`nadi-icon-01.svg`); right = UBD logo.
     The NADI SVG has roughly ⅓ internal whitespace inside its 1080×1080
     viewBox, so it has to render larger than UBD to match the visual
     weight of the UBD wordmark. Sizes tuned so chip and UBD wordmark
     appear at similar optical height. Paths are relative to this CSS
     file (/nadi/public/css/nadi.css) so XAMPP serves them at
     /nadi/public/images/… — absolute /images/… would 404 since the app
     isn't mounted at the host root. */
  background-image:
    url('../images/nadi-brand/nadi-icon-01.svg'),
    url('../images/ubd-logo-ocean.png?v=2026b');
  background-position: 16px center, calc(100% - 18px) center;
  background-size: auto 88px, auto 38px;
  background-repeat: no-repeat, no-repeat;
  background-color: #f8fafc;
  border-bottom: 1px solid #e5e7eb;
  border-radius: 14px 14px 0 0;
}
/* Tighter logos on small viewports so they don't visually crowd. */
@media (max-width: 480px) {
  .swal2-popup.swal-popup {
    padding-top: 88px !important;
  }
  .swal2-popup.swal-popup::before {
    height: 72px;
    background-size: auto 70px, auto 30px;
    background-position: 10px center, calc(100% - 12px) center;
  }
}