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

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

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

/* Подложка полос под системными панелями (форма — в ui.css). Полупрозрачная
   намеренно: одна и та же строчка ложится и на белую шапку учителя, и на
   серую страницу повара. */
:root { --edge-tint: rgba(255, 255, 255, .55); }

html.dark {
  /* нативные календари, скроллбары и автозаполнение — тоже тёмные */
  color-scheme: dark;
  --edge-tint: rgba(6, 13, 26, .55);
}

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

/* --- нейтральные поверхности -------------------------------------------- */
html.dark .bg-white { background-color: #101a2d !important; }
html.dark .bg-slate-50 { background-color: #16223a !important; }
html.dark .bg-slate-100 { background-color: #1c2942 !important; }
html.dark .bg-slate-200 { background-color: #26344f !important; }

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

/* --- текст --------------------------------------------------------------- */
html.dark .text-slate-900 { color: #e6edf7 !important; }
html.dark .text-slate-700 { color: #cbd5e1 !important; }
html.dark .text-slate-600 { color: #b4c0d4 !important; }
html.dark .text-slate-500 { color: #94a3b8 !important; }
html.dark .text-slate-400 { color: #7e8ca4 !important; }
html.dark .text-slate-300 { color: #a8b6cc !important; }

/* --- границы ------------------------------------------------------------- */
html.dark .border-slate-100 { border-color: #1e293b !important; }
html.dark .border-slate-200 { border-color: #24314a !important; }
html.dark .border-slate-300 { border-color: #35435f !important; }
html.dark .border-slate-900 { border-color: #7c8ba4 !important; }
html.dark .focus\:border-slate-900:focus { border-color: #94a3b8 !important; }
html.dark .divide-slate-100 > * + * { border-color: #1e293b !important; }
html.dark .ring-slate-900 { --tw-ring-color: #94a3b8 !important; }
html.dark .border-dashed { border-color: #35435f !important; }

/* --- зелёный: присутствует, отмечено ------------------------------------- */
html.dark .bg-emerald-50 { background-color: #0e2a20 !important; }
html.dark .bg-emerald-100 { background-color: #133828 !important; }
html.dark .text-emerald-600 { color: #4ade80 !important; }
html.dark .text-emerald-700 { color: #34d399 !important; }
html.dark .text-emerald-800 { color: #6ee7b7 !important; }
html.dark .border-emerald-200 { border-color: #14532d !important; }
html.dark .border-emerald-300 { border-color: #166534 !important; }
html.dark .border-emerald-500 { border-color: #10b981 !important; }

/* --- красный: отсутствует, опоздал --------------------------------------- */
html.dark .bg-rose-50 { background-color: #2c111a !important; }
html.dark .bg-rose-100 { background-color: #3b1622 !important; }
html.dark .text-rose-400 { color: #fda4af !important; }
html.dark .text-rose-500 { color: #fb7185 !important; }
html.dark .text-rose-600 { color: #fb7185 !important; }
html.dark .text-rose-700 { color: #f87171 !important; }
html.dark .text-rose-800 { color: #fca5a5 !important; }
html.dark .border-rose-200 { border-color: #4c1d24 !important; }
html.dark .border-rose-300 { border-color: #7f1d3a !important; }
html.dark .border-rose-400 { border-color: #9f1239 !important; }

/* --- янтарный: ждём ------------------------------------------------------ */
html.dark .bg-amber-50,
html.dark .bg-amber-50\/60 { background-color: #2a2010 !important; }
html.dark .bg-amber-100 { background-color: #392c13 !important; }
html.dark .text-amber-500 { color: #fbbf24 !important; }
html.dark .text-amber-600 { color: #fbbf24 !important; }
html.dark .text-amber-700 { color: #fcd34d !important; }
html.dark .text-amber-800 { color: #fde68a !important; }
html.dark .text-amber-900 { color: #fef3c7 !important; }
html.dark .border-amber-200 { border-color: #4a3712 !important; }
html.dark .border-amber-300 { border-color: #78500f !important; }

/* --- голубой: льготы, подсказки ------------------------------------------ */
html.dark .bg-sky-50 { background-color: #0c2231 !important; }
html.dark .text-sky-700 { color: #38bdf8 !important; }
html.dark .text-sky-800 { color: #7dd3fc !important; }
html.dark .border-sky-200 { border-color: #0e4f6e !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: #9f1239 !important; }
html.dark .bg-rose-600 { background-color: #c11d3f !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(226, 232, 240, .22) 3px 4px);
}

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

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

/* --- поля ввода: Tailwind не сбрасывает их фон, он остаётся белым --------- */
html.dark input,
html.dark select,
html.dark textarea {
  background-color: #0b1526 !important;
  color: #e6edf7;
  border-color: #35435f;
}
html.dark option { background-color: #101a2d; color: #e6edf7; }
html.dark ::placeholder { color: #64748b !important; }

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

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

#theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  color: #475569;
  background: #f1f5f9;
  flex-shrink: 0;
  transition: background-color .2s, color .2s;
}
html.dark #theme-toggle { background: #1c2942; color: #fcd34d; }
/* Угол экрана: ниже модалок (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 #e2e8f0;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .12);
}
html.dark #theme-toggle.floating {
  border-color: #35435f;
  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; }
/* обратно в светлую тему круг «схлопывается», поэтому слои меняются местами */
html.theme-collapse::view-transition-old(root) { z-index: 1; }
html.theme-collapse::view-transition-new(root) { z-index: 0; }