/* =============================================
   Installer Activity (admin/admin_activity
   .html): stat tiles (components.css), the CSV
   export, and a panel per chart. A chart's
   controls sit in its panel's toolbar; the
   charts are drawn by the page's script
   (Chart.js), which reads the theme's colors.
   ============================================= */

/* ----- Data export: its fields in a row, the button at the end ----- */
.activity-export {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 14px;
    margin: 0;
}

.activity-export .field {
    flex: 1 1 170px;
    max-width: 240px;
}

.activity-export__submit {
    margin-left: auto;
}

@media (max-width: 767.98px) {
    .activity-export .field {
        max-width: none;
    }

    .activity-export__submit {
        flex: 1 1 100%;
    }
}

/* ----- Charts: two to a row on wide screens ----- */
.chart-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
}

@media (min-width: 992px) {
    .chart-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* A chart's controls: a date range, then its toggles */
.chart-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

.chart-date-range {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--in-text-faint);
    font-size: 0.8rem;
}

.chart-date-range .field__control {
    width: 150px;
}

.chart-canvas-wrap {
    position: relative;
    width: 100%;
}

.chart-canvas-wrap canvas {
    width: 100% !important;
}

/* Tall bar charts: the host grows with the number of installers and the
   wrapper scrolls once that passes the panel's height budget */
.chart-scroll {
    max-height: 620px;
    overflow-x: hidden;
    overflow-y: auto;
}

.chart-canvas-host {
    position: relative;
    width: 100%;
    min-height: 520px;
}

.chart-scroll::-webkit-scrollbar {
    width: 8px;
}

.chart-scroll::-webkit-scrollbar-track {
    border-radius: 4px;
    background: var(--in-wash);
}

.chart-scroll::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background: var(--in-border-hover);
}

/* ----- Per installer over time: a switch per installer, in its color ----- */
.installer-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    padding: 0 0 12px;
}

.installer-legend:empty {
    display: none;
}

.installer-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: var(--in-text-2);
    font-size: 0.8rem;
    user-select: none;
    cursor: pointer;
    transition: opacity 0.2s;
}

.installer-legend-item:hover {
    opacity: 0.8;
}

.installer-legend-item input[type="checkbox"] {
    display: none;
}

.installer-legend-swatch {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    transition: opacity 0.2s;
}

.installer-legend-item.is-off {
    color: var(--in-text-placeholder);
}

.installer-legend-item.is-off .installer-legend-swatch {
    opacity: 0.25;
}

/* ----- Drop-offs ----- */
.dropoff-delta {
    color: var(--in-danger);
    font-weight: 700;
}

.dropoff-pct {
    color: var(--in-text-faint);
}

/* Last 30 days against the 30 before */
.trend-up {
    color: var(--in-complete);
}

.trend-down {
    color: var(--in-danger);
}

.trend-flat {
    color: var(--in-text-faint);
}