/* ==========================================================================
   1. БАЗОВЫЕ СТИЛИ (Глассморфизм и Цветовая гамма)
   ========================================================================== */
body { 
    font-family: Tahoma, sans-serif; 
    font-size: 12px; 
    /* Плавный тиловый градиент для создания глубины под "стеклом" */
    background: linear-gradient(135deg, #cadbd9 0%, #a8c4c1 100%); 
    margin: 0; 
    overflow: auto; 
}

/* ИСПРАВЛЕНИЕ 1: Центрирование контента во вкладках */
#grid-view, #report-view {
    text-align: center;
}

.page-contents { 
    padding: 5px; 
    /* Эффект матового стекла (Glassmorphism) */
    background: rgba(255, 255, 255, 0.7); 
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    margin: 5px; 
    border-radius: 8px; /* Немного увеличил радиус для мягкости */
    min-height: calc(100vh - 10px); 
    box-sizing: border-box;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

h1, h2 { 
    font-size: 16px; 
    border-bottom: 2px solid #148577; 
    color: #148577; 
    padding-bottom: 5px; 
    margin: 0 0 5px 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* ==========================================================================
   2. ТАБЛИЦЫ (Цвета и Прозрачность)
   ========================================================================== */
table { 
    border-collapse: separate; 
    border-spacing: 0;
    width: 100%; 
    border: 1px solid #148577; 
    background: rgba(255, 255, 255, 0.5); /* Полупрозрачный фон таблицы */
}

th, td { 
    border: 1px solid #cadbd9; 
    padding: 2px 4px; 
    text-align: center; 
}

th { 
    /* Тиловый градиент в шапке для объема */
    background: linear-gradient(to bottom, #148577, #0d6d62); 
    color: white; 
    font-weight: bold; 
}

.time-col { 
    background: rgba(240, 247, 246, 0.9) !important; 
    color: #148577;
    font-weight: bold; 
    width: 45px; 
    font-size: 11px;
}

/* "Зебра" строк с легкой прозрачностью */
tr:nth-child(even) td { background-color: rgba(248, 251, 251, 0.5); }

/* Элемент чекбокса (cb-div) */
.cb-div { 
    width: 14px; 
    height: 14px; 
    border: 1px solid #148577; 
    margin: auto; 
    cursor: pointer; 
    background: white; 
    border-radius: 2px;
    transition: all 0.2s; /* Плавная смена цвета */
}

/* ==========================================================================
   3. СОСТОЯНИЯ ЯЧЕЕК (Акценты)
   ========================================================================== */
.booked-now .cb-div { background-color: #148577 !important; border: 1px solid #0d6d62; }
.booked-reserve .cb-div { background-color: #ff9800 !important; border: 1px solid #000; }
.to-add .cb-div { background-color: #fafff0; border: 2px dashed #148577; }
.to-remove .cb-div { background-color: white !important; border: 2px solid red !important; }

.full { background-color: rgba(255, 170, 170, 0.7) !important; }
.hidden { display: none !important; }

/* ==========================================================================
   4. КНОПКИ И НАВИГАЦИЯ (Интерфейс)
   ========================================================================== */
#admin-nav {
    background: rgba(20, 133, 119, 0.9); /* Полупрозрачный тил */
    backdrop-filter: blur(5px);
    padding: 8px; margin-bottom: 10px;
    border-radius: 4px; display: flex; gap: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

#admin-nav button {
    background: #0d6d62; 
    color: white; border: none;
    padding: 6px 12px; cursor: pointer; border-radius: 3px;
    font-size: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

#admin-nav button:hover { background: #0a524a; }

.save-btn { 
    background: linear-gradient(to bottom, #148577, #0d6d62); 
    color: white; border: none; border-radius: 4px; 
    font-weight: bold; cursor: pointer; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.btn-nav {
    background: #666; color: white; border: none; padding: 4px 10px;
    border-radius: 3px; cursor: pointer; font-size: 12px;
    transition: all 0.2s;
}
.btn-nav:hover { background: #333; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }

/* ==========================================================================
   5. ЛОАДЕР И ОВЕРЛЕЙ (Системные)
   ========================================================================== */
#overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    /* Более глубокое размытие для лоадера */
    background: rgba(255, 255, 255, 0.4); 
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center; align-items: center; z-index: 1000; flex-direction: column;
}

.loader {
    border: 6px solid rgba(243, 243, 243, 0.5); 
    border-top: 6px solid #148577;
    border-radius: 50%; width: 40px; height: 40px;
    animation: spin 1s linear infinite; margin-bottom: 10px;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* ==========================================================================
   6. МОДАЛЬНЫЕ ОКНА (Глассморфизм в деталях)
   ========================================================================== */
.overlay-simple {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(20, 133, 119, 0.2); 
    display: none; 
    justify-content: center; align-items: center; z-index: 9999;
    backdrop-filter: blur(4px); 
}

.modal-card {
    background: rgba(255, 255, 255, 0.95); /* Почти непрозрачное стекло для текста */
    border-radius: 12px; 
    box-shadow: 0 15px 45px rgba(0,0,0,0.15);
    width: 480px; 
    padding: 25px;
    border: 1px solid rgba(20, 133, 119, 0.3);
}

.modal-card h2 {
    font-size: 20px;
    font-weight: bold;
    color: #148577; 
    border-bottom: 2px solid #148577; 
    padding-bottom: 12px;
    margin-bottom: 20px;
}

.form-group label { 
    display: block; 
    font-weight: bold; 
    margin-bottom: 6px; 
    font-size: 13px; 
    color: #0d6d62; 
}

.form-group input, .form-group select {
    width: 100%; 
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid #cadbd9; 
    border-radius: 6px; 
    box-sizing: border-box; 
    padding: 10px;
    font-size: 14px;
    transition: border-color 0.2s;
}

.form-group input:focus, .form-group select:focus {
    border-color: #148577; 
    outline: none;
    box-shadow: 0 0 0 3px rgba(20, 133, 119, 0.1);
}

/* Блок прав администратора */
.admin-rights-block {
    background: rgba(255, 248, 240, 0.8); 
    padding: 12px; 
    border-radius: 8px; 
    display: flex; 
    align-items: center; 
    gap: 12px;
    margin: 20px 0;
    border: 1px solid #ffe0b2;
}

.btn-save {
    background: linear-gradient(to bottom, #148577, #0d6d62);
    color: white;
    border: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.btn-cancel {
    background: rgba(248, 251, 251, 0.8);
    color: #148577;
    border: 1px solid #148577;
}

/* --- КНОПКИ И ПОЛЯ В МОДАЛЬНЫХ ОКНАХ (Улучшение вида) --- */

/* 1. Делаем инпуты и кнопки одинаковыми по высоте для гармонии */
.form-group input, 
.form-group select, 
.modal-footer button {
    height: 42px; /* Единая высота для всех интерактивных элементов */
    box-sizing: border-box;
    border-radius: 8px; /* Мягкое закругление */
    font-size: 14px;
    border: none; /* Убираем стандартные рамки */
    outline: none;
}

/* 2. Контейнер кнопок (перенос ниже выпадающего списка) */
.modal-footer { 
    display: flex; 
    gap: 12px; 
    margin-top: 20px; /* Отступ от списков сверху */
}

.modal-footer button {
    flex: 1; /* Кнопки делят ширину поровну */
    font-weight: bold;
    cursor: pointer;
    text-transform: uppercase;
    transition: transform 0.1s, box-shadow 0.2s;
}

/* Эффект нажатия (кнопка слегка вдавливается) */
.modal-footer button:active {
    transform: scale(0.98);
}

/* 3. Кнопка действия (ПРИМЕНИТЬ / СОХРАНИТЬ) */
.btn-save {
    /* Насыщенный тиловый или оранжевый (как на твоем скрипте) */
    background: #e65100; /* Глубокий оранжевый акцент */
    color: white;
    box-shadow: 0 4px 6px rgba(230, 81, 0, 0.2);
}

.btn-save:hover {
    background: #ef6c00;
    box-shadow: 0 6px 12px rgba(230, 81, 0, 0.3);
}

/* 4. Кнопка ОТМЕНА (Стиль "призрака") */
.btn-cancel {
    background: rgba(20, 133, 119, 0.1); /* Полупрозрачный фон под стекло */
    color: #148577;
    border: 1px solid rgba(20, 133, 119, 0.3) !important; /* Тонкая рамка */
}

.btn-cancel:hover {
    background: rgba(20, 133, 119, 0.2);
}

/* ==========================================================================
   7. ТАБЛИЦА ОПЕРАТОРА (Компактность и Скролл)
   ========================================================================== */
/* ИСПРАВЛЕНИЕ 2: display: block и центрирование через margin */
.operator-grid-wrapper {
    display: block !important;
    max-height: calc(100vh - 65px);
    width: 1400px !important;
    height: 640px !important;
    margin: 0 auto !important;
    overflow: auto;
    border: 1px solid #148577;
    position: relative;
    background: rgba(255, 255, 255, 0.6);
}

.operator-table thead th {
    position: sticky;
    top: 0;
    background: #148577;
    z-index: 30;
    border-bottom: 2px solid #0d6d62;
    height: 20px;
    padding: 2px;
}

.operator-table .time-col {
    position: sticky;
    left: 0;
    z-index: 35;
    border-right: 2px solid #148577;
    background: rgba(240, 247, 246, 0.95) !important;
}

.operator-table td {
    padding: 0 !important;
    height: 22px !important; 
}

/* ==========================================================================
   8. АДМИН-ПАНЕЛЬ, ПЛАНИРОВАНИЕ И НАСТРОЙКИ
   ========================================================================== */
.admin-table tr:hover { background-color: rgba(241, 248, 233, 0.7) !important; }

.plan-table input { 
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid #cadbd9; 
}

.locked-day {
    background-color: rgba(202, 219, 217, 0.4) !important; 
    filter: blur(1px);
    pointer-events: none; 
}

.category-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(5px);
    border: 1px solid #cadbd9;
    border-radius: 8px;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.category-card:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 10px 20px rgba(20, 133, 119, 0.2);
}

/* ==========================================================================
   9. ОТЧЕТЫ (Фиксация размеров)
   ========================================================================== */
.report-grid-fixed {
    table-layout: fixed; 
    width: 100%;
    background: rgba(255, 255, 255, 0.5);
}

.report-grid-fixed th, 
.report-grid-fixed td {
    border: 1px solid #cadbd9;
    /* Размеры сохранены по твоему запросу */
    min-width: 80px;  
    max-width: 120px; 
    height: 30px;     
}

.report-grid-fixed .time-col-report {
    background: rgba(240, 247, 246, 0.9) !important;
    font-weight: bold;
    color: #148577;
}

/* Жесткие размеры 1400x640 ТОЛЬКО для записи смен */
.operator-grid-wrapper {
    width: 1400px !important;
    height: 640px !important;
    max-width: none !important;
    max-height: none !important;
    overflow: auto !important;
    box-sizing: border-box;
    border: 1px solid #148577;
}

/* ИСПРАВЛЕНИЕ: Центрирование контейнера отчета */
.user-table-wrapper-report {
    display: block !important;    /* Возвращаем блочный тип */
    width: fit-content !important; /* Контейнер сожмется до ширины таблицы */
    max-width: 98vw;              /* Не даем вылезать за края экрана */
    height: 800px !important;
    margin: 0 auto !important;    /* МАГИЯ ЦЕНТРИРОВАНИЯ: равные отступы слева и справа */
    overflow: auto !important;
    box-sizing: border-box;
    background: white;
    border: 1px solid #cadbd9;
}

/* Таблица записи остается широкой */
.operator-table {
    width: 100% !important;
    min-width: 1380px !important; 
    table-layout: fixed;
}

/* Таблица отчета: ширина auto, чтобы ячейки по 50px выстроили длинную ленту */
.report-grid-fixed {
    table-layout: fixed !important;
    width: auto !important; 
    border-collapse: collapse !important;
    margin: 0;
}

/* Жесткая фиксация ячеек отчета 50x30 */
.report-grid-fixed th, 
.report-grid-fixed td {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 25px !important;
    padding: 0 !important;
    box-sizing: border-box;
    overflow: hidden;
    text-align: center;
    vertical-align: middle;
    border: 1px solid #cadbd9;
}

/* Фиксация первого столбца с часами в отчете при горизонтальном скролле */
.report-grid-fixed .time-col-report {
    position: sticky;
    left: 0;
    z-index: 10;
    background: #f0f7f6 !important;
    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
}

/* Исключение для объединенной строки месяца */
.report-grid-fixed tr:last-child td {
    width: 100% !important;
    max-width: none !important;
    height: 40px !important;
}

.report-grid-fixed thead th {
    position: sticky;
    top: 0;
    z-index: 20; /* Выше, чем у боковой колонки */
    background: rgba(20, 133, 119, 0.9);
}

/* Чтобы угол (Час) не пропадал */
.report-grid-fixed thead th:first-child {
    left: 0;
    z-index: 30;
}