/* ==========================================================================
   Electro-Tech Surveillance Portal

   A control room runs dark, so dark is what the console opens in. A branch
   office at eleven in the morning does not, so there is a light theme as well
   and the choice is remembered. Both are built from the Electro-Tech brand:
   navy #14273A, ink #194C63, teal #3D8A96, orange #F2A444, yellow #F4C842.

   Every colour is a custom property, and only this block changes between the
   two themes. Two of the brand colours cannot be used unchanged on white:
   the orange measures about 2.3:1 and the yellow worse, so the light theme
   darkens both for anything carrying text and keeps the brand values for fills.

   System fonts throughout, and no external stylesheet, script or font. A bank
   network that blocks outbound requests renders this exactly as designed.
   ========================================================================== */

:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  --navy: #14273a;
  --ink: #194c63;
  --teal: #3d8a96;
  --orange: #f2a444;
  --yellow: #f4c842;

  --bg: #08121b;
  --bg-panel: #0d1c28;
  --bg-card: #112434;
  --bg-raised: #162c3e;
  --bg-hover: #1a3346;

  --line: #1d3648;
  --line-soft: #16283a;

  --text: #e6eef4;
  --text-dim: #93a9ba;
  --text-faint: #63798c;

  --ok: #3dbe8b;
  --ok-dim: rgba(61, 190, 139, 0.14);
  --warn: #f2a444;
  --warn-dim: rgba(242, 164, 68, 0.14);
  --crit: #e5484d;
  --crit-dim: rgba(229, 72, 77, 0.15);
  --info: #5fb3bf;
  --info-dim: rgba(95, 179, 191, 0.14);
  --pending: #8b7fd6;
  --pending-dim: rgba(139, 127, 214, 0.16);

  --accent: #5fb3bf;
  --accent-strong: #3d8a96;
  --accent-hover: #4c9faa;
  --on-accent: #05161b;
  --line-strong: #2a4c63;

  --topbar-bg: rgba(13, 28, 40, 0.86);
  --overlay-bg: rgba(13, 28, 40, 0.92);
  --backdrop: rgba(4, 9, 14, 0.62);
  --scroll-thumb: #1e3849;
  --banner-text: #f6cf9a;

  --map-land: #10222f;
  --map-land-hover: #142b3b;
  --map-stroke: #234055;
  --map-label: #52708a;
  --pin-stroke: #08121b;
  --pin-label: #c9dae6;

  --signin-glow-1: rgba(61, 138, 150, 0.22);
  --signin-glow-2: rgba(25, 76, 99, 0.4);

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", monospace;

  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 18px 44px rgba(0, 0, 0, 0.44);
  --sidebar: 244px;
}

:root[data-theme="light"] {
  color-scheme: light;

  --bg: #eef3f7;
  --bg-panel: #ffffff;
  --bg-card: #ffffff;
  --bg-raised: #f2f6f9;
  --bg-hover: #e4edf3;

  --line: #d2dee7;
  --line-soft: #e5ecf1;

  --text: #14273a;
  --text-dim: #4c6579;
  --text-faint: #5d7285;

  --ok: #13684a;
  --ok-dim: rgba(23, 128, 90, 0.11);
  --warn: #9a5c05;
  --warn-dim: rgba(242, 164, 68, 0.2);
  --crit: #c02526;
  --crit-dim: rgba(192, 37, 38, 0.1);
  --info: #146b7d;
  --info-dim: rgba(20, 107, 125, 0.11);
  --pending: #55429f;
  --pending-dim: rgba(85, 66, 159, 0.11);

  --accent: #17607a;
  --accent-strong: #194c63;
  --accent-hover: #22637d;
  --on-accent: #ffffff;
  --line-strong: #a9bdcc;

  --topbar-bg: rgba(255, 255, 255, 0.9);
  --overlay-bg: rgba(255, 255, 255, 0.94);
  --backdrop: rgba(20, 39, 58, 0.34);
  --scroll-thumb: #c2d1dc;
  --banner-text: #6d4405;

  --map-land: #dde7ee;
  --map-land-hover: #d2dfe8;
  --map-stroke: #a9bdcc;
  --map-label: #7b91a3;
  --pin-stroke: #ffffff;
  --pin-label: #24384a;

  --signin-glow-1: rgba(61, 138, 150, 0.16);
  --signin-glow-2: rgba(25, 76, 99, 0.12);

  --shadow: 0 14px 34px rgba(20, 39, 58, 0.13);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: 21px; }
h2 { font-size: 16px; }
h3 { font-size: 14px; }
p { margin: 0 0 12px; }
p:last-child { margin-bottom: 0; }

.icon { flex: none; vertical-align: -0.15em; }
.mono { font-family: var(--mono); font-size: 12.5px; letter-spacing: -0.01em; }
.dim { color: var(--text-dim); }
.faint { color: var(--text-faint); }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.hidden { display: none !important; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 6px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--line-strong); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ------------------------------------------------------------------ sign in */

.signin {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  background:
    radial-gradient(1200px 700px at 12% -10%, var(--signin-glow-1), transparent 60%),
    radial-gradient(900px 600px at 105% 110%, var(--signin-glow-2), transparent 62%),
    var(--bg);
}

.signin-brand {
  padding: 56px 60px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid var(--line-soft);
}

.signin-brand img { width: 260px; max-width: 70%; }

.signin-brand h1 { font-size: 30px; line-height: 1.24; margin: 30px 0 16px; max-width: 15ch; }
.signin-brand p { color: var(--text-dim); max-width: 52ch; }

.signin-points { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 12px; }
.signin-points li { display: flex; gap: 11px; color: var(--text-dim); align-items: flex-start; }
.signin-points .icon { color: var(--accent); margin-top: 3px; }

.signin-panel { position: relative; display: flex; align-items: center; justify-content: center; padding: 40px 32px; }

/* The reversed lockup has white type and disappears on a light background, so
   each theme gets the artwork drawn for it rather than a filter over one file. */
:root[data-theme="light"] .logo-dark,
:root:not([data-theme="light"]) .logo-light { display: none; }
.signin-card {
  width: 100%;
  max-width: 420px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 34px 32px;
}
.signin-card h2 { font-size: 19px; margin-bottom: 6px; }
.signin-card > p { color: var(--text-dim); margin-bottom: 24px; }

.ms-button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 13px 16px;
  background: #fff;
  color: #1b1b1b;
  border: 1px solid #d6d6d6;
  border-radius: 4px;
  font: 600 15px/1 "Segoe UI", var(--sans);
  cursor: pointer;
  transition: background 0.14s ease;
}
.ms-button:hover { background: #f3f3f3; }
.ms-logo { width: 20px; height: 20px; flex: none; }

.signin-note {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
  color: var(--text-faint);
  font-size: 12.5px;
}

/* mock Microsoft account picker */
.ms-picker { position: fixed; inset: 0; background: var(--backdrop); display: grid; place-items: center; z-index: 90; padding: 20px; }
.ms-dialog {
  width: 100%; max-width: 440px; background: #fff; color: #1b1b1b;
  border-radius: 2px; box-shadow: 0 26px 70px rgba(0, 0, 0, 0.5); padding: 44px 44px 32px;
  font-family: "Segoe UI", var(--sans);
}
.ms-dialog .ms-wordmark { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; margin-bottom: 22px; }
.ms-dialog h3 { font-size: 22px; font-weight: 600; margin-bottom: 16px; }
.ms-account { display: flex; gap: 12px; align-items: center; width: 100%; padding: 11px 8px; background: none; border: 0; border-top: 1px solid #eaeaea; cursor: pointer; text-align: left; font: inherit; }
.ms-account:last-of-type { border-bottom: 1px solid #eaeaea; }
.ms-account:hover { background: #f3f3f3; }
.ms-avatar { width: 34px; height: 34px; border-radius: 50%; background: #0f6cbd; color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 600; flex: none; }
.ms-account-name { font-size: 14px; font-weight: 600; }
.ms-account-mail { font-size: 12.5px; color: #616161; }
.ms-account-role { font-size: 12px; color: #0f6cbd; }
.ms-dialog footer { margin-top: 20px; font-size: 12px; color: #616161; }

/* ---------------------------------------------------------------- app shell */

.app { display: grid; grid-template-columns: var(--sidebar) 1fr; min-height: 100vh; }

/* Grid and flex children default to a minimum size of their content, which lets
   a wide table or a scrolling nav push the whole page sideways. Everything that
   holds content that can be wider than its column is told it may shrink, and the
   scrolling is then confined to the element that owns it. */
.app > *, .grid > *, .estate > *, .card, .content, .sidebar, .table-wrap { min-width: 0; }

.sidebar {
  background: var(--bg-panel);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.sidebar-head { padding: 18px 18px 14px; border-bottom: 1px solid var(--line-soft); }
.sidebar-head img { width: 168px; display: block; }
.sidebar-product { margin-top: 10px; font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--accent); font-weight: 600; }

.nav { padding: 12px 10px; display: grid; gap: 2px; }
.nav a {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px; border-radius: var(--radius-sm);
  color: var(--text-dim); font-weight: 500; text-decoration: none;
}
.nav a:hover { background: var(--bg-hover); color: var(--text); text-decoration: none; }
.nav a.active { background: var(--bg-raised); color: var(--text); box-shadow: inset 2px 0 0 var(--teal); }
.nav a .count {
  margin-left: auto; font-size: 11px; font-weight: 700; padding: 1px 7px;
  border-radius: 20px; background: var(--crit-dim); color: var(--crit);
}
.nav a .count.zero { background: var(--bg-hover); color: var(--text-faint); }

.sidebar-foot { margin-top: auto; padding: 14px; border-top: 1px solid var(--line-soft); }

.sim {
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 12px;
}
.sim h4 { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 9px; }
.sim .row { display: flex; gap: 7px; }
.sim button { flex: 1; }

/* ------------------------------------------------------------------- topbar */

.topbar {
  display: flex; align-items: center; gap: 16px;
  padding: 0 24px; height: 60px;
  border-bottom: 1px solid var(--line);
  background: var(--topbar-bg);
  backdrop-filter: blur(8px);
  position: sticky; top: 0; z-index: 30;
}

.searchbox { position: relative; flex: 1; max-width: 460px; }
.searchbox .icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text-faint); }
.searchbox input {
  width: 100%; padding: 8px 12px 8px 34px;
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--radius-sm); color: var(--text); font: inherit;
}
.searchbox input::placeholder { color: var(--text-faint); }
.search-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40;
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); max-height: 380px; overflow-y: auto; padding: 6px;
}
.search-results button {
  display: flex; gap: 10px; align-items: center; width: 100%; text-align: left;
  padding: 8px 10px; background: none; border: 0; border-radius: var(--radius-sm);
  color: var(--text); font: inherit; cursor: pointer;
}
.search-results button:hover { background: var(--bg-hover); }
.search-results .meta { margin-left: auto; color: var(--text-faint); font-size: 12px; }

.live-pill {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 11px; border-radius: 20px;
  background: var(--ok-dim); color: var(--ok);
  font-size: 12px; font-weight: 600;
}
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: pulse 2.1s infinite; }
.live-pill.paused { background: var(--bg-hover); color: var(--text-faint); }
.live-pill.paused .live-dot { animation: none; }

@keyframes pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(61, 190, 139, 0.55); }
  60% { opacity: 0.6; box-shadow: 0 0 0 6px rgba(61, 190, 139, 0); }
}

.who { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.who .avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  background: linear-gradient(140deg, var(--teal), var(--ink));
  display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff;
}
.who .name { font-weight: 600; font-size: 13px; line-height: 1.2; }
.who .role { color: var(--text-faint); font-size: 11.5px; line-height: 1.2; }

/* ------------------------------------------------------------------ content */

.content { padding: 22px 24px 60px; }
.page-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.page-head p { color: var(--text-dim); margin: 4px 0 0; max-width: 78ch; }
.page-head .actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }

.demo-banner {
  display: flex; gap: 11px; align-items: flex-start;
  background: var(--warn-dim); border: 1px solid rgba(242, 164, 68, 0.32);
  border-radius: var(--radius); padding: 11px 14px; margin-bottom: 18px;
  color: var(--banner-text); font-size: 13px;
}
.demo-banner .icon { color: var(--warn); margin-top: 2px; }
.demo-banner strong { color: var(--orange); }

/* -------------------------------------------------------------------- cards */

.card {
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
.card > header {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 16px; border-bottom: 1px solid var(--line-soft);
}
.card > header h2 { font-size: 13.5px; }
.card > header .tools { margin-left: auto; display: flex; gap: 7px; align-items: center; }
.card .body { padding: 16px; }
.card .body.flush { padding: 0; }

.grid { display: grid; gap: 14px; }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.split { grid-template-columns: 1.5fr 1fr; align-items: start; }

.stat { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius); padding: 15px 16px; }
.stat .label { color: var(--text-faint); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; }
.stat .value { font-size: 27px; font-weight: 650; letter-spacing: -0.02em; margin-top: 5px; line-height: 1.1; }
.stat .value small { font-size: 14px; font-weight: 500; color: var(--text-dim); letter-spacing: 0; }
.stat .sub { color: var(--text-dim); font-size: 12.5px; margin-top: 5px; }
.stat.ok .value { color: var(--ok); }
.stat.warn .value { color: var(--warn); }
.stat.crit .value { color: var(--crit); }

/* ------------------------------------------------------------------ badges */

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 20px;
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
  background: var(--bg-hover); color: var(--text-dim);
}
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.badge.ok { background: var(--ok-dim); color: var(--ok); }
.badge.warn { background: var(--warn-dim); color: var(--warn); }
.badge.crit { background: var(--crit-dim); color: var(--crit); }
.badge.info { background: var(--info-dim); color: var(--info); }
.badge.pending { background: var(--pending-dim); color: var(--pending); }
.badge.plain { background: var(--bg-hover); color: var(--text-dim); }

/* ----------------------------------------------------------------- buttons */

button, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 7px 13px; border-radius: var(--radius-sm);
  background: var(--bg-raised); border: 1px solid var(--line);
  color: var(--text); font: 500 13px/1.4 var(--sans); cursor: pointer;
  transition: background 0.13s ease, border-color 0.13s ease;
}
button:hover, .btn:hover { background: var(--bg-hover); border-color: var(--line-strong); text-decoration: none; }
button:disabled { opacity: 0.45; cursor: not-allowed; }
button.primary { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--on-accent); font-weight: 650; }
button.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
button.danger { color: var(--crit); border-color: rgba(229, 72, 77, 0.4); }
button.danger:hover { background: var(--crit-dim); }
button.ghost { background: none; border-color: transparent; color: var(--text-dim); }
button.ghost:hover { background: var(--bg-hover); color: var(--text); }
button.sm { padding: 4px 9px; font-size: 12px; }
button.icon-only { padding: 6px; }

.seg { display: inline-flex; background: var(--bg-panel); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 2px; gap: 2px; }
.seg button { background: none; border: 0; padding: 5px 11px; font-size: 12.5px; color: var(--text-dim); }
.seg button.on { background: var(--bg-raised); color: var(--text); }

/* ------------------------------------------------------------------ tables */

table { width: 100%; border-collapse: collapse; }
thead th {
  text-align: left; font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--text-faint); font-weight: 600; padding: 9px 14px;
  border-bottom: 1px solid var(--line); background: var(--bg-panel);
  position: sticky; top: 0; z-index: 2;
}
tbody td { padding: 10px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr.clickable { cursor: pointer; }
tbody tr.clickable:hover { background: var(--bg-raised); }
tbody tr.selected { background: var(--bg-hover); }
.table-wrap { max-height: 620px; overflow: auto; }

.empty { padding: 40px 20px; text-align: center; color: var(--text-faint); }

/* -------------------------------------------------------------------- tree */

.estate { display: grid; grid-template-columns: 380px 1fr; gap: 14px; align-items: start; }

.tree { padding: 6px; max-height: calc(100vh - 210px); overflow-y: auto; }
.tree-row {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 6px 8px; border-radius: var(--radius-sm);
  background: none; border: 0; color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.tree-row:hover { background: var(--bg-hover); }
.tree-row.on { background: var(--bg-raised); box-shadow: inset 2px 0 0 var(--teal); }
.tree-row .caret { color: var(--text-faint); transition: transform 0.14s ease; flex: none; }
.tree-row .caret.open { transform: rotate(90deg); }
.tree-row .label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-row .tail { color: var(--text-faint); font-size: 11.5px; flex: none; }
.tree-level-1 { padding-left: 16px; }
.tree-level-2 { padding-left: 32px; }
.tree-level-3 { padding-left: 50px; }
.tree-district { font-weight: 600; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-dim); }

.status-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.status-dot.online { background: var(--ok); }
.status-dot.offline { background: var(--crit); box-shadow: 0 0 0 3px var(--crit-dim); }
.status-dot.degraded { background: var(--warn); }
.status-dot.unreachable { background: var(--info); }
.status-dot.pending { background: var(--pending); }

/* ------------------------------------------------------------------ detail */

.detail { min-height: 400px; }
.detail-head { display: flex; align-items: flex-start; gap: 14px; padding: 16px; border-bottom: 1px solid var(--line-soft); }
.detail-head .glyph {
  width: 42px; height: 42px; border-radius: var(--radius-sm); flex: none;
  background: var(--bg-raised); display: grid; place-items: center; color: var(--accent);
}
.detail-head h2 { font-size: 17px; }
.detail-head .where { color: var(--text-dim); font-size: 12.5px; margin-top: 2px; }
.detail-head .badges { margin-left: auto; display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }

.spec-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0; }
.spec-group { padding: 16px; border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.spec-group h3 {
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 10px; font-weight: 700;
}
.spec { display: flex; gap: 12px; padding: 4px 0; align-items: baseline; }
.spec dt { color: var(--text-faint); font-size: 12.5px; flex: none; width: 132px; }
.spec dd { margin: 0; flex: 1; font-size: 13px; word-break: break-word; }

/* ------------------------------------------------------------ uptime strip */

.uptime-strip { display: flex; gap: 2px; align-items: flex-end; height: 42px; }
.uptime-strip .bar { flex: 1; border-radius: 1.5px; background: var(--ok); min-height: 4px; position: relative; }
.uptime-strip .bar.warn { background: var(--warn); }
.uptime-strip .bar.crit { background: var(--crit); }
.uptime-strip .bar:hover { outline: 1px solid var(--text); }
.uptime-scale { display: flex; justify-content: space-between; color: var(--text-faint); font-size: 11px; margin-top: 6px; }

.spark { display: flex; gap: 1px; align-items: flex-end; height: 20px; width: 82px; }
.spark span { flex: 1; background: var(--ok); border-radius: 1px; min-height: 2px; }
.spark span.warn { background: var(--warn); }
.spark span.crit { background: var(--crit); }

.meter { height: 6px; background: var(--bg-hover); border-radius: 4px; overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--teal); border-radius: 4px; }
.meter i.warn { background: var(--warn); }
.meter i.crit { background: var(--crit); }

/* --------------------------------------------------------------------- map */

.map-wrap { position: relative; background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.map-canvas { display: block; width: 100%; height: calc(100vh - 190px); min-height: 600px; cursor: grab; touch-action: none; }
.map-canvas.dragging { cursor: grabbing; }
.district { fill: var(--map-land); stroke: var(--map-stroke); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.district:hover { fill: var(--map-land-hover); }
.district-label { fill: var(--map-label); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-anchor: middle; pointer-events: none; user-select: none; }

.site-pin { cursor: pointer; }
.site-pin .halo { fill: none; stroke-width: 2; opacity: 0.55; }
.site-pin .core { stroke: var(--pin-stroke); stroke-width: 1.5; }
.site-pin.online .core { fill: var(--ok); }
.site-pin.online .halo { stroke: var(--ok); }
.site-pin.degraded .core { fill: var(--warn); }
.site-pin.degraded .halo { stroke: var(--warn); }
.site-pin.offline .core { fill: var(--crit); }
.site-pin.offline .halo { stroke: var(--crit); }
.site-pin.unreachable .core { fill: var(--info); }
.site-pin.unreachable .halo { stroke: var(--info); }
.site-pin .ring { fill: none; stroke: var(--crit); stroke-width: 2; opacity: 0; }
.site-pin.offline .ring { animation: ripple 2.4s infinite ease-out; }
.site-pin .pin-label { fill: var(--pin-label); font-size: 11px; font-weight: 600; text-anchor: middle; pointer-events: none; paint-order: stroke; stroke: var(--pin-stroke); stroke-width: 3px; stroke-linejoin: round; }
.site-pin.selected .core { stroke: var(--text); stroke-width: 2; }
/* The count sits on the filled pin, so it takes the pin outline colour and drops
   the halo the site labels use to lift them off the map. */
.site-pin .cluster-count { fill: var(--pin-stroke); stroke: none; }

@keyframes ripple {
  0% { r: 6; opacity: 0.75; }
  100% { r: 26; opacity: 0; }
}

.map-toolbar {
  position: absolute; top: 12px; left: 12px; display: flex; gap: 7px; flex-wrap: wrap; z-index: 5;
}
.map-zoom { position: absolute; top: 12px; right: 12px; display: grid; gap: 6px; z-index: 5; }
.map-zoom button { width: 32px; height: 32px; padding: 0; background: var(--overlay-bg); }
.map-legend {
  position: absolute; bottom: 12px; left: 12px; z-index: 5;
  background: var(--overlay-bg); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 10px 12px; font-size: 12px;
}
.map-legend .row { display: flex; align-items: center; gap: 8px; padding: 2px 0; color: var(--text-dim); }
.map-attrib { position: absolute; bottom: 10px; right: 12px; z-index: 5; font-size: 11px; color: var(--text-faint); }

.map-card {
  position: absolute; top: 58px; right: 12px; width: 320px; z-index: 6;
  background: var(--bg-panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); max-height: calc(100% - 120px); overflow-y: auto;
}
.map-card header { display: flex; gap: 10px; align-items: flex-start; padding: 13px 14px; border-bottom: 1px solid var(--line-soft); }
.map-card header h3 { font-size: 14px; }
.map-card header button { margin-left: auto; }
.map-card .body { padding: 13px 14px; }
.map-card .kv { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; font-size: 12.5px; }
.map-card .kv span:first-child { color: var(--text-faint); }
.map-card ul { list-style: none; margin: 0; padding: 0; }
.map-card li { padding: 7px 0; border-top: 1px solid var(--line-soft); }

/* ------------------------------------------------------------------ alerts */

.alert-row-sev { width: 3px; border-radius: 2px; height: 26px; display: inline-block; }
.sev-critical { background: var(--crit); }
.sev-major { background: var(--warn); }
.sev-minor { background: var(--info); }

.timeline { list-style: none; margin: 0; padding: 0 0 0 22px; position: relative; }
.timeline::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.timeline li { position: relative; padding: 0 0 16px; }
.timeline li::before {
  content: ""; position: absolute; left: -21px; top: 5px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--bg-card); border: 2px solid var(--teal);
}
.timeline li.done::before { background: var(--teal); }
.timeline li.breach::before { border-color: var(--crit); background: var(--crit); }
.timeline .when { font-size: 12px; color: var(--text-faint); }
.timeline .what { font-weight: 600; font-size: 13px; }
.timeline .who { display: block; margin: 0; color: var(--text-dim); font-size: 12.5px; }

.notif { display: flex; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line-soft); align-items: flex-start; }
.notif:first-child { border-top: 0; }
.notif .icon { color: var(--accent); margin-top: 2px; }
.notif .to { font-size: 12.5px; }
.notif .when { margin-left: auto; color: var(--text-faint); font-size: 11.5px; white-space: nowrap; }

/* ------------------------------------------------------------------ drawer */

.drawer-backdrop { position: fixed; inset: 0; background: var(--backdrop); z-index: 60; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(640px, 96vw); z-index: 61;
  background: var(--bg-panel); border-left: 1px solid var(--line);
  box-shadow: var(--shadow); display: flex; flex-direction: column;
  animation: slide-in 0.18s ease;
}
@keyframes slide-in { from { transform: translateX(28px); opacity: 0.4; } to { transform: none; opacity: 1; } }
.drawer > header { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.drawer > header h2 { font-size: 16px; }
.drawer > header .sub { color: var(--text-dim); font-size: 12.5px; margin-top: 2px; }
.drawer > header button { margin-left: auto; }
.drawer .drawer-body { flex: 1; overflow-y: auto; padding: 16px 18px; }
.drawer .drawer-foot { padding: 14px 18px; border-top: 1px solid var(--line); display: flex; gap: 8px; flex-wrap: wrap; }

/* ------------------------------------------------------------------- forms */

.field { margin-bottom: 13px; }
.field label { display: block; font-size: 12px; color: var(--text-dim); margin-bottom: 5px; font-weight: 500; }
.field .hint { color: var(--text-faint); font-size: 11.5px; margin-top: 4px; }
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea {
  width: 100%; padding: 8px 11px; background: var(--bg); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit;
}
input:disabled, select:disabled { opacity: 0.5; }
textarea { min-height: 76px; resize: vertical; }
.check { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--text-dim); padding: 3px 0; }
.check input { accent-color: var(--teal); width: 15px; height: 15px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 18px; flex-wrap: wrap; }
.tabs button {
  background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  padding: 9px 13px; color: var(--text-dim);
}
.tabs button.on { color: var(--text); border-bottom-color: var(--teal); }

/* ------------------------------------------------------------------ toasts */

.toasts { position: fixed; right: 18px; bottom: 18px; z-index: 80; display: grid; gap: 9px; width: min(370px, 92vw); }
.toast {
  background: var(--bg-raised); border: 1px solid var(--line); border-left: 3px solid var(--crit);
  border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow);
  animation: toast-in 0.22s ease;
}
.toast.major { border-left-color: var(--warn); }
.toast.minor { border-left-color: var(--info); }
.toast .top { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--text-faint); }
.toast .top strong { color: var(--crit); font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; }
.toast.major .top strong { color: var(--warn); }
.toast.minor .top strong { color: var(--info); }
.toast h4 { margin: 5px 0 2px; font-size: 13.5px; }
.toast p { color: var(--text-dim); font-size: 12.5px; margin: 0; }
.toast .acts { display: flex; gap: 7px; margin-top: 10px; }
@keyframes toast-in { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ------------------------------------------------------------------- misc */

.legend-inline { display: flex; gap: 14px; flex-wrap: wrap; color: var(--text-dim); font-size: 12px; }
.legend-inline span { display: flex; align-items: center; gap: 6px; }

.footnote { color: var(--text-faint); font-size: 12px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line-soft); }

.district-bar { display: grid; grid-template-columns: 118px 1fr 52px; gap: 10px; align-items: center; padding: 5px 0; font-size: 12.5px; }

/* --------------------------------------------------------------- responsive */

@media (max-width: 1180px) {
  .grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .grid.split { grid-template-columns: 1fr; }
  .estate { grid-template-columns: 1fr; }
  .tree { max-height: 340px; }
}

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; flex-direction: column; }
  .nav { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; max-width: 100%; }
  .topbar { flex-wrap: wrap; height: auto; padding: 10px 14px; gap: 10px; }
  .searchbox { max-width: none; flex: 1 1 100%; order: 3; }
  .table-wrap { overflow-x: auto; }
  .card .body > table, .card .body.flush > table { display: block; overflow-x: auto; }
  .sidebar-foot { display: none; }
  .signin { grid-template-columns: 1fr; }
  .signin-brand { border-right: 0; border-bottom: 1px solid var(--line-soft); padding: 34px 24px; }
  .signin-panel { padding: 28px 20px 48px; }
  .grid.cols-3, .grid.cols-2 { grid-template-columns: 1fr; }
  .map-card { position: static; width: auto; max-height: none; margin-top: 12px; }
}

/* The monthly report is meant to be printed or saved as a PDF, so printing
   drops the console around it and puts the report on white paper. */
@media print {
  body { background: #fff; color: #111; }
  .app, .toasts, .drawer-backdrop, .drawer-foot, .drawer > header button { display: none !important; }
  .drawer {
    position: static; width: auto; border: 0; box-shadow: none; animation: none;
    background: #fff; color: #111;
  }
  .drawer .drawer-body { overflow: visible; padding: 0; }
  .drawer h2, .drawer h3, .drawer td, .drawer th, .drawer li { color: #111; }
  .dim, .faint { color: #444 !important; }
  thead th { background: #eee; color: #111; }
  tbody td { border-bottom: 1px solid #ddd; }
}

@media (max-width: 640px) {
  .grid.cols-4 { grid-template-columns: 1fr; }
  .content { padding: 16px 14px 48px; }
  .topbar { padding: 0 14px; }
  .spec dt { width: 108px; }
  .field-row { grid-template-columns: 1fr; }
}