/* ══════════════════════════════════════════════════════════════════════════
   TOYOTA TYPE — brand font (see Design-asset/Toyota type font/)
   Same @font-face set is mirrored in security_platform_frontend's
   assets/custom.css — keep both in sync, this is the platform's one brand typeface.
══════════════════════════════════════════════════════════════════════════ */
@font-face { font-family: 'Toyota Type'; src: url('/assets/fonts/ToyotaType-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Toyota Type'; src: url('/assets/fonts/ToyotaType-LightIt.ttf') format('truetype'); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'Toyota Type'; src: url('/assets/fonts/ToyotaType-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Toyota Type'; src: url('/assets/fonts/ToyotaType-RegularIt.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Toyota Type'; src: url('/assets/fonts/ToyotaType-Semibold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Toyota Type'; src: url('/assets/fonts/ToyotaType-SemiboldIt.ttf') format('truetype'); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: 'Toyota Type'; src: url('/assets/fonts/ToyotaType-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Toyota Type'; src: url('/assets/fonts/ToyotaType-BoldIt.ttf') format('truetype'); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Toyota Type'; src: url('/assets/fonts/ToyotaType-Black.ttf') format('truetype'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Toyota Type'; src: url('/assets/fonts/ToyotaType-BlackIt.ttf') format('truetype'); font-weight: 900; font-style: italic; font-display: swap; }

* {
  box-sizing: border-box;
}

:root {
  /* ── Typeface ───────────────────────────────────────────── */
  /* Was "Barlow" (headings) / "Source Sans 3" (body) loaded from Google
     Fonts in app.py — replaced by the brand typeface. Google Fonts link
     left in app.py as a fallback source only; not the primary face anymore. */
  --font-family-heading: 'Toyota Type', 'Barlow', sans-serif;
  --font-family-base:    'Toyota Type', 'Source Sans 3', sans-serif;

  /* ── Brand ──────────────────────────────────────────────── */
  /* Canonical brand palette — MUST match security_platform_frontend's
     assets/custom.css :root (see product/DESIGN_TOKEN_SPEC.md). --brand-red
     was #EB0A1E (defined but unused anywhere in this file); aligned to the
     platform's one brand red used for interactive elements (buttons, focus,
     section bars) across both apps. */
  --brand-red:        #9B2335;
  --brand-red-dark:   #7d1b28;
  --brand-red-accent: #EB0A1E;

  /* ── Status ─────────────────────────────────────────────── */
  /* Aligned to the same badge palette used by ATPSG in the frontend app
     (assets/custom.css .badge-implemented/.badge-in-progress/etc) so the
     same status reads as the same color in both apps. */
  --status-complete:        #2BAB81;
  --status-complete-bg:     #DDF4ED;
  --status-complete-text:   #0a3622;
  --status-progress:        #D2A328;
  --status-progress-bg:     #FAF0B7;
  --status-progress-text:   #664d03;
  --status-not-start:       #EE1B2E;
  --status-not-start-bg:    #F9BEC2;
  --status-not-start-text:  #58151c;
  --status-na:              #444444;
  --status-na-bg:           #D1D1D1;
  --status-na-text:         #41464b;

  /* ── Gauge colors ───────────────────────────────────────── */
  --gauge-main:     #0057B8;
  --gauge-not:      #EE1B2E;
  --gauge-progress: #D2A328;
  --gauge-done:     #2BAB81;

  /* ── Section & Banner ───────────────────────────────────── */
  --banner-bg:      #1a1a1a;
  --banner-text:    #ffffff;
  --section-header-bg:   #000000;
  --section-header-text: #ffffff;

  /* ── Cards ──────────────────────────────────────────────── */
  --card-bg:        #ffffff;
  --card-border:    #dbe2ea;
  --card-shadow:    0 4px 12px rgba(15, 23, 42, 0.08);
  --card-radius:    10px;

  /* ── KPI gauge card ─────────────────────────────────────── */
  --kpi-header-bg:  #1a1a1a;
  --kpi-header-text:#ffffff;
  --kpi-border:     #1a1a1a;

  /* ── Table ──────────────────────────────────────────────── */
  --table-header-bg:   #171717;
  --table-header-text: #ffffff;
  --table-row-stripe:  #f8f9fa;
  --table-border:      #dee2e6;

  /* ── Typography ─────────────────────────────────────────── */
  /* System-wide readability bump (+2px per tier, 2026-08-31) — every rule
     below already reads off these tokens, so this cascades everywhere.
     Any page needing a different size must add/override a token here,
     never a bare hardcoded px value in a page file. */
  --font-title-xl: 36px;
  --font-title-lg: 32px;
  --font-title-md: 26px;
  --font-title-sm: 20px;
  --font-label-lg: 18px;
  --font-label-md: 16px;
  --font-label-sm: 14px;

  /* ── Spacing ────────────────────────────────────────────── */
  /* Matches security_platform_frontend's --space-* scale — not yet consumed
     by any rule below (Phase 0 foundation only, see DESIGN_TOKEN_SPEC.md). */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
}

body {
  margin: 0;
  background: #edf1f5;
  font-family: var(--font-family-base);
  color: #1f2937;
}

/* ── Date pickers ─────────────────────────────────────────────────────────
   Dash's react-dates inputs do not expose a calendar affordance by default.
   The wrapper is used for every real date/date-range filter, while period
   dropdowns intentionally keep their chevron because they are not calendars. */
.date-picker-with-icon {
  position: relative;
  display: inline-block;
}

.date-picker-calendar-icon {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: 10px;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  pointer-events: none;
}

.date-picker-with-icon .dash-datepicker-caret-icon {
  display: none;
}

.date-picker-with-icon .dash-datepicker-input-wrapper {
  grid-template-columns: 1fr !important;
  padding-right: 38px;
}

.date-picker-with-icon .dash-datepicker-input-wrapper:has(.dash-datepicker-range-arrow) {
  grid-template-columns: auto auto 1fr !important;
}

.date-picker-with-icon .dash-datepicker-input-wrapper:focus-within {
  border-color: var(--brand-red) !important;
  box-shadow: 0 0 0 2px rgba(155, 35, 53, 0.18);
}

/* ── App shell ──────────────────────────────────────────────────────────── */
.app-shell {
  display: flex;
  min-height: 100vh;
}

/* ── Sidebar ────────────────────────────────────────────────────────────── */
.sidebar {
  width: 200px;
  min-width: 200px;
  background: #ffffff;
  border-right: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  flex-shrink: 0;
  transition: width 0.18s ease, min-width 0.18s ease;
}

/* collapsed: shrink to 44px strip showing only the toggle button */
.sidebar.collapsed {
  width: 44px;
  min-width: 44px;
}
.sidebar.collapsed .toyota-logo,
.sidebar.collapsed .sidebar-nav,
.sidebar.collapsed .sync-badge {
  display: none;
}

/* ── Sidebar collapse toggle ──────────────────────────────────────────────── */
/* Standard "edge toggle" pattern (Notion/Linear/VS Code-style): a small
   round button sitting ON the seam between sidebar and content, half
   overlapping the border — not living inside the header row at all. Sits
   at a fixed viewport position so it stays put regardless of sidebar
   scroll, and the same button works in both expanded and collapsed widths
   since it's anchored to the sidebar's right edge either way. */
.sidebar-toggle {
  position: fixed;
  top: 18px;
  left: 188px;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: #ffffff;
  border: 1px solid #d8dee9;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
  cursor: pointer;
  font-size: 10px;
  color: #6b7280;
  transition: left 0.18s ease, background 0.12s, color 0.12s;
}
.sidebar-toggle:hover {
  background: #f3f4f6;
  color: #111827;
}
.sidebar.collapsed .sidebar-toggle {
  left: 32px;
}

.toyota-logo {
  display: grid;
  place-items: center;
  font-size: 28px;
  font-weight: 700;
  color: var(--brand-red-accent);
  letter-spacing: 1px;
  font-family: var(--font-family-heading);
  padding: 16px 0 14px;
  border-bottom: 1px solid #e2e8f0;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  padding: 4px 0;
}

.nav-link {
  display: block;
  padding: 8px 14px;
  color: #374151;
  text-decoration: none;
  font-size: 13px;
  font-family: var(--font-family-base);
  font-weight: 600;
  transition: background 0.12s, color 0.12s;
  border-left: 3px solid transparent;
  border-bottom: 1px solid #f1f5f9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-link:hover {
  background: #f3f4f6;
  color: #111827;
}

.nav-link.active {
  background: rgba(155, 35, 53, 0.08);
  color: var(--brand-red);
  border-left-color: var(--brand-red);
  font-weight: 600;
}

/* ── Grouped menu (nav_menu.py): group > item > sub-item, groups open and close ─
   Deliberately plain: no capitals, no rules, black text, the open page in brand red. Long names wrap onto the next
   line (the bar is only 200px wide) instead of running out of the bar. Levels are told apart by indentation. */
.nav-toggle {
  display: flex;
  align-items: flex-start;
  gap: 0;
  cursor: pointer;
  user-select: none;
  line-height: 1.35;
  transition: background 0.12s;
}

.nav-toggle:hover {
  background: #f3f4f6;
}

.nav-label,
.nav-num {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* the space between "7." and "CSIRT" belongs to the number, so it is the same in a foldable header (flex) and in a
   group that is a plain link */
.nav-num {
  flex: 0 0 auto;
  margin-right: 0.35em;
}

.nav-arrow {
  flex: 0 0 auto;
  width: 10px;
  margin-top: 3px;
  margin-right: 6px;
  font-size: 10px;
  color: var(--banner-bg);
  transition: transform 0.15s ease;
}

.nav-fold.collapsed > .nav-toggle > .nav-arrow {
  transform: rotate(-90deg);
}

.nav-fold.collapsed > .nav-fold-body {
  display: none;
}

/* level 1: group (a group that is itself a page, e.g. CSIRT, looks the same but opens its page) */
.nav-toggle-group,
.nav-link.nav-group-link {
  margin-top: 8px;
  padding: 8px 12px;
  font-family: var(--font-family-heading);
  font-weight: 700;
  font-size: var(--font-label-sm);
  color: var(--banner-bg);
  line-height: 1.35;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  border-bottom: none;
}

.sidebar-nav > .nav-fold-group:first-child > .nav-toggle-group {
  margin-top: 2px;
}

/* level 2 with children (RWS, ASM/TI) and level 2 pages */
.nav-toggle-sub {
  padding: 6px 12px 6px 28px;
  font-family: var(--font-family-base);
  font-weight: 600;
  font-size: 13px;
  color: var(--banner-bg);
}

.nav-link.nav-item,
.nav-link.nav-sub {
  font-weight: 400;
  font-size: 13px;
  color: var(--banner-bg);
  line-height: 1.35;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
  border-bottom: none;
}

.nav-link.nav-item {
  padding: 6px 12px 6px 28px;
}

/* level 3 */
.nav-link.nav-sub {
  padding: 6px 12px 6px 44px;
}

.nav-link.nav-group-link:hover,
.nav-link.nav-item:hover,
.nav-link.nav-sub:hover {
  background: #f3f4f6;
  color: var(--banner-bg);
}

/* the open page: brand red text and a red edge, nothing else */
.nav-link.active,
.nav-link.active:hover {
  background: transparent;
  color: var(--brand-red);
  border-left-color: var(--brand-red);
  font-weight: 600;
}

.sidebar-user {
  margin: 12px 12px 0;
  padding: 8px 10px;
  border-radius: 6px;
  background: #f7f9fb;
  border: 1px solid #dbe2ea;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.sidebar.collapsed .sidebar-user {
  display: none;
}

#sidebar-username {
  font-size: 12px;
  font-weight: 600;
  color: #334155;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-logout-btn {
  border: 1px solid #dbe2ea;
  background: #fff;
  color: #64748b;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 5px;
  cursor: pointer;
  white-space: nowrap;
}

.sidebar-logout-btn:hover {
  background: #fee2e2;
  color: #b91c1c;
  border-color: #fecaca;
}

.sync-badge {
  margin: 12px 12px 4px;
  padding: 5px 10px;
  border-radius: 6px;
  background: #f0fdf4;
  color: #166534;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid #bbf7d0;
  cursor: default;
}

/* ── Main area ──────────────────────────────────────────────────────────── */
.main-area {
  flex: 1;
  min-width: 0;
  padding: 8px 12px 18px;
  overflow-x: auto;
}

/* ── Company header ─────────────────────────────────────────────────────── */
.company-header-card {
  background: #f7f9fb;
  border: 1px solid #dbe2ea;
  border-radius: 10px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
  margin-bottom: 16px;
}

/* ── Coming soon pages ──────────────────────────────────────────────────── */
.coming-soon-card {
  margin-top: 24px;
  background: #f7f9fb;
  border: 1px solid #dbe2ea;
  border-radius: 10px;
  padding: 48px 32px;
  text-align: center;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

.coming-soon-title {
  font-family: var(--font-family-heading);
  font-size: 28px;
  color: #1e3a8a;
  margin: 0 0 12px;
}

.coming-soon-text {
  color: #64748b;
  font-size: 16px;
  margin: 0;
}

.company-select-area {
  padding: 4px 8px 8px;
}

.company-title {
  text-align: center;
  font-size: var(--font-label-lg);
  font-weight: 700;
  text-transform: uppercase;
  color: #1a1a1a;
  margin-bottom: 6px;
  font-family: var(--font-family-heading);
  letter-spacing: 0.4px;
  padding: 4px 8px;
}

.company-title-row {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 6px;
}

.company-title-row .company-title {
  margin: 0;
}

.company-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 3px;
}

.company-btn {
  font-size: 11px;
  padding: 7px 2px;
  border: 1px solid #cfd7e2;
  background: #ffffff;
  color: #334155;
  cursor: pointer;
  transition: 0.15s ease;
  font-family: var(--font-family-base);
  text-align: center;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-btn.selected {
  background: #1a1a1a;
  color: #ffffff;
  border-color: #1a1a1a;
  box-shadow: none;
}

.company-btn:hover {
  background: #f4f8ff;
}

/* Non-SUPER_ADMIN site/company lock (atpsg_dashboard/app.py's
   init_site_selection_for_user / attack_surface_by_company.py's
   init_company_selection_for_user set the `disabled` attribute on every
   button but a plain HTML `disabled` alone reads as "just unpicked", not
   "locked out" — this makes the locked-out state visually unmistakable. */
.company-btn:disabled {
  cursor: not-allowed;
  opacity: 0.45;
  background: #f1f5f9;
  color: #94a3b8;
}

.company-btn:disabled:hover {
  background: #f1f5f9;
}

.company-btn.selected:disabled {
  opacity: 0.75;
}

.overall-card,
.progress-company-card,
.category-card {
  margin-top: 10px;
  background: #f7f9fb;
  border: 1px solid #dbe2ea;
  padding: 8px 10px 12px;
  border-radius: 10px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

/* Multi-select dropdowns: once 2+ items are picked, Dash shows both the
   full comma-separated list AND a "N selected" badge — the list wraps and
   breaks the layout. Collapse to just the badge while CLOSED (matches
   Power BI's "Multiple selections" slicer display); when OPENED, show the
   real value chips again so each item's own remove (x) button stays
   clickable — hiding them unconditionally made individual periods
   impossible to deselect. Single selections are unaffected — the badge
   only renders when count > 1. */
.dash-dropdown:not([aria-expanded="true"])
  .dash-dropdown-trigger:has(.dash-dropdown-value-count) .dash-dropdown-value {
  display: none;
}

.overall-grid {
  margin-top: 6px;
  display: grid;
  grid-template-columns: 1.42fr 0.9fr 0.9fr 0.9fr;
  gap: 12px;
  align-items: stretch;
}

.overall-title-strip {
  margin-top: 8px;
  display: grid;
  grid-template-columns: 1.42fr 0.9fr 0.9fr 0.9fr;
  gap: 12px;
}

.overall-tile-title {
  text-align: center;
  text-transform: uppercase;
  font-family: var(--font-family-heading);
  font-weight: 700;
  font-size: var(--font-label-lg);
  color: #1a1a1a;
  letter-spacing: 0.2px;
  padding: 4px 8px;
}

/* ── 1400px: shrink column ratios slightly ───────────────── */
@media (max-width: 1400px) {
  .overall-grid,
  .overall-title-strip {
    grid-template-columns: 1.3fr 1fr 1fr 1fr;
    gap: 8px;
  }
}

/* ── 1100px: 2×2 layout ─────────────────────────────────── */
@media (max-width: 1100px) {
  .overall-grid,
  .overall-title-strip {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .overall-tile-title {
    font-size: 13px;
  }
}

.g-main-wrap {
  background: #ffffff;
  border: 1px solid #111827;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
}

.g-main-title {
  color: var(--text-primary);
  font-family: var(--font-family-heading);
  font-size: var(--font-label-lg);
  font-weight: 700;
  letter-spacing: 0.2px;
  line-height: 1.2;
  padding: var(--space-2) var(--space-3) 0;
  text-align: center;
  text-transform: uppercase;
}

.g-main-subtitle {
  color: #cbd5e1;
  font-family: var(--font-family-base);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.2;
  padding: 0 var(--space-3) var(--space-2);
  text-align: center;
  text-transform: uppercase;
}

.g-main-wrap > .dash-graph,
.g-small-wrap > .dash-graph {
  flex: 1;
  min-height: 0;
}

.g-small-wrap {
  background: #f1f3f5;
  border: 1px solid #111827;
  border-radius: 8px;
  padding: 6px;
  display: flex;
  flex-direction: column;
}

.progress-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}

.progress-title {
  margin: 0 auto 2px;
  font-size: var(--font-label-lg);
  font-weight: 700;
  font-family: var(--font-family-heading);
  text-align: center;
  text-transform: uppercase;
  color: #1a1a1a;
  letter-spacing: 0.2px;
  padding: 4px 8px;
}

.priority-panel {
  width: 240px;
  max-width: 100%;
  background: #ffffff;
  border: 1px solid #dbe2ea;
  padding: 8px 10px;
  border-radius: 8px;
}

.priority-label {
  font-size: var(--font-label-lg);
  font-weight: 700;
  margin-bottom: 4px;
}

#priority-dropdown .Select-control {
  border: 1px solid #cbd5e1;
}

.progress-sub-title {
  margin: 14px 2px 8px;
  font-family: var(--font-family-heading);
  font-weight: 700;
  font-size: var(--font-label-lg);
  text-align: center;
  text-transform: uppercase;
  color: #1a1a1a;
  letter-spacing: 0.15px;
  padding: 4px 8px;
}

.priority-radar-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.priority-radar-grid .js-plotly-plot,
#g-radar-company {
  border: 1px solid #d8dee9;
  border-radius: 8px;
  background: #f8fafc;
}

#g-radar-company,
#g-radar-high,
#g-radar-middle,
#g-radar-low {
  min-width: 0;
}

.dash-table-container {
  margin-top: 8px;
}

.show-hide {
  display: none !important;
}

.category-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.category-title {
  margin: 0;
  font-size: var(--font-label-lg);
  font-weight: 700;
  line-height: 1.05;
  font-family: var(--font-family-heading);
  text-align: center;
  text-transform: uppercase;
  color: #1a1a1a;
  letter-spacing: 0.3px;
  padding: 4px 8px;
}

.category-filter-wrap {
  display: flex;
  gap: 10px;
}

.category-filter-item {
  min-width: 140px;
}

.category-filter-label {
  font-size: var(--font-label-md);
  margin-bottom: 4px;
  color: #374151;
}

.category-chart-frame {
  margin-top: 10px;
  background: #f3f4f6;
  border: 1px solid #d9dee7;
  border-radius: 8px;
  padding: 6px 8px 8px;
}

.category-chart-frame .js-plotly-plot {
  border-radius: 6px;
}

.high-priority-card {
  margin-top: 10px;
  background: #f4ebed;
  border: 1px solid #e4d6da;
  border-radius: 10px;
  padding: 10px 12px 14px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

.high-priority-title {
  margin: 0 0 8px;
  font-family: var(--font-family-heading);
  font-size: var(--font-title-lg);
  letter-spacing: 0.2px;
  color: #202225;
}

.high-priority-red {
  color: #d22630;
}

.high-priority-chart-item {
  background: #f9fafa;
  border: 1px solid #dfdfe1;
  border-radius: 8px;
  padding: 4px 6px 2px;
  margin-top: 8px;
}

.middle-priority-card {
  margin-top: 10px;
  background: #f0ecd9;
  border: 1px solid #dfd6b1;
  border-radius: 10px;
  padding: 10px 12px 14px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

.middle-priority-title {
  margin: 0 0 8px;
  font-family: var(--font-family-heading);
  font-size: var(--font-title-lg);
  letter-spacing: 0.2px;
  color: #202225;
}

.middle-priority-orange {
  color: #ef9f00;
}

.middle-priority-chart-item {
  background: #f9fafa;
  border: 1px solid #dfdfe1;
  border-radius: 8px;
  padding: 4px 6px 2px;
  margin-top: 8px;
}

.low-priority-card {
  margin-top: 10px;
  background: #d7ead1;
  border: 1px solid #b9d7b0;
  border-radius: 10px;
  padding: 10px 12px 14px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

.low-priority-title {
  margin: 0 0 8px;
  font-family: var(--font-family-heading);
  font-size: var(--font-title-lg);
  letter-spacing: 0.2px;
  color: #202225;
}

.low-priority-green {
  color: #43a84f;
}

.low-priority-chart-item {
  background: #f9fafa;
  border: 1px solid #dfdfe1;
  border-radius: 8px;
  padding: 4px 6px 2px;
  margin-top: 8px;
}

.js-plotly-plot .plotly .main-svg {
  font-family: var(--font-family-base) !important;
}

/* ════════════════════════════════════════════════════════════
   DESIGN SYSTEM — new components (Power BI-aligned)
   ════════════════════════════════════════════════════════════ */

/* ── Section banner (black bar with arrow tip) ──────────── */
.section-banner {
  background: var(--banner-bg);
  color: var(--banner-text);
  font-family: var(--font-family-heading);
  font-weight: 700;
  font-size: var(--font-title-sm);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 11px 28px 11px 20px;
  margin: 14px 0 10px;
  border-radius: 4px 0 0 4px;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Domain section header (A.CORPORATE, B.PLANT …) ─────── */
.domain-section-header {
  font-family: var(--font-family-heading);
  font-weight: 700;
  font-size: var(--font-label-lg);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #1a1a1a;
  margin: 14px 0 8px;
  padding: 6px 0;
  border-top: 2px solid #1a1a1a;
  border-bottom: 1px solid #d1d5db;
}

/* ── KPI gauge card (Not Started / In Progress / Completed) */
.kpi-gauge-card {
  background: var(--card-bg);
  border: 2px solid var(--kpi-border);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.kpi-gauge-header {
  background: var(--kpi-header-bg);
  color: var(--kpi-header-text);
  font-family: var(--font-family-heading);
  font-weight: 700;
  font-size: var(--font-label-md);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  text-align: center;
  padding: 6px 8px;
}

.kpi-gauge-body {
  flex: 1;
  padding: 4px;
  background: #ffffff;
}

/* ── KPI grid (1 main + 3 small) ────────────────────────── */
.kpi-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
  align-items: stretch;
}

.kpi-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 8px;
}

@media (max-width: 960px) {
  .kpi-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ── Status badges ──────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: var(--font-label-sm);
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  font-family: var(--font-family-base);
}

.badge-complete   { background: var(--status-complete);   color: #ffffff; }
.badge-progress   { background: var(--status-progress);   color: #ffffff; }
.badge-not-start  { background: var(--status-not-start);  color: #ffffff; }
.badge-na         { background: var(--status-na);         color: #ffffff; }

/* ── Submission Status matrix ───────────────────────────── */
.submission-matrix-wrap {
  margin-top: 12px;
  overflow-x: auto;
}

.submission-matrix-legend {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.submission-matrix-legend .badge {
  font-size: 13px;
  padding: 4px 14px;
}

/* ── Horizontal progress bar ────────────────────────────── */
.hbar-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 22px;
}

.hbar-track {
  flex: 1;
  background: #e9ecef;
  border-radius: 3px;
  overflow: hidden;
  height: 18px;
}

.hbar-fill {
  height: 100%;
  background: var(--gauge-main);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 4px;
  font-size: 11px;
  font-weight: 700;
  color: #ffffff;
  min-width: 28px;
  transition: width 0.3s ease;
}

.hbar-label {
  font-size: var(--font-label-sm);
  font-weight: 700;
  color: #374151;
  min-width: 36px;
  text-align: right;
}

/* ── Page card (shared wrapper for new pages) ───────────── */
.page-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  padding: 12px 14px 16px;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  box-sizing: border-box;
  /* Fills its grid/flex item's stretched height (.three-col/.two-col use
     align-items: stretch) so all cards in a row end at the same edge —
     without this, a card shorter than its siblings leaves a blank gap
     below it instead of stretching to match. Subtract the margin-top
     above: margin sits outside border-box, so height:100% + margin-top
     together overflow the grid track by margin-top's amount. */
  height: calc(100% - 10px);
}

.page-card .js-plotly-plot,
.page-card .dash-graph {
  flex: 1 1 auto;
  min-width: 0;
}

/* Canonical chart/card title — every class below (.page-card-title,
   .progress-title, .progress-sub-title, .category-title, .company-title,
   .overall-tile-title) renders identically to this. Kept as separate
   classes (not merged into one) so each page's existing className
   references don't all need touching — only the values here do.
   NOT included: .kpi-gauge-header and .section-banner — those are a
   different component (colored banner/pill header strip), not a plain
   title, and are already consistent with themselves. */
.page-card-title {
  font-family: var(--font-family-heading);
  font-weight: 700;
  font-size: var(--font-label-lg);
  text-align: center;
  text-transform: uppercase;
  color: #1a1a1a;
  margin: 0 0 10px;
  padding: 4px 8px;
}

/* ── Page header row (title + period selector) ──────────── */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.page-title {
  font-family: var(--font-family-heading);
  font-weight: 700;
  font-size: var(--font-title-lg);
  color: #1a1a1a;
  margin: 0;
}

.page-subtitle {
  font-family: var(--font-family-base);
  font-size: var(--font-label-sm);
  color: #64748b;
  margin: 2px 0 0;
}

/* ── Company table shared style ─────────────────────────── */
.company-rank-table .dash-header {
  background: var(--table-header-bg) !important;
  color: var(--table-header-text) !important;
  font-weight: 700 !important;
}

/* ── Scrollable table wrapper: scroll both axes, sticky header + first column ── */
.scroll-table-wrap {
  overflow: auto;
  border: 1px solid var(--table-border);
  border-radius: 6px;
}

.scroll-table-wrap table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}

.scroll-table-wrap thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}

.scroll-table-wrap tbody td:first-child,
.scroll-table-wrap thead th:first-child {
  position: sticky;
  left: 0;
}

.scroll-table-wrap thead th:first-child {
  z-index: 3;
}

.scroll-table-wrap tbody td:first-child {
  z-index: 1;
}

/* ── Two-column layout (chart left + table right) ────────── */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
  margin-top: 10px;
}

.two-col-left-wide {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 14px;
  align-items: start;
  margin-top: 10px;
}

.three-col {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
  margin-top: 10px;
}

.two-col > *,
.two-col-left-wide > *,
.three-col > *,
.four-col > * {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.four-col {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 10px;
}

/* ── Executive Dashboard responsive composition ─────────────────────────── */
/* This dashboard has a persistent sidebar, so its usable content width gets
   narrow before the generic mobile breakpoint. Collapse its dense three-card
   rows at the compact-desktop breakpoint to avoid clipping ring gauges while
   preserving the original three-column layout on wide desktop screens. */
@media (max-width: 1180px) {
  .exec-summary-grid,
  .exec-primary-grid,
  .exec-services-grid,
  .exec-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

/* The sidebar can make Corporate narrow even on a wide browser. Use the
   panel's own available width, rather than the viewport, to compact its
   three mini gauges while preserving the requested single row. */
.exec-corporate-panel {
  container-type: inline-size;
}

@container (max-width: 560px) {
  .exec-corporate-gauges {
    gap: var(--space-2);
  }

  .exec-corporate-panel .kpi-gauge-header {
    font-size: 14px;
    padding: 6px 4px;
  }

  .exec-corporate-panel .kpi-gauge-body {
    padding: 2px;
  }

  .exec-corporate-panel #exec-atsg-gauge,
  .exec-corporate-panel #exec-atpsg-gauge,
  .exec-corporate-panel #exec-rws-gauge {
    height: 126px !important;
  }
}

@media (max-width: 760px) {
  .exec-summary-grid,
  .exec-primary-grid,
  .exec-services-grid,
  .exec-detail-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Stat number tile (large KPI number) ────────────────── */
.stat-tile {
  background: var(--card-bg);
  border: 2px solid var(--kpi-border);
  border-radius: 8px;
  padding: 12px 16px;
  text-align: center;
}

.stat-tile-value {
  font-family: var(--font-family-heading);
  font-weight: 700;
  font-size: 36px;
  color: #1a1a1a;
  line-height: 1;
}

.stat-tile-label {
  font-size: var(--font-label-sm);
  color: #64748b;
  font-weight: 600;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.stat-tile.blue  { border-color: var(--gauge-main);     }
.stat-tile.green { border-color: var(--status-complete); }
.stat-tile.red   { border-color: var(--status-not-start);}
.stat-tile.orange{ border-color: var(--status-progress); }

.stat-tile.blue  .stat-tile-value { color: var(--gauge-main);     }
.stat-tile.green .stat-tile-value { color: var(--status-complete); }
.stat-tile.red   .stat-tile-value { color: var(--status-not-start);}
.stat-tile.orange .stat-tile-value{ color: var(--status-progress); }

@media (max-width: 1200px) {
  .company-header-card {
    grid-template-columns: 1fr;
  }

  .toyota-logo {
    border-right: 0;
    border-bottom: 1px solid #d5d5d5;
    font-size: 42px;
    padding: 10px 0;
  }

  .company-title {
    font-size: 20px;
  }

  .company-btn {
    font-size: 14px;
    padding: 12px 4px;
  }

  .progress-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .priority-label {
    font-size: 14px;
  }

  .progress-title {
    font-size: 24px;
    margin: 0;
  }

  .progress-sub-title {
    font-size: 22px;
  }

  .priority-radar-grid {
    grid-template-columns: 1fr;
  }

  .category-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .category-title {
    font-size: 24px;
  }

  .category-filter-wrap {
    width: 100%;
  }

  .category-filter-item {
    flex: 1;
    min-width: 0;
  }

  .category-filter-label {
    font-size: 13px;
  }

  .high-priority-title {
    font-size: 24px;
  }

  .middle-priority-title {
    font-size: 24px;
  }

  .low-priority-title {
    font-size: 24px;
  }
}

/* ── Mobile: single column ──────────────────────────────── */
@media (max-width: 700px) {
  .overall-grid,
  .overall-title-strip {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .overall-tile-title {
    text-align: left;
    padding-left: 4px;
    font-size: 12px;
  }

  .two-col,
  .two-col-left-wide,
  .three-col,
  .four-col {
    grid-template-columns: 1fr;
  }
}

/* ── CSIRT page grids ──────────────────────────── */
.csirt-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-end;
}

.csirt-filter-field {
  display: flex;
  flex: 1 1 145px;
  flex-direction: column;
  gap: 3px;
  min-width: 145px;
}

.csirt-filter-field > .date-picker-with-icon,
.csirt-filter-field .DateInput,
.csirt-filter-field .DateInput_input {
  width: 100%;
}

.csirt-report-panel {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  min-width: 0;
}

.csirt-summary-grid {
  gap: var(--space-5);
  margin-bottom: var(--space-3);
}

.csirt-chart-filter-row {
  align-items: center;
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.csirt-detail-filter-title {
  color: var(--banner-bg);
  font-family: var(--font-family-heading);
  font-size: var(--font-label-lg);
  font-weight: 700;
  margin-bottom: var(--space-2);
}

.csirt-detail-filter-grid {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  margin-bottom: var(--space-4);
  padding: var(--space-3);
}

.csirt-detail-filter-field {
  min-width: 0;
}

.csirt-detail-filter-label {
  display: block;
  font-family: var(--font-family-base);
  font-size: var(--font-label-sm);
  font-weight: 600;
  margin-bottom: var(--space-1);
}

.csirt-detail-filter-dropdown .Select-control {
  border-color: var(--card-border);
  border-radius: 4px;
}

@media (max-width: 1100px) {
  .csirt-detail-filter-grid {
    grid-template-columns: repeat(3, minmax(150px, 1fr));
  }
}

@media (max-width: 700px) {
  .csirt-detail-filter-grid {
    grid-template-columns: repeat(2, minmax(140px, 1fr));
  }
}

.csirt-summary-flow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: var(--space-3);
}

.csirt-summary-down-arrow {
  background: var(--section-header-bg);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  height: 44px;
  justify-self: center;
  width: 34%;
}

.csirt-alert-kpi {
  align-items: center;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  color: var(--banner-bg);
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  min-width: 80px;
  padding: var(--space-4) var(--space-3);
  text-align: center;
}

.csirt-alert-kpi > :first-child {
  font-size: var(--font-title-xl) !important;
  line-height: 1;
}

.csirt-alert-kpi > :last-child {
  font-size: var(--font-label-md) !important;
  font-weight: 700;
  margin-top: var(--space-2);
}

.csirt-area-panel {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  flex: 1;
  margin-bottom: 0;
  min-width: 320px;
  padding: var(--space-2);
}

.csirt-area-arrow {
  align-self: center;
  background: var(--brand-red);
  clip-path: polygon(0 0, 56% 0, 100% 50%, 56% 100%, 0 100%, 40% 50%);
  flex: 0 0 40px;
  height: 72px;
  margin: 0 calc(var(--space-1) * -1);
}

@media (max-width: 900px) {
  .csirt-area-arrow,
  .csirt-summary-flow {
    display: none;
  }
}

/* ── VA summary cards ───────────────────────────────────────────────────── */
.va-totals-row {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--space-3);
}

.va-summary-card {
  min-width: 0;
}

.va-summary-title {
  color: var(--banner-bg);
  font-family: var(--font-family-heading);
  font-size: var(--font-title-sm);
  font-weight: 700;
  margin: 0 0 var(--space-4);
}

.va-summary-total,
.va-summary-category {
  align-items: center;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.va-summary-total {
  min-height: 170px;
  padding: var(--space-5);
}

.va-summary-total-value {
  color: var(--banner-bg);
  font-family: var(--font-family-heading);
  font-size: var(--font-title-xl);
  font-weight: 700;
  line-height: 1;
}

.va-summary-total-label {
  color: var(--status-na-text);
  font-size: var(--font-label-md);
  margin-top: var(--space-3);
}

.va-summary-breakdown {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--space-3);
}

.va-summary-category {
  min-height: 150px;
  padding: var(--space-3);
}

.va-summary-category-value {
  color: var(--banner-bg);
  font-family: var(--font-family-heading);
  font-size: var(--font-title-lg);
  font-weight: 700;
  line-height: 1;
}

.va-summary-category-label {
  color: var(--status-na-text);
  font-size: var(--font-label-sm);
  margin-top: var(--space-2);
}

.va-summary-card--critical .va-summary-total,
.va-summary-card--critical .va-summary-category {
  background: var(--status-not-start);
  border-color: var(--status-not-start);
}

.va-summary-card--high .va-summary-total,
.va-summary-card--high .va-summary-category {
  background: var(--status-progress);
  border-color: var(--status-progress);
}

.va-summary-card--critical .va-summary-total-value,
.va-summary-card--critical .va-summary-total-label,
.va-summary-card--critical .va-summary-category-value,
.va-summary-card--critical .va-summary-category-label,
.va-summary-card--high .va-summary-total-value,
.va-summary-card--high .va-summary-total-label,
.va-summary-card--high .va-summary-category-value,
.va-summary-card--high .va-summary-category-label {
  color: var(--banner-text);
}

@media (max-width: 1100px) {
  .va-totals-row {
    grid-template-columns: 1fr;
  }
}

/* ── Overall dashboard: CSIRT summary ───────────────────────────────────── */
.overall-csirt-grid {
  align-items: stretch;
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 2fr 1fr;
  margin-top: var(--space-2);
}

.overall-csirt-card,
.overall-critical-card {
  min-width: 0;
}

.overall-csirt-card-header {
  background: var(--section-header-bg);
  border-radius: var(--card-radius) var(--card-radius) 0 0;
  color: var(--section-header-text);
  font-family: var(--font-family-heading);
  font-size: var(--font-label-lg);
  font-weight: 700;
  margin: calc(var(--space-3) * -1) calc(var(--space-4) * -1) var(--space-4);
  padding: var(--space-3) var(--space-4);
  text-align: center;
  text-transform: uppercase;
}

.overall-csirt-toolbar {
  align-items: start;
  display: flex;
  gap: var(--space-4);
  justify-content: space-between;
}

.overall-incident-filter {
  flex: 0 0 auto;
}

.overall-incident-label {
  font-family: var(--font-family-heading);
  font-size: var(--font-label-md);
  font-weight: 700;
  margin-bottom: var(--space-2);
}

.overall-incident-dates {
  display: flex;
  gap: var(--space-2);
}

.overall-csirt-chart-title {
  flex: 1;
  min-width: 0;
  text-align: center;
}

.overall-csirt-chart-title > * {
  margin: 0 !important;
}

.overall-csirt-summary {
  margin-top: var(--space-2);
}

.overall-csirt-main {
  align-items: center;
  display: grid;
  grid-template-columns: minmax(150px, 0.55fr) 52px minmax(300px, 1fr);
  min-width: 0;
}

.overall-alert-kpi {
  padding: var(--space-3);
  text-align: center;
}

.overall-alert-kpi-value {
  color: var(--banner-bg);
  font-family: var(--font-family-heading);
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
}

.overall-alert-kpi-label {
  color: var(--status-na-text);
  font-size: var(--font-label-md);
  line-height: 1.35;
  margin: var(--space-2) auto 0;
  max-width: 190px;
}

.overall-csirt-arrow {
  background: var(--section-header-bg);
  clip-path: polygon(0 0, 55% 0, 100% 50%, 55% 100%, 0 100%, 38% 50%);
  height: 62px;
  justify-self: center;
  width: 52px;
}

.overall-csirt-donut {
  height: 300px;
  min-width: 0;
  width: 100%;
}

.overall-supply-chain-footer {
  align-items: baseline;
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-2);
  padding: 0 var(--space-2) var(--space-2);
}

.overall-supply-chain-value {
  color: var(--banner-bg);
  font-family: var(--font-family-heading);
  font-size: var(--font-title-xl);
  font-weight: 700;
  line-height: 1;
}

.overall-supply-chain-label {
  color: var(--banner-bg);
  font-size: var(--font-label-lg);
  font-weight: 700;
}

@media (max-width: 1100px) {
  .overall-csirt-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .overall-csirt-toolbar,
  .overall-supply-chain-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .overall-csirt-main {
    grid-template-columns: 1fr;
  }

  .overall-csirt-arrow {
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    height: 36px;
    width: 96px;
  }

  .overall-csirt-donut {
    height: 280px;
  }
}

.va-progress-card {
  border-radius: var(--card-radius);
  padding: var(--space-3);
}

.va-progress-card--open {
  background: var(--status-not-start);
}

.va-progress-card--completed {
  background: var(--status-complete);
}

.va-progress-card-title {
  color: var(--banner-text);
  font-family: var(--font-family-heading);
  font-size: var(--font-title-sm);
  font-weight: 700;
  margin-bottom: var(--space-3);
  text-align: center;
}

.va-progress-card-body {
  align-items: stretch;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  display: flex;
  min-height: 250px;
}

.va-progress-gauge {
  height: 250px;
  width: 58%;
}

.va-progress-breakdown {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.va-progress-breakdown-row {
  align-items: center;
  border-bottom: 1px solid var(--card-border);
  color: var(--banner-bg);
  display: flex;
  flex: 1;
  font-size: var(--font-label-md);
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
}

.va-progress-breakdown-row:last-child {
  border-bottom: 0;
}

.va-progress-breakdown-row > :last-child {
  font-family: var(--font-family-heading);
  font-size: var(--font-title-sm);
  font-weight: 700;
}

@media (max-width: 700px) {
  .va-progress-card-body {
    flex-direction: column;
  }

  .va-progress-gauge {
    width: 100%;
  }
}

.csirt-main-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.csirt-side-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.csirt-progress-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 8px;
}

@media (max-width: 1100px) {
  .csirt-main-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .csirt-progress-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 700px) {
  .csirt-side-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 500px) {
  .csirt-progress-grid {
    grid-template-columns: 1fr;
  }
}