/* ============================================================
 * SERVIGUARD brand overlay — Phase 3.59.12 (2026-07-04)
 *   Phase 3.59.12 note: aligned with the OFFICIAL SERVIGUARD brand
 *   guidelines PDF supplied by the client.
 *
 *   Palette (from the brand guide, page 2):
 *     Navy   #005357   deep — sidebar, headings, borders
 *     Teal   #056e8f   accent — buttons, links, active nav
 *     Orange #f48c20   highlights — CTAs, key badges, expiry
 *
 *   Typography (from the brand guide, page 1):
 *     Wordmark — Michroma Regular       (lives inside the logo image;
 *                                        not loaded as a web font)
 *     Headings — Poppins Medium (500)   applied to h1–h6, .page-title,
 *                                        .card-title, .card-header,
 *                                        .section-title
 *     Body     — Inter Regular (400)    applied to body and every
 *                                        default text surface
 *
 *   Google Fonts loaded from `layouts/main.php` and `layouts/auth.php`
 *   so both authenticated and login pages pick them up. Poppins 500
 *   and 600 for headings, Inter 400/500/600 for body/labels/emphasis.
 *
 *   Phase 3.59.8 note carried forward:
 *   Palette tokens were extracted from full-mark@2x.png via
 *   ImageMagick histogram; Phase 3.59.12 REPLACES the approximate
 *   histogram values (`#0B324B`, `#096A8B`, `#F48C21`) with the
 *   exact brand-guide hex codes above.
 *   Every component that references `var(--brand-navy)` /
 *   `var(--brand-teal)` / `var(--brand-orange)` picks up the new
 *   values automatically. No component's structure changes; only
 *   the underlying hex values shift by a small amount to match the
 *   actual logo colours.
 *   Phase 3.59.6 note: sidebar brand strip becomes a FULL-WIDTH
 *   WHITE BLOCK. Phase 3.59.4 wrapped the shield + wordmark in a
 *   small white pill on the navy sidebar; Phase 3.59.6 drops the
 *   pill and paints the whole top strip white so the sidebar brand
 *   block aligns with the content-area topbar for a unified white
 *   top strip across the app. Bigger logo (shield 26 → 32px, wordmark
 *   15 → 18px). Same treatment written into main.php's inline
 *   fallback block so first-paint matches.
 *
 *   Phase 3.59.5 note carried forward: login layout is a centered
 *   card (no split-hero). CSS block for `.auth-body` → `.auth-footer`
 *   preserved unchanged.
 *   Phase 3.59 → 3.59.4 used a side-by-side split-hero (navy left,
 *   white form right). Phase 3.59.5 replaces that with a classic
 *   centered card: full-page navy background, single white rounded
 *   card centred with the SERVIGUARD full mark at the top and the
 *   sign-in form below, small copyright text beneath the card.
 *   Whole `.auth-body` + `.auth-shell` + `.auth-hero*` +
 *   `.auth-form-wrap` block replaced with `.auth-body` + new
 *   `.auth-container` + `.auth-card` + `.auth-card-brand` +
 *   `.auth-footer`. `.auth-form-card` class kept so the form styles
 *   (auth-title, form-label, form-control, btn-primary, auth-links)
 *   still cascade to login.php / forgot-password.php unchanged.
 *   Mobile @media collapses padding at <640px.
 *
 *   Phase 3.59.4 note carried forward: sidebar brand pill still in
 *   place ( `.sidebar-brand .brand-strip` white pill treatment ).
 *   → 3.59.3 rule `.sidebar-brand img.brand-wordmark { filter:
 *   brightness(0) invert(1) }` forced the multicolour wordmark to
 *   render white on the navy sidebar — killing the teal SERVI +
 *   orange GUARD brand colours. Phase 3.59.4 restyles `.brand-strip`
 *   as a compact white rounded pill (mirroring the login page brand
 *   plate) and removes the filter so both shield and wordmark render
 *   at full colour fidelity. Same treatment on `layouts/main.php`'s
 *   inline fallback block so first-paint matches.
 *
 *   Phase 3.59.3 note carried forward: `.auth-hero-copy` +
 *   `.brand-eyebrow` rules stay in place, defensively unused, in case
 *   the hero marketing copy is added back or another page reuses
 *   those classes.
 * ------------------------------------------------------------
 * Phase 3.59.2 (previous — carried forward):
 *   COMPOSITION REFINEMENT vs Phase 3.59.1:
 *     - Phase 3.59.1 used `justify-content: space-between` on `.auth-hero`
 *       which stretched brand → hero copy → foot to the corners with a
 *       big void in the middle — "block" look, unfinished.
 *     - Phase 3.59.2 rebuilds the hero content structure. Brand + copy
 *       now sit in `.auth-hero-inner` which centres them vertically as a
 *       tight stack. Footer moves to `position: absolute` at the bottom
 *       so it doesn't stretch the flex flow. h1 bumps 30px → 44px with
 *       tighter letter-spacing. A 3px orange left rule under the h1
 *       ties the copy back to the brand. Bigger max-width on the inner
 *       stack (500px) so the tagline reads properly instead of feeling
 *       cramped.
 *     - Class hierarchy: `.auth-hero-top` → `.auth-hero-brand`;
 *       `.auth-hero-body` → `.auth-hero-copy`. `auth.php` updated to
 *       match.
 *   Phase 3.59.1 hotfix carried forward:
 *     - `.brand-plate` white card wrapping the SERVIGUARD full mark.
 *     - Mark at 220px (was 108px in Phase 3.59).
 *   The rest of the file (palette tokens, sidebar navy, primary teal,
 *   accent orange, buttons, cards, cert view classes, stat cards, etc.)
 *   is byte-identical to Phase 3.59.1.
 * ------------------------------------------------------------
 * Loaded AFTER assets/css/app.css so its overrides win. This
 * file re-points the app's colour tokens to the SERVIGUARD
 * palette and adds a small set of brand components (split-hero
 * auth shell, logo strip, cert brand mark). It does NOT touch
 * layout structure, spacing, typography, or any component that
 * already renders correctly under app.css.
 *
 *   Palette
 *     Navy   #005357   sidebar bg, headings   (Phase 3.59.8 exact-logo)
 *     Teal   #056e8f   primary buttons, links, active nav
 *     Orange #f48c20   accent CTAs, key badges, highlights
 *
 *   Files this stylesheet controls
 *     - :root token overrides       ....... every button, link,
 *                                            card border, badge
 *     - .wms-sidebar / .sidebar-*   ....... navy sidebar + brand
 *     - .wms-header / .avatar       ....... teal avatar circle
 *     - .btn-primary + focus rings  ....... teal
 *     - .btn-accent (new)           ....... orange CTA
 *     - .badge-accent (new)         ....... orange chip
 *     - .stat-* icons               ....... teal / orange /
 *                                            navy blend
 *     - .auth-*                     ....... split-hero login
 *     - .brand-logo / .brand-*      ....... reusable logo marks
 *     - .cert-brand-*               ....... certificate view
 *                                            navy borders +
 *                                            teal headings
 *
 * ============================================================ */

/* ─── SERVIGUARD tokens (override app.css :root) ───────────── */
:root {
  /* Phase 3.59.8 — EXACT SERVIGUARD palette from the logo PNG.
     Extracted via ImageMagick histogram on full-mark@2x.png:
       #005357 main navy (shield darkest tones)
       #003236 deep navy (shadows + body text)
       #056e8f teal (shield middle band + SERVI wordmark)
       #045a75 mid-tone teal (transitions)
       #f48c20 orange (chevron + GUARD wordmark)  */
  --brand-navy:      #005357;
  --brand-navy-2:    #003236;
  --brand-teal:      #056e8f;
  --brand-teal-2:    #04607d;
  --brand-teal-mid:  #045a75;
  --brand-teal-10:   rgba(5, 110, 143, .10);
  --brand-teal-15:   rgba(5, 110, 143, .15);
  --brand-teal-30:   rgba(5, 110, 143, .30);
  --brand-orange:    #f48c20;
  --brand-orange-2:  #d47915;
  --brand-orange-15: rgba(244, 140, 32, .15);
  --brand-mist:      #F5F8FA;
  --brand-ink:       #003236;

  /* Re-point the app.css tokens */
  --sidebar-bg:        var(--brand-navy);
  --sidebar-bg-2:      var(--brand-navy-2);
  --sidebar-fg:        #D6DEE7;
  --sidebar-fg-dim:    #93A2B4;
  --sidebar-active-bg: var(--brand-teal);
  --sidebar-active-fg: #ffffff;

  --primary:     var(--brand-teal);
  --primary-700: var(--brand-teal-2);
  --info:        var(--brand-teal);

  /* Content background gets a very faint mist so the navy chrome pops */
  --content-bg:  var(--brand-mist);

  /* Mirror the Phase 3.38 main.php inline names so the fallback block
     also reads the SERVIGUARD palette when app-brand.css lands. */
  --wms-sidebar-bg:     var(--brand-navy);
  --wms-sidebar-bg-2:   var(--brand-navy-2);
  --wms-sidebar-fg:     #D6DEE7;
  --wms-sidebar-fg-dim: #93A2B4;
  --wms-primary:        var(--brand-teal);
  --wms-content-bg:     var(--brand-mist);

  /* Phase 3.59.12 — brand-guide typography tokens */
  --brand-font-body:    'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --brand-font-heading: 'Poppins', 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ─── Phase 3.59.12 — brand-guide typography ─────────────────
   Google Fonts (Inter, Poppins) are loaded from layouts/main.php
   + layouts/auth.php. This block applies them to the body and
   every heading surface. Michroma stays on the logo image only —
   we never render "SERVIGUARD" as text with Michroma.  */
body {
  font-family: var(--brand-font-body);
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';   /* Inter refinements */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6,
.page-title,
.card-title,
.header-title,
.sidebar-heading,
.stat-value {
  font-family: var(--brand-font-heading);
  font-weight: 500;                                       /* Poppins Medium as per brand guide */
  letter-spacing: -.01em;
}
.card-header,
.section-title {
  font-family: var(--brand-font-heading);
  font-weight: 500;
}
.btn,
.form-label,
label {
  font-family: var(--brand-font-body);
}

/* ─── Sidebar brand — Phase 3.59.6 (full-white top block) ─────
   Phase 3.59.4 wrapped the sidebar shield + wordmark in a small
   white PILL that floated on the navy sidebar. Phase 3.59.6 goes
   one step bigger: the whole `.sidebar-brand` top strip becomes a
   FULL-WIDTH WHITE BLOCK (drops the pill container entirely). The
   block aligns with the topbar height in the content area so the
   top of the app reads as one unified white strip (sidebar brand
   block on the left + content topbar on the right), then navy
   sidebar + light content below. Cleaner, more corporate. */
.sidebar-brand {
  background: #ffffff;
  padding: 12px 18px;
  min-height: var(--header-h, 60px);   /* aligns with .wms-header */
  border-bottom: 1px solid #E4E9EF;
  display: flex;
  align-items: center;
  gap: 0;
}
.sidebar-brand .brand-strip {
  background: transparent;              /* no more pill */
  border-radius: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  line-height: 1;
  text-decoration: none;
  box-shadow: none;
  transition: opacity .15s ease;
}
.sidebar-brand .brand-strip:hover {
  text-decoration: none;
  opacity: .85;
}
.sidebar-brand .brand-strip img.brand-shield,
.sidebar-brand .brand-strip img.brand-wordmark {
  display: block;
  filter: none;                         /* full colour, not white */
  opacity: 1;
}
.sidebar-brand .brand-strip img.brand-shield {
  height: 32px;
  width: auto;
}
.sidebar-brand .brand-strip img.brand-wordmark {
  height: 18px;
  width: auto;
  max-width: 150px;
}
/* Retain the old .bi icon fallback if a partial still uses it */
.sidebar-brand .bi { color: var(--brand-orange); }

/* Sidebar link active — teal border + subtle teal wash */
.sidebar-link.active {
  background: linear-gradient(90deg, var(--brand-teal-30) 0%, transparent 100%);
  border-left-color: var(--brand-teal);
}
.sidebar-heading { letter-spacing: .08em; color: var(--brand-orange); opacity: .7; }
.sidebar-footer .role-pill {
  background: var(--brand-teal-30);
  color: #E8F3F8;
}

/* ─── Topbar / avatar ──────────────────────────────────────── */
.wms-header { border-bottom-color: #E4E9EF; }
.avatar     { background: var(--brand-teal); }
.header-title { color: var(--brand-navy); }

/* ─── Buttons ──────────────────────────────────────────────── */
.btn-primary {
  background: var(--brand-teal);
  border-color: var(--brand-teal);
}
.btn-primary:hover,
.btn-primary:focus {
  background: var(--brand-teal-2);
  border-color: var(--brand-teal-2);
}
.btn-outline-primary {
  color: var(--brand-teal);
  border-color: var(--brand-teal);
}
.btn-outline-primary:hover {
  background: var(--brand-teal);
  color: #fff;
}

/* NEW — orange CTA button. Use for Approve / Submit-for-Approval
   flows where a clear "commit" call needs stronger colour weight. */
.btn-accent {
  background: var(--brand-orange);
  border-color: var(--brand-orange);
  color: #fff;
}
.btn-accent:hover,
.btn-accent:focus {
  background: var(--brand-orange-2);
  border-color: var(--brand-orange-2);
  color: #fff;
}

.form-control:focus {
  border-color: var(--brand-teal);
  box-shadow: 0 0 0 3px var(--brand-teal-15);
}

a { color: var(--brand-teal); }

/* ─── Cards / headings ─────────────────────────────────────── */
.card-title      { color: var(--brand-navy); }
.page-title      { color: var(--brand-navy); }
h1, h2, h3, h4   { color: var(--brand-navy); }

/* Stat cards — repalette to brand */
.stat-primary  .stat-icon { background: var(--brand-teal); }
.stat-info     .stat-icon { background: var(--brand-navy); }
.stat-warning  .stat-icon { background: var(--brand-orange); }
.stat-danger   .stat-icon { background: #B4362B; }
.stat-success  .stat-icon { background: #2F9E7D; }
.stat-value    { color: var(--brand-navy); }

/* NEW — orange accent badge */
.badge-accent {
  display: inline-block;
  padding: 3px 9px;
  background: var(--brand-orange-15);
  color: var(--brand-orange-2);
  border-radius: 999px;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ─── Auth shell — centered card (Phase 3.59.5) ───────────────
   Phase 3.59 → 3.59.4 used a side-by-side split-hero. Phase 3.59.5
   replaces that with a classic centered card: full-page navy
   background, single white rounded card in the middle with the
   SERVIGUARD full mark at the top of the card + sign-in form below,
   copyright text below the card. Cleaner, more focused. */
.auth-body {
  background:
    radial-gradient(120% 80% at 15% 12%, rgba(5, 110, 143,.36) 0%, transparent 62%),
    radial-gradient(90% 60% at 85% 92%, rgba(244, 140, 32,.16) 0%, transparent 62%),
    linear-gradient(158deg, var(--brand-navy) 0%, var(--brand-navy-2) 55%, #0B1E31 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: #E7EEF5;
  position: relative;
  overflow: hidden;
}
.auth-body::before {
  /* faint shield ghost behind the card for depth */
  content: '';
  position: absolute;
  inset: auto -8% -14% auto;
  width: 42%;
  height: 60%;
  background: url('../images/brand/shield.png') center / contain no-repeat;
  opacity: .05;
  transform: rotate(-8deg);
  pointer-events: none;
}
.auth-container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.auth-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 36px 34px 32px;
  width: 100%;
  box-shadow:
    0 30px 60px -12px rgba(0, 0, 0, .45),
    0 0 0 1px rgba(255, 255, 255, .04);
}
.auth-card-brand {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid #ECEFF3;
}
.auth-card-brand .brand-mark {
  width: 180px;
  height: auto;
  display: block;
}
.auth-footer {
  color: rgba(199, 210, 222, .55);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-align: center;
  font-weight: 500;
  margin-top: 0;
}
.auth-footer strong {
  color: rgba(255, 255, 255, .85);
  font-weight: 700;
}

/* ─── Form-card styles (Phase 3.59, carried forward) ──────────
   These cascade to the login.php / forgot-password.php content
   rendered inside `.auth-form-card`. The parent `.auth-card`
   constrains width, so no max-width needed here. */
.auth-form-card {
  width: 100%;
}
.auth-form-card .auth-title {
  font-size: 24px;
  color: var(--brand-navy);
  font-weight: 600;
  margin: 0 0 6px;
}
.auth-form-card .auth-sub {
  color: #6B7A8A;
  font-size: 13px;
  margin: 0 0 24px;
}
.auth-form-card .form-group { margin-bottom: 16px; }
.auth-form-card .form-label {
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #445366;
  font-weight: 600;
  margin-bottom: 6px;
}
.auth-form-card .form-control {
  padding: 12px 14px;
  border: 1px solid #D5DDE6;
  border-radius: 10px;
  font-size: 14px;
}
.auth-form-card .btn-primary {
  padding: 12px 16px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .02em;
}
.auth-form-card .auth-links {
  text-align: center;
  margin-top: 20px;
  font-size: 13px;
  color: #6B7A8A;
}
.auth-form-card .auth-links a {
  color: var(--brand-teal);
  font-weight: 500;
}

/* Phase 3.59.5 — legacy `.auth-wrap` / `.auth-brand` / and the old
   `.auth-card` + `.auth-footer` reset rules removed. Phase 3.59.5's
   centered-card layout now owns `.auth-card` + `.auth-footer` with
   their own definitions above. If a page still references
   `.auth-wrap`, style it defensively here. */
.auth-wrap  { width: 100%; max-width: 460px; }

/* Phase 3.59.5 — centered card mobile scale */
@media (max-width: 640px) {
  .auth-body { padding: 24px 16px; }
  .auth-card {
    padding: 28px 22px 24px;
    border-radius: 16px;
  }
  .auth-card-brand {
    margin-bottom: 22px;
    padding-bottom: 20px;
  }
  .auth-card-brand .brand-mark { width: 150px; }
  .auth-footer { font-size: 9px; letter-spacing: .14em; }
  .auth-body::before { display: none; }
}

/* ─── Reusable brand logo strip ────────────────────────────── */
.brand-logo-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1;
}
.brand-logo-inline .brand-shield { height: 22px; width: auto; }
.brand-logo-inline .brand-wordmark { height: 16px; width: auto; }

/* ─── Certificate VIEW (on-screen page) recolour ───────────── */
.cert-brand-header {
  border-bottom: 2px solid var(--brand-navy);
  padding-bottom: 12px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.cert-brand-header img { height: 44px; width: auto; }
.cert-brand-header .cert-brand-name {
  font-size: 18px;
  color: var(--brand-navy);
  font-weight: 600;
  letter-spacing: -.01em;
  margin: 0;
}
.cert-brand-header .cert-brand-sub {
  font-size: 12px;
  color: #6B7A8A;
  margin: 2px 0 0;
}
.cert-section-title {
  color: var(--brand-navy);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 1px solid #E4E9EF;
  padding-bottom: 4px;
  margin: 18px 0 10px;
}
/* Coverage table header row on cert view — navy background + white text */
.cert-view-coverage thead th {
  background: var(--brand-navy);
  color: #fff;
  border-color: var(--brand-navy);
}
.cert-view-coverage tr.line-total td {
  background: var(--brand-teal-10);
  font-weight: 600;
}

/* ─── Print-safety: on-brand alerts already inherit palette
       via Bootstrap; leave alert-* alone so warning/danger/success
       semantic meanings stay legible. ────────────────────────── */