/* ===== CSS Custom Properties ===== */
:root {
  --navy:          #1B2B5E;
  --blue:          #2E7EC4;
  --light-blue:    #5BB8D4;
  --off-white:     #F4F8FB;
  --white:         #FFFFFF;
  --gray-100:      #E8EDF2;
  --gray-200:      #CBD5E0;
  --gray-400:      #8899AA;
  --gray-600:      #4A5568;
  --red:           #E53E3E;
  --green:         #38A169;

  --font-stack:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --sidebar-width: 280px;
  --footer-height: 44px;
  --transition:    0.2s ease;

  /* Design tokens */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.07);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.10);
  --shadow-lg:  0 20px 60px rgba(0,0,0,0.20);
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-pill:20px;
}

/* ===== Reset & Base ===== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  font-family: var(--font-stack);
  font-size: 14px;
  color: var(--gray-600);
  background: var(--off-white);
  overflow-x: hidden;
}

button {
  font-family: inherit;
  font-size:   inherit;
  cursor:      pointer;
  border:      none;
  background:  none;
}

select {
  font-family: inherit;
  font-size:   inherit;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ===== Application State Control ===== */
body.state-loading  #dashboard-screen,
body.state-loading  #dashboard-footer { display: none !important; }
body.state-dashboard #loading-screen  { display: none !important; }
body.state-loading   #loading-screen  { display: flex; }
body.state-dashboard #dashboard-screen{ display: flex; }
body.state-dashboard #dashboard-footer{ display: flex; }

/* ===== Loading Screen ===== */
.loading-screen {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--navy) 0%, #2a4080 100%);
  z-index: 999;
}

.loading-card {
  background:    var(--white);
  border-radius: 16px;
  padding:       48px 40px;
  max-width:     420px;
  width:         90%;
  text-align:    center;
  box-shadow:    var(--shadow-lg);
  opacity:       0; /* animated in by animateLoadingCardIn */
}

.loading-logo     { height: 64px; margin-bottom: 24px; }

.loading-title {
  font-size:   1.6rem;
  font-weight: 700;
  color:       var(--navy);
  margin-bottom: 6px;
}

.loading-subtitle {
  font-size:   0.9rem;
  color:       var(--gray-400);
  margin-bottom: 32px;
}

.loading-status {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             10px;
}

.loading-spinner {
  width:        22px;
  height:       22px;
  border:       2.5px solid var(--gray-200);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation:    spin 0.75s linear infinite;
  flex-shrink:  0;
}

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

.loading-text {
  font-size: 0.9rem;
  color:     var(--gray-600);
}

.loading-error {
  margin-top: 16px;
  color:      var(--red);
  font-size:  0.85rem;
  line-height: 1.5;
}

.retry-btn {
  margin-top:    16px;
  padding:       8px 24px;
  background:    var(--blue);
  color:         var(--white);
  border-radius: var(--radius-sm);
  font-weight:   600;
  font-size:     0.9rem;
  transition:    background var(--transition);
}
.retry-btn:hover          { background: var(--navy); }
.retry-btn:focus-visible  { outline: 2px solid var(--light-blue); outline-offset: 2px; }

/* ===== Dashboard Layout ===== */
.dashboard-screen {
  display: flex;
  height: calc(100vh - var(--footer-height));
}

/* ===== Sidebar ===== */
.sidebar {
  width:         var(--sidebar-width);
  min-width:     var(--sidebar-width);
  background:    var(--navy);
  color:         var(--white);
  display:       flex;
  flex-direction: column;
  overflow:      hidden;
}

.sidebar-header {
  padding:         16px 16px 12px;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  border-bottom:   1px solid rgba(255,255,255,0.12);
  flex-shrink:     0;
}

.sidebar-logo { height: 36px; }

.sidebar-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}

.sidebar-scroll::-webkit-scrollbar       { width: 5px; }
.sidebar-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 3px; }

/* Sidebar Sections — collapsible */
.sidebar-section {
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* Collapsible header */
.sidebar-section-header {
  display:     flex;
  align-items: center;
  gap:         8px;
  cursor:      pointer;
  padding:     11px 18px;
  font-size:   0.73rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color:       var(--light-blue);
  user-select: none;
  transition:  background var(--transition);
}
.sidebar-section-header:hover { background: rgba(255,255,255,0.04); }

.section-chevron {
  font-size:   0.8rem;
  margin-left: auto;
  display:     inline-block;
  transform:   rotate(0deg);
  transition:  transform 0.2s ease;
  flex-shrink: 0;
}
.section-chevron.open { transform: rotate(90deg); }

.section-badge {
  background:    rgba(91,184,212,0.2);
  color:         var(--light-blue);
  font-size:     0.68rem;
  font-weight:   700;
  border-radius: var(--radius-pill);
  padding:       1px 7px;
  margin-left:   4px;
}

/* Section body — height animated by anime.js */
.sidebar-section-body {
  padding:    0 16px 12px;
  font-size:  0.8rem;
  line-height: 1.5;
  color:      rgba(255,255,255,0.75);
  overflow:   hidden;
}

/* ---- Custom Result Type List ---- */
.result-type-list {
  display:        flex;
  flex-direction: column;
  gap:            2px;
}

.rt-item {
  display:      block;
  width:        100%;
  padding:      6px 10px 6px 12px;
  border-radius: var(--radius-sm);
  border-left:  2px solid transparent;
  font-size:    0.82rem;
  color:        rgba(255,255,255,0.65);
  text-align:   left;
  cursor:       pointer;
  white-space:  nowrap;
  overflow:     hidden;
  text-overflow: ellipsis;
  transition:   background var(--transition), color var(--transition),
                border-color var(--transition), transform 0.12s ease;
}
.rt-item:hover {
  background:  rgba(255,255,255,0.1);
  color:       var(--white);
  transform:   translateX(3px);
}
.rt-item.active {
  background:   rgba(91,184,212,0.18);
  color:        var(--light-blue);
  border-left-color: var(--light-blue);
  font-weight:  600;
}
.rt-item:focus-visible {
  outline:        2px solid var(--light-blue);
  outline-offset: -2px;
}
/* ---- Multi-select Result Type Enhancements ---- */
.rt-multi-hint {
  font-size:      0.68rem;
  color:          rgba(255,255,255,0.4);
  padding:        4px 12px 6px;
  font-style:     italic;
  border-bottom:  1px solid rgba(255,255,255,0.06);
  margin-bottom:  4px;
  transition:     color 0.3s, background 0.3s;
}

.rt-multi-hint.rt-hint-warning {
  color:       #F59E0B;
  background:  rgba(245,158,11,0.08);
  border-radius: var(--radius-sm);
}

.rt-item {
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  gap:           6px;
}

.rt-item-label {
  flex:           1;
  overflow:       hidden;
  text-overflow:  ellipsis;
  white-space:    nowrap;
}

.rt-item-badge {
  min-width:      18px;
  height:         18px;
  display:        flex;
  align-items:    center;
  justify-content: center;
  font-size:      0.65rem;
  font-weight:    700;
  background:     var(--light-blue);
  color:          var(--navy);
  border-radius:  50%;
  flex-shrink:    0;
}

/* Multi-select active state enhancement */
.rt-item.active {
  background:         rgba(91,184,212,0.18);
  color:              var(--light-blue);
  border-left-color:  var(--light-blue);
  font-weight:        600;
}

/* When multiple are selected, add subtle different accents */
.rt-item.active:nth-of-type(even) {
  border-left-color: #E07B39;
}

/* ---- Scenario List ---- */
.scenario-actions { margin-bottom: 6px; }

.scenario-group-label {
  font-size:     0.68rem;
  font-weight:   700;
  border-radius: var(--radius-pill);
  padding:       2px 8px;
  margin:        8px 0 4px;
  display:       inline-block;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.scenario-group-label[data-cat="BAU"] { background: rgba(160,160,160,0.18); color: #9CA3AF; }
.scenario-group-label[data-cat="NDC"] { background: rgba(217,119,6,0.18);   color: #D97706; }
.scenario-group-label[data-cat="PC"]  { background: rgba(56,161,105,0.18);  color: #38A169; }

.scenario-row {
  display:     flex;
  align-items: center;
  gap:         6px;
  padding:     3px 0;
  font-size:   0.82rem;
}

.scenario-row input[type="checkbox"] {
  accent-color: var(--light-blue);
  flex-shrink:  0;
  width:        15px;
  height:       15px;
  cursor:       pointer;
}

.scenario-row label {
  cursor:        pointer;
  flex:          1;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
  color:         rgba(255,255,255,0.9);
}
.scenario-row label:hover { color: var(--light-blue); }

.scenario-info-btn {
  color:         var(--light-blue);
  font-size:     0.85rem;
  flex-shrink:   0;
  width:         20px;
  height:        20px;
  display:       flex;
  align-items:   center;
  justify-content: center;
  border-radius: 50%;
  transition:    background var(--transition);
}
.scenario-info-btn:hover        { background: rgba(91,184,212,0.2); }
.scenario-info-btn:focus-visible{ outline: 2px solid var(--light-blue); outline-offset: 1px; }

/* ---- Sector List ---- */
.sector-actions {
  display:       flex;
  gap:           8px;
  margin-bottom: 6px;
}

.sector-action-btn {
  font-size:       0.7rem;
  color:           var(--light-blue);
  text-decoration: underline;
  padding:         2px 4px;
}
.sector-action-btn:hover        { color: var(--white); }
.sector-action-btn:focus-visible{ outline: 2px solid var(--light-blue); outline-offset: 1px; }

.sector-row {
  display:     flex;
  align-items: center;
  gap:         6px;
  padding:     2px 0;
  font-size:   0.82rem;
}

.sector-row input[type="checkbox"] {
  accent-color: var(--light-blue);
  flex-shrink:  0;
  width:        15px;
  height:       15px;
  cursor:       pointer;
}

.sector-row label { cursor: pointer; color: rgba(255,255,255,0.9); }

#sector-section.hidden-section { display: none; }

/* ---- Timeline / Range Slider ---- */
.timeline-display {
  font-size:   0.9rem;
  font-weight: 600;
  color:       var(--white);
  text-align:  center;
  margin-bottom: 10px;
}

.range-slider-container {
  padding:  0 8px;
  position: relative;
}

.range-track {
  position:     relative;
  height:       6px;
  background:   rgba(255,255,255,0.15);
  border-radius: 3px;
  margin:       12px 0;
}

.range-fill {
  position:      absolute;
  height:        100%;
  background:    var(--light-blue);
  border-radius: 3px;
  pointer-events: none;
}

.range-handle {
  position:     absolute;
  top:          50%;
  width:        18px;
  height:       18px;
  background:   var(--white);
  border:       2px solid var(--light-blue);
  border-radius: 50%;
  transform:    translate(-50%, -50%);
  cursor:       grab;
  transition:   box-shadow var(--transition);
}
.range-handle:active { cursor: grabbing; }
.range-handle:hover,
.range-handle:focus  { box-shadow: 0 0 0 4px rgba(91,184,212,0.3); outline: none; }

.range-ticks {
  display:         flex;
  justify-content: space-between;
  padding:         0 2px;
}

.range-tick {
  font-size:   0.55rem;
  color:       rgba(255,255,255,0.45);
  text-align:  center;
  width:       0;
  display:     flex;
  justify-content: center;
}

/* ---- Plot Type Buttons ---- */
.plot-type-group {
  display:   flex;
  gap:       4px;
  flex-wrap: wrap;
}

.plot-type-btn {
  flex:         1;
  min-width:    56px;
  padding:      6px 4px;
  font-size:    0.72rem;
  font-weight:  600;
  color:        rgba(255,255,255,0.6);
  border:       1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-sm);
  text-align:   center;
  transition:   all var(--transition);
}
.plot-type-btn:hover:not(:disabled) { background: rgba(255,255,255,0.08); color: var(--white); }
.plot-type-btn.active               { background: var(--blue); color: var(--white); border-color: var(--blue); }
.plot-type-btn:disabled             { opacity: 0.3; cursor: not-allowed; }
.plot-type-btn:focus-visible        { outline: 2px solid var(--light-blue); outline-offset: 1px; }

/* ===== Main Panel ===== */
.main-panel {
  flex:         1;
  display:      flex;
  flex-direction: column;
  overflow-y:   auto;
  padding:      0;
  min-width:    0;
}

.main-panel::-webkit-scrollbar       { width: 6px; }
.main-panel::-webkit-scrollbar-thumb { background: var(--gray-200); border-radius: 3px; }

/* ===== Tab Bar — Pill style ===== */
.tab-bar {
  display:     flex;
  gap:         6px;
  background:  var(--white);
  padding:     8px 24px;
  border-bottom: 2px solid var(--gray-100);
  flex-shrink: 0;
  align-items: center;
}

.tab-btn {
  padding:       7px 18px;
  font-size:     0.84rem;
  font-weight:   600;
  color:         var(--gray-400);
  border:        1px solid transparent;
  border-radius: var(--radius-pill);
  transition:    all var(--transition);
  white-space:   nowrap;
}
.tab-btn:hover:not(:disabled)  { color: var(--blue); background: rgba(46,126,196,0.08); }
.tab-btn.active                { color: var(--white); background: var(--blue); border-color: var(--blue); }
.tab-btn.empty-tab             { opacity: 0.35; cursor: not-allowed; }
.tab-btn:focus-visible         { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ===== Charts Container ===== */
.charts-container {
  display:    flex;
  gap:        16px;
  padding:    12px 24px 4px;
  flex:       1;
  min-height: 0;
  overflow:   hidden;
}

/* Each chart card — top accent colour, initial hidden for animation */
.chart-wrapper {
  background:    var(--white);
  border-radius: var(--radius-md);
  padding:       16px;
  box-shadow:    var(--shadow-sm);
  position:      relative;
  display:       flex;
  flex-direction: column;
  opacity:       0;          /* animated in */
  transform:     translateY(12px);
}

.chart-primary   { flex: 55; min-width: 0; border-top: 3px solid var(--blue); }
.chart-breakdown { flex: 45; min-width: 0; border-top: 3px solid var(--light-blue); }

.chart-title {
  font-size:   0.85rem;
  font-weight: 700;
  color:       var(--navy);
  margin-bottom: 6px;
}

/* Chart 2 scenario selector */
.chart2-label {
  font-size:   0.72rem;
  font-weight: 600;
  color:       var(--gray-400);
  margin-right: 4px;
}

.chart-scenario-select {
  font-size:    0.78rem;
  padding:      3px 6px;
  border:       1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  color:        var(--navy);
  background:   var(--off-white);
}
.chart-scenario-select:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }

.chart-wrapper canvas {
  width:      100% !important;
  flex:       1;
  min-height: 0;
}

/* Export button — revealed on hover */
.chart-export-btn {
  position:      absolute;
  top:           12px;
  right:         12px;
  font-size:     0.72rem;
  font-weight:   600;
  color:         var(--gray-400);
  background:    var(--off-white);
  border:        1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  padding:       4px 10px;
  opacity:       0;
  transition:    opacity 0.15s, background var(--transition);
}
.chart-wrapper:hover .chart-export-btn { opacity: 1; }
.chart-export-btn:hover                { background: var(--gray-100); color: var(--navy); }
.chart-export-btn:focus-visible        { opacity: 1; outline: 2px solid var(--blue); outline-offset: 2px; }

/* Skeleton shimmer */
.chart-skeleton {
  width:         100%;
  height:        280px;
  border-radius: var(--radius-sm);
  background:    linear-gradient(90deg, var(--gray-100) 25%, #e0e7ee 50%, var(--gray-100) 75%);
  background-size: 200% 100%;
  animation:     shimmer 1.4s ease-in-out infinite;
  margin-top:    8px;
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

.chart-placeholder-msg {
  position:  absolute;
  top:       50%;
  left:      50%;
  transform: translate(-50%, -50%);
  color:     var(--gray-400);
  font-style: italic;
  font-size: 0.85rem;
  text-align: center;
}

#chart2-wrapper.chart-hidden canvas { visibility: hidden; }

/* ---- Legend Box — scrollable with max height ---- */
.legend-box {
  display:      flex;
  flex-wrap:    wrap;
  gap:          5px 12px;
  font-size:    0.78rem;
  margin-top:   8px;
  padding-top:  6px;
  padding-right: 4px;
  border-top:   1px solid var(--gray-100);

  /* Cap the legend height so it never ruins the chart */
  max-height:   90px;
  overflow-y:   auto;
  flex-shrink:  0;
}

/* Subtle scrollbar styling for the legend */
.legend-box::-webkit-scrollbar       { width: 4px; }
.legend-box::-webkit-scrollbar-track  { background: transparent; }
.legend-box::-webkit-scrollbar-thumb  { background: var(--gray-200); border-radius: 2px; }
.legend-box::-webkit-scrollbar-thumb:hover { background: var(--gray-400); }

/* Fade hint at bottom when content is clipped */
.legend-box.is-scrollable {
  mask-image:         linear-gradient(to bottom, black 75%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 75%, transparent 100%);
}
.legend-box.is-scrollable:hover {
  mask-image:         none;
  -webkit-mask-image: none;
}

.legend-item {
  display:     flex;
  align-items: center;
  gap:         5px;
  cursor:      pointer;
  padding:     2px 4px;
  border-radius: 4px;
  transition:  opacity var(--transition);
  user-select: none;
}
.legend-item:hover       { background: var(--gray-100); }
.legend-item.legend-hidden { opacity: 0.35; text-decoration: line-through; }

.legend-swatch { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.legend-label  { color: var(--gray-600); white-space: nowrap; }

/* ===== KPI Strip ===== */
.kpi-strip {
  display:    flex;
  gap:        12px;
  padding:    4px 24px 8px;
  flex-shrink: 0;
}

.kpi-card {
  flex:          1;
  background:    var(--white);
  border-radius: var(--radius-md);
  padding:       10px 14px;
  box-shadow:    var(--shadow-sm);
  display:       flex;
  flex-direction: column;
  align-items:   center;
  text-align:    center;
  transition:    transform var(--transition), box-shadow var(--transition);
}
.kpi-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.kpi-label {
  font-size:      0.72rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color:          var(--gray-400);
  margin-bottom:  4px;
}

.kpi-value {
  font-size:   1.2rem;
  font-weight: 700;
  color:       var(--navy);
  word-break:  break-all;
}

.kpi-value.positive { color: var(--green); }
.kpi-value.negative { color: var(--red);   }

@keyframes kpiPulse {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}
.kpi-value--pulse { animation: kpiPulse 0.35s ease-out; }

/* ===== Footer — single row ===== */
.dashboard-footer {
  display:        flex;
  align-items:    center;
  min-height:     var(--footer-height);
  padding:        6px 24px;
  background:     var(--white);
  border-top:     1px solid var(--gray-100);
  flex-shrink:    0;
}

.footer-row {
  display:     flex;
  align-items: center;
  justify-content: space-between;
  width:       100%;
  gap:         16px;
}

.footer-disclaimer {
  font-size:   0.7rem;
  color:       var(--gray-400);
  line-height: 1.45;
  flex:        1;
}

.footer-visitor {
  font-size:   0.8rem;
  font-weight: 600;
  color:       var(--navy);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ===== Modal ===== */
.scenario-modal {
  /* reliable centering */
  position:      fixed;
  inset:         0;
  margin:        auto;
  /* appearance */
  border:        none;
  border-radius: 14px;
  padding:       0;
  max-width:     540px;
  width:         90%;
  max-height:    90vh;
  overflow-y:    auto;
  box-shadow:    0 20px 60px rgba(27,43,94,0.25), 0 4px 16px rgba(0,0,0,0.12);
}

/* Entry animation */
.scenario-modal[open] {
  animation: modal-in 0.3s cubic-bezier(0.34, 1.45, 0.64, 1) both;
}

/* Exit animation — class added by JS before .close() */
.scenario-modal[open].modal-closing {
  animation: modal-out 0.2s cubic-bezier(0.4, 0, 1, 1) both;
}

@keyframes modal-in {
  from { opacity: 0; transform: scale(0.88) translateY(-14px); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}
@keyframes modal-out {
  from { opacity: 1; transform: scale(1)    translateY(0); }
  to   { opacity: 0; transform: scale(0.88) translateY(14px); }
}

.scenario-modal::backdrop {
  background: rgba(27,43,94,0.45);
  animation:  backdrop-in 0.22s ease both;
}
@keyframes backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.modal-content { padding: 0; }

.modal-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         18px 24px;
  border-bottom:   1px solid var(--gray-100);
}

.modal-title  { font-size: 1.1rem; font-weight: 700; color: var(--navy); }

.modal-close {
  font-size:     1.5rem;
  color:         var(--gray-400);
  width:         32px;
  height:        32px;
  display:       flex;
  align-items:   center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition:    background var(--transition);
}
.modal-close:hover        { background: var(--gray-100); color: var(--navy); }
.modal-close:focus-visible{ outline: 2px solid var(--blue); outline-offset: 1px; }

.modal-body {
  padding:     20px 24px 24px;
  font-size:   0.9rem;
  line-height: 1.6;
  color:       var(--gray-600);
}

.modal-body .modal-scenario-name { font-weight: 700; color: var(--navy); font-size: 1rem; margin-bottom: 8px; }
.modal-body .modal-category {
  display:       inline-block;
  font-weight: 700;
  color: var(--navy);
  font-size: 1rem;
  margin-bottom: 8px;
}

.modal-body .modal-category {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--gray-100);
  color: var(--blue);
  margin-bottom: 12px;
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
  .charts-container {
    flex-direction: column;
  }

  /* NOTE: .sidebar is NOT nested inside .charts-container — this was the CSS bug fix */
  .sidebar {
    position:   fixed;
    left:       -280px;
    z-index:    100;
    transition: left 0.3s ease;
    height:     100vh;
  }
  .sidebar.open { left: 0; }

  .chart-primary,
  .chart-breakdown { flex: 1; }

  .kpi-strip { flex-wrap: wrap; }
  .kpi-card  { min-width: calc(50% - 12px); }
}

@media (max-width: 768px) {
  :root { --sidebar-width: 240px; }

  .dashboard-footer {
    padding: 8px 16px;
  }

  .footer-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}


/* ---- Placeholder Disabled Buttons (Model Type / What-if?) ---- */
.sidebar-placeholder-btn {
  display:       flex;
  align-items:   center;
  gap:           8px;
  width:         calc(100% - 32px);
  margin:        6px 16px;
  padding:       10px 14px;
  font-size:     0.8rem;
  font-weight:   600;
  color:         rgba(255,255,255,0.85);
  background:    rgba(255,255,255,0.06);
  border:        1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-sm);
  transition:    all var(--transition);
}

.sidebar-placeholder-btn.placeholder-disabled {
  opacity:       0.7;
  cursor:        not-allowed;
  pointer-events: none;
  position:      relative;
  filter:        grayscale(40%);
  border-style:  dashed;
}

.sidebar-placeholder-btn.placeholder-disabled::after {
  content:       "";
  position:      absolute;
  inset:         0;
  border-radius: inherit;
  background:    repeating-linear-gradient(
                   -45deg,
                   transparent,
                   transparent 4px,
                   rgba(255,255,255,0.03) 4px,
                   rgba(255,255,255,0.03) 8px
                 );
  pointer-events: none;
}

.placeholder-badge {
  margin-left:   auto;
  font-size:     0.6rem;
  font-weight:   700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background:    rgba(217,119,6,0.25);
  color:         #D97706;
  padding:       2px 6px;
  border-radius: var(--radius-pill);
}