/* Solid-color glass visual system. All data and controls remain native HTML. */
html[data-theme="light"] {
  --page: #f5f5f7;
  --sidebar: rgba(255, 255, 255, 0.68);
  --surface: rgba(255, 255, 255, 0.72);
  --feature-surface: rgba(255, 255, 255, 0.86);
  --inner: rgba(255, 255, 255, 0.58);
  --solid-surface: #fff;
  --menu-surface: rgba(255, 255, 255, 0.96);
  --border: rgba(255, 255, 255, 0.92);
  --divider: rgba(24, 24, 27, 0.13);
  --control-border: #85858e;
  --glass-rim: rgba(255, 255, 255, 0.8);
  --text: #1d1d1f;
  --muted: #57575e;
  --primary: #3156d8;
  --primary-hover: #2446bc;
  --action-bg: #3156d8;
  --action-hover: #2446bc;
  --hover: rgba(24, 24, 27, 0.06);
  --chart-grid: rgba(24, 24, 27, 0.12);
  --chart-cpu: #168476;
  --chart-memory: #4e62d6;
  --glass-shadow: 0 18px 44px rgba(30, 30, 36, 0.1);
  color-scheme: light;
}

html[data-theme="dark"] {
  --page: #171719;
  --sidebar: rgba(255, 255, 255, 0.07);
  --surface: rgba(255, 255, 255, 0.085);
  --feature-surface: rgba(255, 255, 255, 0.11);
  --inner: rgba(255, 255, 255, 0.08);
  --solid-surface: #29292d;
  --menu-surface: rgba(39, 39, 42, 0.97);
  --border: rgba(255, 255, 255, 0.17);
  --divider: rgba(255, 255, 255, 0.13);
  --control-border: #83838c;
  --glass-rim: rgba(255, 255, 255, 0.18);
  --text: #f5f5f7;
  --muted: #b4b4bb;
  --primary: #a9b8ff;
  --primary-hover: #c4ccff;
  --action-bg: #4966d6;
  --action-hover: #5d78e5;
  --hover: rgba(255, 255, 255, 0.1);
  --chart-grid: rgba(255, 255, 255, 0.14);
  --chart-cpu: #76cfbe;
  --chart-memory: #a7b3ff;
  --glass-shadow: 0 18px 44px rgba(0, 0, 0, 0.24);
  color-scheme: dark;
}

html {
  min-height: 100%;
}

body {
  min-height: 100vh;
  isolation: isolate;
  background: var(--page);
  color: var(--text);
}

.app-shell {
  position: relative;
  z-index: 1;
  width: min(100%, 1800px);
  margin: auto;
  padding: 20px;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 18px;
}

.sidebar,
.topbar,
.metric-card,
.panel,
.login-card,
.notfound-card {
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--border);
  box-shadow:
    inset 0 1px 0 var(--glass-rim),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    var(--glass-shadow);
}

.sidebar {
  height: calc(100vh - 40px);
  min-height: 580px;
  top: 20px;
  padding: 22px 14px;
  border-radius: 24px;
  background: var(--sidebar);
  border-right: 1px solid var(--border);
}

.sidebar-brand {
  padding: 0 8px 36px;
}

.sidebar-logo {
  width: 42px;
  height: 42px;
}

.sidebar-brand strong {
  font-size: 11px;
  letter-spacing: 0.04em;
}

.sidebar-brand small,
.sidebar-group-label {
  color: var(--muted);
}

.nav {
  gap: 7px;
}

.nav-item {
  min-height: 48px;
  height: auto;
  padding: 0 13px;
  border: 1px solid transparent;
  border-radius: 14px;
  color: var(--muted);
}

.nav-item:hover,
.nav-item.active {
  background: var(--hover);
  border-color: var(--border);
  color: var(--text);
}

.nav-item.active .nav-icon {
  color: var(--primary);
}

.sidebar-bottom {
  border-color: var(--divider);
}

.sidebar-host small,
.logout-button {
  color: var(--muted);
}

.live-dot {
  flex: none;
  background: #61f2cf;
  box-shadow:
    0 0 0 5px rgba(95, 245, 211, 0.2),
    0 0 20px #66ffdf;
}

.live-dot.offline {
  background: #d68645;
  box-shadow: none;
}

.sidebar-host > div {
  min-width: 0;
}

.theme-trigger,
.login-form input,
.secondary-button,
.logout-button {
  border-color: var(--control-border);
}

.main {
  min-width: 0;
  background: transparent;
}

.topbar {
  position: relative;
  z-index: 20;
  height: 64px;
  padding: 0 27px;
  border-radius: 20px;
  background: var(--sidebar);
  color: var(--muted);
}

.breadcrumbs strong {
  color: var(--text);
}

.avatar {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: #fff;
  background: #444449;
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.14);
}

.content {
  max-width: 1470px;
  padding: 34px 8px 55px;
}

.page-head {
  align-items: center;
  margin: 0 8px 27px;
}

.eyebrow {
  color: var(--primary);
}

.page-head h1 {
  font-size: clamp(32px, 3.4vw, 50px);
  color: var(--text);
}

.page-head p {
  color: var(--muted);
}

.health-badge,
.health-badge.warning,
.health-badge.critical {
  border-radius: 999px;
  padding: 10px 16px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.health-badge {
  background: rgba(214, 255, 239, 0.64);
  border-color: rgba(243, 255, 255, 0.7);
  color: #145f66;
}

.global-error {
  border-radius: 15px;
}

#view-overview:not([hidden]) {
  display: flex;
  flex-direction: column;
}

.metric-grid {
  order: 1;
  gap: 17px;
  margin-bottom: 17px;
}

.dashboard-grid {
  order: 2;
  grid-template-columns: minmax(0, 1.75fr) minmax(280px, 0.8fr);
  gap: 17px;
  margin-bottom: 17px;
}

.bottom-grid {
  order: 3;
  gap: 17px;
  margin-bottom: 17px;
}

.site-summary-panel {
  order: 4;
  margin-bottom: 0;
}

.metric-card,
.panel {
  background: var(--surface);
  border-radius: 20px;
  overflow: hidden;
}

.metric-card {
  position: relative;
  min-height: 213px;
  padding: 21px 21px 17px;
}

.panel {
  position: relative;
}

.metric-card:nth-child(3),
.health-panel,
.bottom-grid > .panel:nth-child(2) {
  background: var(--feature-surface);
  color: var(--text);
  border-color: var(--border);
}

.metric-card:nth-child(3) .metric-top,
.metric-card:nth-child(3) p,
.metric-card:nth-child(3) .metric-value small,
.health-panel .panel-heading p,
.health-panel .status-list > div span,
.bottom-grid > .panel:nth-child(2) .panel-heading p,
.bottom-grid > .panel:nth-child(2) .mini-process em {
  color: var(--muted);
}

.metric-top {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.12em;
}

.metric-icon {
  width: 27px;
  height: 27px;
  color: var(--primary);
}

.metric-card:nth-child(3) .metric-icon {
  color: var(--primary);
}

.metric-value {
  margin-top: 16px;
}

.metric-value strong,
.network-value strong {
  font-size: clamp(31px, 3vw, 43px);
  font-weight: 650;
  letter-spacing: -0.065em;
}

.metric-value small,
.network-value small,
.metric-card p {
  color: var(--muted);
}

.meter {
  margin-top: 14px;
  height: 6px;
  border: 1px solid var(--divider);
  background: var(--inner);
}

.meter span,
.mini-bar span {
  background: #4659d8;
}

.metric-spark {
  display: block;
  width: 100%;
  height: 39px;
  margin-top: 10px;
  overflow: visible;
  opacity: 0.95;
}

.metric-spark path {
  fill: none;
  stroke: #4851df;
  stroke-width: 2.7;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.metric-card:nth-child(2) .metric-spark path {
  stroke: #1cb7c4;
}

.metric-card:nth-child(3) .metric-spark path {
  stroke: var(--chart-cpu);
}

.metric-card p {
  margin-top: 7px;
}

.network-value {
  margin-top: 14px;
}

.network-visual {
  display: grid;
  gap: 6px;
  margin-top: 13px;
}

.network-visual span {
  display: block;
  height: 6px;
  border-radius: 99px;
  background: #4356d4;
  transition: width 0.5s;
}

.network-visual span:nth-child(2) {
  background: #338baf;
}

.network-rule {
  margin: 11px 0 8px;
}

.network-total {
  color: var(--muted);
}

.panel-heading {
  padding: 23px 24px 17px;
}

.panel-heading h2 {
  font-size: 17px;
  letter-spacing: -0.025em;
}

.panel-heading p {
  color: var(--muted);
}

.chart-panel {
  min-height: 391px;
  background: var(--surface);
}

.chart-legend,
.chart-grid,
.chart-foot {
  color: var(--muted);
}

.chart-wrap {
  height: 240px;
}

.chart-wrap svg,
.site-latency svg {
  background: transparent;
}

#history-chart {
  cursor: crosshair;
}

#history-chart:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 4px;
  border-radius: 4px;
}

.chart-tooltip {
  position: absolute;
  z-index: 2;
  top: clamp(8px, var(--chart-tooltip-y, 12px), calc(100% - 94px));
  left: clamp(84px, var(--chart-tooltip-x), calc(100% - 84px));
  transform: translateX(-50%);
  display: grid;
  gap: 5px;
  min-width: 162px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--menu-surface);
  color: var(--text);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  pointer-events: none;
  font-size: 12px;
}

.chart-tooltip[hidden] {
  display: none;
}

.chart-tooltip strong {
  font-size: 12px;
}

.chart-tooltip span {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
}

.chart-tooltip i {
  display: block;
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 2px;
}

.chart-tooltip b {
  margin-left: auto;
  color: var(--text);
  font-weight: 600;
}

.chart-grid {
  font-size: 10px;
}

.chart-foot {
  margin-top: 10px;
}

.chart-legend .legend-cpu {
  background: var(--chart-cpu);
}

.chart-legend .legend-memory {
  background: var(--chart-memory);
}

.segmented {
  background: var(--inner);
  border-color: var(--border);
  border-radius: 11px;
}

.segmented button {
  color: var(--muted);
  border-radius: 8px;
  min-width: 44px;
  min-height: 44px;
}

.segmented button.selected {
  color: #fff;
  background: var(--action-bg);
}

html[data-theme="light"] .segmented button.selected {
  color: #fff;
}

.health-panel .panel-heading h2,
.health-panel .status-list strong,
.bottom-grid > .panel:nth-child(2) .panel-heading h2,
.bottom-grid > .panel:nth-child(2) .mini-process strong {
  color: var(--text);
}

.status-list {
  display: grid;
  gap: 6px;
}

.status-list > div {
  padding: 10px 12px;
  border: 1px solid var(--divider);
  background: var(--inner);
  border-radius: 9px;
}

.alert-box {
  border-radius: 12px;
  background: rgba(119, 255, 222, 0.13);
  border-color: rgba(160, 255, 236, 0.34);
}

html[data-theme="light"] .health-panel .alert-box {
  background: rgba(215, 255, 245, 0.88);
  border-color: rgba(236, 255, 250, 0.9);
}

html[data-theme="light"] .health-panel .alert-box strong,
html[data-theme="light"] .health-panel .alert-box p {
  color: #1e4b55;
}

html[data-theme="light"] .health-panel .alert-box.has-alert {
  background: rgba(255, 233, 186, 0.92);
}

html[data-theme="dark"] .health-panel .alert-box strong,
html[data-theme="dark"] .health-panel .alert-box p {
  color: #e5fff7;
}

.service-row,
.mini-process {
  border-color: var(--divider);
}

.service-name strong,
.site-summary-row strong {
  color: var(--text);
}

.bottom-grid > .panel:nth-child(2) .mini-process {
  border-color: var(--divider);
}

.link-button,
.text-button {
  color: var(--primary);
  padding: 8px 12px;
  border-radius: 10px;
  transition:
    background-color 180ms ease,
    color 180ms ease;
}

.link-button:hover,
.text-button:hover {
  background: var(--hover);
}

.bottom-grid > .panel:nth-child(2) .link-button {
  color: var(--primary);
}

.state-pill,
.site-health.healthy {
  border-radius: 999px;
  background: rgba(110, 242, 206, 0.23);
  color: #116a67;
  border-color: rgba(68, 180, 165, 0.2);
}

.table-wrap {
  padding-bottom: 24px;
}

th {
  color: var(--muted);
  border-color: var(--divider);
}

td,
td:first-child {
  color: var(--text);
  border-color: var(--divider);
}

tr:hover td {
  background: var(--hover);
}

.site-item,
.site-detail-row {
  border-color: var(--divider);
}

.site-item:hover,
.site-item.selected,
.large .service-row.selected {
  background: var(--hover);
}

.subtle-pill,
.shared-note,
.monitor-notice,
.log-box {
  border-radius: 11px;
}

.subtle-pill {
  background: var(--inner);
  border-color: var(--border);
  color: var(--muted);
}

.log-box {
  background: var(--inner);
  color: var(--text);
}

.toast {
  border-color: rgba(171, 255, 231, 0.45);
  background: rgba(23, 86, 77, 0.76);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  box-shadow: 0 18px 44px rgba(17, 46, 58, 0.19);
}

.toast.error {
  border-color: rgba(255, 174, 188, 0.45);
  background: rgba(104, 36, 67, 0.76);
}

.logout-button,
.secondary-button {
  border-radius: 10px;
  background: var(--inner);
  border-color: var(--control-border);
  color: var(--text);
  min-height: 44px;
  transition:
    background-color 180ms ease,
    border-color 180ms ease;
}

.login-screen {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  background: transparent;
}

html[data-theme="light"] .login-screen,
html[data-theme="dark"] .login-screen {
  background: transparent;
}

.login-card {
  width: min(100%, 475px);
  padding: 39px;
  background: var(--surface);
  border-radius: 24px;
  box-shadow:
    var(--glass-shadow),
    inset 0 1px 0 var(--glass-rim);
}

.login-card h1 {
  font-size: 34px;
  color: var(--text);
}

.login-card .eyebrow {
  color: var(--primary);
  text-shadow: none;
}

.login-byline,
.login-form label {
  color: var(--muted);
}

.login-form input {
  height: 50px;
  border-radius: 11px;
  background: var(--inner);
  color: var(--text);
  border: 1px solid var(--control-border);
}

.login-form input:focus {
  border-color: #5d72ec;
  box-shadow: 0 0 0 4px rgba(114, 242, 234, 0.24);
}

.primary-button {
  min-height: 50px;
  border-radius: 11px;
  background: var(--action-bg);
  color: #fff;
}

.primary-button:hover {
  background: var(--action-hover);
}

.notfound-page {
  background: transparent;
}

.notfound-card {
  background: var(--surface);
  border-radius: 22px;
}

.notfound-link {
  background: var(--action-bg);
}

.notfound-link:hover {
  background: var(--action-hover);
}

.app-footer {
  color: var(--muted);
}

html[data-theme="dark"] .nav-item:hover,
html[data-theme="dark"] .nav-item.active {
  background: var(--hover);
}

html[data-theme="dark"] .nav-item.active .nav-icon {
  color: var(--primary);
}

html[data-theme="dark"] .metric-icon {
  color: var(--primary);
}

html[data-theme="dark"] .metric-spark path {
  stroke: #b6bbff;
}

html[data-theme="dark"] .metric-card:nth-child(2) .metric-spark path,
html[data-theme="dark"] .metric-card:nth-child(3) .metric-spark path {
  stroke: #a3f9ec;
}

html[data-theme="dark"] .state-pill,
html[data-theme="dark"] .site-health.healthy {
  color: #a9fce2;
}

@media (max-width: 1200px) {
  .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .health-panel .status-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 800px) {
  .app-shell {
    display: block;
    padding: 12px;
  }

  .sidebar {
    height: auto;
    min-height: 0;
    padding: 12px;
    margin-bottom: 12px;
    border-radius: 18px;
  }

  .sidebar-brand {
    padding: 0 3px 10px;
  }

  .sidebar-bottom {
    display: block;
    border: 0;
    padding: 8px 0 0;
  }

  .sidebar-host {
    display: none;
  }

  .logout-button {
    width: auto;
    margin: 0 0 0 auto;
    gap: 10px;
  }

  .nav {
    display: flex;
    overflow-x: auto;
    gap: 6px;
  }

  .nav-item {
    flex: none;
    padding: 0 12px;
  }

  .topbar {
    height: auto;
    min-height: 58px;
    padding: 9px 15px;
    border-radius: 17px;
  }

  .content {
    padding: 26px 2px 40px;
  }

  .two-column,
  .sites-layout,
  .bottom-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .page-head {
    display: block;
    margin: 0 4px 19px;
  }

  .page-head h1 {
    font-size: 34px;
  }

  .page-head p {
    line-height: 1.4;
  }

  .health-badge {
    display: inline-block;
    margin-top: 16px;
  }

  .metric-grid {
    gap: 10px;
  }

  .metric-card {
    min-height: 190px;
    padding: 15px;
  }

  .metric-value strong,
  .network-value strong {
    font-size: 32px;
  }

  .metric-spark {
    height: 31px;
  }

  .panel-heading {
    padding: 19px;
    flex-wrap: wrap;
    gap: 12px;
  }

  .chart-wrap {
    height: 195px;
    margin-right: 15px;
  }

  .health-panel .status-list {
    grid-template-columns: 1fr;
  }

  .topbar-right #last-updated {
    display: none;
  }

  .breadcrumbs {
    display: block;
    font-size: 12px;
  }

  .topbar-right {
    margin-left: auto;
  }

  .login-card {
    padding: 30px 23px;
  }
}

@media (max-width: 390px) {
  .metric-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .sidebar,
  .topbar,
  .metric-card,
  .panel,
  .login-card,
  .notfound-card,
  .toast {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--solid-surface);
  }

  .metric-card:nth-child(3),
  .health-panel,
  .bottom-grid > .panel:nth-child(2) {
    background: var(--solid-surface);
  }

  .toast {
    background: #17564d;
  }

  .toast.error {
    background: #682443;
  }
}

@supports not (
  (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))
) {
  .sidebar,
  .topbar,
  .metric-card,
  .panel,
  .login-card,
  .notfound-card {
    background: var(--solid-surface);
  }

  .metric-card:nth-child(3),
  .health-panel,
  .bottom-grid > .panel:nth-child(2) {
    background: var(--solid-surface);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}