/* StagePlan 1.4 – high-contrast light and dark modes.
   Layout and editor behavior stay in style.css; these are visual overrides only.
   PDF/SVG export has its own white-paper styles in app.js. */
:root,
html[data-theme="light"] {
  color-scheme: light;
  --bg:#eaf0f5; --panel:#ffffff; --panel2:#f2f6fa; --canvas:#eef3f7;
  --edge:#c5d2df; --edge2:#9eb1c3; --text:#122b40; --muted:#455f76;
  --accent:#086c91; --accent-dim:#daedf5; --amber:#a86414; --red:#b53544; --blue:#145f9a;
  --ui-surface:#ffffff; --ui-sidebar:#f8fafc; --ui-soft:#f1f5f9;
  --ui-toolbar:#f9fbfd; --ui-line:#c5d2df; --ui-line-soft:#d6e0ea;
  --ui-title:#102c44; --ui-sub:#38566f; --ui-muted:#557087;
  --ui-button:#ffffff; --ui-hover:#e5f2f9; --ui-selected:#d8edf7; --ui-selected-stroke:#77aec8;
  --ui-input:#ffffff; --ui-room:#dceaf6; --ui-plot:#ffffff;
  --ui-grid-minor:#e0e7ee; --ui-grid-major:#bccbd8;
  --ui-roomstroke:#6e8da9; --ui-devfill:#f5faff; --ui-devstroke:#3e7596;
  --ui-devicon:#0c5c81; --ui-devtext:#123754; --ui-asset:#00677c;
  --ui-cabletext:#152d42; --ui-cable-outline:#ffffff; --ui-endtag:#70440b;
  --ui-shadow:0 5px 24px rgba(21,45,66,.08);
}
html[data-theme="dark"] {
  color-scheme: dark;
  --bg:#0d1520; --panel:#152231; --panel2:#1c2b3b; --canvas:#101d2b;
  --edge:#385066; --edge2:#516a80; --text:#ebf4ff; --muted:#b4c5d5;
  --accent:#61c8e9; --accent-dim:#163c50; --amber:#efbc77; --red:#ff929e; --blue:#8ec0ff;
  --ui-surface:#162432; --ui-sidebar:#111e2a; --ui-soft:#1c2c3c;
  --ui-toolbar:#172636; --ui-line:#344b60; --ui-line-soft:#2b4154;
  --ui-title:#f0f7ff; --ui-sub:#cbd9e7; --ui-muted:#abc0d3;
  --ui-button:#203348; --ui-hover:#29445a; --ui-selected:#194157; --ui-selected-stroke:#3b8faf;
  --ui-input:#142434; --ui-room:#233c50; --ui-plot:#142639;
  --ui-grid-minor:#273c51; --ui-grid-major:#38536c;
  --ui-roomstroke:#7cabc8; --ui-devfill:#244258; --ui-devstroke:#95c7e3;
  --ui-devicon:#d5edff; --ui-devtext:#ebf6ff; --ui-asset:#78e1e2;
  --ui-cabletext:#eef8ff; --ui-cable-outline:#102030; --ui-endtag:#ffe3ad;
  --ui-shadow:0 8px 36px rgba(0,0,0,.22);
}

/* Typography and focus */
html,body { background:var(--bg);color:var(--text); }
button,input,select,textarea { color:var(--text); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline:2px solid var(--accent);outline-offset:2px; }
input,select,textarea { background:var(--ui-input);border-color:var(--ui-line);color:var(--ui-title);font-size:12.5px; }
input::placeholder,textarea::placeholder { color:var(--ui-muted);opacity:1; }
input:focus,select:focus,textarea:focus { border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent); }
input[type=checkbox] { accent-color:var(--accent); }
label,.field label { color:var(--ui-sub);font-size:11.5px; }
.muted,.field-hint,.footer-help,.modal-note,.hint-list,.empty-project { color:var(--ui-muted); }
.eyebrow,.accent { color:var(--accent); }

/* Structural surfaces */
.sidebar { background:var(--ui-sidebar);border-right:1px solid var(--ui-line);box-shadow:none; }
.brand { background:var(--ui-sidebar);border-bottom:1px solid var(--ui-line-soft); }
.brand strong { color:var(--ui-title); }
.brand small { color:var(--ui-muted);font-size:9px; }
.section-head { color:var(--ui-sub);font-size:10.5px; }
.icon-btn { color:var(--accent);background:var(--ui-soft);border-color:var(--ui-line); }
.project-item,.floor-item { color:var(--ui-sub); }
.project-item strong,.floor-item strong { color:inherit;font-size:12.5px; }
.project-item small { color:var(--ui-muted);font-size:11px; }
.project-item:hover,.floor-item:hover { background:var(--ui-hover); }
.project-item.active,.floor-item.active { background:var(--ui-selected);border-color:var(--ui-selected-stroke);color:var(--ui-title); }
.project-dot { background:var(--ui-muted); }
.project-item.active .project-dot { background:var(--accent); }
.floor-symbol { border-color:var(--ui-line);color:var(--ui-sub); }
.sidebar-bottom { border-top:1px solid var(--ui-line);background:var(--ui-sidebar); }
.side-action { color:var(--ui-sub);font-size:12.5px; }
.side-icon { color:var(--ui-muted); }
.side-action:hover { color:var(--ui-title);background:var(--ui-hover); }
.side-count,.library-count-badge { background:var(--ui-soft);color:var(--accent); }
.version { color:var(--ui-muted); }
.workspace,.main-content { background:var(--bg); }
.topbar { background:var(--ui-surface);border-color:var(--ui-line); }
.crumb { color:var(--ui-sub);font-size:11.5px; }
.crumb strong { color:var(--ui-title); }
.crumb>span:first-child { color:var(--accent); }
.crumb .chev { color:var(--ui-muted); }
.last-save,.save-status { color:var(--ui-sub);font-size:11px; }
.save-status:not(.unsaved):not(.failed) { color:var(--accent); }
.save-status.unsaved { color:var(--amber); }
.save-status.failed { color:var(--red); }
.board-column { background:var(--ui-surface); }
.board-toolbar { background:var(--ui-toolbar);border-bottom-color:var(--ui-line); }
.tool { color:var(--ui-sub);font-weight:650; }
.tool:hover { background:var(--ui-hover);border-color:var(--ui-line); }
.tool.active { background:var(--ui-selected);color:var(--accent);border-color:var(--ui-selected-stroke); }
.tool small { font-size:11.5px; }
.right-tools .small-icon,.small-icon { color:var(--ui-sub);background:var(--ui-button);border-color:var(--ui-line); }
.small-icon:hover { background:var(--ui-hover);border-color:var(--accent);color:var(--accent); }
.inline-check { color:var(--ui-sub);font-size:11.5px; }
.filter-bar { background:var(--ui-toolbar);border-color:var(--ui-line); }
.filter-title strong { color:var(--ui-title);font-size:12.5px; }
.filter-title small { color:var(--ui-muted);font-size:10.5px; }
.canvas-wrap { background:var(--canvas); }
.canvas-hint { background:var(--ui-surface);color:var(--ui-sub);border:1px solid var(--ui-line);box-shadow:var(--ui-shadow);font-size:11.5px; }
.canvas-overlay { background:var(--ui-surface);color:var(--ui-title);border-color:var(--ui-line);box-shadow:var(--ui-shadow);font-size:11px; }
.canvas-overlay button { background:var(--ui-soft);color:var(--ui-title);border-color:var(--ui-line); }
.canvas-overlay button:hover { background:var(--ui-hover); }
.bottom-strip { background:var(--ui-toolbar);color:var(--ui-sub);border-top-color:var(--ui-line);font-size:11.5px; }
.inspector { background:var(--ui-surface);border-left-color:var(--ui-line); }
.inspector-title { border-bottom-color:var(--ui-line);color:var(--ui-sub);font-size:10.5px; }
.inspector-title span:last-child { color:var(--accent); }
.inspector h2,.empty-inspector h3 { color:var(--ui-title); }
.inspector p.desc,.empty-inspector,.empty-project { color:var(--ui-muted); }
.empty-icon { color:var(--ui-muted); }
.inspector hr { border-top-color:var(--ui-line); }
.mini-info { color:var(--ui-sub);background:var(--ui-soft);border-color:var(--ui-line); }

/* Buttons and editor controls */
.primary { color:#fff;background:#096e92;border-color:#096e92;box-shadow:none; }
.primary:hover { color:#fff;background:#075676;border-color:#075676; }
html[data-theme="dark"] .primary { color:#082535;background:#6bd3ef;border-color:#6bd3ef; }
html[data-theme="dark"] .primary:hover { color:#071d2a;background:#9ce9ff;border-color:#9ce9ff; }
.quiet-btn,.outline-btn,.small-btn { color:var(--ui-title);background:var(--ui-button);border-color:var(--ui-line); }
.quiet-btn:hover,.outline-btn:hover,.small-btn:hover { color:var(--accent);background:var(--ui-hover);border-color:var(--accent); }
.danger-btn { background:var(--ui-soft);color:var(--red);border-color:var(--ui-line); }
.danger-btn:hover { background:var(--ui-hover); }
.tag { background:var(--ui-selected);border-color:var(--ui-selected-stroke);color:var(--accent); }
.tag.warn { background:var(--ui-soft);color:var(--amber);border-color:var(--ui-line); }
.palette-item { color:var(--ui-title);background:var(--ui-soft);border-color:var(--ui-line); }
.palette-item:hover,.palette-item.selected { color:var(--accent);background:var(--ui-selected);border-color:var(--ui-selected-stroke); }
.palette-item .pal-glyph { color:var(--accent); }
.library-selection { color:var(--ui-title);background:var(--ui-soft);border-color:var(--ui-line); }
.search-row { color:var(--ui-title);background:var(--ui-surface);border-color:var(--ui-line-soft); }
.search-row:hover { background:var(--ui-hover); }
.search-row small { color:var(--ui-muted); }
.library-search-results { border-color:var(--ui-line); }

/* Modals, tables, history, previews, toasts */
.modal-backdrop { background:rgba(5,14,24,.65); }
.modal { color:var(--ui-title);background:var(--ui-surface);border-color:var(--ui-line);box-shadow:0 28px 80px rgba(0,0,0,.26); }
.modal-head,.modal-footer { border-color:var(--ui-line-soft); }
.modal-head p,.modal-note { color:var(--ui-muted); }
.modal h2 { color:var(--ui-title); }
.modal-close { color:var(--ui-sub); }
.modal-close:hover { color:var(--accent); }
.table-scroll { border-color:var(--ui-line); }
table th { color:var(--ui-sub);background:var(--ui-soft); }
table td,table th { border-bottom-color:var(--ui-line-soft); }
tbody tr:hover { background:var(--ui-hover); }
.metric { color:var(--ui-title);background:var(--ui-soft);border-color:var(--ui-line); }
.metric strong { color:var(--ui-title); }
.metric small { color:var(--ui-muted); }
.tabs { border-color:var(--ui-line); }
.tab { color:var(--ui-sub); }
.tab.active { color:var(--accent);background:var(--ui-selected);border-color:var(--ui-selected-stroke); }
.kbd { color:var(--ui-sub);background:var(--ui-soft);border-color:var(--ui-line); }
.snapshot { color:var(--ui-title);background:var(--ui-soft);border-color:var(--ui-line); }
.snapshot small { color:var(--ui-muted); }
.preview-top strong { color:var(--ui-title); }
.preview-top span,.preview-controls span { color:var(--ui-sub); }
/* Keep the exported/preview diagram on white paper, even with a dark UI. */
.preview-viewport { background:#fff;border-color:var(--ui-line); }
.toast { color:var(--ui-title);background:var(--ui-surface);border-color:var(--accent);box-shadow:var(--ui-shadow); }
.toast.error { color:var(--red);background:var(--ui-surface);border-color:var(--red); }
.auth-screen { background:radial-gradient(circle at 45% 18%,var(--ui-selected),transparent 48%),var(--bg); }
.auth-card { color:var(--ui-title);background:var(--ui-surface);border-color:var(--ui-line);box-shadow:var(--ui-shadow); }
.auth-card p.muted,.auth-card small { color:var(--ui-sub); }
.form-error { color:var(--red);background:var(--ui-soft); }
.logo-mark { background:#117c9c; }
.logo-mark svg { stroke:#fff; }
.workspace:fullscreen,.workspace.editor-maximized { background:var(--ui-surface); }

/* Main SVG editor: theme colors are CSS only and never change project data. */
#plan #minor-grid path { stroke:var(--ui-grid-minor); }
#plan #major-grid path { stroke:var(--ui-grid-major); }
#plan .svg-board-bg { fill:var(--ui-plot); }
#plan .svg-bound { fill:var(--ui-plot);stroke:var(--ui-roomstroke); }
#plan .svg-boundary { fill:var(--ui-plot);stroke:var(--ui-roomstroke); }
#plan .svg-room { stroke:var(--ui-roomstroke); }
#plan .svg-room.selected { stroke:var(--accent); }
#plan .svg-room-name { fill:var(--ui-devtext);font-weight:700; }
#plan .svg-room-dim { fill:var(--ui-sub); }
#plan .svg-device-core { fill:var(--ui-devfill);stroke:var(--ui-devstroke); }
#plan .svg-device.selected .svg-device-core { stroke:var(--accent); }
#plan .svg-device-icon,#plan .svg-aim { stroke:var(--ui-devicon); }
#plan .svg-device-text { fill:var(--ui-devtext);font-weight:700; }
#plan .svg-device-asset { fill:var(--ui-asset); }
#plan .svg-device.context { opacity:.45; }
#plan .svg-cable-label { fill:var(--ui-cabletext);stroke:var(--ui-cable-outline); }
#plan .svg-endtag { fill:var(--ui-endtag);stroke:var(--ui-cable-outline); }
#plan .svg-cable-dot { stroke:var(--ui-plot); }
#plan .svg-vertex { fill:var(--ui-surface);stroke:var(--accent); }
#plan .svg-rotate-handle { fill:var(--ui-selected);stroke:var(--accent); }
#plan .svg-room-preview { stroke:var(--accent); }
#plan .svg-poly-preview { stroke:var(--accent); }

/* Theme switch: visible next to Save and also on the login page. */
.theme-toggle { display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;
  padding:0 12px;background:var(--ui-button);color:var(--ui-title);border:1px solid var(--ui-line);
  border-radius:7px;font-size:11.5px;font-weight:700;white-space:nowrap;flex-shrink:0; }
.theme-toggle:hover { border-color:var(--accent);color:var(--accent);background:var(--ui-hover); }
.theme-icon { font-size:17px;line-height:1;min-width:15px;text-align:center; }
.theme-label { line-height:1.2; }
.auth-theme { position:fixed;top:22px;right:24px;z-index:1; }

@media(max-width:1400px) {
  .top-actions { gap:6px; }
  .theme-toggle { padding:0 9px; }
}
@media(max-width:1180px) {
  .topbar .theme-label { display:none; }
  .topbar .theme-toggle { width:36px;padding:0; }
}
@media(max-width:660px) {
  .auth-theme { top:14px;right:14px; }
  .topbar .theme-toggle { height:32px;width:32px; }
}
@media print {
  html,body { color:#000;background:#fff;color-scheme:light; }
  .modal { background:#fff;color:#000; }
  .table-scroll,table th,table td { color:#111;border-color:#aaa; }
  table th { background:#eee; }
}
/* Light user-defined room colors are translucent in dark mode so captions remain legible. */
html[data-theme="dark"] #plan .svg-room { fill-opacity:.24; }