/* ==========================================
   🎨 MATERIAL DESIGN 3.0 DASHBOARD CARDS
   Сучасний бізнес-дизайн з Flutter принципами
   ========================================== */

/* ==========================================
   📦 DASHBOARD GRID CONTAINER - МАКСИМАЛЬНА ФОРСОВАНА СПЕЦИФІЧНІСТЬ
   ========================================== */
body #user-dashboard-grid,
body #user-dashboard-grid.dashboard-visible,
body #user-dashboard-grid.dashboard-hidden,
body #user-dashboard-grid.dashboard-modern-grid,
html body #user-dashboard-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; /* 2 колонки (РРП займає обидві, інші по 1) */
    gap: 24px !important;
    padding: 24px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    width: 100% !important;
    
    /* Форсоване скасування flexbox */
    flex-direction: unset !important;
    flex: unset !important;
    flex-wrap: unset !important;
    
    /* Grid налаштування */
    grid-auto-flow: dense !important;
    grid-auto-rows: auto !important;
    
    /* Скасування можливих conflicting стилів */
    align-items: unset !important;
    justify-content: unset !important;
}

/* Tablet - 2 колонки */
@media (max-width: 1200px) and (min-width: 769px) {
    body #user-dashboard-grid,
    body #user-dashboard-grid.dashboard-visible,
    body #user-dashboard-grid.dashboard-hidden,
    body #user-dashboard-grid.dashboard-modern-grid,
    html body #user-dashboard-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
}

/* Mobile - Swipe Layout */
@media (max-width: 768px) {
    /* Приховуємо scroll боді на mobile */
    body {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
    }
    
    body #user-dashboard-grid,
    body #user-dashboard-grid.dashboard-visible,
    body #user-dashboard-grid.dashboard-hidden,
    body #user-dashboard-grid.dashboard-modern-grid,
    html body #user-dashboard-grid {
        position: fixed !important;
        top: 10px !important; /* Відступ зверху */
        left: 0 !important;
        bottom: calc(65px + env(safe-area-inset-bottom, 0px) + 12px) !important; /* Меню + простір для індикатора */
        width: 100vw !important;
        height: auto !important; /* Автоматична висота між top і bottom */
        display: flex !important;
        flex-direction: row !important;
        gap: 0 !important;
        padding: 10px !important; /* Рівномірні відступи з усіх боків */
        margin: 0 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-behavior: smooth !important;
        z-index: 1000 !important;
        background: #f5f5f5 !important; /* Фон щоб було видно відступи */
        box-sizing: border-box !important;
    }
}

/* КРИТИЧНО: Скасування Bootstrap row/col/wrapper класів */
#user-dashboard-grid > .row,
#user-dashboard-grid > .container,
#user-dashboard-grid > .container-fluid,
#user-dashboard-grid > div:not(.dashboard-card) {
    display: contents !important; /* Робимо прозорими для grid */
    all: unset !important;
}

/* 🔄 ПОВНОЕКРАННЕ ЗАВАНТАЖЕННЯ - По центру всього екрану */
#fullscreen-loading {
    animation: fadeIn 0.5s ease-in-out;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

#fullscreen-loading .spinner-border {
    animation: spin 1s linear infinite;
    border-width: 0.25em;
    filter: drop-shadow(0 4px 8px rgba(40, 167, 69, 0.3));
}

#fullscreen-loading .text-primary {
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #0d6efd !important;
}

#fullscreen-loading .text-muted {
    font-size: 0.95rem;
    opacity: 0.8;
}

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

/* Анімація зникнення завантаження */
#fullscreen-loading.fade-out {
    animation: fadeOut 0.3s ease-out forwards;
}

@keyframes fadeOut {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(0.95); }
}

/* Всі картки повинні бути прямими нащадками grid */
body #user-dashboard-grid > .dashboard-card,
body #user-dashboard-grid .dashboard-card {
    display: block !important; /* Не flex, не grid - просто block */
    width: 100% !important;
    max-width: none !important;
}

/* РРП vs ДЗК картка займає 2 КОЛОНКИ */
#user-dashboard-grid > .dashboard-card[data-card-type="rrp"],
#user-dashboard-grid > .dashboard-card[data-zone="rrp_dzk"] {
    grid-column: span 2 !important; /* 2 колонки з 3 */
}

/* На tablet - РРП займає весь рядок (2 колонки) */
@media (max-width: 1200px) and (min-width: 769px) {
    #user-dashboard-grid > .dashboard-card[data-card-type="rrp"],
    #user-dashboard-grid > .dashboard-card[data-zone="rrp_dzk"] {
        grid-column: span 2 !important; /* Весь рядок на tablet */
    }
}

/* На mobile - всі картки повноекранні зі swipe */
@media (max-width: 768px) {
    .dashboard-card {
        flex: none !important;
        width: calc(100vw - 80px) !important; /* Враховуємо padding контейнера 10px + margin 20px з боків */
        min-width: calc(100vw - 80px) !important;
        height: auto !important; /* Автоматична висота - займає простір між top і bottom */
        scroll-snap-align: center !important; /* Центрування картки */
        padding: 16px !important;
        margin: 0 10px !important; /* Зменшуємо margin оскільки контейнер має padding */
        box-sizing: border-box !important;
        overflow-y: auto !important;
        display: flex !important;
        flex-direction: column !important;
        border-radius: 16px !important; /* Заокруглення для видимості меж */
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important; /* Тінь для контрасту */
    }
    
    /* Контент картки займає доступний простір */
    .dashboard-card .dashboard-card-body {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }
    
    /* Приховуємо scrollbar на mobile */
    #user-dashboard-grid::-webkit-scrollbar {
        display: none;
    }
    
    #user-dashboard-grid {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    
    /* Приховуємо scrollbar всередині карток */
    .dashboard-card::-webkit-scrollbar {
        display: none;
    }
    
    .dashboard-card {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    
    /* Додаємо відступи на початку та в кінці */
    .dashboard-card:first-child {
        margin-left: 10px !important;
    }
    
    .dashboard-card:last-child {
        margin-right: 10px !important;
    }
}

/* Swipe індикатори - рівні відстані */
.swipe-indicators {
    position: fixed !important;
    bottom: calc(65px + env(safe-area-inset-bottom, 0px) + 6px) !important; /* Посередині між карткою і меню */
    left: 50% !important;
    transform: translateX(-50%) translateY(-50%) !important; /* Центрування по обох осях */
    display: flex !important;
    gap: 3px !important;
    z-index: 9999 !important;
    padding: 1px 4px !important;
    background: rgba(0, 0, 0, 0.3) !important;
    border-radius: 6px !important;
    backdrop-filter: blur(4px) !important;
    box-shadow: none !important;
}

.swipe-dot {
    width: 4px !important; /* Мінімальні точки */
    height: 4px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.6) !important;
    transition: all 0.1s ease !important; /* Найшвидша анімація */
    cursor: pointer !important;
}

.swipe-dot.active {
    background: #fff !important;
    transform: scale(1.25) !important; /* Мінімальне збільшення */
}

/* Desktop - скидаємо mobile стилі */
@media (min-width: 769px) {
    body {
        overflow: auto !important;
        position: static !important;
        width: auto !important;
        height: auto !important;
    }
    
    .swipe-indicators {
        display: none !important;
    }
}

/* ==========================================
   🎯 COLOR SCHEME - Material Design 3.0
   ========================================== */
:root {
    /* Material 3.0 Surface Colors */
    --md3-surface: #FEFBFF;
    --md3-surface-variant: #F4F0F7;
    --md3-on-surface: #1C1B1F;
    --md3-on-surface-variant: #49454F;
    
    /* Elevation Shadows */
    --md3-shadow-1: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
    --md3-shadow-2: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
    --md3-shadow-3: 0 4px 8px 3px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.3);
    
    /* Card Gradients - Saturated Material Colors */
    --agro-notes-primary: #6750A4;
    --agro-notes-container: #EADDFF;
    
    --agro-resources-primary: #006C4C;
    --agro-resources-container: #92F8C9;
    
    --agro-requests-primary: #C00019;
    --agro-requests-container: #FFDAD6;
    
    --agro-companies-primary: #006781;
    --agro-companies-container: #B8EAFF;
    
    --agro-analytics-primary: #8B5000;
    --agro-analytics-container: #FFDDB3;
    
    --agro-rrp-primary: #4A5E2F;
    --agro-rrp-container: #CCEBA6;
}

/* ==========================================
   🎴 BASE CARD STYLING
   ========================================== */
.dashboard-card {
    background: var(--md3-surface) !important;
    border: none !important;
    border-radius: 16px !important;
    padding: 20px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: var(--md3-shadow-1) !important;
    position: relative;
    overflow: hidden;
    height: 100%;
}

.dashboard-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--card-gradient);
    transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dashboard-card:hover {
    box-shadow: var(--md3-shadow-3) !important;
    transform: translateY(-2px);
}

.dashboard-card:hover::before {
    height: 6px;
}

/* ==========================================
   🎯 РРП CARD GRID - Донат на всю висоту справа
   ========================================== */
.rrp-card-grid {
    display: grid !important;
    grid-template-columns: 1fr 180px;
    gap: 24px;
    align-items: stretch;
    position: relative; /* Для позиціонування дати в куточку */
}

.rrp-card-left {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

.rrp-card-left .dashboard-card-header {
    margin-bottom: 20px !important;
}

.rrp-card-left .stats-container {
    margin-top: 0 !important;
}

.rrp-card-right {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 0;
}

/* Mobile - донат під контентом */
@media (max-width: 768px) {
    .rrp-card-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .rrp-card-right {
        padding: 16px 0;
    }
}

/* ==========================================
   🎯 HEADER LAYOUT - Material 3.0 Style
   ========================================== */
.dashboard-card-header {
    display: flex !important;
    align-items: center;
    gap: 16px;
    padding: 0 !important;
    margin-bottom: 20px !important;
}

/* Дата останнього аналізу - КНОПКА для примусового оновлення в header-і */
.dashboard-card-header .dashboard-card-date {
    margin-left: auto; /* Відсуває кнопку вправо */
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: var(--card-surface-tint, rgba(0, 0, 0, 0.05));
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 11px;
    color: var(--card-on-surface-variant, #49454F);
    opacity: 0.75;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    font-family: 'Roboto', sans-serif;
    flex-shrink: 0; /* Не стискається при малому екрані */
}

/* Іконка оновлення спочатку прихована */
.dashboard-card-header .dashboard-card-date .refresh-icon {
    font-size: 14px !important;
    opacity: 0;
    transform: scale(0);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* При наведенні - кнопка стає активною */
.dashboard-card-header .dashboard-card-date:hover {
    opacity: 1;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.08), rgba(33, 150, 243, 0.12));
    border-color: rgba(33, 150, 243, 0.25);
}

/* Іконка оновлення з'являється при наведенні */
.dashboard-card-header .dashboard-card-date:hover .refresh-icon {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

/* При кліку - анімація обертання */
.dashboard-card-header .dashboard-card-date:active {
    transform: scale(0.97);
}

.dashboard-card-header .dashboard-card-date:active .refresh-icon {
    animation: spin 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* Стан завантаження */
.dashboard-card-header .dashboard-card-date.updating {
    background: linear-gradient(135deg, rgba(255, 152, 0, 0.08), rgba(255, 152, 0, 0.12));
    border-color: rgba(255, 152, 0, 0.25);
    pointer-events: none;
}

.dashboard-card-header .dashboard-card-date.updating .refresh-icon {
    opacity: 1;
    animation: spin 1s linear infinite;
}

.dashboard-card-header .dashboard-card-date .material-icons {
    font-size: 14px !important;
}

.cache-date-text {
    white-space: nowrap;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 11px;
}

/* Icon Container - Material 3.0 Filled Container */
.dashboard-card-icon {
    width: 56px !important;
    height: 56px !important;
    background: var(--card-container, var(--agro-notes-container)) !important;
    border-radius: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: none !important;
}

.dashboard-card-icon i {
    font-size: 28px !important;
    color: var(--card-primary, var(--agro-notes-primary)) !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dashboard-card:hover .dashboard-card-icon {
    transform: scale(1.08);
}

.dashboard-card:hover .dashboard-card-icon i {
    transform: scale(1.1);
}

/* ==========================================
   📝 TEXT CONTENT - Material Typography
   ========================================== */
.dashboard-card-text {
    flex: 1;
    min-width: 0;
}

.dashboard-card .card-title {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--md3-on-surface) !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.4;
    letter-spacing: 0.1px;
}

.dashboard-card .card-subtitle {
    font-size: 13px !important;
    color: var(--md3-on-surface-variant) !important;
    font-weight: 500 !important;
    line-height: 1.3;
    letter-spacing: 0.25px;
}

/* ==========================================
   📊 STATISTICS GRID - Компактна сітка 2x2
   ========================================== */
.dashboard-card-body {
    padding: 0 !important;
    margin-top: 0 !important;
}

.stats-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 0 !important;
}

/* РРП vs ДЗК картка - 5 показників у 3 колонки (2 рядки: 3+2) */
.dashboard-card[data-card-type="rrp"] .stats-container,
.dashboard-card[data-zone="rrp_dzk"] .stats-container {
    grid-template-columns: repeat(3, 1fr) !important; /* 3 колонки для 5 елементів */
}

/* На tablet - також 3 колонки */
@media (max-width: 1200px) and (min-width: 769px) {
    .dashboard-card[data-card-type="rrp"] .stats-container,
    .dashboard-card[data-zone="rrp_dzk"] .stats-container {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* На mobile - 2 колонки (3 рядки: 2+2+1) */
@media (max-width: 768px) {
    .dashboard-card[data-card-type="rrp"] .stats-container,
    .dashboard-card[data-zone="rrp_dzk"] .stats-container {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Individual Stat Card */
.stat-item {
    background: var(--md3-surface-variant);
    padding: 14px 12px;
    border-radius: 12px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.stat-item:hover {
    background: #EEEBF0;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

/* Кліка бельний показник "Відсутні межі ділянок" */
.stat-item:has(#rrp-missing) {
    cursor: pointer;
    position: relative;
}

.stat-item:has(#rrp-missing)::after {
    content: '👁️';
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 14px;
    opacity: 0;
    transition: opacity 0.2s;
}

.stat-item:has(#rrp-missing):hover::after {
    opacity: 1;
}

.stat-item:has(#rrp-missing):hover {
    background: #FFF4E6;
    border-color: #FF9800;
    box-shadow: 0 4px 8px rgba(255, 152, 0, 0.15);
}

/* Клікабельний показник "Невідповідність орендаря" */
.stat-item:has(#mismatched-info) {
    cursor: pointer;
    position: relative;
}

.stat-item:has(#mismatched-info)::after {
    content: '👁️';
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 14px;
    opacity: 0;
    transition: opacity 0.2s;
}

.stat-item:has(#mismatched-info):hover::after {
    opacity: 1;
}

.stat-item:has(#mismatched-info):hover {
    background: #FFF9E6;
    border-color: #FFC107;
    box-shadow: 0 4px 8px rgba(255, 193, 7, 0.15);
}

.stat-value {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: var(--card-primary, var(--agro-notes-primary)) !important;
    line-height: 1.2;
    margin-bottom: 4px;
    letter-spacing: -0.5px;
}

.stat-label {
    font-size: 12px !important;
    color: var(--md3-on-surface-variant) !important;
    font-weight: 500 !important;
    line-height: 1.3;
    letter-spacing: 0.4px;
    text-transform: none;
}

/* Кольори для негативних показників РРП vs ДЗК */
.stat-item:has(#rrp-missing) .stat-value {
    color: #FF9800 !important; /* Помаранчевий - відсутні межі ділянок */
}

.stat-item:has(#mismatched-info) .stat-value {
    color: #EF5350 !important; /* Червоний - невідповідність орендаря */
}

/* ==========================================
   📊 DONUT CHART FOR RRP vs DZK CARD
   ========================================== */
/* РРП картка з донатом - flex layout */
.dashboard-card-body.with-donut {
    display: flex !important;
    gap: 24px;
    align-items: flex-start;
}

.dashboard-card-body.with-donut .stats-container {
    flex: 1;
    min-width: 0;
}

/* Контейнер донату - на всю висоту справа */
.rrp-donut-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
}

/* SVG донат */
.donut-chart {
    width: 140px;
    height: 140px;
    position: relative;
}

.donut-svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

/* Анімація сегментів */
.donut-segment {
    transition: stroke-dasharray 1s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Центральний текст донату */
.donut-value {
    font-size: 36px;
    font-weight: 700;
    fill: var(--md3-on-surface);
    font-family: 'Roboto', sans-serif;
    letter-spacing: -0.5px;
}

.donut-label {
    font-size: 11px;
    font-weight: 500;
    fill: var(--md3-on-surface-variant);
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Легенда донату */
.donut-legend {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    color: var(--md3-on-surface-variant);
    line-height: 1.2;
}

.legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.legend-dot.matched {
    background: #4CAF50; /* Зелений пастельний - співпадіння */
}

.legend-dot.missing {
    background: #FF9800; /* Помаранчевий пастельний - відсутні */
}

.legend-dot.mismatch {
    background: #EF5350; /* Червоний пастельний - невідповідність */
}

.legend-text {
    font-weight: 500;
    letter-spacing: 0.3px;
}

/* ==========================================
   🎨 CARD COLOR VARIANTS
   ========================================== */
/* Notes Card - Purple */
.dashboard-card[data-card-type="notes"],
.dashboard-card[data-zone="notes"] {
    --card-gradient: linear-gradient(90deg, var(--agro-notes-primary) 0%, #7C5FB8 100%);
    --card-primary: var(--agro-notes-primary);
    --card-container: var(--agro-notes-container);
}

/* Resources Card - Green */
.dashboard-card[data-card-type="resources"],
.dashboard-card[data-zone="resources"] {
    --card-gradient: linear-gradient(90deg, var(--agro-resources-primary) 0%, #00856A 100%);
    --card-primary: var(--agro-resources-primary);
    --card-container: var(--agro-resources-container);
}

/* Requests Card - Red */
.dashboard-card[data-card-type="requests"],
.dashboard-card[data-zone="requests"] {
    --card-gradient: linear-gradient(90deg, var(--agro-requests-primary) 0%, #D72638 100%);
    --card-primary: var(--agro-requests-primary);
    --card-container: var(--agro-requests-container);
}

/* Companies Card - Blue */
.dashboard-card[data-card-type="companies"],
.dashboard-card[data-zone="companies"] {
    --card-gradient: linear-gradient(90deg, var(--agro-companies-primary) 0%, #0081A0 100%);
    --card-primary: var(--agro-companies-primary);
    --card-container: var(--agro-companies-container);
}

/* Analytics Card - Orange */
.dashboard-card[data-card-type="analytics"] {
    --card-gradient: linear-gradient(90deg, var(--agro-analytics-primary) 0%, #A66F00 100%);
    --card-primary: var(--agro-analytics-primary);
    --card-container: var(--agro-analytics-container);
}

/* RRP Card - Olive (підтримка data-card-type та data-zone) */
.dashboard-card[data-card-type="rrp"],
.dashboard-card[data-zone="rrp_dzk"] {
    --card-gradient: linear-gradient(90deg, var(--agro-rrp-primary) 0%, #5E7A3C 100%);
    --card-primary: var(--agro-rrp-primary);
    --card-container: var(--agro-rrp-container);
}

/* ==========================================
   📱 RESPONSIVE DESIGN
   ========================================== */
@media (max-width: 768px) {
    .dashboard-card {
        padding: 16px !important;
    }
    
    .dashboard-card-header {
        gap: 12px;
        margin-bottom: 16px;
    }
    
    .dashboard-card-icon {
        width: 48px !important;
        height: 48px !important;
        border-radius: 14px !important;
    }
    
    .dashboard-card-icon i {
        font-size: 24px !important;
    }
    
    .dashboard-card .card-title {
        font-size: 16px !important;
    }
    
    .stats-container {
        gap: 10px;
    }
    
    .stat-item {
        padding: 12px 10px;
        border-radius: 10px;
    }
    
    .stat-value {
        font-size: 22px !important;
    }
    
    .stat-label {
        font-size: 11px !important;
    }
}

@media (max-width: 576px) {
    .stats-container {
        grid-template-columns: 1fr;
    }
}

/* ==========================================
   ✨ SPECIAL EFFECTS
   ========================================== */
/* Ripple effect on hover */
.stat-item {
    position: relative;
    overflow: hidden;
}

.stat-item::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(103, 80, 164, 0.1);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.stat-item:hover::after {
    width: 200px;
    height: 200px;
}

/* Loading skeleton animation */
@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

.dashboard-card.loading {
    background: linear-gradient(
        90deg,
        #f0f0f0 0%,
        #f8f8f8 50%,
        #f0f0f0 100%
    );
    background-size: 1000px 100%;
    animation: shimmer 2s infinite;
}