/* Общие для всех страниц АРМ: палитра, шрифты, переключатель темы,
   жетон номера. Страницы (login.html, operator.html) подключают этот
   файл и добавляют поверх только свою собственную вёрстку. */

:root {
  --bg-page: #10151c;
  --bg-panel: #171e27;
  --bg-header: #1b232e;
  --bg-row-hover: #1c2430;
  --border: #2a3340;
  --text-primary: #e7eaee;
  --text-secondary: #8993a4;
  --text-muted: #5c6577;

  --signal-green: #2fb866;
  --signal-green-dim: #17371f;
  --signal-red: #e5484d;
  --signal-red-dim: #3a1c1d;
  --signal-amber: #f0a93a;
  --signal-amber-dim: #3a2d13;
  /* Спецтранспорт — обход всех лимитов. Синий выбран не декоративно:
     это тот же цвет, что и проблесковые маячки спецслужб/служебного
     транспорта — узнаваемая ассоциация для оператора на АЗС. */
  --signal-blue: #3b8bd4;
  --signal-blue-dim: #16283a;

  --plate-bg: #f3f1e9;
  --plate-text: #14161a;

  --font-body: "IBM Plex Sans", -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* Светлая тема — тот же пульт контроля, но для дневной смены за стойкой.
   Сигнальные цвета чуть темнее своих тёмных версий — иначе на белом фоне
   зелёный/жёлтый теряют контраст и штамп решения перестаёт читаться. */
:root[data-theme="light"] {
  --bg-page: #eef1f5;
  --bg-panel: #ffffff;
  --bg-header: #ffffff;
  --bg-row-hover: #f5f7fa;
  --border: #dce1e8;
  --text-primary: #1a2028;
  --text-secondary: #5c6577;
  --text-muted: #939aa8;

  --signal-green: #1f9d57;
  --signal-green-dim: #e3f6ea;
  --signal-red: #d93a3f;
  --signal-red-dim: #fce8e8;
  --signal-amber: #c97f1d;
  --signal-amber-dim: #fbf0dc;
  --signal-blue: #2064a8;
  --signal-blue-dim: #e5f0fb;
}

* { box-sizing: border-box; }

body {
  font-family: var(--font-body);
  background: var(--bg-page);
  color: var(--text-primary);
  margin: 0;
  min-height: 100vh;
}

/* ---------- Переключатель темы (шапка любой страницы) ---------- */
.theme-toggle {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text-secondary);
  font-size: 15px;
  cursor: pointer;
  line-height: 1;
}
.theme-toggle:hover { color: var(--text-primary); border-color: var(--text-muted); }
.theme-toggle:focus-visible { outline: 2px solid var(--signal-amber); outline-offset: 2px; }

/* ---------- Жетон номера — как настоящий ГРЗ ---------- */
.plate {
  display: inline-flex;
  background: var(--plate-bg);
  border-radius: 5px;
  border: 2px solid #1a1c20;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(0,0,0,0.3);
}
.plate-main {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 1px;
  color: var(--plate-text);
  padding: 4px 10px 4px 12px;
}
.plate-region {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-left: 2px solid #1a1c20;
  padding: 3px 8px;
  font-family: var(--font-mono);
}
.plate-region .num { font-size: 15px; font-weight: 700; color: var(--plate-text); line-height: 1; }
.plate-region .rus { font-size: 7px; font-weight: 500; color: #55585c; letter-spacing: 1px; margin-top: 2px; }
.plate-flag { display: flex; width: 14px; height: 5px; margin-top: 2px; border-radius: 1px; overflow: hidden; }
.plate-flag span { flex: 1; }