/* NoviPortal theme shared by the persistent shell and its same-origin page frame. */
:root[data-theme="light"] {
  color-scheme: light;
  --shell-bg: #f3f6fa;
  --shell-edge: #d7e1e9;
  --shell-cyan: #08748b;
  --shell-muted: #5a6e7f;
  --shell-white: #1c2d3b;
  --bg: #f3f6fa;
  --panel: #ffffff;
  --edge: #d7e1e9;
  --cyan: #08748b;
  --green: #14805e;
  --muted: #5a6e7f;
  --white: #1c2d3b;
  --pw-bg: #f3f6fa;
  --pw-panel: #ffffff;
  --pw-edge: #d7e1e9;
  --pw-cyan: #08748b;
  --pw-muted: #5a6e7f;
  --pw-white: #1c2d3b;
}

html[data-theme="light"] body.portal-shell-body {
  background: var(--shell-bg);
  color: var(--shell-white);
}
html[data-theme="light"] .portal-shell-sidebar {
  border-color: var(--shell-edge);
  background: #ffffff;
  box-shadow: 5px 0 22px #1a33420a;
}
html[data-theme="light"] .portal-shell-brand { color: #1c2d3b; }
/* Keep the Novi shield and lock legible on white surfaces. Sidebar selection icons stay unchanged. */
html[data-theme="light"] img[src*="novi-shield-lock.svg"] { filter: brightness(0) !important; }
html[data-theme="light"] .portal-shell-novi { color: #1c2d3b; }
html[data-theme="light"] .portal-shell-wordmark small,
html[data-theme="light"] .portal-shell-navtitle { color: #637788; }
html[data-theme="light"] .portal-shell-navigation nav a { color: #344b5c; }
html[data-theme="light"] .portal-shell-navigation nav a:hover,
html[data-theme="light"] .portal-shell-navigation nav a[aria-current="page"] {
  background: #e8f4f7;
  color: #075c72;
  box-shadow: inset 3px 0 var(--shell-cyan);
}
html[data-theme="light"] .portal-shell-status {
  border-color: #d6e2e9;
  background: #f6f9fb;
  color: #526879;
}
html[data-theme="light"] .portal-shell-status b { color: #147a58; }
html[data-theme="light"] .portal-shell-frame { background: var(--shell-bg); }
html[data-theme="light"] .portal-shell-toolbar #language-switch {
  border-color: #c8d6df !important;
  background-color: #ffffff !important;
  color: #233746 !important;
  color-scheme: light;
}
.dashboard-theme-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex: 0 0 auto;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #d8edf4;
  font: 600 11px/1 Inter, ui-sans-serif, system-ui, sans-serif;
  white-space: nowrap;
}
.dashboard-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 33px;
  width: 33px;
  height: 23px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  appearance: none;
  cursor: pointer;
}
.dashboard-theme-track {
  display: inline-flex;
  align-items: center;
  width: 29px;
  height: 17px;
  padding: 2px;
  border: 1px solid #557185;
  border-radius: 99px;
  background: #081622;
}
.dashboard-theme-track i {
  display: block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #9bb3c2;
  transition: transform .18s, background .18s;
}
html[data-theme="light"] body:not(.portal-shell-body) .dashboard-support-grid .action {
  background: #ffffff !important;
  border-color: #d7e1e9 !important;
  color: #000000 !important;
  box-shadow: 0 2px 8px #1a33420a !important;
}
html[data-theme="light"] body:not(.portal-shell-body) #traffic-device {
  background-color: #ffffff !important;
  border-color: #d7e1e9 !important;
  color: #1c2d3b !important;
  box-shadow: 0 2px 8px #1a33420a !important;
}
/* Keep Chrono Flow and both theme-switch controls crisp in light mode. */
html[data-theme="light"] body:not(.portal-shell-body) #novi-holo-preview .nh-picker-trigger,
html[data-theme="light"] body:not(.portal-shell-body) #novi-holo-preview .nh-picker-trigger:hover,
html[data-theme="light"] body:not(.portal-shell-body) #novi-holo-preview .nh-picker-trigger[aria-expanded="true"] {
  background: #ffffff !important;
  border-color: #d7e1e9 !important;
  color: #1c2d3b !important;
}
html[data-theme="light"] .portal-theme-toggle [data-i18n="theme.light"],
html[data-theme="light"] body:not(.portal-shell-body) .dashboard-theme-control > [data-i18n="theme.light"] {
  color: #000000 !important;
}
html[data-theme="light"] .portal-theme-track,
html[data-theme="light"] body:not(.portal-shell-body) .dashboard-theme-track {
  border-color: #000000 !important;
  background: #ffffff !important;
}
html[data-theme="light"] .portal-theme-track i,
html[data-theme="light"] body:not(.portal-shell-body) .dashboard-theme-track i {
  background: #000000 !important;
}
/* Match the dashboard's full top control row to its white light-mode surface. */
html[data-theme="light"] body:not(.portal-shell-body) .topbar .topright :is(
  .pill, #security-notifications > summary, #language-switch, .logout, #dashboard-theme-toggle
) {
  background-color: #ffffff !important;
  border-color: #d7e1e9 !important;
  color: #1c2d3b !important;
  box-shadow: 0 2px 8px #1a33420a !important;
}
html[data-theme="light"] body:not(.portal-shell-body) #security-notifications > summary svg {
  color: #263849 !important;
  stroke: currentColor !important;
}
html[data-theme="light"] .dashboard-theme-control {
  color: #24384a !important;
}
html[data-theme="light"] .dashboard-theme-control > [data-i18n="theme.light"] {
  color: #006f86 !important;
  font-weight: 750;
}
html[data-theme="light"] .dashboard-theme-track {
  border-color: #91c6d0;
  background: #dff3f6;
}
html[data-theme="light"] .dashboard-theme-track i {
  transform: translateX(12px);
  background: #08758c;
}
html[data-theme="dark"] .dashboard-theme-control > [data-i18n="theme.dark"] {
  color: #8ae7f3 !important;
  font-weight: 750;
}
@media (max-width: 520px) {
  html[data-theme] body:not(.portal-shell-body) .topbar { flex-wrap: wrap; }
  html[data-theme] body:not(.portal-shell-body) .topright {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px;
  }
  html[data-theme] body:not(.portal-shell-body) .dashboard-theme-control {
    width: 40px;
    padding: 0;
  }
  html[data-theme] body:not(.portal-shell-body) .dashboard-theme-control > span[data-i18n] {
    display: none;
  }
}

/* The iframe pages use several generations of styles. These common light surfaces
   normalize legacy inline colors while preserving the existing layouts and icons. */
html[data-theme="light"] body:not(.portal-shell-body) {
  color-scheme: light;
  background: #f3f6fa !important;
  color: #263849 !important;
}
html[data-theme="light"] body:not(.portal-shell-body) *:not(svg):not(svg *) {
  color: #263849 !important;
}
html[data-theme="light"] body:not(.portal-shell-body) :is(
  section, article, .panel, .card, .module, .metric, .portal-card, .portal-stat,
  .portal-visitor, .status-panel, .scan-history-panel, .radar-panel,
  .telemetry-panel, .novi-network-panel, .novi-status-card, .novi-intel,
  .device-card, .device-disclosure, .hub-card, .nh-panel, .dropzone,
  .device-page > section, .portal-form-card, .portal-form
) {
  background: #ffffff !important;
  border-color: #d5e0e8 !important;
  box-shadow: 0 8px 24px #1a33420b !important;
}
html[data-theme="light"] body:not(.portal-shell-body) [style*="background"] {
  background: #ffffff !important;
  background-image: none !important;
}
html[data-theme="light"] body:not(.portal-shell-body) :is(
  a, .portal-btn, .action, .portal-badge, .event-level, .tag, .badge,
  .service-badge, .hub-open, .text-link
) {
  color: #075f77 !important;
}
html[data-theme="light"] body:not(.portal-shell-body) :is(
  button, input, select, textarea, .portal-btn, .action, .hub-open
) {
  border-color: #b9ccd7 !important;
  background: #edf5f8 !important;
  color: #203b4c !important;
  color-scheme: light;
}
html[data-theme="light"] body:not(.portal-shell-body) :is(input, select, textarea) {
  background: #ffffff !important;
  box-shadow: inset 0 1px 2px #1a33420a;
}
html[data-theme="light"] body:not(.portal-shell-body) :is(
  .portal-head, .topbar, .device-header-rule, .hub-head, .portal-table th,
  .portal-table td, th, td
) { border-color: #d7e1e9 !important; }
html[data-theme="light"] body:not(.portal-shell-body) :is(
  .portal-message, .portal-head h1, .portal-toolbar h2, .portal-card h2,
  .hub-head h1, .hub-card h2, .network-page-title, .device-page-header h1,
  .scan-history-heading h2, .brand, .brand-novi
) { color: #1c2d3b !important; }
html[data-theme="light"] body:not(.portal-shell-body) :is(
  .portal-kicker, .device-overline, .hub-overline, .network-page-title svg,
  .device-tile-icon, .icon-svg, .module-heading .icon, .brand-portal
) { color: #08748b !important; }
html[data-theme="light"] body:not(.portal-shell-body) :is(
  .event-level.warning, .portal-badge.warning, .warning
) { background: #fff5df !important; color: #77520d !important; border-color: #e8d09b !important; }
html[data-theme="light"] body:not(.portal-shell-body) :is(
  .event-level.critical, .portal-badge.critical, .danger, .infected, .error
) { background: #fff0f1 !important; color: #8c2f3d !important; border-color: #e6b8bf !important; }
html[data-theme="light"] body:not(.portal-shell-body) :is(.clean, .success, .green) {
  color: #176b4e !important;
}
html[data-theme="light"] body:not(.portal-shell-body) :is(.portal-badge.read, .portal-badge.unread, .portal-badge.info) {
  background: #eaf3f7 !important;
  color: #31556a !important;
  border-color: #c6d8e2 !important;
}
html[data-theme="light"] body:not(.portal-shell-body) :is(.portal-page, main, .hub-main, .workspace) {
  background-color: transparent !important;
}
html[data-theme="light"] body:not(.portal-shell-body) :is(.sidebar, .sidebottom, .pill, .metricrows .metric) {
  background: #ffffff !important;
  border-color: #d5e0e8 !important;
}
html[data-theme="light"] body:not(.portal-shell-body) :is(.nav a, .nav a.active, .sidebar nav a) {
  color: #344b5c !important;
}
html[data-theme="light"] body:not(.portal-shell-body) :is(.nav a.active, .nav a:hover, .sidebar nav a:hover) {
  background: #e8f4f7 !important;
  color: #075c72 !important;
}
html[data-theme="light"] body:not(.portal-shell-body) #novi-device-radar {
  background: repeating-radial-gradient(circle at center, transparent 0, transparent 58px,
    #08748b22 59px, transparent 61px), radial-gradient(circle, #effbff 0%, #e4f1f5 72%, #d9e9ef 100%) !important;
}
html[data-theme="light"] body:not(.portal-shell-body) #novi-holo-preview .nh-panel:before {
  opacity: .12 !important;
}

/* The thumb sits beside the selected mode: Hell on the left, Dunkel on the right. */
html[data-theme="light"] .portal-theme-track i,
html[data-theme="light"] body:not(.portal-shell-body) .dashboard-theme-track i {
  transform: translateX(0) !important;
}
html[data-theme="dark"] .portal-theme-track i {
  transform: translateX(14px) !important;
}
html[data-theme="dark"] body:not(.portal-shell-body) .dashboard-theme-track i {
  transform: translateX(12px) !important;
}
@media (max-width: 680px) {
  html[data-theme="light"] .portal-theme-track i { transform: translateX(0) !important; }
  html[data-theme="dark"] .portal-theme-track i { transform: translateX(10px) !important; }
}

/* Remove the decorative corner arcs from the four dashboard metric cards. */
html[data-theme] body:not(.portal-shell-body) .stats > .stat::after {
  content: none !important;
  display: none !important;
}

html[data-theme="light"] body:not(.portal-shell-body) .topbar .topright .pill svg {
  color: #000000 !important;
  stroke: #000000 !important;
}

html[data-theme="light"] body:not(.portal-shell-body) :is(#language-switch, #traffic-device) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
}

html[data-theme="light"] body:not(.portal-shell-body) #novi-holo-preview .nh-live {
  background: #ffffff !important;
  border-color: #d7e1e9 !important;
  color: #1c2d3b !important;
}
html[data-theme="light"] body:not(.portal-shell-body) #novi-holo-preview .nh-live::before {
  background: #14805e !important;
  box-shadow: 0 0 7px #14805e55 !important;
  animation: novi-online-breathe 2.6s ease-in-out infinite !important;
  transform-origin: center;
}
html[data-theme="light"] body:not(.portal-shell-body) .platform-live {
  color: #000000 !important;
}
html[data-theme="light"] body:not(.portal-shell-body) .platform-live::before {
  background: #40e5ae !important;
  box-shadow: 0 0 10px #40e5ae88 !important;
}

@keyframes novi-online-green-sync {
  0%, 100% { opacity: .62; transform: scale(.95); box-shadow: 0 0 4px #00c85366, 0 0 0 0 #00c85300; }
  50% { opacity: 1; transform: scale(1.12); box-shadow: 0 0 13px #00c853cc, 0 0 0 5px #00c85333; }
}
html[data-theme="light"] body:not(.portal-shell-body) .topbar .live::before,
html[data-theme="light"] body:not(.portal-shell-body) .platform-live::before {
  background: #00c853 !important;
  background-image: none !important;
  box-shadow: 0 0 10px #00c85399 !important;
  animation: novi-online-green-sync 2.6s ease-in-out infinite !important;
  animation-play-state: running !important;
  transform-origin: center;
  filter: none !important;
}

#traffic-status.is-live {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 30px;
  padding: 7px 12px !important;
  border-radius: 999px !important;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.3px;
  white-space: nowrap;
}
#traffic-status.is-live::before {
  content: "";
  display: inline-block;
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #49e7b3;
  box-shadow: 0 0 10px #49e7b3;
  animation: novi-online-breathe 2.6s ease-in-out infinite;
  transform-origin: center;
}
html[data-theme="dark"] body:not(.portal-shell-body) #traffic-status.is-live {
  border-color: #1e766e !important;
  background: #0d2b2a !important;
  color: #63efc2 !important;
}
html[data-theme="light"] body:not(.portal-shell-body) #traffic-status.is-live {
  border-color: #d7e1e9 !important;
  background: #ffffff !important;
  color: #1c2d3b !important;
}
html[data-theme="light"] body:not(.portal-shell-body) #traffic-status.is-live::before {
  background: #00c853 !important;
  box-shadow: 0 0 10px #00c85399 !important;
  animation: novi-online-green-sync 2.6s ease-in-out infinite !important;
}

#novi-holo-preview .nh-status {
  align-items: flex-start !important;
  padding-top: 0 !important;
  transform: translateY(-7px);
}

/* Keep ordinary controls consistent with the white dashboard controls in light mode. */
html[data-theme="light"] body:not(.portal-shell-body) :is(
  button, input[type="button"], input[type="submit"], input[type="reset"],
  select, .portal-btn, .action, .hub-open, .dashboard-theme-toggle,
  a.button, a.btn, [role="button"]
) {
  background-color: #ffffff !important;
  border-color: #d7e1e9 !important;
  color: #1c2d3b !important;
  box-shadow: 0 2px 8px #1a33420a !important;
  color-scheme: light;
}
html[data-theme="light"] body:not(.portal-shell-body) :is(
  button, input[type="button"], input[type="submit"], input[type="reset"],
  select, .portal-btn, .action, .hub-open, .dashboard-theme-toggle,
  a.button, a.btn, [role="button"]
):hover:not(:disabled) {
  background-color: #f6f9fb !important;
  border-color: #bccbd5 !important;
  color: #1c2d3b !important;
}
html[data-theme="light"] body:not(.portal-shell-body) :is(
  button, input[type="button"], input[type="submit"], input[type="reset"],
  select, .portal-btn, .action, .hub-open, .dashboard-theme-toggle,
  a.button, a.btn, [role="button"]
):focus-visible {
  outline: 2px solid #08748b !important;
  outline-offset: 2px;
}
html[data-theme="light"] body:not(.portal-shell-body) :is(
  button, input[type="button"], input[type="submit"], input[type="reset"],
  .portal-btn, .action, .hub-open, .dashboard-theme-toggle,
  a.button, a.btn, [role="button"]
) svg {
  color: #1c2d3b !important;
  stroke: currentColor !important;
}
html[data-theme="light"] body:not(.portal-shell-body) :is(
  button, input[type="button"], input[type="submit"], input[type="reset"],
  .portal-btn, .action, .hub-open, .dashboard-theme-toggle,
  a.button, a.btn, [role="button"]
) *:not(svg):not(svg *) {
  color: inherit !important;
}
html[data-theme="light"] body:not(.portal-shell-body) .hub-card .hub-open,
html[data-theme="light"] body:not(.portal-shell-body) .hub-card:hover .hub-open {
  background-color: #ffffff !important;
  border-color: #d7e1e9 !important;
  color: #1c2d3b !important;
  box-shadow: 0 2px 8px #1a33420a !important;
}

/* DevSec icon tiles follow the black-on-white light-mode treatment. */
html[data-theme="light"] body:not(.portal-shell-body) .hub-grid .hub-icon-wrap {
  background: #ffffff !important;
  background-image: none !important;
  border-color: #111111 !important;
  box-shadow: none !important;
}
html[data-theme="light"] body:not(.portal-shell-body) .hub-grid .hub-icon-wrap .hub-icon,
html[data-theme="light"] body:not(.portal-shell-body) .hub-grid .hub-icon-wrap .hub-icon * {
  color: #111111 !important;
  stroke: #111111 !important;
  fill: none !important;
}

/* Keep the security-alert count visibly red in light mode despite the global white-control reset. */
html[data-theme="light"] body:not(.portal-shell-body) #security-notifications #notification-count {
  background:#d92d3f !important;
  background-image:none !important;
  color:#ffffff !important;
  border:1px solid #ffffff !important;
  box-shadow:0 1px 4px #6f111f33 !important;
}

/* Security Center module icons use the same clean black-on-white treatment as other light-mode tiles. */
html[data-theme="light"] body:not(.portal-shell-body) .modules .module-heading .icon {
  color:#111111 !important;
  background:#ffffff !important;
  background-image:none !important;
  border:1px solid #1c2d3b !important;
  box-shadow:none !important;
}
html[data-theme="light"] body:not(.portal-shell-body) .modules .module-heading .icon svg,
html[data-theme="light"] body:not(.portal-shell-body) .modules .module-heading .icon svg * {
  color:#111111 !important;
  stroke:#111111 !important;
  fill:none !important;
  filter:none !important;
}
html[data-theme="light"] body:not(.portal-shell-body) .modules .module-heading .icon img {
  filter:brightness(0) !important;
}

/* Keep Security Center module icons on one shared top line; long headings may wrap beneath. */
html[data-theme="light"] body:not(.portal-shell-body) .modules .module-heading {
  align-items:flex-start !important;
}
html[data-theme="light"] body:not(.portal-shell-body) .modules .module-heading > div {
  min-width:0 !important;
}
/* CrowdSec status and the CrowdSec/Wazuh setup disclosures use the same white controls as the rest of the light interface. */
html[data-theme="light"] body:not(.portal-shell-body) .modules .module :is(.service-badge,details.secondary) {
  display:block !important;
  width:100% !important;
  border:1px solid #b9ccd7 !important;
  border-radius:9px !important;
  background:#ffffff !important;
  background-image:none !important;
  color:#1c2d3b !important;
  box-shadow:0 2px 8px #1a33420a !important;
}
html[data-theme="light"] body:not(.portal-shell-body) .modules .module .service-badge {
  text-align:center !important;
}
html[data-theme="light"] body:not(.portal-shell-body) .modules .module details.secondary summary,
html[data-theme="light"] body:not(.portal-shell-body) .modules .module details.secondary p {
  color:#1c2d3b !important;
}
html[data-theme="light"] body:not(.portal-shell-body) .modules .module details.secondary summary:hover {
  color:#075f77 !important;
}

/* Give the score labels room inside the ring and match the light dashboard badge. */
html[data-theme="light"] body:not(.portal-shell-body) .score {
  padding:8px !important;
}
html[data-theme="light"] body:not(.portal-shell-body) .score span {
  max-width:100%;
  padding-inline:3px;
  margin-top:3px;
  line-height:1.15;
  text-align:center;
}
html[data-theme="light"] body:not(.portal-shell-body) .score span[data-i18n="sc.score"] {
  margin-top:2px;
  font-size:9px;
}
html[data-theme="light"] body:not(.portal-shell-body) #security-score-badge {
  display:inline-flex;
  align-items:center;
  border:1px solid #111111 !important;
  background:#ffffff !important;
  background-image:none !important;
  color:#111111 !important;
  box-shadow:none !important;
}
@media (max-width:680px) {
  html[data-theme="light"] body:not(.portal-shell-body) .score span[data-i18n="sc.score"] {
    font-size:7px;
  }
}


/* Only the Overview iframe may expose a theme selector. The selected theme itself remains global. */
html[data-theme] body.portal-shell-body .portal-theme-toggle {
  display:none !important;
  visibility:hidden !important;
}
html[data-theme] body:not(.portal-shell-body) .dashboard-theme-toggle {
  display:none !important;
}
html[data-theme][data-portal-page="/dashboard"] body:not(.portal-shell-body) .dashboard-theme-toggle {
  display:inline-flex !important;
}
/* dashboard-only-theme-visibility-20261013 */


/* Security Center heading sits directly on the page surface with a single hairline above it. */
html[data-theme="light"] body:not(.portal-shell-body) .shell main section.hero {
  background: transparent !important;
  background-image: none !important;
  border-top-color: #d7e1e9 !important;
  box-shadow: none !important;
}


/* Keep the stretched Chrono-Flow grid column transparent below its own card. */
html[data-theme="light"] body:not(.portal-shell-body) section#novi-holo-preview {
  background: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Keep the dashboard theme switch on the page's gray surface in light mode. */
html[data-theme="light"] body:not(.portal-shell-body) .topbar .topright #dashboard-theme-toggle {
  background: #f3f6fa !important;
  background-color: #f3f6fa !important;
  box-shadow: none !important;
}
html[data-theme="light"] body:not(.portal-shell-body) .topbar .topright #dashboard-theme-toggle .dashboard-theme-track {
  background: #e2e8ee !important;
  border-color: #8796a1 !important;
}
html[data-theme="light"] body:not(.portal-shell-body) .topbar .topright #dashboard-theme-toggle .dashboard-theme-track i {
  background: #ffffff !important;
  box-shadow: 0 0 0 1px #8796a1;
}

html[data-theme="light"] body:not(.portal-shell-body) .shell main.workspace .topbar .topright > button#dashboard-theme-toggle.dashboard-theme-toggle,
html[data-theme="light"] body:not(.portal-shell-body) .shell main.workspace .topbar .topright > button#dashboard-theme-toggle.dashboard-theme-toggle:hover {
  background-color: #f3f6fa !important;
  background-image: none !important;
  border-color: #d7e1e9 !important;
  box-shadow: none !important;
}

/* The dashboard theme control keeps only its labels and the switch, without an outer button frame. */
html[data-theme="light"] body:not(.portal-shell-body) .shell main.workspace .topbar .topright > button#dashboard-theme-toggle.dashboard-theme-toggle,
html[data-theme="light"] body:not(.portal-shell-body) .shell main.workspace .topbar .topright > button#dashboard-theme-toggle.dashboard-theme-toggle:hover {
  border-color: transparent !important;
  border-width: 0 !important;
  box-shadow: none !important;
}

/* In dark mode, show only the two labels and the actual switch on the page surface. */
html[data-theme="dark"] body:not(.portal-shell-body) .shell main.workspace .topbar .topright > button#dashboard-theme-toggle.dashboard-theme-toggle,
html[data-theme="dark"] body:not(.portal-shell-body) .shell main.workspace .topbar .topright > button#dashboard-theme-toggle.dashboard-theme-toggle:hover,
html[data-theme="dark"] body:not(.portal-shell-body) .shell main.workspace .topbar .topright > button#dashboard-theme-toggle.dashboard-theme-toggle:active {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html[data-theme="dark"] body:not(.portal-shell-body) .shell main.workspace .topbar .topright > button#dashboard-theme-toggle.dashboard-theme-toggle:focus {
  outline: none;
}
html[data-theme="dark"] body:not(.portal-shell-body) .shell main.workspace .topbar .topright > button#dashboard-theme-toggle.dashboard-theme-toggle:focus-visible {
  outline: 2px solid #49dff6;
  outline-offset: 3px;
}

/* The mode selector is a switch: keep its hit area steady and style only the track. */
html[data-theme] body:not(.portal-shell-body) .dashboard-theme-control > #dashboard-theme-toggle,
html[data-theme] body:not(.portal-shell-body) .dashboard-theme-control > #dashboard-theme-toggle:hover,
html[data-theme] body:not(.portal-shell-body) .dashboard-theme-control > #dashboard-theme-toggle:active {
  position: static !important;
  z-index: auto !important;
  transform: none !important;
  filter: none !important;
  box-shadow: none !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  transition: none !important;
}
html[data-theme] body:not(.portal-shell-body) .dashboard-theme-control > #dashboard-theme-toggle:hover {
  border-color: transparent !important;
}
html[data-theme] body:not(.portal-shell-body) .dashboard-theme-control > #dashboard-theme-toggle:focus-visible {
  outline: none !important;
}
html[data-theme] body:not(.portal-shell-body) .dashboard-theme-control > #dashboard-theme-toggle:focus-visible .dashboard-theme-track {
  outline: 2px solid #08748b;
  outline-offset: 3px;
}

/* In light mode, the switch hit area blends into the dashboard surface. */
html[data-theme="light"] body:not(.portal-shell-body) .shell main.workspace .topbar .topright > .dashboard-theme-control > #dashboard-theme-toggle,
html[data-theme="light"] body:not(.portal-shell-body) .shell main.workspace .topbar .topright > .dashboard-theme-control > #dashboard-theme-toggle:hover,
html[data-theme="light"] body:not(.portal-shell-body) .shell main.workspace .topbar .topright > .dashboard-theme-control > #dashboard-theme-toggle:active {
  background: #f3f6fa !important;
  background-color: #f3f6fa !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
html[data-theme="light"] body:not(.portal-shell-body) .shell main.workspace .topbar .topright > .dashboard-theme-control > #dashboard-theme-toggle .dashboard-theme-track > i {
  background: #000000 !important;
  box-shadow: none !important;
}

/* Recent-event Info labels stay black on the overview's light surfaces. */
html[data-theme="light"] body.novi-portal-page .dashboard-event-list .event-level.info {
  color: #000000 !important;
}

/* One neutral outline color throughout the light portal. A cascade layer makes
   this policy win over older page-specific !important colors without changing
   border widths, styles, radii, transparent surfaces, or graphical SVG marks. */
@layer novi-light-outlines {
  html[data-theme="light"] body:is(.novi-portal-page, .portal-shell-body),
  html[data-theme="light"] body:is(.novi-portal-page, .portal-shell-body) *:not(svg):not(svg *) {
    border-color: #344b59 !important;
  }
  html[data-theme="light"] body:is(.novi-portal-page, .portal-shell-body) input::file-selector-button {
    border-color: #344b59 !important;
  }
}