/* Service Operations Hub and every workflow tab share the portal workspace system. */
.service-stats-page {
  --stats-navy: var(--sh-ink);
  --stats-teal: var(--sh-forest);
  --stats-green: #168b70;
  --stats-blue: #3b7fa2;
  --stats-amber: #c9861a;
  --stats-red: var(--sh-red, #c83f5c);
  --stats-purple: #755bc6;
  --stats-line: var(--sh-line);
  --stats-muted: var(--sh-muted);
  display: grid;
  align-content: start;
  gap: 14px;
  width: 100%;
  min-width: 0;
  min-height: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  color: var(--sh-ink);
  background: transparent;
  font: 400 14px/1.45 var(--sh-font);
}

.service-stats-page *,
.service-stats-page *::before,
.service-stats-page *::after { box-sizing: border-box; }
.service-stats-page :is(button, input, select) { font: inherit; }
.service-stats-page :is(button, input, select, [tabindex]):focus-visible { outline: 2px solid var(--sh-focus); outline-offset: 3px; }

.service-stats-page .service-stats-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
}
.service-stats-page .service-stats-header .eyebrow { display: none; }
.service-stats-page .service-stats-header h1 { margin: 0; color: var(--sh-ink); font-size: 28px; font-weight: 600; line-height: 1.2; letter-spacing: -.035em; }
.service-stats-page .service-stats-header p { margin: 5px 0 0; color: var(--sh-muted); font-size: 13px; line-height: 1.5; }
.service-stats-page .service-stats-header-actions { display: flex; align-items: center; gap: 8px; }

.service-stats-page .service-stats-period-switch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background: rgba(237, 248, 250, .7);
  border: 1px solid var(--sh-line);
  border-radius: 10px;
}
.service-stats-page .service-stats-period-switch button { min-height: 34px; padding: 7px 12px; color: var(--sh-muted); background: transparent; border: 0; border-radius: 7px; box-shadow: none; font-size: 12px; font-weight: 500; }
.service-stats-page .service-stats-period-switch button:hover { color: var(--sh-forest); background: var(--sh-hover); }
.service-stats-page .service-stats-period-switch button.is-active { color: var(--sh-forest); background: var(--sh-surface); box-shadow: 0 1px 2px rgba(32, 59, 32, .06); }
.service-stats-page .service-stats-refresh { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 8px 12px; color: var(--sh-forest); background: rgba(255, 255, 255, .62); border: 1px solid rgba(255, 255, 255, .8); border-radius: 10px; box-shadow: none; font-size: 13px; font-weight: 500; }
.service-stats-page .service-stats-refresh:hover { color: #104a35; background: var(--sh-hover); border-color: rgba(255, 255, 255, .92); }

.service-stats-page .service-stats-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  margin: 0;
  padding: 5px;
  overflow-x: auto;
  background: rgba(255, 255, 255, .46);
  border: 1px solid rgba(255, 255, 255, .78);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(54, 87, 108, .035);
  scrollbar-width: thin;
  backdrop-filter: blur(16px) saturate(118%);
}
.service-stats-page .service-stats-tabs button { display: inline-flex; flex: 1 0 150px; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 8px 12px; color: var(--sh-muted); background: transparent; border: 1px solid transparent; border-radius: 9px; box-shadow: none; font-size: 13px; font-weight: 500; white-space: nowrap; }
.service-stats-page .service-stats-tabs button:hover { color: var(--sh-forest); background: var(--sh-hover); }
.service-stats-page .service-stats-tabs button.is-active { color: var(--sh-forest); background: var(--sh-selected); border-color: #c5dfd8; box-shadow: none; }
.service-stats-page .service-stats-tabs svg { width: 18px; height: 18px; }
.service-stats-page .service-stats-tabs .service-hub-custom-icon { width: 26px; height: 26px; object-fit: contain; }

.service-stats-page .service-stats-module-view { min-width: 0; animation: none; }

.service-stats-page .service-stats-metrics { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: 0 0 14px; }
.service-stats-page .service-stats-metrics--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.service-stats-page .service-stats-metrics--five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.service-stats-page .service-stats-metric { --metric-wash: rgba(218, 239, 235, .72); position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 12px; min-width: 0; min-height: 98px; padding: 12px 18px 12px 14px; overflow: hidden; color: var(--sh-ink); text-align: left; background: linear-gradient(118deg, rgba(255, 255, 255, .82), var(--metric-wash)); border: 1px solid rgba(255, 255, 255, .9); border-radius: 17px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72), 0 7px 20px rgba(47, 83, 101, .055); transform: none; }
.service-stats-page .service-stats-metric--red { --metric-wash: rgba(245, 222, 228, .78); }
.service-stats-page .service-stats-metric--amber,
.service-stats-page .service-stats-metric--orange { --metric-wash: rgba(255, 240, 209, .82); }
.service-stats-page .service-stats-metric--blue { --metric-wash: rgba(222, 237, 252, .84); }
.service-stats-page .service-stats-metric--purple { --metric-wash: rgba(231, 226, 250, .8); }
.service-stats-page .service-stats-metric--green { --metric-wash: rgba(221, 242, 235, .82); }
.service-stats-page .service-stats-metric::after { display: none; }
.service-stats-page button.service-stats-metric { cursor: pointer; transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease; }
.service-stats-page button.service-stats-metric:hover { z-index: 1; background: linear-gradient(118deg, rgba(255, 255, 255, .94), var(--metric-wash)); border-color: rgba(93, 155, 137, .38); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .86), 0 10px 24px rgba(47, 83, 101, .1); transform: translateY(-2px); }
.service-stats-page .service-stats-metric-icon { display: grid; place-items: center; width: 52px; height: 52px; color: var(--metric, var(--sh-forest)); background: transparent; border: 0; border-radius: 12px; box-shadow: none; }
.service-stats-page .service-hub-action-icon { display: grid; place-items: center; width: 38px; height: 38px; color: var(--metric, var(--sh-forest)); background: rgba(237, 248, 250, .78); border: 1px solid rgba(255, 255, 255, .9); border-radius: 10px; box-shadow: none; }
.service-stats-page .service-stats-metric-icon svg { width: 19px; height: 19px; }
.service-stats-page .service-stats-metric-art { display: block; width: 52px; height: 52px; object-fit: contain; filter: drop-shadow(0 4px 5px rgba(22, 69, 83, .12)); }
.service-stats-page .service-stats-metric small { color: var(--sh-muted); font-size: 12px; font-weight: 500; }
.service-stats-page .service-stats-metric strong { display: block; margin-top: 2px; color: var(--sh-ink); font-size: 28px; font-weight: 500; line-height: 1.04; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.service-stats-page .service-stats-metric p { margin: 4px 0 0; color: var(--sh-muted); font-size: 11px; line-height: 1.3; }
.service-stats-page .service-hub-action-tile { grid-template-columns: 52px minmax(0, 1fr); min-height: 98px; padding-right: 34px; }
.service-stats-page .service-hub-action-tile .service-stats-metric-icon { width: 52px; height: 52px; }
.service-stats-page .service-hub-action-tile .service-hub-custom-icon { width: 48px; height: 48px; }
.service-stats-page .service-hub-tile-arrow,
.service-stats-page .service-stats-filter-action { position: absolute; right: 12px; bottom: 11px; display: grid; place-items: center; width: 18px; height: 18px; color: var(--sh-forest); }
.service-stats-page .service-stats-install-filter.is-active { border-color: rgba(9, 137, 94, .44); box-shadow: inset 0 0 0 1px rgba(9, 137, 94, .22), 0 8px 20px rgba(47, 83, 101, .08); }

.service-stats-page :is(.service-stats-panel, .weekly-fault-card, .weekly-fault-priority-table) { min-width: 0; overflow: hidden; background: rgba(255, 255, 255, .58); border: 1px solid rgba(255, 255, 255, .82); border-radius: var(--sh-radius); box-shadow: none; backdrop-filter: blur(14px) saturate(115%); }
.service-stats-page :is(.service-stats-panel, .weekly-fault-card, .weekly-fault-priority-table) > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 54px; padding: 12px 15px; background: rgba(248, 252, 255, .42); border-bottom: 1px solid var(--sh-line); }
.service-stats-page :is(.service-stats-panel, .weekly-fault-card, .weekly-fault-priority-table) > header span { color: var(--sh-forest); font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.service-stats-page :is(.service-stats-panel, .weekly-fault-card, .weekly-fault-priority-table) > header :is(h2, h3) { margin: 2px 0 0; color: var(--sh-ink); font-weight: 600; letter-spacing: -.02em; }
.service-stats-page .service-stats-panel > header h2 { font-size: 17px; }
.service-stats-page .weekly-fault-card > header h3,
.service-stats-page .weekly-fault-priority-table > header h3 { font-size: 15px; }
.service-stats-page :is(.service-stats-panel, .weekly-fault-card) > header > b { display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 7px; color: var(--sh-forest); background: var(--sh-selected); border: 0; border-radius: 7px; font-size: 12px; }

.service-stats-page .service-hub-overview-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(290px, .7fr); gap: 14px; }
.service-stats-page :is(.service-hub-action-panel, .service-hub-pulse-panel) { min-height: 0; }
.service-stats-page .service-hub-action-count { display: inline-grid; place-items: center; min-width: 30px; height: 28px; padding: 0 8px; color: #8a5a08; background: #fff5e5; border: 1px solid #efdcb5; border-radius: 7px; font-size: 12px; font-weight: 600; }
.service-stats-page .service-hub-action-list { max-height: none; overflow: visible; }
.service-stats-page .service-hub-action-row { display: grid; grid-template-columns: 38px minmax(180px, 1fr) minmax(80px, auto) 92px 16px; align-items: center; gap: 11px; width: 100%; min-height: 68px; padding: 10px 14px; color: var(--sh-ink); text-align: left; background: transparent; border: 0; border-bottom: 1px solid var(--sh-line); }
.service-stats-page .service-hub-action-row:hover { background: var(--sh-hover); }
.service-stats-page .service-hub-action-copy strong { color: var(--sh-ink); font-size: 13px; font-weight: 600; }
.service-stats-page .service-hub-action-copy small { margin-top: 3px; color: var(--sh-muted); font-size: 11px; font-weight: 400; }
.service-stats-page .service-hub-action-state { justify-self: start; padding: 4px 7px; color: var(--sh-muted); background: rgba(240, 242, 237, .86); border: 0; border-radius: 6px; font-size: 11px; font-weight: 500; }
.service-stats-page .service-hub-action-row time { color: var(--sh-muted); font-size: 11px; font-weight: 400; }
.service-stats-page .service-hub-action-row > svg { color: #8296a5; }
.service-stats-page .service-hub-pulse-list { padding: 4px 14px 10px; }
.service-stats-page .service-hub-pulse-list button { grid-template-columns: 38px minmax(0, 1fr) auto; min-height: 72px; padding: 9px 3px; color: var(--sh-ink); border-bottom: 1px solid var(--sh-line); }
.service-stats-page .service-hub-pulse-list button:hover { background: var(--sh-hover); }
.service-stats-page .service-hub-pulse-list button > span { width: 36px; height: 36px; color: var(--sh-forest); background: rgba(237, 248, 250, .75); border: 1px solid rgba(255, 255, 255, .85); border-radius: 9px; }
.service-stats-page .service-hub-pulse-list div strong { color: var(--sh-ink); font-size: 13px; font-weight: 600; }
.service-stats-page .service-hub-pulse-list div small,
.service-stats-page .service-hub-pulse-list b small { color: var(--sh-muted); font-size: 11px; font-weight: 400; }
.service-stats-page .service-hub-pulse-list b { color: var(--sh-ink); font-size: 20px; font-weight: 600; }

.service-stats-page .weekly-fault-position { display: grid; gap: 14px; margin: 0; }
.service-stats-page .weekly-fault-operations { overflow: hidden; color: var(--sh-ink); background: rgba(255, 255, 255, .58); border: 1px solid rgba(255, 255, 255, .82); border-radius: var(--sh-radius); box-shadow: none; backdrop-filter: blur(14px) saturate(115%); }
.service-stats-page .weekly-fault-ops-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; padding: 14px 16px; background: rgba(248, 252, 255, .42); border-bottom: 1px solid var(--sh-line); }
.service-stats-page .weekly-fault-ops-heading span,
.service-stats-page .weekly-fault-needs-attention > span { color: var(--sh-forest); font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.service-stats-page .weekly-fault-ops-heading h2 { margin: 2px 0 0; color: var(--sh-ink); font-size: 18px; font-weight: 600; line-height: 1.25; letter-spacing: -.02em; }
.service-stats-page .weekly-fault-ops-heading p { margin: 3px 0 0; color: var(--sh-muted); font-size: 12px; }
.service-stats-page .weekly-fault-ops-heading > button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 7px 11px; color: var(--sh-forest); background: rgba(255, 255, 255, .72); border: 1px solid var(--sh-line); border-radius: 8px; box-shadow: none; font-size: 12px; font-weight: 500; }
.service-stats-page .weekly-fault-ops-heading > button:hover,
.service-stats-page .weekly-fault-ops-heading > button.is-copied { color: #104a35; background: var(--sh-hover); border-color: #c5dfd8; }
.service-stats-page .weekly-fault-operations-body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(400px, .8fr); gap: 16px; padding: 15px; }
.service-stats-page .weekly-fault-operational-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.service-stats-page .weekly-fault-operational-kpis > :is(button, article) { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; min-height: 112px; padding: 12px; color: var(--sh-ink); text-align: left; background: rgba(255, 255, 255, .62); border: 1px solid var(--sh-line); border-radius: 10px; transform: none; }
.service-stats-page .weekly-fault-operational-kpis > button:hover { background: var(--sh-hover); border-color: #c5dfd8; transform: none; }
.service-stats-page .weekly-fault-operational-kpis > :is(button, article).is-actionable { background: rgba(255, 245, 229, .58); border-color: #efdcb5; }
.service-stats-page .weekly-fault-operational-kpis span { color: var(--sh-muted); font-size: 11px; font-weight: 500; letter-spacing: 0; }
.service-stats-page .weekly-fault-operational-kpis strong { margin-top: 5px; color: var(--sh-ink); font-size: 25px; font-weight: 600; line-height: 1.1; letter-spacing: -.025em; }
.service-stats-page .weekly-fault-operational-kpis small { margin-top: 5px; color: var(--sh-muted); font-size: 10px; font-weight: 400; }
.service-stats-page .weekly-fault-operational-kpis small.is-up { color: var(--stats-red); }
.service-stats-page .weekly-fault-operational-kpis small.is-down { color: var(--sh-forest); }
.service-stats-page .weekly-fault-operational-kpis .weekly-fault-trend em { margin-right: 3px; color: inherit; font-size: 16px; font-weight: 600; }
.service-stats-page .weekly-fault-operational-kpis b { margin-top: auto; padding-top: 7px; color: var(--sh-forest); font-size: 10px; font-weight: 500; }
.service-stats-page .weekly-fault-needs-attention { min-width: 0; padding-left: 16px; border-left: 1px solid var(--sh-line); }
.service-stats-page .weekly-fault-needs-attention > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.service-stats-page .weekly-fault-attention-tile { display: grid; grid-template-columns: 30px 1fr; align-content: start; align-items: center; gap: 3px 7px; min-width: 0; min-height: 88px; padding: 9px; color: var(--sh-ink); text-align: left; background: rgba(255, 255, 255, .62); border: 1px solid var(--sh-line); border-radius: 9px; }
.service-stats-page .weekly-fault-attention-tile:hover { background: var(--sh-hover); border-color: #c5dfd8; }
.service-stats-page .weekly-fault-attention-tile > span { display: grid; place-items: center; width: 30px; height: 30px; overflow: hidden; background: rgba(237, 248, 250, .82); border: 1px solid rgba(255, 255, 255, .9); border-radius: 8px; box-shadow: none; }
.service-stats-page .weekly-fault-attention-tile > strong { color: var(--sh-ink); font-size: 19px; font-weight: 600; }
.service-stats-page .weekly-fault-attention-tile > b { color: var(--sh-ink); font-size: 11px; font-weight: 500; }
.service-stats-page .weekly-fault-attention-tile > small { color: var(--sh-forest); font-size: 10px; font-weight: 500; }
.service-stats-page .weekly-service-position--broadband { --service-briefing-accent: #6751c7; --service-briefing-soft: #f0edff; }
.service-stats-page .weekly-service-position--ports { --service-briefing-accent: #c66f18; --service-briefing-soft: #fff2df; }
.service-stats-page .weekly-service-position .weekly-fault-ops-heading { box-shadow: inset 4px 0 var(--service-briefing-accent); }
.service-stats-page .weekly-service-position .weekly-fault-ops-heading span,
.service-stats-page .weekly-service-position .weekly-fault-needs-attention > span,
.service-stats-page .weekly-service-position .weekly-fault-operational-kpis b,
.service-stats-page .weekly-service-position .weekly-fault-attention-tile > small { color: var(--service-briefing-accent); }
.service-stats-page .weekly-service-position .weekly-service-attention-tile > span { color: var(--service-briefing-accent); background: var(--service-briefing-soft); }
.service-stats-page .weekly-service-position .weekly-fault-operational-kpis > article:first-child { border-color: color-mix(in srgb, var(--service-briefing-accent) 24%, var(--sh-line)); }

.service-stats-page .weekly-fault-analytics-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.service-stats-page .weekly-fault-bars { gap: 9px; padding: 13px; }
.service-stats-page .weekly-fault-bars :is(span, strong),
.service-stats-page .weekly-fault-workload > div > button { color: var(--sh-muted); font-size: 11px; font-weight: 500; }
.service-stats-page .weekly-fault-bars i,
.service-stats-page .weekly-fault-workload > div i { background: rgba(115, 143, 166, .12); }
.service-stats-page .weekly-fault-card-link { margin: 8px auto 12px; color: var(--sh-forest); font-size: 11px; font-weight: 500; }
.service-stats-page .weekly-fault-age-body { grid-template-columns: 88px minmax(0, 1fr); padding: 13px 12px 6px; }
.service-stats-page .weekly-fault-age-donut { width: 82px; height: 82px; }
.service-stats-page .weekly-fault-age-donut::after { background: rgba(255, 255, 255, .92); }
.service-stats-page .weekly-fault-age-body > div > button { color: var(--sh-muted); font-size: 10px; }
.service-stats-page .weekly-fault-workload > div { gap: 8px; padding: 13px 12px 6px; }
.service-stats-page .weekly-fault-priority-table > header > button { min-height: 34px; padding: 6px 9px; color: var(--sh-forest); background: rgba(255, 255, 255, .7); border: 1px solid var(--sh-line); border-radius: 7px; font-size: 11px; font-weight: 500; }
.service-stats-page .weekly-fault-table-scroll { overflow-x: auto; scrollbar-width: thin; }
.service-stats-page .weekly-fault-priority-table table { min-width: 1050px; background: transparent; }
.service-stats-page .weekly-fault-priority-table th { padding: 10px 12px; color: var(--sh-muted); background: rgba(248, 252, 255, .4); border-bottom: 1px solid var(--sh-line); font-size: 11px; font-weight: 500; letter-spacing: 0; }
.service-stats-page .weekly-fault-priority-table td { padding: 10px 12px; color: var(--sh-ink); background: rgba(255, 255, 255, .35); border-bottom: 1px solid var(--sh-line); font-size: 12px; }
.service-stats-page .weekly-fault-priority-table tbody tr:hover td { background: var(--sh-hover); }
.service-stats-page .weekly-fault-priority-table td small { color: var(--sh-muted); font-size: 10px; }
.service-stats-page :is(.weekly-fault-priority, .weekly-fault-status) { min-height: 0; padding: 3px 6px; border: 0; border-radius: 5px; font-size: 10px; font-weight: 500; }

/* Shared analytical, provisioning and install tab surfaces. */
.service-stats-page .service-stats-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.service-stats-page .service-stats-panel--wide { grid-column: 1 / -1; }
.service-stats-page .service-stats-panel-body { padding: 16px; }
.service-stats-page .service-stats-period-totals { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.service-stats-page .service-stats-period-totals span { padding: 4px 7px; color: var(--sh-muted); background: rgba(240, 242, 237, .7); border-radius: 6px; font-size: 11px; }
.service-stats-page :is(.service-stats-bars, .service-stats-stage-bars) > div { color: var(--sh-muted); }
.service-stats-page :is(.service-stats-bars, .service-stats-stage-bars) i { background: rgba(115, 143, 166, .12); }
.service-stats-page .service-stats-install-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr); gap: 14px; }
.service-stats-page .service-stats-install-list { max-height: none; overflow: visible; }
.service-stats-page .service-stats-install-row { color: var(--sh-ink); background: transparent; border-bottom: 1px solid var(--sh-line); }
.service-stats-page .service-stats-install-row:hover { background: var(--sh-hover); }
.service-stats-page .service-stats-install-snapshot { background: transparent; border-top: 1px solid var(--sh-line); }
.service-stats-page .service-stats-customer-avatar { color: var(--sh-forest); background: var(--sh-selected); border: 1px solid #c5dfd8; box-shadow: none; }
.service-stats-page .service-stats-team-chip { color: var(--sh-forest); background: var(--sh-selected); border: 0; }
.service-stats-page :is(.service-stats-loading, .service-stats-load-error) { min-height: 260px; color: var(--sh-muted); background: rgba(255, 255, 255, .58); border: 1px solid rgba(255, 255, 255, .82); border-radius: var(--sh-radius); box-shadow: none; }

@media (max-width: 1320px) {
  .service-stats-page .service-stats-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .service-stats-page .service-stats-metrics--four,
  .service-stats-page .service-stats-metrics--five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-stats-page .weekly-fault-operations-body { grid-template-columns: 1fr; }
  .service-stats-page .weekly-fault-needs-attention { padding: 14px 0 0; border-top: 1px solid var(--sh-line); border-left: 0; }
  .service-stats-page .weekly-fault-needs-attention > div { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .service-stats-page .weekly-fault-analytics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .service-stats-page .service-hub-overview-grid,
  .service-stats-page .service-stats-install-grid { grid-template-columns: 1fr; }
  .service-stats-page .service-hub-pulse-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
  .service-stats-page .weekly-fault-operational-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .service-stats-page .service-stats-header { align-items: stretch; flex-direction: column; }
  .service-stats-page .service-stats-header h1 { font-size: 25px; }
  .service-stats-page .service-stats-header-actions { align-items: stretch; flex-direction: column; }
  .service-stats-page .service-stats-period-switch { width: 100%; }
  .service-stats-page .service-stats-period-switch button { flex: 1; }
  .service-stats-page .service-stats-tabs button { flex-basis: 132px; }
  .service-stats-page .service-stats-metrics,
  .service-stats-page .service-stats-metrics--four,
  .service-stats-page .service-stats-metrics--five,
  .service-stats-page .service-stats-panels,
  .service-stats-page .weekly-fault-analytics-grid { grid-template-columns: 1fr; }
  .service-stats-page .service-hub-action-row { grid-template-columns: 38px minmax(0, 1fr) 16px; }
  .service-stats-page .service-hub-action-state,
  .service-stats-page .service-hub-action-row time { display: none; }
  .service-stats-page .service-hub-pulse-list { grid-template-columns: 1fr; }
  .service-stats-page .weekly-fault-ops-heading { align-items: flex-start; flex-direction: column; }
  .service-stats-page .weekly-fault-needs-attention > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 460px) {
  .service-stats-page .weekly-fault-operational-kpis,
  .service-stats-page .weekly-fault-needs-attention > div { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .service-stats-page * { scroll-behavior: auto; transition-duration: 0s; animation-duration: 0s; }
}