/* Styles.html */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;900&display=swap');

    body {
        font-family: 'Inter', sans-serif;
        transition: background-color 0.3s ease, color 0.3s ease;
    }

    body.light { background-color: #f8fafc; color: #1e293b; }
    body.dark { background-color: #020617; color: #f1f5f9; }

    .glass {
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    .light .glass { background: rgba(255, 255, 255, 0.7); border-color: rgba(203, 213, 225, 0.4); }
    .dark .glass { background: rgba(30, 41, 59, 0.4); border-color: rgba(255, 255, 255, 0.05); }

    .active-tab {
        background: #6366f1;
        color: white;
        box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
    }

    .kpi-card { 
        min-height: 220px; 
        display: flex; 
        flex-direction: column; 
        position: relative; 
        overflow: hidden;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        cursor: default;
        border: 1px solid transparent;
    }

    .kpi-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    }

    body.light .kpi-card:hover { background: rgba(255, 255, 255, 1); border-color: rgba(99, 102, 241, 0.2); }
    body.dark .kpi-card:hover { background: rgba(30, 41, 59, 0.6); border-color: rgba(99, 102, 241, 0.4); }

    .kpi-icon { 
        position: absolute; top: 1.5rem; right: 1.5rem; opacity: 0.15; 
        transition: all 0.4s ease;
    }

    .kpi-card:hover .kpi-icon {
        opacity: 0.4;
        transform: scale(1.2) rotate(-10deg);
        color: #6366f1;
    }

    .dynamic-font { 
        font-size: 1.875rem; 
        line-height: 1; 
        padding-top: 1.5rem; 
        white-space: nowrap; 
        display: inline-block; 
        max-width: 100%; 
        overflow: hidden; 
    }

    .main-sub-label {
        font-size: 10px;
        font-weight: 800;
        text-transform: uppercase;
        opacity: 0.5;
        letter-spacing: 0.05em;
        margin-top: -2px;
        display: block;
    }

    .kpi-label-text {
        font-size: 11px !important;
        letter-spacing: 0.05em;
        font-weight: 700;
    }

    .kpi-sub-value {
        font-size: 0.875rem !important;
        font-weight: 800;
    }

    .dtek-logo-img {
        filter: grayscale(1) brightness(0.6);
        transition: all 0.5s ease;
    }
    .kpi-card:hover .dtek-logo-img {
        filter: grayscale(0) brightness(1);
        transform: scale(1.1);
    }

    /* === ЛОГИКА ЗАМЕНЫ ИКОНОК ТЕМЫ И ФИОЛЕТОВАЯ ЛУНА === */
    .theme-toggle-btn { position: relative; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
    .theme-toggle-btn .sun-icon, .theme-toggle-btn .moon-icon { position: absolute; transition: all 0.3s ease; }
    
    /* Солнышко принудительно ярко-желтое */
    .theme-toggle-btn .sun-icon { color: #f59e0b !important; }

    /* По умолчанию скрываем фоновые hover-иконки */
    .theme-toggle-btn .moon-hover-icon,
    .theme-toggle-btn .sun-hover-icon { display: none; }

    /* --- Светлая тема (Фиолетовая Луна) --- */
    body.light .theme-toggle-btn .moon-icon { display: block; opacity: 1; transform: scale(1); color: #6366f1 !important; }
    body.light .theme-toggle-btn .sun-icon { display: none; }

    body.light .theme-toggle-btn:hover .moon-icon { display: none; }
    body.light .theme-toggle-btn:hover .sun-icon { display: block; opacity: 1; transform: scale(1); }

    /* --- Темная тема (Солнце) --- */
    body.dark .theme-toggle-btn .sun-icon { display: block; opacity: 1; transform: scale(1); }
    body.dark .theme-toggle-btn .moon-icon { display: none; }

    body.dark .theme-toggle-btn:hover .sun-icon { display: none; }
    body.dark .theme-toggle-btn:hover .moon-icon { display: block; opacity: 1; transform: scale(1); color: #818cf8 !important; }


    /* === ИСПРАВЛЕННАЯ ПОДЛОЖКА И ИНВЕРСИЯ ЦВЕТА ОБНОВЛЕНИЯ === */
    #refresh-btn-container, #refresh-btn {
        width: 42px;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0.75rem;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Дефолтные адаптивные подложки для кнопок */
    body.light #refresh-btn-container, body.light #refresh-btn { background: rgba(15, 23, 42, 0.05); }
    body.dark #refresh-btn-container, body.dark #refresh-btn { background: rgba(255, 255, 255, 0.08) !important; }

    /* Эффект наведения и подсветки подложек */
    body.light #refresh-btn-container:hover, body.light #refresh-btn:hover { background: rgba(99, 102, 241, 0.12) !important; transform: scale(1.05); }
    body.dark #refresh-btn-container:hover, body.dark #refresh-btn:hover { background: rgba(99, 102, 241, 0.25) !important; transform: scale(1.05); }

    /* Базовый цвет стрелочек внутри подложки */
    #refresh-btn svg, #refresh-btn-container i, #refresh-btn-container svg { 
        display: inline-block;
        transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); 
        transform-origin: center center;
        color: #6366f1 !important; 
    }

    /* --- Инверсия цвета стрелочек при наведении --- */
    /* В Дневной теме: Фиолетовый -> Темнее (#4f46e5) */
    body.light #refresh-btn:hover svg, 
    body.light #refresh-btn-container:hover i, 
    body.light #refresh-btn-container:hover svg { 
        transform: scale(1.1) rotate(360deg); 
        color: #4f46e5 !important;
    }

    /* В Ночной теме: Фиолетовый -> Светлее (#a5b4fc) */
    body.dark #refresh-btn:hover svg, 
    body.dark #refresh-btn-container:hover i, 
    body.dark #refresh-btn-container:hover svg { 
        transform: scale(1.1) rotate(360deg); 
        color: #a5b4fc !important;
    }


    /* === ЖЕСТКАЯ ИЗОЛЯЦИЯ ВРАЩЕНИЯ (Крутится только иконка, подложка на месте) === */
    .spinning svg, 
    .spinning i,
    #refresh-btn-container.spinning i, 
    #refresh-btn-container.spinning svg,
    #refresh-btn.spinning svg { 
        animation: rotate-sync 1s linear infinite !important; 
    }

    /* Убираем вращение с самого контейнера-подложки, если класс прилетит на него */
    #refresh-btn-container.spinning, #refresh-btn.spinning {
        animation: none !important;
        transform: none !important;
    }

    @keyframes rotate-sync { 
        from { transform: rotate(0deg); } 
        to { transform: rotate(360deg); } 
    }


    .custom-scroll::-webkit-scrollbar { height: 6px; width: 6px; }
    .custom-scroll::-webkit-scrollbar-thumb { background: #6366f1; border-radius: 10px; }

    /* ЖЕСТКАЯ ЛОГИКА СЕТКИ KPI */
    .kpi-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    /* Планшеты: 2 в ряд */
    @media (min-width: 768px) {
        .kpi-grid { grid-template-columns: repeat(2, 1fr); }
    }

    /* Средние экраны (ноутбуки): 6 колонок, сетка 2+3 */
    @media (min-width: 1024px) and (max-width: 1439px) {
        .kpi-grid {
            grid-template-columns: repeat(6, 1fr) !important;
        }
        .kpi-card:nth-child(1), .kpi-card:nth-child(2) { grid-column: span 3 !important; }
        .kpi-card:nth-child(3), .kpi-card:nth-child(4), .kpi-card:nth-child(5) { grid-column: span 2 !important; }
    }

    /* Широкие экраны (>1440px): Строго 5 в ряд */
    @media (min-width: 1440px) {
        .kpi-grid {
            grid-template-columns: repeat(5, 1fr) !important;
        }
        .kpi-card {
            grid-column: span 1 !important;
        }
    }

    /* Адаптивные правки для мобильного меню */
    #mobile-menu:not(.hidden) {
        display: block;
        animation: slideDown 0.3s ease-out;
    }

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

    @media (max-width: 1023px) {
        nav .max-w-7xl {
            padding-left: 0;
            padding-right: 0;
        }
    }

    /* Активные вкладки на мобильных устройствах */
    .active-tab {
        background: white;
        box-shadow: 0 4px 12px rgba(0,0,0,0.05);
        color: #6366f1;
    }
    .dark .active-tab {
        background: #1e293b;
        color: #818cf8;
    }

    /* Исправление автозума полей даты на iOS */
    #datepicker, #datepicker-mobile {
        font-size: 16px !important;
    }

    /* Стилизация календаря Litepicker */
    @media (max-width: 768px) {
        .litepicker {
            font-size: 14px !important;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
            border-radius: 24px !important;
        }
        
        .litepicker .container__days .day-item {
            padding: 12px 0 !important;
            font-weight: 700 !important;
        }

        .litepicker[data-plugins*=\"mobilefriendly\"] {
            position: fixed !important;
            top: 50% !important;
            left: 50% !important;
            transform: translate(-50%, -50%) !important;
        }
    }

/* ==========================================================================
   ФИНАЛЬНЫЙ КОРПОРАТИВНЫЙ ФИОЛЕТОВЫЙ CSS ДЛЯ LITEPICKER (ОБЕ ТЕМЫ)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ОБЩИЕ ПРАВИЛА И СВЕТЛАЯ ТЕМА (По умолчанию)
   -------------------------------------------------------------------------- */

/* Точки старта и конца диапазона — всегда фирменный Индиго */
:root, html, body {
    --litepicker-is-start-date-bg-color: #6366f1 !important;
    --litepicker-is-end-date-bg-color: #6366f1 !important;
}

/* Выделенный шлейф в светлой теме */
.litepicker .day-item.is-in-range {
    background-color: rgba(99, 102, 241, 0.15) !important; /* Мягкий фиолетовый шлейф */
    color: #4f46e5 !important;                             /* Контрастные фиолетовые цифры */
}

/* Стартовая и конечная точки диапазона */
.litepicker .day-item.is-start-date,
.litepicker .day-item.is-end-date {
    background-color: #6366f1 !important;                  /* Плотный фиолетовый кружок */
    color: #ffffff !important;                             /* Белая цифра */
}


/* --------------------------------------------------------------------------
   2. ЖЕСТКАЯ ПЕРЕКРАСКА ДЛЯ ТЕМНОЙ ТЕМЫ (Только при .dark)
   -------------------------------------------------------------------------- */

/* Корневые переменные контейнера в темноте */
html.dark .litepicker, 
body.dark .litepicker {
    --litepicker-bg-color: #1e293b !important;                /* Глубокий темный фон */
    --litepicker-month-header-color: #ffffff !important;      /* Белый текст месяца */
    --litepicker-month-weekday-color: #94a3b8 !important;     /* Светло-серые дни недели */
    --litepicker-text-color-item: #ffffff !important;         /* Контрастные белые числа */
    --litepicker-text-color-item-hover: #ffffff !important;   /* Текст при наведении */
    --litepicker-is-today-color: #f43f5e !important;          /* Розовый маркер "Сегодня" */
    --litepicker-button-prev-month-color: #ffffff !important; /* Белые стрелки */
    --litepicker-button-next-month-color: #ffffff !important;

    background-color: #1e293b !important;
    border: 1px solid #475569 !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7) !important;
    border-radius: 1rem !important;
}

/* Внутренние модули месяцев */
body.dark .litepicker .container__months,
body.dark .litepicker .month-item {
    background-color: #1e293b !important;
}

/* Текст месяца, года и дней недели */
body.dark .litepicker .month-item-name,
body.dark .litepicker .month-item-year { color: #ffffff !important; font-weight: 700 !important; }
body.dark .litepicker .month-item-weekdays-row > div { color: #94a3b8 !important; font-weight: 600 !important; }

/* Кнопки-стрелочки (SVG) */
body.dark .litepicker .month-item-header button svg,
body.dark .litepicker .button-previous-month svg,
body.dark .litepicker .button-next-month svg { fill: #ffffff !important; }

/* Нижняя панель (Apply / Cancel) */
body.dark .litepicker .container__footer { background-color: #0f172a !important; border-top: 1px solid #475569 !important; }
body.dark .litepicker .container__footer .button-cancel { color: #94a3b8 !important; }
body.dark .litepicker .container__footer .button-apply { background-color: #6366f1 !important; color: #ffffff !important; }

/* Ховер на обычные числа */
body.dark .litepicker .container__months .month-item-box .day-item:hover { background-color: #4f46e5 !important; color: #ffffff !important; }


/* --------------------------------------------------------------------------
   3. КОРРЕКЦИЯ ТЕКСТА И ШЛЕЙФА В ТЕМНОЙ ТЕМЕ
   -------------------------------------------------------------------------- */

/* Будущие и текущие невыделенные дни в темноте */
.dark .litepicker .day-item {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* Выделенный шлейф диапазона в темноте */
.dark .litepicker .day-item.is-in-range,
html.dark .litepicker .day-item.is-in-range {
    background-color: rgba(99, 102, 241, 0.25) !important; /* Чуть плотнее фиолетовый для темного фона */
    color: #ffffff !important;                             /* Белые цифры внутри шлейфа */
}

/* Стартовая и конечная точки диапазона в темноте */
.dark .litepicker .day-item.is-start-date,
.dark .litepicker .day-item.is-end-date {
    background-color: #6366f1 !important;
    color: #ffffff !important;
}

/* Прошлые (заблокированные) даты */
.dark .litepicker .day-item.is-locked,
html.dark .litepicker .day-item.is-locked {
    color: #94a3b8 !important;  /* Slate-400: читаемый серый, не сливается */
    opacity: 1 !important;       /* Убираем дефолтную прозрачность плагина */
    background-color: transparent !important;
}
body.dark .litepicker .container__months .month-item-box .day-item.is-locked:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
}

/* Дни соседних месяцев по краям сетки */
.dark .litepicker .day-item.is-blur,
html.dark .litepicker .day-item.is-blur {
    color: #475569 !important;  /* Приглушенный темно-серый */
    opacity: 0.7 !important;
}

/* Полное удаление всплывающей плашки с количеством дней */
.litepicker .container__tooltip {
    display: none !important;
}

/* ==========================================================================
       ПОЛНЫЙ ФИКС КНОПКИ СМЕНЫ ТЕМЫ (МОБИЛКА + ДЕСКТОП ХОВЕР)
       ========================================================================== */

    /* 1. ЕСЛИ ТЕМА СВЕТЛАЯ (на html нет класса .dark) */
    html:not(.dark) .sun-icon,
    html:not(.dark) .sun-hover-icon,
    html:not(.dark) .moon-hover-icon {
        display: none !important;
    }
    html:not(.dark) .moon-icon {
        display: inline-block !important;
    }
    /* Эффект наведения на десктопе для светлой темы: прячем луну, показываем солнце-ховер */
    @media (hover: hover) {
        html:not(.dark) .theme-toggle-btn:hover .moon-icon {
            display: none !important;
        }
        html:not(.dark) .theme-toggle-btn:hover .sun-hover-icon {
            display: inline-block !important;
        }
    }

    /* 2. ЕСЛИ ТЕМА ТЕМНАЯ (на html есть класс .dark) */
    html.dark .moon-icon,
    html.dark .sun-hover-icon,
    html.dark .moon-hover-icon {
        display: none !important;
    }
    html.dark .sun-icon {
        display: inline-block !important;
    }
    /* Эффект наведения на десктопе для темной темы: прячем солнце, показываем луну-ховер */
    @media (hover: hover) {
        html.dark .theme-toggle-btn:hover .sun-icon {
            display: none !important;
        }
        html.dark .theme-toggle-btn:hover .moon-hover-icon {
            display: inline-block !important;
        }
    }