/* Семантичні кольори спільні для кабінету, входу, таблиць і часових шкал. */
:root {
  color-scheme: light;
  --canvas: #f6f5f3;
  --surface: #ffffff;
  --surface-subtle: #efeeec;
  --hover: #ece8ef;
  --text: #393641;
  --heading: #26232d;
  --blue: #5b4b78;
  --green: #526c4d;
  --line: #d8d5db;
  --muted: #625e69;
  --placeholder: #6e6876;
  --control-line: #8d8795;
  --primary-bg: #526c4d;
  --on-primary: #ffffff;
  --brand-bg: #5b4b78;
  --focus: #6f5b90;
  --error-bg: #fff0ef;
  --error-text: #9e2e34;
  --error-line: #ba3d42;
  --status-bg: #d6eee4;
  --status-text: #175d45;
  --chart-bar: #14856a;
  --chart-empty: #e1e9ed;
  --chart-empty-text: #393641;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #1b1a1d;
  --surface: #252328;
  --surface-subtle: #302d33;
  --hover: #3c3742;
  --text: #ece9f0;
  --heading: #f4f1f7;
  --blue: #c2aedc;
  --green: #bbd4b5;
  --line: #534d5b;
  --muted: #c4becb;
  --placeholder: #b8b0c2;
  --control-line: #91879e;
  --primary-bg: #bbd4b5;
  --on-primary: #23301e;
  --brand-bg: #51475f;
  --focus: #cdb5ee;
  --error-bg: #49252c;
  --error-text: #ffb9c0;
  --error-line: #f98797;
  --status-bg: #193f35;
  --status-text: #9fe4c7;
  --chart-bar: #4ac6a2;
  --chart-empty: #344b59;
  --chart-empty-text: #ece9f0;
}
:root, body { color: var(--text); background: var(--canvas); }
h1, h2, h3 { color: var(--heading); }
.topbar, .sidebar, .panel, table, .skip-link { background: var(--surface); }
button, .button, input, select, textarea {
  background: var(--surface);
  color: var(--text);
  border-color: var(--control-line);
}
button, .button { color: var(--blue); }
.primary { background: var(--primary-bg); color: var(--on-primary); border-color: var(--primary-bg); }

input::placeholder, textarea::placeholder { color: var(--placeholder); }
.language-picker [aria-pressed="true"], .nav-item:hover, .nav-item:focus,
.nav-item[aria-current="page"] { background: var(--hover); }
.nav-item[aria-current="page"] { font-weight: 650; }
.environment-note { background: var(--surface-subtle); color: var(--muted); }
th { background: var(--surface-subtle); color: var(--text); }
th, td { border-color: var(--line); }
tbody tr:hover { background: var(--surface-subtle); }
.tabs a:hover, .tabs a[aria-current="page"] {
  background: var(--surface);
  border-color: var(--line);
  border-bottom-color: var(--surface);
}
.errorlist { background: var(--error-bg); color: var(--error-text); border-color: var(--error-line); }
.status-chip { background: var(--status-bg); color: var(--status-text); }
.timeline, .timeline .resource-label { background: var(--surface); }
.timeline .axis-label, .timeline .tick { background: var(--surface-subtle); }
.timeline .bucket { background: var(--surface); border-color: var(--line); }
.bucket .load-bar { background: var(--chart-bar); }
.time-map { border-color: var(--line); }
.time-UNALLOCATED { background: var(--chart-empty); color: var(--chart-empty-text); }
.structure { background: var(--chart-empty); }
.structure > div { background: var(--chart-bar); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible { outline-color: var(--focus); }
[hidden] { display: none !important; }
.top-actions .theme-toggle { min-width: 34px; padding: .35rem; }
.theme-toggle[aria-pressed="false"] .theme-sun,
.theme-toggle[aria-pressed="true"] .theme-moon { display: none; }
@media (max-width: 650px) {
  .brand { font-size: 1rem; gap: .4rem; }
  
  .top-actions button { padding-inline: .4rem; }
}