/* Основные стили */
body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    line-height: 1.6;
    color: #2c3e50;
    background-color: #f8f9fa;
    margin: 0;
    padding: 20px;
    /* Предотвращаем подпрыгивание при загрузке */
    overflow-x: hidden;
    min-height: 100vh;
}

/* Алиас для кнопок действий под единый стиль проекта */
.button {
    display: inline-block;
    background: #3182ce;
    color: #fff;
    border: none;
    padding: 8px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.2s;
    text-align: center;
}
.button:hover { background: #2c5282; }
.button:disabled { opacity: 0.6; cursor: not-allowed; }

/* Предотвращаем FOUC */
html {
    scroll-behavior: smooth;
}

/* Предотвращаем подпрыгивание при загрузке изображений */
img {
    max-width: 100%;
    height: auto;
}

/* Предотвращаем подпрыгивание при загрузке шрифтов */
.font-awesome {
    font-display: swap;
}

#content {
    max-width: 1400px;
    margin: 0 auto;
    background: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

h1 {
    color: #1a365d;
    margin-bottom: 30px;
    font-size: 28px;
    font-weight: 600;
}

/* Стили формы (без глобального flex, чтобы избежать оверлапов) */
form {
    background: #f8fafc;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 30px;
}

/* Форма фильтров календаря: всё в одну линию */
#calendar-form {
    flex-wrap: nowrap;
    gap: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
}

label {
    font-weight: 500;
    color: #4a5568;
}

input[type="date"] {
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 14px;
    color: #2d3748;
    background: white;
}

button {
    background: #3182ce;
    color: white;
    border: none;
    padding: 8px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.2s;
}

button:hover {
    background: #2c5282;
}

/* Стили таблицы */
.table-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    margin-bottom: 30px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    /* Предотвращаем подпрыгивание */
    min-height: 400px;
    position: relative;
}

.table-container {
    overflow: visible;
}

table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    table-layout: auto;
    background: white;
}

th, td {
    border: 1px solid #e2e8f0;
    text-align: center;
    padding: 8px;
    font-size: 14px;
    transition: background-color 0.2s;
}

/* Стили для первого столбца */
th:first-child, td:first-child {
    width: 100px;
    min-width: 100px;
    max-width: 100px;
    overflow: hidden;
    font-weight: 500;
    padding-left: 0;
    padding-right: 0;
}

/* Стили для столбцов с датами */
th:not(:first-child):not(:last-child),
td:not(:first-child):not(:last-child) {
    width: 70px;
    min-width: 70px;
}

/* Стили для последнего столбца */
th:last-child, td:last-child {
    width: 300px;
    min-width: 300px;
    max-width: 300px;
    overflow-wrap: break-word;
    white-space: normal;
    text-overflow: initial;
    padding-left: 0;
    padding-right: 0;
}

/* Заголовки - общие стили (БЕЗ sticky, sticky задаётся отдельно для calendar-table) */
th {
    background-color: #f7fafc;
    font-weight: 600;
    color: #4a5568;
    border-bottom: 2px solid #e2e8f0;
}

/* ============================================================
   STICKY ТАБЛИЦА КАЛЕНДАРЯ - freeze panes как в Excel
   - Строка заголовков (thead) фиксирована сверху
   - Первый столбец (Квартира) фиксирован слева
   - Угловая ячейка фиксирована и сверху, и слева
   ============================================================ */

/* Строка заголовков - фиксация сверху при вертикальном скролле */
#calendar-table thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #f7fafc;
}

/* Угловая ячейка (Квартира) - фиксация И сверху, И слева */
#calendar-table thead th:first-child {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 20 !important; /* Выше всех - должна перекрывать и заголовки, и первый столбец */
    background-color: #f7fafc;
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
}

/* Первый столбец (ячейки данных) - фиксация слева при горизонтальном скролле */
#calendar-table tbody td:first-child,
#calendar-table tbody .sticky-column {
    position: sticky;
    left: 0;
    z-index: 5; /* Ниже заголовков, но выше обычных ячеек */
    background-color: white;
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.08);
}

.first-column {
    left: 0;
}

.last-column {
    right: 0;
}

/* Основные статусы */
.available {
    background-color: #c6f6d5;
    color: #2f855a;
}

/* Кликабельные ячейки */
.day-cell[onclick] {
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.day-cell[onclick]:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 10;
}

.day-cell[onclick]:active {
    transform: scale(1.02);
}

/* Статусы календарей - используем те же классы, что и в HTML */
.status-airbnb {
    background-color: #fce7f3;
    color: #be185d;
    border: 1px solid #f9a8d4;
}

.status-flatio {
    background-color: #ffedd5;
    color: #ea580c;
    border: 1px solid #fdba74;
}

.status-contract {
    background-color: #dbeafe;
    color: #1e40af;
    border: 1px solid #93c5fd;
}

/* Новые статусы договоров */
.status-contract-draft {
    background-color: #e5e7eb !important;
    color: #6b7280 !important;
    border: 1px solid #d1d5db !important;
}

.status-contract-flatio-draft {
    background-color: #fef3c7 !important;
    color: #f59e0b !important;
    border: 1px solid #f59e0b !important;
}

.status-contract-pending {
    background-color: #fef3c7 !important;
    color: #d97706 !important;
    border: 1px solid #fbbf24 !important;
}

.status-contract-active {
    background-color: #dbeafe !important;
    color: #1e40af !important;
    border: 1px solid #93c5fd !important;
}

/* Более специфичные правила для ячеек календаря */
.day-cell.status-contract-draft {
    background-color: #e5e7eb !important;
    color: #6b7280 !important;
    border: 1px solid #d1d5db !important;
}

.day-cell.status-contract-flatio-draft {
    background-color: #fef3c7 !important;
    color: #f59e0b !important;
    border: 1px solid #f59e0b !important;
}

.day-cell.status-contract-pending {
    background-color: #fef3c7 !important;
    color: #d97706 !important;
    border: 1px solid #fbbf24 !important;
}

.day-cell.status-contract-active {
    background-color: #dbeafe !important;
    color: #1e40af !important;
    border: 1px solid #93c5fd !important;
}

/* Индикатор активного договора (зелёный кружок) */
.active-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #10b981; /* emerald-500 */
    vertical-align: middle;
}

.status-expired {
    background-color: #fee2e2;
    color: #dc2626;
    border: 1px solid #fca5a5;
}

.status-past {
    background-color: #d1d5db; /* Более серый для прошлых дат */
    color: #9ca3af; /* Приглушенный текст */
    opacity: 0.6; /* Полупрозрачность для визуального отличия */
}

.status-available {
    background-color: #f8fafc;
    color: #cbd5e1;
}

.status-available:hover {
    background: #f1f5f9;
}

/* Совместимость со старыми классами */
.airbnb {
    background-color: #fce7f3;
    color: #be185d;
    border: 1px solid #f9a8d4;
}

.flatio {
    background-color: #ffedd5;
    color: #ea580c;
    border: 1px solid #fdba74;
}

.custom {
    background-color: #dbeafe;
    color: #1e40af;
    border: 1px solid #93c5fd;
}

.past {
    background-color: #d1d5db; /* Более серый для прошлых дат */
    color: #9ca3af; /* Приглушенный текст */
    opacity: 0.6; /* Полупрозрачность для визуального отличия */
}

/* Совместимость со старыми статусами договоров */
.contract-draft {
    background-color: #e5e7eb;
    color: #6b7280;
    border: 1px solid #d1d5db;
}

.contract-flatio-draft {
    background-color: #fef3c7;
    color: #f59e0b;
    border: 1px solid #f59e0b;
}

.contract-pending {
    background-color: #fef3c7;
    color: #d97706;
    border: 1px solid #fbbf24;
}

.contract-active {
    background-color: #dbeafe;
    color: #1e40af;
    border: 1px solid #93c5fd;
}

/* Hover эффекты */
tr:hover td:not(.sticky-column) {
    background-color: #f7fafc;
}

td:hover {
    filter: brightness(0.95);
}

/* Таблица событий */
.events-table-container {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 300px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin-top: 30px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.events-table {
    width: 100%;
    min-width: 600px;
    background: white;
}

.events-table th, 
.events-table td {
    border: 1px solid #e2e8f0;
    text-align: left;
    padding: 12px;
}

.events-table th {
    background-color: #f7fafc;
    font-weight: 600;
    color: #4a5568;
    position: sticky;
    top: 0;
    z-index: 1;
}

.events-table tr:nth-child(even) {
    background-color: #f8fafc;
}

/* Стили для свежести данных */
.last-column[data-freshness="0"],
.last-column[data-freshness="1"],
.last-column[data-freshness="2"],
.last-column[data-freshness="3"],
.last-column[data-freshness="4"],
.last-column[data-freshness="5"],
.last-column[data-freshness="6"],
.last-column[data-freshness="7"],
.last-column[data-freshness="8"],
.last-column[data-freshness="9"],
.last-column[data-freshness="10"],
.last-column[data-freshness="11"],
.last-column[data-freshness="12"],
.last-column[data-freshness="13"],
.last-column[data-freshness="14"],
.last-column[data-freshness="15"] {
    background-color: #fed7d7;
    color: #c53030;
}

.last-column[data-freshness="16"],
.last-column[data-freshness="17"],
.last-column[data-freshness="18"],
.last-column[data-freshness="19"],
.last-column[data-freshness="20"],
.last-column[data-freshness="21"],
.last-column[data-freshness="22"],
.last-column[data-freshness="23"],
.last-column[data-freshness="24"],
.last-column[data-freshness="25"],
.last-column[data-freshness="26"],
.last-column[data-freshness="27"],
.last-column[data-freshness="28"],
.last-column[data-freshness="29"],
.last-column[data-freshness="30"] {
    background-color: #feebc8;
    color: #c05621;
}

.last-column[data-freshness="31"],
.last-column[data-freshness="32"],
.last-column[data-freshness="33"],
.last-column[data-freshness="34"],
.last-column[data-freshness="35"],
.last-column[data-freshness="36"],
.last-column[data-freshness="37"],
.last-column[data-freshness="38"],
.last-column[data-freshness="39"],
.last-column[data-freshness="40"],
.last-column[data-freshness="41"],
.last-column[data-freshness="42"],
.last-column[data-freshness="43"],
.last-column[data-freshness="44"],
.last-column[data-freshness="45"],
.last-column[data-freshness="46"],
.last-column[data-freshness="47"],
.last-column[data-freshness="48"],
.last-column[data-freshness="49"],
.last-column[data-freshness="50"] {
    background-color: #fefcbf;
    color: #975a16;
}

.last-column[data-freshness="51"],
.last-column[data-freshness="52"],
.last-column[data-freshness="53"],
.last-column[data-freshness="54"],
.last-column[data-freshness="55"],
.last-column[data-freshness="56"],
.last-column[data-freshness="57"],
.last-column[data-freshness="58"],
.last-column[data-freshness="59"],
.last-column[data-freshness="60"],
.last-column[data-freshness="61"],
.last-column[data-freshness="62"],
.last-column[data-freshness="63"],
.last-column[data-freshness="64"],
.last-column[data-freshness="65"],
.last-column[data-freshness="66"],
.last-column[data-freshness="67"],
.last-column[data-freshness="68"],
.last-column[data-freshness="69"],
.last-column[data-freshness="70"],
.last-column[data-freshness="71"],
.last-column[data-freshness="72"],
.last-column[data-freshness="73"],
.last-column[data-freshness="74"],
.last-column[data-freshness="75"] {
    background-color: #c6f6d5;
    color: #2f855a;
}

.last-column[data-freshness="76"],
.last-column[data-freshness="77"],
.last-column[data-freshness="78"],
.last-column[data-freshness="79"],
.last-column[data-freshness="80"],
.last-column[data-freshness="81"],
.last-column[data-freshness="82"],
.last-column[data-freshness="83"],
.last-column[data-freshness="84"],
.last-column[data-freshness="85"],
.last-column[data-freshness="86"],
.last-column[data-freshness="87"],
.last-column[data-freshness="88"],
.last-column[data-freshness="89"],
.last-column[data-freshness="90"],
.last-column[data-freshness="91"],
.last-column[data-freshness="92"],
.last-column[data-freshness="93"],
.last-column[data-freshness="94"],
.last-column[data-freshness="95"],
.last-column[data-freshness="96"],
.last-column[data-freshness="97"],
.last-column[data-freshness="98"],
.last-column[data-freshness="99"],
.last-column[data-freshness="100"] {
    background-color: #9ae6b4;
    color: #276749;
}

/* Ссылки */
a {
    color: #3182ce;
    text-decoration: none;
    transition: color 0.2s;
}

a:hover {
    color: #2c5282;
    text-decoration: underline;
}

/* Сообщения об ошибках */
.error {
    color: #e53e3e;
    background-color: #fff5f5;
    padding: 12px;
    border-radius: 6px;
    margin-bottom: 20px;
    border: 1px solid #fed7d7;
}

th, td {
    padding-left: 0;
    padding-right: 0;
}

.table-wrapper, .table-container, #content {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Тосты: используем Bootstrap .toast и контейнер в правом верхнем углу из base.html */

/* Стили для toast уведомлений */
#toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    max-width: 350px;
}

.toast {
    position: relative;
    display: flex;
    align-items: center;
    padding: 16px 20px;
    margin-bottom: 12px;
    border-radius: 12px;
    color: white;
    font-weight: 500;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    transform: translateX(100%);
    opacity: 0;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

.toast.show {
    transform: translateX(0);
    opacity: 1;
}

.toast.hide {
    transform: translateX(100%);
    opacity: 0;
}

.toast.success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.toast.error {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.toast.info {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.toast-icon {
    margin-right: 12px;
    font-size: 20px;
    flex-shrink: 0;
}

.toast-message {
    flex: 1;
    font-size: 14px;
    line-height: 1.4;
}

.toast-close {
    margin-left: 12px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
    flex-shrink: 0;
}

.toast-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Стили для прогресс-индикатора загрузки календарей */
.calendar-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.progress-overlay {
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.progress-content {
    background: white;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    text-align: center;
    max-width: 400px;
    width: 90%;
}

.progress-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid #e2e8f0;
    border-top: 4px solid #3182ce;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 16px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.progress-message {
    font-size: 16px;
    font-weight: 500;
    color: #2d3748;
    margin-bottom: 16px;
}

.progress-bar {
    width: 100%;
    height: 8px;
    background: #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #3182ce, #4299e1);
    border-radius: 4px;
    transition: width 0.3s ease;
}



/* Стили для состояния загрузки календаря */
.calendar-loading {
    opacity: 0.6;
    pointer-events: none;
    position: relative;
}

.calendar-loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #666;
}

/* Предотвращаем подпрыгивание при обновлении календаря */
#calendar-tbody {
    transition: opacity 0.3s ease;
}

#calendar-tbody.updating {
    opacity: 0.7;
}

/* Стабильная высота для ячеек календаря */
.day-cell {
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

/* Липкий ярлык имени клиента внутри объединённой ячейки */
.merged-client-label {
    position: sticky;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

/* Уменьшенные колонки календаря (в 2 раза уже) */
#calendar-table {
    table-layout: fixed;
    width: auto !important;
    min-width: 100%;
    /* ⚡ Плавное изменение layout при переключении режимов */
    transition: opacity 0.2s ease-in-out;
}

/* Анимация для переключения режимов */
#calendar-table.mode-transition {
    opacity: 0.5;
    pointer-events: none;
}

/* ============================================
   AIRBNB-СТИЛЬ КАЛЕНДАРЯ - РАЗНЫЕ РЕЖИМЫ
   ============================================ */

/* ⚡ Плавное изменение ширины колонок при переключении режимов */
#calendar-table th.text-center,
#calendar-table td.day-cell-container {
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                min-width 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                max-width 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                height 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* === ДНЕВНОЙ РЕЖИМ (daily) - компактные квадратные ячейки === */
#calendar-table[data-render-mode="daily"] {
    table-layout: fixed;
}
#calendar-table[data-render-mode="daily"] th.text-center {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    padding: 6px 2px;
    font-size: 11px;
    line-height: 1.2;
    background: #f7f7f7;
    border-bottom: 2px solid #e0e0e0;
}
#calendar-table[data-render-mode="daily"] td.day-cell-container {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px;
    padding: 2px;
    vertical-align: middle;
}
#calendar-table[data-render-mode="daily"] .day-cell {
    font-size: 12px;
    min-height: 40px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* === НЕДЕЛЬНЫЙ РЕЖИМ (weekly) - широкие ячейки с диапазоном дат и номером недели === */
#calendar-table[data-render-mode="weekly"] {
    table-layout: fixed;
}
#calendar-table[data-render-mode="weekly"] th.text-center {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    padding: 14px 10px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    background: linear-gradient(180deg, #e3f2fd 0%, #bbdefb 100%);
    border-bottom: 3px solid #90caf9;
    border-right: 1px solid #90caf9;
    white-space: normal;
    word-wrap: break-word;
    text-align: center;
    color: #1565c0;
}
#calendar-table[data-render-mode="weekly"] td.day-cell-container {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    height: 90px;
    padding: 8px;
    vertical-align: top;
    border-right: 1px solid #e0e0e0;
}
#calendar-table[data-render-mode="weekly"] .aggregated-cell {
    min-height: 74px !important;
    border-radius: 10px;
    background: linear-gradient(135deg, #ffffff 0%, #f5f5f5 100%);
    border: 2px solid #e0e0e0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.06);
    transition: all 0.2s ease;
}
#calendar-table[data-render-mode="weekly"] .aggregated-cell:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.12);
    transform: translateY(-1px);
}

/* === МЕСЯЧНЫЙ РЕЖИМ (monthly) - широкие ячейки с названием месяца === */
#calendar-table[data-render-mode="monthly"] {
    table-layout: fixed;
}
#calendar-table[data-render-mode="monthly"] th.text-center {
    width: 100px !important;
    min-width: 100px !important;
    max-width: 100px !important;
    padding: 10px 6px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    background: linear-gradient(180deg, #e3f2fd 0%, #bbdefb 100%);
    border-bottom: 2px solid #90caf9;
    white-space: normal;
    word-wrap: break-word;
}
#calendar-table[data-render-mode="monthly"] td.day-cell-container {
    width: 100px !important;
    min-width: 100px !important;
    max-width: 100px !important;
    height: 70px;
    padding: 4px;
    vertical-align: top;
}
#calendar-table[data-render-mode="monthly"] .aggregated-cell {
    min-height: 62px !important;
    border-radius: 10px;
    background: linear-gradient(135deg, #ffffff 0%, #f5f5f5 100%);
    border: 1px solid #e0e0e0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

/* Общие стили для day-cell */
#calendar-table .day-cell {
    font-size: 11px;
    flex-direction: column;
    line-height: 1.1;
    padding: 2px 1px;
    min-height: 42px;
}

/* ⚡ Стили для агрегированных ячеек (недели/месяцы) */
.aggregated-cell {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 54px !important;
    width: 100% !important;
    padding: 4px 2px !important;
    font-size: 0.8rem !important;
    box-sizing: border-box !important;
    gap: 2px;
    transition: all 0.15s ease;
    /* ⚡ Плавное появление при переключении на weekly/monthly режим */
    animation: fadeIn 0.3s ease-out;
}
.aggregated-cell:hover {
    transform: scale(1.02);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* ⚡ Анимация плавного появления */
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.aggregated-occupancy {
    font-size: 0.95rem;
    font-weight: 600;
}

.aggregated-days,
.aggregated-contracts {
    font-size: 0.7rem;
    color: #5f6c80;
    line-height: 1.2;
}

/* Дополнительная адаптация при очень широком экране — можно показывать больше дат */
@media (min-width: 1600px) {
    #calendar-table[data-render-mode="daily"] th.text-center,
    #calendar-table[data-render-mode="daily"] td.day-cell-container {
        width: 48px !important;
        min-width: 48px !important;
    }
    #calendar-table[data-render-mode="weekly"] th.text-center,
    #calendar-table[data-render-mode="weekly"] td.day-cell-container {
        width: 220px !important;
        min-width: 220px !important;
    }
    #calendar-table[data-render-mode="monthly"] th.text-center,
    #calendar-table[data-render-mode="monthly"] td.day-cell-container {
        width: 110px !important;
        min-width: 110px !important;
    }
}

/* Стили для кнопки обновления календарей */
.refresh-calendars-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 10px;
}

.refresh-calendars-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.refresh-calendars-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.refresh-calendars-btn i {
    transition: transform 0.3s ease;
}

.refresh-calendars-btn:not(:disabled):hover i {
    transform: rotate(180deg);
}

/* === СТИЛИ ДЛЯ TIMELINE === */
/* Стили для меток групп */
#timeline .vis-label {
    background: #f8f9fa !important;
    border-right: 2px solid #dee2e6 !important;
    font-weight: 600 !important;
}

/* Стили для индикатора состояния календарей */
.calendar-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 12px;
    background: #f7fafc;
    border: 1px solid #e2e8f0;
    color: #4a5568;
}

.calendar-status.loading {
    background: #ebf8ff;
    border-color: #3182ce;
    color: #3182ce;
}

.calendar-status.loaded {
    background: #f0fff4;
    border-color: #28a745;
    color: #28a745;
}

.calendar-status.error {
    background: #fed7d7;
    border-color: #dc3545;
    color: #dc3545;
}

/* Стили таблицы договоров перенесены в static/css/contracts.css */

/* Мини-карточки в разделе Финансы */
.mini-stat {
    border-left-width: 4px !important;
}

/* Стили для группировки клиентов в календаре */
.client-groups-container {
    padding: 8px !important;
    border: none !important;
    vertical-align: top;
}

.client-group {
    border: 2px solid #3182ce;
    border-radius: 8px;
    margin: 4px 0;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    overflow: hidden;
    transition: all 0.2s ease;
    cursor: pointer;
}

.client-group:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.client-group-header {
    background: #3182ce;
    color: white;
    padding: 8px 12px;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    transition: background-color 0.2s ease;
}

.client-group:hover .client-group-header {
    background: #2c5282;
}

.client-name {
    font-weight: 600;
    font-size: 14px;
}

.client-details {
    font-size: 12px;
    opacity: 0.9;
}

.client-group-body {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 8px;
}

.merged-cell {
    flex: 1;
    min-width: 70px;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    background: white;
    position: relative;
    transition: all 0.2s ease;
}

.merged-cell:hover {
    background: #f1f5f9;
    transform: scale(1.02);
}

.merged-cell:first-child {
    border-left: 2px solid #3182ce;
}

.merged-cell:last-child {
    border-right: 2px solid #3182ce;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
    .client-group-header {
        flex-direction: column;
        gap: 4px;
        text-align: center;
        padding: 6px 8px;
    }
    
    .client-name {
        font-size: 12px;
    }
    
    .client-details {
        font-size: 10px;
    }
    
    .merged-cell {
        min-width: 50px;
    }
    
    .client-group-body {
        padding: 6px;
        gap: 1px;
    }
}

/* Индикаторы статуса в заголовке группы */
.client-status-indicator {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 8px;
}

.client-status-active {
    background: #10b981;
}

.client-status-pending {
    background: #f59e0b;
}

.client-status-expired {
    background: #ef4444;
}

/* Улучшенные стили для ячеек в группах */
.client-group .day-cell {
    border: none !important;
    background: transparent !important;
    padding: 4px !important;
    font-size: 12px !important;
    margin: 0 !important;
    border-radius: 4px !important;
}

.client-group .day-cell.status-contract-active {
    background: #dbeafe !important;
    color: #1e40af !important;
}

.client-group .day-cell.status-contract-pending {
    background: #fef3c7 !important;
    color: #d97706 !important;
}

.client-group .day-cell.status-contract-flatio-draft {
    background: #fef3c7 !important;
    color: #f59e0b !important;
}

.client-group .day-cell.status-contract-draft {
    background: #e5e7eb !important;
    color: #6b7280 !important;
}

.client-group .day-cell.status-available {
    background: #f8fafc !important;
    color: #cbd5e1 !important;
}

/* Анимации для плавного появления групп */
.client-group {
    animation: fadeInUp 0.3s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.btn-profile:active {
    color: #ffffff !important;
    border-color: #1a202c !important;
    background-color: #1a202c !important;
    transform: translateY(0) !important;
}

/* Стили для кнопки выхода с хорошим контрастом */
.btn-logout {
    color: #dc2626 !important; /* Красный текст - контраст 4.5:1 с белым фоном */
    border-color: #dc2626 !important;
    background-color: #ffffff !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

.btn-logout:hover {
    color: #ffffff !important;
    border-color: #dc2626 !important;
    background-color: #dc2626 !important; /* Красный фон - контраст 4.5:1 с белым текстом */
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3) !important;
}

.btn-logout:focus {
    color: #ffffff !important;
    border-color: #dc2626 !important;
    background-color: #dc2626 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 38, 38, 0.5) !important;
    outline: none !important;
}

.btn-logout:active {
    color: #ffffff !important;
    border-color: #b91c1c !important;
    background-color: #b91c1c !important;
    transform: translateY(0) !important;
}

/* Стили для контейнера календарной таблицы с overflow */
.table-scroll-wrapper {
    overflow: auto !important;
    max-height: 80vh !important;
    position: relative !important;
}

/* Стили для Timeline (vis-timeline) */
#timeline {
    position: relative;
    overflow-x: auto;
    overflow-y: auto; /* Изменено с hidden на auto - предотвращает исчезновение при скролле */
}

/* Улучшенные hover эффекты для элементов timeline */
.vis-item {
    transition: opacity 0.2s ease-in-out, box-shadow 0.2s ease-in-out !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Кликабельные элементы (договоры) — визуальный эффект применяем к контенту,
   чтобы не перебивать позиционирование transform, которое делает vis-timeline */
.vis-item.contract-item { cursor: pointer !important; }
.vis-item.contract-item .vis-item-content {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, opacity 0.2s ease-in-out !important;
}
.vis-item.contract-item:hover .vis-item-content {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    opacity: 0.95;
}

/* Внешние элементы (airbnb/flatio) — без трансформаций вовсе */
.vis-item.external-item { cursor: default !important; }
.vis-item.external-item:hover .vis-item-content {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    opacity: 0.95;
}

/* Стили для контейнера timeline */
/* УБРАНО position: sticky - вызывало конфликт с overflow и исчезновение таймлайна при скролле */
#timeline-container {
    position: relative;
    z-index: 10;
    background: white;
    border-radius: 8px;
    overflow: visible; /* Важно: не hidden, иначе sticky элементы внутри не работают */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Улучшенные стили для скролл-контейнера */
#timeline-scroll {
    border-radius: 8px;
    background: #f8f9fa;
    overflow-x: auto;
    overflow-y: auto;
}

/* Гарантируем минимальную ширину для timeline */
#timeline {
    min-width: 2000px;
    min-height: 700px;
}

/* Стили для легенды календаря */
.calendar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    padding: 16px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    margin-top: 16px;
}

.calendar-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #6b7280;
}

.calendar-legend-item .legend-color {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.1);
}