/* ============================================================================
   DASHBOARD STYLES - Beautiful, Professional, Modern
   ============================================================================ */

/* ==========================================
   CSS Variables for Dashboard
   ========================================== */
:root {
    /* Dashboard Colors */
    --dashboard-bg: var(--bg-light, #F8FAFC);
    --card-bg: var(--input-bg, #FFFFFF);
    --card-border: var(--input-border, #E2E8F0);
    --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03);
    --card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);

    /* Color Schemes */
    --color-primary: #6366F1;
    --color-primary-light: #818CF8;
    --color-primary-bg: #EEF2FF;

    --color-success: #10B981;
    --color-success-light: #34D399;
    --color-success-bg: #ECFDF5;

    --color-danger: #EF4444;
    --color-danger-light: #F87171;
    --color-danger-bg: #FEF2F2;

    --color-warning: #F59E0B;
    --color-warning-light: #FBBF24;
    --color-warning-bg: #FFFBEB;

    --color-info: #3B82F6;
    --color-info-light: #60A5FA;
    --color-info-bg: #EFF6FF;

    --color-neutral: #64748B;
    --color-neutral-light: #94A3B8;
    --color-neutral-bg: #F1F5F9;

    /* Text Colors */
    --text-primary: #1E293B;
    --text-secondary: #64748B;
    --text-muted: #94A3B8;

    /* Spacing */
    --dashboard-padding: 1.5rem;
    --card-padding: 1.25rem;
    --card-gap: 1rem;
    --card-radius: 12px;
}

/* Dark Theme */
[data-theme="dark"] {
    --dashboard-bg: #0F172A;
    --card-bg: #1E293B;
    --card-border: #334155;
    --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
    --card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);

    --color-primary-bg: rgba(99, 102, 241, 0.15);
    --color-success-bg: rgba(16, 185, 129, 0.15);
    --color-danger-bg: rgba(239, 68, 68, 0.15);
    --color-warning-bg: rgba(245, 158, 11, 0.15);
    --color-info-bg: rgba(59, 130, 246, 0.15);
    --color-neutral-bg: rgba(100, 116, 139, 0.15);

    --text-primary: #F1F5F9;
    --text-secondary: #94A3B8;
    --text-muted: #64748B;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) {
        --dashboard-bg: #0F172A;
        --card-bg: #1E293B;
        --card-border: #334155;
        --text-primary: #F1F5F9;
        --text-secondary: #94A3B8;
        --text-muted: #64748B;
    }
}

/* ==========================================
   Dashboard Container
   ========================================== */
.dashboard-container {
    padding: var(--dashboard-padding);
    max-width: 1400px;
    margin: 0 auto;
    background-color: var(--dashboard-bg);
    min-height: calc(100vh - 60px);
}

.dashboard-container.loading {
    display: flex;
    align-items: center;
    justify-content: center;
}

.dashboard-loading {
    text-align: center;
    color: var(--text-secondary);
}

.dashboard-loading-spinner {
    width: 48px;
    height: 48px;
    border: 3px solid var(--card-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 1rem;
}

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

/* ==========================================
   Dashboard Header
   ========================================== */
.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.dashboard-header-left {
    flex: 1;
    min-width: 200px;
}

.dashboard-header-left:focus,
.dashboard-header-left:focus-visible,
.dashboard-title:focus,
.dashboard-title:focus-visible,
.dashboard-header:focus,
.dashboard-header:focus-visible {
    outline: none;
    box-shadow: none;
}

.dashboard-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.25rem 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.dashboard-title i {
    color: var(--color-primary);
    font-size: 1.5rem;
}

.dashboard-welcome {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0;
}

.dashboard-header-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Mobile-only elements - hidden by default on desktop */
.dashboard-mobile-actions {
    display: none;
}

.dashboard-filters-panel {
    display: none;
}

/* Base action button styles (will be enhanced in mobile media query) */
.dashboard-action-btn {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--card-bg, #fff);
    border: 1.5px solid var(--card-border, #e2e8f0);
    border-radius: 12px;
    color: var(--text-primary, #1e293b);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.dashboard-period-selector {
    position: relative;
}

.period-select {
    appearance: none;
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    padding: 0.5rem 2rem 0.5rem 1rem;
    font-size: 0.875rem;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
}

.period-select:hover {
    border-color: var(--color-primary);
}

.period-select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* Currency Selector */
.dashboard-currency-selector {
    position: relative;
}

.currency-select {
    appearance: none;
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    padding: 0.5rem 2rem 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    min-width: 80px;
}

.currency-select:hover {
    border-color: var(--color-primary);
}

.currency-select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* Building and Apartment Multi-select Dropdowns */
.dashboard-multiselect {
    position: relative;
}

.multiselect-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 180px;
    width: 180px;
}

.multiselect-trigger:hover {
    border-color: var(--color-primary);
}

.dashboard-multiselect.open .multiselect-trigger {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.multiselect-trigger i {
    font-size: 0.7rem;
    color: var(--text-muted);
    transition: transform 0.2s ease;
}

.dashboard-multiselect.open .multiselect-trigger i {
    transform: rotate(180deg);
}

.multiselect-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.multiselect-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 240px;
    max-width: 350px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    overflow: hidden;
}

.multiselect-actions {
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem;
    border-bottom: 1px solid var(--card-border);
    background: var(--color-neutral-bg);
}

.multiselect-action {
    flex: 1;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 4px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.multiselect-action:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.multiselect-options {
    max-height: 200px;
    overflow-y: auto;
    padding: 0.25rem 0;
}

.multiselect-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    transition: background 0.15s ease;
    font-size: 0.875rem;
    color: var(--text-primary);
}

.multiselect-option:hover {
    background: var(--color-neutral-bg);
}

.multiselect-option input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--color-primary);
    cursor: pointer;
}

.multiselect-option span {
    white-space: normal;
    word-break: break-word;
    line-height: 1.3;
}

.multiselect-footer {
    padding: 0.5rem;
    border-top: 1px solid var(--card-border);
    background: var(--color-neutral-bg);
}

.multiselect-apply {
    width: 100%;
    padding: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    background: var(--color-primary);
    border: none;
    border-radius: 6px;
    color: white;
    cursor: pointer;
    transition: background 0.15s ease;
}

.multiselect-apply:hover {
    background: var(--color-primary-light);
}

/* Selected option highlight for single-select dropdowns */
.multiselect-option.selected {
    background: var(--color-primary-bg);
    color: var(--color-primary);
    font-weight: 500;
}

.multiselect-option.selected span {
    color: var(--color-primary);
}

.dashboard-refresh-btn {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 1px solid var(--card-border);
    background-color: var(--card-bg);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.dashboard-refresh-btn:hover:not(:disabled) {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.dashboard-refresh-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ==========================================
   Dashboard Grid
   ========================================== */
.dashboard-grid {
    display: flex;
    flex-direction: column;
    gap: var(--card-gap);
}

.dashboard-row {
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    gap: var(--card-gap);
    overflow: visible;
    align-items: stretch; /* Make all cards in row same height */
}

/* ==========================================
   Dashboard Card
   ========================================== */
.dashboard-card {
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    padding: var(--card-padding);
    transition: all 0.2s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    overflow: visible; /* Allow tooltips to overflow */
    position: relative;
}

.dashboard-card:hover {
    box-shadow: var(--card-shadow-hover);
    transform: translateY(-2px);
    z-index: 10;
}

/* Hide chart info buttons - tooltips are now shown on card click (mobile) or hover (desktop) */
.chart-info-btn {
    display: none !important;
}

/* Mobile: No tooltips - use inline expand (View Details) instead */
@media (max-width: 991px) {
    /* Disable hover effects on mobile */
    .dashboard-card:hover {
        transform: none;
    }

    /* Hide ALL tooltips on mobile (custom + ApexCharts native) */
    .kpi-tooltip,
    .chart-tooltip,
    .dashboard-card.mobile-tooltip-active .kpi-tooltip,
    .dashboard-card.mobile-tooltip-active .chart-tooltip {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }

    /* Hide ApexCharts native tooltip on mobile */
    .apexcharts-tooltip,
    .apexcharts-xaxistooltip,
    .apexcharts-yaxistooltip {
        display: none !important;
        visibility: hidden !important;
    }
}

.body-level-tooltip .tooltip-title {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.75rem;
}

.body-level-tooltip .tooltip-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0;
}

.body-level-tooltip .tooltip-icon {
    width: 1.25rem;
    text-align: center;
    font-size: 0.85rem;
}

.body-level-tooltip .tooltip-label {
    flex: 1;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.body-level-tooltip .tooltip-value {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-primary);
}

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

.dashboard-card.loading {
    cursor: default;
}

.dashboard-card.error {
    border-color: var(--color-danger);
}

/* Quick Links card - no hover effect on card itself */
.dashboard-card-quicklinks {
    cursor: default;
}

.dashboard-card-quicklinks:hover {
    box-shadow: var(--card-shadow);
    transform: none;
}

/* Quick Links card header - centered like page heading */
.dashboard-card-quicklinks .card-header {
    justify-content: center;
    margin-bottom: 1.5rem;
}

.dashboard-card-quicklinks .card-header-left {
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.dashboard-card-quicklinks .card-icon {
    display: none;
}

.dashboard-card-quicklinks .card-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    position: relative;
    padding-bottom: 0.75rem;
}

.dashboard-card-quicklinks .card-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
    border-radius: 2px;
}

.dashboard-card-quicklinks .card-subtitle {
    display: none;
}

/* Card Color Schemes */
.dashboard-card-primary .card-icon { color: var(--color-primary); background: var(--color-primary-bg); }
.dashboard-card-success .card-icon { color: var(--color-success); background: var(--color-success-bg); }
.dashboard-card-danger .card-icon { color: var(--color-danger); background: var(--color-danger-bg); }
.dashboard-card-warning .card-icon { color: var(--color-warning); background: var(--color-warning-bg); }
.dashboard-card-info .card-icon { color: var(--color-info); background: var(--color-info-bg); }
.dashboard-card-neutral .card-icon { color: var(--color-neutral); background: var(--color-neutral-bg); }

/* Card Header */
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.card-header-left {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.card-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.card-titles {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.card-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.3;
}

.card-subtitle {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.card-loading-indicator {
    display: flex;
    align-items: center;
}

.spinner-small {
    width: 16px;
    height: 16px;
    border: 2px solid var(--card-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

/* Card Content */
.card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: visible; /* Allow chart tooltips to overflow */
}

/* ApexCharts Tooltip Override */
.apexcharts-tooltip {
    border: none !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
    border-radius: 8px !important;
    overflow: visible !important;
    z-index: 9999 !important;
}

.apexcharts-tooltip.apexcharts-theme-dark {
    background: #ffffff !important;
    color: #1e293b !important;
}

/* Ensure tooltip container doesn't clip */
.apexcharts-canvas {
    overflow: visible !important;
}

.apexcharts-inner {
    overflow: visible !important;
}

/* Vertical Data Labels for Bar Charts */
.apexcharts-datalabel-vertical {
    transform: rotate(-90deg);
    transform-origin: center center;
}

.apexcharts-data-labels .apexcharts-datalabel-vertical {
    transform: rotate(-90deg);
    transform-origin: center center;
}

/* ==========================================
   ApexCharts Dark Mode Overrides
   ========================================== */
[data-theme="dark"] .apexcharts-gridline {
    stroke: #334155 !important;
}

[data-theme="dark"] .apexcharts-xaxis-tick,
[data-theme="dark"] .apexcharts-yaxis-tick {
    stroke: #334155 !important;
}

[data-theme="dark"] .apexcharts-xaxis line,
[data-theme="dark"] .apexcharts-yaxis line {
    stroke: #334155 !important;
}

[data-theme="dark"] .apexcharts-text.apexcharts-xaxis-label,
[data-theme="dark"] .apexcharts-text.apexcharts-yaxis-label {
    fill: #94a3b8 !important;
}

[data-theme="dark"] .apexcharts-data-labels text,
[data-theme="dark"] .apexcharts-datalabel,
[data-theme="dark"] .apexcharts-datalabel-label,
[data-theme="dark"] .apexcharts-datalabel-value {
    fill: #f1f5f9 !important;
}

[data-theme="dark"] .apexcharts-legend-text {
    color: #94a3b8 !important;
}

[data-theme="dark"] .apexcharts-tooltip {
    background: #1e293b !important;
    border: 1px solid #334155 !important;
    color: #f1f5f9 !important;
}

[data-theme="dark"] .apexcharts-tooltip-title {
    background: #334155 !important;
    border-bottom-color: #475569 !important;
    color: #f1f5f9 !important;
}

[data-theme="dark"] .apexcharts-tooltip-text {
    color: #f1f5f9 !important;
}

[data-theme="dark"] .apexcharts-tooltip-series-group {
    background: transparent !important;
}

[data-theme="dark"] .apexcharts-tooltip-y-group {
    color: #f1f5f9 !important;
}

[data-theme="dark"] .apexcharts-xaxistooltip,
[data-theme="dark"] .apexcharts-yaxistooltip {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}

[data-theme="dark"] .apexcharts-xaxistooltip-bottom::before,
[data-theme="dark"] .apexcharts-xaxistooltip-bottom::after {
    border-bottom-color: #334155 !important;
}

/* Pie/Donut chart labels in dark mode */
[data-theme="dark"] .apexcharts-pie-label,
[data-theme="dark"] .apexcharts-datalabels-group text {
    fill: #f1f5f9 !important;
}

/* Donut center label */
[data-theme="dark"] .apexcharts-datalabel-label {
    fill: #94a3b8 !important;
}

[data-theme="dark"] .apexcharts-datalabel-value {
    fill: #f1f5f9 !important;
}

/* System preference dark mode (when no explicit theme set) */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) .apexcharts-gridline {
        stroke: #334155 !important;
    }

    :root:not([data-theme="light"]):not([data-theme="dark"]) .apexcharts-text.apexcharts-xaxis-label,
    :root:not([data-theme="light"]):not([data-theme="dark"]) .apexcharts-text.apexcharts-yaxis-label {
        fill: #94a3b8 !important;
    }

    :root:not([data-theme="light"]):not([data-theme="dark"]) .apexcharts-data-labels text,
    :root:not([data-theme="light"]):not([data-theme="dark"]) .apexcharts-datalabel {
        fill: #f1f5f9 !important;
    }

    :root:not([data-theme="light"]):not([data-theme="dark"]) .apexcharts-legend-text {
        color: #94a3b8 !important;
    }

    :root:not([data-theme="light"]):not([data-theme="dark"]) .apexcharts-tooltip {
        background: #1e293b !important;
        border: 1px solid #334155 !important;
        color: #f1f5f9 !important;
    }
}

/* ==========================================
   Dark Mode - Tooltip & Card Element Overrides
   ========================================== */
[data-theme="dark"] .tooltip-row {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .chart-tooltip .tooltip-section {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .chart-tooltip .breakdown-row {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .chart-tooltip .tooltip-icon {
    background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .tooltip-stat-row.stat-profit {
    border-top-color: rgba(255, 255, 255, 0.08);
}

/* Card Error */
.card-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    color: var(--color-danger);
    text-align: center;
}

.card-error i {
    font-size: 1.5rem;
}

.retry-btn {
    margin-top: 0.5rem;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    background: var(--color-danger-bg);
    border: 1px solid var(--color-danger);
    border-radius: 6px;
    color: var(--color-danger);
    cursor: pointer;
}

.retry-btn:hover {
    background: var(--color-danger);
    color: white;
}

/* Card Skeleton */
.card-skeleton {
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.skeleton-kpi .skeleton-value {
    height: 2.5rem;
    width: 60%;
    background: var(--card-border);
    border-radius: 6px;
    margin-bottom: 0.5rem;
}

.skeleton-kpi .skeleton-change {
    height: 1rem;
    width: 40%;
    background: var(--card-border);
    border-radius: 4px;
}

.skeleton-chart {
    height: 150px;
    background: var(--card-border);
    border-radius: 8px;
}

.skeleton-list .skeleton-row {
    height: 1.5rem;
    background: var(--card-border);
    border-radius: 4px;
    margin-bottom: 0.5rem;
}

/* ==========================================
   KPI Card Content
   ========================================== */
.kpi-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    overflow: visible;
    position: relative;
}

.kpi-value-container {
    display: flex;
    align-items: baseline;
    position: relative;
}

.kpi-value-container.has-tooltip {
    cursor: default;
}

.kpi-value-container.has-tooltip:hover {
    z-index: 100;
}

.kpi-info-btn {
    background: linear-gradient(135deg, #E8F4FD 0%, #D4ECFD 100%);
    border: 1px solid #B8DAEF;
    border-radius: 50%;
    padding: 0.5rem;
    margin-left: 0.75rem;
    cursor: pointer;
    color: #0066B3;
    font-size: 1rem;
    opacity: 0.85;
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    box-shadow: 0 2px 4px rgba(0, 102, 179, 0.15);
}

.kpi-info-btn:hover {
    opacity: 1;
    background: linear-gradient(135deg, #0066B3 0%, #004A82 100%);
    color: white;
    border-color: #004A82;
    box-shadow: 0 4px 8px rgba(0, 102, 179, 0.3);
    transform: scale(1.1);
}

/* Dark mode styles for info button */
[data-theme="dark"] .kpi-info-btn {
    background: linear-gradient(135deg, rgba(59, 158, 255, 0.15) 0%, rgba(59, 158, 255, 0.1) 100%);
    border-color: rgba(59, 158, 255, 0.3);
    color: #3B9EFF;
}

[data-theme="dark"] .kpi-info-btn:hover {
    background: linear-gradient(135deg, #3B9EFF 0%, #2563EB 100%);
    color: white;
    border-color: #3B9EFF;
}

.kpi-value-container.tooltip-visible .kpi-info-btn {
    opacity: 1;
    color: var(--color-primary);
}

/* KPI Tooltip - z-index for visibility */
.kpi-value-container.tooltip-visible .kpi-tooltip {
    z-index: 100;
}

.kpi-tooltip {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.08);
    padding: 1rem;
    min-width: 220px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.25s ease;
    margin-top: 0.75rem;
    pointer-events: none;
}

/* Desktop only: Show tooltip on hover */
@media (min-width: 992px) {
    .kpi-value-container.has-tooltip:hover .kpi-tooltip,
    .kpi-value-container.tooltip-visible .kpi-tooltip {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }
}

/* Mobile: Hide hover tooltip completely (using inline expand instead) */
@media (max-width: 991px) {
    .kpi-tooltip {
        display: none !important;
    }
}

/* ==========================================
   KPI Popover (Click-triggered for Revenue card)
   ========================================== */
.kpi-popover {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 1000;
    background: var(--card-bg, white);
    border: 1px solid var(--card-border, #e5e7eb);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.1);
    min-width: 240px;
    max-width: 300px;
    animation: popoverSlideIn 0.2s ease;
}

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

.popover-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--card-border, #e5e7eb);
    background: var(--bg-gray, #f8f9fa);
    border-radius: 12px 12px 0 0;
}

.popover-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.popover-close {
    background: transparent;
    border: none;
    color: var(--text-muted, #6b7280);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.popover-close:hover {
    background: rgba(0, 0, 0, 0.1);
    color: var(--text-dark, #1a1a2e);
}

.popover-body {
    padding: 12px 16px;
}

.popover-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--card-border, #e5e7eb);
}

.popover-row:last-child {
    border-bottom: none;
}

.popover-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}

.popover-label {
    flex: 1;
    font-size: 0.85rem;
    color: var(--text-dark, #1a1a2e);
    font-weight: 500;
}

.popover-value {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark, #1a1a2e);
}

/* Dark mode for popover */
[data-theme="dark"] .kpi-popover {
    background: var(--card-bg, #1f2937);
    border-color: var(--card-border, #374151);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .popover-header {
    background: rgba(0, 0, 0, 0.2);
    border-color: var(--card-border, #374151);
}

[data-theme="dark"] .popover-close:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* ==========================================
   KPI Inline Expand Button & Details (for Expenses card)
   Mobile only - hidden on desktop
   ========================================== */
.kpi-expand-btn {
    display: none; /* Hidden by default (desktop) */
}

/* Inline Details Section - hidden on desktop */
.kpi-inline-details {
    display: none;
}

/* Mobile: Show expand button and details */
@media (max-width: 991px) {
    .kpi-expand-btn {
        background: transparent;
        border: none;
        padding: 0;
        margin-left: 0.4rem;
        cursor: pointer;
        color: var(--text-muted, #6B7280);
        font-size: 0.7rem;
        opacity: 0.7;
        transition: all 0.2s ease;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 18px;
        height: 18px;
        vertical-align: middle;
    }

    .kpi-expand-btn:hover,
    .kpi-expand-btn:active {
        opacity: 1;
        color: var(--primary-blue, #0066B3);
    }

    /* Dark mode for expand button */
    [data-theme="dark"] .kpi-expand-btn {
        color: var(--text-muted, #9CA3AF);
    }

    [data-theme="dark"] .kpi-expand-btn:hover,
    [data-theme="dark"] .kpi-expand-btn:active {
        color: #3B9EFF;
    }

    /* Inline Details Section */
    .kpi-inline-details {
        display: block;
        margin-top: 0.75rem;
        padding-top: 0.75rem;
        border-top: 1px dashed var(--card-border, #e5e7eb);
        animation: slideDown 0.2s ease;
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        max-height: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        max-height: 200px;
        transform: translateY(0);
    }
}

.inline-detail-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    font-size: 0.85rem;
}

.inline-detail-row:not(:last-child) {
    border-bottom: 1px solid var(--card-border, #e5e7eb);
}

.inline-detail-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    background: rgba(99, 102, 241, 0.08);
    border-radius: 6px;
    flex-shrink: 0;
}

.inline-detail-label {
    flex: 1;
    color: var(--text-dark, #1a1a2e);
    font-weight: 500;
}

.inline-detail-percent {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted, #6b7280);
    min-width: 32px;
    text-align: right;
    opacity: 0.8;
}

.inline-detail-value {
    font-weight: 600;
    color: var(--text-dark, #1a1a2e);
    min-width: 60px;
    text-align: right;
}

/* Total row styling */
.inline-detail-total {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    font-size: 0.85rem;
    margin-top: 4px;
    padding-top: 12px;
    border-top: 2px solid var(--card-border, #e5e7eb);
}

.inline-detail-total .inline-detail-icon {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
}

.inline-detail-total .inline-detail-label {
    font-weight: 600;
    color: var(--text-dark, #1a1a2e);
}

.inline-detail-total .inline-detail-value {
    font-weight: 700;
    color: var(--text-dark, #1a1a2e);
}

/* Dark mode for inline details */
[data-theme="dark"] .inline-detail-icon {
    background: rgba(99, 102, 241, 0.15);
}

[data-theme="dark"] .inline-detail-label {
    color: #f1f5f9;
}

[data-theme="dark"] .inline-detail-value {
    color: #f1f5f9;
}

[data-theme="dark"] .inline-detail-total {
    border-top-color: #374151;
}

[data-theme="dark"] .inline-detail-total .inline-detail-icon {
    background: rgba(16, 185, 129, 0.2);
}

[data-theme="dark"] .inline-detail-total .inline-detail-label,
[data-theme="dark"] .inline-detail-total .inline-detail-value {
    color: #f1f5f9;
}

/* ==========================================
   KPI Table Layout (Provisional Profit)
   ========================================== */
.kpi-table {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    font-size: 0.8rem;
    margin-top: 0.75rem;
}

.kpi-table-header {
    display: flex;
    align-items: center;
    padding: 0 0 0.375rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    margin-bottom: 0.125rem;
}

.kpi-table-header span {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted, #6b7280);
}

.kpi-table-row {
    display: flex;
    align-items: center;
    padding: 0.3rem 0;
}

.kpi-table-label {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--text-secondary, #4b5563);
    font-weight: 500;
    min-width: 0;
}

.kpi-table-label .row-icon {
    font-size: 0.7rem;
    width: 1rem;
    text-align: center;
    flex-shrink: 0;
}

.kpi-table-val {
    width: 5.5rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary, #1a1a2e);
    font-weight: 500;
    flex-shrink: 0;
}

.kpi-table-growth {
    width: 5rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.kpi-table-growth.positive {
    color: #10b981;
}

.kpi-table-growth.negative {
    color: #ef4444;
}

.kpi-table-growth .growth-arrow {
    font-size: 0.6rem;
    margin-left: 0.125rem;
}

.prov-badge {
    font-size: 0.6rem;
    font-style: italic;
    color: var(--text-muted, #6b7280);
    opacity: 0.8;
    margin-left: 0.25rem;
}

.kpi-table-total {
    border-top: 1.5px solid rgba(0, 0, 0, 0.12);
    margin-top: 0.125rem;
    padding-top: 0.4rem;
}

.kpi-table-total .kpi-table-label {
    font-weight: 700;
    color: var(--text-dark, #1a1a2e);
}

.kpi-table-total .kpi-table-val {
    font-weight: 700;
}

/* Dark mode for KPI table */
[data-theme="dark"] .kpi-table-header {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .kpi-table-label {
    color: #cbd5e1;
}

[data-theme="dark"] .kpi-table-val {
    color: #f1f5f9;
}

[data-theme="dark"] .kpi-table-total {
    border-top-color: rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .kpi-table-total .kpi-table-label {
    color: #f1f5f9;
}

[data-theme="dark"] .prov-badge {
    color: #94a3b8;
}

/* Compact mode: when table is present, shrink KPI value + change */
.kpi-compact .kpi-value {
    font-size: 1.5rem;
}

.kpi-compact .kpi-prefix, .kpi-compact .kpi-suffix {
    font-size: 1rem;
}

.kpi-compact .kpi-change {
    font-size: 0.775rem;
}

.kpi-compact .kpi-table {
    margin-top: 0.375rem;
}

.kpi-compact .kpi-table-row {
    padding: 0.175rem 0;
}

.kpi-compact .kpi-table-header {
    padding-bottom: 0.25rem;
    margin-bottom: 0;
}

.kpi-compact .kpi-table-total {
    margin-top: 0.05rem;
    padding-top: 0.25rem;
}

/* Mobile: smaller font, tighter spacing */
@media (max-width: 768px) {
    .kpi-table {
        font-size: 0.75rem;
    }

    .kpi-table-val {
        width: 4.5rem;
    }

    .kpi-table-growth {
        width: 4.5rem;
    }

    .kpi-table-header span {
        font-size: 0.6rem;
    }
}

.tooltip-title {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--card-border);
}

.tooltip-row {
    display: flex;
    align-items: center;
    padding: 0.5rem 0;
    font-size: 0.875rem;
    gap: 0.625rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.tooltip-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.tooltip-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.04);
    font-size: 0.75rem;
    flex-shrink: 0;
}

[data-theme="dark"] .tooltip-icon {
    background: rgba(255, 255, 255, 0.08);
}

.tooltip-label {
    color: var(--text-secondary);
    flex: 1;
}

.tooltip-percent {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted, #6b7280);
    min-width: 28px;
    text-align: right;
    opacity: 0.8;
}

.tooltip-value {
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    min-width: 55px;
    text-align: right;
}

.kpi-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.kpi-value.negative {
    color: var(--color-danger);
}

.kpi-prefix, .kpi-suffix {
    font-size: 1.25rem;
    font-weight: 500;
    margin: 0 0.125rem;
}

.kpi-change {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.kpi-change.positive {
    color: var(--color-success);
}

.kpi-change.negative {
    color: var(--color-danger);
}

.kpi-change.neutral {
    color: var(--text-muted);
}

.change-icon {
    display: flex;
    align-items: center;
}

.change-label {
    color: var(--text-muted);
    font-weight: 400;
    margin-left: 0.25rem;
}

.change-previous {
    color: var(--text-muted);
    font-weight: 500;
    font-size: 0.8rem;
    margin-left: 0.25rem;
}

.kpi-secondary {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8rem;
    margin-top: 0.25rem;
}

.secondary-label {
    color: var(--text-muted);
}

.secondary-value {
    font-weight: 600;
    color: var(--text-secondary);
}

.kpi-sparkline {
    height: 32px;
    margin-top: 0.5rem;
    color: var(--sparkline-color, var(--color-success));
}

.sparkline-svg {
    width: 100%;
    height: 100%;
}

/* ==========================================
   List Card Content
   ========================================== */
.list-content {
    display: flex;
    flex-direction: column;
}

.list-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    text-align: center;
    color: var(--text-muted);
}

.list-empty-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    opacity: 0.5;
}

.list-empty-icon.success {
    color: var(--color-success);
    opacity: 1;
}

.list-items {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.list-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--card-border);
    cursor: pointer;
    transition: background 0.15s ease;
    margin: 0 -0.5rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    border-radius: 6px;
}

.list-item:last-child {
    border-bottom: none;
}

.list-item:hover {
    background: var(--color-neutral-bg);
}

/* Alert list items - no background, status shown via badge */
.list-item.alert-danger,
.list-item.alert-warning {
    background: transparent;
}

.list-item.alert-danger:hover,
.list-item.alert-warning:hover {
    background: var(--color-neutral-bg);
}

.list-rank {
    width: 24px;
    text-align: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.list-item-content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
}

.list-cell {
    font-size: 0.875rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.list-cell.primary {
    flex: 1;
    font-weight: 500;
}

.list-cell.muted {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.list-cell.bold {
    font-weight: 600;
}

.cell-suffix {
    color: var(--text-muted);
    font-size: 0.75rem;
}

.badge {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 100px;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.badge-danger {
    background: var(--color-danger-bg);
    color: var(--color-danger);
}

.badge-warning {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

.badge-success {
    background: var(--color-success-bg);
    color: var(--color-success);
}

.badge-info {
    background: var(--color-info-bg);
    color: var(--color-info);
}

.badge-secondary {
    background: var(--color-neutral-bg);
    color: var(--color-neutral);
}

.change-indicator {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8rem;
    font-weight: 500;
}

.change-indicator.positive {
    color: var(--color-success);
}

.change-indicator.negative {
    color: var(--color-danger);
}

.list-more {
    text-align: center;
    padding: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* ==========================================
   Chart Card Content
   ========================================== */
.chart-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 150px;
    position: relative;
    flex: 1; /* Grow to fill available space in card */
}

.chart-empty, .chart-unsupported {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-muted);
    gap: 0.5rem;
}

.chart-empty i, .chart-unsupported i {
    font-size: 2rem;
    opacity: 0.5;
}

/* Chart Info Button (for mobile tooltip access) */
.chart-info-btn {
    position: absolute;
    top: 0;
    right: 0;
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 0.875rem;
    opacity: 0.5;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.chart-info-btn:hover {
    opacity: 1;
    color: var(--color-primary);
}

.chart-content.tooltip-visible .chart-info-btn {
    opacity: 1;
    color: var(--color-primary);
}

/* Chart Tooltip - z-index for visibility */
.chart-content.tooltip-visible .chart-tooltip {
    z-index: 100;
}

/* Chart Tooltip (data summary for mobile) */
.chart-tooltip {
    position: absolute;
    top: 1.5rem;
    right: 0;
    z-index: 1000;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.08);
    padding: 1rem;
    min-width: 220px;
    max-width: 280px;
    max-height: 320px;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.25s ease;
    pointer-events: none;
}

.chart-content.tooltip-visible .chart-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* ==========================================
   Chart Inline Expand (Mobile Only)
   ========================================== */
/* Donut/Pie value legend on card */
.chart-value-legend {
    margin-top: 0.5rem;
    padding: 0 0.25rem;
}

.chart-value-legend-period {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding-bottom: 4px;
    margin-bottom: 2px;
    border-bottom: 1px dashed var(--card-border, #e5e7eb);
}

[data-theme="dark"] .chart-value-legend-period {
    color: #94a3b8;
    border-bottom-color: #334155;
}

.chart-value-legend-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 0.78rem;
}

.chart-value-legend-row:not(:last-child) {
    border-bottom: 1px dashed var(--card-border, #f1f5f9);
}

.chart-value-legend-icon {
    width: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    flex-shrink: 0;
    color: var(--text-muted, #6b7280);
}

.chart-value-legend-name {
    flex: 1;
    font-weight: 500;
    color: var(--text-primary, #1e293b);
}

.chart-value-legend-val {
    font-weight: 700;
    font-size: 0.78rem;
    color: var(--text-dark, #1a1a2e);
    white-space: nowrap;
}

.chart-value-legend-pct {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-muted, #64748b);
    min-width: 28px;
    text-align: right;
    white-space: nowrap;
}

.chart-value-legend-net {
    border-top: 1px solid var(--card-border, #e2e8f0);
    margin-top: 2px;
    padding-top: 6px;
}

.chart-value-legend-net .chart-value-legend-name,
.chart-value-legend-net .chart-value-legend-val {
    font-weight: 700;
}

[data-theme="dark"] .chart-value-legend-net {
    border-top-color: #334155;
}

.chart-value-legend-total {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0 2px;
    font-size: 0.78rem;
    border-top: 1px solid var(--card-border, #e2e8f0);
    margin-top: 2px;
}

.chart-value-legend-total .chart-value-legend-name,
.chart-value-legend-total .chart-value-legend-val {
    font-weight: 700;
}

[data-theme="dark"] .chart-value-legend-total {
    border-top-color: #334155;
}

[data-theme="dark"] .chart-value-legend-name {
    color: #f1f5f9;
}

[data-theme="dark"] .chart-value-legend-val {
    color: #f1f5f9;
}

[data-theme="dark"] .chart-value-legend-pct {
    color: #94a3b8;
}

[data-theme="dark"] .chart-value-legend-row:not(:last-child) {
    border-bottom-color: #1e293b;
}

.chart-expand-container {
    display: none !important; /* Hidden on desktop */
}

.chart-inline-details {
    display: none; /* Hidden on desktop */
}

/* Mobile: Show chart expand button and details */
@media (max-width: 991px) {
    /* Hide hover tooltip on mobile for charts */
    .chart-tooltip {
        display: none !important;
    }

    .chart-expand-container {
        display: flex !important;
        justify-content: center;
        align-items: center;
        margin-top: 0.5rem;
        padding-top: 0.25rem;
        border-top: 1px dashed var(--card-border, #e5e7eb);
    }

    /* Horizontal bar charts (Top Buildings/Apartments) - show View Details on mobile */
    /* because data labels are hidden on mobile */
    .chart-expand-container.horizontal-chart-expand {
        display: flex !important;
        margin: 0;
        padding: 0.25rem 0;
        border-top: none;
    }

    .chart-expand-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: transparent;
        border: none;
        padding: 6px 12px;
        cursor: pointer;
        color: var(--text-muted, #6B7280);
        font-size: 0.75rem;
        font-weight: 500;
        transition: all 0.2s ease;
        border-radius: 4px;
    }

    .chart-expand-btn:hover,
    .chart-expand-btn:active {
        color: var(--primary-blue, #0066B3);
        background: rgba(0, 102, 179, 0.05);
    }

    .chart-expand-btn i {
        font-size: 0.65rem;
    }

    /* Dark mode for expand button */
    [data-theme="dark"] .chart-expand-btn {
        color: var(--text-muted, #9CA3AF);
    }

    [data-theme="dark"] .chart-expand-btn:hover,
    [data-theme="dark"] .chart-expand-btn:active {
        color: #3B9EFF;
        background: rgba(59, 158, 255, 0.1);
    }

    /* Inline Details Section - styled like Cash Flow legend */
    .chart-inline-details {
        display: block;
        margin-top: 0.5rem;
        padding: 0.5rem 0.75rem;
        background: var(--color-neutral-bg, #f8fafc);
        border-radius: 8px;
        animation: slideDown 0.2s ease;
        max-height: 350px;
        overflow-y: auto;
    }

    [data-theme="dark"] .chart-inline-details {
        background: rgba(0, 0, 0, 0.2);
    }

    .chart-detail-card {
        background: transparent;
        border-radius: 0;
        margin-bottom: 0;
        overflow: hidden;
        border-bottom: 1px dashed var(--card-border, #e5e7eb);
        padding-bottom: 0.5rem;
        margin-bottom: 0.5rem;
    }

    .chart-detail-card:last-child {
        margin-bottom: 0;
        border-bottom: none;
        padding-bottom: 0;
    }

    [data-theme="dark"] .chart-detail-card {
        border-bottom-color: #334155;
    }

    .chart-detail-header {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 4px 0;
        background: transparent;
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--text-dark, #1a1a2e);
    }

    .chart-detail-header i {
        font-size: 0.7rem;
        color: var(--text-muted, #6b7280);
    }

    .chart-detail-header i[style] {
        color: inherit;
    }

    .chart-detail-header-value {
        margin-left: auto;
        font-size: 0.8rem;
        font-weight: 700;
        color: var(--text-dark, #1a1a2e);
    }

    [data-theme="dark"] .chart-detail-header-value {
        color: #f1f5f9;
    }

    .chart-detail-body {
        padding: 4px 0;
    }

    .chart-detail-item {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 6px 0;
        border-bottom: 1px dashed var(--card-border, #e5e7eb);
    }

    .chart-detail-item:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .chart-detail-item .detail-icon {
        width: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.75rem;
    }

    .chart-detail-item .detail-label {
        flex: 1;
        font-size: 0.8rem;
        color: var(--text-muted, #6b7280);
    }

    .chart-detail-item .detail-value {
        font-size: 0.85rem;
        font-weight: 600;
    }

    /* Dark mode for chart details */
    [data-theme="dark"] .chart-detail-card {
        background: rgba(0, 0, 0, 0.2);
    }

    [data-theme="dark"] .chart-detail-header {
        background: transparent;
        color: #f1f5f9;
    }

    /* Building Details Section - Cash Flow style for Top Buildings/Apartments */
    .chart-inline-details.building-details {
        padding: 0;
        margin-top: 0.25rem;
        background: transparent;
        max-height: none !important;
        overflow: visible !important;
        height: auto !important;
    }

    .building-section {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        background: var(--color-neutral-bg, #f8fafc);
        border-radius: 8px;
        padding: 0.5rem 0.75rem;
        margin-bottom: 0.25rem;
        height: auto !important;
    }

    .building-section:last-child {
        margin-bottom: 0;
    }

    [data-theme="dark"] .building-section {
        background: rgba(0, 0, 0, 0.2);
    }

    .building-header {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--text-primary, #1e293b);
        padding-bottom: 0.375rem;
        margin-bottom: 0.375rem;
        border-bottom: 1px solid var(--card-border, #e5e7eb);
    }

    .building-header i {
        color: var(--color-info, #3B82F6);
        font-size: 0.8rem;
    }

    [data-theme="dark"] .building-header {
        color: #f1f5f9;
        border-bottom-color: #334155;
    }

    .building-stats {
        display: flex;
        flex-direction: column;
        gap: 0.125rem;
    }

    .stat-row {
        display: flex;
        align-items: center;
        padding: 0.125rem 0;
        font-size: 0.75rem;
    }

    .stat-row .stat-icon {
        width: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.65rem;
    }

    .stat-row .stat-label {
        flex: 1;
        color: var(--text-secondary, #64748B);
        font-weight: 500;
    }

    .stat-row .stat-value {
        font-weight: 600;
        font-variant-numeric: tabular-nums;
    }

    .stat-row.stat-profit {
        margin-top: 0.125rem;
        padding-top: 0.25rem;
        border-top: 1px dashed var(--card-border, #e5e7eb);
    }

    [data-theme="dark"] .stat-row .stat-label {
        color: #94A3B8;
    }

    [data-theme="dark"] .stat-row.stat-profit {
        border-top-color: #334155;
    }
}

.chart-tooltip .tooltip-title {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--card-border);
}

.chart-tooltip .tooltip-section {
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.chart-tooltip .tooltip-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.chart-tooltip .tooltip-category {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.375rem;
}

.chart-tooltip .tooltip-row {
    display: flex;
    align-items: center;
    padding: 0.25rem 0;
    font-size: 0.8rem;
    gap: 0.5rem;
}

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

.chart-tooltip .tooltip-label {
    color: var(--text-secondary);
    flex: 1;
}

.chart-tooltip .tooltip-value {
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

/* Hover trigger for donut/pie charts */
.chart-content.chart-hoverable:hover .chart-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.chart-content.chart-hoverable:hover .chart-info-btn {
    opacity: 1;
    color: var(--color-primary);
}

/* Breakdown row style (like KPI breakdown) */
.chart-tooltip .breakdown-row {
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.chart-tooltip .breakdown-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.chart-tooltip .tooltip-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 8px;
    flex-shrink: 0;
    font-size: 0.875rem;
}

.chart-tooltip .breakdown-row .tooltip-label {
    font-weight: 500;
    color: var(--text-primary);
}

/* Beautiful Building Cards for Mobile Tooltip (Top Buildings) */
.tooltip-building-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    padding: 0.875rem;
    margin-bottom: 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.tooltip-building-card:last-child {
    margin-bottom: 0;
}

.tooltip-building-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    padding-bottom: 0.625rem;
    margin-bottom: 0.625rem;
    border-bottom: 2px solid var(--card-border);
}

.tooltip-building-header i {
    color: var(--color-info);
    font-size: 0.875rem;
}

.tooltip-building-stats {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.tooltip-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 0;
    font-size: 0.8rem;
}

.tooltip-stat-row .stat-label {
    display: flex;
    align-items: center;
    color: var(--text-secondary);
}

.tooltip-stat-row .stat-value {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.tooltip-stat-row .stat-positive {
    color: var(--color-success);
}

.tooltip-stat-row .stat-negative {
    color: var(--color-danger);
}

.tooltip-stat-row .stat-info {
    color: var(--color-primary);
}

.tooltip-stat-row.stat-profit {
    padding-top: 0.375rem;
    margin-top: 0.25rem;
    border-top: 1px dashed var(--card-border);
}

.tooltip-stat-row.stat-occupancy {
    padding-top: 0.25rem;
    border-top: 1px solid rgba(0, 0, 0, 0.04);
}

/* Adjust tooltip max-height for building cards */
.chart-content.horizontal-bar-chart .chart-tooltip {
    max-height: 450px;
    min-width: 260px;
}

/* Mobile-only elements (hidden on desktop) */
.chart-info-btn.mobile-only {
    display: none;
}

/* Horizontal bar chart tooltip - hidden on desktop (even on hover) */
.chart-content.horizontal-bar-chart .chart-tooltip,
.chart-content.horizontal-bar-chart:hover .chart-tooltip {
    display: none !important;
    visibility: hidden !important;
}

/* Horizontal bar chart - show data labels on desktop */
.chart-content.horizontal-bar-chart .apexcharts-datalabel {
    display: block;
}

/* Horizontal bar chart - fill available vertical space */
.chart-content.horizontal-bar-chart {
    justify-content: center;
}

.chart-content.horizontal-bar-chart > div {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Mobile: hide data labels for horizontal bar charts */
@media (max-width: 768px) {

    .chart-content.horizontal-bar-chart .apexcharts-datalabel {
        display: none !important;
    }

    /* Hide ApexCharts native tooltip on mobile for horizontal bar charts */
    .chart-content.horizontal-bar-chart .apexcharts-tooltip {
        display: none !important;
        visibility: hidden !important;
    }
}

/* ==========================================
   Donut Chart Side-by-Side Layout
   ========================================== */
.donut-layout {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    width: 100%;
    height: 100%;
}

.donut-figures {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 140px;
    max-width: 160px;
}

.donut-figure-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
}

.donut-figure-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.donut-figure-label {
    flex: 1;
    font-size: 0.8rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.donut-figure-value {
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
}

.donut-figure-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.5rem;
    margin-top: 0.25rem;
    border-top: 1px solid var(--card-border);
}

.donut-figure-total .donut-figure-label {
    font-weight: 600;
    color: var(--text-primary);
}

.donut-figure-total .donut-figure-value {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
}

.donut-chart {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Mobile: Stack vertically - chart on top, figures below line by line */
@media (max-width: 991px) {
    .donut-layout {
        flex-direction: column-reverse;
        gap: 0.5rem;
    }

    .donut-figures {
        width: 100%;
        max-width: none;
        flex-direction: column;
        gap: 0;
        padding: 0.5rem 0.75rem;
        background: var(--color-neutral-bg, #f8fafc);
        border-radius: 8px;
    }

    .donut-figure-row {
        width: 100%;
        padding: 0.4rem 0;
        border-bottom: 1px dashed var(--card-border, #e5e7eb);
    }

    .donut-figure-row:last-of-type {
        border-bottom: none;
    }

    .donut-figure-total {
        width: 100%;
        justify-content: space-between;
        gap: 0.5rem;
        border-top: 1px solid var(--card-border, #e2e8f0);
        padding-top: 0.5rem;
        margin-top: 0.25rem;
    }

    .donut-chart {
        width: 100%;
    }

    /* Dark mode for mobile donut figures */
    [data-theme="dark"] .donut-figures {
        background: rgba(0, 0, 0, 0.2);
    }

    [data-theme="dark"] .donut-figure-row {
        border-bottom-color: #334155;
    }

    [data-theme="dark"] .donut-figure-total {
        border-top-color: #334155;
    }
}

/* Simple Bar Chart */
.simple-bar-chart {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.bar-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.bar-label {
    width: 100px;
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-align: right;
    flex-shrink: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bar-track {
    flex: 1;
    height: 20px;
    background: var(--color-neutral-bg);
    border-radius: 4px;
    overflow: hidden;
}

.bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.bar-value {
    width: 60px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
    text-align: right;
    flex-shrink: 0;
}

/* Simple Line Chart */
.simple-line-chart {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.line-chart-svg {
    flex: 1;
    min-height: 120px;
}

.chart-legend {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.legend-color {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

/* Simple Donut Chart */
.simple-donut-chart {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.donut-svg {
    width: 120px;
    height: 120px;
    flex-shrink: 0;
}

.donut-legend {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.legend-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
}

.legend-row .legend-color {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
}

.legend-row .legend-label {
    flex: 1;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.legend-row .legend-value {
    font-weight: 600;
    color: var(--text-primary);
}

/* ==========================================
   Stat Card Content
   ========================================== */
.stat-content {
    display: flex;
    flex-direction: column;
}

.stat-metrics {
    display: flex;
    gap: 1.5rem;
}

.stat-horizontal .stat-metrics {
    flex-direction: row;
    justify-content: space-around;
}

.stat-vertical .stat-metrics {
    flex-direction: column;
}

.stat-metric {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.stat-metric.highlight {
    padding: 0.75rem;
    background: var(--color-primary-bg);
    border-radius: 8px;
}

.stat-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-neutral-bg);
    border-radius: 8px;
    color: var(--text-secondary);
}

.stat-metric-content {
    display: flex;
    flex-direction: column;
}

.stat-metric-value {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
}

.stat-metric-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.stat-positive-label {
    font-size: 0.7rem;
    color: var(--color-success);
    font-weight: 500;
}

/* ==========================================
   Heatmap Card Content
   ========================================== */
.heatmap-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.heatmap-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    color: var(--text-muted);
    gap: 0.5rem;
}

.heatmap-empty i {
    font-size: 2rem;
    opacity: 0.5;
}

.calendar-grid {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.calendar-header {
    display: flex;
    gap: 0.25rem;
    padding-left: 0;
}

.day-label {
    width: calc((100% - 1.5rem) / 7);
    text-align: center;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
}

.calendar-body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.calendar-week {
    display: flex;
    gap: 0.25rem;
}

.calendar-day {
    width: calc((100% - 1.5rem) / 7);
    aspect-ratio: 1;
    min-height: 28px;
    max-height: 40px;
    border-radius: 4px;
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    color: #1e293b; /* Always dark text for contrast on colored backgrounds */
    transition: transform 0.15s ease;
    cursor: pointer;
}

.calendar-day:hover:not(.empty) {
    transform: scale(1.1);
    z-index: 1;
}

.calendar-day.empty {
    background: transparent;
    cursor: default;
}

.day-number {
    font-weight: 600;
    font-size: 0.75rem;
    line-height: 1;
}

.day-count {
    position: absolute;
    bottom: 1px;
    right: 3px;
    font-size: 0.65rem;
    font-weight: 600;
    font-style: italic;
    line-height: 1;
    color: #6b7280 !important;
}

/* Heatmap Tooltip Overlay - full screen backdrop on mobile when a day is selected */
.heatmap-tooltip-overlay {
    display: none; /* Hidden on desktop */
}

@media (max-width: 991px) {
    .heatmap-tooltip-overlay {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.08);
        backdrop-filter: blur(1px);
        z-index: 99990; /* Below day cell */
        animation: fadeInOverlay 0.2s ease;
        cursor: pointer;
        pointer-events: auto;
    }

    /* When a day is selected, give it high z-index to appear above overlay */
    .heatmap-content.has-selected-day .calendar-day.day-selected {
        position: relative;
        z-index: 99995;
    }

    .heatmap-content.has-selected-day .calendar-day.day-selected .day-tooltip {
        z-index: 99999;
        pointer-events: auto;
    }
}

/* Day tooltip */
.day-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 12px;
    min-width: 210px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 100;
    pointer-events: none;
}

.day-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #fff;
}

.day-tooltip::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 7px solid transparent;
    border-top-color: #e2e8f0;
}

.calendar-day:hover .day-tooltip,
.calendar-day.day-selected .day-tooltip {
    display: block;
}

.day-tooltip-header {
    font-size: 0.8rem;
    font-weight: 700;
    color: #1e293b;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid #e2e8f0;
    text-align: center;
}

.day-tooltip-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: 0.75rem;
}

.day-tooltip-label {
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 6px;
}

.day-tooltip-label i {
    font-size: 0.7rem;
    width: 14px;
    color: #94a3b8;
}

.day-tooltip-value {
    font-weight: 600;
    color: #1e293b;
}

.day-tooltip-value.occupied-value {
    font-weight: 600;
    color: #1e293b;
}

.heatmap-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.7rem;
    color: var(--text-muted);
}

.legend-scale {
    display: flex;
    gap: 2px;
}

.heatmap-legend .legend-color {
    width: 16px;
    height: 12px;
    border-radius: 2px;
}

.heatmap-summary {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    padding-top: 0.5rem;
    border-top: 1px solid var(--card-border);
}

.summary-item strong {
    color: var(--text-primary);
}

/* Heatmap Dark Mode Overrides */
[data-theme="dark"] .day-tooltip {
    background: #1e293b;
    border-color: #334155;
}

[data-theme="dark"] .day-tooltip::after {
    border-top-color: #1e293b;
}

[data-theme="dark"] .day-tooltip::before {
    border-top-color: #334155;
}

[data-theme="dark"] .day-tooltip-header {
    color: #f1f5f9;
    border-bottom-color: #334155;
}

[data-theme="dark"] .day-tooltip-label {
    color: #94a3b8;
}

[data-theme="dark"] .day-tooltip-label i {
    color: #64748b;
}

[data-theme="dark"] .day-tooltip-value {
    color: #f1f5f9;
}

[data-theme="dark"] .day-tooltip-value.occupied-value {
    color: #f1f5f9;
}

[data-theme="dark"] .day-count {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Heatmap View Detail Button */
.heatmap-expand-btn {
    display: none; /* Hidden on desktop */
}

/* Heatmap Inline Details */
.heatmap-inline-details {
    display: none; /* Hidden on desktop */
}

/* Mobile: Hide tooltip, show View Details button and inline list */
@media (max-width: 991px) {
    /* Hide tooltip on mobile - replaced by View Details */
    .calendar-day:hover .day-tooltip,
    .calendar-day.day-selected .day-tooltip {
        display: none !important;
    }

    .heatmap-tooltip-overlay {
        display: none !important;
    }

    /* Disable day selection visual on mobile */
    .heatmap-content.has-selected-day .calendar-day.day-selected {
        z-index: auto;
    }

    .calendar-day:hover:not(.empty) {
        transform: none;
    }

    /* View Detail Button */
    .heatmap-expand-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;
        width: 100%;
        background: transparent;
        border: 1px dashed var(--card-border, #e5e7eb);
        border-radius: 6px;
        padding: 0.5rem;
        cursor: pointer;
        color: var(--text-muted, #6B7280);
        font-size: 0.75rem;
        font-weight: 500;
        transition: all 0.2s ease;
    }

    .heatmap-expand-btn:hover,
    .heatmap-expand-btn:active {
        color: var(--primary-blue, #0066B3);
        border-color: var(--primary-blue, #0066B3);
        background: rgba(0, 102, 179, 0.04);
    }

    .heatmap-expand-btn i {
        font-size: 0.65rem;
    }

    [data-theme="dark"] .heatmap-expand-btn {
        color: var(--text-muted, #9CA3AF);
        border-color: var(--card-border, #374151);
    }

    [data-theme="dark"] .heatmap-expand-btn:hover,
    [data-theme="dark"] .heatmap-expand-btn:active {
        color: #3B9EFF;
        border-color: #3B9EFF;
        background: rgba(59, 158, 255, 0.08);
    }

    /* Inline Details Section */
    .heatmap-inline-details {
        display: block !important;
        margin-top: 0.25rem;
        padding-top: 0.5rem;
        border-top: 1px dashed var(--card-border, #e5e7eb);
        max-height: 300px;
        overflow-y: auto;
        animation: slideDown 0.2s ease;
    }
}

/* Detail Row Layout: Date | AirBnB icon+count | Direct icon+count | Fraction | Badge */
.heatmap-detail-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    align-items: center;
    padding: 0.45rem 0.25rem;
    font-size: 0.78rem;
    border-radius: 6px;
    transition: background-color 0.15s ease;
}

.heatmap-detail-row:not(:last-child) {
    border-bottom: 1px solid var(--card-border, #f1f5f9);
}

/* Today highlight */
.heatmap-detail-today {
    background: rgba(99, 102, 241, 0.06);
    border-left: 2px solid #6366f1;
    padding-left: 0.25rem;
}

/* Summary row at bottom */
.heatmap-detail-summary {
    border-top: 2px solid var(--card-border, #e2e8f0);
    border-bottom: none !important;
    margin-top: 0.25rem;
    padding-top: 0.6rem;
    background: rgba(0, 0, 0, 0.02);
    border-radius: 6px;
}

.heatmap-detail-summary .heatmap-detail-date {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.03em;
}

.heatmap-detail-date {
    min-width: 52px;
    font-weight: 500;
    font-size: 0.72rem;
    color: var(--text-primary, #1e293b);
    flex-shrink: 0;
}

/* Booking source badges */
.heatmap-detail-source {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    min-width: 36px;
    flex-shrink: 0;
}

.heatmap-detail-source i {
    font-size: 0.65rem;
}

/* AirBnB source - red tint */
.heatmap-source-airbnb {
    color: #e0435b;
    background: rgba(255, 90, 95, 0.08);
}

.heatmap-source-airbnb i {
    color: #FF5A5F;
}

/* Direct source - blue tint */
.heatmap-source-direct {
    color: #2563eb;
    background: rgba(37, 99, 235, 0.08);
}

.heatmap-source-direct i {
    color: #3b82f6;
}

.heatmap-source-amt {
    color: #059669;
    background: rgba(16, 185, 129, 0.08);
    font-size: 0.68rem;
}

.heatmap-source-amt i {
    color: #10b981;
}

.heatmap-source-revadj {
    color: #7c3aed;
    background: rgba(139, 92, 246, 0.08);
    font-size: 0.68rem;
}

.heatmap-source-revadj i {
    color: #8b5cf6;
}

/* Fraction (e.g., 22/24) */
.heatmap-detail-fraction {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-muted, #64748b);
    margin-left: 4px;
    white-space: nowrap;
    text-align: center;
}

/* Percentage badge */
.heatmap-detail-badge {
    font-weight: 700;
    font-size: 0.65rem;
    white-space: nowrap;
    color: #fff;
    padding: 0.15rem 0.4rem;
    border-radius: 10px;
    text-align: center;
    justify-self: center;
}

/* Dark mode for heatmap inline details */
[data-theme="dark"] .heatmap-inline-details {
    border-top-color: var(--card-border, #374151);
}

[data-theme="dark"] .heatmap-detail-row:not(:last-child) {
    border-bottom-color: #1e293b;
}

[data-theme="dark"] .heatmap-detail-today {
    background: rgba(99, 102, 241, 0.12);
    border-left-color: #818cf8;
}

[data-theme="dark"] .heatmap-detail-summary {
    border-top-color: #374151;
    background: rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] .heatmap-detail-date {
    color: #f1f5f9;
}

[data-theme="dark"] .heatmap-source-airbnb {
    color: #ff7b80;
    background: rgba(255, 90, 95, 0.15);
}

[data-theme="dark"] .heatmap-source-direct {
    color: #60a5fa;
    background: rgba(37, 99, 235, 0.15);
}

[data-theme="dark"] .heatmap-source-amt {
    color: #34d399;
    background: rgba(16, 185, 129, 0.15);
}

[data-theme="dark"] .heatmap-source-revadj {
    color: #a78bfa;
    background: rgba(139, 92, 246, 0.15);
}

[data-theme="dark"] .heatmap-detail-fraction {
    color: #94a3b8;
}

/* ==========================================
   Quick Links Card Content
   ========================================== */
.quicklinks-content {
    padding: 0.5rem 0;
}

.quicklinks-grid {
    display: grid;
    grid-template-columns: repeat(var(--quicklinks-columns, 6), 1fr);
    gap: 1rem;
}

.quicklinks-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 0.5rem;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    min-height: 80px;
}

.quicklinks-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.quicklinks-tile-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    transition: all 0.2s ease;
}

.quicklinks-tile:hover .quicklinks-tile-icon {
    transform: scale(1.1);
}

.quicklinks-tile-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Quicklinks Color Schemes */
.quicklinks-tile-primary .quicklinks-tile-icon {
    background: var(--color-primary-bg);
    color: var(--color-primary);
}

.quicklinks-tile-primary:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-bg);
}

.quicklinks-tile-secondary .quicklinks-tile-icon {
    background: var(--color-neutral-bg);
    color: var(--color-neutral);
}

.quicklinks-tile-secondary:hover {
    border-color: var(--color-neutral);
    background: var(--color-neutral-bg);
}

.quicklinks-tile-success .quicklinks-tile-icon {
    background: var(--color-success-bg);
    color: var(--color-success);
}

.quicklinks-tile-success:hover {
    border-color: var(--color-success);
    background: var(--color-success-bg);
}

.quicklinks-tile-info .quicklinks-tile-icon {
    background: var(--color-info-bg);
    color: var(--color-info);
}

.quicklinks-tile-info:hover {
    border-color: var(--color-info);
    background: var(--color-info-bg);
}

.quicklinks-tile-warning .quicklinks-tile-icon {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

.quicklinks-tile-warning:hover {
    border-color: var(--color-warning);
    background: var(--color-warning-bg);
}

.quicklinks-tile-danger .quicklinks-tile-icon {
    background: var(--color-danger-bg);
    color: var(--color-danger);
}

.quicklinks-tile-danger:hover {
    border-color: var(--color-danger);
    background: var(--color-danger-bg);
}

/* Quicklinks Skeleton */
.skeleton-quicklinks {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
}

.skeleton-quicklinks .skeleton-tile {
    height: 80px;
    background: var(--card-border);
    border-radius: 10px;
}

/* Quicklinks Responsive */
@media (max-width: 1200px) {
    .quicklinks-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .skeleton-quicklinks {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {
    .quicklinks-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .skeleton-quicklinks {
        grid-template-columns: repeat(3, 1fr);
    }

    .quicklinks-tile {
        min-height: 70px;
        padding: 0.75rem 0.25rem;
    }

    .quicklinks-tile-icon {
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }

    .quicklinks-tile-label {
        font-size: 0.65rem;
    }
}

@media (max-width: 480px) {
    .quicklinks-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .skeleton-quicklinks {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================
   Dashboard Footer
   ========================================== */
.dashboard-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--card-border);
}

.dashboard-updated {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* ==========================================
   Responsive Design
   ========================================== */
@media (max-width: 1200px) {
    .dashboard-row {
        grid-template-columns: repeat(12, 1fr);
    }

    .dashboard-card[style*="span 6"] {
        grid-column: span 6 !important;
    }

    .dashboard-card[style*="span 8"] {
        grid-column: span 6 !important;
    }

    .dashboard-card[style*="span 12"] {
        grid-column: span 12 !important;
    }

    .dashboard-card[style*="span 24"] {
        grid-column: span 12 !important;
    }
}

@media (max-width: 768px) {
    .dashboard-container {
        padding: 1rem;
    }

    .dashboard-header {
        flex-direction: column;
        gap: 1rem;
    }

    .dashboard-header-right {
        width: 100%;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 0.5rem;
    }

    /* Filter selectors on mobile - 2 per row */
    .dashboard-currency-selector,
    .dashboard-period-selector,
    .dashboard-multiselect {
        flex: 1 1 calc(50% - 1.5rem);
        min-width: calc(50% - 1.5rem);
    }

    .currency-select,
    .period-select {
        width: 100%;
    }

    .multiselect-trigger {
        width: 100%;
        max-width: none;
        min-width: unset;
    }

    .multiselect-dropdown {
        left: 0;
        right: auto;
        min-width: 200px;
        max-width: calc(100vw - 2rem);
    }

    .dashboard-refresh-btn {
        flex-shrink: 0;
        margin-left: auto;
    }

    .dashboard-row {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .dashboard-card {
        grid-column: span 1 !important;
    }

    .kpi-value {
        font-size: 1.75rem;
    }

    .simple-donut-chart {
        flex-direction: column;
        align-items: center;
    }

    .stat-horizontal .stat-metrics {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    /* Very small screens - filters in panel, not header */
    .dashboard-currency-selector,
    .dashboard-period-selector,
    .dashboard-multiselect {
        flex: 1 1 100%;
        min-width: 100%;
    }

    .multiselect-dropdown {
        left: 0;
        right: 0;
        max-width: none;
    }
}

/* ==========================================
   Mobile Dashboard Optimization
   ========================================== */
@media (max-width: 767.98px) {
    /* Hide title and welcome message on mobile */
    .dashboard-header-left {
        display: none !important;
    }

    /* Adjust header for mobile - full width compact layout */
    .dashboard-header {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 0.7rem !important;
        margin-top: 0 !important;
        padding: 0 !important;
    }

    /* Mobile header-right - takes full width */
    .dashboard-header-right {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Mobile Action Buttons Container - CSS Grid for exact 50/50 split */
    .dashboard-mobile-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0.5rem !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    /* Mobile Action Button - fills grid cell completely */
    .dashboard-action-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.5rem !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 0.875rem 0.5rem !important;
        background: linear-gradient(145deg, var(--card-bg) 0%, var(--dashboard-bg) 100%) !important;
        border: 1.5px solid var(--card-border) !important;
        border-radius: 10px !important;
        color: var(--text-primary) !important;
        font-size: 0.9rem !important;
        font-weight: 600 !important;
        letter-spacing: 0.01em !important;
        cursor: pointer !important;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06) !important;
        position: relative !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    /* Subtle shimmer effect on buttons */
    .dashboard-action-btn::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
        transition: left 0.5s ease;
    }

    .dashboard-action-btn:hover::before {
        left: 100%;
    }

    .dashboard-action-btn:hover:not(:disabled) {
        border-color: var(--color-primary);
        background: linear-gradient(145deg, var(--color-primary-bg) 0%, rgba(99, 102, 241, 0.08) 100%);
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(99, 102, 241, 0.15), 0 4px 8px rgba(0, 0, 0, 0.08);
    }

    .dashboard-action-btn:active:not(:disabled) {
        transform: translateY(0);
        box-shadow: 0 2px 8px rgba(99, 102, 241, 0.1);
    }

    .dashboard-action-btn.active {
        border-color: var(--color-primary);
        background: linear-gradient(145deg, var(--color-primary-bg) 0%, rgba(99, 102, 241, 0.12) 100%);
        color: var(--color-primary);
        box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }

    .dashboard-action-btn i {
        font-size: 1rem;
        color: var(--text-secondary);
        transition: all 0.25s ease;
    }

    .dashboard-action-btn:hover:not(:disabled) i,
    .dashboard-action-btn.active i {
        color: var(--color-primary);
        transform: scale(1.1);
    }

    .dashboard-action-btn span {
        white-space: nowrap;
    }

    /* Filters button specific styling - indigo accent */
    .dashboard-action-btn.filters {
        background: linear-gradient(145deg, var(--card-bg) 0%, rgba(99, 102, 241, 0.04) 100%);
        border-color: rgba(99, 102, 241, 0.2);
    }

    .dashboard-action-btn.filters i {
        color: var(--color-primary);
    }

    .dashboard-action-btn.filters:hover:not(:disabled) {
        background: linear-gradient(145deg, var(--color-primary-bg) 0%, rgba(99, 102, 241, 0.12) 100%);
        border-color: var(--color-primary);
        color: var(--color-primary);
    }

    .dashboard-action-btn.filters:hover:not(:disabled) i {
        color: var(--color-primary);
    }

    .dashboard-action-btn.filters.active {
        background: linear-gradient(145deg, rgba(99, 102, 241, 0.12) 0%, rgba(99, 102, 241, 0.08) 100%);
        border-color: var(--color-primary);
        color: var(--color-primary);
        box-shadow: 0 4px 16px rgba(99, 102, 241, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }

    .dashboard-action-btn.filters.active i {
        color: var(--color-primary);
    }

    /* Refresh button specific styling - success/green accent */
    .dashboard-action-btn.refresh {
        background: linear-gradient(145deg, var(--card-bg) 0%, rgba(16, 185, 129, 0.04) 100%);
        border-color: rgba(16, 185, 129, 0.2);
    }

    .dashboard-action-btn.refresh i {
        color: var(--color-success);
    }

    .dashboard-action-btn.refresh:hover:not(:disabled) {
        background: linear-gradient(145deg, var(--color-success-bg) 0%, rgba(16, 185, 129, 0.12) 100%);
        border-color: var(--color-success);
        color: var(--color-success);
    }

    .dashboard-action-btn.refresh:hover:not(:disabled) i {
        color: var(--color-success);
    }

    .dashboard-action-btn.refresh.refreshing {
        background: linear-gradient(145deg, var(--color-success-bg) 0%, rgba(16, 185, 129, 0.15) 100%);
        border-color: var(--color-success);
        color: var(--color-success);
    }

    .dashboard-action-btn.refresh.refreshing i {
        color: var(--color-success);
    }

    .dashboard-action-btn.refresh:disabled {
        opacity: 0.7;
        cursor: not-allowed;
    }

    /* Filter badge - pill style with glow */
    .dashboard-filter-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 20px;
        height: 20px;
        padding: 0 6px;
        background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
        color: white;
        font-size: 0.7rem;
        font-weight: 700;
        border-radius: 10px;
        margin-left: 0.375rem;
        box-shadow: 0 2px 6px rgba(99, 102, 241, 0.4);
        animation: badge-pulse 2s ease-in-out infinite;
    }

    @keyframes badge-pulse {
        0%, 100% { box-shadow: 0 2px 6px rgba(99, 102, 241, 0.4); }
        50% { box-shadow: 0 2px 10px rgba(99, 102, 241, 0.6); }
    }

    .dashboard-filter-badge:empty {
        display: none;
    }

    /* Hide old refresh button on mobile */
    .dashboard-header-right > .dashboard-refresh-btn {
        display: none !important;
    }

    /* Filter panel - collapsed by default with smooth animation */
    .dashboard-filters-panel {
        display: none;
        grid-template-rows: 0fr;
        opacity: 0;
        flex-direction: column;
        gap: 0.75rem;
        height: 0;
        overflow: hidden;
        margin: 0;
        padding: 0;
        width: 100%;
        padding: 0;
        background: linear-gradient(180deg, var(--card-bg) 0%, var(--dashboard-bg) 100%);
        border: 1.5px solid var(--card-border);
        border-radius: 12px;
        margin-top: 0;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        overflow: hidden;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    }

    .dashboard-filters-panel.expanded {
        display: flex;
        flex-wrap: wrap;
        grid-template-rows: 1fr;
        opacity: 1;
        height: auto;
        overflow: visible !important;
        padding: 1rem;
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
    }

    .dashboard-filters-panel.expanded > * {
        overflow: visible !important;
    }

    .dashboard-filters-panel.expanded .dashboard-multiselect {
        position: relative;
        overflow: visible !important;
    }

    .dashboard-filters-panel.expanded .multiselect-dropdown {
        position: absolute;
        z-index: 100;
        overflow: visible !important;
    }

    .dashboard-filters-panel .dashboard-multiselect {
        flex: 1 1 100%;
        min-width: 100%;
    }

    .dashboard-filters-panel .multiselect-trigger {
        width: 100%;
        max-width: none;
        min-width: unset;
        border-radius: 10px;
        padding: 0.75rem 1rem;
    }

    /* Hide individual filters on mobile (show only in panel) */
    .dashboard-header-right > .dashboard-multiselect,
    .dashboard-header-right > .dashboard-period-selector,
    .dashboard-header-right > .dashboard-currency-selector {
        display: none !important;
    }

    /* Refresh button - fixed size, no shrink */
    .dashboard-header-right > .dashboard-refresh-btn {
        flex: 0 0 38px !important;
        height: 38px !important;
        width: 38px !important;
    }

    /* Reduce container padding on mobile - tight layout, minimal spacing */
    .dashboard-container {
        padding: 0.75rem !important;
        padding-top: 0 !important;
        margin-top: -2rem !important;
        position: relative !important;
        z-index: 1 !important; /* Keep below navbar (1001) and menu overlay (999) */
    }

    /* Reduce card gap on mobile for tighter layout */
    .dashboard-grid {
        gap: 0.75rem !important;
    }

    .dashboard-row {
        gap: 0.75rem !important;
    }

}

/* Dark mode enhancements for mobile buttons */
@media (max-width: 767.98px) {
    [data-theme="dark"] .dashboard-action-btn {
        background: linear-gradient(145deg, var(--card-bg) 0%, rgba(30, 41, 59, 0.8) 100%);
        border-color: rgba(51, 65, 85, 0.8);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.03);
    }

    [data-theme="dark"] .dashboard-action-btn::before {
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
    }

    [data-theme="dark"] .dashboard-action-btn:hover:not(:disabled) {
        background: linear-gradient(145deg, rgba(99, 102, 241, 0.15) 0%, rgba(99, 102, 241, 0.08) 100%);
        box-shadow: 0 8px 20px rgba(99, 102, 241, 0.2), 0 4px 8px rgba(0, 0, 0, 0.3);
    }

    [data-theme="dark"] .dashboard-action-btn.active {
        background: linear-gradient(145deg, rgba(99, 102, 241, 0.2) 0%, rgba(99, 102, 241, 0.1) 100%);
        box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    }

    [data-theme="dark"] .dashboard-action-btn.filters {
        background: linear-gradient(145deg, var(--card-bg) 0%, rgba(99, 102, 241, 0.08) 100%);
        border-color: rgba(99, 102, 241, 0.3);
    }

    [data-theme="dark"] .dashboard-action-btn.filters:hover:not(:disabled) {
        background: linear-gradient(145deg, rgba(99, 102, 241, 0.2) 0%, rgba(99, 102, 241, 0.1) 100%);
    }

    [data-theme="dark"] .dashboard-action-btn.filters.active {
        background: linear-gradient(145deg, rgba(99, 102, 241, 0.25) 0%, rgba(99, 102, 241, 0.15) 100%);
        box-shadow: 0 4px 16px rgba(99, 102, 241, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    }

    [data-theme="dark"] .dashboard-action-btn.refresh {
        background: linear-gradient(145deg, var(--card-bg) 0%, rgba(16, 185, 129, 0.08) 100%);
        border-color: rgba(16, 185, 129, 0.3);
    }

    [data-theme="dark"] .dashboard-action-btn.refresh:hover:not(:disabled) {
        background: linear-gradient(145deg, rgba(16, 185, 129, 0.2) 0%, rgba(16, 185, 129, 0.1) 100%);
    }

    [data-theme="dark"] .dashboard-filters-panel {
        background: linear-gradient(180deg, var(--card-bg) 0%, rgba(15, 23, 42, 0.95) 100%);
        border-color: rgba(51, 65, 85, 0.8);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    }
}

/* Desktop: hide mobile-only elements */
@media (min-width: 768px) {
    .dashboard-mobile-actions {
        display: none !important;
    }

    .dashboard-filters-panel {
        display: none !important;
    }
}

/* ==========================================
   Drilldown Page Header (Currency Selector)
   ========================================== */
.drilldown-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    background: var(--card-bg, #fff);
    border-radius: var(--card-radius, 8px);
    border: 1px solid var(--card-border, #e2e8f0);
    box-shadow: var(--card-shadow);
}

.drilldown-currency-selector {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.drilldown-currency-selector label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary, #64748b);
    margin: 0;
}

.drilldown-currency-selector .currency-select {
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary, #1e293b);
    background-color: var(--input-bg, #f8fafc);
    border: 1px solid var(--input-border, #e2e8f0);
    border-radius: 6px;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 1rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.drilldown-currency-selector .currency-select:hover {
    border-color: var(--color-primary, #6366f1);
}

.drilldown-currency-selector .currency-select:focus {
    outline: none;
    border-color: var(--color-primary, #6366f1);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* Dark mode */
[data-theme="dark"] .drilldown-currency-selector .currency-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
}

/* Refresh indicator */
.drilldown-refresh-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.5rem;
    color: var(--color-primary, #6366f1);
}

.drilldown-refresh-indicator i {
    font-size: 0.875rem;
}

/* Disabled state for currency select */
.drilldown-currency-selector .currency-select:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}