/* SCUC Dashboard — Light theme refinements */
body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* Tab pills styling */
.nav-pills .nav-link {
    color: #6c757d;
    border-radius: 8px;
    margin: 0 4px;
    transition: background 0.2s, color 0.2s;
}
.nav-pills .nav-link:hover {
    color: #2c3e50;
    background: rgba(44,62,80,0.06);
}
.nav-pills .nav-link.active {
    background: rgba(44,62,80,0.10);
    color: #2c3e50;
    font-weight: 600;
}

/* Scrollable heatmap container */
.heatmap-scroll {
    max-height: 600px;
    overflow-y: auto;
    border-radius: 8px;
}
.heatmap-scroll::-webkit-scrollbar { width: 6px; }
.heatmap-scroll::-webkit-scrollbar-track { background: transparent; }
.heatmap-scroll::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.15);
    border-radius: 3px;
}

/* Card styling */
.card {
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 10px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* KPI card hover lift */
.kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.12) !important;
}

/* Chart card hover subtle shadow */
.chart-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
}

/* Scenario metadata banner */
.scenario-meta-banner {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 10px;
    padding: 12px 20px;
    margin-bottom: 16px;
    border: 1px solid rgba(0,0,0,0.06);
}
.scenario-meta-banner .meta-label {
    text-transform: uppercase;
    font-size: 0.65rem;
    letter-spacing: 0.05em;
    color: #6c757d;
    margin-bottom: 0;
}
.scenario-meta-banner .meta-value {
    font-weight: 600;
    font-size: 0.9rem;
    color: #2c3e50;
    margin-bottom: 0;
}

/* Dashboard footer */
.dashboard-footer {
    border-top: 1px solid rgba(0,0,0,0.08);
    padding: 16px 0;
    margin-top: 32px;
    color: #95a5a6;
    font-size: 0.8rem;
    text-align: center;
}

/* Navbar depth */
.navbar {
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* Tab pill icons via CSS ::before (dbc.Tab label only accepts strings) */
.nav-pills .nav-link::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-right: 6px;
    opacity: 0.5;
    font-size: 0.85em;
}
.nav-pills .nav-link.active::before {
    opacity: 1.0;
}
/* Per-tab icons keyed by tab text */
.nav-pills .nav-link[id$="tab-overview"]::before { content: "\f200"; }    /* fa-chart-pie */
.nav-pills .nav-link[id$="tab-commitment"]::before { content: "\f274"; }  /* fa-calendar-check */
.nav-pills .nav-link[id$="tab-dispatch"]::before { content: "\f275"; }    /* fa-industry */
.nav-pills .nav-link[id$="tab-lmp"]::before { content: "\f155"; }         /* fa-dollar-sign */
.nav-pills .nav-link[id$="tab-flows"]::before { content: "\f362"; }       /* fa-arrow-right-arrow-left */
.nav-pills .nav-link[id$="tab-netmap"]::before { content: "\f5a0"; }      /* fa-map-location-dot */
.nav-pills .nav-link[id$="tab-n1security"]::before { content: "\f3ed"; }  /* fa-shield-halved */
.nav-pills .nav-link[id$="tab-ml"]::before { content: "\f544"; }          /* fa-robot */
.nav-pills .nav-link[id$="tab-compare"]::before { content: "\e13a"; }     /* fa-code-compare */

/* Responsive: hide tab icons on small screens */
@media (max-width: 768px) {
    .nav-pills .nav-link::before { display: none; }
    .scenario-meta-banner { padding: 8px 12px; }
}

/* Slider styling */
.rc-slider-track { background-color: #2c3e50; }
.rc-slider-handle { border-color: #2c3e50; }
.rc-slider-dot-active { border-color: #2c3e50; }

/* Loading spinner color */
._dash-loading { color: #2c3e50 !important; }

/* Navbar scenario selector */
.navbar .form-select {
    max-width: 300px;
}

/* Violation pulse animation */
@keyframes violation-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(231,76,60,0); }
    50% { box-shadow: 0 0 0 8px rgba(231,76,60,0.3); }
}
.n1-violation-pulse {
    animation: violation-pulse 2s infinite;
}