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

/* ══ Grid container ══ */

/* Гості — дашборд та індикатор завантаження приховані */
#user-dashboard-grid.dashboard-hidden,
body.guest-mode #user-dashboard-grid,
body.guest-mode #simple-loading {
    display: none !important;
}

/* Desktop (>1100px): 2 колонки */
#user-dashboard-grid.dashboard-visible {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 20px 24px;
    /* Без max-width: ширину дає сторінка (.ls-page), як на решті (#262) */
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    grid-auto-flow: dense;
    grid-auto-rows: auto;
}

/* Tablet (769–1100px): 1 колонка */
@media (max-width: 1100px) and (min-width: 769px) {
    #user-dashboard-grid.dashboard-visible {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 16px;
    }
}

/* Mobile (≤768px): 1 колонка + compact 3-col */
@media (max-width: 768px) {
    #user-dashboard-grid.dashboard-visible {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 12px 12px calc(72px + env(safe-area-inset-bottom, 0px)) 12px;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    .compact-cards-wrapper {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: auto;
    }
}

/* 🔄 ПОВНОЕКРАННЕ ЗАВАНТАЖЕННЯ - По центру всього екрану */
#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;
    /* Синього тексту немає в жодній ролі рівня 2/3, а найближчий зелений
       акцент — інший колір (ΔE 120 до бренду), тобто інша роль, а не той
       самий текст. */
    color: #0d6efd !important; /* token-exempt: немає синьої ролі в системі */
}

#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); }
}

/* Swipe indicators — not used in current layout */
.swipe-indicators {
    display: none !important;
}

/* ==========================================
   🎯 COLOR SCHEME - Material Design 3.0
   ========================================== */
:root {
    /* Material 3.0 Surface Colors — ролі поверхні й тексту з tokens.css,
       щоб картки перефарбовувались разом із темою */
    --md3-surface: var(--color-surface);
    --md3-surface-variant: var(--color-surface-variant);
    --md3-on-surface: var(--color-text);
    --md3-on-surface-variant: var(--color-text-secondary);

    /* 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 — колір кожної картки взято за роллю найближчого
       існуючого токена, а не за схожістю числа з попереднім hex:
       нотатки — бузковий бейдж (--color-sublease*, той самий колір, яким
       позначено суборенду), ресурси — основний бренд-зелений, заявки —
       error/ризик, компанії — синя іконка карти («шари»), аналітика —
       бурштиновий текст (--color-secondary-700 близький за тоном до
       попереднього значення), РРП vs ДЗК — тертиарний («дані/карта»), бо це
       звірка даних, а не своя/чужа ділянка на супутнику. */
    --agro-notes-primary: var(--color-sublease-strong);
    --agro-notes-container: var(--color-sublease-50);

    --agro-resources-primary: var(--color-primary-text);
    --agro-resources-container: var(--color-primary-100);

    --agro-requests-primary: var(--color-error);
    --agro-requests-container: var(--color-error-100);

    --agro-companies-primary: var(--color-icon-layers);
    --agro-companies-container: color-mix(in srgb, var(--color-icon-layers) 18%, var(--color-surface));

    --agro-analytics-primary: var(--color-secondary-700);
    --agro-analytics-container: var(--color-secondary-200);

    --agro-rrp-primary: var(--color-tertiary);
    --agro-rrp-container: var(--color-tertiary-100);
}

/* ==========================================
   🎴 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;
    /* --card-surface-tint ніде не визначається — фактично завжди йде
       запасне значення; тримаємо його на токені, щоб плашка не тонула на
       темній картці */
    background: var(--card-surface-tint, var(--color-surface-variant));
    border: 1px solid transparent;
    border-radius: 10px;
    font-size: 11px;
    color: var(--card-on-surface-variant, var(--color-text-secondary));
    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: var(--color-surface-variant);
    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: var(--color-secondary-50);
    border-color: var(--color-progress-warning);
    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: var(--color-secondary-100);
    border-color: var(--color-progress-caution);
    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: var(--color-progress-warning) !important; /* Помаранчевий - відсутні межі ділянок */
}

.stat-item:has(#mismatched-info) .stat-value {
    color: var(--color-error) !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: var(--color-map-mine); /* Зелений - співпадіння */
}

.legend-dot.missing {
    background: var(--color-progress-warning); /* Помаранчевий - відсутні */
}

.legend-dot.mismatch {
    background: var(--color-error); /* Червоний - невідповідність */
}

.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%, var(--color-sublease) 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%, var(--color-primary-500) 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"] {
    /* другий стоп — світліший відтінок того самого error-токена, а не
       окремий сирий колір */
    --card-gradient: linear-gradient(90deg, var(--agro-requests-primary) 0%, color-mix(in srgb, var(--color-error) 70%, white) 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%, color-mix(in srgb, var(--color-icon-layers) 70%, white) 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%, var(--color-secondary-500) 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%, var(--color-tertiary-500) 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,
        var(--color-surface-variant) 0%,
        var(--color-surface) 50%,
        var(--color-surface-variant) 100%
    );
    background-size: 1000px 100%;
    animation: shimmer 2s infinite;
}