/* QCW portal background — storm scene with frosted glass UI panels */

:root {
  --qcw-bg-image: url("/portal-background.png");
  --qcw-bg-overlay: rgba(10, 22, 36, 0.48);
  --qcw-glass: rgba(255, 255, 255, 0.78);
  --qcw-glass-strong: rgba(255, 255, 255, 0.9);
  --qcw-glass-soft: rgba(255, 255, 255, 0.62);
  --qcw-glass-border: rgba(255, 255, 255, 0.5);
  --qcw-glass-shadow: 0 14px 40px rgba(6, 18, 30, 0.22);
  --qcw-glass-blur: blur(14px);
}

html {
  min-height: 100%;
}

body.staff-portal,
body.dispatch-cad {
  position: relative;
  background-color: #0c1824;
  min-height: 100vh;
}

body.staff-portal::after,
body.dispatch-cad::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  background-color: #0c1824;
  background-image: var(--qcw-bg-image);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  pointer-events: none;
}

body.staff-portal::before,
body.dispatch-cad::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  background: var(--qcw-bg-overlay);
  pointer-events: none;
}

body.staff-portal #mainContent,
body.dispatch-cad .dispatch-shell,
body.dispatch-cad #dispatchPanel-intake {
  position: relative;
  z-index: 1;
}

body.staff-portal .modal-shell {
  position: fixed;
  inset: 0;
  z-index: 6000;
}

body.staff-portal.staff-registrations-modal-open .modal-shell#adminEventsRegistrationsModal {
  display: flex !important;
}

body.staff-portal #toastRegion,
body.staff-portal .toast-region {
  position: fixed;
  top: 18px;
  right: 18px;
  left: auto;
  bottom: auto;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(360px, calc(100vw - 24px));
  margin: 0;
  padding: 0;
  pointer-events: none;
}

body.staff-portal #toastRegion .toast,
body.staff-portal .toast-region .toast {
  pointer-events: auto;
}

body.staff-portal #login-screen,
body.staff-portal .login-screen {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

/* —— Staff portal —— */
body.staff-portal .login-screen {
  background: transparent;
}

body.staff-portal .login-card {
  background: var(--qcw-glass-strong);
  backdrop-filter: var(--qcw-glass-blur);
  -webkit-backdrop-filter: var(--qcw-glass-blur);
  border: 1px solid var(--qcw-glass-border);
  box-shadow: var(--qcw-glass-shadow);
}

body.staff-portal .sidebar {
  background: var(--qcw-glass);
  backdrop-filter: var(--qcw-glass-blur);
  -webkit-backdrop-filter: var(--qcw-glass-blur);
  border-right: 1px solid var(--qcw-glass-border);
  box-shadow: var(--qcw-glass-shadow);
}

body.staff-portal .main {
  background: transparent;
}

body.staff-portal .hr-desk-chrome {
  background: var(--qcw-glass);
  backdrop-filter: var(--qcw-glass-blur);
  -webkit-backdrop-filter: var(--qcw-glass-blur);
  border-bottom: 1px solid var(--qcw-glass-border);
}

body.staff-portal .card,
body.staff-portal .modal-card,
body.staff-portal .toast {
  background: var(--qcw-glass);
  backdrop-filter: var(--qcw-glass-blur);
  -webkit-backdrop-filter: var(--qcw-glass-blur);
  border: 1px solid var(--qcw-glass-border);
  box-shadow: var(--qcw-glass-shadow);
}

body.staff-portal .group-item,
body.staff-portal .member-card,
body.staff-portal .request-card,
body.staff-portal .alert-card,
body.staff-portal .admin-row,
body.staff-portal .admin-card,
body.staff-portal .ownership-user-group,
body.staff-portal .public-outdoor-card,
body.staff-portal .public-pollen-type,
body.staff-portal .public-weather-metric,
body.staff-portal .my-profile-field-locked {
  background: var(--qcw-glass-soft);
  backdrop-filter: var(--qcw-glass-blur);
  -webkit-backdrop-filter: var(--qcw-glass-blur);
  border: 1px solid var(--qcw-glass-border);
}

body.staff-portal .group-items,
body.staff-portal .forecast-county-list,
body.staff-portal .alert-county-selected-list {
  background: var(--qcw-glass-soft);
  backdrop-filter: var(--qcw-glass-blur);
  -webkit-backdrop-filter: var(--qcw-glass-blur);
}

body.staff-portal .note {
  background: rgba(238, 245, 251, 0.82);
  backdrop-filter: var(--qcw-glass-blur);
  -webkit-backdrop-filter: var(--qcw-glass-blur);
}

body.staff-portal .health-hero {
  background: var(--qcw-glass);
  backdrop-filter: var(--qcw-glass-blur);
  -webkit-backdrop-filter: var(--qcw-glass-blur);
}

body.staff-portal .sidebar-logo,
body.staff-portal .sidebar-status,
body.staff-portal .sidebar-activation {
  background: var(--qcw-glass-soft);
  backdrop-filter: var(--qcw-glass-blur);
  -webkit-backdrop-filter: var(--qcw-glass-blur);
}

body.staff-portal .sidebar-viewing {
  background: rgba(255, 251, 235, 0.88);
  backdrop-filter: var(--qcw-glass-blur);
  -webkit-backdrop-filter: var(--qcw-glass-blur);
}

body.staff-portal input,
body.staff-portal select,
body.staff-portal textarea {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

body.staff-portal .btn.secondary {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

body.staff-portal .scheduler-grid-table th {
  background: rgba(238, 245, 251, 0.85);
}

body.staff-portal .scheduler-grid-table td,
body.staff-portal .covered-wind-gust-table td {
  background: rgba(255, 255, 255, 0.75);
}

body.staff-portal #routingMap,
body.staff-portal #coverageOwnershipMap,
body.staff-portal .radar-frame,
body.staff-portal .map-frame {
  background: rgba(255, 255, 255, 0.94);
}

body.staff-portal .public-alert-modal-card {
  background: var(--qcw-glass-strong);
  backdrop-filter: var(--qcw-glass-blur);
  -webkit-backdrop-filter: var(--qcw-glass-blur);
}

/* —— Incident Management (dispatch) —— */
body.dispatch-cad {
  --cad-bg: #f4f8fb;
  --cad-panel: rgba(255, 255, 255, 0.94);
  --cad-panel-2: rgba(251, 253, 255, 0.92);
  --cad-border: #d9e3ee;
  --cad-soft: rgba(238, 245, 251, 0.92);
  --cad-input-bg: #ffffff;
  --qcw-glass: rgba(255, 255, 255, 0.9);
  --qcw-glass-strong: rgba(255, 255, 255, 0.96);
  --qcw-glass-soft: rgba(255, 255, 255, 0.84);
  --qcw-glass-border: rgba(217, 227, 238, 0.95);
}

body.dispatch-cad .dispatch-cad-topbar {
  background: var(--qcw-glass-strong);
  backdrop-filter: var(--qcw-glass-blur);
  -webkit-backdrop-filter: var(--qcw-glass-blur);
  border-bottom: 2px solid rgba(29, 117, 168, 0.35);
  box-shadow: var(--qcw-glass-shadow);
}

body.dispatch-cad .dispatch-cad-tabs {
  background: var(--qcw-glass-soft);
  backdrop-filter: var(--qcw-glass-blur);
  -webkit-backdrop-filter: var(--qcw-glass-blur);
  border-bottom: 1px solid var(--qcw-glass-border);
}

body.dispatch-cad .dispatch-cad-board,
body.dispatch-cad .dispatch-cad-list-view,
body.dispatch-cad .dispatch-cad-detail-view {
  background: transparent;
}

body.dispatch-cad .dispatch-cad-panel-head,
body.dispatch-cad .dispatch-cad-detail-toolbar {
  background: var(--qcw-glass);
  backdrop-filter: var(--qcw-glass-blur);
  -webkit-backdrop-filter: var(--qcw-glass-blur);
}

body.dispatch-cad .dispatch-cad-stat {
  background: var(--qcw-glass-soft);
  backdrop-filter: var(--qcw-glass-blur);
  -webkit-backdrop-filter: var(--qcw-glass-blur);
}

body.dispatch-cad .dispatch-cad-call,
body.dispatch-cad .dispatch-cad-incident-card {
  background: var(--qcw-glass);
  backdrop-filter: var(--qcw-glass-blur);
  -webkit-backdrop-filter: var(--qcw-glass-blur);
  border: 1px solid var(--qcw-glass-border);
  box-shadow: 0 4px 16px rgba(6, 18, 30, 0.12);
}

body.dispatch-cad .dispatch-cad-call.active {
  background: rgba(238, 245, 251, 0.88);
  box-shadow: 0 0 0 1px rgba(29, 117, 168, 0.45), var(--qcw-glass-shadow);
}

body.dispatch-cad .dispatch-cad-detail-main,
body.dispatch-cad .dispatch-cad-units-panel {
  background: var(--qcw-glass-soft);
  backdrop-filter: var(--qcw-glass-blur);
  -webkit-backdrop-filter: var(--qcw-glass-blur);
}

body.dispatch-cad .dispatch-cad-incident-header {
  background: var(--qcw-glass);
  backdrop-filter: var(--qcw-glass-blur);
  -webkit-backdrop-filter: var(--qcw-glass-blur);
}

body.dispatch-cad .dispatch-cad-unit-bar,
body.dispatch-cad .dispatch-cad-collapsible {
  background: var(--qcw-glass-soft);
  backdrop-filter: var(--qcw-glass-blur);
  -webkit-backdrop-filter: var(--qcw-glass-blur);
}

body.dispatch-cad .dispatch-cad-log {
  background: var(--qcw-glass-strong);
  backdrop-filter: var(--qcw-glass-blur);
  -webkit-backdrop-filter: var(--qcw-glass-blur);
}

body.dispatch-cad .dispatch-cad-unit-card {
  background: var(--qcw-glass);
  backdrop-filter: var(--qcw-glass-blur);
  -webkit-backdrop-filter: var(--qcw-glass-blur);
}

body.dispatch-cad .dispatch-cad-radar-panel {
  background: transparent;
}

body.dispatch-cad .dispatch-cad-radar-frame {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

body.dispatch-cad .dispatch-cad-modal-panel {
  background: var(--qcw-glass-strong);
  backdrop-filter: var(--qcw-glass-blur);
  -webkit-backdrop-filter: var(--qcw-glass-blur);
  border: 1px solid var(--qcw-glass-border);
  box-shadow: var(--qcw-glass-shadow);
}

body.dispatch-cad .dispatch-cad-modal-head {
  background: var(--qcw-glass);
  backdrop-filter: var(--qcw-glass-blur);
  -webkit-backdrop-filter: var(--qcw-glass-blur);
}

body.dispatch-cad .dispatch-cad-input,
body.dispatch-cad .dispatch-cad-select {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

body.dispatch-cad .dispatch-cad-btn {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

body.dispatch-cad .dispatch-cad-btn-primary {
  background: rgba(29, 117, 168, 0.92);
  color: #fff;
}

body.dispatch-cad .toast {
  background: var(--qcw-glass-strong);
  backdrop-filter: var(--qcw-glass-blur);
  -webkit-backdrop-filter: var(--qcw-glass-blur);
  border: 1px solid var(--qcw-glass-border);
}

body.dispatch-cad .dispatch-return-nav {
  background: transparent;
}

@media (prefers-reduced-transparency: reduce) {
  body.staff-portal,
  body.dispatch-cad {
    background-image: none;
    background-color: #f4f8fb;
  }

  body.staff-portal::before,
  body.dispatch-cad::before {
    display: none;
  }

  body.staff-portal .card,
  body.staff-portal .sidebar,
  body.dispatch-cad .dispatch-cad-topbar,
  body.dispatch-cad .dispatch-cad-call {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: #fff;
  }
}