/* Тёмная тема.

   Сборки нет, Tailwind приезжает с CDN, поэтому вместо dark:-вариантов у
   каждого элемента переопределяем сами утилиты под html.dark. Так тема
   работает и в разметке, и в классах, которые собираются в JS-строках.

   Правки: если добавляете класс с новым цветом — допишите его сюда,
   иначе в тёмной теме останется белое пятно. */

/* Подложка полос под системными панелями (форма — в ui.css). Полупрозрачная
   намеренно: одна и та же строчка ложится и на белую шапку учителя, и на
   серую страницу повара. */
:root { --edge-tint: rgba(255, 255, 255, .55); }
/* Подложка под системными панелями в режиме «от края до края» (Android 15+: приложение рисуется и под строкой состояния, и под
   полосой жестов — тогда цвет панелей задаёт ЭТА страница, и он меняется вместе с темой). Сплошная, в цвет липкой шапки / theme-color:
   полупрозрачная пропускала содержимое, и полоса красилась пятнами. */
:root { --edge-bar: #ffffff; }
html.dark { --edge-bar: #161a23; }

html.dark {
  /* нативные календари, скроллбары и автозаполнение — тоже тёмные */
  color-scheme: dark;
  --edge-tint: rgba(14, 17, 23, .55);
  /* фон строки под липкой первой колонкой широких таблиц (см. ui.css,
     «широкие таблицы»): те же цвета, что у .bg-white и .bg-slate-50 ниже */
  --row-bg: #161a23;
  --row-head: #1a1f2a;
  --row-edge: rgba(232, 235, 242, .12);
}

/* ========================================================================
   Светлая тема: палитра расписания (raspisanie/web/static/app.css, :root).
   Tailwind по умолчанию даёт холодный сине-серый (slate), у расписания серый
   нейтральный — перекрашиваем утилиты, чтобы обе части выглядели одинаково.
   Только html:not(.dark): у тёмной темы свои правила ниже (они специфичнее).
   ===================================================================== */
html:not(.dark) body.bg-slate-100 { background-color: #f5f6f8 !important; }
html:not(.dark) .bg-slate-50 { background-color: #f9fafb !important; }
html:not(.dark) .bg-slate-100 { background-color: #f2f4f7 !important; }
html:not(.dark) .bg-slate-200 { background-color: #e5e7eb !important; }
html:not(.dark) .bg-slate-300 { background-color: #d3d7de !important; }
html:not(.dark) .bg-slate-700 { background-color: #3a4152 !important; }
html:not(.dark) .bg-slate-800 { background-color: #1d2230 !important; }
html:not(.dark) .bg-slate-900 { background-color: #131722 !important; }
html:not(.dark) .hover\:bg-slate-100:hover,
html:not(.dark) .active\:bg-slate-100:active { background-color: #f2f4f7 !important; }
html:not(.dark) .text-slate-900 { color: #131722 !important; }
html:not(.dark) .text-slate-800 { color: #1d2230 !important; }
html:not(.dark) .text-slate-700 { color: #3a4152 !important; }
html:not(.dark) .text-slate-600 { color: #4d5566 !important; }
html:not(.dark) .text-slate-500 { color: #6b7384 !important; }
html:not(.dark) .text-slate-400 { color: #9aa1af !important; }
html:not(.dark) .text-slate-300 { color: #c0c5cf !important; }
html:not(.dark) .border-slate-100,
html:not(.dark) .divide-slate-100 > * + * { border-color: #eef0f3 !important; }
html:not(.dark) .border-slate-200 { border-color: #e5e7eb !important; }
html:not(.dark) .border-slate-300 { border-color: #d3d7de !important; }
html:not(.dark) .border-slate-900 { border-color: #131722 !important; }
/* зелёный, красный, янтарный — «мягкие» цвета расписания (--ok-soft, --bad-soft, --warn-soft) */
html:not(.dark) .bg-emerald-50 { background-color: #e8f7ee !important; }
html:not(.dark) .bg-rose-50 { background-color: #fdecec !important; }
html:not(.dark) .bg-amber-50 { background-color: #fff5e6 !important; }
html:not(.dark) .text-emerald-600, html:not(.dark) .text-emerald-700 { color: #15803d !important; }
html:not(.dark) .text-rose-600, html:not(.dark) .text-rose-700 { color: #dc2626 !important; }
html:not(.dark) .text-amber-600, html:not(.dark) .text-amber-700 { color: #b45309 !important; }
html:not(.dark) .border-emerald-200 { border-color: #b7e4c7 !important; }
html:not(.dark) .border-rose-200 { border-color: #f5c2c2 !important; }
html:not(.dark) .border-amber-200 { border-color: #f5d9a8 !important; }

/* --- фон страницы: своя специфичность, чтобы перебить .bg-slate-100 ниже */
html.dark body.bg-slate-100,
html.dark body.bg-white {
  background-color: #0e1117 !important;
  color: #e8ebf2;
}

/* --- нейтральные поверхности -------------------------------------------- */
html.dark .bg-white { background-color: #161a23 !important; }
html.dark .bg-slate-50 { background-color: #1a1f2a !important; }
html.dark .bg-slate-100 { background-color: #222836 !important; }
html.dark .bg-slate-200 { background-color: #2b3242 !important; }

/* Тёмная кнопка на светлом фоне в тёмной теме сливается с карточкой,
   поэтому «главная» кнопка становится светлее фона, а не темнее. */
html.dark .bg-slate-900 { background-color: #3b4356 !important; }
html.dark .bg-slate-800 { background-color: #333b4d !important; }
html.dark .bg-slate-700 { background-color: #3f485c !important; }
html.dark .hover\:bg-slate-100:hover { background-color: #2b3242 !important; }
html.dark .active\:bg-slate-100:active { background-color: #2b3242 !important; }
html.dark .hover\:brightness-95:hover { filter: brightness(1.25); }

/* --- текст --------------------------------------------------------------- */
html.dark .text-slate-900 { color: #e8ebf2 !important; }
html.dark .text-slate-700 { color: #c5cbd8 !important; }
html.dark .text-slate-600 { color: #b0b8c8 !important; }
html.dark .text-slate-500 { color: #9aa3b5 !important; }
html.dark .text-slate-400 { color: #7d8699 !important; }
html.dark .text-slate-300 { color: #a7afc0 !important; }

/* --- границы ------------------------------------------------------------- */
html.dark .border-slate-100 { border-color: #222937 !important; }
html.dark .border-slate-200 { border-color: #2b3242 !important; }
html.dark .border-slate-300 { border-color: #3a4358 !important; }
html.dark .border-slate-900 { border-color: #8b94a8 !important; }
html.dark .focus\:border-slate-900:focus { border-color: #9aa3b5 !important; }
html.dark .divide-slate-100 > * + * { border-color: #222937 !important; }
html.dark .ring-slate-900 { --tw-ring-color: #9aa3b5 !important; }
html.dark .border-dashed { border-color: #3a4358 !important; }

/* --- зелёный: присутствует, отмечено ------------------------------------- */
html.dark .bg-emerald-50 { background-color: rgba(74, 222, 128, .12) !important; }
html.dark .bg-emerald-100 { background-color: rgba(74, 222, 128, .18) !important; }
html.dark .text-emerald-600 { color: #4ade80 !important; }
html.dark .text-emerald-700 { color: #4ade80 !important; }
html.dark .text-emerald-800 { color: #8be0ad !important; }
html.dark .border-emerald-200 { border-color: rgba(74, 222, 128, .28) !important; }
html.dark .border-emerald-300 { border-color: rgba(74, 222, 128, .36) !important; }
html.dark .border-emerald-500 { border-color: rgba(74, 222, 128, .6) !important; }

/* --- красный: отсутствует, опоздал --------------------------------------- */
html.dark .bg-rose-50 { background-color: rgba(239, 83, 80, .14) !important; }
html.dark .bg-rose-100 { background-color: rgba(239, 83, 80, .2) !important; }
html.dark .text-rose-400 { color: #ffb4b0 !important; }
html.dark .text-rose-500 { color: #f0706e !important; }
html.dark .text-rose-600 { color: #f0706e !important; }
html.dark .text-rose-700 { color: #f0706e !important; }
html.dark .text-rose-800 { color: #ffb4b0 !important; }
/* 900 — плашка «Безопасность» на вкладке «Проблемы данных»: фон у неё
   bg-rose-50, и без этой строки тёмно-красный текст ложился на тёмно-красный
   фон ровно там, где написано про подделываемый вход */
html.dark .text-rose-900 { color: #ffd0cd !important; }
html.dark .border-rose-200 { border-color: rgba(239, 83, 80, .3) !important; }
html.dark .border-rose-300 { border-color: rgba(239, 83, 80, .42) !important; }
html.dark .border-rose-400 { border-color: #a8403f !important; }

/* --- янтарный: ждём ------------------------------------------------------ */
html.dark .bg-amber-50,
html.dark .bg-amber-50\/60 { background-color: rgba(240, 160, 75, .13) !important; }
html.dark .bg-amber-100 { background-color: rgba(240, 160, 75, .2) !important; }
html.dark .text-amber-500 { color: #f0a04b !important; }
html.dark .text-amber-600 { color: #f0a04b !important; }
html.dark .text-amber-700 { color: #f4b56d !important; }
html.dark .text-amber-800 { color: #f4c088 !important; }
html.dark .text-amber-900 { color: #f8dcb8 !important; }
html.dark .border-amber-200 { border-color: rgba(240, 160, 75, .3) !important; }
html.dark .border-amber-300 { border-color: rgba(240, 160, 75, .42) !important; }

/* --- голубой: льготы, подсказки ------------------------------------------ */
html.dark .bg-sky-50 { background-color: rgba(56, 189, 248, .12) !important; }
html.dark .text-sky-700 { color: #38bdf8 !important; }
html.dark .text-sky-800 { color: #7dd3fc !important; }
html.dark .border-sky-200 { border-color: rgba(56, 189, 248, .32) !important; }

/* --- фиолетовый: причины/типы питания на выбор завуча --------------------- */
html.dark .bg-violet-50 { background-color: rgba(167, 139, 250, .14) !important; }
html.dark .text-violet-700 { color: #a78bfa !important; }
html.dark .border-violet-200 { border-color: rgba(167, 139, 250, .35) !important; }

/* --- индиго: причины/типы питания на выбор завуча -------------------------- */
html.dark .bg-indigo-50 { background-color: rgba(113, 120, 240, .16) !important; }
html.dark .text-indigo-700 { color: #9ea5f7 !important; }
html.dark .border-indigo-200 { border-color: rgba(140, 148, 255, .38) !important; }

/* --- бирюзовый: причины/типы питания на выбор завуча ----------------------- */
html.dark .bg-teal-50 { background-color: rgba(45, 212, 191, .12) !important; }
html.dark .text-teal-700 { color: #2dd4bf !important; }
html.dark .border-teal-200 { border-color: rgba(45, 212, 191, .32) !important; }

/* --- оранжевый: причины/типы питания на выбор завуча ----------------------- */
html.dark .bg-orange-50 { background-color: rgba(251, 146, 60, .13) !important; }
html.dark .text-orange-800 { color: #fdba74 !important; }
html.dark .border-orange-200 { border-color: rgba(251, 146, 60, .35) !important; }

/* --- шкала тепловой карты в «Аналитике» ---------------------------------- */
html.dark .bg-emerald-300 { background-color: #15603f !important; }
html.dark .bg-amber-200 { background-color: #6b4c10 !important; }
html.dark .bg-orange-300 { background-color: #8a3d10 !important; }
html.dark .bg-amber-400 { background-color: #8a6212 !important; }
html.dark .bg-orange-500 { background-color: #a8420c !important; }
html.dark .bg-rose-400 { background-color: #a8403f !important; }
html.dark .bg-rose-600 { background-color: #c8403e !important; }

/* Штриховка = «класс не отмечен». Пустая клетка и клетка без пропусков
   должны различаться с одного взгляда, иначе карта врёт. */
.hm-blank {
  background-image: repeating-linear-gradient(45deg,
    transparent 0 3px, rgba(15, 23, 42, .20) 3px 4px);
}
html.dark .hm-blank {
  background-image: repeating-linear-gradient(45deg,
    transparent 0 3px, rgba(232, 235, 242, .22) 3px 4px);
}

/* липкая левая колонка карты закрашена под цвет карточки */
html.dark #s-heat .bg-white { background-color: #161a23 !important; }

/* Вкладки админки красятся своим правилом в admin.html, но у них же есть
   bg-white — и без этой строки активная вкладка сливается с остальными. */
html.dark .tab.active {
  background-color: #3b4356 !important;
  color: #fff !important;
  border-color: #3b4356 !important;
}

/* --- поля ввода: Tailwind не сбрасывает их фон, он остаётся белым --------- */
html.dark input,
html.dark select,
html.dark textarea {
  background-color: #1a1f2a !important;
  color: #e8ebf2;
  border-color: #3a4358;
}
html.dark option { background-color: #161a23; color: #e8ebf2; }
html.dark ::placeholder { color: #707a8d !important; }

/* --- служебное ----------------------------------------------------------- */
html.dark .bg-white\/70 { background-color: rgba(14, 17, 23, 0.75) !important; }
html.dark .shadow-sm { box-shadow: 0 0 0 1px #222937; }

/* Крутилка loader(): кольцо крутится тем, что одна его дуга другого цвета.
   В светлой теме это border-t-slate-900 по светлому border-slate-200. В
   тёмной кольцо переопределено (#24314a), а вот подвижная дуга оставалась
   почти чёрной на почти чёрном — вращение шло, но видно его не было, и
   загрузка читалась как замерший кружок. Красим дугу светлым. */
html.dark .spin.border-t-slate-900 { border-top-color: #c5cbd8 !important; }

/* ========================================================================
   Переключатель темы: круг расходится из самой кнопки.
   ===================================================================== */

#theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  color: #4d5566;
  background: #f2f4f7;
  flex-shrink: 0;
  transition: background-color .2s, color .2s;
}
html.dark #theme-toggle { background: #222836; color: #f4b56d; }
/* Угол экрана: ниже модалок (z-50), но выше липкой шапки учителя (z-20) */
#theme-toggle.floating {
  position: fixed;
  /* --theme-top/right задаёт страница, чтобы кнопка встала ровно
     в одну линию с кнопками своей шапки, а не чуть выше них */
  top: calc(env(safe-area-inset-top, 0px) + var(--theme-top, 0.75rem));
  right: calc(env(safe-area-inset-right, 0px) + var(--theme-right, 0.75rem));
  z-index: 40;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .12);
}
html.dark #theme-toggle.floating {
  border-color: #3a4358;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

/* Обе картинки статичны — движение задаёт только clip-path из app.js,
   иначе браузерное растворение размажет круг. */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
::view-transition-old(root) { z-index: 0; }
::view-transition-new(root) { z-index: 1; }
/* Липкая шапка — отдельный слой перехода: меняет цвет на месте, плавно, а круг идёт по остальной странице. Без этого при
   возврате к светлой теме тёмный снимок страницы схлопывался круглой маской к кнопке вместе с шапкой, и верхняя панель
   «сжималась». Имя уникально: шапка на странице одна. */
header.sticky { view-transition-name: sticky-header; }
/* Главное: по умолчанию браузер «морфит» слой между размером ДО и размером ПОСЛЕ (width/height/transform группы). На телефоне
   панель адреса прячется и появляется, высота окна между двумя снимками меняется — и вся страница (и шапка) плавно
   растягивалась и «подъезжала». Морфинг отключён: группа сразу в конечном размере, снимки только растворяются/раскрываются кругом. */
::view-transition-group(root), ::view-transition-group(sticky-header) { animation: none; }
/* Шапка: старая остаётся НЕПРОЗРАЧНОЙ, новая проявляется поверх неё. Если растворять обе сразу (старая гаснет, новая зажигается),
   в середине перехода их суммарная непрозрачность падает ниже 1 — шапка на миг становится полупрозрачной, и сквозь неё мигает фон. */
::view-transition-old(sticky-header), ::view-transition-new(sticky-header) { mix-blend-mode: normal; }
::view-transition-old(sticky-header) { animation: none; }
::view-transition-new(sticky-header) { animation: kropki-fade-in .3s ease both; }
@keyframes kropki-fade-in { from { opacity: 0; } }

/* Запасной вариант без снимков страницы (Samsung Internet, браузеры без View Transitions): цвета плавно перетекают. Класс
   вешается на ~0,5 с на время переключения; перетекают только цвета, поэтому ничего не двигается и не пересчитывается. */
html.theme-fade, html.theme-fade *, html.theme-fade *::before, html.theme-fade *::after {
  transition: background-color .45s ease, border-color .45s ease, color .45s ease, fill .45s ease, stroke .45s ease,
    box-shadow .45s ease, outline-color .45s ease, text-decoration-color .45s ease !important;
}

/* обратно в светлую тему круг «схлопывается», поэтому слои меняются местами */
html.theme-collapse::view-transition-old(root) { z-index: 1; }
html.theme-collapse::view-transition-new(root) { z-index: 0; }

/* кнопка «Удалить» в списке бланков наводится розовым — цвет из первой
   задачи этой сессии, без него в тёмной теме получалось тёмное на тёмном */
html.dark .hover\:text-rose-700:hover { color: #f0706e !important; }

/* ---------------------------------- руководство по меткам в «Журнале»

   Метка в тексте набирается моноширинным на подложке, чтобы её было видно
   среди обычных слов и можно было скопировать глазами без ошибки. */
.bm-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em; background: #f2f4f7; color: #131722;
  padding: 1px 4px; border-radius: 4px; white-space: nowrap;
}
.bm-block { display: block; padding: 6px 8px; white-space: normal; }
/* Многострочный пример — блок разметки, и переносы в нём несут смысл:
   без них «{#each}…{/each}» слипается в одну строку и структура блока
   перестаёт читаться. pre-wrap, а не pre: длинная строка всё же должна
   переноситься на телефоне, а не уводить страницу вбок. */
.bm-pre { white-space: pre-wrap; line-height: 1.5; }
.bm-warn {
  background: #fffbeb; border-left: 3px solid #f59e0b;
  padding: 6px 8px; border-radius: 4px; color: #78350f;
}

html.dark .bm-code { background: #222937 !important; color: #e8ebf2 !important; }
html.dark .bm-warn { background: rgba(240, 160, 75, .14) !important; color: #f4c088 !important;
                     border-left-color: #f0a04b !important; }

/* Заголовки разделов руководства: text-slate-800 в тёмной теме уходит в
   почти чёрный, и подписи разделов пропадали на тёмном фоне. */
.bm-h { color: #1d2230; }
.bm-h2 { color: #3a4152; }
html.dark .bm-h { color: #e8ebf2 !important; }
html.dark .bm-h2 { color: #c5cbd8 !important; }

/* Образец листа правил в руководстве — это таблица, а не список меток:
   читается как таблица, значит и выглядеть должна ею, с рамкой. */
.bm-rules th, .bm-rules td {
  border: 1px solid #e5e7eb; padding: 3px 6px; vertical-align: top;
}
html.dark .bm-rules th, html.dark .bm-rules td { border-color: #2b3242 !important; }

/* В таблице руководства метка обязана переноситься: на телефоне строка
   вроде {d --absent:"Н" --present:"" …} уводила страницу вбок. */
.bm-cell { white-space: normal; }
/* Ломать по пробелам, а не посреди метки: «{{ school }}» разорванное на
   «{{» и «school }}» читается хуже, чем перенесённое целиком. */
.bm-cell .bm-code, .bm-cell { overflow-wrap: normal; }