/* ============================================================================
   Sutherland Shire Council — Request Management BCP
   Brand style foundation. Layered on top of Bootstrap 5 via design tokens.

   Sections:
     1. Brand fonts (@font-face swap-in hooks)
     2. Design tokens (:root)
     3. Bootstrap variable remap
     4. Base + typography
     5. Links
     6. Logo + clear space
     7. "The Wave" decorative graphic
     8. Header / nav
     9. Footer
    10. Components (cards, forms, buttons, badges, tables, alerts, pagination)
    11. Skins (public vs internal)
    12. Motion / animations (honours prefers-reduced-motion)
   ========================================================================== */

/* 1. BRAND FONTS ----------------------------------------------------------- */
/* Gordita is the SSC online typeface (brand guide — "Text and headings"). It is
   a licensed font and is NOT shipped in this repo; until the web-font files are
   supplied the Arial fallback renders. To activate: drop the files into
   /wwwroot/fonts and uncomment the block below. There is no separate display
   face any more — headings use Gordita too (guide). */
/*
@font-face {
  font-family: "Gordita";
  src: url("../fonts/gordita-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Gordita";
  src: url("../fonts/gordita-medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Gordita";
  src: url("../fonts/gordita-bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
*/

/* 2. DESIGN TOKENS --------------------------------------------------------- */
:root {
  /* ---- SSC brand palette (Digital Web Guidelines) ---- */
  --ssc-vibrant-blue:    #002199;  /* primary visual UI colour */
  --ssc-cool-blue:       #5ACAED;  /* "the wave" / accents / CTA background */
  --ssc-light-cool-blue: #CEECF6;  /* page-heading band, soft fills */
  --ssc-text-black:      #191919;  /* body copy */
  --ssc-white:           #ffffff;
  --ssc-web-light-grey:  #F6F6F6;  /* alternate background (footer / internal) */
  --ssc-grey:            #E5E5E5;  /* hairlines / borders */
  --ssc-muted-blue:      #5C6999;  /* secondary / button hover / duplicate */
  --ssc-green:           #1A5B2E;  /* success / positive */
  --ssc-light-green:     #D4F2B6;
  --ssc-yellow:          #FEDE5D;
  --ssc-light-yellow:    #FFF0D1;
  --ssc-orange:          #F5881F;  /* reminder / non-urgent */
  --ssc-light-orange:    #FFE3CC;
  --ssc-red:             #DC2846;  /* "Bin Lid Red" — warning / critical */
  --ssc-pink:            #F5709F;  /* libraries */

  /* ---- Back-compat aliases: existing rules reference these older names, so
     remapping them here re-skins the whole app to the new palette in one place. */
  --ssc-dark-blue:    var(--ssc-vibrant-blue);
  --ssc-light-blue:   var(--ssc-cool-blue);
  --ssc-dark-teal:    var(--ssc-green);
  --ssc-deep-purple:  var(--ssc-muted-blue);
  --ssc-off-white:    var(--ssc-web-light-grey);
  --ssc-off-white-2:  var(--ssc-white);
  --ssc-body:         var(--ssc-text-black);
  --ssc-warning:      var(--ssc-orange);
  --ssc-critical:     var(--ssc-red);

  /* Links are Vibrant Blue in-site (guide "Buttons and hyperlinks");
     hover shifts to the muted-blue secondary. */
  --ssc-link:         var(--ssc-vibrant-blue);
  --ssc-link-hover:   var(--ssc-muted-blue);

  /* Tints / derived */
  --ssc-dark-blue-90: var(--ssc-muted-blue);        /* default-button hover (guide) */
  --ssc-dark-blue-12: rgba(0, 33, 153, 0.12);
  --ssc-light-blue-15:rgba(90, 202, 237, 0.22);

  /* Typography — Gordita, min base 16px (guide). Body 16px/22px. */
  --ssc-font-body:    "Gordita", "Segoe UI", system-ui, -apple-system, Arial, "Helvetica Neue", sans-serif;
  --ssc-font-display: var(--ssc-font-body);   /* no separate display face any more */
  --ssc-lh-display:   1.15;
  --ssc-lh-body:      1.375;   /* 22 / 16 (guide) */

  /* Shape + depth. Buttons 4px, CTA 12px (guide "Buttons and hyperlinks"). */
  --ssc-radius:       0.5rem;
  --ssc-radius-sm:    4px;
  --ssc-radius-lg:    12px;
  --ssc-shadow-sm:    0 1px 2px rgba(0, 33, 153, 0.06), 0 1px 3px rgba(0, 33, 153, 0.10);
  --ssc-shadow:       0 4px 12px rgba(0, 33, 153, 0.10), 0 2px 4px rgba(0, 33, 153, 0.06);
  --ssc-shadow-lg:    0 14px 40px rgba(0, 33, 153, 0.18);

  /* Motion */
  --ssc-ease:         cubic-bezier(0.16, 1, 0.3, 1);
  --ssc-dur:          0.28s;
}

/* 3. BOOTSTRAP VARIABLE REMAP --------------------------------------------- */
:root {
  --bs-body-font-family: var(--ssc-font-body);
  --bs-body-color: var(--ssc-body);
  --bs-body-color-rgb: 25, 25, 25;
  --bs-body-bg: var(--ssc-white);
  --bs-body-bg-rgb: 255, 255, 255;

  --bs-primary: var(--ssc-vibrant-blue);
  --bs-primary-rgb: 0, 33, 153;
  --bs-secondary-color: #5b6470;

  --bs-link-color: var(--ssc-link);
  --bs-link-color-rgb: 0, 33, 153;
  --bs-link-hover-color: var(--ssc-link-hover);
  --bs-link-hover-color-rgb: 92, 105, 153;

  --bs-border-radius: var(--ssc-radius);
  --bs-border-radius-sm: var(--ssc-radius-sm);
  --bs-border-radius-lg: var(--ssc-radius-lg);
  --bs-border-color: var(--ssc-grey);

  --bs-emphasis-color: var(--ssc-vibrant-blue);
  --bs-focus-ring-color: rgba(90, 202, 237, 0.5);
}

/* 4. BASE + TYPOGRAPHY ----------------------------------------------------- */
html {
  /* Fluid root size: floors at 15px (>= 9pt) and scales smoothly with the
     viewport so every rem-based element tracks zoom/scaling without snapping. */
  font-size: clamp(15px, 14.2px + 0.25vw, 16.5px);
  position: relative;
  min-height: 100%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--ssc-font-body);
  line-height: var(--ssc-lh-body);
  color: var(--ssc-body);
  background-color: var(--ssc-off-white-2);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;          /* positioning context for the scrolling wave */
  overflow-x: hidden;          /* wave inset shouldn't trigger horizontal scroll */
}

main { flex: 1 0 auto; }

/* Headings: Gordita, sentence case, Vibrant Blue. Type scale per the brand
   guide ("Text and headings"): H1 48/64, H2 24/33.6, H3 21/26, H4–H5 18/26. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--ssc-font-body);
  font-weight: 700;
  line-height: var(--ssc-lh-display);
  color: var(--ssc-vibrant-blue);
}
h1, .h1 { font-size: clamp(2.1rem, 1.4rem + 2.4vw, 3rem); line-height: 1.16; }
h2, .h2 { font-size: 1.5rem; line-height: 1.4; }
h3, .h3 { font-size: 1.3125rem; line-height: 1.25; }
h4, .h4 { font-size: 1.125rem; line-height: 1.45; }
h5, .h5 { font-size: 1.125rem; line-height: 1.45; }
h6, .h6 { font-size: 1rem; line-height: 1.45; }

/* Display utility headings keep their large scale, Gordita, sentence case */
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: var(--ssc-font-body);
  font-weight: 700;
  line-height: var(--ssc-lh-display);
  color: var(--ssc-vibrant-blue);
}

p, li, dd, dt, label, .form-text, td, th { line-height: var(--ssc-lh-body); }

/* keep small print legible (>= ~9pt) */
small, .small { font-size: 0.8125rem; }

.lead { font-weight: 500; color: #3a414b; }
.text-muted { color: #5b6470 !important; }

::selection { background: var(--ssc-light-blue); color: var(--ssc-dark-blue); }

/* 5. LINKS ----------------------------------------------------------------- */
a {
  color: var(--ssc-link);
  font-weight: 700;            /* Gordita Bold (guideline §1) */
  text-decoration: none;       /* completely un-underlined */
  transition: color var(--ssc-dur) var(--ssc-ease);
}
a:hover, a:focus { color: var(--ssc-link-hover); }

/* URL-style links: lowercase, single line, no underline, no www. prefix.
   Apply .link-url where the link text is a displayed web address. */
.link-url {
  font-weight: 700;
  text-transform: lowercase;
  text-decoration: none;
  white-space: nowrap;
}

/* 6. LOGO + CLEAR SPACE ---------------------------------------------------- */
.brand-logo {
  display: inline-flex;
  align-items: center;
  /* clear space = 0.25 × height on all four sides (guideline §3) */
  padding: calc(0.25 * var(--logo-h, 50px));
}
.brand-logo img {
  display: block;
  height: var(--logo-h, 50px);  /* primary min 50px */
  width: auto;
}
.brand-logo--alt img { height: var(--logo-h-alt, 32px); } /* alt min 30px */

/* Brand lockup: official full-colour SSC logo + "Request Management" wordmark.
   The logo scales smoothly with the viewport (clamp) and tracks browser zoom. */
.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  line-height: 1;
}
.brand-mark__logo {
  display: block;
  height: clamp(40px, 4.4vw, 52px);
  width: auto;
  flex: 0 0 auto;
}
.brand-mark__rule {
  flex: 0 0 auto;
  width: 2px;
  align-self: stretch;
  min-height: 2.2em;
  background: var(--ssc-cool-blue);
  border-radius: 1px;
}
.brand-mark__text {
  font-family: var(--ssc-font-body);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.12;
  font-size: clamp(13px, 1.05vw, 16px);
  color: var(--ssc-vibrant-blue);
  white-space: nowrap;
}

/* 7. "THE WAVE" DECORATIVE GRAPHIC ---------------------------------------- */
/* Runs vertically along the window's right edge, full window height.
   Transparency layering is permitted only on light-blue / white variants
   (50% or 70% opacity) — guideline §4.

   Scaling/zoom: the wave is fixed to the viewport (top:0 / bottom:0) rather than
   the document, so it always pins to the rightmost side of the window from top
   to bottom and stays put under scroll and browser zoom — it no longer drifts
   with page length.

   The box is sized to the artwork's own aspect ratio (wave-right is 1230 × 5447)
   by deriving the width from the viewport height: 100vh × 1230/5447 ≈ 22.58vh.
   This keeps width and height on the SAME axis. Previously the width tracked vw
   while background-size scaled the artwork to the box height (the viewport), so
   on tall-ish / zoomed viewports the height-scaled wave grew wider than the
   vw-based box and its left/right edges were cropped. Matching the box to the
   artwork ratio shows the whole wave, full height, uncropped at every zoom.
   background-size: contain is the belt-and-braces guarantee: if max-width ever
   narrows the box it letterboxes (shorter, centred) rather than cropping. */
.brand-wave {
  position: fixed;             /* anchored to the window, not the document */
  top: 0;
  bottom: 0;                   /* span the full window height, not the document */
  width: calc(100vh * 1230 / 5447);  /* match artwork ratio off the height axis */
  max-width: 26vw;             /* never let the decorative wave crowd content */
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: contain;    /* whole wave visible — never crop the sides */
  background-position: center;
}
.brand-wave--right {
  right: clamp(0.5rem, 1.5vw, 1.5rem);  /* inset scales with the viewport */
}
.brand-wave--left {
  left: 0;
}
/* sit behind content but above the page background */
.page-shell { position: relative; z-index: 1; }

/* hide the wave on smaller screens to protect content/legibility. Browser zoom
   reduces the effective CSS width, so heavy zoom trips this same breakpoint and
   the wave steps aside once content needs the room. */
@media (max-width: 991.98px) {
  .brand-wave { display: none; }
}

/* 8. HEADER / NAV ---------------------------------------------------------- */
.ssc-header {
  position: relative;
  z-index: 20;
}
/* White header — the full-colour logo (navy wordmark) sits on white per the
   brand guide. A Cool Blue hairline anchors it to the page. */
.ssc-header .navbar {
  background-color: var(--ssc-white) !important;
  box-shadow: var(--ssc-shadow-sm);
  border-bottom: 3px solid var(--ssc-cool-blue);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.ssc-header .navbar .nav-link {
  color: var(--ssc-vibrant-blue);
  font-weight: 600;
  border-radius: var(--ssc-radius-sm);
  padding: 0.5rem 0.9rem;
  position: relative;
  transition: color var(--ssc-dur) var(--ssc-ease),
              background-color var(--ssc-dur) var(--ssc-ease);
}
.ssc-header .navbar .nav-link::after {
  content: "";
  position: absolute;
  left: 0.9rem; right: 0.9rem; bottom: 0.3rem;
  height: 2px;
  background: var(--ssc-cool-blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--ssc-dur) var(--ssc-ease);
}
.ssc-header .navbar .nav-link:hover,
.ssc-header .navbar .nav-link:focus,
.ssc-header .navbar .nav-link.active { color: var(--ssc-vibrant-blue); }
.ssc-header .navbar .nav-link:hover::after,
.ssc-header .navbar .nav-link:focus::after,
.ssc-header .navbar .nav-link.active::after { transform: scaleX(1); }

.ssc-header .navbar-text { color: var(--ssc-text-black); font-weight: 600; }

.ssc-header .navbar-toggler {
  border-color: rgba(0, 33, 153, 0.3);
  color: var(--ssc-vibrant-blue);
}
.ssc-header .navbar-toggler:focus { box-shadow: 0 0 0 0.2rem rgba(90, 202, 237, 0.5); }
.ssc-header .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280,33,153,0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* 9. FOOTER ---------------------------------------------------------------- */
/* Fixed across the bottom of the window so it stays put under scroll/zoom.
   .skin-public reserves matching space with padding-bottom (see §11) using
   --ssc-footer-h, which site.js keeps in sync with the footer's real height. */
.ssc-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  background-color: var(--ssc-web-light-grey);   /* alternate bg (guide) */
  color: var(--ssc-text-black);
  border-top: 3px solid var(--ssc-cool-blue);
  padding: 1.15rem 0;
  font-size: 0.8rem;
}
.ssc-footer a { color: var(--ssc-vibrant-blue); }
.ssc-footer a:hover { color: var(--ssc-muted-blue); }
.ssc-footer .brand-mark__logo { height: 32px; }
.ssc-footer .brand-mark__text { font-size: 0.85rem; }

/* 10. COMPONENTS ----------------------------------------------------------- */

/* Cards */
.card {
  border: 1px solid var(--bs-border-color);
  border-radius: var(--ssc-radius);
  box-shadow: var(--ssc-shadow-sm);
  background: #fff;
  overflow: hidden;
  transition: transform var(--ssc-dur) var(--ssc-ease),
              box-shadow var(--ssc-dur) var(--ssc-ease);
}
.card-header {
  background: var(--ssc-web-light-grey);
  border-bottom: 1px solid var(--bs-border-color);
  font-family: var(--ssc-font-body);
  font-weight: 700;
  color: var(--ssc-vibrant-blue);
  font-size: 1rem;
  padding: 0.85rem 1.1rem;
}

/* Buttons */
.btn {
  font-weight: 700;
  border-radius: var(--ssc-radius-sm);
  padding: 0.5rem 1.15rem;
  transition: transform var(--ssc-dur) var(--ssc-ease),
              box-shadow var(--ssc-dur) var(--ssc-ease),
              background-color var(--ssc-dur) var(--ssc-ease),
              border-color var(--ssc-dur) var(--ssc-ease),
              color var(--ssc-dur) var(--ssc-ease);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--ssc-shadow); }
.btn:active { transform: translateY(0); box-shadow: var(--ssc-shadow-sm); }

.btn-primary {
  --bs-btn-bg: var(--ssc-dark-blue);
  --bs-btn-border-color: var(--ssc-dark-blue);
  --bs-btn-hover-bg: var(--ssc-dark-blue-90);
  --bs-btn-hover-border-color: var(--ssc-dark-blue-90);
  --bs-btn-active-bg: #072a55;
  --bs-btn-active-border-color: #072a55;
  --bs-btn-disabled-bg: var(--ssc-dark-blue);
  --bs-btn-disabled-border-color: var(--ssc-dark-blue);
}
/* "Alternate" button (guide): Vibrant Blue outline + text on white, and on hover
   it fills with Light Cool Blue while keeping the Vibrant Blue text/border. */
.btn-outline-primary {
  --bs-btn-color: var(--ssc-vibrant-blue);
  --bs-btn-border-color: var(--ssc-vibrant-blue);
  --bs-btn-bg: var(--ssc-white);
  --bs-btn-hover-bg: var(--ssc-light-cool-blue);
  --bs-btn-hover-border-color: var(--ssc-vibrant-blue);
  --bs-btn-hover-color: var(--ssc-vibrant-blue);
  --bs-btn-active-bg: var(--ssc-light-cool-blue);
  --bs-btn-active-border-color: var(--ssc-vibrant-blue);
  --bs-btn-active-color: var(--ssc-vibrant-blue);
}

/* CTA button (guide): Cool Blue background, Vibrant Blue text, larger, with a
   more prominent 12px corner radius. Use .btn.btn-cta on a primary call. */
.btn-cta {
  --bs-btn-bg: var(--ssc-cool-blue);
  --bs-btn-border-color: var(--ssc-cool-blue);
  --bs-btn-color: var(--ssc-vibrant-blue);
  --bs-btn-hover-bg: #7fd6f1;
  --bs-btn-hover-border-color: #7fd6f1;
  --bs-btn-hover-color: var(--ssc-vibrant-blue);
  --bs-btn-active-bg: #7fd6f1;
  --bs-btn-active-color: var(--ssc-vibrant-blue);
  border-radius: var(--ssc-radius-lg);
  font-size: 1.1rem;
  font-weight: 700;
  padding: 0.7rem 1.6rem;
}
.btn-secondary, .btn-outline-secondary {
  --bs-btn-color: var(--ssc-dark-teal);
  --bs-btn-border-color: var(--ssc-dark-teal);
  --bs-btn-hover-bg: var(--ssc-dark-teal);
  --bs-btn-hover-border-color: var(--ssc-dark-teal);
  --bs-btn-active-bg: var(--ssc-dark-teal);
  --bs-btn-bg: transparent;
}
.btn-success {
  --bs-btn-bg: var(--ssc-dark-teal);
  --bs-btn-border-color: var(--ssc-dark-teal);
  --bs-btn-hover-bg: #00504f;
  --bs-btn-hover-border-color: #00504f;
  --bs-btn-active-bg: #00504f;
}
.btn-warning {
  --bs-btn-bg: var(--ssc-orange);
  --bs-btn-border-color: var(--ssc-orange);
  --bs-btn-color: var(--ssc-text-black);
  --bs-btn-hover-bg: #dd7712;
  --bs-btn-hover-border-color: #dd7712;
  --bs-btn-hover-color: var(--ssc-text-black);
}
.btn-danger {
  --bs-btn-bg: var(--ssc-critical);
  --bs-btn-border-color: var(--ssc-critical);
  --bs-btn-hover-bg: #930d31;
  --bs-btn-hover-border-color: #930d31;
}

/* Forms */
.form-label { font-weight: 600; color: var(--ssc-dark-blue); margin-bottom: 0.35rem; }
.form-control, .form-select {
  border-radius: var(--ssc-radius-sm);
  border-color: #c8cfda;
  padding: 0.55rem 0.8rem;
  transition: border-color var(--ssc-dur) var(--ssc-ease),
              box-shadow var(--ssc-dur) var(--ssc-ease);
}
.form-control:hover, .form-select:hover { border-color: #aab4c4; }
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: var(--ssc-light-blue);
  box-shadow: 0 0 0 0.2rem rgba(0, 191, 223, 0.28);
}
.form-check-input:checked {
  background-color: var(--ssc-dark-blue);
  border-color: var(--ssc-dark-blue);
}
.btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible {
  outline: none;
}

/* Badges */
.badge { font-weight: 700; letter-spacing: 0.02em; padding: 0.4em 0.65em; border-radius: 999px; }
.badge.bg-secondary { background-color: #5b6470 !important; }
.badge.bg-info { background-color: var(--ssc-light-blue) !important; color: #06343b !important; }
.badge.bg-success { background-color: var(--ssc-dark-teal) !important; }
.badge.bg-danger  { background-color: var(--ssc-critical) !important; }
.badge.bg-warning { background-color: var(--ssc-warning) !important; color: #3d2200 !important; }

/* Stage badges — the request stage is the sole lifecycle determiner, so it is shown as a
   colour-coded pill (see StageBadge.CssClass) grouped by lifecycle phase: received (neutral),
   active (blue), waiting on customer (amber), done/closed (teal), duplicate (purple). */
.stage-badge {
  display: inline-block;
  font-weight: 700;
  font-size: 0.78em;
  letter-spacing: 0.02em;
  line-height: 1.2;
  padding: 0.4em 0.7em;
  border-radius: 999px;
  white-space: nowrap;
  color: var(--ssc-white);
}
.stage-badge.stage-new     { background-color: #5b6470; }
.stage-badge.stage-active  { background-color: var(--ssc-light-blue); color: #06343b; }
.stage-badge.stage-waiting { background-color: var(--ssc-warning); color: #3d2200; }
.stage-badge.stage-done    { background-color: var(--ssc-dark-teal); }
.stage-badge.stage-void    { background-color: var(--ssc-deep-purple); }

/* Tables */
.table { --bs-table-hover-bg: var(--ssc-light-blue-15); }
.table > thead th {
  background: var(--ssc-dark-blue);
  color: #fff;
  font-family: var(--ssc-font-display);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-weight: 700;
  font-size: 0.78rem;
  border-color: var(--ssc-dark-blue);
  vertical-align: middle;
}
.table > tbody tr { transition: background-color var(--ssc-dur) var(--ssc-ease); }
/* Make RN / Title cells open the request like the Open button */
.request-link {
  color: var(--ssc-dark-blue);
  font-weight: 600;
  text-decoration: none;
}
.request-link:hover,
.request-link:focus { text-decoration: underline; }
.table-responsive {
  border-radius: var(--ssc-radius);
  box-shadow: var(--ssc-shadow-sm);
  background: #fff;
  overflow: hidden;
}

/* Alerts — mapped to the brand alert palette */
.alert { border: 0; border-left: 5px solid; border-radius: var(--ssc-radius-sm); }
.alert-success { background: #e6f3f3; border-left-color: var(--ssc-dark-teal); color: #044443; }
.alert-info    { background: #e3f8fc; border-left-color: var(--ssc-light-blue); color: #064a55; }
.alert-warning { background: #fdf0e3; border-left-color: var(--ssc-warning); color: #7a3f06; }
.alert-danger  { background: #fbe7ec; border-left-color: var(--ssc-critical); color: #720c26; }

/* Pagination */
.pagination { --bs-pagination-color: var(--ssc-dark-blue); gap: 0.25rem; }
.page-link {
  color: var(--ssc-dark-blue);
  font-weight: 700;
  border-radius: var(--ssc-radius-sm) !important;
  border-color: var(--bs-border-color);
  transition: background-color var(--ssc-dur) var(--ssc-ease),
              color var(--ssc-dur) var(--ssc-ease);
}
.page-item.active .page-link {
  background-color: var(--ssc-dark-blue);
  border-color: var(--ssc-dark-blue);
}
.page-link:hover { background-color: var(--ssc-light-blue-15); color: var(--ssc-dark-blue); }

/* Generic page header band */
.page-head { margin-bottom: 1.5rem; }
.page-head .eyebrow {
  font-family: var(--ssc-font-body);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.72rem;
  color: var(--ssc-muted-blue);
  font-weight: 700;
  margin-bottom: 0.25rem;
}

/* Confirmation flourishes */
.confirm-tick {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--ssc-dark-teal);
  color: #fff;
  font-size: 2rem;
  line-height: 60px;
  text-align: center;
  box-shadow: 0 0 0 8px rgba(0, 98, 99, 0.12);
  animation: ssc-pop 0.5s var(--ssc-ease) both;
}
.rn-badge {
  color: var(--ssc-dark-blue);
  letter-spacing: 0.04em;
  font-size: 2.1rem;
}
@keyframes ssc-pop {
  0% { transform: scale(0.4); opacity: 0; }
  70% { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}

/* 11. SKINS ---------------------------------------------------------------- */

/* Public — spacious, welcoming, hero wave.
   The footer is fixed to the bottom of the window (§9), so reserve matching
   space at the foot of the page. --ssc-footer-h is measured by site.js; the
   fallback covers first paint and no-JS. */
.skin-public { background-color: var(--ssc-white); padding-bottom: var(--ssc-footer-h, 96px); }
.skin-public .page-shell { padding-top: 2.25rem; padding-bottom: 2.5rem; }
/* "The wave" — Cool Blue, down the right edge of the public page (kept per brief). */
.skin-public .brand-wave--right {
  background-image: url("../img/wave/wave-right-cool-blue.png");
  opacity: 0.55;               /* transparency layering permitted on cool-blue */
  /* height/anchoring inherited from .brand-wave (spans banner-to-banner) */
}
/* Page banner — Vibrant Blue block, white text (guide "Main Carousel"). */
.skin-public .hero {
  background: var(--ssc-vibrant-blue);
  color: #fff;
  border-radius: var(--ssc-radius-lg);
  padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1.25rem, 3.5vw, 2.25rem);  /* fluid: scales with zoom/viewport */
  box-shadow: var(--ssc-shadow-lg);
  position: relative;
  overflow: hidden;
}
.skin-public .hero h1, .skin-public .hero .h1,
.skin-public .hero h2, .skin-public .hero .h2,
.skin-public .hero .h3 { color: #fff; }
/* Banner title reads as a page heading regardless of the utility class the view
   applies to it (some use .h3 to fit long titles). */
.skin-public .hero h1, .skin-public .hero .h1 {
  font-size: clamp(1.9rem, 1.3rem + 2.1vw, 2.75rem);
  line-height: 1.15;
}
.skin-public .hero .lead { color: rgba(255, 255, 255, 0.92); }
.skin-public .hero .eyebrow { color: var(--ssc-cool-blue); }

/* Internal — denser, data-first, subtle edge wave */
.skin-internal { background-color: var(--ssc-off-white); }
.skin-internal .page-shell { padding-top: 1.25rem; padding-bottom: 2rem; }
.skin-internal .card { box-shadow: var(--ssc-shadow-sm); }

/* Request-list flags: centred, slightly enlarged, Safety red and VIP gold. */
.flag-icon { font-size: 1.25rem; line-height: 1; }
.flag-safety { color: #dc3545; }
.flag-vip { color: #f5b400; }

/* Admin dashboard stat tiles */
.stat-value {
  font-family: var(--ssc-font-display);
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1.05;
  color: var(--ssc-dark-blue);
}
.stat-label {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--bs-secondary-color, #6c757d);
}

/* Colour-coded data counts: each tile carries a soft tinted icon chip in its
   accent colour, with the value picking up the same accent. Restrained — the
   colour lives in the chip, not a loud full-width bar. */
.stat-card .stat-value { color: var(--stat-accent, var(--ssc-dark-blue)); }
.stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  color: var(--stat-accent, var(--ssc-dark-blue));
  background: color-mix(in srgb, var(--stat-accent, var(--ssc-dark-blue)) 14%, transparent);
}
.stat-card--requests             { --stat-accent: var(--ssc-dark-blue); }
.stat-card--notes                { --stat-accent: var(--ssc-dark-teal); }
.stat-card--attachments          { --stat-accent: var(--ssc-deep-purple); }
.stat-card--existing-notes       { --stat-accent: var(--ssc-light-blue); }
.stat-card--existing-attachments { --stat-accent: var(--ssc-warning); }

/* Triage progress donut (open vs completed requests). */
.donut-wrap { position: relative; flex: 0 0 auto; width: 72px; height: 72px; }
.donut-track { stroke: color-mix(in srgb, var(--ssc-warning) 30%, transparent); }
.donut-arc {
  stroke: var(--ssc-dark-teal);
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transition: stroke-dasharray var(--ssc-dur) var(--ssc-ease);
}
.donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.donut-num { font-family: var(--ssc-font-display); font-weight: 800; font-size: 1.1rem; color: var(--ssc-dark-teal); }
.donut-sep { font-size: 0.7rem; color: var(--bs-secondary-color, #6c757d); }
.triage-legend { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.8rem; }
.triage-legend b { color: var(--ssc-dark-blue); }
.triage-legend .dot {
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  margin-right: 0.4rem;
  vertical-align: baseline;
}
.dot-done { background: var(--ssc-dark-teal); }
.dot-open { background: color-mix(in srgb, var(--ssc-warning) 55%, transparent); }

/* Squared status boxes: system state & OneCouncil authentication. Small, fixed-size
   squares laid out in a flex row — not stretched to a grid column. */
.status-box {
  flex: 0 0 auto;
  width: 168px;
  height: 168px;
}
.status-box .card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.5rem;
  padding: 0.75rem;
}
.status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
}
/* Badges default to nowrap; allow them to wrap so longer labels fit the square. */
.status-box .badge { white-space: normal; }
.status-box--ok    .status-icon { color: var(--ssc-dark-teal);  background: color-mix(in srgb, var(--ssc-dark-teal) 12%, transparent); }
.status-box--alert .status-icon { color: var(--ssc-critical);   background: color-mix(in srgb, var(--ssc-critical) 12%, transparent); }
.status-box-label { font-weight: 700; font-size: 0.85rem; color: var(--ssc-dark-blue); }

/* "Settings" heading separating the dashboard from the navigation cards. */
.admin-settings-heading {
  margin-top: 0.5rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--bs-border-color, #d7dce4);
  color: var(--ssc-dark-blue);
}

/* Admin dashboard navigation cards */
.admin-nav-card {
  color: inherit;
  transition: box-shadow 0.15s var(--ssc-ease), transform 0.15s var(--ssc-ease), border-color 0.15s var(--ssc-ease);
}
.admin-nav-card:hover,
.admin-nav-card:focus-visible {
  box-shadow: var(--ssc-shadow-lg);
  transform: translateY(-2px);
  border-color: var(--ssc-dark-teal);
}
.admin-nav-icon { color: var(--ssc-dark-teal); }

/* Multi-select filter dropdowns (Status, Stage, Category, Type, Team, Safety, VIP) */
/* The filter panel is a .card, which clips overflow for its rounded corners. Let it
   overflow so the absolutely-positioned dropdown menus can extend past the panel edge
   instead of being cut off by the bottom boundary. */
#filterForm { overflow: visible; }
.filter-ms { position: relative; }
.filter-ms-toggle {
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.filter-ms-toggle:not(.has-selection) { color: var(--bs-secondary-color, #6c757d); }
.filter-ms-toggle.has-selection { font-weight: 600; }
.filter-ms-menu {
  position: absolute;
  z-index: 1000;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  max-height: 260px;
  overflow-y: auto;
  padding: 0.5rem;
  background: #fff;
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 0.375rem;
  box-shadow: var(--ssc-shadow-sm);
}
.filter-ms-search { margin-bottom: 0.4rem; }
.filter-ms-option { margin-bottom: 0.1rem; }
.filter-ms-option .form-check-label { font-size: 0.875rem; cursor: pointer; }

/* Sortable table headers */
.sortable-table > thead th.sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.sortable-table > thead th.sortable:hover { color: var(--ssc-white); font-weight: 700; }
.sortable-table > thead th .sort-ind { font-size: 0.7em; color: var(--ssc-white); }
.sortable-table > thead th.sorted { color: var(--ssc-white); font-weight: 700; }
.skin-internal .table-sm > thead th { font-size: 0.72rem; }
/* Breathing room on the outermost columns so their values don't hug the panel edges. */
.sortable-table > thead > tr > th:first-child,
.sortable-table > tbody > tr > td:first-child { padding-left: 1rem; }
.sortable-table > thead > tr > th:last-child,
.sortable-table > tbody > tr > td:last-child { padding-right: 1rem; }
.skin-internal h1, .skin-internal .h4 { letter-spacing: 0.005em; }

/* 12. MOTION / ANIMATIONS -------------------------------------------------- */
@keyframes ssc-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* validation feedback: a short horizontal nudge to draw the eye to a bad field */
@keyframes ssc-shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}

/* entrance: main content + staggered cards */
.skin-public main > *,
.skin-internal main > * { animation: ssc-fade-up 0.5s var(--ssc-ease) both; }
.card { animation: ssc-fade-up 0.55s var(--ssc-ease) both; }
main .card:nth-of-type(2) { animation-delay: 0.06s; }
main .card:nth-of-type(3) { animation-delay: 0.12s; }
main .card:nth-of-type(4) { animation-delay: 0.18s; }

/* form fields stream in with a gentle stagger as the form card appears */
.skin-public form .mb-3,
.skin-public form .row { animation: ssc-fade-up 0.45s var(--ssc-ease) both; }
.skin-public form .mb-3:nth-of-type(2) { animation-delay: 0.04s; }
.skin-public form .mb-3:nth-of-type(3) { animation-delay: 0.08s; }
.skin-public form .mb-3:nth-of-type(4) { animation-delay: 0.12s; }
.skin-public form .mb-3:nth-of-type(n+5) { animation-delay: 0.16s; }

/* inputs lift very slightly on focus for tactile feedback */
.form-control, .form-select { transform: translateZ(0); }
.form-control:focus, .form-select:focus { transform: translateY(-1px); }

/* invalid fields shake once (class toggled from the page script) */
.field-shake { animation: ssc-shake 0.5s var(--ssc-ease) both; }

/* card hover lift */
.card:hover { transform: translateY(-3px); box-shadow: var(--ssc-shadow); }
/* table rows / list cards shouldn't levitate */
.table-responsive .card, .list-group-flush { transform: none; }

/* internal data rows fade in on first paint without per-row stagger cost */
.skin-internal tbody tr { animation: ssc-fade-up 0.4s var(--ssc-ease) both; }

/* reveal-on-scroll: elements tagged [data-reveal] start hidden and animate in
   when site.js (IntersectionObserver) adds .is-revealed */
[data-reveal] { opacity: 0; transform: translateY(18px); transition:
    opacity 0.55s var(--ssc-ease), transform 0.55s var(--ssc-ease); }
[data-reveal].is-revealed { opacity: 1; transform: translateY(0); }

/* async panel loading: any container tagged .is-loading (toggled from the page
   script while it re-fetches its contents) dims its current content and floats
   a spinner over the centre, so a slow fetch reads as "loading" rather than an
   empty gap. Keeps a minimum height so the spinner has room even when empty. */
@keyframes ssc-spin { to { transform: rotate(360deg); } }
.is-loading { position: relative; min-height: 8rem; }
.is-loading > * {
  opacity: 0.4;
  pointer-events: none;
  transition: opacity var(--ssc-dur) var(--ssc-ease);
}
.is-loading::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 2.5rem; height: 2.5rem;
  margin: -1.25rem 0 0 -1.25rem;
  border: 3px solid var(--ssc-dark-blue-12);
  border-top-color: var(--ssc-light-blue);
  border-radius: 50%;
  animation: ssc-spin 0.7s linear infinite;
  z-index: 3;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .btn:hover, .card:hover, .form-control:focus, .form-select:focus { transform: none; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------------
   Attachments: thumbnail list + full-screen preview lightbox (internal portal)
   --------------------------------------------------------------------------- */
.attachment-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.attachment-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.attachment-thumb {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 1px solid var(--ssc-off-white);
  border-radius: var(--ssc-radius-sm);
  background: var(--ssc-off-white-2);
  overflow: hidden;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--ssc-dur) var(--ssc-ease), box-shadow var(--ssc-dur) var(--ssc-ease);
}
.attachment-thumb:hover,
.attachment-thumb:focus-visible {
  border-color: var(--ssc-light-blue);
  box-shadow: var(--ssc-shadow-sm);
  outline: none;
}
.attachment-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.attachment-doc {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--ssc-dark-blue-12);
}
.attachment-doc-ext {
  font-family: var(--ssc-font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--ssc-dark-blue);
}
.attachment-meta {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.attachment-name {
  padding: 0;
  border: 0;
  background: none;
  font-weight: 600;
  text-align: left;
  word-break: break-word;
  color: var(--ssc-link);
  cursor: pointer;
}
.attachment-name:hover,
.attachment-name:focus-visible {
  color: var(--ssc-link-hover);
  text-decoration: underline;
  outline: none;
}
.attachment-download {
  flex: 0 0 auto;
  align-self: center;
  line-height: 1;
}
.attachment-delete-form {
  flex: 0 0 auto;
  align-self: center;
  margin: 0;
}
.attachment-delete {
  line-height: 1;
}

/* ---------------------------------------------------------------------------
   Searchable dropdown (public submit — "What are you contacting us about?")
   The search input reuses .form-select so it matches the native control (caret,
   border, focus ring); the menu is a filtered listbox that shrinks as you type.
   --------------------------------------------------------------------------- */
/* Each form .mb-3 keeps a retained transform from its entrance animation
   (fill-mode: both -> transform: translateY(0)), making every field its own
   stacking context. Lift the category field so its dropdown paints above the
   fields below it instead of being trapped behind them. */
[data-category-field] { position: relative; z-index: 5; }
.searchable-select { position: relative; }
.searchable-select-input { cursor: text; }
.searchable-select-menu {
  position: absolute;
  z-index: 30;
  left: 0;
  right: 0;
  margin: 0.25rem 0 0;
  padding: 0.25rem;
  list-style: none;
  max-height: 16rem;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--ssc-radius-sm);
  box-shadow: var(--ssc-shadow);
}
.searchable-select-menu[hidden] { display: none; }
.searchable-select-option {
  padding: 0.45rem 0.6rem;
  border-radius: var(--ssc-radius-sm);
  cursor: pointer;
  line-height: var(--ssc-lh-body);
}
.searchable-select-option:hover,
.searchable-select-option.is-active {
  background: var(--ssc-light-blue-15);
  color: var(--ssc-dark-blue);
}
.searchable-select-option[aria-selected="true"] { font-weight: 700; }
.searchable-select-empty {
  padding: 0.45rem 0.6rem;
  color: #5b6470;
}

/* Client-side selected-file previews beneath an upload box */
.attachment-preview-list {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.attachment-preview-list[hidden] { display: none; }
.attachment-preview-name {
  font-weight: 600;
  color: var(--ssc-body);
  word-break: break-word;
}
.attachment-remove {
  flex: 0 0 auto;
  align-self: center;
  line-height: 1;
  padding: 0 0.5rem;
  font-size: 1.1rem;
}

/* Lightbox overlay */
body.lightbox-open { overflow: hidden; }
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1080;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox[hidden] { display: none; }
.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(9, 53, 105, 0.78);
  backdrop-filter: blur(2px);
}
.lightbox-stage {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: min(90vw, 1000px);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.lightbox-content {
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 78vh;
  overflow: auto;
}
.lightbox-image {
  max-width: 100%;
  max-height: 78vh;
  object-fit: contain;
  border-radius: var(--ssc-radius-sm);
  box-shadow: var(--ssc-shadow-lg);
}
.lightbox-pdf {
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--ssc-white);
  display: block;
}

/* PDF preview: a portrait card sized to the viewport, with the iframe filling
   the card and the title + download bar below it (same layout as the image
   preview). Activated by the .lightbox--pdf state class. The stage needs a
   definite height so the flexed content can give the iframe a height to fill. */
.lightbox--pdf .lightbox-stage {
  width: min(150vw, 1275px);
  max-width: none;
  height: 90vh;
  max-height: 90vh;
}
.lightbox--pdf .lightbox-content {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow: hidden;
  border-radius: var(--ssc-radius-sm);
  box-shadow: var(--ssc-shadow-lg);
}
.lightbox-doc {
  width: min(70vw, 520px);
  aspect-ratio: 3 / 4;
  max-height: 78vh;
  background: var(--ssc-white);
  border-radius: var(--ssc-radius);
  box-shadow: var(--ssc-shadow-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 2rem;
  text-align: center;
}
.lightbox-doc-icon {
  width: 96px;
  height: 120px;
  border-radius: var(--ssc-radius-sm);
  background:
    linear-gradient(135deg, transparent 50%, var(--ssc-off-white) 50%) top right / 28px 28px no-repeat,
    var(--ssc-dark-blue-12);
  border: 2px solid var(--ssc-dark-blue);
}
.lightbox-doc-note { color: var(--ssc-body); margin: 0; }
.lightbox-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: var(--ssc-white);
}
.lightbox-title {
  font-weight: 600;
  word-break: break-word;
}
.lightbox-btn {
  position: absolute;
  z-index: 2;
  border: none;
  background: rgba(255, 255, 255, 0.14);
  color: var(--ssc-white);
  cursor: pointer;
  border-radius: 50%;
  transition: background var(--ssc-dur) var(--ssc-ease);
}
.lightbox-btn:hover,
.lightbox-btn:focus-visible {
  background: rgba(255, 255, 255, 0.30);
  outline: none;
}
.lightbox-close {
  top: 1rem;
  right: 1rem;
  width: 2.75rem;
  height: 2.75rem;
  font-size: 1.75rem;
  line-height: 1;
}
.lightbox-nav {
  top: 50%;
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  font-size: 2rem;
  line-height: 1;
}
.lightbox-prev { left: 1.5rem; }
.lightbox-next { right: 1.5rem; }

@media (max-width: 575.98px) {
  .lightbox-prev { left: 0.5rem; }
  .lightbox-next { right: 0.5rem; }
}

/* --- System diagnostics: application log viewer --- */
.diag-log {
  max-height: 32rem;
  overflow-y: auto;
}
.diag-log table { font-size: 0.85rem; }
.diag-log code { font-size: 0.8rem; }
.diag-msg { white-space: pre-wrap; word-break: break-word; }
.diag-exception {
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 16rem;
  overflow: auto;
  background: color-mix(in srgb, var(--ssc-critical) 6%, transparent);
  border-radius: 0.375rem;
  padding: 0.5rem 0.75rem;
  margin-top: 0.35rem;
}
.diag-details dt { font-weight: 600; color: var(--ssc-dark-blue); }
.diag-details dd { margin-bottom: 0.35rem; }