/**
 * Analytics Dashboard — additional styles.
 *
 * Complements premium-shared.css with dashboard-specific overrides.
 */

/* ---------------------------------------------------------------
   Dashboard Wrapper
   --------------------------------------------------------------- */
.strp-dashboard-wrap {
    max-width: 1400px;
    padding-top: 20px;
}

.strp-dashboard-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--strp-text-primary);
    margin-bottom: 24px;
}

/* ---------------------------------------------------------------
   Chart Canvas Constraints
   Chart.js requires the canvas parent to be position:relative with
   a defined height when using responsive + maintainAspectRatio:false.
   --------------------------------------------------------------- */
#strp-revenue-chart {
    max-height: 300px;
    width: 100% !important;
    height: 300px !important;
}

#strp-plan-chart {
    max-height: 260px;
    width: 100% !important;
    height: 260px !important;
}

#strp-retention-reasons-chart,
#strp-retention-offers-chart {
    max-height: 260px;
    width: 100% !important;
    height: 260px !important;
}

/* ---------------------------------------------------------------
   Bottom Two-Column Spacing
   --------------------------------------------------------------- */
.strp-grid-2 > .strp-chart-wrap,
.strp-grid-2 > .strp-card {
    min-height: 360px;
    display: flex;
    flex-direction: column;
}

.strp-grid-2 > .strp-card .strp-activity-feed {
    flex: 1;
    overflow-y: auto;
    max-height: 300px;
}

/* ---------------------------------------------------------------
   KPI Count-Up Animation
   --------------------------------------------------------------- */
.strp-kpi-card__value {
    transition: opacity 0.3s ease;
}

.strp-kpi-card__value--loading {
    opacity: 0.4;
}

/* ---------------------------------------------------------------
   Period Selector Active State Refinement
   --------------------------------------------------------------- */
.strp-period-selector__btn--active {
    font-weight: 600;
}

.strp-period-selector__btn:focus {
    outline: 2px solid var(--strp-primary);
    outline-offset: 1px;
}

/* ---------------------------------------------------------------
   Loading Overlay for AJAX Updates
   --------------------------------------------------------------- */
.strp-dashboard-loading {
    position: relative;
    pointer-events: none;
}

.strp-dashboard-loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.6);
    border-radius: var(--strp-radius-md);
    z-index: 10;
}

/* ---------------------------------------------------------------
   Responsive Adjustments
   --------------------------------------------------------------- */
@media (max-width: 1200px) {
    .strp-dashboard-wrap {
        max-width: 100%;
    }
}

@media (max-width: 782px) {
    .strp-dashboard-title {
        font-size: 20px;
    }

    .strp-grid-2 > .strp-chart-wrap,
    .strp-grid-2 > .strp-card {
        min-height: auto;
    }
}

/* RTL Support */
[dir="rtl"] .strp-kpi-card__label,
[dir="rtl"] .strp-kpi-card__value {
    text-align: right;
}

[dir="rtl"] .strp-dashboard-grid {
    direction: rtl;
}

/* ---------------------------------------------------------------
   Reduced Motion
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .strp-kpi-card__value {
        transition: none;
    }

    .strp-dashboard-loading::after {
        transition: none;
    }
}