/* ==========================================================================
   OFFICIAL GOVERNMENT MEDICAL COLLEGE PORTAL
   "INSTITUTIONAL DEPTH" DESIGN SYSTEM  ·  v4.0
   --------------------------------------------------------------------------
   A site-wide visual layer that sits ON TOP of style.css + app.css.
   It restyles the shared class vocabulary already used by every view, so a
   single file re-skins all pages without touching Vue logic or the database.

   All colour derives from --primary-gov, which theme.js writes inline on
   <html> from the admin Settings panel. Changing the theme colour in the
   backend therefore still recolours the entire portal.

   SECTIONS
     01  Design tokens (palette, depth, motion, type)
     02  Base, typography & page scaffold
     03  Decorative depth field (3D ambience)
     04  Top portal bar
     05  Portal branding header
     06  Navigation ribbon, dropdowns & mega menu
     07  Mobile navigation drawer
     08  Notice ticker
     09  Hero slider & subpage banner
     10  Section headings
     11  Surfaces: cards, panels & 3D lift
     12  Sidebar widgets
     13  Quick links, services & leadership cards
     14  Notice lists & document pages
     15  Data tables
     16  Buttons & tactile controls
     17  Forms, search & pagination
     18  Badges, pills & empty states
     19  Dynamic CMS page content
     20  Footer
     21  Utilities: scroll progress, back-to-top, preloader
     21B Editorial rhythm (scale + spacing)
     22  Responsive system
     23  Harmonisation with the legacy layers
     24  Specificity escalation over view-level scoped styles
     25  Motion preferences & print
   ========================================================================== */


/* ==========================================================================
   01 · DESIGN TOKENS
   ========================================================================== */

:root {
  /* ---- Brand spine -------------------------------------------------------
     --primary-gov is supplied at runtime by theme.js from the admin Settings
     panel (currently #0e6b77). Everything below derives from it.

     WHY THIS RAMP LOOKS RICH INSTEAD OF MUDDY
     The first version of this file built its shades with
     `color-mix(in srgb, brand, black/white)`. sRGB interpolation cuts
     straight through the middle of the colour solid, so a saturated teal
     blended toward white passes through a dead grey — which is exactly what
     made the headers and gradients look dusty and washed out.

     The ramp is now built with `oklch(from ...)`:
       · LIGHTNESS is set to a fixed target per step, so 050 is always a
         near-white and 900 is always near-black, whatever hue is chosen.
       · min()/max() clamps keep the ramp from inverting when the admin picks
         an unusually dark brand (navy) or a light one (amber) — without them
         a dark brand made "700" lighter than "600" and gradients ran backward.
       · CHROMA is multiplied, not reduced toward grey: the 500 step gets
         1.25x chroma so the lit end of a gradient is vivid rather than dusty,
         and the deep steps keep enough chroma to stay coloured, not charcoal.

     Three tiers are declared for each token, and the last one the browser
     understands wins:
       1. a static hex (correct for the current teal) for very old engines;
       2. color-mix(in oklab, ...) — right hue for any brand, wide support;
       3. oklch(from ...) — the intended result.                            */

  --brand:              var(--primary-gov, #0e6b77);

  --brand-050:          #eef9fb;
  --brand-050:          color-mix(in oklab, var(--brand) 6%, #ffffff);
  --brand-050:          oklch(from var(--brand) 0.975 calc(c * 0.16) h);

  --brand-100:          #def1f4;
  --brand-100:          color-mix(in oklab, var(--brand) 14%, #ffffff);
  --brand-100:          oklch(from var(--brand) 0.945 calc(c * 0.26) h);

  --brand-200:          #c5e3e8;
  --brand-200:          color-mix(in oklab, var(--brand) 26%, #ffffff);
  --brand-200:          oklch(from var(--brand) 0.895 calc(c * 0.40) h);

  --brand-300:          #94c2ca;
  --brand-300:          color-mix(in oklab, var(--brand) 44%, #ffffff);
  --brand-300:          oklch(from var(--brand) max(calc(l + 0.30), 0.78) calc(c * 0.62) h);

  --brand-400:          #62a3ad;
  --brand-400:          color-mix(in oklab, var(--brand) 66%, #ffffff);
  --brand-400:          oklch(from var(--brand) max(calc(l + 0.19), 0.66) calc(c * 0.85) h);

  /* The "lit" end of every gradient. Clamped so white text stays legible on
     it: at the live teal this is #007f8f, 4.74:1 against white. */
  --brand-500:          #007f8f;
  --brand-500:          color-mix(in oklab, var(--brand) 86%, #ffffff);
  --brand-500:          oklch(from var(--brand) max(calc(l + 0.06), 0.52) calc(c * 1.25) h);

  --brand-600:          var(--brand);

  --brand-700:          #005561;
  --brand-700:          color-mix(in oklab, var(--brand) 82%, #0a1619);
  --brand-700:          oklch(from var(--brand) min(calc(l - 0.08), 0.42) calc(c * 1.05) h);

  --brand-800:          #003843;
  --brand-800:          color-mix(in oklab, var(--brand) 58%, #0a1619);
  --brand-800:          oklch(from var(--brand) min(calc(l - 0.18), 0.31) calc(c * 0.92) h);

  --brand-900:          #00212a;
  --brand-900:          color-mix(in oklab, var(--brand) 34%, #0a1619);
  --brand-900:          oklch(from var(--brand) min(calc(l - 0.26), 0.22) calc(c * 0.78) h);

  --brand-tint-04:      rgba(14, 107, 119, 0.04);
  --brand-tint-04:      color-mix(in srgb, var(--brand) 4%, transparent);
  --brand-tint-08:      rgba(14, 107, 119, 0.08);
  --brand-tint-08:      color-mix(in srgb, var(--brand) 8%, transparent);
  --brand-tint-16:      rgba(14, 107, 119, 0.16);
  --brand-tint-16:      color-mix(in srgb, var(--brand) 16%, transparent);
  --brand-tint-28:      rgba(14, 107, 119, 0.28);
  --brand-tint-28:      color-mix(in srgb, var(--brand) 28%, transparent);

  /* ---- Accent: antique gold ----------------------------------------------
     The ceremonial accent. Softened from a brassy mustard to a champagne
     bronze: beside teal, a high-chroma yellow reads cheap, while a muted
     gold reads like an embossed seal. Used sparingly — the gold rule under
     the top bar, the hero underline, and active navigation only.          */
  --gov-gold:           #cfa54c;
  --gov-gold-light:     #ecd79b;
  --gov-gold-deep:      #7d5c12;
  --gov-gold-pale:      #fdf7e8;

  /* ---- Accent: document red (PDFs, attachments, alerts) ------------------ */
  --gov-crimson:        #b02a37;
  --gov-crimson-light:  #cc4250;

  /* ---- Surfaces ----------------------------------------------------------
     The page carries a breath of the brand hue rather than a neutral grey.
     A grey page makes white cards look dingy; a near-imperceptible brand
     tint makes the same cards read as clean and lit, which also suits a
     medical institution.                                                    */
  --surface:            #ffffff;
  --surface-raised:     #ffffff;

  --surface-page:       #f5fdfe;
  --surface-page:       color-mix(in oklab, var(--brand) 3%, #ffffff);
  --surface-page:       oklch(from var(--brand) 0.988 calc(c * 0.10) h);

  --surface-sunken:     #edf8fa;
  --surface-sunken:     color-mix(in oklab, var(--brand) 6%, #ffffff);
  --surface-sunken:     oklch(from var(--brand) 0.972 calc(c * 0.16) h);

  --surface-frost:      rgba(255, 255, 255, 0.72);
  --surface-frost-dark: rgba(8, 32, 37, 0.55);

  /* ---- Text ---------------------------------------------------------------
     Cool neutrals rather than brand-tinted, so body copy stays readable
     whichever hue the admin selects.                                        */
  --ink-900:            #101c21;
  --ink-700:            #24353c;
  --ink-500:            #4c6068;
  --ink-400:            #6d818a;
  --ink-300:            #9aabb2;
  --ink-inverse:        #ffffff;

  /* ---- Hairlines ----------------------------------------------------------
     Brand-tinted, not grey. A tinted border settles into the design instead
     of drawing a hard grey box around every card.                           */
  --line-soft:          #e0f0f3;
  --line-soft:          color-mix(in oklab, var(--brand) 11%, #ffffff);
  --line-soft:          oklch(from var(--brand) 0.945 calc(c * 0.22) h);

  --line:               #cfe4e8;
  --line:               color-mix(in oklab, var(--brand) 18%, #ffffff);
  --line:               oklch(from var(--brand) 0.90 calc(c * 0.34) h);

  --line-strong:        #a9ccd2;
  --line-strong:        color-mix(in oklab, var(--brand) 30%, #ffffff);
  --line-strong:        oklch(from var(--brand) 0.82 calc(c * 0.48) h);

  /* ---- Depth: layered, brand-tinted elevation (the 3D spine) -------------
     Shadows are tinted toward the brand's dark end rather than pure black,
     so they read as shadow cast on a coloured surface, not as grey smudge. */
  --elev-1:
    0 1px 2px rgba(12, 40, 46, 0.04),
    0 2px 6px rgba(12, 40, 46, 0.035);
  --elev-2:
    0 2px 4px rgba(12, 40, 46, 0.045),
    0 6px 14px -4px rgba(12, 40, 46, 0.07);
  --elev-3:
    0 2px 5px rgba(12, 40, 46, 0.045),
    0 10px 24px -10px rgba(12, 40, 46, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --elev-4:
    0 5px 11px rgba(12, 40, 46, 0.06),
    0 20px 40px -16px rgba(12, 40, 46, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  --elev-5:
    0 8px 18px rgba(12, 40, 46, 0.07),
    0 32px 62px -22px rgba(12, 40, 46, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);

  --glow-brand:         0 18px 36px -18px var(--brand-tint-28);
  --glow-gold:          0 14px 30px -14px rgba(207, 165, 76, 0.42);

  --rim-top:            inset 0 1px 0 rgba(255, 255, 255, 0.26);
  --rim-top-strong:     inset 0 1px 0 rgba(255, 255, 255, 0.38);
  --rim-bottom:         inset 0 -1px 0 rgba(0, 0, 0, 0.16);

  /* ---- Signature gradients ------------------------------------------------
     Held to a TIGHT range (700 -> 600 -> 500). The first version swept from
     a near-black 800 out to a 65%-white 400; that long run is what made
     headers look cloudy — one end nearly black, the other nearly grey.     */
  --grad-brand:
    linear-gradient(135deg, var(--brand-700) 0%, var(--brand) 58%, var(--brand-500) 100%);

  /* Full-width bars get a vertical polish instead. A diagonal sweep across
     a wide ribbon leaves one corner visibly lighter than the other. */
  --grad-bar:
    linear-gradient(180deg, var(--brand-500) 0%, var(--brand) 42%, var(--brand-700) 100%);

  --grad-brand-deep:
    linear-gradient(165deg, var(--brand-900) 0%, var(--brand-800) 45%, var(--brand-700) 100%);

  --grad-gold-rule:
    linear-gradient(90deg, transparent 0%, var(--gov-gold) 24%, var(--gov-gold-light) 50%, var(--gov-gold) 76%, transparent 100%);
  --grad-bevel:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, 0.1) 100%);
  --grad-sheen:
    linear-gradient(105deg, transparent 34%, rgba(255, 255, 255, 0.18) 50%, transparent 66%);

  /* ---- Geometry ---------------------------------------------------------- */
  --r-xs:   6px;
  --r-sm:   9px;
  --r-md:   13px;
  --r-lg:   18px;
  --r-xl:   24px;
  --r-2xl:  32px;
  --r-pill: 999px;

  /* ---- Motion ------------------------------------------------------------ */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-swift: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-back:  cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur-fast:   140ms;
  --dur-base:   240ms;
  --dur-slow:   420ms;

  /* ---- 3D field ---------------------------------------------------------- */
  --persp:      1200px;
  --lift:       -6px;
  --lift-far:   -10px;

  /* ---- Layout ------------------------------------------------------------ */
  --shell-max:   1400px;
  --gutter:      clamp(1rem, 3.2vw, 2.25rem);
  --rail:        336px;

  /* ---- Type -------------------------------------------------------------- */
  --font-ui:   'Plus Jakarta Sans', 'Inter', 'Hind Siliguri', 'Noto Sans Bengali', system-ui, sans-serif;
  --font-text: 'Inter', 'Hind Siliguri', 'Noto Sans Bengali', system-ui, sans-serif;

  --t-hero:    clamp(1.75rem, 3.4vw, 3.1rem);
  --t-h1:      clamp(1.5rem, 2.6vw, 2.25rem);
  --t-h2:      clamp(1.25rem, 2vw, 1.65rem);
  --t-h3:      clamp(1.06rem, 1.5vw, 1.24rem);
  --t-body:    0.975rem;
  --t-sm:      0.875rem;
  --t-xs:      0.78rem;
  --t-micro:   0.7rem;
}


/* ==========================================================================
   02 · BASE, TYPOGRAPHY & PAGE SCAFFOLD
   ========================================================================== */

html {
  font-size: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-text);
  font-size: var(--t-body) !important;
  font-weight: 450;
  line-height: 1.7;
  color: var(--ink-700) !important;
  background-color: var(--surface-page) !important;
  letter-spacing: 0.002em;
}

/* The app shell sits on a faintly tinted page so white cards read as raised. */
.app-container {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  background: var(--surface-page);
}

.app-main-content {
  position: relative;
  flex: 1 0 auto;
  z-index: 1;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-ui);
  color: var(--ink-900);
  letter-spacing: -0.018em;
  line-height: 1.28;
  text-wrap: balance;
}

h1 { font-size: var(--t-h1); font-weight: 800 !important; }
h2 { font-size: var(--t-h2); font-weight: 800 !important; }
h3 { font-size: var(--t-h3); font-weight: 700 !important; }

p { color: var(--ink-500); }

/* Bengali needs a touch more leading than Latin at the same size. */
.translated-ltr p,
.translated-ltr li,
.translated-ltr td,
.translated-ltr span {
  line-height: 1.85 !important;
  letter-spacing: 0 !important;
}

/* One consistent, high-contrast focus ring for keyboard users portal-wide. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--gov-gold) !important;
  outline-offset: 2px !important;
  border-radius: var(--r-xs);
}

::selection {
  background: var(--brand-tint-28);
  color: var(--ink-900);
}

/* Shared shell width, used by the views (.gov-container) and the layouts. */
.gov-container,
.container-fluid.gov-container {
  width: 100% !important;
  max-width: var(--shell-max) !important;
  margin-inline: auto !important;
  padding-inline: var(--gutter) !important;
}

.portal-header-content,
.nav-ribbon-container,
.top-portal-content,
.footer-content {
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--gutter) !important;
}


/* ==========================================================================
   03 · DECORATIVE DEPTH FIELD
   Two soft brand-tinted orbs sit behind the content, giving the flat page
   atmosphere without costing legibility. Fixed + blurred + very low opacity,
   so they never compete with text.
   ========================================================================== */

.app-container::before,
.app-container::after {
  content: '';
  position: fixed;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
}

.app-container::before {
  width: 46vw;
  height: 46vw;
  max-width: 620px;
  max-height: 620px;
  top: -14vw;
  right: -12vw;
  background: radial-gradient(circle, var(--brand-tint-16) 0%, transparent 70%);
}

.app-container::after {
  width: 40vw;
  height: 40vw;
  max-width: 520px;
  max-height: 520px;
  bottom: 8vh;
  left: -14vw;
  background: radial-gradient(circle, rgba(201, 150, 47, 0.13) 0%, transparent 70%);
}


/* ==========================================================================
   04 · TOP PORTAL BAR
   A slim, dark government strip: language, live clock, staff login.
   ========================================================================== */

.top-portal-bar {
  position: relative;
  /* NOT --grad-brand-deep. That token is angled 165deg, which suits tall
     surfaces like the mobile drawer, but this strip is roughly 1363x42:
     at 165deg about 90% of the gradient's colour travel happens across the
     WIDTH, so the bar faded from near-black on the left to teal on the right
     instead of reading as one even band. Vertical fixes that.

     The range is also tightened to 700 -> 800. It used to start at
     brand-900 (#00212a, OKLCH L 0.229), which is black rather than teal and
     threw away the brand identity on the very first strip of the page.
     White text still clears AA easily here: 8.5:1 at the top edge. */
  background: linear-gradient(180deg, #0d4d56 0%, #0a3f47 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: var(--rim-top), 0 1px 0 rgba(0, 0, 0, 0.12) !important;
  z-index: 60;
}

/* Gold hairline: the single most recognisable "official" signal on the page. */
.top-portal-bar::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2px;
  background: var(--grad-gold-rule);
  opacity: 0.85;
}

.top-portal-content {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  /* Room above and below the outlined buttons, so their borders sit in the
     middle of the bar instead of running along its top and bottom edges. */
  min-height: 40px !important;
  padding-block: 0.4rem !important;
}

.top-portal-clock-info {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--t-xs) !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.88) !important;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.clock-divider {
  color: var(--gov-gold-light) !important;
  opacity: 0.8;
}

.clock-time-item {
  color: #ffffff !important;
  font-variant-numeric: tabular-nums;
}

/* TopHeader.vue wraps the desktop language select in .top-lang-wrapper and
   gives that wrapper a solid #C8102E background, which landed as a bright red
   block in the corner of an otherwise teal bar. The wrapper becomes the
   frosted chip instead, and the select inside it stays transparent (its own
   scoped rule already sets that). */
.top-lang-wrapper {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.3rem !important;
  /* Solid national red, white text. */
  background: #C8102E !important;
  border: 1px solid #C8102E !important;
  border-radius: 4px !important;
  height: 26px !important;
  box-sizing: border-box !important;
  padding: 0 0.7rem !important;
  box-shadow: none !important;
  transition: background-color var(--dur-fast) var(--ease-swift),
              border-color var(--dur-fast) var(--ease-swift);
}

.top-lang-wrapper:hover {
  background: #a50d26 !important;
  border-color: var(--gov-gold-light) !important;
}

.top-lang-wrapper .top-portal-lang-select {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0.1rem 1.1rem 0.1rem 0 !important;
  min-width: 0 !important;
  background-position: right center, calc(100% - 5px) center !important;
}

/* Language select — a frosted chip rather than a raw OS dropdown. */
.top-portal-lang-select,
.mobile-lang-select {
  appearance: none;
  -webkit-appearance: none;
  background-color: rgba(255, 255, 255, 0.12) !important;
  background-image: linear-gradient(45deg, transparent 50%, #ffffff 50%),
                    linear-gradient(135deg, #ffffff 50%, transparent 50%) !important;
  background-position: calc(100% - 15px) center, calc(100% - 10px) center !important;
  background-size: 5px 5px, 5px 5px !important;
  background-repeat: no-repeat !important;
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
  border-radius: 4px !important;
  color: #ffffff !important;
  font-size: var(--t-xs) !important;
  font-weight: 650 !important;
  padding: 0.3rem 1.9rem 0.3rem 0.9rem !important;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-swift),
              border-color var(--dur-fast) var(--ease-swift);
  backdrop-filter: blur(6px);
}

.top-portal-lang-select:hover,
.mobile-lang-select:hover {
  background-color: rgba(255, 255, 255, 0.2) !important;
  border-color: var(--gov-gold-light) !important;
}

.top-portal-lang-select option,
.mobile-lang-select option {
  color: var(--ink-900) !important;
  background: #ffffff !important;
}

/* Staff login: a raised gold control — the one call-to-action up here. */
.top-portal-login-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  height: 26px !important;
  box-sizing: border-box !important;
  padding: 0 1rem !important;
  border-radius: 4px !important;
  /* Dark glass on the teal bar, white text. */
  background: rgba(0, 0, 0, 0.22) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: var(--t-xs) !important;
  font-weight: 750 !important;
  letter-spacing: 0.02em;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  box-shadow: none !important;
  transition: transform var(--dur-fast) var(--ease-swift),
              box-shadow var(--dur-fast) var(--ease-swift),
              filter var(--dur-fast) var(--ease-swift);
}

.top-portal-login-link:hover {
  transform: translateY(-1px);
  background: rgba(0, 0, 0, 0.35) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
}

.top-portal-login-link:active {
  transform: translateY(0);
}

.top-portal-login-link .icon-img {
  background-color: #ffffff !important;
  color: #ffffff !important;
  filter: none !important;
}


/* ==========================================================================
   05 · PORTAL BRANDING HEADER
   White, dimensional band carrying the crest and the institution name.
   ========================================================================== */

/* THE MASTHEAD IS TEAL, NOT WHITE.
   style.css always had `background: rgb(13, 77, 86)` here, and the top bar
   and nav ribbon above and below it are both teal. An earlier version of
   this file turned only this middle band white, which left the page opening
   as teal / white / teal — a bright slab wedged between two coloured bars
   with no relationship to either. The three now read as one masthead.

   Vertical gradient for the same reason as the top bar: this element is far
   wider than it is tall, so an angled gradient would sweep sideways. */
.portal-header {
  position: relative;
  /* Deep #0d4d56, shading a touch darker toward the bottom. */
  background: linear-gradient(180deg, #0d4d56 0%, #093e45 100%) !important;
  border-bottom: none !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  z-index: 50;
  overflow: hidden;
}

/* A single soft light bloom, so the teal band has some depth rather than
   reading as one flat rectangle. A brand-tinted glow would be invisible now
   that the ground is itself brand-coloured, so this lifts with white. */
.portal-header::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 4%;
  width: 460px;
  height: 280px;
  transform: translateY(-50%);
  background: radial-gradient(ellipse, rgba(255, 255, 255, 0.09) 0%, transparent 68%);
  border-radius: 50%;
  pointer-events: none;
}

/* Gold hairline closing the masthead, matching the one under the top bar. */
.portal-header::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2px;
  background: var(--grad-gold-rule);
  opacity: 0.75;
  pointer-events: none;
}

.portal-header-content {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  /* Only two children (identity and emblem), so this is exactly the space
     between the notice strip's right end and the emblem's accent rule. 4px
     matches the left side: the strip starts 8px in, minus the 4px rule. */
  gap: 4px !important;
  padding-block: 0.45rem !important;
  position: relative;
  z-index: 1;
}

.header-identity-wrapper { min-width: 0; flex: 1 1 auto; }

/* ---- National emblem (right of the identity) ---------------------------
   The counterweight to the college crest. This replaced a three-row
   hotline / email / address block: stacked contact rows with icons, labels
   and values made the masthead read like a business card, where a single
   state emblem reads like a government institution. The contact details are
   unchanged and still reachable in the footer and on the contact page.

   The emblem is full-colour (national green, red and gold), so it sits on a
   white medallion rather than directly on the teal, where its own green
   would disappear into the band. */
/* Just the mark now. Stacked over a caption this block reached ~92px and was
   the tallest thing in the masthead, setting the whole band's height on its
   own; the caption also duplicated the authority line under the title. */
.header-state-emblem {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  align-self: stretch !important;
  gap: clamp(0.8rem, 1.8vw, 1.35rem);
}

/* Mirror of the accent rule beside the institution name, so the emblem is
   framed the same way the crest side is. */
.header-state-emblem::before {
  content: '';
  align-self: stretch;
  width: 4px;
  border-radius: 2px;
  background: linear-gradient(180deg, #34d399 0%, #C8102E 100%);
}

.state-emblem-mark {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  object-fit: contain;
  padding: 5px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.5),
    0 3px 10px -4px rgba(0, 0, 0, 0.45);
}

.header-identity {
  display: flex !important;
  align-items: center !important;
  gap: clamp(0.8rem, 1.8vw, 1.35rem) !important;
  min-width: 0;
}

/* Crest: seated in a 3D dish so it reads as a physical medal on the page. */
/* The crest is an official emblem and is left to speak for itself: no dish,
   no stacked white rings. The earlier version wrapped it in a 6px pad, a
   radial plate and three ring shadows, which read on screen as a large white
   disc with the logo floating small in the middle. */
.crest-logo {
  width: clamp(44px, 3.9vw, 54px) !important;
  height: clamp(44px, 3.9vw, 54px) !important;
  object-fit: contain !important;
  border-radius: 50%;
  background: transparent;
  /* Deeper than it was on the white header: the crest now sits on a teal
     ground and needs the shadow to separate it from that, not from paper. */
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.32));
  transition: transform var(--dur-slow) var(--ease-back),
              filter var(--dur-slow) var(--ease-out);
  flex-shrink: 0;
}

.header-identity:hover .crest-logo {
  transform: rotateY(12deg) rotateX(5deg) scale(1.03);
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.42));
}

/* style.css puts a 0.45rem flex gap here, which stacked on top of the
   subtitle's own top margin — two spacings doing one job, ~12px of dead
   height between the name and the line under it. */
.brand-text {
  min-width: 0;
  gap: 0 !important;
}

/* The accent rule beside the institution name. style.css draws this as a
   mint-to-crimson gradient (#34d399 -> #C8102E); next to the teal identity
   the red end read as an unrelated stripe, so it becomes brand-to-gold. */
.brand-text::before {
  background: linear-gradient(180deg, #34d399 0%, #C8102E 100%) !important;
  width: 4px !important;
  border-radius: 2px !important;
}

.header-brand-title {
  font-family: var(--font-ui) !important;
  font-size: clamp(1.05rem, 2vw, 1.62rem) !important;
  font-weight: 800 !important;
  line-height: 1.16 !important;
  letter-spacing: -0.022em !important;
  margin: 0 0 0.12rem !important;
  /* Plain white on the teal masthead. This used to be a teal gradient
     clipped to the text, which only worked while the band behind it was
     white — on the restored teal ground it would be teal-on-teal. A solid
     fill is also what survives Google Translate, which re-wraps the text in
     <font> elements and breaks background-clip painting. */
  color: #ffffff !important;
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28), 0 2px 12px rgba(0, 0, 0, 0.18) !important;
}

.header-brand-title * ,
.header-brand-title font {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* The parent-authority line. Uppercase and letterspaced, sitting on a short
   gold rule — the typographic convention that reads as "state institution"
   rather than "organisation website". */
/* ---- Masthead notice strip ----------------------------------------------
   The announcement marquee sits on the line the authority text used to hold,
   as a white bar under the institution name.

   HOW THE TEXT DISAPPEARS BEHIND THE CREST
   The strip is pulled left by exactly the width of everything standing to its
   left — the crest, the gap after it, and .brand-text's own 1rem padding —
   so its white ground reaches the very start of the masthead. The same
   distance is then given back as padding-left, which is where the headlines
   actually begin. The crest is raised above the strip in the stacking order,
   so a headline scrolling leftward slides underneath the seal and out of
   sight rather than clipping at a hard edge.

   The three measurements are kept in variables because they must stay equal
   to the crest size and identity gap declared above; if those change and
   these do not, the strip either exposes teal on its left or runs past the
   masthead edge. */
.header-identity {
  --crest-size: clamp(44px, 3.9vw, 54px);
  --identity-gap: clamp(0.8rem, 1.8vw, 1.35rem);
  --strip-offset: calc(var(--crest-size) + var(--identity-gap) + 1rem);
}

.crest-link {
  position: relative;
  z-index: 3;          /* above the strip, so headlines pass behind the seal */
  display: inline-flex;
  flex-shrink: 0;
  line-height: 0;
}

.brand-title-link {
  display: inline-block;
  text-decoration: none;
}

.header-notice-strip {
  position: relative;
  z-index: 1;
  margin-top: 0.34rem;
  /* The width is stated rather than left to flex `stretch`, so the strip
     finishes flush with the right edge of the text column — never spilling
     past it toward the state emblem. */
  /* Starts just right of the accent rule (.brand-text::before, 4px wide at
     left 0 inside .brand-text's 1rem padding) and never reaches the crest. */
  margin-left: calc(-1rem + 8px);
  width: calc(100% + 1rem - 8px);
  flex: none;
  box-sizing: border-box;
  padding-left: 0.6rem;
  padding-right: 0.9rem;
  height: 32px;
  display: flex;
  align-items: center;
  background: #ffffff;
  border-radius: var(--r-sm);
  box-shadow: 0 2px 6px -3px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

/* Full width of the strip's content box, so the scroll track runs from the
   right edge to the crest's right edge. */
.header-notice-strip marquee {
  width: 100% !important;
  height: 32px !important;
  line-height: 32px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}

/* Dark text, because this strip is white while everything around it is teal.
   Scoped to the strip: .ticker-notice-link is shared with the mobile ribbon. */
.header-notice-strip .ticker-item,
.header-notice-strip .ticker-notice-link,
.header-notice-strip .fw-bold,
.header-notice-strip marquee {
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  color: var(--ink-700) !important;
  -webkit-text-fill-color: var(--ink-700) !important;
}

.header-notice-strip .ticker-notice-link:hover,
.header-notice-strip .ticker-notice-link:hover .fw-bold {
  color: var(--brand) !important;
  -webkit-text-fill-color: var(--brand) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Each headline is its own 32px-tall centred box, so the text sits in the
   vertical middle of the strip instead of on the marquee's baseline, which
   left it riding low. */
.header-notice-strip .ticker-item {
  display: inline-flex !important;
  align-items: center;
  height: 32px;
  line-height: 1 !important;
  vertical-align: top;
}

.header-notice-strip .ticker-bullet-separator {
  color: var(--gov-gold-deep) !important;
  -webkit-text-fill-color: var(--gov-gold-deep) !important;
  margin-inline: 0.5rem;
}

.translated-ltr .header-notice-strip .ticker-notice-link,
.translated-ltr .header-notice-strip .ticker-notice-link font,
.translated-ltr .header-notice-strip marquee,
.translated-ltr .header-notice-strip font {
  color: var(--ink-700) !important;
  -webkit-text-fill-color: var(--ink-700) !important;
}


/* ==========================================================================
   06 · NAVIGATION RIBBON, DROPDOWNS & MEGA MENU
   ========================================================================== */

.nav-ribbon {
  position: relative;
  /* --grad-bar, not --grad-brand: a diagonal sweep across a full-width bar
     leaves one corner noticeably lighter than the other. Vertical reads as
     a polished metal ribbon at any screen width. */
  background: linear-gradient(180deg, #0d4d56 0%, #0a3f47 100%) !important;
  box-shadow:
    var(--rim-top-strong),
    0 1px 0 rgba(0, 0, 0, 0.2),
    0 10px 28px -14px rgba(10, 32, 38, 0.6) !important;
  z-index: 55;
}

/* Bevelled top and bottom edges give the ribbon real thickness. */
.nav-ribbon::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--grad-bevel);
  pointer-events: none;
}

.nav-ribbon::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 3px;
  background: var(--grad-gold-rule);
  opacity: 0.9;
}

/* Sticky state: frosted glass so content scrolling underneath stays sensed. */
.nav-ribbon.is-sticky-header {
  position: sticky !important;
  top: 0;
  /* Same vertical polish as the resting bar, just translucent so content
     scrolling beneath it stays faintly sensed through the blur. */
  background:
    linear-gradient(180deg,
      rgba(13, 77, 86, 0.94) 0%,
      rgba(10, 63, 71, 0.94) 100%) !important;
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow:
    var(--rim-top-strong),
    0 14px 34px -16px rgba(12, 40, 46, 0.7) !important;
  animation: nav-drop var(--dur-base) var(--ease-out);
}

@keyframes nav-drop {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

.nav-ribbon-container {
  position: relative;
  z-index: 1;
}

.nav-links-list {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 0.1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-item-link {
  position: relative;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.36rem !important;
  /* SIZED AGAINST A MEASURED BUDGET, not by eye. The ten top-level labels
     total 108 characters; with their chevrons, gaps and padding the row must
     stay under the shell's usable width (1400px shell minus two 2.25rem
     gutters = 1328px), and under 1291px at the 1363px laptop width this site
     is mostly read on.

       0.82rem / 0.66rem  ->  1136px   (previous: correct but timid)
       0.87rem / 0.78rem  ->  1231px   60px spare at 1363px, 97px at the cap
       0.91rem / 0.85rem  ->  1298px   overflows 1363px, wraps to two rows

     The second row is what happened at the original 0.95rem padding, where
     "Contact Us" dropped to a line of its own. */
  padding: 0.74rem 0.78rem !important;
  font-family: var(--font-ui) !important;
  font-size: 0.87rem !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
  color: rgba(255, 255, 255, 0.92) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.92) !important;
  text-transform: none !important;
  border-radius: var(--r-sm) var(--r-sm) 0 0 !important;
  transition: color var(--dur-fast) var(--ease-swift),
              background-color var(--dur-fast) var(--ease-swift),
              transform var(--dur-fast) var(--ease-swift);
  white-space: nowrap;
}

/* Gold underline that grows from the centre — restrained, official. */
.nav-item-link::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 0;
  height: 2.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gov-gold) 0%, var(--gov-gold-light) 100%);
  transform: translateX(-50%);
  transition: width var(--dur-base) var(--ease-out);
}

.nav-item-link:hover,
.nav-item-link:focus-visible {
  background-color: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.nav-item-link:hover::after,
.nav-item-link.is-active::after,
.nav-item-link.router-link-active::after {
  width: calc(100% - 1.6rem);
}

.nav-item-link.router-link-active,
.nav-item-link.is-active {
  background-color: rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.nav-item-link .icon-img {
  background-color: currentColor !important;
  opacity: 0.92;
}

/* ---- Dropdown panels: float in with a slight 3D hinge ------------------- */

.dropdown-menu,
.dropdown-submenu,
.mega-menu {
  background: rgba(255, 255, 255, 0.98) !important;
  /* No border: the shadow alone lifts the panel off the page. */
  border: none !important;
  border-radius: 0 0 var(--r-md) var(--r-md) !important;
  box-shadow: var(--elev-5) !important;
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  padding: 0.45rem !important;
  transform-origin: top center;
  animation: menu-hinge var(--dur-base) var(--ease-out);
}

@keyframes menu-hinge {
  from {
    opacity: 0;
    transform: perspective(var(--persp)) rotateX(-9deg) translateY(-8px);
  }
  to {
    opacity: 1;
    transform: perspective(var(--persp)) rotateX(0deg) translateY(0);
  }
}

.dropdown-menu a,
.dropdown-submenu a,
.mega-menu-links a {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 0.56rem 0.8rem !important;
  border-radius: var(--r-xs) !important;
  font-size: var(--t-sm) !important;
  font-weight: 550 !important;
  color: var(--ink-700) !important;
  border-left: 3px solid transparent !important;
  transition: background-color var(--dur-fast) var(--ease-swift),
              color var(--dur-fast) var(--ease-swift),
              border-color var(--dur-fast) var(--ease-swift),
              padding-left var(--dur-fast) var(--ease-swift);
}

.dropdown-menu a:hover,
.dropdown-submenu a:hover,
.mega-menu-links a:hover {
  background: var(--brand-050) !important;
  color: var(--brand-700) !important;
  border-left-color: #0d4d56 !important;
  padding-left: 1rem !important;
}

.mega-menu-container {
  box-shadow: var(--elev-5) !important;
}

.mega-menu-column-title {
  font-family: var(--font-ui) !important;
  font-size: var(--t-xs) !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--brand-700) !important;
  padding-bottom: 0.5rem !important;
  margin-bottom: 0.45rem !important;
  border-bottom: 2px solid var(--brand-100) !important;
}


/* ==========================================================================
   07 · MOBILE NAVIGATION
   ========================================================================== */

.nav-mobile-bar {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding-block: 0.5rem;
}

.nav-mobile-brand { display: flex; align-items: center; gap: 0.55rem; min-width: 0; }

.mobile-logo-img {
  width: 40px !important;
  height: 40px !important;
  object-fit: contain;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  padding: 3px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5), 0 3px 8px rgba(0, 0, 0, 0.25);
  flex-shrink: 0;
}

.mobile-brand-title {
  color: #ffffff !important;
  font-family: var(--font-ui) !important;
  font-size: 0.82rem !important;
  font-weight: 750 !important;
  line-height: 1.22 !important;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.nav-mobile-controls { display: flex; align-items: center; gap: 0.45rem; flex-shrink: 0; }

.nav-mobile-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  min-height: 40px;
  padding: 0.45rem 0.85rem !important;
  border-radius: var(--r-sm) !important;
  background: rgba(255, 255, 255, 0.16) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: var(--t-xs) !important;
  font-weight: 700 !important;
  box-shadow: var(--rim-top), 0 2px 6px rgba(0, 0, 0, 0.2) !important;
  transition: background-color var(--dur-fast) var(--ease-swift),
              transform var(--dur-fast) var(--ease-swift);
}

.nav-mobile-toggle:active { transform: scale(0.96); }

.mobile-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(4, 22, 26, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-swift);
  /* Must match the layer style.css puts the drawer chrome on (drawer itself
     is 999999). A lower value here would leave the sticky nav ribbon
     floating above the dimmed backdrop while the drawer is open. */
  z-index: 999998;
}

.mobile-drawer-backdrop.is-active { opacity: 1; }

.mobile-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.15rem;
  background: var(--grad-brand-deep);
  border-bottom: 2px solid var(--gov-gold);
  position: sticky;
  top: 0;
  z-index: 2;
}

.mobile-drawer-title {
  display: flex;
  align-items: center;
  color: #ffffff !important;
  font-family: var(--font-ui);
  font-size: 0.92rem;
  font-weight: 750;
  letter-spacing: 0.02em;
}

.mobile-drawer-close {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14) !important;
  border: 1px solid rgba(255, 255, 255, 0.26) !important;
  color: #ffffff !important;
  transition: background-color var(--dur-fast) var(--ease-swift),
              transform var(--dur-fast) var(--ease-swift);
}

.mobile-drawer-close:hover { background: var(--gov-crimson) !important; transform: rotate(90deg); }


/* ==========================================================================
   08 · NOTICE TICKER
   One strip, directly under the navigation, on every screen size. It used to
   be two: a marquee nested inside the brand identity link on desktop, and
   this ribbon on mobile. The nested one is gone — an announcement scrolling
   inside an institution's name block is not how an official portal reads.
   ========================================================================== */

.ticker-item,
.ticker-notice-link {
  font-size: var(--t-xs) !important;
  font-weight: 600 !important;
  color: var(--ink-700) !important;
  transition: color var(--dur-fast) var(--ease-swift);
}

.ticker-notice-link:hover {
  color: var(--brand) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ticker-bullet-separator {
  color: var(--gov-gold);
  margin-inline: 0.55rem;
  font-weight: 900;
}

/* style.css hides `.mobile-only-ticker` above 991px; that class was removed
   from this element in Header.vue, so the strip now shows at every width. */
/* Phones and tablets only. `display` is deliberately NOT forced here: the
   element carries `mobile-only-ticker`, which style.css hides above 991px and
   shows below it. A blanket `display: flex !important` in this file would
   out-rank that and put the ribbon back on desktop, duplicating the notice
   strip that now lives in the masthead. */
.notice-ticker-ribbon {
  background: linear-gradient(180deg, #ffffff 0%, var(--surface-sunken) 100%) !important;
  border-bottom: 1px solid var(--line) !important;
  box-shadow: 0 3px 10px -6px rgba(12, 40, 46, 0.22);
  height: auto !important;
  min-height: 30px !important;
}

/* A standing "Notice" label, so the strip is identified rather than just
   being text that happens to move. */
.ticker-badge {
  position: relative;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.3rem;
  flex-shrink: 0;
  width: auto !important;
  min-width: 26px;
  height: 21px !important;
  padding-inline: 0.5rem;
  border-radius: var(--r-xs) !important;
  background: var(--grad-brand) !important;
  color: #ffffff !important;
  box-shadow: var(--rim-top), 0 2px 6px -3px var(--brand-tint-28);
  font-family: var(--font-ui);
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ticker-badge::after {
  content: 'Notice';
  color: #ffffff;
}

.translated-ltr .ticker-badge::after { content: 'নোটিশ'; }

/* style.css pins this strip flush to the window with
   `gap/padding-left/margin-left: 0 !important`, so the badge sat hard against
   the browser edge while the masthead, navigation and every card on the page
   were inset by the gutter. These need !important of their own to line the
   strip up with the rest of the shell. */
.ticker-ribbon-inner {
  display: flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
  max-width: var(--shell-max) !important;
  margin-inline: auto !important;
  padding: 0.2rem var(--gutter) !important;
}

.ticker-badge .icon-img,
.ticker-badge i {
  font-size: 0.68rem !important;
}


.ticker-marquee-wrap { min-width: 0; flex: 1; }


/* ==========================================================================
   09 · HERO SLIDER & SUBPAGE BANNER
   The same component powers the homepage hero and every subpage banner
   (SubpageBanner.vue reuses the .hero-slider-* classes), so one treatment
   covers both.
   ========================================================================== */

/* The slider sits INSIDE the site shell rather than bleeding to the window
   edges, so its left and right edges line up with the cards below it.
   `width: calc(100% - 2 * gutter)` gives the inset on narrow screens, and the
   max-width matches the usable width of .gov-container (shell minus its own
   padding) on wide ones, so everything shares one vertical rhythm. */
/* style.css pins this element full-bleed with
   `width/max-width/margin-left/margin-right/border-radius ... !important`,
   so every containment property below needs !important of its own to win —
   and the physical margin properties are used, not `margin-inline`, so they
   override the physical ones declared there directly.

   Height is a clamp rather than the fixed 420px: on a short laptop screen a
   fixed hero eats the whole fold, and on a tall monitor it looks stunted. */
.hero-slider-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Full bleed, flush under the navigation ribbon: the photograph runs edge
     to edge and the text inside still lines up with the page shell (see
     .hero-slider-content below). */
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
  /* A fixed 460px on every desktop screen, so the slider keeps the same
     size instead of growing on taller monitors.
     Phones are not affected: HomeView's own scoped rule pins 320px under
     768px and outranks this one. */
  height: 460px !important;
  min-height: 460px !important;
  /* Square and shadowless: a full-bleed band is part of the page, not a card.
     A gold rule closes it at the bottom, matching the masthead. */
  border-radius: 0 !important;
  background: var(--brand-900);
  border: 0 !important;
  border-bottom: 3px solid var(--gov-gold) !important;
  box-shadow: none !important;
}

/* Slow zoom-in: each slide loads zoomed out, showing the whole photograph,
   then gradually zooms in and holds there. HomeView keys this element on the
   slide, so the zoom restarts from the beginning on every slide change. */
.hero-slider-bg {
  position: absolute;
  inset: 0;
  background-size: cover !important;
  background-position: center !important;
  transform: scale(1);
  /* Slides change every 5s (HomeView), so the zoom runs just past that. */
  animation: ken-burns 6s ease-out forwards;
  will-change: transform;
}

@keyframes ken-burns {
  from { transform: scale(1); }
  to   { transform: scale(1.15); }
}

/* No tint over the photograph; only a deep fade rising from the bottom edge to just above the headline so the white text stays legible
   over any photograph the admin uploads. */
.hero-slider-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg,
      rgba(4, 22, 26, 0.9) 0%,
      rgba(4, 22, 26, 0.72) 25%,
      rgba(4, 22, 26, 0.35) 45%,
      transparent 60%) !important;
}

/* A faint engraved grid adds architectural depth over the photograph. */
.hero-slider-section::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(115deg, #000 0%, transparent 62%);
  -webkit-mask-image: linear-gradient(115deg, #000 0%, transparent 62%);
  /* Off: it hazed the top-left of the photograph, which should stay clear. */
  opacity: 0;
}

/* The section is full bleed, so the content is held to the page shell width
   and centred: headline and buttons line up with the sections below. */
.hero-slider-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  box-sizing: border-box;
  padding: clamp(2rem, 4.6vw, 3.8rem) clamp(1.25rem, 3.4vw, 3rem) !important;
}

.hero-slider-text-wrapper {
  max-width: 62ch;
  animation: hero-rise var(--dur-slow) var(--ease-out) both;
}

@keyframes hero-rise {
  from { opacity: 0; transform: perspective(1200px) translateY(22px) rotateX(5deg); }
  to   { opacity: 1; transform: perspective(1200px) translateY(0) rotateX(0deg); }
}

.hero-slider-badge,
.subpage-banner-badge {
  display: inline-flex !important;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 1.05rem !important;
  border-radius: var(--r-pill) !important;
  /* Solid brand green with a gold edge, matching the hero buttons, so the
     label reads clearly against a bright sky instead of washing into it. */
  background: #0a7a4a !important;
  border: 1px solid #0c8f57 !important;
  border-left: 3px solid var(--gov-gold) !important;
  box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.45) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-family: var(--font-ui) !important;
  font-size: var(--t-micro) !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  margin-bottom: 0.85rem !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 14px -6px rgba(0, 0, 0, 0.5);
}

.hero-slider-title {
  font-family: var(--font-ui) !important;
  font-size: var(--t-hero) !important;
  font-weight: 800 !important;
  line-height: 1.14 !important;
  letter-spacing: -0.028em !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  margin: 0 0 0.6rem !important;
  /* Stacked shadows read as extruded depth rather than a blurry halo. */
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.35),
    0 2px 2px rgba(0, 0, 0, 0.3),
    0 8px 26px rgba(0, 0, 0, 0.55) !important;
}

/* Gold rule beneath the banner title — the official seal of the page. */
.hero-slider-title::after {
  content: '';
  display: block;
  width: 84px;
  height: 4px;
  margin-top: 0.85rem;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--gov-gold) 0%, var(--gov-gold-light) 100%);
  box-shadow: 0 2px 10px rgba(201, 150, 47, 0.6);
}

.hero-slider-description,
.subpage-banner-subtitle {
  font-size: clamp(0.92rem, 1.25vw, 1.08rem) !important;
  font-weight: 450 !important;
  line-height: 1.7 !important;
  color: rgba(255, 255, 255, 0.9) !important;
  max-width: 60ch;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}

.hero-slider-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

/* Slider controls: frosted glass discs that lift toward the viewer. */
.slider-arrow,
.prev-arrow,
.next-arrow {
  width: 46px !important;
  height: 46px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.14) !important;
  border: 1px solid rgba(255, 255, 255, 0.32) !important;
  color: #ffffff !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--rim-top), 0 8px 20px -8px rgba(0, 0, 0, 0.6) !important;
  transition: transform var(--dur-base) var(--ease-back),
              background-color var(--dur-fast) var(--ease-swift);
}

.slider-arrow:hover,
.prev-arrow:hover,
.next-arrow:hover {
  background: var(--gov-gold) !important;
  border-color: var(--gov-gold-light) !important;
  transform: scale(1.1) translateZ(12px);
}

.hero-slider-indicators,
.slider-dots-container {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.hero-slider-indicator,
.slider-dot-item {
  width: 10px !important;
  height: 10px !important;
  border-radius: var(--r-pill) !important;
  background: rgba(255, 255, 255, 0.4) !important;
  border: none !important;
  cursor: pointer;
  transition: width var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-swift);
}

.hero-slider-indicator.active,
.slider-dot-item.active {
  width: 30px !important;
  background: var(--gov-gold) !important;
  box-shadow: 0 0 12px rgba(201, 150, 47, 0.8);
}

/* Subpage banners sit lower than the homepage hero. */
.app-main-content .hero-slider-section .hero-slider-content {
  padding-block: clamp(1.9rem, 4vw, 3.2rem) !important;
}

/* Vertical for the same reason as the top bar: these are wide banners, and
   the 165deg token would sweep their colour sideways instead of downward.
   Deepest at the bottom, where the banner heading sits. */
.page-banner,
.subpage-banner {
  background: linear-gradient(180deg, var(--brand-700) 0%, var(--brand-900) 100%) !important;
  border-bottom: 3px solid var(--gov-gold) !important;
}


/* ==========================================================================
   10 · SECTION HEADINGS
   ========================================================================== */

.section-heading,
.section-heading-wrapper,
.table-card-header,
.notice-section-header,
.column-section-title,
.widget-header,
.facilities-header,
.present-header,
.home-media-banner-header,
.portal-service-card-header {
  position: relative;
  overflow: hidden;
}

.section-title,
.section-title-gov,
.intro-title,
.column-section-title {
  font-family: var(--font-ui) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: var(--ink-900) !important;
  line-height: 1.24 !important;
}

.section-kicker {
  display: inline-block;
  font-family: var(--font-ui) !important;
  font-size: var(--t-micro) !important;
  font-weight: 800 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--brand) !important;
  padding: 0.24rem 0.7rem;
  border-radius: var(--r-pill);
  background: var(--brand-050);
  border: 1px solid var(--brand-100);
  margin-bottom: 0.5rem;
}

.section-desc-text {
  font-size: var(--t-sm) !important;
  color: var(--ink-400) !important;
  line-height: 1.72 !important;
  max-width: 78ch;
}

/* ---- Icon tiles ---------------------------------------------------------
   The plate colour here is dictated by rules that already exist elsewhere,
   because every icon on this portal is an .icon-img — a CSS-masked SVG whose
   visible colour comes from `background-color`, not `color`.

   Both style.css and app.css list `.section-icon .icon-img` among the icons
   forced to `background-color: #ffffff !important`. A white glyph needs a
   dark plate, so `.section-icon` and its siblings get the brand gradient.
   (`.section-icon:not(.large) i` sets `color` to the brand in app.css, but
   that never reaches a masked icon — `background-color` wins the paint.)

   `.meta-icon` is the exception: nothing forces its glyph white, so it
   inherits `currentColor` and takes a pale plate with a brand glyph.

   `.portal-service-icon-box` gets no tile at all: it holds a partner/service
   logo image on a light plate, and a tile would bury the artwork.
   -------------------------------------------------------------------------- */

/* Shared geometry */
.section-icon,
.section-icon-box,
.intro-icon,
.meta-icon,
.notice-heading-icon,
.heading-icon,
.mv-card-header-icon {
  display: inline-grid;
  place-items: center;
  border-radius: var(--r-md);
  flex-shrink: 0;
  transition: transform var(--dur-base) var(--ease-back),
              box-shadow var(--dur-base) var(--ease-out);
}

/* Light tile: pale brand plate, brand glyph via currentColor. */
.meta-icon {
  background: linear-gradient(180deg, var(--brand-050) 0%, var(--brand-100) 100%);
  color: var(--brand);
  border: 1px solid var(--brand-200);
  box-shadow:
    inset 0 1px 0 #ffffff,
    0 4px 10px -6px var(--brand-tint-28);
}

/* Dark tiles: brand gradient behind a white glyph. */
.section-icon,
.section-icon-box,
.intro-icon,
.notice-heading-icon,
.heading-icon,
.mv-card-header-icon {
  background: var(--grad-brand) !important;
  color: #ffffff !important;
  box-shadow:
    var(--rim-top-strong),
    0 6px 14px -6px var(--brand-tint-28),
    inset 0 -2px 4px rgba(0, 0, 0, 0.16) !important;
}

/* Exception: the library gallery card overrides the global white-icon rule
   so its compact icons render in the brand colour. A dark plate there would
   put a dark glyph on a dark tile, so that one keeps a pale plate. */
.library-gallery-card .section-icon,
.library-gallery-card .section-heading .section-icon {
  background: linear-gradient(180deg, var(--brand-050) 0%, var(--brand-100) 100%) !important;
  border: 1px solid var(--brand-200) !important;
  box-shadow: inset 0 1px 0 #ffffff, 0 4px 10px -6px var(--brand-tint-28) !important;
}

.section-icon,
.section-icon-box,
.intro-icon,
.notice-heading-icon,
.heading-icon {
  width: 42px;
  height: 42px;
}

.meta-icon { width: 34px !important; height: 34px !important; }

.section-icon:hover,
.section-icon-box:hover,
.intro-icon:hover {
  transform: perspective(600px) rotateY(-14deg) rotateX(8deg) translateZ(6px);
}


/* ==========================================================================
   11 · SURFACES: CARDS, PANELS & THE 3D LIFT
   Every card family the views already use is funnelled through one
   treatment, so the whole portal reads as a single material.
   ========================================================================== */

.home-section-card,
.sidebar-widget,
.intro-card,
.table-section-card,
.documents-table-card,
.notice-detail-card,
/* The About card's paragraphs sit straight in the card, which has no
   padding of its own (so the title bar can run edge to edge); give the text
   its own side and bottom breathing room. */
.welcome-card > p {
  padding-inline: clamp(1rem, 2.2vw, 1.4rem) !important;
}

.welcome-card > p:last-child {
  padding-bottom: 1.1rem !important;
}

.welcome-card,
.quicklinks-card,
.portal-service-card,
.home-mv-card,
.admin-card,
.leader-card-box,
.dse-executive-card,
.gallery-card,
.default-page-card,
.contact-info-item {
  position: relative !important;
  background: var(--surface-raised) !important;
  border: 1px solid var(--line-soft) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--elev-3) !important;
  transition:
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-swift) !important;
  overflow: hidden;
}

/* Gradient rim along the top edge: a lit leading edge on a raised slab. */
.home-section-card::before,
.intro-card::before,
.table-section-card::before,
.documents-table-card::before,
.notice-detail-card::before,
.portal-service-card::before,
.home-mv-card::before,
.default-page-card::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  background: var(--grad-brand);
  opacity: 0.9;
  z-index: 2;
}

/* Hover: the card rises and tilts a degree toward the pointer.
   Guarded to fine pointers so touch devices never get a stuck hover state. */
@media (hover: hover) and (pointer: fine) {
  .home-section-card:hover,
  .intro-card:hover,
  .table-section-card:hover,
  .portal-service-card:hover,
  .home-mv-card:hover,
  .admin-card:hover,
  .leader-card-box:hover,
  .dse-executive-card:hover,
  .gallery-card:hover,
  .contact-info-item:hover {
    transform: perspective(var(--persp)) translateY(var(--lift)) rotateX(1.4deg) !important;
    box-shadow: var(--elev-5), var(--glow-brand) !important;
    border-color: var(--brand-200) !important;
  }
}

/* A soft brand bloom in the corner, revealed on hover. */
.home-section-card::after,
.intro-card::after,
.portal-service-card::after {
  content: '';
  position: absolute;
  top: -40%;
  right: -22%;
  width: 60%;
  height: 130%;
  background: radial-gradient(circle, var(--brand-tint-08) 0%, transparent 68%);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-swift);
  pointer-events: none;
}

.home-section-card:hover::after,
.intro-card:hover::after,
.portal-service-card:hover::after { opacity: 1; }

/* Generic card padding so views that relied on the old defaults stay tidy. */
.home-section-card,
.intro-card,
.default-page-card {
  padding: clamp(1.15rem, 2.4vw, 1.9rem) !important;
}

.intro-text,
.intro-sub {
  color: var(--ink-500) !important;
  font-size: var(--t-sm) !important;
  line-height: 1.75 !important;
}

/* Two-column shell used by the homepage and several inner pages. */
.portal-main-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) var(--rail) !important;
  gap: clamp(1.1rem, 2.2vw, 1.85rem) !important;
  padding-block: clamp(1.3rem, 3vw, 2.4rem) !important;
  align-items: start !important;
  max-width: var(--shell-max);
  margin-inline: auto;
}

.main-content-column {
  display: flex;
  flex-direction: column;
  gap: clamp(1.1rem, 2.2vw, 1.75rem);
  min-width: 0;
}

.sidebar-column {
  display: flex;
  flex-direction: column;
  gap: clamp(1.1rem, 2.2vw, 1.5rem);
  min-width: 0;
  position: sticky;
  top: 84px;
}


/* ==========================================================================
   12 · SIDEBAR WIDGETS
   ========================================================================== */

.sidebar-widget {
  overflow: hidden !important;
  padding: 0 !important;
}

.widget-header {
  display: flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
  padding: 0.85rem 1.05rem !important;
  background: var(--grad-brand) !important;
  color: #ffffff !important;
  font-family: var(--font-ui) !important;
  font-size: var(--t-sm) !important;
  font-weight: 750 !important;
  letter-spacing: 0.015em !important;
  border-bottom: 2px solid var(--gov-gold) !important;
  box-shadow: var(--rim-top-strong), inset 0 -6px 12px -10px rgba(0, 0, 0, 0.26) !important;
  position: relative;
}

.widget-header *,
.widget-header font {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* A slow sheen sweeps each widget header — a quiet sign of a live portal. */
.widget-header::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--grad-sheen);
  transform: translateX(-120%);
  animation: header-sheen 7s var(--ease-swift) infinite;
  pointer-events: none;
}

@keyframes header-sheen {
  0%, 62% { transform: translateX(-120%); }
  86%     { transform: translateX(120%); }
  100%    { transform: translateX(120%); }
}

.widget-body,
.widget-body-spaced,
.widget-body-map,
.widget-body-anthem,
.widget-body-leaders,
.widget-body-emergency,
.widget-body-visitor {
  padding: 0.9rem 1.05rem !important;
  background: #ffffff !important;
}

.widget-link-chevron,
.portal-links-list a,
.notice-board-footer-link {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.6rem !important;
  padding: 0.6rem 0.75rem !important;
  border-radius: var(--r-sm) !important;
  font-size: var(--t-sm) !important;
  font-weight: 600 !important;
  color: var(--ink-700) !important;
  border-left: 3px solid transparent !important;
  transition: background-color var(--dur-fast) var(--ease-swift),
              border-color var(--dur-fast) var(--ease-swift),
              transform var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-swift);
}

.widget-link-chevron:hover,
.portal-links-list a:hover,
.notice-board-footer-link:hover {
  background: var(--brand-050) !important;
  border-left-color: var(--gov-gold) !important;
  color: var(--brand-700) !important;
  transform: translateX(4px);
}

/* Gov links: `space-between` above pushed short labels to the far right
   while long ones wrapped from the left, so the list zig-zagged. Keep every
   label starting right after its chevron, and keep the chevron a small gold
   mark rather than a padded row of its own (the shared rule above gives it
   link padding, since it is listed there as a link class). */
.portal-links-list a {
  justify-content: flex-start !important;
  align-items: flex-start !important;
  text-align: left !important;
  line-height: 1.45 !important;
}

.portal-links-list .widget-link-chevron {
  width: 0.75rem !important;
  height: 0.75rem !important;
  padding: 0 !important;
  margin-top: 0.3em !important;
  border: 0 !important;
  flex: 0 0 auto !important;
  min-width: 0.75rem !important;
  min-height: 0.75rem !important;
  color: var(--gov-gold) !important;
  background-color: var(--gov-gold) !important;
  transform: none !important;
}

.widget-visitor-highlight-gov,
.widget-visitor-highlight-primary,
.widget-emergency-highlight {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.3rem 0.8rem !important;
  border-radius: var(--r-sm) !important;
  background: var(--grad-brand) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  box-shadow: var(--rim-top), 0 3px 8px -4px var(--brand-tint-28);
}

.widget-visitor-row,
.widget-emergency-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding-block: 0.5rem;
  border-bottom: 1px dashed var(--line-soft);
  font-size: var(--t-sm);
}

.widget-visitor-row:last-child,
.widget-emergency-row:last-child { border-bottom: none; }

.widget-map-iframe {
  border-radius: var(--r-md) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--elev-2) !important;
  filter: saturate(1.05) contrast(1.02);
}

.helpline-widget-card {
  background: var(--grad-brand) !important;
  border: none !important;
  border-radius: var(--r-md) !important;
  color: #ffffff !important;
  box-shadow: var(--rim-top), 0 8px 20px -10px var(--brand-tint-28) !important;
}

.helpline-num {
  font-family: var(--font-ui) !important;
  font-size: 1.28rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.helpline-label {
  font-size: var(--t-micro) !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--gov-gold-light) !important;
}

.widget-anthem-audio {
  width: 100%;
  border-radius: var(--r-pill);
  outline: none;
}

.widget-map-address {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: var(--t-xs);
  color: var(--ink-500);
  margin-top: 0.6rem;
  line-height: 1.6;
}


/* ==========================================================================
   13 · QUICK LINKS, SERVICES & LEADERSHIP CARDS
   ========================================================================== */

.quick-links-grid,
.portal-services-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)) !important;
  gap: 0.85rem !important;
}

/* Quick-link tile: a small slab that rises and lights its icon on hover. */
.quick-link-card {
  position: relative;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.6rem !important;
  min-height: 124px;
  padding: 1.15rem 0.8rem !important;
  text-align: center;
  background: linear-gradient(180deg, #ffffff 0%, var(--surface-page) 100%) !important;
  border: 1px solid var(--line-soft) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--elev-2) !important;
  overflow: hidden;
  transform-style: preserve-3d;
  transition:
    transform var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    border-color var(--dur-fast) var(--ease-swift) !important;
}

/* The brand wash that floods up from the base on hover. */
.quick-link-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--grad-brand);
  transform: translateY(101%);
  transition: transform var(--dur-base) var(--ease-out);
  z-index: 0;
}

@media (hover: hover) and (pointer: fine) {
  .quick-link-card:hover {
    transform: perspective(var(--persp)) translateY(var(--lift-far)) rotateX(3deg) !important;
    box-shadow: var(--elev-5), var(--glow-brand) !important;
    border-color: transparent !important;
  }

  .quick-link-card:hover::before { transform: translateY(0); }

  .quick-link-card:hover .quick-link-title,
  .quick-link-card:hover .quick-link-title font {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }

  .quick-link-card:hover .quick-link-icon {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #ffffff !important;
    transform: translateZ(18px) scale(1.06);
  }

  .quick-link-card:hover .quick-link-icon .icon-img {
    background-color: #ffffff !important;
    color: #ffffff !important;
  }
}

.quick-link-icon {
  position: relative;
  z-index: 1;
  display: grid !important;
  place-items: center !important;
  width: 50px !important;
  height: 50px !important;
  border-radius: var(--r-md) !important;
  background: var(--brand-050) !important;
  color: var(--brand) !important;
  font-size: 1.24rem !important;
  box-shadow: inset 0 1px 0 #ffffff, 0 3px 8px -4px var(--brand-tint-16) !important;
  transition: transform var(--dur-base) var(--ease-back),
              background-color var(--dur-base) var(--ease-swift),
              color var(--dur-base) var(--ease-swift);
}

/* The icon element is itself the masked .icon-img, so the pale --brand-050
   "tile" background above was being painted INTO the glyph, leaving every
   icon almost invisible. Each service gets its own colour instead (--ql),
   which paints the glyph, tints the tile and draws its top edge. */
.quick-link-card { --ql: var(--brand); }
.quick-link-card:has(.ql-icon-teachers)    { --ql: #2563eb; }
.quick-link-card:has(.ql-icon-grs)         { --ql: #dc2626; }
.quick-link-card:has(.ql-icon-departments) { --ql: #16a34a; }
.quick-link-card:has(.ql-icon-helpline)    { --ql: #d97706; }
.quick-link-card:has(.ql-icon-map)         { --ql: #7c3aed; }

.quick-link-card {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--ql) 12%, #ffffff) 0%, #ffffff 100%) !important;
  border: 1px solid color-mix(in srgb, var(--ql) 22%, #ffffff) !important;
  border-top: 3px solid var(--ql) !important;
}

.quick-link-icon.icon-img {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: none !important;
  background-color: var(--ql) !important;
  color: var(--ql) !important;
}

@media (hover: hover) and (pointer: fine) {
  .quick-link-card:hover .quick-link-icon.icon-img {
    background-color: #ffffff !important;
    color: #ffffff !important;
  }
}

/* The section card has no padding of its own (its title bar runs edge to
   edge), so the tiles were touching the card's sides. */
.quicklinks-card .quick-links-grid {
  padding: 0 clamp(1rem, 2.2vw, 1.4rem) 1.2rem !important;
}

.quick-link-title {
  position: relative;
  z-index: 1;
  font-family: var(--font-ui) !important;
  font-size: var(--t-xs) !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  color: var(--ink-700) !important;
  transition: color var(--dur-base) var(--ease-swift);
}

/* Service rows */
.portal-service-list,
.service-item-link {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

/* The list is a flex column (HomeView), so the shared `align-items: center`
   above centred every row horizontally and each one shrank to its text,
   leaving the links zig-zagging down the card. Stretch the rows to full
   width and left-align them so every link starts on the same line. */
.portal-service-list {
  align-items: stretch !important;
  text-align: left !important;
}

.portal-service-list li {
  width: 100% !important;
}

.portal-service-list .service-item-link,
.portal-service-list .portal-service-static-item {
  justify-content: flex-start !important;
  width: 100% !important;
  box-sizing: border-box;
}

.service-item-link {
  padding: 0.65rem 0.8rem !important;
  border-radius: var(--r-sm) !important;
  border: 1px solid transparent !important;
  font-size: var(--t-sm) !important;
  font-weight: 600 !important;
  color: var(--ink-700) !important;
  transition: background-color var(--dur-fast) var(--ease-swift),
              border-color var(--dur-fast) var(--ease-swift),
              transform var(--dur-fast) var(--ease-out);
}

.service-item-link:hover {
  background: var(--brand-050) !important;
  border-color: var(--brand-100) !important;
  transform: translateX(4px);
  color: var(--brand-700) !important;
}

.portal-service-card-title {
  font-family: var(--font-ui) !important;
  font-size: var(--t-sm) !important;
  font-weight: 750 !important;
  color: var(--ink-900) !important;
}

/* ---- Leadership / executive portrait cards ----------------------------- */

.dse-executive-card,
.admin-card,
.leader-card-box {
  text-align: center;
  padding: 0 !important;
}

.dse-exec-top-header {
  background: var(--grad-brand) !important;
  color: #ffffff !important;
  padding: 0.55rem 0.9rem !important;
  font-family: var(--font-ui) !important;
  font-size: var(--t-micro) !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  border-bottom: 2px solid var(--gov-gold) !important;
  box-shadow: var(--rim-top-strong) !important;
}

.dse-exec-top-header *,
.dse-exec-top-header font {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* ---- Portrait frames ----------------------------------------------------
   These are RECTANGULAR portrait plates, not round avatars, and must stay
   that way:

     .dse-exec-photo-box  wraps the photo AND the name plate that sits over
                          its lower edge (see HomeView). It has no fixed
                          width, so it fills the card.
     .admin-photo-placeholder  92x112   .leader-photo-box  65x75

   An earlier version of this file gave all three `border-radius: 50%`. On
   .dse-exec-photo-box that turned the whole full-width frame into a giant
   circle and clipped the minister's name and designation off its curved
   edges. Only the border, corner radius and shadow are refined here — the
   harsh 3px near-black border from style.css becomes a brand hairline.     */
.dse-exec-photo-box {
  border: 2px solid var(--brand-200) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--elev-3) !important;
  transition: box-shadow var(--dur-base) var(--ease-out) !important;
}

.admin-photo-placeholder,
.leader-photo-box {
  border: 1px solid var(--brand-200) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--elev-2) !important;
  transition: box-shadow var(--dur-base) var(--ease-out) !important;
}

/* The name plate sits flush along the bottom edge inside that frame. Its
   near-black 2px rule from style.css becomes a brand hairline to match. */
.dse-exec-name-plate {
  border-top: 1px solid var(--brand-200) !important;
  background: var(--surface-page) !important;
}

@media (hover: hover) and (pointer: fine) {
  .dse-executive-card:hover .dse-exec-photo-box,
  .admin-card:hover .admin-photo-placeholder,
  .leader-card-box:hover .leader-photo-box {
    border-color: var(--gov-gold) !important;
    box-shadow: var(--elev-4) !important;
  }
}

.dse-exec-name,
.admin-name,
.leader-name {
  font-family: var(--font-ui) !important;
  font-size: 0.98rem !important;
  font-weight: 800 !important;
  color: var(--ink-900) !important;
  letter-spacing: -0.012em !important;
  margin-bottom: 0.15rem !important;
}

.dse-exec-designation,
.admin-title,
.leader-role {
  font-size: var(--t-xs) !important;
  font-weight: 600 !important;
  color: var(--brand) !important;
  letter-spacing: 0.02em !important;
}

.dse-exec-bottom-bar {
  height: 4px !important;
  background: var(--grad-gold-rule) !important;
  margin-top: 0.9rem !important;
}

/* ---- Mission / vision panels ------------------------------------------- */

.home-mission-vision-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 1.1rem !important;
}

.home-mv-card { padding: 1.4rem !important; }

.home-mv-card-title {
  font-family: var(--font-ui) !important;
  font-size: 1.06rem !important;
  font-weight: 800 !important;
  color: var(--ink-900) !important;
  margin-bottom: 0.45rem !important;
}

.home-mv-card-text {
  font-size: var(--t-sm) !important;
  color: var(--ink-500) !important;
  line-height: 1.78 !important;
}

/* ---- Principal message -------------------------------------------------- */

.home-principal-message-container {
  background:
    radial-gradient(90% 140% at 100% 0%, var(--brand-tint-04) 0%, transparent 60%),
    #ffffff !important;
  border: 1px solid var(--line-soft) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--elev-3) !important;
  padding: clamp(1.2rem, 2.5vw, 2rem) !important;
}

.home-principal-message-text {
  font-size: var(--t-sm) !important;
  line-height: 1.85 !important;
  color: var(--ink-500) !important;
}

.home-principal-name {
  font-family: var(--font-ui) !important;
  font-weight: 800 !important;
  color: var(--ink-900) !important;
}

.home-principal-title {
  font-size: var(--t-xs) !important;
  color: var(--brand) !important;
  font-weight: 650 !important;
}


/* ==========================================================================
   14 · NOTICE LISTS & DOCUMENT PAGES
   ========================================================================== */

.notice-section-header,
.table-card-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap;
  gap: 0.75rem !important;
  padding: 0.9rem 1.15rem !important;
  background: var(--grad-brand) !important;
  border-bottom: 2px solid var(--gov-gold) !important;
  box-shadow: var(--rim-top-strong) !important;
}

.notice-section-header,
.notice-section-header *,
.notice-section-header font,
.table-card-header,
.table-card-header *,
.table-card-header font {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.notice-header-left-group {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-ui);
  font-size: var(--t-sm);
  font-weight: 750;
  letter-spacing: 0.015em;
}

/* Tab strip above the notice list. */
.notice-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.7rem 1.05rem 0;
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--line-soft);
}

.notice-tab-btn {
  padding: 0.48rem 1rem !important;
  border-radius: var(--r-sm) var(--r-sm) 0 0 !important;
  border: 1px solid transparent !important;
  border-bottom: none !important;
  background: transparent !important;
  font-family: var(--font-ui) !important;
  font-size: var(--t-xs) !important;
  font-weight: 700 !important;
  color: var(--ink-400) !important;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-swift),
              color var(--dur-fast) var(--ease-swift);
}

.notice-tab-btn:hover { background: #ffffff !important; color: var(--brand) !important; }

.notice-tab-btn.active {
  background: #ffffff !important;
  border-color: var(--line-soft) !important;
  color: var(--brand-700) !important;
  box-shadow: inset 0 3px 0 var(--gov-gold);
}

.notice-list { padding: 0.4rem 0.55rem; }

/* Notice row: a flat list item that becomes a raised card on hover. */
.notice-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.75rem !important;
  padding: 0.8rem 0.85rem !important;
  border-radius: var(--r-sm) !important;
  border: 1px solid transparent !important;
  border-bottom: 1px dashed var(--line-soft) !important;
  transition: background-color var(--dur-fast) var(--ease-swift),
              transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-fast) var(--ease-swift);
}

@media (hover: hover) and (pointer: fine) {
  .notice-item:hover {
    background: #ffffff !important;
    border-color: var(--brand-100) !important;
    transform: translateX(5px);
    box-shadow: var(--elev-2), -3px 0 0 0 var(--gov-gold) !important;
  }
}

.notice-title-link {
  font-size: var(--t-sm) !important;
  font-weight: 620 !important;
  line-height: 1.6 !important;
  color: var(--ink-700) !important;
  transition: color var(--dur-fast) var(--ease-swift);
}

.notice-title-link:hover {
  color: var(--brand) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.notice-date {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: var(--t-micro) !important;
  font-weight: 650 !important;
  color: var(--ink-300) !important;
  font-variant-numeric: tabular-nums;
}

.notice-badge-new {
  padding: 0.12rem 0.5rem !important;
  border-radius: var(--r-pill) !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  animation: new-flash 2.2s var(--ease-swift) infinite;
}

@keyframes new-flash {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

.notice-pdf-icon,
.pdf-icon-box {
  box-shadow: var(--rim-top), 0 4px 10px -4px rgba(179, 32, 47, 0.6) !important;
}

.notice-board-footer {
  padding: 0.7rem 1.05rem;
  background: var(--surface-sunken);
  border-top: 1px solid var(--line-soft);
  text-align: center;
}

/* Notice detail page */
.notice-detail-card { padding: 0 !important; }

.detail-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.95rem 1.2rem;
  background: var(--grad-brand);
  border-bottom: 2px solid var(--gov-gold);
  box-shadow: var(--rim-top-strong);
}

.detail-topbar,
.detail-topbar * { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; }

.official-label { display: flex; align-items: center; gap: 0.65rem; }

.official-label-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.24);
  box-shadow: var(--rim-top);
}

.official-label-small {
  display: block;
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gov-gold-light) !important;
  -webkit-text-fill-color: var(--gov-gold-light) !important;
}

.notice-body-content {
  padding: clamp(1rem, 2.4vw, 1.75rem) !important;
  font-size: var(--t-body) !important;
  line-height: 1.85 !important;
  color: var(--ink-500) !important;
}

.notice-meta-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.8rem;
  background: var(--surface-sunken);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
}

.meta-content { min-width: 0; }

.meta-label {
  display: block;
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-300);
}

.meta-text,
.contact-value,
.contact-text {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink-700);
}


/* ==========================================================================
   15 · DATA TABLES
   Government portals are mostly tables; these carry most of the pages.
   ========================================================================== */

.table-responsive {
  border-radius: var(--r-md);
  border: 1px solid var(--line-soft);
  box-shadow: var(--elev-1);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: #ffffff;
}

table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  font-size: var(--t-sm) !important;
}

table th,
thead th {
  background: var(--grad-brand) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-family: var(--font-ui) !important;
  font-size: var(--t-xs) !important;
  font-weight: 750 !important;
  letter-spacing: 0.045em !important;
  text-transform: uppercase !important;
  padding: 0.72rem 0.8rem !important;
  border: none !important;
  border-bottom: 2px solid var(--gov-gold) !important;
  box-shadow: var(--rim-top) !important;
  position: sticky;
  top: 0;
  z-index: 3;
  white-space: nowrap;
}

table td {
  padding: 0.68rem 0.8rem !important;
  border: none !important;
  border-bottom: 1px solid var(--line-soft) !important;
  color: var(--ink-500) !important;
  font-size: var(--t-sm) !important;
  line-height: 1.6 !important;
  vertical-align: middle !important;
  background: transparent !important;
}

tbody tr { transition: background-color var(--dur-fast) var(--ease-swift); }

tbody tr:nth-child(even) { background: var(--brand-050) !important; }

tbody tr:hover,
.result-row-hover:hover {
  background: var(--brand-050) !important;
  box-shadow: inset 3px 0 0 var(--gov-gold);
}

tbody tr:last-child td { border-bottom: none !important; }

/* Serial-number chip in the first column. */
.serial-number,
.sl-column .serial-number {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  padding-inline: 0.4rem;
  border-radius: var(--r-xs);
  background: var(--brand-050);
  border: 1px solid var(--brand-100);
  color: var(--brand-700) !important;
  font-size: var(--t-micro);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.table-note {
  font-size: var(--t-xs);
  color: var(--ink-300);
  padding: 0.6rem 0.9rem;
  background: var(--surface-sunken);
  border-top: 1px solid var(--line-soft);
}

.empty-row td,
.empty-notice-state,
.empty-result {
  text-align: center !important;
  color: var(--ink-300) !important;
  padding: 2.4rem 1rem !important;
}


/* ==========================================================================
   16 · BUTTONS & TACTILE CONTROLS
   Buttons are physical: a lit top edge, a cast shadow, and a press that
   actually travels downward.
   ========================================================================== */

.btn,
.btn-primary,
.btn-primary-gov,
.btn-gov-primary,
.official-btn-primary,
.official-submit-btn,
.btn-success,
.btn-dark,
.btn-info,
.btn-services-toggle,
.btn-helpline-toggle,
.news-ticker-btn-all,
.btn-show-all-notices,
.open-document-btn,
.download-document-btn,
.btn-view-pdf,
.btn-download-pdf,
.btn-organogram-download,
.btn-click-here,
.btn-track-action,
.back-notice-btn,
.view-notice-btn,
.clear-search-btn,
.btn-clear-search {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.45rem !important;
  min-height: 40px;
  padding: 0.55rem 1.15rem !important;
  border-radius: var(--r-sm) !important;
  font-family: var(--font-ui) !important;
  font-size: var(--t-sm) !important;
  font-weight: 700 !important;
  letter-spacing: 0.012em !important;
  line-height: 1.2 !important;
  cursor: pointer;
  border: 1px solid transparent !important;
  text-decoration: none !important;
  transition:
    transform var(--dur-fast) var(--ease-swift),
    box-shadow var(--dur-fast) var(--ease-swift),
    filter var(--dur-fast) var(--ease-swift) !important;
}

/* Primary: the brand slab. */
.btn-primary,
.btn-primary-gov,
.btn-gov-primary,
.official-btn-primary,
.official-submit-btn,
.btn-services-toggle,
.btn-helpline-toggle,
.news-ticker-btn-all,
.btn-show-all-notices,
.btn-click-here,
.btn-track-action,
.back-notice-btn,
.view-notice-btn {
  background: var(--grad-brand) !important;
  border-color: var(--brand-700) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow:
    var(--rim-top-strong),
    0 2px 0 var(--brand-800),
    0 6px 16px -6px var(--brand-tint-28) !important;
}

.btn-primary:hover,
.btn-primary-gov:hover,
.btn-gov-primary:hover,
.official-btn-primary:hover,
.official-submit-btn:hover,
.btn-services-toggle:hover,
.btn-helpline-toggle:hover,
.news-ticker-btn-all:hover,
.btn-show-all-notices:hover,
.btn-click-here:hover,
.btn-track-action:hover,
.back-notice-btn:hover,
.view-notice-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.07);
  box-shadow:
    var(--rim-top-strong),
    0 4px 0 var(--brand-800),
    0 14px 26px -8px var(--brand-tint-28) !important;
}

/* The press: the button sinks onto its own shadow. */
.btn:active,
.btn-primary:active,
.btn-primary-gov:active,
.btn-gov-primary:active,
.official-btn-primary:active,
.official-submit-btn:active,
.official-btn-outline:active,
.view-notice-btn:active,
.back-notice-btn:active,
.btn-click-here:active {
  transform: translateY(1px) !important;
  box-shadow:
    var(--rim-top),
    0 1px 0 var(--brand-800),
    0 3px 8px -4px var(--brand-tint-28) !important;
}

/* Outline: quiet secondary action. */
.official-btn-outline,
.btn-outline-gov,
.btn-outline-primary {
  background: #ffffff !important;
  border: 1.5px solid var(--brand-200) !important;
  color: var(--brand) !important;
  -webkit-text-fill-color: var(--brand) !important;
  box-shadow: var(--elev-1) !important;
}

.official-btn-outline:hover,
.btn-outline-gov:hover,
.btn-outline-primary:hover {
  background: var(--brand-050) !important;
  border-color: var(--brand) !important;
  color: var(--brand-700) !important;
  -webkit-text-fill-color: var(--brand-700) !important;
  transform: translateY(-2px);
  box-shadow: var(--elev-3) !important;
}

/* Document / PDF actions keep the familiar red so they stay scannable. */
.btn-danger,
.btn-view-pdf,
.btn-download-pdf,
.btn-pink-pdf,
.btn-attachment,
.attachment-btn,
.mob-pdf-notice-btn,
.btn-organogram-download {
  background: linear-gradient(180deg, var(--gov-crimson-light) 0%, var(--gov-crimson) 100%) !important;
  border-color: #8f1925 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: var(--rim-top-strong), 0 2px 0 #8f1925,
              0 6px 16px -6px rgba(179, 32, 47, 0.5) !important;
}

.btn-danger:hover,
.btn-view-pdf:hover,
.btn-download-pdf:hover,
.btn-pink-pdf:hover,
.btn-attachment:hover,
.btn-organogram-download:hover {
  transform: translateY(-2px);
  filter: brightness(1.07);
  box-shadow: var(--rim-top-strong), 0 4px 0 #8f1925,
              0 14px 26px -8px rgba(179, 32, 47, 0.5) !important;
}

/* Gold: reserved for the single most important action on a page. */
.btn-gold,
.hero-slider-btn-primary {
  background: #C8102E !important;
  border: 1px solid #C8102E !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: 0 8px 22px -8px rgba(200, 16, 46, 0.7) !important;
}

.hero-slider-btn-primary:hover {
  background: #e01a3a !important;
  box-shadow: 0 10px 26px -8px rgba(200, 16, 46, 0.8) !important;
  transform: translateY(-2px) !important;
}

.hero-slider-btn-secondary {
  background: rgba(0, 0, 0, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  color: #ffffff !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.hero-slider-btn-secondary:hover {
  background: rgba(0, 0, 0, 0.5) !important;
  transform: translateY(-2px);
}

.social-circle-btn {
  width: 38px !important;
  height: 38px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
  color: #ffffff !important;
  transition: transform var(--dur-base) var(--ease-back),
              background-color var(--dur-fast) var(--ease-swift);
}

.social-circle-btn:hover {
  background: var(--gov-gold) !important;
  transform: translateY(-3px) rotate(-8deg);
  box-shadow: var(--glow-gold) !important;
}


/* ==========================================================================
   17 · FORMS, SEARCH & PAGINATION
   ========================================================================== */

.form-control,
.search-field,
input[type="text"],
input[type="search"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
textarea,
select:not(.top-portal-lang-select):not(.mobile-lang-select) {
  width: 100%;
  min-height: 42px;
  padding: 0.55rem 0.85rem !important;
  font-family: var(--font-text) !important;
  font-size: var(--t-sm) !important;
  color: var(--ink-700) !important;
  background: #ffffff !important;
  border: 1.5px solid var(--line) !important;
  border-radius: var(--r-sm) !important;
  /* Inset shadow makes the field read as a recess next to raised buttons. */
  box-shadow: inset 0 2px 4px rgba(10, 32, 38, 0.05) !important;
  transition: border-color var(--dur-fast) var(--ease-swift),
              box-shadow var(--dur-fast) var(--ease-swift) !important;
}

.form-control:focus,
.search-field:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: var(--brand) !important;
  box-shadow: inset 0 2px 4px rgba(10, 32, 38, 0.04),
              0 0 0 4px var(--brand-tint-16) !important;
  outline: none !important;
}

.form-control::placeholder,
.search-field::placeholder { color: var(--ink-300) !important; }

.form-label,
.control-label {
  display: block;
  font-family: var(--font-ui) !important;
  font-size: var(--t-xs) !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  color: var(--ink-700) !important;
  margin-bottom: 0.35rem !important;
}

.search-wrap { position: relative; }

.search-wrap .search-field { padding-left: 2.5rem !important; }

.search-ico {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-300);
  pointer-events: none;
}

.entries-select {
  min-height: 38px !important;
  font-weight: 650 !important;
}

/* Pagination */
.pagination-btn,
.notice-pg-btn,
.page-btn {
  min-width: 38px !important;
  min-height: 38px !important;
  display: inline-grid !important;
  place-items: center !important;
  padding: 0.35rem 0.7rem !important;
  border-radius: var(--r-sm) !important;
  background: #ffffff !important;
  border: 1px solid var(--line) !important;
  color: var(--ink-700) !important;
  font-family: var(--font-ui) !important;
  font-size: var(--t-xs) !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums;
  box-shadow: var(--elev-1) !important;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-swift),
              background-color var(--dur-fast) var(--ease-swift),
              border-color var(--dur-fast) var(--ease-swift),
              color var(--dur-fast) var(--ease-swift);
}

.pagination-btn:hover:not(:disabled),
.notice-pg-btn:hover:not(:disabled),
.page-btn:hover:not(:disabled) {
  background: var(--brand-050) !important;
  border-color: var(--brand-200) !important;
  color: var(--brand-700) !important;
  transform: translateY(-2px);
  box-shadow: var(--elev-2) !important;
}

.pagination-btn.active,
.notice-pg-btn.active,
.page-btn.active {
  background: var(--grad-brand) !important;
  border-color: var(--brand-700) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: var(--rim-top), 0 4px 10px -4px var(--brand-tint-28) !important;
}

.pagination-btn:disabled,
.notice-pg-btn:disabled,
.page-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none !important;
}


/* ==========================================================================
   18 · BADGES, PILLS & EMPTY STATES
   ========================================================================== */

.badge-primary,
.badge-count,
.total-records-badge,
.notice-record-badge,
.track-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  padding: 0.28rem 0.8rem !important;
  border-radius: var(--r-pill) !important;
  font-family: var(--font-ui) !important;
  font-size: var(--t-micro) !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.badge-primary,
.badge-count,
.notice-record-badge {
  background: rgba(255, 255, 255, 0.18) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
  box-shadow: var(--rim-top) !important;
}

.total-records-badge {
  background: var(--brand-050) !important;
  border: 1px solid var(--brand-100) !important;
  color: var(--brand-700) !important;
  -webkit-text-fill-color: var(--brand-700) !important;
}

.track-pill {
  background: var(--gov-gold-pale) !important;
  border: 1px solid rgba(201, 150, 47, 0.35) !important;
  color: var(--gov-gold-deep) !important;
}

.empty-notice-state,
.empty-result,
.empty-result-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  padding: clamp(2rem, 5vw, 3.5rem) 1rem !important;
  text-align: center;
}

.empty-state-icon {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--surface-sunken);
  border: 1px solid var(--line-soft);
  color: var(--ink-300) !important;
  font-size: 1.6rem;
  box-shadow: inset 0 2px 6px rgba(10, 32, 38, 0.06);
}

/* Loading spinner in brand colour */
.spinner-border,
.pdf-spinner {
  border-color: var(--brand-100) !important;
  border-top-color: var(--brand) !important;
  border-right-color: var(--brand) !important;
}

.pdf-spinner {
  width: 42px;
  height: 42px;
  border: 4px solid var(--brand-100);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }


/* ==========================================================================
   19 · DYNAMIC CMS PAGE CONTENT
   Admin-authored HTML arrives with arbitrary markup, so these rules give it
   a typographic baseline rather than trusting whatever was pasted in.
   ========================================================================== */

.dynamic-html-content {
  font-size: var(--t-body) !important;
  line-height: 1.85 !important;
  color: var(--ink-500) !important;
}

.dynamic-html-content h1,
.dynamic-html-content h2,
.dynamic-html-content h3,
.dynamic-html-content h4,
.default-page-card h1,
.default-page-card h2,
.default-page-card h3,
.default-page-card h4 {
  font-family: var(--font-ui) !important;
  color: var(--ink-900) !important;
  -webkit-text-fill-color: var(--ink-900) !important;
  font-weight: 800 !important;
  margin-top: 1.6rem !important;
  margin-bottom: 0.7rem !important;
  padding-bottom: 0.45rem;
  position: relative;
}

/* Every CMS heading gets the same short brand rule beneath it. */
.dynamic-html-content h2::after,
.dynamic-html-content h3::after,
.default-page-card h2::after,
.default-page-card h3::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 52px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--brand) 0%, var(--gov-gold) 100%);
}

.dynamic-html-content p,
.default-page-card p {
  color: var(--ink-500) !important;
  -webkit-text-fill-color: var(--ink-500) !important;
  font-size: var(--t-body) !important;
  line-height: 1.85 !important;
  margin-bottom: 1rem !important;
}

.dynamic-html-content a,
.default-page-card a {
  color: var(--brand) !important;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--brand-200);
  transition: text-decoration-color var(--dur-fast) var(--ease-swift);
}

.dynamic-html-content a:hover,
.default-page-card a:hover { text-decoration-color: var(--gov-gold); }

.dynamic-html-content ul,
.dynamic-html-content ol,
.default-page-card ul,
.default-page-card ol {
  padding-left: 1.35rem;
  margin-bottom: 1rem;
}

.dynamic-html-content li,
.default-page-card li {
  margin-bottom: 0.45rem;
  color: var(--ink-500);
}

.dynamic-html-content li::marker,
.default-page-card li::marker { color: var(--brand); }

.dynamic-html-content blockquote {
  margin: 1.2rem 0;
  padding: 0.9rem 1.2rem;
  background: var(--brand-050);
  border-left: 4px solid var(--brand);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: var(--ink-700);
  font-style: italic;
  box-shadow: var(--elev-1);
}

.dynamic-html-content img,
.default-page-card img,
.doc-img-preview {
  max-width: 100%;
  height: auto;
  border-radius: var(--r-md);
  box-shadow: var(--elev-3);
  margin-block: 0.8rem;
}

.dynamic-html-content hr {
  border: none;
  height: 2px;
  background: var(--grad-gold-rule);
  margin-block: 1.6rem;
  opacity: 0.6;
}

.custom-bullet-list li {
  position: relative;
  padding-left: 1.4rem;
  list-style: none;
}

.custom-bullet-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--gov-gold);
  transform: rotate(45deg);
}

.cell-key {
  font-weight: 700 !important;
  color: var(--ink-900) !important;
  background: var(--surface-sunken) !important;
  width: 34%;
}

.cell-val { color: var(--ink-500) !important; }


/* ==========================================================================
   20 · FOOTER
   --------------------------------------------------------------------------
   THIS FOOTER IS LIGHT, AND HAS TO BE.

   An earlier version of this file painted it with --grad-brand-deep. That
   broke it two ways:

     1. Footer.vue's scoped styles colour the footer's own text in dark teal
        (.meta-text strong #173f45, .planning-text strong #183d42,
        .planning-text span #094b54). Those selectors are more specific than
        anything here, so on a dark ground the "Last Updated" timestamp,
        "Cabinet Division" and the a2i line all went dark-on-dark and became
        unreadable.
     2. The illustrated skyline above it (.footer-landscape) is drawn on a
        white <rect>, so a dark block underneath left a hard white-to-dark
        seam straight across the page.

   So the footer now continues the page surface instead: a soft brand-tinted
   ground the skyline settles onto, dark text, and gold used only in the
   deep shade that reads on a light background.
   ========================================================================== */

.portal-gov-footer,
.portal-footer {
  position: relative;
  z-index: 1;
  margin-top: clamp(2rem, 5vw, 3.5rem);
  background:
    linear-gradient(180deg, #ffffff 0%, var(--surface-sunken) 42%, var(--brand-100) 100%) !important;
  color: var(--ink-500) !important;
  overflow: hidden;
  isolation: isolate;
  border-top: 1px solid var(--line-soft);
}

/* The illustrated skyline keeps its own colours and its white ground, which
   now flows straight into the footer surface below it. */
.footer-art {
  position: relative;
  background: #ffffff;
  line-height: 0;
}

.footer-landscape { width: 100%; height: auto; display: block; }

.footer-content,
.portal-footer-grid {
  position: relative;
  z-index: 1;
}

.footer-content {
  padding-block: clamp(1.4rem, 3vw, 2.4rem) !important;
}

.footer-accent-bar {
  height: 4px !important;
  background: var(--grad-gold-rule) !important;
}

.footer-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(0.9rem, 2.5vw, 2.2rem);
  text-align: center;
}

.footer-meta-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}

/* Icon tiles: brand plate on the light ground, matching the rest of the
   portal's light tiles. */
.footer-meta-item .meta-icon,
.footer-content .meta-icon {
  background: var(--grad-brand) !important;
  border: none !important;
  color: #ffffff !important;
  box-shadow: var(--rim-top), 0 5px 12px -6px var(--brand-tint-28) !important;
}

.footer-content .meta-icon svg { width: 20px; height: 20px; }

/* Small caps labels take the deep gold: legible on a light ground where the
   bright gold would wash out. */
.footer-content .meta-label,
.portal-footer-subtitle,
.planning-title {
  color: var(--gov-gold-deep) !important;
  font-family: var(--font-ui) !important;
  font-size: var(--t-micro) !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

.footer-content .meta-text strong,
.planning-text strong {
  color: var(--ink-900) !important;
  font-family: var(--font-ui) !important;
  font-weight: 750 !important;
  font-size: var(--t-sm) !important;
}

.footer-content .meta-text span:not(.meta-label),
.planning-text span,
.portal-footer-address,
.portal-footer-desc {
  color: var(--ink-500) !important;
  font-size: var(--t-xs) !important;
  line-height: 1.6 !important;
}

.meta-separator {
  width: 1px;
  align-self: stretch;
  min-height: 34px;
  background: linear-gradient(180deg, transparent, var(--line-strong), transparent);
}

.portal-footer-title,
.portal-footer-title-main {
  font-family: var(--font-ui) !important;
  color: var(--ink-900) !important;
  font-weight: 800 !important;
  letter-spacing: -0.015em !important;
}

.portal-footer-links a,
.portal-footer-social a {
  color: var(--ink-500) !important;
  font-size: var(--t-sm) !important;
  transition: color var(--dur-fast) var(--ease-swift),
              transform var(--dur-fast) var(--ease-out);
  display: inline-block;
}

.portal-footer-links a:hover {
  color: var(--brand-700) !important;
  transform: translateX(3px);
}

.planning-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

.planning-content {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.gov-badge {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--grad-brand) !important;
  color: #ffffff !important;
  box-shadow: var(--rim-top), 0 5px 12px -6px var(--brand-tint-28) !important;
}

.gov-badge span { color: #ffffff !important; }

.footer-copyright,
.portal-footer-bottom {
  margin-top: 1.2rem;
  padding-top: 0.95rem;
  border-top: 1px solid var(--line) !important;
  text-align: center;
  font-size: var(--t-xs) !important;
  color: var(--ink-500) !important;
}

.footer-copyright-divider {
  margin-inline: 0.6rem;
  color: var(--gov-gold-deep);
}

/* Footer.vue sets this link's colour inline, so it needs !important here. */
.footer-dev-credit-link {
  color: var(--brand-700) !important;
  transition: color var(--dur-fast) var(--ease-swift);
}

.footer-dev-credit-link:hover { color: var(--gov-gold-deep) !important; }

/* Partner logo strip */
.partner-banner-container {
  background: rgba(255, 255, 255, 0.6);
  border-block: 1px solid var(--line-soft);
  padding-block: 0.9rem;
}

.partner-logo-item {
  transition: transform var(--dur-base) var(--ease-back),
              filter var(--dur-base) var(--ease-swift);
  filter: grayscale(1);
  opacity: 0.72;
}

.partner-logo-item:hover {
  transform: translateY(-4px) scale(1.05);
  filter: grayscale(0);
  opacity: 1;
}


/* ==========================================================================
   21 · UTILITIES: SCROLL PROGRESS, BACK-TO-TOP, PRELOADER
   Markup for these lives in frontend.blade.php, outside the Vue tree, so
   they survive route changes.
   ========================================================================== */

.gov-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  z-index: 2000;
  background: linear-gradient(90deg, var(--brand) 0%, var(--gov-gold) 100%);
  box-shadow: 0 0 10px var(--brand-tint-28);
  transition: width 90ms linear;
  pointer-events: none;
}

.gov-to-top {
  position: fixed;
  right: clamp(0.85rem, 2.5vw, 1.6rem);
  bottom: clamp(0.85rem, 2.5vw, 1.6rem);
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--brand-700);
  background: var(--grad-brand);
  color: #ffffff;
  cursor: pointer;
  z-index: 1200;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(0.9);
  box-shadow: var(--rim-top-strong), 0 10px 24px -10px rgba(10, 32, 38, 0.65);
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-back),
              visibility var(--dur-base),
              box-shadow var(--dur-base) var(--ease-out);
}

.gov-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.gov-to-top:hover {
  transform: translateY(-4px) scale(1.06);
  box-shadow: var(--rim-top-strong), 0 16px 32px -10px rgba(10, 32, 38, 0.7);
}

.gov-to-top svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2.4; }

/* Utility classes available to any view */
.gov-glass {
  background: var(--surface-frost);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: var(--elev-3);
}

.gov-elevate-1 { box-shadow: var(--elev-1) !important; }
.gov-elevate-3 { box-shadow: var(--elev-3) !important; }
.gov-elevate-5 { box-shadow: var(--elev-5) !important; }

.animate-fade,
.animate-fade-in-up {
  animation: gov-fade-up var(--dur-slow) var(--ease-out) both;
}

@keyframes gov-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Brand-tinted scrollbar */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--surface-sunken); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--brand-400) 0%, var(--brand) 100%);
  border-radius: var(--r-pill);
  border: 2px solid var(--surface-sunken);
}
::-webkit-scrollbar-thumb:hover { background: var(--brand-700); }

html { scrollbar-color: var(--brand) var(--surface-sunken); scrollbar-width: thin; }



/* ==========================================================================
   21B · EDITORIAL RHYTHM
   --------------------------------------------------------------------------
   The single thing that separated this portal from a first-rank institutional
   site was not colour or effects — it was RHYTHM. Every block sat at the same
   visual weight, with the same small gap, on one flat surface, so the page
   read as a list of cards rather than a document with a structure.

   Reference behaviour from top medical-school and health-system sites: a wide
   type-size ratio between a section head and its body, generous air BETWEEN
   sections and tight air INSIDE them, and a small number of clearly ranked
   entry points near the top.

   Everything here is spacing and scale on classes that already exist. Note
   what is deliberately NOT touched: `.section-title` is white-on-dark inside
   several views (ResultView and friends put it on a brand bar), so resizing
   it globally would wreck those pages.
   ========================================================================== */

/* ---- Air between sections, not inside them ----------------------------- */
.portal-main-grid {
  padding-block: clamp(1.8rem, 4vw, 3.25rem) !important;
  gap: clamp(1.4rem, 2.6vw, 2.25rem) !important;
}

.main-content-column {
  gap: clamp(1.6rem, 3.2vw, 2.75rem);
}

.sidebar-column {
  gap: clamp(1.2rem, 2.4vw, 1.75rem);
}

/* Inner pages get the same treatment: the banner should not collide with the
   first card, and the last card should not collide with the footer.
   Scoped to the page's OWN container — a blanket `.gov-container` rule would
   also hit nested containers and stack the padding several times over on the
   views that wrap more than one section. */
.app-main-content > * > .gov-container {
  padding-block: clamp(1.4rem, 3vw, 2.5rem);
}

/* ---- Cards breathe -------------------------------------------------------
   Tighter gap inside a card than between cards is what makes a card read as
   one object rather than as loose rows. */
.home-section-card,
.intro-card,
.default-page-card {
  padding: clamp(1.3rem, 2.6vw, 2.15rem) !important;
}

.notice-body-content {
  padding: clamp(1.2rem, 2.6vw, 2.15rem) !important;
}

/* ---- Type scale on admin-authored pages ---------------------------------
   These are the real page bodies, and they are wholly ours to set. A section
   head at ~1.9rem against 0.975rem body is the ratio institutional sites use;
   the previous 1.24rem head sat too close to the body to lead the eye. */
.dynamic-html-content h1,
.default-page-card h1 {
  font-size: clamp(1.6rem, 3vw, 2.35rem) !important;
  line-height: 1.2 !important;
  margin-top: 0 !important;
  margin-bottom: 0.9rem !important;
}

.dynamic-html-content h2,
.default-page-card h2 {
  font-size: clamp(1.32rem, 2.3vw, 1.85rem) !important;
  line-height: 1.24 !important;
  margin-top: 2.4rem !important;
  margin-bottom: 0.85rem !important;
}

.dynamic-html-content h3,
.default-page-card h3 {
  font-size: clamp(1.1rem, 1.6vw, 1.32rem) !important;
  line-height: 1.32 !important;
  margin-top: 1.9rem !important;
  margin-bottom: 0.6rem !important;
}

/* The first heading in a card should not push itself away from the card top. */
.dynamic-html-content > :first-child,
.default-page-card > :first-child { margin-top: 0 !important; }

.dynamic-html-content p,
.default-page-card p {
  max-width: 76ch;
  margin-bottom: 1.15rem !important;
}

/* ---- Hero: more presence, more air -------------------------------------- */
.hero-slider-text-wrapper { max-width: 56ch; }

.hero-slider-title {
  font-size: clamp(1.85rem, 3.8vw, 3.4rem) !important;
  letter-spacing: -0.03em !important;
}

/* Inner-page banners (SubpageBanner.vue): a page heading, not a homepage
   splash, so it runs much smaller — in line with the homepage slider title. */
.subpage-banner-hero .hero-slider-title {
  font-size: clamp(1.3rem, 2.2vw, 2rem) !important;
  letter-spacing: -0.02em !important;
}

.hero-slider-description {
  font-size: clamp(0.94rem, 1.3vw, 1.12rem) !important;
  margin-top: 0.2rem;
}

.hero-slider-actions { margin-top: 1.7rem; }

.hero-slider-btn-primary,
.hero-slider-btn-secondary {
  padding: 0.72rem 1.5rem !important;
  font-size: 0.9rem !important;
  border-radius: var(--r-sm) !important;
  font-family: var(--font-ui) !important;
  font-weight: 700 !important;
}

/* ---- Entry points --------------------------------------------------------
   The quick-link grid is what most visitors actually came for, so it is given
   the weight of a deliberate band rather than of one more card in the stack. */
.quicklinks-card .widget-header,
.quicklinks-card .column-section-title {
  font-size: 0.82rem !important;
  letter-spacing: 0.06em !important;
}

.quick-links-grid {
  gap: 0.9rem !important;
}

.quick-link-card {
  min-height: 132px;
}

/* ---- Tables sit in their own quiet frame -------------------------------- */
.table-section-card,
.documents-table-card { padding: 0 !important; }

.table-responsive { margin: 0 !important; }

/* ---- A calmer resting state --------------------------------------------
   Depth is kept for the things a visitor can act on. Static content blocks
   settle back so that hoverable cards are the ones that stand out. */
.intro-card,
.notice-detail-card {
  box-shadow: var(--elev-2) !important;
}

/* ==========================================================================
   22 · RESPONSIVE SYSTEM
   Desktop-down refinements, then a dedicated mobile pass. The portal is
   read overwhelmingly on phones, so the small screens get the most care.
   ========================================================================== */

/* ---- Large desktop ----------------------------------------------------- */
@media (max-width: 1280px) {
  :root { --rail: 300px; }
  /* Still larger than the 0.77rem this used to drop to: hiding the chevrons
     frees enough room to keep the labels readable. Measured at 1103px
     against 1208px available. */
  .nav-item-link { padding-inline: 0.62rem !important; font-size: 0.82rem !important; }
  .nav-item-link .icon-img { display: none; }
}

/* ---- Tablet landscape: the rail drops under the main column ------------ */
@media (max-width: 1100px) {
  :root { --shell-max: 100%; }

  .portal-main-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .sidebar-column {
    position: static;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 1rem;
  }
}

/* ---- Tablet portrait ---------------------------------------------------- */
@media (max-width: 991px) {
  /* The desktop branding band and inline ticker give way to the compact
     mobile bar inside the nav ribbon. */
  .portal-header { display: none !important; }
  .top-portal-clock-info.hidden-tablet { display: none !important; }

  .nav-mobile-bar { display: flex !important; }

  .nav-ribbon { position: sticky; top: 0; z-index: 1100; }

  /* Off-canvas drawer.
     style.css already implements this drawer (fixed, right-hand, dark) and
     drives the submenu accordion through max-height/opacity/padding on
     `.mobile-open > .dropdown-menu`. This block therefore only re-skins it:
     it does NOT touch position, max-height, opacity, overflow or the submenu
     padding, because overriding those is what breaks the open/close
     animation and leaves a sliver of padding under every collapsed item. */
  .nav-links-list {
    width: min(86vw, 360px) !important;
    background: var(--grad-brand-deep) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: -18px 0 46px -18px rgba(4, 22, 26, 0.7) !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .mobile-drawer-header { display: flex !important; }

  .nav-links-list > li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.09) !important;
  }

  .nav-item-link {
    min-height: 48px;
    border-radius: 0 !important;
    color: rgba(255, 255, 255, 0.93) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.93) !important;
    font-family: var(--font-ui) !important;
    font-weight: 620 !important;
  }

  .nav-item-link::after { display: none; }

  .nav-item-link:hover,
  .nav-item-link.router-link-active {
    background: rgba(255, 255, 255, 0.11) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: inset 4px 0 0 var(--gov-gold);
  }

  /* Undo the desktop floating-panel treatment from section 06. Media queries
     add no specificity, so those rules would otherwise still apply here and
     paint a white panel with white text inside the dark drawer. The reset to
     `padding: 0` matters most: style.css collapses a submenu with
     max-height:0 + padding:0, and leaving section 06's 0.45rem padding in
     place shows as a sliver under every closed menu item. The expanded state
     (`.mobile-open > .dropdown-menu`) is two classes, so it still wins. */
  .dropdown-menu,
  .dropdown-submenu,
  .mega-menu,
  .mega-menu-container {
    background: rgba(0, 0, 0, 0.26) !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    animation: none !important;
    transform: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Submenu links only — the container keeps style.css's accordion rules. */
  .dropdown-menu a,
  .dropdown-submenu a,
  .mega-menu-links a {
    min-height: 44px;
    border-radius: 0 !important;
    border-left: 3px solid transparent !important;
    color: rgba(255, 255, 255, 0.86) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.86) !important;
  }

  .dropdown-menu a:hover,
  .dropdown-submenu a:hover,
  .mega-menu-links a:hover {
    background: rgba(255, 255, 255, 0.14) !important;
    border-left-color: var(--gov-gold) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    padding-left: 1.25rem !important;
  }

  .mega-menu-column-title {
    color: var(--gov-gold-light) !important;
    border-bottom-color: rgba(255, 255, 255, 0.16) !important;
  }

  .mega-menu-content { display: flex !important; }
  .mega-menu-column { width: 100% !important; }

  .mobile-only-ticker { display: block !important; }
}

/* ---- Phones ------------------------------------------------------------- */
@media (max-width: 767px) {
  :root {
    --gutter: 0.9rem;
    --t-body: 0.95rem;
    --r-lg: 14px;
    --r-xl: 18px;
  }

  body { font-size: 0.95rem !important; line-height: 1.68; }

  /* Drop the fixed decorative orbs: they cost paint on low-end phones and
     are barely visible at this width anyway. */
  .app-container::before,
  .app-container::after { display: none; }

  .top-portal-content {
    min-height: 38px !important;
    gap: 0.5rem !important;
  }

  .top-portal-lang-select { font-size: 0.7rem !important; padding: 0.26rem 1.7rem 0.26rem 0.75rem !important; }

  .top-portal-login-link { padding: 0.3rem 0.8rem !important; font-size: 0.7rem !important; }

  .hero-slider-content { padding: 1.45rem 1.15rem !important; }

  .hero-slider-title { font-size: clamp(1.3rem, 6.2vw, 1.75rem) !important; }

  .hero-slider-title::after { width: 60px; height: 3px; margin-top: 0.65rem; }

  .hero-slider-badge,
  .subpage-banner-badge {
    font-size: 0.62rem !important;
    padding: 0.3rem 0.8rem !important;
    margin-bottom: 0.6rem !important;
  }

  /* Ken Burns is the single most expensive effect on a phone; hold still. */
  .hero-slider-bg { animation: none; transform: scale(1.02); }

  .slider-arrow,
  .prev-arrow,
  .next-arrow { width: 38px !important; height: 38px !important; }

  .portal-main-grid { padding-block: 1rem !important; gap: 1rem !important; }

  .sidebar-column { grid-template-columns: 1fr; }

  .quick-links-grid,
  .portal-services-grid {
    grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)) !important;
    gap: 0.6rem !important;
  }

  .quick-link-card { min-height: 106px; padding: 0.9rem 0.55rem !important; }
  .quick-link-icon { width: 42px !important; height: 42px !important; font-size: 1.05rem !important; }
  .quick-link-title { font-size: 0.72rem !important; }

  .home-section-card,
  .intro-card,
  .default-page-card { padding: 1rem !important; }

  .widget-header { padding: 0.75rem 0.9rem !important; font-size: var(--t-xs) !important; }
  .widget-body { padding: 0.75rem 0.9rem !important; }

  .section-icon,
  .section-icon-box,
  .intro-icon,
  .notice-heading-icon { width: 36px !important; height: 36px !important; }

  /* Comfortable touch targets everywhere. */
  .btn,
  .btn-primary,
  .official-btn-primary,
  .official-btn-outline,
  .view-notice-btn,
  .pagination-btn,
  .notice-pg-btn {
    min-height: 44px !important;
    padding-inline: 1rem !important;
  }

  .notice-item { padding: 0.75rem 0.6rem !important; }
  .notice-item:hover { transform: none !important; }

  .footer-meta-row { flex-direction: column; gap: 1rem; }
  .meta-separator { display: none; }
  .footer-content { padding-block: 1.3rem !important; }

  .gov-to-top { width: 42px; height: 42px; }

  /* Tables scroll horizontally with a visible edge cue rather than
     silently clipping their right-hand columns. */
  .table-responsive {
    position: relative;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  table th { font-size: 0.68rem !important; padding: 0.55rem 0.6rem !important; }
  table td { font-size: 0.78rem !important; padding: 0.55rem 0.6rem !important; }
}

/* ---- Small phones ------------------------------------------------------- */
@media (max-width: 400px) {
  :root { --gutter: 0.75rem; }

  .quick-links-grid,
  .portal-services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  .nav-mobile-toggle span { display: none; }

  .mobile-logo-img { width: 34px !important; height: 34px !important; }
}




/* ==========================================================================
   23 · HARMONISATION WITH THE LEGACY LAYERS
   app.css carries a set of `.translated-ltr ...` rules for Google-Translate
   (Bangla) mode. Those selectors are a class more specific than the plain
   element selectors used above, so without matching `.translated-ltr`
   variants the portal would silently revert to the old grey-bordered look
   the moment a visitor switches to Bangla. Everything here exists purely to
   keep English and Bangla visually identical.
   ========================================================================== */

/* ---- Tables ------------------------------------------------------------- */
.translated-ltr table th,
.translated-ltr thead th,
.translated-ltr th,
.translated-ltr .results-table th,
.translated-ltr .custom-phase-table th,
.translated-ltr .phase-table-header th {
  background: var(--grad-brand) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-family: var(--font-ui) !important;
  font-size: var(--t-xs) !important;
  font-weight: 750 !important;
  letter-spacing: 0.045em !important;
  padding: 0.72rem 0.8rem !important;
  border: none !important;
  border-bottom: 2px solid var(--gov-gold) !important;
  box-shadow: var(--rim-top) !important;
}

.translated-ltr table td,
.translated-ltr td {
  border: none !important;
  border-bottom: 1px solid var(--line-soft) !important;
  color: var(--ink-500) !important;
  padding: 0.68rem 0.8rem !important;
  font-size: var(--t-sm) !important;
}

.translated-ltr tbody tr:last-child td { border-bottom: none !important; }

.translated-ltr tbody tr:nth-child(even) { background: var(--brand-050) !important; }

.translated-ltr tbody tr:hover {
  background: var(--brand-050) !important;
  box-shadow: inset 3px 0 0 var(--gov-gold) !important;
}

/* ---- Buttons ------------------------------------------------------------ */
.translated-ltr .btn-primary,
.translated-ltr .official-btn-primary,
.translated-ltr .btn-gov-primary,
.translated-ltr .btn-primary-gov,
.translated-ltr .view-notice-btn,
.translated-ltr .back-notice-btn,
.translated-ltr .btn-click-here {
  background: var(--grad-brand) !important;
  border-color: var(--brand-700) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border-radius: var(--r-sm) !important;
  box-shadow:
    var(--rim-top-strong),
    0 2px 0 var(--brand-800),
    0 6px 16px -6px var(--brand-tint-28) !important;
}

.translated-ltr .official-btn-outline,
.translated-ltr .btn-outline-gov,
.translated-ltr .btn-outline-primary {
  background: #ffffff !important;
  border: 1.5px solid var(--brand-200) !important;
  border-color: var(--brand-200) !important;
  color: var(--brand) !important;
  -webkit-text-fill-color: var(--brand) !important;
  border-radius: var(--r-sm) !important;
}

.translated-ltr .official-btn-outline:hover {
  background: var(--brand-050) !important;
  border-color: var(--brand) !important;
  color: var(--brand-700) !important;
  -webkit-text-fill-color: var(--brand-700) !important;
}

/* ---- Badges & chips ----------------------------------------------------- */
.translated-ltr .total-records-badge,
.translated-ltr .total-records-badge * {
  background: var(--brand-050) !important;
  border-color: var(--brand-100) !important;
  color: var(--brand-700) !important;
  -webkit-text-fill-color: var(--brand-700) !important;
}

.translated-ltr .notice-badge-new,
.translated-ltr .notice-badge-new * {
  background: var(--gov-gold-pale) !important;
  color: var(--gov-gold-deep) !important;
  -webkit-text-fill-color: var(--gov-gold-deep) !important;
}

/* ---- Chrome that must stay white-on-brand in both languages ------------- */
.translated-ltr .widget-header,
.translated-ltr .widget-header *,
.translated-ltr .widget-header font,
.translated-ltr .notice-section-header,
.translated-ltr .notice-section-header *,
.translated-ltr .table-card-header,
.translated-ltr .table-card-header *,
.translated-ltr .dse-exec-top-header,
.translated-ltr .dse-exec-top-header *,
.translated-ltr .detail-topbar,
.translated-ltr .detail-topbar * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.translated-ltr .hero-slider-title,
.translated-ltr .hero-slider-title font {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.translated-ltr .subpage-banner-badge,
.translated-ltr .subpage-banner-badge font,
.translated-ltr .hero-slider-badge,
.translated-ltr .official-label-small {
  color: var(--gov-gold-light) !important;
  -webkit-text-fill-color: var(--gov-gold-light) !important;
}

/* Google Translate re-wraps the title in <font> elements, so the colour has
   to be restated for Bangla. It must be WHITE, like the English title: this
   previously fell back to a dark brand colour, which was correct only while
   the masthead was white and turned into dark-on-teal once it was restored. */
.translated-ltr .header-brand-title,
.translated-ltr .header-brand-title font,
.translated-ltr .header-brand-title * {
  background: none !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}


/* ---- Download / attachment links --------------------------------------- */
.pdf-download-link,
.translated-ltr .pdf-download-link {
  background-color: #fdf2f3 !important;
  border: 1px solid #f6d6da !important;
  color: var(--gov-crimson) !important;
  -webkit-text-fill-color: var(--gov-crimson) !important;
  border-radius: var(--r-xs) !important;
  font-size: var(--t-xs) !important;
  font-weight: 700 !important;
  transition: background-color var(--dur-fast) var(--ease-swift),
              color var(--dur-fast) var(--ease-swift),
              transform var(--dur-fast) var(--ease-swift) !important;
}

.pdf-download-link:hover,
.translated-ltr .pdf-download-link:hover {
  background-color: var(--gov-crimson) !important;
  border-color: var(--gov-crimson) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 14px -6px rgba(179, 32, 47, 0.55) !important;
}

.pdf-download-link:hover *,
.pdf-download-link:hover .text-danger { color: #ffffff !important; }

.no-file-text,
.translated-ltr .no-file-text {
  background-color: var(--surface-sunken) !important;
  border: 1px solid var(--line-soft) !important;
  color: var(--ink-300) !important;
  -webkit-text-fill-color: var(--ink-300) !important;
  border-radius: var(--r-xs) !important;
  font-size: var(--t-xs) !important;
}

/* ---- Mobile table-to-card stack (defined in app.css) -------------------- */
@media (max-width: 768px) {
  .custom-committee-table tr,
  .committee-table tr,
  .dynamic-html-content table:not(.custom-doc-table):not(.key-value-table):not(.mbbs-curriculum-table) tr,
  .default-page-card table:not(.custom-doc-table):not(.key-value-table) tr {
    border: 1px solid var(--line-soft) !important;
    border-radius: var(--r-md) !important;
    box-shadow: var(--elev-2) !important;
    padding: 1rem 1.1rem !important;
    margin-bottom: 0.9rem !important;
  }

  .custom-committee-table tr td:first-child,
  .committee-table tr td:first-child,
  .dynamic-html-content table:not(.custom-doc-table):not(.key-value-table):not(.mbbs-curriculum-table) tr td:first-child,
  .default-page-card table:not(.custom-doc-table):not(.key-value-table) tr td:first-child {
    color: var(--brand-700) !important;
    border-bottom: 2px solid var(--brand-100) !important;
    font-family: var(--font-ui) !important;
  }
}

/* ---- Reveal directive: shorter, vertical-only travel on phones ---------- */
@media (max-width: 767px) {
  .reveal-on-scroll.reveal-from-up { transform: translateY(22px); }
  .reveal-on-scroll { transition-duration: 0.45s; }
}

/* ---- Stacking ----------------------------------------------------------
   The decorative orbs are fixed children of .app-container at z-index 0.
   The footer is positioned but has no z-index, so in document order the
   later ::after orb would paint a gold haze over it. Lift the footer. */
.portal-gov-footer,
.portal-footer {
  z-index: 1;
}

/* ---- Legacy table classes ----------------------------------------------
   app.css styles these by class name, which out-specifies the plain
   `table` / `table th` selectors used above. Restate the design for them
   so document tables match the rest of the portal instead of keeping the
   old grey 1.5px frame. */
.program-table,
.results-table,
.calendar-table,
.charter-table,
.magazine-table,
.curriculum-table,
.batch-table,
.dept-table,
.custom-committee-table,
.custom-doc-table,
.curriculum-exact-table,
.curriculum-table-custom,
.mbbs-curriculum-table,
.custom-phase-table,
.ms-table,
.md-table,
.fcps-table {
  border: none !important;
  border-radius: var(--r-md) !important;
  overflow: hidden !important;
  box-shadow: var(--elev-1) !important;
}

.program-table th,
.results-table th,
.calendar-table th,
.charter-table th,
.magazine-table th,
.curriculum-table th,
.batch-table th,
.dept-table th,
.custom-committee-table th,
.custom-doc-table th,
.curriculum-exact-table th,
.curriculum-table-custom th,
.mbbs-curriculum-table th,
.custom-phase-table th,
.ms-table th,
.md-table th,
.fcps-table th,
.all-student-table th,
.seminar-table th,
.batch-exact-table th,
.custom-capacity-table th {
  background: var(--grad-brand) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-family: var(--font-ui) !important;
  font-size: var(--t-xs) !important;
  font-weight: 750 !important;
  letter-spacing: 0.045em !important;
  padding: 0.72rem 0.8rem !important;
  border: none !important;
  border-bottom: 2px solid var(--gov-gold) !important;
}

.program-table td,
.results-table td,
.calendar-table td,
.charter-table td,
.magazine-table td,
.curriculum-table td,
.batch-table td,
.dept-table td,
.custom-committee-table td,
.custom-doc-table td,
.curriculum-exact-table td,
.ms-table td,
.md-table td,
.fcps-table td {
  border: none !important;
  border-bottom: 1px solid var(--line-soft) !important;
  color: var(--ink-500) !important;
  padding: 0.68rem 0.8rem !important;
  font-size: var(--t-sm) !important;
}

.program-table tr:nth-child(even),
.results-table tr:nth-child(even),
.calendar-table tr:nth-child(even),
.charter-table tr:nth-child(even),
.magazine-table tr:nth-child(even),
.curriculum-table tr:nth-child(even),
.batch-table tr:nth-child(even),
.dept-table tr:nth-child(even),
.custom-committee-table tr:nth-child(even),
.custom-doc-table tr:nth-child(even),
.curriculum-exact-table tr:nth-child(even),
.ms-table tr:nth-child(even),
.md-table tr:nth-child(even),
.fcps-table tr:nth-child(even) {
  background-color: var(--brand-050) !important;
}

.program-table tr:hover,
.results-table tr:hover,
.calendar-table tr:hover,
.charter-table tr:hover,
.magazine-table tr:hover,
.curriculum-table tr:hover,
.batch-table tr:hover,
.dept-table tr:hover,
.custom-committee-table tr:hover,
.custom-doc-table tr:hover,
.curriculum-exact-table tr:hover,
.ms-table tr:hover,
.md-table tr:hover,
.fcps-table tr:hover {
  background-color: var(--brand-050) !important;
}


/* ==========================================================================
   24 · SPECIFICITY ESCALATION
   --------------------------------------------------------------------------
   WHY THE REPEATED CLASS NAMES BELOW

   Each view is a Vue SFC with <style scoped>. Those compile to selectors like
   `.portal-service-card[data-v-1a2b]` — an attribute selector, so specificity
   (0,2,0) — and vue-loader injects them into <head> at RUNTIME, i.e. after
   this file's <link>. A number of views also mark them !important. Against
   that, a plain `.portal-service-card { ... !important }` here loses on both
   counts: lower specificity, and earlier in the document.

   Repeating the class raises specificity to (0,3,0) without changing what the
   selector matches, so these rules win outright rather than depending on load
   order. Only the properties that define the shared material — surface,
   border, corner radius, elevation, and the brand header bar — are restated.
   Layout (padding, display, width) is deliberately left alone, because views
   legitimately vary there: the notice board card, for example, sets padding:0
   because it carries its own full-bleed header.
   ========================================================================== */

/* ---- Card surfaces ------------------------------------------------------ */
.home-section-card.home-section-card.home-section-card,
.portal-service-card.portal-service-card.portal-service-card,
.notice-custom-wrapper.notice-custom-wrapper.notice-custom-wrapper,
.home-video-card.home-video-card.home-video-card,
.notice-board.notice-board.notice-board,
.sidebar-widget.sidebar-widget.sidebar-widget,
.intro-card.intro-card.intro-card,
.table-section-card.table-section-card.table-section-card,
.documents-table-card.documents-table-card.documents-table-card,
.notice-detail-card.notice-detail-card.notice-detail-card,
.default-page-card.default-page-card.default-page-card,
.portal-services-section-wrapper.portal-services-section-wrapper.portal-services-section-wrapper {
  background: var(--surface-raised) !important;
  border: 1px solid var(--line-soft) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--elev-3) !important;
  overflow: hidden !important;
}

@media (hover: hover) and (pointer: fine) {
  .home-section-card.home-section-card.home-section-card:hover,
  .portal-service-card.portal-service-card.portal-service-card:hover,
  .intro-card.intro-card.intro-card:hover,
  .table-section-card.table-section-card.table-section-card:hover,
  .home-video-card.home-video-card.home-video-card:hover {
    border-color: var(--brand-200) !important;
    box-shadow: var(--elev-5), var(--glow-brand) !important;
  }
}

/* ---- Brand header bars -------------------------------------------------- */
.widget-header.widget-header.widget-header,
.column-section-title.column-section-title.column-section-title,
.notice-section-header.notice-section-header.notice-section-header,
.table-card-header.table-card-header.table-card-header,
.home-media-banner-header.home-media-banner-header.home-media-banner-header {
  background: var(--grad-brand) !important;
  border-bottom: 2px solid var(--gov-gold) !important;
  box-shadow: var(--rim-top-strong), inset 0 -6px 12px -10px rgba(0, 0, 0, 0.26) !important;
}

.widget-header.widget-header.widget-header,
.widget-header.widget-header.widget-header *,
.column-section-title.column-section-title.column-section-title,
.column-section-title.column-section-title.column-section-title *,
.notice-section-header.notice-section-header.notice-section-header,
.notice-section-header.notice-section-header.notice-section-header *,
.table-card-header.table-card-header.table-card-header,
.table-card-header.table-card-header.table-card-header * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* ---- Pagination --------------------------------------------------------- */
.notice-pg-btn.notice-pg-btn.notice-pg-btn,
.notice-pg-num.notice-pg-num.notice-pg-num,
.pagination-btn.pagination-btn.pagination-btn {
  border-radius: var(--r-sm) !important;
  border: 1px solid var(--line) !important;
  background: #ffffff !important;
  color: var(--ink-700) !important;
  -webkit-text-fill-color: var(--ink-700) !important;
  font-family: var(--font-ui) !important;
  font-weight: 700 !important;
  box-shadow: var(--elev-1) !important;
}

.notice-pg-btn.notice-pg-btn.notice-pg-btn.active,
.notice-pg-num.notice-pg-num.notice-pg-num.active,
.pagination-btn.pagination-btn.pagination-btn.active {
  background: var(--grad-brand) !important;
  border-color: var(--brand-700) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: var(--rim-top), 0 4px 10px -4px var(--brand-tint-28) !important;
}

.notice-pg-btn.notice-pg-btn.notice-pg-btn.active *,
.notice-pg-num.notice-pg-num.notice-pg-num.active * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* ---- Primary buttons ---------------------------------------------------- */
.btn-show-all-notices.btn-show-all-notices.btn-show-all-notices,
.btn-services-toggle.btn-services-toggle.btn-services-toggle,
.news-ticker-btn-all.news-ticker-btn-all.news-ticker-btn-all {
  background: var(--grad-brand) !important;
  border: 1px solid var(--brand-700) !important;
  border-radius: var(--r-sm) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow:
    var(--rim-top-strong),
    0 2px 0 var(--brand-800),
    0 6px 16px -6px var(--brand-tint-28) !important;
}
/* ==========================================================================
   25 · MOTION PREFERENCES & PRINT
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .hero-slider-bg { animation: none !important; transform: scale(1.02) !important; }
  .widget-header::after { display: none !important; }

  .home-section-card:hover,
  .quick-link-card:hover,
  .intro-card:hover { transform: none !important; }
}

@media print {
  .top-portal-bar,
  .nav-ribbon,
  .notice-ticker-ribbon,
  .gov-to-top,
  .gov-scroll-progress,
  .footer-art,
  .mobile-drawer-backdrop,
  .hero-slider-actions { display: none !important; }

  body { background: #ffffff !important; color: #000000 !important; font-size: 11pt; }

  .app-container::before,
  .app-container::after { display: none !important; }

  .home-section-card,
  .intro-card,
  .table-section-card,
  .default-page-card,
  .notice-detail-card {
    box-shadow: none !important;
    border: 1px solid #999999 !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  table th {
    background: #eeeeee !important;
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    border: 1px solid #999999 !important;
  }

  table td { border: 1px solid #bbbbbb !important; }

  a[href]::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #555555; }
}

/* ==========================================================================
   END OF DESIGN SYSTEM
   ========================================================================== */