/* Keep this self-contained: the monitor must not depend on mesh74.ru assets. */
:root,
:root[data-theme] {
  --color-bg: #141210;
  --color-bg-raised: #1c1916;
  --color-bg-sunken: #0e0c0a;
  --color-surface: #242019;
  --color-surface-hover: #30291f;
  --color-surface-active: #3a342c;
  --color-surface-inactive: #6b645c;
  --color-border: #3a342c;
  --color-border-subtle: #2a2620;
  --color-border-strong: #5d503e;
  --color-text: #e8e4dc;
  --color-text-muted: #b3aaa0;
  --color-text-subtle: #9a9288;
  --color-text-faint: #756d63;
  --color-text-disabled: #756d63;
  --color-accent: #c4a574;
  --color-accent-hover: #d3b889;
  --color-accent-alt: #8a7350;
  --color-accent-muted: #b7a17e;
  --color-accent-text: #141210;
  --color-success: #6b8f71;
  --color-info: #9cae9c;
  --color-caution: #c4a574;
  --color-warning: #c4a574;
  --color-danger: #c45c3a;
  --color-error: #c45c3a;
  --font-mono: ui-monospace, 'Cascadia Code', Consolas, monospace;
}

body, .app {
  color: #e8e4dc;
  background: #141210;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

.app-header {
  background: #1c1916;
  border-bottom: 1px solid #3a342c;
  box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
}

.app-header .mesh74-home-link {
  background: transparent;
  color: #c4a574;
  border: 1px solid #5d503e;
  border-radius: 4px;
  font-weight: 650;
  letter-spacing: .02em;
}
.app-header .mesh74-home-link:hover {
  color: #e8e4dc;
  background: #30291f;
}
.app-header .mesh74-home-link:focus-visible,
.mesh74-card-links:focus-within {
  outline: 2px solid #c4a574;
  outline-offset: 2px;
}
.app-header .header-title {
  font-family: Georgia, 'Palatino Linotype', serif;
  font-size: 17px;
  color: #e8e4dc;
}
.app-header .connection-status {
  color: #9a9288;
}
.app-header .login-button {
  background: #c4a574;
  color: #141210;
  border: 1px solid #c4a574;
  border-radius: 4px;
  font-weight: 700;
}
.app-header .login-button:hover {
  background: #d3b889;
  color: #141210;
}

aside.sidebar,
.nodes-sidebar,
.map-sidebar {
  background: #1c1916;
  color: #e8e4dc;
  border-color: #3a342c;
}
aside.sidebar [data-source-nav-item] {
  color: #b3aaa0;
  border-radius: 4px;
}
aside.sidebar [data-source-nav-item]:hover,
aside.sidebar [data-source-nav-item][data-active="true"] {
  background: #30291f;
  color: #c4a574;
}
.nodes-sidebar .sidebar-header,
.nodes-sidebar .node-list-header,
.map-sidebar-header {
  border-color: #3a342c;
  background: #1c1916;
}
.map-sidebar {
  border: 1px solid #5d503e;
  border-radius: 6px;
  box-shadow: 0 16px 40px rgb(0 0 0 / 32%);
}
.map-sidebar-title,
.nodes-sidebar h3 {
  font-family: Georgia, 'Palatino Linotype', serif;
  color: #e8e4dc;
}
.map-sidebar .map-controls-body,
.map-sidebar .map-sidebar-body {
  background: #1c1916;
}
.map-sidebar button,
.nodes-sidebar button,
.leaflet-control-zoom a {
  border-radius: 4px;
}
.map-sidebar input[type="checkbox"],
.map-sidebar input[type="radio"] {
  accent-color: #c4a574;
}
.nodes-sidebar input,
.map-sidebar input:not([type="checkbox"]):not([type="radio"]) {
  background: #242019;
  border-color: #3a342c;
  color: #e8e4dc;
}
.leaflet-control-zoom a {
  background: #1c1916;
  color: #c4a574;
  border-color: #3a342c;
}
.leaflet-control-zoom a:hover {
  background: #30291f;
}
.leaflet-control-attribution {
  background: rgb(28 25 22 / 92%);
  color: #9a9288;
}

.dashboard-title,
.dashboard-chart-title {
  font-family: Georgia, 'Palatino Linotype', serif;
  color: #e8e4dc;
}
.dashboard-controls,
.dashboard-chart-container {
  background: #1c1916;
  border-color: #3a342c;
  border-radius: 6px;
}
.dashboard-number-input,
.dashboard-search,
.dashboard-filter-select,
.dashboard-sort-select,
.dashboard-role-filter-button {
  background: #242019;
  color: #e8e4dc;
  border-color: #3a342c;
}
.dashboard-number-input { background: #242019 !important; }
.hop-distribution-chart .hop-bar-track { background: #30291f; }
.hop-distribution-chart .hop-bar-row:nth-child(1) .hop-bar-fill { background-color: #6b8f71 !important; }
.hop-distribution-chart .hop-bar-row:nth-child(2) .hop-bar-fill { background-color: #88a58a !important; }
.hop-distribution-chart .hop-bar-row:nth-child(3) .hop-bar-fill { background-color: #aaa77e !important; }
.hop-distribution-chart .hop-bar-row:nth-child(4) .hop-bar-fill { background-color: #c4a574 !important; }
.hop-distribution-chart .hop-bar-row:nth-child(5) .hop-bar-fill { background-color: #c1875b !important; }
.hop-distribution-chart .hop-bar-row:nth-child(6) .hop-bar-fill { background-color: #c45c3a !important; }
.hop-distribution-chart .hop-bar-row:nth-child(n+7) .hop-bar-fill { background-color: #9e4833 !important; }

.mesh74-network-summary {
  margin: 12px 0 20px;
  padding: 18px;
  color: #e8e4dc;
  background: #1c1916;
  border: 1px solid #3a342c;
  border-radius: 6px;
}
.mesh74-network-heading h3 { margin: 0; color: #c4a574; font: 700 22px/1.25 Georgia, 'Palatino Linotype', serif; }
.mesh74-network-heading p, .mesh74-network-note { color: #b3aaa0; font-size: 12px; line-height: 1.5; }
.mesh74-network-heading p { margin: 5px 0 15px; }
.mesh74-network-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.mesh74-network-metric { display: grid; gap: 3px; padding: 13px; background: #242019; border: 1px solid #3a342c; border-radius: 5px; }
.mesh74-network-metric strong { color: #c4a574; font: 700 26px/1.1 Georgia, 'Palatino Linotype', serif; }
.mesh74-network-metric span { font-size: 13px; font-weight: 650; }
.mesh74-network-metric small { color: #9a9288; font-size: 11px; line-height: 1.35; }
.mesh74-network-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
.mesh74-network-bars { min-width: 0; padding: 12px; background: #242019; border: 1px solid #3a342c; border-radius: 5px; }
.mesh74-network-bars h4 { margin: 0 0 12px; font-size: 14px; color: #e8e4dc; }
.mesh74-network-bars p { color: #9a9288; font-size: 12px; }
.mesh74-network-bar-row { margin-top: 8px; }
.mesh74-network-bar-label { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; }
.mesh74-network-bar-label span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mesh74-network-bar-label strong { color: #c4a574; }
.mesh74-network-bar-track { height: 5px; margin-top: 4px; background: #30291f; border-radius: 5px; overflow: hidden; }
.mesh74-network-bar-track > div { height: 100%; background: #6b8f71; border-radius: inherit; }
.mesh74-network-note { margin: 16px 0 0; border-top: 1px solid #3a342c; padding-top: 10px; }

.mesh74-card-links {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid #3a342c;
  color: #e8e4dc;
}
.mesh74-card-links h4 {
  margin: 0 0 6px;
  color: #c4a574;
  font: 700 16px/1.25 Georgia, 'Palatino Linotype', serif;
}
.mesh74-card-links p {
  margin: 5px 0 0;
  color: #9a9288;
  font-size: 11px;
  line-height: 1.4;
}
.mesh74-card-links ul {
  max-height: 150px;
  margin: 0;
  padding: 0;
  overflow: auto;
  list-style: none;
}
.mesh74-card-links li {
  display: grid;
  gap: 2px;
  padding: 5px 0;
  border-top: 1px solid #2a2620;
  font-size: 12px;
}
.mesh74-card-links li small { color: #9a9288; font: 10px ui-monospace, Consolas, monospace; }
.mesh74-card-links li.mesh74-card-link-old span { color: #9a9288; }
.mesh74-map-links {
  position: absolute;
  inset: 0;
  z-index: 550;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}
.mesh74-map-links line { stroke: #6b8f71; stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 3px #141210); }
.mesh74-map-links line.mesh74-map-link-old { stroke: #c4a574; stroke-width: 2; stroke-dasharray: 7 5; }

@media (max-width: 640px) {
  .mesh74-network-summary { padding: 12px; }
  .mesh74-network-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .mesh74-network-metric { padding: 10px; }
  .mesh74-network-metric strong { font-size: 22px; }
  .mesh74-network-charts { grid-template-columns: 1fr; gap: 10px; }
  .app-header:has(.mesh74-home-link) { background: #1c1916; border-bottom-color: #3a342c; }
  .app-header:has(.mesh74-home-link) .header-title { color: #c4a574; font-size: 16px; }
  .app-header:has(.mesh74-home-link) .mesh74-home-link {
    color: #c4a574;
    border-color: #5d503e;
    background: transparent;
  }
  .app-header:has(.mesh74-home-link) .connection-status { background: #242019; color: #b3aaa0; }
  aside.sidebar[data-mobile-variant="bottom-bar"] {
    background: #1c1916;
    border-top: 1px solid #3a342c;
  }
  .mesh74-card-links ul { max-height: 110px; }
  .node-status-widget .node-status-table,
  .node-status-widget .node-status-table tbody {
    display: block;
    width: 100%;
  }
  .node-status-widget .node-status-table thead { display: none; }
  .node-status-widget .node-status-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px 12px;
    padding: 10px 0;
    border-top: 1px solid #3a342c;
  }
  .node-status-widget .node-status-table td {
    display: flex;
    flex-direction: column;
    min-width: 0;
    width: auto;
    padding: 2px 0;
    border: 0;
    overflow-wrap: anywhere;
  }
  .node-status-widget .node-status-table td:first-child { grid-column: 1 / -1; }
  .node-status-widget .node-status-table td::before {
    color: #9a9288;
    font: 10px/1.4 ui-monospace, 'Cascadia Code', Consolas, monospace;
    letter-spacing: .04em;
    text-transform: uppercase;
  }
  .node-status-widget .node-status-table td:nth-child(2)::before { content: 'В эфире'; }
  .node-status-widget .node-status-table td:nth-child(3)::before { content: 'Сигнал / хопы'; }
  .node-status-widget .node-status-table td:nth-child(4)::before { content: 'Напряжение'; }
  .node-status-widget .node-status-table td:nth-child(5)::before { content: 'Время работы'; }
}