/* ================================================================ тёмная тема
   Включается классом `dark` на <html> (скрипт в <head> ставит его до отрисовки, кнопка — toggleTheme() в app.js).
   Цвета-токены (:root в app.css) переопределяются здесь целиком; всё, что в app.css задано «жёстким» цветом,
   перекрашивается ниже. Появился новый класс с цветом — допишите его сюда, иначе в тёмной теме останется светлое пятно.
   Форму и размеры этот файл не трогает. Печать всегда светлая (правила только для screen). */
@media screen {
  html.dark {
    color-scheme: dark;
    --bg: #0e1117; --surface: #161a23; --surface-2: #1a1f2a; --hover: #222836;
    --ink: #e8ebf2; --ink-2: #c5cbd8; --muted: #9aa3b5; --faint: #707a8d;
    --line: #2b3242; --line-2: #222937;
    --accent: #7178f0; --accent-2: #b4bcff; --accent-soft: rgba(113, 120, 240, .16); --accent-line: rgba(140, 148, 255, .38);
    --ok: #4ade80; --ok-soft: rgba(74, 222, 128, .13); --ok-line: rgba(74, 222, 128, .35);
    --bad: #ef5350; --bad-soft: rgba(239, 83, 80, .15); --bad-line: rgba(239, 83, 80, .4);
    --warn: #f0a04b; --warn-soft: rgba(240, 160, 75, .14); --warn-line: rgba(240, 160, 75, .4);
    --shadow: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow-pop: 0 12px 32px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .4);
    --ring: 0 0 0 3px rgba(113, 120, 240, .35);
    --subj-s: 34%; --subj-l: 24%;              /* цвета предметов в сетках: тёмные, приглушённые */
  }

  /* --- поля, переключатели, кнопки */
  html.dark input, html.dark select, html.dark textarea { background: var(--surface-2); color: var(--ink); border-color: var(--line); }
  html.dark input::placeholder { color: var(--faint); }
  html.dark option, html.dark optgroup { background: var(--surface); color: var(--ink); }
  html.dark .switch > span { background: #3a4254; }
  html.dark .seg button.active { background: var(--surface-2); box-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
  html.dark input[type=range] { background: linear-gradient(to right, var(--accent) 0 var(--p, 33%), #363d4d var(--p, 33%) 100%); }
  html.dark input[type=range]::-webkit-slider-thumb, html.dark input[type=range]::-moz-range-thumb { background: var(--surface); }
  html.dark .pills button:hover, html.dark .day:hover { border-color: #465066; }
  html.dark .pills button.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
  html.dark .pills button.active small { color: #5d6678; }
  html.dark .pills button.bad, html.dark .alert { color: #ffb4b0; }
  html.dark .alert.ok { color: #8be0ad; }
  html.dark .alert.warn { color: #f4c088; }
  html.dark .alert.info { color: var(--accent-2); }
  html.dark .lrow:hover { border-color: #3a4358; }
  html.dark .g-more:hover { background: rgba(255, 255, 255, .08); }

  /* --- ярлыки этапов и значки */
  html.dark .chip.завуч { background: #262c3a; color: #b6bdcc; }
  html.dark .chip.адпал, html.dark .chip.live, html.dark .ct-icon.orange { background: rgba(240, 160, 75, .16); color: #f4b56d; }
  html.dark .chip.ручная { background: rgba(167, 139, 250, .18); color: #c4b5fd; }
  html.dark .sb-job .bar { background: rgba(113, 120, 240, .25); }

  /* --- таблицы, карточки, строки */
  html.dark table.t tbody tr:hover td { background: #1c2230; }
  html.dark .school-t tr.open td { background: #1b2033 !important; }
  html.dark .school-t tr.detail td { background: #181c28 !important; }
  html.dark .fresh, html.dark tr.fresh td { background: rgba(240, 190, 90, .13) !important; }
  html.dark .lrow.fresh, html.dark .room.fresh { border-color: #a9772f; }
  html.dark .adder { border-color: #3a4358; }
  html.dark .brow.active b { background: var(--surface); }

  /* --- сетка класса */
  html.dark .cell.off { background: repeating-linear-gradient(45deg, transparent, transparent 5px, #1d2230 5px, #1d2230 10px); }
  html.dark .lesson { border-color: rgba(255, 255, 255, .06); }
  html.dark .lesson:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
  html.dark .lesson .t { color: rgba(255, 255, 255, .62); }
  html.dark .lesson .r { color: rgba(255, 255, 255, .5); }
  html.dark .lesson.pinned::after { background: rgba(255, 255, 255, .75); }              /* замок на тёмной карточке — светлый */
  html.dark .lesson.solo { box-shadow: inset 0 -3px 0 rgba(167, 139, 250, .6); }
  html.dark .lesson.changed { outline-color: #f0a04b; }
  html.dark .lesson.related { outline-color: #7178f0; }

  /* --- неделя учителя, занятость, выбор времени */
  html.dark .tweek .c.busy { background: rgba(113, 120, 240, .22); color: #c7ccff; }
  html.dark .tweek .c.extra, html.dark .bgrid .c.extra { background: #262c3a; color: #a5adbf; }
  html.dark .bc.ban { background: repeating-linear-gradient(45deg, var(--hover), var(--hover) 5px, var(--surface) 5px, var(--surface) 10px); }
  html.dark .mbusy td.ban { background: repeating-linear-gradient(45deg, #202635, #202635 3px, var(--surface) 3px, var(--surface) 6px); }
  html.dark .pk.warn, html.dark .lg.warn { border-color: #a9772f; }
  html.dark .timeline td.tl.opt { background: #4b53c8; }
  html.dark .timeline td.tl.zero { background: repeating-linear-gradient(45deg, #363c86, #363c86 3px, #2a2f63 3px, #2a2f63 6px); }
  html.dark .rchip.on small { color: #d7d9ff; }

  /* --- «Мастер»: таблицы как в Excel, но тёмные */
  html.dark .mwrap { background: var(--surface); border-color: #343c4e; }
  html.dark .mtable th, html.dark .mtable td { border-right-color: #2b3242; border-bottom-color: #2b3242; }
  html.dark .mtable thead th { background: #1f2531; color: var(--ink); }
  html.dark .mtable .sd, html.dark .mtable .st, html.dark .mteachers .sg, html.dark .mteachers .kr { background: #1a1f2a; }
  html.dark .mtable .sn { background: #1a1f2a; color: var(--muted); }
  html.dark .mclasses td.day, html.dark .mclasses tr.dstart td, html.dark .mclasses tr.sum td,
  html.dark .mteachers th.dh, html.dark .mteachers td.dfirst, html.dark .mteachers th.dfirst, html.dark .mteachers tr.grow td { border-color: #5a657c; }
  html.dark .mclasses tr.sum td { background: #181d27; color: var(--muted); }
  html.dark .mclasses td.mc-empty { background: #131720; }
  html.dark .mclasses td.mc-empty.off { background: repeating-linear-gradient(45deg, #141821, #141821 4px, #1c212c 4px, #1c212c 8px); }
  html.dark .mc .mr { color: rgba(255, 255, 255, .6); }
  html.dark .mclasses td.changed .mc { box-shadow: inset 0 0 0 2px #f0a04b; }
  html.dark .mclasses td.clash .mc { background: #6b2b2b; }
  html.dark .mteachers th.kt, html.dark .mteachers td.ktc { background: #1d2330; color: var(--muted); }
  html.dark .mteachers td[data-key] { background: rgba(113, 120, 240, .25); color: #d0d4ff; }
  html.dark .mteachers td.extra { background: #2a3040; color: #aab2c3; }
  html.dark .mteachers td.gap { background: rgba(239, 83, 80, .22); }
  html.dark .mteachers td.free { background: rgba(74, 222, 128, .14); }
  html.dark .mteachers tr:hover td.st { background: #232a3a; }
  html.dark .mteachers tr.grow td, html.dark .mteachers tr.grow td.st { background: #232a3a; color: var(--ink-2); }

  /* --- окна, уведомления, панель правок, журнал */
  html.dark .modal-wrap { background: rgba(0, 0, 0, .6); }
  html.dark .savebar { background: #262c3a; border: 1px solid #343c4e; }
  html.dark .toast { background: #262c3a; border: 1px solid #343c4e; }
  html.dark .toast.bad { background: #7f2422; }
  html.dark .job pre { background: #0b0d12; color: #c9d1e0; }
}

/* --- переключатель темы (форма — ui-часть, но живёт рядом) */
.theme-slot { margin: -2px 0 0 auto; align-self: flex-start; width: 30px; height: 30px; display: grid; place-items: center; }   /* высота вкладок — кнопка по центру, не прилипает к линии */
.theme-btn { width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface);
  color: var(--ink-2); display: grid; place-items: center; cursor: pointer; padding: 0; }
.theme-btn:hover { background: var(--hover); color: var(--ink); }
.theme-btn svg { width: 16px; height: 16px; }

/* круг при переключении — View Transitions: снимки не анимируем, движение задаёт clip-path из JS */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
@media print { .theme-slot { display: none; } }
.secs .theme-btn { padding: 0; height: 30px; border-radius: 50%; }

@media screen { html.dark .star { color: #fca5a5; } }