/*
 * ORBLIGHT identity layer, versioned in docs/DESIGN-SYSTEM-ORBLIGHT.md.
 * This file changes presentation only. Existing geometry, map behavior,
 * data contracts and JavaScript interaction hooks remain untouched.
 */

:root {
  --app-topbar-height: 64px;
  --identity-font: "Segoe UI Variable Text", "Segoe UI", Arial, sans-serif;
  --identity-canvas: #070b0d;
  --identity-sidebar: #0b1113;
  --identity-topbar: #090e10;
  --identity-surface: #101719;
  --identity-surface-raised: #151e20;
  --identity-surface-hover: #1a2528;
  --identity-surface-active: #1e2d2a;
  --identity-border: #263235;
  --identity-border-strong: #38484c;
  --identity-text: #edf6f2;
  --identity-text-strong: #ffffff;
  --identity-muted: #91a29c;
  --identity-muted-soft: #687a74;
  --identity-green: #02ab53;
  --identity-green-hover: #02964a;
  --identity-green-soft: rgba(2, 171, 83, 0.13);
  --identity-cyan: #24b3c0;
  --identity-blue: #3b82f6;
  --identity-warning: #e6a31a;
  --identity-danger: #e34850;
  --identity-radius: 6px;
  --identity-shadow-menu: 0 20px 52px rgba(0, 0, 0, 0.36);
  --identity-shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  --identity-segment: #0c1214;
  --identity-row-alt: rgba(255, 255, 255, 0.014);
  --identity-motion: 240ms cubic-bezier(0.2, 0.8, 0.2, 1);

  --font-ui: var(--identity-font);
  --ui-canvas: var(--identity-canvas);
  --ui-surface: var(--identity-surface);
  --ui-surface-raised: var(--identity-surface-raised);
  --ui-surface-subtle: var(--identity-surface-hover);
  --ui-border: var(--identity-border);
  --ui-border-soft: #1d292c;
  --ui-foreground: var(--identity-text-strong);
  --ui-muted: var(--identity-muted);
  --ui-muted-soft: var(--identity-muted-soft);
  --ui-accent: var(--identity-green);
  --ui-accent-hover: var(--identity-green-hover);
  --ui-radius: var(--identity-radius);
  --bg: var(--identity-canvas);
  --body-radial: var(--identity-canvas);
  --body-top: var(--identity-canvas);
  --body-bottom: var(--identity-canvas);
  --surface-app: var(--identity-canvas);
  --surface-sidebar: var(--identity-sidebar);
  --surface-topbar: var(--identity-topbar);
  --surface-card: var(--identity-surface);
  --surface-hover: var(--identity-surface-hover);
  --surface-active: var(--identity-surface-active);
  --surface-soft: rgba(255, 255, 255, 0.045);
  --surface-input: var(--identity-surface);
  --line: var(--identity-border);
  --line-soft: #1d292c;
  --line-faint: rgba(255, 255, 255, 0.055);
  --line-panel: var(--identity-border);
  --text: var(--identity-text);
  --text-strong: var(--identity-text-strong);
  --muted: var(--identity-muted);
  --muted-strong: var(--identity-muted);
  --sidebar-muted: #a1b0ab;
  --label: var(--identity-text);
  --icon-muted: #c7d3cf;
  --icon-soft: var(--identity-muted);
  --link: var(--identity-green);
  --focus-green: var(--identity-green);
  --focus-ring: rgba(2, 171, 83, 0.16);
  --focus-pulse: rgba(2, 171, 83, 0.08);
  --profile-toggle-hover: var(--identity-surface-hover);
  --profile-menu-bg: var(--identity-surface-raised);
  --profile-menu-border: var(--identity-border);
  --profile-menu-hover: var(--identity-surface-hover);
  --theme-menu-bg: var(--identity-surface-raised);
  --theme-menu-active: var(--identity-surface-active);
  --theme-menu-hover: var(--identity-surface-hover);
  --notification-menu-bg: var(--identity-surface-raised);
  --notification-menu-border: var(--identity-border);
  --notification-menu-hover: var(--identity-surface-hover);
  --bs-border-radius: var(--identity-radius);
  --bs-border-radius-sm: 4px;
  --bs-border-radius-lg: 8px;
  --bs-body-bg: var(--identity-canvas);
  --bs-body-color: var(--identity-text);
  --bs-border-color: var(--identity-border);
}

:root[data-theme="light"] {
  --identity-canvas: #f3f7f5;
  --identity-sidebar: #edf3f0;
  --identity-topbar: #f8fbf9;
  --identity-surface: #ffffff;
  --identity-surface-raised: #ffffff;
  --identity-surface-hover: #e8f0ec;
  --identity-surface-active: #deebe5;
  --identity-border: #d4dfda;
  --identity-border-strong: #b8c8c1;
  --identity-text: #17221e;
  --identity-text-strong: #09130f;
  --identity-muted: #61716b;
  --identity-muted-soft: #8a9993;
  --identity-green-soft: rgba(2, 171, 83, 0.1);
  --identity-shadow-menu: 0 20px 48px rgba(30, 48, 40, 0.14);
  --identity-shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  --identity-segment: #e5ece8;
  --identity-row-alt: rgba(16, 45, 32, 0.018);

  --ui-border-soft: #e2eae6;
  --body-radial: var(--identity-canvas);
  --body-top: var(--identity-canvas);
  --body-bottom: var(--identity-canvas);
  --surface-soft: rgba(18, 43, 32, 0.04);
  --line-soft: #e2eae6;
  --line-faint: rgba(18, 43, 32, 0.055);
  --sidebar-muted: #52635c;
  --icon-muted: #52635c;
  --profile-menu-bg: #ffffff;
  --theme-menu-bg: #ffffff;
  --notification-menu-bg: #ffffff;
  --bs-body-bg: var(--identity-canvas);
  --bs-body-color: var(--identity-text);
  --bs-border-color: var(--identity-border);
}

html,
body {
  font-family: var(--identity-font);
  letter-spacing: 0;
}

body {
  background: var(--identity-canvas);
  color: var(--identity-text);
}

* {
  scrollbar-color: var(--identity-border-strong) transparent;
}

::selection {
  color: #ffffff;
  background: rgba(2, 171, 83, 0.78);
}

:is(button, a, input, select, textarea, [role="button"], [tabindex]):focus-visible {
  outline: 2px solid var(--identity-green);
  outline-offset: 2px;
}

.layout-shell,
.layout-shell.is-dashboard-console-layout,
.layout-shell.is-device-operations-layout {
  --sidebar-width: 248px;
  --ui-sidebar-width: 248px;
}

.sidebar {
  background: var(--identity-sidebar);
  border-right-color: var(--identity-border);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.018);
}

.content,
.content-body,
.layout-shell.is-dashboard-console-layout .content,
.layout-shell.is-dashboard-console-layout .content-body {
  background: var(--identity-canvas);
}

.app-topbar,
.layout-shell.is-dashboard-console-layout .app-topbar {
  background: var(--identity-topbar);
  border-bottom-color: var(--identity-border);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.018);
}

/* Keep the top divider and its controls consistent on every application page. */
.layout-shell .app-topbar__action--menu {
  width: 28px;
  height: 28px;
  min-height: 28px;
}

.layout-shell :is(
  .app-topbar__action--theme,
  .app-topbar__action--incidents,
  .app-topbar__action--notify
) {
  width: 36px;
  height: 36px;
  min-height: 36px;
}

.layout-shell :is(
  .app-topbar__action--menu svg,
  .app-topbar__action--incidents > svg,
  .app-topbar__action--notify > svg,
  .app-topbar__theme-icons,
  .app-topbar__theme-icons svg
) {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}

.sidebar-brand,
.sidebar-profile {
  border: 1px solid transparent;
  border-radius: var(--identity-radius);
  transition: background-color var(--identity-motion), border-color var(--identity-motion);
}

.sidebar-brand:hover,
.sidebar-brand:focus-visible,
.sidebar-profile:hover,
.sidebar-profile:focus-visible,
.sidebar-profile[aria-expanded="true"] {
  background: var(--identity-surface-hover) !important;
  border-color: var(--identity-border);
}

.sidebar-brand__mark,
.sidebar-profile__avatar {
  border-radius: 6px;
  background: var(--identity-green-soft);
  border: 1px solid rgba(2, 171, 83, 0.22);
}

.sidebar-brand__title,
.sidebar-profile__name {
  color: var(--identity-text-strong);
  font-weight: 650;
}

.sidebar-brand__subtitle,
.sidebar-profile__email,
.sidebar-section-title {
  color: var(--identity-muted);
}

.sidebar-section-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
}

.sidebar-group__toggle,
.sidebar-nav__item,
.sidebar-subnav__item {
  position: relative;
  border: 1px solid transparent;
  border-radius: 5px;
  color: var(--sidebar-muted);
  transition:
    color var(--identity-motion),
    background-color var(--identity-motion),
    border-color var(--identity-motion),
    box-shadow var(--identity-motion);
}

.sidebar-group__panel {
  padding-right: 1px;
}

.sidebar-subnav__item {
  width: auto;
  max-width: none;
  min-width: 0;
}

.sidebar-group__toggle:hover,
.sidebar-nav__item:hover,
.sidebar-subnav__item:hover {
  color: var(--identity-text);
  background: var(--identity-surface-hover);
  border-color: var(--identity-border);
  text-decoration: none;
}

.sidebar-group__toggle.active,
.sidebar-nav__item.active,
.sidebar-subnav__item.active {
  color: var(--identity-text-strong);
  background: var(--identity-surface-active);
  border-color: var(--identity-border-strong);
  box-shadow:
    inset 3px 0 0 var(--identity-green),
    inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.sidebar-group__toggle.active .sidebar-nav__icon,
.sidebar-nav__item.active .sidebar-nav__icon,
.sidebar-subnav__item.active .sidebar-nav__icon {
  color: var(--identity-green);
}

.sidebar-profile-menu,
.theme-menu,
.notifications-menu,
.incidents-menu {
  background: var(--identity-surface-raised);
  border-color: var(--identity-border);
  border-radius: var(--identity-radius);
  box-shadow: var(--identity-shadow-menu);
}

.app-topbar__action,
.app-topbar__action--menu,
.layout-shell.is-dashboard-console-layout .app-topbar__action--theme,
.layout-shell.is-dashboard-console-layout .app-topbar__action--incidents,
.layout-shell.is-dashboard-console-layout .app-topbar__action--notify {
  border-radius: 5px;
  color: var(--identity-muted);
  transition: color var(--identity-motion), background-color var(--identity-motion);
}

.app-topbar__action:hover,
.app-topbar__action:focus-visible,
.app-topbar__action--menu:hover,
.app-topbar__action--menu:focus-visible {
  color: var(--identity-text-strong);
  background: var(--identity-surface-hover);
}

.app-topbar__badge,
.app-topbar__badge--counter {
  background: #e7000b;
  color: #ffffff;
  border-color: var(--identity-topbar);
}

.page-header h1,
.dashboard-section-title,
.dashboard-map-card__title {
  color: var(--identity-text-strong);
  font-family: var(--identity-font);
  font-weight: 680;
}

.page-header h1 {
  font-size: 24px;
  line-height: 1.25;
}

.page-header p,
.overview-card__helper,
.text-muted,
.text-muted-foreground {
  color: var(--identity-muted) !important;
}

:is(
  .overview-card,
  .dashboard-map-card,
  .alerts-summary-card,
  .alerts-dashboard__panel,
  .metrics-dashboard__panel,
  .devices-dashboard__panel,
  .settings-card,
  .install-device-card,
  .installers-admin__table-card,
  .devices-admin__table-card,
  .approvals-admin__table-card,
  .centrals-admin__table-card,
  .incident-center__summary-card,
  .incident-center__list-card,
  .night-operations__summary-card,
  .night-operations__table-card,
  .support-inbox__panel,
  .support-page__agent,
  .support-page__meta-card,
  .devices-explorer__map-card,
  .devices-explorer__sidebar,
  .panel,
  .card
) {
  background: var(--identity-surface);
  border-color: var(--identity-border);
  border-radius: var(--identity-radius);
  box-shadow: var(--identity-shadow-card);
}

.overview-card {
  border-left: 3px solid var(--identity-border-strong);
  transition: border-color var(--identity-motion), background-color var(--identity-motion);
}

.overview-card:hover {
  background: var(--identity-surface-raised);
  border-color: var(--identity-border-strong);
}

/* Original ORBLIGHT component language. Geometry and interaction hooks stay intact. */
:is(
  .incident-center__tabs,
  .devices-explorer__sidebar-tabs,
  .devices-explorer__alerts-tabs
) {
  background: var(--identity-segment) !important;
  border: 1px solid var(--identity-border) !important;
  border-radius: var(--identity-radius) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;
}

.incident-center__toolbar > .incident-center__tabs {
  gap: 4px;
}

:is(
  .incident-center__tabs button,
  .devices-explorer__sidebar-tab,
  .devices-explorer__alerts-tab
) {
  border-radius: 4px !important;
  color: var(--identity-muted) !important;
  background: transparent !important;
  box-shadow: none !important;
  transition:
    color var(--identity-motion),
    background-color var(--identity-motion),
    box-shadow var(--identity-motion) !important;
}

:is(
  .incident-center__tabs button.is-active,
  .devices-explorer__sidebar-tab.is-active,
  .devices-explorer__alerts-tab.is-active
) {
  color: var(--identity-text-strong) !important;
  background: var(--identity-surface-raised) !important;
  box-shadow:
    inset 0 -2px 0 var(--identity-green),
    inset 0 0 0 1px var(--identity-border) !important;
}

:is(
  .incident-center__tabs button:hover,
  .devices-explorer__sidebar-tab:hover,
  .devices-explorer__alerts-tab:hover
) {
  color: var(--identity-text) !important;
  background: var(--identity-surface-hover) !important;
}

:is(
  .devices-explorer__filter-trigger,
  .incident-center__sort-trigger,
  .notifications-menu__filter-trigger
) {
  color: var(--identity-text) !important;
  background: var(--identity-surface) !important;
  border-color: var(--identity-border) !important;
  border-radius: var(--identity-radius) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;
  transition:
    color var(--identity-motion),
    border-color var(--identity-motion),
    background-color var(--identity-motion),
    box-shadow var(--identity-motion) !important;
}

.devices-explorer__filter-trigger::before {
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

:is(
  .devices-explorer__filter-trigger,
  .incident-center__sort-trigger,
  .notifications-menu__filter-trigger
):hover,
:is(
  .devices-explorer__filter.is-open .devices-explorer__filter-trigger,
  .incident-center__sort-menu.is-open .incident-center__sort-trigger,
  .notifications-menu__filter.is-open .notifications-menu__filter-trigger
) {
  background: var(--identity-surface-hover) !important;
  border-color: var(--identity-border-strong) !important;
}

.layout-shell.is-device-operations-layout :is(
  .devices-explorer__central-card,
  .devices-explorer__device-card
) {
  border-color: var(--identity-border) !important;
  border-radius: var(--identity-radius) !important;
  background: var(--identity-surface) !important;
  box-shadow: var(--identity-shadow-card) !important;
}

.layout-shell.is-device-operations-layout :is(
  .devices-explorer__central-card:hover,
  .devices-explorer__central-card:focus-within,
  .devices-explorer__central-card.is-active,
  .devices-explorer__device-card:hover,
  .devices-explorer__device-card:focus-within
) {
  border-color: rgba(2, 171, 83, 0.48) !important;
  background: var(--identity-surface-hover) !important;
  box-shadow:
    inset 3px 0 0 var(--identity-green),
    inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}

.layout-shell.is-device-operations-layout :is(
  .devices-explorer__central-icon,
  .devices-explorer__device-icon
) {
  border-radius: var(--identity-radius) !important;
  border: 1px solid var(--identity-border) !important;
}

.layout-shell.is-device-operations-layout .devices-explorer__central-icon {
  color: var(--identity-blue) !important;
  background: rgba(59, 130, 246, 0.1) !important;
}

.layout-shell.is-device-operations-layout .devices-explorer__device-icon {
  color: var(--identity-muted) !important;
  background: var(--identity-surface-raised) !important;
}

.layout-shell :is(
  .overview-card,
  .dashboard-map-card,
  .alerts-summary-card,
  .alerts-dashboard__panel,
  .metrics-dashboard__panel,
  .devices-dashboard__panel,
  .settings-card,
  .install-device-card,
  .installers-admin__table-card,
  .devices-admin__table-card,
  .approvals-admin__table-card,
  .centrals-admin__table-card,
  .incident-center__summary-card,
  .incident-center__list-card,
  .night-operations__summary-card,
  .night-operations__table-card,
  .support-inbox__panel,
  .support-page__agent,
  .support-page__meta-card,
  .devices-explorer__map-card,
  .devices-explorer__sidebar
) {
  background: var(--identity-surface) !important;
  border-color: var(--identity-border) !important;
  border-radius: var(--identity-radius) !important;
  box-shadow: var(--identity-shadow-card) !important;
}

.layout-shell.is-device-operations-layout .devices-explorer__filter-trigger {
  background: var(--identity-surface) !important;
}

.layout-shell.is-device-operations-layout .devices-explorer__filter-trigger::before {
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html body .layout-shell.is-device-operations-layout
  :is(.devices-explorer__toolbar, .devices-explorer__sidebar-controls)
  .devices-explorer__filter-trigger {
  background: var(--identity-surface) !important;
  border-color: var(--identity-border) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;
}

html body .layout-shell.is-device-operations-layout
  :is(.devices-explorer__toolbar, .devices-explorer__sidebar-controls)
  .devices-explorer__filter-trigger::before {
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.overview-card--success {
  border-left-color: var(--identity-green);
}

.overview-card--danger,
.overview-card--danger-strong {
  border-left-color: var(--identity-danger);
}

.overview-card--warning,
.overview-card--warning-soft {
  border-left-color: var(--identity-warning);
}

.overview-card--primary {
  border-left-color: var(--identity-blue);
}

.overview-card__value {
  color: var(--identity-text-strong);
  font-variant-numeric: tabular-nums;
}

:is(input:not([type="checkbox"]):not([type="radio"]), select, textarea, .form-control, .form-select) {
  background: var(--identity-surface) !important;
  color: var(--identity-text);
  border-color: var(--identity-border);
  border-radius: var(--identity-radius);
  box-shadow: none;
  transition: border-color var(--identity-motion), box-shadow var(--identity-motion);
}

:is(input:not([type="checkbox"]):not([type="radio"]), select, textarea, .form-control, .form-select):hover:not(:disabled) {
  border-color: var(--identity-border-strong);
}

:is(input:not([type="checkbox"]):not([type="radio"]), select, textarea, .form-control, .form-select):focus {
  border-color: var(--identity-green);
  box-shadow: 0 0 0 3px var(--identity-green-soft);
}

:is(input, textarea)::placeholder {
  color: var(--identity-muted-soft);
  opacity: 1;
}

:is(.btn, button, [role="button"]) {
  border-radius: var(--identity-radius);
}

:is(.btn-success, .settings-button--primary, .installers-admin__primary-button, .support-page__cta) {
  background: var(--identity-green);
  border-color: var(--identity-green);
  color: #ffffff;
  box-shadow: none;
}

:is(.btn-success, .settings-button--primary, .installers-admin__primary-button, .support-page__cta):hover:not(:disabled) {
  background: var(--identity-green-hover);
  border-color: var(--identity-green-hover);
  box-shadow: none;
}

:is(
  .devices-explorer__filter-menu,
  .incident-center__sort-menu,
  .night-operations__columns-menu,
  .night-operations__page-size-menu,
  .installers-admin__status-menu,
  .installers-admin__page-size-menu,
  .installers-admin__columns-menu,
  .centrals-admin__company-menu,
  .centrals-admin__communication-menu
) {
  background: var(--identity-surface-raised);
  border-color: var(--identity-border);
  border-radius: var(--identity-radius);
  box-shadow: var(--identity-shadow-menu);
}

:is(
  .devices-explorer__filter-menu,
  .incident-center__sort-options,
  .night-operations__columns-menu,
  .night-operations__page-size-menu,
  .installers-admin__status-menu,
  .installers-admin__page-size-menu,
  .installers-admin__columns-menu,
  .centrals-admin__company-menu,
  .centrals-admin__communication-menu
) button {
  color: var(--identity-text);
  border-radius: 4px !important;
  transition:
    color var(--identity-motion),
    background-color var(--identity-motion),
    box-shadow var(--identity-motion);
}

:is(
  .devices-explorer__filter-menu,
  .incident-center__sort-options,
  .night-operations__columns-menu,
  .night-operations__page-size-menu,
  .installers-admin__status-menu,
  .installers-admin__page-size-menu,
  .installers-admin__columns-menu,
  .centrals-admin__company-menu,
  .centrals-admin__communication-menu
) button:hover,
:is(
  .devices-explorer__filter-menu,
  .incident-center__sort-options,
  .night-operations__columns-menu,
  .night-operations__page-size-menu,
  .installers-admin__status-menu,
  .installers-admin__page-size-menu,
  .installers-admin__columns-menu,
  .centrals-admin__company-menu,
  .centrals-admin__communication-menu
) button[aria-selected="true"] {
  color: var(--identity-text-strong) !important;
  background: var(--identity-surface-hover) !important;
  box-shadow: inset 2px 0 0 var(--identity-green);
}

/* Status filters inherit the accent shown by their own status dot. */
.devices-explorer__filter-menu
  .devices-explorer__filter-option:is(:hover, :focus-visible) {
  box-shadow: inset 2px 0 0 var(--devices-filter-accent) !important;
}

:is(table, .table) {
  color: var(--identity-text);
  border-color: var(--identity-border);
}

:is(table, .table) thead th {
  color: var(--identity-muted);
  background: var(--identity-surface-raised);
  border-bottom-color: var(--identity-border-strong);
  box-shadow: inset 0 -1px 0 rgba(2, 171, 83, 0.2);
  font-size: 12px;
  font-weight: 650;
}

:is(table, .table) tbody td {
  border-color: var(--identity-border);
}

:is(table, .table) tbody tr {
  transition: background-color var(--identity-motion);
}

:is(table, .table) tbody tr:nth-child(even) {
  background: var(--identity-row-alt);
}

:is(table, .table) tbody tr:hover {
  background: var(--identity-surface-hover);
}

.modal-backdrop.show {
  opacity: 0.68;
}

.modal-content {
  color: var(--identity-text);
  background: var(--identity-surface-raised);
  border: 1px solid var(--identity-border-strong);
  border-radius: 8px;
  box-shadow:
    inset 0 2px 0 rgba(2, 171, 83, 0.72),
    var(--identity-shadow-menu);
}

.modal-header,
.modal-footer {
  border-color: var(--identity-border);
}

.auth-card {
  background: var(--identity-surface);
  border: 1px solid var(--identity-border);
  border-radius: 8px;
  box-shadow: none;
}

/* Login uses the former card tone as the canvas, without a framed container. */
.auth-split,
.auth-split .auth-panel {
  background: var(--identity-surface);
}

.auth-split .auth-card {
  background: transparent;
  border: 0;
  border-radius: 0;
}

.auth-card h1,
.auth-card h2 {
  color: var(--identity-text-strong);
  font-family: var(--identity-font);
  font-weight: 680;
}

.device-map__frame,
.device-map__canvas,
.devices-explorer__map,
.leaflet-container {
  border-radius: 5px;
}

.leaflet-control-zoom,
.leaflet-control-attribution {
  border-color: var(--identity-border) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}

.leaflet-control-zoom a {
  color: var(--identity-text) !important;
  background: var(--identity-surface-raised) !important;
  border-color: var(--identity-border) !important;
}

.system-toast {
  color: var(--identity-text);
  background: var(--identity-surface-raised);
  border-color: var(--identity-border-strong);
  border-radius: var(--identity-radius);
  box-shadow:
    inset 3px 0 0 var(--identity-cyan),
    var(--identity-shadow-menu);
}

.system-toast__description {
  color: var(--identity-muted);
}

.system-toast[data-tone="success"] .system-toast__icon {
  color: var(--identity-green);
}

.system-toast[data-tone="success"] {
  box-shadow:
    inset 3px 0 0 var(--identity-green),
    var(--identity-shadow-menu);
}

.system-toast[data-tone="info"] .system-toast__icon {
  color: var(--identity-cyan);
}

.system-toast[data-tone="warning"] .system-toast__icon {
  color: var(--identity-warning);
}

.system-toast[data-tone="warning"] {
  box-shadow:
    inset 3px 0 0 var(--identity-warning),
    var(--identity-shadow-menu);
}

.system-toast[data-tone="danger"] .system-toast__icon {
  color: var(--identity-danger);
}

.system-toast[data-tone="danger"] {
  box-shadow:
    inset 3px 0 0 var(--identity-danger),
    var(--identity-shadow-menu);
}

.badge,
[class*="__badge"] {
  font-variant-numeric: tabular-nums;
}

.content-body.content-body--dashboard-alerts {
  scrollbar-gutter: stable;
}

.incident-center__summary {
  grid-auto-rows: 162px;
  align-items: stretch;
}

.incident-center__summary-card {
  width: 100%;
  height: 162px !important;
  min-height: 162px !important;
  max-height: 162px !important;
  overflow: hidden;
}

.incident-center__summary-card > header {
  height: 36px;
  min-height: 36px;
  max-height: 36px;
}

.incident-center__summary-content {
  min-height: 52px;
}

.layout-shell .night-operations__table-card {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.night-operations__pagination {
  min-height: 50px;
  padding: 9px 16px;
  box-sizing: border-box;
  border-radius: var(--identity-radius);
  background: transparent;
}

.layout-shell .night-operations__table-wrap :is(
  .is-selection,
  .is-selection *,
  input[type="checkbox"]
) {
  cursor: pointer !important;
}

.layout-shell input[type="checkbox"],
.layout-shell label:has(input[type="checkbox"]),
.layout-shell :is(th, td):has(input[type="checkbox"]),
.layout-shell :is(th, td):has(input[type="checkbox"]) * {
  cursor: pointer !important;
}

/* Motion is limited to interactive chrome so map geometry stays visually stable. */
.devices-explorer__fit {
  transition:
    color var(--identity-motion),
    border-color var(--identity-motion),
    background-color var(--identity-motion),
    box-shadow var(--identity-motion),
    transform var(--identity-motion) !important;
}

.devices-explorer__fit:hover,
.devices-explorer__fit:focus-visible {
  transform: translateY(-1px);
}

.devices-explorer__fit:active {
  transform: translateY(0);
}

.leaflet-control-zoom a {
  transition:
    color var(--identity-motion),
    border-color var(--identity-motion),
    background-color var(--identity-motion),
    box-shadow var(--identity-motion) !important;
}

.support-chat__emoji-option {
  transition:
    background-color var(--identity-motion),
    box-shadow var(--identity-motion),
    transform var(--identity-motion) !important;
}

.support-chat__emoji-option:hover,
.support-chat__emoji-option:focus-visible {
  transform: translateY(-1px);
}

.support-chat__emoji-option:active {
  transform: translateY(0);
}

.installers-admin__sort-button,
.installers-admin__action-button {
  transition:
    color var(--identity-motion),
    border-color var(--identity-motion),
    background-color var(--identity-motion),
    box-shadow var(--identity-motion),
    opacity var(--identity-motion) !important;
}

.installers-admin__primary-button--header {
  transition:
    color var(--identity-motion),
    border-color var(--identity-motion),
    background-color var(--identity-motion),
    box-shadow var(--identity-motion) !important;
}

.installers-admin__primary-button--header:hover,
.installers-admin__primary-button--header:focus-visible {
  background: #02964a !important;
  box-shadow: 0 0 0 3px rgba(2, 171, 83, 0.14) !important;
}

.installers-admin__primary-button--header:active {
  background: #028844 !important;
  box-shadow: 0 0 0 2px rgba(2, 171, 83, 0.1) !important;
}

/* Dropdown triggers and selectable list rows keep a clear action cursor. */
:is(
  select:not(:disabled),
  button[aria-haspopup]:not(:disabled),
  [role="option"]:not([aria-disabled="true"]),
  [role="menuitem"]:not([aria-disabled="true"]),
  [role="menuitemradio"]:not([aria-disabled="true"]),
  [class*="__filter-trigger"]:not(:disabled),
  [class*="__filter-option"]:not(:disabled),
  [class*="__sort-trigger"]:not(:disabled),
  [class*="__sort-option"]:not(:disabled),
  [class*="__status-trigger"]:not(:disabled),
  [class*="__status-option"]:not(:disabled),
  [class*="__page-size-trigger"]:not(:disabled),
  [class*="__page-size-option"]:not(:disabled),
  [class*="__columns-button"]:not(:disabled),
  [class*="__columns-option"]:not(:disabled),
  [class*="__company-trigger"]:not(:disabled),
  [class*="__company-option"]:not(:disabled),
  [class*="__communication-trigger"]:not(:disabled),
  [class*="__communication-option"]:not(:disabled),
  .night-operations__select > button:not(:disabled),
  .night-operations__menu button:not(:disabled),
  .notifications-menu__filter-option:not(:disabled),
  .night-operations__columns-menu label
),
:is(
  select:not(:disabled),
  button[aria-haspopup]:not(:disabled),
  [role="option"]:not([aria-disabled="true"]),
  [role="menuitem"]:not([aria-disabled="true"]),
  [role="menuitemradio"]:not([aria-disabled="true"]),
  [class*="__filter-trigger"]:not(:disabled),
  [class*="__filter-option"]:not(:disabled),
  [class*="__sort-trigger"]:not(:disabled),
  [class*="__sort-option"]:not(:disabled),
  [class*="__status-trigger"]:not(:disabled),
  [class*="__status-option"]:not(:disabled),
  [class*="__page-size-trigger"]:not(:disabled),
  [class*="__page-size-option"]:not(:disabled),
  [class*="__columns-button"]:not(:disabled),
  [class*="__columns-option"]:not(:disabled),
  [class*="__company-trigger"]:not(:disabled),
  [class*="__company-option"]:not(:disabled),
  [class*="__communication-trigger"]:not(:disabled),
  [class*="__communication-option"]:not(:disabled),
  .night-operations__select > button:not(:disabled),
  .night-operations__menu button:not(:disabled),
  .notifications-menu__filter-option:not(:disabled),
  .night-operations__columns-menu label
) * {
  cursor: pointer !important;
}

/* Unified interaction for every custom list, including lists rendered over maps. */
html body :is(
  select:not(:disabled),
  select:not(:disabled) option,
  button[aria-haspopup="listbox"]:not(:disabled),
  [role="listbox"] button:not(:disabled),
  [role="option"]:not([aria-disabled="true"]),
  [data-alert-sort-trigger]:not(:disabled),
  [data-alert-sort-value]:not(:disabled),
  [data-night-menu-trigger]:not(:disabled),
  [data-night-filter]:not(:disabled),
  [data-night-page-size-option]:not(:disabled),
  [data-notifications-filter-toggle]:not(:disabled),
  [data-notifications-filter-option]:not(:disabled),
  [data-approvals-company-trigger]:not(:disabled),
  [data-approvals-company-option]:not(:disabled),
  [data-centrals-company-option]:not(:disabled),
  [data-centrals-communication-option]:not(:disabled),
  [data-installers-status-option]:not(:disabled),
  [data-companies-status-option]:not(:disabled),
  [data-devices-status-option]:not(:disabled),
  [data-devices-detail-status-option]:not(:disabled),
  [data-devices-sidebar-status-option]:not(:disabled)
),
html body :is(
  button[aria-haspopup="listbox"]:not(:disabled),
  [role="listbox"] button:not(:disabled),
  [role="option"]:not([aria-disabled="true"]),
  [data-alert-sort-trigger]:not(:disabled),
  [data-alert-sort-value]:not(:disabled),
  [data-night-menu-trigger]:not(:disabled),
  [data-night-filter]:not(:disabled),
  [data-night-page-size-option]:not(:disabled),
  [data-notifications-filter-toggle]:not(:disabled),
  [data-notifications-filter-option]:not(:disabled),
  [data-approvals-company-trigger]:not(:disabled),
  [data-approvals-company-option]:not(:disabled),
  [data-centrals-company-option]:not(:disabled),
  [data-centrals-communication-option]:not(:disabled),
  [data-installers-status-option]:not(:disabled),
  [data-companies-status-option]:not(:disabled),
  [data-devices-status-option]:not(:disabled),
  [data-devices-detail-status-option]:not(:disabled),
  [data-devices-sidebar-status-option]:not(:disabled)
) * {
  cursor: pointer !important;
}

html body :is(
  [role="listbox"] button:not(.devices-explorer__filter-option),
  [role="option"]:not(.devices-explorer__filter-option),
  [data-alert-sort-value],
  [data-night-filter],
  [data-night-page-size-option],
  [data-notifications-filter-option],
  [data-approvals-company-option],
  [data-centrals-company-option],
  [data-centrals-communication-option],
  [data-installers-status-option],
  [data-companies-status-option],
  [data-devices-status-option],
  [data-devices-detail-status-option],
  [data-devices-sidebar-status-option]
) {
  box-shadow: inset 2px 0 0 transparent !important;
  transition:
    background-color var(--identity-motion),
    color var(--identity-motion),
    box-shadow var(--identity-motion) !important;
}

html body :is(
  [role="listbox"] button:not(.devices-explorer__filter-option),
  [role="option"]:not(.devices-explorer__filter-option),
  [data-alert-sort-value],
  [data-night-filter],
  [data-night-page-size-option],
  [data-notifications-filter-option],
  [data-approvals-company-option],
  [data-centrals-company-option],
  [data-centrals-communication-option],
  [data-installers-status-option],
  [data-companies-status-option],
  [data-devices-status-option],
  [data-devices-detail-status-option],
  [data-devices-sidebar-status-option]
):is(:hover, :focus-visible, [aria-selected="true"], .is-active, .is-selected) {
  box-shadow: inset 2px 0 0 var(--identity-green) !important;
}

/* Device status rows keep the accent represented by their own status dot. */
html body .devices-explorer__filter-option:is(
  :hover,
  :focus-visible,
  [aria-checked="true"],
  .is-active,
  .is-selected
) {
  box-shadow: inset 2px 0 0 var(--devices-filter-accent) !important;
}

@media (max-width: 767px) {
  .page-header h1 {
    font-size: 21px;
  }

  :is(
    .overview-card,
    .dashboard-map-card,
    .settings-card,
    .devices-explorer__map-card,
    .devices-explorer__sidebar
  ) {
    border-radius: var(--identity-radius);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  .system-toast {
    transition-duration: 500ms !important;
  }

  .auth-panel [data-slot="input"]:focus {
    animation: auth-input-focus-pulse 1.8s ease-in-out infinite !important;
  }

  .orblight-marker-night-failure-beacon {
    animation: orblight-night-failure-beacon 1.6s step-end infinite !important;
  }
}

/* Final cursor contract for every custom select, dropdown and menu. */
.layout-shell :is(
  select:not(:disabled),
  button[aria-haspopup]:not(:disabled),
  [role="listbox"] :is(button, [role="option"]):not(:disabled),
  [role="menu"] :is(button, [role="menuitem"], [role="menuitemradio"]):not(:disabled),
  [class*="__select"] > button:not(:disabled),
  [class*="__filter"] button:not(:disabled),
  [class*="__menu"] button:not(:disabled),
  [class*="__options"] button:not(:disabled),
  [class*="__page-size"] button:not(:disabled),
  [class*="__columns"] :is(button, label),
  [data-alert-sort-trigger],
  [data-alert-sort-value],
  [data-night-menu-trigger],
  [data-night-filter],
  [data-night-page-size-option],
  [data-notifications-filter-toggle],
  [data-notifications-filter-option],
  [data-approvals-company-trigger],
  [data-approvals-company-option],
  [data-centrals-company-option],
  [data-centrals-communication-option],
  [data-installers-status-option],
  [data-companies-status-option],
  [data-devices-status-option],
  [data-devices-detail-status-option],
  [data-devices-sidebar-status-option]
),
.layout-shell :is(
  select:not(:disabled),
  button[aria-haspopup]:not(:disabled),
  [role="listbox"] :is(button, [role="option"]):not(:disabled),
  [role="menu"] :is(button, [role="menuitem"], [role="menuitemradio"]):not(:disabled),
  [class*="__select"] > button:not(:disabled),
  [class*="__filter"] button:not(:disabled),
  [class*="__menu"] button:not(:disabled),
  [class*="__options"] button:not(:disabled),
  [class*="__page-size"] button:not(:disabled),
  [class*="__columns"] :is(button, label),
  [data-alert-sort-trigger],
  [data-alert-sort-value],
  [data-night-menu-trigger],
  [data-night-filter],
  [data-night-page-size-option],
  [data-notifications-filter-toggle],
  [data-notifications-filter-option],
  [data-approvals-company-trigger],
  [data-approvals-company-option],
  [data-centrals-company-option],
  [data-centrals-communication-option],
  [data-installers-status-option],
  [data-companies-status-option],
  [data-devices-status-option],
  [data-devices-detail-status-option],
  [data-devices-sidebar-status-option]
) * {
  cursor: pointer !important;
}

/* Final cursor source of truth for enabled interactive controls. */
html body #app :is(
  a[href],
  button:not(:disabled),
  select:not(:disabled),
  option:not(:disabled),
  input[type="checkbox"]:not(:disabled),
  input[type="radio"]:not(:disabled),
  label:has(input:not(:disabled)),
  [role="button"]:not([aria-disabled="true"]),
  [role="tab"]:not([aria-disabled="true"]),
  [role="option"]:not([aria-disabled="true"]),
  [role="menuitem"]:not([aria-disabled="true"]),
  [role="menuitemradio"]:not([aria-disabled="true"]),
  [data-devices-map-target]
),
html body #app :is(
  a[href],
  button:not(:disabled),
  select:not(:disabled),
  input[type="checkbox"]:not(:disabled),
  input[type="radio"]:not(:disabled),
  label:has(input:not(:disabled)),
  [role="button"]:not([aria-disabled="true"]),
  [role="tab"]:not([aria-disabled="true"]),
  [role="option"]:not([aria-disabled="true"]),
  [role="menuitem"]:not([aria-disabled="true"]),
  [role="menuitemradio"]:not([aria-disabled="true"]),
  [data-devices-map-target]
) * {
  cursor: pointer !important;
}

html body #topbarIncidentsMenu
  .incidents-menu__item-actions
  :is(.incidents-menu__map-action, .incidents-menu__resolve-action),
html body #topbarIncidentsMenu
  .incidents-menu__item-actions
  :is(.incidents-menu__map-action, .incidents-menu__resolve-action) * {
  cursor: pointer !important;
}

html body #topbarIncidentsMenu
  .incidents-menu__item-actions
  .incidents-menu__map-action:hover,
html body #topbarIncidentsMenu
  .incidents-menu__item-actions
  .incidents-menu__map-action:focus-visible {
  background: #2a2a2a !important;
  color: #fafafa !important;
}

:root[data-theme="light"] body #topbarIncidentsMenu
  .incidents-menu__item-actions
  .incidents-menu__map-action:hover,
:root[data-theme="light"] body #topbarIncidentsMenu
  .incidents-menu__item-actions
  .incidents-menu__map-action:focus-visible {
  background: #e9e9e9 !important;
  color: #171717 !important;
}

/* Lists use the regular arrow cursor, including text and icons inside each row. */
html body #app :is(
  select:not(:disabled),
  select:not(:disabled) option,
  button[aria-haspopup]:not(:disabled),
  [role="listbox"] button:not(:disabled),
  [role="option"]:not([aria-disabled="true"]),
  [role="menuitem"]:not([aria-disabled="true"]),
  [role="menuitemradio"]:not([aria-disabled="true"]),
  [data-alert-sort-trigger]:not(:disabled),
  [data-alert-sort-value]:not(:disabled),
  [data-night-menu-trigger]:not(:disabled),
  [data-night-filter]:not(:disabled),
  [data-night-page-size-option]:not(:disabled),
  [data-notifications-filter-toggle]:not(:disabled),
  [data-notifications-filter-option]:not(:disabled),
  [data-approvals-company-trigger]:not(:disabled),
  [data-approvals-company-option]:not(:disabled),
  [data-centrals-company-option]:not(:disabled),
  [data-centrals-communication-option]:not(:disabled),
  [data-installers-status-option]:not(:disabled),
  [data-companies-status-option]:not(:disabled),
  [data-devices-status-option]:not(:disabled),
  [data-devices-detail-status-option]:not(:disabled),
  [data-devices-sidebar-status-option]:not(:disabled)
),
html body #app :is(
  select:not(:disabled),
  button[aria-haspopup]:not(:disabled),
  [role="listbox"] button:not(:disabled),
  [role="option"]:not([aria-disabled="true"]),
  [role="menuitem"]:not([aria-disabled="true"]),
  [role="menuitemradio"]:not([aria-disabled="true"]),
  [data-alert-sort-trigger]:not(:disabled),
  [data-alert-sort-value]:not(:disabled),
  [data-night-menu-trigger]:not(:disabled),
  [data-night-filter]:not(:disabled),
  [data-night-page-size-option]:not(:disabled),
  [data-notifications-filter-toggle]:not(:disabled),
  [data-notifications-filter-option]:not(:disabled),
  [data-approvals-company-trigger]:not(:disabled),
  [data-approvals-company-option]:not(:disabled),
  [data-centrals-company-option]:not(:disabled),
  [data-centrals-communication-option]:not(:disabled),
  [data-installers-status-option]:not(:disabled),
  [data-companies-status-option]:not(:disabled),
  [data-devices-status-option]:not(:disabled),
  [data-devices-detail-status-option]:not(:disabled),
  [data-devices-sidebar-status-option]:not(:disabled)
) * {
  cursor: default !important;
}

/* Final status accent source of truth: the rail always matches the status dot. */
html body #app .devices-explorer__filter-option--correct:is(
  :hover,
  :focus-visible,
  [aria-checked="true"],
  .is-active,
  .is-selected
) {
  box-shadow: inset 2px 0 0 #22c55e !important;
}

html body #app :is(
  .devices-explorer__filter-option--night-failure,
  .devices-explorer__filter-option--incorrect
):is(:hover, :focus-visible, [aria-checked="true"], .is-active, .is-selected) {
  box-shadow: inset 2px 0 0 #f59e0b !important;
}

html body #app .devices-explorer__filter-option--offline:is(
  :hover,
  :focus-visible,
  [aria-checked="true"],
  .is-active,
  .is-selected
) {
  box-shadow: inset 2px 0 0 #ef4444 !important;
}

html body #app .devices-explorer__filter-option--unknown:is(
  :hover,
  :focus-visible,
  [aria-checked="true"],
  .is-active,
  .is-selected
) {
  box-shadow: inset 2px 0 0 #3b82f6 !important;
}