/* VoltDraft – additions on top of the shared drafting-sheet UI (css/app.css) */
:root {
  --accent: #3446a8;
  --accent-ink: #ffffff;
  --accent-soft: #e2e6f8;
  --room: #3446a8;
  --wet: #7e8b90;
  --zone: #1d86c8;
  --wire: #5d6a6f;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent: #8c9cff; --accent-ink: #0f1433; --accent-soft: #22294d;
    --room: #8c9cff; --wet: #75858a; --zone: #4fb3ef; --wire: #93a2a5;
  }
}
:root[data-theme="dark"] {
  --accent: #8c9cff; --accent-ink: #0f1433; --accent-soft: #22294d;
  --room: #8c9cff; --wet: #75858a; --zone: #4fb3ef; --wire: #93a2a5;
}

.ic-room { border-style: solid; border-width: 1.6px; background: color-mix(in srgb, var(--room) 14%, transparent); border-color: var(--room); }
.ic-link { border: 0; border-top: 1.6px dashed var(--muted); border-radius: 50% 50% 0 0; height: 10px; margin-top: 4px; }
.ic-circuit { border: 0; background: radial-gradient(circle at 25% 50%, var(--muted) 0 2px, transparent 2.5px), radial-gradient(circle at 75% 50%, var(--muted) 0 2px, transparent 2.5px); border-bottom: 1.6px solid var(--muted); border-radius: 0 0 50% 50%; }

/* ---------- plan ---------- */
.g-room { fill: var(--room); fill-opacity: .045; stroke: none; }
.g-room.t-outdoor { fill-opacity: .02; stroke: var(--room); stroke-opacity: .35; stroke-dasharray: 6 4; }
.g-room.sel { fill-opacity: .12; }
.g-room-name { fill: var(--muted); font-family: var(--font-head); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; text-anchor: middle; }
.g-room-area { fill: var(--muted); font-family: var(--font-mono); text-anchor: middle; opacity: .8; }
.g-wet .g-fx { fill: var(--paper); stroke: var(--wet); }
.g-wet .g-fx-text { fill: var(--wet); }
.g-zone1 { fill: var(--zone); fill-opacity: .14; stroke: none; }
.g-zone2 { fill: var(--zone); fill-opacity: .06; stroke: var(--zone); stroke-opacity: .5; stroke-dasharray: 3 3; }
.g-zone-txt { fill: var(--zone); font-family: var(--font-mono); opacity: .85; }
.g-wire { fill: none; stroke-linecap: round; }
.g-wire.home { stroke-dasharray: 6 4; }
.g-link { fill: none; stroke: var(--wire); stroke-dasharray: 2 3; stroke-linecap: round; }
.g-dev .g-fx { stroke: var(--dc, var(--ink)); }
.g-dev .g-fx-fill { fill: var(--dc, var(--ink)); }
.g-dev .g-fx-text { fill: var(--dc, var(--ink)); }
.g-dev-tag { font-family: var(--font-mono); text-anchor: middle; paint-order: stroke; stroke: var(--paper); stroke-linejoin: round; }
.g-dev-tag.none { fill: var(--muted); }
.g-link-src { fill: none; stroke: var(--accent); }
.g-circ-halo { fill: none; stroke-opacity: .35; }

/* ---------- panel ---------- */
.tabs button { padding: 8px 6px 7px; font-size: 12.5px; }
.circ-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }
.circ-list td:first-child { white-space: nowrap; }
.row.tight { gap: 4px; }
.row button.active { background: var(--accent-soft); border-color: var(--accent); font-weight: 600; }
.ctl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ctl-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; padding: 3px 8px; border: 1px solid var(--line-soft); border-radius: 4px; }
.ctl-list button { padding: 0 7px; }
.board-svg text { font-family: var(--font-mono); }
.lpd-bar { height: 6px; background: var(--line-soft); border-radius: 3px; overflow: hidden; }
.lpd-bar i { display: block; height: 100%; background: var(--ok); }
.lpd-bar i.over { background: var(--fail); }