/**
 * ========================================
 * ЕДИНАЯ ДИЗАЙН-СИСТЕМА REHAB PROJECT
 * ========================================
 * 
 * Версия: 3.0 UNIFIED
 * Дата: 2026-02-02
 * 
 * Этот файл объединяет ВСЕ компоненты дизайн-системы в ОДНОМ месте
 * БЕЗ импортов и дублирований
 * 
 * Структура:
 * 1. CSS Переменные (Tokens)
 * 2. Глобальные стили
 * 3. Базовые компоненты (кнопки, формы, таблицы)
 * 4. Расширенные компоненты (файлы, бейджи, dropdown)
 * 5. Компоненты страниц (Dashboard, Storage, Knowledge Base)
 * 6. Мобильная адаптивность
 * 7. Утилиты
 */

/* ========================================
   1. CSS ПЕРЕМЕННЫЕ (TOKENS)
   ======================================== */

:root {
    /* Brand colors */
    --color-primary: #667eea;
    --color-primary-2: #764ba2;
    --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-2) 100%);

    --color-secondary: #6b7280;
    --color-secondary-2: #4b5563;
    --gradient-secondary: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-2) 100%);

    --color-success: #22c55e;
    --color-success-2: #16a34a;
    --gradient-success: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-2) 100%);

    --color-danger: #ef4444;
    --color-danger-2: #dc2626;
    --gradient-danger: linear-gradient(135deg, var(--color-danger) 0%, var(--color-danger-2) 100%);

    --color-warning: #f59e0b;
    --color-warning-2: #d97706;
    --gradient-warning: linear-gradient(135deg, var(--color-warning) 0%, var(--color-warning-2) 100%);

    --color-info: #06b6d4;
    --color-info-2: #0891b2;
    --gradient-info: linear-gradient(135deg, var(--color-info) 0%, var(--color-info-2) 100%);

    --color-bg: #f3f4f8;
    --color-surface: #ffffff;
    --color-text: #1f2937;
    --color-muted: #6b7280;
    --color-border: #e5e7eb;
    --color-soft: #f8fafc;

    /* Typography */
    --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-size-xs: 12px;
    --font-size-sm: 13px;
    --font-size-md: 14px;
    --font-size-base: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 18px;
    --font-size-2xl: 20px;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;

    /* Spacing scale */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.2);
    --shadow-button: 0 4px 12px rgba(0, 0, 0, 0.15);
    --shadow-button-hover: 0 8px 24px rgba(0, 0, 0, 0.2);
    --shadow-modal: 0 10px 30px rgba(0, 0, 0, 0.2);

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition: 0.3s ease;
    --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-button: all 0.3s ease;
    --transition-modal: transform 0.3s ease, opacity 0.3s ease;

    /* Modal sizes */
    --modal-width-sm: 400px;
    --modal-width-md: 600px;
    --modal-width-lg: 700px;
    --modal-width-xl: 900px;
    --modal-width-2xl: 800px;

    /* Button sizes */
    --button-padding-sm: 8px 16px;
    --button-padding-md: 12px 24px;
    --button-padding-lg: 14px 28px;
    --button-font-size-sm: 0.875rem;
    --button-font-size-md: 1rem;
    --button-font-size-lg: 1.125rem;

    /* Modal padding */
    --modal-header-padding: 20px 24px;
    --modal-body-padding: 24px;
    --modal-footer-padding: 16px 24px;
    --modal-header-padding-mobile: 16px 18px;
    --modal-body-padding-mobile: 16px 18px;
    --modal-footer-padding-mobile: 16px 18px;

    /* Additional colors for modals */
    --color-admin: #8b5cf6;
    --color-admin-2: #7c3aed;
    --gradient-admin: linear-gradient(135deg, var(--color-admin) 0%, var(--color-admin-2) 100%);
    
    --color-reports: #4299e1;
    --color-reports-2: #3182ce;
    --gradient-reports: linear-gradient(135deg, var(--color-reports) 0%, var(--color-reports-2) 100%);
    
    --color-forms: #51cf66;
    --color-forms-2: #40c057;
    --gradient-forms: linear-gradient(135deg, var(--color-forms) 0%, var(--color-forms-2) 100%);

    --color-vbmapp: #1e40af;
    --color-vbmapp-2: #1e3a8a;
    --gradient-vbmapp: linear-gradient(135deg, var(--color-vbmapp) 0%, var(--color-vbmapp-2) 100%);

    --color-neutral: #374151;
    --color-neutral-2: #1f2937;
    --gradient-neutral: linear-gradient(135deg, var(--color-neutral) 0%, var(--color-neutral-2) 100%);

    /* Breakpoints */
    --breakpoint-sm: 480px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;

    /* Z-index scale */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;

    /* Extended colors for files */
    --file-doctor: #3b82f6;
    --file-specialist: #8b5cf6;
    --file-survey: #10b981;
    --file-center: #f59e0b;
    --file-video: #ef4444;
    
    /* Extended colors for categories */
    --category-primary: #667eea;
    --category-secondary: #764ba2;
    
    /* Extended sizes */
    --file-icon-size: 20px;
    --badge-icon-size: 14px;
    --dropdown-icon-size: 16px;

    /* Dashboard colors */
    --dashboard-primary: #6366f1;
    --dashboard-secondary: #8b5cf6;
    --dashboard-success: #10b981;
    --dashboard-warning: #f59e0b;
    --dashboard-danger: #ef4444;
    
    /* Storage colors */
    --storage-primary: #3b82f6;
    --storage-folder: #60a5fa;
    --storage-file: #fbbf24;
    
    /* Knowledge Base colors */
    --knowledge-primary: #2D1B3D;
    --knowledge-secondary: #8B5A9F;
    --knowledge-sidebar: #1e293b;

    /* Bootstrap Colors (для совместимости) */
    --bs-blue: #0d6efd;
    --bs-indigo: #6610f2;
    --bs-purple: #6f42c1;
    --bs-pink: #d63384;
    --bs-red: #dc3545;
    --bs-orange: #fd7e14;
    --bs-yellow: #ffc107;
    --bs-green: #198754;
    --bs-teal: #20c997;
    --bs-cyan: #0dcaf0;
}

[data-theme="dark"] {
    --color-bg: #0f172a;
    --color-surface: #0b1222;
    --color-border: #1f2937;
    --color-muted: #9ca3af;
    --color-text: #f3f4f6;
}

/* Icon helpers for consistent action icons */
.icon-edit { color: var(--color-info); }
.icon-delete { color: var(--color-danger); }
.icon-cancel { color: var(--color-secondary); }
.icon-save { color: var(--color-success); }
.icon-add { color: var(--color-primary); }

/* ========================================
   2. ГЛОБАЛЬНЫЕ СТИЛИ
   ======================================== */

/* КРИТИЧЕСКИ ВАЖНО: Отключение чередования строк для ВСЕХ таблиц Bootstrap */
.table-striped > tbody > tr:nth-of-type(odd) > *,
.table-striped > tbody > tr:nth-of-type(even) > * {
    --bs-table-accent-bg: transparent !important;
    --bs-table-striped-bg: transparent !important;
    background-color: transparent !important;
}

.table-striped tbody tr:nth-of-type(odd),
.table-striped tbody tr:nth-of-type(even) {
    --bs-table-accent-bg: transparent !important;
    --bs-table-striped-bg: transparent !important;
    background-color: transparent !important;
}

* {
    box-sizing: border-box;
}

body {
    font-family: var(--font-family-base);
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.6;
}

/* ========================================
   3. БАЗОВЫЕ КОМПОНЕНТЫ
   ======================================== */

/* === КНОПКИ === */
.rehab-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: var(--button-padding-md);
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-family-base);
    font-size: var(--button-font-size-md);
    font-weight: var(--font-weight-semibold);
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition-button);
    box-shadow: var(--shadow-button);
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    user-select: none;
}

.rehab-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-button-hover);
}

.rehab-btn:active {
    transform: translateY(0);
}

.rehab-btn:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.rehab-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

/* Варианты цветов */
.rehab-btn-primary {
    background: var(--gradient-primary);
    color: white;
}

.rehab-btn-primary:hover {
    background: linear-gradient(135deg, var(--color-primary-2) 0%, var(--color-primary) 100%);
    color: white;
}

.rehab-btn-secondary {
    background: var(--gradient-secondary);
    color: white;
}

.rehab-btn-secondary:hover {
    background: linear-gradient(135deg, var(--color-secondary-2) 0%, var(--color-secondary) 100%);
    color: white;
}

.rehab-btn-success {
    background: var(--gradient-success);
    color: white;
}

.rehab-btn-success:hover {
    background: linear-gradient(135deg, var(--color-success-2) 0%, var(--color-success) 100%);
    color: white;
}

.rehab-btn-danger {
    background: var(--gradient-danger);
    color: white;
}

.rehab-btn-danger:hover {
    background: linear-gradient(135deg, var(--color-danger-2) 0%, var(--color-danger) 100%);
    color: white;
}

.rehab-btn-warning {
    background: var(--gradient-warning);
    color: white;
}

.rehab-btn-warning:hover {
    background: linear-gradient(135deg, var(--color-warning-2) 0%, var(--color-warning) 100%);
    color: white;
}

.rehab-btn-info {
    background: var(--gradient-info);
    color: white;
}

.rehab-btn-info:hover {
    background: linear-gradient(135deg, var(--color-info-2) 0%, var(--color-info) 100%);
    color: white;
}

/* Outline варианты */
.rehab-btn-outline-primary {
    background: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
    box-shadow: none;
}

.rehab-btn-outline-primary:hover {
    background: var(--color-primary);
    color: white;
}

.rehab-btn-outline-secondary {
    background: transparent;
    color: var(--color-secondary);
    border: 2px solid var(--color-secondary);
    box-shadow: none;
}

.rehab-btn-outline-secondary:hover {
    background: var(--color-secondary);
    color: white;
}

.rehab-btn-outline-success {
    background: transparent;
    color: var(--color-success);
    border: 2px solid var(--color-success);
    box-shadow: none;
}

.rehab-btn-outline-success:hover {
    background: var(--color-success);
    color: white;
}

.rehab-btn-outline-danger {
    background: transparent;
    color: var(--color-danger);
    border: 2px solid var(--color-danger);
    box-shadow: none;
}

.rehab-btn-outline-danger:hover {
    background: var(--color-danger);
    color: white;
}

/* Ghost варианты (прозрачный фон) */
.rehab-btn-ghost {
    background: rgba(102, 126, 234, 0.08);
    color: var(--color-primary);
    box-shadow: none;
}

.rehab-btn-ghost:hover {
    background: rgba(102, 126, 234, 0.15);
}

/* Размеры кнопок */
.rehab-btn-sm {
    padding: var(--button-padding-sm);
    font-size: var(--button-font-size-sm);
}

.rehab-btn-lg {
    padding: var(--button-padding-lg);
    font-size: var(--button-font-size-lg);
}

/* Кнопка-иконка (квадратная) */
.rehab-btn-icon {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
}

.rehab-btn-icon.rehab-btn-sm {
    width: 32px;
    height: 32px;
}

.rehab-btn-icon.rehab-btn-lg {
    width: 48px;
    height: 48px;
}

/* Кнопка на всю ширину */
.rehab-btn-block {
    width: 100%;
}

/* Группа кнопок */
.rehab-btn-group {
    display: inline-flex;
    gap: 8px;
}

.rehab-btn-group .rehab-btn {
    margin: 0;
}

/* === КАРТОЧКИ И КОНТЕЙНЕРЫ === */

/* Brandbook секция */
.brandbook-section {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(0, 0, 0, 0.04);
}

/* Уровни теней */
.elevate-sm {
    box-shadow: var(--shadow-sm);
}

.elevate-md {
    box-shadow: var(--shadow-md);
}

.elevate-lg {
    box-shadow: var(--shadow-lg);
}

/* === ТАБЛИЦЫ === */

/* ========================================
   ЕДИНЫЙ СТИЛЬ ДЛЯ ВСЕХ ТАБЛИЦ
   ======================================== */

/* Базовые стили для всех таблиц */
.table {
    width: 100%;
    min-width: 100%;
    table-layout: auto;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
    margin-bottom: 0;
}

/* Заголовок таблицы - ЕДИНЫЙ СТИЛЬ */
.table thead {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.table thead th {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
    padding: 14px 16px;
    border-bottom: 2px solid #e5e7eb;
    border-right: none;
    border-left: none;
    border-top: none;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

/* Тело таблицы - ЕДИНЫЙ СТИЛЬ БЕЗ ЧЕРЕДОВАНИЯ */
.table tbody tr {
    transition: all 0.2s ease;
    border-bottom: 1px solid #f1f5f9;
    background-color: transparent;
}

.table tbody tr:hover {
    background-color: rgba(102, 126, 234, 0.06) !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.table tbody tr:active {
    transform: translateY(0);
}

.table tbody td {
    padding: 12px 16px;
    vertical-align: middle;
    color: var(--color-text);
    text-align: center;
    border-right: none;
    border-left: none;
    border-top: none;
}

/* Кликабельные строки */
.table tbody tr.clickable-row,
.table tbody tr.position-row,
.table tbody tr.lesson-row {
    cursor: pointer;
}

/* Все колонки по центру - специфичные правила больше не нужны */

/* Таблица с границами - ТОЛЬКО ВНЕШНЯЯ РАМКА (воздушный стиль) */
.table.table-bordered {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}

/* НЕТ вертикальных и горизонтальных границ внутри - для воздушности */
.table.table-bordered thead th {
    border-right: none;
    border-left: none;
    border-top: none;
    border-bottom: 2px solid #e5e7eb;
}

.table.table-bordered tbody td {
    border-right: none;
    border-left: none;
    border-top: none;
    border-bottom: none;
}

/* Таблица с ПОЛНОЙ СЕТКОЙ - только для специальных случаев (роли, разрешения) */
.table.table-grid {
    border: 1px solid #e5e7eb !important;
    border-radius: 8px;
    overflow: hidden;
}

.table.table-grid thead th {
    border-right: 1px solid #e5e7eb !important;
    border-bottom: 2px solid #e5e7eb !important;
}

.table.table-grid tbody td {
    border-right: 1px solid #f1f5f9 !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

.table.table-grid tbody tr:last-child td {
    border-bottom: none !important;
}

/* Таблица с выравниванием: заголовки по центру, первая колонка слева, остальные по центру */
.table.table-left th {
    text-align: center !important;
}

.table.table-left td:first-child {
    text-align: left !important;
}

.table.table-left td:not(:first-child) {
    text-align: center !important;
}

/* ГЛОБАЛЬНОЕ ОТКЛЮЧЕНИЕ ЧЕРЕДОВАНИЯ - все строки одинаковые во всех таблицах */
.table.table-striped tbody tr:nth-of-type(odd),
.table-striped tbody tr:nth-of-type(odd),
.table.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: transparent !important;
    --bs-table-striped-bg: transparent !important;
}

.table.table-striped tbody tr:nth-of-type(even),
.table-striped tbody tr:nth-of-type(even),
.table.table-striped > tbody > tr:nth-of-type(even) {
    background-color: transparent !important;
    --bs-table-striped-bg: transparent !important;
}

/* Маленькая таблица */
.table.table-sm thead th {
    padding: 10px 12px;
}

.table.table-sm tbody td {
    padding: 8px 12px;
}

/* Страница должностей - выравнивание колонок */
.table.table-bordered.table-sm td:nth-child(3) {
    text-align: center !important; /* Статус - по центру */
}

/* Скругление углов таблицы */
.table-responsive {
    border-radius: var(--radius-lg) !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    width: 100%;
    -webkit-overflow-scrolling: touch;
}

.table-responsive > .table,
.table-responsive > table {
    width: 100%;
    min-width: 100%;
    margin-bottom: 0;
}

.card-body .table {
    margin-bottom: 0 !important;
}

/* Первая строка заголовка - скругленные верхние углы */
.table thead tr:first-child th:first-child {
    border-top-left-radius: var(--radius-lg) !important;
}

.table thead tr:first-child th:last-child {
    border-top-right-radius: var(--radius-lg) !important;
}

/* Последняя строка - скругленные нижние углы */
.table tbody tr:last-child td:first-child {
    border-bottom-left-radius: var(--radius-lg) !important;
}

.table tbody tr:last-child td:last-child {
    border-bottom-right-radius: var(--radius-lg) !important;
}

/* Цветные заголовки таблиц - переопределяют базовый стиль */
.table-head-primary thead {
    background: rgba(102, 126, 234, 0.15) !important;
}

.table-head-primary thead th {
    background: transparent !important;
    color: #334155 !important;
    border-bottom: 1px solid var(--color-border) !important;
    font-weight: 600 !important;
    padding: 14px 16px !important;
    border-top: none !important;
}

.table-head-success thead {
    background: rgba(34, 197, 94, 0.15) !important;
}

.table-head-success thead th {
    background: transparent !important;
    color: #334155 !important;
    border-bottom: 1px solid var(--color-border) !important;
    font-weight: 600 !important;
    padding: 14px 16px !important;
}

.table-head-info thead {
    background: rgba(6, 182, 212, 0.15) !important;
}

.table-head-info thead th {
    background: transparent !important;
    color: #334155 !important;
    border-bottom: 1px solid var(--color-border) !important;
    font-weight: 600 !important;
    padding: 14px 16px !important;
}

.table-head-danger thead {
    background: rgba(239, 68, 68, 0.15) !important;
}

.table-head-danger thead th {
    background: transparent !important;
    color: #334155 !important;
    border-bottom: 1px solid var(--color-border) !important;
    font-weight: 600 !important;
    padding: 14px 16px !important;
}

.table-head-soft thead {
    background: var(--color-soft) !important;
}

.table-head-soft thead th {
    background: transparent !important;
    color: #334155 !important;
    border-bottom: 1px solid var(--color-border) !important;
    font-weight: 600 !important;
    padding: 14px 16px !important;
}

/* ГЛОБАЛЬНОЕ ПРАВИЛО: убираем чередование строк для ВСЕХ таблиц */
table tbody tr:nth-child(odd),
table tbody tr:nth-child(even),
table.table-striped tbody tr:nth-child(odd),
table.table-striped tbody tr:nth-child(even),
.table tbody tr:nth-child(odd),
.table tbody tr:nth-child(even),
.table-striped tbody tr:nth-child(odd),
.table-striped tbody tr:nth-child(even),
.table.table-striped > tbody > tr:nth-child(odd),
.table.table-striped > tbody > tr:nth-child(even),
table.table-striped > tbody > tr:nth-of-type(odd),
table.table-striped > tbody > tr:nth-of-type(even) {
    background-color: transparent !important;
    --bs-table-accent-bg: transparent !important;
    --bs-table-striped-bg: transparent !important;
}

/* ЕДИНЫЙ HOVER-ЭФФЕКТ для всех таблиц */
table tbody tr:hover,
.table tbody tr:hover,
.table-hover tbody tr:hover,
table.table-hover tbody tr:hover,
.table.table-hover > tbody > tr:hover {
    background-color: rgba(102, 126, 234, 0.05) !important;
}

/* Убираем внутренние границы для всех таблиц по умолчанию */
table:not(.table-grid):not(.protocol-table) th,
table:not(.table-grid):not(.protocol-table) td {
    border-left: none !important;
    border-right: none !important;
}

/* Кликабельные строки */
.clickable-row {
    cursor: pointer;
    transition: all 0.2s ease;
}

.clickable-row:hover {
    background-color: rgba(102, 126, 234, 0.05) !important;
    transform: translateX(4px);
}

.child-row td {
    padding: 14px 16px;
    vertical-align: middle;
}

/* === БЕЙДЖИ === */

/* Бейджи-чипы */
.badge-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.badge-chip i {
    font-size: 12px;
}

.badge-chip.primary {
    background: rgba(102, 126, 234, 0.12);
    color: var(--color-primary-2);
}

.badge-chip.success {
    background: rgba(34, 197, 94, 0.12);
    color: var(--color-success-2);
}

.badge-chip.info {
    background: rgba(6, 182, 212, 0.12);
    color: var(--color-info-2);
}

.badge-chip.danger {
    background: rgba(239, 68, 68, 0.12);
    color: var(--color-danger-2);
}

.badge-chip.warning {
    background: rgba(245, 158, 11, 0.12);
    color: var(--color-warning-2);
}

.badge-chip.secondary {
    background: rgba(107, 114, 128, 0.12);
    color: #4b5563;
}

.badge-chip.light {
    background: rgba(248, 250, 252, 0.95);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

.badge-chip.dark {
    background: rgba(31, 41, 55, 0.92);
    color: #fff;
}

/* Группа из нескольких bage-chip: ровный gap, корректный wrap, одинаковая базовая линия. */
.badge-chip-group {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

/* === УТИЛИТНЫЕ КЛАССЫ === */

/* Форма-обёртка для одиночной кнопки действия рядом с другими (Удалить и т.п.). */
.form-inline-action { display: inline; }

/* Курсор по умолчанию (для интерактивных областей, где hover есть, а клик не нужен). */
.cursor-default { cursor: default; }

/* Бренд-цвета иконок мессенджеров (используются на странице новостей и в карточках постов). */
.icon-tg  { color: #2196F3; }
.icon-max { color: #7c3aed; }

/* Превью-картинки постов в списке новостей. */
.news-thumb {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #e0e7ff;
}
.news-thumb-placeholder {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    background: #e0e7ff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: #6366f1;
    font-weight: 600;
}

/* === КОНТЕЙНЕРЫ СТРАНИЦ === */

/* Убираем серый фон у контейнеров списков */
.children-list-container {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: auto !important;
    max-width: none !important;
}

/* Карточка с таблицей */
.children-table-card .card {
    border-radius: var(--radius-lg) !important;
    overflow: hidden !important;
    border: 1px solid var(--color-border) !important;
}

.children-table-card .card-body {
    padding: 0 !important;
}

/* === КНОПКИ С ИКОНКАМИ === */

/* Полные стили для .btn-icon-only определены ниже в строках ~13975-14050 */

/* === ПАГИНАЦИЯ === */

.pagination-wrapper {
    margin-top: 1.5rem;
}

.pagination-stats {
    margin-top: 1rem;
    text-align: center;
}

.pagination-stats .stats-card {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: transparent !important; /* Убираем серый фон */
    border: none !important;
    box-shadow: none !important;
    color: var(--color-muted);
    font-size: 0.9rem;
}

.pagination-stats .stats-text {
    color: var(--color-muted);
}

.pagination-stats .stats-text strong {
    color: var(--color-text);
    font-weight: 600;
}

.pagination-stats .stats-divider {
    color: var(--color-border);
    margin: 0 0.5rem;
}

/* Кнопки пагинации */
.page-link.page-nav-btn {
    background: var(--gradient-primary) !important;
    color: white !important;
    border: none !important;
    font-weight: 500 !important;
    padding: 0.5rem 1rem !important;
    border-radius: var(--radius-md) !important;
    transition: var(--transition-fast) !important;
}

.page-link.page-nav-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-button-hover) !important;
    color: white !important;
    background: linear-gradient(135deg, var(--color-primary-2) 0%, var(--color-primary) 100%) !important;
}

.page-item.disabled .page-link.page-nav-btn {
    background: var(--color-border) !important;
    color: var(--color-muted) !important;
    cursor: not-allowed !important;
    transform: none !important;
}

.page-link.page-number {
    min-width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--color-border) !important;
    color: var(--color-text) !important;
    font-weight: 500 !important;
    transition: var(--transition-fast) !important;
    background: white !important;
}

.page-link.page-number:hover {
    background: rgba(102, 126, 234, 0.1) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
    text-decoration: none !important;
}

.page-item.active .page-link.page-number {
    background: var(--gradient-primary) !important;
    border-color: var(--color-primary) !important;
    color: white !important;
}

.page-link.page-dots {
    border: none !important;
    color: var(--color-muted) !important;
    background: transparent !important;
}

/* Убираем стандартные стили Bootstrap для пагинации */
.pagination {
    gap: 0.5rem;
}

.pagination .page-item {
    margin: 0 !important;
}

/* === МОДАЛЬНЫЕ ОКНА === */
.rehab-modal,
.modal {
    z-index: var(--z-modal);
    overflow: visible;
}

.rehab-modal .modal-dialog,
.modal .modal-dialog {
    max-width: var(--modal-width-md);
    margin: 1.75rem auto;
}

.rehab-modal .modal-dialog.modal-sm,
.modal .modal-dialog.modal-sm {
    max-width: var(--modal-width-sm);
}

.rehab-modal .modal-dialog.modal-lg,
.modal .modal-dialog.modal-lg {
    max-width: var(--modal-width-lg);
}

.rehab-modal .modal-dialog.modal-xl,
.modal .modal-dialog.modal-xl {
    max-width: var(--modal-width-xl);
}

.rehab-modal .modal-content,
.modal .modal-content {
    border-radius: var(--radius-lg);
    border: none;
    box-shadow: var(--shadow-modal);
    overflow: visible;
    background: var(--color-surface);
    animation: modalAppear 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes modalAppear {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.rehab-modal .modal-header,
.modal .modal-header,
.modal-header.bg-primary,
.modal-content .modal-header.bg-primary {
    background: var(--gradient-primary) !important;
    color: white !important;
    border-bottom: none !important;
    padding: var(--modal-header-padding) !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Заголовок и иконки в модальном окне */
.modal-header .modal-title,
.modal-header.bg-primary .modal-title {
    color: white !important;
    font-weight: var(--font-weight-semibold) !important;
    font-size: var(--font-size-xl) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.modal-header .modal-title i,
.modal-header.bg-primary .modal-title i {
    color: white !important;
    font-size: var(--font-size-xl) !important;
}

/* Кнопка закрытия */
.modal-header .btn-close,
.modal-header .btn-close-white,
.modal-header.bg-primary .btn-close-white {
    filter: brightness(0) invert(1) !important;
    opacity: 0.8 !important;
}

.modal-header .btn-close:hover,
.modal-header .btn-close-white:hover,
.modal-header.bg-primary .btn-close-white:hover {
    opacity: 1 !important;
}

.rehab-modal .modal-header::before,
.modal .modal-header::before {
    content: "";
    position: absolute;
    top: -50%;
    right: -20px;
    width: 100px;
    height: 200%;
    background: rgba(255, 255, 255, 0.1);
    transform: rotate(15deg);
    pointer-events: none;
}

.rehab-modal .modal-title,
.modal .modal-title {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-xl);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: 0;
    font-family: var(--font-family-base);
    position: relative;
    z-index: 2;
}

.rehab-modal .modal-title i,
.modal .modal-title i {
    font-size: var(--font-size-2xl);
}

.rehab-modal .modal-body,
.modal .modal-body {
    padding: var(--modal-body-padding);
    background: var(--color-soft);
}

.rehab-modal .modal-footer,
.modal .modal-footer {
    padding: var(--modal-footer-padding);
    border-top: 1px solid var(--color-border);
    background: var(--color-soft);
}

/* Варианты модальных окон */
.rehab-modal.success-modal .modal-header,
.modal.success-modal .modal-header,
.modal-header.bg-success {
    background: var(--gradient-success) !important;
    color: white !important;
    border-bottom: none !important;
}

.rehab-modal.info-modal .modal-header,
.modal.info-modal .modal-header,
.modal-header.bg-info {
    background: var(--gradient-info) !important;
    color: white !important;
    border-bottom: none !important;
}

.rehab-modal.warning-modal .modal-header,
.modal.warning-modal .modal-header,
.modal-header.bg-warning {
    background: var(--gradient-warning) !important;
    color: white !important;
    border-bottom: none !important;
}

.rehab-modal.danger-modal .modal-header,
.modal.danger-modal .modal-header,
.modal-header.bg-danger {
    background: var(--gradient-danger) !important;
    color: white !important;
    border-bottom: none !important;
}

/* Кнопки в модальных окнах - КРАСИВЫЙ КОМПАКТНЫЙ СТИЛЬ */
.modal-content .modal-body .btn.btn-outline-primary,
.modal .modal-body .btn.btn-outline-primary,
.modal-body .btn-outline-primary,
.modal-body a.btn-outline-primary {
    background: white !important;
    color: var(--color-primary, #667eea) !important;
    border: 1px solid var(--color-primary, #667eea) !important;
    padding: 8px 16px !important;
    border-radius: var(--radius-sm, 8px) !important;
    font-weight: var(--font-weight-medium, 500) !important;
    transition: var(--transition, all 0.3s ease) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    width: auto !important;
    justify-content: center !important;
    text-decoration: none !important;
    font-size: var(--font-size-sm, 13px) !important;
    text-align: center !important;
    min-height: 36px !important;
}

.modal-content .modal-body .btn.btn-outline-primary:hover,
.modal .modal-body .btn.btn-outline-primary:hover,
.modal-body .btn-outline-primary:hover,
.modal-body a.btn-outline-primary:hover {
    background: var(--gradient-primary, linear-gradient(135deg, #667eea 0%, #764ba2 100%)) !important;
    color: white !important;
    border-color: transparent !important;
    transform: translateX(4px) !important;
    box-shadow: var(--shadow-button, 0 4px 12px rgba(102, 126, 234, 0.3)) !important;
}

.modal-content .modal-body .btn.btn-outline-primary i,
.modal .modal-body .btn.btn-outline-primary i,
.modal-body .btn-outline-primary i,
.modal-body a.btn-outline-primary i {
    transition: transform 0.2s ease !important;
}

.modal-content .modal-body .btn.btn-outline-primary:hover i,
.modal .modal-body .btn.btn-outline-primary:hover i,
.modal-body .btn-outline-primary:hover i,
.modal-body a.btn-outline-primary:hover i {
    transform: scale(1.1) !important;
}

/* Кнопки настроек (серые) в модальных окнах */
.modal-content .modal-body .btn.btn-outline-secondary,
.modal .modal-body .btn.btn-outline-secondary,
.modal-body .btn-outline-secondary,
.modal-body a.btn-outline-secondary {
    background: white !important;
    color: var(--color-text, #1f2937) !important;
    border: 1px solid var(--color-border, #e5e7eb) !important;
    padding: 8px 16px !important;
    border-radius: var(--radius-sm, 8px) !important;
    font-weight: var(--font-weight-medium, 500) !important;
    transition: var(--transition, all 0.3s ease) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    width: auto !important;
    justify-content: center !important;
    text-decoration: none !important;
    font-size: var(--font-size-sm, 13px) !important;
    text-align: center !important;
    min-height: 36px !important;
}

.modal-content .modal-body .btn.btn-outline-secondary:hover,
.modal .modal-body .btn.btn-outline-secondary:hover,
.modal-body .btn-outline-secondary:hover,
.modal-body a.btn-outline-secondary:hover {
    background: var(--gradient-secondary, linear-gradient(135deg, #6b7280 0%, #4b5563 100%)) !important;
    color: white !important;
    border-color: transparent !important;
    transform: translateX(4px) !important;
    box-shadow: var(--shadow-button, 0 4px 12px rgba(0, 0, 0, 0.15)) !important;
}

.modal-content .modal-body .btn.btn-outline-secondary i,
.modal .modal-body .btn.btn-outline-secondary i,
.modal-body .btn-outline-secondary i,
.modal-body a.btn-outline-secondary i {
    transition: transform 0.2s ease !important;
}

.modal-content .modal-body .btn.btn-outline-secondary:hover i,
.modal .modal-body .btn.btn-outline-secondary:hover i,
.modal-body .btn-outline-secondary:hover i,
.modal-body a.btn-outline-secondary:hover i {
    transform: scale(1.1) !important;
}

.modal-content .modal-body .btn.btn-outline-primary i,
.modal .modal-body .btn.btn-outline-primary i,
.modal-body .btn-outline-primary i {
    font-size: var(--font-size-base) !important;
    margin-right: 0 !important;
}

/* Компактные служебные кнопки в модалках: "Выбрать все", "Снять все" */
.modal-content .modal-body .btn.btn-sm.btn-outline-primary,
.modal .modal-body .btn.btn-sm.btn-outline-primary,
.modal-body .btn-sm.btn-outline-primary,
.modal-content .modal-body .btn.btn-sm.btn-outline-danger,
.modal .modal-body .btn.btn-sm.btn-outline-danger,
.modal-body .btn-sm.btn-outline-danger {
    padding: 5px 10px !important;
    min-height: 28px !important;
    min-width: 0 !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
    gap: 4px !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    box-shadow: none !important;
}

.modal-content .modal-body .btn.btn-sm.btn-outline-primary i,
.modal .modal-body .btn.btn-sm.btn-outline-primary i,
.modal-body .btn-sm.btn-outline-primary i,
.modal-content .modal-body .btn.btn-sm.btn-outline-danger i,
.modal .modal-body .btn.btn-sm.btn-outline-danger i,
.modal-body .btn-sm.btn-outline-danger i {
    font-size: 11px !important;
}

/* Строка "поиск + Выбрать все" в модалках отчетов */
.report-modal-content .d-flex.justify-content-between.align-items-center.mb-2,
#reportModal .d-flex.justify-content-between.align-items-center.mb-2,
#emptyReportModal .d-flex.justify-content-between.align-items-center.mb-2,
#changesReportModal .d-flex.justify-content-between.align-items-center.mb-2,
#abaProtocolModal .d-flex.justify-content-between.align-items-center.mb-2,
#correctionPlanModal .d-flex.justify-content-between.align-items-center.mb-2 {
    gap: 12px !important;
}

.report-modal-content .d-flex.justify-content-between.align-items-center.mb-2 .form-control,
#reportModal .d-flex.justify-content-between.align-items-center.mb-2 .form-control,
#emptyReportModal .d-flex.justify-content-between.align-items-center.mb-2 .form-control,
#changesReportModal .d-flex.justify-content-between.align-items-center.mb-2 .form-control,
#abaProtocolModal .d-flex.justify-content-between.align-items-center.mb-2 .form-control,
#correctionPlanModal .d-flex.justify-content-between.align-items-center.mb-2 .form-control {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.report-modal-content .d-flex.justify-content-between.align-items-center.mb-2 .btn-sm,
#reportModal .d-flex.justify-content-between.align-items-center.mb-2 .btn-sm,
#emptyReportModal .d-flex.justify-content-between.align-items-center.mb-2 .btn-sm,
#changesReportModal .d-flex.justify-content-between.align-items-center.mb-2 .btn-sm,
#abaProtocolModal .d-flex.justify-content-between.align-items-center.mb-2 .btn-sm,
#correctionPlanModal .d-flex.justify-content-between.align-items-center.mb-2 .btn-sm {
    flex: 0 0 auto !important;
}

/* Кнопки в модальном footer - компактный стиль */
.modal .modal-footer .btn,
.modal-footer .btn {
    padding: 8px 16px !important;
    border-radius: var(--radius-sm) !important;
    font-weight: var(--font-weight-semibold) !important;
    transition: var(--transition) !important;
    font-size: var(--font-size-sm, 13px) !important;
    min-height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    width: auto !important;
    flex-shrink: 0 !important;
}

/* === ФОРМЫ === */
.rehab-form-group {
    margin-bottom: var(--space-4);
}

.rehab-label {
    display: block;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    color: var(--color-muted);
    margin-bottom: var(--space-2);
    font-family: var(--font-family-base);
}

.rehab-input,
.rehab-textarea,
.rehab-select {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: white;
    font-family: var(--font-family-base);
    font-size: var(--font-size-md);
    color: var(--color-text);
    transition: var(--transition-fast);
}

.rehab-input:focus,
.rehab-textarea:focus,
.rehab-select:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.rehab-textarea {
    min-height: 100px;
    resize: vertical;
}

.rehab-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px 12px;
    padding-right: 40px;
}

/* === ТАБЛИЦЫ === */
.rehab-table {
    width: 100%;
    min-width: 100%;
    table-layout: auto;
    border-collapse: separate;
    border-spacing: 0;
    background: white;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid #e5e7eb;
}

.rehab-table thead {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.rehab-table th {
    padding: 14px 16px;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    color: var(--color-text);
    border: none;
    border-bottom: 2px solid #e5e7eb;
    vertical-align: middle;
    white-space: nowrap;
}

.rehab-table td {
    padding: 12px 16px;
    border: none;
    text-align: center;
    vertical-align: middle;
}

.rehab-table tbody tr {
    border-bottom: 1px solid #f1f5f9;
    transition: all 0.2s ease;
    background-color: transparent;
}

.rehab-table tbody tr:hover {
    background-color: rgba(102, 126, 234, 0.06) !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.rehab-table tbody tr:last-child td {
    border-bottom: none;
}

/* === БЕЙДЖИ === */
.rehab-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 13px;
    font-family: var(--font-family-base);
    line-height: 1.2;
}

.rehab-badge-primary {
    background: rgba(102, 126, 234, 0.12);
    color: var(--color-primary-2);
}

.rehab-badge-success {
    background: rgba(34, 197, 94, 0.12);
    color: var(--color-success-2);
}

.rehab-badge-info {
    background: rgba(6, 182, 212, 0.12);
    color: var(--color-info-2);
}

.rehab-badge-danger {
    background: rgba(239, 68, 68, 0.12);
    color: var(--color-danger-2);
}

.rehab-badge-warning {
    background: rgba(245, 158, 11, 0.12);
    color: var(--color-warning-2);
}

/* === КАРТОЧКИ === */
.rehab-card {
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-6);
    border: 1px solid var(--color-border);
}

.rehab-card:hover {
    box-shadow: var(--shadow-md);
}

.rehab-card-header {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-4);
    color: var(--color-text);
}

/* === ВКЛАДКИ (NAV-TABS) — ЗАМЕНЕНО НА UNIFIED TABS (см. конец файла) ===
   Ниже находится старый унифицированный блок (стиль «как в музыке» —
   прозрачный фон, линия снизу). Он противоречит новому стилю вкладок
   «как на странице /notes», поэтому закомментирован. Сохранён для истории
   на случай отката. Отключено 2026-04-23.

.nav-tabs,
.rehab-tabs,
.music-nav-tabs,
.smm-tabs {
    border-bottom: 2px solid var(--color-border);
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: var(--space-4);
    padding-bottom: 0;
}

.nav-tabs .nav-link,
.rehab-tabs .rehab-tab,
.music-nav-tabs .music-nav-tab,
.smm-tabs .nav-link {
    padding: 10px 20px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    font-weight: var(--font-weight-semibold);
    color: var(--color-muted);
    transition: var(--transition);
    position: relative;
    bottom: -2px;
    font-size: var(--font-size-base);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.nav-tabs .nav-link:hover,
.rehab-tabs .rehab-tab:hover,
.music-nav-tabs .music-nav-tab:hover,
.smm-tabs .nav-link:hover {
    color: var(--color-primary);
    background: rgba(102, 126, 234, 0.05);
}

.nav-tabs .nav-link.active,
.rehab-tabs .rehab-tab.active,
.music-nav-tabs .music-nav-tab.active,
.smm-tabs .nav-link.active {
    color: var(--color-primary) !important;
    border-bottom-color: var(--color-primary);
    background: rgba(102, 126, 234, 0.08);
    font-weight: var(--font-weight-bold);
}

.nav-tabs .nav-link i,
.rehab-tabs .rehab-tab i,
.music-nav-tabs .music-nav-tab i,
.smm-tabs .nav-link i {
    font-size: var(--font-size-base);
    flex-shrink: 0;
    margin-right: 0;
}

=== конец отключённого блока === */

/* Вкладки в модальных окнах */
.modal .nav-tabs {
    border-bottom: 2px solid var(--color-border);
    margin-bottom: var(--space-4);
}

.modal .nav-tabs .nav-link {
    border: none;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    padding: 12px 20px;
    color: var(--color-muted);
    font-weight: var(--font-weight-medium);
}

.modal .nav-tabs .nav-link:hover {
    background: rgba(102, 126, 234, 0.1);
    color: var(--color-primary);
}

.modal .nav-tabs .nav-link.active {
    background: var(--gradient-primary);
    color: white;
    border-bottom-color: transparent;
}

/* ========================================
   4. РАСШИРЕННЫЕ КОМПОНЕНТЫ
   ======================================== */

/* === КНОПКИ ДЛЯ ФАЙЛОВ === */
.file-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: white;
    color: #334155;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition-fast);
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--font-family-base);
    font-size: var(--font-size-sm);
}

/* Домашнее задание — стиль как file-action-btn, но без привязки к файловому обработчику */
.hw-item-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: white;
    color: #334155;
    text-decoration: none;
    transition: var(--transition-fast);
    max-width: 100%;
    font-family: var(--font-family-base);
    font-size: var(--font-size-sm);
}
.hw-item-btn:hover {
    background: var(--color-soft);
    border-color: #cbd5e1;
}
.hw-item-btn i {
    font-size: var(--file-icon-size);
    flex-shrink: 0;
}
a.hw-item-btn { cursor: pointer; }
a.hw-item-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }

.file-action-btn:hover {
    background: var(--color-soft);
    border-color: #cbd5e1;
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.file-action-btn i {
    font-size: var(--file-icon-size);
    flex-shrink: 0;
}

/* Иконки файлов по типам */
.file-action-btn i.fa-file-pdf { color: #dc2626; }
.file-action-btn i.fa-file-word { color: #2563eb; }
.file-action-btn i.fa-file-excel { color: #16a34a; }
.file-action-btn i.fa-file-image { color: #7c3aed; }
.file-action-btn i.fa-file-video { color: #ef4444; }
.file-action-btn i.fa-file { color: #6b7280; }

/* === КНОПКИ ПЕРЕКЛЮЧЕНИЯ ФАЙЛОВ === */
.files-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px !important;
    background: #eef2ff;
    color: #1f2937;
    border: 1px solid #c7d2fe;
    font-family: var(--font-family-base);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: var(--transition-fast);
}

.files-toggle-btn i {
    color: var(--color-primary);
    font-size: var(--dropdown-icon-size);
}

.files-toggle-btn:hover {
    background: #e0e7ff;
    border-color: #a5b4fc;
    transform: translateY(-1px);
}

.files-toggle-btn.active {
    background: var(--gradient-primary);
    border-color: transparent;
    color: white;
}

.files-toggle-btn.active i {
    color: white;
}

/* Специфичные цвета для типов файлов */
.files-toggle-btn[data-target="#doctor-files-list"] i { color: var(--file-doctor); }
.files-toggle-btn[data-target="#specialist-files-list"] i { color: var(--file-specialist); }
.files-toggle-btn[data-target="#survey-files-list"] i { color: var(--file-survey); }
.files-toggle-btn[data-target="#center-files-list"] i { color: var(--file-center); }
.files-toggle-btn[data-target="#video-files-list"] i { color: var(--file-video); }

.files-toggle-btn.active[data-target="#doctor-files-list"],
.files-toggle-btn.active[data-target="#specialist-files-list"],
.files-toggle-btn.active[data-target="#survey-files-list"],
.files-toggle-btn.active[data-target="#center-files-list"],
.files-toggle-btn.active[data-target="#video-files-list"] {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-2) 100%);
}

.files-toggle-btn.active i {
    color: white !important;
}

/* === КНОПКИ ОТМЕНЫ/ПОВТОРА === */
.undo-redo-btn {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: white;
    color: var(--color-muted);
    cursor: pointer;
    transition: var(--transition-fast);
    box-shadow: var(--shadow-sm);
}

.undo-redo-btn:hover {
    background: var(--color-soft);
    border-color: var(--color-primary);
    color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.undo-redo-btn:active {
    transform: translateY(0);
}

.undo-redo-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none !important;
}

/* === КНОПКИ БЫСТРЫХ ДЕЙСТВИЙ (Dashboard) === */
.quick-action-btn {
    flex: none !important;
    min-width: unset !important;
    max-width: unset !important;
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 6px 16px !important;
    border-radius: 20px !important;
    font-weight: var(--font-weight-semibold) !important;
    font-size: 0.85rem !important;
    transition: var(--transition-button) !important;
    position: relative !important;
    overflow: hidden !important;
    text-decoration: none !important;
    border: none !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12) !important;
    line-height: 1.4 !important;
}

.quick-action-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    transition: left 0.5s ease;
}

.quick-action-btn:hover::before {
    left: 100%;
}

.quick-action-btn i {
    font-size: 0.95rem !important;
    margin-bottom: 0 !important;
    transition: var(--transition) !important;
    color: inherit !important;
}

.quick-action-btn span {
    font-size: 0.85rem !important;
    transition: var(--transition) !important;
    color: inherit !important;
    font-weight: var(--font-weight-semibold) !important;
}

.quick-action-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.18) !important;
    text-decoration: none !important;
}

.quick-action-btn:hover i {
    transform: scale(1.15);
}

.quick-action-btn:hover span {
    transform: none;
}

/* Специальные стили для кнопок быстрых действий */
.btn-primary.quick-action-btn {
    background: var(--gradient-primary) !important;
    color: white !important;
    border: none !important;
    border-radius: 20px !important;
}

.btn-success.quick-action-btn {
    background: var(--gradient-success) !important;
    color: white !important;
    border: none !important;
    border-radius: 20px !important;
}

.btn-warning.quick-action-btn {
    background: var(--gradient-warning) !important;
    color: white !important;
    border: none !important;
    border-radius: 20px !important;
}

.btn-info.quick-action-btn,
.btn-info.quick-action-btn.alfacrm-btn {
    background: var(--gradient-info) !important;
    color: white !important;
    border: none !important;
    border-radius: 20px !important;
}

.alfacrm-logo-img {
    height: 18px;
    width: auto;
    object-fit: contain;
    display: block;
    filter: brightness(0) invert(1);
}

.btn-purple.quick-action-btn {
    background: linear-gradient(135deg, #6f42c1 0%, #8e44ad 100%) !important;
    color: white !important;
    border: none !important;
    
}

/* === Общий .btn-purple (используется в 20+ местах: branch_schedule, admin_schedule, admin_roles, settings_child_template, branches и др.) === */
.btn.btn-purple,
button.btn-purple,
a.btn-purple {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px;
    padding: 8px 18px;
    font-weight: 600;
    font-size: 0.92rem;
    line-height: 1.3;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.30);
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.btn.btn-purple:hover,
button.btn-purple:hover,
a.btn-purple:hover {
    background: linear-gradient(135deg, #5a6fd6 0%, #6c4191 100%) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(102, 126, 234, 0.40);
}
.btn.btn-purple:active,
button.btn-purple:active,
a.btn-purple:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.30);
}
.btn.btn-purple:focus,
button.btn-purple:focus,
a.btn-purple:focus {
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.30), 0 0 0 3px rgba(102, 126, 234, 0.25);
    outline: none;
}
.btn.btn-purple:disabled,
.btn.btn-purple.disabled,
button.btn-purple:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}
.btn.btn-sm.btn-purple {
    padding: 5px 12px;
    font-size: 0.82rem;
    border-radius: 6px;
}
.btn.btn-lg.btn-purple {
    padding: 12px 24px;
    font-size: 1.05rem;
    border-radius: 10px;
}

.btn-dark.quick-action-btn {
    background: linear-gradient(135deg, #0f4c81 0%, #1a237e 100%) !important;
    color: white !important;
    border: none !important;
    
}

/* Контейнер быстрых действий */
.quick-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: flex-start !important;
}

/* === КНОПКА ALFACRM (маленькая версия для карточек) === */
.alfacrm-btn:not(.quick-action-btn) {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: white;
    color: #374151;
    cursor: pointer;
    transition: var(--transition-fast);
    text-decoration: none;
}

.alfacrm-btn:not(.quick-action-btn):hover {
    background: var(--color-soft);
    border-color: var(--color-primary);
    color: var(--color-primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.alfacrm-btn:not(.quick-action-btn) i {
    font-size: 14px;
}

/* === БЕЙДЖИ С КАТЕГОРИЯМИ === */
.global-category-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 13px;
    font-family: var(--font-family-base);
    line-height: 1.2;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.global-category-badge i {
    font-size: var(--badge-icon-size);
    opacity: 0.9;
}

/* === COLLAPSIBLE BADGES (для мобильных) === */
.collapsible-badge {
    cursor: pointer;
    transition: var(--transition-fast);
    user-select: none;
    position: relative;
}

.collapsible-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.collapsible-badge:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Icon-only режим для узких экранов */
.icon-only-badge .badge-text {
    display: none;
}

.icon-only-badge {
    padding: 6px 8px;
    min-width: 32px;
    justify-content: center;
}

/* === КАРТОЧКИ V2 (для карточки ребенка) === */
.v2-card {
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-4);
    border: 1px solid var(--color-border);
    overflow: hidden;
}

.v2-card-header {
    background: var(--gradient-primary);
    color: white;
    padding: var(--space-4) var(--space-6);
    border-bottom: none;
}

.v2-card-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.v2-card-title i {
    font-size: var(--font-size-2xl);
}

.v2-card-body {
    padding: var(--space-6);
    background: var(--color-soft);
}

/* === ОБЛАСТЬ ЗАГРУЗКИ ФАЙЛОВ === */
.file-upload-area {
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    text-align: center;
    cursor: pointer;
    transition: var(--transition-fast);
    background: white;
}

.file-upload-area:hover {
    border-color: var(--color-primary);
    background: rgba(102, 126, 234, 0.02);
}

.file-upload-area i {
    font-size: 48px;
    color: var(--color-primary);
    margin-bottom: var(--space-3);
}

.file-upload-area.dragover {
    border-color: var(--color-success);
    background: rgba(34, 197, 94, 0.05);
}

/* === OVERLAY ДЛЯ DRAG & DROP === */
.files-drop-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(102, 126, 234, 0.9);
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.files-drop-overlay-content {
    text-align: center;
    color: white;
}

.files-drop-overlay-content i {
    font-size: 80px;
    margin-bottom: var(--space-4);
}

.files-drop-overlay-content div {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
}

/* ========================================
   5. КОМПОНЕНТЫ СТРАНИЦ
   ======================================== */

/* === DASHBOARD КОМПОНЕНТЫ === */

/* === WELCOME CARD - Приветственная шапка === */
.welcome-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border-radius: var(--radius-lg) !important;
    padding: 32px 40px !important;
    margin-bottom: var(--space-4) !important;
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.25) !important;
    position: relative !important;
    overflow: hidden !important;
    border: none !important;
    background-clip: padding-box !important;
}

/* Декоративные элементы фона */
.welcome-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.welcome-card::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -5%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

/* Анимированные частицы (опционально) */
.welcome-card .particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

.welcome-card .particle {
    position: absolute;
    /* Форма, цвет и анимация задаются через JavaScript */
}

/* ========================================
   ФОРМЫ ЧАСТИЦ (применяются через JavaScript)
   ======================================== */

/* Маленький круг */
.particle-circle-small {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
}

/* Средний круг */
.particle-circle-medium {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
}

/* Большой круг */
.particle-circle-large {
    width: 14px !important;
    height: 14px !important;
    border-radius: 50% !important;
}

/* Звездочка */
.particle-star {
    width: 12px !important;
    height: 12px !important;
    background: transparent !important;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%) !important;
}

/* Ромб */
.particle-diamond {
    width: 10px !important;
    height: 10px !important;
    transform: rotate(45deg) !important;
}

/* Квадрат */
.particle-square {
    width: 8px !important;
    height: 8px !important;
    border-radius: 2px !important;
}

/* Точка */
.particle-dot {
    width: 4px !important;
    height: 4px !important;
    border-radius: 50% !important;
}

/* Кольцо */
.particle-ring {
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    background: transparent !important;
    border: 2px solid currentColor !important;
}

/* Частица 1 - Круг маленький (фиолетовый) */
.welcome-card .particle:nth-child(1) {
    width: 8px;
    height: 8px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.6), rgba(118, 75, 162, 0.6));
    border-radius: 50%;
    top: 20%;
    left: 10%;
    box-shadow: 0 0 10px rgba(102, 126, 234, 0.5);
    /* Анимация применяется через JavaScript */
}

/* Частица 2 - Звездочка (золотая) */
.welcome-card .particle:nth-child(2) {
    width: 12px;
    height: 12px;
    background: transparent;
    top: 60%;
    left: 80%;
    filter: drop-shadow(0 0 8px rgba(254, 225, 64, 0.6));
    /* Анимация применяется через JavaScript */
}

.welcome-card .particle:nth-child(2)::before,
.welcome-card .particle:nth-child(2)::after {
    content: '';
    position: absolute;
    background: linear-gradient(135deg, rgba(254, 225, 64, 0.8), rgba(247, 112, 154, 0.8));
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.welcome-card .particle:nth-child(2)::before {
    width: 12px;
    height: 2px;
}

.welcome-card .particle:nth-child(2)::after {
    width: 2px;
    height: 12px;
}

/* Частица 3 - Круг большой (голубой) */
.welcome-card .particle:nth-child(3) {
    width: 14px;
    height: 14px;
    background: linear-gradient(135deg, rgba(79, 172, 254, 0.5), rgba(0, 242, 254, 0.5));
    border-radius: 50%;
    top: 80%;
    left: 30%;
    box-shadow: 0 0 12px rgba(79, 172, 254, 0.6);
    /* Анимация применяется через JavaScript */
}

/* Частица 4 - Квадрат повернутый (ромб, розовый) */
.welcome-card .particle:nth-child(4) {
    width: 10px;
    height: 10px;
    background: linear-gradient(135deg, rgba(240, 147, 251, 0.6), rgba(245, 87, 108, 0.6));
    transform: rotate(45deg);
    top: 40%;
    left: 70%;
    box-shadow: 0 0 10px rgba(240, 147, 251, 0.5);
    /* Анимация применяется через JavaScript */
}

/* Дополнительные частицы для разнообразия */

/* Частица 5 - Круг средний (зеленый) */
.welcome-card .particle:nth-child(5) {
    width: 9px;
    height: 9px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.6), rgba(34, 197, 94, 0.6));
    border-radius: 50%;
    top: 15%;
    left: 85%;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
    /* Анимация применяется через JavaScript */
}

/* Частица 6 - Звездочка 2 (оранжевая) */
.welcome-card .particle:nth-child(6) {
    width: 10px;
    height: 10px;
    background: transparent;
    top: 70%;
    left: 15%;
    filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.6));
    /* Анимация применяется через JavaScript */
}

.welcome-card .particle:nth-child(6)::before,
.welcome-card .particle:nth-child(6)::after {
    content: '';
    position: absolute;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.8), rgba(251, 146, 60, 0.8));
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.welcome-card .particle:nth-child(6)::before {
    width: 10px;
    height: 2px;
}

.welcome-card .particle:nth-child(6)::after {
    width: 2px;
    height: 10px;
}

/* Частица 7 - Круг маленький 2 (красный) */
.welcome-card .particle:nth-child(7) {
    width: 7px;
    height: 7px;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.6), rgba(220, 38, 38, 0.6));
    border-radius: 50%;
    top: 35%;
    left: 25%;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
    /* Анимация применяется через JavaScript */
}

/* Частица 8 - Квадрат 2 (ромб, белый/светлый) */
.welcome-card .particle:nth-child(8) {
    width: 8px;
    height: 8px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(226, 232, 240, 0.7));
    transform: rotate(45deg);
    top: 55%;
    left: 90%;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
    /* Анимация применяется через JavaScript */
}

@keyframes float {
    0%, 100% {
        transform: translateY(0) translateX(0);
        opacity: 0.3;
    }
    25% {
        transform: translateY(-20px) translateX(10px);
        opacity: 0.6;
    }
    50% {
        transform: translateY(-10px) translateX(-10px);
        opacity: 0.4;
    }
    75% {
        transform: translateY(-30px) translateX(5px);
        opacity: 0.5;
    }
}

/* Анимация для квадрата с вращением */
@keyframes floatRotate {
    0%, 100% {
        transform: translateY(0) translateX(0) rotate(45deg);
        opacity: 0.35;
    }
    25% {
        transform: translateY(-25px) translateX(15px) rotate(90deg);
        opacity: 0.6;
    }
    50% {
        transform: translateY(-15px) translateX(-12px) rotate(135deg);
        opacity: 0.45;
    }
    75% {
        transform: translateY(-35px) translateX(8px) rotate(180deg);
        opacity: 0.55;
    }
}

/* Анимация 1: Медленное движение вверх */
@keyframes floatUp {
    0%, 100% {
        transform: translateY(0);
        opacity: 0.4;
    }
    50% {
        transform: translateY(-40px);
        opacity: 0.7;
    }
}

/* Анимация 2: Мерцание + легкое движение */
@keyframes floatTwinkle {
    0%, 100% {
        transform: translateY(0) translateX(0) scale(1);
        opacity: 0.3;
    }
    25% {
        transform: translateY(-15px) translateX(8px) scale(1.2);
        opacity: 0.8;
    }
    50% {
        transform: translateY(-8px) translateX(-5px) scale(0.9);
        opacity: 0.4;
    }
    75% {
        transform: translateY(-20px) translateX(10px) scale(1.1);
        opacity: 0.9;
    }
}

/* Анимация 3: Волнообразное движение */
@keyframes floatWave {
    0%, 100% {
        transform: translateY(0) translateX(0);
        opacity: 0.3;
    }
    25% {
        transform: translateY(-10px) translateX(20px);
        opacity: 0.5;
    }
    50% {
        transform: translateY(-25px) translateX(0);
        opacity: 0.7;
    }
    75% {
        transform: translateY(-10px) translateX(-20px);
        opacity: 0.5;
    }
}

/* Анимация 4: Быстрое движение */
@keyframes floatFast {
    0%, 100% {
        transform: translateY(0) translateX(0);
        opacity: 0.38;
    }
    33% {
        transform: translateY(-30px) translateX(12px);
        opacity: 0.7;
    }
    66% {
        transform: translateY(-15px) translateX(-8px);
        opacity: 0.5;
    }
}

/* Анимация 5: Пульсация */
@keyframes floatPulse {
    0%, 100% {
        transform: translateY(0) scale(1);
        opacity: 0.4;
    }
    25% {
        transform: translateY(-12px) scale(1.3);
        opacity: 0.8;
    }
    50% {
        transform: translateY(-20px) scale(0.8);
        opacity: 0.3;
    }
    75% {
        transform: translateY(-8px) scale(1.2);
        opacity: 0.7;
    }
}

/* Анимация 6: Диагональное движение */
@keyframes floatDiagonal {
    0%, 100% {
        transform: translate(0, 0);
        opacity: 0.42;
    }
    25% {
        transform: translate(15px, -20px);
        opacity: 0.7;
    }
    50% {
        transform: translate(30px, -35px);
        opacity: 0.5;
    }
    75% {
        transform: translate(15px, -15px);
        opacity: 0.6;
    }
}

/* Анимация 8 - Подпрыгивание */
@keyframes floatBounce {
    0%, 100% {
        transform: translateY(0);
        opacity: 0.4;
    }
    25% {
        transform: translateY(-25px);
        opacity: 0.7;
    }
    50% {
        transform: translateY(-10px);
        opacity: 0.5;
    }
    75% {
        transform: translateY(-30px);
        opacity: 0.6;
    }
}

.welcome-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    position: relative;
    z-index: 1;
}

.welcome-title {
    font-size: 2rem;
    font-weight: var(--font-weight-bold);
    color: white;
    margin: 0;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    letter-spacing: -0.5px;
}

.current-datetime {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: rgba(255, 255, 255, 0.95);
    font-size: 1rem;
    font-weight: var(--font-weight-medium);
}

.current-datetime i {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.1em;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

.current-datetime span {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Dashboard Cards */
.dashboard-card {
    background: white;
    border-radius: var(--radius-lg);
    /* Фейковый бордер через box-shadow + обычная тень.
       Это убирает классический баг nested-border-radius: когда у родителя
       есть border 1px, его внутренний радиус == outer-1px, и любая дочерняя
       цветная плашка с radius == outer вылезает за углы и видна белая «подложка».
       С box-shadow inner-radius == outer-radius, и дочка идеально совпадает. */
    box-shadow: 0 0 0 1px var(--color-border), var(--shadow-sm);
    border: none;
    margin-bottom: var(--space-4);
    transition: var(--transition-fast);
    overflow: visible;
    position: relative;
    z-index: 1;
}

.dashboard-card:hover {
    box-shadow: 0 0 0 1px var(--color-border), var(--shadow-md);
}

.dashboard-card .card-header {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-4);
    /* Родитель без border → inner-radius == outer-radius, используем тот же */
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* === ОБЫЧНЫЕ CARD-TITLE (без фона) === */
.dashboard-card .card-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.dashboard-card .card-title i {
    font-size: 1.2em;
    opacity: 0.8;
}

/* Поиск детей - с градиентом */
/* Поиск детей - компактный дизайн */
.search-card {
    border: none !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    overflow: visible !important;
    z-index: auto !important;
}

.search-card .card-body {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
    color: var(--color-text) !important;
    border-radius: var(--radius-lg) !important;
    padding: 1.25rem 1.5rem !important;
    position: relative !important;
    border: 1px solid var(--color-border) !important;
    overflow: visible !important;
    z-index: auto !important;
}

.search-card .card-title {
    color: var(--color-text) !important;
    font-size: 1.15rem !important;
    font-weight: var(--font-weight-semibold) !important;
    margin-bottom: 0.75rem !important;
    text-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

.search-card .card-title i {
    color: var(--color-primary) !important;
    opacity: 1 !important;
    font-size: 1.15rem !important;
    filter: none !important;
}

/* Input group - кнопка внутри поля */
.search-card .input-group {
    position: relative !important;
    display: block !important;
}

.search-card .form-control {
    padding: 0.5rem 4rem 0.5rem 0.875rem !important;
}

.search-card .form-control:hover {
    border-color: #cbd5e1 !important;
}

.search-card .btn-primary {
    position: absolute !important;
    right: 3px !important;
    top: 3px !important;
    bottom: 3px !important;
    transform: none !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border: none !important;
    color: white !important;
    padding: 0 1rem !important;
    border-radius: calc(var(--radius-md) - 2px) !important;
    transition: all 0.2s ease !important;
    z-index: 10 !important;
    min-width: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 1px 3px rgba(102, 126, 234, 0.3) !important;
}

.search-card .btn-primary:hover {
    background: linear-gradient(135deg, #5568d3 0%, #6a3d91 100%) !important;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4) !important;
}

.search-card .btn-primary i {
    font-size: 0.9rem !important;
}

/* Цвета иконок для обычных заголовков */
.card-title .text-primary {
    color: var(--color-primary) !important;
}

.card-title .text-warning {
    color: #f59e0b !important;
}

.card-title .text-success {
    color: #10b981 !important;
}

.card-title .text-info {
    color: #06b6d4 !important;
}

.card-title .text-danger {
    color: #ef4444 !important;
}

.dashboard-card .card-body {
    padding: var(--space-4);
}

/* Старые стили search-card удалены - используются новые стили выше (строки 1503-1554) */

.dashboard-search .btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-button-hover);
}

/* Tasks Section */
.tasks-section {
    border: 2px solid var(--color-border);
}

/* === CLICKABLE HEADERS (Сворачиваемые секции) === */
.clickable-header {
    cursor: pointer;
    user-select: none;
    transition: var(--transition-fast);
    position: relative;
    overflow: hidden;
    /* Родитель .dashboard-card теперь без border (бордер через box-shadow),
       поэтому inner-radius == outer-radius. Используем тот же. */
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
}

/* Когда вкладка закрыта - скруглить все углы */
.clickable-header[aria-expanded="false"],
.clickable-header.collapsed {
    border-radius: var(--radius-lg) !important;
}

/* Эффект блеска при hover */
.clickable-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    transition: left 0.5s ease;
    pointer-events: none;
}

.clickable-header:hover::before {
    left: 100%;
}

.clickable-header:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

/* Стили для разных секций с градиентами */
.tasks-section .clickable-header {
    background: var(--gradient-primary);
    color: white;
}

.admins-section .clickable-header {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

.birthdays-section .clickable-header {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: white;
}

.vacations-section .clickable-header {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    color: white;
}

.clickable-header .card-title {
    color: white;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.3px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.header-icon {
    color: white;
    margin-right: var(--space-2);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

/* Белый «чип» вокруг иконки в шапке секций (Дни рождения, Отпуска,
   График работы и пр. — везде, где clickable-header — цветной градиент).
   Делает белый fa-icon контрастным к фоновому градиенту. */
.clickable-header .header-icon,
.birthdays-section .clickable-header .header-icon,
.vacations-section .clickable-header .header-icon {
    width: 32px !important;
    height: 32px !important;
    background: rgba(255, 255, 255, 0.22) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    border-radius: 9px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    font-size: 0.95rem !important;
    margin-right: 10px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
    flex-shrink: 0 !important;
    filter: none !important;
}

.toggle-icon {
    transition: transform 0.3s ease;
    color: white;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.clickable-header[aria-expanded="true"] .toggle-icon {
    transform: rotate(180deg);
}

.clickable-header:hover .toggle-icon {
    transform: scale(1.1);
}

.clickable-header[aria-expanded="true"]:hover .toggle-icon {
    transform: rotate(180deg) scale(1.1);
}

/* === INNER CARDS (Подзаголовки задач) === */
.inner-card {
    background: white;
    border-radius: 16px !important; /* Увеличено скругление */
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important; /* Более выразительная тень */
    border: none !important; /* Убрана граница */
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    margin-bottom: 20px !important; /* Добавлен отступ между карточками */
}

.inner-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
    transform: translateY(-4px) !important; /* Поднятие при hover */
}

.inner-card-header {
    padding: 16px 20px !important; /* Увеличены отступы */
    border-bottom: none !important; /* Убрана граница */
    transition: all 0.3s ease !important;
    border-radius: 16px 16px 0 0 !important;
    margin: 0 !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Эффект блеска на заголовках */
.inner-card-header::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s;
}

.inner-card:hover .inner-card-header::after {
    left: 100%;
}

/* Улучшенная типографика заголовков */
.inner-card-header .card-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.inner-card-header i {
    font-size: 18px !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* Добавляем больше пространства между карточками */
.dashboard-card .row > [class*="col-"] {
    padding-left: 12px !important;
    padding-right: 12px !important;
    margin-bottom: 24px !important; /* Вертикальный отступ между рядами */
}

/* Улучшенный body карточки */
.inner-card .card-body {
    padding: 20px !important; /* Увеличены отступы */
}

/* Дополнительный отступ снизу для карточек */
.inner-card {
    margin-bottom: 0 !important;
}

/* Отступы для секций на Dashboard */
.dashboard-card.tasks-section,
.dashboard-card.admins-section,
.dashboard-card.birthdays-section,
.dashboard-card.vacations-section {
    margin-bottom: 32px !important; /* Больше пространства между секциями */
}

/* Просроченные задачи - яркий красный градиент с паттерном */
.inner-card-header.overdue-header {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 50%, #b91c1c 100%) !important;
    background-size: 200% 200% !important;
    animation: gradientShift 3s ease infinite !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4) !important;
}

.inner-card-header.overdue-header .card-title,
.inner-card-header.overdue-header .day-title,
.inner-card-header.overdue-header i {
    color: white !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

.inner-card-header.overdue-header h6 {
    color: white !important;
    margin: 0 !important;
}

/* Задачи на сегодня - яркий синий градиент */
.inner-card-header.today-tasks-header {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 50%, #1d4ed8 100%) !important;
    background-size: 200% 200% !important;
    animation: gradientShift 3s ease infinite !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4) !important;
}

.inner-card-header.today-tasks-header .card-title,
.inner-card-header.today-tasks-header .day-title,
.inner-card-header.today-tasks-header i {
    color: white !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

.inner-card-header.today-tasks-header h6 {
    color: white !important;
    margin: 0 !important;
}

/* Задачи на завтра - яркий зеленый градиент */
.inner-card-header.tomorrow-tasks-header {
    background: linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%) !important;
    background-size: 200% 200% !important;
    animation: gradientShift 3s ease infinite !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4) !important;
}

.inner-card-header.tomorrow-tasks-header .card-title,
.inner-card-header.tomorrow-tasks-header .day-title,
.inner-card-header.tomorrow-tasks-header i {
    color: white !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

.inner-card-header.tomorrow-tasks-header h6 {
    color: white !important;
    margin: 0 !important;
}

/* Активные задачи - яркий оранжевый градиент */
.inner-card-header.active-tasks-header {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 50%, #c2410c 100%) !important;
    background-size: 200% 200% !important;
    animation: gradientShift 3s ease infinite !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.4) !important;
}

.inner-card-header.active-tasks-header .card-title,
.inner-card-header.active-tasks-header .day-title,
.inner-card-header.active-tasks-header i {
    color: white !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

.inner-card-header.active-tasks-header h6 {
    color: white !important;
    margin: 0 !important;
}

/* Анимация градиента */
@keyframes gradientShift {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

/* Заголовки администраторов - желтый/золотой градиент */
/* Сегодня — зелёный: активный рабочий день */
.inner-card-header.admin-today-header {
    background: linear-gradient(135deg, #059669 0%, #047857 60%, #065f46 100%) !important;
    color: white !important;
    box-shadow: 0 4px 14px rgba(5, 150, 105, 0.35) !important;
    border-bottom: none !important;
}

.inner-card-header.admin-today-header .card-title,
.inner-card-header.admin-today-header .day-title,
.inner-card-header.admin-today-header i {
    color: white !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
}

.inner-card-header.admin-today-header h6 {
    color: white !important;
    margin: 0 !important;
}

/* Завтра — синий/индиго: предстоящий день */
.inner-card-header.admin-tomorrow-header {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 60%, #1d4ed8 100%) !important;
    color: white !important;
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.35) !important;
    border-bottom: none !important;
}

.inner-card-header.admin-tomorrow-header .card-title,
.inner-card-header.admin-tomorrow-header .day-title,
.inner-card-header.admin-tomorrow-header i {
    color: white !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
}

.inner-card-header.admin-tomorrow-header h6 {
    color: white !important;
    margin: 0 !important;
}

/* Заголовки дней рождения - розовый градиент */
.inner-card-header.birthday-current-header {
    background: linear-gradient(135deg, #ec4899 0%, #db2777 50%, #be185d 100%) !important;
    background-size: 200% 200% !important;
    animation: gradientShift 3s ease infinite !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(236, 72, 153, 0.4) !important;
}

.inner-card-header.birthday-current-header .card-title,
.inner-card-header.birthday-current-header .day-title,
.inner-card-header.birthday-current-header i {
    color: white !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

.inner-card-header.birthday-current-header h6 {
    color: white !important;
    margin: 0 !important;
}

.inner-card-header.birthday-next-header {
    background: linear-gradient(135deg, #f472b6 0%, #ec4899 50%, #db2777 100%) !important;
    background-size: 200% 200% !important;
    animation: gradientShift 3s ease infinite !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(244, 114, 182, 0.4) !important;
}

.inner-card-header.birthday-next-header .card-title,
.inner-card-header.birthday-next-header .day-title,
.inner-card-header.birthday-next-header i {
    color: white !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

.inner-card-header.birthday-next-header h6 {
    color: white !important;
    margin: 0 !important;
}

.day-title {
    font-weight: var(--font-weight-semibold);
    color: inherit;
}

/* === BIRTHDAY CARD (Дни рождения сегодня) === */
.birthday-card .card-body {
    padding: 20px !important;
    background: var(--gradient-warning) !important;
    color: white !important;
    border-radius: var(--radius-lg) !important;
}

.birthday-card .card-title {
    color: white !important;
    font-weight: var(--font-weight-semibold) !important;
    margin-bottom: var(--space-4) !important;
}

.birthday-card .card-title i {
    color: white !important;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.birthday-content {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-4);
    justify-content: center;
}

.birthday-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-md);
    transition: var(--transition-fast);
    min-width: 280px;
    flex: 0 1 auto;
}

.birthday-item:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateX(10px);
}

.birthday-name {
    font-size: 1.1rem !important;
    font-weight: var(--font-weight-semibold) !important;
    margin-bottom: 5px !important;
    color: white !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
    opacity: 1 !important;
}

.birthday-details {
    font-size: 0.9rem;
    opacity: 0.9;
    color: white;
}

.birthday-age {
    font-weight: var(--font-weight-medium);
    color: white;
}

.birthday-position {
    color: rgba(255, 255, 255, 0.8);
}

.birthday-icon {
    font-size: 1.5rem;
    color: white;
}

.no-birthdays {
    text-align: center;
    padding: 30px 20px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.no-birthdays i {
    font-size: 2rem;
    margin-bottom: 10px;
    color: rgba(255, 255, 255, 0.7) !important;
}

.no-birthdays p {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 1rem;
}

/* Task Items */
.task-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 18px 20px !important; /* Увеличены отступы */
    margin-bottom: 16px !important; /* Больше пространства между задачами */
    background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%) !important;
    border: 2px solid rgba(102, 126, 234, 0.12) !important; /* Более заметная граница */
    border-left: 5px solid #667eea !important; /* Толще левая граница */
    border-radius: 12px !important; /* Более скругленные углы */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important; /* Более выразительная тень */
}

.task-item:last-child {
    margin-bottom: 0 !important;
}

.task-item:hover {
    background: linear-gradient(135deg, #fafbfc 0%, #f0f4f8 100%) !important;
    transform: translateX(8px) translateY(-3px) !important; /* Больше движения */
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.2) !important; /* Более выразительная тень */
    border-left-color: #5568d3 !important;
    border-color: rgba(102, 126, 234, 0.25) !important;
}

/* Просроченные задачи */
.task-item.overdue-task,
.task-item.overdue,
.task-item[data-status="overdue"] {
    border-left-color: #ef4444 !important;
    border-color: rgba(239, 68, 68, 0.15) !important;
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%) !important;
}

.task-item.overdue-task:hover,
.task-item.overdue:hover,
.task-item[data-status="overdue"]:hover {
    border-left-color: #dc2626 !important;
    border-color: rgba(239, 68, 68, 0.25) !important;
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%) !important;
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.25) !important;
}

/* Задачи на сегодня */
.task-item.today-task,
.task-item.today,
.task-item[data-status="today"] {
    border-left-color: #3b82f6 !important;
    border-color: rgba(59, 130, 246, 0.15) !important;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
}

.task-item.today-task:hover,
.task-item.today:hover,
.task-item[data-status="today"]:hover {
    border-left-color: #2563eb !important;
    border-color: rgba(59, 130, 246, 0.25) !important;
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%) !important;
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.25) !important;
}

/* Задачи на завтра */
.task-item.tomorrow,
.task-item[data-status="tomorrow"] {
    border-left-color: #10b981 !important;
    border-color: rgba(16, 185, 129, 0.15) !important;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%) !important;
}

.task-item.tomorrow:hover,
.task-item[data-status="tomorrow"]:hover {
    border-left-color: #059669 !important;
    border-color: rgba(16, 185, 129, 0.25) !important;
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%) !important;
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.25) !important;
}

/* Выполненные задачи */
.task-item.completed,
.task-item[data-status="completed"] {
    border-left-color: #6b7280 !important;
    background: #f9fafb !important;
    opacity: 0.7 !important;
}

.task-item.completed:hover,
.task-item[data-status="completed"]:hover {
    border-left-color: #4b5563 !important;
    background: #f3f4f6 !important;
    opacity: 0.8 !important;
}

/* Empty state для карточек задач на дашборде */
.task-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 28px 16px;
    text-align: center;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(248,250,252,0.9) 100%);
    border: 2px dashed rgba(102,126,234,0.2);
}

.task-empty-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 14px;
}

.today-empty .task-empty-icon {
    background: linear-gradient(135deg, rgba(40,167,69,0.12) 0%, rgba(32,201,151,0.12) 100%);
    color: #28a745;
    border: 2px solid rgba(40,167,69,0.2);
}

.tomorrow-empty .task-empty-icon {
    background: linear-gradient(135deg, rgba(23,162,184,0.12) 0%, rgba(111,66,193,0.12) 100%);
    color: #17a2b8;
    border: 2px solid rgba(23,162,184,0.2);
}

.active-empty .task-empty-icon {
    background: linear-gradient(135deg, rgba(99,102,241,0.12) 0%, rgba(139,92,246,0.12) 100%);
    color: #6366f1;
    border: 2px solid rgba(99,102,241,0.2);
}

.task-empty-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: #4a5568;
    margin-bottom: 4px;
}

.task-empty-subtitle {
    font-size: 0.8rem;
    color: #a0aec0;
    margin-bottom: 0;
}

/* Кнопка создания задачи (compact) */
.modern-create-task-btn-compact {
    border-radius: 10px !important;
    padding: 8px 20px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    border: none !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    box-shadow: 0 3px 8px rgba(102, 126, 234, 0.3) !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
    color: white !important;
    cursor: pointer;
}

.modern-create-task-btn-compact .btn-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modern-create-task-btn-compact .btn-content i {
    font-size: 14px;
}

.modern-create-task-btn-compact .btn-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.05) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.modern-create-task-btn-compact:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.45) !important;
    color: white !important;
}

.modern-create-task-btn-compact:hover .btn-overlay {
    opacity: 1 !important;
}

.modern-create-task-btn-compact:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 6px rgba(102, 126, 234, 0.3) !important;
}

.modern-create-task-btn-compact:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.25), 0 3px 8px rgba(102, 126, 234, 0.3) !important;
    color: white !important;
}

.task-info {
    flex: 1;
    min-width: 0;
}

.task-title {
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--color-text);
    margin-bottom: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.task-details {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--font-size-sm);
}

.task-priority {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
}

.task-priority.priority-3 {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

.task-priority.priority-2 {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}

.task-priority.priority-1 {
    background: rgba(107, 114, 128, 0.1);
    color: #6b7280;
}

.task-due-date {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--color-muted);
}

.task-due-date.overdue {
    color: #dc2626;
    font-weight: var(--font-weight-semibold);
}

.task-assignee-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(99, 102, 241, 0.1);
    color: #6366f1;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.task-actions {
    display: flex;
    gap: var(--space-2);
}

.task-actions .btn {
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-size: 13px;
}

/* === АДМИНИСТРАТОРЫ === */
.branch-schedule {
    margin-bottom: 16px;
    padding: 14px 16px;
    background: #f8fafc;
    border-radius: var(--radius-md);
    border: 1px solid #e5e7eb;
    border-left: 4px solid #667eea;
}

.branch-schedule:last-child {
    margin-bottom: 0;
}

.branch-name {
    color: #374151;
    font-weight: var(--font-weight-bold);
    margin-bottom: 10px;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.branch-name::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gradient-primary);
    flex-shrink: 0;
}

.admin-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    margin-bottom: 6px;
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    transition: all 0.2s ease;
    gap: 12px;
}

.admin-item:last-child {
    margin-bottom: 0;
}

.admin-item:hover {
    background: #f0f4ff;
    border-color: rgba(102, 126, 234, 0.3);
    transform: translateX(4px);
    box-shadow: 0 2px 10px rgba(102, 126, 234, 0.12);
}

.admin-name {
    font-weight: var(--font-weight-semibold);
    color: #1f2937;
    font-size: 0.95rem;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-time {
    font-size: 0.85rem;
    color: #059669;
    background: #d1fae5;
    border: 1px solid #a7f3d0;
    padding: 3px 10px;
    border-radius: 20px;
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: 0.3px;
}

/* Выходной день */
.admin-item.day-off {
    background: #f9fafb;
    border-color: #e5e7eb;
    opacity: 0.75;
}

.admin-item.day-off:hover {
    background: #f3f4f6;
    transform: none;
    box-shadow: none;
}

.admin-item.day-off .admin-name {
    color: #9ca3af;
}

.day-off-time {
    font-size: 0.8rem !important;
    color: #9ca3af !important;
    background: #f3f4f6 !important;
    border: 1px solid #e5e7eb !important;
    padding: 3px 10px !important;
    border-radius: 20px !important;
    font-weight: var(--font-weight-medium) !important;
    font-style: normal !important;
    white-space: nowrap;
}

/* === ДНИ РОЖДЕНИЯ ПО МЕСЯЦАМ === */
.birthday-month-item,
div.birthday-month-item {
    display: flex !important;
    align-items: center !important;
    padding: 14px 16px !important;
    margin-bottom: 8px !important;
    background: #ffffff !important;
    border-radius: 10px !important;
    border: 1px solid rgba(236, 72, 153, 0.15) !important;
    border-left: 4px solid #ec4899 !important;
    transition: all 0.2s ease !important;
    position: relative !important;
    box-shadow: 0 1px 4px rgba(236, 72, 153, 0.08) !important;
    overflow: hidden !important;
    gap: 14px !important;
}

/* Декоративный объёмный тортик-эмодзи справа в плашке именинника.
   Используем эмодзи (а не FA), чтобы сохранить родной цветной color-glyph. */
.birthday-month-item::after {
    content: '🎂';
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 1.6rem !important;
    line-height: 1 !important;
    opacity: 1 !important;
    pointer-events: none !important;
    filter: drop-shadow(0 2px 4px rgba(236, 72, 153, 0.25)) !important;
    transition: transform 0.2s ease, filter 0.2s ease !important;
}

.birthday-month-item:hover {
    background: #fdf2f8 !important;
    border-left-color: #db2777 !important;
    border-color: rgba(236, 72, 153, 0.25) !important;
    transform: translateX(4px) !important;
    box-shadow: 0 4px 14px rgba(236, 72, 153, 0.15) !important;
}

.birthday-month-item:hover::after {
    transform: translateY(-50%) scale(1.15) rotate(-6deg) !important;
    filter: drop-shadow(0 4px 8px rgba(236, 72, 153, 0.4)) !important;
}

/* Сегодняшний день рождения */
.birthday-month-item.today-birthday {
    background: linear-gradient(135deg, #fff7ed 0%, #fef3c7 100%) !important;
    border-left-color: #f59e0b !important;
    border-color: rgba(245, 158, 11, 0.25) !important;
    box-shadow: 0 2px 12px rgba(245, 158, 11, 0.2) !important;
    animation: birthdayPulse 2.5s ease-in-out infinite !important;
}

.birthday-month-item.today-birthday::after {
    content: '🎉' !important;
    opacity: 1 !important;
    filter: drop-shadow(0 2px 6px rgba(245, 158, 11, 0.45)) !important;
    animation: birthdayBounce 2s ease-in-out infinite !important;
}

@keyframes birthdayPulse {
    0%, 100% { box-shadow: 0 2px 12px rgba(245, 158, 11, 0.2); }
    50% { box-shadow: 0 4px 20px rgba(245, 158, 11, 0.38); }
}

@keyframes birthdayBounce {
    0%, 100% { transform: translateY(-50%) scale(1); }
    50% { transform: translateY(-58%) scale(1.15); }
}

/* Дата (число месяца) — компактный бейдж */
.birthday-date {
    font-size: 1.6rem !important;
    font-weight: 800 !important;
    color: #7c3aed !important;
    min-width: 52px !important;
    width: 52px !important;
    height: 52px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    flex-shrink: 0 !important;
    border-radius: 10px !important;
    background: rgba(124, 58, 237, 0.08) !important;
    border: 1.5px solid rgba(124, 58, 237, 0.2) !important;
    line-height: 1 !important;
    margin-right: 0 !important;
}

/* Информация о дне рождения */
.birthday-info {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    min-width: 0 !important;
    padding-right: 30px !important;
}

/* Имя */
.birthday-month-item .birthday-name {
    font-size: 1rem !important;
    font-weight: var(--font-weight-semibold) !important;
    color: #1f2937 !important;
    margin-bottom: 0 !important;
    text-shadow: none !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Должность */
.birthday-month-item .birthday-position {
    font-size: 0.82rem !important;
    color: #6b7280 !important;
    font-weight: var(--font-weight-normal) !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.birthday-month-item .birthday-position::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #d1d5db;
    flex-shrink: 0;
}

/* Сегодняшний ДР */
.birthday-month-item.today-birthday .birthday-name {
    color: #92400e !important;
    font-weight: 700 !important;
}

.birthday-month-item.today-birthday .birthday-position {
    color: #b45309 !important;
}

.birthday-month-item.today-birthday .birthday-date {
    color: #d97706 !important;
    background: rgba(245, 158, 11, 0.12) !important;
    border-color: rgba(245, 158, 11, 0.35) !important;
}

/* Индикатор "сегодня" — маленькая звёздочка */
.birthday-today-indicator {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.4) !important;
}

.birthday-today-indicator i {
    font-size: 11px !important;
    color: white !important;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-6px); }
    60% { transform: translateY(-3px); }
}

/* === ОТПУСКА === */
.vacation-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.vacation-item {
    background: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 100%);
    border-radius: var(--radius-md);
    padding: 18px;
    border-left: 4px solid #f59e0b;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.15);
    transition: var(--transition-fast);
}

.vacation-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(245, 158, 11, 0.25);
}

.vacation-info {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.vacation-user {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
}

.vacation-user strong {
    color: var(--color-text);
    font-weight: var(--font-weight-bold);
}

.vacation-type {
    color: var(--color-muted);
    font-style: italic;
    font-size: 0.9em;
}

.vacation-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-left: 30px;
}

.vacation-branch,
.vacation-dates {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    color: var(--color-text);
}

.vacation-dates .days-left {
    color: #ef4444;
    font-weight: var(--font-weight-semibold);
    font-size: 0.9em;
}

.vacation-replacement {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 30px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: var(--radius-md);
    border: 1px solid rgba(46, 204, 113, 0.2);
}

.vacation-replacement.no-replacement {
    border-color: rgba(231, 76, 60, 0.2);
    background: rgba(255, 235, 235, 0.7);
}

.replacement-label {
    color: var(--color-muted);
    font-size: 0.95em;
}

.vacation-replacement strong {
    color: #22c55e;
    font-weight: var(--font-weight-semibold);
}

.no-replacement-text {
    color: #ef4444;
    font-weight: var(--font-weight-semibold);
}

.no-vacations {
    text-align: center;
    padding: 40px;
    background: linear-gradient(135deg, #f0fff4 0%, #e8f5e8 100%);
    border-radius: var(--radius-lg);
    border: 2px dashed #22c55e;
}

.no-vacations i {
    font-size: 3rem;
    color: #22c55e;
    margin-bottom: 15px;
}

.no-vacations p {
    font-size: 1.1rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
}

/* ГЛОБАЛЬНОЕ ПРАВИЛО: все модальные окна должны показывать dropdown */
.modal-body {
    overflow: visible !important;
}

.modal-content {
    overflow: visible !important;
    position: relative !important;
    z-index: auto !important;
}

.modal-dialog {
    overflow: visible !important;
    position: relative !important;
    z-index: auto !important;
}

.modal {
    overflow-y: auto !important;
}

.modal.show {
    overflow-y: auto !important;
}

.modal.fade.show {
    overflow-y: auto !important;
}

/* Убеждаемся, что модальное окно не создает новый stacking context для fixed элементов */
.modal-backdrop {
    z-index: 1040 !important;
}

.modal {
    z-index: 1050 !important;
}

/* Удалено - перезаписывало z-index из JavaScript */

/* Для card-body и других контейнеров с custom-select */
.card-body:has(.custom-select-container),
.row:has(.custom-select-container),
.col:has(.custom-select-container),
[class*="col-"]:has(.custom-select-container),
.mb-3:has(.custom-select-container),
form:has(.custom-select-container),
.modal-body:has(.custom-select-container),
.modal-content:has(.custom-select-container) {
    overflow: visible !important;
}

/* Для всех контейнеров Bootstrap */
.container:has(.custom-select-container),
.container-fluid:has(.custom-select-container) {
    overflow: visible !important;
}

/* Для table-responsive с custom-select */
.table-responsive:has(.custom-select-container) {
    overflow: visible !important;
}

/* Для card с custom-select */
.card:has(.custom-select-container) {
    overflow: visible !important;
}

.card:has(.custom-select-container) .card-body {
    overflow: visible !important;
}

/* Стили для модального окна отпусков */
#vacationModal .modal-body {
    overflow: visible !important;
    min-height: 400px;
}

#vacationModal .modal-content {
    overflow: visible !important;
}

#vacationModal .modal-dialog {
    overflow: visible !important;
}

#vacationModal select.form-control,
#vacationModal .form-select {
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 14px;
    transition: all 0.3s ease;
    background: white;
    color: #1f2937;
}

#vacationModal select.form-control:focus,
#vacationModal .form-select:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    outline: none;
}

#vacationModal input.form-control {
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 14px;
    transition: all 0.3s ease;
}

#vacationModal input.form-control:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    outline: none;
}

/* Statistics Cards */
.stat-card {
    background: white;
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
    transition: var(--transition-fast);
}

.stat-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
}

.stat-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: var(--space-3);
}

.stat-icon.children {
    background: linear-gradient(135deg, #dbeafe 0%, #3b82f6 100%);
    color: #1e40af;
}

.stat-icon.tasks {
    background: linear-gradient(135deg, #fef3c7 0%, #fbbf24 100%);
    color: #92400e;
}

.stat-icon.specialists {
    background: linear-gradient(135deg, #d1fae5 0%, #10b981 100%);
    color: #065f46;
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 4px;
}

.stat-label {
    font-size: var(--font-size-sm);
    color: var(--color-muted);
    font-weight: var(--font-weight-medium);
}

/* Modern Button Compact */
.modern-btn-compact {
    padding: 8px 16px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    background: var(--gradient-primary);
    border: none;
    color: white;
    box-shadow: 0 3px 8px rgba(99, 102, 241, 0.3);
    transition: var(--transition-fast);
}

.modern-btn-compact:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 12px rgba(99, 102, 241, 0.4);
}

/* Multiselect - объединенные стили */
.multiselect-container {
    position: relative;
    min-width: 280px;
}

.multiselect-input {
    cursor: pointer;
    min-height: 58px;
    min-width: 280px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    background: white;
    transition: var(--transition-fast);
}

.multiselect-input:hover {
    border-color: var(--color-primary);
}

.multiselect-placeholder {
    color: var(--color-muted);
    font-size: 16px;
}

.multiselect-tag {
    background: var(--gradient-primary);
    color: white;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: var(--transition-fast);
}

.multiselect-tag:hover {
    transform: scale(1.05);
}

.multiselect-tag i {
    cursor: pointer;
    opacity: 0.8;
    transition: var(--transition-fast);
}

.multiselect-tag i:hover {
    opacity: 1;
    transform: scale(1.2);
}

.multiselect-dropdown {
    display: none;
    position: absolute;
    z-index: 1070 !important;
    background: white;
    border: 2px solid var(--color-border);
    border-top: none;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    max-height: 250px;
    overflow-y: auto;
    width: 100%;
    top: 100%;
    left: 0;
    box-shadow: var(--shadow-lg);
}

.multiselect-dropdown.show {
    display: block;
}

.multiselect-search {
    padding: 8px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-soft);
}

.multiselect-search input {
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    padding: 6px 10px;
    font-size: 12px;
    width: 100%;
}

.multiselect-option {
    padding: 12px 16px;
    cursor: pointer;
    transition: var(--transition-fast);
    display: flex;
    align-items: center;
    gap: 12px;
}

.multiselect-option:hover {
    background: var(--color-soft);
}

.multiselect-option.selected {
    background: var(--color-primary);
    color: white;
}

.multiselect-option.selected {
    background: rgba(99, 102, 241, 0.1);
}

/* === STORAGE КОМПОНЕНТЫ === */

/* ==========================================
   STORAGE: Базовые компоненты
   ========================================== */

/* ВАЖНО: Стили кнопки закрытия модальных окон - максимальный приоритет */
.modal button.close,
button.close,
.close {
    background: transparent !important;
    border: 2px solid #e5e7eb !important;
    font-size: 20px !important;
    cursor: pointer !important;
    color: #6b7280 !important;
    padding: 0 !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    font-weight: 300 !important;
    line-height: 1 !important;
    opacity: 1 !important;
    box-shadow: none !important;
}

.modal button.close i,
button.close i,
.close i {
    font-size: 16px !important;
    line-height: 1 !important;
    margin: 0 !important;
}

.modal button.close:hover,
button.close:hover,
.close:hover {
    background: #ff6b6b !important;
    border-color: #ff6b6b !important;
    color: white !important;
    transform: rotate(90deg) scale(1.1) !important;
    box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3) !important;
    opacity: 1 !important;
}

.modal button.close:active,
button.close:active,
.close:active {
    transform: rotate(90deg) scale(0.95) !important;
}

.context-menu-item.submenu {
    position: relative;
}

.context-menu-item.submenu::after {
    content: '\f054';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-left: auto;
    font-size: 12px;
    opacity: 0.6;
    transition: all 0.2s ease;
}

.context-menu-item.submenu:hover::after {
    opacity: 1;
    transform: translateX(2px);
}

.submenu-items {
    position: absolute;
    left: calc(100% + 4px);
    top: -8px;
    background: var(--color-surface);
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0,0,0,0.05);
    min-width: 200px;
    display: none;
    z-index: 1001;
    padding: 8px;
    backdrop-filter: blur(10px);
    animation: submenuFadeIn 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.submenu-items::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(248,250,252,0.95));
    border-radius: var(--radius-lg);
    z-index: -1;
}

@keyframes submenuFadeIn {
    from {
        opacity: 0;
        transform: translateX(-8px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.context-menu-item.submenu:hover .submenu-items {
    display: block;
}

.submenu-item {
    padding: 12px 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--font-size-md);
    color: var(--color-text);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-medium);
    position: relative;
    overflow: hidden;
}

.submenu-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--gradient-primary);
    transform: scaleY(0);
    transition: transform 0.2s ease;
}

.submenu-item:hover::before {
    transform: scaleY(1);
}

.submenu-item:hover {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%);
    color: var(--color-primary);
    transform: translateX(4px);
}

.submenu-item i {
    width: 20px;
    text-align: center;
    color: var(--color-muted);
    font-size: var(--font-size-lg);
    transition: all 0.2s ease;
}

.submenu-item:hover i {
    color: var(--color-primary);
    transform: scale(1.1);
}

/* Стили для drag & drop */
.storage-item.dragging {
    opacity: 0.5;
    transform: scale(0.95);
    transition: all 0.2s ease;
}

.folder-item.drag-over {
    background: linear-gradient(135deg, #e0f2fe 0%, #b3e5fc 100%);
    border: 2px dashed #2196f3;
    transform: scale(1.02);
    box-shadow: 0 8px 25px rgba(33, 150, 243, 0.3);
    transition: all 0.3s ease;
}

.folder-item.drag-over .item-icon i {
    color: #2196f3;
    animation: bounce 0.6s ease-in-out infinite alternate;
}

@keyframes bounce {
    0% { transform: translateY(0); }
    100% { transform: translateY(-3px); }
}

.drag-preview {
    position: fixed;
    pointer-events: none;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 8px 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    font-size: 14px;
    color: #374151;
    backdrop-filter: blur(4px);
}

.storage-item:not(.folder-item).drag-disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.folder-tree-empty {
    padding: 20px;
    text-align: center;
    color: #6b7280;
    font-style: italic;
    font-size: 14px;
}

/* Стили для корзины */
.trash-item {
    display: flex;
    align-items: center;
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin-bottom: 8px;
    background: white;
    transition: all 0.2s ease;
}

.trash-item:hover {
    background: #f9fafb;
    border-color: #d1d5db;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.trash-item-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    margin-right: 12px;
    font-size: 18px;
}

.trash-item-icon.file {
    background: linear-gradient(135deg, #fef3c7 0%, #fbbf24 100%);
    color: #92400e;
}

.trash-item-icon.folder {
    background: linear-gradient(135deg, #dbeafe 0%, #3b82f6 100%);
    color: #1e40af;
}

.trash-item-info {
    flex: 1;
    min-width: 0;
}

.trash-item-name {
    font-weight: 600;
    color: #374151;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trash-item-meta {
    font-size: 12px;
    color: #6b7280;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.trash-item-actions {
    display: flex;
    gap: 8px;
    margin-left: 12px;
}

.trash-item-actions button {
    padding: 6px 12px;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}

.trash-restore-btn {
    background: #10b981;
    color: white;
}

.trash-restore-btn:hover {
    background: #059669;
    transform: translateY(-1px);
}

.trash-delete-btn {
    background: #ef4444;
    color: white;
}

.trash-delete-btn:hover {
    background: #dc2626;
    transform: translateY(-1px);
}

.trash-empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #6b7280;
}

.trash-empty-state i {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.days-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.days-badge.critical {
    background: #fee2e2;
    color: #dc2626;
}

.days-badge.warning {
    background: #fef3c7;
    color: #d97706;
}

.days-badge.normal {
    background: #dcfce7;
    color: #16a34a;
}

/* Стили для папки корзины */
.trash-folder {
    position: relative;
}

.trash-folder .trash-icon {
    background: transparent;
    color: #6b7280;
    border: none;
}

.trash-folder .trash-icon .fa-trash-alt {
    color: #f59e0b;
}

.trash-folder:hover .trash-icon {
    background: transparent;
    color: #374151;
    transform: scale(1.1);
}

.trash-folder .item-name {
    font-weight: 600;
}

.trash-folder.drag-over {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    border: 2px dashed #3b82f6;
    transform: scale(1.02);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
}

.trash-folder.drag-over .trash-icon i {
    color: #3b82f6;
    animation: shake 0.6s ease-in-out infinite;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-2px); }
    75% { transform: translateX(2px); }
}

/* Стили для файлов в корзине */
.trash-file-item {
    opacity: 0.8;
    position: relative;
}

.trash-file-item::before {
    content: '🗑️';
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 12px;
    opacity: 0.7;
}

.trash-file-item .item-meta {
    color: #dc2626;
    font-weight: 500;
}

.days-remaining {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    margin-left: 8px;
}

.days-remaining.critical {
    background: #fee2e2;
    color: #dc2626;
}

.days-remaining.warning {
    background: #fef3c7;
    color: #d97706;
}

.days-remaining.normal {
    background: #dcfce7;
    color: #16a34a;
}

/* Стили для модального окна настроек загрузки */
.selected-files-preview {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 15px;
    background: #f9f9f9;
}

.files-list {
    margin-bottom: 15px;
}

.file-preview-item {
    display: flex;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #e8e8e8;
}

.file-preview-item:last-child {
    border-bottom: none;
}

.file-preview-item i {
    margin-right: 10px;
    color: #666;
    width: 16px;
}

.file-name {
    flex: 1;
    font-weight: 500;
    color: #333;
    margin-right: 10px;
}

.file-size {
    color: #666;
    font-size: 0.9em;
}

.files-summary {
    font-weight: 600;
    color: #007bff;
    text-align: center;
    padding-top: 10px;
    border-top: 1px solid #e0e0e0;
}

/* Стиль для form-check только в формах, не в таблицах */
.card-body > form .form-check:not(.table .form-check),
.modal-body .form-check:not(.table .form-check) {
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

/* Для чекбоксов в таблицах - минимальный стиль */
.table .form-check {
    padding: 0;
    background: none;
    border: none;
    margin: 0;
    min-height: auto;
}

.form-check-label {
    font-weight: 500;
    color: #333;
    cursor: pointer;
}

.form-text {
    margin-top: 8px;
    font-size: 0.875em;
}

/* Стили для поисковой панели - в стиле главной страницы */
.search-panel {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.5rem;
    margin-bottom: var(--space-4);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--color-border);
    transition: all 0.3s ease;
    position: relative;
}

.search-panel:hover {
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.12);
}

.search-container {
    position: relative;
    width: 100%;
    max-width: 100%;
}

.search-input-group {
    position: relative;
    display: flex;
    align-items: stretch;
    background: transparent;
    border: none;
    padding: 0;
    transition: all 0.3s ease;
}

.search-input-group:focus-within {
    background: transparent;
}

.search-input-group .search-input {
    flex: 1;
    border: 2px solid var(--color-border) !important;
    background: rgba(255, 255, 255, 0.95) !important;
    padding: 0.65rem 13rem 0.65rem 1rem !important;
    font-size: 0.95rem !important;
    color: #1f2937 !important;
    outline: none !important;
    font-weight: var(--font-weight-normal) !important;
    transition: all 0.3s ease !important;
    min-width: 0 !important;
    border-radius: var(--radius-md) !important;
    width: 100% !important;
}

.search-input-group .search-input:focus {
    outline: none !important;
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
    background: white !important;
}

.search-input-group .search-input::placeholder {
    color: #9ca3af !important;
    font-size: 0.9rem !important;
}

.search-input-group .search-input:not(:placeholder-shown) {
    color: #1f2937 !important;
}

.search-filters {
    position: absolute !important;
    right: 6px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    z-index: 10 !important;
}

.search-filter-select {
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-sm) !important;
    padding: 0.45rem 0.75rem !important;
    font-size: 0.85rem !important;
    color: var(--color-text) !important;
    background: white !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    font-weight: var(--font-weight-medium) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) !important;
}

.search-filter-select:hover {
    background: var(--color-primary) !important;
    color: white !important;
    border-color: var(--color-primary) !important;
    transform: scale(1.05) !important;
    box-shadow: 0 4px 8px rgba(102, 126, 234, 0.2) !important;
}

.search-filter-select:focus {
    outline: none !important;
    background: white !important;
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
}

.search-btn, .advanced-filters-btn {
    border: none !important;
    border-radius: var(--radius-sm) !important;
    padding: 0.5rem 0.85rem !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.9rem !important;
    min-width: 42px !important;
    color: white !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.search-btn:hover,
.advanced-filters-btn:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

/* Глобальная кнопка поиска (плавающая) - КРУГЛАЯ и ЗЕЛЕНАЯ */
.floating-btn.search-btn,
#globalSearchBtn.floating-btn {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border-radius: 50% !important;
    width: 50px !important;
    height: 50px !important;
}

@media (max-width: 768px) {
    /* На мобильном — тот же размер что и другие FAB (45px) */
    .floating-btn.search-btn,
    #globalSearchBtn.floating-btn {
        width: 45px !important;
        height: 45px !important;
        font-size: 16px !important;
    }
}

.floating-btn.search-btn:hover,
#globalSearchBtn.floating-btn:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    box-shadow: 0 6px 25px rgba(16, 185, 129, 0.4) !important;
}

/* Кнопка поиска в storage (внутри search-panel) */
.search-panel .search-btn {
    background: var(--gradient-primary) !important;
}

.search-panel .search-btn:hover {
    background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%) !important;
}

.advanced-filters-btn {
    background: var(--gradient-secondary) !important;
}

.advanced-filters-btn:hover {
    background: linear-gradient(135deg, #4b5563 0%, #374151 100%) !important;
}

.advanced-filters-btn.active {
    background: var(--gradient-primary) !important;
}

.advanced-filters-btn.active:hover {
    background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%) !important;
}

/* Расширенные фильтры */
.advanced-filters {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.98) 100%);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(102, 126, 234, 0.1);
    border-radius: var(--radius-md);
    margin-top: var(--space-4);
    padding: var(--space-5);
    animation: slideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.08);
    overflow: visible;
    position: relative;
    z-index: 1;
}

/* Расширенные фильтры внутри dashboard-search */
.dashboard-search .advanced-filters {
    background: white;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-top: var(--space-3);
    padding: var(--space-4);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: visible;
    position: relative;
    z-index: 1;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.advanced-filters-content {
    max-width: 100%;
}

.filters-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.filters-row:last-of-type {
    margin-bottom: var(--space-5);
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.filter-label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 0;
}

.filter-select, .filter-input {
    border: 2px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0.65rem 0.85rem;
    font-size: var(--font-size-md);
    color: var(--color-text);
    background: var(--color-surface);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: var(--font-weight-medium);
    height: 44px;
    width: 100%;
}

.filter-select:hover, .filter-input:hover {
    border-color: var(--color-primary);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1);
}

.filter-select:focus, .filter-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15), 0 0 0 3px rgba(102, 126, 234, 0.1);
    transform: translateY(-1px);
}

.size-input-group {
    display: flex;
    gap: var(--space-2);
    align-items: stretch;
}

.size-input {
    flex: 1;
    min-width: 0;
}

.size-unit-select {
    border: 2px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0.65rem 0.75rem;
    font-size: var(--font-size-sm);
    color: var(--color-text);
    background: var(--color-surface);
    min-width: 70px;
    height: 44px;
    font-weight: var(--font-weight-medium);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.size-unit-select:hover {
    border-color: var(--color-primary);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1);
}

.size-unit-select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15), 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.filters-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding-top: 12px;
    border-top: 1px solid #e5e7eb;
    align-items: center;
}

/* Улучшенные стили для кнопки Применить */
#applyFiltersBtn {
    min-width: auto !important;
    padding: 8px 16px !important;
    font-size: 14px !important;
    height: auto !important;
    background: var(--gradient-success) !important;
    border: none !important;
    color: white !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.25) !important;
    transition: all 0.3s ease !important;
}

#applyFiltersBtn:hover {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.35) !important;
}

#applyFiltersBtn i {
    margin-right: 6px;
}

.apply-filters-btn, .reset-filters-btn {
    padding: var(--space-2) var(--space-5);
    border: none;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    position: relative;
    overflow: hidden;
}

.apply-filters-btn::before,
.reset-filters-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.apply-filters-btn:hover::before,
.reset-filters-btn:hover::before {
    left: 100%;
}

.apply-filters-btn {
    background: var(--gradient-success);
    color: white;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.2);
}

.apply-filters-btn:hover {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

.reset-filters-btn {
    background: var(--color-surface);
    color: var(--color-text);
    border: 2px solid var(--color-border);
}

.reset-filters-btn:hover {
    background: var(--color-soft);
    border-color: var(--color-primary);
    color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1);
}

/* Адаптивность для мобильных устройств */
@media (max-width: 992px) {
    .filters-row {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-3);
    }
}

@media (max-width: 768px) {
    .filters-row {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }
    
    .filter-select, .filter-input, .size-unit-select {
        height: 48px;
        padding: 0.75rem 1rem;
        font-size: var(--font-size-md);
    }
    
    .filters-actions {
        flex-direction: column;
        gap: var(--space-2);
    }
    
    .apply-filters-btn, .reset-filters-btn {
        justify-content: center;
        width: 100%;
    }
}

/* Автодополнение */
.search-autocomplete {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    margin-top: 4px;
    max-height: 300px;
    overflow-y: auto;
}

.autocomplete-items {
    padding: 8px 0;
}

.autocomplete-item {
    padding: 12px 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.2s ease;
    border-bottom: 1px solid #f3f4f6;
}

.autocomplete-item:last-child {
    border-bottom: none;
}

.autocomplete-item:hover {
    background: #f3f4f6;
}

.autocomplete-item.active {
    background: #eef2ff;
    color: #4f46e5;
}

.autocomplete-item-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 12px;
}

.autocomplete-item-icon.file {
    background: #fef3c7;
    color: #92400e;
}

.autocomplete-item-icon.folder {
    background: #dbeafe;
    color: #1e40af;
}

.autocomplete-item-text {
    flex: 1;
    font-size: 14px;
    color: #374151;
}

.autocomplete-item-type {
    font-size: 12px;
    color: #6b7280;
    text-transform: uppercase;
    font-weight: 500;
}

/* Результаты поиска */
.search-results {
    display: none;
    background: white;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e7eb;
}

.search-results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e5e7eb;
}

.search-results-title {
    font-size: 18px;
    font-weight: 600;
    color: #374151;
    margin: 0;
}

.search-results-count {
    font-size: 14px;
    color: #6b7280;
}

.search-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

.search-result-item {
    display: flex;
    align-items: center;
    padding: 9px 14px;
    border: none;
    border-radius: 0;
    cursor: pointer;
    transition: all 0.15s ease;
    background: white;
    color: #334155 !important;
    font-weight: 400;
    margin-bottom: 0;
    gap: 10px;
}

.search-result-item:hover {
    background: #f1f5f9 !important;
    color: #334155 !important;
    transform: none;
    box-shadow: none !important;
}

/* Убеждаемся, что весь текст внутри результатов поиска виден при hover */
.search-result-item:hover .search-result-name,
.search-result-item:hover .search-result-path,
.search-result-item:hover .search-result-meta,
.search-result-item:hover .search-result-info {
    color: #1f2937 !important; /* Темный текст остается видимым */
}

.search-result-icon {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 5px;
    border: 2px solid #cbd5e1;
    color: white;
    font-size: 12px;
    flex-shrink: 0;
    margin-right: 0;
    transition: all 0.15s ease;
    position: relative;
    justify-content: center;
    border-radius: 8px;
    margin-right: 12px;
    font-size: 18px;
}

.search-result-icon.file {
    background: linear-gradient(135deg, #fef3c7 0%, #fbbf24 100%);
    color: #92400e;
}

.search-result-icon.folder {
    background: linear-gradient(135deg, #dbeafe 0%, #3b82f6 100%);
    color: #1e40af;
}

.search-result-info {
    flex: 1;
    min-width: 0;
}

.search-result-name {
    font-weight: 400;
    color: #334155;
    margin-bottom: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    flex: 1;
}

.search-result-item:hover .search-result-name {
    color: #334155 !important;
}

.search-result-path {
    font-size: 11px;
    color: #94a3b8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 2px;
}

.search-result-item:hover .search-result-path {
    color: #64748b !important;
}

.search-result-meta {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 2px;
}

.search-result-item:hover .search-result-meta {
    color: #64748b !important;
}

.search-result-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.search-no-results {
    text-align: center;
    padding: 40px 20px;
    color: #6b7280;
}

.search-no-results i {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.search-no-results h4 {
    margin-bottom: 8px;
    color: #374151;
}

.search-no-results p {
    margin: 0;
    font-size: 14px;
}

/* ==========================================
   STORAGE: Дополнительные компоненты
   ========================================== */

/* Основной контейнер хранилища */
.storage-container {
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    position: relative;
    z-index: 1;
}

.storage-content {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-6);
    margin-top: var(--space-4);
    overflow: visible;
    position: relative;
    z-index: 1;
}

/* Навигация хлебных крошек */
.breadcrumb-nav-custom {
    background: linear-gradient(135deg, var(--color-soft) 0%, #e9ecef 100%);
    border: 1px solid rgba(102, 126, 234, 0.1);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    margin-bottom: var(--space-4);
}

.breadcrumb-link {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    padding: 4px 8px;
    border-radius: 6px;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-md);
}

.breadcrumb-link:hover {
    background: rgba(102, 126, 234, 0.1);
    color: var(--color-primary);
    transform: translateY(-1px);
}

.breadcrumb-separator {
    color: var(--color-muted);
    font-size: var(--font-size-xs);
    margin: 0 4px;
}

/* Тело хранилища */
.storage-body {
    padding: var(--space-6);
    background: transparent;
    min-height: 400px;
}

/* Сетка файлов и папок */
.storage-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
    gap: 20px !important;
    margin-top: var(--space-4) !important;
}

/* Дополнительная специфичность для хранилища */
.storage-container .storage-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
    gap: 20px !important;
}

.storage-container .storage-item {
    padding: 20px !important;
}

.storage-container .item-icon {
    font-size: 52px !important;
    height: 64px !important;
    margin-bottom: 16px !important;
}

.storage-container .item-name {
    font-size: 14px !important;
    margin-top: 0 !important;
    margin-bottom: 10px !important;
    min-height: 38px !important;
    max-height: 57px !important;
    line-height: 1.35 !important;
    -webkit-line-clamp: 3 !important;
}

.storage-container .item-meta {
    font-size: 12px !important;
    margin-top: 0 !important;
    gap: 6px !important;
}

.storage-container .item-size,
.storage-container .item-date {
    font-size: 11px !important;
    padding: 4px 10px !important;
}

/* Элементы хранилища (файлы и папки) */
.storage-item {
    background: var(--color-surface) !important;
    border: 2px solid transparent !important;
    border-radius: var(--radius-lg) !important;
    padding: 20px !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    text-align: center !important;
    position: relative !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.04) !important;
    overflow: hidden !important;
}

.storage-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.02) 0%, rgba(118, 75, 162, 0.02) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.storage-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.08), transparent);
    transition: left 0.6s ease;
}

.storage-item:hover::before {
    opacity: 1;
}

.storage-item:hover::after {
    left: 100%;
}

.storage-item:hover {
    border-color: var(--color-primary);
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.12), 0 0 0 1px var(--color-primary);
    transform: translateY(-2px);
}

.storage-item.selected {
    border-color: var(--color-primary);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.06) 0%, rgba(118, 75, 162, 0.06) 100%);
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.2), 0 0 0 2px var(--color-primary);
    transform: translateY(-2px);
}

.storage-item.selected::before {
    opacity: 1;
}

/* Иконки файлов и папок */
.item-icon {
    font-size: 52px !important;
    margin-bottom: 16px !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    z-index: 2 !important;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,0.08)) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 64px !important;
}

.item-icon i {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.storage-item:hover .item-icon i {
    transform: scale(1.08) translateY(-2px);
}

.storage-item.selected .item-icon i {
    transform: scale(1.1) translateY(-2px);
}

/* Иконки для файлового хранилища */
.storage-item .folder-icon,
.item-icon.folder-icon {
    color: var(--color-warning);
}

.storage-item .folder-icon i,
.item-icon.folder-icon i {
    filter: drop-shadow(0 2px 4px rgba(245, 158, 11, 0.3));
}

.storage-item .file-icon,
.item-icon.file-icon {
    color: var(--color-primary);
}

/* Специфичные иконки для типов файлов в хранилище */
.storage-item .file-icon .fa-image,
.item-icon.file-icon .fa-image { 
    color: var(--color-success);
    filter: drop-shadow(0 2px 4px rgba(34, 197, 94, 0.3));
}
.storage-item .file-icon .fa-video,
.item-icon.file-icon .fa-video { 
    color: var(--color-danger);
    filter: drop-shadow(0 2px 4px rgba(239, 68, 68, 0.3));
}
.storage-item .file-icon .fa-music,
.item-icon.file-icon .fa-music { 
    color: #8b5cf6;
    filter: drop-shadow(0 2px 4px rgba(139, 92, 246, 0.3));
}
.storage-item .file-icon .fa-file-pdf,
.item-icon.file-icon .fa-file-pdf { 
    color: #ef4444;
    filter: drop-shadow(0 2px 4px rgba(239, 68, 68, 0.3));
}
.storage-item .file-icon .fa-file-word,
.item-icon.file-icon .fa-file-word { 
    color: #3b82f6;
    filter: drop-shadow(0 2px 4px rgba(59, 130, 246, 0.3));
}
.storage-item .file-icon .fa-file-excel,
.item-icon.file-icon .fa-file-excel { 
    color: #10b981;
    filter: drop-shadow(0 2px 4px rgba(16, 185, 129, 0.3));
}
.storage-item .file-icon .fa-file-powerpoint,
.item-icon.file-icon .fa-file-powerpoint { 
    color: #f97316;
    filter: drop-shadow(0 2px 4px rgba(249, 115, 22, 0.3));
}
.storage-item .file-icon .fa-file-archive,
.item-icon.file-icon .fa-file-archive { 
    color: #f59e0b;
    filter: drop-shadow(0 2px 4px rgba(245, 158, 11, 0.3));
}
.storage-item .file-icon .fa-file,
.item-icon.file-icon .fa-file { 
    color: var(--color-muted);
    filter: drop-shadow(0 2px 4px rgba(107, 114, 128, 0.3));
}

/* Информация об элементах */
.item-name {
    font-weight: 500 !important;
    margin-top: 0 !important;
    margin-bottom: 10px !important;
    color: var(--color-text) !important;
    font-size: 14px !important;
    word-break: break-word !important;
    line-height: 1.35 !important;
    position: relative !important;
    z-index: 2 !important;
    transition: all 0.3s ease !important;
    min-height: 38px !important;
    max-height: 57px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    padding: 0 6px !important;
    text-align: center !important;
}

/* При наведении раскрываем полный текст */
.storage-item:hover .item-name {
    max-height: none !important;
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(124, 58, 237, 0.05) 100%) !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.15) !important;
    color: var(--color-primary) !important;
    z-index: 100 !important;
    white-space: normal !important;
    word-wrap: break-word !important;
}

.storage-item.selected .item-name {
    color: var(--color-primary);
    font-weight: var(--font-weight-bold);
}

.item-meta {
    font-size: 12px !important;
    color: var(--color-muted) !important;
    line-height: 1.4 !important;
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    margin-top: 0 !important;
}

.item-size, .item-date {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 4px 10px !important;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%) !important;
    border-radius: 10px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
    font-size: 11px !important;
}

.storage-item:hover .item-size,
.storage-item:hover .item-date {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.12) 0%, rgba(118, 75, 162, 0.12) 100%);
    transform: scale(1.05);
}

.item-actions {
    margin-top: var(--space-2);
    display: flex;
    justify-content: center;
    gap: var(--space-2);
}

/* Кнопка редактирования Office */
.btn-edit-office {
    background: var(--gradient-success);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: var(--font-size-xs);
    cursor: pointer;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
}

.btn-edit-office:hover {
    background: linear-gradient(45deg, #047857, #065f46);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(16, 185, 129, 0.3);
}

/* Зона перетаскивания */
.drop-zone {
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-lg);
    padding: 2rem 1.5rem;
    text-align: center;
    margin-bottom: var(--space-4);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.03) 0%, rgba(118, 75, 162, 0.03) 100%);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    user-select: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.drop-zone::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.08), transparent);
    transition: left 0.6s ease;
}

.drop-zone:hover::before {
    left: 100%;
}

.drop-zone.active::before,
.drop-zone.dragover::before {
    left: 100%;
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

.drop-zone.active,
.drop-zone.dragover {
    border-color: var(--color-primary);
    border-width: 3px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%);
    transform: scale(1.01);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.15), inset 0 0 0 1px rgba(102, 126, 234, 0.1);
}

.drop-zone-icon {
    font-size: 48px;
    color: var(--color-primary);
    margin-bottom: 12px;
    display: block;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0.7;
}

.drop-zone:hover .drop-zone-icon {
    transform: translateY(-3px) scale(1.05);
    opacity: 1;
    color: var(--color-primary);
}

.drop-zone.active .drop-zone-icon,
.drop-zone.dragover .drop-zone-icon {
    transform: translateY(-3px) scale(1.1);
    opacity: 1;
    color: var(--color-primary);
    animation: bounce 0.6s ease-in-out infinite;
}

@keyframes bounce {
    0%, 100% { transform: translateY(-3px) scale(1.1); }
    50% { transform: translateY(-8px) scale(1.15); }
}

.drop-zone h3 {
    color: var(--color-text);
    margin-bottom: 10px;
    font-weight: var(--font-weight-semibold);
    font-size: 19px;
    line-height: 1.4;
}

.drop-zone p {
    color: var(--color-muted);
    margin: 8px 0 0 0;
    font-size: 15px;
    line-height: 1.5;
}

.drop-zone:hover {
    border-color: var(--color-primary);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.06) 0%, rgba(118, 75, 162, 0.06) 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.12);
}

/* Стили для мобильной и десктопной версии */
.drop-zone-desktop {
    display: block;
}

.drop-zone-mobile {
    display: none;
}

/* Прогресс загрузки */
.upload-progress {
    margin: var(--space-5) 0;
    display: none;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    box-shadow: var(--shadow-sm);
}

/* Кастомный прогресс-трек (НЕ Bootstrap .progress-bar) */
.progress-bar:not(.progress > .progress-bar) {
    width: 100%;
    height: 8px;
    background-color: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: var(--space-2);
}

.progress-fill {
    height: 100%;
    background: var(--gradient-primary);
    border-radius: 4px;
    width: 0%;
    transition: width 0.3s ease;
    position: relative;
}

.progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-image: linear-gradient(
        -45deg,
        rgba(255, 255, 255, .2) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, .2) 50%,
        rgba(255, 255, 255, .2) 75%,
        transparent 75%,
        transparent
    );
    background-size: 50px 50px;
    animation: move 2s linear infinite;
}

@keyframes move {
    0% { background-position: 0 0; }
    100% { background-position: 50px 50px; }
}

.progress-text {
    font-size: var(--font-size-md);
    color: var(--color-text);
    text-align: center;
    font-weight: var(--font-weight-medium);
}

/* Пустое состояние */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--color-muted);
}

.empty-state i {
    font-size: 64px;
    margin-bottom: var(--space-5);
    color: #dee2e6;
}

.empty-state h3 {
    font-size: var(--font-size-xl);
    margin-bottom: var(--space-2);
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
}

.empty-state p {
    font-size: var(--font-size-md);
    color: var(--color-muted);
}

/* Контекстное меню */
.context-menu {
    position: fixed !important;
    background: var(--color-surface);
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 40px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.05);
    z-index: 1000 !important;
    min-width: 220px;
    display: none;
    padding: 8px;
    font-family: var(--font-family-base);
    pointer-events: auto;
    backdrop-filter: blur(10px);
}

.context-menu::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(248,250,252,0.95));
    border-radius: var(--radius-lg);
    z-index: -1;
}

.context-menu-item {
    padding: 12px 16px;
    cursor: pointer;
    font-size: var(--font-size-md);
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-md);
    position: relative;
    overflow: hidden;
}

.context-menu-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--gradient-primary);
    transform: scaleY(0);
    transition: transform 0.2s ease;
}

.context-menu-item:hover::before {
    transform: scaleY(1);
}

.context-menu-item:hover {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%);
    color: var(--color-primary);
    transform: translateX(4px);
}

.context-menu-item:active {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.12) 0%, rgba(118, 75, 162, 0.12) 100%);
    transform: translateX(2px) scale(0.98);
}

.context-menu-item i {
    width: 20px;
    text-align: center;
    font-size: var(--font-size-lg);
    transition: all 0.2s ease;
}

.context-menu-item:hover i {
    transform: scale(1.1);
}

.context-menu-item.danger {
    color: var(--color-danger);
}

.context-menu-item.danger::before {
    background: var(--gradient-danger);
}

.context-menu-item.danger:hover {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.08) 0%, rgba(220, 38, 38, 0.08) 100%);
    color: #b91c1c;
}

.context-menu-separator {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-border), transparent);
    margin: 6px 8px;
}

.context-menu-item.disabled {
    color: var(--color-muted);
    cursor: not-allowed;
    opacity: 0.5;
}

.context-menu-item.disabled:hover {
    background-color: transparent;
    transform: none;
}

.context-menu-item.disabled::before {
    display: none;
}

/* Анимация появления контекстного меню */
.context-menu.show {
    display: block;
    animation: contextMenuFadeIn 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes contextMenuFadeIn {
    from {
        opacity: 0;
        transform: scale(0.92) translateY(-8px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Выделяем кнопку загрузки в контекстном меню */
.context-menu-upload {
    background: var(--gradient-primary) !important;
    color: white !important;
    font-weight: var(--font-weight-semibold);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.context-menu-upload::before {
    background: white !important;
    opacity: 0.2;
}

.context-menu-upload:hover {
    background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%) !important;
    transform: translateX(6px) scale(1.02);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.context-menu-upload i {
    color: white !important;
}

/* Результаты поиска */
.search-results {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    margin-bottom: var(--space-5);
    box-shadow: var(--shadow-sm);
}

.search-results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 2px solid var(--color-border);
}

.search-results-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin: 0;
}

.search-results-count {
    font-size: var(--font-size-md);
    color: var(--color-muted);
    font-weight: var(--font-weight-medium);
}

.search-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-4);
}

.search-result-item {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: #1f2937 !important;
}

.search-result-item:hover {
    background: rgba(102, 126, 234, 0.08) !important;
    border-color: rgba(102, 126, 234, 0.3) !important;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15) !important;
    transform: translateY(-1px);
    color: #1f2937 !important;
}

/* Убеждаемся, что весь текст виден при hover */
.search-result-item:hover .search-result-name,
.search-result-item:hover .search-result-path,
.search-result-item:hover .search-result-meta {
    color: #1f2937 !important;
}

.search-result-icon {
    font-size: 32px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.search-result-icon.file {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    color: var(--color-primary);
}

.search-result-icon.folder {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(217, 119, 6, 0.1) 100%);
    color: var(--color-warning);
}

.search-result-info {
    flex: 1;
    min-width: 0;
}

.search-result-name {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--font-size-md);
}

.search-result-path {
    font-size: var(--font-size-xs);
    color: var(--color-muted);
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-result-meta {
    font-size: var(--font-size-xs);
    color: var(--color-muted);
}

.search-no-results {
    text-align: center;
    padding: 60px 20px;
    color: var(--color-muted);
}

.search-no-results i {
    font-size: 48px;
    margin-bottom: var(--space-4);
    opacity: 0.5;
}

.search-no-results h4 {
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-2);
    color: var(--color-text);
}

.search-no-results p {
    font-size: var(--font-size-md);
    color: var(--color-muted);
}

.search-loading {
    text-align: center;
    padding: 40px 20px;
    color: var(--color-muted);
    font-size: var(--font-size-lg);
}

.search-loading i {
    font-size: 24px;
    margin-right: var(--space-2);
    color: var(--color-primary);
}

/* ========================================
   МОДАЛЬНЫЕ ОКНА ДЛЯ STORAGE
   ======================================== */

/* ============================================
   1. BACKDROP (ФОН МОДАЛЬНОГО ОКНА)
   ============================================ */
.storage-modal {
    display: none;
    position: fixed !important;
    z-index: var(--z-modal) !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.65) !important;
    backdrop-filter: blur(8px) !important;
    animation: storageModalBackdropFadeIn 0.3s ease !important;
    overflow-y: auto !important;
    overflow-x: visible !important;
    padding: 40px 20px !important;
}

.storage-modal[style*="display: block"],
.storage-modal[style*="display: flex"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

@keyframes storageModalBackdropFadeIn {
    from {
        opacity: 0;
        backdrop-filter: blur(0px);
    }
    to {
        opacity: 1;
        backdrop-filter: blur(8px);
    }
}

/* ============================================
   2. MODAL CONTENT (САМО ОКНО)
   ============================================ */
.storage-modal .modal-content {
    background: var(--color-surface) !important;
    margin: auto !important;
    padding: 0 !important;
    border-radius: var(--radius-xl) !important;
    width: 100% !important;
    max-width: 520px !important;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.35), 
                0 0 0 1px rgba(0, 0, 0, 0.1) !important;
    animation: storageModalContentSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    overflow: hidden !important;
    position: relative !important;
    z-index: auto !important;
    display: flex !important;
    flex-direction: column !important;
}

.storage-modal .modal-content.modal-lg {
    max-width: 800px !important;
}

@keyframes storageModalContentSlideIn {
    from {
        opacity: 0;
        transform: scale(0.85) translateY(-40px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* ============================================
   3. MODAL HEADER
   ============================================ */
.storage-modal .modal-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: var(--space-5) !important;
    margin-bottom: 0 !important;
    border-bottom: none !important;
    background: var(--gradient-primary) !important;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important;
}

.storage-modal .modal-title {
    font-size: 1.25rem !important;
    font-weight: var(--font-weight-semibold) !important;
    color: white !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: var(--space-3) !important;
}

.storage-modal .modal-title i {
    color: white !important;
    font-size: 1.5rem !important;
}

.storage-modal .modal-header .close,
.storage-modal button.close {
    background: none !important;
    border: none !important;
    font-size: 24px !important;
    color: white !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: var(--radius-md) !important;
    opacity: 0.9 !important;
    padding: 0 !important;
}

.storage-modal .modal-header .close:hover,
.storage-modal button.close:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    color: white !important;
    opacity: 1 !important;
    transform: rotate(90deg) !important;
}

/* ============================================
   4. MODAL BODY
   ============================================ */
.storage-modal .modal-body {
    padding: 28px !important;
    background: var(--color-surface) !important;
    max-height: calc(100vh - 300px) !important; /* fallback */
    max-height: calc(100dvh - 300px) !important;
    overflow-y: auto !important;
    min-height: 80px !important;
    flex: 1 !important;
}

.storage-modal .modal-body::-webkit-scrollbar {
    width: 8px;
}

.storage-modal .modal-body::-webkit-scrollbar-track {
    background: var(--color-soft);
    border-radius: 4px;
}

.storage-modal .modal-body::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 4px;
}

.storage-modal .modal-body::-webkit-scrollbar-thumb:hover {
    background: var(--color-muted);
}

/* Форма внутри modal-body */
.storage-modal .modal-body form {
    display: flex !important;
    flex-direction: column !important;
}

/* ============================================
   5. MODAL FOOTER
   ============================================ */
.storage-modal .modal-footer,
.storage-modal .modal-body .modal-footer {
    padding: 18px 28px !important;
    border-top: 1px solid var(--color-border) !important;
    background: rgba(249, 250, 251, 1) !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    border-radius: 0 0 var(--radius-xl) var(--radius-xl) !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* ============================================
   6. FORM ELEMENTS
   ============================================ */

/* Form Groups */
.storage-modal .form-group {
    margin-bottom: 24px !important;
}

.storage-modal .form-group:last-child {
    margin-bottom: 0 !important;
}

/* Form Labels */
.storage-modal .form-label,
.storage-modal label {
    display: block !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--color-text) !important;
    margin-bottom: 8px !important;
}

/* Form Controls наследуют глобальные стили */
.storage-modal textarea {
    min-height: 120px !important;
    resize: vertical !important;
}

/* Input Groups */
.storage-modal .input-group {
    display: flex !important;
    gap: 8px !important;
    align-items: stretch !important;
}

.storage-modal .input-group .form-control {
    flex: 1 !important;
}

/* ============================================
   7. CHECKBOXES
   ============================================ */
.storage-modal .form-check {
    margin-bottom: 16px !important;
    padding: 14px 16px !important;
    background: var(--color-soft) !important;
    border-radius: var(--radius-md) !important;
    border: 2px solid transparent !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: flex-start !important;
}

.storage-modal .form-check:hover {
    background: linear-gradient(135deg, 
                rgba(102, 126, 234, 0.06) 0%, 
                rgba(118, 75, 162, 0.06) 100%) !important;
    border-color: var(--color-primary) !important;
}

.storage-modal .form-check-input {
    width: 20px !important;
    height: 20px !important;
    margin-top: 2px !important;
    margin-left: 0 !important;
    margin-right: 12px !important;
    border: 2px solid var(--color-border) !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    flex-shrink: 0 !important;
    float: none !important;
}

.storage-modal .form-check-input:checked {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

.storage-modal .form-check-input:focus {
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.2) !important;
}

.storage-modal .form-check-label {
    margin-left: 0 !important;
    cursor: pointer !important;
    font-weight: 500 !important;
    color: var(--color-text) !important;
    flex: 1 !important;
}

.storage-modal .form-check-label strong {
    display: block !important;
    margin-bottom: 4px !important;
    font-weight: 600 !important;
}

.storage-modal .form-check-label small {
    color: var(--color-muted) !important;
    font-size: 13px !important;
}

.storage-modal .form-check-label i {
    margin-right: 8px !important;
    color: var(--color-primary) !important;
}

/* ============================================
   8. BUTTONS - компактный красивый стиль
   ============================================ */
.storage-modal .btn-storage {
    min-width: auto !important;
    padding: 8px 16px !important;
    border-radius: var(--radius-sm) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    min-height: 36px !important;
}

.storage-modal .btn-storage i {
    font-size: 13px !important;
}

/* Primary Button */
.storage-modal .btn-storage.btn-primary {
    background: var(--gradient-primary) !important;
    color: white !important;
    box-shadow: 0 4px 14px rgba(102, 126, 234, 0.35) !important;
}

.storage-modal .btn-storage.btn-primary:hover {
    transform: translateY(-2px) scale(1.03) !important;
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.45) !important;
}

.storage-modal .btn-storage.btn-primary:active {
    transform: translateY(0) scale(0.98) !important;
}

/* Secondary Button */
.storage-modal .btn-storage.btn-secondary {
    background: white !important;
    color: var(--color-text) !important;
    border: 2px solid var(--color-border) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
}

.storage-modal .btn-storage.btn-secondary:hover {
    background: var(--color-soft) !important;
    border-color: var(--color-primary) !important;
    transform: translateY(-2px) scale(1.03) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12) !important;
}

.storage-modal .btn-storage.btn-secondary:active {
    transform: translateY(0) scale(0.98) !important;
}

/* Success Button */
.storage-modal .btn-storage.btn-success {
    background: var(--gradient-success) !important;
    color: white !important;
    box-shadow: 0 4px 14px rgba(34, 197, 94, 0.35) !important;
}

.storage-modal .btn-storage.btn-success:hover {
    transform: translateY(-2px) scale(1.03) !important;
    box-shadow: 0 8px 24px rgba(34, 197, 94, 0.45) !important;
}

.storage-modal .btn-storage.btn-success:active {
    transform: translateY(0) scale(0.98) !important;
}

/* Danger Button */
.storage-modal .btn-storage.btn-danger {
    background: var(--gradient-danger) !important;
    color: white !important;
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35) !important;
}

.storage-modal .btn-storage.btn-danger:hover {
    transform: translateY(-2px) scale(1.03) !important;
    box-shadow: 0 8px 24px rgba(239, 68, 68, 0.45) !important;
}

.storage-modal .btn-storage.btn-danger:active {
    transform: translateY(0) scale(0.98) !important;
}

/* ============================================
   8.5. SPECIAL ELEMENTS
   ============================================ */

/* Folder Tree */
.storage-modal .folder-tree {
    max-height: 400px !important;
    overflow-y: auto !important;
    border: 2px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    padding: 12px !important;
    background: #fafafa !important;
}

.storage-modal .folder-tree-item {
    padding: 10px 12px !important;
    cursor: pointer !important;
    border-radius: var(--radius-sm) !important;
    margin: 3px 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    transition: all 0.2s ease !important;
    font-weight: 500 !important;
    position: relative !important;
    font-size: 14px !important;
    user-select: none !important;
    background: white !important;
    border: 1px solid #e5e7eb !important;
}

/* Визуальная линия для вложенных папок */
.storage-modal .folder-tree-item.level-1::before,
.storage-modal .folder-tree-item.level-2::before,
.storage-modal .folder-tree-item.level-3::before,
.storage-modal .folder-tree-item.level-4::before,
.storage-modal .folder-tree-item.level-5::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 3px !important;
    background: linear-gradient(180deg, #e5e7eb 0%, #d1d5db 100%) !important;
    border-radius: 2px 0 0 2px !important;
}

/* Разные цвета для разных уровней вложенности */
.storage-modal .folder-tree-item.level-1::before {
    background: linear-gradient(180deg, #93c5fd 0%, #60a5fa 100%) !important;
}

.storage-modal .folder-tree-item.level-2::before {
    background: linear-gradient(180deg, #a78bfa 0%, #8b5cf6 100%) !important;
}

.storage-modal .folder-tree-item.level-3::before {
    background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%) !important;
}

.storage-modal .folder-tree-item.level-4::before {
    background: linear-gradient(180deg, #f472b6 0%, #ec4899 100%) !important;
}

.storage-modal .folder-tree-item.root-folder {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%) !important;
    border: 2px solid rgba(102, 126, 234, 0.2) !important;
    margin-bottom: 12px !important;
    font-weight: 600 !important;
    padding: 12px 14px !important;
}

.storage-modal .folder-tree-item:hover {
    background: linear-gradient(135deg, 
                rgba(102, 126, 234, 0.1) 0%, 
                rgba(118, 75, 162, 0.1) 100%) !important;
    border-color: rgba(102, 126, 234, 0.3) !important;
    transform: translateX(3px) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
}

.storage-modal .folder-tree-item.selected {
    background: linear-gradient(135deg, 
                rgba(102, 126, 234, 0.2) 0%, 
                rgba(118, 75, 162, 0.2) 100%) !important;
    color: var(--color-primary) !important;
    font-weight: 600 !important;
    border: 2px solid var(--color-primary) !important;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2) !important;
}

.storage-modal .folder-tree-item .toggle-icon {
    color: #6b7280 !important;
    font-size: 11px !important;
    width: 16px !important;
    height: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    flex-shrink: 0 !important;
    background: #f3f4f6 !important;
    border-radius: 3px !important;
}

.storage-modal .folder-tree-item .toggle-icon:hover {
    color: var(--color-primary) !important;
    background: rgba(102, 126, 234, 0.15) !important;
}

.storage-modal .folder-tree-item .no-toggle {
    width: 16px !important;
    flex-shrink: 0 !important;
}

.storage-modal .folder-tree-item .folder-icon {
    color: #f59e0b !important;
    font-size: 17px !important;
    flex-shrink: 0 !important;
}

/* Разные оттенки иконок для разных уровней */
.storage-modal .folder-tree-item.level-1 .folder-icon {
    color: #f59e0b !important;
}

.storage-modal .folder-tree-item.level-2 .folder-icon {
    color: #fb923c !important;
}

.storage-modal .folder-tree-item.level-3 .folder-icon {
    color: #fbbf24 !important;
}

.storage-modal .folder-tree-item.expanded .folder-icon {
    color: #f97316 !important;
}

.storage-modal .folder-tree-item i.fa-home {
    color: #667eea !important;
    font-size: 17px !important;
}

.storage-modal .folder-children {
    overflow: hidden !important;
    transition: all 0.3s ease !important;
    margin-left: 8px !important;
    border-left: 2px dashed #e5e7eb !important;
    padding-left: 4px !important;
}

.storage-modal .folder-tree-item .folder-name {
    flex: 1 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    cursor: pointer !important;
}

.storage-modal .folder-tree-empty {
    padding: 30px 20px !important;
    text-align: center !important;
    color: #9ca3af !important;
    font-size: 14px !important;
    font-style: italic !important;
}

.storage-modal .folder-tree::-webkit-scrollbar {
    width: 8px !important;
}

.storage-modal .folder-tree::-webkit-scrollbar-track {
    background: #f3f4f6 !important;
    border-radius: 4px !important;
}

.storage-modal .folder-tree::-webkit-scrollbar-thumb {
    background: #d1d5db !important;
    border-radius: 4px !important;
}

.storage-modal .folder-tree::-webkit-scrollbar-thumb:hover {
    background: #9ca3af !important;
}

/* File Info Content */
.storage-modal .file-info-content {
    min-height: 150px !important;
}

.storage-modal .file-info-grid {
    display: grid !important;
    grid-template-columns: 140px 1fr !important;
    gap: 16px 20px !important;
    align-items: start !important;
}

.storage-modal .file-info-label {
    font-weight: 700 !important;
    color: var(--color-muted) !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding-top: 4px !important;
}

.storage-modal .file-info-value {
    color: var(--color-text) !important;
    font-size: 14px !important;
    word-break: break-word !important;
    line-height: 1.6 !important;
    font-weight: 500 !important;
}

.storage-modal .file-info-preview {
    text-align: center !important;
    margin-bottom: 20px !important;
    padding: 24px !important;
    background: linear-gradient(135deg, 
                rgba(102, 126, 234, 0.04) 0%, 
                rgba(118, 75, 162, 0.04) 100%) !important;
    border-radius: var(--radius-lg) !important;
    border: 2px solid var(--color-border) !important;
}

.storage-modal .file-info-icon {
    font-size: 72px !important;
    margin-bottom: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 90px !important;
    width: 100% !important;
}

.storage-modal .file-info-icon i {
    color: var(--color-primary) !important;
    filter: drop-shadow(0 4px 12px rgba(102, 126, 234, 0.4)) !important;
    transition: all 0.3s ease !important;
    display: inline-block !important;
    line-height: 1 !important;
    font-style: normal !important;
    font-family: "Font Awesome 5 Free", "FontAwesome" !important;
    font-weight: 900 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

.storage-modal .file-info-icon i::before {
    font-family: "Font Awesome 5 Free", "FontAwesome" !important;
    font-weight: 900 !important;
    display: inline-block !important;
    font-style: normal !important;
}

/* Альтернативный способ - через CSS content */
.storage-modal .file-info-icon i.fa-file::before {
    content: "\f15b" !important;  /* Font Awesome file icon */
}

.storage-modal .file-info-icon i.fa-folder::before {
    content: "\f07b" !important;  /* Font Awesome folder icon */
}

.storage-modal .file-info-icon i.fa-file-pdf::before {
    content: "\f1c1" !important;  /* Font Awesome PDF icon */
}

.storage-modal .file-info-icon i.fa-file-word::before {
    content: "\f1c2" !important;  /* Font Awesome Word icon */
}

.storage-modal .file-info-icon i.fa-file-excel::before {
    content: "\f1c3" !important;  /* Font Awesome Excel icon */
}

.storage-modal .file-info-icon i.fa-file-powerpoint::before {
    content: "\f1c4" !important;  /* Font Awesome PowerPoint icon */
}

.storage-modal .file-info-icon i.fa-image::before {
    content: "\f1c5" !important;  /* Font Awesome Image icon */
}

.storage-modal .file-info-icon i.fa-video::before {
    content: "\f1c8" !important;  /* Font Awesome Video icon */
}

.storage-modal .file-info-icon i.fa-music::before {
    content: "\f001" !important;  /* Font Awesome Music icon */
}

.storage-modal .file-info-icon i.fa-file-archive::before {
    content: "\f1c6" !important;  /* Font Awesome Archive icon */
}

.storage-modal .file-info-icon:hover i {
    transform: scale(1.15) translateY(-4px) !important;
    filter: drop-shadow(0 6px 16px rgba(102, 126, 234, 0.5)) !important;
}

/* Цвета иконок по типам файлов */
.storage-modal .file-info-icon .fa-file-pdf {
    color: #ef4444 !important;
    filter: drop-shadow(0 4px 8px rgba(239, 68, 68, 0.3)) !important;
}

.storage-modal .file-info-icon .fa-file-word {
    color: #3b82f6 !important;
    filter: drop-shadow(0 4px 8px rgba(59, 130, 246, 0.3)) !important;
}

.storage-modal .file-info-icon .fa-file-excel {
    color: #10b981 !important;
    filter: drop-shadow(0 4px 8px rgba(16, 185, 129, 0.3)) !important;
}

.storage-modal .file-info-icon .fa-file-powerpoint {
    color: #f97316 !important;
    filter: drop-shadow(0 4px 8px rgba(249, 115, 22, 0.3)) !important;
}

.storage-modal .file-info-icon .fa-image {
    color: var(--color-success) !important;
    filter: drop-shadow(0 4px 8px rgba(34, 197, 94, 0.3)) !important;
}

.storage-modal .file-info-icon .fa-video {
    color: var(--color-danger) !important;
    filter: drop-shadow(0 4px 8px rgba(239, 68, 68, 0.3)) !important;
}

.storage-modal .file-info-icon .fa-file-archive {
    color: #f59e0b !important;
    filter: drop-shadow(0 4px 8px rgba(245, 158, 11, 0.3)) !important;
}

.storage-modal .file-info-icon .fa-file {
    color: var(--color-muted) !important;
    filter: drop-shadow(0 4px 8px rgba(107, 114, 128, 0.3)) !important;
}

/* ============================================
   9. CONTENT STYLING
   ============================================ */

/* Headings */
.storage-modal .modal-body h6 {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--color-text) !important;
    margin-bottom: 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding-bottom: 12px !important;
    border-bottom: 2px solid var(--color-border) !important;
}

.storage-modal .modal-body h6 i {
    color: var(--color-primary) !important;
    font-size: 16px !important;
}

/* Paragraphs */
.storage-modal .modal-body p {
    margin-bottom: 12px !important;
    color: var(--color-text) !important;
    line-height: 1.6 !important;
    font-size: 14px !important;
}

.storage-modal .modal-body p strong {
    font-weight: 600 !important;
    color: var(--color-text) !important;
    margin-right: 8px !important;
}

/* Horizontal Rules */
.storage-modal .modal-body hr {
    border: none !important;
    border-top: 2px solid var(--color-border) !important;
    margin: 24px 0 !important;
}

/* Rows and Columns */
.storage-modal .modal-body .row {
    display: flex !important;
    gap: 20px !important;
    margin-bottom: 20px !important;
    flex-wrap: wrap !important;
}

.storage-modal .modal-body .col-md-6 {
    flex: 1 !important;
    min-width: 0 !important;
}

.storage-modal .modal-body .col-md-4 {
    flex: 0 0 calc(33.333% - 14px) !important;
    min-width: 0 !important;
}

.storage-modal .modal-body .col-md-2 {
    flex: 0 0 calc(16.666% - 17px) !important;
    min-width: 0 !important;
}

/* Links and Badges */
.storage-modal .modal-body a {
    color: var(--color-primary) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

.storage-modal .modal-body a:hover {
    color: var(--color-primary-2) !important;
    text-decoration: underline !important;
}

.storage-modal .modal-body span[style*="background"] {
    display: inline-block !important;
    padding: 6px 12px !important;
    border-radius: 16px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    margin: 2px 4px 2px 0 !important;
}

/* Lists */
.storage-modal .modal-body ul,
.storage-modal .modal-body ol {
    margin: 0 0 16px 0 !important;
    padding-left: 24px !important;
}

.storage-modal .modal-body li {
    margin-bottom: 8px !important;
    line-height: 1.6 !important;
}

/* ============================================
   9.5. ICON-ONLY BUTTONS
   ============================================ */
.storage-modal .btn-icon-only {
    min-width: 44px !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: var(--radius-md) !important;
    font-size: 18px !important;
}

.storage-modal .btn-icon-only i {
    margin: 0 !important;
    font-size: 18px !important;
}

.storage-modal .btn-icon-only.btn-success,
.storage-modal button.btn-icon-only.btn-success,
.storage-modal .btn.btn-icon-only.btn-success {
    background: var(--gradient-success) !important;
    background-color: #22c55e !important;
    background-image: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    border: 2px solid rgba(34, 197, 94, 0.3) !important;
    border-color: rgba(34, 197, 94, 0.3) !important;
    color: white !important;
    box-shadow: 0 4px 14px rgba(34, 197, 94, 0.35) !important;
    animation: none !important;
}

.storage-modal .btn-icon-only.btn-success:hover,
.storage-modal button.btn-icon-only.btn-success:hover,
.storage-modal .btn.btn-icon-only.btn-success:hover {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
    background-color: #16a34a !important;
    background-image: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
    border-color: rgba(34, 197, 94, 0.5) !important;
    transform: translateY(-2px) scale(1.05) !important;
    box-shadow: 0 8px 24px rgba(34, 197, 94, 0.45) !important;
    color: white !important;
}

.storage-modal .btn-icon-only.btn-success:active,
.storage-modal button.btn-icon-only.btn-success:active,
.storage-modal .btn.btn-icon-only.btn-success:active {
    background: linear-gradient(135deg, #15803d 0%, #166534 100%) !important;
    background-color: #15803d !important;
    transform: translateY(-1px) scale(0.98) !important;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3) !important;
    color: white !important;
}

.storage-modal .btn-icon-only.btn-success i,
.storage-modal button.btn-icon-only.btn-success i,
.storage-modal .btn.btn-icon-only.btn-success i {
    color: white !important;
    font-size: 18px !important;
}

.storage-modal .btn-icon-only.btn-success:hover i,
.storage-modal button.btn-icon-only.btn-success:hover i,
.storage-modal .btn.btn-icon-only.btn-success:hover i {
    color: white !important;
    transform: scale(1.1);
}

/* ============================================
   10. RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .storage-modal {
        padding: 20px 16px !important;
    }
    
    .storage-modal .modal-content {
        max-width: 100% !important;
    }
    
    .storage-modal .modal-header {
        padding: 20px !important;
    }
    
    .storage-modal .modal-body {
        padding: 20px !important;
    }
    
    .storage-modal .modal-footer,
    .storage-modal .modal-body .modal-footer {
        padding: 16px 20px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 0 !important;
        flex-direction: column !important;
    }
    
    .storage-modal .btn-storage {
        width: 100% !important;
    }
    
    .storage-modal .modal-body .row {
        flex-direction: column !important;
    }
    
    .storage-modal .modal-body .col-md-6,
    .storage-modal .modal-body .col-md-4,
    .storage-modal .modal-body .col-md-2 {
        flex: 1 !important;
        width: 100% !important;
    }
}

/* === ZAKUPKI (ЗАКУПКИ) === */

/* Таблица закупок - УНИФИЦИРОВАННЫЙ СТИЛЬ как в мат. капитале */
.zakupki-table {
    width: 100%;
    min-width: 100%;
    table-layout: auto;
    border-collapse: separate;
    border-spacing: 0;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}

/* Убираем все границы внутри - только внешняя рамка */
.zakupki-table th,
.zakupki-table td {
    border: none !important;
}

.zakupki-table td {
    padding: 12px 10px !important;
    vertical-align: middle;
    font-size: 14px;
    line-height: 1.4;
    text-align: center;
}

.zakupki-table th {
    padding: 14px 10px !important;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
    border: none !important;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

.zakupki-table thead tr {
    border: none !important;
}

.zakupki-table thead {
    border: none !important;
}

.zakupki-table thead tr th {
    border-bottom: 2px solid #e5e7eb !important;
}

.zakupki-table thead tr:last-child th {
    border-bottom: 2px solid #e5e7eb !important;
}

.zakupki-table tbody tr:first-child td {
    border-top: none !important;
}

.zakupki-table,
.zakupki-table > thead,
.zakupki-table > tbody,
.zakupki-table > thead > tr,
.zakupki-table > tbody > tr {
    border-left: none !important;
    border-right: none !important;
}

.zakupki-table > thead > tr:last-child > th {
    border-bottom: 2px solid #e5e7eb !important;
}

.zakupki-table > tbody > tr:first-child > td {
    border-top: none !important;
}

.zakupki-table tbody tr {
    border-bottom: 1px solid #f1f5f9;
    transition: all 0.2s ease;
    background-color: transparent;
}

.zakupki-table tbody tr:hover {
    background-color: rgba(102, 126, 234, 0.06) !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Удалено - используются стили ниже */

/* ========================================
   РЕЖИМ РЕДАКТИРОВАНИЯ СТРОКИ - МИНИМАЛИСТИЧНЫЙ СТИЛЬ
   ======================================== */

/* Строка в режиме редактирования - тонкое выделение */
.zakupki-table tr.editing {
    background: rgba(102, 126, 234, 0.03) !important;
}

.zakupki-table tr.editing:hover {
    background: rgba(102, 126, 234, 0.05) !important;
}

/* Поля ввода в режиме редактирования наследуют глобальные стили */
.zakupki-table tr.editing input.form-control,
.zakupki-table tr.editing select.form-control {
    min-height: 32px !important;
    padding: 6px 10px !important;
}

/* Поле даты */
.zakupki-table tr.editing input[type="date"] {
    cursor: pointer;
}

/* Select2 контейнер - чистый стиль */
.zakupki-table tr.editing .select2-container {
    width: 100% !important;
}

.zakupki-table tr.editing .select2-container .select2-selection {
    border: 1px solid var(--color-border) !important;
    border-radius: 6px !important;
    background: white !important;
    height: auto !important;
    min-height: 32px !important;
    padding: 5px 10px !important;
    transition: all 0.2s ease !important;
}

.zakupki-table tr.editing .select2-container .select2-selection__rendered {
    padding: 0 !important;
    line-height: 20px !important;
    color: var(--color-text) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
}

.zakupki-table tr.editing .select2-container .select2-selection__arrow {
    height: 32px !important;
    top: 0 !important;
    right: 6px !important;
}

.zakupki-table tr.editing .select2-container .select2-selection__arrow b {
    border-color: var(--color-muted) transparent transparent transparent !important;
    border-width: 5px 4px 0 4px !important;
    margin-left: -4px !important;
    margin-top: -2px !important;
}

/* Select2 hover */
.zakupki-table tr.editing .select2-container:hover .select2-selection {
    border-color: rgba(102, 126, 234, 0.3) !important;
}

/* Select2 в фокусе */
.zakupki-table tr.editing .select2-container--open .select2-selection,
.zakupki-table tr.editing .select2-container--focus .select2-selection {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.08) !important;
}

/* Checkbox - минималистичный */
.zakupki-table tr.editing input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    cursor: pointer;
    accent-color: var(--color-primary);
}

/* Ячейки в режиме редактирования */
.zakupki-table tr.editing td {
    padding: 8px !important;
    vertical-align: middle !important;
}

/* Select2 dropdown - чистый стиль */
.select2-dropdown {
    border: 1px solid var(--color-border) !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--color-primary) !important;
    color: white !important;
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: rgba(102, 126, 234, 0.08) !important;
    color: var(--color-text) !important;
}

.select2-search--dropdown .select2-search__field {
    border: 1px solid var(--color-border) !important;
    border-radius: 6px !important;
    padding: 6px 10px !important;
    font-size: 14px !important;
}

.select2-search--dropdown .select2-search__field:focus {
    border-color: var(--color-primary) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.08) !important;
}

/* Фиксированная ширина для всех столбцов закупок */
.zakupki-table th:nth-child(1), 
.zakupki-table td:nth-child(1) { 
    width: 20% !important; /* Наименование */
    min-width: 160px;
    white-space: normal !important;
    word-break: break-word !important;
}

.zakupki-table th:nth-child(2), 
.zakupki-table td:nth-child(2) { 
    width: 6% !important; /* Ссылка */
    min-width: 55px;
    text-align: center !important;
}

.zakupki-table th:nth-child(3), 
.zakupki-table td:nth-child(3) { 
    width: 6% !important; /* Кол-во */
    min-width: 55px;
    text-align: center !important;
}

.zakupki-table th:nth-child(4), 
.zakupki-table td:nth-child(4) { 
    width: 10% !important; /* Филиал */
    min-width: 80px;
}

.zakupki-table th:nth-child(5), 
.zakupki-table td:nth-child(5) { 
    width: 8% !important; /* Доставка */
    min-width: 80px;
    text-align: center !important;
}

.zakupki-table th:nth-child(6), 
.zakupki-table td:nth-child(6) { 
    width: 10% !important; /* Заказчик */
    min-width: 90px;
}

.zakupki-table th:nth-child(7), 
.zakupki-table td:nth-child(7) { 
    width: 10% !important; /* Специалист */
    min-width: 90px;
}

.zakupki-table th:nth-child(8), 
.zakupki-table td:nth-child(8) { 
    width: 10% !important; /* Статус */
    min-width: 100px;
    text-align: center !important;
    white-space: normal !important;
}

.zakupki-table th:nth-child(9), 
.zakupki-table td:nth-child(9) { 
    width: 4% !important; /* Согласовано (галочка) */
    min-width: 40px;
    text-align: center !important;
}

.zakupki-table th:nth-child(10), 
.zakupki-table td:nth-child(10) { 
    width: 5% !important; /* Дата создания */
    min-width: 65px;
    text-align: center !important;
}

.zakupki-table th:nth-child(11), 
.zakupki-table td:nth-child(11) { 
    width: 10% !important; /* Действия - для круглых кнопок */
    min-width: 90px;
    text-align: center !important;
}

/* Форма статуса - выравнивание по центру */
.zakupki-table .status-form {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
}

/* Улучшенные стили для выпадающего списка статуса */
.zakupki-table .status-select {
    width: 100% !important;
    min-width: 95px !important;
    max-width: 110px !important;
    font-size: 12px !important;
    padding: 4px 8px !important;
    height: 30px !important;
    border-radius: 6px !important;
    border: 1px solid rgba(102, 126, 234, 0.2) !important;
    background-color: rgba(102, 126, 234, 0.05) !important;
    background-image: none !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
    text-align: center !important;
    margin: 0 auto !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}
.zakupki-table .status-select::-ms-expand { display: none !important; }

.zakupki-table .status-select:hover {
    border-color: rgba(102, 126, 234, 0.4) !important;
    background-color: rgba(102, 126, 234, 0.1) !important;
}

.zakupki-table .status-select:focus {
    border-color: var(--color-primary) !important;
    background-color: rgba(102, 126, 234, 0.08) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
}

.zakupki-table .select2-container .select2-selection--single {
    height: 34px !important;
    font-size: 13px;
    padding: 6px 10px;
    line-height: 1.4;
    border-radius: 20px !important;
    border: 1px solid rgba(102, 126, 234, 0.2) !important;
    background-color: rgba(102, 126, 234, 0.05) !important;
}

.zakupki-table .select2-container--default .select2-selection--single .select2-selection__rendered {
    font-size: 13px;
    line-height: 20px;
    font-weight: 600;
}

.zakupki-table input.form-control, 
.zakupki-table select.form-control {
    font-size: 13px;
    height: 34px;
    padding: 6px 10px;
}

.zakupki-table .btn,
.zakupki-table .btn.btn-sm {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

/* Улучшенная кнопка "Редактировать" - круглая */
.zakupki-table .btn-outline-primary,
.zakupki-table .btn.btn-outline-primary.btn-sm {
    background: var(--gradient-primary) !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 2px 6px rgba(102, 126, 234, 0.25) !important;
}

.zakupki-table .btn-outline-primary:hover {
    transform: scale(1.1) translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4) !important;
}

/* Улучшенная кнопка "Удалить" - круглая */
.zakupki-table .btn-outline-danger,
.zakupki-table .btn.btn-outline-danger.btn-sm {
    background: var(--gradient-danger) !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.25) !important;
}

.zakupki-table .btn-outline-danger:hover {
    transform: scale(1.1) translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4) !important;
}

.zakupki-table .btn i {
    font-size: 14px !important;
    margin: 0 !important;
    color: white !important;
}

.zakupki-table td .d-flex {
    gap: 8px !important;
    justify-content: center !important;
    align-items: center !important;
}

.zakupki-table .delete-form {
    display: inline !important;
    margin: 0 !important;
}

.zakupki-table .d-flex {
    gap: 8px !important;
}

/* Кнопки действий - круглые */
.zakupki-table td:nth-child(11) .btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    border-radius: 50% !important;
}

.select2-container--default .select2-dropdown.big-select2 {
    font-size: var(--font-size-sm);
}

.zakupki-table-wrapper {
    overflow-x: auto;
    width: 100%;
    border-radius: var(--radius-md);
}

/* Стили для режима редактирования строки */
.zakupki-table tr.editing td {
    padding: 6px 8px;
    vertical-align: middle;
}

/* Поля наследуют глобальные стили */
.zakupki-table tr.editing input.form-control,
.zakupki-table tr.editing select.form-control {
    height: 36px;
    padding: 8px 12px;
}

/* Стрелка для обычного select */
.zakupki-table tr.editing select.form-control {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
    padding-right: 36px;
}

.zakupki-table tr.editing input.form-control:focus,
.zakupki-table tr.editing select.form-control:focus {
    border-color: var(--color-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    background-color: white;
}

.zakupki-table tr.editing select.form-control:focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23667eea' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
}

.zakupki-table tr.editing input.form-control::placeholder {
    color: var(--color-muted);
    opacity: 0.7;
}

/* Select2 в режиме редактирования - СТИЛЬ КАК В СИСТЕМЕ */
.zakupki-table tr.editing .select2-container {
    width: 100% !important;
}

.zakupki-table tr.editing .select2-container .select2-selection--single {
    height: 36px !important;
    font-size: var(--font-size-sm) !important;
    padding: 8px 12px !important;
    border: 2px solid var(--color-border) !important;
    border-radius: var(--radius-sm) !important;
    line-height: 1.4 !important;
    background: white !important;
    transition: var(--transition-fast) !important;
}

.zakupki-table tr.editing .select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 18px !important;
    padding-left: 0 !important;
    padding-right: 24px !important;
    color: var(--color-text) !important;
}

.zakupki-table tr.editing .select2-container .select2-selection--single .select2-selection__arrow {
    height: 34px !important;
    right: 8px !important;
}

.zakupki-table tr.editing .select2-container--default .select2-selection--single:focus,
.zakupki-table tr.editing .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--color-primary) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
}

.zakupki-table tr.editing .select2-container--default .select2-selection--single:hover {
    border-color: var(--color-primary) !important;
}

/* Кнопки в режиме редактирования - КРАСИВЫЙ СТИЛЬ С ПРИОРИТЕТОМ */
.zakupki-table tr.editing .btn,
.zakupki-table tr.new-row .btn,
.zakupki-table tr.editing .btn.btn-sm,
.zakupki-table tr.new-row .btn.btn-sm {
    padding: 6px 12px !important;
    border-radius: 6px !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    border: none !important;
    cursor: pointer !important;
    transition: var(--transition-fast) !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    gap: 6px !important;
    border-radius: var(--radius-sm) !important;
    font-weight: var(--font-weight-semibold) !important;
    transition: var(--transition) !important;
    cursor: pointer !important;
    border: 2px solid transparent !important;
    line-height: 1 !important;
}

/* Кнопка "Сохранить" (Success) */
/* Контейнер для кнопок в режиме редактирования */
.zakupki-table tr.editing td:last-child,
.zakupki-table tr.new-row td:last-child {
    text-align: center !important;
}

.zakupki-table tr.editing td:last-child > *,
.zakupki-table tr.new-row td:last-child > * {
    display: inline-flex !important;
    vertical-align: middle !important;
}

/* Отступ между кнопками в режиме редактирования */
.zakupki-table tr.editing .btn-success,
.zakupki-table tr.new-row .btn-success {
    margin-right: 4px !important;
}

/* Кнопка "Сохранить" (Success) - ТОЧНО как "Редактировать" и "Удалить" */
.zakupki-table tr.editing .btn-success,
.zakupki-table tr.new-row .btn-success,
.zakupki-table tr.editing .btn.btn-success.btn-sm,
.zakupki-table tr.new-row .btn.btn-success.btn-sm {
    background: var(--gradient-success) !important;
    color: white !important;
    border: none !important;
    padding: 6px 12px !important;
    border-radius: 20px !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    min-width: 36px !important;
    height: 28px !important;
    box-sizing: border-box !important;
}

.zakupki-table tr.editing .btn-success:hover,
.zakupki-table tr.new-row .btn-success:hover {
    opacity: 0.9 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.25) !important;
}

.zakupki-table tr.editing .btn-success i,
.zakupki-table tr.new-row .btn-success i {
    color: white !important;
    font-size: 12px !important;
    margin: 0 !important;
}

/* Кнопка "Отмена" (Secondary) - ТОЧНО как "Редактировать" и "Удалить" */
.zakupki-table tr.editing .btn-secondary,
.zakupki-table tr.new-row .btn-secondary,
.zakupki-table tr.editing .btn.btn-secondary.btn-sm,
.zakupki-table tr.new-row .btn.btn-secondary.btn-sm {
    background: var(--gradient-secondary) !important;
    color: white !important;
    border: none !important;
    padding: 6px 12px !important;
    border-radius: 20px !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    min-width: 36px !important;
    height: 28px !important;
    box-sizing: border-box !important;
}

.zakupki-table tr.editing .btn-secondary:hover,
.zakupki-table tr.new-row .btn-secondary:hover {
    opacity: 0.9 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(107, 114, 128, 0.25) !important;
}

.zakupki-table tr.editing .btn-secondary i,
.zakupki-table tr.new-row .btn-secondary i {
    color: white !important;
    font-size: 12px !important;
    margin: 0 !important;
}

.zakupki-table tr.editing .btn i,
.zakupki-table tr.new-row .btn i {
    font-size: 12px !important;
    margin: 0 !important;
    color: white !important;
}

/* КРИТИЧЕСКИ ВАЖНО: белые иконки во всех кнопках режима редактирования */
.zakupki-table tr.editing .btn.btn-success i,
.zakupki-table tr.editing .btn-success i,
.zakupki-table tr.editing .btn.btn-secondary i,
.zakupki-table tr.editing .btn-secondary i,
.zakupki-table tr.new-row .btn.btn-success i,
.zakupki-table tr.new-row .btn-success i,
.zakupki-table tr.new-row .btn.btn-secondary i,
.zakupki-table tr.new-row .btn-secondary i {
    color: white !important;
    opacity: 1 !important;
}

/* Новая строка - СТИЛЬ КАК В СИСТЕМЕ */
.zakupki-table tr.new-row td {
    padding: 6px 8px;
    vertical-align: middle;
    background: rgba(102, 126, 234, 0.03);
    border-top: 2px solid var(--color-primary);
}

.zakupki-table tr.new-row input.form-control,
.zakupki-table tr.new-row select.form-control {
    font-size: var(--font-size-sm);
    height: 36px;
    padding: 8px 12px;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-sm);
    width: 100%;
    background: white;
    color: var(--color-text);
    font-family: var(--font-family-base);
    transition: var(--transition-fast);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

/* Стрелка для обычного select в новой строке */
.zakupki-table tr.new-row select.form-control {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
    padding-right: 36px;
}

.zakupki-table tr.new-row input.form-control:focus,
.zakupki-table tr.new-row select.form-control:focus {
    border-color: var(--color-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.zakupki-table tr.new-row select.form-control:focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23667eea' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
}

.zakupki-table tr.new-row .select2-container .select2-selection--single {
    height: 36px !important;
    font-size: var(--font-size-sm) !important;
    padding: 8px 12px !important;
    border: 2px solid var(--color-border) !important;
    border-radius: var(--radius-sm) !important;
    background: white !important;
}

.zakupki-table tr.new-row .select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 18px !important;
    color: var(--color-text) !important;
}

.zakupki-table tr.new-row .select2-container .select2-selection--single .select2-selection__arrow {
    height: 34px !important;
    right: 8px !important;
}

.zakupki-table tr.new-row .select2-container--default .select2-selection--single:focus,
.zakupki-table tr.new-row .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
}

/* Стили для выпадающего списка Select2 (dropdown) */
.select2-container--default .select2-dropdown.big-select2 {
    border: 2px solid var(--color-primary) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: var(--shadow-md) !important;
    background: white !important;
    margin-top: 4px !important;
}

.select2-container--default .select2-dropdown.big-select2 .select2-search--dropdown {
    padding: 8px !important;
}

.select2-container--default .select2-dropdown.big-select2 .select2-search__field {
    border: 2px solid var(--color-border) !important;
    border-radius: var(--radius-sm) !important;
    padding: 8px 12px !important;
    font-size: var(--font-size-sm) !important;
    font-family: var(--font-family-base) !important;
}

.select2-container--default .select2-dropdown.big-select2 .select2-search__field:focus {
    border-color: var(--color-primary) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
}

.select2-container--default .select2-dropdown.big-select2 .select2-results__options {
    max-height: 300px !important;
    overflow-y: auto !important;
}

.select2-container--default .select2-dropdown.big-select2 .select2-results__option {
    padding: 10px 12px !important;
    font-size: var(--font-size-sm) !important;
    font-family: var(--font-family-base) !important;
    color: var(--color-text) !important;
    transition: var(--transition-fast) !important;
}

.select2-container--default .select2-dropdown.big-select2 .select2-results__option--highlighted {
    background: rgba(102, 126, 234, 0.1) !important;
    color: var(--color-primary) !important;
}

.select2-container--default .select2-dropdown.big-select2 .select2-results__option--selected {
    background: rgba(102, 126, 234, 0.15) !important;
    color: var(--color-primary) !important;
    font-weight: var(--font-weight-semibold) !important;
}

.select2-container--default .select2-dropdown.big-select2 .select2-results__option:hover {
    background: rgba(102, 126, 234, 0.08) !important;
}

/* Карточка, содержащая таблицу закупок - унификация со стилем мат. капитала */
.card:has(.zakupki-table) {
    border: none !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
    border-radius: 12px !important;
}

.card:has(.zakupki-table) .card-body {
    padding: 0 !important;
}

.zakupki-table-wrapper {
    border-radius: 12px;
    overflow: hidden;
}

/* Вкладки закупок используют общий стиль .nav-tabs выше */

/* === ZAKUPKI: STATUS COLOR INDICATORS === */

.status-select.status--urgent {
    background-color: rgba(239, 68, 68, 0.10) !important;
    border-color: rgba(239, 68, 68, 0.5) !important;
    color: #b91c1c !important;
}
.status-select.status--urgent:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
    border-color: #ef4444 !important;
}

.status-select.status--not-ordered {
    background-color: rgba(245, 158, 11, 0.10) !important;
    border-color: rgba(245, 158, 11, 0.45) !important;
    color: #92400e !important;
}
.status-select.status--not-ordered:focus {
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15) !important;
    border-color: #f59e0b !important;
}

.status-select.status--ordered {
    background-color: rgba(59, 130, 246, 0.10) !important;
    border-color: rgba(59, 130, 246, 0.45) !important;
    color: #1e40af !important;
}
.status-select.status--ordered:focus {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
    border-color: #3b82f6 !important;
}

.status-select.status--delivered {
    background-color: rgba(34, 197, 94, 0.10) !important;
    border-color: rgba(34, 197, 94, 0.45) !important;
    color: #166534 !important;
}
.status-select.status--delivered:focus {
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15) !important;
    border-color: #22c55e !important;
}

/* Row fade-out animation for status change / delete */
.zakupki-table tbody tr.zakupki-fade-out {
    transition: opacity 0.35s ease, transform 0.35s ease;
    opacity: 0;
    transform: translateX(30px);
}

/* Row fade-in animation for newly added rows */
.zakupki-table tbody tr.zakupki-fade-in {
    animation: zakupkiFadeIn 0.35s ease forwards;
}
@keyframes zakupkiFadeIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Flash highlight after inline edit save */
.zakupki-table tbody tr.zakupki-highlight {
    animation: zakupkiHighlight 1.2s ease;
}
@keyframes zakupkiHighlight {
    0%   { background-color: rgba(102, 126, 234, 0.18); }
    100% { background-color: transparent; }
}

/* === ZAKUPKI: EMPTY STATE === */

.zakupki-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 56px 24px;
    text-align: center;
}
.zakupki-empty-state .zakupki-empty-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.12) 0%, rgba(118, 75, 226, 0.12) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}
.zakupki-empty-state .zakupki-empty-icon i {
    font-size: 28px;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.zakupki-empty-state .zakupki-empty-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 6px;
}
.zakupki-empty-state .zakupki-empty-subtitle {
    font-size: 14px;
    color: var(--color-muted);
    max-width: 340px;
}

/* === ZAKUPKI: MOBILE CARD VIEW === */

@media (max-width: 768px) {

    /* --- wrapper: kill background & overflow from later rules --- */
    .zakupki-table-wrapper {
        overflow-x: visible !important;
        overflow: visible !important;
        background: transparent !important;
        border-radius: 0 !important;
    }

    .zakupki-table {
        border: none !important;
        background: transparent !important;
        border-radius: 0 !important;
    }

    .zakupki-table thead {
        display: none !important;
    }

    .zakupki-table tbody {
        display: flex !important;
        flex-direction: column;
        gap: 12px;
    }

    /* --- card row --- */
    .zakupki-table tbody tr {
        display: flex !important;
        flex-wrap: wrap;
        background: white !important;
        border-radius: 12px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
        border: 1px solid #e5e7eb !important;
        padding: 16px !important;
        gap: 0;
        position: relative;
    }
    .zakupki-table tbody tr:hover {
        transform: none !important;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10) !important;
    }

    /* --- every cell: flex row with label::before + value --- */
    .zakupki-table tbody tr td {
        display: flex !important;
        align-items: center !important;
        padding: 5px 0 !important;
        border: none !important;
        font-size: 13px !important;
        text-align: left !important;
        min-height: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        background: transparent !important;
    }

    .zakupki-table tbody tr td::before {
        content: attr(data-label);
        display: inline-block !important;
        font-weight: 600 !important;
        font-size: 12px !important;
        color: #6b7280 !important;
        min-width: 100px !important;
        flex-shrink: 0 !important;
        padding-right: 8px !important;
    }

    /* Hide label for cells that don't need one */
    .zakupki-table tbody tr td[data-label=""]::before {
        display: none !important;
    }

    /* --- Name: full width, bold, no label --- */
    .zakupki-table tbody tr td:nth-child(1) {
        width: 100% !important;
        font-weight: 600 !important;
        font-size: 16px !important;
        padding-bottom: 10px !important;
        border-bottom: 1px solid #f1f5f9 !important;
        margin-bottom: 6px;
    }
    .zakupki-table tbody tr td:nth-child(1)::before {
        display: none !important;
    }

    /* --- Link icon: float to top-right corner --- */
    .zakupki-table tbody tr td:nth-child(2) {
        position: absolute !important;
        top: 16px !important;
        right: 16px !important;
        width: auto !important;
        padding: 0 !important;
    }
    .zakupki-table tbody tr td:nth-child(2)::before {
        display: none !important;
    }

    /* --- Grid: quantity, branch, delivery, requester, specialist --- */
    .zakupki-table tbody tr td:nth-child(3),
    .zakupki-table tbody tr td:nth-child(4),
    .zakupki-table tbody tr td:nth-child(5),
    .zakupki-table tbody tr td:nth-child(6),
    .zakupki-table tbody tr td:nth-child(7),
    .zakupki-table tbody tr td:nth-child(10) {
        width: 100% !important;
    }

    /* --- Status row --- */
    .zakupki-table tbody tr td:nth-child(8) {
        width: 60% !important;
        padding-top: 8px !important;
        border-top: 1px solid #f1f5f9 !important;
        margin-top: 4px;
    }
    .zakupki-table tbody tr td:nth-child(8) .status-form {
        width: auto !important;
        justify-content: flex-start !important;
    }
    .zakupki-table .status-select {
        max-width: none !important;
        min-width: 0 !important;
        width: auto !important;
    }

    /* --- Approval: beside status --- */
    .zakupki-table tbody tr td:nth-child(9) {
        width: 40% !important;
        padding-top: 8px !important;
        border-top: 1px solid #f1f5f9 !important;
        margin-top: 4px;
        justify-content: flex-end !important;
    }

    /* --- Date --- */
    .zakupki-table tbody tr td:nth-child(10) {
        padding-bottom: 4px !important;
    }

    /* --- Actions: right-aligned at bottom --- */
    .zakupki-table tbody tr td:nth-child(11) {
        width: 100% !important;
        justify-content: flex-end !important;
        padding-top: 10px !important;
        border-top: 1px solid #f1f5f9 !important;
        margin-top: 4px;
    }
    .zakupki-table tbody tr td:nth-child(11)::before {
        display: none !important;
    }
    /* Кнопки в карточке — скруглённые прямоугольники, не круги */
    .zakupki-table tbody tr td:nth-child(11) .btn {
        border-radius: 8px !important;
        flex: 0 0 auto !important;
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
    }
    .zakupki-table tbody tr td:nth-child(11) .d-flex {
        width: 100% !important;
        justify-content: flex-end !important;
        gap: 8px !important;
    }

    /* --- Editing / new-row: all cells full-width --- */
    .zakupki-table tbody tr.editing td,
    .zakupki-table tbody tr.new-row td {
        width: 100% !important;
        position: static !important;
    }
    .zakupki-table tbody tr.editing td::before,
    .zakupki-table tbody tr.new-row td::before {
        min-width: 100px !important;
    }

    /* --- Toolbar: tabs above, filter+button below --- */
    .zakupki-toolbar {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }
    .zakupki-toolbar .nav-tabs {
        order: 1;
        width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .zakupki-toolbar .nav-tabs::-webkit-scrollbar {
        display: none;
    }
    .zakupki-toolbar .nav-tabs .nav-item {
        flex-shrink: 0;
    }
    .zakupki-toolbar .custom-select-container:has(#branchSelect) {
        order: 2;
        flex: 1 !important;
        min-width: 120px !important;
        max-width: none !important;
    }
    .zakupki-toolbar #addRowBtn {
        order: 3;
    }
}

@media (max-width: 575px) {
    .zakupki-table tbody tr td:nth-child(8),
    .zakupki-table tbody tr td:nth-child(9) {
        width: 100% !important;
    }
    .zakupki-table tbody tr td:nth-child(9) {
        justify-content: flex-start !important;
        border-top: none !important;
        margin-top: 0 !important;
        padding-top: 5px !important;
    }
}

/* ========================================
   6. МОБИЛЬНАЯ АДАПТИВНОСТЬ
   ======================================== */

/* Базовые утилиты */
.overflow-x-auto {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Адаптивные контейнеры */
@media (max-width: 1024px) {
    .container,
    .container-fluid {
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
    }
    
    .welcome-card {
        padding: 24px 28px;
    }
    
    .welcome-card::before,
    .welcome-card::after {
        width: 300px;
        height: 300px;
    }
    
    .welcome-title {
        font-size: 1.6rem;
    }
    
    .storage-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: var(--space-3);
    }
    
    .knowledge-sidebar:not(.pinned) {
        width: 50px;
    }
    
    .knowledge-sidebar:not(.pinned):hover {
        width: 280px;
    }
}

@media (max-width: 768px) {
    .container,
    .container-fluid {
        padding-left: max(8px, env(safe-area-inset-left));
        padding-right: max(8px, env(safe-area-inset-right));
    }
    
    /* Предотвращение автоматического zoom на iOS при фокусе на input */
    .form-control,
    .form-select,
    .rehab-input,
    .rehab-select,
    input[type="text"],
    input[type="email"],
    input[type="search"],
    input[type="tel"],
    input[type="number"] {
        font-size: 16px !important;
    }
    
    .rehab-textarea,
    textarea.form-control {
        font-size: 16px !important;
    }
    
    /* Удобная область нажатия для однострочных полей (не textarea) */
    input.form-control,
    select.form-control,
    .form-select,
    .rehab-input,
    .rehab-select,
    input[type="text"],
    input[type="email"],
    input[type="search"],
    input[type="tel"],
    input[type="number"] {
        min-height: 44px;
    }
    
    .rehab-btn {
        padding: 10px 20px;
    }
    
    .rehab-modal .modal-dialog {
        margin: var(--space-2);
        max-width: calc(100% - var(--space-4));
    }
    
    .rehab-modal .modal-header {
        padding: var(--modal-header-padding-mobile);
    }
    
    .rehab-modal .modal-body {
        padding: var(--modal-body-padding-mobile);
    }
    
    .rehab-modal .modal-footer {
        padding: var(--modal-footer-padding-mobile);
    }
    
    .welcome-card {
        padding: 20px 24px;
    }
    
    .welcome-card::before,
    .welcome-card::after {
        width: 250px;
        height: 250px;
    }
    
    .welcome-card .particle {
        /* Оставляем частицы видимыми на всех устройствах */
    }
    
    .welcome-title {
        font-size: 1.4rem;
    }
    
    .current-datetime {
        flex-direction: column;
        gap: var(--space-2);
        align-items: flex-start;
    }
    
    .storage-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: var(--space-2);
    }
    
    .storage-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    
    .task-item {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }
    
    .task-actions {
        width: 100%;
        justify-content: flex-end;
    }
    
    .files-toggle-btn {
        padding: 6px 12px;
        font-size: 12px;
    }
    
    .file-action-btn {
        padding: 6px 10px;
        font-size: 12px;
    }
    
    .v2-card-body {
        padding: var(--space-4);
    }
    
    /* Быстрые действия на мобильных */
    .quick-action-btn {
        padding: 6px 12px !important;
        font-size: 0.8rem !important;
        min-width: unset !important;
        max-width: unset !important;
    }
    
    .quick-action-btn i {
        font-size: 0.85rem !important;
    }
    
    .quick-actions {
        flex-direction: column !important;
    }
    
    /* Вкладки на мобильных */
    .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .nav-tabs .nav-link {
        white-space: nowrap;
        font-size: 14px;
        padding: 10px 12px;
    }
    
    /* Birthday card на мобильных */
    .birthday-content {
        flex-direction: column;
        align-items: stretch;
    }
    
    .birthday-item {
        min-width: auto;
        width: 100%;
    }
    
    /* Администраторы на мобильных */
    .branch-schedule {
        padding: 12px;
    }
    
    .admin-item {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }
    
    /* Отпуска на мобильных */
    .vacation-details {
        margin-left: 15px;
    }
    
    .vacation-replacement {
        margin-left: 15px;
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
}

@media (max-width: 576px) {
    /* Safe area для устройств с вырезом (notch) */
    .container,
    .container-fluid,
    .main-bg-wrapper {
        padding-left: max(8px, env(safe-area-inset-left)) !important;
        padding-right: max(8px, env(safe-area-inset-right)) !important;
        padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
    }
    
    .rehab-modal .modal-dialog,
    .modal-dialog {
        margin: 0;
        max-width: 100%;
        height: 100%;
    }
    
    .rehab-modal .modal-content,
    .modal-content {
        height: 100%;
        border-radius: 0;
    }
    
    .rehab-modal .modal-body,
    .modal-body {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .welcome-card {
        padding: 16px 20px;
    }
    
    .welcome-card::before,
    .welcome-card::after {
        width: 200px;
        height: 200px;
    }
    
    .welcome-card .particle {
        /* Показываем частицы на планшетах, скрываем только на телефонах */
    }
    
    .welcome-title {
        font-size: 1.2rem;
    }
    
    .dashboard-card .card-body {
        padding: var(--space-3);
    }
    
    .storage-grid {
        grid-template-columns: 1fr;
    }
    
    .stat-card {
        padding: 16px;
    }
    
    .stat-value {
        font-size: 1.5rem;
    }
    
    /* На мобильных показываем только иконки в бейджах */
    .badge .badge-text {
        display: none;
    }
    
    .badge {
        padding: 6px 8px;
        min-width: 32px;
        justify-content: center;
    }
}

/* Адаптивная типографика */
@media (max-width: 1024px) {
    body {
        font-size: 14px;
    }
    
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }
    h4 { font-size: 1.1rem; }
    h5 { font-size: 1rem; }
    h6 { font-size: 0.9rem; }
}

@media (max-width: 576px) {
    body {
        font-size: 13px;
    }
    
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.3rem; }
    h3 { font-size: 1.15rem; }
    h4 { font-size: 1rem; }
    h5 { font-size: 0.95rem; }
    h6 { font-size: 0.85rem; }
}

/* Утилиты для touch устройств */
@media (hover: none) and (pointer: coarse) {
    /* Увеличиваем области нажатия на touch устройствах (только кнопки, не inline-ссылки) */
    .rehab-btn,
    .btn,
    button,
    a.btn,
    .nav-link,
    .page-header-actions .btn,
    .page-header-actions a.btn {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Убираем hover эффекты на touch */
    .rehab-btn:hover,
    .btn:hover,
    .rehab-card:hover,
    .storage-item:hover {
        transform: none;
    }
}

/* ========================================
   7. УТИЛИТЫ
   ======================================== */

.rehab-text-center {
    text-align: center;
}

.rehab-text-right {
    text-align: right;
}

.rehab-mt-1 { margin-top: var(--space-1); }
.rehab-mt-2 { margin-top: var(--space-2); }
.rehab-mt-3 { margin-top: var(--space-3); }
.rehab-mt-4 { margin-top: var(--space-4); }
.rehab-mt-5 { margin-top: var(--space-5); }
.rehab-mt-6 { margin-top: var(--space-6); }

.rehab-mb-1 { margin-bottom: var(--space-1); }
.rehab-mb-2 { margin-bottom: var(--space-2); }
.rehab-mb-3 { margin-bottom: var(--space-3); }
.rehab-mb-4 { margin-bottom: var(--space-4); }
.rehab-mb-5 { margin-bottom: var(--space-5); }
.rehab-mb-6 { margin-bottom: var(--space-6); }

.rehab-gap-1 { gap: var(--space-1); }
.rehab-gap-2 { gap: var(--space-2); }
.rehab-gap-3 { gap: var(--space-3); }
.rehab-gap-4 { gap: var(--space-4); }

/* ========================================
   8. ОБРАТНАЯ СОВМЕСТИМОСТЬ
   ======================================== */

/* V2 кнопки (совместимость) */
.v2-btn {
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-semibold);
    padding: var(--button-padding-md);
    border: none;
    transition: var(--transition-button);
    box-shadow: var(--shadow-button);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.v2-btn-primary {
    background: var(--gradient-primary);
    color: white;
}

.v2-btn-secondary {
    background: #eef2ff;
    color: #1f2937;
    border: 1px solid #c7d2fe;
}

.v2-btn-success {
    background: var(--gradient-success);
    color: white;
}

.v2-btn-info {
    background: var(--gradient-info);
    color: white;
}

.v2-btn-danger {
    background: var(--gradient-danger);
    color: white;
}

.v2-btn-sm {
    padding: var(--button-padding-sm);
    font-size: var(--button-font-size-sm);
}

.v2-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-button-hover);
}

/* ========================================
   СТЕКЛЯННЫЕ КНОПКИ В ФУТЕРЕ КАРТОЧКИ РЕБЕНКА
   ======================================== */

/* Фон футера с кнопками */
.btn-footer-container.report-section {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border-top: none !important;
    box-shadow: 0 -4px 20px rgba(102, 126, 234, 0.2) !important;
}

/* Стеклянный эффект для ВСЕХ кнопок в футере */
.btn-footer-container .v2-btn,
.btn-footer-container button.v2-btn,
.btn-footer-container .v2-btn.v2-btn,
.btn-footer-container .v2-btn-primary,
.btn-footer-container .v2-btn-secondary,
.btn-footer-container .v2-btn-success,
.btn-footer-container .v2-btn-info,
.btn-footer-container .v2-btn-danger,
.btn-footer-container button.v2-btn-primary,
.btn-footer-container button.v2-btn-secondary,
.btn-footer-container button.v2-btn-success,
.btn-footer-container button.v2-btn-info,
.btn-footer-container button.v2-btn-danger,
.btn-footer-container .v2-btn.v2-btn-primary,
.btn-footer-container .v2-btn.v2-btn-secondary,
.btn-footer-container .v2-btn.v2-btn-success,
.btn-footer-container .v2-btn.v2-btn-info,
.btn-footer-container .v2-btn.v2-btn-danger {
    background: rgba(255, 255, 255, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1) !important;
    color: white !important;
    filter: none !important;
}

/* Hover эффект для кнопок в футере */
.btn-footer-container .v2-btn:hover,
.btn-footer-container button.v2-btn:hover,
.btn-footer-container .v2-btn.v2-btn:hover,
.btn-footer-container .v2-btn-primary:hover,
.btn-footer-container .v2-btn-secondary:hover,
.btn-footer-container .v2-btn-success:hover,
.btn-footer-container .v2-btn-info:hover,
.btn-footer-container .v2-btn-danger:hover {
    background: rgba(255, 255, 255, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.2) !important;
    color: white !important;
    filter: none !important;
}

/* Active эффект */
.btn-footer-container .v2-btn:active,
.btn-footer-container button.v2-btn:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.15) !important;
}

/* Иконки в кнопках футера */
.btn-footer-container .v2-btn i,
.btn-footer-container button.v2-btn i {
    color: white !important;
}

/* ========================================
   МОДАЛЬНОЕ ОКНО ИИ ЧАТ-БОТА
   ======================================== */

/* Заголовок модального окна - МАКСИМАЛЬНАЯ СПЕЦИФИЧНОСТЬ */
#aiChatModal.modal .modal-header,
#aiChatModal .modal-header,
div#aiChatModal .modal-header {
    padding: 1rem 1.5rem !important;
    background: linear-gradient(135deg, #ec4899 0%, #be185d 100%) !important;
    border: none !important;
}

#aiChatModal .modal-title,
#aiChatModal .modal-title.text-white {
    font-size: 1.25rem !important;
    font-weight: 600 !important;
}

/* Контейнер модального тела */
#aiChatModal .modal-body {
    padding: 0 !important;
}

/* Ввод чата: единый контур без двойной обводки */
#aiChatModal .ai-chat-input-group {
    display: flex !important;
    align-items: stretch !important;
    height: 50px !important;
    border: 2px solid #ec4899 !important;
    border-radius: 25px !important;
    overflow: hidden !important;
    background: #fff !important;
    box-shadow: none !important;
}

#aiChatModal #aiChatInput.form-control,
#aiChatModal .ai-chat-input {
    height: 100% !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 16px !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    box-shadow: none !important;
    outline: none !important;
    background: transparent !important;
}

#aiChatModal #aiChatInput.form-control:focus,
#aiChatModal .ai-chat-input:focus {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

#aiChatModal #aiChatSend.btn,
#aiChatModal .ai-chat-send-btn {
    height: 100% !important;
    min-width: 56px !important;
    padding: 0 16px !important;
    border: none !important;
    border-left: 1px solid rgba(255, 255, 255, 0.35) !important;
    border-radius: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #ec4899 0%, #be185d 100%) !important;
    color: #fff !important;
    font-size: 14px !important;
    line-height: 1 !important;
}

#aiChatModal #aiChatSend.btn:hover,
#aiChatModal .ai-chat-send-btn:hover {
    background: linear-gradient(135deg, #db2777 0%, #9f1239 100%) !important;
    transform: none !important;
}

#aiChatModal #aiChatSend i,
#aiChatModal .ai-chat-send-btn i {
    font-size: 14px !important;
    margin: 0 !important;
}

/* ========================================
   ГЛОБАЛЬНЫЕ СТИЛИ КНОПОК (Bootstrap Override)
   Используются везде в проекте, кроме .rehab-btn
   ======================================== */

/* Primary - фиолетовый градиент */
.btn.btn-primary:not(.rehab-btn) {
    background: var(--gradient-primary) !important;
    border: none !important;
    border-radius: 20px !important;
    color: white !important;
    font-weight: var(--font-weight-semibold) !important;
    transition: var(--transition-fast) !important;
    box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2) !important;
}

.btn.btn-primary:not(.rehab-btn):hover:not(:disabled) {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4) !important;
}

/* Info - бирюзовый градиент */
.btn.btn-info:not(.rehab-btn) {
    background: var(--gradient-info) !important;
    border: none !important;
    border-radius: 20px !important;
    color: white !important;
    font-weight: var(--font-weight-semibold) !important;
    transition: var(--transition-fast) !important;
    box-shadow: 0 2px 4px rgba(6, 182, 212, 0.2) !important;
}

.btn.btn-info:not(.rehab-btn):hover:not(:disabled) {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.4) !important;
}

/* Success - зеленый градиент */
.btn.btn-success:not(.rehab-btn) {
    background: var(--gradient-success) !important;
    border: none !important;
    border-radius: 20px !important;
    color: white !important;
    font-weight: var(--font-weight-semibold) !important;
    transition: var(--transition-fast) !important;
    box-shadow: 0 2px 4px rgba(34, 197, 94, 0.2) !important;
}

.btn.btn-success:not(.rehab-btn) i {
    color: white !important;
}

.btn.btn-success:not(.rehab-btn):hover:not(:disabled) {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4) !important;
}

/* Danger - красный градиент */
.btn.btn-danger:not(.rehab-btn) {
    background: var(--gradient-danger) !important;
    border: none !important;
    border-radius: 20px !important;
    color: white !important;
    font-weight: var(--font-weight-semibold) !important;
    transition: var(--transition-fast) !important;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.2) !important;
}

.btn.btn-danger:not(.rehab-btn) i {
    color: white !important;
}

.btn.btn-danger:not(.rehab-btn):hover:not(:disabled) {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4) !important;
}

/* Warning - оранжевый градиент */
.btn.btn-warning:not(.rehab-btn) {
    background: var(--gradient-warning) !important;
    border: none !important;
    border-radius: 20px !important;
    color: white !important;
    font-weight: var(--font-weight-semibold) !important;
    transition: var(--transition-fast) !important;
    box-shadow: 0 2px 4px rgba(245, 158, 11, 0.2) !important;
}

.btn.btn-warning:not(.rehab-btn) i {
    color: white !important;
}

.btn.btn-warning:not(.rehab-btn):hover:not(:disabled) {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4) !important;
}

/* Secondary - серый градиент */
.btn.btn-secondary:not(.rehab-btn) {
    background: var(--gradient-secondary) !important;
    border: none !important;
    border-radius: 20px !important;
    color: white !important;
    font-weight: var(--font-weight-semibold) !important;
    transition: var(--transition-fast) !important;
    box-shadow: 0 2px 4px rgba(107, 114, 128, 0.2) !important;
}

.btn.btn-secondary:not(.rehab-btn) i {
    color: white !important;
}

.btn.btn-secondary:not(.rehab-btn):hover:not(:disabled) {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(107, 114, 128, 0.4) !important;
}

/* Disabled состояние для всех кнопок */
.btn:not(.rehab-btn):disabled,
.btn:not(.rehab-btn).disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
    filter: grayscale(0.3) !important;
}

/* Явное переопределение для кнопок в page-header-actions */
.page-header-actions .btn.btn-primary:not(.rehab-btn),
.page-header-actions button.btn-primary:not(.rehab-btn),
.page-header-actions a.btn-primary:not(.rehab-btn) {
    background: rgba(255, 255, 255, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: none !important;
}

/* Явное переопределение для всех типов кнопок в page-header-actions */
.page-header-actions .btn.btn-success:not(.rehab-btn),
.page-header-actions button.btn-success:not(.rehab-btn),
.page-header-actions a.btn-success:not(.rehab-btn),
.page-header-actions .btn.btn-danger:not(.rehab-btn),
.page-header-actions button.btn-danger:not(.rehab-btn),
.page-header-actions a.btn-danger:not(.rehab-btn),
.page-header-actions .btn.btn-warning:not(.rehab-btn),
.page-header-actions button.btn-warning:not(.rehab-btn),
.page-header-actions a.btn-warning:not(.rehab-btn),
.page-header-actions .btn.btn-info:not(.rehab-btn),
.page-header-actions button.btn-info:not(.rehab-btn),
.page-header-actions a.btn-info:not(.rehab-btn),
.page-header-actions .btn.btn-secondary:not(.rehab-btn),
.page-header-actions button.btn-secondary:not(.rehab-btn),
.page-header-actions a.btn-secondary:not(.rehab-btn) {
    background: rgba(255, 255, 255, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

/* ========================================
   МОБИЛЬНЫЕ УСТРОЙСТВА (< 480px)
   ======================================== */
@media (max-width: 480px) {
    .welcome-card .particle {
        display: none !important; /* Скрываем частицы только на телефонах */
    }
}

/* ========================================
   СТАРЫЕ АНИМАЦИИ ДЛЯ PAGE-HEADER - УДАЛЕНЫ
   Новые стили находятся в секции "PAGE HEADER" ниже
   ======================================== */

/* ========================================
   УНИФИЦИРОВАННЫЕ ФИЛЬТРЫ (для Notes & Tasks)
   ======================================== */

/* Карточка фильтров в едином стиле */
.unified-filters-card {
    background: white !important;
    /* Фейковый бордер через box-shadow (не создаёт inner-radius mismatch
       у дочернего .unified-filters-header) + обычная тень. */
    border-radius: var(--radius-lg) !important;
    box-shadow: 0 0 0 1px var(--color-border), var(--shadow-sm) !important;
    border: none !important;
    margin-bottom: 24px !important;
    /* overflow: visible нужен для дропдаунов мультиселектов внутри */
    overflow: visible !important;
    position: relative !important;
    z-index: auto !important;
}

/* Заголовок фильтров (серый, как на Dashboard) */
.card-header.unified-filters-header,
.unified-filters-header {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
    border: none !important;
    padding: 20px 24px !important;
    cursor: pointer !important;
    transition: var(--transition) !important;
    /* Родитель теперь без border (бордер через box-shadow), поэтому
       inner-radius == outer-radius. Используем тот же радиус. */
    border-radius: var(--radius-lg) !important;
    color: var(--color-text) !important;
}

.unified-filters-header:hover {
    background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%) !important;
}

.unified-filters-header.filters-open {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
}

.unified-filters-header h5 {
    color: var(--color-text) !important;
    font-weight: 600 !important;
    margin: 0 !important;
    text-shadow: none !important;
}

.unified-filters-header .collapse-icon {
    color: var(--color-primary) !important;
}

/* Тело фильтров */
.unified-filters-body {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%) !important;
    padding: 24px !important;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important;
}

/* Выравнивание элементов фильтров */
.unified-filters-body .row {
    align-items: flex-end !important;
}

/* Форма фильтров - НЕ выравниваем по flex-end, чтобы элементы с разной высотой выравнивались правильно */
.unified-filters-body form.d-flex {
    align-items: flex-start !important;
}

.unified-filters-body .d-flex.gap-2 {
    gap: 8px !important;
    align-items: flex-end !important;
}

.unified-filters-body .d-flex.align-items-end {
    align-items: flex-end !important;
    padding-bottom: 0 !important;
}

.unified-filters-body .form-label {
    font-weight: 600 !important;
    color: var(--color-text) !important;
    margin-bottom: 8px !important;
    font-size: 0.9rem !important;
}

.unified-filters-body .form-label i {
    color: var(--color-primary) !important;
    margin-right: 8px !important;
}

/* Контейнер с кнопками */
.unified-filters-body .col-lg-4,
.unified-filters-body .col-md-6,
.unified-filters-body .col-sm-4 {
    display: flex !important;
    flex-direction: column !important;
}

.unified-filters-body .align-items-end {
    margin-top: auto !important;
}

/* Контейнер для элементов фильтров */
.unified-filters-body .flex-shrink-0 {
    display: flex !important;
    flex-direction: column !important;
}

/* Кнопка применения фильтров */
.unified-filter-btn {
    border-radius: var(--radius-md) !important;
    padding: 0 !important;
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    transition: var(--transition) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.unified-filter-btn.btn-primary {
    border: none !important;
    background: var(--gradient-primary) !important;
    box-shadow: var(--shadow-sm) !important;
    color: white !important;
}

.unified-filter-btn.btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-md) !important;
    color: white !important;
}

.unified-filter-btn.btn-outline-secondary {
    border: 2px solid var(--color-border) !important;
    background: white !important;
    color: var(--color-muted) !important;
}

.unified-filter-btn.btn-outline-secondary:hover {
    background: var(--color-soft) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
    transform: translateY(-2px) !important;
}

/* Селекты фильтров */
.unified-filter-select {
    border: 2px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    transition: var(--transition) !important;
    background: white !important;
    min-height: 50px !important;
    height: 50px !important;
}

/* Мультиселекты в фильтрах - выравнивание по высоте */
.unified-filters-body .multiselect-input {
    min-height: 50px !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: visible !important;
    border: 2px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    padding: 8px 12px !important;
    background: white !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
}

.unified-filters-body .multiselect-input:hover {
    border-color: rgba(102, 126, 234, 0.4) !important;
    background: #fafbff !important;
}

.unified-filters-body .multiselect-input.active {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.12) !important;
    background: #fafbff !important;
}

/* Контейнер мультиселекта в фильтре */
.unified-filters-body .multiselect-container {
    position: relative !important;
    min-width: 280px !important;
    width: 100% !important;
    max-width: 400px !important;
}

.unified-filters-body .multiselect-dropdown {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 100001 !important;
    margin-top: 4px !important;
    background: white !important;
    border: 2px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
    max-height: 300px !important;
    overflow-y: auto !important;
}

/* Теги в фильтре - компактные */
.unified-filters-body .multiselect-tag {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
    color: white !important;
    padding: 4px 8px !important;
    border-radius: 16px !important;
    font-size: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin: 0 !important;
    font-weight: 500 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

.unified-filters-body .multiselect-tag i {
    font-size: 10px !important;
    opacity: 0.8 !important;
}

.unified-filters-body .multiselect-tag span[onclick] {
    cursor: pointer !important;
    font-weight: bold !important;
    opacity: 0.7 !important;
    margin-left: 2px !important;
    font-size: 13px !important;
    transition: opacity 0.2s ease !important;
}

.unified-filters-body .multiselect-tag span[onclick]:hover {
    opacity: 1 !important;
}

.unified-filters-body .multiselect-placeholder {
    color: var(--color-muted) !important;
    font-size: 14px !important;
}

/* Глобальное правило для форм с align-items-end - элементы с label должны начинаться сверху */
.d-flex.align-items-end > .flex-shrink-0:has(label),
.row.align-items-end > [class*="col"]:has(label) {
    align-self: flex-start !important;
}

/* Элементы без label (кнопки) остаются внизу */
.d-flex.align-items-end > .flex-shrink-0:not(:has(label)),
.d-flex.align-items-end > div:not(:has(label)):has(button),
.row.align-items-end > [class*="col"]:not(:has(label)):has(button) {
    align-self: flex-end !important;
    padding-top: 30px;
}

/* Чекбокс в фильтрах - выравнивание по высоте */
.unified-filters-body .unified-checkbox-wrapper {
    min-height: 50px !important;
    height: 50px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 12px !important;
    background: white !important;
    border: 2px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    transition: all 0.3s ease !important;
}

.unified-filters-body .unified-checkbox-wrapper:hover {
    border-color: rgba(102, 126, 234, 0.4) !important;
    background: #fafbff !important;
}

.unified-filters-body .unified-checkbox-wrapper .form-check-input {
    width: 20px !important;
    height: 20px !important;
    margin-top: 0 !important;
    margin-right: 0 !important;
    border: 2px solid var(--color-border) !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.unified-filters-body .unified-checkbox-wrapper .form-check-input:checked {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

.unified-filters-body .unified-checkbox-wrapper .form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15) !important;
    outline: none !important;
}

.unified-filters-body .unified-checkbox-wrapper .form-check-label {
    margin: 0 !important;
    cursor: pointer !important;
    font-weight: 500 !important;
    color: var(--color-text) !important;
    font-size: 0.9rem !important;
}

.unified-filter-select:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
    outline: none !important;
}

/* Чекбокс в фильтрах */
.unified-checkbox-wrapper {
    padding: 12px !important;
    background: white !important;
    border-radius: var(--radius-md) !important;
    border: 2px solid var(--color-border) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 50px !important;
    height: 50px !important;
}

.unified-checkbox-wrapper .form-check-input {
    cursor: pointer !important;
    margin: 0 !important;
    width: 20px !important;
    height: 20px !important;
}

/* Стили для мультиселекта в фильтрах - объединены с основными стилями выше */

/* ========================================
   КОМПОНЕНТЫ ДЛЯ ЗАМЕТОК (NOTES)
   ======================================== */

/* Контейнер заметок */
.notes-container {
    padding: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
}

/* Результаты поиска детей */
.search-results-container:empty {
    display: none !important;
}

/* search-result-item - объединен с основными стилями выше */

.search-result-item:last-child {
    border-bottom: none !important;
}

.search-result-item.no-results {
    color: #9ca3af !important;
    font-style: italic !important;
    cursor: default !important;
    text-align: center;
    justify-content: center;
    padding: 20px 16px;
}

.search-result-item.no-results:hover {
    background: white !important;
    color: #9ca3af !important;
    transform: none !important;
    box-shadow: none !important;
}

.search-result-item.no-results i {
    margin-right: 8px;
    color: #9ca3af;
}

/* Сетка заметок */
.notes-grid {
    display: grid !important;
    gap: 20px !important;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)) !important;
}

/* Карточка заметки */
.note-card {
    background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%) !important;
    border-radius: var(--radius-lg) !important;
    padding: 20px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    border: 2px solid var(--color-border) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    overflow: hidden !important;
}

.note-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 4px !important;
    height: 100% !important;
    background: var(--gradient-primary) !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
}

.note-card:hover::before {
    opacity: 1 !important;
}

.note-card:hover {
    border-color: var(--color-primary) !important;
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.15) !important;
    transform: translateY(-4px) !important;
    background: linear-gradient(135deg, #ffffff 0%, #fefeff 100%) !important;
}

/* Заголовок заметки */
.note-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    margin-bottom: 14px !important;
    padding-bottom: 12px !important;
    border-bottom: 2px solid #f3f4f6 !important;
}

.note-title {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: var(--color-text) !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.note-title::before {
    content: '📝' !important;
    font-size: 1.1rem !important;
}

/* Теги детей */
.note-child-tag {
    background: var(--gradient-success) !important;
    color: white !important;
    padding: 6px 10px !important;
    border-radius: 20px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: var(--transition-fast) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-right: 6px !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

.note-child-tag:hover {
    background: linear-gradient(135deg, #16a34a 0%, #0891b2 100%) !important;
    color: white !important;
    text-decoration: none !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
}

.note-children-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-top: 8px !important;
}

/* Мета информация */
.note-meta {
    display: flex !important;
    gap: 16px !important;
    font-size: 0.85rem !important;
    color: var(--color-muted) !important;
    margin-bottom: 14px !important;
    padding: 8px 12px !important;
    background: #f9fafb !important;
    border-radius: var(--radius-sm) !important;
}

.note-meta span {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.note-meta i {
    color: var(--color-primary) !important;
    font-size: 0.8rem !important;
}

/* Контент заметки */
.note-content {
    color: var(--color-text) !important;
    font-size: 0.95rem !important;
    line-height: 1.7 !important;
    margin-bottom: 18px !important;
    max-height: 120px !important;
    overflow: hidden !important;
    position: relative !important;
}

.note-content::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 40px !important;
    background: linear-gradient(to bottom, transparent, white) !important;
    pointer-events: none !important;
}

/* Действия с заметкой */
.note-actions {
    display: flex !important;
    gap: 10px !important;
    justify-content: flex-end !important;
    margin-top: 16px !important;
}

.note-actions .btn,
.note-actions .btn-sm {
    padding: 10px 18px !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    border-radius: var(--radius-md) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: var(--transition-button) !important;
}

.note-actions .btn i,
.note-actions .btn-sm i {
    font-size: 0.85rem !important;
}

/* Глобальный стиль для маленьких кнопок */
.btn-sm:not(.rehab-btn-sm) {
    padding: 6px 12px !important;
    border-radius: 20px !important;
    font-size: var(--font-size-sm) !important;
    font-weight: var(--font-weight-semibold) !important;
    min-height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    line-height: 1 !important;
    transition: var(--transition-fast) !important;
    text-decoration: none !important;
}

.btn-view {
    background: var(--gradient-primary) !important;
    color: white !important;
    border: none !important;
    padding: 10px 18px !important;
    font-weight: 600 !important;
    border-radius: var(--radius-md) !important;
    transition: var(--transition-button) !important;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.25) !important;
}

.btn-view:hover {
    background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.35) !important;
    color: white !important;
}

.btn-edit {
    background: var(--color-soft) !important;
    color: var(--color-text) !important;
    border: 2px solid var(--color-border) !important;
    padding: 10px 18px !important;
    font-weight: 600 !important;
    border-radius: var(--radius-md) !important;
    transition: var(--transition-button) !important;
}

.btn-edit:hover {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: var(--color-text) !important;
    text-decoration: none !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

.btn-delete {
    background: #fef2f2 !important;
    color: #dc2626 !important;
    border: 2px solid #fecaca !important;
    padding: 10px 18px !important;
    font-weight: 600 !important;
    border-radius: var(--radius-md) !important;
    transition: var(--transition-button) !important;
}

.btn-delete:hover {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%) !important;
    border-color: #fca5a5 !important;
    color: #b91c1c !important;
    text-decoration: none !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25) !important;
}

/* Пустое состояние */
.empty-state {
    background: white !important;
    border-radius: var(--radius-lg) !important;
    padding: 60px 24px !important;
    text-align: center !important;
    box-shadow: var(--shadow-sm) !important;
    border: 1px solid var(--color-border) !important;
    position: relative !important;
    overflow: hidden !important;
}

.empty-state::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 4px !important;
    background: var(--gradient-primary) !important;
}

.empty-state-icon {
    width: 80px !important;
    height: 80px !important;
    background: var(--gradient-primary) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 24px !important;
    color: white !important;
    font-size: 2rem !important;
    box-shadow: var(--shadow-sm) !important;
    flex-shrink: 0 !important;
}

.empty-state-icon i,
.empty-state-icon i::before {
    line-height: 1 !important;
    vertical-align: middle !important;
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
}

.empty-state h3 {
    color: var(--color-text) !important;
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    margin: 0 0 12px !important;
}

.empty-state p {
    color: var(--color-muted) !important;
    font-size: 1rem !important;
    margin: 0 !important;
    opacity: 0.8 !important;
}

/* Модальные окна */
.modal-header {
    background: var(--color-soft) !important;
    border-bottom: 1px solid var(--color-border) !important;
    padding: 20px 24px !important;
}

.modal-body {
    padding: 24px !important;
}

.form-group {
    margin-bottom: 20px !important;
}

.form-label {
    display: block !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: var(--color-text) !important;
    margin-bottom: 6px !important;
}

.child-search-result {
    padding: 8px 12px !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 6px !important;
    margin-bottom: 4px !important;
    cursor: pointer !important;
    transition: var(--transition-fast) !important;
    background: var(--color-soft) !important;
    font-size: 0.875rem !important;
}

.child-search-result:hover {
    background: var(--color-border) !important;
    border-color: var(--color-primary) !important;
}

.modal-footer {
    background: var(--color-soft) !important;
    border-top: 1px solid var(--color-border) !important;
    padding: 16px 24px !important;
    display: flex !important;
    gap: 8px !important;
    justify-content: flex-start !important;
    align-items: center !important;
    flex-wrap: wrap !important;
}

/* Последняя кнопка в footer выравнивается справа */
.modal-footer .btn:last-child:not(:first-child) {
    margin-left: auto !important;
}

/* Современные модальные окна */
.modern-modal {
    border: none !important;
    border-radius: 16px !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
    overflow: visible !important;
}

.modern-modal .modal-body {
    padding: 32px !important;
    background: white !important;
    overflow: visible !important;
}

/* Улучшенные стили для тела модального окна задач */
#createTaskModal .modal-body,
#editTaskModal .modal-body {
    padding: 32px !important;
    overflow: visible !important;
    background: linear-gradient(to bottom, #ffffff 0%, #fafbff 100%) !important;
}

/* Скролл для модального окна задач - на уровне modal-dialog */
#createTaskModal .modal-dialog,
#editTaskModal .modal-dialog,
#noteModal .modal-dialog {
    max-height: 90vh !important;
    overflow-y: auto !important;
}

/* Стили для строк с полями */
#createTaskModal .row,
#editTaskModal .row {
    margin-left: -10px !important;
    margin-right: -10px !important;
}

#createTaskModal .row > [class*="col-"],
#editTaskModal .row > [class*="col-"] {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

/* Лейблы в модальных формах */
.modal-form-label {
    font-weight: 600 !important;
    color: var(--color-text) !important;
    margin-bottom: 10px !important;
    display: flex !important;
    align-items: center !important;
    font-size: 0.95rem !important;
}

.modal-form-label i {
    font-size: 0.9rem !important;
}

/* Textarea в модальном окне */
.modal-textarea {
    min-height: 400px !important;
    resize: vertical !important;
}

/* Обёртка редактора */
.editor-wrapper {
    position: relative !important;
}

.editor-loader {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    background: rgba(248, 249, 250, 0.95) !important;
    z-index: 10 !important;
}

.editor-loader .spinner-border {
    width: 2rem !important;
    height: 2rem !important;
}

.modern-modal-header {
    background: var(--gradient-primary) !important;
    color: white !important;
    border: none !important;
    padding: 28px 32px !important;
    position: relative !important;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15) !important;
}

#createTaskModal .modern-modal-header,
#editTaskModal .modern-modal-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

.modal-icon {
    width: 52px !important;
    height: 52px !important;
    background: rgba(255, 255, 255, 0.25) !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
    margin-right: 18px !important;
    flex-shrink: 0 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

.modal-title-text {
    font-size: 1.6rem !important;
    font-weight: 700 !important;
    margin-bottom: 6px !important;
    line-height: 1.2 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.modal-subtitle {
    font-size: 0.95rem !important;
    opacity: 0.92 !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
}

.modern-modal-footer {
    background: var(--color-soft) !important;
    border-top: 1px solid var(--color-border) !important;
    padding: 20px 32px !important;
    display: flex !important;
    gap: 12px !important;
    justify-content: flex-end !important;
}

/* Фикс мультиселект dropdown внутри модальных окон */
.modal .multiselect-container {
    position: relative !important;
}

.modal .multiselect-dropdown {
    z-index: 1070 !important;
    position: absolute !important;
}

/* Кастомный чекбокс в опциях мультиселекта */
.multiselect-checkbox-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    width: 18px !important;
    height: 18px !important;
    border: 2px solid #cbd5e1 !important;
    border-radius: 5px !important;
    background: #fff !important;
    transition: all 0.15s ease !important;
    position: relative !important;
}

.multiselect-checkbox-wrap.checked {
    background: #6366f1 !important;
    border-color: #6366f1 !important;
}

.multiselect-checkbox-wrap.checked::after {
    content: '' !important;
    display: block !important;
    width: 5px !important;
    height: 9px !important;
    border: solid #fff !important;
    border-width: 0 2px 2px 0 !important;
    transform: rotate(45deg) !important;
    position: absolute !important;
    top: 1px !important;
    left: 5px !important;
}

.multiselect-option:hover .multiselect-checkbox-wrap:not(.checked) {
    border-color: #6366f1 !important;
    background: #eef2ff !important;
}

.modern-btn-primary {
    background: var(--gradient-primary) !important;
    border: none !important;
    color: white !important;
    padding: 10px 18px !important;
    border-radius: var(--radius-md) !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    transition: var(--transition-button) !important;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.25) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.modern-btn-primary:hover {
    background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4) !important;
    color: white !important;
}

.modern-btn-primary:active {
    transform: translateY(0) scale(0.98) !important;
}

.modern-btn-primary i {
    font-size: 0.9rem !important;
}

.modern-btn-secondary {
    background: white !important;
    border: 2px solid #d1d5db !important;
    color: #4b5563 !important;
    padding: 12px 24px !important;
    border-radius: var(--radius-md) !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    transition: var(--transition-button) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
}

.modern-btn-secondary:hover {
    background: #f9fafb !important;
    border-color: #9ca3af !important;
    color: #1f2937 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.modern-btn-secondary:active {
    transform: translateY(0) scale(0.98) !important;
}

.modern-btn-secondary i {
    font-size: 0.9rem !important;
    opacity: 0.8 !important;
}

.modern-input {
    border: 2px solid var(--color-border) !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
    font-size: 0.95rem !important;
    transition: all 0.3s ease !important;
    background: white !important;
    font-weight: 400 !important;
}

.modern-input:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.12) !important;
    outline: none !important;
    background: #fafbff !important;
    transform: translateY(-1px) !important;
}

.modern-input:hover:not(:focus) {
    border-color: rgba(102, 126, 234, 0.4) !important;
    background: #fafbff !important;
}

/* Улучшенные стили для form-floating в модальных окнах задач */
#createTaskModal .form-floating,
#editTaskModal .form-floating {
    margin-bottom: 20px !important;
}

#createTaskModal .form-floating label,
#editTaskModal .form-floating label {
    color: #6b7280 !important;
    font-weight: 500 !important;
    font-size: 0.9rem !important;
    padding-left: 16px !important;
    transition: all 0.2s ease !important;
}

#createTaskModal .form-floating .form-control:focus ~ label,
#createTaskModal .form-floating .form-control:not(:placeholder-shown) ~ label,
#createTaskModal .form-floating .form-select:focus ~ label,
#createTaskModal .form-floating .form-select:not([value=""]) ~ label,
#editTaskModal .form-floating .form-control:focus ~ label,
#editTaskModal .form-floating .form-control:not(:placeholder-shown) ~ label,
#editTaskModal .form-floating .form-select:focus ~ label,
#editTaskModal .form-floating .form-select:not([value=""]) ~ label {
    color: var(--color-primary) !important;
    font-weight: 600 !important;
}

#createTaskModal .form-floating label i,
#editTaskModal .form-floating label i {
    color: var(--color-primary) !important;
    margin-right: 6px !important;
}

/* Стили для textarea в модальных окнах */
#createTaskModal textarea.modern-input,
#editTaskModal textarea.modern-input {
    min-height: 120px !important;
    resize: vertical !important;
    line-height: 1.6 !important;
}

/* Стили для select в модальных окнах */
#createTaskModal select.modern-input,
#editTaskModal select.modern-input {
    cursor: pointer !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236366f1' d='M6 8L0 0h12z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    background-size: 12px !important;
    padding-right: 40px !important;
}

/* Стили для лейблов вне form-floating */
#createTaskModal .form-label,
#editTaskModal .form-label {
    font-weight: 600 !important;
    color: #374151 !important;
    margin-bottom: 10px !important;
    font-size: 0.95rem !important;
    display: flex !important;
    align-items: center !important;
}

#createTaskModal .form-label i,
#editTaskModal .form-label i {
    margin-right: 8px !important;
}

/* Create/Edit task modals should visually match the view-task modal. */
#createTaskModal .modal-body,
#editTaskModal .modal-body {
    background: #ffffff !important;
    padding: 28px 32px !important;
}

#createTaskModal .modal-subtitle,
#editTaskModal .modal-subtitle {
    display: none !important;
}

#createTaskModal .modal-body > .mb-3,
#editTaskModal .modal-body > .mb-3,
#createTaskModal .modal-body > .row > [class*="col-"] > .mb-3,
#editTaskModal .modal-body > .row > [class*="col-"] > .mb-3 {
    background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%) !important;
    border-radius: var(--radius-md) !important;
    padding: 18px !important;
    border: 2px solid var(--color-border) !important;
    transition: var(--transition-fast) !important;
    height: 100% !important;
    margin-bottom: 16px !important;
}

#createTaskModal .modal-body > .mb-3:hover,
#editTaskModal .modal-body > .mb-3:hover,
#createTaskModal .modal-body > .mb-3:focus-within,
#editTaskModal .modal-body > .mb-3:focus-within,
#createTaskModal .modal-body > .row > [class*="col-"] > .mb-3:hover,
#editTaskModal .modal-body > .row > [class*="col-"] > .mb-3:hover,
#createTaskModal .modal-body > .row > [class*="col-"] > .mb-3:focus-within,
#editTaskModal .modal-body > .row > [class*="col-"] > .mb-3:focus-within {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
    border-color: var(--color-primary) !important;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15) !important;
}

#createTaskModal .modal-body > .row,
#editTaskModal .modal-body > .row {
    margin-bottom: 0 !important;
}

#createTaskModal .modern-form-label,
#editTaskModal .modern-form-label {
    font-size: 0.875rem !important;
    color: var(--color-text) !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

#createTaskModal .modern-form-label i,
#editTaskModal .modern-form-label i {
    color: var(--color-primary) !important;
    font-size: 0.875rem !important;
    margin-right: 0 !important;
}

#createTaskModal .modern-input,
#editTaskModal .modern-input,
#createTaskModal .multiselect-input,
#editTaskModal .multiselect-input {
    border: 2px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

#createTaskModal .modern-input:hover,
#editTaskModal .modern-input:hover,
#createTaskModal .multiselect-input:hover,
#editTaskModal .multiselect-input:hover {
    border-color: #cbd5e1 !important;
    background: #ffffff !important;
}

#createTaskModal .modern-input:focus,
#editTaskModal .modern-input:focus,
#createTaskModal .multiselect-input.active,
#editTaskModal .multiselect-input.active {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15) !important;
    background: #ffffff !important;
    transform: none !important;
}

/* Старые ID-специфичные правила для мультиселекта заметок удалены - 
   стилизация теперь через #noteModal .multiselect-* правила ниже */

.modal .multiselect-dropdown {
    z-index: 1070 !important;
    position: absolute !important;
}

.modal .multiselect-container {
    position: relative !important;
    z-index: auto !important;
}

/* Фикс overflow для modal-content задач */
#createTaskModal .modal-content,
#editTaskModal .modal-content,
#noteModal .modal-content {
    overflow: visible !important;
}

/* Улучшенные стили для мультиселектов в модальных окнах задач */
#createTaskModal .multiselect-container,
#editTaskModal .multiselect-container {
    position: relative !important;
    margin-bottom: 0 !important;
}

#createTaskModal .multiselect-input,
#editTaskModal .multiselect-input,
#noteModal .multiselect-input {
    min-height: 58px !important;
    border: 2px solid var(--color-border) !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
    background: white !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
}

#createTaskModal .multiselect-input:hover,
#editTaskModal .multiselect-input:hover,
#noteModal .multiselect-input:hover {
    border-color: rgba(102, 126, 234, 0.4) !important;
    background: #fafbff !important;
}

#createTaskModal .multiselect-input.active,
#editTaskModal .multiselect-input.active,
#noteModal .multiselect-input.active {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.12) !important;
    background: #fafbff !important;
}

#createTaskModal .multiselect-placeholder,
#editTaskModal .multiselect-placeholder,
#noteModal .multiselect-placeholder {
    color: #9ca3af !important;
    font-size: 0.95rem !important;
    font-weight: 400 !important;
}

/* === Модальные мультиселект-дропдауны === */
#createTaskModal .multiselect-dropdown,
#editTaskModal .multiselect-dropdown,
#noteModal .multiselect-dropdown {
    position: absolute !important;
    z-index: 1070 !important;
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    max-height: 260px !important;
    overflow-y: auto !important;
    width: 100% !important;
    top: calc(100% + 4px) !important;
    left: 0 !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.06) !important;
    scrollbar-width: thin !important;
    scrollbar-color: #cbd5e1 transparent !important;
}

#createTaskModal .multiselect-dropdown::-webkit-scrollbar,
#editTaskModal .multiselect-dropdown::-webkit-scrollbar,
#noteModal .multiselect-dropdown::-webkit-scrollbar {
    width: 6px;
}
#createTaskModal .multiselect-dropdown::-webkit-scrollbar-track,
#editTaskModal .multiselect-dropdown::-webkit-scrollbar-track,
#noteModal .multiselect-dropdown::-webkit-scrollbar-track {
    background: transparent;
}
#createTaskModal .multiselect-dropdown::-webkit-scrollbar-thumb,
#editTaskModal .multiselect-dropdown::-webkit-scrollbar-thumb,
#noteModal .multiselect-dropdown::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

#createTaskModal .multiselect-search,
#editTaskModal .multiselect-search,
#noteModal .multiselect-search {
    padding: 10px 12px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    background: #f8fafc !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1 !important;
    border-radius: 12px 12px 0 0 !important;
}

#createTaskModal .multiselect-search input,
#editTaskModal .multiselect-search input,
#noteModal .multiselect-search input {
    border-radius: 8px !important;
    border: 1px solid #e2e8f0 !important;
    padding: 8px 12px 8px 32px !important;
    font-size: 13px !important;
    width: 100% !important;
    transition: all 0.15s ease !important;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E") 10px center no-repeat !important;
    color: #334155 !important;
}

#createTaskModal .multiselect-search input::placeholder,
#editTaskModal .multiselect-search input::placeholder,
#noteModal .multiselect-search input::placeholder {
    color: #94a3b8 !important;
}

#createTaskModal .multiselect-search input:focus,
#editTaskModal .multiselect-search input:focus,
#noteModal .multiselect-search input:focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.08) !important;
    outline: none !important;
}

/* Опции дропдауна */
#createTaskModal .multiselect-option,
#editTaskModal .multiselect-option,
#noteModal .multiselect-option {
    padding: 0 !important;
    cursor: pointer !important;
    transition: background 0.15s ease !important;
    border-bottom: none !important;
    background: transparent !important;
    border-left: 3px solid transparent !important;
}

#createTaskModal .multiselect-option:last-child,
#editTaskModal .multiselect-option:last-child,
#noteModal .multiselect-option:last-child {
    border-radius: 0 0 12px 12px !important;
}

#createTaskModal .multiselect-option:hover,
#editTaskModal .multiselect-option:hover,
#noteModal .multiselect-option:hover {
    background: #f1f5f9 !important;
}

#createTaskModal .multiselect-option.selected,
#editTaskModal .multiselect-option.selected,
#noteModal .multiselect-option.selected {
    background: #eef2ff !important;
    border-left-color: #6366f1 !important;
}

#createTaskModal .multiselect-option.selected:hover,
#editTaskModal .multiselect-option.selected:hover,
#noteModal .multiselect-option.selected:hover {
    background: #e0e7ff !important;
}

#createTaskModal .multiselect-tag,
#editTaskModal .multiselect-tag {
    color: white !important;
    padding: 6px 12px !important;
    border-radius: 20px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
    transition: transform 0.15s ease !important;
}

#createTaskModal .multiselect-tag:hover,
#editTaskModal .multiselect-tag:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

#createTaskModal .multiselect-tag .remove,
#editTaskModal .multiselect-tag .remove {
    cursor: pointer !important;
    opacity: 0.8 !important;
    transition: opacity 0.2s ease !important;
    font-weight: bold !important;
}

#createTaskModal .multiselect-tag .remove:hover,
#editTaskModal .multiselect-tag .remove:hover {
    opacity: 1 !important;
}

/* multiselect-tag - объединен с основными стилями выше */

.children-count-badge {
    background: #e8f4fd !important;
    color: #1e40af !important;
    padding: 2px 6px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    margin-left: 4px !important;
}

/* TinyMCE z-index */
.tox-tinymce {
    z-index: 1050 !important;
}

.tox .tox-dialog {
    z-index: 1065 !important;
}

/* TinyMCE inside modals - fix toolbar layout */
.modal .tox-tinymce {
    width: 100% !important;
    border-radius: 10px !important;
    border: 1px solid #e2e8f0 !important;
}

.modal .tox-toolbar__primary {
    flex-wrap: wrap !important;
}

.modal .tox-toolbar__group {
    flex-wrap: nowrap !important;
}

.modal .tox .tox-tbtn {
    width: auto !important;
}

.modal .tox .tox-tbtn--select {
    width: auto !important;
}

.modal .tox-editor-header {
    z-index: auto !important;
}

.modal .editor-wrapper {
    position: relative;
    width: 100%;
}

/* Панель поиска и search-input - объединены с основными стилями выше */

/* ========================================
   КОМПОНЕНТЫ ДЛЯ ЗАДАЧ (TASKS)
   ======================================== */

/* Строка задачи */
.task-row {
    border-radius: var(--radius-lg) !important;
    padding: 20px !important;
    margin-bottom: 16px !important;
    background: white !important;
    border: 1px solid var(--color-border) !important;
    transition: var(--transition) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

.task-row:hover {
    background: white !important;
    box-shadow: var(--shadow-md) !important;
    transform: translateY(-2px) !important;
    border-color: var(--color-primary) !important;
}

.task-row.border-danger {
    border-left: 4px solid var(--color-danger) !important;
    background: #fff5f5 !important;
}

.task-row.completed-task {
    background: #f8f9fa !important;
    opacity: 0.7 !important;
}

/* task-title - объединен с основными стилями выше */

.task-title-link {
    color: var(--color-text) !important;
    transition: var(--transition-fast) !important;
}

.task-title-link:hover {
    color: var(--color-primary) !important;
    text-decoration: none !important;
}

.task-description {
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
    color: #6b7280 !important;
    margin-bottom: 12px !important;
}

.task-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 12px !important;
    margin-top: 12px !important;
}

/* Теги детей в задачах */
.task-child-tag {
    background: #dbeafe !important;
    color: #1d4ed8 !important;
    padding: 4px 12px !important;
    border-radius: 16px !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: var(--transition-fast) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin-right: 6px !important;
}

.task-child-tag:hover {
    background: #bfdbfe !important;
    color: #1e40af !important;
    text-decoration: none !important;
    transform: translateY(-1px) !important;
}

.task-child-tag i {
    font-size: 0.7rem !important;
}

.task-meta .badge {
    padding: 6px 12px !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
}

.task-meta small {
    font-size: 0.85rem !important;
    color: #6b7280 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.task-meta small i {
    color: var(--color-primary) !important;
}

/* Иконка типа задачи */
.task-type-icon {
    display: inline-flex !important;
    align-items: center !important;
    margin-left: 8px !important;
}

.task-type-icon i {
    font-size: 0.9rem !important;
}

/* Бейдж источника задачи */
.badge-light {
    background: #f3f4f6 !important;
    color: #6b7280 !important;
    border: 1px solid #e5e7eb !important;
    padding: 4px 10px !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    margin-left: 8px !important;
}

/* Бейджи статусов задач */
.badge-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
    border: none !important;
}

.badge-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: white !important;
    border: none !important;
}

.badge-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    color: white !important;
    border: none !important;
}

.badge-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    color: white !important;
    border: none !important;
}

.badge-secondary {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%) !important;
    color: white !important;
    border: none !important;
}

.badge-pill {
    border-radius: 12px !important;
    padding: 6px 12px !important;
    font-weight: 600 !important;
}

/* Градиентные заголовки */
.bg-gradient-primary {
    background: var(--gradient-primary) !important;
    border: none !important;
}

.bg-gradient-success {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%) !important;
    border: none !important;
}

/* Кнопки действий */
.btn-group .btn {
    border-radius: 6px !important;
    margin-left: 4px !important;
}

/* Кнопка "Выполнить" для задач */
.task-complete-btn {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: white !important;
    border: none !important;
    padding: 8px 16px !important;
    border-radius: var(--radius-md) !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    transition: var(--transition) !important;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2) !important;
}

.task-complete-btn:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(16, 185, 129, 0.3) !important;
}

.task-complete-btn i {
    margin-right: 6px !important;
}

/* Правая колонка задачи */
.task-row .text-right {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
}

.task-row .text-right .mb-2 {
    margin-bottom: 12px !important;
}

.task-row .text-right small {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: #6b7280 !important;
    font-size: 0.875rem !important;
}

.task-row .text-right small i {
    color: var(--color-primary) !important;
}

.btn-success {
    background: var(--gradient-success) !important;
    border: none !important;
}

.btn-success:hover {
    background: linear-gradient(135deg, #16a34a 0%, #86efac 100%) !important;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3) !important;
}

/* Коллапс кнопки */
.collapse-btn {
    transition: transform 0.3s ease !important;
}

.collapsed .collapse-btn {
    transform: rotate(180deg) !important;
}

/* Анимация для badge */
.badge {
    transition: var(--transition-fast) !important;
}

.badge:hover {
    transform: scale(1.05) !important;
}

/* Просроченные задачи */
.text-danger.fw-bold {
    font-weight: bold !important;
    text-shadow: 0 0 2px rgba(220, 53, 69, 0.3) !important;
}

/* Фильтры задач */
.filters-card {
    background: white !important;
    border-radius: var(--radius-lg) !important;
    /* Бордер через box-shadow, чтобы избежать nested-border-radius mismatch */
    box-shadow: 0 0 0 1px var(--color-border), var(--shadow-sm) !important;
    border: none !important;
    margin-bottom: 24px !important;
}

/* Responsive для задач */
@media (max-width: 768px) {
    .task-row {
        padding: 8px !important;
    }
    
    .task-title {
        font-size: 1rem !important;
    }
    
    .btn-group .btn {
        padding: 0.25rem 0.5rem !important;
        font-size: 0.8rem !important;
    }
}

.filters-header {
    background: var(--gradient-primary) !important;
    color: white !important;
    padding: 20px 24px !important;
    cursor: pointer !important;
    transition: var(--transition) !important;
    /* Родитель .filters-card теперь без border (бордер через box-shadow),
       inner-radius == outer-radius. */
    border-radius: var(--radius-lg) !important;
}

.filters-header:hover {
    filter: brightness(1.05) !important;
}

.collapse-icon {
    transition: transform 0.3s ease !important;
}

.filters-header[aria-expanded="true"] .collapse-icon {
    transform: rotate(180deg) !important;
}

/* Карточка задачи */
.task-card {
    background: white !important;
    border-radius: var(--radius-lg) !important;
    padding: 20px !important;
    box-shadow: var(--shadow-sm) !important;
    border: 1px solid var(--color-border) !important;
    border-left: 4px solid var(--color-primary) !important;
    transition: var(--transition) !important;
    margin-bottom: 16px !important;
}

.task-card:hover {
    box-shadow: var(--shadow-md) !important;
    transform: translateX(4px) !important;
}

.task-card.status-completed {
    border-left-color: var(--color-success) !important;
    opacity: 0.7 !important;
}

.task-card.status-cancelled {
    border-left-color: var(--color-danger) !important;
    opacity: 0.6 !important;
}

.task-card.status-in_progress {
    border-left-color: var(--color-warning) !important;
}

/* Модальные окна для просмотра */
.view-task-label {
    font-weight: 700 !important;
    color: var(--color-text) !important;
    margin-bottom: 10px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 0.95rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.view-task-label i {
    color: var(--color-primary) !important;
    font-size: 1rem !important;
}

.view-task-content-box {
    background: var(--color-soft) !important;
    border-radius: var(--radius-md) !important;
    padding: 18px !important;
    margin-bottom: 0 !important;
    border: 2px solid var(--color-border) !important;
    color: var(--color-text) !important;
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    transition: var(--transition-fast) !important;
}

.view-task-content-box:hover {
    border-color: #cbd5e1 !important;
    background: #f8fafc !important;
}

.view-task-info-card {
    background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%) !important;
    border-radius: var(--radius-md) !important;
    padding: 18px !important;
    border: 2px solid var(--color-border) !important;
    transition: var(--transition-fast) !important;
    height: 100% !important;
}

.view-task-info-card:hover {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
    border-color: var(--color-primary) !important;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15) !important;
    transform: translateY(-2px) !important;
}

.view-task-info-label {
    font-size: 0.875rem !important;
    color: var(--color-text) !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.view-task-info-label i {
    color: var(--color-primary) !important;
    font-size: 0.875rem !important;
}

.view-task-value {
    color: var(--color-text) !important;
    font-weight: 500 !important;
    font-size: 0.95rem !important;
}

.view-task-info-label-secondary {
    font-size: 0.8rem !important;
    color: var(--color-muted) !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.view-task-info-label-secondary i {
    color: var(--color-primary) !important;
    font-size: 0.9rem !important;
}

.view-task-value-secondary {
    color: var(--color-text) !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
}

.view-task-info-label-success {
    font-size: 0.875rem !important;
    color: #10b981 !important;
    font-weight: 500 !important;
    margin-bottom: 6px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.view-task-info-label-success i {
    color: #10b981 !important;
}

.view-task-value-success {
    color: #10b981 !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
}

/* Бейджи в модальном окне задачи */
/* Бейджи в просмотре задачи */
#viewTaskModal .badge,
.view-task-info-card .badge {
    padding: 6px 12px !important;
    border-radius: 20px !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    width: auto !important;
    max-width: fit-content !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    line-height: 1.4 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
    transition: transform 0.15s ease !important;
}

/* Контейнер бейджей — не растягивать */
#view_children,
#view_assignees {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    align-items: flex-start !important;
}

#view_children .badge,
#view_assignees .badge {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: fit-content !important;
}

/* Бейджи исполнителей */
#view_assignees .badge {
    background: var(--gradient-primary) !important;
    color: white !important;
    padding: 8px 14px !important;
    border-radius: 20px !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    transition: var(--transition-fast) !important;
}

#view_assignees .badge:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

/* Бейджи детей */
#view_children .badge {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: white !important;
    padding: 8px 14px !important;
    border-radius: 20px !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    text-decoration: none !important;
    transition: var(--transition-fast) !important;
}

#view_children .badge:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

/* Бейдж приоритета */
#view_priority_badge {
    padding: 6px 12px !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    font-size: 0.8rem !important;
}

/* Бейдж статуса */
#view_status_badge {
    padding: 8px 16px !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
}

/* =============================================================
   TASK FORM CARD — форма создания/редактирования задачи.
   Визуально повторяет .view-task-info-card, но содержит
   интерактивные поля ввода (input/select/textarea).
   ============================================================= */
.task-form-card {
    background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);
    border-radius: var(--radius-md);
    padding: 18px 20px;
    border: 2px solid var(--color-border);
    transition: var(--transition-fast);
    margin-bottom: 16px;
}

.task-form-card:hover,
.task-form-card:focus-within {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border-color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
}

.task-form-label {
    font-size: 0.8rem;
    color: var(--color-muted);
    font-weight: 600;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.task-form-label i {
    color: var(--color-primary);
    font-size: 0.875rem;
}

.task-form-card .form-control,
.task-form-card select.form-control,
.task-form-card textarea.form-control,
.task-form-card input.form-control {
    border: 2px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    font-size: 0.95rem;
    background: #ffffff;
    color: var(--color-text);
    transition: var(--transition-fast);
    width: 100%;
    line-height: 1.4;
}

.task-form-card .form-control:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
    outline: none;
}

.task-form-card .form-control:hover {
    border-color: #cbd5e1;
}

.task-form-card textarea.form-control {
    min-height: 110px;
    resize: vertical;
}

.task-form-card .form-text,
.task-form-card .form-text-muted {
    margin-top: 8px;
    font-size: 0.8rem;
    color: var(--color-muted);
    display: block;
}

.task-form-card .text-danger small {
    font-size: 0.8rem;
    margin-top: 6px;
    display: inline-block;
}

/* Группа карточек в ряд (две колонки) */
.task-form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 0;
}

.task-form-row .task-form-card {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .task-form-row {
        grid-template-columns: 1fr;
    }
    .task-form-card {
        padding: 14px 16px;
    }
}

/* Кнопки формы задачи */
.task-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--color-border);
}

.task-form-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

@media (max-width: 576px) {
    .task-form-actions {
        flex-direction: column-reverse;
    }
    .task-form-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* Бейджи детей в просмотре заметки */
#view_note_children .badge {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: white !important;
    padding: 8px 14px !important;
    border-radius: 20px !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    text-decoration: none !important;
    transition: var(--transition-fast) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

#view_note_children .badge:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

/* Контент заметки в просмотре */
#view_note_content {
    min-height: 200px !important;
    max-height: 500px !important;
    overflow-y: auto !important;
    line-height: 1.6 !important;
    color: var(--color-text) !important;
}

#view_note_content p {
    margin-bottom: 12px !important;
}

#view_note_content p:last-child {
    margin-bottom: 0 !important;
}

/* ========================================
   АДАПТАЦИЯ ПОД МОБИЛЬНЫЕ УСТРОЙСТВА
   ======================================== */

/* Планшеты (768px - 1024px) */
@media (max-width: 1024px) {
    /* Модальные окна */
    .modern-modal .modal-body {
        padding: 24px 20px !important;
    }
    
    .modern-modal-header {
        padding: 16px 20px !important;
    }
    
    .modern-modal-footer {
        padding: 16px 20px !important;
    }
    
    /* Карточки заметок */
    .note-card {
        padding: 18px !important;
    }
    
    .note-title {
        font-size: 1.05rem !important;
    }
    
    /* Кнопки */
    .modern-btn-primary,
    .modern-btn-secondary,
    .btn-view,
    .btn-edit,
    .btn-delete {
        padding: 9px 16px !important;
        font-size: 0.875rem !important;
    }
}

/* Мобильные устройства (до 768px) */
@media (max-width: 768px) {
    /* Модальные окна на весь экран */
    .modern-modal .modal-dialog {
        margin: 0 !important;
        max-width: 100% !important;
        height: 100vh !important; /* fallback */
        height: 100dvh !important;
    }
    
    .modern-modal .modal-content {
        height: 100% !important;
        border-radius: 0 !important;
        border: none !important;
    }
    
    .modern-modal .modal-body {
        padding: 20px 16px !important;
        overflow-y: auto !important;
        max-height: calc(100vh - 140px) !important; /* fallback */
        max-height: calc(100dvh - 140px) !important;
    }
    
    .modern-modal-header {
        padding: 14px 16px !important;
        flex-shrink: 0 !important;
    }
    
    .modern-modal-footer {
        padding: 14px 16px !important;
        flex-shrink: 0 !important;
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .modern-modal-footer .btn {
        width: 100% !important;
        justify-content: center !important;
    }
    
    /* Заголовки модальных окон */
    .modal-title-text {
        font-size: 1.1rem !important;
    }
    
    .modal-subtitle {
        font-size: 0.8rem !important;
    }
    
    .modal-icon {
        width: 36px !important;
        height: 36px !important;
        font-size: 1rem !important;
    }
    
    /* Карточки заметок */
    .note-card {
        padding: 16px !important;
        border-radius: var(--radius-md) !important;
    }
    
    .note-title {
        font-size: 1rem !important;
    }
    
    .note-title::before {
        font-size: 1rem !important;
    }
    
    .note-meta {
        flex-direction: column !important;
        gap: 8px !important;
        padding: 10px !important;
        font-size: 0.8rem !important;
    }
    
    .note-content {
        font-size: 0.9rem !important;
        max-height: 100px !important;
    }
    
    .note-actions {
        flex-direction: column !important;
        gap: 8px !important;
    }
    
    .note-actions .btn {
        width: 100% !important;
        justify-content: center !important;
    }
    
    /* Кнопки */
    .modern-btn-primary,
    .modern-btn-secondary,
    .btn-view,
    .btn-edit,
    .btn-delete {
        padding: 12px 16px !important;
        font-size: 0.9rem !important;
        min-height: 44px !important; /* Для удобного нажатия */
    }
    
    /* Labels в просмотре */
    .view-task-label {
        font-size: 0.85rem !important;
        gap: 8px !important;
    }
    
    .view-task-label i {
        font-size: 0.9rem !important;
    }
    
    .view-task-content-box {
        padding: 14px !important;
        font-size: 0.9rem !important;
    }
    
    /* Info cards */
    .view-task-info-card {
        padding: 14px !important;
    }
    
    .view-task-info-label-secondary {
        font-size: 0.75rem !important;
    }
    
    .view-task-value-secondary {
        font-size: 0.95rem !important;
    }
    
    /* Мультиселект */
    #note_children_multiselect_input,
    .multiselect-input {
        min-height: 48px !important;
        padding: 10px 14px !important;
    }
    
    .multiselect-dropdown {
        max-height: 200px !important;
    }
    
    /* Textarea */
    .modal-textarea {
        min-height: 300px !important;
    }
    
    /* Бейджи детей */
    #view_note_children .badge {
        padding: 6px 12px !important;
        font-size: 0.8rem !important;
    }
}

/* Маленькие мобильные (до 480px) */
@media (max-width: 480px) {
    /* Модальные окна */
    .modern-modal .modal-body {
        padding: 16px 12px !important;
    }
    
    .modern-modal-header {
        padding: 12px !important;
    }
    
    .modern-modal-footer {
        padding: 12px !important;
    }
    
    /* Заголовки */
    .modal-title-text {
        font-size: 1rem !important;
    }
    
    .modal-subtitle {
        font-size: 0.75rem !important;
        display: none !important; /* Скрываем подзаголовок на очень маленьких экранах */
    }
    
    .modal-icon {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.9rem !important;
    }
    
    /* Карточки заметок */
    .note-card {
        padding: 14px !important;
    }
    
    .note-title {
        font-size: 0.95rem !important;
    }
    
    .note-meta {
        font-size: 0.75rem !important;
        padding: 8px !important;
    }
    
    .note-content {
        font-size: 0.85rem !important;
        max-height: 80px !important;
    }
    
    /* Кнопки компактнее */
    .modern-btn-primary,
    .modern-btn-secondary,
    .btn-view,
    .btn-edit,
    .btn-delete {
        padding: 10px 14px !important;
        font-size: 0.85rem !important;
    }
    
    /* Labels */
    .view-task-label {
        font-size: 0.8rem !important;
    }
    
    .view-task-content-box {
        padding: 12px !important;
        font-size: 0.85rem !important;
    }
    
    /* Info cards в одну колонку */
    .view-task-info-card {
        padding: 12px !important;
    }
    
    .row.mb-4 {
        margin-bottom: 12px !important;
    }
    
    .col-md-6 {
        margin-bottom: 10px !important;
    }
    
    /* Textarea */
    .modal-textarea {
        min-height: 250px !important;
    }
}

/* Touch устройства - увеличиваем области нажатия */
@media (hover: none) and (pointer: coarse) {
    /* Кнопки */
    .modern-btn-primary,
    .modern-btn-secondary,
    .btn-view,
    .btn-edit,
    .btn-delete,
    .btn {
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 12px 18px !important;
    }
    
    /* Убираем hover эффекты на touch */
    .note-card:hover {
        transform: none !important;
    }
    
    .view-task-info-card:hover {
        transform: none !important;
    }
    
    .view-task-content-box:hover {
        border-color: var(--color-border) !important;
        background: var(--color-soft) !important;
    }
    
    /* Кнопки при нажатии */
    .modern-btn-primary:active {
        transform: scale(0.98) !important;
    }
    
    .modern-btn-secondary:active {
        transform: scale(0.98) !important;
    }
    
    .btn-view:active,
    .btn-edit:active,
    .btn-delete:active {
        transform: scale(0.98) !important;
    }
}

/* Landscape ориентация на мобильных */
@media (max-width: 768px) and (orientation: landscape) {
    .modern-modal .modal-body {
        max-height: calc(100vh - 120px) !important; /* fallback */
        max-height: calc(100dvh - 120px) !important;
        padding: 16px !important;
    }
    
    .modern-modal-header {
        padding: 10px 16px !important;
    }
    
    .modern-modal-footer {
        padding: 10px 16px !important;
    }
    
    .modal-textarea {
        min-height: 200px !important;
    }
}

/* Очень маленькие экраны (iPhone SE, старые Android) */
@media (max-width: 375px) {
    .modern-modal .modal-body {
        padding: 12px 10px !important;
    }
    
    .note-card {
        padding: 12px !important;
    }
    
    .note-title {
        font-size: 0.9rem !important;
    }
    
    .note-meta {
        font-size: 0.7rem !important;
    }
    
    .modern-btn-primary,
    .modern-btn-secondary,
    .btn-view,
    .btn-edit,
    .btn-delete {
        padding: 10px 12px !important;
        font-size: 0.8rem !important;
    }
    
    .view-task-label {
        font-size: 0.75rem !important;
    }
}

/* ========================================
   SMM DASHBOARD СТИЛИ
   ======================================== */

/* SMM переменные (совместимы с основной темой) */
.smm-dashboard {
    --smm-primary: var(--color-primary);
    --smm-secondary: var(--color-primary-2);
    --smm-success: var(--color-success);
    --smm-warning: var(--color-warning);
    --smm-info: var(--color-info);
    --smm-danger: var(--color-danger);
    
    --smm-bg-main: var(--color-bg);
    --smm-bg-card: var(--color-surface);
    --smm-text-primary: var(--color-text);
    --smm-text-secondary: var(--color-muted);
    --smm-border: var(--color-border);
    
    --smm-gradient-primary: var(--gradient-primary);
    --smm-gradient-success: var(--gradient-success);
    --smm-gradient-warning: var(--gradient-warning);
    --smm-gradient-info: var(--gradient-info);
    
    --smm-shadow-sm: var(--shadow-sm);
    --smm-shadow-md: var(--shadow-md);
    --smm-shadow-lg: var(--shadow-lg);
    
    --smm-radius: var(--radius-lg);
    --smm-transition: var(--transition-fast);
    
    --smm-channel-telegram: #0088cc;
    --smm-channel-vk: #4680c2;
    --smm-channel-instagram: #E4405F;
}

.smm-dashboard .channel-icon-telegram { color: var(--smm-channel-telegram); }
.smm-dashboard .channel-icon-vk { color: var(--smm-channel-vk); }
.smm-dashboard .channel-icon-instagram { color: var(--smm-channel-instagram); }

.smm-dashboard .smm-mode-toggle .btn-check:checked + .btn-outline-primary {
    background: var(--gradient-primary);
    border-color: var(--color-primary);
    color: #fff;
}
.smm-dashboard .smm-mode-toggle .btn-check:checked + .btn-outline-success {
    background: var(--gradient-success);
    border-color: var(--color-success);
    color: #fff;
}

.smm-dashboard .smm-status-badge {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.smm-dashboard .smm-status-draft {
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
    color: #4b5563;
}
.smm-dashboard .smm-status-ready {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    color: #065f46;
}
.smm-dashboard .smm-status-published {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #1e40af;
}
.smm-dashboard .smm-status-progress {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #92400e;
}

.smm-dashboard .publish-preview-card {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 16px;
}
.smm-dashboard .publish-preview-card img,
.smm-dashboard .publish-preview-card video {
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
}

#uploadPreview video,
#uploadPreview img {
    border: 2px solid var(--smm-channel-telegram, #0088cc);
    border-radius: var(--radius-md, 8px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.smm-dashboard .smm-stats-card {
    border: none !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-md) !important;
    transition: var(--transition-fast);
}
.smm-dashboard .smm-stats-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg) !important;
}
.smm-dashboard .smm-stats-card.bg-primary { background: var(--gradient-primary) !important; }
.smm-dashboard .smm-stats-card.bg-success { background: var(--gradient-success) !important; }
.smm-dashboard .smm-stats-card.bg-warning { background: var(--gradient-warning) !important; }
.smm-dashboard .smm-stats-card.bg-info { background: var(--gradient-info) !important; }

.smm-dashboard .variant-card {
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: var(--transition-fast);
    background: #fff;
}
.smm-dashboard .variant-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
    transform: translateY(-2px);
}
.smm-dashboard .variant-card.border-success {
    border-color: var(--color-success) !important;
    background: linear-gradient(135deg, #f0fdf4 0%, #fff 100%);
}

.smm-dashboard .text-edit-area {
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-md);
    padding: 12px;
    font-size: 13px;
    transition: var(--transition-fast);
}
.smm-dashboard .text-edit-area:focus {
    border-color: var(--color-primary-2);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
}

/* SMM Tabs */
/* SMM вкладки используют общий стиль .nav-tabs выше */
/* Дополнительные настройки для SMM вкладок, если нужны */
.smm-tabs .nav-link {
    padding: 14px 24px;
}

/* SMM Cards */
.smm-card {
    background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%) !important;
    border: 2px solid var(--color-border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-sm) !important;
    transition: var(--transition-fast) !important;
    overflow: hidden !important;
}

.smm-card:hover {
    box-shadow: var(--shadow-md) !important;
    transform: translateY(-2px) !important;
}

.smm-card-header {
    background: var(--gradient-primary) !important;
    color: white !important;
    padding: 18px 24px !important;
    border-radius: 0 !important;
    border: none !important;
    border-top-left-radius: var(--radius-lg) !important;
    border-top-right-radius: var(--radius-lg) !important;
}

/* smm-card дубликат удален - объединен с основным определением выше */

.smm-card-header h5 {
    margin: 0 !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.smm-card-body {
    padding: 24px !important;
}

/* Generation Steps */
.generation-step {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.step-header {
    padding: 18px 20px !important;
    background: linear-gradient(135deg, #f0f4ff 0%, #ffffff 100%) !important;
    border-radius: var(--radius-md) !important;
    border-left: 5px solid var(--color-primary) !important;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1) !important;
}

.step-header h6 {
    margin: 0 !important;
    font-weight: 700 !important;
    font-size: 1.05rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: var(--color-text) !important;
}

.step-header h6 i {
    font-size: 1.1rem !important;
    color: var(--color-primary) !important;
}

.step-header h6.text-primary,
.step-header h6.text-primary i {
    color: var(--color-primary) !important;
}

.step-header h6.text-success,
.step-header h6.text-success i {
    color: var(--color-success) !important;
}

.step-header h6.text-warning,
.step-header h6.text-warning i {
    color: var(--color-warning) !important;
}

/* Text Variants */
.text-variant-card {
    background: white !important;
    border: 2px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    padding: 20px !important;
    cursor: pointer !important;
    transition: var(--transition-fast) !important;
    height: 100% !important;
}

.text-variant-card:hover {
    border-color: var(--color-primary) !important;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15) !important;
    transform: translateY(-2px) !important;
}

.text-variant-card.selected {
    border-color: var(--color-success) !important;
    background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%) !important;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.2) !important;
}

.text-variant-card .variant-number {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    background: var(--gradient-primary) !important;
    color: white !important;
    border-radius: 50% !important;
    font-weight: 700 !important;
    margin-bottom: 12px !important;
}

.text-variant-card .variant-text {
    color: var(--color-text) !important;
    line-height: 1.7 !important;
    font-size: 0.95rem !important;
    max-height: 300px !important;
    overflow-y: auto !important;
}

/* Image Variants */
.image-variant-card {
    background: white !important;
    border: 2px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    padding: 12px !important;
    cursor: pointer !important;
    transition: var(--transition-fast) !important;
    height: 100% !important;
}

.image-variant-card:hover {
    border-color: var(--color-primary) !important;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15) !important;
    transform: translateY(-2px) !important;
}

.image-variant-card.selected {
    border-color: var(--color-success) !important;
    background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%) !important;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.2) !important;
}

.image-variant-card img {
    width: 100% !important;
    height: auto !important;
    border-radius: var(--radius-sm) !important;
    margin-bottom: 10px !important;
}

.image-variant-card .variant-number {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    background: var(--gradient-primary) !important;
    color: white !important;
    border-radius: 50% !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
}

/* Final Preview */
.final-preview-card {
    background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%) !important;
    border: 2px solid var(--color-success) !important;
    border-radius: var(--radius-lg) !important;
    padding: 24px !important;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.15) !important;
}

.final-preview-card .preview-image {
    width: 100% !important;
    max-width: 400px !important;
    height: auto !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-sm) !important;
    margin-bottom: 20px !important;
}

.final-preview-card .preview-text {
    background: white !important;
    padding: 20px !important;
    border-radius: var(--radius-md) !important;
    border: 2px solid var(--color-border) !important;
    color: var(--color-text) !important;
    line-height: 1.7 !important;
    font-size: 0.95rem !important;
}

/* Ideas Section */
.idea-card {
    background: white !important;
    border: 2px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    padding: 16px !important;
    margin-bottom: 12px !important;
    transition: var(--transition-fast) !important;
    cursor: pointer !important;
}

.idea-card:hover {
    border-color: var(--color-primary) !important;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1) !important;
    transform: translateX(4px) !important;
}

.idea-card.selected {
    border-color: var(--color-success) !important;
    background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%) !important;
}

.idea-card .idea-checkbox {
    width: 20px !important;
    height: 20px !important;
    border: 2px solid var(--color-border) !important;
    border-radius: 4px !important;
    transition: var(--transition-fast) !important;
}

.idea-card.selected .idea-checkbox {
    background: var(--color-success) !important;
    border-color: var(--color-success) !important;
}

.idea-card.selected .idea-checkbox::after {
    content: '✓' !important;
    color: white !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Saved Ideas */
.saved-idea-card {
    background: white !important;
    border: 2px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    padding: 18px !important;
    margin-bottom: 14px !important;
    transition: var(--transition-fast) !important;
}

.saved-idea-card:hover {
    border-color: var(--color-info) !important;
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.15) !important;
    transform: translateX(4px) !important;
    background: linear-gradient(135deg, #f0fdff 0%, #ffffff 100%) !important;
}

.saved-idea-card h6 {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: var(--color-text) !important;
    margin-bottom: 10px !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    line-height: 1.5 !important;
}

.saved-idea-card h6 i.fa-bookmark {
    color: var(--color-info) !important;
    font-size: 0.95rem !important;
    flex-shrink: 0 !important;
}

.saved-idea-card .badge {
    padding: 4px 10px !important;
    border-radius: 12px !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.saved-idea-card .badge-secondary {
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%) !important;
    color: #4b5563 !important;
}

.saved-idea-card .badge-success {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%) !important;
    color: #065f46 !important;
}

.saved-idea-card small {
    color: var(--color-muted) !important;
    font-size: 0.85rem !important;
    line-height: 1.6 !important;
}

.saved-idea-card small strong {
    font-weight: 600 !important;
    color: var(--color-text) !important;
}

.saved-idea-card .btn-danger {
    background: var(--gradient-danger) !important;
    border: none !important;
    color: white !important;
    padding: 8px 14px !important;
    border-radius: var(--radius-sm) !important;
    transition: var(--transition-fast) !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.2) !important;
}

.saved-idea-card .btn-danger:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
    color: white !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(239, 68, 68, 0.3) !important;
}

/* Stats Cards */

/* Posts Table */
.smm-posts-table {
    width: 100%;
    min-width: 100%;
    table-layout: auto;
    background: white;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid #e5e7eb;
    border-collapse: separate;
    border-spacing: 0;
}

.smm-posts-table thead {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.smm-posts-table thead th {
    padding: 14px 16px;
    font-weight: 600;
    color: var(--color-text);
    border: none;
    border-bottom: 2px solid #e5e7eb;
    text-align: center;
    vertical-align: middle;
    font-size: 14px;
    white-space: nowrap;
}

.smm-posts-table tbody tr {
    border-bottom: 1px solid #f1f5f9;
    transition: all 0.2s ease;
    background-color: transparent;
}

.smm-posts-table tbody tr:hover {
    background-color: rgba(102, 126, 234, 0.06) !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.smm-posts-table tbody td {
    padding: 12px 16px;
    vertical-align: middle;
    text-align: center;
    border: none;
}

.smm-posts-table tbody td strong {
    font-weight: 600;
    color: var(--color-text);
}

/* Table Badges */
.smm-posts-table .badge {
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 0.8rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.smm-posts-table .badge-primary {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #1e40af;
}

.smm-posts-table .badge-success {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    color: #065f46;
}

.smm-posts-table .badge-secondary {
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    color: #4b5563;
}

/* Table Action Buttons - круглые кнопки (высокий приоритет) */
.smm-posts-table tbody td .btn-sm,
.smm-posts-table .btn-sm {
    padding: 8px 10px !important;
    font-size: 0.9rem !important;
    border-radius: 50% !important;
    transition: all 0.3s ease !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 3px !important;
}

.smm-posts-table tbody td .btn-primary,
.smm-posts-table .btn-primary {
    background: var(--gradient-primary) !important;
    border: none !important;
    color: white !important;
    box-shadow: 0 2px 6px rgba(102, 126, 234, 0.25) !important;
}

.smm-posts-table tbody td .btn-primary:hover,
.smm-posts-table .btn-primary:hover {
    transform: scale(1.1) translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4) !important;
}

.smm-posts-table tbody td .btn-success,
.smm-posts-table .btn-success {
    background: var(--gradient-success) !important;
    border: none !important;
    color: white !important;
    box-shadow: 0 2px 6px rgba(34, 197, 94, 0.25) !important;
}

.smm-posts-table tbody td .btn-success:hover,
.smm-posts-table .btn-success:hover {
    transform: scale(1.1) translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4) !important;
}

.smm-posts-table tbody td .btn-danger,
.smm-posts-table .btn-danger {
    background: var(--gradient-danger) !important;
    border: none !important;
    color: white !important;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.25) !important;
}

.smm-posts-table tbody td .btn-danger:hover,
.smm-posts-table .btn-danger:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
    transform: scale(1.1) translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4) !important;
}

.smm-posts-table tbody td .btn-sm i,
.smm-posts-table .btn-sm i {
    margin: 0 !important;
    font-size: 14px !important;
}

/* Filter Buttons */
.smm-card-header .btn-group .btn-outline-primary {
    color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    background: white !important;
}

.smm-card-header .btn-group .btn-outline-primary.active,
.smm-card-header .btn-group .btn-outline-primary:hover {
    color: white !important;
    background: var(--gradient-primary) !important;
    border-color: var(--color-primary) !important;
}

.smm-card-header .btn-group .btn-outline-secondary {
    color: var(--color-secondary) !important;
    border-color: var(--color-secondary) !important;
    background: white !important;
}

.smm-card-header .btn-group .btn-outline-secondary:hover {
    color: white !important;
    background: var(--gradient-secondary) !important;
    border-color: var(--color-secondary) !important;
}

.smm-card-header .btn-group .btn-outline-success {
    color: var(--color-success) !important;
    border-color: var(--color-success) !important;
    background: white !important;
}

.smm-card-header .btn-group .btn-outline-success:hover {
    color: white !important;
    background: var(--gradient-success) !important;
    border-color: var(--color-success) !important;
}

/* Status Badges */
.status-badge {
    padding: 6px 12px !important;
    border-radius: 20px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.status-badge.draft {
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%) !important;
    color: #4b5563 !important;
}

.status-badge.scheduled {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%) !important;
    color: #1e40af !important;
}

.status-badge.published {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%) !important;
    color: #065f46 !important;
}

/* Loading States */
.smm-loading {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 40px !important;
    gap: 16px !important;
}

.smm-loading .spinner {
    width: 48px !important;
    height: 48px !important;
    border: 4px solid var(--color-border) !important;
    border-top-color: var(--color-primary) !important;
    border-radius: 50% !important;
    animation: spin 0.8s linear infinite !important;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.smm-loading .loading-text {
    color: var(--color-muted) !important;
    font-size: 0.95rem !important;
}

/* Calendar Legend */
.calendar-legend {
    display: flex;
    gap: 1rem;
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    flex-wrap: wrap;
}


/* Calendar Container */
#calendarContainer {
    max-width: 1200px;
    margin: 0 auto;
}

/* FullCalendar Buttons */
.fc .fc-button {
    background: var(--gradient-primary) !important;
    border: none !important;
    color: white !important;
    padding: 8px 16px !important;
    border-radius: var(--radius-sm) !important;
    font-weight: 600 !important;
    transition: var(--transition-fast) !important;
    box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2) !important;
}

.fc .fc-button:hover {
    background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3) !important;
}

.fc .fc-button:disabled {
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%) !important;
    color: #9ca3af !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
}

.fc .fc-button-active {
    background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%) !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

.fc .fc-button-group {
    border-radius: var(--radius-sm) !important;
    overflow: hidden !important;
    gap: 0 !important;
}

.fc .fc-button-group .fc-button {
    margin: 0 !important;
    border-radius: 0 !important;
}

.fc .fc-button-group .fc-button:first-child {
    border-top-left-radius: var(--radius-sm) !important;
    border-bottom-left-radius: var(--radius-sm) !important;
}

.fc .fc-button-group .fc-button:last-child {
    border-top-right-radius: var(--radius-sm) !important;
    border-bottom-right-radius: var(--radius-sm) !important;
}

.fc .fc-toolbar {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%) !important;
    padding: 16px 20px !important;
    border-radius: var(--radius-lg) !important;
    margin-bottom: 20px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid var(--color-border) !important;
}

.fc .fc-toolbar-chunk {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.fc .fc-toolbar-title {
    color: var(--color-text) !important;
    font-weight: 700 !important;
    font-size: 1.5rem !important;
    margin: 0 !important;
    padding: 0 8px !important;
    white-space: nowrap !important;
}

/* Calendar Header */
.fc .fc-col-header-cell {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
    border-color: var(--color-border) !important;
    padding: 12px 8px !important;
}

.fc .fc-col-header-cell-cushion {
    color: var(--color-text) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 0.85rem !important;
    letter-spacing: 0.5px !important;
}

/* Calendar Days */
.fc .fc-daygrid-day {
    border-color: var(--color-border) !important;
}

.fc .fc-daygrid-day-number {
    color: var(--color-text) !important;
    font-weight: 600 !important;
    padding: 8px !important;
}

.fc .fc-day-today {
    background: rgba(102, 126, 234, 0.1) !important;
}

.fc .fc-day-today .fc-daygrid-day-number {
    background: var(--gradient-primary) !important;
    color: white !important;
    border-radius: 50% !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Calendar Events */
.fc-event {
    border-radius: 10px !important;
    padding: 0 !important;
    font-weight: 600 !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    overflow: visible !important;
}

.fc-event:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
    z-index: 100 !important;
}

.fc-event .fc-event-main-frame {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px !important;
    border-radius: 10px !important;
    min-height: 32px !important;
}

.fc-event .fc-event-title-full {
    position: fixed !important;
    top: auto !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(10px) !important;
    margin-top: 0 !important;
    background: white !important;
    border: 2px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    padding: 16px 20px !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3) !important;
    z-index: 999 !important;
    min-width: 320px !important;
    max-width: 400px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.2s ease, transform 0.2s ease !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
}

.fc-event:hover .fc-event-title-full {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateX(-50%) translateY(0) !important;
}

.fc-event .fc-event-title-full > * {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    max-width: 100% !important;
}

.fc-event .fc-event-title-full::before {
    content: '' !important;
    position: absolute !important;
    bottom: 100% !important;
    left: var(--arrow-left, 50%) !important;
    transform: translateX(-50%) !important;
    border: 8px solid transparent !important;
    border-bottom-color: var(--color-border) !important;
}

.fc-event .fc-event-title-full::after {
    content: '' !important;
    position: absolute !important;
    bottom: 100% !important;
    left: var(--arrow-left, 50%) !important;
    transform: translateX(-50%) !important;
    border: 6px solid transparent !important;
    border-bottom-color: white !important;
    margin-bottom: -2px !important;
}

/* ===== Lessons Calendar: FullCalendar event status styles ===== */
.fc-event.status-planned {
    background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
    color: white !important;
}

.fc-event.status-completed {
    background: linear-gradient(135deg, #34d399, #10b981) !important;
    color: white !important;
}

.fc-event.status-cancelled {
    background: linear-gradient(135deg, #f87171, #ef4444) !important;
    color: white !important;
    text-decoration: line-through !important;
    opacity: 0.8 !important;
}

.fc-event .event-status-icon {
    margin-right: 3px;
    font-size: 0.7rem;
    opacity: 0.9;
}

.fc-event .event-teacher {
    font-size: 0.7rem;
    opacity: 0.9;
    font-weight: 400;
}

.fc-event .event-room {
    font-size: 0.65rem;
    opacity: 0.8;
    font-style: italic;
}

/* Social Preview in Modal */
.social-preview {
    background: white !important;
    border: 2px solid var(--color-border) !important;
    border-radius: var(--radius-lg) !important;
    overflow: hidden !important;
    box-shadow: var(--shadow-md) !important;
}

.social-preview-header {
    padding: 16px !important;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
    border-bottom: 2px solid var(--color-border) !important;
}

.social-preview-avatar {
    width: 48px !important;
    height: 48px !important;
    background: var(--gradient-primary) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
    font-size: 1.5rem !important;
    margin-right: 12px !important;
}

.social-preview-name {
    font-weight: 700 !important;
    color: var(--color-text) !important;
    font-size: 1rem !important;
}

.social-preview-time {
    font-size: 0.85rem !important;
    color: var(--color-muted) !important;
}

.social-preview-image {
    width: 100% !important;
    max-height: 400px !important;
    overflow: hidden !important;
}

.social-preview-image img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

.social-preview-content {
    padding: 16px !important;
}

.social-preview-text {
    color: var(--color-text) !important;
    line-height: 1.6 !important;
    font-size: 0.95rem !important;
    max-height: 300px !important;
    overflow-y: auto !important;
}

.social-preview-actions {
    display: flex !important;
    gap: 8px !important;
    padding: 12px 16px !important;
    border-top: 2px solid var(--color-border) !important;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%) !important;
}

.social-preview-action {
    flex: 1 !important;
    padding: 8px 12px !important;
    background: white !important;
    border: 2px solid var(--color-border) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--color-text) !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    transition: var(--transition-fast) !important;
    cursor: pointer !important;
}

.social-preview-action:hover {
    background: var(--gradient-primary) !important;
    border-color: var(--color-primary) !important;
    color: white !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3) !important;
}

.social-preview-action i {
    margin-right: 6px !important;
}

/* ============================================
   Специфичные стили для разных платформ
   ============================================ */

/* VK стиль */
.social-preview-vk {
    border-radius: 8px !important;
    background: #ffffff !important;
}

.social-preview-vk .social-preview-header {
    background: linear-gradient(135deg, #ffffff 0%, #f7f8fa 100%) !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid #e7e8ec !important;
}

.social-preview-vk .social-preview-avatar {
    width: 50px !important;
    height: 50px !important;
    background: linear-gradient(135deg, #5181b8 0%, #4a76a8 100%) !important;
    border-radius: 50% !important;
}

.social-preview-vk .social-preview-name {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #2a5885 !important;
}

.social-preview-vk .social-preview-time {
    font-size: 12px !important;
    color: #939393 !important;
}

.social-preview-vk .social-preview-content {
    padding: 12px 16px !important;
}

.social-preview-vk .social-preview-text {
    font-size: 13px !important;
    line-height: 1.5 !important;
    color: #000000 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif !important;
}

.social-preview-vk .social-preview-image {
    margin: 0 !important;
    max-height: 500px !important;
}

.social-preview-vk .social-preview-actions {
    padding: 8px 16px !important;
    border-top: 1px solid #e7e8ec !important;
    background: #ffffff !important;
}

.social-preview-vk .social-preview-action {
    background: transparent !important;
    border: none !important;
    color: #5181b8 !important;
    font-size: 12.5px !important;
    font-weight: 400 !important;
    padding: 6px 12px !important;
}

.social-preview-vk .social-preview-action:hover {
    background: rgba(81, 129, 184, 0.05) !important;
    color: #5181b8 !important;
    transform: none !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 4px !important;
}

.social-preview-vk .social-preview-action i {
    color: #5181b8 !important;
    font-size: 16px !important;
    margin-right: 8px !important;
}

.social-preview-vk .social-preview-hashtags {
    margin-top: 8px !important;
    color: #2a5885 !important;
    font-size: 13px !important;
}

/* Telegram стиль */
.social-preview-telegram {
    border-radius: 12px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

.social-preview-telegram .social-preview-header {
    background: linear-gradient(135deg, #f4f4f5 0%, #e8eaed 100%) !important;
    padding: 12px 16px !important;
}

.social-preview-telegram .social-preview-avatar {
    width: 42px !important;
    height: 42px !important;
    background: linear-gradient(135deg, #0088cc 0%, #006699 100%) !important;
}

.social-preview-telegram .social-preview-name {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #000000 !important;
}

.social-preview-telegram .social-preview-time {
    font-size: 13px !important;
    color: #707579 !important;
}

.social-preview-telegram .social-preview-content {
    padding: 12px 16px !important;
}

.social-preview-telegram .social-preview-text {
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: #000000 !important;
    white-space: pre-wrap !important;
}

.social-preview-telegram .social-preview-image {
    border-radius: 0 !important;
    max-height: 450px !important;
}

.social-preview-telegram .social-preview-actions {
    padding: 8px 16px !important;
    background: #ffffff !important;
    border-top: 1px solid #e5e5ea !important;
}

.social-preview-telegram .social-preview-action {
    background: transparent !important;
    border: none !important;
    color: #0088cc !important;
    font-size: 13px !important;
}

.social-preview-telegram .social-preview-action:hover {
    background: rgba(0, 136, 204, 0.08) !important;
    color: #0088cc !important;
    border: none !important;
    transform: none !important;
    box-shadow: none !important;
}

.social-preview-telegram .social-preview-hashtags {
    margin-top: 8px !important;
    color: #0088cc !important;
    font-size: 14px !important;
}

/* Instagram стиль */
.social-preview-instagram {
    border-radius: 8px !important;
    max-width: 470px !important;
}

.social-preview-instagram .social-preview-header {
    background: #ffffff !important;
    padding: 14px 16px !important;
    border-bottom: 1px solid #dbdbdb !important;
}

.social-preview-instagram .social-preview-avatar {
    width: 32px !important;
    height: 32px !important;
    background: linear-gradient(45deg, #f58529, #dd2a7b, #8134af, #515bd4) !important;
    border: 2px solid #ffffff !important;
    box-shadow: 0 0 0 1px #dbdbdb !important;
}

.social-preview-instagram .social-preview-name {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #262626 !important;
}

.social-preview-instagram .social-preview-time {
    display: none !important;
}

.social-preview-instagram .social-preview-content {
    padding: 12px 16px !important;
}

.social-preview-instagram .social-preview-text {
    font-size: 14px !important;
    line-height: 1.4 !important;
    color: #262626 !important;
}

.social-preview-instagram .social-preview-image {
    max-height: 470px !important;
    margin: 0 !important;
}

.social-preview-instagram .social-preview-image img {
    object-fit: cover !important;
}

.social-preview-instagram .social-preview-actions {
    padding: 8px 16px !important;
    border-top: none !important;
    background: #ffffff !important;
    gap: 12px !important;
}

.social-preview-instagram .social-preview-action {
    background: transparent !important;
    border: none !important;
    color: #262626 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    padding: 4px 0 !important;
    flex: 0 !important;
}

.social-preview-instagram .social-preview-action:hover {
    background: transparent !important;
    color: #8e8e8e !important;
    border: none !important;
    transform: none !important;
    box-shadow: none !important;
}

.social-preview-instagram .social-preview-action i {
    font-size: 24px !important;
    margin-right: 0 !important;
}

.social-preview-instagram .social-preview-hashtags {
    margin-top: 4px !important;
    color: #00376b !important;
    font-size: 14px !important;
    font-weight: 400 !important;
}

/* Общий стиль для хэштегов */
.social-preview-hashtags {
    margin-top: 8px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
}

/* Modal View Post */
#viewModalBody .text-center h5 {
    font-weight: 700 !important;
    color: var(--color-text) !important;
    margin-bottom: 8px !important;
}

#viewModalBody .badge {
    padding: 6px 12px !important;
    border-radius: 12px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
}

#viewModalBody .badge-secondary {
    background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%) !important;
    color: #4b5563 !important;
}

/* SMM Buttons - компактный красивый стиль */
.smm-dashboard .btn-warning {
    background: var(--gradient-warning);
    border: none;
    color: white;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.25);
    transition: var(--transition-button);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-sm);
    min-height: 36px;
}

.smm-dashboard .btn-warning:hover {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(245, 158, 11, 0.35);
}

.smm-dashboard .btn-primary {
    background: var(--gradient-primary);
    border: none;
    color: white;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    box-shadow: 0 2px 6px rgba(102, 126, 234, 0.25);
    transition: var(--transition-button);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-sm);
    min-height: 36px;
}

.smm-dashboard .btn-primary:hover {
    background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.35);
}

/* Уменьшенная ширина для SMM модальных окон */
#viewModal .modal-dialog,
#editModal .modal-dialog {
    max-width: 800px !important;
}

@media (min-width: 992px) {
    #viewModal .modal-dialog,
    #editModal .modal-dialog {
        max-width: 750px !important;
    }
}

/* Компактный padding для SMM модальных окон */
#viewModal .modal-body,
#editModal .modal-body {
    padding: 20px !important;
}

#viewModal .modal-header,
#editModal .modal-header {
    padding: 16px 20px !important;
}

#viewModal .modal-footer,
#editModal .modal-footer {
    padding: 16px 20px !important;
}

/* Кнопки в SMM модальных окнах - компактный стиль */
.smm-dashboard .modal .modal-body .btn,
.smm-dashboard .modal .modal-footer .btn,
#viewModal .modal-body .btn,
#viewModal .modal-footer .btn,
#editModal .modal-body .btn,
#editModal .modal-footer .btn {
    padding: 8px 16px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
    min-height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    width: auto !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    flex-shrink: 0 !important;
}

/* Большие кнопки в modal-body (например "Сохранить как черновик") */
.smm-dashboard .modal .modal-body .btn.btn-block,
.smm-dashboard .modal .modal-body .btn.w-100,
.smm-dashboard .modal .modal-body .btn-lg,
#viewModal .modal-body .btn.btn-block,
#viewModal .modal-body .btn.w-100,
#viewModal .modal-body .btn-lg,
#editModal .modal-body .btn.btn-block,
#editModal .modal-body .btn.w-100,
#editModal .modal-body .btn-lg {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
    padding: 10px 20px !important;
    font-size: 14px !important;
}

/* Контейнер d-grid для больших кнопок - улучшенный */
.smm-dashboard .modal .modal-body .d-grid,
#viewModal .modal-body .d-grid,
#editModal .modal-body .d-grid,
#editModalBody .d-grid {
    gap: 12px !important;
    margin-bottom: 20px !important;
}

/* Контейнер d-flex для маленьких кнопок внизу - улучшенный */
.smm-dashboard .modal .modal-body .d-flex,
#viewModal .modal-body .d-flex,
#editModal .modal-body .d-flex,
#editModalBody .d-flex {
    gap: 10px !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

/* Кнопки в d-flex контейнере - компактные и красивые */
.smm-dashboard .modal .modal-body .d-flex .btn,
#viewModal .modal-body .d-flex .btn,
#editModal .modal-body .d-flex .btn,
#editModalBody .d-flex .btn {
    padding: 10px 18px !important;
    font-size: 13px !important;
    width: auto !important;
    margin: 0 !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

/* Кнопка с классом ms-auto выравнивается справа */
.smm-dashboard .modal .modal-body .d-flex .btn.ms-auto,
#viewModal .modal-body .d-flex .btn.ms-auto,
#editModal .modal-body .d-flex .btn.ms-auto {
    margin-left: auto !important;
}

/* Кнопки outline в d-flex контейнере */
.smm-dashboard .modal .modal-body .d-flex .btn-outline-info,
.smm-dashboard .modal .modal-body .d-flex .btn-outline-primary,
.smm-dashboard .modal .modal-body .d-flex .btn-outline-warning,
#viewModal .modal-body .d-flex .btn-outline-info,
#viewModal .modal-body .d-flex .btn-outline-primary,
#viewModal .modal-body .d-flex .btn-outline-warning,
#editModal .modal-body .d-flex .btn-outline-info,
#editModal .modal-body .d-flex .btn-outline-primary,
#editModal .modal-body .d-flex .btn-outline-warning {
    background: white !important;
    border-width: 1px !important;
}

/* Кнопка "Закрыть" (btn-secondary) - красивый стиль */
.smm-dashboard .modal .modal-body .btn-secondary,
#viewModal .modal-body .btn-secondary,
#editModal .modal-body .btn-secondary,
#editModalBody .btn-secondary {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%) !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 3px 8px rgba(107, 114, 128, 0.3) !important;
    transition: all 0.3s ease !important;
    border-radius: 8px !important;
}

.smm-dashboard .modal .modal-body .btn-secondary:hover,
#viewModal .modal-body .btn-secondary:hover,
#editModal .modal-body .btn-secondary:hover,
#editModalBody .btn-secondary:hover {
    background: linear-gradient(135deg, #4b5563 0%, #374151 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 12px rgba(107, 114, 128, 0.4) !important;
}

.smm-dashboard .modal .modal-body .btn-secondary i,
#viewModal .modal-body .btn-secondary i,
#editModal .modal-body .btn-secondary i,
#editModalBody .btn-secondary i {
    color: white !important;
}

/* Кнопка "Сохранить изменения" (btn-success btn-lg) - красивая заливка */
.smm-dashboard .modal .modal-body .btn-success.btn-lg,
#viewModal .modal-body .btn-success.btn-lg,
#editModal .modal-body .btn-success.btn-lg,
#editModalBody .btn-success.btn-lg {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.35) !important;
    transition: all 0.3s ease !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    padding: 14px 24px !important;
}

.smm-dashboard .modal .modal-body .btn-success.btn-lg:hover,
#viewModal .modal-body .btn-success.btn-lg:hover,
#editModal .modal-body .btn-success.btn-lg:hover,
#editModalBody .btn-success.btn-lg:hover {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 18px rgba(34, 197, 94, 0.45) !important;
}

.smm-dashboard .modal .modal-body .btn-success.btn-lg i,
#viewModal .modal-body .btn-success.btn-lg i,
#editModal .modal-body .btn-success.btn-lg i,
#editModalBody .btn-success.btn-lg i {
    color: white !important;
    font-size: 16px !important;
}

/* Кнопка "Сохранить как вариант" (btn-outline-warning) */
.smm-dashboard .modal .modal-body .btn-outline-warning,
#viewModal .modal-body .btn-outline-warning,
#editModal .modal-body .btn-outline-warning,
#editModalBody .btn-outline-warning {
    background: white !important;
    color: #f59e0b !important;
    border: 2px solid #f59e0b !important;
    box-shadow: 0 3px 8px rgba(245, 158, 11, 0.2) !important;
    transition: all 0.3s ease !important;
    border-radius: 10px !important;
    padding: 14px 24px !important;
    font-weight: 600 !important;
}

.smm-dashboard .modal .modal-body .btn-outline-warning:hover,
#viewModal .modal-body .btn-outline-warning:hover,
#editModal .modal-body .btn-outline-warning:hover,
#editModalBody .btn-outline-warning:hover {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    color: white !important;
    border-color: transparent !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 5px 14px rgba(245, 158, 11, 0.4) !important;
}

.smm-dashboard .modal .modal-body .btn-outline-warning:hover i,
#viewModal .modal-body .btn-outline-warning:hover i,
#editModal .modal-body .btn-outline-warning:hover i {
    color: white !important;
}

/* Кнопки "История" и "Варианты" (btn-outline-info, btn-outline-primary) */
.smm-dashboard .modal .modal-body .d-flex .btn-outline-info,
#viewModal .modal-body .d-flex .btn-outline-info,
#editModal .modal-body .d-flex .btn-outline-info,
#editModalBody .d-flex .btn-outline-info {
    background: white !important;
    color: #06b6d4 !important;
    border: 2px solid #06b6d4 !important;
    box-shadow: 0 2px 6px rgba(6, 182, 212, 0.2) !important;
}

.smm-dashboard .modal .modal-body .d-flex .btn-outline-info:hover,
#viewModal .modal-body .d-flex .btn-outline-info:hover,
#editModal .modal-body .d-flex .btn-outline-info:hover,
#editModalBody .d-flex .btn-outline-info:hover {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%) !important;
    color: white !important;
    border-color: transparent !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.35) !important;
}

.smm-dashboard .modal .modal-body .d-flex .btn-outline-info:hover i,
#viewModal .modal-body .d-flex .btn-outline-info:hover i,
#editModal .modal-body .d-flex .btn-outline-info:hover i,
#editModalBody .d-flex .btn-outline-info:hover i {
    color: white !important;
}

.smm-dashboard .modal .modal-body .d-flex .btn-outline-primary,
#viewModal .modal-body .d-flex .btn-outline-primary,
#editModal .modal-body .d-flex .btn-outline-primary,
#editModalBody .d-flex .btn-outline-primary {
    background: white !important;
    color: #667eea !important;
    border: 2px solid #667eea !important;
    box-shadow: 0 2px 6px rgba(102, 126, 234, 0.2) !important;
}

.smm-dashboard .modal .modal-body .d-flex .btn-outline-primary:hover,
#viewModal .modal-body .d-flex .btn-outline-primary:hover,
#editModal .modal-body .d-flex .btn-outline-primary:hover,
#editModalBody .d-flex .btn-outline-primary:hover {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
    border-color: transparent !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.35) !important;
}

.smm-dashboard .modal .modal-body .d-flex .btn-outline-primary:hover i,
#viewModal .modal-body .d-flex .btn-outline-primary:hover i,
#editModal .modal-body .d-flex .btn-outline-primary:hover i,
#editModalBody .d-flex .btn-outline-primary:hover i {
    color: white !important;
}

.smm-dashboard .btn-lg {
    padding: 14px 28px;
    font-size: 1.05rem;
}

.smm-dashboard .btn-block {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Text Preview */
.text-preview {
    white-space: pre-wrap;
    padding: 16px;
    background: var(--color-soft);
    border-radius: var(--radius-md);
    border: 2px solid var(--color-border);
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--color-text);
}

.text-preview-lg {
    max-height: 300px;
    overflow-y: auto;
    font-size: 0.9rem;
}

/* Clickable elements */
.clickable {
    cursor: pointer;
}

.saved-idea-card .flex-grow-1 {
    cursor: pointer;
}

/* ========================================
   МОДАЛЬНОЕ ОКНО РЕДАКТИРОВАНИЯ SMM ПОСТА
   ======================================== */

/* Модальное окно редактирования поста */
#editModalBody {
    background: var(--color-soft) !important;
    padding: var(--space-6) !important;
}

#editModalBody .container-fluid {
    padding: 0 !important;
}

/* Заголовок платформы */
#editModalBody h5 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin-bottom: var(--space-2);
}

#editModalBody h5 i {
    font-size: var(--font-size-xl);
}

/* Описание поста */
#editModalBody .text-muted {
    font-size: var(--font-size-md);
    color: var(--color-muted) !important;
}

/* Лейблы форм */
#editModalBody .form-label {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    font-size: var(--font-size-md);
    margin-bottom: var(--space-2);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

#editModalBody .form-label i {
    color: var(--color-primary);
}

/* Textarea для контента */
#editModalBody textarea.form-control {
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    font-size: var(--font-size-md);
    line-height: 1.6;
    resize: vertical;
    min-height: 300px;
}

#editModalBody textarea.form-control:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}

/* Input для хештегов и textarea */
#editModalBody input.form-control,
#editModalBody textarea.form-control,
.smm-dashboard input.form-control,
.smm-dashboard textarea.form-control,
#viewModal input.form-control,
#viewModal textarea.form-control {
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 14px;
    transition: all 0.3s ease;
    background: white;
}

#editModalBody input.form-control:focus,
#editModalBody textarea.form-control:focus,
.smm-dashboard input.form-control:focus,
.smm-dashboard textarea.form-control:focus,
#viewModal input.form-control:focus,
#viewModal textarea.form-control:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    outline: none;
}

#editModalBody textarea.form-control,
.smm-dashboard textarea.form-control,
#viewModal textarea.form-control {
    min-height: 120px;
    resize: vertical;
}

/* Превью изображения - красивый блок с тенью, по центру */
#editModalBody [id^="imagePreview-"],
.smm-dashboard [id^="imagePreview-"],
#viewModal [id^="imagePreview-"] {
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    margin-bottom: 0px;
    width: 100%;
}

#editModalBody [id^="imagePreview-"]:hover,
.smm-dashboard [id^="imagePreview-"]:hover,
#viewModal [id^="imagePreview-"]:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

#editModalBody [id^="imagePreview-"] img,
.smm-dashboard [id^="imagePreview-"] img,
#viewModal [id^="imagePreview-"] img {
    border-radius: 8px;
    max-height: 200px !important;
    width: auto;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    display: block;
    margin: 0 auto;
}

#editModalBody [id^="imagePreview-"] .text-muted,
.smm-dashboard [id^="imagePreview-"] .text-muted,
#viewModal [id^="imagePreview-"] .text-muted {
    margin: 0;
    padding: 20px;
    text-align: center;
    color: #9ca3af;
    font-style: italic;
    width: 100%;
}

/* Бейджи статуса - красивый стиль */
#editModalBody .badge,
.smm-dashboard .badge,
#viewModal .badge {
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s ease;
}

#editModalBody .badge-secondary,
.smm-dashboard .badge-secondary,
#viewModal .badge-secondary {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%) !important;
    color: white !important;
    box-shadow: 0 2px 6px rgba(107, 114, 128, 0.25);
}

#editModalBody .badge-success,
.smm-dashboard .badge-success,
#viewModal .badge-success {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    color: white !important;
    box-shadow: 0 2px 6px rgba(34, 197, 94, 0.25);
}

#editModalBody .badge:hover,
.smm-dashboard .badge:hover,
#viewModal .badge:hover {
    transform: scale(1.05);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}

/* Кнопки в модальном окне */
#editModalBody .btn {
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-5);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-md);
    transition: var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

#editModalBody .btn-success {
    background: var(--gradient-success) !important;
    border: none;
    color: white;
}

#editModalBody .btn-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

#editModalBody .btn-outline-warning {
    background: white;
    border: 2px solid var(--color-warning);
    color: var(--color-warning);
}

#editModalBody .btn-outline-warning:hover {
    background: var(--gradient-warning);
    border-color: transparent;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

#editModalBody .btn-outline-info {
    background: white;
    border: 2px solid var(--color-info);
    color: var(--color-info);
}

#editModalBody .btn-outline-info:hover {
    background: var(--gradient-info);
    border-color: transparent;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3);
}

#editModalBody .btn-outline-primary {
    background: white;
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
}

#editModalBody .btn-outline-primary:hover {
    background: var(--gradient-primary);
    border-color: transparent;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

#editModalBody .btn-secondary {
    background: var(--gradient-secondary);
    border: none;
    color: white;
}

#editModalBody .btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(107, 114, 128, 0.3);
}

#editModalBody .btn-sm {
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-sm);
}

#editModalBody .btn-lg {
    padding: var(--space-4) var(--space-6);
    font-size: var(--font-size-lg);
}

/* Контейнер для блока изображения - центрирование через text-align */
#editModalBody .mb-3:has([id^="imagePreview-"]),
.smm-dashboard .mb-3:has([id^="imagePreview-"]),
#viewModal .mb-3:has([id^="imagePreview-"]) {
    text-align: center;
}

#editModalBody .mb-3:has([id^="imagePreview-"]) .form-label,
.smm-dashboard .mb-3:has([id^="imagePreview-"]) .form-label,
#viewModal .mb-3:has([id^="imagePreview-"]) .form-label {
    text-align: left;
    display: block;
}

/* Кнопка "Обновить картинку" - красивый стиль, прямо под картинкой */
#editModalBody .btn-info,
.smm-dashboard .modal .btn-info,
#viewModal .btn-info {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%) !important;
    border: none !important;
    color: white !important;
    box-shadow: 0 3px 10px rgba(6, 182, 212, 0.3) !important;
    transition: all 0.3s ease !important;
    font-weight: 600 !important;
    display: inline-block !important;
    margin: 10px 0 0 0 !important;
    width: auto !important;
}

#editModalBody .btn-info:hover,
.smm-dashboard .btn-info:hover,
#viewModal .btn-info:hover {
    background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 15px rgba(6, 182, 212, 0.4) !important;
}

#editModalBody .btn-info i,
.smm-dashboard .btn-info i,
#viewModal .btn-info i {
    color: white !important;
}

/* Маленькие кнопки btn-sm в SMM модалке (НЕ в таблице!) */
#editModalBody .btn-sm.btn-info,
.smm-dashboard .modal .btn-sm.btn-info,
#viewModal .btn-sm.btn-info {
    padding: 8px 16px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
}

#editModalBody .btn-sm.btn-primary,
.smm-dashboard .modal .btn-sm.btn-primary,
#viewModal .btn-sm.btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border: none !important;
    color: white !important;
    box-shadow: 0 3px 10px rgba(102, 126, 234, 0.3) !important;
    transition: all 0.3s ease !important;
    font-weight: 600 !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
    width: auto !important;
    height: auto !important;
}

#editModalBody .btn-sm.btn-primary:hover,
.smm-dashboard .modal .btn-sm.btn-primary:hover,
#viewModal .btn-sm.btn-primary:hover {
    background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4) !important;
}

#editModalBody .btn-sm.btn-primary i,
.smm-dashboard .modal .btn-sm.btn-primary i,
#viewModal .btn-sm.btn-primary i {
    color: white !important;
}

/* Лейблы в SMM модальном окне */
#editModalBody .form-label,
.smm-dashboard .form-label,
#viewModal .form-label {
    color: #374151;
    font-size: 14px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

#editModalBody .form-label.fw-bold,
.smm-dashboard .form-label.fw-bold,
#viewModal .form-label.fw-bold {
    font-weight: 600;
}

#editModalBody .form-label i,
.smm-dashboard .form-label i,
#viewModal .form-label i {
    color: #667eea;
    font-size: 16px;
}

/* Блок mb-3 для изображения */
#editModalBody .mb-3,
.smm-dashboard .mb-3,
#viewModal .mb-3 {
    margin-bottom: 20px !important;
}

/* Контейнер с лейблом и кнопкой рядом */
#editModalBody .d-flex.justify-content-between,
.smm-dashboard .d-flex.justify-content-between,
#viewModal .d-flex.justify-content-between {
    align-items: center;
    margin-bottom: 12px;
}

#editModalBody .d-flex.justify-content-between .form-label,
.smm-dashboard .d-flex.justify-content-between .form-label,
#viewModal .d-flex.justify-content-between .form-label {
    margin-bottom: 0 !important;
}

/* Разделитель - красивая линия */
#editModalBody hr,
.smm-dashboard hr,
#viewModal hr {
    border: none;
    border-top: 2px solid #e5e7eb;
    margin: 24px 0;
    opacity: 0.6;
}

/* Grid для кнопок */
#editModalBody .d-grid {
    gap: var(--space-3);
}

/* Flex для кнопок */
#editModalBody .d-flex {
    gap: var(--space-3);
}

/* Mobile Adaptation для SMM */
@media (max-width: 768px) {
    .smm-tabs .nav-link {
        padding: 10px 16px !important;
        font-size: 0.9rem !important;
    }
    
    .smm-card-header {
        padding: 14px 16px !important;
    }
    
    .smm-card-body {
        padding: 16px !important;
    }
    
    .text-variant-card,
    .image-variant-card {
        margin-bottom: 16px !important;
    }
    
    .smm-posts-table {
        font-size: 0.85rem !important;
    }
    
    .smm-posts-table thead th,
    .smm-posts-table tbody td {
        padding: 10px !important;
    }
    
    #editModalBody {
        padding: var(--space-4) !important;
    }
    
    #editModalBody textarea.form-control {
        min-height: 200px;
    }
}

/* ========================================
   SMM — MODAL HEADERS (GRADIENT)
   ======================================== */

.smm-modal-header-primary {
    background: var(--gradient-primary, linear-gradient(135deg, #667eea 0%, #764ba2 100%)) !important;
    border-bottom: none !important;
}

.smm-modal-header-success {
    background: var(--gradient-success, linear-gradient(135deg, #22c55e 0%, #16a34a 100%)) !important;
    border-bottom: none !important;
}

.smm-modal-header-warning {
    background: var(--gradient-warning, linear-gradient(135deg, #f59e0b 0%, #d97706 100%)) !important;
    border-bottom: none !important;
}

.smm-modal-header-info {
    background: var(--gradient-info, linear-gradient(135deg, #06b6d4 0%, #0891b2 100%)) !important;
    border-bottom: none !important;
}

.smm-modal-header-danger {
    background: var(--gradient-danger, linear-gradient(135deg, #ef4444 0%, #dc2626 100%)) !important;
    border-bottom: none !important;
}

.smm-modal-header-vk {
    background: linear-gradient(135deg, #4680c2 0%, #2d5a9e 100%) !important;
    border-bottom: none !important;
}

/* Иконка и заголовок в modal-header */
.smm-modal-header-primary h5,
.smm-modal-header-success h5,
.smm-modal-header-warning h5,
.smm-modal-header-info h5,
.smm-modal-header-danger h5,
.smm-modal-header-vk h5 {
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    letter-spacing: 0.01em !important;
}

/* Скруглённые верхние углы для modal-content */
#publishModal .modal-content,
#viewModal .modal-content,
#editModal .modal-content,
#manageScheduledPostModal .modal-content,
#rescheduleModal .modal-content,
#massScheduleModal .modal-content,
#massGenerationModal .modal-content,
#templatesModal .modal-content,
#vkSetupModal .modal-content {
    border: none !important;
    border-radius: var(--radius-xl, 20px) !important;
    overflow: hidden !important;
    box-shadow: var(--shadow-modal, 0 20px 60px rgba(0,0,0,0.15)) !important;
}

/* Modal body background */
#publishModal .modal-body,
#manageScheduledPostModal .modal-body,
#rescheduleModal .modal-body,
#massScheduleModal .modal-body,
#massGenerationModal .modal-body,
#templatesModal .modal-body {
    background: var(--color-soft, #f8fafc) !important;
    padding: 24px !important;
}

/* Modal footer */
#publishModal .modal-footer,
#manageScheduledPostModal .modal-footer,
#rescheduleModal .modal-footer,
#massScheduleModal .modal-footer,
#massGenerationModal .modal-footer,
#templatesModal .modal-footer {
    background: var(--color-surface, #fff) !important;
    border-top: 1.5px solid var(--color-border, #e5e7eb) !important;
    padding: 16px 24px !important;
    border-radius: 0 0 var(--radius-xl, 20px) var(--radius-xl, 20px) !important;
}

/* ========================================
   SMM — PUBLISH MODAL PREVIEW CARD
   ======================================== */

#publishPostPreview.publish-preview-card {
    border-radius: var(--radius-md, 12px) !important;
    border: 1.5px solid var(--color-border, #e5e7eb) !important;
    background: var(--color-surface, #fff) !important;
    box-shadow: var(--shadow-sm) !important;
    transition: box-shadow 0.2s;
}

#publishPostPreview.publish-preview-card img {
    border-radius: var(--radius-sm, 8px) !important;
    object-fit: cover;
    border: 1px solid var(--color-border, #e5e7eb) !important;
}

#publishPreviewTitle {
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    color: var(--color-text, #1f2937) !important;
}

/* Канальный лейбл */
#publishChannelLabel {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 16px !important;
    border-radius: 50px !important;
    background: linear-gradient(135deg, #f0f4ff 0%, #fff 100%) !important;
    border: 1.5px solid var(--color-primary, #667eea) !important;
    color: var(--color-primary, #667eea) !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
}

/* ========================================
   SMM — CHANNEL CHECKBOXES (PILL)
   ======================================== */

/* Стили уже в additional_styles блоке dashboard.html.
   Здесь — глобальные переопределения для консистентности */
.channel-check-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 9px 18px !important;
    border: 2px solid var(--color-border, #e5e7eb) !important;
    border-radius: 50px !important;
    cursor: pointer !important;
    transition: all 0.22s ease !important;
    background: var(--color-surface, #fff) !important;
    font-weight: 600 !important;
    font-size: 0.88rem !important;
    color: var(--color-text, #1f2937) !important;
    user-select: none !important;
    white-space: nowrap !important;
}

.channel-check-pill:hover {
    border-color: var(--color-primary, #667eea) !important;
    background: linear-gradient(135deg, #f0f4ff 0%, #fff 100%) !important;
    box-shadow: 0 2px 8px rgba(102,126,234,0.12) !important;
    transform: translateY(-1px) !important;
}

/* ========================================
   SMM — SOCIAL SETTINGS ALERT
   ======================================== */

#socialSettingsAlert {
    background: linear-gradient(135deg, #f0f4ff 0%, #f8fafc 100%) !important;
    border: 1.5px solid rgba(102,126,234,0.22) !important;
    border-radius: var(--radius-lg, 16px) !important;
    box-shadow: var(--shadow-sm) !important;
    color: var(--color-text, #1f2937) !important;
}

#socialSettingsAlert h6 {
    font-weight: 700 !important;
    color: var(--color-text, #1f2937) !important;
}

#socialSettingsAlert .social-status {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 12px !important;
    background: var(--color-surface, #fff) !important;
    border: 1px solid var(--color-border, #e5e7eb) !important;
    border-radius: var(--radius-sm, 8px) !important;
    font-size: 0.88rem !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
}

/* ========================================
   SMM — PROGRESS BAR VIDEO UPLOAD
   ======================================== */

.progress {
    border-radius: var(--radius-sm, 8px) !important;
    overflow: hidden !important;
    background: var(--color-border, #e5e7eb) !important;
}

#videoProgress {
    background: var(--gradient-primary, linear-gradient(135deg, #667eea 0%, #764ba2 100%)) !important;
    border-radius: var(--radius-sm, 8px) !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
    transition: width 0.45s ease !important;
    color: white !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ========================================
   SMM — MEDIA DRAG ITEMS (GLOBAL)
   ======================================== */

.media-drag-item {
    background: var(--color-soft, #f8fafc) !important;
    border: 2px solid var(--color-border, #e5e7eb) !important;
    border-radius: var(--radius-md, 12px) !important;
    padding: 12px !important;
    transition: all 0.2s ease !important;
    position: relative !important;
}

.media-drag-item:hover {
    border-color: var(--color-primary, #667eea) !important;
    box-shadow: 0 4px 12px rgba(102,126,234,0.1) !important;
}

.media-drag-item.drag-over {
    border-color: var(--color-primary, #667eea) !important;
    background: linear-gradient(135deg, #f0f4ff 0%, #f8fafc 100%) !important;
    box-shadow: 0 0 0 3px rgba(102,126,234,0.18) !important;
    transform: scale(1.02) !important;
}

.drag-handle {
    cursor: grab !important;
    color: var(--color-muted, #6b7280) !important;
    font-size: 1.1rem !important;
    transition: color 0.15s !important;
    padding: 2px 4px !important;
}

.drag-handle:hover { color: var(--color-primary, #667eea) !important; }

/* "Основное" badge на медиа */
.media-primary-badge {
    background: var(--gradient-primary, linear-gradient(135deg, #667eea 0%, #764ba2 100%)) !important;
    color: white !important;
    font-size: 0.72rem !important;
    padding: 3px 10px !important;
    border-radius: 20px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    box-shadow: 0 2px 6px rgba(102,126,234,0.25) !important;
}

/* ========================================
   МУЗЫКАЛЬНАЯ СТРАНИЦА (MUSIC PAGE)
   ======================================== */

/* Контейнер музыкальной страницы */
.music-container {
    padding: 15px;
}

/* Welcome-card на музыкальной странице использует базовые стили из строк 1504-1554 */
/* Дополнительные настройки только для адаптивности - см. медиа-запросы ниже */

/* Навигация вкладок - более компактная */
/* Музыкальные вкладки используют общий стиль .nav-tabs выше */
/* Дополнительные настройки для музыкальных вкладок, если нужны */
.music-nav-tabs {
    margin-bottom: 25px;
}

/* Секции контента */
.tab-content-section {
    display: none;
}

.tab-content-section.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Заголовки секций в музыкальной странице */
.music-container h2,
.music-container h3 {
    color: var(--color-text);
    font-weight: 600;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--color-border);
    display: flex;
    align-items: center;
    gap: 10px;
}

.music-container h2 i,
.music-container h3 i {
    color: var(--color-primary);
}

/* Карточки плейлистов */
.playlists-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
    padding: 8px 0;
}

.playlist-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
    padding: 20px;
    margin-bottom: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.playlist-card:hover {
    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.15);
    transform: translateY(-2px);
    border-color: var(--color-primary);
}

.playlist-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 15px;
}

.playlist-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #8B5A9F 0%, #2D1B3D 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    flex-shrink: 0;
}

.playlist-menu-btn {
    background: none;
    border: none;
    color: #6c757d;
    cursor: pointer;
    padding: 5px;
    font-size: 18px;
}

.playlist-menu-btn:hover {
    color: #8B5A9F;
}

.playlist-name {
    font-weight: 600;
    font-size: 18px;
    color: #212529;
    margin-bottom: 8px;
}

.playlist-description {
    font-size: 14px;
    color: #6c757d;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.playlist-meta {
    display: flex;
    gap: 15px;
    font-size: 13px;
    color: #6c757d;
}

.playlist-meta-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.playlist-child-tag {
    display: inline-block;
    padding: 4px 10px;
    background: linear-gradient(135deg, rgba(139, 90, 159, 0.1) 0%, rgba(45, 27, 61, 0.1) 100%);
    color: #8B5A9F;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    margin-top: 8px;
}

/* Кнопка создания - как в dashboard */
.create-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
    margin-bottom: 20px;
    box-shadow: 0 3px 10px rgba(102, 126, 234, 0.25);
}

.create-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 18px rgba(102, 126, 234, 0.35);
    background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
}

.create-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.create-btn i {
    font-size: 14px;
}

/* Единый стиль для всех маленьких кнопок - ПРИОРИТЕТ! */
.playlist-card .rehab-btn-sm,
.folder-track-card .rehab-btn-sm,
.folder-track-actions .rehab-btn-sm,
.folder-track-actions .rehab-btn-icon {
    padding: 6px 10px !important;
    font-size: 11px !important;
    min-width: 36px !important;
    width: auto !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
}

.playlist-card .rehab-btn-sm i,
.folder-track-card .rehab-btn-sm i,
.folder-track-actions .rehab-btn-sm i,
.folder-track-actions .rehab-btn-icon i {
    font-size: 10px !important;
}

/* Папки (для музыкальной библиотеки/SMM) */
.folders-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
    padding: 8px 0;
}

.folder-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    border: 2px solid transparent;
    padding: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 15px;
    position: relative;
}

.folder-card:hover {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.folder-card.drag-over {
    border-color: #8B5A9F;
    background: rgba(139, 90, 159, 0.1);
    box-shadow: 0 6px 20px rgba(139, 90, 159, 0.3);
    transform: scale(1.02);
}

.folder-card.drag-over .folder-drop-hint {
    display: block !important;
}

.folder-drop-hint {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(139, 90, 159, 0.95);
    color: white;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    display: none;
    pointer-events: none;
    white-space: nowrap;
    z-index: 10;
}

/* Иконки папок только для folder-card (музыкальная библиотека) */
.folder-card .folder-icon {
    width: 55px;
    height: 55px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 26px;
    flex-shrink: 0;
}

.folder-info {
    flex: 1;
}

.folder-name {
    font-weight: 600;
    font-size: 16px;
    color: #212529;
    margin-bottom: 4px;
}

.folder-count {
    font-size: 13px;
    color: #6c757d;
}

.folder-actions {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    gap: 5px;
    opacity: 1;
    transition: opacity 0.2s ease;
    z-index: 10;
}

.folder-card:hover .folder-actions {
    opacity: 1;
}

.folder-actions .btn,
.folder-actions .rehab-btn {
    padding: 5px 10px;
    font-size: 12px;
}

/* Треки внутри папки */
.folder-tracks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

.folder-track-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
    padding: 16px;
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: all 0.2s ease;
}

.folder-track-main {
    display: flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
}

.folder-track-card:hover {
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.12);
    transform: translateY(-2px);
    border-color: var(--color-primary);
}

.folder-track-card.playing {
    border-color: var(--color-primary);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.2);
}

.folder-track-icon {
    width: 50px;
    height: 50px;
    background: var(--gradient-primary);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 22px;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.folder-track-icon.playing {
    animation: pulse-track 1.5s ease-in-out infinite;
    box-shadow: 0 0 20px rgba(102, 126, 234, 0.5);
}

@keyframes pulse-track {
    0%, 100% { 
        transform: scale(1);
        box-shadow: 0 0 20px rgba(102, 126, 234, 0.5);
    }
    50% { 
        transform: scale(1.05);
        box-shadow: 0 0 30px rgba(102, 126, 234, 0.7);
    }
}

.folder-track-info {
    flex: 1;
    min-width: 0;
}

.folder-track-title {
    font-weight: 600;
    font-size: 15px;
    color: #212529;
    margin-bottom: 4px;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.4;
}

.folder-track-artist {
    font-size: 13px;
    color: #6c757d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.folder-track-duration {
    font-size: 13px;
    color: #6c757d;
    flex-shrink: 0;
}

.folder-track-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
    padding-top: 12px;
    margin-top: 4px;
    border-top: 1px solid #e9ecef;
    justify-content: space-between;
    align-items: center;
}

/* Кнопка "Играть" по центру */
.folder-track-actions .rehab-btn-primary {
    order: 2;
    margin: 0 auto;
}

/* Кнопка "В плейлист" слева */
.folder-track-actions .rehab-btn-success,
.folder-track-actions .add-to-playlist-dropdown {
    order: 1;
}

/* Кнопка "Удалить" справа */
.folder-track-actions .rehab-btn-danger {
    order: 3;
}

/* Кнопка удаления - меньше */
.folder-track-actions .rehab-btn-danger,
.playlist-card .rehab-btn-danger {
    width: 32px !important;
    min-width: 32px !important;
    padding: 6px !important;
}

/* Dropdown для добавления в плейлист */
.add-to-playlist-dropdown {
    position: relative;
    display: inline-block;
}

.playlist-dropdown-menu {
    position: fixed;
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    min-width: 220px;
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
}

.playlist-dropdown-menu.show {
    display: block;
}

.playlist-dropdown-header {
    padding: 10px 15px;
    border-bottom: 1px solid #e9ecef;
    font-weight: 600;
    font-size: 13px;
    color: #212529;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.playlist-dropdown-item {
    padding: 10px 15px;
    cursor: pointer;
    transition: background 0.2s ease;
    border-bottom: 1px solid #f8f9fa;
    font-size: 13px;
}

.playlist-dropdown-item:last-child {
    border-bottom: none;
}

.playlist-dropdown-item:hover {
    background: #f8f9fa;
}

.playlist-dropdown-item i {
    margin-right: 8px;
    color: #8B5A9F;
    width: 16px;
}

.playlist-dropdown-empty {
    padding: 20px 15px;
    text-align: center;
    color: #6c757d;
    font-size: 13px;
}

.playlist-dropdown-empty i {
    display: block;
    font-size: 24px;
    margin-bottom: 8px;
    opacity: 0.5;
}

.playlist-dropdown-loading {
    padding: 20px 15px;
    text-align: center;
    color: #6c757d;
    font-size: 13px;
}

/* Empty state */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #6c757d;
}

.empty-state i {
    font-size: 48px;
    margin-bottom: 15px;
    opacity: 0.5;
}

.empty-state h4 {
    margin-bottom: 10px;
    color: #495057;
}

.empty-state p {
    margin-bottom: 0;
}

/* Модальное окно */
.modal-backdrop-custom {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1040;
    display: none;
}

.modal-backdrop-custom.show {
    display: block;
}

.modal-custom {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    z-index: 1050;
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    display: none;
}

.modal-custom.show {
    display: block;
}

.modal-header-custom {
    padding: 20px 25px;
    border-bottom: 1px solid #e9ecef;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header-custom h3 {
    margin: 0;
    font-size: 20px;
    color: #212529;
}

.modal-close-btn {
    background: none;
    border: none;
    font-size: 24px;
    color: #6c757d;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-close-btn:hover {
    color: #212529;
}

.modal-body-custom {
    padding: 25px;
}

.modal-footer-custom {
    padding: 15px 25px;
    border-top: 1px solid #e9ecef;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* Мини-плеер */
.mini-player {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, #8B5A9F 0%, #2D1B3D 100%);
    color: white;
    padding: 15px 20px;
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.2);
    z-index: 1070;
    display: none;
    animation: slideUp 0.3s ease;
}

.mini-player.active {
    display: flex !important;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.mini-player-content {
    display: flex;
    align-items: center;
    gap: 20px;
    max-width: 1400px;
    margin: 0 auto;
}

/* Контейнер для бегущей строки */
.mini-player-info {
    flex: 1;
    min-width: 0;
    position: relative;
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
}

.mini-player-title {
    font-weight: 600;
    font-size: 15px;
    white-space: nowrap;
    position: relative;
    display: inline-block;
    animation: marquee-scroll 20s linear infinite;
    padding-right: 50px;
}

/* Бегущая строка для длинных названий */
@keyframes marquee-scroll {
    0% {
        transform: translateX(0);
    }
    10% {
        transform: translateX(0);
    }
    90% {
        transform: translateX(calc(-100% + 200px));
    }
    100% {
        transform: translateX(calc(-100% + 200px));
    }
}

/* Останавливаем анимацию при наведении */
.mini-player-info:hover .mini-player-title {
    animation-play-state: paused;
}

.mini-player-artist {
    font-size: 13px;
    opacity: 0.9;
}

.mini-player-controls {
    display: flex;
    gap: 10px;
    align-items: center;
}

.mini-control-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.mini-control-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

.mini-control-btn.play-pause {
    width: 50px;
    height: 50px;
    background: white;
    color: #8B5A9F;
}

.mini-player-progress {
    flex: 1;
    max-width: 300px;
}

.mini-progress-bar {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    cursor: pointer;
    position: relative;
    transition: height 0.2s ease;
}

.mini-progress-bar:hover {
    height: 6px;
}

.mini-progress-fill {
    height: 100%;
    background: white;
    border-radius: 2px;
    width: 0%;
    transition: width 0.1s linear;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
}

.mini-player-time {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 5px;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    gap: 4px;
}

/* Пикер цветов */
.color-picker-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    margin-top: 10px;
}

.color-option {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 8px;
    cursor: pointer;
    border: 3px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    position: relative;
}

.color-option i {
    color: white;
    font-size: 18px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.color-option.selected {
    border-color: #212529;
    box-shadow: 0 0 0 2px white, 0 0 0 4px #212529;
}

.color-option.selected i {
    opacity: 1;
}

.color-option:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Пикер иконок */
.icon-picker-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 8px;
    margin-top: 10px;
}

.icon-option {
    aspect-ratio: 1;
    border: 2px solid #dee2e6;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: white;
    transition: all 0.2s ease;
}

.icon-option i {
    font-size: 20px;
    color: #6c757d;
    transition: color 0.2s ease;
}

/* Поиск музыки */
.search-box {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 12px 20px;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-lg) !important;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
    box-shadow: var(--shadow-sm) !important;
    transition: var(--transition-fast);
}

.search-box:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--color-primary);
}

.search-box i.fa-search {
    color: var(--color-muted) !important;
    font-size: 18px;
    margin-right: 12px;
    flex-shrink: 0;
}

.search-box input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent !important;
    color: var(--color-text) !important;
    font-size: 15px;
    padding: 0;
    font-weight: 500;
}

.search-box input::placeholder {
    color: var(--color-muted) !important;
    font-weight: 400;
}

.search-box input:focus {
    outline: none;
}

.search-clear-btn {
    background: var(--color-border);
    border: none;
    color: var(--color-muted);
    cursor: pointer;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
    margin-left: 8px;
    flex-shrink: 0;
}

.search-clear-btn:hover {
    background: var(--color-muted);
    color: white;
    transform: scale(1.05);
}

.icon-option.selected {
    border-color: #8B5A9F;
    background: linear-gradient(135deg, rgba(139, 90, 159, 0.1) 0%, rgba(45, 27, 61, 0.1) 100%);
}

.icon-option.selected i {
    color: #8B5A9F;
}

.icon-option:hover {
    border-color: #8B5A9F;
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(139, 90, 159, 0.2);
}

.icon-option:hover i {
    color: #8B5A9F;
}

/* Анимация подсветки трека */
@keyframes highlight {
    0%, 100% {
        background-color: transparent;
    }
    50% {
        background-color: rgba(139, 90, 159, 0.2);
    }
}

/* Drop Zone для загрузки */
.upload-type-selector {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.upload-type-btn {
    flex: 1;
    padding: 12px 20px;
    transition: all 0.3s ease;
    opacity: 0.6;
}

.upload-type-btn.active {
    opacity: 1;
    background: var(--color-primary) !important;
    color: white !important;
    border-color: var(--color-primary) !important;
}

.upload-type-btn:hover {
    opacity: 1;
}

.drop-zone {
    border: 3px dashed #dee2e6;
    border-radius: 12px;
    padding: 40px 20px;
    text-align: center;
    transition: all 0.3s ease;
    background: #f8f9fa;
    cursor: pointer;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.drop-zone:hover {
    border-color: #8B5A9F;
    background: rgba(139, 90, 159, 0.05);
}

.drop-zone.drag-over {
    border-color: #8B5A9F;
    background: rgba(139, 90, 159, 0.15);
    border-width: 4px;
    border-style: solid;
    transform: scale(1.02);
}

/* Список выбора папок */
.folders-selection-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 400px;
    overflow-y: auto;
}

.folder-selection-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: white;
    border: 2px solid #e9ecef;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.folder-selection-item:hover {
    border-color: #8B5A9F;
    background: rgba(139, 90, 159, 0.05);
    transform: translateX(5px);
}

.folder-selection-icon {
    width: 45px;
    height: 45px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 22px;
    flex-shrink: 0;
}

.folder-selection-info {
    flex: 1;
}

.folder-selection-name {
    font-weight: 600;
    font-size: 16px;
    color: #2D1B3D;
    margin-bottom: 2px;
}

.folder-selection-count {
    font-size: 13px;
    color: #6c757d;
}

.drop-zone i {
    color: #8B5A9F;
    margin-bottom: 15px;
}

.drop-zone p {
    margin: 5px 0;
}

.drop-zone strong {
    color: #8B5A9F;
    font-size: 18px;
}

#selectedFilesList {
    max-height: 200px;
    overflow-y: auto;
    margin-top: 15px;
}

/* Стили для элементов списка файлов в музыкальном плеере */
#selectedFilesList .file-item,
.modal-body .file-item {
    padding: 10px 12px;
    background: #f8f9fa;
    border-radius: 6px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    border: 1px solid #e9ecef;
    transition: all 0.2s ease;
}

#selectedFilesList .file-item:hover,
.modal-body .file-item:hover {
    background: #e9ecef;
    border-color: #8B5A9F;
}

#selectedFilesList .file-item i.fa-music,
.modal-body .file-item i.fa-music {
    color: #8B5A9F;
    margin-right: 10px;
}

.file-item-remove {
    background: none;
    border: none;
    color: #dc3545;
    cursor: pointer;
    padding: 5px;
    font-size: 18px;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.file-item-remove:hover {
    color: #a71d2a;
}

/* Loading */
.loading-state {
    text-align: center;
    padding: 40px;
    color: #6c757d;
}

/* Офлайн функционал */
.offline-download-btn {
    position: relative;
    padding: 4px 8px !important;
    font-size: 11px !important;
    min-width: 32px !important;
    height: 32px !important;
}

.offline-download-btn i {
    font-size: 11px !important;
}

.offline-status-icon {
    position: absolute;
    top: -5px;
    right: -5px;
    font-size: 12px;
    background: white;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.offline-download-btn.offline-cached {
    background: #28a745 !important;
    border-color: #28a745 !important;
}

.offline-download-btn.offline-downloading {
    background: #ffc107 !important;
    border-color: #ffc107 !important;
    pointer-events: none;
}

.offline-progress {
    padding: 10px;
    background: #f8f9fa;
    border-radius: 8px;
}

.offline-progress .progress {
    margin-bottom: 5px;
}

/* iOS Safe Area для iPhone с notch/Dynamic Island */
@supports (padding: max(0px)) {
    .music-container {
        padding-left: max(20px, env(safe-area-inset-left));
        padding-right: max(20px, env(safe-area-inset-right));
        padding-bottom: max(20px, env(safe-area-inset-bottom));
    }
    
    .mini-player {
        padding-bottom: max(15px, env(safe-area-inset-bottom));
    }
    
    .floating-buttons-container {
        bottom: max(20px, calc(20px + env(safe-area-inset-bottom)));
        right: max(20px, env(safe-area-inset-right));
    }
}

/* Адаптивность для музыкальной страницы */
@media (max-width: 768px) {
    .music-container {
        padding: 10px;
    }
    
    .playlists-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .folders-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .music-nav-tabs {
        overflow-x: auto;
        gap: 5px;
        margin-bottom: 20px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    
    .music-nav-tabs::-webkit-scrollbar {
        display: none;
    }
    
    .music-nav-tab {
        padding: 10px 16px;
        font-size: 14px;
        white-space: nowrap;
    }
    
    .music-nav-tab i {
        margin-right: 5px;
    }
    
    .playlist-card {
        padding: 15px;
    }
    
    .playlist-icon {
        width: 45px;
        height: 45px;
        font-size: 20px;
    }
    
    .playlist-name {
        font-size: 16px;
    }
    
    .playlist-description {
        font-size: 13px;
    }
    
    .playlist-meta {
        font-size: 12px;
        gap: 12px;
    }
    
    /* Единый стиль кнопок на мобильных */
    .playlist-card .rehab-btn-sm,
    .folder-track-actions .rehab-btn-sm,
    .folder-track-actions .rehab-btn-icon {
        padding: 6px 8px;
        font-size: 11px;
        min-width: 36px;
        height: 34px;
    }
    
    .playlist-card .rehab-btn-sm i,
    .folder-track-actions .rehab-btn-sm i,
    .folder-track-actions .rehab-btn-icon i {
        font-size: 11px;
    }
    
    /* Офлайн-кнопка на мобильных */
    .offline-status-icon {
        font-size: 10px;
        width: 16px;
        height: 16px;
        top: -4px;
        right: -4px;
    }
    
    /* Плавающие кнопки на мобильных */
    .floating-buttons-container {
        bottom: 10px;
        right: 10px;
    }
    
    .floating-btn {
        width: 45px;
        height: 45px;
    }
    
    .folder-card {
        padding: 15px;
    }
    
    .folder-card .folder-icon {
        width: 45px;
        height: 45px;
        font-size: 22px;
    }
    
    .folder-name {
        font-size: 15px;
    }
    
    /* Карточки треков на мобильных */
    .folder-track-card {
        padding: 12px;
    }
    
    .folder-track-main {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .folder-track-info {
        width: 100%;
    }
    
    .folder-track-title {
        font-size: 14px;
    }
    
    .folder-track-artist {
        font-size: 12px;
    }
    
    .folder-track-duration {
        align-self: flex-start;
    }
    
    .folder-track-actions {
        width: 100%;
        justify-content: center;
        padding-top: 10px;
        gap: 12px;
    }
    
    .folder-track-actions .rehab-btn-sm {
        max-width: 100px;
    }
    
    .folder-track-actions .rehab-btn-icon {
        width: 50px;
        height: 40px;
    }
    
    .create-btn {
        width: 100%;
        justify-content: center;
        padding: 12px 20px;
    }
    
    .mini-player {
        padding: 12px 15px;
    }
    
    .mini-player-content {
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .mini-player-info {
        width: 100%;
        margin-bottom: 8px;
    }
    
    .mini-player-title {
        font-size: 14px;
    }
    
    .mini-player-artist {
        font-size: 12px;
    }
    
    .mini-player-controls {
        gap: 8px;
    }
    
    .mini-control-btn {
        width: 36px;
        height: 36px;
    }
    
    .mini-control-btn.play-pause {
        width: 46px;
        height: 46px;
    }
    
    .mini-player-progress {
        order: -1;
        max-width: 100%;
        width: 100%;
        margin-bottom: 10px;
    }
    
    .mini-player-time {
        font-size: 10px;
    }
    
    .modal-custom {
        width: 95%;
        max-width: 95%;
    }
    
    .modal-header-custom {
        padding: 15px 20px;
    }
    
    .modal-header-custom h3 {
        font-size: 18px;
    }
    
    .modal-body-custom {
        padding: 20px;
    }
    
    .modal-footer-custom {
        padding: 12px 20px;
    }
    
    /* Touch-friendly кнопки */
    .playlist-card-header button,
    .track-action-btn {
        min-width: 44px;
        min-height: 44px;
    }
    
    /* Smooth scrolling для мобильных */
    .playlists-grid,
    .folders-grid {
        -webkit-overflow-scrolling: touch;
    }
    
    /* Офлайн кнопки на мобильных - такого же размера как остальные */
    .offline-download-btn {
        padding: 4px 8px !important;
        font-size: 11px !important;
        min-width: 32px !important;
        height: 32px !important;
    }
    
    .offline-download-btn i {
        font-size: 11px !important;
    }
    
    /* Пикеры на мобильных */
    .color-picker-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
    }
    
    .icon-picker-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 6px;
    }
    
    .icon-option i {
        font-size: 18px;
    }
}

/* Очень маленькие экраны */
@media (max-width: 480px) {
    .page-title {
        font-size: 20px;
    }
    
    .playlist-card {
        padding: 12px;
    }
    
    .playlist-card .rehab-btn-sm {
        font-size: 11px;
        padding: 6px 10px;
    }
    
    .playlist-card .rehab-btn-sm i {
        font-size: 12px;
    }
    
    /* Кнопки в ряд на маленьких экранах */
    .playlist-card > div[style*="display: flex"] {
        gap: 5px !important;
    }
    
    /* Офлайн-иконка еще меньше */
    .offline-status-icon {
        font-size: 9px;
        width: 14px;
        height: 14px;
    }
    
    /* Бадж офлайн для треков */
    .badge.bg-success {
        font-size: 10px;
        padding: 2px 6px;
    }
    
    /* Progress bar для загрузки на мобильных */
    .offline-progress {
        padding: 8px;
        margin-top: 8px !important;
    }
    
    .offline-progress .progress {
        height: 18px;
    }
    
    .offline-progress small {
        font-size: 11px;
    }
    
    .playlist-meta {
        flex-direction: column;
        gap: 5px;
        align-items: flex-start;
    }
    
    /* Кнопки навигации компактнее */
    .music-nav-tab {
        padding: 8px 12px;
        font-size: 13px;
    }
    
    /* Карточки треков еще компактнее */
    .folder-track-card {
        padding: 10px;
    }
    
    .folder-track-title {
        font-size: 13px;
    }
    
    .folder-track-artist {
        font-size: 11px;
    }
    
    /* Кнопка удаления на мобильных */
    .folder-track-actions .rehab-btn-danger,
    .playlist-card .rehab-btn-danger {
        width: 32px !important;
        min-width: 32px !important;
        height: 32px !important;
    }
    
    /* Модальные окна на весь экран */
    .modal-custom {
        width: 95%;
        max-width: 95%;
        margin: 10px;
    }
    
    /* Drop zone компактнее */
    .drop-zone {
        padding: 20px 10px;
    }
    
    .drop-zone i {
        font-size: 2rem;
    }
    
    .drop-zone p {
        font-size: 13px;
    }
    
    .empty-state {
        padding: 40px 15px;
    }
    
    .empty-state i {
        font-size: 36px;
    }
    
    .empty-state h4 {
        font-size: 16px;
    }
    
    .empty-state p {
        font-size: 13px;
    }
}

/* ========================================
   PAGE HEADER (Заголовки страниц из макроса)
   ======================================== */

/* Основные переменные для page-header (дополнение к существующим) */
:root {
    --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --card-shadow-hover: 0 15px 50px rgba(31, 38, 135, 0.15);
    --border-radius: 20px;
    --transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Единообразные заголовки страниц в стиле Dashboard */
.page-header-wrapper {
    margin: 0 0 8px 0;
    position: relative;
}

.page-header {
    background: var(--primary-gradient);
    color: white;
    padding: 25px 30px;
    border-radius: var(--border-radius);
    position: relative;
    overflow: visible;
    box-shadow: var(--card-shadow-hover);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: var(--transition);
    z-index: 20;
}

/* Анимационный слой - базовый для всех */
.header-animation-layer {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.6s ease;
    z-index: 0;
    overflow: hidden;
    border-radius: var(--border-radius);
    clip-path: inset(0 round var(--border-radius));
}

/* Активация анимации */
.page-header.loaded .header-animation-layer {
    opacity: 1;
}

/* Искры/блестки */
.header-sparkles {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
    border-radius: var(--border-radius);
    clip-path: inset(0 round var(--border-radius));
}

/* Анимация 1: Плавающий градиент */
.page-header[data-animation="float"] .header-animation-layer {
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translate(-20px, -20px) rotate(0deg); }
    50% { transform: translate(20px, 20px) rotate(180deg); }
}

/* Анимация 2: Волны */
.page-header[data-animation="wave"] .header-animation-layer {
    background: linear-gradient(45deg, rgba(255,255,255,0.1) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.1) 75%, transparent 75%);
    background-size: 40px 40px;
    animation: wave 3s linear infinite;
}

@keyframes wave {
    0% { background-position: 0 0; }
    100% { background-position: 40px 40px; }
}

/* Анимация 3: Пульсация */
.page-header[data-animation="pulse"] .header-animation-layer {
    background: radial-gradient(circle, rgba(255,255,255,0.2) 20%, transparent 70%);
    animation: pulse-header 4s ease-in-out infinite;
}

@keyframes pulse-header {
    0%, 100% { transform: scale(0.8); opacity: 0.3; }
    50% { transform: scale(1.2); opacity: 0.7; }
}

/* Анимация 4: Спираль */
.page-header[data-animation="spiral"] .header-animation-layer {
    background: conic-gradient(from 0deg, transparent, rgba(255,255,255,0.15), transparent);
    animation: spiral 8s linear infinite;
}

@keyframes spiral {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Анимация 5: Мерцание звезд */
.page-header[data-animation="stars"] .header-sparkles::before,
.page-header[data-animation="stars"] .header-sparkles::after {
    content: '✦';
    position: absolute;
    color: rgba(255,255,255,0.6);
    font-size: 20px;
    animation: sparkle-header 2s ease-in-out infinite;
}

.page-header[data-animation="stars"] .header-sparkles::before {
    top: 20%;
    left: 20%;
    animation-delay: 0s;
}

.page-header[data-animation="stars"] .header-sparkles::after {
    top: 70%;
    right: 30%;
    animation-delay: 1s;
    font-size: 16px;
}

@keyframes sparkle-header {
    0%, 100% { opacity: 0; transform: scale(0.5); }
    50% { opacity: 1; transform: scale(1); }
}

/* Анимация 6: Геометрические фигуры */
.page-header[data-animation="geometry"] .header-animation-layer {
    background-image: 
        radial-gradient(circle at 20% 20%, rgba(255,255,255,0.1) 2px, transparent 2px),
        radial-gradient(circle at 80% 80%, rgba(255,255,255,0.1) 1px, transparent 1px),
        radial-gradient(circle at 60% 30%, rgba(255,255,255,0.05) 3px, transparent 3px);
    background-size: 60px 60px, 40px 40px, 80px 80px;
    animation: geometry-header 10s linear infinite;
}

@keyframes geometry-header {
    0% { background-position: 0 0, 0 0, 0 0; }
    100% { background-position: 60px 60px, -40px 40px, 80px -80px; }
}

/* Анимация 7: Цветные шарики */
.page-header[data-animation="bubbles"] .header-sparkles::before,
.page-header[data-animation="bubbles"] .header-sparkles::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    animation: bubbleFloat-header 6s ease-in-out infinite;
}

.page-header[data-animation="bubbles"] .header-sparkles::before {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    top: 10%;
    left: 15%;
    opacity: 0.3;
    animation-delay: 0s;
}

.page-header[data-animation="bubbles"] .header-sparkles::after {
    width: 25px;
    height: 25px;
    background: linear-gradient(135deg, #f093fb, #f5576c);
    top: 60%;
    right: 20%;
    opacity: 0.4;
    animation-delay: 2s;
}

/* Дополнительные шарики через псевдо-элементы */
.page-header[data-animation="bubbles"] .header-animation-layer::before,
.page-header[data-animation="bubbles"] .header-animation-layer::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    animation: bubbleFloat-header 8s ease-in-out infinite;
}

.page-header[data-animation="bubbles"] .header-animation-layer::before {
    width: 30px;
    height: 30px;
    background: linear-gradient(135deg, #4facfe, #00f2fe);
    top: 70%;
    left: 70%;
    opacity: 0.35;
    animation-delay: 1s;
}

.page-header[data-animation="bubbles"] .header-animation-layer::after {
    width: 15px;
    height: 15px;
    background: linear-gradient(135deg, #fa709a, #fee140);
    top: 30%;
    right: 40%;
    opacity: 0.5;
    animation-delay: 3s;
}

@keyframes bubbleFloat-header {
    0%, 100% { 
        transform: translateY(0px) scale(1);
        opacity: 0.3;
    }
    25% { 
        transform: translateY(-15px) scale(1.1);
        opacity: 0.6;
    }
    50% { 
        transform: translateY(-5px) scale(0.9);
        opacity: 0.4;
    }
    75% { 
        transform: translateY(-20px) scale(1.05);
        opacity: 0.7;
    }
}

/* Анимация 8: Конфетти */
.page-header[data-animation="confetti"] .header-sparkles::before,
.page-header[data-animation="confetti"] .header-sparkles::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 20px;
    border-radius: 2px;
    animation: confettiFall-header 4s linear infinite;
}

.page-header[data-animation="confetti"] .header-sparkles::before {
    background: linear-gradient(45deg, #667eea, #764ba2);
    top: -20px;
    left: 20%;
    animation-delay: 0s;
}

.page-header[data-animation="confetti"] .header-sparkles::after {
    background: linear-gradient(45deg, #f093fb, #f5576c);
    top: -20px;
    right: 30%;
    animation-delay: 2s;
    width: 6px;
    height: 15px;
}

.page-header[data-animation="confetti"] .header-animation-layer::before,
.page-header[data-animation="confetti"] .header-animation-layer::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    animation: confettiFall-header 3s linear infinite;
}

.page-header[data-animation="confetti"] .header-animation-layer::before {
    background: linear-gradient(135deg, #4facfe, #00f2fe);
    top: -15px;
    left: 60%;
    animation-delay: 1s;
}

.page-header[data-animation="confetti"] .header-animation-layer::after {
    background: linear-gradient(135deg, #fa709a, #fee140);
    top: -15px;
    right: 15%;
    animation-delay: 3s;
    width: 12px;
    height: 12px;
}

@keyframes confettiFall-header {
    0% { 
        transform: translateY(-20px) rotate(0deg);
        opacity: 1;
    }
    100% { 
        transform: translateY(120px) rotate(360deg);
        opacity: 0;
    }
}

/* Анимация 9: Радужные волны */
.page-header[data-animation="rainbow"] .header-animation-layer {
    background: linear-gradient(45deg, 
        rgba(102, 126, 234, 0.1) 0%, 
        rgba(240, 147, 251, 0.1) 16.66%, 
        rgba(79, 172, 254, 0.1) 33.33%, 
        rgba(0, 242, 254, 0.1) 50%, 
        rgba(247, 112, 154, 0.1) 66.66%, 
        rgba(254, 225, 64, 0.1) 83.33%, 
        rgba(102, 126, 234, 0.1) 100%);
    background-size: 400% 400%;
    animation: rainbowWave-header 8s ease-in-out infinite;
}

@keyframes rainbowWave-header {
    0%, 100% { background-position: 0% 50%; }
    25% { background-position: 100% 50%; }
    50% { background-position: 100% 100%; }
    75% { background-position: 0% 100%; }
}

/* Анимация 10: Цветные круги */
.page-header[data-animation="circles"] .header-sparkles {
    background-image: 
        radial-gradient(circle at 15% 25%, rgba(102, 126, 234, 0.2) 20px, transparent 20px),
        radial-gradient(circle at 85% 15%, rgba(240, 147, 251, 0.2) 15px, transparent 15px),
        radial-gradient(circle at 25% 75%, rgba(79, 172, 254, 0.2) 25px, transparent 25px),
        radial-gradient(circle at 75% 85%, rgba(247, 112, 154, 0.2) 18px, transparent 18px),
        radial-gradient(circle at 55% 45%, rgba(254, 225, 64, 0.2) 12px, transparent 12px);
    animation: circlesPulse-header 6s ease-in-out infinite;
}

@keyframes circlesPulse-header {
    0%, 100% { 
        transform: scale(1);
        opacity: 0.6;
    }
    25% { 
        transform: scale(1.1);
        opacity: 0.8;
    }
    50% { 
        transform: scale(0.9);
        opacity: 0.4;
    }
    75% { 
        transform: scale(1.05);
        opacity: 0.7;
    }
}

.page-header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 2;
}

.page-header-main {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1;
}

.page-header-icon {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px rgba(255, 255, 255, 0.1);
    transition: var(--transition);
}

.page-header-icon:hover {
    transform: scale(1.1) rotate(5deg);
    background: rgba(255, 255, 255, 0.25);
}

.page-header-text {
    flex: 1;
}

.page-header-title {
    font-size: 2.2rem;
    font-weight: 600;
    margin: 0;
    text-shadow: 0 2px 10px rgba(0,0,0,0.1);
    background: linear-gradient(45deg, #ffffff, #f0f0f0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}

.page-header-subtitle {
    font-size: 1.1rem;
    margin: 8px 0 0 0;
    opacity: 0.95;
    font-weight: 500;
    text-shadow: 0 1px 3px rgba(0,0,0,0.1);
    color: rgba(255, 255, 255, 0.9);
}

.page-header-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

/* Гарантируем, что выпадающие меню отображаются поверх карточек ниже */
.page-header-actions .dropdown-menu {
    z-index: 2000;
}

/* Единый стиль для ВСЕХ кнопок в шапке страницы */
.page-header-actions .btn,
.page-header-actions .btn.btn-primary,
.page-header-actions .btn.btn-success,
.page-header-actions .btn.btn-danger,
.page-header-actions .btn.btn-warning,
.page-header-actions .btn.btn-info,
.page-header-actions .btn.btn-secondary,
.page-header-actions button.btn-primary,
.page-header-actions button.btn-success,
.page-header-actions button.btn-danger,
.page-header-actions button.btn-warning,
.page-header-actions button.btn-info,
.page-header-actions button.btn-secondary,
.page-header-actions a.btn-primary,
.page-header-actions a.btn-success,
.page-header-actions a.btn-danger,
.page-header-actions a.btn-warning,
.page-header-actions a.btn-info,
.page-header-actions a.btn-secondary {
    cursor: pointer !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: white !important;
    padding: 12px 20px !important;
    border-radius: 12px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: var(--transition) !important;
    backdrop-filter: blur(10px) !important;
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1) !important;
    outline: 0 !important;
}

.page-header-actions .btn:hover,
.page-header-actions .btn.btn-primary:hover,
.page-header-actions .btn.btn-success:hover,
.page-header-actions .btn.btn-danger:hover,
.page-header-actions .btn.btn-warning:hover,
.page-header-actions .btn.btn-info:hover,
.page-header-actions .btn.btn-secondary:hover,
.page-header-actions button.btn-primary:hover,
.page-header-actions button.btn-success:hover,
.page-header-actions button.btn-danger:hover,
.page-header-actions button.btn-warning:hover,
.page-header-actions button.btn-info:hover,
.page-header-actions button.btn-secondary:hover,
.page-header-actions a.btn-primary:hover,
.page-header-actions a.btn-success:hover,
.page-header-actions a.btn-danger:hover,
.page-header-actions a.btn-warning:hover,
.page-header-actions a.btn-info:hover,
.page-header-actions a.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    color: white !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.2) !important;
}

.page-header-actions .btn i {
    font-size: 14px;
}

/* Более компактные кнопки-дропдауны в шапке (Заметки, Задачи) */
.page-header-actions .dropdown > .btn,
.page-header-actions .dropdown > a.btn {
    padding: 10px 16px !important;
    font-size: 0.95rem !important;
    min-width: auto !important;
    white-space: nowrap !important;
}

/* Все кнопки в шапке используют единый стиль (определен выше в .page-header-actions .btn) */

.page-header-actions .btn-primary i,
.page-header-actions .btn-success i,
.page-header-actions .btn-danger i,
.page-header-actions .btn-warning i,
.page-header-actions .btn-info i,
.page-header-actions .btn-secondary i {
    font-size: 14px !important;
}

/* Компактные заголовки в стиле Dashboard */
.page-header-compact {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 1px solid rgba(102, 126, 234, 0.1);
    border-left: 4px solid #667eea;
    border-radius: 16px;
    padding: 16px 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    position: relative;
    overflow: hidden;
    transition: var(--transition);
}

.page-header-compact::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(102, 126, 234, 0.03));
    pointer-events: none;
    border-radius: 0 16px 16px 0;
}

.page-header-compact-icon {
    width: 45px;
    height: 45px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.page-header-compact-title {
    font-size: 1.6rem;
    font-weight: 600;
    margin: 0;
    color: #2d3748;
    line-height: 1.3;
}

.page-header-compact-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.page-header-compact-actions .btn {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: 1px solid rgba(102, 126, 234, 0.2);
    padding: 8px 16px;
    border-radius: 10px;
    font-weight: 500;
    font-size: 0.85rem;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 3px 12px rgba(102, 126, 234, 0.2);
}

.page-header-compact-actions .btn:hover {
    background: linear-gradient(135deg, #5a67d8, #6b46c1);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 5px 18px rgba(102, 126, 234, 0.3);
    border-color: rgba(102, 126, 234, 0.3);
}

/* Переопределение для всех типов кнопок в page-header-compact-actions */
.page-header-compact-actions .btn-primary,
.page-header-compact-actions .btn-success,
.page-header-compact-actions .btn-danger,
.page-header-compact-actions .btn-warning,
.page-header-compact-actions .btn-info,
.page-header-compact-actions .btn-secondary {
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
    color: white !important;
    border: 1px solid rgba(102, 126, 234, 0.2) !important;
    padding: 8px 16px !important;
    border-radius: 10px !important;
    font-weight: 500 !important;
    font-size: 0.85rem !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 3px 12px rgba(102, 126, 234, 0.2) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.page-header-compact-actions .btn-primary:hover,
.page-header-compact-actions .btn-success:hover,
.page-header-compact-actions .btn-danger:hover,
.page-header-compact-actions .btn-warning:hover,
.page-header-compact-actions .btn-info:hover,
.page-header-compact-actions .btn-secondary:hover {
    background: linear-gradient(135deg, #5a67d8, #6b46c1) !important;
    color: white !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 5px 18px rgba(102, 126, 234, 0.3) !important;
    border-color: rgba(102, 126, 234, 0.3) !important;
}

.page-header-compact-actions .btn i {
    margin-right: 5px;
    font-size: 0.9em;
}

/* Анимации для компактного заголовка */
.header-animation-layer-compact {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.page-header-compact.loaded .header-animation-layer-compact {
    opacity: 1;
}

/* Адаптация анимаций для компактного заголовка */
.page-header-compact[data-animation="float"] .header-animation-layer-compact {
    background: radial-gradient(circle, rgba(102, 126, 234, 0.05) 0%, transparent 70%);
    animation: float 6s ease-in-out infinite;
}

.page-header-compact[data-animation="wave"] .header-animation-layer-compact {
    background: linear-gradient(45deg, rgba(102, 126, 234, 0.05) 25%, transparent 25%, transparent 50%, rgba(102, 126, 234, 0.05) 50%, rgba(102, 126, 234, 0.05) 75%, transparent 75%);
    background-size: 30px 30px;
    animation: wave 4s linear infinite;
}

.page-header-compact[data-animation="pulse"] .header-animation-layer-compact {
    background: radial-gradient(circle, rgba(102, 126, 234, 0.08) 20%, transparent 70%);
    animation: pulse-header 3s ease-in-out infinite;
}

.page-header-compact[data-animation="spiral"] .header-animation-layer-compact {
    background: conic-gradient(from 0deg, transparent, rgba(102, 126, 234, 0.06), transparent);
    animation: spiral 10s linear infinite;
}

.page-header-compact[data-animation="stars"] .header-animation-layer-compact::before,
.page-header-compact[data-animation="stars"] .header-animation-layer-compact::after {
    content: '✦';
    position: absolute;
    color: rgba(102, 126, 234, 0.3);
    font-size: 12px;
    animation: sparkle-header 3s ease-in-out infinite;
}

.page-header-compact[data-animation="stars"] .header-animation-layer-compact::before {
    top: 30%;
    left: 85%;
    animation-delay: 0s;
}

.page-header-compact[data-animation="stars"] .header-animation-layer-compact::after {
    top: 70%;
    right: 20%;
    animation-delay: 1.5s;
    font-size: 10px;
}

.page-header-compact[data-animation="geometry"] .header-animation-layer-compact {
    background-image: 
        radial-gradient(circle at 80% 20%, rgba(102, 126, 234, 0.04) 1px, transparent 1px),
        radial-gradient(circle at 20% 80%, rgba(102, 126, 234, 0.04) 0.5px, transparent 0.5px);
    background-size: 40px 40px, 25px 25px;
    animation: geometry-header 8s linear infinite;
}

/* Цветные анимации для компактного заголовка */
.page-header-compact[data-animation="bubbles"] .header-animation-layer-compact::before,
.page-header-compact[data-animation="bubbles"] .header-animation-layer-compact::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    animation: bubbleFloat-header 5s ease-in-out infinite;
}

.page-header-compact[data-animation="bubbles"] .header-animation-layer-compact::before {
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    top: 20%;
    right: 15%;
    opacity: 0.2;
    animation-delay: 0s;
}

.page-header-compact[data-animation="bubbles"] .header-animation-layer-compact::after {
    width: 12px;
    height: 12px;
    background: linear-gradient(135deg, #f093fb, #f5576c);
    top: 70%;
    right: 60%;
    opacity: 0.3;
    animation-delay: 2s;
}

.page-header-compact[data-animation="confetti"] .header-animation-layer-compact::before,
.page-header-compact[data-animation="confetti"] .header-animation-layer-compact::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 10px;
    border-radius: 1px;
    animation: confettiFall-header 3s linear infinite;
}

.page-header-compact[data-animation="confetti"] .header-animation-layer-compact::before {
    background: linear-gradient(45deg, #4facfe, #00f2fe);
    top: -10px;
    right: 20%;
    animation-delay: 0s;
}

.page-header-compact[data-animation="confetti"] .header-animation-layer-compact::after {
    background: linear-gradient(45deg, #fa709a, #fee140);
    top: -10px;
    right: 50%;
    animation-delay: 1.5s;
    width: 3px;
    height: 8px;
}

.page-header-compact[data-animation="rainbow"] .header-animation-layer-compact {
    background: linear-gradient(45deg, 
        rgba(102, 126, 234, 0.05) 0%, 
        rgba(240, 147, 251, 0.05) 25%, 
        rgba(79, 172, 254, 0.05) 50%, 
        rgba(247, 112, 154, 0.05) 75%, 
        rgba(102, 126, 234, 0.05) 100%);
    background-size: 300% 300%;
    animation: rainbowWave-header 6s ease-in-out infinite;
}

.page-header-compact[data-animation="circles"] .header-animation-layer-compact {
    background-image: 
        radial-gradient(circle at 85% 30%, rgba(102, 126, 234, 0.1) 8px, transparent 8px),
        radial-gradient(circle at 75% 70%, rgba(240, 147, 251, 0.1) 6px, transparent 6px),
        radial-gradient(circle at 95% 50%, rgba(79, 172, 254, 0.1) 5px, transparent 5px);
    animation: circlesPulse-header 4s ease-in-out infinite;
}

/* Адаптивность для page-header */
@media (max-width: 768px) {
    .page-header {
        padding: 20px;
    }
    
    .page-header-content {
        flex-direction: column;
        gap: 20px;
        align-items: flex-start;
    }
    
    .page-header-main {
        width: 100%;
        gap: 15px;
    }
    
    .page-header-icon {
        width: 50px;
        height: 50px;
        font-size: 20px;
        border-radius: 14px;
    }
    
    .page-header-title {
        font-size: 1.6rem;
    }
    
    .page-header-actions {
        width: 100%;
        justify-content: flex-start;
    }
    
    .page-header-actions .btn {
        padding: 8px 14px;
        font-size: 0.85rem;
        border-radius: 10px;
    }
    
    .page-header-actions .dropdown > .btn,
    .page-header-actions .dropdown > a.btn {
        padding: 8px 12px !important;
        font-size: 0.85rem !important;
    }
    
    .page-header-compact {
        border-radius: 14px;
        padding: 18px 20px;
    }
    
    .page-header-compact .d-flex {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    
    .page-header-compact-title {
        font-size: 1.4rem;
    }
    
    .page-header-compact-actions {
        justify-content: center;
    }
    
    .page-header-compact-icon {
        border-radius: 10px;
    }
}

@media (max-width: 480px) {
    .page-header {
        padding: 16px;
    }
    
    .page-header-main {
        gap: 12px;
    }
    
    .page-header-icon {
        width: 45px;
        height: 45px;
        font-size: 18px;
        border-radius: 12px;
    }
    
    .page-header-title {
        font-size: 1.4rem;
    }
    
    .page-header-actions .btn {
        padding: 6px 12px;
        font-size: 0.8rem;
    }
    
    .page-header-actions .dropdown > .btn,
    .page-header-actions .dropdown > a.btn {
        padding: 6px 10px !important;
        font-size: 0.8rem !important;
    }
    
    .page-header-compact {
        border-radius: 12px;
        padding: 15px 18px;
    }
    
    .page-header-compact-icon {
        width: 40px;
        height: 40px;
        font-size: 16px;
        border-radius: 10px;
    }
    
    .page-header-compact-title {
        font-size: 1.3rem;
    }
    
    .page-header-compact-actions .btn {
        padding: 7px 12px;
        font-size: 0.8rem;
        border-radius: 8px;
    }
}

/* ========================================
   ГРАФИК РАБОТЫ АДМИНИСТРАТОРОВ
   ======================================== */

/* Вкладки переключения режимов отображения */
.schedule-wrapper + .nav-tabs,
#scheduleView1 .nav-tabs,
#scheduleView2 .nav-tabs {
    margin-bottom: var(--space-5);
}

/* Обертка таблицы расписания с горизонтальной прокруткой */
.schedule-wrapper {
    overflow-x: auto;
    width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    background: var(--color-surface);
    position: relative;
}

/* Основная таблица расписания */
.schedule-table {
    table-layout: auto;
    width: max-content;
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    white-space: nowrap;
}

/* Базовые стили ячеек таблицы */
.schedule-table th,
.schedule-table td {
    min-width: 80px;
    max-width: 120px;
    width: 100px;
    padding: var(--space-2) var(--space-1);
    text-align: center;
    font-size: var(--font-size-xs);
    border: 1px solid var(--color-border);
    background: var(--color-soft);
    height: 35px;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: var(--transition-fast);
}

/* Закрепленные колонки (имена админов и филиалов) */
.schedule-table th.sticky-col,
.schedule-table td.sticky-col,
.admin-name.sticky-col,
.branch-name.sticky-col {
    position: sticky;
    left: 0;
    background: var(--gradient-secondary);
    background: linear-gradient(135deg, var(--color-soft) 0%, #e9ecef 100%);
    z-index: 20;
    text-align: left;
    min-width: 120px !important;
    max-width: none !important;
    width: fit-content !important;
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
    padding: var(--space-2) var(--space-3);
    box-shadow: 2px 0 8px -2px rgba(0, 0, 0, 0.1);
    border-right: 2px solid var(--color-border);
}

/* Заголовки таблицы */
.schedule-table th {
    background: rgba(102, 126, 234, 0.15);
    font-weight: var(--font-weight-semibold);
    position: sticky;
    top: 0;
    z-index: 4;
    color: var(--color-text);
    border-bottom: 2px solid var(--color-primary);
}

/* Первая колонка заголовка */
.schedule-table th:first-child {
    width: fit-content !important;
    min-width: 120px !important;
    max-width: none !important;
}

/* Первая колонка тела таблицы */
.schedule-table td:first-child {
    width: fit-content !important;
    min-width: 120px !important;
    max-width: none !important;
}

/* Выходные дни */
.schedule-table th.weekend,
.schedule-table td.weekend {
    background: rgba(245, 158, 11, 0.15);
    color: var(--color-warning-2);
    font-weight: var(--font-weight-medium);
}

/* Ячейки смен */
.schedule-table td.shift-cell {
    cursor: pointer;
    transition: var(--transition);
    font-size: var(--font-size-xs);
    padding: var(--space-1) var(--space-2);
    height: 35px;
    text-align: center;
    vertical-align: middle;
    word-break: break-word;
    border-radius: var(--radius-sm);
    margin: 1px;
    position: relative;
}

/* Эффект при наведении на строку */
.schedule-table tbody tr:hover {
    background: rgba(102, 126, 234, 0.05);
    transition: var(--transition);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

/* Сегодняшний день */
.schedule-table td.today,
.schedule-table th.today {
    border: 2px solid var(--color-primary);
    background: rgba(102, 126, 234, 0.15);
    z-index: 5;
    box-shadow: 0 0 8px rgba(102, 126, 234, 0.3);
    border-radius: var(--radius-sm);
}

/* Имя администратора */
.admin-name {
    min-width: 120px !important;
    max-width: none !important;
    width: fit-content !important;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    background: linear-gradient(135deg, var(--color-soft) 0%, #e9ecef 100%);
    position: sticky;
    left: 0;
    z-index: 3;
    padding: var(--space-2) var(--space-3);
    white-space: nowrap;
    border-right: 2px solid var(--color-border);
    height: 35px;
    vertical-align: middle;
    text-align: left;
    overflow: visible;
    text-overflow: clip;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

/* Специфичные стили для td с классом admin-name */
td.admin-name {
    vertical-align: middle !important;
    text-align: left;
    min-width: 120px !important;
    max-width: none !important;
    width: fit-content !important;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
}

/* Название филиала */
.branch-name {
    min-width: 100px;
    max-width: 120px;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    background: var(--color-soft);
    position: sticky;
    left: 0;
    z-index: 3;
    padding: var(--space-1) var(--space-2);
    white-space: nowrap;
    border-right: 1px solid var(--color-border);
    height: 28px;
    vertical-align: middle;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Время смены */
.shift-cell-time {
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    display: block;
    color: var(--color-primary);
    margin-bottom: 2px;
    line-height: 1.2;
}

/* Короткое название филиала */
.branch-short {
    display: block;
    font-size: 9px;
    color: var(--color-muted);
    font-weight: var(--font-weight-medium);
    line-height: 1;
    margin-top: 1px;
    background: rgba(102, 126, 234, 0.1);
    padding: 1px 3px;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
}

/* Исправление: branch-name как td ячейка в таблице расписания.
   Глобальные стили .branch-name задают display:flex и ::before пулю,
   которые ломают отображение таблицы. Переопределяем через более
   специфичный селектор с !important. */
.schedule-table th.branch-name,
.schedule-table td.branch-name {
    display: table-cell !important;
    margin-bottom: 0 !important;
    gap: 0 !important;
    align-items: initial !important;
    color: var(--color-text) !important;
    min-width: 150px !important;
    max-width: none !important;
    width: fit-content !important;
    /* Совпадает с .admin-name в той же таблице */
    font-size: var(--font-size-sm) !important;
    font-weight: var(--font-weight-medium) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    /* Восстанавливаем отступы, перебитые padding:0!important из глобального .branch-name */
    padding: var(--space-2) var(--space-3) !important;
}

.schedule-table th.branch-name::before,
.schedule-table td.branch-name::before {
    display: none !important;
    content: none !important;
}

/* Ячейки смен во вкладке "По филиалам" — могут содержать
   несколько ФИО, поэтому высота должна быть автоматической */
#scheduleView2 .shift-cell {
    height: auto !important;
    min-height: 35px;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    vertical-align: top;
    padding: var(--space-1) var(--space-2);
}

/* ФИО администратора в режиме "По филиалам" — стиль совпадает с .shift-cell-time */
.admin-fio {
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    white-space: nowrap;
    word-break: normal;
    line-height: 1.2;
    text-align: center;
    display: block;
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Цветовые индикаторы */
.bg-orange {
    background: var(--gradient-warning) !important;
    color: var(--color-surface) !important;
}

.bg-overlap {
    background: var(--gradient-danger) !important;
    color: var(--color-surface) !important;
}

.bg-purple {
    background: var(--gradient-admin) !important;
    color: var(--color-surface) !important;
}

.shift-cell.bg-danger {
    background: var(--gradient-danger) !important;
    color: var(--color-surface) !important;
}

.shift-cell .fw-bold {
    font-size: 1.1em;
}

/* Прошедшие даты (неактивные для редактирования) */
.shift-cell.past-date {
    opacity: 0.6;
    cursor: not-allowed !important;
    background-color: var(--color-soft) !important;
}

.shift-cell.past-date:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* ========================================
   УНИФИЦИРОВАННАЯ КАРТОЧКА ПОИСКА
   ======================================== */

/* Стили для .search-card определены выше в строках ~2174-2290 */

/* Единый стиль для поля поиска */
.dashboard-search {
    position: relative;
    overflow: visible;
    z-index: auto;
}

/* Базовые стили для .dashboard-search (работают везде, кроме .search-card) */
.dashboard-search .input-group {
    position: relative;
    display: block;
}

.dashboard-search .form-control {
    border: 2px solid var(--color-border);
    background: white;
    padding: 0.5rem 4rem 0.5rem 0.875rem;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    color: #1f2937;
    width: 100%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: all 0.2s ease;
}

.dashboard-search .form-control:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
    outline: none;
}

.dashboard-search .btn-primary {
    position: absolute;
    right: 3px;
    top: 3px;
    bottom: 3px;
    transform: none;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    color: white;
    padding: 0 1rem;
    border-radius: calc(var(--radius-md) - 2px);
    transition: all 0.2s ease;
    z-index: 10;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(102, 126, 234, 0.3);
}

.dashboard-search .btn-primary:hover {
    background: linear-gradient(135deg, #5568d3 0%, #6a3d91 100%);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
}

.dashboard-search .btn-primary i {
    font-size: 0.9rem;
}

/* Инлайн фильтры внутри input-group (для storage search) */
.dashboard-search .search-filters-inline {
    position: absolute;
    right: 50px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 5;
}

.dashboard-search .search-filters-inline .form-select-sm {
    font-size: 0.85rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.95);
    min-width: 100px;
}

/* Компактные стили для custom-select в фильтрах */
.search-filters-inline .custom-select-container {
    min-width: 120px;
    max-width: 140px;
}

/* Только для фильтра "Все типы" в файловом хранилище */
#storageSearchForm .search-filters-inline .custom-select-container:has(#searchTypeFilter) {
    min-width: 170px;
    max-width: 170px;
}

.search-filters-inline .custom-select-input {
    padding: 6px 10px;
    min-height: 32px;
    font-size: 13px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.95);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
}

/* Для узкого инлайн-фильтра не используем "склейку" с dropdown:
   это устраняет визуальный рывок при открытии/закрытии */
.search-filters-inline .custom-select-input.active {
    border-width: 1px !important;
    border-color: #667eea !important;
    border-radius: 6px !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.15) !important;
    background: rgba(255, 255, 255, 0.98) !important;
}

/* Точечный фикс для фильтра "Все типы" в файловом хранилище */
.custom-select-input[data-source-select-id="searchTypeFilter"].active {
    border-width: 1px !important;
    border-color: #667eea !important;
    border-radius: 6px !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.15) !important;
    background: rgba(255, 255, 255, 0.98) !important;
}

.search-filters-inline .custom-select-input i {
    font-size: 10px;
}

.search-filters-inline .custom-select-placeholder {
    font-size: 13px;
}

/* Компактные стили для custom-select в advanced-filters */
.advanced-filters .custom-select-container {
    width: 100%;
}

.advanced-filters .custom-select-input {
    padding: 8px 12px;
    min-height: 38px;
    font-size: 14px;
}

/* Для size-unit-select */
.size-input-group .custom-select-container {
    min-width: 70px;
    max-width: 90px;
}

.size-input-group .custom-select-input {
    padding: 6px 10px;
    min-height: 38px;
    font-size: 13px;
}

.dashboard-search .search-filters-inline .btn-sm {
    padding: 0.35rem 0.65rem;
    font-size: 0.85rem;
    border-radius: 6px;
}

/* Для storage search с инлайн фильтрами */
.dashboard-search .search-filters-inline ~ .btn-primary {
    right: 3px;
}

/* Fallback для браузеров без поддержки :has() */
#storageSearchForm .form-control {
    padding-right: 270px; /* Место для фильтра "Все типы" и кнопки */
}

.dashboard-search:has(.search-filters-inline) .form-control {
    padding-right: 270px; /* Место для фильтра "Все типы" и кнопки */
}

/* Стили для .search-card .dashboard-search определены выше в строках ~2195-2251 */
/* Они более специфичны и перекрывают базовые стили выше */

/* Результаты поиска */
/* Контейнер для результатов поиска в файловом хранилище */
.search-results-container-wrapper {
    margin: 20px 0;
    padding: 0;
    width: 100%;
}

/* Результаты поиска в файловом хранилище - статичное позиционирование */
.search-results-container-wrapper .search-results {
    position: static !important;
    display: none;
    background: white;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e7eb;
}

/* Стили для автодополнения определены в едином блоке выше */

/* Базовые стили для элементов результатов наследуются из единого блока выше */

/* Дополнительные стили для вложенных элементов */
.search-result-item .result-name,
.search-result-item .search-result-title {
    font-weight: 600;
    color: #1f2937 !important;
    margin: 0 !important;
    line-height: 1.35 !important;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.search-result-item .result-info,
.search-result-item .search-result-description {
    font-size: 12px;
    color: #6b7280 !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

/* Единая вертикальная сетка для всех результатов глобального поиска */
#searchResults .search-result-item {
    display: grid !important;
    grid-template-rows: auto auto auto !important;
    row-gap: 4px !important;
}

#searchResults .search-result-item .search-result-title {
    min-height: 20px;
}

#searchResults .search-result-item .search-result-description {
    min-height: 17px;
}

.search-result-item .search-result-type {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 7px !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    font-size: 12px !important;
    color: #475569 !important;
    margin-top: 4px !important;
    font-weight: 600 !important;
    padding: 5px 11px !important;
    border-radius: 999px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    border: 1px solid rgba(148, 163, 184, 0.26) !important;
    background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%) !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06) !important;
    transition: all 0.2s ease !important;
    width: fit-content !important;
    max-width: max-content !important;
    justify-self: start !important;
    align-self: start !important;
    flex: 0 0 auto !important;
}

.search-result-item .search-result-type::before {
    content: none !important;
    display: none !important;
}

.search-result-item .search-result-type.child::before { content: none !important; }
.search-result-item .search-result-type.user::before { content: none !important; }
.search-result-item .search-result-type.branch::before { content: none !important; }
.search-result-item .search-result-type.lesson::before { content: none !important; }
.search-result-item .search-result-type.music::before { content: none !important; }

#searchResults .search-result-item .search-result-type.child {
    color: #1d4ed8 !important;
    border-color: rgba(59, 130, 246, 0.28) !important;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
}

#searchResults .search-result-item .search-result-type.user {
    color: #7e22ce !important;
    border-color: rgba(168, 85, 247, 0.3) !important;
    background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%) !important;
}

#searchResults .search-result-item .search-result-type.branch {
    color: #166534 !important;
    border-color: rgba(34, 197, 94, 0.28) !important;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%) !important;
}

#searchResults .search-result-item .search-result-type.lesson {
    color: #b45309 !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%) !important;
}

#searchResults .search-result-item .search-result-type.music {
    color: #be185d !important;
    border-color: rgba(236, 72, 153, 0.28) !important;
    background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 100%) !important;
}

#searchResults .search-result-item:hover .search-result-type {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08) !important;
}

/* Текст остается видимым при hover */
.search-result-item:hover .search-result-title,
.search-result-item:hover .search-result-description,
.search-result-item:hover .search-result-type,
.search-result-item:hover .result-name,
.search-result-item:hover .result-info {
    color: #1f2937 !important;
}

/* Dashboard поиск наследует единые стили выше */

/* Глобальный поиск наследует единые стили */
#searchResults .search-result-item:hover .search-result-name,
#searchResults .search-result-item:hover .search-result-path,
#searchResults .search-result-item:hover .search-result-meta {
    color: #1f2937 !important;
}

/* ========================================
   УНИФИЦИРОВАННЫЕ ТАБЛИЦЫ - БАЗОВЫЕ СТИЛИ
   ======================================== */

/* Базовый класс для всех таблиц системы */
.unified-table {
    width: 100%;
    min-width: 100%;
    table-layout: auto;
    border-collapse: separate;
    border-spacing: 0;
    background: white;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
}

.unified-table thead {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.unified-table thead th {
    background: transparent !important;
    font-weight: 600;
    color: var(--color-text);
    font-size: 14px;
    padding: 14px 16px !important;
    border: none !important;
    border-bottom: 2px solid #e5e7eb !important;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

.unified-table tbody tr {
    transition: all 0.2s ease;
    border-bottom: 1px solid #f1f5f9;
    background-color: transparent;
}

.unified-table tbody tr:hover {
    background-color: rgba(102, 126, 234, 0.06) !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.unified-table tbody td {
    padding: 12px 16px !important;
    vertical-align: middle;
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
    border: none !important;
}

/* Обертка для таблицы */
.unified-table-wrapper {
    overflow-x: auto;
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    background: white;
}

/* ========================================
   СТРАНИЦА ЗАКУПОК - ДОПОЛНИТЕЛЬНЫЕ СТИЛИ
   ======================================== */

/* Улучшенная кнопка "Добавить строку" - современный дизайн */
#addRowBtn {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 12px 24px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    color: white !important;
    box-shadow: 0 4px 16px rgba(34, 197, 94, 0.3) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    position: relative;
    overflow: hidden;
    letter-spacing: 0.3px;
}

/* Эффект блеска при hover */
#addRowBtn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
}

#addRowBtn:hover::before {
    left: 100%;
}

#addRowBtn:hover {
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 8px 24px rgba(34, 197, 94, 0.4) !important;
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
}

#addRowBtn:active {
    transform: translateY(-1px) scale(0.98) !important;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3) !important;
}

#addRowBtn i {
    font-size: 16px !important;
    transition: transform 0.3s ease !important;
}

#addRowBtn:hover i {
    transform: rotate(90deg) scale(1.1) !important;
}

/* Вкладки статусов закупок — ЗАМЕНЕНО НА UNIFIED TABS (см. конец файла).
   ID-селектор #statusTabs имел более высокую специфичность и перебивал
   общий стиль .nav-tabs, поэтому закомментирован. Сохранён для истории.
   Отключено 2026-04-23.

#statusTabs {
    border-bottom: 2px solid var(--color-border) !important;
    display: flex;
    flex-wrap: nowrap;
    gap: 2px;
    margin-bottom: var(--space-4);
    padding-bottom: 0;
    white-space: nowrap;
}

#statusTabs .nav-link {
    padding: 8px 12px !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    cursor: pointer;
    font-weight: var(--font-weight-medium) !important;
    color: var(--color-muted) !important;
    transition: var(--transition) !important;
    position: relative;
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 14px !important;
}

#statusTabs .nav-link:hover {
    color: var(--color-primary) !important;
    background: rgba(102, 126, 234, 0.05) !important;
}

#statusTabs .nav-link.active {
    color: var(--color-primary) !important;
    border-bottom-color: var(--color-primary) !important;
    background: rgba(102, 126, 234, 0.08) !important;
    font-weight: var(--font-weight-bold) !important;
}

=== конец отключённого блока === */

/* Улучшенный селект филиалов - компактный дизайн */
/* Скрываем оригинальный select - он заменён на custom-select */
#branchSelect {
    display: none;
}

/* Компактный custom-select контейнер для филиалов */
.custom-select-container:has(#branchSelect) {
    max-width: 160px !important;
    min-width: 120px !important;
}

/* Компактная кнопка custom-select для филиалов */
.custom-select-container:has(#branchSelect) .custom-select-input {
    border-radius: 8px !important;
    border: 2px solid rgba(102, 126, 234, 0.2) !important;
    padding: 6px 10px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    min-height: 36px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    gap: 6px !important;
}

.custom-select-container:has(#branchSelect) .custom-select-input i.fa-chevron-down {
    font-size: 10px !important;
    flex-shrink: 0;
}

/* Hover для компактной кнопки филиалов */
.custom-select-container:has(#branchSelect) .custom-select-input:hover {
    border-color: rgba(102, 126, 234, 0.4) !important;
    background-color: rgba(102, 126, 234, 0.03) !important;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15) !important;
}

/* Active для компактной кнопки филиалов */
.custom-select-container:has(#branchSelect) .custom-select-input.active {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
}

/* Улучшенная обертка таблицы - убрана тень, она на карточке */
.zakupki-table-wrapper {
    overflow-x: auto;
    width: 100%;
    border-radius: 12px;
    background: white;
}

/* ============================================
   КОМПАКТНАЯ ТАБЛИЦА ЗАКУПОК - ВСЕ СТОЛБЦЫ НА ЭКРАНЕ
   ============================================ */

/* Таблица: table-layout: fixed для предсказуемой ширины столбцов */
.zakupki-table {
    table-layout: fixed !important;
    width: 100% !important;
}

/* Ширины столбцов закупок */
/* ДУБЛИРУЮЩИЕ СТИЛИ УДАЛЕНЫ - используются стили из строк 6730-6810 выше */

/* Дублирующие стили удалены - используются стили выше (строки 6812-6845) */

/* Компактные кнопки действий */
.zakupki-table .btn-sm {
    padding: 3px 6px !important;
    font-size: 12px !important;
}

.zakupki-table .d-flex {
    gap: 4px !important;
}

/* Компактные поля в режиме редактирования */
.zakupki-table tr.editing input.form-control,
.zakupki-table tr.editing select.form-control,
.zakupki-table tr.new-row input.form-control,
.zakupki-table tr.new-row select.form-control {
    padding: 6px 10px !important;
    min-height: 32px !important;
    height: 32px !important;
}

/* Select2 компактный в режиме редактирования */
.zakupki-table tr.editing .select2-container .select2-selection,
.zakupki-table tr.new-row .select2-container .select2-selection {
    min-height: 28px !important;
    height: 28px !important;
    padding: 2px 6px !important;
}

.zakupki-table tr.editing .select2-container .select2-selection__rendered,
.zakupki-table tr.new-row .select2-container .select2-selection__rendered {
    font-size: 12px !important;
    line-height: 22px !important;
}

.zakupki-table tr.editing .select2-container .select2-selection__arrow,
.zakupki-table tr.new-row .select2-container .select2-selection__arrow {
    height: 28px !important;
}

/* Адаптивность для средних экранов */
@media (max-width: 1400px) {
    .zakupki-table td {
        font-size: 12px !important;
        padding: 8px 4px !important;
    }
    
    .zakupki-table th {
        font-size: 10px !important;
        padding: 8px 4px !important;
    }
    
    .zakupki-table .status-select,
    .zakupki-table .status-form select {
        font-size: 11px !important;
        padding: 2px 4px !important;
    }
}

/* Мобильная адаптивность */
@media (max-width: 992px) {
    .zakupki-table {
        table-layout: auto !important; /* На мобильном - auto */
    }
    
    .zakupki-table td,
    .zakupki-table th {
        white-space: nowrap !important;
    }
}

/* Улучшенные иконки согласования */
.zakupki-table .fa-check {
    color: #22c55e;
    font-size: 18px;
    opacity: 0.9;
}

.zakupki-table .fa-times {
    color: var(--color-muted);
    font-size: 16px;
    opacity: 0.5;
}

.zakupki-table .approval-checkbox {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: #22c55e;
}

/* Улучшенные ссылки */
.zakupki-table a {
    color: #667eea;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    padding: 4px 12px;
    border-radius: 20px;
    background: rgba(102, 126, 234, 0.08);
    display: inline-block;
}

.zakupki-table a:hover {
    color: #5568d3;
    background: rgba(102, 126, 234, 0.15);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
}

/* ========================================
   СТРАНИЦА СПИСКА ДЕТЕЙ
   ======================================== */

/* Контейнер списка детей */
.children-list-container {
    padding: var(--space-4, 20px) 0;
}

/* Улучшенная таблица детей */
.children-table-card .table {
    border: none !important;
}

.children-table-card .table thead {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
}

.children-table-card .table thead th {
    background: transparent !important;
    font-weight: 600;
    color: var(--color-text);
    font-size: 14px;
    padding: 14px 16px !important;
    border: none !important;
    border-bottom: 2px solid #e5e7eb !important;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

.children-table-card .table tbody tr {
    transition: all 0.2s ease;
    border-bottom: 1px solid #f1f5f9;
    background-color: transparent;
}

.children-table-card .table tbody tr:hover {
    background-color: rgba(102, 126, 234, 0.06) !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.children-table-card .table td {
    padding: 12px 16px !important;
    vertical-align: middle;
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
    border: none !important;
}

/* Улучшенные ячейки с именами */
.child-surname strong,
.child-name strong,
.child-patronymic strong {
    font-weight: 600;
    color: var(--color-text);
    font-size: 14px;
}

/* Улучшенный бейдж возраста */
.children-table-card .child-age .badge-chip {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    color: white !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.25) !important;
    border: none !important;
}

.children-table-card .child-age .badge-chip i {
    font-size: 14px;
}

/* Улучшенная карточка таблицы */
.children-table-card .card {
    border: none !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
    border-radius: 12px !important;
    overflow: hidden;
}

.children-table-card .card-body {
    padding: 0 !important;
}

/* Улучшенная пагинация */
.pagination-wrapper {
    margin-top: 2rem;
}

.pagination {
    margin-bottom: 1.5rem;
    gap: 8px;
    flex-wrap: wrap;
}

.pagination .page-link {
    border: none !important;
    background: white !important;
    color: #495057 !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

/* Кнопки навигации (Назад/Вперёд) */
.page-nav-btn {
    border-radius: 20px !important;
    padding: 10px 20px !important;
    min-width: 110px !important;
    font-size: 14px !important;
}

.page-nav-btn:hover:not(.page-item.disabled .page-nav-btn) {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.35) !important;
}

/* Номера страниц */
.page-number {
    border-radius: 12px !important;
    padding: 10px 16px !important;
    min-width: 44px !important;
    font-size: 14px !important;
}

.page-item.active .page-number {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4) !important;
    transform: scale(1.05) !important;
}

.page-number:hover:not(.page-item.active .page-number):not(.page-item.disabled .page-number) {
    background: rgba(102, 126, 234, 0.1) !important;
    color: #667eea !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 10px rgba(102, 126, 234, 0.2) !important;
}

/* Троеточие */
.page-dots,
.pagination .page-link.page-dots {
    border: none !important;
    background: transparent !important;
    color: #9ca3af !important;
    box-shadow: none !important;
    padding: 10px 6px !important;
    font-weight: 600 !important;
    letter-spacing: 2px !important;
    cursor: default !important;
}

/* Отключенные кнопки */
.page-item.disabled .page-link {
    background: #f8f9fa !important;
    color: #adb5bd !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}

/* Многоточие в .disabled li — без серой плашки/рамки */
.page-item.disabled .page-link.page-dots,
.pagination .page-item.disabled .page-link.page-dots {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #9ca3af !important;
    cursor: default !important;
}

/* Стили для карточки поиска наследуются от .search-card выше */

/* Улучшенная кнопка архивных - красивый pill-дизайн */
.btn-icon-only {
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important; /* Круглая кнопка */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Базовые стили только для кнопок без специфичных классов */
.btn-icon-only:not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-primary) {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%) !important;
    border: 2px solid rgba(102, 126, 234, 0.2) !important;
    color: #667eea !important;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15) !important;
    animation: iconPulse 2s ease-in-out infinite;
}

/* Эффект ripple при hover */
.btn-icon-only::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(102, 126, 234, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn-icon-only:hover::before {
    width: 100%;
    height: 100%;
}

/* Hover только для базовых кнопок без специфичных классов */
.btn-icon-only:not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-primary):hover {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%) !important;
    border-color: rgba(102, 126, 234, 0.4) !important;
    transform: translateY(-3px) rotate(5deg) !important;
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.35) !important;
    color: #5568d3 !important;
    animation: none;
}

.btn-icon-only:active {
    transform: translateY(-1px) scale(0.95) !important;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2) !important;
}

.btn-icon-only i {
    font-size: 18px;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
}

.btn-icon-only:not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-primary):hover i {
    transform: scale(1.1);
}

/* Анимация при загрузке */
@keyframes iconPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* Анимация применяется к .btn-icon-only выше в основном блоке стилей */

/* ============================================
   СТИЛИ ДЛЯ КНОПОК С ИКОНКАМИ И СПЕЦИФИЧНЫМИ КЛАССАМИ
   ============================================ */

/* Кнопка успеха с иконкой - всегда видимая (высокая специфичность для перекрытия Bootstrap) */
button.btn-icon-only.btn-success,
.btn-icon-only.btn-success,
button.btn.btn-icon-only.btn-success,
.btn.btn-icon-only.btn-success {
    background: var(--gradient-success) !important;
    background-color: #22c55e !important;
    background-image: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    border: 2px solid rgba(34, 197, 94, 0.3) !important;
    border-color: rgba(34, 197, 94, 0.3) !important;
    color: white !important;
    box-shadow: 0 4px 14px rgba(34, 197, 94, 0.35) !important;
    animation: none !important; /* Отключаем пульсацию */
}

button.btn-icon-only.btn-success:hover,
.btn-icon-only.btn-success:hover,
button.btn.btn-icon-only.btn-success:hover,
.btn.btn-icon-only.btn-success:hover {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
    background-color: #16a34a !important;
    background-image: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
    border-color: rgba(34, 197, 94, 0.5) !important;
    box-shadow: 0 8px 24px rgba(34, 197, 94, 0.45) !important;
    transform: translateY(-2px) scale(1.05) !important;
    color: white !important;
}

button.btn-icon-only.btn-success:active,
.btn-icon-only.btn-success:active,
button.btn.btn-icon-only.btn-success:active,
.btn.btn-icon-only.btn-success:active {
    background: linear-gradient(135deg, #15803d 0%, #166534 100%) !important;
    background-color: #15803d !important;
    transform: translateY(-1px) scale(0.98) !important;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3) !important;
    color: white !important;
}

button.btn-icon-only.btn-success::before,
.btn-icon-only.btn-success::before,
button.btn.btn-icon-only.btn-success::before,
.btn.btn-icon-only.btn-success::before {
    background: rgba(255, 255, 255, 0.2) !important;
}

button.btn-icon-only.btn-success i,
.btn-icon-only.btn-success i,
button.btn.btn-icon-only.btn-success i,
.btn.btn-icon-only.btn-success i {
    color: white !important;
    font-size: 18px !important;
}

button.btn-icon-only.btn-success:hover i,
.btn-icon-only.btn-success:hover i,
button.btn.btn-icon-only.btn-success:hover i,
.btn.btn-icon-only.btn-success:hover i {
    color: white !important;
    transform: scale(1.1);
}

/* Вариант с текстом - для десктопа */
.btn-icon-text {
    padding: 10px 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border-radius: 20px !important;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%) !important;
    border: 2px solid rgba(102, 126, 234, 0.2) !important;
    color: #667eea !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15) !important;
    white-space: nowrap !important;
}

.btn-icon-text:hover {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%) !important;
    border-color: rgba(102, 126, 234, 0.4) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.35) !important;
    color: #5568d3 !important;
}

.btn-icon-text i {
    font-size: 16px;
    transition: transform 0.3s ease;
}

.btn-icon-text:hover i {
    transform: scale(1.15);
}

/* Адаптивность - на мобильных показываем только иконку */
@media (max-width: 768px) {
    .btn-icon-text {
        width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
        border-radius: 50% !important;
    }
    
    .btn-icon-text .btn-text {
        display: none;
    }
}

/* Стили для поля поиска наследуются от .dashboard-search выше */

/* ========================================
   ЕДИНЫЙ СТИЛЬ ДЛЯ ВСЕХ АВТОЗАПОЛНЕНИЙ И РЕЗУЛЬТАТОВ ПОИСКА
   ======================================== */

/* Контейнер автозаполнения */
.autocomplete-suggestions,
.dashboard-search .search-results,
#dashboard-search-results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: white;
    border: 2px solid var(--color-primary);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 100000 !important;
    display: none;
    padding: var(--space-5);
    margin-bottom: var(--space-5);
}

.autocomplete-suggestions.show,
.dashboard-search .search-results.show,
#dashboard-search-results.show {
    display: block;
}

/* Элементы автозаполнения - ЕДИНЫЙ СТИЛЬ */
.autocomplete-suggestion,
.dashboard-search .search-result-item,
#dashboard-search-results .search-result-item {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #1f2937 !important;
    background: white !important;
    border-radius: 8px;
    margin-bottom: 4px;
}

.autocomplete-suggestion:last-child,
.dashboard-search .search-result-item:last-child,
#dashboard-search-results .search-result-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

/* Hover состояние - ЕДИНЫЙ СТИЛЬ БЕЗ ГРАДИЕНТА */
.autocomplete-suggestion:hover,
.dashboard-search .search-result-item:hover,
#dashboard-search-results .search-result-item:hover {
    background: rgba(102, 126, 234, 0.08) !important;
    color: #1f2937 !important;
    border-color: rgba(102, 126, 234, 0.3) !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15) !important;
}

/* Иконки и текст при hover */
.autocomplete-suggestion:hover i,
.autocomplete-suggestion:hover span,
.dashboard-search .search-result-item:hover i,
.dashboard-search .search-result-item:hover span,
#dashboard-search-results .search-result-item:hover i,
#dashboard-search-results .search-result-item:hover span {
    color: #1f2937 !important;
}

/* Иконки */
.autocomplete-suggestion i,
.dashboard-search .search-result-item i,
#dashboard-search-results .search-result-item i {
    color: var(--color-primary);
    font-size: 16px;
    width: 20px;
    text-align: center;
}

/* ========================================
   ГЛОБАЛЬНОЕ ПРАВИЛО: ЕДИНЫЙ HOVER ДЛЯ ВСЕХ ИНТЕРАКТИВНЫХ ЭЛЕМЕНТОВ
   ======================================== */

/* Применяем единый hover ко всем результатам поиска и автозаполнениям */
.search-result-item:hover,
.autocomplete-suggestion:hover,
.search-results .search-result-item:hover,
#searchResults .search-result-item:hover,
.autocomplete-suggestions .autocomplete-suggestion:hover {
    background: rgba(102, 126, 234, 0.08) !important;
    color: #1f2937 !important;
    border-color: rgba(102, 126, 234, 0.3) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15) !important;
}

.autocomplete-suggestion i {
    color: #667eea;
    font-size: 14px;
}

.autocomplete-suggestion span {
    color: #1f2937 !important;
}

/* Пустое состояние */
.empty-state .card {
    border: 2px dashed var(--color-border);
    background: var(--color-soft);
    border-radius: 12px;
}

.empty-state .rehab-icon-gradient {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3);
}

.children-empty-icon {
    width: 80px;
    height: 80px;
    font-size: 2.5rem;
}

/* ========================================
   СТРАНИЦА МАТЕРИНСКОГО КАПИТАЛА
   ======================================== */

/* Специальный градиент для заголовка страницы материнского капитала */
body:has([data-page="maternal-capital"]) .page-header,
.page-header:has(.fa-file-contract) {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Улучшенная кнопка "Добавить договор" */
.page-header-actions button[data-bs-target="#addContractModal"],
.page-header-actions .btn:has(.fa-plus) {
    background: rgba(255, 255, 255, 0.25) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    backdrop-filter: blur(10px);
    font-weight: 600;
    padding: 12px 24px !important;
    transition: all 0.3s ease;
}

.page-header-actions button[data-bs-target="#addContractModal"]:hover,
.page-header-actions .btn:has(.fa-plus):hover {
    background: rgba(255, 255, 255, 0.35) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.page-header-actions button[data-bs-target="#addContractModal"] i,
.page-header-actions .btn:has(.fa-plus) i {
    margin-right: 8px;
    font-size: 16px;
}

/* Специфичные стили для строк договоров */
.contract-row.clickable-row {
    transition: all 0.2s ease;
}

.contract-row.clickable-row:hover {
    background-color: rgba(102, 126, 234, 0.08) !important;
    transform: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* Контейнер результатов поиска детей - как multiselect */
.search-results-container,
#childSearchResults,
#editChildSearchResults {
    max-height: 300px;
    overflow-y: auto;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    background-color: white;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    z-index: var(--z-dropdown) !important;
    position: absolute !important;
    transform: none !important;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    margin-top: 4px;
    padding: 0;
}

/* Скроллбар для выпадающего списка */
.search-results-container::-webkit-scrollbar {
    width: 8px;
}

.search-results-container::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 10px;
}

.search-results-container::-webkit-scrollbar-thumb {
    background: #667eea;
    border-radius: 10px;
}

.search-results-container::-webkit-scrollbar-thumb:hover {
    background: #5a67d8;
}

/* Стили для dropdown-item и dropdown-item-text уже определены выше в файле */

/* Стили для сортировки таблицы уже определены выше в файле */

/* Обеспечиваем правильное позиционирование поля поиска */
.mb-3 {
    position: relative;
}

.mb-3:has(.search-results-container) {
    position: relative;
    z-index: 10;
}

.form-control + .search-results-container {
    position: absolute;
    top: calc(100% + 1px);
    left: 0;
    right: 0;
    z-index: var(--z-dropdown);
    transform: none !important;
}

/* Защита от перекрытия footer модального окна */
.modal-footer {
    z-index: calc(var(--z-modal) + 10) !important;
    position: relative;
}

/* Dropdown-menu для поиска детей */
#childSearchResults.dropdown-menu,
#editChildSearchResults.dropdown-menu {
    display: block !important;
    position: absolute !important;
    inset: auto !important;
    margin: 0 !important;
    transform: none !important;
}

#childSearchResults.dropdown-menu[style*="display: none"],
#editChildSearchResults.dropdown-menu[style*="display: none"] {
    display: none !important;
}

/* Элементы dropdown-item в поиске детей - стиль multiselect без чекбоксов */
#childSearchResults .dropdown-item,
#editChildSearchResults .dropdown-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 16px !important;
    font-size: 13px !important;
    color: #334155 !important;
    font-weight: 400 !important;
    border: none !important;
    border-radius: 0 !important;
    background: white !important;
    transition: all 0.15s ease !important;
    text-decoration: none !important;
    text-align: left !important;
}

#childSearchResults .dropdown-item:hover,
#editChildSearchResults .dropdown-item:hover {
    background: #f1f5f9 !important;
    color: #334155 !important;
}

#childSearchResults .dropdown-item:active,
#editChildSearchResults .dropdown-item:active {
    background: #e2e8f0 !important;
}

/* Иконка ребенка - красивая фиолетовая */
#childSearchResults .search-result-child-icon,
#editChildSearchResults .search-result-child-icon {
    color: #667eea;
    font-size: 18px;
    flex-shrink: 0;
    width: 24px;
    text-align: center;
}

/* Информация о ребенке - по левому краю */
#childSearchResults .search-result-info,
#editChildSearchResults .search-result-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    text-align: left;
}

#childSearchResults .search-result-name,
#editChildSearchResults .search-result-name {
    font-size: 14px;
    color: #1f2937;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.4;
}

#childSearchResults .search-result-meta,
#editChildSearchResults .search-result-meta {
    font-size: 12px;
    color: #94a3b8;
    margin-top: 2px;
    line-height: 1.3;
}

/* Текст "Дети не найдены" */
#childSearchResults .dropdown-item-text,
#editChildSearchResults .dropdown-item-text {
    padding: 20px 14px !important;
    text-align: center !important;
    color: #94a3b8 !important;
    font-style: italic !important;
    font-size: 13px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ========================================
   MULTISELECT ДЛЯ УСЛУГ В ДОГОВОРАХ
   ======================================== */

/* Контейнер multiselect */
.services-multiselect-container {
    position: relative;
}

/* Input с выбранными услугами */
.services-multiselect-input {
    cursor: pointer;
    min-height: 42px;
    border: 2px solid #e5e7eb !important;
    border-radius: 10px !important;
    transition: all 0.3s ease;
}

.services-multiselect-input:hover {
    border-color: #667eea !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.services-multiselect-container.is-open .services-multiselect-input {
    border-color: #667eea !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* Dropdown со списком услуг */
.services-multiselect-dropdown {
    background: white;
    border: 2px solid #e5e7eb;
    border-top: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

/* Поиск внутри dropdown */
.services-multiselect-search {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #f9fafb;
}

.services-multiselect-search input {
    width: 100%;
}

.services-multiselect-search input:focus {
    border-color: #667eea !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
    outline: none;
}

/* Опции услуг */
.services-multiselect-option {
    cursor: pointer;
    transition: all 0.15s ease;
}

.services-multiselect-option:hover {
    background: #f1f5f9;
}

/* Теги выбранных услуг */
.services-tag {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}

.services-tag i {
    cursor: pointer;
    transition: all 0.2s ease;
}

.services-tag i:hover {
    transform: scale(1.2);
}

/* Расширение выпадающего списка на десктопе */
@media (min-width: 768px) {
    #childSearchResults.search-results-container,
    #editChildSearchResults.search-results-container {
        width: calc(100% + 140px) !important;
        right: auto !important;
        max-width: calc(100vw - 100px) !important;
    }
}

/* Стили для поля номера договора (только для чтения) */
#contractNumber[readonly],
#editContractNumber[readonly] {
    background-color: var(--color-soft);
    border-color: var(--color-border);
    color: var(--color-text);
}

/* Стили для select с услугами */
.services-select {
    min-width: 100%;
    width: 100%;
    max-width: 100%;
}

.services-select option {
    white-space: normal;
    padding: 8px 12px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.modal-body .row .col-md-6:has(.services-select) {
    min-width: 0;
}

@media (min-width: 768px) {
    .services-select {
        min-width: 100%;
    }
}

/* Улучшенное отображение услуг в таблице - компактное */
.services-cell {
    font-size: 12px;
    white-space: nowrap;
}

.services-count {
    color: #667eea;
    font-weight: 600;
    cursor: help;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 4px 8px;
    border-radius: 14px;
    background-color: rgba(102, 126, 234, 0.08);
    border: 1px solid rgba(102, 126, 234, 0.15);
    font-size: 11px;
}

.services-count:hover {
    color: #5568d3;
    background-color: rgba(102, 126, 234, 0.15);
    border-color: rgba(102, 126, 234, 0.25);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
}

.services-count i {
    font-size: 11px;
    opacity: 0.9;
}

/* Стили для комментария в таблице */
.comment-cell {
    font-size: 11px;
    color: var(--color-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-style: italic;
    text-align: left !important;
    padding-left: 10px !important;
}

.comment-cell span {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Таблица договоров - наследует базовые стили .table */
#contractsTable {
    width: 100%;
    min-width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    background: white;
    border: none !important;
    border-radius: 0;
    overflow: hidden;
    margin-bottom: 0;
}

/* Фиксированные ширины столбцов - оптимизированы для компактного отображения */
#contractsTable th:nth-child(1),
#contractsTable td:nth-child(1) {
    width: 10%;
}

#contractsTable th:nth-child(2),
#contractsTable td:nth-child(2) {
    width: 10%;
}

#contractsTable th:nth-child(3),
#contractsTable td:nth-child(3) {
    width: 9%;
}

#contractsTable th:nth-child(4),
#contractsTable td:nth-child(4) {
    width: 13%;
}

#contractsTable th:nth-child(5),
#contractsTable td:nth-child(5) {
    width: 7%;
}

#contractsTable th:nth-child(6),
#contractsTable td:nth-child(6) {
    width: 11%;
}

#contractsTable th:nth-child(7),
#contractsTable td:nth-child(7) {
    width: 12%;
}

#contractsTable th:nth-child(8),
#contractsTable td:nth-child(8) {
    width: 11%;
}

#contractsTable th:nth-child(9),
#contractsTable td:nth-child(9) {
    width: 5%;
}

#contractsTable th:nth-child(10),
#contractsTable td:nth-child(10) {
    width: 12%;
}

/* Заголовок таблицы договоров - наследует от .table thead */
#contractsTable thead {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

/* Ячейки таблицы договоров */
#contractsTable td {
    padding: 12px 8px !important;
    vertical-align: middle;
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
    border: none !important;
    border-bottom: 1px solid #f1f5f9 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Первые два столбца - имена, выравнивание по левому краю */
#contractsTable td:nth-child(1),
#contractsTable td:nth-child(2) {
    text-align: left;
    padding-left: 12px !important;
}

#contractsTable th:nth-child(1),
#contractsTable th:nth-child(2) {
    text-align: left;
    padding-left: 12px !important;
}

/* Заголовки таблицы договоров */
#contractsTable th {
    padding: 14px 8px !important;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
    background-color: transparent !important;
    border: none !important;
    border-bottom: 2px solid #e5e7eb !important;
    text-align: center;
    vertical-align: middle;
    white-space: normal;
    line-height: 1.4;
}

/* Строки таблицы договоров */
#contractsTable tbody tr {
    border-bottom: 1px solid #f1f5f9;
    transition: all 0.2s ease;
    background-color: transparent;
}

#contractsTable tbody tr:hover {
    background-color: rgba(102, 126, 234, 0.05) !important;
    transform: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

#contractsTable tbody tr:last-child td {
    border-bottom: none !important;
}

/* Улучшенные бейджи для типов оплаты - компактные */
#contractsTable .badge {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 16px;
    text-transform: none;
    letter-spacing: 0.2px;
}

#contractsTable .badge.bg-success,
#contractsTable .badge-chip.success {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 2px 6px rgba(34, 197, 94, 0.2);
}

#contractsTable .badge.bg-info,
#contractsTable .badge-chip.info {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 2px 6px rgba(6, 182, 212, 0.2);
}

/* Улучшенная карточка таблицы */
#contractsTable {
    border: none !important;
}

/* Специфичные стили только для карточки с таблицей контрактов */
#contractsTable {
    border: none !important;
}

/* Убираем padding только для card-body, содержащего таблицу контрактов */
#contractsTable .table-responsive {
    border-radius: 12px;
    overflow: hidden;
}

/* Карточка, содержащая таблицу контрактов */
.card:has(#contractsTable) {
    border: none !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
    border-radius: 12px !important;
}

.card:has(#contractsTable) .card-body {
    padding: 0 !important;
}

/* Улучшенная иконка отказа - компактная */
#contractsTable .fa-times-circle {
    font-size: 16px;
    color: #ef4444;
    opacity: 0.9;
    transition: all 0.2s ease;
}

#contractsTable .fa-times-circle:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* Улучшенное форматирование сумм */
#contractsTable td:nth-child(3) {
    font-weight: 600;
    color: var(--color-text);
}

/* Кастомный tooltip для услуг */
.services-tooltip-custom {
    --bs-tooltip-max-width: 400px;
}

.services-tooltip-custom .tooltip-inner {
    text-align: left;
    padding: 12px 16px;
    max-width: 400px;
    font-size: 13px;
    line-height: 1.6;
    background-color: rgba(31, 41, 55, 0.95);
    backdrop-filter: blur(8px);
    border-radius: 8px;
}

.tooltip-service-item {
    padding: 4px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.tooltip-service-item:last-child {
    border-bottom: none;
}

/* Улучшенные номера договоров */
#contractsTable td:nth-child(4) {
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    font-size: 12px;
    color: var(--color-muted);
    font-weight: 500;
}

/* Адаптивность для больших экранов (1920px+) */
@media (min-width: 1920px) {
    #contractsTable th:nth-child(1),
    #contractsTable td:nth-child(1) {
        width: 18%;
    }
    
    #contractsTable th:nth-child(10),
    #contractsTable td:nth-child(10) {
        width: 10%;
    }
    
    #contractsTable td,
    #contractsTable th {
        font-size: 14px;
    }
}

/* Адаптивность для средних экранов (1366px-1919px) */
@media (min-width: 1366px) and (max-width: 1919px) {
    #contractsTable th:nth-child(1),
    #contractsTable td:nth-child(1) {
        width: 15%;
    }
    
    #contractsTable th:nth-child(2),
    #contractsTable td:nth-child(2) {
        width: 14%;
    }
    
    #contractsTable th:nth-child(10),
    #contractsTable td:nth-child(10) {
        width: 9%;
    }
}

/* Адаптивность для маленьких экранов (до 1365px) */
@media (max-width: 1365px) {
    #contractsTable {
        table-layout: auto;
        min-width: 1200px;
    }
    
    #contractsTable th,
    #contractsTable td {
        font-size: 12px;
        padding: 10px 6px !important;
    }
    
    #contractsTable th:nth-child(1),
    #contractsTable th:nth-child(2),
    #contractsTable td:nth-child(1),
    #contractsTable td:nth-child(2) {
        padding-left: 12px !important;
    }
}

/* ========================================
   KPI PAGE STYLES
   ======================================== */

/* ========================================
   KPI СПЕЦИФИЧНЫЕ СТИЛИ
   Только то, что уникально для KPI
   ======================================== */

/* Заголовки карточек с иконками */
.brandbook-title {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    font-size: var(--font-size-lg) !important;
    font-weight: var(--font-weight-semibold) !important;
    line-height: 1 !important;
}

.brandbook-title i {
    font-size: var(--font-size-lg) !important;
    line-height: 1 !important;
}

/* Кнопки-иконки в таблицах KPI (круглые) */
#kpiTabContent .table .btn-action-circle {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    border: none !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
}

/* KPI: равномерное распределение ширины столбцов */
#kpiTabContent .table-responsive > .table {
    width: 100% !important;
    table-layout: fixed !important;
}

#kpiTabContent .table-responsive > .table th,
#kpiTabContent .table-responsive > .table td {
    word-wrap: break-word !important;
    overflow-wrap: anywhere !important;
}

#kpiTabContent .table .btn-action-circle i {
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1 !important;
}

#kpiTabContent .table .btn-action-circle:hover {
    transform: translateY(-2px) scale(1.1) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

#kpiTabContent .table .btn-action-circle:active {
    transform: translateY(0) scale(0.95) !important;
}

/* Цвета круглых кнопок */
#kpiTabContent .table .btn-action-circle.btn-edit {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
}

#kpiTabContent .table .btn-action-circle.btn-edit:hover {
    background: linear-gradient(135deg, #5568d3 0%, #6a3f9a 100%) !important;
    box-shadow: 0 4px 14px rgba(102, 126, 234, 0.4) !important;
}

#kpiTabContent .table .btn-action-circle.btn-remove {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%) !important;
    color: white !important;
}

#kpiTabContent .table .btn-action-circle.btn-remove:hover {
    background: linear-gradient(135deg, #e55a5a 0%, #d14d1f 100%) !important;
    box-shadow: 0 4px 14px rgba(255, 107, 107, 0.4) !important;
}

/* Disabled состояние круглых кнопок */
#kpiTabContent .table .btn-action-circle:disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Разделитель между блоками результатов KPI */
.kpi-results-section-separator {
    margin-top: var(--space-6) !important;
}

.kpi-results-divider {
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--color-primary), var(--color-primary-2), transparent);
    margin: var(--space-6) 0;
    border-radius: var(--radius-sm);
    opacity: 0.3;
    box-shadow: 0 2px 4px rgba(102, 126, 234, 0.1);
}

/* Strong overrides for Results tab */
#results .kpi-results-divider {
    display: block !important;
    height: 3px !important;
    background: linear-gradient(90deg, transparent, var(--color-primary), var(--color-primary-2), transparent) !important;
    margin: var(--space-6) 0 !important;
    border-radius: var(--radius-sm) !important;
    opacity: 0.3 !important;
}

/* Table Head Styles */
.table-head-primary thead {
    background: var(--gradient-primary);
    color: white;
}

.table-head-primary thead th {
    color: white;
    border-bottom: none;
}

.table-head-info thead {
    background: var(--gradient-info);
    color: white;
}

.table-head-info thead th {
    color: white;
    border-bottom: none;
}

.table-head-warning thead {
    background: var(--gradient-warning);
    color: white;
}

.table-head-warning thead th {
    color: white;
    border-bottom: none;
}

.table-head-success thead {
    background: var(--gradient-success);
    color: white;
}

.table-head-success thead th {
    color: white;
    border-bottom: none;
}

/* Принудительные стили для заголовков таблиц результатов */
#results .table-head-primary thead {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

#results .table-head-info thead {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%) !important;
}

#results .table-head-warning thead {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
}

#results .table-head-success thead {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
}

#results .table-head-primary thead th,
#results .table-head-info thead th,
#results .table-head-warning thead th,
#results .table-head-success thead th {
    color: white !important;
    background: transparent !important;
    padding: var(--space-2) !important;
    font-size: var(--font-size-xs) !important;
    white-space: nowrap;
}

/* Narrower column widths for results */
#results .table-head-primary thead th:nth-child(1),
#results .table-head-info thead th:nth-child(1),
#results .table-head-warning thead th:nth-child(1) { width: 30% !important; }
#results .table-head-primary thead th:nth-child(2),
#results .table-head-info thead th:nth-child(2),
#results .table-head-warning thead th:nth-child(2) { width: 15% !important; }
#results .table-head-primary thead th:nth-child(3),
#results .table-head-info thead th:nth-child(3),
#results .table-head-warning thead th:nth-child(3) { width: 15% !important; }
#results .table-head-primary thead th:nth-child(4),
#results .table-head-info thead th:nth-child(4),
#results .table-head-warning thead th:nth-child(4) { width: 15% !important; }

/* Sortable columns */
.sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
    transition: background-color 0.2s;
}

.sortable:hover {
    background-color: #dee2e6 !important;
}

.sortable .sort-icon {
    margin-left: 5px;
    font-size: 0.8em;
    opacity: 0.6;
}

/* Salary calculation styles */
.hours-total {
    background-color: #e8f5e8 !important;
    font-weight: bold;
    color: #2e7d32;
}

.kpi-bonus {
    background-color: #e3f2fd !important;
    font-weight: bold;
    color: #1976d2;
}

.final-total {
    background-color: #f3e5f5 !important;
    font-weight: bold;
}

/* ========================================
   ИСПРАВЛЕНИЯ СТИЛЕЙ ДЛЯ ЕДИНООБРАЗИЯ
   ======================================== */

/* 1. Заголовки карточек с градиентами вместо стандартных Bootstrap цветов */
.card-header.bg-primary {
    background: var(--gradient-primary) !important;
    color: white !important;
    border: none !important;
}

.card-header.bg-success {
    background: var(--gradient-success) !important;
    color: white !important;
    border: none !important;
}

.card-header.bg-danger {
    background: var(--gradient-danger) !important;
    color: white !important;
    border: none !important;
}

.card-header.bg-warning {
    background: var(--gradient-warning) !important;
    color: white !important;
    border: none !important;
}

.card-header.bg-info {
    background: var(--gradient-info) !important;
    color: white !important;
    border: none !important;
}

.card-header.bg-secondary {
    background: var(--gradient-secondary) !important;
    color: white !important;
    border: none !important;
}

/* 2. Стили для input[type="month"] и input[type="date"] */
input[type="month"],
input[type="date"],
input[type="time"],
input[type="datetime-local"] {
    border: 2px solid var(--color-border) !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    font-size: 0.95rem !important;
    transition: all 0.3s ease !important;
    background: white !important;
    cursor: pointer !important;
    min-height: 42px !important;
}

input[type="month"]:hover,
input[type="date"]:hover,
input[type="time"]:hover,
input[type="datetime-local"]:hover {
    border-color: rgba(102, 126, 234, 0.4) !important;
    background: #fafbff !important;
}

input[type="month"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.12) !important;
    outline: none !important;
    background: #fafbff !important;
}

/* Стили для календаря при клике на поле */
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    cursor: pointer !important;
    padding: 4px !important;
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
}

input[type="month"]::-webkit-calendar-picker-indicator:hover,
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
    background: rgba(102, 126, 234, 0.1) !important;
}

/* 3. Единообразные размеры для всех кнопок btn-sm */
.btn-sm,
.btn.btn-sm {
    padding: 8px 14px !important;
    font-size: 0.875rem !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    min-height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    transition: all 0.3s ease !important;
}

/* Круглая кнопка + в заголовках секций оценок */
.btn-sm.add-entry-btn.header-add-btn,
.btn.btn-sm.add-entry-btn.header-add-btn {
    border-radius: 50% !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    padding: 0 !important;
    aspect-ratio: 1 / 1 !important;
    flex: 0 0 24px !important;
    flex-shrink: 0 !important;
    margin: 0 8px 0 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-2)) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 2px 6px rgba(102, 126, 234, 0.35) !important;
    line-height: 1 !important;
    position: static !important;
    font-size: 11px !important;
}

.btn-sm i,
.btn.btn-sm i {
    font-size: 0.85rem !important;
}

/* Кнопки btn-sm с градиентами */
.btn-sm.btn-primary,
.btn.btn-sm.btn-primary {
    background: var(--gradient-primary) !important;
    border: none !important;
    color: white !important;
    box-shadow: 0 2px 6px rgba(102, 126, 234, 0.25) !important;
}

.btn-sm.btn-primary:hover,
.btn.btn-sm.btn-primary:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 10px rgba(102, 126, 234, 0.35) !important;
}

.btn-sm.btn-success,
.btn.btn-sm.btn-success {
    background: var(--gradient-success) !important;
    border: none !important;
    color: white !important;
    box-shadow: 0 2px 6px rgba(34, 197, 94, 0.25) !important;
}

.btn-sm.btn-success:hover,
.btn.btn-sm.btn-success:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 10px rgba(34, 197, 94, 0.35) !important;
}

.btn-sm.btn-danger,
.btn.btn-sm.btn-danger {
    background: var(--gradient-danger) !important;
    border: none !important;
    color: white !important;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.25) !important;
}

.btn-sm.btn-danger:hover,
.btn.btn-sm.btn-danger:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 10px rgba(239, 68, 68, 0.35) !important;
}

.btn-sm.btn-warning,
.btn.btn-sm.btn-warning {
    background: var(--gradient-warning) !important;
    border: none !important;
    color: white !important;
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.25) !important;
}

.btn-sm.btn-warning:hover,
.btn.btn-sm.btn-warning:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 10px rgba(245, 158, 11, 0.35) !important;
}

.btn-sm.btn-info,
.btn.btn-sm.btn-info {
    background: var(--gradient-info) !important;
    border: none !important;
    color: white !important;
    box-shadow: 0 2px 6px rgba(6, 182, 212, 0.25) !important;
}

.btn-sm.btn-info:hover,
.btn.btn-sm.btn-info:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 10px rgba(6, 182, 212, 0.35) !important;
}

.btn-sm.btn-secondary,
.btn.btn-sm.btn-secondary {
    background: var(--gradient-secondary) !important;
    border: none !important;
    color: white !important;
    box-shadow: 0 2px 6px rgba(107, 114, 128, 0.25) !important;
}

.btn-sm.btn-secondary:hover,
.btn.btn-sm.btn-secondary:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 10px rgba(107, 114, 128, 0.35) !important;
}

/* Disabled кнопки */
.btn-sm:disabled,
.btn.btn-sm:disabled,
.btn-sm[disabled],
.btn.btn-sm[disabled] {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

.btn-sm:disabled:hover,
.btn.btn-sm:disabled:hover,
.btn-sm[disabled]:hover,
.btn.btn-sm[disabled]:hover {
    transform: none !important;
    box-shadow: none !important;
    color: #7b1fa2;
}


/* Стили для мультиселектов в фильтрах задач и заметок */
#assignee_filter_multiselect_input,
#child_filter_multiselect_input,
.unified-filters-card .multiselect-input {
    min-height: 50px !important;
    height: 50px !important;
    border: 2px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    padding: 12px 16px !important;
    background: white !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    font-size: 14px !important;
}

/* Исправление выравнивания кнопки сброса фильтров */
/* Выравнивание кнопки сброса фильтров по уровню с другими элементами */
/* Меняем align-items-end на flex-start для контейнера с кнопкой */
.unified-filters-body .flex-shrink-0.d-flex.align-items-end {
    align-items: flex-start !important;
    flex-direction: column !important;
}

/* Выравнивание контейнера с кнопкой */
.unified-filters-body .flex-shrink-0.d-flex.align-items-end {
    align-items: flex-start !important;
    flex-direction: column !important;
}

/* Добавляем невидимый label для кнопки, чтобы она была на одном уровне с остальными элементами */
.unified-filters-body .flex-shrink-0.d-flex.align-items-end::before {
    content: '\00a0' !important; /* Неразрывный пробел */
    display: block !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
    line-height: 1.5 !important;
    visibility: hidden !important;
    height: auto !important;
}

#assignee_filter_multiselect_input:hover,
#child_filter_multiselect_input:hover,
.unified-filters-card .multiselect-input:hover {
    border-color: rgba(102, 126, 234, 0.4) !important;
    background: #fafbff !important;
}

#assignee_filter_multiselect_input.active,
#child_filter_multiselect_input.active,
.unified-filters-card .multiselect-input.active {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
    background: #fafbff !important;
}

#assignee_filter_multiselect_input .multiselect-placeholder,
#child_filter_multiselect_input .multiselect-placeholder,
.unified-filters-card .multiselect-placeholder {
    color: #9ca3af !important;
    font-size: 14px !important;
}

/* ========================================
   КОНЕЦ ФАЙЛА
   ======================================== */

/* ========================================
   СТРАНИЦА ЖУРНАЛА КЛЮЧЕЙ (KEY LOG)
   ======================================== */

/* Стили для журнала ключей в соответствии с дизайн-системой проекта */
.key-log-container {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow-md);
    margin-bottom: var(--space-6);
    border: 1px solid var(--color-border);
    transition: var(--transition-fast);
    animation: fadeInUp 0.8s ease-out 0.2s both;
}

.key-log-container:hover {
    box-shadow: var(--shadow-lg);
}

.key-log-table {
    width: 100%;
    min-width: 100%;
    table-layout: auto;
    background: var(--color-surface);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
    border-collapse: separate;
    border-spacing: 0;
}

.key-log-table thead {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
    border: none !important;
}

.key-log-table thead th {
    padding: 14px 16px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--color-text) !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid #e5e7eb !important;
    text-align: center !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
}

.key-log-table tbody tr {
    transition: all 0.2s ease;
    border-bottom: 1px solid #f1f5f9;
    background-color: transparent;
    cursor: pointer;
    position: relative;
}

.key-log-table tbody tr:nth-child(even) {
    background-color: transparent;
}

.key-log-table tbody tr:nth-child(odd) {
    background-color: transparent;
}

.key-log-table tbody tr:hover {
    background-color: rgba(102, 126, 234, 0.06) !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.key-log-table tbody tr::after {
    content: '';
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid var(--color-muted);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    opacity: 0;
    transition: var(--transition-fast);
}

.key-log-table tbody tr:hover::after {
    opacity: 1;
    border-left-color: var(--color-primary);
}

.key-log-table tbody td {
    padding: 12px 16px;
    vertical-align: middle;
    font-size: 14px;
    text-align: center;
    border: none !important;
}

.status-badge {
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.status-issued {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #92400e;
    border: 1px solid var(--color-warning);
}

.status-returned {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    color: #065f46;
    border: 1px solid var(--color-success);
}

.key-log-filters {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    margin-bottom: var(--space-6);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
    animation: fadeInUp 0.6s ease-out;
}

.filter-group {
    margin-bottom: var(--space-4);
}

.filter-group:last-child {
    margin-bottom: 0;
}

.filter-label {
    font-weight: var(--font-weight-semibold);
    color: var(--color-muted);
    margin-bottom: var(--space-2);
    display: block;
    font-size: var(--font-size-sm);
    font-family: var(--font-family-base);
}

/* Стили для интерактивных иконок */
.key-log-table i[onclick] {
    transition: var(--transition-fast);
    border-radius: var(--radius-sm);
    padding: var(--space-2);
}

.key-log-table i[onclick]:hover {
    background-color: var(--color-soft);
    transform: scale(1.2);
    box-shadow: var(--shadow-sm);
}

/* Дополнительные стили для заголовков таблицы */
.key-log-container .key-log-table thead th {
    color: var(--color-muted) !important;
    background-color: var(--color-soft) !important;
}

.key-log-container .table thead th {
    color: var(--color-muted) !important;
    background-color: var(--color-soft) !important;
}

/* Убираем границы для таблицы Key Log */
.key-log-table thead tr {
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
}

.key-log-table thead {
    border: none !important;
    border-top: none !important;
    border-bottom: none !important;
}

.key-log-table thead tr th {
    border-bottom: none !important;
}

.key-log-table thead tr:last-child th {
    border-bottom: none !important;
}

.key-log-table tbody tr:first-child td {
    border-top: none !important;
}

.key-log-table,
.key-log-table > thead,
.key-log-table > tbody,
.key-log-table > thead > tr,
.key-log-table > tbody > tr {
    border: none !important;
}

.key-log-table > thead > tr:last-child > th {
    border-bottom: none !important;
}

.key-log-table > tbody > tr:first-child > td {
    border-top: none !important;
}

/* Стили для кнопок на странице Key Log */
.key-log-filters .btn,
.key-log-container .btn {
    /* Используем глобальные стили кнопок */
}

.key-log-filters .btn i,
.key-log-container .btn i {
    margin-right: 6px !important;
}

/* Кнопка "Сбросить" (только иконка) - квадратная */
.key-log-filters .btn-outline-secondary:has(i.fa-times):not(:has(text)) {
    padding: 6px 12px !important;
    min-width: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.key-log-filters .btn-outline-secondary i.fa-times {
    margin-right: 0 !important;
}

/* key-log-filters наследует глобальные стили */

/* Кастомный селект */
.custom-select-container {
    position: relative;
    width: 100%;
}

.custom-select-input {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    transition: all var(--transition-fast);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    min-height: 38px;
    font-size: 14px;
}

.custom-select-input:hover {
    border-color: var(--color-primary);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.custom-select-input.active {
    border-color: #667eea;
    border-width: 2px;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.12);
    border-radius: 8px 8px 0 0;
    border-bottom: 2px solid white;
    position: relative;
    z-index: 2147483646 !important;
    background: white;
}

.custom-select-placeholder {
    color: var(--color-muted);
    font-size: var(--font-size-md);
    font-family: var(--font-family-base);
    flex: 1;
}

.custom-select-placeholder.selected {
    color: var(--color-text);
    font-weight: var(--font-weight-medium);
}

.custom-select-input i {
    color: var(--color-muted);
    font-size: 12px;
    transition: var(--transition-fast);
}

.custom-select-input.active i {
    transform: rotate(180deg);
    color: var(--color-primary);
}

/* Инлайн фильтр "Все типы": нейтральный active без склейки с dropdown */
.search-filters-inline .custom-select-input.active {
    border-width: 1px !important;
    border-color: #667eea !important;
    border-radius: 6px !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.15) !important;
    background: rgba(255, 255, 255, 0.98) !important;
}

/* readonly/disabled custom-select: display-only, no dropdown affordance */
.custom-select-container.custom-select-readonly .custom-select-input,
.custom-select-input.readonly {
    cursor: default !important;
    pointer-events: auto;
    background: #f8fafc;
    border-color: var(--color-border) !important;
    box-shadow: none !important;
}

.custom-select-container.custom-select-readonly .custom-select-input:hover,
.custom-select-input.readonly:hover {
    border-color: var(--color-border) !important;
    box-shadow: none !important;
}

.custom-select-container.custom-select-readonly .custom-select-input i.fa-chevron-down,
.custom-select-input.readonly i.fa-chevron-down {
    display: none !important;
}

.custom-select-container {
    position: relative;
    overflow: visible !important;
    transition: width 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), min-width 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), max-width 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.custom-select-input {
    transition: border-color 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), border-radius 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), width 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Overlay для dropdown - НЕ должен перекрывать результаты поиска */
#custom-select-dropdown-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
    z-index: 2147483647 !important;
}

/* Dropdown внутри overlay - максимальный z-index */
#custom-select-dropdown-overlay > .custom-select-dropdown {
    z-index: 2147483647 !important;
    position: fixed !important;
}

#custom-select-dropdown-overlay > * {
    pointer-events: auto !important;
}

.custom-select-dropdown {
    position: fixed !important;
    background: white !important;
    border: 2px solid #667eea !important;
    border-top: none !important;
    border-radius: 0 0 8px 8px !important;
    height: auto !important;
    max-height: 300px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.12), 0 12px 28px rgba(0,0,0,0.12) !important;
    display: none;
    visibility: visible !important;
    opacity: 0;
    transform: translateY(-8px) scaleY(0.92);
    transform-origin: top center !important;
    pointer-events: auto !important;
    z-index: 2147483647 !important;
}

/* Когда dropdown открыт - гарантируем видимость */
.custom-select-dropdown[style*="display: block"],
.custom-select-dropdown[style*="display:block"] {
    display: block !important;
    visibility: visible !important;
}


/* Родители custom-select не должны обрезать dropdown */
.input-group,
.search-filters-inline,
.dashboard-search,
.advanced-filters,
.search-card .card-body {
    overflow: visible !important;
}

/* Модальные окна - dropdown внутри */
.modal .custom-select-container {
    overflow: visible !important;
}

.modal .custom-select-dropdown {
    z-index: 1070 !important;
}

.modal .custom-select-input.active {
    z-index: 1071 !important;
}

@keyframes dropdownSlideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Класс для dropdown, открывающегося вверх */
.custom-select-dropdown.open-upward {
    border-radius: 12px 12px 0 0 !important;
    border-top: 2px solid #667eea !important;
    border-bottom: none !important;
}

.custom-select-input.open-upward {
    border-radius: 0 0 var(--radius-md) var(--radius-md) !important;
}

.custom-select-search {
    padding: 12px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-soft);
    position: sticky;
    top: 0;
    z-index: 1;
}

.custom-select-search input,
.custom-search-input {
    width: 100%;
    padding: 8px 12px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 13px;
    transition: all 0.3s ease;
}

.custom-select-search input:focus,
.custom-search-input:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    outline: none;
}

.custom-select-options {
    max-height: 300px;
    overflow-y: auto;
    min-width: 100%;
    width: 100%;
    padding: 4px 0;
    height: auto !important;
    min-height: 50px !important;
}

.custom-select-option {
    padding: 10px 14px !important;
    cursor: pointer;
    border-bottom: 1px solid #f1f5f9;
    transition: all 0.15s ease;
    display: flex !important;
    align-items: center !important;
    gap: 12px;
    font-size: 14px !important;
    color: #334155 !important;
    min-height: 42px;
    white-space: nowrap;
}

.custom-select-option:last-child {
    border-bottom: none;
}

.custom-select-option:hover {
    background: #f1f5f9 !important;
    transform: none;
}

.custom-select-option i {
    color: #667eea;
    font-size: 16px;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.custom-select-option span {
    flex: 1;
    font-size: 14px !important;
    color: #334155 !important;
    font-weight: 400 !important;
    font-family: var(--font-family-base);
    white-space: nowrap;
    display: inline-block !important;
    min-width: min-content;
    overflow: visible;
    text-overflow: clip;
}


.custom-select-option.no-results {
    color: var(--color-muted);
    font-style: italic;
    justify-content: center;
    padding: var(--space-5);
}

/* Скроллбар для dropdown */
.custom-select-dropdown::-webkit-scrollbar {
    width: 6px;
}

.custom-select-dropdown::-webkit-scrollbar-track {
    background: var(--color-soft);
}

.custom-select-dropdown::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 3px;
}

.custom-select-dropdown::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary);
}

/* Адаптивность для Key Log */
@media (max-width: 1200px) {
    .key-log-table {
        font-size: var(--font-size-sm);
    }
    
    .key-log-table thead th,
    .key-log-table tbody td {
        padding: var(--space-3);
    }
}

@media (max-width: 992px) {
    .key-log-filters .row .col-md-3,
    .key-log-filters .row .col-md-2 {
        margin-bottom: var(--space-4);
    }
    
    .btn-key-action {
        min-width: 32px;
        min-height: 32px;
        padding: var(--space-1) var(--space-2);
    }
    
    .btn-key-action i {
        font-size: 12px;
    }
}

@media (max-width: 768px) {
    .key-log-container,
    .key-log-filters {
        padding: var(--space-4);
        margin-bottom: var(--space-4);
        border-radius: var(--radius-md);
    }
    
    .key-log-table {
        font-size: var(--font-size-xs);
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
    
    .key-log-table thead,
    .key-log-table tbody,
    .key-log-table th,
    .key-log-table td,
    .key-log-table tr {
        display: block;
    }
    
    .key-log-table thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    
    .key-log-table tr {
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        margin-bottom: var(--space-4);
        padding: var(--space-4);
        box-shadow: var(--shadow-sm);
        position: relative;
    }
    
    .key-log-table tr:hover {
        transform: none;
        box-shadow: var(--shadow-md);
    }
    
    .key-log-table tr::after {
        display: none;
    }
    
    .key-log-table tr:active {
        background-color: var(--color-primary);
        color: white;
    }
    
    .key-log-table td {
        border: none !important;
        padding: var(--space-2) 0 !important;
        position: relative;
        padding-left: 40% !important;
        text-align: left;
        white-space: normal;
    }
    
    .key-log-table td:before {
        content: attr(data-label) ": ";
        position: absolute;
        left: 0;
        width: 35%;
        padding-right: var(--space-2);
        white-space: nowrap;
        font-weight: var(--font-weight-semibold);
        color: var(--color-muted);
        font-size: var(--font-size-xs);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    
    .key-log-table td:last-child {
        text-align: center;
        padding-left: 0 !important;
        margin-top: var(--space-3);
        padding-top: var(--space-3);
        border-top: 1px solid var(--color-border);
    }
    
    .key-log-table td:last-child:before {
        display: none;
    }
    
    .btn-key-action {
        min-width: 36px;
        min-height: 36px;
        padding: var(--space-2);
        margin: 0 var(--space-1);
    }
    
    .btn-key-action i {
        font-size: 14px;
    }
    
    .status-badge {
        font-size: 10px;
        padding: var(--space-1) var(--space-2);
    }
    
    .custom-select-dropdown {
        max-height: 250px;
    }
    
    .custom-select-option {
        padding: var(--space-3) var(--space-4);
    }
}

@media (max-width: 576px) {
    .key-log-filters .row .col-md-3,
    .key-log-filters .row .col-md-2 {
        margin-bottom: var(--space-3);
    }
    
    .key-log-filters .row:last-child {
        margin-top: var(--space-4);
    }
    
    .key-log-filters .btn {
        width: 100%;
        margin-bottom: var(--space-2);
    }
    
    .key-log-filters .btn:last-child {
        margin-bottom: 0;
    }
    
    .key-log-table td {
        padding-left: 45% !important;
    }
    
    .key-log-table td:before {
        width: 40%;
        font-size: 10px;
    }
    
    .btn-key-action {
        min-width: 32px;
        min-height: 32px;
        padding: var(--space-1);
    }
    
    .btn-key-action i {
        font-size: 12px;
    }
}

/* ========================================
   СТРАНИЦА ГРАФИКА ОТПУСКОВ
   ======================================== */

/* Таблица отпусков использует стили zakupki-table */
.vacation-table th, 
.vacation-table td { 
    vertical-align: middle; 
    font-size: var(--font-size-base); 
}

/* ============================================
   VACATION TABLE — КРАСИВЫЕ СТОЛБЦЫ БЕЗ СКРОЛЛА
   ============================================ */

/* Сбрасываем zakupki-table nth-child ширины для vacation-table */
.vacation-table.zakupki-table th,
.vacation-table.zakupki-table td {
    width: auto !important;
    text-align: center !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow: visible !important;
    text-overflow: clip !important;
    font-size: 13px !important;
    padding: 10px 12px !important;
    line-height: 1.5 !important;
}

.vacation-table.zakupki-table {
    table-layout: fixed !important;
    width: 100% !important;
}

/* --- Вкладка "Список" (6 столбцов) --- */
#vacationTable th:nth-child(1),
#vacationTable td:nth-child(1) {
    width: 22% !important; /* Сотрудник */
}

#vacationTable th:nth-child(2),
#vacationTable td:nth-child(2) {
    width: 14% !important; /* Филиал */
}

#vacationTable th:nth-child(3),
#vacationTable td:nth-child(3) {
    width: 22% !important; /* Период отпуска */
}

#vacationTable th:nth-child(4),
#vacationTable td:nth-child(4) {
    width: 8% !important; /* Дней */
    text-align: center !important;
}

#vacationTable th:nth-child(5),
#vacationTable td:nth-child(5) {
    width: 14% !important; /* Вид отпуска */
}

#vacationTable th:nth-child(6),
#vacationTable td:nth-child(6) {
    width: 20% !important; /* Замена */
}

/* --- Вкладка "Таблица" (4 столбца, сгруппированные по месяцу) --- */
#tableBlock .vacation-table th:nth-child(1),
#tableBlock .vacation-table td:nth-child(1) {
    width: 18% !important; /* Филиал */
}

#tableBlock .vacation-table th:nth-child(2),
#tableBlock .vacation-table td:nth-child(2) {
    width: 28% !important; /* Кто уходит в отпуск */
}

#tableBlock .vacation-table th:nth-child(3),
#tableBlock .vacation-table td:nth-child(3) {
    width: 28% !important; /* Кто заменяет */
}

#tableBlock .vacation-table th:nth-child(4),
#tableBlock .vacation-table td:nth-child(4) {
    width: 26% !important; /* Период отпуска */
}

/* Заголовок месяца в таблице */
#tableBlock .month-header {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text, #1f2937);
    margin: 20px 0 10px;
    padding: 8px 12px;
    background: rgba(102, 126, 234, 0.06);
    border-radius: 8px;
    border-left: 3px solid rgba(102, 126, 234, 0.5);
}

#tableBlock .month-header:first-child {
    margin-top: 0;
}

/* Обертка для таблицы "Таблица" без скролла */
#tableBlock .table-responsive {
    overflow-x: visible !important;
    overflow-y: visible !important;
}

/* Адаптивность для средних экранов */
@media (max-width: 1200px) {
    .vacation-table.zakupki-table th,
    .vacation-table.zakupki-table td {
        font-size: 12px !important;
        padding: 8px 8px !important;
    }
}

@media (max-width: 768px) {
    .vacation-table.zakupki-table {
        table-layout: auto !important;
    }
    
    .vacation-table.zakupki-table th,
    .vacation-table.zakupki-table td {
        font-size: 11px !important;
        padding: 6px 4px !important;
    }
}

/* Вкладки переключения режимов используют общий стиль nav-tabs */
#viewTabs {
    border-bottom: 2px solid var(--color-border);
}

.calendar-container { 
    min-height: 400px; 
    background: var(--color-soft); 
    border-radius: var(--radius-sm); 
    margin-top: var(--space-6); 
}

/* FullCalendar стили */
#calendarView {
    min-width: 300px !important;
    min-height: 400px !important;
    width: 100% !important;
    height: 650px !important;
    background: var(--color-soft) !important;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    margin-bottom: var(--space-6);
    padding: var(--space-3) 0;
}

.fc .fc-toolbar {
    background: var(--color-soft);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
    padding: var(--space-3) var(--space-4);
    box-shadow: var(--shadow-sm);
}

.fc .fc-button {
    border-radius: var(--radius-sm) !important;
    background: var(--color-surface) !important;
    color: var(--color-text) !important;
    border: 1px solid var(--color-border) !important;
    font-weight: var(--font-weight-medium);
    transition: var(--transition-fast);
    margin: 0 var(--space-1);
    padding: var(--space-2) var(--space-3) !important;
}

.fc .fc-button:not(:disabled):hover {
    background: var(--color-soft) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
    box-shadow: var(--shadow-sm);
}

.fc .fc-button:not(:disabled):active,
.fc .fc-button-active {
    background: var(--gradient-primary) !important;
    color: white !important;
    border-color: transparent !important;
    box-shadow: var(--shadow-button);
}

/* Кнопка "Сегодня" */
.fc .fc-today-button {
    background: var(--color-surface) !important;
    color: var(--color-text) !important;
    border: 1px solid var(--color-border) !important;
}

.fc .fc-today-button:not(:disabled):hover {
    background: var(--gradient-primary) !important;
    color: white !important;
    border-color: transparent !important;
}

.fc .fc-toolbar-title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    letter-spacing: 0.01em;
}

.fc-event {
    border: none;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    box-shadow: var(--shadow-sm);
    padding: var(--space-1) var(--space-3);
    margin-bottom: var(--space-1);
    transition: var(--transition-fast);
}

.fc-event:hover {
    box-shadow: var(--shadow-button);
    filter: brightness(1.05);
}

/* Динамические цвета для пользователей */
.user-color-0 { background: #FF6B6B !important; color: #fff !important; }
.user-color-1 { background: #4ECDC4 !important; color: #fff !important; }
.user-color-2 { background: #45B7D1 !important; color: #fff !important; }
.user-color-3 { background: #FFA07A !important; color: #fff !important; }
.user-color-4 { background: #98D8C8 !important; color: #fff !important; }
.user-color-5 { background: #F7DC6F !important; color: #222 !important; }
.user-color-6 { background: #BB8FCE !important; color: #fff !important; }
.user-color-7 { background: #85C1E9 !important; color: #fff !important; }
.user-color-8 { background: #F8C471 !important; color: #222 !important; }
.user-color-9 { background: #82E0AA !important; color: #fff !important; }
.user-color-10 { background: #F1948A !important; color: #fff !important; }
.user-color-11 { background: #AED6F1 !important; color: #fff !important; }
.user-color-12 { background: #D7BDE2 !important; color: #fff !important; }
.user-color-13 { background: #A9DFBF !important; color: #fff !important; }
.user-color-14 { background: #F9E79F !important; color: #222 !important; }

/* Timeline режим - специфичные стили */
.fc-timeline-event .fc-event-title { 
    white-space: pre-line !important; 
    word-break: break-word !important; 
    font-size: var(--font-size-sm);
    line-height: 1.4;
}

.fc-timeline-event { 
    min-width: 220px !important;
    height: auto !important;
    min-height: 30px !important;
}

.fc-timeline-event .fc-event-main { 
    width: 100% !important;
    padding: var(--space-1) var(--space-2) !important;
}

/* Заголовки и ячейки календаря */
.fc-daygrid-day-number, 
.fc-col-header-cell-cushion, 
.fc-timeline-slot-cushion {
    text-decoration: none !important;
    color: var(--color-muted) !important;
    font-weight: var(--font-weight-medium);
    background: none !important;
}

/* Область ресурсов (сотрудников) в Timeline */
.fc-timeline .fc-resource-area {
    background: var(--color-soft);
    border-right: 2px solid var(--color-border);
}

/* КРИТИЧНО: Выравнивание высоты строк - все элементы 50px */
.fc-timeline .fc-datagrid-cell,
.fc-timeline .fc-datagrid-cell-frame,
.fc-timeline .fc-datagrid-cell-cushion {
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    line-height: 50px !important;
}

.fc-timeline .fc-datagrid-cell {
    padding: 0 !important;
    vertical-align: middle !important;
}

.fc-timeline .fc-datagrid-cell-main {
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    padding: 0 var(--space-3) !important;
    display: flex;
    align-items: center;
    height: 50px !important;
    line-height: normal !important;
}

/* Высота строк с событиями должна ТОЧНО совпадать */
.fc-timeline .fc-timeline-lane,
.fc-timeline .fc-timeline-lane-frame,
.fc-timeline .fc-resource-timeline-divider,
.fc-timeline tbody tr {
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
}

/* Временные слоты в Timeline */
.fc-timeline .fc-timeline-slot,
.fc-timeline .fc-timeline-slot-frame {
    border-color: var(--color-border) !important;
    height: 50px !important;
    min-height: 50px !important;
}

.fc-timeline .fc-timeline-slot-cushion {
    padding: var(--space-2) !important;
}

/* Заголовки колонок (даты) в Timeline */
.fc-timeline .fc-col-header-cell {
    background: var(--color-soft);
    border-color: var(--color-border) !important;
}

.fc-timeline .fc-col-header-cell-cushion {
    padding: var(--space-2) !important;
    font-weight: var(--font-weight-semibold);
}

/* Контейнер ресурсов и событий должен быть синхронизирован */
.fc-timeline .fc-scrollgrid-sync-inner,
.fc-timeline .fc-scrollgrid-sync-table,
.fc-timeline .fc-scrollgrid-sync-table tbody tr {
    height: 50px !important;
    min-height: 50px !important;
}

/* События в Timeline - центрируем вертикально */
.fc-timeline .fc-timeline-event-harness {
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* Стили для таблицы отпусков с цветовой кодировкой */
.vacation-row-color-0 { background-color: rgba(255, 107, 107, 0.1) !important; }
.vacation-row-color-1 { background-color: rgba(78, 205, 196, 0.1) !important; }
.vacation-row-color-2 { background-color: rgba(69, 183, 209, 0.1) !important; }
.vacation-row-color-3 { background-color: rgba(255, 160, 122, 0.1) !important; }
.vacation-row-color-4 { background-color: rgba(152, 216, 200, 0.1) !important; }
.vacation-row-color-5 { background-color: rgba(247, 220, 111, 0.1) !important; }
.vacation-row-color-6 { background-color: rgba(187, 143, 206, 0.1) !important; }
.vacation-row-color-7 { background-color: rgba(133, 193, 233, 0.1) !important; }
.vacation-row-color-8 { background-color: rgba(248, 196, 113, 0.1) !important; }
.vacation-row-color-9 { background-color: rgba(130, 224, 170, 0.1) !important; }
.vacation-row-color-10 { background-color: rgba(241, 148, 138, 0.1) !important; }
.vacation-row-color-11 { background-color: rgba(174, 214, 241, 0.1) !important; }
.vacation-row-color-12 { background-color: rgba(215, 189, 226, 0.1) !important; }
.vacation-row-color-13 { background-color: rgba(169, 223, 191, 0.1) !important; }
.vacation-row-color-14 { background-color: rgba(249, 231, 159, 0.1) !important; }

/* Селекты фильтров */
#filterBranch,
#filterPosition {
    min-width: 0;
    width: 100%;
}

/* Компактная ширина фильтров на странице отпусков */
#vacationsContainer .custom-select-container:has(#filterBranch) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 0 0 auto !important;
}

#vacationsContainer .custom-select-container:has(#filterPosition) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 0 0 auto !important;
}

#vacationsContainer .custom-select-input[data-source-select-id="filterBranch"] {
    width: 100% !important;
    min-width: 0 !important;
}

#vacationsContainer .custom-select-input[data-source-select-id="filterPosition"] {
    width: 100% !important;
    min-width: 0 !important;
}

/* Кликабельные строки таблицы */
.vacation-row {
    cursor: pointer;
    transition: var(--transition-fast);
}

.vacation-row:hover {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%) !important;
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.vacation-row:active {
    transform: translateY(0);
}

/* Dropdown кнопка для выбора пользователей */
#dropdownUsers {
    min-width: 180px;
    text-align: left;
}

/* Dropdown для пользователей */
.dropdown-menu-users {
    box-shadow: var(--shadow-md);
    display: none !important;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 999;
    background-color: var(--color-surface) !important;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    min-width: 280px;
    max-width: 350px;
}

/* Inside unified-filters-body the menu must match button width */
.unified-filters-body .dropdown-menu-users {
    min-width: 0 !important;
    max-width: none !important;
    width: 100% !important;
}

.dropdown-menu-users.show {
    display: block !important;
}

.dropdown-menu-users .form-check {
    margin-bottom: var(--space-2);
}

.dropdown-menu-users .form-check-label {
    cursor: pointer;
    width: 100%;
    padding: var(--space-1) 0;
}

.dropdown-menu-users .form-check-input {
    margin-top: var(--space-2);
}

/* Убеждаемся что контейнер dropdown имеет position relative */
.dropdown {
    position: relative;
}

/* Стили для месячных групп в режиме "Таблица" */
.month-group {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--space-6);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
}

.month-header {
    margin: 0 !important;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-lg);
    color: var(--color-text);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%);
    padding: var(--space-4) var(--space-5);
    border-bottom: 2px solid var(--color-border);
    letter-spacing: 0.3px;
}

.month-group .table {
    margin-bottom: 0;
    table-layout: fixed;
}

.month-group .zakupki-table {
    border: none !important;
}

.month-group .zakupki-table thead th {
    background: var(--color-soft);
    border-top: none !important;
}

/* Оптимальная ширина столбцов для табличного вида */
.month-group .zakupki-table thead th:nth-child(1),
.month-group .zakupki-table tbody td:nth-child(1) {
    width: 12%;
}

.month-group .zakupki-table thead th:nth-child(2),
.month-group .zakupki-table tbody td:nth-child(2) {
    width: 35%;
}

.month-group .zakupki-table thead th:nth-child(3),
.month-group .zakupki-table tbody td:nth-child(3) {
    width: 30%;
}

.month-group .zakupki-table thead th:nth-child(4),
.month-group .zakupki-table tbody td:nth-child(4) {
    width: 23%;
}

/* Мобильная адаптация для страницы отпусков */
@media (max-width: 768px) {
    #viewTabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    #viewTabs .nav-link {
        white-space: nowrap;
        font-size: var(--font-size-sm);
    }
    
    #filterBranch,
    #filterPosition,
    #dropdownUsers {
        font-size: var(--font-size-sm);
        min-width: 0;
        width: 100%;
    }
}

/* ========================================
   ГРАФИК РАБОТЫ СПЕЦИАЛИСТОВ
   ======================================== */

/* Таблица расписания специалистов */
.specialists-table {
    width: 100%;
    min-width: 100%;
    table-layout: auto;
    border-collapse: separate;
    border-spacing: 0;
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

/* Ячейки таблицы */
.specialists-table td {
    padding: 12px 16px !important;
    vertical-align: middle;
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
    border: none !important;
}

.specialists-table td:last-child {
    border-right: none;
}

/* Заголовки таблицы */
.specialists-table thead {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
}

.specialists-table th {
    padding: 14px 16px !important;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
    background-color: transparent !important;
    border: none !important;
    border-bottom: 2px solid #e5e7eb !important;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

.specialists-table th:last-child {
    border-right: none;
}

/* Строки таблицы */
.specialists-table tbody tr {
    border-bottom: 1px solid #f1f5f9;
    transition: all 0.2s ease;
    background-color: transparent;
}

.specialists-table tbody tr:last-child td {
    border-bottom: none;
}

.specialists-table tbody tr:hover {
    background-color: rgba(102, 126, 234, 0.06) !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Колонка специалистов */
.specialists-table th:first-child,
.specialists-table td:first-child {
    width: 250px;
    min-width: 250px;
    font-weight: 500;
}

/* Колонки дней недели */
.specialists-table th:not(:first-child),
.specialists-table td:not(:first-child) {
    width: 100px;
    text-align: center;
}

/* === ЯЧЕЙКИ РАСПИСАНИЯ === */

.schedule-cell {
    padding: 8px;
    border-radius: var(--radius-sm);
    transition: var(--transition-fast);
    font-size: 13px;
}

/* Утренняя смена */
.morning-shift {
    background: linear-gradient(135deg, rgba(255, 235, 59, 0.15), rgba(255, 193, 7, 0.1));
    border: 1px solid rgba(255, 193, 7, 0.3);
}

.morning-shift:hover {
    background: linear-gradient(135deg, rgba(255, 235, 59, 0.25), rgba(255, 193, 7, 0.2));
    transform: scale(1.02);
}

/* Вечерняя смена */
.evening-shift {
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.15), rgba(3, 169, 244, 0.1));
    border: 1px solid rgba(33, 150, 243, 0.3);
}

.evening-shift:hover {
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.25), rgba(3, 169, 244, 0.2));
    transform: scale(1.02);
}

/* Длинная смена */
.long-shift {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.15), rgba(139, 195, 74, 0.1));
    border: 1px solid rgba(76, 175, 80, 0.3);
}

.long-shift:hover {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.25), rgba(139, 195, 74, 0.2));
    transform: scale(1.02);
}

/* Рабочий день */
.working-day {
    background: rgba(40, 167, 69, 0.1);
    border: 1px solid rgba(40, 167, 69, 0.2);
}

/* Рабочий день без времени */
.no-time {
    background: linear-gradient(135deg, rgba(158, 158, 158, 0.1), rgba(189, 189, 189, 0.08));
    border: 1px solid rgba(158, 158, 158, 0.2);
}

/* Выходной */
.non-working-day {
    background: rgba(108, 117, 125, 0.1);
    border: 1px solid rgba(108, 117, 125, 0.2);
}

/* Расписание не определено */
.no-schedule {
    background: rgba(158, 158, 158, 0.08);
    border: 1px solid rgba(158, 158, 158, 0.15);
}

/* Время смены */
.schedule-time {
    font-size: 11px;
    line-height: 1;
    margin-top: 4px;
    opacity: 0.8;
}

/* === СЕКЦИИ === */

.branch-section {
    margin-bottom: var(--space-6);
    border-radius: var(--radius-lg);
    box-shadow: none;
    overflow: visible;
}

/* Отступ для содержимого филиала */
.branch-section .card-body {
    padding: var(--space-4) !important;
}

.position-section {
    background: white;
    box-shadow: 0 0 0 1px var(--color-border);
    margin-left: 0;
    margin-bottom: var(--space-4);
    border-radius: var(--radius-md);
    overflow: hidden !important;
}

/* Первая секция должности без верхнего отступа */
.position-section:first-child {
    margin-top: 0;
}

.position-header {
    background: linear-gradient(135deg, var(--color-soft), #e9ecef);
    transition: background 0.2s ease;
    border-bottom: 1px solid var(--color-border) !important;
    border-radius: 0 !important;
}

.position-header:hover {
    background: linear-gradient(135deg, #e9ecef, #dee2e6);
}

/* Отступ для таблицы внутри секции должности */
.position-section .table-responsive {
    padding: 0;
    background: white;
    border-radius: 0 !important;
    overflow: hidden !important;
}

.position-section .specialists-table {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.position-section .specialists-table thead th {
    background: #f8fafc !important;
}

.position-section .specialists-table tbody tr:last-child td:first-child {
    border-bottom-left-radius: var(--radius-md);
}

.position-section .specialists-table tbody tr:last-child td:last-child {
    border-bottom-right-radius: var(--radius-md);
}

/* === ЛЕГЕНДА === */

.legend-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2);
    border-radius: var(--radius-sm);
    transition: var(--transition-fast);
}

.legend-item:hover {
    background: rgba(102, 126, 234, 0.05);
}

.legend-color {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}

.legend-color::after {
    content: '';
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.8;
}

/* === АДАПТИВНОСТЬ === */

@media (max-width: 768px) {
    .specialists-table {
        font-size: 12px;
    }
    
    .specialists-table th:first-child,
    .specialists-table td:first-child {
        width: 180px;
        min-width: 180px;
    }
    
    .specialists-table th:not(:first-child),
    .specialists-table td:not(:first-child) {
        width: 70px;
    }
    
    .specialist-avatar,
    .schedule-time {
        display: none;
    }
}

/* ============================================
   REPLACEMENT PAYMENT PAGE (Оплата замен специалистам)
   ============================================ */

/* === КАРТОЧКИ С ТАБЛИЦАМИ === */

/* Убираем padding у card-body для таблиц на странице оплаты замен */
#replacementPaymentTabContent .card {
    border: none !important;
    box-shadow: 0 0 0 1px var(--color-border), var(--shadow-sm) !important;
    border-radius: var(--radius-lg) !important;
    overflow: hidden !important;
}

#replacementPaymentTabContent .card-body {
    padding: 0 !important;
}

#replacementPaymentTabContent .zakupki-table-wrapper {
    margin: 0;
    border-radius: 0 !important;
    overflow: hidden;
}

/* Убираем собственные border/radius таблицы — карточка уже клипает углы */
#replacementPaymentTabContent .zakupki-table,
#replacementPaymentTabContent .table.table-bordered {
    border: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    box-shadow: none !important;
}

/* Нижний разделитель между строками таблицы */
#replacementPaymentTabContent .zakupki-table tbody tr td {
    border-bottom: 1px solid #e5e7eb !important;
}
#replacementPaymentTabContent .zakupki-table tbody tr:last-child td {
    border-bottom: none !important;
}

/* === ЗАГОЛОВКИ ГРУПП В ТАБЛИЦАХ === */

.table-group-header {
    background: rgba(102, 126, 234, 0.12) !important;
    font-weight: 600;
    border-bottom: 1px solid rgba(102, 126, 234, 0.2) !important;
}

.table-group-header:hover {
    background: rgba(102, 126, 234, 0.15) !important;
}

/* === ИТОГОВЫЕ СТРОКИ В ТАБЛИЦАХ === */

.table-total-footer {
    background: var(--color-soft) !important;
    font-weight: 600;
    border-top: 2px solid var(--color-primary) !important;
    border-bottom: 1px solid rgba(102, 126, 234, 0.2) !important;
}

.table-total-footer:hover {
    background: rgba(102, 126, 234, 0.08) !important;
}

/* Итоговая строка с более толстой границей */
.table-total-footer.grand-total {
    border-top: 3px solid var(--color-primary) !important;
    background: rgba(102, 126, 234, 0.15) !important;
}

.table-total-footer.grand-total:hover {
    background: rgba(102, 126, 234, 0.18) !important;
}

/* === ЦВЕТОВЫЕ АКЦЕНТЫ === */

/* Акцентный цвет для сумм к выплате */
.text-amount-accent {
    color: var(--color-primary);
    font-weight: 600;
}

/* Увеличенный размер для итоговых сумм */
.text-amount-large {
    font-size: 1.1em;
}

.text-amount-xlarge {
    font-size: 1.2em;
}

/* === АЛЕРТЫ С ФИКСИРОВАННОЙ ПОЗИЦИЕЙ === */

.alert.position-fixed {
    z-index: 999;
}

/* ============================================
   ADMIN PANEL PAGE (Управление пользователями)
   ============================================ */

/* === ЗАГОЛОВКИ СЕКЦИЙ === */

#userTabsContent h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text);
    margin-top: var(--space-5);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-2);
    border-bottom: 2px solid var(--color-border);
}

/* Первый заголовок без верхнего отступа */
#userTabsContent h3:first-of-type {
    margin-top: 0;
}

/* Цветные шапки секций админ-панели не должны наследовать общий стиль h3 */
#userTabsContent .ap-section-head {
    min-height: 48px !important;
    padding: 10px 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

#userTabsContent .ap-section-head h3 {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: var(--space-2) !important;
    line-height: 1 !important;
    color: #fff !important;
}

#userTabsContent .ap-section-head .fa-icon-pill,
#userTabsContent .ap-section-head .ap-count-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

/* === ТАБЛИЦЫ ПОЛЬЗОВАТЕЛЕЙ === */

/* Строки таблицы с курсором pointer для кликабельности */
.user-row {
    cursor: pointer;
    transition: all 0.2s ease;
}

.user-row:hover {
    background: rgba(102, 126, 234, 0.08) !important;
    transform: translateX(2px);
}

/* === МОДАЛЬНЫЕ ОКНА === */

/* Группы полей в модальных окнах */
.form-group {
    margin-bottom: var(--space-4);
}

.form-group label {
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--space-2);
    display: block;
}

/* Специальные группы полей (branches, specialist-fields, schedule) */
.branches-group,
.specialist-fields-group,
.schedule-group {
    padding: var(--space-4);
    background: var(--color-soft);
    border-radius: var(--radius-md);
    margin-top: var(--space-3);
}

/* Кнопки в модальных окнах - выравнивание */
.edit-user-form button[type="submit"],
.edit-specialist-form button[type="submit"] {
    margin-top: 0 !important;
    margin-right: var(--space-2);
    display: inline-block;
    vertical-align: top;
}

/* Контейнер для кнопок формы */
.edit-user-form,
.edit-specialist-form {
    display: block;
}

/* Обертка для кнопок - выравнивание */
.modal-body form > button[type="submit"] {
    margin-top: var(--space-4) !important;
}

/* Все кнопки submit на одной линии */
.modal-body form > button[type="submit"]:not(:last-of-type) {
    margin-right: var(--space-2);
}

/* Убираем mt-3 класс */
.modal-body .mt-3 {
    margin-top: 0 !important;
}

/* Выравнивание кнопок в футере модального окна */
.modal-footer {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
}

.modal-footer .btn {
    margin: 0 !important;
    flex-shrink: 0 !important;
}

/* Группа кнопок слева в footer */
.modal-footer .btn-group-left {
    display: flex !important;
    gap: 8px !important;
    margin-right: auto !important;
}

/* Группа кнопок справа в footer */
.modal-footer .btn-group-right {
    display: flex !important;
    gap: 8px !important;
    margin-left: auto !important;
}

/* Кнопка заблокировать - слева */
.modal-footer .block-user-btn,
.modal-footer .block-specialist-btn {
    margin-right: auto !important;
}

/* ========================================
   ЕДИНЫЙ СТИЛЬ ДЛЯ ВСЕХ ПОЛЕЙ ВВОДА И СЕЛЕКТОВ
   ======================================== */

/* Базовые стили для всех полей ввода */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="search"],
input[type="tel"],
input[type="url"],
textarea,
select,
.form-control,
.form-select {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    background: white;
    font-size: 14px;
    font-family: var(--font-family-base);
    color: var(--color-text);
    transition: all 0.2s ease;
    line-height: 1.5;
}

/* Placeholder стиль */
input::placeholder,
textarea::placeholder,
.form-control::placeholder {
    color: #9ca3af;
    opacity: 1;
}

/* Hover состояние */
input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="number"]:hover,
input[type="date"]:hover,
input[type="time"]:hover,
input[type="search"]:hover,
input[type="tel"]:hover,
input[type="url"]:hover,
textarea:hover,
select:hover,
.form-control:hover,
.form-select:hover {
    border-color: #cbd5e1;
}

/* Focus состояние - единый стиль для всех */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus,
.form-control:focus,
.form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    outline: none;
    background: white;
}

/* Disabled состояние */
input:disabled,
textarea:disabled,
select:disabled,
.form-control:disabled,
.form-select:disabled {
    background-color: #f3f4f6;
    color: #9ca3af;
    cursor: not-allowed;
    border-color: #e5e7eb;
}

/* Select стрелка */
select,
.form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 12px;
    padding-right: 40px;
    cursor: pointer;
}

/* Textarea */
textarea,
textarea.form-control {
    min-height: 100px;
    resize: vertical;
}

/* Input Group - для поисковых строк с кнопками */
.input-group {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.input-group .form-control,
.input-group input {
    flex: 1;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* Убираем двойные границы в input-group */
.input-group .form-control:not(:last-child),
.input-group input:not(:last-child) {
    border-right: none;
}

.input-group .btn:not(:first-child) {
    margin-left: -1px;
}

/* Чекбоксы в модальных окнах */
.form-check {
    margin-bottom: var(--space-2);
    padding-left: 1.75rem;
    display: flex;
    align-items: center;
    min-height: 1.5rem;
}

.form-check-input {
    cursor: pointer;
    width: 1.125rem;
    height: 1.125rem;
    margin-top: 0;
    margin-left: -1.75rem;
    margin-right: 0.5rem;
    border: 2px solid var(--color-border);
    border-radius: 4px;
    transition: all 0.2s ease;
    flex-shrink: 0;
    float: none;
    position: relative;
}

.form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.form-check-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    outline: none;
}

.form-check-label {
    cursor: pointer;
    user-select: none;
    font-size: 14px;
    color: var(--color-text);
    line-height: 1.5;
    margin-bottom: 0;
    padding-top: 0;
}

/* Подсказки под полями */
.form-group small.text-muted {
    display: block;
    margin-top: var(--space-1);
    font-size: 12px;
    color: var(--color-muted);
    font-style: italic;
}

/* Контейнеры чекбоксов */
.roles-checkboxes,
.branches-checkboxes {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* Стиль для чекбоксов с рамкой */
.roles-checkboxes .form-check,
.branches-checkboxes .form-check {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 12px 16px;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    transition: all 0.2s ease;
    cursor: pointer;
}

.roles-checkboxes .form-check:hover,
.branches-checkboxes .form-check:hover {
    border-color: var(--color-primary);
    background: rgba(102, 126, 234, 0.05);
    transform: translateX(4px);
}

.roles-checkboxes .form-check:has(input:checked),
.branches-checkboxes .form-check:has(input:checked) {
    border-color: var(--color-primary);
    background: rgba(102, 126, 234, 0.1);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15);
}

.roles-checkboxes .form-check-label,
.branches-checkboxes .form-check-label {
    cursor: pointer;
    user-select: none;
    margin: 0;
    font-weight: 500;
    color: var(--color-text);
    line-height: 1.35;
}

.roles-checkboxes .form-check-input,
.branches-checkboxes .form-check-input {
    flex: 0 0 auto;
    float: none;
    cursor: pointer;
    width: 20px;
    height: 20px;
    margin: 0;
}

/* Специальные группы - улучшенный стиль */
.branches-group,
.specialist-fields-group,
.schedule-group {
    padding: var(--space-4);
    background: rgba(102, 126, 234, 0.05);
    border-radius: var(--radius-md);
    margin-top: var(--space-3);
    border: 1px solid rgba(102, 126, 234, 0.1);
}

.branches-group label:first-child,
.specialist-fields-group > label:first-child,
.schedule-group > label:first-child {
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: var(--space-3);
}

/* === ШИРИНА КОЛОНОК В ТАБЛИЦАХ ADMIN === */

/* Принудительно table-layout: fixed для всех таблиц на admin */
#userTabsContent .zakupki-table {
    table-layout: fixed !important;
    width: 100% !important;
}

/* Сброс стилей zakupki-table для admin panel */
#userTabsContent .zakupki-table th,
#userTabsContent .zakupki-table td {
    white-space: normal !important;
    word-break: break-word !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.4 !important;
    padding: 10px 8px !important;
    font-size: 13px !important;
    vertical-align: middle !important;
}

#userTabsContent .zakupki-table th {
    font-size: 12px !important;
    font-weight: 600 !important;
}

/* Таблицы активных пользователей - 6 столбцов: ФИО, Email, Телефон, Дата рожд., Должность, Роль */
#active #userTabsContent .zakupki-table th:nth-child(1),
#active #userTabsContent .zakupki-table td:nth-child(1),
#active .zakupki-table th:nth-child(1),
#active .zakupki-table td:nth-child(1) {
    width: 22% !important; /* ФИО */
}

#active .zakupki-table th:nth-child(2),
#active .zakupki-table td:nth-child(2) {
    width: 22% !important; /* Email */
}

#active .zakupki-table th:nth-child(3),
#active .zakupki-table td:nth-child(3) {
    width: 14% !important; /* Телефон */
}

#active .zakupki-table th:nth-child(4),
#active .zakupki-table td:nth-child(4) {
    width: 12% !important; /* Дата рождения */
    text-align: center !important;
}

#active .zakupki-table th:nth-child(5),
#active .zakupki-table td:nth-child(5) {
    width: 16% !important; /* Должность */
}

#active .zakupki-table th:nth-child(6),
#active .zakupki-table td:nth-child(6) {
    width: 14% !important; /* Роль */
}

/* Таблицы заблокированных - 8 столбцов: ФИО, Email, Телефон, Дата рожд., Должность, Роль, Статус, Действия */
#blocked .zakupki-table th:nth-child(1),
#blocked .zakupki-table td:nth-child(1) {
    width: 19% !important; /* ФИО */
}

#blocked .zakupki-table th:nth-child(2),
#blocked .zakupki-table td:nth-child(2) {
    width: 18% !important; /* Email */
}

#blocked .zakupki-table th:nth-child(3),
#blocked .zakupki-table td:nth-child(3) {
    width: 12% !important; /* Телефон */
}

#blocked .zakupki-table th:nth-child(4),
#blocked .zakupki-table td:nth-child(4) {
    width: 10% !important; /* Дата рождения */
    text-align: center !important;
}

#blocked .zakupki-table th:nth-child(5),
#blocked .zakupki-table td:nth-child(5) {
    width: 14% !important; /* Должность */
}

#blocked .zakupki-table th:nth-child(6),
#blocked .zakupki-table td:nth-child(6) {
    width: 11% !important; /* Роль */
}

#blocked .zakupki-table th:nth-child(7),
#blocked .zakupki-table td:nth-child(7) {
    width: 9% !important; /* Статус */
    text-align: center !important;
}

#blocked .zakupki-table th:nth-child(8),
#blocked .zakupki-table td:nth-child(8) {
    width: 7% !important; /* Действия */
    text-align: center !important;
}

/* Email — разрешаем перенос, уменьшаем шрифт */
#userTabsContent .zakupki-table td:nth-child(2) {
    font-size: 12px !important;
}

/* Телефон — компактный */
#userTabsContent .zakupki-table td:nth-child(3) {
    font-size: 12px !important;
    white-space: nowrap !important;
}

/* === КНОПКИ === */

.add-user-button {
    background: var(--gradient-primary);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: var(--radius-md);
    font-weight: 600;
    transition: all 0.2s ease;
}

.add-user-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    color: white;
}

/* Компактные кнопки в таблицах */
#userTabsContent .btn-sm {
    padding: 4px 8px;
    font-size: 0.875rem;
    min-width: 32px;
}

/* Кнопки разблокировки - только иконка */
.unblock-user-btn,
.unblock-specialist-btn {
    padding: 6px 10px;
}

/* Колонки действий и статуса управляются через #active / #blocked nth-child выше */

/* ============================================
   SPECIALIST SCHEDULE PAGE (Расписание работы специалиста)
   ============================================ */

/* === БЛОК ЗАНЯТИЙ СПЕЦИАЛИСТА === */

.lessons-card {
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    border: none;
    overflow: hidden;
    transition: all 0.3s ease;
}

.lessons-card:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.lessons-card-header {
    background: var(--gradient-primary) !important;
    color: #ffffff !important;
    padding: var(--space-5) !important;
    border-bottom: none !important;
}

.lessons-card-header h5 {
    color: #ffffff !important;
    font-weight: var(--font-weight-semibold) !important;
    font-size: 1.25rem !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: var(--space-3) !important;
}

.lessons-card-header h5,
.lessons-card-header h5 *,
.lessons-card-header h5 i.fas {
    color: #ffffff !important;
}

.lessons-card-header h5 i {
    font-size: 1.5rem !important;
    color: #ffffff !important;
}

/* Сетка занятий */
.lessons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.lesson-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-sm);
}

.lesson-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-primary);
}

.lesson-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    background: var(--gradient-primary);
    border-radius: var(--radius-sm);
    color: #ffffff;
    font-size: var(--font-size-md);
    flex-shrink: 0;
}

.lesson-content {
    flex: 1;
    min-width: 0;
}

.lesson-name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    line-height: 1.4;
    margin-bottom: var(--space-1);
    word-wrap: break-word;
}

.lesson-id {
    font-size: var(--font-size-xs);
    color: var(--color-muted);
    font-weight: var(--font-weight-medium);
}

/* Информационный блок */
.lessons-info {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3);
    background: rgba(6, 182, 212, 0.08);
    border-left: 3px solid var(--color-info);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    color: var(--color-muted);
    line-height: 1.5;
}

.lessons-info i {
    color: var(--color-info);
    margin-top: 2px;
    flex-shrink: 0;
}

/* Пустое состояние */
.lessons-empty {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    background: rgba(6, 182, 212, 0.08);
    border-left: 3px solid var(--color-info);
    border-radius: var(--radius-sm);
}

.lessons-empty i {
    color: var(--color-info);
    font-size: var(--font-size-lg);
    margin-top: 2px;
    flex-shrink: 0;
}

.lessons-empty strong {
    display: block;
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-2);
    font-size: var(--font-size-md);
}

.lessons-empty p {
    margin: 0;
    color: var(--color-muted);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

/* === КАРТОЧКИ РАСПИСАНИЯ ПО ДНЯМ === */

.day-schedule-card {
    border: 2px solid var(--color-border);
    border-radius: 12px;
    padding: var(--space-4);
    padding-left: calc(var(--space-4) + 8px); /* Дополнительный отступ слева для полоски */
    background: white;
    height: 100%;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.day-schedule-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--color-border);
    transition: all 0.3s ease;
}

.day-schedule-card:hover {
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.15);
    border-color: var(--color-primary);
    transform: translateY(-2px);
}

.day-schedule-card:hover::before {
    background: var(--gradient-primary);
    width: 6px;
}

/* Активный день (когда чекбокс отмечен) */
.day-schedule-card:has(.form-check-input:checked) {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.03) 100%);
    border-color: rgba(102, 126, 234, 0.3);
}

.day-schedule-card:has(.form-check-input:checked)::before {
    background: var(--gradient-primary);
    width: 6px;
}

.day-schedule-card .form-check {
    margin-bottom: 0 !important;
    display: flex;
    align-items: center;
    min-height: auto;
    padding-left: 12px !important; /* Комфортный отступ от левого края */
}

.day-schedule-card .form-check-input {
    margin-top: 0;
    margin-left: 0;
    margin-right: 0.75rem;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--color-border);
    border-radius: 6px;
    flex-shrink: 0;
    float: none;
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
}

.day-schedule-card .form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
}

.day-schedule-card .form-check-input:hover {
    border-color: var(--color-primary);
}

.day-schedule-card .form-check-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.2);
    outline: none;
}

.day-schedule-card .form-check-label {
    color: var(--color-text);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 0;
    cursor: pointer;
    user-select: none;
}

/* Поля времени */
.time-inputs {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid rgba(102, 126, 234, 0.15);
}

.time-inputs .form-label {
    margin-bottom: var(--space-2);
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: 600;
}

/* time-inputs наследует глобальные стили */
.time-inputs .form-control {
    font-weight: 600;
}

/* Кнопка копирования расписания */
.copy-schedule-btn {
    margin-left: var(--space-2);
}

/* === КАРТОЧКИ ФИЛИАЛОВ === */

/* Карточки филиалов на странице расписания */
.specialist-schedule-page .card {
    border: none !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
    border-radius: 16px !important;
    margin-bottom: var(--space-5);
    overflow: hidden;
    transition: all 0.3s ease;
}

.specialist-schedule-page .card:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-2px);
}

.specialist-schedule-page .card-header {
    background: var(--gradient-primary) !important;
    color: white !important;
    padding: var(--space-5) !important;
    border-bottom: none !important;
}

.specialist-schedule-page .card-header h5 {
    color: white !important;
    font-weight: var(--font-weight-semibold);
    font-size: 1.25rem;
    margin: 0 !important;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.specialist-schedule-page .card-header h5 i {
    color: white !important;
    font-size: 1.5rem;
}

.specialist-schedule-page .card-header small {
    display: block;
    margin-top: var(--space-2);
    opacity: 0.95;
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.9) !important;
}

.specialist-schedule-page .card-body {
    padding: var(--space-5) !important;
    background: white;
}

/* Форма расписания */
.schedule-form .row {
    margin-left: calc(-1 * var(--space-2));
    margin-right: calc(-1 * var(--space-2));
}

.schedule-form .row > [class*="col-"] {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
}

/* Кнопки формы */
.specialist-schedule-page .btn-primary {
    background: var(--gradient-primary);
    border: none;
    padding: 12px 24px;
    font-weight: 600;
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
}

.specialist-schedule-page .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.specialist-schedule-page .btn-outline-secondary {
    border: 2px solid var(--color-border);
    color: var(--color-text);
    padding: 12px 24px;
    font-weight: 600;
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
}

.specialist-schedule-page .btn-outline-secondary:hover {
    background: var(--color-soft);
    border-color: var(--color-primary);
    color: var(--color-primary);
    transform: translateY(-2px);
}

/* === АДАПТИВНОСТЬ === */

@media (max-width: 768px) {
    .lessons-grid {
        grid-template-columns: 1fr;
    }
    
    .day-schedule-card {
        margin-bottom: var(--space-3);
    }
    
    .copy-schedule-btn {
        margin-left: 0;
        margin-top: var(--space-2);
        width: 100%;
    }
    
    .lesson-item {
        padding: var(--space-2);
    }
}

/* === ФИЛЬТРЫ И КНОПКИ === */

/* Стилизация фильтров по месяцам */
#replacementPaymentTabContent .form-label {
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--space-2);
}

#replacementPaymentTabContent input[type="month"] {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 8px 12px;
    transition: all 0.2s ease;
}

#replacementPaymentTabContent input[type="month"]:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    outline: none;
}

/* ========================================
   МОДАЛЬНЫЕ ОКНА - УНИФИЦИРОВАННЫЕ СТИЛИ

/* ========================================
   КРИТИЧНОЕ ПЕРЕОПРЕДЕЛЕНИЕ МОДАЛЬНЫХ ОКОН
   ЕДИНЫЙ СТИЛЬ ДЛЯ ВСЕХ КНОПОК В МОДАЛЬНЫХ ОКНАХ
   ======================================== */

/* ВСЕ кнопки в модальных окнах - КОМПАКТНЫЙ КРАСИВЫЙ СТИЛЬ */
.modal .modal-body a.btn,
.modal .modal-body .btn,
.modal .modal-body a.btn-outline-secondary,
.modal .modal-body .btn-outline-secondary,
.modal .modal-body a.btn-outline-primary,
.modal .modal-body .btn-outline-primary,
.modal-body a[class*="btn-outline"],
.modal-body button[class*="btn-outline"],
.modal-dialog .modal-body a.btn,
.modal-dialog .modal-body .btn,
.modal-content .modal-body a,
.modal-content .modal-body button {
    /* Базовые стили */
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    padding: 8px 16px !important;
    margin-bottom: 8px !important;
    margin-right: 8px !important;
    
    /* Визуальные стили - ФИОЛЕТОВАЯ ОБВОДКА */
    background: white !important;
    background-color: white !important;
    background-image: none !important;
    color: #667eea !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: #667eea !important;
    border-radius: 8px !important;
    outline: none !important;
    
    /* Типографика */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    text-align: center !important;
    text-decoration: none !important;
    
    /* Эффекты */
    box-shadow: 0 2px 4px rgba(102, 126, 234, 0.15) !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    min-height: 36px !important;
    gap: 6px !important;
}

/* Hover эффект - ОДИНАКОВЫЙ для всех кнопок */
.modal .modal-body a.btn:hover,
.modal .modal-body .btn:hover,
.modal .modal-body a.btn-outline-secondary:hover,
.modal .modal-body .btn-outline-secondary:hover,
.modal .modal-body a.btn-outline-primary:hover,
.modal .modal-body .btn-outline-primary:hover,
.modal-body a[class*="btn-outline"]:hover,
.modal-body button[class*="btn-outline"]:hover,
.modal-dialog .modal-body a.btn:hover,
.modal-dialog .modal-body .btn:hover {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
    border-color: #764ba2 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4) !important;
}

/* Убираем стандартные Bootstrap эффекты */
.modal .modal-body .btn:active,
.modal .modal-body .btn:focus,
.modal .modal-body .btn:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2) !important;
}

/* ========================================
   ФИНАЛЬНОЕ ПЕРЕОПРЕДЕЛЕНИЕ - МАКСИМАЛЬНЫЙ ПРИОРИТЕТ
   Этот блок ДОЛЖЕН быть последним в файле!
   ======================================== */

/* Специфичный селектор для кнопок в модальном окне "Настройки" */
#settingsModal .modal-body a.btn-outline-secondary,
#settingsModal .modal-body a[href*="settings"],
#settingsModal .modal-body a[href*="protocol"],
#settingsModal .modal-body a[href*="branches"],
#settingsModal .modal-body a[href*="positions"],
#settingsModal .modal-body a[href*="lessons"],
#settingsModal .modal-body a[href*="roles"] {
    background: white !important;
    background-color: #ffffff !important;
    background-image: none !important;
    color: #667eea !important;
    border: 1px solid #667eea !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: #667eea !important;
    border-radius: 8px !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-align: center !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    box-shadow: 0 2px 4px rgba(102, 126, 234, 0.15) !important;
    transition: all 0.3s ease !important;
    margin-bottom: 8px !important;
    margin-right: 8px !important;
    min-height: 36px !important;
    gap: 6px !important;
}

#settingsModal .modal-body a.btn-outline-secondary:hover,
#settingsModal .modal-body a:hover {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    background-color: #667eea !important;
    background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
    border-color: #764ba2 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4) !important;
}

/* Специфичный селектор для кнопок в модальном окне "Администраторы" */
#adminsModal .modal-body a.btn-outline-primary,
#adminsModal .modal-body a[href*="admin"] {
    background: white !important;
    background-color: #ffffff !important;
    background-image: none !important;
    color: #667eea !important;
    border: 1px solid #667eea !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: #667eea !important;
    border-radius: 8px !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-align: center !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    box-shadow: 0 2px 4px rgba(102, 126, 234, 0.15) !important;
    transition: all 0.3s ease !important;
    margin-bottom: 8px !important;
    margin-right: 8px !important;
    min-height: 36px !important;
    gap: 6px !important;
}

#adminsModal .modal-body a.btn-outline-primary:hover,
#adminsModal .modal-body a:hover {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    background-color: #667eea !important;
    background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
    border-color: #764ba2 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4) !important;
}

/* ========================================
   PROTOCOL TEMPLATES STYLES
   Унифицированные стили для страниц протоколов
   Используют глобальные переменные из основной дизайн-системы
   ======================================== */

/* Базовые стили страницы протоколов */
.protocol-page {
    font-family: var(--font-family-base);
    font-size: var(--font-size-md);
    line-height: 1.5;
}

/* Карточки протоколов - улучшенный стиль */
.protocol-card {
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    background: white;
    overflow: hidden;
}

.protocol-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
}

.protocol-card-header {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
    font-weight: 600;
    padding: 20px 24px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 2px solid #e2e8f0;
}

.protocol-card-header .card-title {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-primary);
    display: flex;
    align-items: center;
    gap: 10px;
}

.protocol-card-body {
    padding: 24px;
    flex: 1;
    background: white;
}

.protocol-card-footer {
    margin-top: auto;
    padding: 20px 24px;
    background: linear-gradient(135deg, #fafbfc 0%, #f8f9fa 100%);
    border-top: 1px solid #e2e8f0;
}

/* Кнопки протоколов - используют глобальный стиль */
.protocol-btn {
    font-size: var(--font-size-sm);
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    transition: var(--transition-button);
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: var(--shadow-button);
}

.protocol-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-button-hover);
}

/* Primary кнопка */
.protocol-btn.btn-primary,
.protocol-btn.btn-success {
    background: var(--gradient-primary);
    color: white;
    border: none;
}

.protocol-btn.btn-primary:hover,
.protocol-btn.btn-success:hover {
    background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
    color: white;
}

/* Secondary кнопка */
.protocol-btn.btn-secondary {
    background: var(--gradient-secondary);
    color: white;
    border: none;
}

.protocol-btn.btn-secondary:hover {
    background: linear-gradient(135deg, var(--color-secondary-2) 0%, #374151 100%);
    color: white;
}

/* Outline варианты для протоколов */
.protocol-btn.btn-outline-primary {
    background: white;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15);
}

.protocol-btn.btn-outline-primary:hover {
    background: var(--gradient-primary);
    color: white;
    border-color: var(--color-primary-2);
    transform: translateY(-2px);
}

.protocol-btn.btn-outline-success {
    background: white;
    color: var(--color-success);
    border: 2px solid var(--color-success);
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.15);
}

.protocol-btn.btn-outline-success:hover {
    background: var(--gradient-success);
    color: white;
    border-color: var(--color-success-2);
    transform: translateY(-2px);
}

/* Поля ввода протоколов - улучшенный стиль */
.protocol-form-control {
    border-radius: var(--radius-sm);
    font-size: var(--font-size-md);
    padding: 12px 16px;
    border: 2px solid var(--color-border);
    transition: var(--transition);
    background: white;
}

.protocol-form-control:hover {
    border-color: var(--color-primary);
}

.protocol-form-control:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
    outline: none;
}

/* Label для форм */
.protocol-form-label {
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--space-2);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Бейджи протоколов - улучшенный стиль */
.protocol-badge {
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 20px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.protocol-badge.bg-secondary {
    background: var(--gradient-secondary) !important;
    color: white;
}

/* Алерты протоколов - улучшенный стиль */
.protocol-alert {
    border: none;
    border-radius: var(--radius-md);
    padding: 20px 24px;
    border-left: 4px solid;
    box-shadow: var(--shadow-sm);
}

.protocol-alert.alert-info {
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
    border-left-color: var(--color-info);
    color: #0c4a6e;
}

/* Модальные окна протоколов */
.protocol-modal-content {
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.protocol-modal-header {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: var(--space-6);
}

/* Таблицы протоколов - стиль Excel с видимыми границами */
.protocol-table {
    border-radius: var(--radius-md);
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #dee2e6;
}

.protocol-table th {
    background-color: var(--color-soft);
    font-weight: 600;
    padding: var(--space-4);
    border: 1px solid #dee2e6;
    border-bottom: 2px solid #adb5bd;
}

.protocol-table td {
    padding: var(--space-4);
    border: 1px solid #dee2e6;
}

/* Убираем двойные границы */
.protocol-table th:not(:first-child),
.protocol-table td:not(:first-child) {
    border-left: 1px solid #dee2e6;
}

.protocol-table tbody tr:not(:first-child) th,
.protocol-table tbody tr:not(:first-child) td {
    border-top: 1px solid #dee2e6;
}

/* === КОМПАКТНЫЕ СТИЛИ ДЛЯ БЛОКА ДЕЙСТВИЙ В ОДИН РЯД === */
.protocol-actions-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.protocol-actions-single-row {
    display: flex;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}

.protocol-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
    border: none;
    border-radius: 10px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    transition: var(--transition);
    cursor: pointer;
    min-width: 44px;
    height: 44px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-button);
    flex: 1;
    max-width: 70px;
}

.protocol-action-btn:hover {
    transform: translateY(-3px);
    text-decoration: none;
    box-shadow: var(--shadow-button-hover);
}

.protocol-action-btn:active {
    transform: translateY(0);
}

.protocol-action-btn i {
    font-size: 16px;
    transition: var(--transition);
}

/* Убираем текст, оставляем только иконки для компактности */
.protocol-action-btn span {
    display: none;
}

/* Современные градиентные стили кнопок - используют глобальные градиенты */
.protocol-btn-edit {
    background: var(--gradient-info);
    color: white;
}

.protocol-btn-edit:hover {
    background: linear-gradient(135deg, var(--color-info-2) 0%, #0e7490 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(6, 182, 212, 0.4);
}

.protocol-btn-duplicate {
    background: var(--gradient-success);
    color: white;
}

.protocol-btn-duplicate:hover {
    background: linear-gradient(135deg, var(--color-success-2) 0%, #15803d 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(34, 197, 94, 0.4);
}

.protocol-btn-delete {
    background: var(--gradient-danger);
    color: white;
}

.protocol-btn-delete:hover {
    background: linear-gradient(135deg, var(--color-danger-2) 0%, #b91c1c 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
}

.protocol-btn-print {
    background: var(--gradient-primary);
    color: white;
}

.protocol-btn-print:hover {
    background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

/* Современные анимации и эффекты */
.protocol-action-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
}

.protocol-action-btn:hover::before {
    left: 100%;
}

.protocol-action-btn:hover i {
    transform: scale(1.1);
}

/* Компактные анимации для маленьких кнопок */
.protocol-btn-edit:hover i {
    animation: compactEditPulse 0.4s ease-in-out;
}

.protocol-btn-duplicate:hover i {
    animation: compactDuplicateRotate 0.4s ease-in-out;
}

.protocol-btn-delete:hover i {
    animation: compactDeleteShake 0.4s ease-in-out;
}

.protocol-btn-print:hover i {
    animation: compactPrintBounce 0.4s ease-in-out;
}

@keyframes compactEditPulse {
    0%, 100% { transform: scale(1.1); }
    50% { transform: scale(1.2); }
}

@keyframes compactDuplicateRotate {
    0% { transform: scale(1.1) rotate(0deg); }
    50% { transform: scale(1.2) rotate(180deg); }
    100% { transform: scale(1.1) rotate(360deg); }
}

@keyframes compactDeleteShake {
    0%, 100% { transform: scale(1.1) translateX(0); }
    25% { transform: scale(1.2) translateX(-2px); }
    75% { transform: scale(1.2) translateX(2px); }
}

@keyframes compactPrintBounce {
    0%, 100% { transform: scale(1.1) translateY(0); }
    50% { transform: scale(1.2) translateY(-2px); }
}

/* Дополнительные эффекты для современного вида */
.protocol-action-btn {
    background-clip: padding-box;
}

.protocol-action-btn:hover {
    animation: buttonFloat 0.3s ease-out;
}

@keyframes buttonFloat {
    0% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
    100% { transform: translateY(-3px); }
}

/* Форма внутри кнопки */
.protocol-action-form {
    margin: 0;
    padding: 0;
    display: contents;
}

/* Адаптивность для компактных кнопок */
@media (max-width: 768px) {
    .protocol-actions-single-row {
        gap: 8px;
        justify-content: space-between;
    }
    
    .protocol-action-btn {
        min-width: 42px;
        height: 42px;
        max-width: none;
        flex: 1;
        padding: 10px;
    }
    
    .protocol-action-btn i {
        font-size: 16px;
    }
    
    /* На мобильных показываем подсказки при долгом нажатии */
    .protocol-action-btn:active {
        transform: scale(0.95);
    }
}

/* Дополнительные стили для очень маленьких экранов */
@media (max-width: 480px) {
    .protocol-actions-single-row {
        gap: 6px;
    }
    
    .protocol-action-btn {
        min-width: 38px;
        height: 38px;
        padding: 8px;
    }
    
    .protocol-action-btn i {
        font-size: 14px;
    }
}

/* Дополнительные стили для совместимости */
.protocol-card .card-header {
    border-bottom: 1px solid rgba(0,0,0,.125);
}

.protocol-badge.badge {
    font-size: 0.75em;
}

/* Улучшения для общих элементов карточек */
.protocol-card {
    transition: all var(--transition, 0.3s) ease;
}

.protocol-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md, 0 8px 24px rgba(0, 0, 0, 0.12));
}

/* Стили для заголовков карточек */
.protocol-card-header.bg-light {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
    border-bottom: 1px solid #e2e8f0;
}

.protocol-card-header .card-title {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold, 600);
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
}

.protocol-card-header .card-title i {
    color: var(--color-info);
}

/* === УЛУЧШЕННЫЕ СТИЛИ ДЛЯ ПОИСКОВОЙ СИСТЕМЫ === */
.input-group {
    border-radius: var(--radius-lg);
    overflow: visible;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-slow);
    border: 2px solid transparent;
    position: relative;
    z-index: 1;
}

.input-group:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.input-group:focus-within {
    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.2);
    border-color: var(--color-primary);
    transform: translateY(-1px);
}

.input-group-text {
    border: none;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    padding: 0.75rem 1rem;
    transition: all 0.3s ease;
    position: relative;
}

.input-group:focus-within .input-group-text {
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
}

.input-group-text i {
    transition: all 0.3s ease;
    color: #94a3b8;
}

.input-group:focus-within .input-group-text i {
    color: var(--color-primary);
    transform: scale(1.1);
}

#searchInput {
    border: none;
    padding: 0.75rem 1rem;
    font-size: var(--font-size-md);
    transition: all 0.3s ease;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    font-weight: 500;
}

#searchInput::placeholder {
    color: #94a3b8;
    font-weight: 400;
    transition: color 0.3s ease;
}

#searchInput:hover::placeholder {
    color: #64748b;
}

#searchInput:focus {
    outline: none;
    background: #ffffff;
    box-shadow: none;
}

#clearSearch {
    border: none;
    background: transparent;
    padding: 0.75rem 1rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: #94a3b8;
    font-weight: 600;
    position: relative;
    overflow: hidden;
}

#clearSearch::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: var(--color-danger);
    transform: translate(-50%, -50%);
    transition: width 0.3s ease, height 0.3s ease;
    z-index: -1;
}

#clearSearch:hover {
    color: white;
    border-color: transparent;
    background: transparent;
}

#clearSearch:hover::before {
    width: 120%;
    height: 200%;
}

#clearSearch:hover i {
    transform: rotate(90deg);
}

#clearSearch i {
    transition: transform 0.3s ease;
}

#clearSearch:focus {
    box-shadow: none;
    outline: none;
}

#clearSearch:active {
    transform: scale(0.95);
}

/* Анимация появления кнопки очистки */
@keyframes fadeInScale {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

#clearSearch[style*="display: block"] {
    animation: fadeInScale 0.2s ease-out;
}

/* Стили для счетчика результатов */
.text-muted small {
    font-weight: 500;
    letter-spacing: 0.3px;
}

#resultsCount {
    font-weight: 700;
    color: var(--color-primary);
    font-size: 1.1em;
    transition: all 0.3s ease;
}

#resultsText {
    color: #64748b;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
    .input-group {
        margin-bottom: 1rem;
    }
    
    .input-group-text {
        padding: 0.625rem 0.875rem;
    }
    
    #searchInput {
        padding: 0.625rem 0.875rem;
        font-size: 0.95rem;
    }
    
    #clearSearch {
        padding: 0.625rem 0.875rem;
    }
}

.template-card {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.template-card[style*="display: none"] {
    opacity: 0;
    transform: scale(0.95);
}

#noResultsMessage {
    width: 100%;
    display: none;
}

#templatesContainer {
    display: flex;
    flex-wrap: wrap;
}

/* ========================================
   PROTOCOL EDITOR STYLES
   Стили для редактора шаблонов протоколов
   ======================================== */

/* Дополнительные стили для label */
.protocol-form-label {
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--space-2);
}

/* Стили таблиц в редакторе */
.table th, .table td {
    vertical-align: top;
    padding: var(--space-2);
    text-align: left;
}

/* Контейнер редактора ячеек */
.cell-editor-container {
    position: relative;
    min-height: 40px;
}

/* Панель инструментов редактора */
.cell-editor-toolbar {
    position: absolute;
    top: 2px;
    right: 2px;
    display: none;
    z-index: 20;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: var(--radius-sm);
    padding: 2px;
    box-shadow: var(--shadow-sm);
    flex-wrap: wrap;
    max-width: calc(100% - 10px);
}

.cell-editor-container:hover .cell-editor-toolbar {
    display: flex;
    gap: 2px;
    flex-direction: row-reverse;
}

/* Для заголовков столбцов панель должна быть ниже кнопки удаления */
.cell-editor-container.resizable-column:hover .cell-editor-toolbar {
    top: 25px;
}

.cell-editor-toolbar .btn {
    padding: 0.15rem 0.3rem;
    font-size: 0.75rem;
    border: none;
    background: transparent;
}

.cell-editor-toolbar .btn-group {
    display: inline-flex;
    vertical-align: middle;
}

.cell-editor-toolbar .btn-group .btn {
    padding: 0.15rem 0.25rem;
}

.cell-editor-toolbar .btn:hover {
    background-color: var(--color-soft);
}

/* Редактор ячеек */
.cell-editor {
    min-height: 30px;
    padding: var(--space-2);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    outline: none;
    word-wrap: break-word;
    white-space: pre-wrap;
    font-family: var(--font-family-base);
    font-size: var(--font-size-md);
    text-align: left;
}

.cell-editor:focus {
    border-color: var(--color-primary);
    background-color: #fff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.cell-editor:empty:before {
    content: attr(data-placeholder);
    color: #999;
    pointer-events: none;
}

.cell-editor.header-editor {
    font-weight: bold;
    color: var(--color-text);
    text-align: left;
}

.cell-editor p {
    margin: 0.25rem 0;
}

.cell-editor p:first-child {
    margin-top: 0;
}

.cell-editor p:last-child {
    margin-bottom: 0;
}

.cell-editor strong, .cell-editor b {
    font-weight: bold;
}

/* Стили для списков в редакторе */
.cell-editor ul,
.cell-editor ol {
    margin: 0.5em 0;
    padding-left: 1.5em;
}

.cell-editor ul {
    list-style-type: disc;
}

.cell-editor ol {
    list-style-type: decimal;
}

.cell-editor li {
    margin: 0.25em 0;
    line-height: 1.4;
}

/* Принудительно применяем единый шрифт ко всему содержимому */
.cell-editor * {
    font-family: var(--font-family-base) !important;
}

.position-relative .btn {
    z-index: 10;
}

/* Изменяемые столбцы */
.resizable-column {
    position: relative;
}

.resize-handle {
    position: absolute;
    top: 0;
    right: 0;
    width: 5px;
    height: 100%;
    cursor: col-resize;
    background-color: transparent;
    z-index: 30;
    user-select: none;
    padding-right: 2px;
}

.resize-handle:hover {
    background-color: var(--color-primary);
    opacity: 0.5;
}

.resize-handle:active {
    background-color: var(--color-primary);
    opacity: 0.8;
}

.cell-editor-container:hover .resize-handle {
    background-color: rgba(0, 123, 255, 0.2);
}

.table-responsive {
    border-radius: var(--radius-md);
    overflow: hidden;
}

/* Специфичные стили для таблицы протоколов с границами */
.protocol-table.table-bordered {
    border: 1px solid #dee2e6;
}

.protocol-table.table-bordered th,
.protocol-table.table-bordered td {
    border: 1px solid #dee2e6;
}

.protocol-table.table-bordered thead th {
    border-bottom: 2px solid #adb5bd;
}

/* ========================================
   VIDEO FILE PICKER STYLES
   Стили для файлового проводника видео
   ======================================== */

.picker-folders-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 20px;
}

.picker-folder-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: white;
}

.picker-folder-item:hover {
    background: #f8f9fa;
    border-color: #007bff;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.2);
}

.picker-folder-item i {
    color: #ffc107;
    font-size: 20px;
}

.picker-videos-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 5px;
}

.picker-video-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    background: white;
    transition: all 0.2s ease;
}

.picker-video-item:hover {
    border-color: #007bff;
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.1);
    transform: translateX(4px);
}

.picker-video-item i {
    color: #dc3545;
    font-size: 24px;
    flex-shrink: 0;
}

.picker-video-item .flex-grow-1 {
    min-width: 0;
    overflow: hidden;
}

.picker-video-item .fw-bold {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ========================================
   BRANCHES PAGE STYLES
   Стили для страницы управления филиалами
   ======================================== */

/* Градиент для заголовков */
.bg-gradient-primary {
    background: var(--gradient-primary);
}

/* Карточки страницы */
.card {
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: var(--transition);
    position: relative;
    z-index: 1;
}

.card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.card-header {
    border: none;
    border-bottom: none;
    padding: 20px 24px;
    font-weight: 600;
}

.card-header.bg-gradient-primary {
    background: var(--gradient-primary);
    border: none;
    padding: 20px 24px;
    position: relative;
    overflow: hidden;
}

.card-header.bg-gradient-primary::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    animation: float-gradient 8s ease-in-out infinite;
}

@keyframes float-gradient {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(-10%, -10%) rotate(180deg); }
}

.card-header.bg-gradient-primary h5 {
    position: relative;
    z-index: 1;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.card-header.bg-light {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border-bottom: 3px solid transparent;
    border-image: linear-gradient(90deg, var(--color-primary), var(--color-info), var(--color-success)) 1;
    padding: 20px 24px;
    position: relative;
}

.card-header.bg-light::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-info) 50%, var(--color-success) 100%);
    opacity: 0.8;
}

.card-header.bg-light h5 {
    font-weight: 600;
    color: var(--color-text);
    letter-spacing: 0.3px;
}

.card-body {
    padding: 24px;
}

/* Элементы филиалов - обновлённый дизайн */
.branch-item {
    transition: var(--transition);
    border-bottom: 1px solid #e2e8f0 !important;
    position: relative;
}

.branch-item:last-child {
    border-bottom: none !important;
}

.branch-item:hover {
    background-color: rgba(102, 126, 234, 0.02);
}

.branch-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--gradient-primary);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.branch-item:hover::before {
    opacity: 1;
}

.branch-header {
    background: linear-gradient(135deg, #fafbfc 0%, #f3f4f6 100%) !important;
    border-bottom: 2px solid #e2e8f0;
    padding: 20px 24px !important;
}

.branch-header h6 {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text);
}

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

.branch-body {
    background-color: #fafbfc;
    padding: 20px !important;
}

.info-block {
    padding: 16px;
    border-radius: 10px;
    background: white;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
}

.info-block:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: #d1d5db;
}

.info-block strong {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
}

.info-block strong i {
    color: var(--color-primary);
    font-size: 14px;
}

.info-block ul {
    margin: 0;
    padding: 0;
}

.info-block li {
    padding: 6px 0;
    color: var(--color-text);
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.info-block li i {
    font-size: 12px;
    width: 16px;
}

/* Карточки кабинетов - компактный дизайн */
.room-card {
    border-left: 3px solid;
    border-radius: 8px;
    background: white;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    border-top: 1px solid #e5e7eb;
    border-right: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
}

.room-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    border-top-color: #d1d5db;
    border-right-color: #d1d5db;
    border-bottom-color: #d1d5db;
}

.room-card .card-body {
    padding: 10px 12px;
}

/* Контейнер с кнопками */
.room-card .d-flex {
    gap: 8px;
}

.room-card .flex-grow-1 {
    min-width: 0;
    flex: 1;
}

.room-card strong {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.room-card small {
    font-size: 11px;
    color: #6b7280;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Иконка статуса */
.room-card .fa-check-circle,
.room-card .fa-times-circle {
    font-size: 14px;
    flex-shrink: 0;
}

.room-status-active {
    color: var(--color-success);
    font-weight: bold;
}

.room-status-inactive {
    color: var(--color-danger);
    font-weight: bold;
}

/* === УЛУЧШЕННЫЕ СТИЛИ ДЛЯ СТРАНИЦЫ BRANCHES === */

/* Улучшенная карточка формы добавления филиала */
.card.shadow-sm.mb-4 {
    border: 1px solid rgba(102, 126, 234, 0.1);
    transition: all 0.3s ease;
}

.card.shadow-sm.mb-4:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(102, 126, 234, 0.15) !important;
}

/* Улучшенные поля формы */
/* card-body наследует глобальные стили */

.card-body .form-label {
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 8px;
    font-size: 14px;
}

/* Улучшенная кнопка отправки */
.card-body .btn-primary {
    background: var(--gradient-primary);
    border: none;
    padding: 12px 32px;
    font-weight: 600;
    border-radius: var(--radius-md);
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.card-body .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4);
}

.card-body .btn-primary:active {
    transform: translateY(0);
}

/* Улучшенный заголовок списка филиалов */
.card-header.bg-light {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
    border-bottom: none !important;
    padding: 24px !important;
    position: relative;
}

.card-header.bg-light::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, 
        var(--color-primary) 0%, 
        var(--color-info) 33%, 
        var(--color-success) 66%, 
        var(--color-warning) 100%);
    border-radius: 2px;
}

.card-header.bg-light h5 {
    font-weight: 700;
    color: var(--color-text);
    font-size: 18px;
    letter-spacing: 0.3px;
    margin: 0;
}

.card-header.bg-light h5 i {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 20px;
}

/* === КОМПАКТНЫЕ КНОПКИ В КАРТОЧКАХ КАБИНЕТОВ === */

/* Группа маленьких кнопок */
.room-card .btn-group-sm,
.room-card .btn-group.btn-group-sm {
    gap: 3px;
    display: flex;
    flex-shrink: 0;
}

/* Компактные кнопки редактирования и удаления */
.room-card .btn-sm.btn-outline-primary,
.room-card .btn-sm.btn-outline-danger {
    padding: 4px !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    border-width: 1.5px !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    flex-shrink: 0 !important;
}

/* Кнопка редактирования (синяя) */
.room-card .btn-sm.btn-outline-primary {
    background: rgba(102, 126, 234, 0.05) !important;
    color: var(--color-primary) !important;
    border-color: rgba(102, 126, 234, 0.3) !important;
}

.room-card .btn-sm.btn-outline-primary:hover {
    background: var(--color-primary) !important;
    color: white !important;
    border-color: var(--color-primary) !important;
    transform: scale(1.05) !important;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.25) !important;
}

/* Кнопка удаления (красная) */
.room-card .btn-sm.btn-outline-danger {
    background: rgba(239, 68, 68, 0.05) !important;
    color: var(--color-danger) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
}

.room-card .btn-sm.btn-outline-danger:hover {
    background: var(--color-danger) !important;
    color: white !important;
    border-color: var(--color-danger) !important;
    transform: scale(1.05) !important;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.25) !important;
}

/* Иконки в маленьких кнопках */
.room-card .btn-sm i {
    font-size: 12px !important;
    margin: 0 !important;
    transition: none;
}

/* Анимация при клике */
.room-card .btn-sm:active {
    transform: scale(0.95) !important;
}

/* Убираем лишние отступы */
.room-card .btn-group-sm .btn-sm {
    margin: 0 !important;
}

/* === СЕТКА КАБИНЕТОВ === */

/* Контейнер кабинетов */
.info-block .row.g-2 {
    margin: 0 -4px;
}

.info-block .row.g-2 > [class*="col-"] {
    padding: 0 4px;
    margin-bottom: 8px;
}

/* Адаптивность сетки */
@media (max-width: 991px) {
    .info-block .col-lg-4 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (max-width: 767px) {
    .info-block .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ========================================
   СТИЛИ ДЛЯ СТРАНИЦЫ ADMIN/LESSONS
   ======================================== */

/* Таблица уроков - используют единый стиль .table */

/* Бейджи в таблице уроков */
.lesson-row .badge.bg-success,
.lesson-row .badge-chip.success {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    color: white !important;
    border: none !important;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 6px;
}

.lesson-row .badge.bg-info,
.lesson-row .badge-chip.info {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%) !important;
    color: white !important;
    border: none !important;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 6px;
}

/* Модальные окна уроков */
#addLessonModal .modal-content,
#editLessonModal .modal-content {
    border: none;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

#addLessonModal .modal-header,
#editLessonModal .modal-header {
    background: var(--gradient-primary);
    color: white;
    padding: 16px 20px;
    border-radius: 12px 12px 0 0;
    border: none;
}

#addLessonModal .modal-header .modal-title,
#editLessonModal .modal-header .modal-title {
    font-size: 18px;
    font-weight: 600;
}

#addLessonModal .modal-header .btn-close,
#editLessonModal .modal-header .btn-close {
    filter: brightness(0) invert(1);
}

#addLessonModal .modal-body,
#editLessonModal .modal-body {
    padding: 20px;
}

#addLessonModal .modal-body .form-label,
#editLessonModal .modal-body .form-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 6px;
}

#addLessonModal .modal-body .form-control,
#addLessonModal .modal-body textarea.form-control,
#editLessonModal .modal-body .form-control,
#editLessonModal .modal-body textarea.form-control {
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 14px;
    transition: all 0.2s ease;
}

#addLessonModal .modal-body .form-control:focus,
#addLessonModal .modal-body textarea.form-control:focus,
#editLessonModal .modal-body .form-control:focus,
#editLessonModal .modal-body textarea.form-control:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    outline: none;
}

#addLessonModal .modal-body .form-text,
#editLessonModal .modal-body .form-text {
    font-size: 12px;
    color: #6b7280;
    margin-top: 4px;
}

#addLessonModal .modal-footer,
#editLessonModal .modal-footer {
    padding: 16px 20px;
    border-top: 1px solid #e5e7eb;
}

#addLessonModal .modal-footer .btn-success,
#editLessonModal .modal-footer .btn-primary {
    background: var(--gradient-primary);
    border: none;
    padding: 10px 20px;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.2s ease;
}

#addLessonModal .modal-footer .btn-success:hover,
#editLessonModal .modal-footer .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

#editLessonModal .modal-footer .btn-danger {
    background: var(--gradient-danger);
    border: none;
    padding: 10px 20px;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.2s ease;
}

#editLessonModal .modal-footer .btn-danger:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

#addLessonModal .modal-footer .btn-secondary,
#editLessonModal .modal-footer .btn-secondary {
    background: #6b7280;
    border: none;
    padding: 10px 20px;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.2s ease;
}

#addLessonModal .modal-footer .btn-secondary:hover,
#editLessonModal .modal-footer .btn-secondary:hover {
    background: #4b5563;
    transform: translateY(-2px);
}

/* Карточка с таблицей */
.table-responsive {
    border-radius: 8px;
    overflow: hidden;
}

/* ========================================
   СТИЛИ ДЛЯ СТРАНИЦЫ ADMIN/POSITIONS
   ======================================== */

/* Общие стили для кнопок на всю ширину */
.btn-block {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Форма добавления должности */
.add-position-form .card-header {
    background: var(--gradient-primary);
    color: white;
    padding: 16px 20px;
    border: none;
}

.add-position-form .card-header h3 {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

.add-position-form .card-body {
    padding: 20px;
}

.add-position-form .form-group {
    margin-bottom: 16px;
}

.add-position-form .form-group label {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 6px;
}

.add-position-form .form-control {
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 14px;
    transition: all 0.2s ease;
}

.add-position-form .form-control:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    outline: none;
}

.add-position-form .btn-success {
    background: var(--gradient-success);
    border: none;
    padding: 10px 20px;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.2s ease;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.add-position-form .btn-success:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

/* Таблица должностей - используют единый стиль .table */

/* Бейджи статуса */
.badge.bg-warning {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
    color: white !important;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 6px;
}

.badge.bg-success {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    color: white !important;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 6px;
}

/* Модальное окно редактирования */
.modal-content {
    border: none;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.modal-header {
    background: var(--gradient-primary);
    color: white;
    padding: 16px 20px;
    border-radius: 12px 12px 0 0;
    border: none;
}

.modal-header .modal-title {
    font-size: 18px;
    font-weight: 600;
}

.modal-header .btn-close {
    filter: brightness(0) invert(1);
}

.modal-body {
    padding: 20px;
}

.modal-body .form-group {
    margin-bottom: 16px;
}

.modal-body .form-group label {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 6px;
}

.modal-body .form-control {
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 14px;
    transition: all 0.2s ease;
}

.modal-body .form-control:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    outline: none;
}

.modal-body .btn-primary {
    background: var(--gradient-primary);
    border: none;
    padding: 10px 20px;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.modal-body .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.modal-footer {
    padding: 16px 20px;
    border-top: 1px solid #e5e7eb;
}

.modal-footer .btn-danger {
    background: var(--gradient-danger);
    border: none;
    padding: 8px 16px;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.modal-footer .btn-danger:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.modal-footer .btn-secondary {
    background: #6b7280;
    border: none;
    padding: 8px 16px;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.modal-footer .btn-secondary:hover {
    background: #4b5563;
    transform: translateY(-2px);
}

.modal-footer .btn-secondary[disabled] {
    background: #d1d5db;
    color: #9ca3af;
    cursor: not-allowed;
}

.modal-footer .btn-secondary[disabled]:hover {
    transform: none;
}

/* === ПЕРЕРАБОТАННЫЙ ДИЗАЙН БЛОКА ФИЛИАЛОВ === */

/* Заголовок филиала - компактный дизайн */
.branch-header {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 16px 20px !important;
}

.branch-header h6 {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--color-text) !important;
    margin: 0 !important;
}

.branch-header .text-primary {
    color: var(--color-primary) !important;
    font-size: 18px;
}

/* Компактная группа кнопок */
.branch-header .btn-group {
    gap: 4px;
    display: flex;
    flex-wrap: nowrap;
}

/* Компактные кнопки - только иконки на десктопе */
.branch-header .btn-sm {
    padding: 6px 10px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
    border: 1.5px solid !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px;
    min-width: 32px;
    height: 32px;
    white-space: nowrap;
}

/* Скрываем текст на маленьких экранах, показываем только иконки */
@media (max-width: 1200px) {
    .branch-header .btn-sm {
        padding: 6px !important;
        min-width: 32px;
    }
    
    .branch-header .btn-sm i {
        margin: 0 !important;
    }
    
    /* Скрываем текст, оставляем только иконки */
    .branch-header .btn-sm i + * {
        display: none;
    }
}

/* Кнопка "Редактировать" (жёлтая) */
.branch-header .btn-warning {
    background: white !important;
    color: #f59e0b !important;
    border-color: #f59e0b !important;
}

.branch-header .btn-warning:hover {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
    color: white !important;
    border-color: transparent !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.3) !important;
}

/* Кнопка "Расписание" (голубая) */
.branch-header .btn-info {
    background: white !important;
    color: #06b6d4 !important;
    border-color: #06b6d4 !important;
}

.branch-header .btn-info:hover {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%) !important;
    color: white !important;
    border-color: transparent !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3) !important;
}

/* Кнопка "Добавить кабинет" (зелёная) */
.branch-header .btn-success {
    background: white !important;
    color: #22c55e !important;
    border-color: #22c55e !important;
}

.branch-header .btn-success:hover {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    color: white !important;
    border-color: transparent !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3) !important;
}

/* Кнопка "Удалить" (красная) */
.branch-header .btn-danger {
    background: white !important;
    color: #ef4444 !important;
    border-color: #ef4444 !important;
}

.branch-header .btn-danger:hover {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    color: white !important;
    border-color: transparent !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3) !important;
}

/* Иконки в кнопках заголовка */
.branch-header .btn-sm i {
    font-size: 13px;
    transition: transform 0.2s ease;
}

.branch-header .btn-sm:hover i {
    transform: scale(1.1);
}

/* Анимация при клике */
.branch-header .btn-sm:active {
    transform: translateY(0) scale(0.95) !important;
}

/* Адаптивность для больших экранов */
@media (min-width: 1400px) {
    .branch-header .btn-sm {
        padding: 6px 12px !important;
    }
}

/* Модальные окна филиалов */
.modal-content {
    border-radius: var(--radius-lg);
    border: none;
    box-shadow: var(--shadow-modal);
}

.modal-header {
    background: var(--gradient-primary);
    color: white;
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
    padding: 20px 24px;
    border: none;
}

.modal-header h5 {
    font-weight: 600;
    margin: 0;
}

.modal-header .btn-close {
    filter: brightness(0) invert(1);
}

.modal-body {
    padding: 24px;
}

.modal-footer {
    padding: 16px 24px;
    border-top: 1px solid #e2e8f0;
}

/* Формы в branches */
.form-label {
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 8px;
    font-size: 14px;
}

.form-control, .form-select {
    border: 2px solid #e2e8f0;
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    font-size: 14px;
    transition: var(--transition);
}

.form-control:hover, .form-select:hover {
    border-color: var(--color-primary);
}

.form-control:focus, .form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}

/* Кнопки в branches */
.btn {
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 14px;
    transition: var(--transition-button);
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn i {
    font-size: 14px;
}

.btn-primary {
    background: var(--gradient-primary);
    color: white;
    box-shadow: var(--shadow-button);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
    transform: translateY(-2px);
    box-shadow: var(--shadow-button-hover);
}

.btn-success {
    background: var(--gradient-success);
    color: white;
    box-shadow: var(--shadow-button);
}

.btn-success:hover {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    transform: translateY(-2px);
    box-shadow: var(--shadow-button-hover);
}

.btn-warning {
    background: var(--gradient-warning);
    color: white;
    box-shadow: var(--shadow-button);
}

.btn-warning:hover {
    background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%);
    transform: translateY(-2px);
    box-shadow: var(--shadow-button-hover);
}

.btn-info {
    background: var(--gradient-info);
    color: white;
    box-shadow: var(--shadow-button);
}

.btn-info:hover {
    background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%);
    transform: translateY(-2px);
    box-shadow: var(--shadow-button-hover);
}

.btn-danger {
    background: var(--gradient-danger);
    color: white;
    box-shadow: var(--shadow-button);
}

.btn-danger:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    transform: translateY(-2px);
    box-shadow: var(--shadow-button-hover);
}

.btn-secondary {
    background: var(--gradient-secondary);
    color: white;
    box-shadow: var(--shadow-button);
}

.btn-secondary:hover {
    background: linear-gradient(135deg, #64748b 0%, #475569 100%);
    transform: translateY(-2px);
    box-shadow: var(--shadow-button-hover);
}

/* Маленькие кнопки */
.btn-sm {
    padding: 8px 16px;
    font-size: 13px;
    border-radius: var(--radius-sm);
}

.btn-sm i {
    font-size: 13px;
}

/* Группы кнопок */
.btn-group {
    box-shadow: var(--shadow-sm);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.btn-group .btn {
    border-radius: 0;
    box-shadow: none;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-group .btn:last-child {
    border-right: none;
}

.btn-group .btn:first-child {
    border-top-left-radius: var(--radius-sm);
    border-bottom-left-radius: var(--radius-sm);
}

.btn-group .btn:last-child {
    border-top-right-radius: var(--radius-sm);
    border-bottom-right-radius: var(--radius-sm);
}

.btn-group .btn:hover {
    transform: none;
    filter: brightness(1.1);
}

/* Тени для карточек */
.shadow-sm {
    box-shadow: var(--shadow-sm) !important;
}

/* ========================================
   PROTOCOL VIDEO VIEWER STYLES
   Стили для просмотра видео протоколов
   ======================================== */

.video-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.video-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 20px;
    border-radius: 10px 10px 0 0;
    margin-bottom: 0;
}

.video-header h4 {
    margin: 0;
    font-weight: 600;
}

.video-card {
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-radius: 0 0 10px 10px;
}

.video-player-wrapper {
    background: #000;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
}

.video-player {
    max-width: 100%;
    max-height: 70vh;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.child-info-card {
    background: #f8f9fa;
    border-left: 4px solid #007bff;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.info-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.info-label {
    font-weight: 600;
    color: #495057;
}

@media (max-width: 768px) {
    .video-player {
        max-height: 50vh;
    }
}

/* ============================================
   ФИНАЛЬНОЕ ПЕРЕОПРЕДЕЛЕНИЕ ДЛЯ КНОПКИ .btn-icon-only.btn-success
   Эти стили должны применяться последними для гарантированного перекрытия Bootstrap
   ============================================ */

/* Максимальная специфичность для кнопки успеха с иконкой */
button.btn.btn-icon-only.btn-success,
button.btn-icon-only.btn-success,
.btn.btn-icon-only.btn-success,
.btn-icon-only.btn-success {
    background: var(--gradient-success) !important;
    background-color: #22c55e !important;
    background-image: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    border: 2px solid rgba(34, 197, 94, 0.3) !important;
    border-color: rgba(34, 197, 94, 0.3) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(34, 197, 94, 0.35) !important;
    animation: none !important;
}

button.btn.btn-icon-only.btn-success:hover,
button.btn-icon-only.btn-success:hover,
.btn.btn-icon-only.btn-success:hover,
.btn-icon-only.btn-success:hover {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
    background-color: #16a34a !important;
    background-image: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
    border-color: rgba(34, 197, 94, 0.5) !important;
    box-shadow: 0 8px 24px rgba(34, 197, 94, 0.45) !important;
    transform: translateY(-2px) scale(1.05) !important;
    color: #ffffff !important;
}

button.btn.btn-icon-only.btn-success:active,
button.btn-icon-only.btn-success:active,
.btn.btn-icon-only.btn-success:active,
.btn-icon-only.btn-success:active {
    background: linear-gradient(135deg, #15803d 0%, #166534 100%) !important;
    background-color: #15803d !important;
    transform: translateY(-1px) scale(0.98) !important;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3) !important;
    color: #ffffff !important;
}

button.btn.btn-icon-only.btn-success i,
button.btn-icon-only.btn-success i,
.btn.btn-icon-only.btn-success i,
.btn-icon-only.btn-success i {
    color: #ffffff !important;
    font-size: 18px !important;
}

button.btn.btn-icon-only.btn-success:hover i,
button.btn-icon-only.btn-success:hover i,
.btn.btn-icon-only.btn-success:hover i,
.btn-icon-only.btn-success:hover i {
    color: #ffffff !important;
    transform: scale(1.1);
}

/* Правила для overlay перенесены выше в основной блок */

/* ============================================
   Стили для страницы оплаты замен
   ============================================ */

/* Инпут выбора месяца в градиентной шапке */
#replacementPaymentTabContent .card-header.section-head-gradient input[type="month"] {
    background: rgba(255, 255, 255, 0.18) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    color: #fff !important;
    border-radius: var(--radius-sm) !important;
    font-size: 0.875rem;
}
#replacementPaymentTabContent .card-header.section-head-gradient input[type="month"]:focus {
    background: rgba(255, 255, 255, 0.28) !important;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4) !important;
    outline: none;
}
#replacementPaymentTabContent .card-header.section-head-gradient input[type="month"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: 0.8;
    cursor: pointer;
}

/* Таблицы на странице оплаты замен
   ============================================ */
#replacementPaymentTabContent .zakupki-table {
    table-layout: fixed !important;
    width: 100% !important;
}

/* ЗП ставки */
#salary-rates .zakupki-table th:nth-child(1),
#salary-rates .zakupki-table td:nth-child(1) { width: 30% !important; } /* ФИО */
#salary-rates .zakupki-table th:nth-child(2),
#salary-rates .zakupki-table td:nth-child(2) { width: 25% !important; } /* Должность */
#salary-rates .zakupki-table th:nth-child(3),
#salary-rates .zakupki-table td:nth-child(3) { width: 20% !important; } /* Ставка */
#salary-rates .zakupki-table th:nth-child(4),
#salary-rates .zakupki-table td:nth-child(4) { width: 25% !important; } /* Статус */

/* Замены */
#replacements .zakupki-table th:nth-child(1),
#replacements .zakupki-table td:nth-child(1) { width: 12% !important; } /* Дата */
#replacements .zakupki-table th:nth-child(2),
#replacements .zakupki-table td:nth-child(2) { width: 28% !important; } /* Заменяющий */
#replacements .zakupki-table th:nth-child(3),
#replacements .zakupki-table td:nth-child(3) { width: 18% !important; } /* Цена */
#replacements .zakupki-table th:nth-child(4),
#replacements .zakupki-table td:nth-child(4) { width: 18% !important; } /* К выплате */
#replacements .zakupki-table th:nth-child(5),
#replacements .zakupki-table td:nth-child(5) { width: 24% !important; } /* Статус */

/* Доп. выплаты */
#additional .zakupki-table th:nth-child(1),
#additional .zakupki-table td:nth-child(1) { width: 10% !important; } /* Дата */
#additional .zakupki-table th:nth-child(2),
#additional .zakupki-table td:nth-child(2) { width: 20% !important; } /* Специалист */
#additional .zakupki-table th:nth-child(3),
#additional .zakupki-table td:nth-child(3) { width: 15% !important; } /* Тип выплаты */
#additional .zakupki-table th:nth-child(4),
#additional .zakupki-table td:nth-child(4) { width: 12% !important; } /* Сумма */
#additional .zakupki-table th:nth-child(5),
#additional .zakupki-table td:nth-child(5) { width: 20% !important; } /* Примечание */
#additional .zakupki-table th:nth-child(6),
#additional .zakupki-table td:nth-child(6) { width: 15% !important; } /* Выплатил */
#additional .zakupki-table th:nth-child(7),
#additional .zakupki-table td:nth-child(7) { width: 8% !important; } /* Действия */

/* Итого */
#summary .zakupki-table th:nth-child(1),
#summary .zakupki-table td:nth-child(1) { width: 30% !important; } /* ФИО */
#summary .zakupki-table th:nth-child(2),
#summary .zakupki-table td:nth-child(2) { width: 18% !important; } /* Замены */
#summary .zakupki-table th:nth-child(3),
#summary .zakupki-table td:nth-child(3) { width: 18% !important; } /* Доп. выплаты */
#summary .zakupki-table th:nth-child(4),
#summary .zakupki-table td:nth-child(4) { width: 18% !important; } /* Итого */
#summary .zakupki-table th:nth-child(5),
#summary .zakupki-table td:nth-child(5) { width: 16% !important; } /* Выплатил */

/* Перенос текста для длинных строк */
#replacementPaymentTabContent .zakupki-table td,
#replacementPaymentTabContent .zakupki-table th {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    vertical-align: middle !important;
}

/* Уменьшаем размер шрифта заголовков для лучшей читаемости */
#replacementPaymentTabContent .zakupki-table th {
    font-size: 13px !important;
    padding: 10px 8px !important;
}

/* Для чекбоксов и кнопок - не переносить */
#replacementPaymentTabContent .zakupki-table td .form-check,
#replacementPaymentTabContent .zakupki-table td .btn {
    white-space: nowrap !important;
}

/* Выравнивание чекбоксов по центру */
#replacementPaymentTabContent .zakupki-table td .form-check {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
}

#replacementPaymentTabContent .zakupki-table td .form-check-input {
    margin: 0 8px 0 0 !important;
}

#replacementPaymentTabContent .zakupki-table td .form-check-label {
    margin: 0 !important;
    padding: 0 !important;
}

/* ============================================
   AI KNOWLEDGE PAGE STYLES
   ============================================ */

/* Карточки с левой цветной границей */
.border-left-primary {
    border-left: 4px solid var(--color-primary) !important;
}

/* Звезды приоритета */
.priority-stars {
    font-size: 0.9em;
}

/* Hover эффект для таблиц на странице AI Knowledge */
#knowledgeTabsContent .table-hover tbody tr:hover {
    background-color: rgba(102, 126, 234, 0.1) !important;
}

/* ============================================
   CHILD LESSONS MONITOR PAGE STYLES
   ============================================ */

/* Статусы занятий */
.status-badge {
    padding: 4px 8px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.7rem;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.status-planned {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #92400e;
    border: 1px solid #fbbf24;
}

.status-cancelled {
    background: linear-gradient(135deg, #fee2e2, #fecaca);
    color: #991b1b;
    border: 1px solid #f87171;
}

.status-completed {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
    color: #065f46;
    border: 1px solid #34d399;
}

.status-missed {
    background: linear-gradient(135deg, #fed7aa, #fdba74);
    color: #7c2d12;
    border: 1px solid #fb923c;
}

.status-rescheduled {
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    color: #1e40af;
    border: 1px solid #60a5fa;
}

.status-no-show {
    background: linear-gradient(135deg, #e5e7eb, #d1d5db);
    color: #374151;
    border: 1px solid #9ca3af;
}

.status-teacher-absent {
    background: linear-gradient(135deg, #f3e8ff, #e9d5ff);
    color: #5b21b6;
    border: 1px solid #a78bfa;
}

.status-deleted {
    background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
    color: #6b7280;
    border: 1px solid #d1d5db;
    text-decoration: line-through;
}

.cancellation-reason {
    color: #dc2626;
    font-size: 0.7rem;
    display: block;
    margin-top: 4px;
}

.lesson-id-badge {
    background: linear-gradient(135deg, #e9ecef, #f8f9fa);
    color: var(--color-primary);
    padding: 2px 6px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.75rem;
    border: 1px solid rgba(102, 126, 234, 0.2);
}

/* Компактная таблица занятий */
.table-responsive table {
    table-layout: fixed;
    width: 100%;
    font-size: 0.75rem;
}

.table-responsive th,
.table-responsive td {
    padding: 6px 4px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

.table-responsive thead th {
    font-size: 0.7rem !important;
    font-weight: 600;
    padding: 8px 4px !important;
}

/* Разрешаем перенос только для статуса */
.table-responsive td:nth-child(9) {
    white-space: normal;
}

/* Исключение: в таблице записей ребенка текст мероприятия должен показываться полностью */
.child-v2-container #child-records-table tbody td:nth-child(2),
.child-v2-container #child-records-table tbody td:nth-child(2) * {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
}

/* Выравниваем колонку "Дата и время" по центру, как у "Специалист" */
.child-v2-container #child-records-table thead th:nth-child(1) {
    text-align: center !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
}

.child-v2-container #child-records-table tbody td:nth-child(1) {
    text-align: center !important;
    vertical-align: middle !important;
}

.child-v2-container #child-records-table tbody td:nth-child(1) .date-chip {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Уменьшаем размер badge */
.lesson-id-badge {
    padding: 1px 4px !important;
    font-size: 0.65rem !important;
}

/* Уменьшаем размер статусов */
.status-badge {
    padding: 3px 6px !important;
    font-size: 0.65rem !important;
}

/* Уменьшаем размер текста причины отмены */
.cancellation-reason {
    font-size: 0.65rem !important;
}

/* Компактные ссылки в таблице */
.table-responsive a {
    font-size: 0.75rem;
}

.table-responsive small {
    font-size: 0.7rem !important;
}

/* ============================================
   LESSONS CALENDAR PAGE (DHtmlX Scheduler)
   ============================================ */

/* Контейнер календаря */
.dhx_cal_container {
    border-radius: 12px !important;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.12) !important;
    border: none !important;
    background: white !important;
}

/* Навигационная панель календаря */
.dhx_cal_navline {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border: none !important;
    padding: 18px 24px !important;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15) !important;
}

.dhx_cal_prev_button,
.dhx_cal_next_button,
.dhx_cal_today_button {
    background: rgba(255, 255, 255, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 10px !important;
    color: white !important;
    font-weight: 600 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    padding: 8px 16px !important;
    cursor: pointer !important;
    font-size: 14px !important;
}

.dhx_cal_prev_button:hover,
.dhx_cal_next_button:hover,
.dhx_cal_today_button:hover {
    background: rgba(255, 255, 255, 0.3) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15) !important;
}

.dhx_cal_date {
    color: white !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    letter-spacing: 0.5px;
}

/* Заголовок календаря (дни недели) */
.dhx_cal_header {
    background: linear-gradient(180deg, #f8f9fa 0%, #f0f1f3 100%) !important;
    border-bottom: 3px solid #667eea !important;
    font-weight: 700 !important;
    padding: 12px 0 !important;
}

.dhx_scale_bar {
    color: #2d3748 !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border-right: 1px solid #e2e8f0 !important;
}

/* Основная область календаря */
.dhx_cal_data {
    background: #fafbfc !important;
}

/* Линии сетки */
.dhx_matrix_cell,
.dhx_matrix_scell {
    border-right: 1px solid #e5e7eb !important;
    border-bottom: 1px solid #e5e7eb !important;
    transition: background 0.2s ease !important;
}

.dhx_matrix_cell:hover {
    background: rgba(102, 126, 234, 0.03) !important;
}

/* Левая колонка с именами */
.dhx_matrix_scell {
    background: linear-gradient(90deg, #f8f9fa 0%, #f0f1f3 100%) !important;
    font-weight: 600 !important;
    color: #2d3748 !important;
    border-right: 2px solid #667eea !important;
}

/* События в календаре */
.dhx_cal_event {
    border-radius: 8px !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
    font-weight: 600 !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    font-size: 13px !important;
}

.dhx_cal_event:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2) !important;
    transform: translateY(-3px) scale(1.03);
    z-index: 1000 !important;
    cursor: pointer !important;
}

.dhx_cal_event_line {
    padding: 6px 10px !important;
    line-height: 1.4 !important;
}

/* Текущий день */
.dhx_cal_today_button {
    background: white !important;
    color: #667eea !important;
    font-weight: 700 !important;
    border: 2px solid white !important;
}

.dhx_cal_today_button:hover {
    background: rgba(255, 255, 255, 0.95) !important;
    color: #764ba2 !important;
}

/* Выделение текущего дня в календаре */
.dhx_matrix_cell.dhx_now {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%) !important;
    border: 2px solid rgba(102, 126, 234, 0.2) !important;
}

/* Стили для статусов занятий */
.dhx_cal_event.status-planned {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
    color: #78350f !important;
}

.dhx_cal_event.status-completed {
    background: linear-gradient(135deg, #34d399 0%, #10b981 100%) !important;
    color: #064e3b !important;
}

.dhx_cal_event.status-cancelled {
    background: linear-gradient(135deg, #f87171 0%, #ef4444 100%) !important;
    color: #7f1d1d !important;
}

/* Улучшенные вкладки */
.nav-pills .nav-link {
    border-radius: 10px !important;
    padding: 10px 20px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
    color: #6b7280 !important;
    background: transparent !important;
}

.nav-pills .nav-link:hover {
    background: rgba(102, 126, 234, 0.1) !important;
    color: #667eea !important;
}

.nav-pills .nav-link.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3) !important;
}

/* Модальное окно деталей занятия */
#lessonModal .modal-dialog {
    max-width: 700px !important;
}

#lessonModal .modal-content {
    border-radius: 16px !important;
    border: none !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
    overflow: hidden;
}

#lessonModal .modal-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
    border-bottom: none !important;
    padding: 24px 28px !important;
}

#lessonModal .modal-title {
    font-weight: 700 !important;
    font-size: 1.35rem !important;
    letter-spacing: 0.3px;
}

#lessonModal .btn-close {
    filter: brightness(0) invert(1) !important;
    opacity: 0.9 !important;
    transition: all 0.2s ease !important;
}

#lessonModal .btn-close:hover {
    opacity: 1 !important;
    transform: rotate(90deg);
}

#lessonModal .modal-body {
    padding: 28px !important;
    background: #fafbfc !important;
}

/* Карточки информации в модальном окне */
#lessonModal .bg-light {
    background: white !important;
    border: 1px solid #e2e8f0 !important;
    transition: all 0.2s ease !important;
}

#lessonModal .bg-light:hover {
    border-color: #667eea !important;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1) !important;
}

#lessonModal .text-uppercase {
    font-size: 0.7rem !important;
    letter-spacing: 1px !important;
    font-weight: 600 !important;
}

#lessonModal .fw-semibold {
    color: #2d3748 !important;
    font-size: 1rem !important;
}

#lessonModal .badge {
    padding: 10px 20px !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
}

/* Фильтр статуса */
.form-select-sm {
    border-radius: 8px !important;
    border: 2px solid #e2e8f0 !important;
    transition: all 0.3s ease !important;
}

.form-select-sm:focus {
    border-color: #667eea !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
}

/* ========== CHILD DETAIL V2 ANIMATIONS (ЭТАП 1) ========== */
/* Анимации перенесены из child_detail_v2.css */
/* Дата миграции: 2026-02-11 20:06 */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

@keyframes slideDown {
    from {
        opacity: 0;
        max-height: 0;
    }
    to {
        opacity: 1;
        max-height: 1000px;
    }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes speechPulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7) !important;
        transform: translateY(-1px) scale(1) !important;
    }
    50% { 
        box-shadow: 0 0 0 8px rgba(239, 68, 68, 0) !important;
        transform: translateY(-1px) scale(1.05) !important;
    }
}

@keyframes speechPulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7) !important;
        transform: translateY(-1px) scale(1) !important;
    }
    50% { 
        box-shadow: 0 0 0 8px rgba(239, 68, 68, 0) !important;
        transform: translateY(-1px) scale(1.05) !important;
    }
}

@keyframes modalAppear {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* ========== CHILD DETAIL V2 VARIABLES (ЭТАП 2) ========== */
/* CSS переменные из child_detail_v2.css */
/* Дата миграции: 2026-02-11 20:11 */
/* Добавлены с префиксом --v2- для избежания конфликтов */

:root {
    --v2-primary-color: #4f46e5;
    --v2-secondary-color: #6b7280;
    --v2-success-color: #10b981;
    --v2-warning-color: #f59e0b;
    --v2-danger-color: #ef4444;
    --v2-info-color: #3b82f6;
    --v2-light-bg: #f8fafc;
    --v2-border-color: #e5e7eb;
    --v2-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    --v2-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* Алиасы для совместимости (используют v2-переменные) */
.child-v2-container,
.child-v2-content,
.v2-card,
.entry-v2 {
    --primary-color: var(--v2-primary-color);
    --secondary-color: var(--v2-secondary-color);
    --success-color: var(--v2-success-color);
    --warning-color: var(--v2-warning-color);
    --danger-color: var(--v2-danger-color);
    --info-color: var(--v2-info-color);
    --light-bg: var(--v2-light-bg);
    --border-color: var(--v2-border-color);
    --shadow: var(--v2-shadow);
    --shadow-lg: var(--v2-shadow-lg);
}

/* ========== CHILD DETAIL V2 UTILITIES (ЭТАП 3) ========== */
/* Утилитарные классы: индикаторы, оверлеи, спиннеры */
/* Дата миграции: 2026-02-11 20:13 */

.mode-indicator.mode-indicator {
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
    z-index: 1000 !important;
    padding: 10px 15px !important;
    border-radius: 20px !important;
    font-weight: 500 !important;
    animation: pulse 2s infinite !important;
}

.mode-view.mode-view {
    background: var(--info-color) !important;
    color: white !important;
}

.mode-edit.mode-edit {
    background: var(--warning-color) !important;
    color: white !important;
}

.progress-bar-v2.progress-bar-v2 {
    height: 8px !important;
    border-radius: 4px !important;
    background: var(--light-bg) !important;
    overflow: hidden !important;
}

.progress-bar-v2.progress-bar-v2 .progress {
    height: 100% !important;
    background: linear-gradient(45deg, var(--success-color), #34d399) !important;
    border-radius: 4px !important;
    transition: width 0.3s ease !important;
}

.loading-overlay.loading-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.7) !important;
    display: none !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 9999 !important;
}

.loading-spinner.loading-spinner {
    width: 50px !important;
    height: 50px !important;
    border: 3px solid rgba(255, 255, 255, 0.3) !important;
    border-top: 3px solid white !important;
    border-radius: 50% !important;
    animation: spin 1s linear infinite !important;
}

.auto-save-indicator.auto-save-indicator {
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    background: var(--success-color) !important;
    color: white !important;
    padding: 10px 15px !important;
    border-radius: 20px !important;
    display: none !important;
    align-items: center !important;
    gap: 8px !important;
    z-index: 1000 !important;
}


/* ========================================
   AI CHARACTERISTIC PAGE STYLES
   ======================================== */

.data-preview-card {
    background: linear-gradient(135deg, #f8f9fb 0%, #ffffff 100%);
    padding: 1.25rem;
    border-radius: 12px;
    margin-bottom: 1rem;
    border: 1px solid #e5e7eb;
    transition: all 0.2s;
}

.data-preview-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.data-preview-card h7 {
    font-weight: 600;
    color: #374151;
    font-size: 0.95rem;
    display: block;
    margin-bottom: 0.5rem;
}

.template-category-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.75em;
    font-weight: 600;
    margin-left: 8px;
}

.category-report { 
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #1e40af;
}

.category-planning { 
    background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%);
    color: #7c3aed;
}

.category-analysis { 
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    color: #047857;
}

/* ========================================
   AI CHARACTERISTIC PREVIEW PAGE STYLES
   ======================================== */

.ai-content-preview {
    line-height: 1.7;
    font-size: 0.95rem;
    background: #fff;
    padding: 2rem;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    min-height: 400px;
}

.ai-content-preview h1, 
.ai-content-preview h2, 
.ai-content-preview h3 {
    color: #374151;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.ai-content-preview p {
    margin-bottom: 1rem;
    color: #4b5563;
}

.ai-content-preview ul, 
.ai-content-preview ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.source-item {
    padding: 0.75rem;
    background: linear-gradient(135deg, #f8f9fb 0%, #ffffff 100%);
    border-radius: 8px;
    border-left: 3px solid #667eea;
    transition: all 0.2s;
}

.source-item:hover {
    transform: translateX(2px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.stat-item {
    padding: 1rem;
}

.stat-icon {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    color: white;
}

.stat-icon.bg-success {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}

.stat-icon.bg-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.stat-icon.bg-info {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
}

.stat-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 0.25rem;
}

/* ========================================
   CARD HEADERS - UNIFIED STYLE
   ======================================== */

/* Заголовки карточек с градиентом (как модальные окна) */
.card-header.bg-primary h5,
.card-header.bg-primary h6,
.card-header.bg-info h5,
.card-header.bg-info h6,
.card-header.bg-success h5,
.card-header.bg-success h6,
.card-header.bg-warning h5,
.card-header.bg-warning h6 {
    margin: 0 !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    color: white !important;
}

/* Иконки в заголовках карточек */
.card-header.bg-primary i,
.card-header.bg-info i,
.card-header.bg-success i,
.card-header.bg-warning i {
    color: white !important;
}

/* Стили для тела карточек */
.card-body {
    padding: 24px;
}

/* Градиенты для заголовков */
.card-header.bg-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border-radius: 12px 12px 0 0 !important;
}

.card-header.bg-info {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%) !important;
    border-radius: 12px 12px 0 0 !important;
}

.card-header.bg-success {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    border-radius: 12px 12px 0 0 !important;
}

.card-header.bg-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    border-radius: 12px 12px 0 0 !important;
}

/* Иконки в source-item */
.source-item i.fas {
    margin-top: 3px;
}

/* Кнопки в заголовках карточек */
.card-header .btn-light {
    background: rgba(255, 255, 255, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: white !important;
}

.card-header .btn-light:hover {
    background: rgba(255, 255, 255, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    color: white !important;
}

.card-header .btn-light i {
    color: white !important;
}

/* ========================================
   CHECKLIST MODAL STYLES
   ======================================== */

.checklist-selection-container {
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fafafa;
}

.checklist-item {
    transition: all 0.2s ease;
    cursor: pointer;
    padding: 1rem !important;
    background: white;
    margin-bottom: 0.5rem;
    border-radius: 8px;
    border: 1px solid #e5e7eb !important;
    border-bottom: 1px solid #e5e7eb !important;
}

.checklist-item:first-child {
    margin-top: 0.5rem;
}

.checklist-item:last-child {
    margin-bottom: 0.5rem;
}

.checklist-item:hover {
    background-color: #f8f9fa;
    border-color: #667eea !important;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1);
    transform: translateY(-1px);
}

.checklist-item input[type="checkbox"],
.checklist-item .form-check-input {
    cursor: pointer !important;
    width: 1.5rem !important;
    height: 1.5rem !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
    margin-right: 1rem !important;
    border: 2px solid #d1d5db !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
    flex-shrink: 0 !important;
    background-color: white !important;
    background-image: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    position: relative !important;
}

.checklist-item .form-check-input:hover {
    border-color: #667eea !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
}

.checklist-item .form-check-input:checked {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border-color: #667eea !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2) !important;
}

.checklist-item .form-check-input:checked::after {
    content: '✓' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    color: white !important;
    font-size: 1rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

/* Улучшаем читаемость текста */
.checklist-item .fw-medium {
    color: #1f2937 !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    margin-bottom: 0.25rem !important;
    line-height: 1.4 !important;
}

.checklist-item small.text-muted {
    color: #6b7280 !important;
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
    display: block !important;
}

.checklist-item .form-check-label {
    cursor: pointer !important;
    user-select: none !important;
    margin-bottom: 0 !important;
    flex: 1 !important;
}

.checklist-item label {
    cursor: pointer;
    user-select: none;
}

.checklist-item .fw-medium {
    color: #495057;
    font-size: 0.95rem;
}

.checklist-item small {
    font-size: 0.8rem;
    color: #6c757d;
}

/* ============================================================================
   ABA Checklist Styles - Стили для чек-листа АВА
   ============================================================================ */

/* Круглые кнопки в форме добавления - максимальная специфичность */
button#aba-checklist-submit-edit,
button#aba-checklist-clear-edit {
    border-radius: 50% !important;
    padding: 0 !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    max-width: 38px !important;
    max-height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
}

button#aba-checklist-submit-edit i,
button#aba-checklist-clear-edit i {
    font-size: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Круглые кнопки в записях (редактирование/удаление) - максимальная специфичность */
#aba-checklist-entries-edit button.btn.rounded-circle,
#aba-checklist-entries-view button.btn.rounded-circle {
    border-radius: 50% !important;
    padding: 0 !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
}

#aba-checklist-entries-edit button.btn.rounded-circle i,
#aba-checklist-entries-view button.btn.rounded-circle i {
    font-size: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Карточка чек-листа */
#aba-checklist-card-edit .card-header,
#aba-checklist-card-view .card-header {
    background: linear-gradient(45deg, #f59e0b, #d97706) !important;
    color: white !important;
}

/* Записи чек-листа */
#aba-checklist-entries-edit .v2-entry,
#aba-checklist-entries-view .v2-entry {
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    transition: box-shadow 0.2s ease !important;
}

#aba-checklist-entries-edit .v2-entry:hover,
#aba-checklist-entries-view .v2-entry:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

/* Textarea автоматического расширения */
#aba-checklist-text-edit {
    resize: none !important;
    overflow: hidden !important;
}

/* ============================================================================
   Protocol Form Icons - Иконки в формах протоколов АВА
   ============================================================================ */

/* Исправление отступов для иконок в label - максимальная специфичность */
.protocol-form-view label.form-label.fw-bold,
.protocol-form-edit label.form-label.fw-bold,
.aba-protocol-inline-edit-form label.form-label.fw-bold {
    display: flex !important;
    align-items: center !important;
    column-gap: 8px !important;
}

.protocol-form-view label.form-label.fw-bold i.fas,
.protocol-form-view label.form-label.fw-bold i.far,
.protocol-form-view label.form-label.fw-bold i.fab,
.protocol-form-edit label.form-label.fw-bold i.fas,
.protocol-form-edit label.form-label.fw-bold i.far,
.protocol-form-edit label.form-label.fw-bold i.fab,
.aba-protocol-inline-edit-form label.form-label.fw-bold i.fas,
.aba-protocol-inline-edit-form label.form-label.fw-bold i.far,
.aba-protocol-inline-edit-form label.form-label.fw-bold i.fab,
label.form-label.fw-bold[style*="display: flex"] i.fas,
label.form-label.fw-bold[style*="display: flex"] i.far,
label.form-label.fw-bold[style*="display: flex"] i.fab {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    margin-right: 8px !important;
}

/* Для всех label с gap */
label.form-label[style*="gap"] i.fas,
label.form-label[style*="gap"] i.far,
label.form-label[style*="gap"] i.fab {
    margin-right: 8px !important;
}

/* Для label без gap - добавляем margin */
label.form-label:not([style*="gap"]) i.fas:not(.me-1):not(.me-2):not(.me-3),
label.form-label:not([style*="gap"]) i.far:not(.me-1):not(.me-2):not(.me-3),
label.form-label:not([style*="gap"]) i.fab:not(.me-1):not(.me-2):not(.me-3) {
    margin-right: 0.5rem !important;
}

/* ============================================================================
   Child V2 - rounded tabs/section headers unification
   ============================================================================ */

/* Keep rounded look consistent for tab buttons inside child card */
.child-v2-container .nav-tabs .nav-link,
.child-v2-container .rehab-tabs .rehab-tab,
.child-v2-container .music-nav-tabs .music-nav-tab,
.child-v2-container .smm-tabs .nav-link {
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    bottom: 0 !important;
    margin-bottom: 0 !important;
}

.child-v2-container .nav-tabs .nav-link.active,
.child-v2-container .rehab-tabs .rehab-tab.active,
.child-v2-container .music-nav-tabs .music-nav-tab.active,
.child-v2-container .smm-tabs .nav-link.active {
    border-color: var(--color-primary) !important;
}

/* Rounded block headers (accordion/card headers) in child page sections */
.child-v2-container .card > .card-header {
    border-radius: var(--radius-md) !important;
}

.child-v2-container .accordion .accordion-item {
    border-radius: var(--radius-sm) !important;
    overflow: hidden !important;
}

.child-v2-container .accordion .accordion-button.collapsed {
    border-radius: var(--radius-sm) !important;
}

.child-v2-container .accordion .accordion-button:not(.collapsed) {
    border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important;
}

/* Compact VB-MAPP "tabs" in child card (view/edit) */
#vb-mapp-buttons,
#vb-mapp-buttons-edit {
    gap: 8px !important;
    padding: 8px 12px !important;
}

#vb-mapp-buttons .btn,
#vb-mapp-buttons-edit .btn {
    min-width: auto !important;
    width: auto !important;
    height: auto !important;
    padding: 8px 12px !important;
    font-size: var(--font-size-sm) !important;
    font-weight: var(--font-weight-semibold) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: var(--shadow-sm) !important;
    line-height: 1.2 !important;
}

#vb-mapp-buttons .btn i,
#vb-mapp-buttons-edit .btn i {
    margin-right: 6px !important;
}

/* Extra compactness for ABA protocol block header and entry rows */
#aba-protocol-header-view,
#aba-protocol-header-edit,
#vb-mapp-header-view,
#vb-mapp-header-edit,
#aba-qna-header-view,
#aba-qna-header-edit {
    padding: 8px 10px !important;
}

#aba-protocol-header-view h5,
#aba-protocol-header-edit h5,
#vb-mapp-header-view h5,
#vb-mapp-header-edit h5,
#aba-qna-header-view h5,
#aba-qna-header-edit h5 {
    font-size: var(--font-size-md) !important;
    line-height: 1.25 !important;
    min-height: 22px !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
}

#aba-protocol-header-view .btn,
#aba-protocol-header-edit .btn {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    font-size: 12px !important;
}

.child-v2-container .v2-entry[data-protocol-id] .accordion-button {
    padding: 8px 10px !important;
    font-size: var(--font-size-sm) !important;
    line-height: 1.3 !important;
}

/* ========================================
   ФИЛЬТРЫ МОНИТОРИНГА ЗАНЯТИЙ (child-lessons-monitor)
   Кастомные стили для select, Select2 и кнопок
   ======================================== */
/* Карточка фильтров: overflow visible чтобы выпадающие списки не обрезались */
#filtersForm,
#filtersForm .row,
#filtersForm [class^="col-"] {
    overflow: visible !important;
}
.card:has(#filtersForm) .card-body,
.card-body:has(#filtersForm) {
    overflow: visible !important;
}

/* Select2 (bootstrap-5 theme) — выравнивание с form-select */
#filtersForm .select2-container--bootstrap-5 {
    width: 100% !important;
    display: block !important;
}
#filtersForm .select2-container--bootstrap-5 .select2-selection--single {
    min-height: 42px !important;
    height: 42px !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 8px !important;
    background: white !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    padding: 0 12px !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
}
#filtersForm .select2-container--bootstrap-5.select2-container--focus .select2-selection--single,
#filtersForm .select2-container--bootstrap-5.select2-container--open .select2-selection--single {
    border-color: var(--color-primary, #667eea) !important;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1) !important;
}
#filtersForm .select2-container--bootstrap-5 .select2-selection__rendered {
    line-height: 40px !important;
    padding: 0 30px 0 0 !important;
    font-size: 14px !important;
    color: var(--color-text, #374151) !important;
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    width: 100% !important;
    max-width: calc(100% - 60px) !important;
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
}
#filtersForm .select2-container--bootstrap-5 .select2-selection__placeholder {
    color: #9ca3af !important;
}
#filtersForm .select2-container--bootstrap-5 .select2-selection__arrow {
    height: 40px !important;
    right: 12px !important;
    position: absolute !important;
    top: 0 !important;
}
#filtersForm .select2-container--bootstrap-5 .select2-selection__arrow b {
    border-color: #6b7280 transparent transparent transparent !important;
}

/* Clear button styling for Select2 */
#filtersForm .select2-container--bootstrap-5 .select2-selection--single .select2-selection__clear {
    position: absolute !important;
    right: 40px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 20px !important;
    height: 20px !important;
    line-height: 18px !important;
    text-align: center !important;
    font-size: 18px !important;
    color: #6b7280 !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    z-index: 2 !important;
    margin: 0 !important;
    padding: 0 !important;
}
#filtersForm .select2-container--bootstrap-5 .select2-selection--single .select2-selection__clear:hover {
    color: #374151 !important;
}

/* Ensure arrow doesn't overlap with clear button */
#filtersForm .select2-container--bootstrap-5.select2-selection--clearable .select2-selection__arrow {
    right: 12px !important;
}

/* Dropdown Select2 — поверх карточек (рендерится в body) */
.select2-dropdown {
    z-index: 1060 !important;
}

/* Select2 dropdown для childSelect в мониторинге — стиль как системный multiselect */
.select2-dropdown.child-monitor-select2-dropdown {
    z-index: 1070 !important;
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.06) !important;
    overflow: hidden !important;
}
.select2-dropdown.child-monitor-select2-dropdown .select2-search--dropdown {
    padding: 8px !important;
    background: #fff !important;
    border-bottom: 1px solid #eef2f7 !important;
}
.select2-dropdown.child-monitor-select2-dropdown .select2-search__field {
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    min-height: 36px !important;
    padding: 8px 10px !important;
    font-size: 13px !important;
    color: #334155 !important;
}
.select2-dropdown.child-monitor-select2-dropdown .select2-search__field:focus {
    border-color: #667eea !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.12) !important;
    outline: none !important;
}
.select2-dropdown.child-monitor-select2-dropdown .select2-search__field::placeholder {
    color: #94a3b8 !important;
}
.select2-dropdown.child-monitor-select2-dropdown .select2-results__options {
    max-height: 260px !important;
    padding: 0 !important;
    scrollbar-width: thin !important;
    scrollbar-color: #cbd5e1 transparent !important;
}
.select2-dropdown.child-monitor-select2-dropdown .select2-results__option {
    padding: 9px 14px !important;
    font-size: 13px !important;
    color: #334155 !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
    border-radius: 0 !important;
}
.select2-dropdown.child-monitor-select2-dropdown .select2-results__option--highlighted[aria-selected] {
    background: #f8fafc !important;
    color: #334155 !important;
}
.select2-dropdown.child-monitor-select2-dropdown .select2-results__option[aria-selected="true"] {
    background: #eef2ff !important;
    color: #1f2937 !important;
}
.select2-dropdown.child-monitor-select2-dropdown .select2-results__message {
    color: #6b7280 !important;
    font-size: 13px !important;
    padding: 10px 14px !important;
}

/* custom-select в блоке фильтров (филиал, статус) */
#filtersForm .custom-select-container {
    width: 100% !important;
}
#filtersForm .custom-select-input {
    min-height: 42px !important;
    padding: 8px 14px !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 8px !important;
}

/* form-select в блоке фильтров */
#filtersForm .form-select {
    min-height: 42px !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    padding: 8px 14px !important;
    transition: all 0.2s ease !important;
}
#filtersForm .form-select:hover {
    border-color: #cbd5e1 !important;
}
#filtersForm .form-select:focus {
    border-color: var(--color-primary, #667eea) !important;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1) !important;
}

/* form-control (дата) */
#filtersForm .form-control {
    min-height: 42px !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 8px !important;
    font-size: 14px !important;
}
#filtersForm .form-control:focus {
    border-color: var(--color-primary, #667eea) !important;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1) !important;
}

/* Кнопка поиска */
#filtersForm .btn.btn-primary.w-100 {
    min-height: 42px !important;
    background: var(--gradient-primary) !important;
    border: none !important;
    border-radius: 20px !important;
    color: white !important;
    font-weight: var(--font-weight-semibold, 600) !important;
    box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2) !important;
    transition: all 0.2s ease !important;
}
#filtersForm .btn.btn-primary.w-100:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4) !important;
}

/* ============================================================
   DASHBOARD — Дни рождения и График администраторов (v3)
   ============================================================ */

/* ── Анимации ── */
@keyframes db-pulse-primary {
    0%, 100% { box-shadow: 0 0 0 0 rgba(99,102,241,0.3), 0 4px 16px rgba(99,102,241,0.12); }
    50%       { box-shadow: 0 0 0 5px rgba(99,102,241,0), 0 6px 24px rgba(99,102,241,0.22); }
}
@keyframes db-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes db-live-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.35; transform: scale(0.65); }
}

/* ══════════════════════════════════════════════════════════
   ДНИ РОЖДЕНИЯ СЕГОДНЯ — праздничный блок
   ══════════════════════════════════════════════════════════ */
.birthday-card {
    border: none !important;
    background: linear-gradient(135deg, #f5f3ff 0%, #fdf2f8 50%, #f0f9ff 100%) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 24px rgba(102,126,234,0.14), 0 1px 4px rgba(102,126,234,0.08) !important;
    overflow: hidden !important;
    position: relative !important;
}
.birthday-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    height: 4px !important;
    background: linear-gradient(90deg, #667eea 0%, #ec4899 50%, #764ba2 100%) !important;
    border-radius: 0 !important;
    z-index: 1 !important;
}
.birthday-card .card-body {
    padding: 18px 22px !important;
    background: transparent !important;
    border-radius: 0 !important;
}
.birthday-card .card-title {
    color: #4c1d95 !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    margin-bottom: 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    letter-spacing: 0.2px !important;
}
.birthday-card .card-title i {
    width: 34px !important;
    height: 34px !important;
    background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%) !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    font-size: 0.95rem !important;
    box-shadow: 0 3px 10px rgba(236, 72, 153, 0.3) !important;
    flex-shrink: 0 !important;
}
.birthday-content {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

/* Карточка именинника */
.birthday-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 16px !important;
    background: rgba(255,255,255,0.85) !important;
    border-radius: 12px !important;
    border: 1.5px solid rgba(236,72,153,0.18) !important;
    min-width: 220px !important;
    flex: 1 1 220px !important;
    max-width: 340px !important;
    transition: all 0.2s ease !important;
    animation: db-fade-in 0.3s ease both !important;
    position: relative !important;
    backdrop-filter: blur(4px) !important;
    box-shadow: 0 2px 8px rgba(102,126,234,0.08) !important;
}
.birthday-item::after { display: none !important; }
.birthday-item:hover {
    border-color: rgba(236,72,153,0.4) !important;
    box-shadow: 0 6px 20px rgba(102,126,234,0.18) !important;
    transform: translateY(-2px) !important;
    background: rgba(255,255,255,0.97) !important;
}
.birthday-item .birthday-icon {
    width: 42px !important; height: 42px !important;
    background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%) !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    box-shadow: 0 3px 10px rgba(236,72,153,0.3) !important;
}
.birthday-item .birthday-icon i {
    color: #fff !important;
    font-size: 1rem !important;
    display: inline-block !important;
}
.birthday-item .birthday-info { flex: 1 !important; min-width: 0 !important; }
.birthday-item .birthday-name {
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
    margin-bottom: 4px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.birthday-item .birthday-details {
    font-size: 0.76rem !important;
    color: #6b7280 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
}
.birthday-age {
    background: linear-gradient(135deg, #fdf2f8, #fce7f3) !important;
    color: #9d174d !important;
    padding: 2px 8px !important;
    border-radius: 20px !important;
    font-weight: 700 !important;
    font-size: 0.72rem !important;
    border: 1px solid #fbcfe8 !important;
}
.birthday-item .birthday-position {
    color: #9ca3af !important;
    font-style: normal !important;
}

/* ══════════════════════════════════════════════════════════
   ДНИ РОЖДЕНИЯ ПО МЕСЯЦАМ
   ══════════════════════════════════════════════════════════ */

/* Заголовки месяцев */
.birthday-current-header,
.inner-card-header.birthday-current-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    box-shadow: 0 3px 12px rgba(102,126,234,0.35) !important;
}
.birthday-next-header,
.inner-card-header.birthday-next-header {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
    box-shadow: 0 3px 12px rgba(99,102,241,0.3) !important;
}

/* Строка с именинником */
.birthday-month-item,
div.birthday-month-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 14px !important;
    margin-bottom: 5px !important;
    background: #ffffff !important;
    border-radius: 10px !important;
    border: 1px solid #e5e7eb !important;
    border-left: 3px solid #a5b4fc !important;
    transition: all 0.18s ease !important;
    position: relative !important;
    animation: db-fade-in 0.25s ease both !important;
}
.birthday-month-item:last-child { margin-bottom: 0 !important; }
.birthday-month-item:hover {
    background: #f8f8ff !important;
    border-left-color: #667eea !important;
    border-color: #c7d2fe !important;
    transform: translateX(3px) !important;
    box-shadow: 0 2px 12px rgba(102,126,234,0.1) !important;
}

/* Сегодняшний день рождения */
.birthday-month-item.today-birthday {
    background: #f5f3ff !important;
    border-color: #c4b5fd !important;
    border-left: 3px solid #7c3aed !important;
    animation: db-pulse-primary 2.5s ease-in-out infinite !important;
}
.birthday-month-item.today-birthday:hover {
    transform: translateX(3px) !important;
    background: #ede9fe !important;
}

/* Число дня — круглый бейдж */
.birthday-date {
    width: 40px !important; height: 40px !important; min-width: 40px !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    flex-shrink: 0 !important;
    margin: 0 !important; padding: 0 !important;
    box-shadow: 0 2px 8px rgba(102,126,234,0.3) !important;
    transition: transform 0.2s ease !important;
}
.birthday-month-item:hover .birthday-date {
    transform: scale(1.08) !important;
}
/* Сегодня — фиолетовый кружок с белым текстом */
.birthday-month-item.today-birthday .birthday-date {
    background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%) !important;
    box-shadow: 0 3px 10px rgba(124,58,237,0.4) !important;
    color: #ffffff !important;
}

/* Блок информации */
.birthday-month-item .birthday-info {
    flex: 1 !important; min-width: 0 !important;
    display: flex !important; flex-direction: column !important; gap: 2px !important;
}
.birthday-month-item .birthday-name {
    font-weight: 600 !important;
    color: #1f2937 !important;
    font-size: 0.88rem !important;
    margin-bottom: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.birthday-month-item .birthday-position {
    font-size: 0.74rem !important;
    color: #9ca3af !important;
    font-style: normal !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.birthday-month-item .birthday-position::before { display: none !important; }
.birthday-month-item.today-birthday .birthday-name {
    color: #4c1d95 !important;
    font-weight: 700 !important;
}
.birthday-month-item.today-birthday .birthday-position {
    color: #6d28d9 !important;
}

/* Бейдж "сегодня" */
.birthday-today-indicator {
    margin-left: auto !important;
    flex-shrink: 0 !important;
    background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%) !important;
    border-radius: 6px !important;
    padding: 2px 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: static !important; top: unset !important; right: unset !important;
    width: auto !important; height: auto !important; min-width: unset !important;
    box-shadow: 0 2px 6px rgba(124,58,237,0.35) !important;
    animation: none !important;
}
.birthday-today-indicator i {
    color: #fff !important;
    font-size: 0.7rem !important;
}

/* ══════════════════════════════════════════════════════════
   ГРАФИК РАБОТЫ АДМИНИСТРАТОРОВ
   ══════════════════════════════════════════════════════════ */

/* Заголовки Сегодня / Завтра */
.admin-today-header,
.inner-card-header.admin-today-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    box-shadow: 0 3px 12px rgba(102,126,234,0.35) !important;
    position: relative !important;
    overflow: hidden !important;
}
/* Живая точка "сейчас" */
.admin-today-header .day-title::after,
.inner-card-header.admin-today-header .day-title::after {
    content: '' !important;
    display: inline-block !important;
    width: 6px !important; height: 6px !important;
    background: #a5f3fc !important;
    border-radius: 50% !important;
    margin-left: 8px !important;
    vertical-align: middle !important;
    animation: db-live-dot 1.5s ease-in-out infinite !important;
}
.admin-tomorrow-header,
.inner-card-header.admin-tomorrow-header {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
    box-shadow: 0 3px 12px rgba(99,102,241,0.3) !important;
}

/* Блок одного филиала */
.branch-schedule {
    margin-bottom: 10px !important;
    padding: 10px 12px !important;
    background: #f8fafc !important;
    border-radius: 10px !important;
    border: 1px solid #e5e7eb !important;
    border-left: 3px solid #a5b4fc !important;
    transition: border-left-color 0.2s ease !important;
}
.branch-schedule:last-child { margin-bottom: 0 !important; }
.branch-schedule:hover { border-left-color: #667eea !important; }

/* Название филиала */
.branch-name {
    color: #6366f1 !important;
    font-weight: 700 !important;
    margin-bottom: 8px !important;
    font-size: 0.7rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 0 !important;
}
.branch-name::before {
    content: '' !important;
    display: inline-block !important;
    width: 5px !important; height: 5px !important;
    background: #667eea !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
}
.branch-name::after { display: none !important; }

/* Строка администратора */
.admin-item {
    display: flex !important;
    align-items: center !important;
    padding: 7px 10px !important;
    margin-bottom: 4px !important;
    background: #ffffff !important;
    border-radius: 8px !important;
    border: 1px solid #eef0f5 !important;
    transition: all 0.18s ease !important;
    gap: 9px !important;
}
.admin-item:last-child { margin-bottom: 0 !important; }
.admin-item:hover {
    background: #f5f3ff !important;
    border-color: #c4b5fd !important;
    box-shadow: 0 2px 8px rgba(102,126,234,0.1) !important;
    transform: translateX(3px) !important;
}

/* Аватар-инициалы */
.admin-item::before {
    content: attr(data-initials) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important; height: 28px !important; min-width: 28px !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border-radius: 8px !important;
    color: #fff !important;
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    flex-shrink: 0 !important;
}
.admin-item.day-off::before {
    background: #e5e7eb !important;
    color: #9ca3af !important;
}

/* Имя администратора */
.admin-name {
    font-weight: 500 !important;
    color: #1f2937 !important;
    font-size: 0.86rem !important;
    flex: 1 !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Пилл времени */
.admin-time {
    font-size: 0.74rem !important;
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace !important;
    background: #ede9fe !important;
    color: #5b21b6 !important;
    border: 1px solid #c4b5fd !important;
    padding: 2px 9px !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

/* Выходной */
.admin-item.day-off {
    background: #fafafa !important;
    border: 1px dashed #e5e7eb !important;
    opacity: 0.65 !important;
}
.admin-item.day-off:hover {
    background: #f9fafb !important;
    border-color: #d1d5db !important;
    box-shadow: none !important;
    transform: none !important;
}
.admin-item.day-off .admin-name {
    color: #9ca3af !important;
    text-decoration: line-through !important;
    text-decoration-color: #d1d5db !important;
}
.day-off-time {
    font-size: 0.72rem !important;
    background: #f3f4f6 !important;
    color: #9ca3af !important;
    border: 1px solid #e5e7eb !important;
    padding: 2px 9px !important;
    border-radius: 6px !important;
    font-style: normal !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

/* ══════════════════════════════════════════════════════════
   ОТПУСКА И ЗАМЕЩЕНИЯ
   ══════════════════════════════════════════════════════════ */

/* Заголовок секции */
.vacations-section .clickable-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    box-shadow: 0 3px 12px rgba(102,126,234,0.3) !important;
}

/* Список отпусков */
.vacation-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

/* Карточка одного отпуска */
.vacation-item {
    background: #ffffff !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
    border: 1px solid #e5e7eb !important;
    border-left: 4px solid #f59e0b !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
    transition: all 0.18s ease !important;
}
.vacation-item:hover {
    transform: translateX(3px) !important;
    box-shadow: 0 4px 16px rgba(245,158,11,0.15) !important;
    border-color: #fcd34d !important;
}

.vacation-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

/* Имя пользователя */
.vacation-user {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 0.95rem !important;
}
.vacation-user strong {
    color: #1f2937 !important;
    font-weight: 700 !important;
}
.vacation-type {
    color: #6b7280 !important;
    font-style: normal !important;
    font-size: 0.82rem !important;
    background: #f3f4f6 !important;
    padding: 1px 7px !important;
    border-radius: 20px !important;
    border: 1px solid #e5e7eb !important;
}
.vacation-user i { color: #f59e0b !important; }

/* Детали */
.vacation-details {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    margin-left: 22px !important;
    padding: 8px 12px !important;
    background: #f8fafc !important;
    border-radius: 8px !important;
    border: 1px solid #e5e7eb !important;
}
.vacation-branch,
.vacation-dates {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    font-size: 0.84rem !important;
    color: #374151 !important;
}
.vacation-branch i { color: #6366f1 !important; }
.vacation-dates i { color: #10b981 !important; }
.vacation-dates .days-left {
    color: #ef4444 !important;
    font-weight: 600 !important;
    font-size: 0.8rem !important;
    background: #fef2f2 !important;
    padding: 1px 6px !important;
    border-radius: 4px !important;
    border: 1px solid #fecaca !important;
}

/* Замещение */
.vacation-replacement {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-left: 22px !important;
    padding: 7px 12px !important;
    background: #f0fdf4 !important;
    border-radius: 8px !important;
    border: 1px solid #bbf7d0 !important;
}
.vacation-replacement.no-replacement {
    background: #fef2f2 !important;
    border-color: #fecaca !important;
}
.replacement-label {
    color: #6b7280 !important;
    font-size: 0.82rem !important;
}
.vacation-replacement strong {
    color: #16a34a !important;
    font-weight: 600 !important;
    font-size: 0.88rem !important;
}
.no-replacement-text {
    color: #dc2626 !important;
    font-weight: 600 !important;
    font-size: 0.88rem !important;
}
.vacation-replacement i { font-size: 0.85rem !important; }

/* Нет отпусков */
.no-vacations {
    text-align: center !important;
    padding: 28px 20px !important;
    background: #f8fafc !important;
    border-radius: 10px !important;
    border: 1.5px dashed #d1d5db !important;
}
.no-vacations i {
    font-size: 2rem !important;
    color: #10b981 !important;
    margin-bottom: 8px !important;
}
.no-vacations p {
    font-size: 0.9rem !important;
    color: #6b7280 !important;
    margin: 0 !important;
}

/* ══════════════════════════════════════════════════════════
   АВТОКОМПЛИТ — ЕДИНЫЕ СТИЛИ ДЛЯ ВСЕХ СТРАНИЦ
   ══════════════════════════════════════════════════════════ */

/* Имя занимает всё свободное место, бейдж уходит вправо */
.autocomplete-suggestion .suggestion-name,
#dashboard-search-results .search-result-item .suggestion-name {
    flex: 1 !important;
    color: #1f2937 !important;
    font-weight: 500 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Бейдж всегда остаётся видимым */
.autocomplete-suggestion .archived-badge,
#dashboard-search-results .search-result-item .archived-badge {
    flex-shrink: 0 !important;
    margin-left: auto !important;
}

/* Архивный элемент — список детей */
.autocomplete-suggestion.archived-suggestion {
    background: #fffbeb !important;
    border-left: 3px solid #fcd34d !important;
    opacity: 0.88 !important;
}
.autocomplete-suggestion.archived-suggestion:hover {
    background: #fef3c7 !important;
    border-left-color: #f59e0b !important;
    opacity: 1 !important;
}
.autocomplete-suggestion.archived-suggestion i.fa-child {
    color: #d97706 !important;
}

/* Архивный элемент — дашборд */
#dashboard-search-results .search-result-item.archived-suggestion {
    background: #fffbeb !important;
    border-left: 3px solid #fcd34d !important;
    opacity: 0.88 !important;
}
#dashboard-search-results .search-result-item.archived-suggestion:hover {
    background: #fef3c7 !important;
    border-left-color: #f59e0b !important;
    opacity: 1 !important;
    box-shadow: 0 2px 10px rgba(245,158,11,0.18) !important;
}
#dashboard-search-results .search-result-item.archived-suggestion i.fa-child {
    color: #d97706 !important;
}

/* "Ничего не найдено" */
.autocomplete-no-results {
    padding: 14px 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: #9ca3af !important;
    font-size: 0.875rem !important;
    font-style: italic !important;
}
.autocomplete-no-results i {
    color: #d1d5db !important;
    font-size: 14px !important;
}

/* ══════════════════════════════════════════════════════════
   АРХИВНЫЙ БЕЙДЖ В ПОИСКЕ DASHBOARD
   ══════════════════════════════════════════════════════════ */
#dashboard-search-results .search-result-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}
#dashboard-search-results .search-result-name {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}
.archived-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    padding: 2px 8px !important;
    background: #fff3cd !important;
    color: #664d03 !important;
    border: 1px solid #ffe69c !important;
    border-radius: 20px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    vertical-align: middle !important;
}

/* ══════════════════════════════════════════════════════════
   REDESIGN: СТРАНИЦА ЗАМЕТОК (/notes)
   ══════════════════════════════════════════════════════════ */

/* Цветовые акценты для карточек заметок — циклически */
.notes-grid .note-card:nth-child(6n+1) { --note-accent: #667eea; --note-accent-light: #eef0fd; }
.notes-grid .note-card:nth-child(6n+2) { --note-accent: #10b981; --note-accent-light: #ecfdf5; }
.notes-grid .note-card:nth-child(6n+3) { --note-accent: #f59e0b; --note-accent-light: #fffbeb; }
.notes-grid .note-card:nth-child(6n+4) { --note-accent: #ef4444; --note-accent-light: #fff5f5; }
.notes-grid .note-card:nth-child(6n+5) { --note-accent: #8b5cf6; --note-accent-light: #f5f3ff; }
.notes-grid .note-card:nth-child(6n+6) { --note-accent: #06b6d4; --note-accent-light: #ecfeff; }

.note-card {
    background: #ffffff !important;
    border-radius: 16px !important;
    padding: 0 !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.04) !important;
    border: 1.5px solid rgba(0,0,0,0.06) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

.note-card::before {
    content: '' !important;
    display: block !important;
    height: 5px !important;
    width: 100% !important;
    background: var(--note-accent, #667eea) !important;
    opacity: 1 !important;
    position: static !important;
    border-radius: 0 !important;
}

.note-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 12px 32px rgba(0,0,0,0.12) !important;
    border-color: var(--note-accent, #667eea) !important;
}

.note-card:hover::before {
    opacity: 1 !important;
}

/* Внутренний контент карточки */
.note-card .note-header,
.note-card .note-meta,
.note-card .note-content,
.note-card .note-actions {
    padding-left: 20px !important;
    padding-right: 20px !important;
}

.note-header {
    padding-top: 18px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-bottom: 0 !important;
}

.note-title {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
}

.note-title::before {
    content: '' !important;
    display: none !important;
}

.note-meta {
    margin-top: 0 !important;
    padding-top: 10px !important;
    padding-bottom: 6px !important;
    background: transparent !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    font-size: 0.78rem !important;
    color: #94a3b8 !important;
    margin-bottom: 0 !important;
}

.note-meta span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    padding: 3px 10px !important;
    border-radius: 20px !important;
}

.note-meta i {
    color: var(--note-accent, #667eea) !important;
    font-size: 0.75rem !important;
}

.note-content {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    color: #475569 !important;
    font-size: 0.88rem !important;
    line-height: 1.65 !important;
    max-height: 100px !important;
    overflow: hidden !important;
    flex: 1 !important;
    margin-bottom: 0 !important;
}

.note-content::after {
    background: linear-gradient(to bottom, transparent, #ffffff) !important;
}

.note-actions {
    padding-top: 14px !important;
    padding-bottom: 16px !important;
    border-top: 1px solid #f1f5f9 !important;
    display: flex !important;
    gap: 8px !important;
    justify-content: flex-end !important;
    margin-top: auto !important;
    background: #fafbfc !important;
}

.btn-view {
    background: var(--note-accent, #667eea) !important;
    color: white !important;
    border: none !important;
    padding: 8px 16px !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
}

.btn-view:hover {
    filter: brightness(1.1) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
    color: white !important;
    background: var(--note-accent, #667eea) !important;
}

.btn-delete {
    background: transparent !important;
    color: #ef4444 !important;
    border: 1.5px solid #fecaca !important;
    padding: 8px 14px !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
}

.btn-delete:hover {
    background: #fef2f2 !important;
    border-color: #fca5a5 !important;
    color: #dc2626 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 10px rgba(239, 68, 68, 0.15) !important;
}

/* Тег ребенка в заметке */
.note-child-tag {
    background: var(--note-accent-light, #eef0fd) !important;
    color: var(--note-accent, #667eea) !important;
    border: 1px solid var(--note-accent, #667eea) !important;
    padding: 4px 10px !important;
    border-radius: 20px !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    transition: all 0.2s ease !important;
}

.note-child-tag:hover {
    background: var(--note-accent, #667eea) !important;
    color: white !important;
    text-decoration: none !important;
    transform: translateY(-1px) !important;
}

/* Пустое состояние заметок */
.notes-grid .empty-state {
    grid-column: 1 / -1 !important;
    background: linear-gradient(135deg, #f8faff 0%, #f0f4ff 100%) !important;
    border: 2px dashed #c7d2fe !important;
    border-radius: 20px !important;
    padding: 64px 32px !important;
}

.notes-grid .empty-state-icon {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    width: 88px !important;
    height: 88px !important;
    font-size: 2.2rem !important;
    box-shadow: 0 8px 24px rgba(102,126,234,0.3) !important;
}

/* ══════════════════════════════════════════════════════════
   REDESIGN: СТРАНИЦА ЗАДАЧ (/tasks)
   ══════════════════════════════════════════════════════════ */

/* Карточка задачи */
.task-row {
    background: #ffffff !important;
    border-radius: 14px !important;
    padding: 18px 20px !important;
    margin-bottom: 10px !important;
    border: 1.5px solid #e9ecef !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
    border-left: 4px solid #d1d5db !important;
    position: relative !important;
}

.task-row:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.09) !important;
    border-color: #667eea !important;
    border-left-color: #667eea !important;
    background: #ffffff !important;
}

/* Левый борт по приоритету */
.task-row[data-priority="1"] { border-left-color: #94a3b8 !important; }
.task-row[data-priority="2"] { border-left-color: #f59e0b !important; }
.task-row[data-priority="3"] { border-left-color: #ef4444 !important; }

/* Просроченные */
.task-row.border-danger {
    border-left-color: #ef4444 !important;
    background: linear-gradient(90deg, #fff5f5 0%, #ffffff 80%) !important;
}

/* Выполненные */
.task-row.completed-task {
    background: #f8f9fa !important;
    border-left-color: #10b981 !important;
    opacity: 0.75 !important;
}

.task-row.completed-task:hover {
    opacity: 0.9 !important;
    border-left-color: #10b981 !important;
}

/* Заголовок задачи */
.task-title {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin-bottom: 4px !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}

.task-title-link {
    color: #1e293b !important;
    font-weight: 700 !important;
    transition: color 0.15s ease !important;
}

.task-title-link:hover {
    color: #667eea !important;
    text-decoration: none !important;
}

.task-description {
    font-size: 0.85rem !important;
    color: #64748b !important;
    line-height: 1.55 !important;
    margin-bottom: 10px !important;
}

/* Метаданные задачи */
.task-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 10px !important;
}

/* Бейджи статуса/приоритета в задачах */
.task-meta .badge-pill,
.task-row .badge-pill {
    font-size: 0.72rem !important;
    padding: 5px 11px !important;
    border-radius: 20px !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px !important;
}

/* Теги детей в задачах */
.task-child-tag {
    background: #eff6ff !important;
    color: #2563eb !important;
    border: 1px solid #bfdbfe !important;
    padding: 4px 10px !important;
    border-radius: 20px !important;
    font-size: 0.73rem !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.task-child-tag:hover {
    background: #2563eb !important;
    color: white !important;
    border-color: #2563eb !important;
    text-decoration: none !important;
    transform: translateY(-1px) !important;
}

/* Правая колонка: дата + кнопка */
.task-row .text-right {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    height: 100% !important;
    gap: 10px !important;
}

/* Дата срока */
.task-row .text-right small {
    font-size: 0.8rem !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    padding: 5px 11px !important;
    border-radius: 20px !important;
    color: #64748b !important;
    font-weight: 500 !important;
}

.task-row .text-right small.text-danger {
    background: #fef2f2 !important;
    border-color: #fca5a5 !important;
    color: #dc2626 !important;
}

.task-row .text-right small.text-danger i {
    color: #dc2626 !important;
}

/* Кнопка "Выполнить" */
.task-complete-btn {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: white !important;
    border: none !important;
    padding: 9px 18px !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    font-size: 0.82rem !important;
    letter-spacing: 0.2px !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 8px rgba(16,185,129,0.25) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
}

.task-complete-btn:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 15px rgba(16,185,129,0.35) !important;
    color: white !important;
}

/* Бейдж "Выполнена" */
.task-completed-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: white !important;
    padding: 7px 14px !important;
    border-radius: 10px !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 8px rgba(16,185,129,0.2) !important;
}

/* Пустое состояние задач */
.card-body .text-center.py-4 {
    padding: 48px 24px !important;
}

.card-body .text-center.py-4 .fa-tasks {
    color: #c7d2fe !important;
    display: block !important;
    margin-bottom: 16px !important;
}

.card-body .text-center.py-4 h5 {
    color: #64748b !important;
    font-weight: 700 !important;
    margin-bottom: 8px !important;
}

/* Заголовки секций Активные / Выполненные */
.dashboard-card .card-header h5 {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.dashboard-card .card-header .badge.bg-primary,
.dashboard-card .card-header .badge-chip.primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 5px 12px !important;
    border-radius: 20px !important;
    font-size: 0.8rem !important;
}

.dashboard-card .card-header .badge.bg-success,
.dashboard-card .card-header .badge-chip.success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 5px 12px !important;
    border-radius: 20px !important;
    font-size: 0.8rem !important;
}

/* Разделитель между задачами */
.task-row + hr.my-2 {
    border-color: #f1f5f9 !important;
    margin: 6px 0 !important;
    opacity: 0.6 !important;
}

/* Адаптив для задач */
@media (max-width: 768px) {
    .task-row .text-right {
        align-items: flex-start !important;
        margin-top: 12px !important;
    }
    .task-complete-btn {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* ══════════════════════════════════════════════════════════
   REDESIGN: ЗАГОЛОВКИ СЕКЦИЙ (clickable-header, filters-header)
   ══════════════════════════════════════════════════════════ */

/* --- Фильтр (unified-filters-header) --- */
.card-header.unified-filters-header,
.unified-filters-header {
    background: linear-gradient(135deg, #f1f5f9 0%, #e8edf4 100%) !important;
    border: none !important;
    border-bottom: 2px solid #e2e8f0 !important;
    padding: 16px 22px !important;
    cursor: pointer !important;
    transition: background 0.2s ease, box-shadow 0.2s ease !important;
    border-radius: var(--radius-lg) !important;
    color: #334155 !important;
    user-select: none !important;
}

.unified-filters-header:hover {
    background: linear-gradient(135deg, #e8edf4 0%, #dde4ef 100%) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}

.unified-filters-header h5 {
    color: #334155 !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    letter-spacing: 0.2px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Иконка слайдеров в заголовке фильтра */
.unified-filters-header h5 .fas.fa-sliders-h {
    width: 32px !important;
    height: 32px !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.85rem !important;
    flex-shrink: 0 !important;
    box-shadow: 0 2px 6px rgba(102,126,234,0.35) !important;
    margin-right: 4px !important;
}

.unified-filters-header .collapse-icon {
    color: #667eea !important;
    font-size: 0.9rem !important;
    transition: transform 0.3s ease !important;
}

.unified-filters-header[aria-expanded="true"] .collapse-icon {
    transform: rotate(180deg) !important;
}

/* --- Заголовок «Активные задачи» --- */
.header-active-tasks {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
    border: none !important;
    padding: 16px 22px !important;
    cursor: pointer !important;
    user-select: none !important;
    transition: filter 0.2s ease, box-shadow 0.2s ease !important;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
    position: relative !important;
    overflow: hidden !important;
}

.header-active-tasks.collapsed {
    border-radius: var(--radius-lg) !important;
}

.header-active-tasks::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0) 100%) !important;
    pointer-events: none !important;
}

.header-active-tasks:hover {
    filter: brightness(1.08) !important;
    box-shadow: 0 4px 16px rgba(102,126,234,0.35) !important;
}

.header-active-tasks h5 {
    color: white !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.15) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Иконка часов в «Активные задачи» */
.header-active-tasks h5 .fas.fa-clock {
    width: 30px !important;
    height: 30px !important;
    background: rgba(255,255,255,0.2) !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.85rem !important;
    flex-shrink: 0 !important;
    backdrop-filter: blur(4px) !important;
}

.header-active-tasks .badge.bg-primary,
.header-active-tasks .badge-chip,
.header-active-tasks .badge-chip.primary,
.dashboard-card .card-header.header-active-tasks .badge-chip,
.dashboard-card .card-header.header-active-tasks .badge-chip.primary {
    background: rgba(255,255,255,0.25) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.45) !important;
    font-size: 0.78rem !important;
    padding: 4px 10px !important;
    border-radius: 20px !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.15) !important;
}

.header-active-tasks .collapse-icon {
    color: rgba(255,255,255,0.85) !important;
    font-size: 0.9rem !important;
    transition: transform 0.3s ease !important;
}

.header-active-tasks[aria-expanded="true"] .collapse-icon,
.header-active-tasks:not(.collapsed) .collapse-icon {
    transform: rotate(180deg) !important;
}

/* --- Заголовок «Выполненные задачи» --- */
.header-completed-tasks {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: white !important;
    border: none !important;
    padding: 16px 22px !important;
    cursor: pointer !important;
    user-select: none !important;
    transition: filter 0.2s ease, box-shadow 0.2s ease !important;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
    position: relative !important;
    overflow: hidden !important;
}

.header-completed-tasks.collapsed {
    border-radius: var(--radius-lg) !important;
}

.header-completed-tasks::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0) 100%) !important;
    pointer-events: none !important;
}

.header-completed-tasks:hover {
    filter: brightness(1.08) !important;
    box-shadow: 0 4px 16px rgba(16,185,129,0.35) !important;
}

.header-completed-tasks h5 {
    color: white !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.15) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Иконка в «Выполненные задачи» */
.header-completed-tasks h5 .fas.fa-check-double {
    width: 30px !important;
    height: 30px !important;
    background: rgba(255,255,255,0.2) !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.85rem !important;
    flex-shrink: 0 !important;
}

.header-completed-tasks .badge.bg-success,
.header-completed-tasks .badge-chip,
.header-completed-tasks .badge-chip.success,
.dashboard-card .card-header.header-completed-tasks .badge-chip,
.dashboard-card .card-header.header-completed-tasks .badge-chip.success {
    background: rgba(255,255,255,0.25) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.45) !important;
    font-size: 0.78rem !important;
    padding: 4px 10px !important;
    border-radius: 20px !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.15) !important;
}

.header-completed-tasks .collapse-icon {
    color: rgba(255,255,255,0.85) !important;
    font-size: 0.9rem !important;
    transition: transform 0.3s ease !important;
}

.header-completed-tasks[aria-expanded="true"] .collapse-icon,
.header-completed-tasks:not(.collapsed) .collapse-icon {
    transform: rotate(180deg) !important;
}

/* ==========================================================================
   Notes page — вкладки (папки), контекст-меню, план работы, история материалов
   Ранее жили inline в templates/notes.html, перенесены сюда по проектной
   конвенции (см. design-system-unified.css как единый источник правды).
   ========================================================================== */

/* --- Вкладки (папки) заметок --------------------------------------------- */
.notes-tabs-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 16px 0;
    padding: 6px;
    background: #f8fafc;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    overflow-x: auto;
    scrollbar-width: thin;
}
.notes-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 12px;
    color: #475569;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    border: 1px solid transparent;
    background: transparent;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
    position: relative;
}
.notes-tab:hover { background: #eef2ff; color: #3730a3; }
.notes-tab .tab-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--tab-color, #6b7280);
}
.notes-tab .tab-count {
    font-size: 12px;
    font-weight: 600;
    background: #e5e7eb;
    color: #475569;
    padding: 1px 7px;
    border-radius: 999px;
    min-width: 22px;
    text-align: center;
}
.notes-tab.active {
    background: #fff;
    color: #1e293b;
    border-color: #c7d2fe;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.notes-tab.active .tab-count { background: #c7d2fe; color: #3730a3; }
.notes-tab-system-icon { font-size: 12px; opacity: .65; }
.notes-tab .tab-menu-btn {
    border: none;
    background: transparent;
    color: #64748b;
    padding: 0 2px;
    font-size: 14px;
    cursor: pointer;
    border-radius: 6px;
    line-height: 1;
}
.notes-tab .tab-menu-btn:hover { background: rgba(15, 23, 42, .06); color: #1e293b; }
.notes-tab-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: 12px;
    border: 1px dashed #cbd5e1;
    background: transparent;
    color: #64748b;
    font-size: 16px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.notes-tab-add:hover { background: #eef2ff; color: #3730a3; border-color: #a5b4fc; }
.notes-tab-add[disabled] { opacity: .45; cursor: not-allowed; }

/* Контекстное меню папки (правый клик / кнопка ⋯) */
.folder-menu {
    position: absolute;
    z-index: 10010;
    min-width: 180px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .16);
    border: 1px solid #e5e7eb;
    overflow: hidden;
    display: none;
}
.folder-menu button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    padding: 10px 14px;
    background: transparent;
    border: none;
    font-size: 14px;
    color: #334155;
    cursor: pointer;
}
.folder-menu button:hover { background: #f1f5f9; }
.folder-menu button.danger { color: #dc2626; }
.folder-menu button.danger:hover { background: #fef2f2; }
.folder-menu hr { margin: 0; border: none; border-top: 1px solid #e5e7eb; }

/* --- «План работы»: модалка генерации ------------------------------------
   Специфичность перебивает `.modal-content .modal-body button { ... !important }`,
   поэтому дублируем `!important` и повышаем селектор через #planModal. */
#planModal #planHorizonPicker .plan-horizon-btn {
    border-radius: 999px !important;
    padding: 6px 14px !important;
    min-height: 36px !important;
    font-weight: 500 !important;
    background: #fff !important;
    background-color: #fff !important;
    background-image: none !important;
    color: #4f46e5 !important;
    border: 1px solid #c7d2fe !important;
    box-shadow: none !important;
    transition: all .15s ease !important;
}
#planModal #planHorizonPicker .plan-horizon-btn:hover {
    background: #eef2ff !important;
    color: #3730a3 !important;
    transform: none !important;
}
#planModal #planHorizonPicker .plan-horizon-btn.active {
    background: #4f46e5 !important;
    background-color: #4f46e5 !important;
    color: #fff !important;
    border-color: #4f46e5 !important;
    box-shadow: 0 2px 6px rgba(79, 70, 229, 0.35) !important;
    transform: none !important;
}

/* Searchable single-select для ребёнка в модалке плана. */
#planModal .plan-child-picker {
    position: relative;
}
#planModal .plan-child-picker-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 280px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .12);
    z-index: 1080;
    padding: 4px;
}
#planModal .plan-child-picker-item {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    background: #fff !important;
    background-color: #fff !important;
    color: #0f172a !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
    cursor: pointer !important;
    margin: 0 !important;
    min-height: auto !important;
    box-shadow: none !important;
    transition: background .12s ease !important;
}
#planModal .plan-child-picker-item:hover,
#planModal .plan-child-picker-item:focus {
    background: #eef2ff !important;
    color: #3730a3 !important;
    transform: none !important;
}
#planModal .plan-child-picker-empty {
    padding: 10px 12px;
    color: #64748b;
    font-size: 13px;
    text-align: center;
}

/* Toast «генерация идёт» — показывается на /notes?waiting_plan=1. */
.waiting-plan-toast {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 10070;
    max-width: 360px;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: #fff;
    padding: 14px 18px;
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(79, 70, 229, .35);
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14px;
    animation: waitingPlanIn .3s ease-out;
}
.waiting-plan-toast i { font-size: 22px; margin-top: 2px; }
.waiting-plan-toast .wp-title { font-weight: 600; margin-bottom: 4px; }
.waiting-plan-toast .wp-sub   { opacity: .9; font-size: 12px; line-height: 1.4; }
@keyframes waitingPlanIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --- Материалы программы (внутри viewNoteModal) -------------------------- */
.program-materials-list,
.room-equipment-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.room-equipment-item {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 8px;
    background: #f8fafc;
}
.room-equipment-item .equipment-name { margin-bottom: 4px; }
.room-equipment-item .equipment-tags,
.room-equipment-item .equipment-summary,
.room-equipment-item .equipment-usage { margin-top: 2px; line-height: 1.4; }

/* Кликабельное название материала / пособия в заметке-программе. */
.material-title-link {
    color: #4f46e5;
    text-decoration: none;
    border-bottom: 1px dashed rgba(79, 70, 229, 0.45);
    transition: color .12s ease, border-color .12s ease;
}
.material-title-link:hover,
.material-title-link:focus {
    color: #3730a3;
    border-bottom-color: #3730a3;
    text-decoration: none;
}
.material-title-link .material-title-icon {
    font-size: 11px;
    margin-left: 4px;
    opacity: .75;
}

/* Inline-ссылки в тексте плана (внутри #view_note_content). */
.plan-material-inline-link {
    color: #4f46e5;
    text-decoration: none;
    border-bottom: 1px dotted rgba(79, 70, 229, 0.45);
}
.plan-material-inline-link:hover {
    color: #3730a3;
    border-bottom-style: solid;
    border-bottom-color: #3730a3;
}
.program-material-item {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 8px;
    background: #fff;
    transition: background .15s, border-color .15s;
}
.program-material-item.is-marked {
    background: #ecfdf5;
    border-color: #86efac;
}
.program-material-item.is-marked .material-title {
    color: #065f46;
}
.program-material-item.recency-blocked {
    opacity: 0.75;
    background: #fff7ed;
    border-color: #fed7aa;
}
.program-material-item .material-title { font-size: 14px; }
.program-material-item .material-rationale { margin-top: 2px; }
.program-material-item .material-description { margin-top: 4px; color: #4b5563; }
.program-material-item .material-note { margin-top: 4px; }

/* --- История материалов (modal-таймлайн) --------------------------------- */
.material-history-item {
    padding: 10px 12px;
    border: 1px solid #e5e7eb;
    border-left-width: 4px;
    border-radius: 8px;
    margin-bottom: 8px;
    background: #fff;
}
.material-history-item[data-outcome="done"]     { border-left-color: #10b981; }
.material-history-item[data-outcome="partial"]  { border-left-color: #f59e0b; }
.material-history-item[data-outcome="skipped"]  { border-left-color: #9ca3af; }
.material-history-item[data-outcome=""]         { border-left-color: #cbd5e1; }
.material-history-item .mh-title { font-weight: 600; font-size: 14px; color: #111827; }
.material-history-item .mh-meta  { font-size: 12px; color: #6b7280; margin-top: 2px; }
.material-history-item .mh-context { font-size: 12px; color: #374151; margin-top: 4px; }
.material-history-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    margin-left: 6px;
}
.material-history-badge.outcome-done    { background: #d1fae5; color: #065f46; }
.material-history-badge.outcome-partial { background: #fef3c7; color: #92400e; }
.material-history-badge.outcome-skipped { background: #e5e7eb; color: #374151; }

/* --- Color picker в модалке папки --------------------------------------
   Глобальное правило `.modal-content .modal-body button { background:white
   !important; min-height:36px !important; border-radius:8px !important }`
   убивало inline-стили кружков. Поэтому отдельный класс + !important. */
#folderColorPicker {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.modal-body .folder-color-swatch,
#folderColorPicker .folder-color-swatch {
    width: 26px !important;
    min-width: 26px !important;
    max-width: 26px !important;
    height: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 50% !important;
    border: 2px solid transparent !important;
    background: var(--swatch-color, #6b7280) !important;
    background-color: var(--swatch-color, #6b7280) !important;
    background-image: none !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .08) !important;
    cursor: pointer !important;
    transition: transform .12s ease, border-color .12s ease !important;
    flex: 0 0 auto !important;
    color: transparent !important;
}
.modal-body .folder-color-swatch:hover,
#folderColorPicker .folder-color-swatch:hover {
    transform: scale(1.08) !important;
    box-shadow: 0 3px 8px rgba(15, 23, 42, .16) !important;
    background: var(--swatch-color, #6b7280) !important;
    background-color: var(--swatch-color, #6b7280) !important;
}
.modal-body .folder-color-swatch.is-selected,
#folderColorPicker .folder-color-swatch.is-selected {
    border-color: #0f172a !important;
    transform: scale(1.08) !important;
}

/* --- Контекст-меню вкладки (⋯) должно жить поверх всего и прицеливаться
       к правильной координате. Обязательно position:fixed + высокий z-index,
       иначе Bootstrap-ные transform-контексты ломают абсолютную координату. */
#folderContextMenu.folder-menu {
    position: fixed;
    z-index: 10060;
}

/* --- Drag-and-drop вкладок и карточек заметок --------------------------- */
.notes-tab[draggable="true"]            { cursor: grab; }
.notes-tab[draggable="true"]:active     { cursor: grabbing; }
.note-card[draggable="true"]            { cursor: grab; }
.note-card[draggable="true"]:active     { cursor: grabbing; }

.notes-tab.drag-source                  { opacity: .45; }
.note-card.drag-source                  { opacity: .55; transform: scale(.98); }

/* Синяя линия-индикатор, куда упадёт вкладка. */
.notes-tab.drag-over-left               { box-shadow: -3px 0 0 0 #4f46e5 inset, -3px 0 0 0 #4f46e5; }
.notes-tab.drag-over-right              { box-shadow:  3px 0 0 0 #4f46e5 inset,  3px 0 0 0 #4f46e5; }

/* Подсветка, когда на вкладку роняют заметку. */
.notes-tab.drag-over-note {
    background: rgba(79, 70, 229, .12) !important;
    outline: 2px dashed #4f46e5;
    outline-offset: -2px;
}

/* Мобильные правила для модалок заметок/задач/детей/закупок живут в
   отдельном файле `static/css/app-mobile-polish.css` (подключён в
   base.html и применяется только на экранах ≤1024px / тач-устройствах).
   Делаем единую точку правды, чтобы не дублировать логику. */

/* ========================================================================
   EQUIPMENT CATALOG — перенесено из inline <style> в equipment_catalog.html
   ======================================================================== */

.equipment-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.equipment-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

/* ========================================================================
   KPI TABLES — выравнивание текста по левому краю для лучшей читаемости
   длинных значений (ФИО, даты). Перекрывает центрирование из базового
   .unified-table (строки ~16815).
   ======================================================================== */

#records .unified-table thead th,
#records .unified-table tbody td,
#diagnostics .unified-table thead th,
#diagnostics .unified-table tbody td,
#subscription .unified-table thead th,
#subscription .unified-table tbody td,
#results .unified-table thead th,
#results .unified-table tbody td,
#salary .unified-table thead th,
#salary .unified-table tbody td {
    text-align: left;
}

/* ========================================================================
   UNIFIED TABS — единый стиль вкладок (как на странице «Мои заметки»)
   ------------------------------------------------------------------------
   Применяет визуальный стиль .notes-tabs-bar / .notes-tab ко всем типам
   вкладок в проекте (Bootstrap .nav-tabs / .nav-pills, .smm-tabs,
   .music-nav-tabs и др.) без изменения HTML шаблонов и без удаления
   существующих правил. Добавлено 2026-04-23.
   ======================================================================== */

/* Контейнер вкладок */
.nav-tabs,
.nav-pills,
.smm-tabs,
.music-nav-tabs {
    display: flex !important;
    align-items: center;
    gap: 6px !important;
    margin: 0 0 16px 0 !important;
    padding: 6px !important;
    background: #f8fafc !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 16px !important;
    overflow-x: auto;
    scrollbar-width: thin;
    list-style: none;
    flex-wrap: nowrap;
}

.nav-tabs .nav-item,
.nav-pills .nav-item {
    margin-bottom: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

/* Каждая вкладка */
.nav-tabs .nav-link,
.nav-pills .nav-link,
.music-nav-tab {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 8px 14px !important;
    margin: 0 !important;
    border: 1px solid transparent !important;
    border-radius: 12px !important;
    color: #475569 !important;
    background: transparent !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s ease;
    position: static !important;
    bottom: auto !important;
}

.nav-tabs .nav-link:hover,
.nav-pills .nav-link:hover,
.music-nav-tab:hover {
    background: #eef2ff !important;
    color: #3730a3 !important;
    border-color: transparent !important;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link,
.nav-pills .nav-link.active,
.nav-pills .nav-link.show,
.music-nav-tab.active {
    background: #ffffff !important;
    color: #1e293b !important;
    border: 1px solid #c7d2fe !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
    font-weight: 600 !important;
}

.nav-tabs .nav-link i,
.nav-pills .nav-link i,
.music-nav-tab i {
    font-size: 14px;
    margin-right: 0 !important;
}

.nav-tabs .nav-link[disabled],
.nav-tabs .nav-link:disabled,
.nav-pills .nav-link[disabled],
.nav-pills .nav-link:disabled,
.music-nav-tab[disabled],
.music-nav-tab:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

@media (max-width: 576px) {
    .nav-tabs,
    .nav-pills,
    .smm-tabs,
    .music-nav-tabs {
        margin-bottom: 12px !important;
        padding: 4px !important;
        border-radius: 14px !important;
    }
    .nav-tabs .nav-link,
    .nav-pills .nav-link,
    .music-nav-tab {
        padding: 7px 12px !important;
        font-size: 13px !important;
    }
}

/* ========================================================================
   UNIFIED BUTTONS — единый стиль кастомных кнопок
   ------------------------------------------------------------------------
   Приводит кастомные классы кнопок к стандартным вариантам дизайн-системы
   (.btn-primary / .btn-secondary и т.д.). HTML трогать не требуется.
   Ничего не удаляется, только alias'ы. Добавлено 2026-04-23.
   ======================================================================== */

/* .btn-custom, .btn-primary-custom → визуально как .btn-primary */
.btn-custom,
.btn-primary-custom {
    background: var(--gradient-primary) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: var(--shadow-button) !important;
    transition: var(--transition-button) !important;
    border-radius: var(--radius-sm) !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.btn-custom:hover,
.btn-primary-custom:hover,
.btn-custom:focus,
.btn-primary-custom:focus {
    background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%) !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: var(--shadow-button-hover) !important;
    text-decoration: none !important;
}

/* .btn-secondary-custom → как .btn-secondary */
.btn-secondary-custom {
    background: var(--gradient-secondary) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: var(--shadow-button) !important;
    transition: var(--transition-button) !important;
    border-radius: var(--radius-sm) !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.btn-secondary-custom:hover,
.btn-secondary-custom:focus {
    background: linear-gradient(135deg, #64748b 0%, #475569 100%) !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: var(--shadow-button-hover) !important;
    text-decoration: none !important;
}

/* .btn-storage — фирменный синий (хранилище / файлы) */
.btn-storage {
    background: linear-gradient(135deg, var(--storage-primary, #3b82f6) 0%, #2563eb 100%) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25) !important;
    transition: var(--transition-button) !important;
    border-radius: var(--radius-sm) !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.btn-storage:hover,
.btn-storage:focus {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.35) !important;
    text-decoration: none !important;
}

/* Небольшие «action»-кнопки-иконки без собственного фона */
.btn-action-circle,
.btn-file-action,
.btn-v {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: var(--color-soft, #f8fafc) !important;
    color: var(--color-text, #1f2937) !important;
    border: 1px solid var(--color-border, #e5e7eb) !important;
    box-shadow: none !important;
    transition: var(--transition-button) !important;
    cursor: pointer;
}
.btn-action-circle:hover,
.btn-file-action:hover,
.btn-v:hover,
.btn-action-circle:focus,
.btn-file-action:focus,
.btn-v:focus {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    color: var(--color-text, #1f2937) !important;
    text-decoration: none !important;
}
.btn-action-circle i,
.btn-file-action i,
.btn-v i {
    font-size: 14px;
    margin: 0 !important;
}

/* ============================================================
   Assessments (_assessments.html) — utility-классы.
   Вынесены из inline-style. Все «опасные» места с динамической
   заливкой через {{ latest_*_color }} остаются inline (см. макет
   карточки ребёнка — окрашивание глобального ответа).
   ============================================================ */
.v2-assess-label {
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-2);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.v2-assess-text-primary {
    color: var(--color-primary);
}
.v2-assess-input-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-3);
    background: white;
    min-height: auto;
    font-size: var(--font-size-sm);
}
.v2-assess-text-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-3);
    font-size: var(--font-size-sm);
    font-family: var(--font-family-base);
}
.v2-assess-soft-chip {
    background: var(--bs-primary-bg-subtle) !important;
    color: var(--bs-primary-text-emphasis) !important;
    border: 1px solid var(--bs-primary-border-subtle) !important;
    font-size: 9px !important;
    font-weight: 400 !important;
    padding: 0 4px !important;
    border-radius: 9999px !important;
}
.v2-assess-mini-badge {
    font-size: 11px !important;
    padding: 2px 6px !important;
}
.v2-assess-line {
    padding: 6px 0 !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
}
.v2-assess-fa-force {
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    display: inline !important;
    visibility: visible !important;
    opacity: 1 !important;
}
.v2-assess-row-flex {
    display: flex;
    align-items: center;
    gap: 8px;
}
.v2-assess-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-3);
    font-size: var(--font-size-sm);
}
.v2-assess-section-head {
    margin-bottom: 10px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid #8b5cf6 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}
.v2-assess-fs-3xs {
    font-size: 0.75rem !important;
}
.v2-assess-tag-btn {
    cursor: pointer;
    font-size: 0.75rem !important;
    padding: 4px 8px !important;
}
.v2-assess-bubble {
    padding: 6px 10px !important;
    margin-bottom: 6px !important;
    border-radius: 8px !important;
    background: #fafafa !important;
    box-shadow: 0 2px 4px rgba(139, 92, 246, 0.15) !important;
}
.v2-assess-action-btn {
    min-width: 240px;
    height: 44px;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 10px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.v2-assess-caption {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.v2-assess-tag-sm {
    font-size: 10px !important;
    padding: 4px 8px !important;
}
.v2-assess-flex-center {
    flex: 1;
    text-align: center;
    margin: 0 10px;
}
.v2-assess-primary-12 {
    color: var(--color-primary);
    font-size: 12px;
}
.v2-assess-w-220 {
    width: 220px;
}
.v2-assess-bg-card {
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-background);
}
.v2-assess-nowrap {
    white-space: nowrap;
}
.v2-assess-wrap-badge {
    white-space: normal !important;
    word-break: break-word !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 350px !important;
    display: inline-block !important;
    font-size: 11px !important;
    padding: 2px 6px !important;
}
.v2-assess-accent-block {
    padding: var(--space-4);
    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
}
.v2-assess-btn-md {
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-sm);
    border-radius: var(--radius-sm);
    transition: all 0.2s;
}
.v2-assess-line-md {
    padding: var(--space-2) 0 !important;
    font-size: var(--font-size-sm) !important;
    line-height: 1.4 !important;
}
.v2-assess-btn-xs {
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-xs);
    border-radius: var(--radius-sm);
    transition: all 0.2s;
}
.v2-assess-fa-force-2 {
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", FontAwesome !important;
    font-weight: 900 !important;
    display: inline !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-style: normal !important;
}
.v2-assess-accordion-reset {
    flex-direction: column !important;
    align-items: flex-start !important;
    --bs-accordion-btn-icon: none;
    --bs-accordion-btn-active-icon: none;
    --bs-accordion-btn-icon-width: 0px;
}
.v2-assess-flex-col {
    display: flex !important;
    flex-direction: column !important;
}
.v2-assess-flex-row-stretch {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    justify-content: space-between !important;
}
.v2-assess-w-56 { width: 56px; }
.v2-assess-w-170 { width: 170px; }
.v2-assess-pill-xs {
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-xs);
    border-radius: var(--radius-sm);
}
.v2-assess-followup-card {
    padding: 8px;
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 3px 3px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    margin-bottom: 8px;
}
.v2-assess-mini-pill {
    padding: 2px 8px;
    font-size: 11px;
}
.v2-assess-gap-2 { gap: var(--space-2); }
.v2-assess-gap-8 { gap: 8px; }
.v2-assess-fs-sm { font-size: var(--font-size-sm); }
.v2-assess-fs-14 { font-size: 14px; }
.v2-assess-fs-13-600 { font-size: 13px; font-weight: 600; }

/* ============================================================
   Длинный хвост: общие утилитарные классы для нескольких страниц
   ============================================================ */
.u-flex-1-min-140 { flex: 1; min-width: 140px; }
.u-text-14-374151 { font-size: 14px; color: #374151; }
.u-maxw-300 { max-width: 300px; }
.u-font-base { font-family: var(--font-family-base, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif); }
.u-cursor-help { cursor: help; }
.u-cursor-pointer-x { cursor: pointer; }
.u-mx-10 { margin: 0 10px; }
.u-w-200 { width: 200px; }
.u-files-wrap-text {
    display: block !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    word-break: break-word;
    overflow-wrap: anywhere;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

/* ============================================================
   Универсальная градиент-шапка секции (purple по умолчанию)
   Использование:
     <div class="card-header section-head-gradient">
         <h5><span class="fa-icon-pill"><i class="fas fa-..."></i></span> Заголовок</h5>
     </div>
   Доп. темы: theme-info / theme-success / theme-warning / theme-danger / theme-temp.
   ============================================================ */
.section-head-gradient {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #fff !important;
    border: none !important;
    padding: 14px 20px !important;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
    position: relative;
    overflow: hidden;
}
.section-head-gradient::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0) 100%);
    pointer-events: none;
}
.section-head-gradient h1,
.section-head-gradient h2,
.section-head-gradient h3,
.section-head-gradient h4,
.section-head-gradient h5,
.section-head-gradient h6 {
    color: #fff !important;
    font-weight: 700 !important;
    margin: 0 !important;
    font-size: 0.95rem !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    gap: 10px;
}
.section-head-gradient .fa-icon-pill {
    width: 30px; height: 30px;
    background: rgba(255,255,255,0.2);
    border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
}
/* Стеклянные счётчики/бейджи внутри градиент-шапки */
.section-head-gradient .badge-chip,
.section-head-gradient .badge-chip.primary,
.section-head-gradient .badge-chip.success,
.section-head-gradient .badge-chip.info,
.section-head-gradient .badge-chip.warning,
.section-head-gradient .badge-chip.danger,
.section-head-gradient .badge-chip.secondary,
.section-head-gradient .stat-badge,
.section-head-gradient .ap-count-badge {
    background: rgba(255,255,255,0.25) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.45) !important;
    font-weight: 700 !important;
    font-size: 0.78rem !important;
    padding: 4px 10px !important;
    border-radius: 20px !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.15) !important;
}

/* Тематические варианты */
.section-head-gradient.theme-info    { background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%) !important; }
.section-head-gradient.theme-success { background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important; }
.section-head-gradient.theme-warning { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important; }
.section-head-gradient.theme-danger  { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important; }
.section-head-gradient.theme-temp    { background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important; }
.section-head-gradient.theme-vbmapp  { background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%) !important; }
.section-head-gradient.theme-secondary { background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%) !important; }

/* Если внутренние блоки имеют свои border/box-shadow — снимем,
   когда градиент-шапка уже задаёт визуал. */
.section-head-gradient + .card-body { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }

/* Карточка с section-head-gradient: родитель должен иметь одинаковый
   border-radius и overflow:hidden, иначе углы шапки торчат за белой рамкой. */
.card:has(> .card-header.section-head-gradient) {
    border-radius: var(--radius-lg) !important;
    overflow: hidden !important;
    border: none !important;
    box-shadow: 0 0 0 1px var(--color-border), var(--shadow-sm) !important;
}

.card:has(> .card-header.section-head-gradient) > .card-header.section-head-gradient {
    border-radius: 0 !important;
}

/* Для collapse-содержимого внутри таких карточек */
.card:has(> .card-header.section-head-gradient) > .collapse > .card-body,
.card:has(> .card-header.section-head-gradient) > .card-body {
    border-radius: 0 !important;
}

/* ============================================================
   Dashboard/tasks radius fix.
   Узко правим только проблемные сворачиваемые шапки: не меняем общий
   `.card`, чтобы не ломать скругление обычных карточек по проекту.
   ============================================================ */
.dashboard-card,
.filters-card {
    background: var(--color-surface) !important;
    border: none !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: 0 0 0 1px var(--color-border), var(--shadow-sm) !important;
    overflow: visible !important;
}

.dashboard-card:hover,
.filters-card:hover {
    box-shadow: 0 0 0 1px var(--color-border), var(--shadow-md) !important;
}

.dashboard-card > .card-header.clickable-header,
.filters-card > .filters-header,
.filters-card > .card-header {
    margin: 0 !important;
}

.dashboard-card > .card-header.clickable-header[aria-expanded="false"],
.dashboard-card > .card-header.clickable-header.collapsed,
.dashboard-card:has(> .collapse:not(.show)) > .card-header.clickable-header,
.filters-card > .filters-header[aria-expanded="false"],
.filters-card > .filters-header.collapsed,
.filters-card:has(> .collapse:not(.show)) > .filters-header {
    border-radius: var(--radius-lg) !important;
}

.dashboard-card > .card-header.clickable-header[aria-expanded="true"],
.dashboard-card > .card-header.clickable-header:not(.collapsed):not([aria-expanded="false"]),
.dashboard-card:has(> .collapse.show) > .card-header.clickable-header,
.filters-card > .filters-header[aria-expanded="true"],
.filters-card > .filters-header:not(.collapsed):not([aria-expanded="false"]),
.filters-card:has(> .collapse.show) > .filters-header {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
}

.dashboard-card > .collapse > .card-body,
.filters-card > .collapse > .card-body {
    background: var(--color-surface) !important;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important;
}

.dashboard-card > .card-header.clickable-header:hover {
    transform: none !important;
}

/* Dashboard search uses an absolute button inside the field, not a joined
   Bootstrap input group, so keep the input rounded on all four corners. */
.dashboard-search.input-group,
.dashboard-search .input-group {
    display: block !important;
    position: relative !important;
}

.dashboard-search .input-group .form-control,
.dashboard-search .input-group input.form-control,
.search-card .input-group .form-control {
    border-radius: var(--radius-md) !important;
    border-right: 2px solid var(--color-border) !important;
}

.dashboard-search .input-group .form-control:focus,
.dashboard-search .input-group input.form-control:focus,
.search-card .input-group .form-control:focus {
    border-right-color: var(--color-primary) !important;
}

/* Table cards: keep the outer card, responsive wrapper and table header on
   the same radius so the white card does not peek behind rounded theads. */
.children-table-card .card,
.card.brandbook-section:has(> .card-body.p-0 > .table-responsive),
.card:has(> .card-body.p-0 > .table-responsive > .table) {
    border-radius: var(--radius-lg) !important;
    overflow: hidden !important;
}

.children-table-card .table-responsive,
.card > .card-body.p-0 > .table-responsive {
    border-radius: var(--radius-lg) !important;
    overflow: hidden !important;
}

.children-table-card .table,
.card > .card-body.p-0 > .table-responsive > .table {
    border-radius: var(--radius-lg) !important;
    overflow: hidden !important;
}

.children-table-card .table thead tr:first-child th:first-child,
.card > .card-body.p-0 > .table-responsive > .table thead tr:first-child th:first-child {
    border-top-left-radius: var(--radius-lg) !important;
}

.children-table-card .table thead tr:first-child th:last-child,
.card > .card-body.p-0 > .table-responsive > .table thead tr:first-child th:last-child {
    border-top-right-radius: var(--radius-lg) !important;
}

/* Task create/edit spacing: paired fields in modals need real gaps, not only
   Bootstrap column padding, otherwise field cards look glued together. */
#createTaskModal .modal-body > .row,
#editTaskModal .modal-body > .row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
    margin: 0 0 16px 0 !important;
}

#createTaskModal .modal-body > .row > [class*="col-"],
#editTaskModal .modal-body > .row > [class*="col-"] {
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
}

#createTaskModal .modal-body > .row > [class*="col-"] > .mb-3,
#editTaskModal .modal-body > .row > [class*="col-"] > .mb-3 {
    margin-bottom: 0 !important;
}

#createTaskModal .modal-body > .mb-3,
#editTaskModal .modal-body > .mb-3 {
    margin-bottom: 18px !important;
}

.task-form-row {
    gap: 18px !important;
    margin-bottom: 18px !important;
}

@media (max-width: 768px) {
    #createTaskModal .modal-body > .row,
    #editTaskModal .modal-body > .row {
        grid-template-columns: 1fr !important;
    }
}

/* Button used as dropdown trigger with the same look as unified-filter-select */
select.unified-filter-select,
.unified-filters-body .unified-filter-select {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

button.unified-filter-select,
button.unified-filter-select.dropdown-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    cursor: pointer !important;
    box-shadow: none !important;
}

button.unified-filter-select:hover {
    border-color: var(--color-primary) !important;
    background: white !important;
    color: var(--color-text) !important;
}

button.unified-filter-select:focus,
button.unified-filter-select:active,
.dropdown.show > button.unified-filter-select {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
    background: white !important;
    color: var(--color-text) !important;
    outline: none !important;
}

/* Dropdown menu matches the button width exactly */
.unified-filters-body .dropdown-menu,
.unified-filters-body .dropdown-menu.dropdown-menu-users {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    border: 2px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-md) !important;
    margin-top: 4px !important;
}

/* Vacation filters: compact equal-width controls without Bootstrap column spread */
.vacation-filters-row {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(190px, 220px)) !important;
    gap: 12px !important;
    align-items: end !important;
    justify-content: start !important;
    margin: 0 !important;
}

.vacation-filters-row > [class*="col-"] {
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
    padding: 0 !important;
}

.vacation-filters-row .dropdown,
.vacation-filters-row .dropdown-menu,
.vacation-filters-row .vacation-users-select {
    width: 100% !important;
}

.vacation-filters-row .custom-select-container,
.vacation-filters-row .custom-select-input,
.vacation-filters-row .custom-select-dropdown {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

.vacation-filters-row .custom-select-input {
    min-height: 50px !important;
    height: 50px !important;
    border: 2px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    padding: 12px 16px !important;
    background: white !important;
    box-shadow: none !important;
}

.vacation-filters-row .custom-select-input.active {
    border-color: #667eea !important;
    border-bottom-color: white !important;
    border-radius: 8px 8px 0 0 !important;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.12) !important;
}

.vacation-filters-row .vacation-users-select #dropdownUsers[aria-expanded="true"] {
    position: relative !important;
    z-index: 1001 !important;
    border-color: #667eea !important;
    border-bottom-color: white !important;
    border-radius: 8px 8px 0 0 !important;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.12) !important;
    background: white !important;
    color: var(--color-text) !important;
}

.vacation-filters-row .vacation-users-select #dropdownUsers[aria-expanded="true"] i {
    transform: rotate(180deg) !important;
    color: var(--color-primary) !important;
}

.vacation-filters-row .dropdown-menu-users {
    position: absolute !important;
    top: calc(100% - 2px) !important;
    left: 0 !important;
    right: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    display: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    margin-top: 0 !important;
    padding: 4px 0 !important;
    border: 2px solid #667eea !important;
    border-top: none !important;
    border-radius: 0 0 8px 8px !important;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.12), 0 12px 28px rgba(0, 0, 0, 0.12) !important;
    background: white !important;
    overflow-x: hidden !important;
    z-index: 1000 !important;
}

.vacation-filters-row .dropdown-menu-users.show {
    display: block !important;
}

.vacation-filters-row .dropdown-menu-users li {
    margin: 0 !important;
}

.vacation-filters-row .dropdown-menu-users .form-check {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 10px 14px !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

.vacation-filters-row .dropdown-menu-users .form-check:hover {
    background: #f1f5f9 !important;
}

.vacation-filters-row .dropdown-menu-users .form-check-input {
    width: 14px !important;
    height: 14px !important;
    margin: 0 !important;
    flex: 0 0 14px !important;
    border-color: #667eea !important;
}

.vacation-filters-row .dropdown-menu-users .form-check-label {
    flex: 1 !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    color: #334155 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.25 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.vacation-filters-row .dropdown-menu-users .fw-bold {
    font-weight: 500 !important;
}

.vacation-filters-row .dropdown-menu-users hr {
    display: none !important;
}

@media (max-width: 768px) {
    .vacation-filters-row {
        grid-template-columns: 1fr !important;
    }
}

/* ========================================
   /protocol_templates/<id>/edit — polish
   Редактор шаблона протокола: кнопки, панели, таблица
   ======================================== */
.protocol-page .protocol-card {
    border-radius: var(--radius-lg, 16px) !important;
    box-shadow: 0 0 0 1px var(--color-border, #e5e7eb), var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.08)) !important;
    background: var(--color-surface, #fff) !important;
}

.protocol-page .protocol-card:hover {
    transform: none !important;
    box-shadow: 0 0 0 1px var(--color-border, #e5e7eb), var(--shadow-md, 0 8px 24px rgba(0, 0, 0, 0.12)) !important;
}

.protocol-page .protocol-card.bg-light,
.protocol-page .protocol-card.border-0.bg-light {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
    border: 1px solid var(--color-border, #e5e7eb) !important;
}

.protocol-page .protocol-card .card-title {
    display: inline-flex !important;
    align-items: center !important;
    gap: var(--space-2, 8px) !important;
    color: var(--color-text, #1f2937) !important;
    font-weight: var(--font-weight-bold, 700) !important;
    margin: 0 0 var(--space-3, 12px) 0 !important;
}

.protocol-page .protocol-btn,
.protocol-page .protocol-btn.btn,
.protocol-page .btn.protocol-btn {
    min-height: 38px !important;
    padding: 8px 16px !important;
    border-radius: var(--radius-sm, 8px) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    font-size: var(--font-size-sm, 13px) !important;
    font-weight: var(--font-weight-semibold, 600) !important;
    line-height: 1 !important;
    border-width: 1px !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08) !important;
}

.protocol-page .protocol-btn i {
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1 !important;
}

.protocol-page .protocol-btn.btn-primary {
    background: var(--gradient-primary, linear-gradient(135deg, #667eea 0%, #764ba2 100%)) !important;
    border-color: transparent !important;
    color: #fff !important;
}

.protocol-page .protocol-btn.btn-success {
    background: var(--gradient-success, linear-gradient(135deg, #22c55e 0%, #16a34a 100%)) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.24) !important;
}

.protocol-page .protocol-btn.btn-secondary {
    background: #fff !important;
    border: 1px solid var(--color-border, #e5e7eb) !important;
    color: var(--color-muted, #6b7280) !important;
    box-shadow: none !important;
}

.protocol-page .protocol-btn.btn-outline-primary,
.protocol-page .protocol-btn.btn-outline-success,
.protocol-page .protocol-btn.btn-outline-secondary {
    background: #fff !important;
    border-width: 1px !important;
    box-shadow: none !important;
}

.protocol-page .protocol-btn:hover,
.protocol-page .protocol-btn.btn:hover {
    transform: translateY(-1px) !important;
}

.protocol-page .protocol-btn.btn-secondary:hover,
.protocol-page .protocol-btn.btn-outline-secondary:hover {
    background: var(--color-soft, #f8fafc) !important;
    color: var(--color-text, #1f2937) !important;
    border-color: #d1d5db !important;
}

.protocol-page #structureButtons.btn-group {
    display: flex !important;
    align-items: center !important;
    gap: var(--space-2, 8px) !important;
}

.protocol-page #structureButtons.btn-group > .protocol-btn {
    border-radius: var(--radius-sm, 8px) !important;
    margin-left: 0 !important;
}

.protocol-page #structureForm .d-flex.gap-2,
.protocol-page form > .d-flex.gap-2 {
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: var(--space-2, 8px) !important;
}

.protocol-page .protocol-form-control.form-control-sm,
.protocol-page .protocol-form-control.form-select-sm {
    min-height: 38px !important;
    padding: 8px 12px !important;
    font-size: var(--font-size-sm, 13px) !important;
    border-width: 1px !important;
}

.protocol-page textarea.protocol-form-control.form-control-sm {
    min-height: 74px !important;
}

.protocol-page .form-check {
    display: flex !important;
    align-items: center !important;
    gap: var(--space-2, 8px) !important;
    min-height: 28px !important;
    margin-bottom: var(--space-2, 8px) !important;
    padding-left: 0 !important;
}

.protocol-page .form-check-input {
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    flex: 0 0 16px !important;
}

.protocol-page .form-check-label {
    margin: 0 !important;
    color: var(--color-text, #1f2937) !important;
    font-weight: var(--font-weight-medium, 500) !important;
}

.protocol-page #tableContainer.table-responsive {
    border-radius: var(--radius-md, 12px) !important;
    border: 1px solid var(--color-border, #e5e7eb) !important;
    overflow: auto !important;
    background: #fff !important;
}

.protocol-page .protocol-table {
    margin-bottom: 0 !important;
    border: none !important;
    border-radius: 0 !important;
}

.protocol-page .protocol-table.table-bordered th,
.protocol-page .protocol-table.table-bordered td {
    border-color: var(--color-border, #e5e7eb) !important;
}

.protocol-page .protocol-table.table-bordered thead th {
    background: rgba(102, 126, 234, 0.08) !important;
    border-bottom-color: rgba(102, 126, 234, 0.24) !important;
}

.protocol-page .cell-editor-toolbar {
    align-items: center !important;
    gap: 3px !important;
    padding: 4px !important;
    border-radius: var(--radius-sm, 8px) !important;
    border: 1px solid var(--color-border, #e5e7eb) !important;
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.08)) !important;
}

.protocol-page .cell-editor-toolbar .btn,
.protocol-page .cell-editor-toolbar .btn-group .btn {
    width: 26px !important;
    height: 26px !important;
    min-height: 26px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px !important;
    background: #fff !important;
    border: 1px solid transparent !important;
    color: var(--color-muted, #6b7280) !important;
    box-shadow: none !important;
}

.protocol-page .cell-editor-toolbar .btn:hover {
    background: var(--color-soft, #f8fafc) !important;
    border-color: var(--color-border, #e5e7eb) !important;
    color: var(--color-primary, #667eea) !important;
}

.protocol-page .cell-editor-toolbar .btn-group {
    gap: 3px !important;
}

.protocol-page .cell-editor-container > .btn-outline-danger.position-absolute,
.protocol-page .protocol-table td > .btn-outline-danger {
    width: 28px !important;
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: var(--radius-sm, 8px) !important;
    background: #fff !important;
    border: 1px solid rgba(239, 68, 68, 0.35) !important;
    color: var(--color-danger, #ef4444) !important;
    box-shadow: none !important;
    font-size: 12px !important;
}

.protocol-page .cell-editor-container > .btn-outline-danger.position-absolute:hover,
.protocol-page .protocol-table td > .btn-outline-danger:hover {
    background: var(--color-danger, #ef4444) !important;
    color: #fff !important;
    border-color: var(--color-danger, #ef4444) !important;
}