/* ===== Modern Battery Systems grid ===== */
.battery-systems { display: grid; gap: var(--s5); }
.bs-category-title {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--bg-elev);
  font-weight: 800; font-family: var(--font-head); letter-spacing: .02em;
}
.bs-grid { display: grid; gap: var(--grid-gap); grid-auto-rows: minmax(140px, 1fr); }

.bs-panel {
  position: relative;
  background: linear-gradient(180deg, rgba(0,180,131,.06), transparent), var(--bg-elev);
  border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-1);
  overflow: hidden;
}
.bs-panel:hover { border-color: rgba(0,180,131,.40); box-shadow: 0 8px 26px rgba(0,0,0,.10); }
.bs-panel--main { min-height: 320px; }

/* capacity badge */
.bs-badge {
  position: absolute; top: 12px; right: 12px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 12px;
  background: var(--green); color: #fff; font-weight: 800; font-size: 13px;
  border: 1px solid rgba(249,214,72,.5);
  backdrop-filter: blur(4px); box-shadow: var(--shadow-1); z-index: 3;
}
.bs-badge.alert { background: rgba(255,90,76,.14); border-color: rgba(255,90,76,.45); color: #7a1a14; }

/* bottom-left chips */
.bs-chips {
  position: absolute; left: 12px; bottom: 12px;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 999px;
  background: rgba(255,255,255,.7); border: 1px solid var(--line);
  backdrop-filter: blur(6px);
  font-size: 13px; color: #0b1220;
}
[data-theme="outage"] .chip { background: rgba(16,22,31,.55); color: #e7f1f8; border-color: #25344a; }

/* top-left runtime chips */
.bs-chips--top {
  position: absolute; top: 12px; left: 12px;
  display: inline-flex; gap: 8px; align-items: center; flex-wrap: nowrap;
  max-width: calc(100% - 24px); z-index: 2;
}
.bs-chips--top .chip { white-space: nowrap; line-height: 1.1; height: auto; padding: 6px 10px; }

/* optional price */
.bs-price {
  position: absolute; bottom: 12px; right: 12px;
  display: inline-flex; align-items: center;
  padding: 6px 10px; border-radius: 12px;
  background: rgba(0,0,0,.65); color: #fff;
  font-weight: 800; font-size: 13px; z-index: 3;
}

/* media */
.bs-media { position: absolute; inset: 0; object-fit: cover; width: 100%; height: 100%; opacity: .92; }
.bs-media--dim { filter: saturate(.9) contrast(.98); }
.bs-overlay-fade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.06)); }

.bs-note { position: absolute; top: 8px; right: -28px; color: var(--red); font-weight: 800; font-size: 14px; }

/* named-area layouts (desktop) */
.rows-3 { grid-template-columns: 1.25fr .75fr; grid-template-areas: "main s1" "main s2" "main s3"; }
.rows-2 { grid-template-columns: 1.25fr .75fr; grid-template-areas: "main s1" "main s2"; }
.bs-main { grid-area: main; }
.bs-s1 { grid-area: s1; }
.bs-s2 { grid-area: s2; }
.bs-s3 { grid-area: s3; }

@media (max-width: 980px) {
  .rows-3, .rows-2 { grid-template-columns: 1fr; grid-template-areas: none; }
  .bs-note { right: 8px; top: 8px; }
}

/* Mobile single-column fix */
@media (max-width: 680px) {
  .rows-3, .rows-2 { grid-template-columns: 1fr !important; grid-template-areas: none !important; }
  .bs-grid { grid-template-columns: 1fr !important; grid-auto-flow: row; grid-auto-rows: auto !important; gap: var(--grid-gap); }
  .bs-grid > .bs-panel { grid-area: auto !important; grid-column: 1 / -1 !important; position: relative; overflow: hidden; min-height: auto !important; }
  .bs-grid > .bs-panel::before { content: ""; display: block; padding-top: 75%; }
  .bs-grid > .bs-panel.bs-panel--main::before { padding-top: 56.25%; }
  .bs-media { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; display: block; }
}

/* Controls */
.bs-controls { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-elev); padding: 4px; }
.seg button {
  border: 0; background: transparent; padding: 8px 12px; border-radius: 999px;
  font-weight: 600; color: var(--muted); cursor: pointer;
}
.seg button[aria-pressed="true"] { background: var(--green); color: #fff; }

.bs-filter { display: flex; gap: 8px; align-items: center; }
.bs-filter select {
  padding: 8px 10px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--bg-elev); color: var(--ink);
}

/* List view (kept even if hidden in UI) */
.view-list .list { display: grid; gap: 10px; }
.view-list .row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 12px; align-items: center;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
}
.view-list .row h4 { margin: 0; font-size: 15px; }

.hidden { display: none !important; }

th .dir {
  font-family: system-ui, sans-serif;
  color: #6b7280;
  font-size: 0.8em;
}

.nps-products {
  padding-top: 0;
  padding-bottom: 0;
}