body { font-family: 'Inter', sans-serif; background-color: #f3f4f6; }
    html.dark body { background-color: #111827; }

    /* --- CASCADE CONTENT ANIMATION --- */

    /* За замовчуванням всі блоки видимі */
    .dashboard-widget, .hof-glass-panel, .rounded-2xl {
        opacity: 1;
    }

    /* Тільки коли додається клас cascade-item, елемент стає прозорим для старту анімації */
    .cascade-item {
        opacity: 0; 
        animation: content-slide-up 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    }

    @keyframes content-slide-up {
        0% { opacity: 0; transform: translateY(20px); }
        100% { opacity: 1; transform: translateY(0); }
    }

    /* Виправлення позиціонування гірлянди (щоб не перекривалася емодзі) */
    .christmas-lights-container {
        z-index: 40 !important; /* Нижче, ніж випадаючі меню, але вище фону */
    }

    /* --- GLASS SIDEBAR STYLES --- */
    .glass-sidebar {
        background: rgba(255, 255, 255, 0.75) !important;
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        border-right: 1px solid rgba(209, 213, 219, 0.3);
    }

    html.dark .glass-sidebar {
        background: rgba(17, 24, 39, 0.75) !important; /* dark:gray-900 with opacity */
        border-right: 1px solid rgba(75, 85, 99, 0.3);
    }

    /* --- PAGE TRANSITION ANIMATION (Smooth Fade + Scale + Blur) --- */
    @keyframes page-enter-glass {
        0% {
            opacity: 0;
            transform: scale(0.98) translateY(10px);
            filter: blur(10px);
        }
        100% {
            opacity: 1;
            transform: scale(1) translateY(0);
            filter: blur(0);
        }
    }

    .animate-page-enter {
        animation: page-enter-glass 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    }

    /* --- SIDEBAR ITEMS CASCADE (Staggered Entrance) --- */
    @keyframes nav-item-slide-in {
        0% {
            opacity: 0;
            transform: translateX(-20px);
        }
        100% {
            opacity: 1;
            transform: translateX(0);
        }
    }

    .nav-item-animate {
        opacity: 0; /* Спочатку приховано */
        animation: nav-item-slide-in 0.4s ease-out forwards;
    }
    
    .sidebar { transition: transform 0.3s ease-in-out; }

    /* ── Sidebar collapse ────────────────────────────────── */
    #sidebar { transition: width 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.3s ease-in-out; }
    #sidebar.sidebar-collapsed { width: 68px !important; }
    #sidebar.sidebar-collapsed .sb-hide { display: none !important; }
    /* Sections: hide headers, always show content */
    #sidebar.sidebar-collapsed .sidebar-section > summary { display: none !important; }
    #sidebar.sidebar-collapsed .sidebar-section > div { display: block !important; }
    /* Nav items: fixed square size */
    #sidebar.sidebar-collapsed nav { padding-left: 6px !important; padding-right: 6px !important; }
    #sidebar.sidebar-collapsed .nav-item-animate { padding: 0 !important; margin: 3px 0 !important; display: flex !important; justify-content: center !important; }
    #sidebar.sidebar-collapsed .nav-link { width: 48px !important; height: 48px !important; min-width: 48px !important; min-height: 48px !important; padding: 0 !important; justify-content: center !important; align-items: center !important; display: flex !important; }
    #sidebar.sidebar-collapsed .nav-link > div { justify-content: center !important; width: auto !important; }
    #sidebar.sidebar-collapsed .nav-icon-box { margin-right: 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; padding: 6px !important; }
    /* Logo */
    #sidebar.sidebar-collapsed #sidebar-logo-container { justify-content: center; padding-left: 0 !important; padding-right: 0 !important; }
    /* Footer */
    #sidebar.sidebar-collapsed #show-patch-notes-btn { justify-content: center; padding-left: 8px; padding-right: 8px; }
    #sidebar.sidebar-collapsed #sidebar-collapse-btn { justify-content: center; padding-left: 0; padding-right: 0; }
    /* ─────────────────────────────────────────────────────── */

    /* --- Стили для контейнера анимации частиц --- */
    #sidebar-logo-container {
        position: relative;    
    }
    #sidebar-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    }

    /* Логин */

    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .login-form-container {
        animation: fadeIn 0.8s ease-out forwards;
    }

    /*XMAS*/    /*XMAS*/    /*XMAS*/

    /* --- GLASS SPINNER ANIMATIONS --- */
    @keyframes spin-slow {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }

    .animate-spin-slow {
        animation: spin-slow 3s linear infinite; /* Повільне, "вагоме" обертання */
    }

    /* Світіння для сніжинки */
    .snowflake-glow {
        filter: drop-shadow(0 0 5px rgba(147, 197, 253, 0.8)); /* Синє світіння */
    }

    /* Свечение снежинки */
    .snowflake-glow {
        filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.6)); /* Синее свечение */
    }
    html.dark .snowflake-glow {
        filter: drop-shadow(0 0 8px rgba(147, 197, 253, 0.6)); /* Светлое свечение в темной теме */
    }

    /* --- СТИЛІ ДЛЯ ШАПКИ САНТИ --- */

    .santa-hat-icon {
        opacity: 0; 
        transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    body.winter-mode .santa-hat-icon {
        opacity: 1;
    }



    /* --- Спінер: Шестерня (Літній/Звичайний режим) --- */
    @keyframes spin-gear {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    @keyframes gear-bounce {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-5px); }
    }
    .gear-spinner-box {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 3rem;
        animation: gear-bounce 2s ease-in-out infinite;
    }
    .gear-icon {
        display: block;
        animation: spin-gear 3s linear infinite;
    }

    /* --- СТИЛІ ДЛЯ ЛІТАЮЧОГО САНТИ (Виправлено напрямок) --- */
    .flying-santa {
        position: fixed;
        top: 20%;
        left: -20%;
        font-size: 4rem; /* Зробив трохи більшим */
        white-space: nowrap;
        z-index: 9999;
        pointer-events: none; 
        /* scaleX(-1) розвертає оленів в правильний бік */
        transform: scaleX(-1); 
        animation: fly-across 12s linear forwards; 
        filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));
    }

    /* Анімація польоту з урахуванням розвороту */
    @keyframes fly-across {
        0% { left: -20%; top: 30%; transform: scaleX(-1) rotate(-10deg); }
        25% { top: 15%; transform: scaleX(-1) rotate(5deg); } /* Трохи злітає вгору */
        50% { top: 30%; transform: scaleX(-1) rotate(-5deg); } /* Трохи вниз */
        75% { top: 10%; transform: scaleX(-1) rotate(10deg); } /* Знову вгору */
        100% { left: 120%; top: 40%; transform: scaleX(-1) rotate(0deg); }
    }

    /* Ефект тряски (теж повинен враховувати scaleX(-1)) */
    .shake-santa {
        animation: shake-hard 0.5s ease-in-out;
    }

    @keyframes shake-hard {
        0%, 100% { transform: scaleX(-1) rotate(0deg); }
        25% { transform: scaleX(-1) rotate(-15deg) scale(1.1); }
        75% { transform: scaleX(-1) rotate(15deg) scale(1.1); }
    }

    /* Стиль для падаючих подарунків залишається тим самим */
    .falling-gift {
        position: fixed;
        font-size: 2rem;
        pointer-events: none;
        z-index: 10000;
        animation: drop-gift 1.5s ease-in forwards;
    }

    @keyframes drop-gift {
        0% { transform: translateY(0) rotate(0deg); opacity: 1; }
        100% { transform: translateY(300px) rotate(360deg); opacity: 0; }
    }


    /* --- КУМЕДНИЙ ОЛЕНЬ --- */
    
    /* Олень бігає туди-сюди */
    @keyframes spin-crazy {
        0% { transform: rotate(0deg); }
        20% { transform: rotate(100deg); }  /* Побіг вперед */
        25% { transform: rotate(100deg); }  /* Зупинився подумати */
        35% { transform: rotate(60deg); }   /* "Ой, назад!" */
        60% { transform: rotate(260deg); }  /* "А ні, все ж таки туди!" (спринт) */
        70% { transform: rotate(240deg); }  /* Занесло на повороті */
        100% { transform: rotate(360deg); } /* Добіг */
    }

    /* Сніжинка пульсує і крутиться в інший бік */
    @keyframes spin-pulse-ccw {
        0% { transform: rotate(0deg) scale(1); }
        50% { transform: rotate(-180deg) scale(0.8); }
        100% { transform: rotate(-360deg) scale(1); }
    }

    .santa-spinner-box {
        position: relative;
        width: 2.5rem;   /* 40px - зробив трохи більшим */
        height: 2.5rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        vertical-align: middle;
    }
    
    .santa-snowflake {
        position: absolute;
        font-size: 1.2rem;
        line-height: 1;
        animation: spin-pulse-ccw 3s linear infinite; /* Сніжинка живе своїм життям */
        z-index: 1;
        opacity: 0.8;
    }

    .santa-orbit {
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        animation: spin-crazy 2.5s ease-in-out infinite; /* Олень бігає по "п'яній" траєкторії */
        z-index: 2;
    }

    .santa-deer {
        position: absolute;
        top: -2px; 
        left: 50%;
        transform: translateX(-50%);
        font-size: 1.2rem;
        line-height: 1;
    }

    /* Клас для контейнера спінера, щоб він не ламав верстку кнопок */
    .santa-spinner-box {
        position: relative;
        width: 1.5rem; /* 24px */
        height: 1.5rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        vertical-align: middle;
    }

    /* --- НОВОРІЧНІ СМУЖКИ ПРОГРЕСУ (CANDY CANE) --- */
    /* Застосовуємо до всіх елементів, що виглядають як прогрес-бар (зазвичай мають bg-purple-600 або подібні) */
    .progress-bar-candy, 
    .bg-purple-600.h-2\.5, 
    .bg-blue-600.h-2\.5,
    .bg-green-500.h-2\.5 {
        background-image: repeating-linear-gradient(
            45deg,
            transparent,
            transparent 10px,
            rgba(255, 255, 255, 0.4) 10px,
            rgba(255, 255, 255, 0.4) 20px
        ) !important;
        background-size: 28px 28px !important;
        animation: candy-move 1s linear infinite !important;
    }

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

    /* --- НОВОРІЧНА ГІРЛЯНДА --- */
    .christmas-lights-container {
        position: absolute;
        top: -5px;
        left: 0;
        width: 100%;
        height: 20px;
        overflow: hidden;
        pointer-events: none;
        z-index: 20;
        display: flex;
        justify-content: space-around;
        padding: 0 10px;
        border-top-left-radius: 0.75rem; /* Радіус як у віджетів */
        border-top-right-radius: 0.75rem;
    }

    .light-bulb {
        position: relative;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: #ccc;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        animation-name: flash-1;
        margin-top: 2px;
    }

    .light-bulb::before {
        content: "";
        position: absolute;
        top: -3px;
        left: 3px;
        width: 2px;
        height: 4px;
        background: #222; /* Провід */
    }

    /* Кольори вогників */
    .light-bulb:nth-child(4n+1) { background: #ef4444; animation-name: flash-1; box-shadow: 0 2px 10px rgba(239, 68, 68, 0.5); } /* Червоний */
    .light-bulb:nth-child(4n+2) { background: #eab308; animation-name: flash-2; box-shadow: 0 2px 10px rgba(234, 179, 8, 0.5); } /* Жовтий */
    .light-bulb:nth-child(4n+3) { background: #3b82f6; animation-name: flash-3; box-shadow: 0 2px 10px rgba(59, 130, 246, 0.5); } /* Синій */
    .light-bulb:nth-child(4n+4) { background: #22c55e; animation-name: flash-1; box-shadow: 0 2px 10px rgba(34, 197, 94, 0.5); } /* Зелений */

    @keyframes flash-1 { 0%, 100% { opacity: 1; transform: scale(1.1); } 50% { opacity: 0.4; transform: scale(0.9); } }
    @keyframes flash-2 { 0%, 100% { opacity: 0.4; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.1); } }
    @keyframes flash-3 { 0%, 100% { opacity: 0.4; transform: scale(0.9); } 25% { opacity: 1; transform: scale(1.1); } 75% { opacity: 1; transform: scale(1.1); } }

    /* У темній темі світіння яскравіше */
    html.dark .light-bulb:nth-child(4n+1) { box-shadow: 0 0 10px 2px rgba(239, 68, 68, 0.8); }
    html.dark .light-bulb:nth-child(4n+2) { box-shadow: 0 0 10px 2px rgba(234, 179, 8, 0.8); }
    html.dark .light-bulb:nth-child(4n+3) { box-shadow: 0 0 10px 2px rgba(59, 130, 246, 0.8); }
    html.dark .light-bulb:nth-child(4n+4) { box-shadow: 0 0 10px 2px rgba(34, 197, 94, 0.8); }

    /* --- СТИЛІ ДЛЯ МОДАЛЬНИХ ВІКОН --- */
    .modal-enter { animation: modal-enter 0.2s ease-out; }
    .modal-leave { animation: modal-leave 0.2s ease-in forwards; }
    @keyframes modal-enter { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
    @keyframes modal-leave { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.95); } }

    /* --- СТИЛІ ДЛЯ ТЕМНОЇ ТЕМИ (DARK MODE) --- */
    html.dark .bg-white { background-color: #1f2937; }
    html.dark .bg-gray-50 { background-color: #374151; }
    html.dark .bg-gray-100 { background-color: #374151; }
    html.dark .text-gray-900 { color: #f9fafb; }
    html.dark .text-gray-800 { color: #f9fafb; }
    html.dark .text-gray-700 { color: #d1d5db; }
    html.dark .text-gray-600 { color: #d1d5db; }
    html.dark .text-gray-500 { color: #9ca3af; }
    html.dark .border-gray-200 { border-color: #374151; }
    html.dark .border-gray-300 { border-color: #4b5563; }
    html.dark .hover\:bg-gray-100:hover { background-color: #374151; }
    html.dark input, html.dark select, html.dark textarea { background-color: #374151; color: #f9fafb; border-color: #4b5563; }
    .group-header td { background-color: #f3f4f6; font-weight: 600; }
    html.dark .group-header td { background-color: #374151; color: #f9fafb; }
    
    /* --- СТИЛІ ДЛЯ ГРАФІКІВ --- */
    /* Заголовки днів тижня для особистого графіка */
    .schedule-day-headers { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.75rem; max-width: 1024px; margin: 0 auto 0.5rem; }
    .schedule-day-headers > div { text-align: center; font-weight: 600; font-size: 0.75rem; color: #6b7280; padding: 0.5rem 0; background-color: #f3f4f6; border-radius: 0.5rem; }
    html.dark .schedule-day-headers > div { color: #9ca3af; background-color: #1f2937; }

    /* Графік оператора (особистий) - ФІНАЛЬНІ СТИЛІ */
    .schedule-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.75rem; max-width: 1024px; margin-left: auto; margin-right: auto; }
    .schedule-day {
        aspect-ratio: 1 / 1;
        border: 1px solid #e5e7eb;
        border-radius: 0.75rem;
        padding: 0.5rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.25rem;
        transition: all 0.2s ease-in-out;
    }
    .schedule-day.weekend { background-color: #f3f4f6; }
    .schedule-day:not(:empty):hover { transform: translateY(-4px); box-shadow: 0 8px 25px rgba(0,0,0,0.1); }
    html.dark .schedule-day { border-color: #374151; }
    html.dark .schedule-day.weekend { background-color: #374151; }
    html.dark .schedule-day:not(:empty):hover { box-shadow: 0 8px 25px rgba(0,0,0,0.2); }
    .schedule-day-number { font-weight: 600; font-size: 0.875rem; color: #6b7280; }
    html.dark .schedule-day-number { color: #9ca3af; }
    .schedule-shift { font-size: 1rem; line-height: 1.3; font-weight: 700; text-align: center; border-radius: 0.5rem; padding: 0.35rem 0.75rem; }

        /* --- СТИЛІ ДЛЯ ПІДСВІЧУВАННЯ ПОТОЧНОГО ДНЯ --- */
    /* Адмін-панель: колонка в таблиці */
    .schedule-table th.current-day-col,
    .schedule-table td.current-day-col {
        background-color: rgba(59, 130, 246, 0.1) !important; /* Легкий синій фон */
        box-shadow: inset 2px 0 0 0 #3b82f6, inset -2px 0 0 0 #3b82f6; /* Вертикальні лінії по боках */
    }
    html.dark .schedule-table th.current-day-col,
    html.dark .schedule-table td.current-day-col {
        background-color: rgba(59, 130, 246, 0.2) !important;
        box-shadow: inset 2px 0 0 0 #60a5fa, inset -2px 0 0 0 #60a5fa;
    }

    /* Адмін-панель: картка дня в мобільній версії */
    .schedule-day-card.current-day-card {
        border-color: #3b82f6 !important;
        border-width: 2px;
        box-shadow: 0 0 15px rgba(59, 130, 246, 0.3);
    }
    html.dark .schedule-day-card.current-day-card {
        border-color: #60a5fa !important;
    }

    /* Графік оператора: картка дня в мобільній версії */
    #operator-schedule-list .schedule-day-card.current-day-card {
        border-color: #3b82f6 !important;
        border-width: 2px;
        background-color: #eff6ff;
    }
    html.dark #operator-schedule-list .schedule-day-card.current-day-card {
        background-color: #1e3a8a;
    }

    /* Графік оператора: комірка в сітці на десктопі */
    .schedule-grid .schedule-day.current-day-cell {
        position: relative;
        background-color: rgba(59, 130, 246, 0.1);
        border: 2px solid #3b82f6;
    }
    html.dark .schedule-grid .schedule-day.current-day-cell {
        background-color: rgba(59, 130, 246, 0.2);
        border-color: #60a5fa;
    }

    html.dark .cancel-btn {
    background-color: #374151 !important; /* gray-700 */
    color: #d1d5db !important; /* gray-300 */
    border-color: #4b5563 !important; /* gray-600 */
    }
    html.dark .cancel-btn:hover {
    background-color: #4b5563 !important; /* gray-600 */
    }
    
    /* Редактор графіків (адміністратор) - DESKTOP */
    .schedule-table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; }
    .schedule-table { width: 100%; border-collapse: collapse; table-layout: auto; }
    .schedule-table th, .schedule-table td { border: 1px solid #e5e7eb; padding: 0.75rem 0.25rem; text-align: center; font-size: 0.875rem; white-space: nowrap; }
    .schedule-table th:not(:first-child), .schedule-table td:not(:first-child) { min-width: 100px; }
    html.dark .schedule-table th, html.dark .schedule-table td { border-color: #374151; }
    .schedule-table th { background-color: #f9fafb; font-weight: 600; color: #4b5563; }
    html.dark .schedule-table th { background-color: #374151; color: #d1d5db; }
    .schedule-table th:first-child, .schedule-table td:first-child { position: sticky; left: 0; z-index: 10; background-color: #ffffff; text-align: left; font-weight: 500; padding-left: 1rem; width: 200px; min-width: 200px; border-right-width: 2px; }
    html.dark .schedule-table th:first-child, html.dark .schedule-table td:first-child { background-color: #1f2937; color: #f9fafb; border-right-color: #4b5563; }
    .schedule-table td[data-user-id]:hover { background-color: #eff6ff; }
    html.dark .schedule-table td[data-user-id]:hover { background-color: #1e3a8a; }

    .schedule-group-header td { 
        text-align: left; 
        padding-left: 1rem; 
        background-color: #e9d5ff; /* Більш насичений фіолетовий для світлої теми */
        font-weight: 600; 
        color: #3b0764; /* Темніший текст для контрасту */
        border-top: 2px solid #c084fc; 
        border-bottom: 2px solid #c084fc; 
    }
    html.dark .schedule-group-header td { 
        text-align: left; 
        padding-left: 1rem; 
        background-color: #5b21b6; /* Більш насичений фіолетовий для темної теми */
        color: #f5f3ff; /* Світлий текст для контрасту */
        border-color: #7e22ce; 
    }

    /* ЗАСТОСОВУЄМО STICKY ДО ПЕРШОЇ КОМІРКИ ЗАГОЛОВКА ГРУПИ */
    .schedule-group-header td:first-child {
        position: sticky;
        left: 0;
        z-index: 10;
        width: 200px;
        min-width: 200px;
        background-color: #e9d5ff; /* Додано фіолетовий фон */
        border-right: 2px solid #c084fc; /* Змінено колір рамки на фіолетовий */
    }

    html.dark .schedule-group-header td:first-child {
        background-color: #5b21b6; /* Додано фіолетовий фон для темної теми */
        border-right-color: #7e22ce; /* Змінено колір рамки на фіолетовий */
    }

    /* Редактор графіків (адміністратор) - MOBILE */
    .schedule-day-card { width: 100%; background-color: #fff; border-radius: 0.75rem; border: 1px solid #e5e7eb; overflow: hidden; }
    .schedule-day-card.weekend { background-color: #f3f4f6; }
    html.dark .schedule-day-card { background-color: #1f2937; border-color: #374151; }
    html.dark .schedule-day-card.weekend { background-color: #374151; }
    .schedule-day-card-header { padding: 0.75rem 1rem; font-weight: 600; text-align: center; border-bottom: 1px solid #e5e7eb; }
    html.dark .schedule-day-card-header { color: #d1d5db; border-color: #374151; }
    .schedule-day-card-body { padding: 0.5rem; }
    html.dark .schedule-day-card-body p { color: #d1d5db; }
    .schedule-day-card .shift-row { display: flex; justify-content: space-between; align-items: center; padding: 0.6rem 0.5rem; border-bottom: 1px solid #f3f4f6; cursor: pointer; }
    html.dark .schedule-day-card .shift-row { border-color: #374151; }
    .schedule-day-card .shift-row:last-child { border-bottom: none; }

    /* [НОВІ СТИЛІ] Календар для мобільної версії редактора графіків */
    .schedule-grid-mobile {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.25rem; /* 4px */
    padding: 0.5rem;
    border-top: 1px solid #e5e7eb; /* light:border-gray-200 */
    border-bottom: 1px solid #e5e7eb; /* light:border-gray-200 */
    margin-top: 1rem;
    margin-bottom: 1rem;
    }
    html.dark .schedule-grid-mobile {
    border-color: #374151; /* dark:border-gray-700 */
    }
    .calendar-header {
    text-align: center;
    font-size: 0.75rem; /* 12px */
    font-weight: 600;
    color: #6b7280; /* gray-500 */
    }
    html.dark .calendar-header {
    color: #9ca3af; /* dark:gray-400 */
    }
    .calendar-day-btn {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px; /* rounded-full */
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
    border: 1px solid transparent;
    color: #111827; /* ЗАДАЄМО БАЗОВИЙ КОЛІР */
    }
    html.dark .calendar-day-btn {
    color: #d1d5db; /* РОБИМО БІЛИМ У ТЕМНІЙ ТЕМІ */
    }
    .calendar-day-btn:hover {
    background-color: #eff6ff; /* hover:bg-blue-50 */
    }
    html.dark .calendar-day-btn:hover {
    background-color: #1e3a8a; /* dark:hover:bg-blue-900/50 */
    }
    .calendar-day-btn.weekend {
    color: #ef4444; /* red-500 */
    }
    html.dark .calendar-day-btn.weekend {
    color: #f87171; /* dark:red-400 */
    }
    .calendar-day-btn.current-day {
    background-color: #3b82f6 !important; /* blue-500 */
    color: #ffffff !important; /* white */
    font-weight: 700;
    border-color: #3b82f6 !important;
    }

    /* [НОВІ СТИЛІ] Кнопка для прокрутки нагору в мобільному календарі */
    #scroll-to-calendar {
    display: none; /* Сховано за замовчуванням */
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #3b82f6; /* blue-500 */
    color: white;
    border-radius: 9999px; /* rounded-full */
    width: 48px;  /* Збільшено для кращого натискання */
    height: 48px; /* Збільшено для кращого натискання */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 40; /* Над іншим контентом */
    opacity: 0.8;
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }
    #scroll-to-calendar:hover {
    opacity: 1;
    transform: scale(1.05);
    }
    #scroll-to-calendar svg {
    width: 24px;
    height: 24px;
    }

    /* --- СТИЛІ ДЛЯ СПЛИВАЮЧИХ ПІДКАЗОК (TOOLTIPS) --- */
    .tooltip-popup {
    position: fixed; /* Позиціонування відносно вікна браузера */
    background-color: #1f2937; /* Темний фон */
    color: #f9fafb; /* Світлий текст */
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.5;
    max-width: 300px;
    text-align: center;
    z-index: 100; /* Має бути поверх усього */
    pointer-events: none; /* Щоб не заважав клікам */
    visibility: hidden; /* За замовчуванням сховано */
    opacity: 0;
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    /* --- Стилі для емодзі-вибуху --- */
    .emoji-particle {
        position: absolute;
        font-size: 1.5rem; /* Размер частиц */
        pointer-events: none; /* Частинки не мають бути клікабельними */
        opacity: 1;
        transition: transform 0.8s cubic-bezier(0.1, 0.9, 0.2, 1), opacity 0.8s linear;
    }

    .queue-emoji-container {
        position: relative;
        cursor: pointer;
        user-select: none; /* Щоб емодзі не виділявся як текст */
        transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .queue-emoji-container:active {
        transform: scale(0.9); /* Ефект "натискання" */
    }

    /* Achievments */

    /* --- СТИЛІ ДЛЯ МОДАЛЬНИХ ВІКОН (З ПРУЖИННОЮ АНІМАЦІЄЮ) --- */
    .modal-enter { 
        animation: modal-enter-spring 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }
    .modal-leave { 
        animation: modal-leave-spring 0.3s ease-in forwards;
    }
    @keyframes modal-enter-spring { 
        from { opacity: 0; transform: scale(0.85); } 
        to { opacity: 1; transform: scale(1); } 
    }
    @keyframes modal-leave-spring { 
        from { opacity: 1; transform: scale(1); } 
        to { opacity: 0; transform: scale(0.9); } 
    }

    /* --- СТИЛИ ДЛЯ СПЛИВАЮЧОГО ПОВІДОМЛЕННЯ ПРО ДОСЯГНЕННЯ --- */
    @keyframes toast-enter-spring {
        from {
            transform: translateX(120%);
        }
        to {
            transform: translateX(0);
        }
    }

    @keyframes toast-leave {
        from {
            transform: translateX(0);
        }
        to {
            transform: translateX(120%);
        }
    }

    .toast-enter {
        animation: toast-enter-spring 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }

    .toast-leave {
        animation: toast-leave 0.5s ease-in-out forwards;
    }

    /* [НОВІ СТИЛІ] Кольори для кнопок-шаблонів */
    .template-btn-base {
    border: none;
    transition: transform 0.1s ease-in-out;
    }
    .template-btn-base:hover {
    transform: scale(1.05);
    }
    .template-btn-work {
    background-color: #3b82f6; /* blue-500 */
    color: white;
    }
    .template-btn-off {
    background-color: #10b981; /* green-500 */
    color: white;
    }
    .template-btn-vacation {
    background-color: #f97316; /* orange-500 */
    color: white;
    }
    .template-btn-sick {
    background-color: #f59e0b; /* amber-500 */
    color: white;
    }
    .template-btn-extra {
    background-color: #a21caf; /* fuchsia-700 */
    color: white;
    }

    .hourly-chart-btn {
        padding: 0.25rem 0.75rem;
        font-size: 0.75rem; /* 12px */
        font-weight: 600;
        border-radius: 9999px; /* rounded-full */
        background-color: #e5e7eb; /* gray-200 */
        color: #374151; /* gray-700 */
        transition: all 0.2s;
    }
    html.dark .hourly-chart-btn {
        background-color: #374151; /* gray-700 */
        color: #d1d5db; /* gray-300 */
    }
    .hourly-chart-btn.active-chart-btn {
        background-color: #4f46e5; /* indigo-600 */
        color: white;
    }
    html.dark .hourly-chart-btn.active-chart-btn {
        background-color: #a78bfa; /* violet-400 */
        color: #1e1b4b; /* indigo-950 */
    }
    
    /* --- ЄДИНІ СТИЛІ ДЛЯ КОЛЬОРІВ ЗМІН --- */
    /* Светлая тема */
    .shift-work { background-color: #dbeafe !important; color: #1e40af !important; }
    .shift-off { background-color: #d1fae5 !important; color: #065f46 !important; }
    .shift-vacation { background-color: #ffedd5 !important; color: #9a3412 !important; }
    .shift-sick { background-color: #fef9c3 !important; color: #854d0e !important; }
    .shift-extra { background-color: #f5d0fe !important; color: #701a75 !important; }

    /* Темна тема */
    html.dark .shift-work { background-color: #1e3a8a !important; color: #bfdbfe !important; }
    html.dark .shift-off { background-color: #064e3b !important; color: #a7f3d0 !important; }
    html.dark .shift-vacation { background-color: #7c2d12 !important; color: #fed7aa !important; }
    html.dark .shift-sick { background-color: #713f12 !important; color: #fef08a !important; }
    html.dark .shift-extra { background-color: #581c87 !important; color: #f0abfc !important; }

    /* --- Стилі для сторінки статистики --- */
    html.dark #stats-table th { color: #d1d5db; }
    html.dark #stats-table td { color: #f9fafb; }
    html.dark #stats-table .font-bold { color: #60a5fa; }

    /* --- Стилі для сторінки волборду --- */

    /* WALLBOARD */
    /* === WALLBOARD STYLES START (v2.0 - Light Theme) === */

    /* --- Основной контейнер --- */
    #wallboard-container {
        background-color: #f3f4f6; /* gray-100 */
    }
    html.dark #wallboard-container {
        background: linear-gradient(180deg, #1f2937, #111827); /* gray-800 to gray-900 */
    }

    /* --- Кнопки фильтра --- */
    .filter-btn {
        padding: 0.5rem 1rem;
        border-radius: 0.5rem;
        font-weight: 600;
        font-size: 0.875rem;
        transition: all 0.2s ease-in-out;
        background-color: #e5e7eb; /* gray-200 */
        color: #374151; /* gray-700 */
        border: 1px solid transparent;
    }
    html.dark .filter-btn {
        background-color: #374151; /* gray-700 */
        color: #d1d5db; /* gray-300 */
    }
    .filter-btn:hover {
        background-color: #d1d5db; /* gray-300 */
    }
    html.dark .filter-btn:hover {
        background-color: #4b5563; /* gray-600 */
    }
    .filter-btn.active {
        background-color: #8b5cf6; /* violet-500 */
        color: white;
        box-shadow: 0 0 15px rgba(139, 92, 246, 0.5);
    }

    /* --- Переключатель "Сховати оффлайн" --- */
    .toggle-switch-v2 { position: relative; display: inline-block; width: 44px; height: 24px; }
    .toggle-switch-v2 input { opacity: 0; width: 0; height: 0; }
    .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #9ca3af; transition: .3s; border-radius: 24px; }
    .toggle-slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .3s; border-radius: 50%; }
    input:checked + .toggle-slider { background-color: #8b5cf6; }
    input:checked + .toggle-slider:before { transform: translateX(20px); }

    /* --- Новий віджет "Пульс КЦ" --- */
    .wallboard-pulse-widget {
        background-color: #ffffff; /* white */
        border-radius: 1rem; /* 16px */
        padding: 1.5rem; /* 24px */
        box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    }
    html.dark .wallboard-pulse-widget {
        background-color: #1f2937; /* gray-800 */
        box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    }

    /* --- Картка для групи --- */
    .group-card {
        background-color: #f9fafb; /* gray-50 */
        border-radius: 1rem;
        border: 1px solid #e5e7eb; /* gray-200 */
        padding: 1rem;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    html.dark .group-card {
        background-color: #1f2937; /* gray-800 */
        border-color: #374151; /* gray-700 */
    }

    /* --- Заголовок групи --- */
    .group-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 0.75rem;
        border-bottom: 1px solid #e5e7eb; /* gray-200 */
    }
    html.dark .group-header {
        border-color: #374151; /* gray-700 */
    }
    .group-kpi {
        background-color: #f3f4f6; /* gray-100 */
        padding: 0.25rem 0.75rem;
        border-radius: 0.5rem;
        font-size: 0.875rem;
        font-weight: 600;
    }
    html.dark .group-kpi {
        background-color: #111827; /* gray-900 */
    }
    .group-kpi.alarm {
        background-color: #fee2e2; /* red-100 */
        color: #b91c1c; /* red-700 */
        animation: pulse-red-light 1.5s infinite;
    }
    html.dark .group-kpi.alarm {
        background-color: #991b1b; /* red-800 */
        color: #fecaca; /* red-200 */
        animation: pulse-red-dark 1.5s infinite;
    }

    /* --- Сетка для карточек операторов --- */
    .operator-tile-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 0.75rem;
    }

    /* --- Карточка оператора --- */
    .operator-tile {
        background-color: #ffffff; /* white */
        border-radius: 0.75rem;
        padding: 0.75rem;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        border-left: 4px solid transparent;
        transition: transform 0.2s, box-shadow 0.2s;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    html.dark .operator-tile {
        background-color: #374151; /* gray-700 */
    }
    .operator-tile:hover {
        transform: translateY(-4px);
        box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
    }
    html.dark .operator-tile:hover {
        box-shadow: 0 10px 15px -3px rgba(0,0,0,0.3), 0 4px 6px -2px rgba(0,0,0,0.2);
    }
    .operator-tile.status-green { border-left-color: #22c55e; }
    .operator-tile.status-red { border-left-color: #ef4444; }
    .operator-tile.status-yellow { border-left-color: #f59e0b; }
    .operator-tile.status-gray { border-left-color: #9ca3af; }

    /* --- Повноекранний режим --- */
    #app.fullscreen-mode #sidebar {
        transform: translateX(-100%);
    }

    /* Анимации для KPI */
    @keyframes pulse-red-light { 50% { background-color: #fecaca; } }
    @keyframes pulse-red-dark { 50% { background-color: #ef4444; color: white; } }

    /* === WALLBOARD STYLES END === */

    /* --- СТИЛІ ДЛЯ НОВИХ РЕЖИМІВ РЕДАКТОРА --- */
    /* Курсор для режима обмена */
    .swap-mode .schedule-table-wrapper {
    cursor: crosshair;
    }

    /* Виділення першої комірки при обміні */
    .schedule-table td.swap-selection-active {
    outline: 3px solid #f97316; /* оранжевая рамка */
    outline-offset: -3px;
    animation: pulse-orange 1.5s infinite;
    }   

    @keyframes pulse-orange {
    0% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(249, 115, 22, 0); }
    100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0); }
    }

    /* Контейнер для кнопок массового редактирования */
    #mass-edit-actions {
    position: fixed;   /* ЗМІНЕНО: було sticky */
    bottom: 1.5rem;    /* 24px, трохи вище */
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;       /* Збільшено, щоб бути поверх усього */
    transition: opacity 0.3s, transform 0.3s;
    }

    /* Стилі для виділених комірок у режимі масового вибору */
    .schedule-table td.mass-selected {
    background-color: #93c5fd !important; /* blue-300 */
    position: relative;
    }
    html.dark .schedule-table td.mass-selected {
        background-color: #1d4ed8 !important; /* ИЗМЕНЕНО: blue-700, для лучшего контраста */
    }
    .schedule-table td.mass-selected::after {
    content: '✔';
    position: absolute;
    top: 2px;
    right: 4px;
    font-size: 12px;
    color: #1d4ed8;
    }
    html.dark .schedule-table td.mass-selected::after {
    color: #93c5fd;
    }
    /* Чекбокси в режимі масового вибору */
    .mass-selection-mode .selection-checkbox {
    display: inline-block; /* Показуємо чекбокси тільки в цьому режимі */
    }
    .selection-checkbox {
    display: none; /* Приховуємо за замовчуванням */
    margin-right: 8px;
    height: 16px;
    width: 16px;
    }

    /* СТИЛИ ДЛЯ СТАТИСТИКИ ГРАФИКОВ */
    #stats-table th.sortable {
        cursor: pointer;
        position: relative;
        user-select: none;
    }
    #stats-table th.sortable:hover {
        background-color: #e5e7eb;
    }
    html.dark #stats-table th.sortable:hover {
        background-color: #4b5563;
    }
    #stats-table th .sort-icon {
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 1.2em;
        color: #9ca3af;
    }
    #stats-table th .sort-icon.active {
        color: #2563eb;
    }
    html.dark #stats-table th .sort-icon.active {
        color: #60a5fa;
    }

    /* Мобільний вигляд для таблиці статистики */
    @media (max-width: 768px) {
    #stats-table-wrapper.mobile-cards thead {
        display: none;
    }
    #stats-table-wrapper.mobile-cards tbody {
        display: flex;
        flex-direction: column;
        gap: 0.75rem; /* 12px */
    }
    #stats-table-wrapper.mobile-cards tr {
        display: block;
        border: 1px solid #e5e7eb;
        border-radius: 0.75rem;
        padding: 1rem;
        background-color: #ffffff;
    }
    html.dark #stats-table-wrapper.mobile-cards tr {
        border-color: #374151;
        background-color: #1f2937;
    }
    #stats-table-wrapper.mobile-cards td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem 0;
        border-bottom: 1px solid #f3f4f6;
    }
    #stats-table-wrapper.mobile-cards td:last-child {
        border-bottom: none;
    }
    html.dark #stats-table-wrapper.mobile-cards td {
        border-color: #374151;
    }
    #stats-table-wrapper.mobile-cards td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #4b5563;
    }
    html.dark #stats-table-wrapper.mobile-cards td::before {
        color: #9ca3af;
    }
    }

    /* Анімація для іконок завантаження */
    @keyframes pulse-subtle {
    50% { opacity: 0.5; }
    }
    .animate-pulse-subtle {
    animation: pulse-subtle 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }

    /* Адаптація для мобільних пристроїв */
    @media (max-width: 768px) {
    #portal-stats-widget-container .grid {
        grid-template-columns: repeat(2, 1fr);
    }
    #call-center-widget-container .grid {
         grid-template-columns: repeat(1, 1fr);
    }
    #call-center-widget-container .lg\:col-span-2 {
        grid-column: span 1 / span 1;
    }
    }

    /* Стиль для віджета, який перетягують */
    .sortable-chosen {
        opacity: 0.8;
        transform: scale(1.02);
    }
    /* Анимация "дрожания" для всех виджетов в режиме перетаскивания */
    @keyframes shake {
        0% { transform: translate(1px, 1px) rotate(0deg); }
        10% { transform: translate(-1px, -2px) rotate(-0.5deg); }
        20% { transform: translate(-3px, 0px) rotate(0.5deg); }
        30% { transform: translate(3px, 2px) rotate(0deg); }
        40% { transform: translate(1px, -1px) rotate(0.5deg); }
        50% { transform: translate(-1px, 2px) rotate(-0.5deg); }
        60% { transform: translate(-3px, 1px) rotate(0deg); }
        70% { transform: translate(3px, 1px) rotate(-0.5deg); }
        80% { transform: translate(-1px, -1px) rotate(0.5deg); }
        90% { transform: translate(1px, 2px) rotate(0deg); }
        100% { transform: translate(1px, -2px) rotate(-0.5deg); }
    }
    .sortable-drag .dashboard-widget {
        animation: shake 0.5s infinite;
        outline: 2px dashed #4F46E5; /* Обводка в режиме перетаскивания */
        outline-offset: 4px;
    }

    .widget-drag-handle {
        cursor: move;
        user-select: none;
    }

    /* --- FAQ --- */
    details.faq-item > summary {
        list-style: none;
        cursor: pointer;
    }
    details.faq-item > summary::-webkit-details-marker {
        display: none;
    }
    .faq-item-arrow {
        transition: transform 0.2s ease;
        flex-shrink: 0;
    }
    details.faq-item[open] .faq-item-arrow {
        transform: rotate(180deg);
    }

    /* --- СТИЛІ ДЛЯ САЙДБАРУ (БОКОВОГО МЕНЮ) --- */
    .user-group-header th {
        background-color: #f3f4f6;
        color: #4b5563;
        font-weight: 600;
        padding: 0.5rem 1rem;
        border-top: 2px solid #e5e7eb;
        border-bottom: 2px solid #e5e7eb;
    }
    html.dark .user-group-header th {
        background-color: #374151;
        color: #d1d5db;
        border-color: #4b5563;
    }

    /* --- Стилі для карток Wallboard, що згортаються (v2, виправлено) --- */
    .group-header .summary-arrow {
        transition: transform 0.3s ease-in-out;
    }
    .group-card.collapsed .group-header .summary-arrow {
        transform: rotate(-90deg); /* Стрелка поворачивается при сворачивании */
    }
    .collapsible-content {
        overflow: hidden;
        transition: max-height 0.4s ease-out, opacity 0.2s ease-out, padding 0.4s ease-out;
        max-height: 2000px; /* Велике значення для відкритого стану */
        opacity: 1;
    }
    .group-card.collapsed .collapsible-content {
        max-height: 0;
        opacity: 0;
        /* Прибираємо відступи, щоб блок повністю згорнувся */
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
    }


    /* --- СТИЛІ ДЛЯ САЙДБАРУ (БОКОВОГО МЕНЮ) --- */


    /* --- СТИЛІ ДЛЯ СУМАРІЗАЦІЇ (DETAILS/SUMMARY) --- */
    details > summary {
        list-style: none;
    }
    details > summary::-webkit-details-marker {
        display: none;
    }
    details > summary::marker {
        display: none;
    }
    .details-arrow {
        transition: transform 0.2s ease-in-out;
    }
    details[open] > summary .details-arrow {
        transform: rotate(180deg);
    }

    .sidebar-section summary::-webkit-details-marker {
        display: none; /* Прибираємо стандартний маркер для Chrome/Safari */
    }
    .sidebar-section .details-arrow {
        transition: transform 0.2s;
    }
    .sidebar-section[open] > summary .details-arrow {
        transform: rotate(90deg);
    }

    /* --- WIDGET SIZE (S/M/L) --- */
    .dashboard-widget {
        position: relative;
    }
    .widget-size-s { grid-column: span 1 / span 1 !important; }
    .widget-size-m { grid-column: span 2 / span 2 !important; }
    .widget-size-l { grid-column: 1 / -1 !important; }

    .widget-size-btns {
        position: absolute;
        top: 10px;
        right: 10px;
        display: flex;
        gap: 3px;
        z-index: 20;
        opacity: 0;
        transition: opacity 0.2s ease;
    }
    .dashboard-widget:hover .widget-size-btns {
        opacity: 1;
    }
    .widget-size-btn {
        padding: 1px 7px;
        font-size: 11px;
        font-weight: 700;
        border-radius: 5px;
        border: 1px solid rgba(156, 163, 175, 0.5);
        background: rgba(255, 255, 255, 0.8);
        color: #6b7280;
        cursor: pointer;
        transition: all 0.15s;
        backdrop-filter: blur(4px);
        line-height: 1.6;
        user-select: none;
    }
    .widget-size-btn:hover {
        background: rgba(109, 40, 217, 0.1);
        border-color: rgba(109, 40, 217, 0.5);
        color: #7c3aed;
    }
    .widget-size-btn.active {
        background: rgba(109, 40, 217, 0.15);
        border-color: rgba(109, 40, 217, 0.6);
        color: #7c3aed;
        font-weight: 800;
    }
    html.dark .widget-size-btn {
        background: rgba(31, 41, 55, 0.85);
        border-color: rgba(255, 255, 255, 0.15);
        color: #9ca3af;
    }
    html.dark .widget-size-btn:hover,
    html.dark .widget-size-btn.active {
        background: rgba(139, 92, 246, 0.25);
        border-color: rgba(139, 92, 246, 0.6);
        color: #a78bfa;
    }
    .widget-size-btn.disabled,
    .widget-size-btn:disabled {
        opacity: 0.25;
        cursor: not-allowed;
        pointer-events: none;
    }

    .sidebar-group-header {
    padding: 1rem 1rem 0.5rem;
    font-size: 0.75rem; /* 12px */
    font-weight: 600;
    color: #9ca3af; /* gray-400 */
    text-transform: uppercase;
    letter-spacing: 0.05em;
    }

    /* --- Стилі для віджета-таймлайну обідніх перерв --- */

    /* index.html -> вставте в тег <style> */

    /* --- Стилі для анімації емодзі у віджеті черг --- */
    .queue-emoji {
        font-size: 2.5rem; /* 40px */
        line-height: 1;
    }
    @keyframes emoji-bounce {
        0%, 100% { transform: translateY(0); animation-timing-function: ease-out; }
        50% { transform: translateY(-8px); animation-timing-function: ease-in; }
    }
    .animate-emoji-bounce {
        animation: emoji-bounce 1.5s infinite;
    }
    @keyframes emoji-shake {
        0%, 100% { transform: translateX(0); }
        10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
        20%, 40%, 60%, 80% { transform: translateX(4px); }
    }
    .animate-emoji-shake {
        animation: emoji-shake 0.5s infinite;
    }

    /* --- Стилі для віджета-таймлайну перерв (ОНОВЛЕНІ) --- */
    .breaks-timeline-wrapper {
        overflow-x: auto; /* Горизонтальний скрол для мобільних */
        flex-grow: 1;
    }
    .breaks-timeline-content {
        min-width: 700px; /* Минимальная ширина для внутреннего контента */
    }
    .breaks-timeline-header {
        display: grid;
        grid-template-columns: 150px 1fr; /* Колонка для имен и колонка для часов */
        font-size: 0.75rem;
        color: #6b7280; /* gray-500 */
        padding-bottom: 4px;
        border-bottom: 1px solid #e5e7eb; /* gray-200 */
    }
    html.dark .breaks-timeline-header {
        border-bottom-color: #374151; /* gray-700 */
        color: #9ca3af; /* gray-400 */
    }
    .breaks-timeline-hours {
        display: flex;
        justify-content: space-between;
        padding-right: 8px;
    }
    .breaks-timeline-body {
        position: relative;
        overflow-y: auto;
        max-height: 240px; /* Обмежуємо висоту з прокруткою */
    }
    .breaks-timeline-grid {
        position: absolute;
        top: 0; left: 150px; right: 0; bottom: 0;
        display: flex;
        z-index: 1;
    }
    .breaks-timeline-grid-col {
        flex: 1;
        border-left: 1px dashed #e5e7eb; /* gray-200 */
    }
    html.dark .breaks-timeline-grid-col {
        border-left-color: #374151; /* gray-700 */
    }
    .breaks-timeline-rows {
        position: relative;
        z-index: 2;
    }
    .breaks-timeline-row {
        display: grid;
        grid-template-columns: 150px 1fr;
        height: 36px;
        align-items: center;
        border-bottom: 1px solid #f3f4f6; /* gray-100 */
    }
    html.dark .breaks-timeline-row {
        border-bottom-color: #374151; /* gray-700 */
    }
    .breaks-timeline-name {
        font-size: 0.875rem;
        font-weight: 500;
        padding-right: 8px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #1f2937; /* ИСПРАВЛЕНО: Цвет имени */
    }
    html.dark .breaks-timeline-name {
        color: #f9fafb; /* ИСПРАВЛЕНО: Цвет имени в темной теме */
    }
    .breaks-timeline-bar-container {
        position: relative;
        height: 100%;
    }
    .break-bar {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        height: 20px;
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.2s ease-in-out;
    }
    .break-bar:hover {
        transform: translateY(-50%) scale(1.05);
        opacity: 1;
    }
    .break-bar[data-status="upcoming"] { background-color: #3b82f6; } /* blue-500 */
    .break-bar[data-status="on_break"] { background-color: #f97316; } /* orange-500 */
    .break-bar[data-status="finished"] { background-color: #10b981; opacity: 0.6; } /* emerald-500 */

    .current-time-line {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 2px;
        background-color: #ef4444; /* red-500 */
        z-index: 3;
        pointer-events: none;
    }

    /*==========================
    /*Стили статистики телефонии
    ===========================*/

    /* Стили для виджетов статистики */
    .stats-widget-title {
        color: #e5e7eb; /* Світло-сірий */
        font-weight: bold;
        margin-bottom: 0.5rem;
    }

    .stats-widget-value {
        color: #f9fafb; /* Білий */
        font-size: 1.5rem;
        font-weight: bold;
        margin-bottom: 0.25rem;
    }

    .stats-widget-label {
        color: #a1a1aa; /* Сірий */
        font-size: 0.875rem;
    }

    .stats-table th {
        color: #d1d5db; /* Світло-сірий */
        font-weight: 500;
        padding: 0.5rem;
        text-align: left;
        border-bottom: 1px solid #4b5563; /* Темно-сірий роздільник */
    }

    .stats-table td {
        color: #e5e7eb; /* Світло-сірий */
        padding: 0.5rem;
    }

    .stats-table tbody tr:nth-child(even) {
        background-color: #1f2937; /* Ещё темнее фон для чётных строк */
    }

    /* Стили для кнопок фильтрации операторов */
    .operator-filter-buttons {
        margin-top: 1rem;
        display: flex;
        gap: 0.5rem;
        justify-content: flex-end;
    }

    .operator-filter-button {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
        border-radius: 0.375rem;
        background-color: #374151; /* Тёмно-серый фон */
        color: #d1d5db; /* Светло-серый текст */
        cursor: pointer;
        transition: background-color 0.2s;
    }

    .operator-filter-button.active {
        background-color: #6d28d9; /* Фиолетовый для активной кнопки */
        color: white;
    }

        /* --- Стили для кнопок сортировки операторов в статистике --- */
    .operator-sort-btn {
        padding: 0.25rem 0.75rem;
        font-size: 0.75rem; /* 12px */
        font-weight: 600;
        border-radius: 9999px; /* rounded-full */
        background-color: #e5e7eb; /* gray-200 */
        color: #374151; /* gray-700 */
        transition: all 0.2s;
        border: none;
        cursor: pointer;
    }
    html.dark .operator-sort-btn {
        background-color: #374151; /* gray-700 */
        color: #d1d5db; /* gray-300 */
    }
    .operator-sort-btn.active {
        background-color: #4f46e5; /* indigo-600 */
        color: white;
    }
    html.dark .operator-sort-btn.active {
        background-color: #a78bfa; /* violet-400 */
        color: #1e1b4b; /* indigo-950 */
    }

    /* --- Стили для кнопок фильтрации в статистике телефонии --- */
    .history-filter-btn { 
        padding: 0.5rem 1rem; 
        font-size: 0.875rem; 
        font-weight: 500; 
        border-radius: 0.5rem; 
        background-color: #f3f4f6; 
        color: #374151; 
        transition: all 0.2s; 
        border: none; 
        cursor: pointer; 
    }
    html.dark .history-filter-btn { 
        background-color: #374151; 
        color: #d1d5db; 
    }
    .history-filter-btn.active-filter { 
        background-color: #8b5cf6; 
        color: white; 
        font-weight: 600; 
    }
    /* ДОБАВЛЕНА СТРОКА ДЛЯ ТЁМНОЙ ТЕМЫ */
    html.dark .history-filter-btn.active-filter {
        background-color: #a78bfa; 
        color: #1e1b4b;
    }

    /* Конец стилей для виджетов статистики телефонии */

    /*==========================
    /*Стили оценки качества звонка
    ===========================*/

    .custom-scrollbar::-webkit-scrollbar {
        width: 8px;
    }
    .custom-scrollbar::-webkit-scrollbar-track {
        background-color: #e4e4e7; /* zinc-200 */
    }
    .dark .custom-scrollbar::-webkit-scrollbar-track {
        background-color: #27272a; /* zinc-800 */
    }
    .custom-scrollbar::-webkit-scrollbar-thumb {
        background-color: #a1a1aa; /* zinc-400 */
        border-radius: 4px;
    }
    .custom-scrollbar::-webkit-scrollbar-thumb:hover {
        background-color: #71717a; /* zinc-500 */
    }
    .dark .custom-scrollbar::-webkit-scrollbar-thumb {
        background-color: #52525b; /* zinc-600 */
    }
    .dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
        background-color: #71717a; /* zinc-500 */
    }

    /*==========================
    /*Стили статистики операторов
    ===========================*/

    /* --- Стили для сортируемой таблицы операторов --- */
    .sortable-header {
        cursor: pointer;
        position: relative;
        user-select: none;
    }
    .sortable-header:hover {
        background-color: #f3f4f6;
    }
    html.dark .sortable-header:hover {
        background-color: #374151;
    }
    .sort-icon {
        position: absolute;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 1.1em;
        color: #9ca3af;
        opacity: 0;
        transition: opacity 0.2s;
    }
    .sortable-header:hover .sort-icon,
    .sortable-header.active .sort-icon {
        opacity: 1;
    }
    .sortable-header.active .sort-icon {
        color: #a78bfa;
    }

    /* --- Стили для адаптивных таблиц статистики --- */
    @media (max-width: 768px) {
        .responsive-stats-table thead {
            display: none; /* Скрываем заголовки на мобильных */
        }
        .responsive-stats-table tbody,
        .responsive-stats-table tr {
            display: block;
            width: 100%;
        }
        .responsive-stats-table tr {
            margin-bottom: 1rem;
            border: 1px solid #e5e7eb;
            border-radius: 0.75rem;
            padding: 1rem;
            background-color: #ffffff;
        }
        html.dark .responsive-stats-table tr {
            border-color: #374151;
            background-color: #1f2937;
        }
        .responsive-stats-table td {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.5rem 0;
            border-bottom: 1px solid #f3f4f6;
            text-align: right;
        }
        .responsive-stats-table td:last-child {
            border-bottom: none;
        }
        html.dark .responsive-stats-table td {
            border-color: #374151;
        }
        .responsive-stats-table td::before {
            content: attr(data-label);
            font-weight: 600;
            text-align: left;
            padding-right: 1rem;
            color: #4b5563;
        }
        html.dark .responsive-stats-table td::before {
            color: #9ca3af;
        }
        /* Скрываем пустые ячейки для деталей графика */
        .responsive-stats-table .operator-details-row td {
            padding: 0;
        }
        .responsive-stats-table .operator-details-row td::before {
            display: none;
        }
    }

    .speed-control-btn.active {
        background-color: #6d28d9; /* purple-700 */
        color: white;
        font-weight: bold;
    }

    /*==========================
    /*Конец статистики операторов
    ===========================*/


    /*==========================
    /*Стили для подсветки прослушанного звонка
    ===========================*/
    
    /* --- СТИЛИ ДЛЯ ПОДСВЕТКИ ПРОСЛУШАННОГО ЗВОНКА --- */
    .call-log-row-clickable.listened {
        background-color: #f3e8ff !important; /* light: purple-100 */
        border-left: 4px solid #8b5cf6; /* purple-500 */
    }
    html.dark .call-log-row-clickable.listened {
        background-color: #3730a3 !important; /* dark: indigo-800 */
        border-left-color: #a78bfa; /* violet-400 */
    }

    /* --- Стили для пагинации виджета перерывов --- */
    .break-pagination-btn {
        padding: 0.25rem 0.75rem;
        font-size: 0.75rem;
        font-weight: 600;
        border-radius: 0.5rem;
        background-color: #f3f4f6; /* gray-100 */
        color: #374151; /* gray-700 */
        transition: background-color 0.2s;
    }
    .break-pagination-btn:hover:not(:disabled) {
        background-color: #e5e7eb; /* gray-200 */
    }
    .break-pagination-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }
    html.dark .break-pagination-btn {
        background-color: #374151; /* gray-700 */
        color: #d1d5db; /* gray-300 */
    }
    html.dark .break-pagination-btn:hover:not(:disabled) {
        background-color: #4b5563; /* gray-600 */
    }

    /* Стили для кастомного скроллбара */
    .breaks-timeline-wrapper::-webkit-scrollbar {
        height: 8px;
        width: 8px;
    }
    .breaks-timeline-wrapper::-webkit-scrollbar-track {
        background: #e5e7eb; /* gray-200 */
        border-radius: 10px;
    }
    html.dark .breaks-timeline-wrapper::-webkit-scrollbar-track {
        background: #1f2937; /* gray-800 */
    }
    .breaks-timeline-wrapper::-webkit-scrollbar-thumb {
        background-color: #a78bfa; /* violet-400 */
        border-radius: 10px;
        border: 2px solid #e5e7eb; /* gray-200 */
    }
    html.dark .breaks-timeline-wrapper::-webkit-scrollbar-thumb {
        border-color: #1f2937; /* gray-800 */
    }

    /* Конец обедов*/

    /* Стили для часов в welcome-виджете */
    #welcome-clock {
        font-size: 2.5rem; /* 40px */
        font-weight: 700;
        color: #f9fafb; /* gray-50 */
        line-height: 1;
        text-shadow: 0 1px 3px rgba(0,0,0,0.3);
    }
    html:not(.dark) #welcome-clock {
        color: #1f2937; /* gray-800 */
        text-shadow: none;
    }

    /* --- СТИЛИ ДЛЯ АНИМАЦИИ ТРЕВОГИ --- */
    @keyframes pulse-red {
        0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7); }
        70% { box-shadow: 0 0 0 12px rgba(220, 38, 38, 0); }
        100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
    }
    .alarm-pulse {
        animation: pulse-red 1.5s infinite;
        border-radius: 0.75rem; /* скругляем углы для красивого свечения */
    }

    /* --- АДАПТИВНЫЕ СТИЛИ ДЛЯ СТРАНИЦЫ ТЕЛЕФОНИИ --- */
    @media (max-width: 768px) {
        /* Скрываем заголовки таблиц */
        #telephony-tab-content thead {
            display: none;
        }
        /* Превращаем строки в карточки */
        #telephony-tab-content tr {
            display: block;
            border: 1px solid #e5e7eb;
            border-radius: 0.75rem;
            padding: 1rem;
            margin-bottom: 1rem;
        }
        html.dark #telephony-tab-content tr {
            border-color: #374151;
        }
        /* Превращаем ячейки в строки "ключ: значение" */
        #telephony-tab-content td {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.5rem 0;
            border-bottom: 1px solid #f3f4f6;
        }
        #telephony-tab-content td:last-child {
            border-bottom: none;
        }
        html.dark #telephony-tab-content td {
            border-color: #374151;
        }
        /* Добавляем подписи к данным из data-label */
        #telephony-tab-content td::before {
            content: attr(data-label);
            font-weight: 600;
            color: #4b5563;
            padding-right: 1rem;
        }
        html.dark #telephony-tab-content td::before {
            color: #9ca3af;
        }
    }
    
    /* --- АДАПТИВНІ СТИЛІ --- */
    @media (max-width: 768px) {
        #stats-table thead { display: none; }
        #stats-table tbody, #stats-table tr, #stats-table td { display: block; width: 100%; }
        #stats-table tr { margin-bottom: 1rem; border: 1px solid #e5e7eb; border-radius: 0.5rem; overflow: hidden; }
        html.dark #stats-table tr { border-color: #374151; }
        #stats-table td { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; text-align: right; border-bottom: 1px solid #f3f4f6; }
        html.dark #stats-table td { border-color: #374151; }
        #stats-table td:last-child { border-bottom: none; }
        #stats-table td::before { content: attr(data-label); font-weight: 600; text-align: left; padding-right: 1rem; color: #4b5563; }
        html.dark #stats-table td::before { color: #9ca3af; }
    }

    /* --- СТИЛИ ДЛЯ ИКОНКИ ОБНОВЛЕНИЯ ТЕЛЕФОНИИ --- */
    .telephony-refresh-icon {
        cursor: pointer;
        transition: transform 0.5s ease-in-out, color 0.2s;
    }
    .telephony-refresh-icon:hover {
        color: #a78bfa; /* Fioletovyy pri navedenii */
    }
    @keyframes spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(-360deg); } /* Vraschenie protiv chasovoy */
    }
    .spin {
        animation: spin 1s linear infinite;
    }

    /* --- СТИЛИ ДЛЯ РАСКРЫВАЮЩИХСЯ СТРОК В ТАБЛИЦЕ ОЧЕРЕДЕЙ --- */
    .queue-details-row {
        display: none;
    }
    .queue-main-row.expanded + .queue-details-row {
        display: table-row;
    }
    .queue-main-row {
        cursor: pointer;
        transition: background-color 0.2s;
    }
    .queue-main-row:hover {
        background-color: #f3f4f6; /* gray-100 */
    }
    html.dark .queue-main-row:hover {
        background-color: #374151; /* gray-700 */
    }
    .details-cell {
        padding: 0 !important;
        border-top: none !important;
    }
    .details-inner-table {
        width: 100%;
        background-color: #f9fafb; /* gray-50 */
    }
    html.dark .details-inner-table {
        background-color: #1f2937; /* gray-800 */
    }
    .details-inner-table th {
        padding: 0.75rem 1rem;
        border-bottom: 1px solid #e5e7eb; /* gray-200 */
        color: #4b5563; /* gray-600 */
        text-align: left;
        font-weight: 600;
    }
    .details-inner-table td {
        padding: 0.75rem 1rem;
        border-bottom: 1px solid #e5e7eb; /* gray-200 */
        color: #111827; /* gray-900 */
    }
    html.dark .details-inner-table th {
        border-bottom: 1px solid #374151; /* gray-700 */
        color: #9ca3af; /* gray-400 */
    }
    html.dark .details-inner-table td {
        border-bottom: 1px solid #374151; /* gray-700 */
        color: #d1d5db; /* gray-300 */
    }
    .details-inner-table tr:last-child th,
    .details-inner-table tr:last-child td {
        border-bottom: none;
    }

    /* --- Стили для виджета "Пульс Портала" --- */
    @keyframes pulse-green {
        0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
        70% { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); }
        100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
    }
    @keyframes pulse-yellow {
        0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7); }
        70% { box-shadow: 0 0 0 10px rgba(245, 158, 11, 0); }
        100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
    }
    @keyframes pulse-red {
        0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
        70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
        100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
    }
    .pulse-ok { animation: pulse-green 2s infinite; }
    .pulse-warning { animation: pulse-yellow 2s infinite; }
    .pulse-critical { animation: pulse-red 1.5s infinite; }

    .portal-pulse-item {
        transition: transform 0.2s ease-in-out, background-color 0.2s;
    }
    .portal-pulse-item:hover {
        transform: translateY(-4px);
    }
    .fade-in-fast {
        animation: fadeIn 0.5s ease-in-out;
    }
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }

    /* Календарь стили */

    /* --- Стили для нового редактора графиков --- */
    .schedule-editor-layout-new {
        display: flex;
        gap: 1rem; /* 16px */
        flex-grow: 1;
        overflow: hidden; /* Важно для правильной работы скролла */
    }

    .schedule-tools-sidebar {
        flex-shrink: 0;
        width: 280px; /* Фиксированная ширина для левой панели */
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .schedule-table-container-new {
        flex-grow: 1;
        overflow: auto; /* Главный скролл для таблицы */
        border: 1px solid #e5e7eb; /* dark:border-gray-700 */
        border-radius: 0.75rem;
    }

    html.dark .schedule-table-container-new {
        border-color: #374151;
    }

    .schedule-table-new {
        border-collapse: collapse;
        width: 100%;
    }

    .schedule-table-new th,
    .schedule-table-new td {
        border: 1px solid #e5e7eb; /* dark:border-gray-700 */
        padding: 0.5rem;
        text-align: center;
        white-space: nowrap;
        font-size: 0.875rem;
        min-width: 110px;
    }

    html.dark .schedule-table-new th,
    html.dark .schedule-table-new td {
        border-color: #374151;
    }

    /* Стили для "прилипания" заголовков */
    .schedule-table-new thead th {
        position: sticky;
        top: 0;
        background-color: #f9fafb; /* dark:bg-gray-700 */
        z-index: 20;
    }

    html.dark .schedule-table-new thead th {
        background-color: #374151;
    }

    .schedule-table-new tbody th {
        position: sticky;
        left: 0;
        background-color: #ffffff; /* dark:bg-gray-800 */
        z-index: 10;
        font-weight: 500;
        text-align: left;
        padding-left: 1rem;
        width: 200px;
        min-width: 200px;
    }

    html.dark .schedule-table-new tbody th {
        background-color: #1f2937;
    }
    
    /* Стили для заголовка группы в таблице */
    .schedule-table-new .group-header th {
        background-color: #e9d5ff; /* light:violet-200 */
        color: #3b0764;
        font-weight: 600;
        position: sticky;
        left: 0;
        z-index: 11; /* Выше чем обычная ячейка с именем */
    }

    html.dark .schedule-table-new .group-header th {
        background-color: #5b21b6; /* dark:violet-700 */
        color: #f5f3ff;
    }
    
    /* Убираем лишнюю рамку, чтобы "прилипание" было красивым */
    .schedule-table-new thead th:first-child {
        z-index: 30;
    }

    /* --- Стили для мини-календаря (остаются без изменений) --- */
    .mini-calendar {
        padding: 1rem;
    }
    .mini-calendar-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 0.25rem;
    }
    .mini-calendar-day {
        aspect-ratio: 1 / 1;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 9999px;
        cursor: pointer;
        font-size: 0.75rem;
    }
    .mini-calendar-day:hover {
        background-color: #e5e7eb; /* dark:bg-gray-600 */
    }
    html.dark .mini-calendar-day:hover {
        background-color: #4b5563;
    }
    .mini-calendar-day.other-month {
        color: #9ca3af; /* gray-400 */
    }
    .mini-calendar-day.today {
        background-color: #3b82f6; /* blue-500 */
        color: white;
        font-weight: 700;
    }
    .mini-calendar-day.selected {
        outline: 2px solid #a855f7; /* purple-500 */
        outline-offset: 2px;
    }

    /* Стили для drag-to-scroll и выделения */
    .schedule-table-container-new {
        cursor: grab; /* Курсор в виде открытой руки */
    }
    .schedule-table-container-new.active-grab {
        cursor: grabbing; /* Курсор в виде сжатой руки при перетаскивании */
    }
    /* Новый класс для предотвращения выделения текста */
    .no-select {
        -webkit-user-select: none; /* Safari */
        -ms-user-select: none; /* IE 10+ */
        user-select: none; /* Standard syntax */
    }
    /* Новый класс для подсветки выбранной колонки */
    .selected-day-column {
        box-shadow: inset 2px 0 0 #f59e0b, inset -2px 0 0 #f59e0b;
    }
    html.dark .selected-day-column {
        box-shadow: inset 2px 0 0 rgba(167, 139, 250, 0.6), inset -2px 0 0 rgba(167, 139, 250, 0.6);
    }

    /* --- Финальные стили для ЕДИНОЙ кнопки сворачивания/разворачивания --- */
    .schedule-tools-sidebar {
        flex-shrink: 0;
        transition: width 0.3s ease-in-out, padding 0.3s ease-in-out, opacity 0.2s ease-in-out, margin-left 0.3s ease-in-out, visibility 0.3s;
    }

    /* Логика смены иконок и скрытия панели */
    #sidebar-toggle-btn .icon-expand {
        display: none; /* Иконка "развернуть" (>>) по умолчанию скрыта */
    }
    #sidebar-toggle-btn .icon-collapse {
        display: block; /* Иконка "свернуть" (<<) по умолчанию видна */
    }

    #schedule-editor-widget.sidebar-collapsed-layout .schedule-tools-sidebar {
        width: 0;
        padding-left: 0;
        padding-right: 0;
        opacity: 0;
        margin-left: -1rem;
        visibility: hidden;
    }

    #schedule-editor-widget.sidebar-collapsed-layout #sidebar-toggle-btn .icon-expand {
        display: block; /* Показываем иконку "развернуть" */
    }
    #schedule-editor-widget.sidebar-collapsed-layout #sidebar-toggle-btn .icon-collapse {
        display: none; /* Скрываем иконку "свернуть" */
    }


    /* Конец календаря стилей */

    /* --- Исправление цвета иконок в полях даты/времени для тёмной темы --- */
    html.dark input[type="time"],
    html.dark input[type="date"] {
        color-scheme: dark;
    }

    /*Раздел Уведомления */

    /* --- ОБНОВЛЕННЫЕ стили для уведомлений --- */
    @keyframes pulse-glow {
    0%, 100% {
        background-color: transparent;
        box-shadow: 0 0 0 0 rgba(168, 85, 247, 0.4);
    }
    50% {
        background-color: rgba(168, 85, 247, 0.1);
        box-shadow: 0 0 0 6px rgba(168, 85, 247, 0);
    }
    }
    .sidebar-link-new-notification {
        animation: pulse-glow 2s infinite;
    }

    /* Стиль для прочитанных уведомлений (делаем их полупрозрачными) */
    .activity-item-wrapper.read {
        opacity: 0.65;
        transition: opacity 0.3s ease-in-out;
    }
    .activity-item-wrapper.read:hover {
        opacity: 1;
    }

    /* Мобильная адаптация для списка уведомлений */
    @media (max-width: 640px) {
        .activity-item {
            flex-direction: column;
            align-items: flex-start;
        }
        .activity-item-content {
            width: 100%;
        }
        .activity-item-controls {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 0.5rem; /* 8px */
        }
    }


    /* =================================================================== */
    /* === HALL OF FAME============ */
    /* =================================================================== */


    /* Glassmorphism Classes for Hall of Fame */
    .hof-glass-panel {
        background: rgba(255, 255, 255, 0.65);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.5);
        box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
    }
    .dark .hof-glass-panel {
        background: rgba(17, 24, 39, 0.6); /* gray-900 with opacity */
        border: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
    }

    .hof-podium-card {
        transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .hof-podium-card:hover {
        transform: translateY(-5px) scale(1.02);
    }

    .hof-rank-badge {
        background: linear-gradient(135deg, #f6d365 0%, #fda085 100%); /* Gold default */
        box-shadow: 0 4px 10px rgba(246, 211, 101, 0.4);
    }
    .hof-rank-1 { background: linear-gradient(135deg, #FFD700 0%, #FDB931 100%); } /* Gold */
    .hof-rank-2 { background: linear-gradient(135deg, #E0E0E0 0%, #BDBDBD 100%); } /* Silver */
    .hof-rank-3 { background: linear-gradient(135deg, #CD7F32 0%, #A0522D 100%); } /* Bronze */

    /* =================================================================== */
    /* === СТИЛИ ДЛЯ МИНИ-ИГРЫ "КИБЕР-ТРЕНАЖЕР" (v4 - Боси) ============ */
    /* =================================================================== */

    #game-container { background-color: #0d1117; border: 1px solid #30363d; position: relative; overflow: hidden; user-select: none; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: border-color 0.3s; }
    #game-board { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: 1.5rem; width: 100%; max-width: calc(60vh - 60px); margin: auto; aspect-ratio: 4 / 3; }
    .game-port { background-color: #161b22; border: 1px solid #21262d; border-radius: 50%; position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; }

    .thought-bubble { position: absolute; bottom: 110%; left: 50%; transform: translateX(-50%); background-color: #f3f4f6; color: #1f2937; padding: 4px 8px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; white-space: nowrap; animation: target-appear 0.3s ease-out; }
    .dark .thought-bubble { background-color: #374151; color: #e5e7eb; }

    /* Таймер зворотного відліку */
    .target-timer { position: absolute; top: 105%; left: 15%; width: 70%; height: 6px; background-color: rgba(255,255,255,0.1); border-radius: 3px; overflow: hidden; }
    .target-timer-bar { height: 100%; background-color: #f59e0b; border-radius: 3px; transition: width 0.1s linear; }

    @keyframes target-pulse { 50% { transform: scale(1.05); } }
    .game-target, .game-target-friendly, .game-powerup { width: 60%; height: 60%; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; color: white; position: absolute; animation: target-appear 0.3s ease-out, target-pulse 1.5s infinite 0.3s; }
    .game-target:hover, .game-target-friendly:hover, .game-powerup:hover { transform: scale(1.15); }
    .game-target { background-color: #be123c; box-shadow: 0 0 15px #f43f5e, 0 0 25px #ef4444; }
    .game-target-friendly { background-color: #3b82f6; box-shadow: 0 0 15px #60a5fa, 0 0 25px #3b82f6; }

    /* Стили для БОСА */
    .game-target-boss {
        width: 80%; height: 80%; background-color: #7e22ce; /* purple-700 */
        box-shadow: 0 0 20px #a855f7, 0 0 35px #9333ea;
        animation: target-appear 0.5s ease-out, target-pulse 1s infinite;
    }
    .boss-health-bar-container { position: absolute; top: -15px; width: 80%; height: 8px; background-color: rgba(255,255,255,0.2); border-radius: 4px; border: 1px solid #4a044e; }
    .boss-health-bar { height: 100%; background: linear-gradient(to right, #a855f7, #d946ef); border-radius: 3px; transition: width 0.3s ease-out; }
    @keyframes boss-hit-flash { 50% { filter: brightness(2); } }
    .boss-hit { animation: boss-hit-flash 0.2s; }

    .powerup-health { background-color: #22c55e; box-shadow: 0 0 15px #4ade80, 0 0 25px #22c55e; }
    .powerup-bomb { background-color: #f59e0b; box-shadow: 0 0 15px #fbbf24, 0 0 25px #f59e0b; }
    .powerup-shield { background-color: #0ea5e9; box-shadow: 0 0 15px #38bdf8, 0 0 25px #0ea5e9; }
    @keyframes shield-active-glow { 50% { box-shadow: 0 0 15px 3px rgba(14, 165, 233, 0.7); } }
    #game-lives.shield-active { animation: shield-active-glow 1.5s infinite; background-color: rgba(14, 165, 233, 0.1); border-radius: 10px; padding: 2px 4px; }
    @keyframes target-appear { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
    @keyframes port-breach { 50% { background-color: #991b1b; box-shadow: 0 0 20px #ef4444; } }
    .port-breached { animation: port-breach 0.5s ease-in-out; }
    .game-target-botnet { background-color: #facc15; box-shadow: 0 0 15px #fde047, 0 0 25px #facc15; animation: target-appear 0.1s ease-out, target-pulse 0.8s infinite; }
    @keyframes screen-glitch { 25% { filter: hue-rotate(-10deg) brightness(1.1); } 50% { filter: contrast(1.5) saturate(0.8); } 75% { filter: hue-rotate(10deg); } }
    #game-container.botnet-active { animation: screen-glitch 0.2s 3; border-color: #ef4444; }
    #game-ui { width: 100%; padding: 0.75rem 1.5rem; display: flex; justify-content: space-between; align-items: center; background-color: #161b22; border-bottom: 1px solid #30363d; color: #c9d1d9; font-family: 'Courier New', Courier, monospace; flex-shrink: 0; }
    .game-ui-stat { font-size: 1.25rem; font-weight: bold; }
    .game-ui-stat span { color: #58a6ff; }
    .game-overlay { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; background-color: rgba(13, 17, 23, 0.8); backdrop-filter: blur(5px); padding: 2rem; text-align: center; color: #c9d1d9; font-family: 'Courier New', Courier, monospace; }
    .game-overlay h3 { font-size: 2rem; color: #58a6ff; margin-bottom: 1rem; }
    .game-overlay p { margin-bottom: 1.5rem; }
    .game-start-btn { padding: 0.75rem 1.5rem; font-size: 1rem; background-color: #238636; color: white; border: 1px solid #2ea043; border-radius: 6px; cursor: pointer; transition: background-color 0.2s; }
    .game-start-btn:hover { background-color: #2ea043; }
    .floating-text { position: fixed; font-size: 1.25rem; font-weight: bold; font-family: 'Courier New', Courier, monospace; color: #facc15; text-shadow: 0 0 5px #f59e0b; pointer-events: none; z-index: 100; animation: float-up 1.5s ease-out forwards; }
    @keyframes float-up { 100% { transform: translateY(-80px); opacity: 0; } }

    /*Раздел Уведомления */

    @media (max-width: 768px) {
        #user-stats-table thead {
            display: none;
        }
        #user-stats-table-body {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }
        #user-stats-table tr {
            display: block;
            border: 1px solid #e5e7eb;
            border-radius: 0.75rem;
            padding: 1rem;
            background-color: #ffffff;
        }
        html.dark #user-stats-table tr {
            border-color: #374151;
            background-color: #1f2937;
        }
        #user-stats-table td {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.5rem 0;
            border-bottom: 1px solid #f3f4f6;
        }
        #user-stats-table td:last-child {
            border-bottom: none;
        }
        html.dark #user-stats-table td {
            border-color: #374151;
        }
        #user-stats-table td::before {
            content: attr(data-label);
            font-weight: 600;
            color: #4b5563;
        }
        html.dark #user-stats-table td::before {
            color: #9ca3af;
        }
    }
    </style>