/* Superdash: layout on top of Bootstrap 5.3. Colors come from Bootstrap's theme variables. */
:root, [data-bs-theme=light] {
  --sd-sidebar-bg: #0f172a;
  --sd-sidebar-fg: #cbd5e1;
  --sd-sidebar-active: #ffffff;
  --sd-accent: #3b82f6;
  --sd-grid: rgba(15, 23, 42, .08);
  --sd-card-bg: #ffffff;
  --sd-page-bg: #f4f6fa;
  --sd-heat: 59, 130, 246;
}
[data-bs-theme=dark] {
  --sd-sidebar-bg: #0b1120;
  --sd-sidebar-fg: #94a3b8;
  --sd-sidebar-active: #ffffff;
  --sd-grid: rgba(148, 163, 184, .14);
  --sd-card-bg: #161e2e;
  --sd-page-bg: #0f1623;
  --bs-body-bg: #0f1623;
  --sd-heat: 96, 165, 250;
}
body { background: var(--sd-page-bg); font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }

.sd-shell { display: flex; min-height: 100vh; }
.sd-sidebar { width: 240px; flex: 0 0 240px; background: var(--sd-sidebar-bg); color: var(--sd-sidebar-fg); position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: 1rem .75rem; }
.sd-brand { display: flex; align-items: center; gap: .5rem; color: #fff; font-weight: 700; font-size: 1.1rem; padding: .25rem .5rem 1rem; text-decoration: none; }
.sd-brand span { width: 28px; height: 28px; border-radius: 8px; background: var(--sd-accent); display: inline-grid; place-items: center; font-size: .9rem; }
.sd-nav-section { text-transform: uppercase; font-size: .7rem; letter-spacing: .08em; opacity: .6; margin: 1rem .5rem .35rem; }
.sd-nav a { display: block; color: var(--sd-sidebar-fg); text-decoration: none; padding: .38rem .6rem; border-radius: 6px; font-size: .9rem; }
.sd-nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
.sd-nav a.active { background: rgba(59,130,246,.22); color: var(--sd-sidebar-active); }
.sd-main { flex: 1; min-width: 0; }
.sd-topbar { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; padding: .9rem 1.5rem; border-bottom: 1px solid var(--bs-border-color); background: var(--sd-card-bg); position: sticky; top: 0; z-index: 10; }
.sd-topbar h1 { font-size: 1.2rem; margin: 0; font-weight: 600; flex: 1; min-width: 200px; }
.sd-content { padding: 1.5rem; }
.sd-menu-btn { display: none; }

.card { background: var(--sd-card-bg); border: 1px solid var(--bs-border-color-translucent); border-radius: 12px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.card-header { background: transparent; border-bottom: 0; font-weight: 600; padding: 1rem 1.25rem .25rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.card-header .sub { font-weight: 400; color: var(--bs-secondary-color); font-size: .85rem; }
.card-body { padding: 1rem 1.25rem 1.25rem; }

.kpi { padding: 1rem 1.25rem; height: 100%; }
.kpi .label { min-height: 2.2em; color: var(--bs-secondary-color); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.kpi .value { font-size: 1.4rem; white-space: nowrap; font-weight: 700; line-height: 1.2; margin: .25rem 0; font-variant-numeric: tabular-nums; }
.kpi .foot { font-size: .8rem; color: var(--bs-secondary-color); }
.delta { font-size: .8rem; font-weight: 600; white-space: nowrap; }

.table-sd { font-size: .85rem; font-variant-numeric: tabular-nums; margin: 0; }
.table-sd th { font-weight: 600; color: var(--bs-secondary-color); white-space: nowrap; border-bottom-width: 1px; }
.table-sd td.num, .table-sd th.num { text-align: right; white-space: nowrap; }
.table-sd tr.total td { font-weight: 700; border-top: 2px solid var(--bs-border-color); }
.table-wrap { overflow-x: auto; }
.table-sd td.heat { background-color: rgba(var(--sd-heat), var(--a, 0)) !important; }
.table-sd td.partial { font-style: italic; color: var(--bs-secondary-color); }
.chart-box { position: relative; width: 100%; }
.note { font-size: .8rem; color: var(--bs-secondary-color); }
.badge-inst { font-size: .7rem; }

@media (max-width: 991px) {
  .sd-sidebar { position: fixed; z-index: 30; left: -260px; transition: left .2s; }
  .sd-sidebar.open { left: 0; box-shadow: 0 0 40px rgba(0,0,0,.4); }
  .sd-menu-btn { display: inline-block; }
  .sd-content { padding: 1rem; }
  .sd-topbar { padding: .75rem 1rem; }
}

.cost-input { max-width: 7.5rem; }