/**
 * ═══════════════════════════════════════════════════════════════════════
 * 🎨 ЦЕНТРАЛИЗОВАННЫЕ СТИЛИ САЙТА
 * ═══════════════════════════════════════════════════════════════════════
 *
 * ИНСТРУКЦИЯ ПО ИСПОЛЬЗОВАНИЮ:
 * ----------------------------
 * 1. Откройте этот файл
 * 2. Найдите нужную переменную (например: --color-primary)
 * 3. Поменяйте значение (например: #10b981 → #3b82f6)
 * 4. Сохраните файл
 * 5. Обновите страницу в браузере (Ctrl+F5)
 * 6. ВСЁ! Цвет изменился на ВСЕХ страницах сайта
 *
 * ═══════════════════════════════════════════════════════════════════════
 */

:root {
    /**
     * ───────────────────────────────────────────────────────────────────
     * 🔵 ОСНОВНОЙ ЦВЕТ САЙТА (PRIMARY)
     * ───────────────────────────────────────────────────────────────────
     */
    --color-primary:        #10b981;
    --color-primary-dark:   #059669;
    --color-primary-light:  #34d399;
    --color-primary-50:     #ecfdf5;
    --color-primary-100:    #d1fae5;
    --color-primary-200:    #a7f3d0;
    --color-primary-300:    #6ee7b7;

    /**
     * ───────────────────────────────────────────────────────────────────
     * 🔴 АКЦЕНТНЫЙ ЦВЕТ (ACCENT) - ОШИБКИ, УДАЛЕНИЕ
     * ───────────────────────────────────────────────────────────────────
     */
    --color-accent:         #ef4444;
    --color-accent-dark:    #dc2626;
    --color-accent-light:   #f87171;
    --color-accent-50:      #fef2f2;
    --color-accent-100:     #fee2e2;
    --color-accent-200:     #fecaca;
    --color-accent-300:     #fca5a5;

    /**
     * ───────────────────────────────────────────────────────────────────
     * 🟢 ЦВЕТ УСПЕХА (SUCCESS)
     * ───────────────────────────────────────────────────────────────────
     */
    --color-success:        #10b981;
    --color-success-dark:   #059669;
    --color-success-light:  #34d399;
    --color-success-50:     #ecfdf5;
    --color-success-100:    #d1fae5;
    --color-success-200:    #a7f3d0;
    --color-success-300:    #6ee7b7;

    /**
     * ───────────────────────────────────────────────────────────────────
     * 🟡 ЦВЕТ ПРЕДУПРЕЖДЕНИЯ (WARNING)
     * ───────────────────────────────────────────────────────────────────
     */
    --color-warning:        #f59e0b;
    --color-warning-dark:   #d97706;
    --color-warning-light:  #fbbf24;
    --color-warning-50:     #fffbeb;
    --color-warning-100:    #fef3c7;
    --color-warning-200:    #fde68a;
    --color-warning-300:    #fcd34d;

    /**
     * ───────────────────────────────────────────────────────────────────
     * 🟣 ЦВЕТ PURPLE (ОТПУСКА)
     * ───────────────────────────────────────────────────────────────────
     */
    --color-purple:         #8b5cf6;
    --color-purple-dark:    #7c3aed;
    --color-purple-light:   #a78bfa;
    --color-purple-50:      #f5f3ff;
    --color-purple-100:     #ede9fe;
    --color-purple-200:     #ddd6fe;
    --color-purple-300:     #c4b5fd;

    /**
     * ───────────────────────────────────────────────────────────────────
     * ⚫ ВТОРОСТЕПЕННЫЙ ЦВЕТ (SECONDARY)
     * ───────────────────────────────────────────────────────────────────
     */
    --color-secondary:      #64748b;
    --color-secondary-dark: #475569;
    --color-secondary-light:#94a3b8;
    --color-secondary-50:   #f8fafc;
    --color-secondary-100:  #e2e8f0;
    --color-secondary-200:  #cbd5e1;
    --color-secondary-300:  #94a3b8;

    /**
     * ───────────────────────────────────────────────────────────────────
     * 📝 ЦВЕТА ТЕКСТА
     * ───────────────────────────────────────────────────────────────────
     */
    --text-primary:         #0f172a;
    --text-secondary:       #64748b;
    --text-muted:           #94a3b8;
    --text-inverse:         #ffffff;

    /**
     * ───────────────────────────────────────────────────────────────────
     * 🎨 ЦВЕТА ФОНА
     * ───────────────────────────────────────────────────────────────────
     */
    --bg-page:              #f1f5f9;
    --bg-card:              #ffffff;
    --bg-card-hover:        #f8fafc;
    --bg-secondary:         #f8fafc;

    /**
     * ───────────────────────────────────────────────────────────────────
     * 🔤 ШРИФТЫ
     * ───────────────────────────────────────────────────────────────────
     */
    --font-family-base:     'Inter', system-ui, -apple-system, sans-serif;
    --font-family-heading:  'Inter', system-ui, -apple-system, sans-serif;

    /**
     * ───────────────────────────────────────────────────────────────────
     * 📏 РАЗМЕРЫ ШРИФТОВ (МОЖНО МЕНЯТЬ ЗДЕСЬ!)
     * ───────────────────────────────────────────────────────────────────
     */
    --font-size-xs:         0.75rem;
    --font-size-sm:         0.875rem;
    --font-size-base:       1rem;
    --font-size-lg:         1.125rem;
    --font-size-xl:         1.25rem;
    --font-size-2xl:        1.5rem;
    --font-size-3xl:        1.875rem;
    --font-size-4xl:        2.25rem;

    /**
     * ───────────────────────────────────────────────────────────────────
     * 📐 ОТСТУПЫ
     * ───────────────────────────────────────────────────────────────────
     */
    --spacing-xs:           0.25rem;
    --spacing-sm:           0.5rem;
    --spacing-md:           1rem;
    --spacing-lg:           1.5rem;
    --spacing-xl:           2rem;
    --spacing-2xl:          3rem;

    /**
     * ───────────────────────────────────────────────────────────────────
     * 🔵 РАДИУСЫ (СКРУГЛЕНИЕ УГЛОВ)
     * ───────────────────────────────────────────────────────────────────
     */
    --radius-sm:            0.5rem;
    --radius-md:            0.75rem;
    --radius-lg:            1rem;
    --radius-xl:            1.25rem;
    --radius-2xl:           1.5rem;
    --radius-full:          9999px;

    /**
     * ───────────────────────────────────────────────────────────────────
     * 🌑 ТЕНИ
     * ───────────────────────────────────────────────────────────────────
     */
    --shadow-sm:            0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md:            0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg:            0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl:            0 20px 25px rgba(0, 0, 0, 0.1);

    /**
     * ───────────────────────────────────────────────────────────────────
     * 🎯 ТРАНЗИЦИИ (АНИМАЦИИ)
     * ───────────────────────────────────────────────────────────────────
     */
    --transition-base:      200ms ease;
    --transition-slow:      300ms ease;
}

/**
 * ═══════════════════════════════════════════════════════════════════════
 * 🌙 ТЁМНАЯ ТЕМА (fallback)
 * Если инлайн-переопределения токенов (через design settings) по какой-то
 * причине не отрисовались на исключениях, эти базовые значения всё равно
 * включат читаемый dark-режим.
 *
 * Пользовательские настройки дизайна (если они есть) обычно приходят
 * инлайн-стилями позже и переопределяют эти переменные.
 * ═══════════════════════════════════════════════════════════════════════
 */
html[data-theme="dark"] {
    --color-primary:        #34d399;
    --color-primary-dark:   #10b981;
    --color-accent:         #f87171;
    --color-success:        #34d399;

    --bg-page:              #0f172a;
    --bg-card:              #1e293b;
    --bg-card-hover:        #111f32;
    --bg-secondary:         #0b1220;

    --text-primary:         #f1f5f9;
    --text-secondary:       #94a3b8;
    --text-muted:           #64748b;
    --text-inverse:         #0f172a;

    --color-secondary-100:  #334155;

    color-scheme: dark;
}

/**
 * ═══════════════════════════════════════════════════════════════════════
 * 🔵 КНОПКИ
 * ═══════════════════════════════════════════════════════════════════════
 */

.btn-primary {
    background-color: var(--color-primary) !important;
    color: var(--text-inverse) !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: var(--radius-xl) !important;
    font-weight: 700 !important;
    font-size: var(--font-size-sm) !important;
    transition: var(--transition-base) !important;
    border: none !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    text-decoration: none !important;
    justify-content: center !important;
}

.btn-primary:hover {
    background-color: var(--color-primary-dark) !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--shadow-md) !important;
}

.btn-secondary {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: var(--radius-xl) !important;
    font-weight: 700 !important;
    font-size: var(--font-size-sm) !important;
    transition: var(--transition-base) !important;
    border: 2px solid var(--color-secondary-light) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    text-decoration: none !important;
    justify-content: center !important;
}

.btn-secondary:hover {
    background-color: var(--bg-page) !important;
    border-color: var(--color-secondary) !important;
}

.btn-accent {
    background-color: var(--color-accent) !important;
    color: var(--text-inverse) !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: var(--radius-xl) !important;
    font-weight: 700 !important;
    font-size: var(--font-size-sm) !important;
    transition: var(--transition-base) !important;
    border: none !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    text-decoration: none !important;
    justify-content: center !important;
}

.btn-accent:hover {
    background-color: var(--color-accent-dark) !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--shadow-md) !important;
}

.btn-success {
    background-color: var(--color-success) !important;
    color: var(--text-inverse) !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: var(--radius-xl) !important;
    font-weight: 700 !important;
    font-size: var(--font-size-sm) !important;
    transition: var(--transition-base) !important;
    border: none !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    text-decoration: none !important;
    justify-content: center !important;
}

.btn-success:hover {
    background-color: var(--color-success-dark) !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--shadow-md) !important;
}

/**
 * ═══════════════════════════════════════════════════════════════════════
 * 📦 КАРТОЧКИ
 * ═══════════════════════════════════════════════════════════════════════
 */

.card {
    background: var(--bg-card) !important;
    border-radius: var(--radius-2xl) !important;
    box-shadow: var(--shadow-lg) !important;
    border: 1px solid var(--color-secondary-100) !important;
    overflow: hidden !important;
}

.card:hover {
    box-shadow: var(--shadow-xl) !important;
}

/**
 * ═══════════════════════════════════════════════════════════════════════
 * 🏷️ БЕЙДЖИ (СТАТУСЫ)
 * ═══════════════════════════════════════════════════════════════════════
 */

.badge {
    display: inline-block !important;
    padding: 0.25rem 0.75rem !important;
    border-radius: var(--radius-full) !important;
    font-size: var(--font-size-xs) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.badge-success {
    background-color: var(--color-success-100) !important;
    color: var(--color-success-dark) !important;
}

.badge-danger {
    background-color: var(--color-accent-100) !important;
    color: var(--color-accent-dark) !important;
}

.badge-warning {
    background-color: var(--color-warning-100) !important;
    color: var(--color-warning-dark) !important;
}

.badge-secondary {
    background-color: var(--color-secondary-100) !important;
    color: var(--color-secondary-dark) !important;
}

/**
 * ═══════════════════════════════════════════════════════════════════════
 * 📝 БАЗОВЫЕ СТИЛИ
 * ═══════════════════════════════════════════════════════════════════════
 */

body {
    font-family: var(--font-family-base);
    background: var(--bg-page);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-heading);
    color: var(--text-primary);
}

input, select, textarea {
    font-family: var(--font-family-base) !important;
    font-size: var(--font-size-sm) !important;
}

table {
    font-family: var(--font-family-base) !important;
    font-size: var(--font-size-sm) !important;
}

/**
 * ═══════════════════════════════════════════════════════════════════════
 * 📐 ШИРОКИЙ КОНТЕНТ (сотрудники, доступ, дашборд и т.д.)
 * Фон страницы — у body (var(--bg-page)); тёмная тема — html[data-theme="dark"].
 * ═══════════════════════════════════════════════════════════════════════
 */

.main-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
}

.content-container {
    box-sizing: border-box;
    width: 100%;
    max-width: 1440px;
    padding: 0 40px 40px;
}

@media (max-width: 1024px) {
    .content-container {
        padding: 0 12px 30px;
    }
}

/**
 * ═══════════════════════════════════════════════════════════════════════
 * 🎨 УТИЛИТЫ ЦВЕТОВ
 * ═══════════════════════════════════════════════════════════════════════
 */

.bg-primary { background-color: var(--color-primary) !important; }
.bg-primary-50 { background-color: var(--color-primary-50) !important; }
.bg-primary-100 { background-color: var(--color-primary-100) !important; }
.bg-primary-200 { background-color: var(--color-primary-200) !important; }

.bg-accent { background-color: var(--color-accent) !important; }
.bg-accent-50 { background-color: var(--color-accent-50) !important; }
.bg-accent-100 { background-color: var(--color-accent-100) !important; }
.bg-accent-200 { background-color: var(--color-accent-200) !important; }

.bg-success { background-color: var(--color-success) !important; }
.bg-success-50 { background-color: var(--color-success-50) !important; }
.bg-success-100 { background-color: var(--color-success-100) !important; }
.bg-success-200 { background-color: var(--color-success-200) !important; }

.bg-warning { background-color: var(--color-warning) !important; }
.bg-warning-50 { background-color: var(--color-warning-50) !important; }
.bg-warning-100 { background-color: var(--color-warning-100) !important; }
.bg-warning-200 { background-color: var(--color-warning-200) !important; }

.bg-purple { background-color: var(--color-purple) !important; }
.bg-purple-50 { background-color: var(--color-purple-50) !important; }
.bg-purple-100 { background-color: var(--color-purple-100) !important; }
.bg-purple-200 { background-color: var(--color-purple-200) !important; }

.text-primary { color: var(--color-primary) !important; }
.text-primary-dark { color: var(--color-primary-dark) !important; }

.text-accent { color: var(--color-accent) !important; }
.text-accent-dark { color: var(--color-accent-dark) !important; }

.text-success { color: var(--color-success) !important; }
.text-success-dark { color: var(--color-success-dark) !important; }

.text-warning { color: var(--color-warning) !important; }
.text-warning-dark { color: var(--color-warning-dark) !important; }

.border-primary-200 { border-color: var(--color-primary-200) !important; }
.border-success-200 { border-color: var(--color-success-200) !important; }
.border-accent-200 { border-color: var(--color-accent-200) !important; }

.focus\:ring-primary:focus { --tw-ring-color: var(--color-primary) !important; }
.focus\:border-primary:focus { border-color: var(--color-primary) !important; }

/**
 * ═══════════════════════════════════════════════════════════════════════
 * 🎯 Совместимость с Tailwind CDN разметкой
 * (чтобы токены “цвета кнопок” работали на старых страницах)
 * ═══════════════════════════════════════════════════════════════════════
 */
.bg-emerald-600 { background-color: var(--color-primary) !important; }
.bg-emerald-500 { background-color: var(--color-primary) !important; }
.bg-emerald-400 { background-color: var(--color-primary-dark) !important; }
.bg-emerald-700 { background-color: var(--color-primary-dark) !important; }
.bg-emerald-800 { background-color: var(--color-primary-dark) !important; }
.hover\:bg-emerald-600:hover { background-color: var(--color-primary-dark) !important; }
.hover\:bg-emerald-700:hover { background-color: var(--color-primary-dark) !important; }
.hover\:bg-emerald-800:hover { background-color: var(--color-primary-dark) !important; }

.bg-rose-600 { background-color: var(--color-accent) !important; }
.bg-rose-700 { background-color: var(--color-accent-dark) !important; }
.bg-rose-800 { background-color: var(--color-accent-dark) !important; }
.bg-rose-500 { background-color: var(--color-accent) !important; }
.hover\:bg-rose-700:hover { background-color: var(--color-accent-dark) !important; }
.hover\:bg-rose-800:hover { background-color: var(--color-accent-dark) !important; }
.hover\:bg-rose-600:hover { background-color: var(--color-accent-dark) !important; }

/**
 * ═══════════════════════════════════════════════════════════════════════
 * 👤 АВАТАРЫ
 * ═══════════════════════════════════════════════════════════════════════
 */

.avatar-bg {
    background: linear-gradient(to bottom right, var(--color-primary-100), var(--color-primary-200)) !important;
}

.avatar-text {
    color: var(--color-primary) !important;
}

.avatar-bg-secondary {
    background: linear-gradient(to bottom right, var(--color-secondary-100), var(--color-secondary-200)) !important;
}

.avatar-text-secondary {
    color: var(--color-secondary) !important;
}

/**
 * ═══════════════════════════════════════════════════════════════════════
 * 🚀 ПЕРЕОПРЕДЕЛЕНИЕ TAILWIND
 * ═══════════════════════════════════════════════════════════════════════
 */

.text-xs { font-size: var(--font-size-xs) !important; }
.text-sm { font-size: var(--font-size-sm) !important; }
.text-base { font-size: var(--font-size-base) !important; }
.text-lg { font-size: var(--font-size-lg) !important; }
.text-xl { font-size: var(--font-size-xl) !important; }
.text-2xl { font-size: var(--font-size-2xl) !important; }
.text-3xl { font-size: var(--font-size-3xl) !important; }
.text-4xl { font-size: var(--font-size-4xl) !important; }

h1 { font-size: var(--font-size-3xl) !important; }
h2 { font-size: var(--font-size-2xl) !important; }
h3 { font-size: var(--font-size-xl) !important; }
h4 { font-size: var(--font-size-lg) !important; }
h5, h6 { font-size: var(--font-size-base) !important; }

table th, table td { font-size: var(--font-size-sm) !important; }
table th { font-size: var(--font-size-xs) !important; }

input, select, textarea { font-size: var(--font-size-sm) !important; }
label { font-size: var(--font-size-sm) !important; }

button, .btn { font-size: var(--font-size-sm) !important; }

/* Чипы фильтра в заметках/фото-отчётах: теги — <button>, категории — <a>; без этого глобальное правило button раздувает только теги */
button.notes-app__chip {
    font-size: 0.68rem !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
}

/* Сайдбар заметок/фото-отчётов: вертикальный список тегов, не глобальный размер select */
select.notes-app__rail-select {
    font-size: 0.8rem !important;
    line-height: 1.45 !important;
}

/* Подписи рейла: не подменять глобальным label { font-size: sm !important } */
label.notes-app__rail-label {
    font-size: 0.6rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
}

.heading-xl { font-size: var(--font-size-2xl) !important; }
@media (min-width: 768px) {
    .heading-xl { font-size: var(--font-size-3xl) !important; }
}

.text-muted { font-size: var(--font-size-sm) !important; color: var(--text-secondary) !important; }
.label-text { font-size: var(--font-size-sm) !important; }
.input-text { font-size: var(--font-size-sm) !important; }
.error-text { font-size: var(--font-size-xs) !important; }
.text-xs-subtle { font-size: var(--font-size-xs) !important; }

.icon-xs { width: 0.75rem !important; height: 0.75rem !important; }
.icon-sm { width: 1rem !important; height: 1rem !important; }
.icon-md { width: 1.25rem !important; height: 1.25rem !important; }
.icon-lg { width: 2rem !important; height: 2rem !important; }

/**
 * ═══════════════════════════════════════════════════════════════════════
 * 📸 LIGHTBOX (Просмотр фото на весь экран)
 * ═══════════════════════════════════════════════════════════════════════
 */

.lightbox {
    position: fixed !important;
    inset: 0 !important;
    background-color: rgba(0, 0, 0, 0.95) !important;
    z-index: 9999 !important;
    display: none !important;
    backdrop-filter: blur(4px) !important;
}

.lightbox.active {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.lightbox-content {
    position: relative !important;
    max-width: 90% !important;
    max-height: 90vh !important;
}

.lightbox-img {
    max-width: 100% !important;
    max-height: 85vh !important;
    object-fit: contain !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5) !important;
}

/* Кнопки lightbox - ИСПРАВЛЕНО */
.lightbox-btn {
    position: absolute !important;
    background: transparent !important;
    border: none !important;
    color: var(--text-inverse) !important;
    cursor: pointer !important;
    transition: var(--transition-base) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 3rem !important;
    line-height: 1 !important;
    opacity: 0.8 !important;
}

.lightbox-btn:hover {
    color: var(--text-inverse) !important;
    opacity: 1 !important;
    transform: scale(1.1) !important;
}

.lightbox-close {
    top: -50px !important;
    right: 0 !important;
}

.lightbox-prev {
    left: -80px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 4rem !important;
}

.lightbox-next {
    right: -80px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 4rem !important;
}

.lightbox-caption {
    color: var(--text-inverse) !important;
    text-align: center !important;
    margin-top: var(--spacing-md) !important;
    font-size: var(--font-size-xl) !important;
    font-weight: 700 !important;
}

.lightbox-counter {
    color: var(--text-secondary) !important;
    text-align: center !important;
    margin-top: var(--spacing-xs) !important;
    font-size: var(--font-size-sm) !important;
}

.lightbox-delete {
    position: absolute !important;
    bottom: -50px !important;
    right: 0 !important;
    color: var(--color-accent) !important;
    font-weight: 700 !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: var(--spacing-sm) !important;
    transition: var(--transition-base) !important;
    font-size: var(--font-size-sm) !important;
}

.lightbox-delete:hover {
    color: var(--color-accent-dark) !important;
}

/* Мобильная адаптация */
@media (max-width: 1024px) {
    .lightbox-prev {
        left: 10px !important;
        font-size: 2.5rem !important;
    }
    .lightbox-next {
        right: 10px !important;
        font-size: 2.5rem !important;
    }
    .lightbox-close {
        top: -40px !important;
        font-size: 2.5rem !important;
    }
    .lightbox-delete {
        bottom: -40px !important;
    }
}

/**
 * Фото-отчёты: превью в ленте и сетка на странице записи.
 * aspect-ratio + object-fit в CSS — корректное отображение без зависимости от Tailwind на клиенте.
 */
.photo-viewer-gallery {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Лента: равные миниатюры; auto-fill — столько колонок, сколько влезает по ширине. */
.photo-viewer-gallery--feed {
    display: grid;
    margin-top: 0.75rem;
    gap: 0.5rem;
    grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
}

@media (min-width: 640px) {
    .photo-viewer-gallery--feed {
        grid-template-columns: repeat(auto-fill, minmax(6.75rem, 1fr));
    }
}

@media (min-width: 1024px) {
    .photo-viewer-gallery--feed {
        grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
    }
}

.photo-viewer-gallery--detail {
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 640px) {
    .photo-viewer-gallery--detail {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .photo-viewer-gallery--detail {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.photo-viewer-gallery .photo-viewer-gallery__thumb {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 0.75rem;
}

.photo-viewer-gallery--feed .photo-viewer-gallery__thumb {
    border-radius: 0.5rem;
}

.photo-viewer-gallery--detail .photo-viewer-gallery__thumb {
    aspect-ratio: 4 / 3;
    border-radius: 0.75rem 0.75rem 0 0;
}

.photo-viewer-gallery .photo-viewer-gallery__thumb img.photo-viewer-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.photo-viewer-gallery .group:hover .photo-viewer-gallery__thumb img.photo-viewer-slide {
    transform: scale(1.05);
}

/**
 * ═══════════════════════════════════════════════════════════════════════
 * 🔐 СТРАНИЦЫ БЕЗ НАВИГАЦИИ (вход, смена пароля, восстановление)
 * Используют те же CSS-переменные, что и основное приложение.
 * ═══════════════════════════════════════════════════════════════════════
 */

.auth-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: var(--font-family-base);
    color: var(--text-primary);
    background: linear-gradient(160deg, var(--bg-page) 0%, #ffffff 45%, var(--bg-secondary) 100%);
}

.auth-shell__inner {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl) var(--spacing-md);
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.auth-card--wide {
    max-width: 36rem !important;
    width: min(100%, 36rem) !important;
}

.auth-card {
    /* min() + flex: надёжнее Safari, чем width:100% + max-width у flex-ребёнка */
    box-sizing: border-box;
    width: min(100%, 28rem);
    max-width: 28rem;
    flex: 0 1 auto;
    align-self: center;
    min-width: 0;
    margin-left: auto;
    margin-right: auto;
    background: var(--bg-card);
    border: 1px solid var(--color-secondary-100);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-xl);
    padding: var(--spacing-xl);
}

/* Форма входа: не зависит от Tailwind-утилит (на auth-minimal CDN может не подхватить классы) */
.auth-card .auth-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.auth-card .auth-form__remember {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.auth-card .auth-form__remember a {
    flex-shrink: 0;
}

.auth-card .btn-primary[type="submit"],
.auth-card .auth-form .btn-primary {
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
}

.auth-card__icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--radius-xl);
    background: linear-gradient(145deg, var(--color-primary-dark), var(--color-primary));
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--spacing-md);
    color: var(--text-inverse);
    box-shadow: var(--shadow-md);
}

.auth-card__icon--warning {
    background: linear-gradient(145deg, var(--color-warning-dark), var(--color-warning)) !important;
}

.auth-title {
    font-size: var(--font-size-2xl);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    text-align: center;
}

.auth-subtitle {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    text-align: center;
    margin-top: var(--spacing-sm);
}

.auth-label {
    display: block;
    font-size: var(--font-size-xs);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: var(--spacing-xs);
}

.auth-input {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--color-secondary-200);
    border-radius: var(--radius-lg);
    padding: 0.625rem 1rem;
    font-size: var(--font-size-sm);
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
    background: var(--bg-card);
    color: var(--text-primary);
}

.auth-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-100);
}

.auth-alert {
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-sm);
    font-weight: 700;
}

.auth-alert--error {
    background: var(--color-accent-50);
    border: 1px solid var(--color-accent-100);
    color: var(--color-accent-dark);
}

/**
 * ═══════════════════════════════════════════════════════════════════════
 * 📄 УТИЛИТЫ СТРАНИЦ (заголовки, фильтры, таблицы на всю ширину)
 * ═══════════════════════════════════════════════════════════════════════
 */

.page-heading {
    margin-bottom: var(--spacing-lg);
}

.page-heading__title {
    font-size: var(--font-size-2xl);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

.page-heading__meta {
    margin-top: var(--spacing-xs);
    font-size: var(--font-size-xs);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-muted);
}

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--spacing-md);
}

.filter-bar__field {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.filter-bar__label {
    font-size: 0.5625rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

.table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-scroll table {
    min-width: 720px;
}

/**
 * ═══════════════════════════════════════════════════════════════════════
 * 🧭 НАВИГАЦИЯ (общий фон с карточкой страницы — для светлой и тёмной темы)
 * ═══════════════════════════════════════════════════════════════════════
 */

.app-nav {
    background-color: var(--bg-card);
    border-bottom: 1px solid var(--color-secondary-100);
}

.app-nav__top {
    border-bottom: 1px solid var(--color-secondary-100);
}

.app-nav__links {
    background-color: var(--bg-card);
}

.app-nav__mobile {
    background-color: var(--bg-card);
}

/**
 * ═══════════════════════════════════════════════════════════════════════
 * 🌙 ТЁМНАЯ ТЕМА: согласование с классами Tailwind CDN на страницах
 * (переменные из design-tokens / админки дизайна)
 * ═══════════════════════════════════════════════════════════════════════
 */

html[data-theme="dark"] {
    color-scheme: dark;
}

html[data-theme="dark"] .nav-link.active {
    color: #93c5fd !important;
}

@media (min-width: 1024px) {
    html[data-theme="dark"] .nav-main-links .nav-link.active::after {
        background-color: #60a5fa !important;
    }
}

/* Частые классы текста */
html[data-theme="dark"] .text-slate-900,
html[data-theme="dark"] .text-slate-950,
html[data-theme="dark"] .text-slate-800 {
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .text-slate-700,
html[data-theme="dark"] .text-slate-600 {
    color: var(--text-secondary) !important;
}

html[data-theme="dark"] .text-slate-500 {
    color: var(--text-muted) !important;
}

html[data-theme="dark"] .text-slate-400 {
    color: var(--text-muted) !important;
}

/* Фоны */
html[data-theme="dark"] .bg-white {
    background-color: var(--bg-card) !important;
}

html[data-theme="dark"] .bg-slate-50 {
    background-color: var(--bg-card) !important;
}

html[data-theme="dark"] .bg-slate-100 {
    background-color: var(--color-secondary-100) !important;
}

html[data-theme="dark"] .bg-slate-50\/60 {
    background-color: var(--color-secondary-100) !important;
}

html[data-theme="dark"] .bg-slate-200 {
    background-color: var(--color-secondary-100) !important;
}

html[data-theme="dark"] .bg-slate-300 {
    background-color: color-mix(in srgb, var(--color-secondary-100) 85%, var(--bg-card)) !important;
}

html[data-theme="dark"] .hover\:bg-slate-50:hover {
    background-color: var(--color-secondary-100) !important;
}

html[data-theme="dark"] .hover\:bg-slate-100:hover {
    background-color: var(--color-secondary-100) !important;
}

html[data-theme="dark"] .hover\:bg-slate-200:hover {
    background-color: var(--color-secondary-100) !important;
}

/* На всякий случай: классы со слэшем (Tailwind opacity) */
html[data-theme="dark"] [class*="bg-slate-50/60"] {
    background-color: var(--color-secondary-100) !important;
}

html[data-theme="dark"] [class*="bg-slate-50/"] {
    background-color: var(--color-secondary-100) !important;
}

/* Прозрачные фоны/границы (Tailwind opacity слэша) */
html[data-theme="dark"] .bg-white\/20,
html[data-theme="dark"] [class*="bg-white/20"] {
    background-color: rgba(255, 255, 255, 0.06) !important;
}

html[data-theme="dark"] .bg-white\/30,
html[data-theme="dark"] [class*="bg-white/30"] {
    background-color: rgba(255, 255, 255, 0.10) !important;
}

html[data-theme="dark"] .bg-white\/95,
html[data-theme="dark"] [class*="bg-white/95"] {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .border-white\/20,
html[data-theme="dark"] [class*="border-white/20"] {
    border-color: rgba(255, 255, 255, 0.10) !important;
}

html[data-theme="dark"] .border-white\/30,
html[data-theme="dark"] [class*="border-white/30"] {
    border-color: rgba(255, 255, 255, 0.14) !important;
}

/* Границы и разделители */
html[data-theme="dark"] .border-slate-100,
html[data-theme="dark"] .border-slate-200,
html[data-theme="dark"] .border-slate-300 {
    border-color: var(--color-secondary-100) !important;
}

html[data-theme="dark"] .divide-slate-100 > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--color-secondary-100) !important;
}

/* Подсветка пунктов меню / ссылок как в светлой теме */
html[data-theme="dark"] .bg-blue-50 {
    background-color: rgba(59, 130, 246, 0.18) !important;
}

html[data-theme="dark"] .text-blue-600 {
    color: #93c5fd !important;
}

/* Фоны статусных блоков (Tailwind bg-*-50/bg-*-100) */
html[data-theme="dark"] .bg-emerald-50,
html[data-theme="dark"] .bg-emerald-100 {
    background-color: color-mix(in srgb, var(--color-success) 16%, var(--bg-card)) !important;
}

html[data-theme="dark"] .hover\:bg-emerald-50:hover,
html[data-theme="dark"] .hover\:bg-emerald-100:hover {
    background-color: color-mix(in srgb, var(--color-success) 16%, var(--bg-card)) !important;
}

html[data-theme="dark"] .bg-blue-50,
html[data-theme="dark"] .bg-blue-100,
html[data-theme="dark"] .bg-indigo-50,
html[data-theme="dark"] .bg-indigo-100 {
    background-color: color-mix(in srgb, #3b82f6 14%, var(--bg-card)) !important;
}

html[data-theme="dark"] .hover\:bg-blue-50:hover,
html[data-theme="dark"] .hover\:bg-blue-100:hover,
html[data-theme="dark"] .hover\:bg-indigo-50:hover,
html[data-theme="dark"] .hover\:bg-indigo-100:hover {
    background-color: color-mix(in srgb, #3b82f6 14%, var(--bg-card)) !important;
}

html[data-theme="dark"] .bg-amber-50,
html[data-theme="dark"] .bg-amber-100 {
    background-color: color-mix(in srgb, #f59e0b 14%, var(--bg-card)) !important;
}

html[data-theme="dark"] .hover\:bg-amber-50:hover,
html[data-theme="dark"] .hover\:bg-amber-100:hover {
    background-color: color-mix(in srgb, #f59e0b 14%, var(--bg-card)) !important;
}

html[data-theme="dark"] .bg-rose-50,
html[data-theme="dark"] .bg-rose-100 {
    background-color: color-mix(in srgb, var(--color-accent) 14%, var(--bg-card)) !important;
}

html[data-theme="dark"] .hover\:bg-rose-50:hover,
html[data-theme="dark"] .hover\:bg-rose-100:hover {
    background-color: color-mix(in srgb, var(--color-accent) 14%, var(--bg-card)) !important;
}

html[data-theme="dark"] .border-emerald-200,
html[data-theme="dark"] .border-emerald-100,
html[data-theme="dark"] .border-blue-200,
html[data-theme="dark"] .border-blue-100,
html[data-theme="dark"] .border-indigo-200,
html[data-theme="dark"] .border-indigo-100,
html[data-theme="dark"] .border-amber-200,
html[data-theme="dark"] .border-amber-100,
html[data-theme="dark"] .border-rose-200,
html[data-theme="dark"] .border-rose-100 {
    border-color: var(--color-secondary-100) !important;
}

/* Поля ввода и select */
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="url"],
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="datetime-local"],
html[data-theme="dark"] input[type="time"],
html[data-theme="dark"] input[type="month"],
html[data-theme="dark"] input[type="week"],
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
    background-color: var(--bg-card);
    color: var(--text-primary);
    border-color: var(--color-secondary-100);
}

/* travel-timesheets: селект статуса должен быть прозрачным,
 * чтобы был виден цвет фона td (set via inline style). */
html[data-theme="dark"] select.status-select {
    background-color: transparent !important;
    background: transparent !important;
}

/* График вахт: фон ячейки (вахта / заполненный день) задаётся на td — input не должен перекрывать карточным фоном */
html[data-theme="dark"] table.work-schedule-sheet input[type="text"] {
    background-color: transparent !important;
    background: transparent !important;
}

/* Массовое заполнение графика вахт: короткая подсветка ячейки */
@keyframes ws-bulk-cell-flash {
    0% {
        box-shadow: inset 0 0 0 0 transparent;
        filter: brightness(1);
    }
    40% {
        box-shadow: inset 0 0 0 2px rgba(250, 204, 21, 0.75);
        filter: brightness(1.06);
    }
    100% {
        box-shadow: inset 0 0 0 0 transparent;
        filter: brightness(1);
    }
}

table.work-schedule-sheet td.ws-bulk-cell-flash {
    animation: ws-bulk-cell-flash 0.55s ease-out;
    position: relative;
    z-index: 2;
}

/* График вахт: разделение блоков месяцев (2 строки = вахта 1 и 2) */
table.work-schedule-sheet tbody tr.ws-month-head > td {
    border-top-width: 3px;
    border-top-color: rgb(71 85 105); /* slate-600 — заметнее на белом фоне */
    /* тонкая «подсветка» над линией, чтобы полоса читалась объёмнее */
    box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.55);
}

html[data-theme="dark"] table.work-schedule-sheet tbody tr.ws-month-head > td {
    border-top-width: 3px;
    border-top-color: rgb(148 163 184); /* slate-400 — светлее линия на тёмном */
    box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.08);
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: var(--text-muted);
}

/* primary-50/100 в тёмной теме (иначе «кислотная» полоса на тёмном фоне) */
html[data-theme="dark"] .bg-primary-50 {
    background-color: color-mix(in srgb, var(--color-primary) 12%, var(--bg-card)) !important;
}

html[data-theme="dark"] .bg-primary-100 {
    background-color: color-mix(in srgb, var(--color-primary) 16%, var(--bg-card)) !important;
}

html[data-theme="dark"] .border-primary-100,
html[data-theme="dark"] .border-primary-200 {
    border-color: color-mix(in srgb, var(--color-primary) 28%, var(--color-secondary-100)) !important;
}

/**
 * ═══════════════════════════════════════════════════════════════════════
 * 👥 Сотрудники: список и архив (единый спокойный UI, light + dark)
 * ═══════════════════════════════════════════════════════════════════════
 */

.employees-page .employees-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.employees-page a.employees-tab {
    padding: 0.625rem 1.25rem;
    border-radius: var(--radius-xl);
    font-weight: 700;
    font-size: var(--font-size-sm);
    transition: var(--transition-base);
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--color-secondary-100);
    background: var(--bg-card);
    color: var(--text-secondary);
}

.employees-page a.employees-tab:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
}

.employees-page a.employees-tab--active {
    background: color-mix(in srgb, var(--color-primary) 14%, var(--bg-card));
    color: var(--color-primary-dark);
    border-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-secondary-100));
}

html[data-theme="dark"] .employees-page a.employees-tab--active {
    background: color-mix(in srgb, var(--color-primary) 10%, var(--bg-card));
    color: var(--color-primary);
    border-color: var(--color-secondary-100);
}

/* Шапка таблицы */
.employees-page .employees-table-head {
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--color-secondary-100);
}

html[data-theme="dark"] .employees-page .employees-table-head {
    background: color-mix(in srgb, var(--bg-page) 35%, var(--bg-card));
}

/* Строки: спокойный hover */
.employees-page .employees-table tbody tr.employees-table-row {
    transition: background var(--transition-base);
}

.employees-page .employees-table tbody tr.employees-table-row:hover {
    background: var(--bg-card-hover);
}

html[data-theme="dark"] .employees-page .employees-table tbody tr.employees-table-row:hover {
    background: color-mix(in srgb, var(--color-primary) 6%, var(--bg-card));
}

/* Подвал «Итого» */
.employees-page tfoot.employees-table-foot {
    background: var(--color-primary-50);
    border-top: 2px solid var(--color-primary-200);
}

html[data-theme="dark"] .employees-page tfoot.employees-table-foot {
    background: color-mix(in srgb, var(--color-primary) 10%, var(--bg-card));
    border-top-color: color-mix(in srgb, var(--color-primary) 22%, var(--color-secondary-100));
}

.employees-page .employees-table-foot__label {
    color: var(--text-secondary);
    font-weight: 800;
}

.employees-page .employees-table-foot__value {
    font-weight: 800;
    font-size: var(--font-size-lg);
    font-variant-numeric: tabular-nums;
    color: var(--color-primary-dark);
}

html[data-theme="dark"] .employees-page .employees-table-foot__value {
    color: var(--text-primary);
}

/* Полоска пагинации */
.employees-page .employees-pagination-bar {
    border-top: 1px solid var(--color-secondary-100);
}

/* Аватар-инициал в таблице: без яркого primary-градиента */
.employees-page .employees-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: var(--font-size-sm);
    font-weight: 800;
    line-height: 1;
    background: var(--color-secondary-100);
    color: var(--text-secondary);
    border: 1px solid var(--color-secondary-200);
}

html[data-theme="dark"] .employees-page .employees-avatar {
    background: color-mix(in srgb, var(--bg-page) 40%, var(--bg-card));
    color: var(--text-muted);
    border-color: var(--color-secondary-100);
}

/* Кнопки действий в строке: разные цвета, но через токены (light + dark) */
.employees-page a.employees-icon-btn,
.employees-page button.employees-icon-btn {
    box-sizing: border-box;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    margin: 0;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
    text-decoration: none !important;
    font: inherit;
}

.employees-page a.employees-icon-btn:focus-visible,
.employees-page button.employees-icon-btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.employees-page a.employees-icon-btn i,
.employees-page button.employees-icon-btn i {
    color: inherit;
}

/* Просмотр — сине-серый */
.employees-page .employees-icon-btn--view {
    background: color-mix(in srgb, #64748b 14%, var(--bg-secondary));
    border-color: var(--color-secondary-200);
    color: #475569;
}

html[data-theme="dark"] .employees-page .employees-icon-btn--view {
    background: color-mix(in srgb, #94a3b8 16%, var(--bg-card));
    border-color: var(--color-secondary-100);
    color: #cbd5e1;
}

.employees-page .employees-icon-btn--view:hover {
    background: color-mix(in srgb, #64748b 22%, var(--bg-secondary));
    color: #334155;
}

html[data-theme="dark"] .employees-page .employees-icon-btn--view:hover {
    background: color-mix(in srgb, #94a3b8 24%, var(--bg-card));
    color: #f1f5f9;
}

/* Изменить / восстановить — primary (зелёный бренд) */
.employees-page .employees-icon-btn--edit {
    background: var(--color-primary-100);
    border-color: var(--color-primary-200);
    color: var(--color-primary-dark);
}

html[data-theme="dark"] .employees-page .employees-icon-btn--edit {
    background: color-mix(in srgb, var(--color-primary) 22%, var(--bg-card));
    border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-secondary-100));
    color: var(--color-primary);
}

.employees-page .employees-icon-btn--edit:hover {
    background: var(--color-primary-200);
    color: var(--color-primary-dark);
}

html[data-theme="dark"] .employees-page .employees-icon-btn--edit:hover {
    background: color-mix(in srgb, var(--color-primary) 32%, var(--bg-card));
    color: #6ee7b7;
}

/* В архив (удаление из активных) — accent, отдельно от безвозвратного --danger */
.employees-page .employees-icon-btn--archive {
    background: var(--color-accent-100);
    border-color: var(--color-accent-200);
    color: var(--color-accent-dark);
}

html[data-theme="dark"] .employees-page .employees-icon-btn--archive {
    background: color-mix(in srgb, var(--color-accent) 18%, var(--bg-card));
    border-color: color-mix(in srgb, var(--color-accent) 34%, var(--color-secondary-100));
    color: #f87171;
}

.employees-page .employees-icon-btn--archive:hover {
    background: var(--color-accent-200);
    color: var(--color-accent-dark);
}

html[data-theme="dark"] .employees-page .employees-icon-btn--archive:hover {
    background: color-mix(in srgb, var(--color-accent) 28%, var(--bg-card));
    color: #fca5a5;
}

/* Удалить навсегда — accent (красный) */
.employees-page .employees-icon-btn--danger {
    background: var(--color-accent-100);
    border-color: var(--color-accent-200);
    color: var(--color-accent-dark);
}

html[data-theme="dark"] .employees-page .employees-icon-btn--danger {
    background: color-mix(in srgb, var(--color-accent) 22%, var(--bg-card));
    border-color: color-mix(in srgb, var(--color-accent) 38%, var(--color-secondary-100));
    color: #fca5a5;
}

.employees-page .employees-icon-btn--danger:hover {
    background: var(--color-accent-200);
    color: var(--color-accent-dark);
}

html[data-theme="dark"] .employees-page .employees-icon-btn--danger:hover {
    background: color-mix(in srgb, var(--color-accent) 34%, var(--bg-card));
    color: #fecaca;
}

/* Счётчик «Найдено» — без неонового primary в dark */
.employees-page .employees-stat-count {
    font-weight: 700;
    color: var(--color-primary-dark);
}

html[data-theme="dark"] .employees-page .employees-stat-count {
    color: var(--text-primary);
}

/* Бейдж «Активен» в списке сотрудников — не кислотный на тёмном фоне */
html[data-theme="dark"] .employees-page .badge.badge-success {
    background-color: color-mix(in srgb, var(--color-success) 14%, var(--bg-card)) !important;
    color: var(--color-primary-light) !important;
}

html[data-theme="dark"] .employees-page .badge.badge-secondary {
    background-color: var(--color-secondary-100) !important;
    color: var(--text-secondary) !important;
}

/* Лог Telegram «график вахт»: превью с выравниванием пробелами — только моноширинный шрифт */
pre.work-shift-tg-msg {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
    white-space: pre !important;
    line-height: 1.5 !important;
    font-variant-numeric: tabular-nums;
    letter-spacing: normal !important;
    font-size: 13px !important;
}
pre.work-shift-tg-msg--sm {
    font-size: 12px !important;
}

/**
 * Лог Telegram «структура бригад» (/brigade-structure-logs/*): превью HTML.
 * Tailwind CDN может вставить стили в head после @stack — фиксируем в конце файла с !important.
 * min-width:0 у колонки грида — иначе длинный контент ломает раскладку (типичный баг CSS Grid).
 */
.brigade-structure-log-page .brigade-structure-log__grid {
    align-items: start;
}

.brigade-structure-log-page .brigade-structure-log__col-msg {
    min-width: 0;
}

.brigade-structure-log-page .brigade-log-msg-preview {
    direction: ltr !important;
    unicode-bidi: plaintext !important;
    text-align: left !important;
    text-align-last: left !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

/* Строка = отдельный блок (разметка в шаблоне), чтобы заголовок/дата не ломались из‑за bidi + pre-wrap */
.brigade-structure-log-page .brigade-log-line {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    text-align-last: left !important;
    direction: ltr !important;
    unicode-bidi: plaintext !important;
}

.brigade-structure-log-page .brigade-log-msg-preview :where(b, i, strong, em, u, s, code, a) {
    text-align: left !important;
    unicode-bidi: isolate;
}

/* Глобальные цвета футера (layouts.footer), чтобы тема переключалась стабильно */
.site-footer .ft-main {
    color: #020617 !important;
}

.site-footer .ft-title {
    color: #020617 !important;
}

.site-footer .ft-sep {
    color: #334155 !important;
}

.site-footer .ft-meta {
    color: #0f172a !important;
}

.site-footer .ft-label {
    color: #1e293b !important;
}

.site-footer .ft-link {
    color: #020617 !important;
    text-decoration-color: #334155 !important;
}

html[data-theme="dark"] .site-footer .ft-main {
    color: #e2e8f0 !important;
}

html[data-theme="dark"] .site-footer .ft-title {
    color: #ffffff !important;
}

html[data-theme="dark"] .site-footer .ft-sep {
    color: #94a3b8 !important;
}

html[data-theme="dark"] .site-footer .ft-meta {
    color: #e2e8f0 !important;
}

html[data-theme="dark"] .site-footer .ft-label {
    color: #cbd5e1 !important;
}

html[data-theme="dark"] .site-footer .ft-link {
    color: #ffffff !important;
    text-decoration-color: #94a3b8 !important;
}

.brigade-structure-log-page .brigade-log-msg-raw {
    direction: ltr !important;
    unicode-bidi: plaintext !important;
    text-align: left !important;
}