/* ── Design Tokens ─────────────────────────────────────────────────────── */
:root {
  --bg:            #f8fafc;
  --surface:       #ffffff;
  --text:          #0f172a;
  --text-muted:    #64748b;
  --border:        #e2e8f0;
  --border-strong: #cbd5e1;
  --primary:       #f59e0b;
  --primary-hover: #d97706;
  --success:       #16a34a;
  --warning:       #f59e0b;
  --danger:        #dc2626;
  --info:          #2563eb;
  --shadow-sm:     0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow:        0 1px 3px rgba(0,0,0,.05), 0 4px 16px rgba(0,0,0,.06);
  --radius:        12px;
  --radius-sm:     8px;
  --font:          "Inter", "Segoe UI", system-ui, sans-serif;
  --sidebar-width: 280px;
  --topbar-height: 56px;
}

html {
  height: 100%;
  font-size: 16px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  height: 100vh;
  margin: 0;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
}

a { color: #286fb4; }
a:hover { color: #d9532d; }

.isg-navbar {
  min-height: 77px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(24, 35, 52, 0.1);
  padding: 0 20px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  z-index: 1030;
}

.isg-navbar-left,
.isg-navbar-right {
  display: flex;
  align-items: center;
}

.isg-navbar-right {
  justify-self: end;
  gap: 12px;
  min-width: 42px;
}

.isg-brand {
  display: inline-flex;
  align-items: center;
  justify-self: center;
  gap: 14px;
  color: #202631;
  font-weight: 800;
  text-decoration: none;
}

.isg-brand:hover {
  color: #202631;
  text-decoration: none;
}

.isg-logo {
  height: 70px;
  width: auto;
  max-width: 260px;
}

.isg-app-title {
  color: #272b35;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.isg-menu-toggle {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 8px;
  background: #f3f4f6;
  color: #272b35;
  cursor: pointer;
  font-size: 1.15rem;
  transition: background-color 0.15s, color 0.15s;
}

.isg-menu-toggle:hover,
.isg-menu-toggle:focus-visible {
  background: #f0643c;
  color: #fff;
  outline: none;
}

.isg-menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease;
  z-index: 1040;
}

.isg-hamburger-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 300px;
  max-width: 85vw;
  height: 100vh;
  background: #fff;
  box-shadow: 4px 0 16px rgba(0, 0, 0, 0.2);
  transform: translateX(-100%);
  transition: transform 0.2s ease;
  z-index: 1050;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 10px 8px 24px;
}

/* ── Navigation section headers (static, non-collapsible) ───── */
.nav-section-header {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9ca3af;
  padding: 16px 12px 4px;
  margin-top: 4px;
  user-select: none;
}
.nav-section-header:first-of-type { padding-top: 4px; margin-top: 0; }

/* ── Collapsible section toggle (clickable section header) ───── */
.nav-section-toggle {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 14px 12px 4px;
  background: transparent;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  text-align: left;
  gap: 6px;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: 4px;
  transition: color 0.15s;
}
.nav-section-toggle:hover { color: #6b7280; }
.nav-section-toggle:first-of-type { padding-top: 4px; margin-top: 0; }

.nav-section-chevron {
  margin-left: auto;
  font-size: 0.55rem;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.nav-section-toggle[aria-expanded="true"] .nav-section-chevron { transform: rotate(90deg); }

/* ── Collapsible section content ──────────────────────────────── */
.nav-section-content {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.25s ease;
}
.nav-section-content.is-open { max-height: 600px; }

/* ── Provider count badge (inside flat nav link) ─────────────── */
.nav-provider-count {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0;
  color: #6b7280;
  background: #f3f4f6;
  padding: 1px 6px;
  border-radius: 10px;
  text-transform: none;
  margin-left: auto;
  flex-shrink: 0;
}

.isg-menu-header {
  padding: 6px 12px 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid #e5e7eb;
  color: #667589;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.isg-menu-link {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 8px;
  padding: 10px 12px;
  color: #272b35;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background 0.15s, color 0.15s;
}

.isg-menu-button {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
}

.isg-menu-link:hover {
  background: #f3f4f6;
  color: #f0643c;
  text-decoration: none;
}

.isg-menu-link-active {
  background: #f0643c;
  color: #fff;
}

.isg-menu-link-active:hover {
  background: #f0643c;
  color: #fff;
}

body.isg-menu-open .isg-menu-overlay {
  opacity: 1;
  visibility: visible;
}

body.isg-menu-open .isg-hamburger-menu {
  transform: translateX(0);
}


.app-shell {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

.app-shell > main {
  min-height: 0;
  overflow: visible;
}

/* Page-level scroll locked for fixed-height grid pages */
.app-shell.overflow-locked {
  overflow: hidden;
}
.app-shell.overflow-locked > main {
  height: 100%;
  overflow: hidden;
}

.footer {
  flex-shrink: 0;
  width: 100%;
  font-size: 0.85em;
  height: 40px;
}

.footer p {
  margin: 0;
}

.operations-page {
  min-height: 0;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.ops-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}

.ops-title-row h1 {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
  color: #1f2937;
}

.ops-subtitle {
  margin: 4px 0 0;
  color: #617084;
  font-size: 0.95rem;
}

.prtg-sync-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.prtg-sync-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  background: #f0643c;
  color: #fff;
  font-weight: 700;
  border-radius: 6px;
  padding: 7px 14px;
}

.prtg-sync-button:hover,
.prtg-sync-button:focus-visible {
  background: #d9532d;
  color: #fff;
}

.prtg-sync-button:disabled {
  opacity: 0.75;
}

.prtg-sync-status {
  min-width: 124px;
  color: #667589;
  font-size: 0.82rem;
  font-weight: 600;
  text-align: right;
}

.prtg-sync-success { color: #247a45; }
.prtg-sync-error { color: #b8322a; }

.ops-clock {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  color: #617084;
  font-size: 0.82rem;
  line-height: 1.25;
  white-space: nowrap;
}

.freshness-widget {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-size: 0.78rem;
  line-height: 1.25;
  white-space: nowrap;
  padding: 0 4px;
  border-radius: 4px;
  transition: background 0.15s;
}
.freshness-widget:hover { background: rgba(255,255,255,0.05); }
.fw-pill { font-size: 0.65rem; margin-right: 3px; }
.ops-clock-now {
  display: block;
  color: #617084;
  font-size: 0.78rem;
  text-align: right;
}
.ops-clock-next {
  display: block;
  color: #617084;
  font-size: 0.72rem;
  line-height: 1.2;
  text-align: right;
}
.ops-clock-next strong {
  color: #202631;
  font-size: 0.9rem;
  font-weight: 800;
}

.critical-section {
  margin: 0 calc(-20px - var(--bs-gutter-x, 0.75rem)) 8px;
  padding: 6px calc(16px + 20px + var(--bs-gutter-x, 0.75rem));
  background: #1e1e1e;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
  transition: background 0.4s, border-color 0.4s;
}

.operations-page > .critical-section:first-child {
  margin-top: -20px;
}

.critical-kpi-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 0;
}

.critical-section .site-kpi-row {
  margin-bottom: 0;
}

.critical-section .critical-kpi-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.critical-section .kpi-card,
.critical-section .site-kpi {
  min-height: 0;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  border-radius: 20px;
  padding: 4px 14px;
  color: #fff;
  box-shadow: none;
  text-shadow: 0 1px 3px rgba(0,0,0,.4);
}

.critical-section .kpi-value,
.critical-section .site-kpi-value { font-size: 1.15rem; font-weight: 700; }
.critical-section .kpi-label,
.critical-section .site-kpi-label { font-size: .67rem; }

.critical-section button.site-kpi {
  border: 0;
  cursor: pointer;
  font: inherit;
  transition: filter 0.15s, transform 0.15s, outline-color 0.15s;
}

.critical-section button.site-kpi:hover,
.critical-section button.site-kpi:focus-visible {
  color: #fff;
  filter: brightness(1.15);
  outline: none;
  transform: translateY(-2px);
}
.critical-section a.site-kpi {
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.15s, transform 0.15s, outline-color 0.15s;
}
.critical-section a.site-kpi:hover,
.critical-section a.site-kpi:focus-visible {
  color: #fff;
  filter: brightness(1.15);
  outline: none;
  transform: translateY(-2px);
}
.refresh-cycle-id-link {
  color: #2563eb;
  font-weight: 800;
  text-decoration: none;
}
.refresh-cycle-id-link:hover {
  color: #d9532d;
  text-decoration: underline;
}
.sites-table tbody tr:hover {
  background: #f8fafc;
}

.critical-section .kpi-pill-filter-active {
  outline: 3px solid #fff;
  outline-offset: 2px;
  filter: brightness(1.15);
}

.critical-section .kpi-value,
.critical-section .site-kpi-value {
  font-size: 1.5rem;
  line-height: 1;
  font-weight: 700;
}

.critical-section .kpi-label,
.critical-section .site-kpi-label {
  margin-top: 0;
  font-size: 0.8rem;
  opacity: 0.9;
}

.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.kpi-card {
  min-height: 78px;
  border-radius: 24px;
  border: 0;
  padding: 14px 16px;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: none;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.55);
}

.kpi-value { font-size: 1.8rem; line-height: 1; font-weight: 700; }
.kpi-label { margin-top: 6px; font-size: 0.82rem; text-transform: uppercase; opacity: 0.9; }
.kpi-ticket { background: #1565C0; }
.kpi-acknowledged { background: cornflowerblue; }
.kpi-awaiting-review { background: blueviolet; }
.kpi-total  { background: #7f8c8d; }

button.kpi-card {
  appearance: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.kpi-card.kpi-filter-active {
  outline: 3px solid rgba(255, 255, 255, 0.75);
  outline-offset: -6px;
}

button.kpi-card:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* ══════════════════════════════════════════════════════════════
   OPERATIONS CENTER KPI COLOR STANDARD
   All KPI pills use these canonical colors regardless of provider.
   ══════════════════════════════════════════════════════════════ */

/* ── Canonical classes (use these in new pages) ─────────────── */
.ops-kpi-inventory { background: #2563EB; color: #fff; }  /* Blue   — Sites/Devices/Sensors */
.ops-kpi-healthy   { background: #22C55E; color: #fff; }  /* Green  — Online/Matched/Healthy */
.ops-kpi-warning   { background: #EAB308; color: #111827; } /* Yellow — Warning/Minor issues */
.ops-kpi-attention { background: #F97316; color: #fff; }  /* Orange — Unmatched/Attention */
.ops-kpi-negative  { background: #DC2626; color: #fff; }  /* Red    — Offline/Down */
.ops-kpi-critical  { background: #991B1B; color: #fff; }  /* DkRed  — Critical failures */
.ops-kpi-neutral   { background: #6B7280; color: #fff; }  /* Gray   — Paused/Archived */

/* ── Legacy class aliases — updated to match standard ───────── */
.site-kpi-total      { background: #2563EB; }              /* Inventory → Blue */
.site-kpi-muted      { background: #6B7280; }              /* Neutral   → Gray */
.unifi-kpi-matched   { background: #22C55E; }              /* Healthy   → Green */
.unifi-kpi-unmatched { background: #F97316; }              /* Attention → Orange */
.prtg-kpi-matched    { background: #22C55E; }              /* Healthy   → Green */
.prtg-kpi-unmatched  { background: #F97316; }              /* Attention → Orange */
.prtg-kpi-down       { background: #DC2626; }              /* Negative  → Red */
.kpi-up              { background: #22C55E; }              /* Healthy   → Green */
.kpi-down            { background: #ED9E3A; }              /* Down      → Orange */
.kpi-critical        { background: #991B1B; color: #fff; }    /* Critical  → DarkRed */
.kpi-paused          { background: #6B7280; }              /* Neutral   → Gray  (was Blue  — fixed) */
.kpi-simulated       { background: #7c3aed; color: #fff; } /* Simulated → Purple */

/* ── Override .critical-section specificity ─────────────────── */
.critical-section .site-kpi-total      { background: #2563EB; }   /* was gray — fixed */
.critical-section .site-kpi-muted      { background: #6B7280; }
.critical-section .unifi-kpi-matched   { background: #22C55E; }
.critical-section .unifi-kpi-unmatched { background: #F97316; }
.critical-section .prtg-kpi-matched    { background: #22C55E; }
.critical-section .prtg-kpi-unmatched  { background: #F97316; }
.critical-section .prtg-kpi-down       { background: #DC2626; }
.critical-section .ops-kpi-critical    { background: #991B1B; }
.critical-section .kpi-down            { background: #ED9E3A; }
.critical-section .kpi-critical        { background: #991B1B; color: #fff; }
.critical-section .kpi-paused          { background: #6B7280; }

@keyframes criticalPulse {
  0%, 100% {
    background-color: #2a0000;
    border-bottom-color: #dc2626;
  }
  50% {
    background-color: #5f0505;
    border-bottom-color: #ff7a59;
  }
}

.critical-section-alerting {
  animation: criticalPulse 1.4s ease-in-out infinite;
}

.critical-alert-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  color: #fff;
}

.critical-alert-row[hidden],
.critical-alert-row:empty {
  display: none !important;
}

.critical-alert-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #ff9f8f;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.critical-alert-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  font-size: 0.68rem;
  line-height: 1;
}

.critical-alert-chips {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.critical-alert-chip {
  display: inline-flex;
  align-items: center;
  max-width: 360px;
  min-height: 21px;
  border: 0;
  border-radius: 4px;
  padding: 3px 10px;
  background: #dc2626;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16), 0 2px 8px rgba(220, 38, 38, 0.35);
}

.critical-alert-chip:hover,
.critical-alert-chip:focus-visible {
  background: #ef4444;
  outline: 2px solid rgba(255, 255, 255, 0.72);
  outline-offset: 2px;
}

.provider-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.provider-card {
  display: flex;
  flex-direction: column;
  min-height: 146px;
  gap: 10px;
  background: #fff;
  color: #263241;
  border: 1px solid #dfe5ec;
  border-radius: 8px;
  padding: 14px;
  text-decoration: none;
  box-shadow: 0 1px 4px rgba(24, 35, 52, 0.07);
}

.provider-card:hover {
  color: #263241;
  border-color: #f0643c;
  box-shadow: 0 3px 12px rgba(24, 35, 52, 0.12);
}

.provider-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-weight: 700;
}

.provider-status {
  background: #e8f2ec;
  color: #247a45;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 0.75rem;
  font-weight: 700;
}

.provider-card p {
  margin: 0;
  color: #667589;
  font-size: 0.88rem;
  flex: 1;
}

.provider-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  color: #617084;
  font-size: 0.82rem;
}

.issues-panel {
  background: #fff;
  border: 1px solid #dfe5ec;
  border-radius: 8px;
  overflow: hidden;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid #dfe5ec;
}

.panel-header h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}

.issues-table { margin: 0; }
.issues-table th {
  font-size: 0.75rem;
  text-transform: uppercase;
  color: #667589;
  background: #f8fafc;
  white-space: nowrap;
}

.empty-state {
  text-align: center;
  color: #7a8797;
  padding: 34px 12px !important;
}

.placeholder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.placeholder-card {
  min-height: 96px;
  background: #fff;
  border: 1px solid #dfe5ec;
  border-radius: 8px;
  padding: 16px;
  display: flex;
  align-items: center;
  color: #263241;
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(24, 35, 52, 0.07);
}

.site-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.site-kpi {
  min-height: 72px;
  border-radius: 8px;
  padding: 14px 16px;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(24, 35, 52, 0.12);
}

.critical-section .site-kpi {
  box-shadow: none;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.55);
}

.site-kpi-value {
  font-size: 1.8rem;
  line-height: 1;
  font-weight: 700;
}

.site-kpi-label {
  margin-top: 6px;
  font-size: 0.78rem;
  text-transform: uppercase;
  opacity: 0.9;
}

.sites-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.sites-search-input {
  max-width: 320px;
  border-color: #cfd7e2;
}

.sites-toolbar-count,
.sites-card-footer {
  color: #667589;
  font-size: 0.84rem;
}

.sites-card {
  background: #fff;
  border: 1px solid #dfe5ec;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(24, 35, 52, 0.07);
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.sites-table-scroll {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
}

.sites-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  color: #667589;
  background: #f8fafc;
  border-bottom: 1px solid #dfe5ec;
  font-size: 0.75rem;
  text-transform: uppercase;
  white-space: nowrap;
}

.sites-table td {
  vertical-align: middle;
}

.site-index-column {
  width: 64px;
  color: #7a8797;
  text-align: right;
}

.site-name-cell {
  color: #263241;
}

.site-status-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 9px;
  border-radius: 50%;
  background: #336fa6;
  box-shadow: 0 0 0 3px rgba(51, 111, 166, 0.12);
}

.site-id-column {
  width: 310px;
  color: #667589;
}

.site-id-column code {
  color: #4c5b6d;
  font-size: 0.78rem;
}

.site-sort-button {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-transform: inherit;
}

.site-sort-button:hover {
  color: #286fb4;
}

.site-sort-indicator::after {
  content: "▲";
  margin-left: 5px;
  font-size: 0.62rem;
}

.site-sort-button.sort-desc .site-sort-indicator::after {
  content: "▼";
}

.sites-card-footer {
  padding: 10px 14px;
  border-top: 1px solid #dfe5ec;
  background: #fbfcfe;
}

/* ── PRTG Sites Review ─────────────────────────────────────── */

/* prtg-kpi-* colors now defined in the KPI standard block above */

.prtg-sites-table-scroll {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
}

.prtg-sitename-column { white-space: nowrap; }
.prtg-sitename-column .form-select { width: 100%; }

.prtg-site-select {
  border-color: #cfd7e2;
  font-size: 0.82rem;
  color: #263241;
}

.prtg-save-feedback {
  display: inline-block;
  margin-top: 4px;
  font-size: 0.78rem;
  font-weight: 600;
}

.prtg-feedback-saved { color: #247a45; }
.prtg-feedback-error { color: #b8322a; }
.prtg-device-column { width: 200px; color: #4c5b6d; font-size: 0.88rem; }
.prtg-host-column { width: 160px; }
.prtg-status-column { width: 100px; white-space: nowrap; }
.prtg-host-code { color: #4c5b6d; font-size: 0.78rem; }

.prtg-match-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 0.78rem;
  font-weight: 600;
}

.prtg-match-yes { background: #e8f2ec; color: #247a45; }
.prtg-match-no  { background: #fdecea; color: #b8322a; }

/* Status badges — keyed to PRTG StatusRaw values */
.prtg-status {
  display: inline-block;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 0.76rem;
  font-weight: 600;
}

.prtg-status-3  { background: #e8f2ec; color: #247a45; }   /* Up */
.prtg-status-4  { background: #fef3cd; color: #856404; }   /* Warning */
.prtg-status-5  { background: #fdecea; color: #b8322a; }   /* Down */
.prtg-status-7  { background: #e8edf3; color: #556070; }   /* Paused */
.prtg-status-0,
.prtg-status-8  { background: #f0f2f5; color: #7a8797; }   /* Unknown/None */
.prtg-status-inactive { background: #f0f2f5; color: #9aa4b0; font-style: italic; }

/* Status dot colors */
.prtg-dot-3  { background: #247a45; box-shadow: 0 0 0 3px rgba(36, 122, 69, 0.15); }
.prtg-dot-4  { background: #d4920a; box-shadow: 0 0 0 3px rgba(212, 146, 10, 0.15); }
.prtg-dot-5  { background: #b8322a; box-shadow: 0 0 0 3px rgba(184, 50, 42, 0.15); }
.prtg-dot-7  { background: #6b7a8d; box-shadow: 0 0 0 3px rgba(107, 122, 141, 0.15); }
.prtg-dot-0,
.prtg-dot-8  { background: #aab3be; box-shadow: 0 0 0 3px rgba(170, 179, 190, 0.15); }


.prtg-row-inactive { opacity: 0.5; }
.prtg-row-probe { background: #eff6ff; }
.prtg-row-probe td { color: #1e4d7a; }

.prtg-probe-icon {
  color: #3a5068;
  margin-right: 7px;
  font-size: 0.95rem;
  vertical-align: middle;
  opacity: 0.85;
}

.prtg-site-link { color: inherit; text-decoration: none; }
.prtg-site-link:hover { color: #286fb4; text-decoration: underline; }

/* ── End PRTG Sites Review ─────────────────────────────────── */

@media (max-width: 900px) {
  .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ops-title-row { flex-direction: column; }
  .ops-clock { align-items: flex-start; white-space: normal; }
  .sites-toolbar { align-items: stretch; flex-direction: column; }
  .sites-search-input { max-width: none; }
  .site-id-column { display: none; }
  .isg-app-title { display: none; }
  .isg-logo { height: 52px; }
  .dashboard-main { flex-direction: column; }
}

@media (max-width: 520px) {
  .isg-navbar { min-height: 62px; padding: 4px 10px; }
  .isg-logo { height: 34px; }
  .isg-menu-toggle { width: 38px; height: 38px; }
  .operations-page { padding: 12px; }
  .critical-section {
    margin-top: 0;
    margin-left: -12px;
    margin-right: -12px;
    padding-left: 12px;
    padding-right: 12px;
  }
  .operations-page > .critical-section:first-child { margin-top: -12px; }
  /* Keep 2 columns on phones — 1 column wastes too much space */
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
  .site-kpi-row { grid-template-columns: repeat(2, 1fr); }
  .site-index-column { width: 42px; }
  /* Hide the verbose clock text; keep just the freshness dot */
  .ops-clock-now, .ops-clock-next { display: none; }
  /* Shrink search input so it doesn't overflow the navbar */
  .noc-search-open .noc-search-nav-input { width: 140px; }
  /* Full-width ops pages on phones */
  .ops-full-page { padding: 6px 8px 0; }
  .ops-full-page .critical-section { margin-left: -8px; margin-right: -8px; padding-left: 8px; padding-right: 8px; }
}

.site-sort-button .site-sort-indicator::after {
  content: "";
}

.site-sort-button.sort-active {
  color: #286fb4;
}

.site-sort-button.sort-active .site-sort-indicator::after {
  content: "^";
}

.site-sort-button.sort-active.sort-desc .site-sort-indicator::after {
  content: "v";
}

.prtg-sites-table {
  min-width: 940px;
}

.prtg-devices-table {
  min-width: 1120px;
}

.prtg-sites-table thead tr:first-child th {
  top: 0;
  z-index: 3;
}

.prtg-sites-table .prtg-filter-row th {
  top: 33px;
  z-index: 2;
  padding: 0;
  background: #fff;
}

.prtg-sites-table .prtg-filter-row:not(.is-open) {
  display: none;
}

.prtg-sites-table .prtg-filter-row th:not(.is-active) {
  padding: 0;
}

.prtg-sites-table .prtg-filter-row th:not(.is-active) .prtg-column-filter {
  display: none;
}

.prtg-sites-table .prtg-filter-row th.is-active {
  padding: 6px 8px;
}

.site-sort-button.filter-open {
  color: #286fb4;
}

.prtg-sites-table .text-end .site-sort-button {
  width: 100%;
  text-align: right;
}

.prtg-sites-table th.text-end,
.prtg-sites-table td.text-end {
  width: 74px;
}

.prtg-column-filter {
  min-width: 84px;
  border-color: #cfd7e2;
  font-size: 0.74rem;
}

/* ── White text readability shadow ─────────────────────────── *
 * Applied to all components that render white text on a        *
 * coloured background (KPI pills, badges, card headers, etc.). *
 * Yellow/grey badges with dark text are intentionally excluded. */
.kpi-card,
.site-kpi,
.group-count,
.down-site-header .down-site-name,
.down-site-header .down-site-count,
.down-site-header .down-site-drag-handle,
.down-site-header .down-site-header-icon,
.pb-green,
.pb-red,
.hb-green,
.hb-red,
.down-device-provider-pill,
.down-site-ticket-status,
.prtg-sync-button,
.pb-th {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* ── NOC Search (nav bar) ───────────────────────────────────── */
.noc-nav-search {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-right: 0.75rem;
}

.noc-search-toggle {
  background: none;
  border: none;
  color: rgba(255,255,255,.7);
  font-size: 0.95rem;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  transition: color .12s, background .12s;
  line-height: 1;
}

.noc-search-toggle:hover {
  color: #fff;
  background: rgba(255,255,255,.12);
}

.noc-search-nav-input {
  width: 0;
  overflow: hidden;
  padding: 0;
  border: none;
  background: transparent;
  font-size: 0.82rem;
  color: #fff;
  outline: none;
  transition: width .2s ease, padding .2s ease, border .2s ease;
  border-radius: 14px;
}

.noc-search-open .noc-search-nav-input {
  width: 220px;
  padding: 0.25rem 0.65rem;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.12);
}

.noc-search-nav-input::placeholder {
  color: rgba(255,255,255,.5);
}

.noc-search-count {
  font-size: 0.75rem;
  color: rgba(255,255,255,.6);
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  max-width: 0;
  transition: max-width .2s ease;
}

.noc-search-open .noc-search-count {
  max-width: 120px;
}

/* ── Dashboard main layout ──────────────────────────────────── */
.dashboard-main {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.down-site-area {
  flex: 1 1 auto;
  min-width: 0;
}

/* Header icon links (ticket, comment) */
.down-site-header-icon {
  color: rgba(255,255,255,.8);
  font-size: 0.82rem;
  line-height: 1;
  text-decoration: none;
  flex-shrink: 0;
  transition: color .12s;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.down-site-header-icon:hover {
  color: #fff;
}

/* group-count badge inside the card header gets a semi-transparent dark pill */
.down-site-header .group-count {
  background: rgba(255,255,255,.18);
  font-size: 0.72rem;
  padding: 1px 7px;
  border-radius: 10px;
}

/* ── Sites KPI filter pills ─────────────────────────────────── */
.site-kpi-filter {
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color .15s, box-shadow .15s, filter .12s, opacity .12s;
  background: none;
  text-align: center;
}

/* Active state on coloured KPI pills — white border + glow */
.site-kpi.site-kpi-filter:hover { filter: brightness(1.12); }

.site-kpi.site-kpi-filter-active {
  border-color: #fff !important;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.35);
}

/* Column header icons — muted by default, crisp when active */
.pb-th.site-kpi-filter {
  padding: 2px 5px;
  border-radius: 4px;
  opacity: 0.5;
}
.pb-th.site-kpi-filter:hover  { opacity: 0.85; }
.pb-th.site-kpi-filter.site-kpi-filter-active {
  opacity: 1;
  border-color: rgba(0,0,0,0.3) !important;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.08) !important;
}

/* ── Provider column headers with total counts ──────────────── */
.provider-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 5px 10px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
  color: #9ca3af;
  min-width: 72px;
}
.provider-header:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
  color: #f3f4f6;
  transform: translateY(-1px);
}
.provider-header.is-active {
  background: #1565c0;
  border-color: #1976d2;
  color: #fff;
  box-shadow: 0 2px 8px rgba(21,101,192,0.4);
}
.provider-header i    { font-size: 0.9rem; }
.provider-total       { font-size: 1rem; font-weight: 700; line-height: 1; }
.provider-name        { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; opacity: 0.85; white-space: nowrap; }

/* ── Sites page provider badge pills ───────────────────────── */
.pb-th {
  color: #000 !important;
  font-size: 0.9rem;
  width: 52px;
}

.pb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 0.72rem;
  font-weight: 800;
  text-decoration: none;
  line-height: 1;
  transition: filter .12s;
}

.pb:hover { filter: brightness(1.12); }

.pb-green { background: #28a745; color: #fff; }
.pb-red   { background: #dc3545; color: #fff; }
.pb-gray  { background: #dee2e6; color: #8c959e; cursor: default; }

/* ── Site health badge ──────────────────────────────────────── */
.hb {
  display: inline-block;
  min-width: 46px;
  text-align: center;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  margin-right: 0.45rem;
  vertical-align: middle;
  white-space: nowrap;
}

.hb-green  { background: #28a745; color: #fff; }
.hb-yellow { background: #ffc107; color: #212529; }
.hb-orange { background: #fd7e14; color: #fff; }
.hb-red    { background: #dc3545; color: #fff; }
.hb-gray   { background: #dee2e6; color: #8c959e; }

/* ── Sticky table headers ───────────────────────────────────── */
.sites-table thead th {
    position: sticky;
    background: #fff;
    z-index: 10;
}
.sites-table thead tr:first-child th {
    top: 0;
    box-shadow: 0 2px 0 #dee2e6;
}
/* Filter row top is set by JS via initStickyFilterRow() */
.sites-table thead tr.prtg-filter-row th {
    background: #f8f9fa;
}

/* ── Frozen index column ────────────────────────────────────── */
.sites-table td.site-index-column,
.sites-table th.site-index-column {
    position: sticky;
    left: 0;
    z-index: 6;
}
.sites-table thead th.site-index-column { z-index: 12; }
/* Give tbody cells a background so they don't bleed through */
.sites-table tbody tr td.site-index-column { background: #fff; }
.sites-table tbody tr:hover td.site-index-column { background: #f5f5f5; }

/* ── Active filter banner ───────────────────────────────────── */
.filter-banner {
    display: none;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    padding: 0.45rem 0.75rem;
    background: #e3f0fb;
    border: 1px solid #b8d9f5;
    border-radius: 4px;
    margin-bottom: 0.5rem;
    font-size: 0.81rem;
    color: #1565C0;
}
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    background: #1976D2;
    color: #fff;
    padding: 0.1em 0.45em 0.1em 0.55em;
    border-radius: 20px;
    font-size: 0.77rem;
    white-space: nowrap;
}
.filter-chip-remove {
    background: none;
    border: none;
    color: rgba(255,255,255,0.75);
    cursor: pointer;
    padding: 0 0 0 0.15em;
    font-size: 1em;
    line-height: 1;
    font-weight: 700;
}
.filter-chip-remove:hover { color: #fff; }
.filter-clear-all {
    margin-left: auto;
    background: none;
    border: none;
    color: #1565C0;
    cursor: pointer;
    font-size: 0.78rem;
    text-decoration: underline;
    padding: 0;
    white-space: nowrap;
}
.filter-clear-all:hover { color: #0d47a1; }

/* ══════════════════════════════════════════════════════════════
   OPERATIONS CENTER – STANDARD SITES PAGE LAYOUT
   Apply class="ops-full-page" to <section> and call
   initFullPageLayout() from the page's Scripts section.
   ══════════════════════════════════════════════════════════════ */

/* Full-viewport section — fills exactly the space below the topbar */
.ops-full-page {
    height: calc(100vh - var(--topbar-height));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 8px 16px 12px;
    box-sizing: border-box;
}

/* KPI bar spans full width (compensates for 16px side padding) */
.ops-full-page .critical-section {
    margin-left:  -16px;
    margin-right: -16px;
    padding-left:  16px;
    padding-right: 16px;
    flex-shrink: 0;
}

/* Compact inline title bar */
.ops-page-title-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0 6px;
    flex-shrink: 0;
}
.ops-page-title-bar h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #263241;
}

/* Active filter banner */
.ops-full-page .filter-banner { flex-shrink: 0; }

/* Sites card — fills remaining space, never overflows the section */
.ops-full-page .sites-card {
    flex: 1 1 auto;
    min-height: 0;
}

/* Standard internal scroll container — THE only scrollbar on these pages */
.ops-sites-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: auto;
}

/* Sticky column headers inside the scroll container */
.ops-sites-scroll .sites-table thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #f8fafc;
    box-shadow: 0 2px 0 #dee2e6;
}

/* Standard compact table rows for monitoring grids */
.ops-full-page .sites-table > :not(caption) > * > * {
    padding: 4px 8px;
    font-size: 0.81rem;
    line-height: 1.35;
}
.ops-full-page .sites-table thead th { padding: 5px 8px; font-size: 0.72rem; }
.ops-full-page .sites-card-footer     { padding: 5px 14px; font-size: 0.78rem; }

/* Incidents page AG Grid layout */
.incidents-page {
    height: calc(100vh - var(--topbar-height));
    min-height: 0;
    overflow: hidden;
}

.incidents-grid-container {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.incidents-grid-container .dg-toolbar {
    flex: 0 0 auto;
}

.incidents-grid-container .ag-theme-quartz,
.incidents-grid {
    width: 100%;
    height: 100%;
    min-height: 0;
    flex: 1 1 auto;
}

.incidents-grid .ag-row {
    cursor: pointer;
    border-left: 6px solid transparent;
}

.incidents-grid .ag-row.incident-open {
    background: #fff5f5;
    border-left-color: #dc2626;
}

.incidents-grid .ag-row.incident-recovery {
    background: #fff9e6;
    border-left-color: #f59e0b;
}

.incidents-grid .ag-row.incident-resolved {
    background: #f0fff4;
    border-left-color: #16a34a;
}

.incidents-grid .ag-row:hover {
    background: rgba(59,130,246,.08);
}

.incidents-grid .ag-row.incident-open:hover {
    background: #feecec;
}

.incidents-grid .ag-row.incident-recovery:hover {
    background: #fff2cc;
}

.incidents-grid .ag-row.incident-resolved:hover {
    background: #e7fbe9;
}

.incidents-grid .ag-row.ag-row-selected {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
    filter: brightness(.98);
}

.incident-status-badge {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
}

.incident-status-badge.badge-open {
    background: #fee2e2;
    color: #991b1b;
}

.incident-status-badge.badge-recovery,
.incident-status-badge.badge-warning {
    background: #fef3c7;
    color: #92400e;
}

.incident-status-badge.badge-resolved {
    background: #dcfce7;
    color: #166534;
}

.incident-status-badge.badge-neutral {
    background: #e5e7eb;
    color: #374151;
}

.incident-link {
    color: #0f3f76;
    font-weight: 700;
    text-decoration: none;
}

.incident-link:hover {
    color: #0d47a1;
    text-decoration: underline;
}

.offline-count-normal,
.offline-count-warning,
.offline-count-critical {
    font-weight: 700;
}

.offline-count-normal {
    color: #b45309;
}

.offline-count-warning {
    color: #d97706;
}

.offline-count-critical {
    color: #dc2626;
}

.incident-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 460px;
    max-width: 95vw;
    height: 100vh;
    background: var(--surface);
    border-left: 1px solid var(--border);
    box-shadow: -2px 0 12px rgba(0,0,0,.25);
    z-index: 1100;
    overflow-y: auto;
    transition: width .25s ease, max-width .25s ease, padding .25s ease, border-color .25s ease, box-shadow .25s ease;
    padding: 1.5rem;
}

.incident-drawer.closed {
    width: 0;
    max-width: 0;
    border-left: 0;
    box-shadow: none;
    overflow: hidden;
    padding-left: 0;
    padding-right: 0;
}

.incidents-title-row {
    margin-bottom: 12px;
}

.incidents-workflow-kpis .site-kpi {
    min-width: 128px;
}

.incidents-auto-refresh {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
}

.incidents-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #16a34a;
    box-shadow: 0 0 0 4px rgba(22,163,74,.12);
}

.incidents-grid .ag-row.incident-workflow-new,
.incidents-grid .ag-row.incident-workflow-new .ag-cell {
    border-left-color: #3b82f6;
}

.incidents-grid .ag-row.incident-workflow-waiting-failure,
.incidents-grid .ag-row.incident-workflow-waiting-failure .ag-cell {
    border-left-color: #f59e0b;
}

.incidents-grid .ag-row.incident-workflow-threshold,
.incidents-grid .ag-row.incident-workflow-threshold .ag-cell {
    border-left-color: #dc2626;
}

.incidents-grid .ag-row.incident-workflow-ticket-required,
.incidents-grid .ag-row.incident-workflow-ticket-required .ag-cell {
    border-left-color: #f97316;
}

.incidents-grid .ag-row.incident-workflow-ticket-created,
.incidents-grid .ag-row.incident-workflow-ticket-created .ag-cell {
    border-left-color: #9333ea;
}

.incidents-grid .ag-row.incident-workflow-recovery,
.incidents-grid .ag-row.incident-workflow-recovery .ag-cell {
    border-left-color: #06b6d4;
}

.incidents-grid .ag-row.incident-workflow-ready-close,
.incidents-grid .ag-row.incident-workflow-ready-close .ag-cell {
    border-left-color: #22c55e;
}

.incidents-grid .ag-row.incident-workflow-closed,
.incidents-grid .ag-row.incident-workflow-closed .ag-cell {
    border-left-color: #94a3b8;
}

.incidents-grid .ag-row:hover .ag-cell {
    filter: brightness(.985);
}

.incident-status-badge.workflow-New {
    background: rgba(59,130,246,.16);
    color: #1d4ed8;
}

.incident-status-badge.workflow-WaitingForFailureThreshold {
    background: rgba(245,158,11,.18);
    color: #92400e;
}

.incident-status-badge.workflow-FailureThresholdReached {
    background: rgba(220,38,38,.16);
    color: #991b1b;
}

.incident-status-badge.workflow-TicketRequired {
    background: rgba(249,115,22,.18);
    color: #9a3412;
}

.incident-status-badge.workflow-TicketCreated {
    background: rgba(147,51,234,.16);
    color: #6b21a8;
}

.incident-status-badge.workflow-WaitingForRecoveryThreshold {
    background: rgba(6,182,212,.16);
    color: #0e7490;
}

.incident-status-badge.workflow-TicketCanBeClosed {
    background: rgba(34,197,94,.18);
    color: #166534;
}

.incident-status-badge.workflow-ClosedTicket {
    background: rgba(148,163,184,.2);
    color: #475569;
}

.incident-progress {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 100%;
    font-weight: 700;
    color: var(--text);
}

.incident-progress-track {
    width: 48px;
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(15,23,42,.14);
}

.incident-progress-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #334155;
}

.incident-duration {
    font-weight: 700;
}

.incident-ticket-link,
.incident-ticket-required,
.incident-ticket-closed,
.incident-ticket-pending {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
}

.incident-ticket-link {
    color: var(--info);
    text-decoration: none;
}

.incident-ticket-link:hover {
    text-decoration: underline;
}

.incident-ticket-required {
    color: #c2410c;
}

.incident-ticket-closed {
    color: #475569;
}

.incident-ticket-pending {
    color: var(--text-muted);
}

.incident-auto-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 70px;
    height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .02em;
}

.incident-auto-badge.auto {
    background: rgba(22,163,74,.14);
    color: #166534;
}

.incident-auto-badge.manual {
    background: rgba(100,116,139,.14);
    color: #475569;
}

.incident-drawer-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.incident-drawer-header h2 {
    margin: 2px 0 0;
    color: var(--text);
    font-size: 1.1rem;
}

.incident-drawer-eyebrow {
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.incident-drawer-header .btn {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-muted);
}

.incident-drawer-body {
    display: grid;
    gap: 14px;
}

.incident-drawer-loading,
.incident-drawer-error {
    color: var(--text-muted);
    font-weight: 700;
    padding: 20px 0;
}

.incident-drawer-section {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    padding: 14px;
}

.incident-drawer-section h3 {
    margin: 0 0 10px;
    color: var(--text);
    font-size: .9rem;
}

.incident-drawer-summary-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.incident-detail-grid {
    display: grid;
    grid-template-columns: 132px 1fr;
    gap: 8px 12px;
    margin: 0;
    font-size: .84rem;
}

.incident-detail-grid dt {
    color: var(--text-muted);
    font-weight: 700;
}

.incident-detail-grid dd {
    margin: 0;
    color: var(--text);
    font-weight: 600;
}

.incident-automation-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    color: var(--text);
    font-weight: 700;
}

.incident-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.incident-timeline li {
    position: relative;
    padding-left: 18px;
}

.incident-timeline li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary);
}

.incident-timeline time {
    display: block;
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 700;
}

.incident-timeline strong {
    display: block;
    color: var(--text);
    font-size: .84rem;
}

.incident-timeline p {
    margin: 3px 0 0;
    color: var(--text-muted);
    font-size: .8rem;
}

/* Incidents redesign */
.incidents-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 4px 0 12px;
    flex: 0 0 auto;
}

.incidents-header-row h1 {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: var(--text);
    font-size: 1.45rem;
    font-weight: 800;
}

.incidents-header-row h1 i {
    color: #dc2626;
}

.incidents-kpi-cards {
    display: grid;
    grid-template-columns: repeat(7, minmax(120px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
    flex: 0 0 auto;
}

.incident-kpi-card {
    min-height: 74px;
    border: 0;
    border-radius: 8px;
    padding: 12px 14px;
    color: #fff;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 2px 7px rgba(15,23,42,.12);
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

.incident-kpi-card:hover,
.incident-kpi-card:focus-visible,
.incident-kpi-card.active {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(15,23,42,.18);
    filter: brightness(1.04);
}

.incident-kpi-card span {
    display: block;
    font-size: 1.45rem;
    line-height: 1;
    font-weight: 850;
}

.incident-kpi-card strong {
    display: block;
    margin-top: 8px;
    font-size: .76rem;
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.incident-kpi-open { background: #dc2626; }
.incident-kpi-active { background: #ef4444; }
.incident-kpi-ticket-required { background: #f59e0b; }
.incident-kpi-ticket-created { background: #8b5cf6; }
.incident-kpi-recovery { background: #06b6d4; }
.incident-kpi-ready-close { background: #10b981; }
.incident-kpi-closed { background: #6b7280; }

.incidents-grid .ag-row {
    border-left-width: 4px;
}

.incidents-grid .ag-row[class*="incident-workflow-"],
.incidents-grid .ag-row[class*="incident-workflow-"] .ag-cell {
    background: transparent !important;
}

.incidents-grid .ag-row.incident-workflow-active { border-left-color: #dc2626; }
.incidents-grid .ag-row.incident-workflow-recovery { border-left-color: #06b6d4; }
.incidents-grid .ag-row.incident-workflow-ready-close { border-left-color: #22c55e; }
.incidents-grid .ag-row.incident-workflow-closed { border-left-color: #94a3b8; }

.incidents-grid .ag-row:hover .ag-cell {
    background: rgba(59,130,246,.06) !important;
}

.incident-site-cell {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text);
}

.incident-site-cell i {
    color: var(--text-muted);
}

.incident-status-badge.workflow-New,
.incident-status-badge.workflow-WaitingForFailureThreshold,
.incident-status-badge.workflow-FailureThresholdReached,
.incident-status-badge.workflow-TicketRequired,
.incident-status-badge.workflow-TicketCreated {
    background: #fee2e2;
    color: #991b1b;
}

.incident-status-badge.workflow-WaitingForRecoveryThreshold {
    background: #cffafe;
    color: #0e7490;
}

.incident-status-badge.workflow-TicketCanBeClosed {
    background: #dcfce7;
    color: #166534;
}

/* Atera ticket links — consistent across all views */
.ticket-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--info);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.ticket-link:hover { text-decoration: underline; color: var(--info); }
.ticket-link i { font-size: 0.85em; opacity: .85; }

/* Automation banners — used in Incidents index and Details */
.incident-automation-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 0.82rem;
    margin-bottom: 6px;
    flex-shrink: 0;
}
.incident-automation-banner i { flex-shrink: 0; }
.incident-automation-banner.automation-enabled  { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.incident-automation-banner.automation-disabled { background: #fff7ed; color: #9a3412; border: 1px solid #fed7aa; }
.incident-automation-banner.automation-partial  { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }

/* Manual-action badge modifier — orange outline for states requiring user intervention */
.incident-state-badge.manual-action {
    border: 1px solid currentColor;
    opacity: 1;
}

.incident-status-badge.workflow-ClosedTicket {
    background: #e5e7eb;
    color: #374151;
}

.incident-offline-count {
    min-width: 42px;
    height: 28px;
    border: 0;
    border-radius: 999px;
    font-weight: 850;
    cursor: pointer;
}

.offline-count-healthy {
    background: #dcfce7;
    color: #166534;
}

.incident-offline-count.offline-count-warning {
    background: #fef3c7;
    color: #92400e;
}

.incident-offline-count.offline-count-critical {
    background: #fee2e2;
    color: #991b1b;
}

.incident-duration {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.incident-ticket-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
    margin-right: 8px;
}

.incident-ticket-badge.none {
    background: #e5e7eb;
    color: #374151;
}

.incident-ticket-badge.required {
    background: #fef3c7;
    color: #92400e;
}

.incident-ticket-badge.created {
    background: #ede9fe;
    color: #5b21b6;
}

.incident-ticket-badge.closed {
    background: #e5e7eb;
    color: #374151;
}

.incident-ticket-action {
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--primary);
    padding: 4px 8px;
    font-size: .72rem;
    font-weight: 800;
    text-decoration: none;
}

.incident-drawer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.incident-device-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .82rem;
}

.incident-device-table th,
.incident-device-table td {
    padding: 8px;
    border-bottom: 1px solid var(--border);
    text-align: left;
}

.incident-device-table th {
    color: var(--text-muted);
    text-transform: uppercase;
    font-size: .68rem;
    letter-spacing: .05em;
}

.incident-empty-note {
    margin: 0;
    color: var(--text-muted);
}

.incident-device-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1300;
    background: rgba(15,23,42,.48);
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.incident-device-modal.open {
    display: flex;
}

.incident-device-modal-panel {
    width: min(760px, 96vw);
    max-height: 82vh;
    overflow: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 18px 44px rgba(15,23,42,.24);
}

.incident-device-modal-header {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.incident-device-modal-header h2 {
    margin: 0;
    font-size: 1rem;
}

.incident-device-modal-header button {
    width: 32px;
    height: 32px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text-muted);
}

#incident-device-modal-body {
    padding: 12px 16px 16px;
}

.incident-toast {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1400;
    transform: translateY(16px);
    opacity: 0;
    pointer-events: none;
    background: #111827;
    color: #fff;
    border-radius: 8px;
    padding: 10px 14px;
    font-weight: 700;
    box-shadow: 0 10px 28px rgba(15,23,42,.25);
    transition: opacity .16s ease, transform .16s ease;
}

.incident-toast.show {
    opacity: 1;
    transform: translateY(0);
}

.oc-kpi-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #111827;
    border-radius: 8px;
    padding: 10px;
    overflow-x: auto;
}

.incidents-oc-kpi-bar {
    margin-bottom: 12px;
    flex: 0 0 auto;
}

.oc-kpi-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    color: #f9fafb;
    padding: 0 12px;
    font-size: .8rem;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
}

.oc-kpi-pill:hover,
.oc-kpi-pill:focus-visible,
.oc-kpi-pill.active {
    background: rgba(255,255,255,.16);
    border-color: rgba(255,255,255,.32);
}

.oc-kpi-pill strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    border-radius: 999px;
    background: rgba(255,255,255,.18);
}

.incident-id-link {
    color: var(--primary);
    font-weight: 850;
    text-decoration: none;
}

.incident-id-link:hover,
.incident-site-cell:hover {
    text-decoration: underline;
}

.incident-state-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 850;
    white-space: nowrap;
}

.incident-state-badge.workflow-New,
.incident-state-badge.workflow-WaitingForFailureThreshold,
.incident-state-badge.workflow-FailureThresholdReached,
.incident-state-badge.workflow-TicketRequired {
    background: #fee2e2;
    color: #991b1b;
}

.incident-state-badge.workflow-TicketCreated {
    background: #ede9fe;
    color: #5b21b6;
}

.incident-state-badge.workflow-WaitingForRecoveryThreshold {
    background: #cffafe;
    color: #0e7490;
}

.incident-state-badge.workflow-TicketCanBeClosed {
    background: #dcfce7;
    color: #166534;
}

.incident-state-badge.workflow-ClosedTicket {
    background: #e5e7eb;
    color: #374151;
}

.incident-card-page {
    padding: 12px 16px 18px;
    min-height: calc(100vh - var(--topbar-height));
}

.incident-card-back {
    margin-bottom: 10px;
}

.incident-card-back a {
    color: var(--primary);
    font-size: .82rem;
    font-weight: 750;
    text-decoration: none;
}

.incident-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

.incident-card-header h1 {
    margin: 0;
    color: var(--text);
    font-size: 1.55rem;
    font-weight: 850;
}

.incident-card-header p {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-weight: 650;
}

.incident-card-summary {
    display: grid;
    grid-template-columns: repeat(7, minmax(130px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.incident-card-summary > div {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    padding: 10px 12px;
    box-shadow: 0 1px 4px rgba(15,23,42,.06);
}

.incident-card-summary span {
    display: block;
    color: var(--text-muted);
    font-size: .68rem;
    font-weight: 850;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.incident-card-summary strong {
    display: block;
    margin-top: 4px;
    color: var(--text);
    font-size: .94rem;
}

.incident-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.incident-card-grid {
    display: grid;
    grid-template-columns: minmax(320px, .85fr) minmax(420px, 1.15fr);
    gap: 12px;
    margin-bottom: 12px;
}

.incident-card-panel,
.incident-card-devices {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    box-shadow: 0 1px 4px rgba(15,23,42,.06);
}

.incident-card-panel {
    padding: 14px;
}

.incident-card-panel h2,
.incident-card-panel-title h2 {
    margin: 0 0 12px;
    color: var(--text);
    font-size: .98rem;
}

.incident-card-panel-title {
    padding: 12px 14px 0;
}

.incident-card-panel-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.incident-card-panel-title-row h2 {
    margin: 0;
}

.incident-atera-preview-panel {
    margin-bottom: 12px;
    overflow: hidden;
}

.incident-atera-preview-frame {
    display: block;
    width: 100%;
    height: 760px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
}

.incident-card-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.incident-card-timeline li {
    display: grid;
    grid-template-columns: 20px 110px 1fr;
    gap: 8px;
    align-items: start;
    border-bottom: 1px solid var(--border);
    padding-bottom: 8px;
}

.incident-card-timeline li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.incident-card-timeline i {
    color: var(--primary);
    margin-top: 3px;
}

.incident-card-timeline time {
    color: var(--text-muted);
    font-size: .76rem;
    font-weight: 700;
}

.incident-card-timeline strong {
    color: var(--text);
    font-size: .84rem;
}

.incident-card-timeline p {
    grid-column: 3;
    margin: 2px 0 0;
    color: var(--text-muted);
    font-size: .8rem;
}

.incident-card-devices {
    overflow: hidden;
}

#incident-devices-grid {
    height: 420px;
    width: 100%;
}

.device-status-offline,
.device-status-recovered {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 850;
}

.device-status-offline {
    background: #fee2e2;
    color: #991b1b;
}

.device-status-recovered {
    background: #dcfce7;
    color: #166534;
}

@media (max-width: 1100px) {
    .incidents-kpi-cards {
        grid-template-columns: repeat(3, minmax(130px, 1fr));
    }

    .incident-card-summary {
        grid-template-columns: repeat(3, minmax(140px, 1fr));
    }

    .incident-card-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .incidents-header-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .incidents-kpi-cards {
        grid-template-columns: repeat(2, minmax(130px, 1fr));
    }

    .incident-card-header {
        flex-direction: column;
    }

    .incident-card-summary {
        grid-template-columns: repeat(2, minmax(130px, 1fr));
    }

    .incident-card-timeline li {
        grid-template-columns: 20px 1fr;
    }

    .incident-card-timeline time,
    .incident-card-timeline strong,
    .incident-card-timeline p {
        grid-column: 2;
    }

    .incident-drawer {
        width: 100vw;
        max-width: 100vw;
    }

    .incident-device-modal {
        padding: 0;
    }

    .incident-device-modal-panel {
        width: 100vw;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
    }
}

/* FA sort icon — inactive grey, active blue */
.table-sort-icon {
    margin-left: 4px;
    font-size: 0.68em;
    opacity: 0.45;
    vertical-align: middle;
}
.sort-active .table-sort-icon {
    opacity: 1;
    color: #1976D2;
}

/* ProtectSites uses .ops-full-page — page-specific rules removed (see shared block above) */

/* ── Font Awesome sort icons ─────────────────────────────────── */
.table-sort-icon {
    margin-left: 4px;
    font-size: 0.68em;
    opacity: 0.5;
    vertical-align: middle;
}
.sort-active .table-sort-icon {
    opacity: 1;
    color: #1976D2;
}

/* ── Resizable column handles ───────────────────────────────── */
.col-resize-handle {
    position: absolute;
    top: 0;
    right: 0;
    width: 6px;
    height: 100%;
    cursor: col-resize;
    user-select: none;
    z-index: 20;
    border-right: 2px solid transparent;
    transition: border-color .15s;
}
.col-resize-handle:hover { border-right-color: #1976D2; }
.col-resize-handle.dragging { border-right-color: #0d47a1; background: rgba(25,118,210,.12); }

/* ── Column header filter popovers ──────────────────────────── */
.col-filter-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    position: relative;
}
.col-filter-icon {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: #ccc;
    font-size: 0.72em;
    line-height: 1;
    flex-shrink: 0;
    transition: color .15s;
}
.col-filter-icon:hover    { color: #1976D2; }
.col-filter-icon.is-active { color: #1976D2; }
.col-filter-icon.has-value { color: #ffc107; }
.col-filter-popover {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 500;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 0.55rem 0.65rem;
    min-width: 200px;
    box-shadow: 0 4px 16px rgba(0,0,0,.18);
    white-space: normal;
}
.col-filter-popover.is-open { display: block; }
.col-filter-popover label {
    font-size: 0.72rem;
    color: #6c757d;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    display: block;
    margin-bottom: 5px;
}
/* Frozen Site Name column */
.col-protect-name {
    position: sticky;
    left: 64px;
    z-index: 5;
    background: #f8fafc;
}
tbody .col-protect-name             { background: #fff; }
tbody tr:hover .col-protect-name    { background: #f5f5f5; }

/* ── Down site cards ────────────────────────────────────────── */

.down-site-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(285px, 1fr));
  grid-auto-rows: 1px;
  column-gap: 0.65rem;
  row-gap: 0;
  padding-bottom: 1.5rem;
  align-items: start;
}

.down-site-card {
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(15, 23, 42, .13);
  overflow: hidden;
  width: 100%;
  /* grid-row-end set by JS */
}

.down-site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.48rem 0.7rem;
  gap: 0.45rem;
}

.down-site-name {
  color: #fff;
  font-weight: 700;
  font-size: 0.92rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.down-site-badges {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

.down-site-provider {
  color: #fff;
  font-size: 0.62rem;
  font-weight: 600;
  padding: 1px 4px;
  border-radius: 3px;
  white-space: nowrap;
}

.down-site-count {
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
}

.down-device-list {
  margin: 0;
  padding: 0;
}

.group-section {
  border-bottom: 1px solid #f0f0f0;
}

.group-section:last-child {
  border-bottom: none;
}

.group-header {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.32rem 0.7rem;
  background: #dbe3ee;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--oc-text, #111827);
  user-select: none;
  border-bottom: 1px solid var(--oc-border, #e2e8f0);
}

.group-header:hover {
  background: #cfd9e6;
}

.group-icon {
  font-size: 0.86em;
  color: #6c757d;
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}

.group-name {
  flex: 1;
  font-weight: 900;
  color: #020617;
}

.down-site-card .group-header .group-name {
  font-weight: 900;
  color: #020617 !important;
}

.group-count {
  background: #6c757d;
  color: #fff;
  font-size: 0.6rem;
  padding: 1px 5px;
  border-radius: 10px;
  font-weight: 700;
  flex-shrink: 0;
}

.toggle-icon {
  font-size: 0.6em;
  color: #adb5bd;
  flex-shrink: 0;
  transition: transform 0.15s;
}

.group-collapsed .group-items {
  display: none;
}

.group-collapsed .toggle-icon {
  transform: rotate(-90deg);
}

.group-items {
  list-style: none;
  margin: 0;
  padding: 0 0 0 0.25rem;
}

.down-device-row {
  display: flex;
  align-items: center;
  gap: 0.42rem;
  padding: 0.24rem 0.7rem 0.24rem 0.65rem;
  font-size: 0.86rem;
  flex-wrap: nowrap;
  overflow: hidden;
  border-bottom: 1px solid #f5f5f5;
}

.down-device-row:hover {
  background: #f8fafc;
}

.down-device-row.down-device-critical {
  background: #fee2e2;
  border-left: 4px solid #dc2626;
  box-shadow: inset 0 0 0 1px rgba(220, 38, 38, 0.16);
}

.down-device-row.down-device-critical .down-device-name,
.down-device-row.down-device-critical .down-device-duration {
  color: #991b1b;
  font-weight: 800;
}

.down-device-row.down-device-critical:hover {
  background: #fecaca;
}

.down-device-icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  object-fit: contain;
  border-radius: 5px;
  flex-shrink: 0;
}

.down-device-fallback-icon {
  width: 28px;
  min-width: 28px;
  text-align: center;
  font-size: 0.96rem;
  flex-shrink: 0;
}

.ag-row.device-row-highlight {
  animation: pulseDeviceRow 2s ease;
}

@keyframes pulseDeviceRow {
  0% {
    background: #fff7cc;
  }
  50% {
    background: #ffe082;
  }
  100% {
    background: inherit;
  }
}

.down-device-row:last-child {
  border-bottom: none;
}

.down-device-name {
  font-weight: 600;
  color: #2c3e50;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.down-device-model {
  font-size: 0.7rem;
  color: #6c757d;
  white-space: nowrap;
  flex-shrink: 0;
}

.down-device-duration {
  font-size: 0.8rem;
  font-weight: 600;
  color: #2c3e50;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: auto;
  padding-right: 4px;
}

.down-site-drag-handle {
  color: rgba(255,255,255,.65);
  cursor: grab;
  margin-right: 0.5rem;
  flex-shrink: 0;
  font-size: 0.85rem;
}

.down-site-drag-handle:active {
  cursor: grabbing;
}

.down-site-provider-link {
  text-decoration: none;
}

.down-site-provider-link:hover .down-site-provider {
  filter: brightness(1.15);
}

/* Atera ticket icon (legacy, kept for compatibility) */
.down-site-ticket-link {
  color: rgba(255,255,255,.85);
  font-size: 0.8rem;
  text-decoration: none;
  line-height: 1;
  transition: color .12s;
  flex-shrink: 0;
}
.down-site-ticket-link:hover { color: #fff; }

/* Ticket badge — shows #number + status text in card header */
.down-site-ticket-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 0;
  background: rgba(255,255,255,.18);
  border-radius: 4px;
  padding: 0;
  font-size: 0.78rem;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
  flex-shrink: 0;
}
.down-site-ticket-badge:hover { background: rgba(255,255,255,.28); color: #fff; }

.down-site-ticket-icon-acknowledged {
  color: cornflowerblue;
}

.down-site-ticket-icon-awaiting-review {
  color: blueviolet;
}

button.down-site-ticket-badge {
  cursor: pointer;
  font: inherit;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.ticket-comment-badge {
  background: rgba(255,255,255,.18);
}

.ticket-comment-badge-fresh {
  color: #e0f2fe;
}

.ticket-comment-badge-stale {
  color: #ffedd5;
}

.ticket-comment-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .45);
  z-index: 1450;
}

.ticket-comment-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  width: min(760px, calc(100vw - 28px));
  max-height: min(820px, calc(100vh - 36px));
  transform: translate(-50%, -50%);
  background: #fff;
  border: 1px solid rgba(15, 23, 42, .12);
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(15, 23, 42, .28);
  z-index: 1460;
  overflow: hidden;
}

.ticket-comment-popup-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(15, 23, 42, .1);
}

.ticket-comment-popup-eyebrow {
  color: var(--text-muted);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.ticket-comment-popup-header h2 {
  margin: 3px 0 0;
  color: var(--text-main);
  font-size: 1.05rem;
  line-height: 1.3;
}

.ticket-comment-popup-header h2 span {
  color: var(--text-muted);
  font-weight: 500;
}

.ticket-comment-popup-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(15, 23, 42, .14);
  border-radius: 6px;
  background: #fff;
  color: var(--text-muted);
  cursor: pointer;
}

.ticket-comment-popup-close:hover {
  background: #f8fafc;
  color: var(--text-main);
}

.ticket-comment-popup-body {
  max-height: calc(min(820px, calc(100vh - 36px)) - 72px);
  overflow-y: auto;
  padding: 16px 20px 20px;
}

.ticket-comment-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.ticket-comment-detail-grid > div {
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 6px;
  padding: 9px 10px;
  background: #f8fafc;
}

.ticket-comment-detail-grid span {
  display: block;
  color: var(--text-muted);
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
}

.ticket-comment-detail-grid strong {
  display: block;
  margin-top: 2px;
  color: var(--text-main);
  font-size: .9rem;
}

.ticket-comment-detail-wide {
  grid-column: 1 / -1;
}

.ticket-comment-section {
  margin-top: 18px;
}

.ticket-comment-section h3 {
  margin: 0 0 9px;
  color: var(--text-main);
  font-size: .94rem;
}


.ticket-comment-item-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 7px;
  color: var(--text-muted);
  font-size: .8rem;
}

.ticket-comment-item-meta strong {
  color: var(--text-main);
}

.ticket-comment-internal-pill {
  padding: 1px 6px;
  border-radius: 999px;
  background: #f59e0b;
  color: #111827;
  font-size: .68rem;
  font-weight: 700;
}

.ticket-comment-item-body {
  color: var(--text-main);
  font-size: .88rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.ticket-comment-loading,
.ticket-comment-empty,
.ticket-comment-error {
  margin: 0;
  color: var(--text-muted);
  font-size: .9rem;
}

.ticket-comment-error {
  color: #dc2626;
}

/* Comment icon + popup */
.down-site-comment-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.down-site-comment-icon {
  color: rgba(255,255,255,.85);
  font-size: 0.8rem;
  cursor: pointer;
  line-height: 1;
  transition: color .12s;
}

.down-site-comment-wrap:hover .down-site-comment-icon {
  color: #fff;
}

/* Lightweight comment tooltip */
.comment-tooltip {
  position: absolute;
  max-width: 220px;
  background: #fff;
  border: 1px solid #dcdcdc;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  padding: 10px;
  font-size: 12px;
  z-index: 1300;
  word-break: break-word;
  line-height: 1.45;
}

.ct-author {
  font-weight: 700;
  color: #222;
  margin-bottom: 1px;
}

.ct-date {
  color: #888;
  font-size: 11px;
  margin-bottom: 6px;
}

.ct-text {
  color: #444;
  white-space: pre-wrap;
}

.ticket-comment-muted {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: .84rem;
  line-height: 1.2;
}

.down-device-provider-pill {
  color: #fff;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 3px;
  white-space: nowrap;
  flex-shrink: 0;
}

.down-card-dragging {
  opacity: 0.45;
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
}

.down-card-drop-target {
  outline: 2px dashed #ED9E3A;
  outline-offset: 2px;
}

.down-device-clickable {
  cursor: pointer;
  transition: background .12s;
}

.down-device-clickable:hover {
  background: #f0f4ff;
}

.down-device-dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 0.9rem;
  font-size: 0.875rem;
  margin: 0;
}

.down-device-dl dt {
  color: #6c757d;
  font-weight: 600;
  white-space: nowrap;
}

.down-device-dl dd {
  margin: 0;
}

/* ── Device tooltip ──────────────────────────────────────────────────────── */
.device-tooltip {
  position: absolute;
  z-index: 1300;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
  width: 380px;
  font-size: 0.82rem;
  pointer-events: auto;
}

.dt-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px 8px;
  border-bottom: 1px solid #f3f4f6;
}

.dt-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}

.dt-device-image {
  width: 82px;
  height: 82px;
  min-width: 82px;
  object-fit: contain;
  border-radius: 8px;
  background: linear-gradient(135deg, #e2e8f0, #cbd5e1);
  border: 1px solid #94a3b8;
  box-shadow:
    0 8px 18px rgba(15, 23, 42, 0.2),
    inset 0 0 0 1px rgba(255, 255, 255, 0.45);
  padding: 8px;
}

.dt-device-icon-fallback {
  width: 82px;
  height: 82px;
  min-width: 82px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid #eef2f7;
  font-size: 1.75rem;
}

.dt-name,
.dt-name-link {
  display: block;
  font-weight: 700;
  color: #111827;
  font-size: 1rem;
  line-height: 1.3;
  overflow: visible;
  text-overflow: unset;
  white-space: normal;
  text-decoration: none;
  cursor: pointer;
}

.dt-name-link:hover {
  color: #1976d2;
  text-decoration: underline;
}

.dt-close {
  background: none;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  padding: 0 2px;
  font-size: 0.8rem;
  flex-shrink: 0;
  line-height: 1;
}
.dt-close:hover { color: #374151; }

.dt-meta,
.dt-meta-link {
  padding: 5px 12px;
  color: #6b7280;
  font-size: 0.75rem;
  border-bottom: 1px solid #f3f4f6;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  text-decoration: none;
}

.dt-meta-link:hover {
  color: #1976d2;
  text-decoration: underline;
}

.dt-body {
  padding: 6px 12px 8px;
}

.dt-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  font-size: 0.8rem;
}

.dt-label {
  color: #9ca3af;
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  flex-shrink: 0;
}

.dt-val { color: #374151; }
.dt-danger { color: #dc2626; font-weight: 700; }
.dt-incident-open { color: #dc2626; font-weight: 700; }

.dt-section-divider {
  border-top: 1px solid #f3f4f6;
  margin: 5px 0;
}

.dt-reliability-green { color: #16a34a; font-weight: 800; }
.dt-reliability-yellow { color: #ca8a04; font-weight: 800; }
.dt-reliability-red { color: #dc2626; font-weight: 800; }

.dt-stability-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.dt-stability-stable {
  background: rgba(34, 197, 94, .15);
  color: #15803d;
}

.dt-stability-warning {
  background: rgba(245, 158, 11, .18);
  color: #92400e;
}

.dt-stability-unstable {
  background: rgba(239, 68, 68, .18);
  color: #b91c1c;
}

.dt-footer {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  border-top: 1px solid #f3f4f6;
  flex-wrap: wrap;
}

.dt-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #374151;
  text-decoration: none;
  white-space: nowrap;
  transition: background .1s;
}
.dt-btn:hover { background: #f3f4f6; }

/* ═══════════════════════════════════════════════════════════════════════════
   Design System — Light Enterprise Theme
   All rules below override legacy hardcoded values using CSS variables.
═══════════════════════════════════════════════════════════════════════════ */

/* ── Persistent sidebar layout ──────────────────────────────────────────── */

.oc-app-layout {
  display: flex;
  min-height: 100vh;
  height: 100vh;
  overflow: hidden;
}

.oc-sidebar {
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  max-width: 100vw;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  flex-shrink: 0;
  transition: transform .25s ease;
  z-index: 200;
  /* Collapsed by default on all screen sizes */
  position: fixed;
  left: 0; top: 0;
  transform: translateX(calc(-1 * var(--sidebar-width)));
}

.oc-sidebar-brand {
  height: 64px;
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
}

.oc-sidebar-brand-logo {
  height: 36px;
  width: auto;
}

.oc-sidebar-brand-name {
  font-size: .85rem;
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.oc-nav {
  padding: 8px 0;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.oc-nav-section-label {
  padding: 10px 16px 4px;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted);
  margin-top: 4px;
}

.oc-nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px;
  background: none;
  border: none;
  font-size: .875rem;
  color: var(--text-muted);
  text-decoration: none;
  transition: background .1s, color .1s;
  border-left: 4px solid transparent;
  white-space: nowrap;
}

.oc-nav-link:hover {
  background: var(--bg);
  color: var(--text);
  text-decoration: none;
}

.oc-nav-link.oc-active {
  background: #fff7ed;
  color: var(--primary);
  font-weight: 600;
  border-left-color: var(--primary);
}

.oc-nav-link .fa-fw { width: 16px; font-size: .875rem; }

.oc-nav-sub { padding-left: 8px; }
.oc-nav-sub .oc-nav-link { font-size: .82rem; padding: 5px 16px 5px 36px; }

.oc-nav-section-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 16px 5px;
  font-size: 11px;
  font-weight: 800;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: background .1s;
}
.oc-nav-section-toggle:hover { background: var(--bg); color: var(--text); }
.oc-nav-section-chevron {
  font-size: .65rem;
  color: var(--text-muted);
  transition: transform .2s;
}
.oc-nav-section-toggle[aria-expanded="true"] .oc-nav-section-chevron { transform: rotate(90deg); }

.oc-nav-section-content { display: none; }
.oc-nav-section-content.is-open { display: block; }

/* ── Main area (topbar + content) ───────────────────────────────────────── */

.oc-main-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.oc-topbar {
  height: 56px;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  z-index: 100;
  gap: 12px;
}

.oc-topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.oc-topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.oc-topbar-datetime {
  font-size: .78rem;
  color: var(--text-muted);
  line-height: 1.3;
}

.oc-topbar-datetime strong {
  display: block;
  font-size: .82rem;
  color: var(--text);
  font-weight: 600;
}

.oc-sidebar-toggle {
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-muted);
  transition: background .1s, color .1s;
  flex-shrink: 0;
}
.oc-sidebar-toggle:hover { background: var(--bg); color: var(--text); }

.oc-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0;
}

/* ── Sidebar toggle — collapsed by default on ALL screen sizes ────────── */

.oc-sidebar-open .oc-sidebar {
  transform: translateX(0);
  box-shadow: 4px 0 24px rgba(0,0,0,.15);
}

.oc-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 199;
}

.oc-sidebar-open .oc-sidebar-overlay { display: block; }

/* Main area always fills full width (sidebar is position:fixed, not in flow) */
.oc-main-area { width: 100%; }

/* ── Card system ─────────────────────────────────────────────────────────── */

.oc-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin-bottom: 16px;
}

.oc-card-header {
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
}

.oc-card-title {
  font-size: .875rem;
  font-weight: 600;
  color: var(--text);
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
}

.oc-card-body { padding: 20px; }

.oc-card-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  background: var(--bg);
  border-radius: 0 0 var(--radius) var(--radius);
}

/* Update legacy card class */
.sites-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-sm) !important;
}

.sites-card-footer {
  background: var(--bg) !important;
  border-top: 1px solid var(--border) !important;
  color: var(--text-muted) !important;
}

/* ── Section header ─────────────────────────────────────────────────────── */

.oc-section-header {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  border-bottom: 2px solid var(--border);
  padding-bottom: 6px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── Form controls ──────────────────────────────────────────────────────── */

.form-control,
.form-select {
  background: var(--surface) !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text) !important;
  border-radius: var(--radius-sm) !important;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--info) !important;
  box-shadow: 0 0 0 4px rgba(37,99,235,.12) !important;
  outline: none;
}

.form-control::placeholder { color: var(--text-muted); }

/* ── Toggle switches — large custom iOS-style slider ─────────────────────── */

.form-switch .form-check-input {
  width:            44px !important;
  height:           24px !important;
  border-radius:    12px !important;
  background-color: #94a3b8 !important;
  border:           none !important;
  cursor:           pointer;
  transition:       background-color .2s, background-position .2s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E") !important;
  background-size:     22px 22px !important;
  background-position: left 2px center !important;
  flex-shrink:      0;
}

.form-switch .form-check-input:checked {
  background-color: var(--success) !important;
  border:           none !important;
  background-position: right 2px center !important;
}

.form-switch .form-check-input:focus {
  box-shadow:  0 0 0 4px rgba(22,163,74,.15) !important;
  border:      none !important;
  outline:     none;
}

.form-switch .form-check-label { line-height: 24px; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.prtg-sync-button,
.btn-oc-primary {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
  border-radius: var(--radius-sm) !important;
  font-weight: 600;
}

.prtg-sync-button:hover,
.btn-oc-primary:hover {
  background: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
  color: #fff !important;
}

/* ── Tables ──────────────────────────────────────────────────────────────── */

.table {
  background: var(--surface);
  border-radius: var(--radius);
}

.table thead th {
  background: var(--bg) !important;
  color: var(--text-muted) !important;
  font-size: .74rem !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  letter-spacing: .05em;
  border-bottom: 2px solid var(--border) !important;
}

.table tbody tr:hover td {
  background: #f1f5f9;
}

.table tbody td {
  border-color: var(--border);
  vertical-align: middle;
}

/* ── Critical section — black background for outage visibility ────────── */

.critical-section {
  background: #000 !important;
  border-bottom: 2px solid #222 !important;
  border-top: none !important;
  color: #fff;
}

/* Critical alert label + pills */
.critical-alert-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #ff4d4d;
  font-weight: 700;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-right: 10px;
}

.critical-alert-count {
  background: #ff4d4d;
  color: #fff;
  border-radius: 999px;
  padding: 1px 7px;
  font-size: .7rem;
  font-weight: 700;
}

.critical-alert-chip,
.critical-pill {
  background: #8b0000;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 3px 10px;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background .1s;
}

.critical-alert-chip:hover,
.critical-pill:hover { background: #a00; color: #fff; }

/* ── Page title ──────────────────────────────────────────────────────────── */

.ops-title-row h1 {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text);
}

.ops-subtitle { color: var(--text-muted); }

/* ── Page heading ────────────────────────────────────────────────────────── */
.oc-page-heading {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.oc-page-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 32px;
  font-weight: 700;
}
.oc-page-title i {
  color: var(--primary);
  font-size: 28px;
}
.oc-page-subtitle {
  color: var(--text-muted);
  font-size: 14px;
}

/* freshness-widget removed — replaced by oc-topbar-clock */

/* ── Alert feedback ──────────────────────────────────────────────────────── */

.alert-success { background: #f0fdf4; border-color: #bbf7d0; color: #15803d; }
.alert-danger  { background: #fff1f2; border-color: #fecdd3; color: #be123c; }

/* ── Utility ─────────────────────────────────────────────────────────────── */
.fw-600 { font-weight: 600; }

/* Monitoring Settings */
.monitoring-settings-page {
  padding: 24px;
  gap: 16px;
  overflow: auto;
}

.monitoring-settings-title-row {
  margin-bottom: 16px;
}

.monitoring-settings-title-row h1 {
  font-size: 1.55rem;
  font-weight: 750;
  color: var(--text);
}

.monitoring-settings-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.monitoring-settings-summary-item {
  min-height: 72px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}

.monitoring-settings-summary-label {
  color: var(--text-muted);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.monitoring-settings-summary-item strong {
  color: var(--text);
  font-size: 1.2rem;
  line-height: 1.1;
}

.monitoring-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(360px, 1fr));
  gap: 16px;
  align-items: start;
  padding-bottom: 82px;
}

.monitoring-settings-grid .oc-card {
  margin-bottom: 0;
}

.monitoring-settings-page .oc-card-header {
  min-height: 46px;
  padding: 13px 18px 11px;
}

.monitoring-settings-page .oc-card-body {
  padding: 18px 20px;
}

.monitoring-settings-page .oc-stepper {
  width: 100%;
}

.monitoring-settings-page .oc-stepper-display {
  min-width: 0;
}

.monitoring-settings-page .oc-setting-row:has(.oc-power-toggle) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 14px;
}

.monitoring-settings-page .oc-setting-row:has(.oc-power-toggle) .oc-setting-desc {
  grid-column: 1 / -1;
}

.automation-status-banner {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 0.82rem;
  line-height: 1.5;
}
.automation-status-banner i { margin-top: 2px; flex-shrink: 0; }
.automation-enabled  { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.automation-disabled { background: #fff7ed; color: #9a3412; border: 1px solid #fed7aa; }

.monitoring-settings-savebar {
  position: sticky;
  bottom: 0;
  z-index: 8;
  display: flex;
  justify-content: flex-end;
  margin: 0 -24px -24px;
  padding: 12px 24px;
  background: rgba(248, 250, 252, .92);
  border-top: 1px solid var(--border);
  backdrop-filter: blur(10px);
}

@media (max-width: 1100px) {
  .monitoring-settings-summary {
    grid-template-columns: repeat(2, minmax(150px, 1fr));
  }

  .monitoring-settings-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .monitoring-settings-page {
    padding: 16px;
  }

  .monitoring-settings-title-row {
    align-items: stretch;
    flex-direction: column;
  }

  .monitoring-settings-summary {
    grid-template-columns: 1fr;
  }

  .monitoring-settings-savebar {
    margin: 0 -16px -16px;
    padding: 12px 16px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Settings Controls — Segmented Toggle, Stepper, Preset Selector
══════════════════════════════════════════════════════════════════════════ */

/* ── Segmented toggle (ON / OFF) ─────────────────────────────────────────── */
.oc-power-toggle {
  min-height: 34px;
  min-width: 92px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #fff;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .02em;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .16), 0 1px 2px rgba(15, 23, 42, .12);
  cursor: pointer;
  transition: filter .14s, transform .14s, box-shadow .14s;
}

.oc-power-toggle i {
  font-size: .82rem;
}

.oc-power-toggle.on {
  background: #16a34a;
}

.oc-power-toggle.off {
  background: #64748b;
}

.oc-power-toggle.error {
  background: #dc2626;
}

.oc-power-toggle.warning {
  background: #f59e0b;
}

.oc-power-toggle:hover {
  filter: brightness(1.06);
}

.oc-power-toggle:active {
  transform: translateY(1px);
}

.oc-power-toggle:focus-visible {
  outline: 3px solid rgba(37, 99, 235, .35);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .oc-power-toggle {
    width: 100%;
  }

  .monitoring-settings-page .oc-setting-row:has(.oc-power-toggle) {
    grid-template-columns: 1fr;
  }
}

.seg-toggle {
  display: inline-flex;
  gap: 4px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 3px;
  background: #f1f5f9;
  user-select: none;
}

.seg-toggle-btn {
  min-width: 96px;
  height: 30px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: .78rem;
  font-weight: 700;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  background: transparent;
  color: var(--text-muted);
  transition: background .15s, color .15s, box-shadow .15s;
}

.seg-toggle-btn.is-active-on {
  background: #16a34a;
  color: #fff;
  box-shadow: 0 1px 2px rgba(22, 163, 74, .18);
}

.seg-toggle-btn.is-active-off {
  background: #475569;
  color: #fff;
  box-shadow: 0 1px 2px rgba(71, 85, 105, .18);
}

.seg-toggle-btn:not(.is-active-on):not(.is-active-off):hover {
  background: rgba(255, 255, 255, .8);
  color: var(--text);
}

.seg-toggle-btn i {
  font-size: .74rem;
}

/* ── Stepper ( [−] N unit [+] ) ──────────────────────────────────────────── */
.oc-stepper {
  display: inline-flex;
  align-items: stretch;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  height: 44px;
  background: var(--surface);
}

.oc-stepper-btn {
  width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border: none;
  cursor: pointer;
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--text-muted);
  transition: background .1s, color .1s;
  flex-shrink: 0;
}

.oc-stepper-btn:hover:not(:disabled) { background: var(--border); color: var(--text); }
.oc-stepper-btn:disabled { opacity: .4; cursor: not-allowed; }
.oc-stepper-btn:first-child { border-right: 1.5px solid var(--border); }
.oc-stepper-btn:last-child  { border-left:  1.5px solid var(--border); }

.oc-stepper-display {
  flex: 1;
  padding: 0 14px;
  font-size: .92rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  min-width: 130px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
}

.oc-stepper-hint {
  font-size: .75rem;
  color: var(--text-muted);
  margin-top: 5px;
  min-height: 1.1em;
}

/* ── Preset selector (pill group) ────────────────────────────────────────── */
.oc-preset-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.oc-preset-btn {
  padding: 8px 18px;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-size: .82rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .1s, background .1s, color .1s;
  white-space: nowrap;
}

.oc-preset-btn:hover { border-color: var(--primary); color: var(--text); }
.oc-preset-btn.is-active {
  border-color: var(--primary);
  background: #fff7ed;
  color: var(--primary);
  font-weight: 700;
}

/* ── Setting row layout ───────────────────────────────────────────────────── */
.oc-setting-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
}

.oc-setting-row:last-child { border-bottom: none; padding-bottom: 0; }
.oc-setting-row:first-child { padding-top: 0; }

.oc-setting-label {
  font-size: .9rem;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

.oc-setting-desc {
  font-size: .78rem;
  color: var(--text-muted);
  margin: 0;
}

/* ── Misc overrides ──────────────────────────────────────────────────────── */

/* Inline dark-theme overrides used in various views */
[style*="background:#1a2332"],
[style*="background: #1a2332"] {
  background: var(--surface) !important;
  color: var(--text) !important;
}

[style*="border-color:#2a3a4a"],
[style*="border-color: #2a3a4a"] {
  border-color: var(--border) !important;
}

[style*="color:#e0e0e0"],
[style*="color: #e0e0e0"] {
  color: var(--text) !important;
}

[style*="color:#90CAF9"],
[style*="color: #90CAF9"] {
  color: var(--text-muted) !important;
}

[style*="color:#b0bec5"],
[style*="color: #b0bec5"] {
  color: var(--text-muted) !important;
}

/* Legacy card dark inputs */
.sites-card input,
.sites-card select,
.oc-card input,
.oc-card select {
  background: var(--surface) !important;
  border-color: var(--border-strong) !important;
  color: var(--text) !important;
}

/* table-dark override */
.table-dark {
  --bs-table-bg: var(--surface) !important;
  --bs-table-color: var(--text) !important;
  --bs-table-striped-bg: var(--bg) !important;
  --bs-table-hover-bg: #f1f5f9 !important;
  --bs-table-border-color: var(--border) !important;
}

.table-dark thead th {
  background: var(--bg) !important;
  color: var(--text-muted) !important;
}

.table-dark td, .table-dark th {
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* Badge/pill dark-bg overrides */
.badge[style*="#1e2a38"],
.badge[style*="background:#1e2a38"] {
  background: var(--bg) !important;
  color: var(--text-muted) !important;
}

/* code elements */
code.prtg-host-code {
  background: var(--bg);
  color: var(--info);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: .8rem;
}

/* down-site card dark styles */
.down-site-header {
  color: #fff !important;
}

/* Ensure down-site cards keep their colored headers */
.down-card > .down-site-header { border-radius: var(--radius) var(--radius) 0 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   UI Framework — Card Aliases, Status Classes, Provider Badges
═══════════════════════════════════════════════════════════════════════════ */

/* ── Card aliases ────────────────────────────────────────────────────────── */

.data-card,
.detail-card,
.action-card,
.camera-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.data-grid-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-card-value {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text);
}

.stat-card-label {
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
}

/* ── Status classes ──────────────────────────────────────────────────────── */

.status-online   { color: var(--success); font-weight: 600; }
.status-offline  { color: var(--danger);  font-weight: 600; }
.status-warning  { color: var(--warning); font-weight: 600; }
.status-critical { color: #b91c1c;        font-weight: 700; }

/* ── Shared badge base ───────────────────────────────────────────────────── */
.oc-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1;
  border: 1px solid transparent;
  vertical-align: middle;
}

/* ── Status badges ───────────────────────────────────────────────────────── */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1;
  vertical-align: middle;
}

.status-badge-online     { background: #dcfce7; color: #166534; }
.status-badge-offline    { background: #fee2e2; color: #991b1b; }
.status-badge-warning    { background: #fef9c3; color: #854d0e; }
.status-badge-critical   { background: #fce7f3; color: #9d174d; }
.status-badge-pending    { background: #fef3c7; color: #92400e; }
.status-badge-recovery   { background: #dbeafe; color: #1e40af; }
.status-badge-resolved   { background: #dcfce7; color: #166534; }
.status-badge-simulated  { background: #ede9fe; color: #5b21b6; }

/* ── Provider badges ─────────────────────────────────────────────────────── */
.provider-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  min-width: 120px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  line-height: 1;
  vertical-align: middle;
  justify-content: center;
}

.provider-prtg          { background: #2563eb; }
.provider-unifi-network { background: #0ea5e9; }
.provider-unifi-protect { background: #0284c7; }
.provider-unifi-access  { background: #047857; }
.provider-uisp          { background: #1d4ed8; }
.provider-atera         { background: #7c3aed; }

/* ── Topbar brand (logo + name, moved from sidebar) ─────────────────────── */

.oc-topbar-brand-link {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  margin-left: 4px;
}
.oc-topbar-brand-link:hover { text-decoration: none; }

.oc-topbar-logo { height: 32px; width: auto; }

.oc-topbar-brand {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.oc-brand-name {
  font-size: .72rem;
  font-weight: 800;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.oc-brand-sub {
  font-size: .62rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ── Topbar clock (replaces freshness widget) ────────────────────────────── */

.oc-topbar-clock {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: .72rem;
  line-height: 1.4;
  white-space: nowrap;
}

.oc-clock-datetime { font-weight: 600; color: var(--text); }
.oc-clock-refresh  { color: var(--text-muted); }

/* ── Sidebar search ──────────────────────────────────────────────────────── */

.oc-sidebar-search {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  flex-shrink: 0;
  background: var(--surface);
  z-index: 1;
}

.oc-sidebar-search-input {
  width: 100%;
  height: 32px;
  padding: 0 10px 0 30px;
  font-size: 13px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  outline: none;
}

.oc-sidebar-search-input:focus {
  border-color: var(--info);
  box-shadow: 0 0 0 3px rgba(37,99,235,.1);
}

.oc-sidebar-search-wrap {
  position: relative;
}

.oc-sidebar-search-icon {
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: .72rem;
  pointer-events: none;
}

/* ── Sidebar favorites ───────────────────────────────────────────────────── */

.oc-nav-favorites-section { border-bottom: 1px solid var(--border); padding-bottom: 4px; margin-bottom: 4px; }
.oc-nav-favorites-label { padding: 8px 16px 2px; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--primary); }

.oc-nav-link-wrap {
  display: flex;
  align-items: center;
  position: relative;
}

.oc-nav-link-wrap .oc-nav-link {
  flex: 1;
  padding-right: 32px;
}

.oc-nav-fav-btn {
  position: absolute;
  right: 8px;
  width: 20px;
  height: 20px;
  border: none;
  background: none;
  color: var(--border-strong);
  cursor: pointer;
  font-size: .7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  opacity: 0;
  transition: opacity .1s, color .1s;
}

.oc-nav-link-wrap:hover .oc-nav-fav-btn { opacity: 1; }
.oc-nav-fav-btn.is-favorited { color: var(--primary); opacity: 1; }
.oc-nav-fav-btn:hover { background: var(--bg); }

.oc-sidebar-account {
  margin-top: auto;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}

.oc-sidebar-account-user {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 2px 4px 8px;
  color: var(--text);
}

.oc-sidebar-account-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}

.oc-sidebar-account-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .82rem;
  font-weight: 700;
}

.oc-sidebar-account-role,
.oc-sidebar-account-mobile {
  color: var(--text-muted);
  font-size: .72rem;
  font-weight: 600;
}

.oc-sidebar-account-mobile { display: none; }
.oc-sidebar-signout { border-radius: 6px; }

/* ── DataGrid container ──────────────────────────────────────────────────── */

.data-grid-container {
  width: 100%;
  height: 100%;
}

.data-grid-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.data-grid-toolbar-count {
  font-size: .8rem;
  color: var(--text-muted);
  margin-left: auto;
}

/* Short labels hidden by default; swapped in via the mobile media query below */
.kpi-label-short { display: none; }

/* ── Mobile Dashboard (≤768px) ──────────────────────────────── */
@media (max-width: 768px) {
    :root {
        --sidebar-width: 280px;
    }

    .oc-sidebar {
        height: 100svh;
        height: 100dvh;
        max-width: 100vw;
    }

    .oc-nav {
        padding: 4px 0;
    }

    .oc-nav-link {
        padding-top: 6px;
        padding-bottom: 6px;
    }

    .oc-nav-sub .oc-nav-link {
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .oc-nav-section-toggle {
        padding-top: 10px;
        padding-bottom: 5px;
    }

    .oc-sidebar-account {
        padding-top: 8px;
        padding-bottom: max(10px, env(safe-area-inset-bottom));
        position: sticky;
        bottom: 0;
        z-index: 2;
    }

    .oc-sidebar-account-text {
        display: none;
    }

    .oc-sidebar-account-mobile {
        display: inline;
        color: var(--text);
        font-size: .82rem;
        font-weight: 700;
    }

    /* 1. Responsive header — single row, clock hidden to save space */
    .oc-topbar {
        padding: 0 8px;
        height: 48px;
        min-height: 48px;
    }
    .oc-topbar-right {
        display: none;
    }

    /* 2. Compact 3-column KPI grid */
    .critical-section .critical-kpi-row,
    .kpi-row {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 4px;
        margin-bottom: 4px;
    }
    .kpi-card {
        height: 30px;
        min-height: 30px;
        padding: 0 6px;
        border-radius: 15px;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 3px;
        width: 100%;
        min-width: 0;
    }
    .kpi-value {
        font-size: .95rem;
        font-weight: 700;
        line-height: 1;
    }
    .kpi-label {
        margin-top: 0;
    }
    .kpi-label i {
        font-size: .75rem;
    }

    /* 3. KPI label long/short toggle */
    .kpi-label-long { display: none; }
    .kpi-label-short { display: inline; }

    /* 4. KPI display order — down/out/crit · health/ack/rev · up/dev/site */
    .kpi-down            { order: 1; }
    .kpi-ticket          { order: 2; }
    .kpi-critical        { order: 3; }
    #kpi-health-card     { order: 4; }
    .kpi-acknowledged    { order: 5; }
    .kpi-awaiting-review { order: 6; }
    .kpi-up              { order: 7; }
    .kpi-total           { order: 8; }
    #kpi-simulated-card  { order: 9; }

    /* 5. Remove page padding so critical-section and site cards fill edge-to-edge */
    .operations-page {
        padding: 0;
    }
    /* Neutralise the negative margin-top that compensated for the old operations-page padding */
    .operations-page > .critical-section:first-child {
        margin-top: 0;
    }
    .critical-section {
        margin: 0;
        padding: 4px;
        gap: 4px;
    }
    .dashboard-main {
        padding: 0;
        align-items: stretch;
    }

    /* 5. Full-width site cards */
    .down-site-area,
    .down-site-cards {
        width: 100%;
    }
    .down-site-cards {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .down-site-card {
        width: 100%;
        max-width: 100%;
        border-radius: 0;
        margin-bottom: 8px;
    }

    /* 6. Site header — truncate long names with ellipsis */
    .down-site-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }
    .down-site-name {
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* 7. Compact device rows */
    .down-device-row {
        padding: 8px;
    }
    .down-device-name {
        font-size: 13px;
    }
    .down-device-duration {
        font-size: 12px;
    }
}