/* Утилиты, которых нет в предсобранном Tailwind у Unfold.
 *
 * Зачем файл вообще. Unfold поставляет styles.css, собранный Tailwind v4 ПО
 * СВОИМ шаблонам — наши он не сканирует. Класса, которого там нет, для
 * браузера не существует, и он молча ничего не делает. Так уже ломалось:
 *
 *   * 04.08.2026 — кнопка с bg-amber-600 вышла белым текстом на прозрачном
 *     фоне и была не видна вовсе (скриншот владельца);
 *   * 10.08.2026 — на дашборде `hidden sm:table-cell` и `hidden md:table-cell`
 *     прятали колонки НАВСЕГДА: `hidden` в сборке есть, а `sm:table-cell` и
 *     `md:table-cell` — нет. «Дней», «Доля от max», «Скан», «Мест» и «Время»
 *     не видел никто и никогда, даже на большом мониторе. Дашборд из-за этого
 *     и выглядел скудным.
 *
 * Здесь лежит ровно то, чего не хватило нашим шаблонам, и ничего сверх.
 * Полноту стережёт tests/test_admin_css_classes.py: он сверяет каждый класс
 * из шаблонов admin/ с этой парой файлов и падает, если появился новый
 * «невидимый» класс. Значения берём из переменных палитры Unfold, чтобы цвета
 * не разъехались с остальной админкой.
 *
 * Форма dark-селектора скопирована у самого Unfold:
 *   .dark\:text-green-400:where(.dark,.dark *){...}
 */

/* ── цвет текста ─────────────────────────────────────────────── */
.text-green-600 { color: var(--color-green-600); }
.text-blue-600  { color: var(--color-blue-600); }

.dark\:text-green-300:where(.dark, .dark *)  { color: var(--color-green-300); }
.dark\:text-orange-300:where(.dark, .dark *) { color: var(--color-orange-300); }
.dark\:text-red-300:where(.dark, .dark *)    { color: var(--color-red-300); }
.dark\:text-blue-300:where(.dark, .dark *)   { color: var(--color-blue-300); }

/* ── рамки плашек состояния ──────────────────────────────────── */
.border-green-200  { border-color: var(--color-green-200); }
.border-orange-200 { border-color: var(--color-orange-200); }
.border-red-200    { border-color: var(--color-red-200); }
.border-red-100    { border-color: var(--color-red-100); }

.dark\:border-green-500\/30:where(.dark, .dark *) {
    border-color: color-mix(in oklab, var(--color-green-500) 30%, transparent);
}
.dark\:border-orange-500\/30:where(.dark, .dark *) {
    border-color: color-mix(in oklab, var(--color-orange-500) 30%, transparent);
}
.dark\:border-red-500\/30:where(.dark, .dark *) {
    border-color: color-mix(in oklab, var(--color-red-500) 30%, transparent);
}
.dark\:border-red-500\/20:where(.dark, .dark *) {
    border-color: color-mix(in oklab, var(--color-red-500) 20%, transparent);
}

/* ── фон плашек состояния в тёмной теме ──────────────────────── */
.dark\:bg-green-500\/10:where(.dark, .dark *) {
    background-color: color-mix(in oklab, var(--color-green-500) 10%, transparent);
}
.dark\:bg-orange-500\/10:where(.dark, .dark *) {
    background-color: color-mix(in oklab, var(--color-orange-500) 10%, transparent);
}
.dark\:bg-red-500\/10:where(.dark, .dark *) {
    background-color: color-mix(in oklab, var(--color-red-500) 10%, transparent);
}
.dark\:bg-orange-500\/20:where(.dark, .dark *) {
    background-color: color-mix(in oklab, var(--color-orange-500) 20%, transparent);
}
.dark\:bg-green-500\/20:where(.dark, .dark *) {
    background-color: color-mix(in oklab, var(--color-green-500) 20%, transparent);
}
.dark\:bg-blue-500\/20:where(.dark, .dark *) {
    background-color: color-mix(in oklab, var(--color-blue-500) 20%, transparent);
}
/* Подсветка сегодняшней клетки календаря. */
.dark\:bg-blue-500\/10:where(.dark, .dark *) {
    background-color: color-mix(in oklab, var(--color-blue-500) 10%, transparent);
}

/* ── мелкая геометрия ────────────────────────────────────────── */
/* Высота клетки календаря: ниже — и три плашки офисов вылезают наружу. */
.min-h-24 { min-height: 6rem; }
.py-0\.5 { padding-top: .125rem; padding-bottom: .125rem; }
.w-1\.5  { width: .375rem; }
.h-1\.5  { height: .375rem; }
.gap-x-3 { column-gap: .75rem; }
.gap-y-1 { row-gap: .25rem; }
.last\:border-0:last-child { border-style: none; }

/* Заливка полосы «доля от максимума». Отдельным классом, а не связкой
 * Tailwind-градиентов: та тянет за собой служебные --tw-gradient-* и ломается
 * ровно так же тихо, если сборка их не содержит. */
.slot-bar-fill {
    height: 100%;
    border-radius: 9999px;
    background-image: linear-gradient(
        to right, var(--color-green-400), var(--color-green-600));
}