/* ============================================================================
   CBC — Material / Google-style theme with subtle Maryland heritage
   ----------------------------------------------------------------------------
   Loaded LAST (after portal-v2.css and each page's inline <style>) so it
   re-skins the existing "v2" design system without touching markup or JS.

   Strategy:
     • Re-point the shared --v2-* tokens to a clean Material palette + sans
       headings, so every component inherits the new look automatically.
     • Refine the handful of components that need a true Material treatment
       (cards, buttons, stat cards, nav, sidebar, tables).
     • Add a subtle Maryland-flag accent stripe + a small hero flag motif.
   Content, copy, structure, and behavior are unchanged.
   ========================================================================== */

/* ── 1. Re-skin the design tokens ─────────────────────────────────────────── */
:root {
  /* Cooler Google/Material neutrals */
  --v2-canvas:        #F1F3F4;
  --v2-surface:       #FFFFFF;
  --v2-surface-2:     #F1F3F4;
  --v2-surface-alt:   #F8F9FA;

  --v2-ink:           #202124;
  --v2-ink-2:         #3C4043;
  --v2-ink-muted:     #5F6368;
  --v2-ink-subtle:    #80868B;

  --v2-rule:          #DADCE0;
  --v2-rule-strong:   #C4C7C5;

  /* CBC crimson kept as the primary accent */
  --v2-crimson:       #9B1C31;
  --v2-crimson-dark:  #7A1B2D;
  --v2-crimson-tint:  #FCE9EC;

  /* Maryland flag heritage palette (used for subtle accents only) */
  --md-gold:          #F4B400;
  --md-black:         #1A1A1A;
  --md-red:           #C8102E;
  --md-white:         #FFFFFF;

  /* Material shape + elevation */
  --v2-radius-sm:     8px;
  --v2-radius:        8px;
  --v2-radius-lg:     12px;
  --v2-shadow-1:      0 1px 2px rgba(60,64,67,0.10), 0 1px 3px rgba(60,64,67,0.08);
  --v2-shadow-2:      0 1px 3px rgba(60,64,67,0.12), 0 4px 8px rgba(60,64,67,0.10);
  --v2-shadow-hover:  0 1px 3px rgba(60,64,67,0.16), 0 6px 16px rgba(60,64,67,0.16);

  /* Headings → clean bold sans (Google look). Re-pointing --v2-serif converts
     every serif heading across the page to the sans stack in one move. */
  --v2-serif:         'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

body, body.v2 {
  background: var(--v2-canvas) !important;
  -webkit-font-smoothing: antialiased;
}

/* ── 2. Typography: bold, near-black, Google-style headings ───────────────── */
body.v2 h1, body.v2 h2, body.v2 h3, body.v2 h4,
body.v2 .v2-card-title, body.v2 .v2-page-head h1 {
  font-family: var(--v2-serif) !important;
  color: var(--v2-ink) !important;
  font-style: normal !important;
}
body.v2 h1 { font-weight: 700 !important; letter-spacing: -0.022em !important; }
body.v2 h2 { font-weight: 600 !important; letter-spacing: -0.018em !important; }
body.v2 h3 { font-weight: 600 !important; letter-spacing: -0.012em !important; }
body.v2 h4 { font-weight: 600 !important; }

/* Eyebrow → quieter Google-style label */
body.v2 .v2-eyebrow {
  color: var(--v2-ink-muted) !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
}

/* ── 3. Maryland heritage accent ──────────────────────────────────────────── */
/* A thin flag-colored stripe across the top of the nav bar (every page). */
.p-top, .v2-topbar {
  border-top: 3px solid transparent !important;
  border-image: linear-gradient(90deg,
      var(--md-gold) 0 25%,
      var(--md-black) 25% 50%,
      var(--md-red)  50% 75%,
      #E3B5BC        75% 100%) 1 !important;
}
/* ── 4. Cards: outlined Material cards ────────────────────────────────────── */
body.v2 .v2-card,
body.v2 .p-service-card {
  background: var(--v2-surface) !important;
  border: 1px solid var(--v2-rule) !important;
  border-radius: var(--v2-radius-lg) !important;
  box-shadow: none !important;
  transition: box-shadow 0.18s var(--v2-ease), border-color 0.18s var(--v2-ease) !important;
}
body.v2 .v2-card.hoverable:hover,
body.v2 .p-service-card:hover {
  box-shadow: var(--v2-shadow-hover) !important;
  border-color: transparent !important;
}

/* ── 5. Stat cards: separate outlined tiles (matches mockup) ──────────────── */
.p-stats {
  padding-top: 12px !important;
  padding-bottom: 80px !important;
}
.p-stats-inner {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}
.p-stat {
  background: var(--v2-surface) !important;
  border: 1px solid var(--v2-rule) !important;
  border-radius: var(--v2-radius-lg) !important;
  padding: 26px 22px !important;
}
.p-stat-num {
  font-family: var(--v2-serif) !important;
  font-weight: 700 !important;
  color: var(--v2-ink) !important;
}
.p-stat-lbl { color: var(--v2-ink-muted) !important; }

/* Dashboard stat tiles (.v2-stat) → outlined Material tiles */
body.v2 .v2-stat {
  background: var(--v2-surface) !important;
  border: 1px solid var(--v2-rule) !important;
  border-radius: var(--v2-radius-lg) !important;
}

/* ── 6. Buttons: Material crimson ─────────────────────────────────────────── */
body.v2 .v2-btn,
body.v2 a.v2-btn,
body.v2 a.p-cta,
body.v2 .p-cta-banner a.btn-white {
  border-radius: 9999px !important;     /* Material pill */
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  transition: box-shadow 0.16s var(--v2-ease), background 0.16s var(--v2-ease) !important;
}
body.v2 .v2-btn-primary,
body.v2 a.v2-btn-primary,
body.v2 a.p-cta {
  background: var(--v2-crimson) !important;
  color: #fff !important;
  box-shadow: 0 1px 2px rgba(60,64,67,0.20) !important;
}
body.v2 .v2-btn-primary:hover,
body.v2 a.v2-btn-primary:hover,
body.v2 a.p-cta:hover {
  background: var(--v2-crimson-dark) !important;
  box-shadow: var(--v2-shadow-hover) !important;
}
body.v2 .v2-btn-ghost,
body.v2 a.v2-btn-ghost {
  background: var(--v2-surface) !important;
  border: 1px solid var(--v2-rule) !important;
  color: var(--v2-crimson) !important;
}
body.v2 .v2-btn-ghost:hover,
body.v2 a.v2-btn-ghost:hover {
  background: var(--v2-crimson-tint) !important;
  border-color: var(--v2-crimson) !important;
}

/* ── 7. Top nav refinements ───────────────────────────────────────────────── */
.p-top, .v2-topbar { box-shadow: 0 1px 0 rgba(60,64,67,0.06) !important; }
.p-nav a.active::after { background: var(--v2-crimson) !important; height: 3px !important; border-radius: 3px 3px 0 0 !important; }

/* ── 7b. Full wordmark logo (New_2.28.26) in nav bars & auth cards ────────── */
/* Size the wide logo for each surface and undo any square/cover/rounding. */
.p-top-left img      { height: 38px !important; width: auto !important; max-width: 250px !important; object-fit: contain !important; border-radius: 0 !important; }
.v2-topbar-logo img  { height: 30px !important; width: auto !important; max-width: 210px !important; object-fit: contain !important; border-radius: 0 !important; }
.nav-logo-img        { height: 30px !important; width: auto !important; max-width: 210px !important; object-fit: contain !important; border-radius: 0 !important; }
.adv-sidebar-logo img{ height: auto !important; width: auto !important; max-width: 190px !important; object-fit: contain !important; border-radius: 0 !important; }
.login-logo, .sp-logo{ height: auto !important; width: auto !important; max-width: 240px !important; object-fit: contain !important; display: block !important; margin: 0 auto 6px !important; border-radius: 0 !important; }
/* The company name is now part of the wordmark — hide the old text labels. */
.p-brand, .nav-brand-name, .adv-sidebar-logo-text, .adv-sidebar-logo-sub { display: none !important; }

/* Auth cards (login / reset / set password): drop the accent rule under the
   logo and the redundant "Crimson BC" footer label; keep the logo centered. */
.login-gold-rule, .sp-gold-rule { display: none !important; }
.login-foot .brand, .sp-foot .brand { display: none !important; }

/* ── 8. Hero: bold, left-aligned, Material, Maryland-flag backdrop ─────────── */
.p-hero {
  text-align: left !important;
  border: 3px solid transparent !important;
  border-radius: var(--v2-radius-lg) !important;
  background:
    linear-gradient(rgba(255,255,255,0.74), rgba(255,255,255,0.88)) padding-box,
    url('md_background_flag.png') center center / cover no-repeat padding-box,
    linear-gradient(90deg, #F4B400 0 25%, #1A1A1A 25% 50%, #C8102E 50% 75%, #F4B400 75% 100%) border-box !important;
  margin-top: 22px !important;
  margin-bottom: 8px !important;
}
body.v2 .p-hero .v2-eyebrow { color: var(--v2-crimson) !important; }
.p-hero h1 {
  font-family: var(--v2-serif) !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  color: var(--v2-ink) !important;
}
.p-hero h1 .accent { color: var(--v2-crimson) !important; font-style: normal !important; }
.p-hero .lede { margin-left: 0 !important; }
.p-hero-rule { margin-left: 0 !important; background: var(--md-gold) !important; height: 3px !important; width: 56px !important; }
.p-hero-btns { justify-content: flex-start !important; }

/* Section heads → flag-bordered Material card (matches the About page) */
.p-section-head {
  text-align: center !important;
  max-width: 700px !important;
  margin: 0 auto 48px !important;
  border: 3px solid transparent !important;
  border-radius: var(--v2-radius-lg) !important;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(90deg, #F4B400 0 25%, #1A1A1A 25% 50%, #C8102E 50% 75%, #F4B400 75% 100%) border-box !important;
  padding: 30px 38px !important;
  box-shadow: var(--v2-shadow-1) !important;
}
.p-section-head h2 { font-weight: 600 !important; }
body.v2 .p-section-head .v2-eyebrow { color: var(--v2-crimson) !important; }

/* ── 9. Sidebar (dashboards): clean white Material rail ───────────────────── */
body.v2 .v2-sidebar { background: var(--v2-surface) !important; border-right: 1px solid var(--v2-rule) !important; }
body.v2 .v2-side-item { border-radius: 9999px !important; }
body.v2 .v2-side-item.active {
  background: var(--v2-crimson-tint) !important;
  color: var(--v2-crimson) !important;
  font-weight: 600 !important;
}
body.v2 .v2-side-item.active::before { background: var(--v2-crimson) !important; }

/* ── 10. Tables (admin): clean Material rows ──────────────────────────────── */
body.v2 table th {
  color: var(--v2-ink-muted) !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  border-bottom: 1px solid var(--v2-rule) !important;
}
body.v2 table td { border-bottom: 1px solid var(--v2-rule) !important; }

/* Getting Started steps → same outlined Material cards as the stat tiles */
.p-how-card {
  background: var(--v2-surface) !important;
  border: 1px solid var(--v2-rule) !important;
  border-radius: var(--v2-radius-lg) !important;
  padding: 28px 26px !important;
  transition: box-shadow 0.18s var(--v2-ease), border-color 0.18s var(--v2-ease) !important;
}
.p-how-card:hover { box-shadow: var(--v2-shadow-hover) !important; border-color: transparent !important; }
.p-how-num {
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 12px !important;
}

/* ── 11. Editorial card numerals (home) → crimson, bold sans ──────────────── */
.p-how-num, .p-phase-num {
  font-family: var(--v2-serif) !important;
  font-weight: 700 !important;
  color: var(--v2-crimson) !important;
}
.p-svc-eyebrow { color: var(--v2-crimson) !important; }

/* CTA banner → clean white card with a Maryland-flag outline (readable). */
.p-cta-banner {
  border: 3px solid transparent !important;
  border-radius: var(--v2-radius-lg) !important;
  background:
    linear-gradient(var(--v2-surface), var(--v2-surface)) padding-box,
    linear-gradient(90deg,
      var(--md-gold)  0 25%,
      var(--md-black) 25% 50%,
      var(--md-red)   50% 75%,
      var(--md-gold)  75% 100%) border-box !important;
  box-shadow: var(--v2-shadow-1) !important;
}
.p-cta-banner::before { display: none !important; }
.p-cta-banner h2 { color: var(--v2-ink) !important; }
.p-cta-banner p { color: var(--v2-ink-muted) !important; }
.p-cta-banner .v2-eyebrow { color: var(--v2-ink-muted) !important; }
body.v2 .p-cta-banner a.btn-white {
  background: var(--v2-crimson) !important;
  color: #fff !important;
  border-radius: 9999px !important;
}
body.v2 .p-cta-banner a.btn-white:hover {
  background: var(--v2-crimson-dark) !important;
  color: #fff !important;
}

/* ── 13. Resource documentation pages (resource-v2 system) ────────────────── */
/* Maryland flag stripe across the top of the document header */
.res-header {
  border-top: 3px solid transparent !important;
  border-image: linear-gradient(90deg,
      var(--md-gold) 0 25%, var(--md-black) 25% 50%,
      var(--md-red) 50% 75%, #E3B5BC 75% 100%) 1 !important;
}
.res-header h1 {
  font-family: var(--v2-serif) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}
.res-body h2, .res-body h3,
.section-card h2, .res-card h2, .section-header h2 {
  font-family: var(--v2-serif) !important;
  font-weight: 600 !important;
  letter-spacing: -0.012em !important;
}
.section-card, .res-card {
  border-radius: var(--v2-radius-lg) !important;
}

/* ── 12. Responsive: stat cards stack neatly ──────────────────────────────── */
@media (max-width: 900px) {
  .p-stats-inner { grid-template-columns: repeat(2, 1fr) !important; }
  .p-stat { border: 1px solid var(--v2-rule) !important; }
}

/* ============================================================================
   14. MOBILE RESPONSIVENESS (site-wide) — appended last so it wins.
   Fixes the three reported symptoms: horizontal overflow, multi-column grids
   that don't collapse, unusable nav, and cramped/small tap targets.
   ========================================================================== */

/* Stop any element from forcing a horizontal scroll on the whole page. */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, canvas { max-width: 100%; height: auto; }

@media (max-width: 768px) {
  /* Multi-column grids → single column (dashboard, admin forms, home stats,
     portfolio KPIs). !important also overrides inline style="grid-…" attrs. */
  .a-form-grid, .a-form-grid.cols-2, .a-form-grid.cols-3, .a-form-grid.cols-4,
  .v2-stat-row, .v2-kanban, .goals-grid, .kpi-grid, .kpi-input-grid,
  .resource-grid, .meeting-grid, .v2-overview-grid, .p-stats-inner,
  #ov-kpis, #ov-phasebars {
    grid-template-columns: 1fr !important;
  }

  /* Wide tables scroll inside their own box instead of widening the page. */
  table { display: block !important; width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; }

  /* Long URLs / tokens / emails wrap instead of pushing layout width. */
  a, code, td, .touches { overflow-wrap: anywhere; word-break: break-word; }

  /* Trim oversized horizontal padding that causes side-scroll. */
  .v2-main { padding: 20px 16px 88px !important; }
  .p-section, .p-wrap, .res-body, .res-header, .v2-card { padding-left: 16px !important; padding-right: 16px !important; }

  /* Keep the nav reachable on phones. */
  .v2-mobile-toggle, .p-mobile { display: inline-flex !important; }

  /* Inputs/buttons: full-width-safe, 16px (stops iOS zoom-on-focus), bigger tap target. */
  input, select, textarea { max-width: 100% !important; font-size: 16px !important; }
  .v2-btn, .gen-btn, .action-btn, .v2-icon-btn, button { min-height: 42px; }

  /* Scale big numerals/headings down a touch. */
  .v2-stat-value, .p-stat-num { font-size: 30px !important; }
}

@media (max-width: 480px) {
  body.v2 h1, .v2-page-head h1, .p-hero h1 { font-size: 24px !important; }
  .section-hdr h2, .p-section-head h2 { font-size: 20px !important; }
  .v2-main { padding: 16px 12px 88px !important; }
  .v2-stat-row { grid-template-columns: 1fr !important; }
}