/* Power Peaks - AG Grid + KPI + auto-refresh styles */

/* ---------- Grids ----------
   The shared ag-grid-module template hardcodes style="height: 75vh" on its inner
   <div id="agGrid_*">, so we force the wrapper chain to 100% height and cap the
   outer container (same pattern as power-curtailment / eaf-electrodes-summary).
   The PJM grid holds up to 5 rows, AEP only 1 — so we size them differently. */
#grid-pjm {
    height: 32vh;
    border: 1px solid #ccc;
    overflow: hidden;
}

#grid-aep {
    height: 16vh;
    min-height: 110px;
    border: 1px solid #ccc;
    overflow: hidden;
}

#grid-pjm > .ag-grid-module,
#grid-aep > .ag-grid-module {
    height: 100%;
    width: 100%;
    display: block;
}

#grid-pjm .ag-grid-module > div[id^="agGrid_"],
#grid-aep .ag-grid-module > div[id^="agGrid_"] {
    height: 100% !important;
    width: 100%;
}

.processes-grid-container .ag-theme-alpine {
    --ag-header-height: 34px;
}

.ag-theme-alpine .ag-header {
    background-color: #f8f8f8;
    border-bottom: 1px solid #babfc7;
}

.ag-theme-alpine .ag-header-cell-label {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
}

.ag-theme-alpine .ag-header-cell {
    padding-left: 6px;
    padding-right: 6px;
}

/* AG Grid loading overlay */
.ag-theme-alpine .ag-overlay-loading-center {
    background-color: #fff;
    color: #333;
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 5px;
}

/* Rank cell — bold, slightly larger */
.ag-theme-alpine .ag-cell.cell-rank {
    font-weight: 700;
    color: #1f2937;
}

/* Highlight the #1 peak row */
.ag-theme-alpine .ag-row.row-top-peak .ag-cell {
    background-color: #fffbe6 !important;
    font-weight: 600;
}

/* ---------- Card accents ---------- */
.peak-card.peak-pjm { border-left: 4px solid #1f6fdf; }
.peak-card.peak-aep { border-left: 4px solid #f59e0b; }

/* ---------- KPI cards ---------- */
.kpi-card {
    border-left: 4px solid transparent;
}
.kpi-card.kpi-pjm { border-left-color: #1f6fdf; }
.kpi-card.kpi-aep { border-left-color: #f59e0b; }

.kpi-card .kpi-value {
    line-height: 1.1;
}
.kpi-card .kpi-label {
    margin-bottom: 2px;
}

/* Tailwind doesn't ship text-amber-500 in every build — provide a fallback. */
.kpi-card .text-amber-500 { color: #f59e0b; }

/* ---------- Auto-refresh pill ---------- */
.auto-refresh-pill {
    border: 1px solid transparent;
    cursor: pointer;
    user-select: none;
    min-width: 120px;
    justify-content: center;
}

.auto-refresh-pill.auto-on {
    background-color: #ecfdf5;
    color: #065f46;
    border-color: #a7f3d0;
}
.auto-refresh-pill.auto-on:hover {
    background-color: #d1fae5;
}

.auto-refresh-pill.auto-off {
    background-color: #f3f4f6;
    color: #4b5563;
    border-color: #d1d5db;
}
.auto-refresh-pill.auto-off:hover {
    background-color: #e5e7eb;
}

.auto-refresh-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #9ca3af;
}
.auto-refresh-dot.is-on {
    background-color: #10b981;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6);
    animation: pulse-dot 1.6s infinite;
}

@keyframes pulse-dot {
    0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6); }
    70%  { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* ---------- Info strip ---------- */
.info-strip {
    gap: 6px;
}

.info-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin: 2px 4px 2px 0;
    border: 1px solid transparent;
}

.info-chip.chip-pjm  { background-color: #eef4ff; color: #1d4ed8; border-color: #c7d8ff; }
.info-chip.chip-aep  { background-color: #fff7ed; color: #b45309; border-color: #fed7aa; }
.info-chip.chip-sdi  { background-color: #f1f5f9; color: #334155; border-color: #cbd5e1; }
.info-chip.chip-info { background-color: #f8fafc; color: #475569; border-color: #e2e8f0; }
