/* ============================================================
   Lightspeed Signal Demo — Design tokens from source CSS
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

@font-face {
  font-family: 'relay-icons';
  src: url('../vendor/relay-icons.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}
.relay-icon {
  font-family: 'relay-icons'; font-style: normal; font-weight: normal;
  display: inline-block; line-height: 1; speak: none;
}

:root {
  color-scheme: light; /* prevent browser dark-mode from overriding form elements */

  /* ---- Layout ---- */
  --nav-width-desktop: 256px;
  --top-bar-height: 64px;

  /* ---- Font ---- */
  --font-stack: "Roboto", "Helvetica", "Arial", sans-serif;
  --font-size--default: 16px;
  --font-size--small: 14px;
  --font-size--tiny: 12px;

  /* ---- Primary (teal) ---- */
  --c-primary: #007fa5;
  --c-primary-1a: rgba(0, 127, 165, .102);
  --c-primary-26: rgba(0, 127, 165, .149);
  --c-primary-0d: rgba(0, 127, 165, .051);
  --c-primary-active: #005169;
  --c-primary-hover: #006b8b;

  /* ---- Teal scale (used in back-arrow, chip backgrounds) ---- */
  --c-teal100: #e0f2f8;
  --c-teal700: #006b8b;

  /* ---- Indigo (sidebar) ---- */
  --c-indigo: #041e42;
  --c-indigo-26: rgba(4, 30, 66, .149);

  /* ---- Grey scale ---- */
  --c-grey50:  #fafafa;
  --c-grey100: #f8f8f9;
  --c-grey200: #e9ebed;
  --c-grey300: #d8dcde;
  --c-grey400: #c2c8cc;
  --c-grey500: #87929d;
  --c-grey600: #68737d;
  --c-grey700: #49545c;
  --c-grey800: #2f3941;

  /* ---- Semantic ---- */
  --c-success:    #15655c;
  --c-success-1a: rgba(21, 101, 92, .102);
  --c-success-bg: #f5fbef;
  --c-warning:    #b14300;
  --c-warning-1a: rgba(177, 67, 0, .102);
  --c-warning-bg: #fff5ea;
  --c-danger:     #d32f2f;
  --c-danger-1a:  rgba(162, 19, 85, .102);
  --c-danger-bg:  #fff1f3;

  /* ---- Spacing ---- */
  --padding-xs:  4px;
  --padding-sm:  8px;
  --padding-smd: 12px;
  --padding-md:  16px;
  --padding-lg:  24px;
  --padding-xl:  32px;
  --padding-xxl: 48px;

  /* ---- Radius ---- */
  --border-radius:        8px;
  --border-radius--small: 4px;
  --border-radius--large: 16px;

  /* ---- Shadows ---- */
  --elevation-1dp: 0px 1px 2px 0px rgba(0,0,0,.1);
  --elevation-4dp: 0px 4px 8px rgba(0,0,0,.1);
  --box-shadow--modal: 0 12px 24px rgba(0,0,0,.1);
}

/* ============================================================
   RESET / BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  font-family: var(--font-stack);
  font-size: var(--font-size--default);
  color: var(--c-grey800);
  background: white;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1 { font-size: 28px; font-weight: 300; color: var(--c-grey800); margin: 0; }

a { text-decoration: none; color: inherit; }
button { font-family: var(--font-stack); cursor: pointer; }

/* ============================================================
   APP SHELL — CSS GRID (matches source: grid-template-areas)
   ============================================================ */
.app-shell {
  display: grid;
  grid-template-columns: var(--nav-width-desktop) 1fr;
  grid-template-rows: var(--top-bar-height) 1fr;
  grid-template-areas:
    "header header"
    "nav    content";
  min-height: 100vh;
  position: fixed;
  width: 100vw;
}
.app-shell.nav-collapsed {
  grid-template-columns: 0 1fr;
}
.app-shell.nav-collapsed .app-nav {
  width: 0;
  overflow: hidden;
  border-right: none;
}

/* ============================================================
   TOP HEADER
   ============================================================ */
.app-header {
  grid-area: header;
  background: white;
  border-bottom: 1px solid var(--c-grey300);
  display: flex;
  align-items: center;
  padding: 0 var(--padding-md);
  gap: var(--padding-sm);
  z-index: 50;
  box-shadow: var(--elevation-1dp);
}

.header-left {
  display: flex;
  align-items: center;
  gap: var(--padding-sm);
  flex: 1;
  overflow: hidden;
}

.header-logo-btn {
  width: 40px;
  height: 40px;
  background: var(--c-indigo);
  border-radius: var(--border-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: none;
  cursor: pointer;
}

.header-logo-btn svg {
  width: 40px;
  height: 40px;
  fill: white;
}

.header-waffle-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--border-radius--small);
  border: none;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .15s;
}
.header-waffle-btn svg { width: 18px; height: 18px; }
.header-waffle-btn:hover { background: var(--c-grey100); }

/* Waffle menu dropdown */
.waffle-menu {
  position: fixed;
  top: 56px;
  left: 56px;
  background: #fff;
  border: 1px solid var(--c-grey200);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  min-width: 280px;
  padding: 6px 0;
  z-index: 300;
}
.waffle-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  font-size: 14px;
  color: #2f3941;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.waffle-menu-item:hover { background: #f5f5f6; text-decoration: none; color: #2f3941; }
.waffle-menu-disabled { color: #9ca3af; cursor: default; }
.waffle-menu-disabled:hover { background: transparent; }
body.dark-mode .waffle-menu { background: #222240; border-color: #3a3a5c; }
body.dark-mode .waffle-menu-item { color: var(--c-text); }
body.dark-mode .waffle-menu-item:hover { background: #2a2a4a; color: var(--c-text); }

.header-org-selectors {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.org-selector-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  width: 240px;
  height: 40px;
  border: 1px solid var(--c-grey200);
  border-radius: var(--border-radius--small);
  background: white;
  font-family: var(--font-stack);
  font-size: 13px;
  color: var(--c-grey800);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  flex-shrink: 0;
  box-sizing: border-box;
  transition: border-color .15s;
}
.org-selector-btn:hover { border-color: var(--c-grey400); }

.org-selector-text {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  flex: 1;
}

.org-selector-btn .org-label {
  font-size: 12px;
  color: var(--c-grey600);
  font-weight: 400;
  flex-shrink: 0;
}

.org-selector-btn .org-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--c-grey800);
  font-size: 14px;
  line-height: 16px;
}

.org-sep { color: var(--c-grey400); font-size: 12px; flex-shrink: 0; }

.org-selector-icons {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.header-icon-group {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 4px;
}

.header-icon-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--border-radius--small);
  border: none;
  background: none;
  color: var(--c-grey600);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  transition: background .15s, color .15s;
  position: relative;
  flex-shrink: 0;
}
.header-icon-btn:hover { background: var(--c-grey100); color: var(--c-grey800); }
.header-icon-btn:focus { outline: none; background: var(--c-primary-0d); color: var(--c-primary); }

.help-menu-wrapper {
  position: relative;
}
.help-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: #fff;
  border: 1px solid var(--c-grey200);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  min-width: 210px;
  z-index: 300;
  padding: 4px;
}
.help-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--c-grey700);
  text-decoration: none;
  white-space: nowrap;
}
.help-menu-item:hover {
  background: var(--c-grey100);
  color: var(--c-grey900);
}
.help-menu-item i {
  font-size: 14px;
  color: var(--c-grey500);
}

.header-right {
  display: flex;
  align-items: center;
  gap: var(--padding-sm);
  flex-shrink: 0;
}

.header-search {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--c-grey300);
  border-radius: var(--border-radius--small);
  padding: 0 10px;
  height: 40px;
  background: white;
  font-size: 13px;
  color: var(--c-grey500);
  width: 240px;
  cursor: text;
  transition: border-color .15s;
}
.header-search:hover { border-color: var(--c-grey400); }
.header-search i { font-size: 14px; flex-shrink: 0; }

.user-avatar-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--c-primary);
  color: white;
  font-size: 11.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  letter-spacing: .3px;
  flex-shrink: 0;
}

/* ============================================================
   SIDEBAR NAV — white background, dark text (matches actual product)
   ============================================================ */
.app-nav {
  grid-area: nav;
  background: white;
  border-right: 1px solid var(--c-grey300);
  height: calc(100vh - var(--top-bar-height));
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.app-nav::-webkit-scrollbar { width: 3px; }
.app-nav::-webkit-scrollbar-thumb { background: var(--c-grey300); border-radius: 2px; }

.nav-section { padding: 8px 12px; flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
.nav-section::-webkit-scrollbar { width: 3px; }
.nav-section::-webkit-scrollbar-thumb { background: var(--c-grey300); border-radius: 2px; }

.nav-bottom {
  flex-shrink: 0;
  padding: 8px 12px;
  border-top: 1px solid var(--c-grey200);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 8px;
  color: var(--c-grey800);
  font-size: 14px;
  cursor: pointer;
  transition: background .12s, color .12s;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-family: var(--font-stack);
  border-radius: var(--border-radius);
}
.nav-item:hover { background: var(--c-grey100); color: var(--c-grey800); }

/* Parent item — teal when expanded */
.nav-item.parent-open { color: var(--c-primary); }
.nav-item.parent-open:hover { color: var(--c-primary); }

.nav-icon { width: 16px; text-align: center; font-size: 14px; flex-shrink: 0; }
svg.nav-icon { width: 16px; height: 16px; fill: currentColor; display: block; }

.nav-chevron { margin-left: auto; font-size: 12px; color: var(--c-grey800); transition: transform .18s; }
.nav-item.parent-open .nav-chevron { transform: rotate(180deg); }

.nav-subitems { display: none; background: white; }
.nav-item.parent-open + .nav-subitems { display: block; }

.nav-subitem {
  display: flex;
  align-items: center;
  padding: 10px 8px 10px 40px;
  color: var(--c-grey800);
  font-size: 14px;
  cursor: pointer;
  transition: background .12s, color .12s;
  font-family: var(--font-stack);
  border-radius: var(--border-radius);
}
.nav-subitem:hover { color: var(--c-grey800); background: var(--c-grey100); }

/* Active sub-item — teal text + light teal fill, no border */
.nav-subitem.active {
  color: var(--c-primary);
  background: var(--c-primary-0d);
  font-weight: 500;
}

/* Active state for direct-link nav items (e.g. Classroom rules) */
.nav-item.nav-item-active {
  color: var(--c-primary);
  background: var(--c-primary-0d);
  font-weight: 500;
}
.nav-item.nav-item-active:hover { background: var(--c-primary-0d); }

.nav-divider { height: 1px; background: var(--c-grey200); margin: 8px 0; }

.nav-badge {
  font-size: 10px;
  font-weight: 500;
  padding: 1px 7px;
  border-radius: 8px;
  background: var(--c-grey200);
  color: var(--c-grey600);
  margin-left: auto;
  flex-shrink: 0;
}

/* ============================================================
   MAIN CONTENT
   ============================================================ */
.app-content {
  grid-area: content;
  height: calc(100vh - var(--top-bar-height));
  overflow-y: auto;
  overflow-x: hidden;
  background: white;
  display: flex;
  flex-direction: column;
}

.page-inner {
  padding: var(--padding-xl) var(--padding-xl);
  flex: 1;
}

/* Page titles — from source: 32px 700 letter-spacing:-.64px */
.page-inner h1 {
  font-size: 32px;
  font-weight: 700;
  line-height: 40px;
  letter-spacing: -.64px;
  margin: 0 0 4px;
  color: var(--c-grey800);
}

.page-subtitle {
  font-size: var(--font-size--small);
  color: var(--c-grey600);
  margin-bottom: var(--padding-lg);
}

/* ============================================================
   PAGE HEADER ROW
   ============================================================ */
.page-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--padding-lg);
}

.page-actions { display: flex; align-items: center; gap: var(--padding-sm); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--border-radius--small);
  font-size: var(--font-size--small);
  font-family: var(--font-stack);
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  border: 1px solid transparent;
  line-height: 1.4;
  white-space: nowrap;
}

.btn-primary {
  background: var(--c-primary);
  color: white;
  border-color: var(--c-primary);
}
.btn-primary:hover { background: var(--c-primary-hover); border-color: var(--c-primary-hover); }
.btn-primary:active { background: var(--c-primary-active); }

.btn-outline {
  background: white;
  color: var(--c-grey700);
  border-color: var(--c-grey300);
}
.btn-outline:hover { background: var(--c-grey100); border-color: var(--c-grey400); }

.btn-ghost {
  background: none;
  border-color: transparent;
  color: var(--c-grey600);
}
.btn-ghost:hover { background: var(--c-grey100); }

.btn-sm { padding: 5px 10px; font-size: var(--font-size--tiny); }

.btn i { font-size: 14px; }

/* ============================================================
   FILTER BAR
   ============================================================ */
.filter-bar {
  display: flex;
  align-items: center;
  gap: var(--padding-sm);
  margin-bottom: 10px;
}

.filter-status-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border: 1px solid var(--c-grey300);
  border-radius: var(--border-radius--small);
  background: white;
  font-size: var(--font-size--small);
  color: var(--c-grey800);
  font-family: var(--font-stack);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.filter-status-btn:hover { border-color: var(--c-grey400); background: var(--c-grey100); }
.filter-status-btn .filter-label { color: var(--c-grey600); }
.filter-status-btn .filter-value { font-weight: 500; }
.filter-status-btn i { color: var(--c-grey500); font-size: 12px; }

.filter-search-btn {
  width: 34px;
  height: 34px;
  border: 1px solid var(--c-grey300);
  border-radius: var(--border-radius--small);
  background: white;
  color: var(--c-grey600);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 15px;
  transition: border-color .15s;
}
.filter-search-btn:hover { border-color: var(--c-grey400); background: var(--c-grey100); }

.results-count {
  font-size: var(--font-size--small);
  color: var(--c-grey700);
  margin-bottom: var(--padding-md);
  font-weight: 500;
}

/* ============================================================
   TABLE
   ============================================================ */
.data-table-wrap {
  border: 1px solid var(--c-grey200);
  border-radius: var(--border-radius);
  overflow: hidden;
  background: white;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table thead th {
  background: var(--c-grey100);
  border-bottom: 1px solid var(--c-grey200);
  padding: 10px 16px;
  font-size: 11px;
  font-weight: 700;
  color: var(--c-grey600);
  text-align: left;
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
}

.data-table thead th .th-inner {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.data-table thead th i { font-size: 11px; color: var(--c-grey400); cursor: pointer; }
.data-table thead th i:hover { color: var(--c-grey600); }

.data-table tbody tr {
  border-bottom: 1px solid var(--c-grey200);
  cursor: pointer;
  transition: background .1s;
}
.data-table tbody tr:last-child { border-bottom: none; }
.data-table tbody tr:hover { background: var(--c-primary-0d); }

.data-table td {
  padding: 13px 16px;
  font-size: var(--font-size--small);
  color: var(--c-grey800);
  vertical-align: middle;
}

/* App cell */
.app-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.app-logo {
  width: 34px;
  height: 34px;
  border-radius: 6px;
  object-fit: contain;
  background: var(--c-grey50);
  border: 1px solid var(--c-grey200);
  padding: 3px;
  flex-shrink: 0;
}

.app-name { font-weight: 500; color: var(--c-grey800); font-size: 14px; }

/* Timestamp */
.ts-cell { color: var(--c-grey700); font-size: var(--font-size--small); }

/* Status badge — matches actual site: subtle outlined pill */
.status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid;
  white-space: nowrap;
}

.status-operational {
  background: var(--c-success-bg);
  color: var(--c-success);
  border-color: rgba(21, 101, 92, .25);
}

.status-degraded {
  background: var(--c-warning-bg);
  color: var(--c-warning);
  border-color: rgba(177, 67, 0, .25);
}

.status-critical {
  background: var(--c-danger-bg);
  color: var(--c-danger);
  border-color: rgba(211, 47, 47, .25);
}

/* Row action menu */
.row-menu-btn {
  width: 28px;
  height: 28px;
  border-radius: var(--border-radius--small);
  border: none;
  background: none;
  color: var(--c-grey500);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  transition: background .12s, color .12s;
  opacity: 0;
}
.data-table tbody tr:hover .row-menu-btn { opacity: 1; }
.row-menu-btn:hover { background: var(--c-grey200); color: var(--c-grey800); }

/* ============================================================
   DETAIL PAGE
   ============================================================ */
.detail-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 400;
  color: var(--c-teal700);
  background: white;
  border: none;
  padding: 0;
  margin-bottom: 24px;
  cursor: pointer;
  transition: color .12s;
  font-family: var(--font-stack);
}
.detail-back:hover { color: var(--c-primary-active); }
.detail-back i { font-size: 14px; }

.detail-app-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: var(--padding-lg);
}

.detail-app-logo {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: contain;
  background: var(--c-grey50);
  border: 1px solid var(--c-grey200);
  padding: 3px;
  flex-shrink: 0;
}

.detail-app-name {
  font-size: 22px;
  font-weight: 700;
  color: var(--c-grey800);
  margin-right: var(--padding-sm);
}

.detail-header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--padding-sm);
}

.notify-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--border-radius--small);
  background: white;
  border: 1px solid var(--c-grey300);
  font-size: 13px;
  color: var(--c-grey700);
  font-family: var(--font-stack);
  cursor: pointer;
  font-weight: 500;
  transition: all .15s;
}
.notify-btn:hover { background: var(--c-grey100); }

.notify-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--c-primary);
  color: white;
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Metrics + chart two-column layout */
.detail-main-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--padding-md);
  margin-bottom: var(--padding-lg);
}

.detail-metrics { display: flex; flex-direction: column; gap: var(--padding-sm); }
.detail-metrics-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--padding-sm); }

.metric-card {
  border: 1px solid var(--c-grey200);
  border-radius: var(--border-radius);
  padding: 20px 22px;
  background: white;
}

.metric-card .m-label {
  font-size: var(--font-size--tiny);
  color: var(--c-grey600);
  font-weight: 500;
  margin-bottom: 6px;
}

.metric-card .m-value {
  font-size: 36px;
  font-weight: 700;
  color: var(--c-grey800);
  line-height: 1;
  letter-spacing: -.5px;
}

.metric-card .m-value.big-zero { color: var(--c-grey800); }

.metric-card .m-sub {
  font-size: 11.5px;
  color: var(--c-grey500);
  margin-top: 4px;
}

.metric-card .m-sub-row {
  display: flex;
  align-items: center;
  gap: var(--padding-md);
  margin-top: var(--padding-sm);
  font-size: 12.5px;
}

.m-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  margin-right: 4px;
  flex-shrink: 0;
}
.m-dot.critical { background: var(--c-danger); }
.m-dot.degraded { background: var(--c-warning); }

.m-sub-item { display: flex; align-items: center; gap: 2px; color: var(--c-grey700); }

.metric-card .m-sm-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--c-grey800);
  line-height: 1;
  letter-spacing: -.3px;
}

/* Chart card */
.chart-card {
  border: 1px solid var(--c-grey200);
  border-radius: var(--border-radius);
  padding: 20px;
  background: white;
  display: flex;
  flex-direction: column;
}

.chart-title {
  font-size: var(--font-size--small);
  font-weight: 700;
  color: var(--c-grey800);
  margin-bottom: var(--padding-md);
}

.chart-area { flex: 1; min-height: 160px; position: relative; }

/* Incidents section */
.incidents-section-header {
  display: flex;
  align-items: center;
  gap: var(--padding-sm);
  margin-bottom: var(--padding-md);
  flex-wrap: wrap;
}

.incidents-section-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--c-grey800);
  letter-spacing: -.3px;
}

.time-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border: 1px solid var(--c-grey300);
  border-radius: 20px;
  font-size: 13px;
  color: var(--c-grey700);
  background: white;
  cursor: pointer;
  font-family: var(--font-stack);
  transition: all .12s;
}
.time-filter-pill:hover { border-color: var(--c-grey400); background: var(--c-grey100); }
.time-filter-pill i { font-size: 12px; color: var(--c-grey500); }

.date-filter-wrapper { position: relative; display: inline-block; }
.date-filter-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 200;
  background: white;
  border: 1px solid var(--c-grey200);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,.10);
  min-width: 200px;
  padding: 8px 0 12px;
}
.date-filter-dropdown.open { display: block; }
.date-filter-options { display: flex; flex-direction: column; padding: 4px 0; }
.date-filter-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 20px;
  font-size: 13px;
  color: var(--c-grey700);
  cursor: pointer;
  font-family: var(--font-stack);
}
.date-filter-option:hover { background: var(--c-grey50); }
input[type="checkbox"] { accent-color: var(--c-primary); }

.date-filter-option input[type="radio"],
.date-filter-option input[type="checkbox"] {
  accent-color: var(--c-primary);
  width: 16px;
  height: 16px;
  cursor: pointer;
  flex-shrink: 0;
}

.status-filter-wrapper { position: relative; display: inline-block; }

/* Row context menu */
.row-context-menu {
  position: fixed;
  z-index: 300;
  background: white;
  border: 1px solid var(--c-grey200);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  min-width: 200px;
  padding: 6px 0;
  display: none;
}
.row-context-menu.open { display: block; }
.row-context-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 16px;
  border: none;
  background: none;
  font-family: var(--font-stack);
  font-size: 14px;
  color: var(--c-grey800);
  cursor: pointer;
  text-align: left;
  transition: background .12s;
}
.row-context-item:hover { background: var(--c-grey50); }
.row-context-item i { font-size: 15px; color: var(--c-grey500); flex-shrink: 0; }
.row-context-item--danger { color: var(--c-danger); }
.row-context-item--danger i { color: var(--c-danger); }

/* Danger outline button */
.btn-danger-outline {
  background: white;
  color: var(--c-danger);
  border-color: var(--c-danger);
}
.btn-danger-outline:hover { background: var(--c-danger-bg); }

/* Expanding search in filter bar */
.app-search-wrap { position: relative; display: inline-flex; align-items: center; }
.app-search-expanded {
  display: none;
  align-items: center;
  gap: 0;
  border: 1px solid var(--c-primary);
  border-radius: var(--border-radius--small);
  background: white;
  box-shadow: 0 0 0 2px var(--c-primary-1a);
  height: 34px;
  width: 240px;
  padding: 0 6px 0 10px;
}
.app-search-wrap.open .app-search-icon-btn { display: none; }
.app-search-wrap.open .app-search-expanded { display: flex; }
.app-search-lead-icon { font-size: 14px; color: var(--c-grey400); flex-shrink: 0; margin-right: 6px; }
.app-search-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: var(--font-size--small);
  font-family: var(--font-stack);
  color: var(--c-grey800);
  background: transparent;
}
.app-search-input::placeholder { color: var(--c-grey400); }
.app-search-clear {
  width: 22px;
  height: 22px;
  border: none;
  background: none;
  color: var(--c-grey500);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  cursor: pointer;
  border-radius: 50%;
  flex-shrink: 0;
  transition: background .12s, color .12s;
}
.app-search-clear:hover { background: var(--c-grey200); color: var(--c-grey800); }
.date-filter-actions {
  display: flex;
  gap: 8px;
  padding: 10px 20px 0;
  border-top: 1px solid var(--c-grey100);
  margin-top: 4px;
}
.date-filter-apply {
  padding: 6px 16px;
  background: var(--c-primary);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-family: var(--font-stack);
  cursor: pointer;
}
.date-filter-apply:hover { background: var(--c-primary-dark, #006b8c); }
.date-filter-cancel {
  padding: 6px 16px;
  background: white;
  color: var(--c-grey700);
  border: 1px solid var(--c-grey300);
  border-radius: 6px;
  font-size: 13px;
  font-family: var(--font-stack);
  cursor: pointer;
}
.date-filter-cancel:hover { background: var(--c-grey50); }

/* ---- Custom date range picker ---- */
.date-filter-dropdown.has-calendar { flex-direction: row; align-items: flex-start; padding: 0; }
.date-filter-dropdown.has-calendar.open { display: flex; }
.dfd-left { padding: 8px 0 12px; min-width: 200px; }
.dfd-right {
  display: none;
  border-left: 1px solid var(--c-grey100);
  padding: 16px 20px;
}
.dfd-right.visible { display: block; }
.dfc-inputs {
  display: none;
  flex-direction: row;
  gap: 8px;
  padding: 4px 16px 8px;
}
.dfc-inputs.visible { display: flex; }
.dfc-input-field {
  display: flex; align-items: center; gap: 6px;
  border: 1px solid var(--c-grey300); border-radius: 6px;
  padding: 6px 8px; font-size: 12px; color: var(--c-grey700); flex: 1;
}
.dfc-input-field i { color: var(--c-grey400); font-size: 11px; flex-shrink: 0; }
.dfc-input-field input {
  border: none; outline: none; font-size: 12px; width: 72px;
  color: var(--c-grey700); background: transparent; cursor: default;
}
.dfc-months { display: flex; gap: 20px; }
.dfc-month { min-width: 210px; }
.dfc-month-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px; font-weight: 600; font-size: 13px; color: var(--c-grey800);
}
.dfc-nav-btn {
  background: none; border: none; cursor: pointer;
  color: var(--c-grey500); font-size: 12px; padding: 3px 6px;
  border-radius: 4px; line-height: 1; display: flex; align-items: center;
}
.dfc-nav-btn:hover { background: var(--c-grey100); color: var(--c-grey700); }
.dfc-cal-grid { display: grid; grid-template-columns: repeat(7, 30px); }
.dfc-dow {
  text-align: center; font-size: 11px; color: var(--c-grey500);
  padding: 4px 0; font-weight: 500;
}
.dfc-day {
  text-align: center; font-size: 12px; color: var(--c-grey700);
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; border-radius: 50%; transition: background .1s;
}
.dfc-day:hover:not(.dfc-empty):not(.dfc-other) { background: var(--c-grey100); }
.dfc-day.dfc-today { background: #1baaa0; color: white; font-weight: 600; }
.dfc-day.dfc-selected, .dfc-day.dfc-range-start, .dfc-day.dfc-range-end {
  background: #1baaa0; color: white; font-weight: 600;
}
.dfc-day.dfc-range-start { border-radius: 50% 0 0 50%; }
.dfc-day.dfc-range-end { border-radius: 0 50% 50% 0; }
.dfc-day.dfc-range-start.dfc-range-end { border-radius: 50%; }
.dfc-day.dfc-in-range { background: #e0f4f3; border-radius: 0; color: var(--c-grey800); }
.dfc-day.dfc-empty, .dfc-day.dfc-other { color: var(--c-grey300); cursor: default; background: none; }

.add-filter-btn {
  padding: 5px 14px;
  border: 1px solid var(--c-grey300);
  border-radius: 20px;
  font-size: 13px;
  color: var(--c-grey700);
  background: white;
  cursor: pointer;
  font-family: var(--font-stack);
  transition: all .12s;
}
.add-filter-btn:hover { border-color: var(--c-grey400); background: var(--c-grey100); }

.incidents-results-count {
  font-size: var(--font-size--small);
  color: var(--c-grey700);
  margin-bottom: var(--padding-md);
  font-weight: 500;
}

/* Empty state */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--padding-xxl, 48px) var(--padding-lg);
  text-align: center;
}

.empty-state-icon {
  font-size: 40px;
  color: var(--c-grey400);
  margin-bottom: var(--padding-md);
}

.empty-state-title {
  font-size: var(--font-size--small);
  font-weight: 600;
  color: var(--c-grey700);
  margin-bottom: 4px;
}

.empty-state-sub {
  font-size: 13px;
  color: var(--c-grey500);
  max-width: 360px;
}

/* Incidents table */
.incidents-table-wrap {
  border: 1px solid var(--c-grey200);
  border-radius: var(--border-radius);
  overflow: hidden;
}

.incidents-table { width: 100%; border-collapse: collapse; }
.incidents-table thead th {
  background: var(--c-grey100);
  border-bottom: 1px solid var(--c-grey200);
  padding: 9px 16px;
  font-size: 11px;
  font-weight: 700;
  color: var(--c-grey600);
  text-align: left;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.incidents-table td {
  padding: 12px 16px;
  font-size: 13.5px;
  color: var(--c-grey700);
  border-bottom: 1px solid var(--c-grey200);
  vertical-align: middle;
}
.incidents-table tbody tr:last-child td { border-bottom: none; }
.incidents-table tbody tr:hover { background: var(--c-grey50); }

/* Severity badges */
.sev-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--border-radius--small);
  font-size: 12px;
  font-weight: 600;
  border: 1px solid;
}
.sev-critical { background: var(--c-danger-bg); color: var(--c-danger); border-color: rgba(211,47,47,.2); }
.sev-major    { background: var(--c-warning-bg); color: var(--c-warning); border-color: rgba(177,67,0,.2); }
.sev-minor    { background: var(--c-success-bg); color: var(--c-success); border-color: rgba(21,101,92,.2); }
.sev-info     { background: var(--c-primary-1a); color: var(--c-primary); border-color: rgba(0,127,165,.2); }

/* Resolve status */
.res-resolved { color: var(--c-success); font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 4px; }
.res-ongoing  { color: var(--c-warning); font-size: 13px; font-weight: 500; }

/* ============================================================
   MODAL
   ============================================================ */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
.modal-backdrop.open { opacity: 1; pointer-events: all; }

.modal-dialog {
  background: white;
  border-radius: var(--border-radius);
  width: 100%;
  max-width: 500px;
  box-shadow: var(--box-shadow--modal);
  transform: translateY(8px);
  transition: transform .2s;
}
.modal-backdrop.open .modal-dialog { transform: translateY(0); }

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--padding-lg) var(--padding-lg) var(--padding-md);
  border-bottom: 1px solid var(--c-grey200);
}

.modal-title-row { display: flex; align-items: center; gap: var(--padding-md); flex: 1; }

/* Modal title — from source: 26px 700 letter-spacing:-.52px line-height:36px */
.modal-title {
  font-size: 26px;
  font-weight: 700;
  line-height: 36px;
  letter-spacing: -.52px;
  color: var(--c-grey800);
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
}

/* App badge shown inside modal header (logo + name) */
.modal-app-badge { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--c-grey700); font-weight: 500; }
.modal-app-badge img { width: 20px; height: 20px; border-radius: 4px; }

/* App container in modal body — from source: padding 0 8px, gap 8px */
.modal-app-container {
  display: flex;
  padding: 0 8px;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--padding-md);
}

/* App logo inside modal — 48x48 with 8px internal padding */
.modal-app-logo {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: flex;
  padding: 8px;
  align-items: center;
  gap: 10px;
  border-radius: 8px;
  border: 1px solid var(--c-grey200);
  background: var(--c-grey50);
}
.modal-app-logo img { width: 100%; height: 100%; object-fit: contain; }

/* App name inside modal — 16px 500 */
.modal-app-name {
  color: var(--c-grey800);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: .007px;
}

.modal-close-btn {
  width: 28px;
  height: 28px;
  border: none;
  background: none;
  color: var(--c-grey500);
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: var(--border-radius--small);
  flex-shrink: 0;
}
.modal-close-btn:hover { background: var(--c-grey100); color: var(--c-grey800); }

.modal-body { padding: var(--padding-md) var(--padding-lg); }
.modal-desc { font-size: 13.5px; color: var(--c-grey600); margin-bottom: var(--padding-md); }

.modal-footer {
  padding: var(--padding-md) var(--padding-lg);
  border-top: 1px solid var(--c-grey200);
  display: flex;
  justify-content: flex-end;
  gap: var(--padding-sm);
}

/* Form elements */
.form-group { margin-bottom: var(--padding-md); }
.form-label { display: block; font-size: 13px; font-weight: 500; color: var(--c-grey700); margin-bottom: 5px; }

.form-input {
  width: 100%;
  height: 40px;
  border: 1px solid var(--c-grey300);
  border-radius: var(--border-radius--small);
  padding: 0 12px;
  font-size: var(--font-size--small);
  font-family: var(--font-stack);
  color: var(--c-grey800);
  background: white;
  outline: none;
  transition: border-color .15s;
}
.form-input:focus { border-color: var(--c-primary); box-shadow: 0 0 0 2px var(--c-primary-1a); }
.form-input::placeholder { color: var(--c-grey400); }

.input-row {
  display: flex;
  gap: var(--padding-sm);
}
.input-row .form-input { flex: 1; }

.form-select {
  width: 100%;
  height: 40px;
  border: 1px solid var(--c-grey300);
  border-radius: var(--border-radius--small);
  padding: 0 12px;
  font-size: var(--font-size--small);
  font-family: var(--font-stack);
  color: var(--c-grey800);
  background: white;
  outline: none;
  cursor: pointer;
  appearance: auto;
  transition: border-color .15s;
}
.form-select:focus { border-color: var(--c-primary); box-shadow: 0 0 0 2px var(--c-primary-1a); }

/* ============================================================
   BACK ARROW BUTTON
   From source: color teal700, no border, white bg, 16px Roboto 400
   ============================================================ */
.back-arrow-btn {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border: none;
  color: var(--c-teal700);
  background-color: #fff;
  font-family: var(--font-stack);
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 24px;
  padding: 0;
}
.back-arrow-btn:hover { color: var(--c-primary-active); }

/* ============================================================
   URL LIST (inside "Manage domains/URLs" modal)
   ============================================================ */
.url-list {
  margin: 24px 0 0;
  padding-bottom: 24px;
}

.url-item {
  align-items: center;
  border-radius: var(--border-radius--small);
  display: flex;
  gap: 12px;
  padding: 8px 12px;
  transition: background .12s;
}
.url-item:hover { background-color: var(--c-grey100); }

.url-item .url-text {
  flex-grow: 1;
  overflow-x: hidden;
  text-overflow: ellipsis;
  text-wrap: nowrap;
  width: 100%;
  font-size: var(--font-size--small);
  color: var(--c-grey800);
}

.url-item .url-delete {
  cursor: pointer;
  color: var(--c-grey800);
  background: none;
  border: none;
  font-size: 15px;
  display: flex;
  align-items: center;
  padding: 0;
  opacity: .5;
  transition: opacity .12s;
}
.url-item:hover .url-delete { opacity: 1; }

/* ============================================================
   NOTIFICATION SEARCH (inside global notifications modal)
   ============================================================ */
.notif-search-wrap { position: relative; }
.notif-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--c-grey400);
  font-size: 15px;
  pointer-events: none;
}
.notif-search-wrap .form-input { padding-left: 34px; }

/* Avatar circle (initials) inside notification list */
.notif-avatar-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
  letter-spacing: .3px;
}

/* ============================================================
   NOTIFICATION LIST (inside "Users to notify" modal)
   ============================================================ */
.notifications-list { margin-top: 16px; }

.notification-item {
  display: flex;
  padding: 8px 0;
  align-items: center;
  gap: 12px;
}

.notification-item .notif-icon {
  color: var(--c-grey600);
  font-size: 24px;
  flex-shrink: 0;
}

.notification-item .notif-name-container { flex-grow: 1; }

.notification-item .notif-name {
  display: block;
  font-size: var(--font-size--small);
  color: var(--c-grey800);
  font-weight: 500;
}

.notification-item .notif-email {
  color: var(--c-grey600);
  font-size: 13px;
}

.notification-item .notif-remove {
  color: var(--c-grey800);
  cursor: pointer;
  background: none;
  border: none;
  font-size: 16px;
  display: flex;
  align-items: center;
  opacity: .5;
  transition: opacity .12s;
}
.notification-item:hover .notif-remove { opacity: 1; }

/* ============================================================
   INFO BANNER (used in modals for contextual messaging)
   From source: grey100 bg, grey200 border, border-radius 8px
   ============================================================ */
.info-banner {
  background-color: var(--c-grey100);
  border: 1px solid var(--c-grey200);
  border-radius: var(--border-radius);
  display: flex;
  gap: 8px;
  margin: 8px 0 16px;
  padding: 16px 24px;
}

.info-banner .info-banner-icon {
  font-size: 30px;
  color: var(--c-grey600);
  flex-shrink: 0;
}

.info-banner .info-banner-text {
  font-size: var(--font-size--small);
  color: var(--c-grey700);
}

/* ============================================================
   GLOBAL RECIPIENTS (inside notification modal)
   ============================================================ */
.global-recipients-container {
  display: flex;
  gap: 8px;
  margin: 24px 0 16px;
  align-items: center;
}

.global-recipients-container .global-recipients-text { flex-grow: 1; font-size: var(--font-size--small); color: var(--c-grey700); }

.global-recipients-link {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: var(--c-teal100);
  border: none;
  border-radius: var(--border-radius--small);
  color: var(--c-teal700);
  font-size: 13px;
  font-weight: 500;
  padding: 5px 12px;
  font-family: var(--font-stack);
  transition: background .12s;
}
.global-recipients-link:hover { background: var(--c-primary-1a); }
.global-recipients-link.disabled {
  background: var(--c-grey100);
  color: var(--c-grey400);
  cursor: not-allowed;
}

/* ============================================================
   TOGGLE GROUP (Devices with events / All devices)
   ============================================================ */
.toggle-group { display: flex; gap: 8px; margin-bottom: var(--padding-lg); }

.toggle-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 18px;
  border-radius: 20px;
  border: 1px solid var(--c-grey300);
  background: white;
  font-size: 14px;
  font-family: var(--font-stack);
  color: var(--c-grey700);
  cursor: pointer;
  font-weight: 400;
  transition: all .15s;
}
.toggle-tab-btn:hover { border-color: var(--c-grey400); background: var(--c-grey100); }
.toggle-tab-btn.active { background: var(--c-primary); border-color: var(--c-primary); color: white; }
.toggle-tab-btn i { font-size: 14px; }

/* ============================================================
   UNDERLINE TAB NAV (Event Log / Details)
   ============================================================ */
.tab-nav {
  display: flex;
  border-bottom: 2px solid var(--c-grey200);
  margin-bottom: var(--padding-lg);
}

.tab-btn {
  padding: 10px 20px;
  font-size: 14px;
  border: none;
  background: none;
  color: var(--c-grey600);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  font-family: var(--font-stack);
  font-weight: 400;
  transition: color .15s, border-color .15s;
}
.tab-btn.active { color: var(--c-primary); border-bottom-color: var(--c-primary); font-weight: 500; }
.tab-btn:hover:not(.active) { color: var(--c-grey800); }

/* ============================================================
   DEVICE TABLE CELL
   ============================================================ */
.device-cell { display: flex; align-items: center; gap: 10px; }

.os-icon { font-size: 16px; color: var(--c-grey500); flex-shrink: 0; }

.device-link {
  color: var(--c-primary);
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
}
.device-link:hover { text-decoration: underline; }

.device-hostname {
  display: block;
  color: var(--c-grey500);
  font-size: 12px;
  margin-top: 1px;
}

/* Two-line user cell */
.user-cell-name { display: block; font-size: 14px; color: var(--c-grey800); }
.user-cell-org  { display: flex; align-items: center; gap: 3px; font-size: 12px; color: var(--c-grey500); margin-top: 1px; }
.user-cell-org i { font-size: 10px; }

/* ============================================================
   FILTER BAR WITH RIGHT SIDE DOWNLOAD
   ============================================================ */
.filter-bar-row { display: flex; align-items: center; margin-bottom: 10px; }
.filter-bar-left { display: flex; align-items: center; gap: 8px; flex: 1; }
.filter-bar-right { display: flex; align-items: center; gap: 6px; }

.add-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid var(--c-grey300);
  border-radius: var(--border-radius--small);
  background: white;
  font-size: 14px;
  font-family: var(--font-stack);
  color: var(--c-grey700);
  cursor: pointer;
  transition: all .12s;
}
.add-filter-pill:hover { border-color: var(--c-grey400); background: var(--c-grey100); }
.add-filter-pill i { font-size: 13px; color: var(--c-grey500); }

.icon-btn-sm {
  width: 34px;
  height: 34px;
  border: 1px solid var(--c-grey300);
  border-radius: var(--border-radius--small);
  background: white;
  color: var(--c-grey600);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 15px;
  transition: all .12s;
}
.icon-btn-sm:hover { border-color: var(--c-grey400); background: var(--c-grey100); }

/* ============================================================
   TABLE PAGINATION
   ============================================================ */
.table-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-top: 1px solid var(--c-grey200);
  font-size: 13px;
  color: var(--c-grey600);
}
.pagination-left { display: flex; align-items: center; gap: 8px; }
.pagination-right { display: flex; align-items: center; gap: 6px; }

.pagination-select {
  border: 1px solid var(--c-grey300);
  border-radius: var(--border-radius--small);
  padding: 3px 6px;
  font-size: 13px;
  font-family: var(--font-stack);
  color: var(--c-grey800);
  background: white;
  cursor: pointer;
  outline: none;
}

.pagination-page-btn {
  width: 26px;
  height: 26px;
  border: 1px solid var(--c-grey300);
  border-radius: var(--border-radius--small);
  background: white;
  color: var(--c-grey600);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 13px;
  transition: background .12s;
}
.pagination-page-btn:hover { background: var(--c-grey100); }

/* ============================================================
   DEVICE DETAIL — 4-column metrics grid
   ============================================================ */
.device-metrics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: var(--padding-md);
  margin-bottom: var(--padding-lg);
}

/* Metric sub-list (VPN / Proxy / Tor, etc.) */
.metric-sub-list { list-style: none; margin-top: 10px; }
.metric-sub-list li {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--c-grey600);
  padding: 3px 0;
}
.metric-sub-list .sub-val { font-weight: 500; color: var(--c-grey700); }

/* Stacked mini cards (Far from district / Off-campus) */
.stacked-metric-cards { display: flex; flex-direction: column; gap: var(--padding-sm); height: 100%; }

.stacked-metric-card {
  border: 1px solid var(--c-grey200);
  border-radius: var(--border-radius);
  padding: 16px 20px;
  background: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
}
.stacked-metric-card .sm-num { font-size: 32px; font-weight: 700; color: var(--c-grey800); letter-spacing: -.5px; line-height: 1; }
.stacked-metric-card .sm-label { font-size: 13px; color: var(--c-grey600); margin-top: 4px; }

/* Users seen chart card */
.users-seen-card {
  border: 1px solid var(--c-grey200);
  border-radius: var(--border-radius);
  padding: 16px 20px;
  background: white;
}
.users-seen-title { font-size: 11px; font-weight: 700; color: var(--c-grey700); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 12px; }
.users-seen-body { display: flex; align-items: center; gap: 14px; }
.users-seen-chart-wrap { flex-shrink: 0; width: 80px; height: 80px; position: relative; }
.users-seen-legend { flex: 1; }
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--c-grey800); margin-bottom: 4px; }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.legend-view-list { display: block; font-size: 13px; color: var(--c-primary); cursor: pointer; margin-top: 6px; }
.legend-view-list:hover { text-decoration: underline; }

/* Device detail sub-header (hostname + assigned-to row) */
.device-sub-header {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 20px;
  font-size: 14px;
  color: var(--c-grey600);
}
.device-sub-item { display: flex; align-items: center; gap: 6px; }
.device-sub-item i { font-size: 15px; }

.device-last-seen { font-size: 13px; color: var(--c-grey600); margin-bottom: var(--padding-lg); }

/* Actions dropdown button */
.btn-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--c-grey300);
  border-radius: var(--border-radius--small);
  background: white;
  font-size: 14px;
  font-family: var(--font-stack);
  color: var(--c-grey700);
  cursor: pointer;
  font-weight: 400;
  transition: all .12s;
}
.btn-actions:hover { border-color: var(--c-grey400); background: var(--c-grey100); }
.btn-actions i { font-size: 12px; color: var(--c-grey500); }

/* Events table (6-column device event log) */
.events-table-wrap { border: 1px solid var(--c-grey200); border-radius: var(--border-radius); overflow: hidden; }
.events-table { width: 100%; border-collapse: collapse; }
.events-table thead th {
  background: var(--c-grey100);
  border-bottom: 1px solid var(--c-grey200);
  padding: 9px 16px;
  font-size: 11px;
  font-weight: 700;
  color: var(--c-grey600);
  text-align: left;
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
}
.events-table td {
  padding: 12px 16px;
  font-size: 13.5px;
  color: var(--c-grey700);
  border-bottom: 1px solid var(--c-grey200);
  vertical-align: middle;
}
.events-table tbody tr:last-child td { border-bottom: none; }
.events-table tbody tr:hover { background: var(--c-grey50); }
.events-table tbody tr.row-selected { background: var(--c-primary-0d); }

.event-type { font-size: 14px; color: var(--c-grey800); font-weight: 400; }
.event-time { font-size: 12px; color: var(--c-grey500); margin-top: 2px; }
.event-user-name { font-size: 14px; color: var(--c-grey800); }
.event-user-email { font-size: 12px; color: var(--c-grey500); margin-top: 1px; }

/* ============================================================
   DEVICE DETAIL — Details tab layout
   ============================================================ */
.details-two-col {
  display: flex;
  gap: var(--padding-md);
  align-items: flex-start;
}

.detail-col-left {
  width: 440px;
  flex: 0 0 440px;
  min-width: 0;
  overflow: hidden;
}

.detail-info-card {
  border: 1px solid var(--c-grey200);
  border-radius: var(--border-radius);
  background: white;
  overflow: hidden;
  margin-bottom: var(--padding-md);
}

.detail-info-card-header {
  padding: 12px 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-grey700);
  border-bottom: 1px solid var(--c-grey200);
}

.device-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 16px 20px;
  row-gap: 16px;
  column-gap: 12px;
}

.di-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--c-grey500);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 3px;
}

.di-value {
  font-size: 14px;
  color: var(--c-grey800);
  display: flex;
  align-items: center;
  gap: 5px;
}

.system-status-list {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sys-status-label {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 500;
  color: var(--c-grey800);
  margin-bottom: 6px;
}

.sys-status-pct { color: var(--c-grey600); font-weight: 400; }

.progress-track {
  height: 6px;
  background: var(--c-grey200);
  border-radius: 3px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--c-primary);
  border-radius: 3px;
}

.progress-sub {
  font-size: 12px;
  color: var(--c-grey500);
  margin-top: 4px;
}

.detail-activity-section {
  margin-top: var(--padding-md);
  border-top: 1px solid var(--c-grey200);
  padding-top: var(--padding-md);
}

.detail-tab-actions {
  display: flex;
  gap: var(--padding-sm);
  margin-bottom: var(--padding-md);
}

.detail-activity-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  border: 1px solid var(--c-grey200);
  border-radius: var(--border-radius);
  color: var(--c-grey500);
  font-size: 13px;
}

.detail-map-card {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--c-grey200);
  border-radius: var(--border-radius);
  overflow: hidden;
  background: white;
}

.detail-map-header {
  padding: 12px 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-grey700);
  border-bottom: 1px solid var(--c-grey200);
}

.detail-map-frame {
  width: 100%;
  height: 480px;
  display: block;
  border: none;
}

/* ============================================================
   SIGNAL OVERVIEW — stat cards, chart grids, horizontal bars
   ============================================================ */
.ov-panel { margin-top: var(--padding-lg); }

.ov-filter-row {
  display: flex;
  align-items: center;
  gap: var(--padding-sm);
  margin-bottom: var(--padding-md);
}

.ov-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--padding-md);
  margin-bottom: var(--padding-md);
}

.ov-stat-card {
  border: 1px solid var(--c-grey200);
  border-radius: var(--border-radius);
  padding: 20px 24px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ov-stat-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.ov-stat-num {
  font-size: 40px;
  font-weight: 700;
  color: var(--c-grey800);
  line-height: 1;
  letter-spacing: -1px;
  flex-shrink: 0;
}

.ov-stat-label {
  font-size: 14px;
  color: var(--c-grey700);
  font-weight: 500;
}

.ov-stat-trend {
  font-size: 12px;
  color: var(--c-success);
  margin-top: 3px;
}

.ov-stat-sub {
  font-size: 12px;
  color: var(--c-grey500);
  margin-top: 3px;
}

.ov-stat-link {
  font-size: 13px;
  color: var(--c-primary);
  cursor: pointer;
  flex-shrink: 0;
  font-weight: 500;
}
.ov-stat-link:hover { text-decoration: underline; }
.ov-stat-link.muted { color: var(--c-grey400); cursor: default; }
.ov-stat-link.muted:hover { text-decoration: none; }

.ov-chart-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--padding-md);
  margin-bottom: var(--padding-md);
}

.ov-chart-card {
  border: 1px solid var(--c-grey200);
  border-radius: var(--border-radius);
  padding: 20px 24px;
  background: white;
}

.ov-chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--padding-md);
}

.ov-chart-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--c-grey800);
}

.ov-chart-area { position: relative; height: 200px; }

/* Incidents meta (Apps tab) */
.ov-incidents-meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}

.ov-incidents-total {
  font-size: 32px;
  font-weight: 700;
  color: var(--c-grey800);
  letter-spacing: -.5px;
  line-height: 1;
}

.ov-incidents-sublabel { font-size: 13px; color: var(--c-grey600); }

.ov-incidents-legend { display: flex; gap: 16px; margin-bottom: 14px; }

.ov-leg-item { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--c-grey600); }

.ov-leg-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}

/* App incident list (Apps tab) */
.ov-app-list { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; }

.ov-app-item { display: flex; align-items: center; gap: 10px; }

.ov-app-info {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 170px;
  flex-shrink: 0;
}

.ov-app-icon { width: 20px; height: 20px; border-radius: 4px; flex-shrink: 0; }

.ov-app-name {
  font-size: 13px;
  color: var(--c-grey800);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ov-app-bar-wrap {
  flex: 1;
  height: 8px;
  background: var(--c-grey100);
  border-radius: 4px;
  overflow: hidden;
}

.ov-app-bar-fill { height: 100%; background: var(--c-danger); border-radius: 4px; }
.ov-app-count { font-size: 13px; font-weight: 600; color: var(--c-grey700); width: 20px; text-align: right; flex-shrink: 0; }

/* Horizontal bar charts (Devices tab) */
.ov-hbar-section { display: flex; flex-direction: column; gap: 12px; }

.ov-hbar-item { display: flex; align-items: center; gap: 10px; }

.ov-hbar-label {
  font-size: 12px;
  color: var(--c-grey700);
  width: 130px;
  flex-shrink: 0;
}

.ov-hbar-bar-wrap {
  flex: 1;
  height: 8px;
  background: var(--c-grey100);
  border-radius: 4px;
  overflow: hidden;
}

.ov-hbar-fill { height: 100%; border-radius: 4px; transition: width .4s ease; }

.ov-hbar-value { font-size: 12px; font-weight: 600; color: var(--c-grey700); width: 22px; text-align: right; flex-shrink: 0; }

.ov-hbar-axis {
  display: flex;
  justify-content: space-between;
  padding-left: 140px;
  margin-top: 6px;
  font-size: 11px;
  color: var(--c-grey400);
}

.ov-hbar-axis-label { text-align: center; font-size: 11px; color: var(--c-grey400); margin-top: 4px; }

/* Donut chart (Devices tab) */
.ov-donut-wrap { display: flex; align-items: center; gap: 24px; }

.ov-donut-chart-wrap { position: relative; flex-shrink: 0; width: 120px; height: 120px; }

.ov-donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 700;
  color: var(--c-grey800);
  pointer-events: none;
}

.ov-donut-legend { display: flex; flex-direction: column; gap: 8px; }

.ov-leg-count { margin-left: 8px; font-weight: 500; color: var(--c-grey700); font-size: 13px; }

/* Network label (two-line: IP + school) */
.ov-net-label {
  display: flex;
  flex-direction: column;
  width: 130px;
  flex-shrink: 0;
}
.ov-net-ip { font-size: 12px; font-weight: 600; color: var(--c-grey800); }
.ov-net-school { font-size: 11px; color: var(--c-grey500); margin-top: 1px; }

/* OU label row (person icon + name) */
.ov-ou-label {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 152px;
  flex-shrink: 0;
  font-size: 12px;
  color: var(--c-grey700);
  overflow: hidden;
}
.ov-ou-label span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ov-ou-label i { font-size: 13px; flex-shrink: 0; }

/* Provider row (icon + name) */
.ov-provider-info {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 130px;
  flex-shrink: 0;
}
.ov-provider-icon { width: 18px; height: 18px; border-radius: 3px; flex-shrink: 0; }

/* Filter chip / add-filter UI (shared: signal-devices, signal-overview) */
.dev-filter-add-wrapper { position: relative; display: inline-block; }
.dev-filter-add-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; font-size: 13px; font-family: var(--font-stack);
  color: var(--c-grey700); background: white;
  border: 1px solid var(--c-grey300); border-radius: 6px; cursor: pointer;
  transition: border-color 0.15s;
}
.dev-filter-add-btn:hover { border-color: var(--c-grey400); background: var(--c-grey50); }
.dev-filter-add-dd {
  display: none; position: absolute; top: calc(100% + 4px); left: 0; z-index: 300;
  background: white; border: 1px solid var(--c-grey200); border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,.10); min-width: 220px; padding: 4px 0;
}
.dev-filter-add-dd.open { display: block; }
.dev-filter-add-opt {
  display: flex; align-items: center; gap: 10px; padding: 9px 16px;
  font-size: 13px; color: var(--c-grey700); cursor: pointer; font-family: var(--font-stack);
}
.dev-filter-add-opt:hover { background: var(--c-grey50); }
.dev-filter-add-opt i { color: var(--c-grey500); font-size: 14px; width: 16px; }
.dev-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
  background: var(--c-teal100, #e0f2f8); color: var(--c-teal700, #006b8b);
  border: 1px solid #b2dce9; border-radius: 20px; font-size: 12px; font-family: var(--font-stack);
}
.dev-chip i.chip-icon { font-size: 12px; }
.dev-chip .chip-remove { cursor: pointer; font-size: 13px; color: var(--c-teal700, #006b8b); line-height: 1; }
.dev-chip .chip-remove:hover { color: var(--c-grey800); }

/* User avatar wrapper for dropdown positioning */
.user-avatar-wrapper {
  position: relative;
}

/* User menu dropdown */
.user-menu-dropdown {
  position: absolute;
  top: 44px;
  right: 0;
  width: 320px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  z-index: 100;
  overflow: hidden;
}
.user-menu-banner {
  display: flex;
  align-items: center;
  padding: 16px 0 12px 24px;
  gap: 8px;
}
.user-menu-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--c-primary);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.user-menu-info {
  margin-left: 0;
}
.user-menu-name {
  font-size: 14px;
  font-weight: 400;
  color: #000;
  line-height: 18px;
}
.user-menu-email {
  font-size: 14px;
  font-weight: 400;
  color: #000;
  line-height: 18px;
}
.user-menu-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0 0 8px;
}
.user-menu-list li {
  height: 40px;
}
.user-menu-link {
  display: flex;
  align-items: center;
  padding: 0 32px;
  height: 40px;
  font-size: 16px;
  color: #2f3941;
  text-decoration: none;
  line-height: 24px;
}
.user-menu-link:hover {
  background: #f5f5f5;
  color: #2f3941;
  text-decoration: none;
}

/* ══════════════════════════════════════════════════════
   DARK MODE
   ══════════════════════════════════════════════════════ */
body.dark-mode {
  --c-bg: #1a1a2e;
  --c-surface: #222240;
  --c-surface2: #2a2a4a;
  --c-border: #3a3a5c;
  --c-text: #e0e0e8;
  --c-text-secondary: #9ca3af;
  --c-primary: #0ea5c7;
  --c-primary-hover: #0c8da8;
  background-color: var(--c-bg) !important;
  color: var(--c-text);
}
body.dark-mode .app-shell { background: var(--c-bg); }
body.dark-mode .app-header { background: #16162b; border-color: var(--c-border); }
body.dark-mode .app-nav { background: #16162b; border-color: var(--c-border); }
body.dark-mode .app-content { background: var(--c-bg); }
body.dark-mode .nav-item, body.dark-mode .nav-subitem { color: var(--c-text); }
body.dark-mode .nav-item:hover, body.dark-mode .nav-subitem:hover { background: var(--c-surface); }
body.dark-mode .nav-item.active { background: var(--c-surface2); color: var(--c-primary); }
body.dark-mode .nav-section, body.dark-mode .nav-bottom { border-color: var(--c-border); }
body.dark-mode .page-inner { background: var(--c-bg); }
body.dark-mode .page-title { color: var(--c-text); }
body.dark-mode .page-desc { color: var(--c-text-secondary); }

/* Cards, tables, inputs */
body.dark-mode table { background: var(--c-surface) !important; border-color: var(--c-border) !important; }
body.dark-mode table th { background: var(--c-surface) !important; color: var(--c-text); border-color: var(--c-border); }
body.dark-mode table td { color: var(--c-text); border-color: var(--c-border); }
body.dark-mode table tr:hover td { background: #2a2a4a !important; }
body.dark-mode table tbody tr:nth-child(even) td { background: rgba(255,255,255,0.02); }
body.dark-mode table tbody tr { border-color: #3a3a5c !important; }
body.dark-mode table tbody td { background: transparent !important; }
body.dark-mode input, body.dark-mode select, body.dark-mode textarea { background: var(--c-surface) !important; color: var(--c-text) !important; border-color: var(--c-border) !important; }
body.dark-mode input::placeholder { color: var(--c-text-secondary) !important; }

/* Buttons */
body.dark-mode .btn-outline, body.dark-mode [class*="btn-outline"] { background: var(--c-surface); border-color: var(--c-border); color: var(--c-text); }
body.dark-mode .btn-outline:hover, body.dark-mode [class*="btn-outline"]:hover { background: var(--c-surface2); }
body.dark-mode .notify-btn { background: var(--c-surface); border-color: var(--c-border); color: var(--c-text); }
body.dark-mode .notify-btn:hover { background: var(--c-surface2); }
body.dark-mode .detail-back { background: transparent; color: var(--c-primary); }

/* Badges & status pills */
body.dark-mode .badge, body.dark-mode [class*="badge"]:not([class*="nav"]) { background: rgba(255,255,255,0.1) !important; color: inherit !important; }
body.dark-mode [class*="badge-assigned"], body.dark-mode [class*="status-assigned"] { background: rgba(98,166,0,0.2) !important; color: #8fd44a !important; border-color: rgba(98,166,0,0.4) !important; }
body.dark-mode [class*="unassigned"] { background: rgba(255,255,255,0.08) !important; color: #9ca3af !important; border-color: rgba(255,255,255,0.15) !important; }
body.dark-mode [class*="status-badge"] { background: rgba(255,255,255,0.1) !important; }

/* Dropdowns, modals, panels */
body.dark-mode .help-menu, body.dark-mode .user-menu { background: var(--c-surface); border-color: var(--c-border); }
body.dark-mode .help-menu-item, body.dark-mode .user-menu-item { color: var(--c-text); }
body.dark-mode .help-menu-item:hover, body.dark-mode .user-menu-item:hover { background: var(--c-surface2); }
body.dark-mode .settings-panel, body.dark-mode #settings-panel { background: #16162b !important; border-color: var(--c-border) !important; }
body.dark-mode #settings-panel > div { border-color: var(--c-border) !important; }
body.dark-mode #settings-panel div[style*="color:#111827"] { color: var(--c-text) !important; }
body.dark-mode #settings-panel div[style*="color:#6b7280"] { color: var(--c-text-secondary) !important; }
body.dark-mode .settings-panel-item { color: var(--c-text) !important; }
body.dark-mode .settings-panel-item:hover { background: var(--c-surface) !important; }

/* Org selectors */
body.dark-mode .org-selector-btn { background: var(--c-surface); border-color: var(--c-border); color: var(--c-text); }

/* Search — all search bars */
body.dark-mode .header-search { background: var(--c-surface) !important; border-color: var(--c-border) !important; color: var(--c-text) !important; }
body.dark-mode .header-search input { color: var(--c-text) !important; }
body.dark-mode .header-search input::placeholder { color: var(--c-text-secondary) !important; }
body.dark-mode .header-search i { color: var(--c-text-secondary) !important; }
body.dark-mode .nav-search-input, body.dark-mode .app-search-input { background: var(--c-surface) !important; color: var(--c-text) !important; border-color: var(--c-border) !important; }
body.dark-mode .app-search-input::placeholder { color: var(--c-text-secondary) !important; }
body.dark-mode .nav-search-dropdown { background: var(--c-surface) !important; border-color: var(--c-border) !important; }
body.dark-mode .nav-search-results { background: var(--c-surface); border-color: var(--c-border); }
body.dark-mode .nav-search-result-item:hover { background: var(--c-surface2); }

/* Nav subitems container (MDM sub-menu background) */
body.dark-mode .nav-subitems { background: #16162b !important; }
body.dark-mode .nav-subitem { color: var(--c-text) !important; background: transparent !important; }
body.dark-mode .nav-subitem:hover { background: var(--c-surface) !important; }
body.dark-mode .nav-subitem.active { color: var(--c-primary) !important; background: var(--c-surface2) !important; }

/* Links */
body.dark-mode a { color: var(--c-primary); }

/* Scrollbar */
body.dark-mode ::-webkit-scrollbar-track { background: var(--c-bg); }
body.dark-mode ::-webkit-scrollbar-thumb { background: var(--c-border); }

/* Generic card-like elements */
body.dark-mode [style*="border:1px solid #e"], body.dark-mode [style*="border: 1px solid #e"] { border-color: var(--c-border) !important; }
body.dark-mode [style*="background:#fff"], body.dark-mode [style*="background: #fff"], body.dark-mode [style*="background:white"] { background: var(--c-surface) !important; }
body.dark-mode [style*="background:#f9fafb"] { background: var(--c-surface) !important; }
body.dark-mode [style*="background:#fafafa"] { background: #1e1e36 !important; }
body.dark-mode [style*="background:#f3f4f6"] { background: var(--c-surface2) !important; }

/* Page-specific text colors (inline style overrides) */
body.dark-mode [style*="color:#111"] { color: var(--c-text) !important; }
body.dark-mode [style*="color: #111"] { color: var(--c-text) !important; }
body.dark-mode [style*="color:#2f3941"] { color: var(--c-text) !important; }
body.dark-mode [style*="color: #2f3941"] { color: var(--c-text) !important; }
body.dark-mode [style*="color:#374151"] { color: #c0c0d0 !important; }
body.dark-mode [style*="color:#49545c"] { color: #b0b0c0 !important; }
body.dark-mode [style*="color:#6b7280"] { color: var(--c-text-secondary) !important; }
body.dark-mode [style*="color:#68737d"] { color: var(--c-text-secondary) !important; }
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 { color: #f0f0f8 !important; }
body.dark-mode label, body.dark-mode legend { color: var(--c-text); }
body.dark-mode p { color: var(--c-text-secondary); }
body.dark-mode strong, body.dark-mode b { color: #f0f0f8; }
body.dark-mode th { color: #c8c8d8 !important; }
body.dark-mode [class*="-title"], body.dark-mode [class*="-heading"], body.dark-mode [class*="-label"]:not(input):not(select) { color: #f0f0f8 !important; }
body.dark-mode [class*="-desc"], body.dark-mode [class*="-sub"], body.dark-mode [class*="-hint"], body.dark-mode [class*="-meta"] { color: #9ca3af !important; }

/* MDM settings pages */
body.dark-mode [class*="mdm-settings-nav"] { color: var(--c-primary) !important; }
body.dark-mode [class*="mdm-settings-nav"]:hover { background: var(--c-surface) !important; }
body.dark-mode [class*="settings-card"], body.dark-mode [class*="card"] { background: var(--c-surface) !important; border-color: var(--c-border) !important; }
body.dark-mode [class*="section-title"], body.dark-mode [class*="section-header"] { color: var(--c-text) !important; }
body.dark-mode [class*="toggle-label"], body.dark-mode [class*="row-name"] { color: var(--c-text) !important; }
body.dark-mode [class*="row-desc"] { color: var(--c-text-secondary) !important; }

/* MDM page-specific elements */
body.dark-mode [class*="mdm-btn-outline"], body.dark-mode [class*="pol-btn-outline"], body.dark-mode [class*="rpt-btn"] { border-color: var(--c-border) !important; color: var(--c-text) !important; }
body.dark-mode [class*="mdm-btn-outline"]:hover, body.dark-mode [class*="pol-btn-outline"]:hover { background: var(--c-surface) !important; }
body.dark-mode [class*="filter-row"], body.dark-mode [class*="toolbar"] { background: var(--c-bg) !important; border-color: var(--c-border) !important; }
body.dark-mode [class*="tab-bar"], body.dark-mode [class*="tabs-bar"] { background: var(--c-bg) !important; border-color: var(--c-border) !important; }

/* Specific common inline background patterns */
body.dark-mode [style*="background: white"] { background: var(--c-surface) !important; }
body.dark-mode [style*="background:#f5f5f6"] { background: var(--c-surface2) !important; }
body.dark-mode [style*="border-bottom:1px solid #e5e7eb"] { border-color: var(--c-border) !important; }
body.dark-mode [style*="border-bottom: 1px solid #e5e7eb"] { border-color: var(--c-border) !important; }
body.dark-mode [style*="border:1px solid #d1d5db"] { border-color: var(--c-border) !important; }
body.dark-mode [style*="border:1px solid #d6d9dc"] { border-color: var(--c-border) !important; }

/* Main content area */
body.dark-mode main, body.dark-mode .app-content main { background: var(--c-bg) !important; }
body.dark-mode [class*="page-inner"] { background: var(--c-bg) !important; color: var(--c-text); }

/* MDM Settings pages (inline <style> classes) */
body.dark-mode .mdm-settings-layout { background: var(--c-bg) !important; }
body.dark-mode .mdm-settings-sidebar { background: #16162b !important; border-color: var(--c-border) !important; }
body.dark-mode .mdm-settings-nav-item { color: var(--c-text) !important; }
body.dark-mode .mdm-settings-nav-item:hover { background: var(--c-surface) !important; color: var(--c-text) !important; }
body.dark-mode .mdm-settings-nav-item.active { background: var(--c-surface2) !important; color: var(--c-primary) !important; border-left-color: var(--c-primary) !important; }
body.dark-mode .mdm-settings-content { background: var(--c-bg) !important; }
body.dark-mode .gen-container { background: #222240 !important; border-color: #3a3a5c !important; }
body.dark-mode .gen-section { background: #222240 !important; border-color: #3a3a5c !important; }
body.dark-mode .dep-container, body.dark-mode .cls-container, body.dark-mode .at-container,
body.dark-mode .sn-container, body.dark-mode .sp-container, body.dark-mode .md-container,
body.dark-mode .ios-container, body.dark-mode .adm-container, body.dark-mode .sch-container { background: #222240 !important; border-color: #3a3a5c !important; }
body.dark-mode .gen-section, body.dark-mode [class*="-section"] { border-color: var(--c-border) !important; }
body.dark-mode .gen-section-title, body.dark-mode [class*="-section-title"] { color: var(--c-text) !important; }
body.dark-mode .gen-page-title, body.dark-mode [class*="-page-title"] { color: var(--c-text) !important; }
body.dark-mode .gen-page-desc, body.dark-mode [class*="-page-desc"] { color: var(--c-text-secondary) !important; }
body.dark-mode .gen-platform-badge { background: var(--c-surface2) !important; border-color: var(--c-border) !important; color: var(--c-text-secondary) !important; }
body.dark-mode .gen-field-label { color: var(--c-text-secondary) !important; }
body.dark-mode .gen-field-hint { color: var(--c-text-secondary) !important; }

/* MDM toggle rows */
body.dark-mode [class*="toggle-row"], body.dark-mode [class*="row-toggle"] { color: var(--c-text) !important; }
body.dark-mode [class*="row-name"], body.dark-mode [class*="toggle-name"] { color: var(--c-text) !important; }
body.dark-mode [class*="row-desc"], body.dark-mode [class*="toggle-desc"] { color: var(--c-text-secondary) !important; }

/* MDM device detail, policies, apps, books pages */
body.dark-mode [class*="dev-"], body.dark-mode [class*="pol-"], body.dark-mode [class*="mdm-"] { color: var(--c-text); }
body.dark-mode .mdm-search-wrap { background: var(--c-surface) !important; border-color: var(--c-border) !important; }
body.dark-mode .mdm-search-wrap input { color: var(--c-text) !important; }
body.dark-mode .mdm-types-btn, body.dark-mode .mdm-add-btn, body.dark-mode .mdm-search-store-btn { background: var(--c-surface) !important; border-color: var(--c-border) !important; color: var(--c-text) !important; }
body.dark-mode .mdm-dropdown { background: var(--c-surface) !important; border-color: var(--c-border) !important; }
body.dark-mode .mdm-dropdown-item { color: var(--c-text) !important; }
body.dark-mode .mdm-dropdown-item:hover { background: var(--c-surface2) !important; }
body.dark-mode .mdm-btn-outline, body.dark-mode .mdm-btn-primary { border-color: var(--c-border) !important; }
body.dark-mode .mdm-btn-outline { background: var(--c-surface) !important; color: var(--c-text) !important; }
body.dark-mode .mdm-plat-tab:not(.active) { background: var(--c-surface) !important; border-color: var(--c-border) !important; color: var(--c-text) !important; }
body.dark-mode .mdm-plat-tab:not(.active):hover { background: var(--c-surface2) !important; }

/* Dev (devices page) specific */
body.dark-mode .dev-search-wrap { background: var(--c-surface) !important; border-color: var(--c-border) !important; }
body.dark-mode .dev-search-wrap input { color: var(--c-text) !important; }
body.dark-mode .dev-types-btn, body.dark-mode .dev-toolbar-btn { background: var(--c-surface) !important; border-color: var(--c-border) !important; color: var(--c-text) !important; }
body.dark-mode .dev-more-dd { background: var(--c-surface) !important; border-color: var(--c-border) !important; }

/* Policies page specific */
body.dark-mode .pol-btn-outline { background: var(--c-surface) !important; border-color: var(--c-border) !important; color: var(--c-text) !important; }
body.dark-mode .policies-selector-bar { background: var(--c-bg) !important; border-color: var(--c-border) !important; }
body.dark-mode .policies-nav-item { color: var(--c-text) !important; }
body.dark-mode .policies-nav-item:hover { background: var(--c-surface) !important; }
body.dark-mode .policies-nav-item.active { color: var(--c-primary) !important; background: var(--c-surface2) !important; }
body.dark-mode .policies-panels { background: var(--c-bg) !important; }
body.dark-mode .policies-sidebar-panel { border-color: var(--c-border) !important; background: #16162b !important; }
body.dark-mode .policies-detail-panel { background: var(--c-bg) !important; }
body.dark-mode .policies-nav-group-header { color: var(--c-text-secondary) !important; }
body.dark-mode .policies-nav-group { border-color: var(--c-border) !important; }
/* Policy filter buttons */
body.dark-mode .pol-filter-group { border-color: var(--c-border) !important; }
body.dark-mode .pol-filter-btn { background: var(--c-surface) !important; color: var(--c-text) !important; border-color: var(--c-border) !important; }
body.dark-mode .pol-filter-btn.active { background: var(--c-primary) !important; color: #fff !important; border-color: var(--c-primary) !important; }
body.dark-mode .pol-filter-btn:not(.active):hover { background: var(--c-surface2) !important; }
/* Policy search — wrapper is transparent, only the input gets a background */
body.dark-mode .policies-content .policies-detail-search { background: transparent !important; border: none !important; }
body.dark-mode .policies-detail-search input { background: var(--c-surface) !important; border-color: var(--c-border) !important; color: var(--c-text) !important; }
/* Policy section cards */
body.dark-mode .policy-section { border-color: var(--c-border) !important; }
body.dark-mode .policy-section-header { background: var(--c-surface) !important; border-color: var(--c-border) !important; }
body.dark-mode .policy-section-label { color: var(--c-text) !important; }
body.dark-mode .policy-section-badge { background: var(--c-surface2) !important; color: var(--c-text-secondary) !important; }
body.dark-mode .policy-section-body { background: var(--c-surface) !important; }
/* Policy rows */
body.dark-mode .policy-row { border-color: var(--c-border) !important; }
body.dark-mode .policy-row-name { color: var(--c-text) !important; }
body.dark-mode .policy-row-desc { color: var(--c-text-secondary) !important; }
body.dark-mode .policy-row-tags { color: var(--c-text-secondary) !important; }
body.dark-mode .policy-row-csp { color: var(--c-text-secondary) !important; }
body.dark-mode .policy-row-actions button { color: var(--c-text-secondary) !important; }
body.dark-mode .policy-row-actions button:hover { color: var(--c-text) !important; }
/* Scope bar */
body.dark-mode .policies-scope-bar { background: var(--c-surface) !important; border-color: var(--c-border) !important; }
body.dark-mode .policies-scope-btn { background: var(--c-surface) !important; border-color: var(--c-border) !important; color: var(--c-text) !important; }
body.dark-mode .policies-scope-btn.active { background: var(--c-primary) !important; color: #fff !important; }
body.dark-mode .pol-category { background: var(--c-bg) !important; }
body.dark-mode .policy-section-header { background: var(--c-surface) !important; border-color: var(--c-border) !important; color: var(--c-text) !important; }
body.dark-mode .policy-row { border-color: var(--c-border) !important; }
body.dark-mode .policy-row-name { color: var(--c-text) !important; }
body.dark-mode .policy-row-desc { color: var(--c-text-secondary) !important; }
body.dark-mode .pol-asgn-badge { background: var(--c-surface2) !important; border-color: #888 !important; color: var(--c-text) !important; }
body.dark-mode .pol-asgn-badge i { color: var(--c-text) !important; }
body.dark-mode .pol-asgn-inherited { background: var(--c-surface) !important; border-color: var(--c-border) !important; color: var(--c-text-secondary) !important; }
body.dark-mode .pol-asgn-inherited i { color: var(--c-text-secondary) !important; }
body.dark-mode .pol-asgn-menu-btn { color: var(--c-text) !important; }

/* Policy detail page */
body.dark-mode .pd-icon-btn { background: var(--c-surface) !important; border-color: var(--c-border) !important; color: var(--c-text) !important; }
body.dark-mode .pd-icon-btn:hover { background: var(--c-surface2) !important; }
body.dark-mode .pd-access-btn { background: var(--c-surface) !important; border-color: var(--c-border) !important; color: var(--c-text) !important; }
body.dark-mode .pd-access-btn:hover { background: var(--c-surface2) !important; }
body.dark-mode .pd-access-btn .bi { color: var(--c-text-secondary) !important; }
body.dark-mode .pd-section { border-color: var(--c-border) !important; }
body.dark-mode .pd-sec-hdr { background: #1e1e36 !important; color: var(--c-text) !important; border-color: var(--c-border) !important; }
body.dark-mode .pd-sidebar a { color: var(--c-primary) !important; }
body.dark-mode .pd-tabs { border-color: var(--c-border) !important; }
body.dark-mode .pd-tab { color: var(--c-text-secondary) !important; }
body.dark-mode .pd-tab.active { color: var(--c-primary) !important; border-color: var(--c-primary) !important; }

/* Classroom rules page */
body.dark-mode .cr-step-btn { background: var(--c-surface) !important; border-color: var(--c-border) !important; color: var(--c-text) !important; }
body.dark-mode .cr-step-btn:hover { background: var(--c-surface2) !important; }
body.dark-mode .cr-step-val { background: var(--c-surface) !important; border-color: var(--c-border) !important; color: var(--c-text) !important; }
body.dark-mode .cr-info-box { background: #1a2a3e !important; border-color: #2a4a5c !important; }
body.dark-mode .cr-info-box-title { color: #0ea5c7 !important; }
body.dark-mode .cr-info-box-text { color: var(--c-text-secondary) !important; }
body.dark-mode .cr-radio-opt { background: var(--c-surface) !important; border-color: var(--c-border) !important; }
body.dark-mode .cr-radio-opt.sel { background: #1a2a3e !important; border-color: #0EB5CB !important; }
body.dark-mode .cr-radio-lbl { color: var(--c-text) !important; }
body.dark-mode .cr-radio-desc-text { color: var(--c-text-secondary) !important; }
body.dark-mode .cr-period-field { background: var(--c-surface) !important; border-color: var(--c-border) !important; color: var(--c-text) !important; }
body.dark-mode .cr-period-unit { color: var(--c-text-secondary) !important; }

/* Leadership dashboard */
body.dark-mode .ld-tabs-bar { background: var(--c-bg) !important; border-color: var(--c-border) !important; }
body.dark-mode .ld-tab { background: var(--c-surface) !important; border-color: var(--c-border) !important; color: var(--c-text) !important; }
body.dark-mode .ld-tab.active { color: var(--c-primary) !important; border-color: var(--c-primary) !important; }
body.dark-mode .ld-tab:hover { background: var(--c-surface2) !important; }
body.dark-mode .ld-section-card { background: var(--c-surface) !important; border-color: var(--c-border) !important; }
body.dark-mode .ld-section-title { color: var(--c-text) !important; }
body.dark-mode .ld-section-desc { color: var(--c-text-secondary) !important; }
body.dark-mode .ld-banner { background: #1a2a3e !important; border-color: #2a4a5c !important; }
body.dark-mode .ld-banner.neutral { background: var(--c-surface) !important; border-color: var(--c-border) !important; }
body.dark-mode .ld-timeframe { color: var(--c-text) !important; }
body.dark-mode .ld-tf-input { background: var(--c-surface) !important; border-color: var(--c-border) !important; color: var(--c-text) !important; }
body.dark-mode .tf-panel { background: var(--c-surface) !important; border-color: var(--c-border) !important; }
body.dark-mode .tf-sel { background: var(--c-surface) !important; border-color: var(--c-border) !important; color: var(--c-text) !important; }
body.dark-mode .tf-num-inp { background: var(--c-surface) !important; border-color: var(--c-border) !important; color: var(--c-text) !important; }
body.dark-mode .st-period-btn:not(.active) { background: var(--c-surface) !important; border-color: var(--c-border) !important; color: var(--c-primary) !important; }
body.dark-mode .st-period-btn:not(.active):hover { background: var(--c-surface2) !important; }

/* Leadership sub-tabs and metric cards */
body.dark-mode .ld-subtab { color: var(--c-text-secondary) !important; }
body.dark-mode .ld-subtab.active { color: var(--c-primary) !important; border-color: var(--c-primary) !important; }
body.dark-mode .ld-kpi-card, body.dark-mode .ld-comp-card { background: var(--c-surface) !important; border-color: var(--c-border) !important; }
body.dark-mode .ld-intro { background: var(--c-bg) !important; }
body.dark-mode .ld-export-btn { background: var(--c-surface) !important; border-color: var(--c-border) !important; color: var(--c-primary) !important; }
body.dark-mode .ld-export-btn:hover { background: var(--c-surface2) !important; }
body.dark-mode .ssw-sev-trigger, body.dark-mode .st-grade-trigger { background: var(--c-surface) !important; border-color: var(--c-border) !important; color: var(--c-text) !important; }
body.dark-mode .ssw-sev-dd, body.dark-mode .st-grade-dd { background: var(--c-surface) !important; border-color: var(--c-border) !important; }
body.dark-mode .ssw-sev-dd label, body.dark-mode .st-grade-dd label { color: var(--c-text) !important; }
body.dark-mode .ssw-sev-dd label:hover, body.dark-mode .st-grade-dd label:hover { background: var(--c-surface2) !important; }
body.dark-mode [class*="-card"], body.dark-mode [class*="-panel"]:not(.settings-panel) { background: var(--c-surface) !important; border-color: var(--c-border) !important; }
body.dark-mode [class*="-header"]:not(.app-header):not(.ins-header) { border-color: var(--c-border) !important; }
body.dark-mode [class*="-toolbar"] { background: var(--c-bg) !important; border-color: var(--c-border) !important; }
body.dark-mode [class*="-filter"] { background: var(--c-bg) !important; }
body.dark-mode [class*="-tab"].active, body.dark-mode [class*="-tab-active"] { color: var(--c-primary) !important; border-color: var(--c-primary) !important; }
/* Table headers with white backgrounds */
body.dark-mode .app-content table thead tr,
body.dark-mode .app-content table thead th {
  background: var(--c-surface) !important; border-color: var(--c-border) !important; color: #c8c8d8 !important;
}
/* Cancel / secondary / outline buttons defined in inline styles */
body.dark-mode [class*="-cancel-btn"],
body.dark-mode [class*="-btn-cancel"],
body.dark-mode [class*="-btn-secondary"],
body.dark-mode [class*="-del-btn"],
body.dark-mode [class*="-btn-danger"] {
  background: var(--c-surface) !important; border-color: var(--c-border) !important; color: var(--c-text) !important;
}
/* Wrap containers with white backgrounds */
body.dark-mode [class*="-wrap"]:not([class*="toggle"]):not([class*="avatar"]):not([class*="notify"]) {
  background: transparent !important; border-color: var(--c-border) !important;
}
/* Pills with white/grey backgrounds */
body.dark-mode [class*="-pill"]:not([class*="active"]) {
  background: var(--c-surface) !important; border-color: var(--c-border) !important; color: var(--c-text-secondary) !important;
}
/* Generic .btn with white background */
body.dark-mode .app-content .btn:not(.btn-primary):not([class*="btn-danger"]) {
  background: var(--c-surface) !important; border-color: var(--c-border) !important; color: var(--c-text) !important;
}
body.dark-mode .app-content .btn:not(.btn-primary):not([class*="btn-danger"]):hover {
  background: var(--c-surface2) !important;
}

/* ── Universal dark mode catch-all ── */
/* Override any element with a white or light gray background */
body.dark-mode div, body.dark-mode section, body.dark-mode article, body.dark-mode aside,
body.dark-mode main, body.dark-mode footer, body.dark-mode header:not(.app-header):not(.ins-header) {
  color: #e0e0e8;
}
body.dark-mode .app-content div:not([class*="badge"]):not([class*="toggle"]):not([class*="avatar"]):not([class*="icon"]):not([class*="dot"]):not([class*="btn"]):not([class*="chip"]) {
  border-color: #3a3a5c;
}
/* Force dark backgrounds on common light patterns */
body.dark-mode .app-content {
  background: #1a1a2e !important;
  color: #e0e0e8;
}
body.dark-mode .app-content > div { background: transparent; }
body.dark-mode .page-inner > div { background: transparent; }

/* App rows, list items, cards with white bg */
body.dark-mode [class*="-row"]:not([class*="nav"]) { background-color: transparent !important; }
body.dark-mode [class*="-item"]:not([class*="nav"]):not([class*="menu"]):not([class*="search"]):not(.user-menu-item):not(.help-menu-item):not(.settings-panel-item) { border-color: #3a3a5c; }
body.dark-mode [class*="-list"] { background: transparent !important; }

/* Footer tiles */
body.dark-mode [class*="-footer"] { background: #222240 !important; border-color: #3a3a5c !important; }
body.dark-mode [class*="-tile"]:not([class*="nav-tile"]) { background: #222240 !important; border-color: #3a3a5c !important; }

/* ── Broad wildcard overrides for all page-specific classes ── */

/* Modals */
body.dark-mode [class*="-modal"] { background: var(--c-surface) !important; border-color: var(--c-border) !important; color: var(--c-text) !important; }
body.dark-mode [class*="-modal"] h2, body.dark-mode [class*="-modal"] h3, body.dark-mode [class*="-modal"] label { color: var(--c-text) !important; }

/* Dropdowns & menus */
body.dark-mode [class*="-dropdown"], body.dark-mode [class*="-dd-menu"], body.dark-mode [class*="-ctx-menu"],
body.dark-mode [class*="-dd-item"], body.dark-mode [class*="dropdown-item"] { background-color: var(--c-surface) !important; border-color: var(--c-border) !important; color: var(--c-text) !important; }
body.dark-mode [class*="-dd-item"]:hover, body.dark-mode [class*="dropdown-item"]:hover { background-color: var(--c-surface2) !important; }

/* Search bars (wrapper divs, not just inputs) */
body.dark-mode [class*="-search"], body.dark-mode [class*="search-wrap"], body.dark-mode [class*="search-bar"],
body.dark-mode [class*="searchinator"] { background: var(--c-surface) !important; border-color: var(--c-border) !important; color: var(--c-text) !important; }

/* Select wrappers and standalone selects */
body.dark-mode [class*="-select"]:not([class*="active"]) { background: var(--c-surface) !important; border-color: var(--c-border) !important; color: var(--c-text) !important; }

/* Input wrappers */
body.dark-mode [class*="-input"]:not([type]) { background: var(--c-surface) !important; border-color: var(--c-border) !important; color: var(--c-text) !important; }

/* Buttons (outline/secondary) */
body.dark-mode [class*="-btn-outline"], body.dark-mode [class*="btn-secondary"],
body.dark-mode [class*="icon-btn"], body.dark-mode [class*="export-btn"],
body.dark-mode [class*="upload-btn"], body.dark-mode [class*="access-check-btn"],
body.dark-mode [class*="installer-btn"], body.dark-mode [class*="download-btn"],
body.dark-mode [class*="delete-btn"], body.dark-mode [class*="gen-btn"] { background: var(--c-surface) !important; border-color: var(--c-border) !important; color: var(--c-text) !important; }
body.dark-mode [class*="date-btn"] { background: var(--c-surface) !important; border-color: var(--c-border) !important; color: var(--c-text) !important; }

/* Pagination */
body.dark-mode [class*="page-btn"], body.dark-mode [class*="page-select"],
body.dark-mode [class*="per-page"], body.dark-mode [class*="page-nav"],
body.dark-mode [class*="pag-page"], body.dark-mode [class*="pag-per"] { background: var(--c-surface) !important; border-color: var(--c-border) !important; color: var(--c-text) !important; }

/* Report pages shared classes */
body.dark-mode [class*="rpt-"] { color: var(--c-text); }
body.dark-mode .rpt-page-group { background: var(--c-surface) !important; border-color: var(--c-border) !important; }
body.dark-mode .rpt-sidenav { background: #16162b !important; border-color: var(--c-border) !important; }
body.dark-mode .rpt-sidenav-item { color: var(--c-text-secondary) !important; }
body.dark-mode .rpt-sidenav-item:hover { background: var(--c-surface) !important; color: var(--c-text) !important; }
body.dark-mode .rpt-sidenav-item.active { background: var(--c-primary) !important; color: #fff !important; }
body.dark-mode .rpt-page-header { background: var(--c-bg) !important; border-color: var(--c-border) !important; }
body.dark-mode .rpt-page-title, body.dark-mode .rpt-reports-heading { color: var(--c-text) !important; }
body.dark-mode .rpt-content { background: var(--c-bg) !important; }
body.dark-mode .rpt-content-title { color: var(--c-text) !important; }
body.dark-mode .rpt-table-wrap { background: var(--c-surface) !important; border-color: var(--c-border) !important; }
body.dark-mode .rpt-table thead tr { background: var(--c-surface) !important; border-color: var(--c-border) !important; }
body.dark-mode .rpt-table th { color: var(--c-text-secondary) !important; }
body.dark-mode .rpt-table td { color: var(--c-text) !important; border-color: var(--c-border) !important; }
body.dark-mode .rpt-table tbody tr:hover { background: var(--c-surface2) !important; }
body.dark-mode .rpt-device-name { color: var(--c-text) !important; }
body.dark-mode .rpt-count { color: var(--c-text-secondary) !important; }
body.dark-mode .rpt-btn-green { background: #4cae4c !important; }

/* Date picker components (insight pages) */
body.dark-mode [class*="dp-cancel"], body.dark-mode [class*="dp-nav-btn"],
body.dark-mode [class*="dp-day-inner"] { background: var(--c-surface) !important; color: var(--c-text) !important; }

/* Profile pages nav */
body.dark-mode [class*="pr-topbar"] { background: var(--c-surface) !important; border-color: var(--c-border) !important; }
body.dark-mode [class*="pr-nav-subitem"] { background: transparent !important; color: var(--c-text) !important; }
body.dark-mode [class*="pr-nav-subitem"]:hover { background: var(--c-surface) !important; }

/* Multi-select boxes, chip containers */
body.dark-mode [class*="multisel"], body.dark-mode [class*="chip"] { background: var(--c-surface) !important; border-color: var(--c-border) !important; color: var(--c-text) !important; }

/* Scope picker */
body.dark-mode [class*="scope-picker"] { background: var(--c-surface) !important; border-color: var(--c-border) !important; color: var(--c-text) !important; }

/* Notification page */
body.dark-mode .notif-page { background: var(--c-bg) !important; }

/* Platform/data-sync pages */
body.dark-mode [class*="ds-select"], body.dark-mode [class*="ds-input"],
body.dark-mode [class*="ds-btn-secondary"] { background: var(--c-surface) !important; border-color: var(--c-border) !important; color: var(--c-text) !important; }

/* Internet overview pages */
body.dark-mode [class*="iod-"] { background: var(--c-surface) !important; border-color: var(--c-border) !important; color: var(--c-text) !important; }

/* Alert cases page */
body.dark-mode .alc-table { background: var(--c-surface) !important; border-color: var(--c-border) !important; }
body.dark-mode .alc-back-btn { background: transparent !important; }
body.dark-mode .alc-back-btn:hover { background: rgba(92,184,92,0.15) !important; }
body.dark-mode .alc-filter-btn:not(.active) { background: var(--c-surface) !important; border-color: var(--c-border) !important; color: var(--c-text) !important; }
body.dark-mode .alc-filter-btn:not(.active):hover { background: var(--c-surface2) !important; }
body.dark-mode .alc-table thead th { background: var(--c-surface) !important; border-color: var(--c-border) !important; color: #c8c8d8 !important; }
body.dark-mode .alc-table tbody tr { border-color: var(--c-border) !important; }
body.dark-mode .alc-table tbody tr:hover { background: var(--c-surface) !important; }
body.dark-mode .alc-type { color: var(--c-text) !important; }
body.dark-mode .alc-date { color: var(--c-text-secondary) !important; }
body.dark-mode .alc-user-name { color: var(--c-text) !important; }
body.dark-mode .alc-user-email { color: var(--c-text-secondary) !important; }
body.dark-mode .alc-incident-text { color: var(--c-text) !important; }
body.dark-mode .alc-incident-url { color: var(--c-text-secondary) !important; }
body.dark-mode .alc-assigned { color: var(--c-text) !important; }
body.dark-mode .alc-assigned-email { color: var(--c-text-secondary) !important; }

/* Trigger buttons (for custom multi-selects) */
body.dark-mode [class*="-trigger"]:not(.st-toggle-btn) { background: var(--c-surface) !important; border-color: var(--c-border) !important; color: var(--c-text) !important; }

/* ── NUCLEAR: catch every remaining white/light element in content ── */
body.dark-mode .app-content select,
body.dark-mode .app-content input[type="text"],
body.dark-mode .app-content input[type="number"],
body.dark-mode .app-content input[type="email"],
body.dark-mode .app-content input[type="search"],
body.dark-mode .app-content input[type="password"],
body.dark-mode .app-content input:not([type]),
body.dark-mode .app-content textarea {
  background: #222240 !important; color: #e0e0e8 !important; border-color: #3a3a5c !important;
}
body.dark-mode .app-content select option { background: #222240; color: #e0e0e8; }
body.dark-mode .app-content [style*="background:#fff"] { background: #222240 !important; }
body.dark-mode .app-content [style*="background: #fff"] { background: #222240 !important; }
body.dark-mode .app-content [style*="background:white"] { background: #222240 !important; }
body.dark-mode .app-content [style*="background: white"] { background: #222240 !important; }
body.dark-mode .app-content [style*="background:#fafafa"] { background: #1e1e36 !important; }
body.dark-mode .app-content [style*="background: #fafafa"] { background: #1e1e36 !important; }
body.dark-mode .app-content [style*="background:#f9fafb"] { background: #1e1e36 !important; }
body.dark-mode .app-content [style*="background:#f3f4f6"] { background: #2a2a4a !important; }
body.dark-mode .app-content [style*="background:#f5f5f6"] { background: #2a2a4a !important; }

/* ── Nuclear catch-all: force text colors on ALL app-content descendants ── */
/* Inline <style> blocks in HTML files define classes with color:#111 that load   */
/* AFTER custom.css, so source-order wins. !important here ensures dark mode text. */
body.dark-mode .app-content,
body.dark-mode .app-content div,
body.dark-mode .app-content span,
body.dark-mode .app-content p,
body.dark-mode .app-content label,
body.dark-mode .app-content li,
body.dark-mode .app-content td,
body.dark-mode .app-content th,
body.dark-mode .app-content a:not([class*="btn-primary"]),
body.dark-mode .app-content button:not([class*="btn-primary"]):not([class*="btn-danger"]):not([class*="active"]),
body.dark-mode .app-content input,
body.dark-mode .app-content textarea,
body.dark-mode .app-content select {
  color: var(--c-text) !important;
}
/* Preserve secondary/muted text where explicitly set via CSS variables */
body.dark-mode .app-content [class*="-desc"],
body.dark-mode .app-content [class*="-sub"],
body.dark-mode .app-content [class*="-hint"],
body.dark-mode .app-content [class*="-meta"],
body.dark-mode .app-content [class*="-secondary"],
body.dark-mode .app-content [class*="-muted"],
body.dark-mode .app-content [class*="-placeholder"],
body.dark-mode .app-content ::placeholder {
  color: var(--c-text-secondary) !important;
}
/* Preserve primary/accent colors */
body.dark-mode .app-content [class*="active"]:not(table tr):not([class*="-row"]) {
  color: var(--c-primary) !important;
}
/* Preserve white text on colored backgrounds (buttons, badges with bg) */
body.dark-mode .app-content [class*="btn-primary"],
body.dark-mode .app-content [class*="btn-danger"],
body.dark-mode .app-content [class*="state-badge"],
body.dark-mode .app-content [class*="status-badge"] {
  color: #fff !important;
}

/* ── Dark mode: missing pattern coverage ── */

/* Card headers — border was set but not background */
body.dark-mode [class*="-card-header"],
body.dark-mode [class*="-card-hdr"],
body.dark-mode [class*="-section-hd"],
body.dark-mode [class*="-hdr"]:not(.app-header) {
  background: var(--c-surface2) !important;
  border-color: var(--c-border) !important;
  color: var(--c-text) !important;
}

/* Banners, callouts, info boxes */
body.dark-mode [class*="banner"]:not(.ld-banner),
body.dark-mode [class*="callout"],
body.dark-mode [class*="info-box"],
body.dark-mode [class*="info-banner"],
body.dark-mode [class*="notice"],
body.dark-mode [class*="alert-box"] {
  background: #1a2a3e !important;
  border-color: #2a4a5c !important;
  color: var(--c-text) !important;
}
body.dark-mode [class*="banner"] i,
body.dark-mode [class*="callout"] i,
body.dark-mode [class*="info-banner"] i { color: var(--c-primary) !important; }

/* Save / action bars (fixed-position, outside .app-content) */
body.dark-mode [class*="-save-bar"],
body.dark-mode [class*="-action-bar"],
body.dark-mode [class*="-bottom-bar"],
body.dark-mode [class*="-toast"] {
  background: #16162b !important;
  border-color: var(--c-border) !important;
  color: var(--c-text) !important;
}

/* Generic outline / secondary buttons not caught by existing rules */
body.dark-mode [class*="-btn"]:not([class*="btn-primary"]):not([class*="btn-danger"]):not([class*="active"]):not([class*="nav"]):not([class*="tab"]):not([class*="toggle"]) {
  background: var(--c-surface) !important;
  border-color: var(--c-border) !important;
  color: var(--c-text) !important;
}
body.dark-mode [class*="-btn"]:not([class*="btn-primary"]):not([class*="btn-danger"]):not([class*="active"]):not([class*="nav"]):not([class*="tab"]):not([class*="toggle"]):hover {
  background: var(--c-surface2) !important;
}

/* parent-portal-settings.html specific */
body.dark-mode .pp-card { background: var(--c-surface) !important; border-color: var(--c-border) !important; }
body.dark-mode .pp-card-header { background: var(--c-surface2) !important; border-color: var(--c-border) !important; color: var(--c-text) !important; }
body.dark-mode .pp-card-body { background: var(--c-surface) !important; }
body.dark-mode .pp-card-sub { color: var(--c-text-secondary) !important; }
body.dark-mode .pp-info-banner { background: #1a2a3e !important; border-color: #2a4a5c !important; color: var(--c-text) !important; }
body.dark-mode .pp-btn { background: var(--c-surface) !important; border-color: var(--c-border) !important; color: var(--c-text) !important; }
body.dark-mode .pp-btn.primary { background: var(--c-primary) !important; color: #fff !important; border-color: var(--c-primary) !important; }
body.dark-mode .pp-btn.danger { border-color: #f87171 !important; color: #f87171 !important; background: transparent !important; }
body.dark-mode .pp-save-bar { background: #16162b !important; border-color: var(--c-border) !important; }
body.dark-mode .pp-modal { background: var(--c-surface) !important; }
body.dark-mode .pp-modal-header { border-color: var(--c-border) !important; color: var(--c-text) !important; }
body.dark-mode .pp-modal-body { background: var(--c-surface) !important; }
body.dark-mode .pp-url-box { background: var(--c-surface2) !important; }
body.dark-mode .pp-url-box span { color: var(--c-text) !important; }
body.dark-mode .pp-warning-callout { background: #2a1a1a !important; border-color: #5c2a2a !important; }
body.dark-mode .pp-radio-card { background: var(--c-surface) !important; border-color: var(--c-border) !important; }
body.dark-mode .pp-radio-card.selected { background: #1a2a3e !important; border-color: var(--c-primary) !important; }
body.dark-mode .pp-toggle-row { border-color: var(--c-border) !important; }
body.dark-mode .pp-sub-heading { border-color: var(--c-border) !important; color: var(--c-text) !important; }
body.dark-mode .pp-nested { border-color: var(--c-border) !important; }

/* filtering-overview.html specific */
body.dark-mode .fo-card { background: var(--c-surface) !important; border-color: var(--c-border) !important; }
body.dark-mode .fo-card-title { color: var(--c-text) !important; }
body.dark-mode .fo-dp-panel { background: var(--c-surface) !important; border-color: var(--c-border) !important; }
body.dark-mode .fo-dp-inp { background: var(--c-surface) !important; border-color: var(--c-border) !important; color: var(--c-text) !important; }

/* alert-dashboard.html specific */
body.dark-mode .al-card { background: var(--c-surface) !important; border-color: var(--c-border) !important; }
body.dark-mode .al-stat-card { background: var(--c-surface) !important; border-color: var(--c-border) !important; }
body.dark-mode .al-stat-num { color: var(--c-text) !important; }
body.dark-mode .al-card-header { background: var(--c-surface2) !important; border-color: var(--c-border) !important; }
body.dark-mode .al-view-all { color: var(--c-primary) !important; }

/* insight-dashboard.html specific */
body.dark-mode .ins-widget { background: var(--c-surface) !important; border-color: var(--c-border) !important; }
body.dark-mode .ins-stat-card, body.dark-mode .ins-stat-row { background: var(--c-surface) !important; border-color: var(--c-border) !important; }
body.dark-mode .ins-stat-value, body.dark-mode .ins-stat-label { color: var(--c-text) !important; }
body.dark-mode .ins-chart-stat-val { color: var(--c-text) !important; }
body.dark-mode .ins-title, body.dark-mode .ins-widget-title { color: var(--c-text) !important; }
body.dark-mode .ins-btn { background: var(--c-surface) !important; border-color: var(--c-border) !important; color: var(--c-text) !important; }
body.dark-mode .ins-btn:hover { background: var(--c-surface2) !important; }
body.dark-mode .ins-dropdown { background: var(--c-surface) !important; border-color: var(--c-border) !important; color: var(--c-text) !important; }
body.dark-mode .ins-dropdown-panel { background: var(--c-surface) !important; border-color: var(--c-border) !important; }
body.dark-mode .ins-dropdown-option { color: var(--c-text) !important; }
body.dark-mode .ins-dropdown-option:hover { background: var(--c-surface2) !important; }
body.dark-mode .ins-filter-pill { background: var(--c-surface) !important; border-color: var(--c-border) !important; color: var(--c-text-secondary) !important; }
body.dark-mode .ins-modal { background: var(--c-surface) !important; }
body.dark-mode .ins-modal-dd-btn { background: var(--c-surface2) !important; border-color: var(--c-border) !important; color: var(--c-text) !important; }
body.dark-mode .ins-modal-dd-panel { background: var(--c-surface) !important; border-color: var(--c-border) !important; }
body.dark-mode .ins-modal-dd-opt { color: var(--c-text) !important; }
body.dark-mode .ins-modal-dd-opt:hover { background: var(--c-surface2) !important; }
body.dark-mode .ins-tag, body.dark-mode .lit { background: #1a2a3e !important; color: var(--c-text) !important; }
body.dark-mode .ins-pill { background: var(--c-surface2) !important; border-color: var(--c-border) !important; color: var(--c-text-secondary) !important; }
body.dark-mode .ins-action-menu { background: var(--c-surface) !important; border-color: var(--c-border) !important; }
body.dark-mode .ins-action-menu-item { color: var(--c-text) !important; }
body.dark-mode .ins-action-menu-item:hover { background: var(--c-surface2) !important; }
body.dark-mode .ins-multisel-panel { background: var(--c-surface) !important; border-color: var(--c-border) !important; }
body.dark-mode .ins-app-name { color: var(--c-text) !important; }
body.dark-mode .ins-edit-input, body.dark-mode .ins-edit-select { background: var(--c-surface2) !important; border-color: var(--c-border) !important; color: var(--c-text) !important; }
body.dark-mode .ins-radio-item { color: var(--c-text) !important; }
body.dark-mode .ins-modal-field-label, body.dark-mode .ins-modal-field-value { color: var(--c-text) !important; }
body.dark-mode .ins-modal-title { color: var(--c-text) !important; }