/**
 * SunMonitor — Inverter component CSS (Fase 4.5b)
 *
 * Customer-portal Omvormers tab + detail-popup. Bevat:
 *   - .cust-inv-layout    : 2-koloms grid (chart-card + alert-card)
 *   - .cust-inv-mini-grid : 3x3 grid van mini-cards
 *   - .cust-mini-*        : mini-card per omvormer (sparkline + legenda)
 *   - .cust-inv-table*    : full inverter-tabel met geavanceerde toggle
 *   - .cust-inv-detail-*  : detail-popup KPI grid + chart + strings tabel
 *
 * Geconsolideerd uit style.css 4402-4459 (legacy structuur) +
 * refresh.css 296-344 (advanced toggle) + responsive @1100/720/640.
 *
 * JS counterpart: /js/components/inverter-mini-card.js + customer/inverters.js
 */

/* ═════ Layout (chart-card + alert-card 2-koloms) ════════════════ */
.cust-inv-layout {
  display: grid;
  grid-template-columns: 1.45fr .95fr;
  gap: 14px;
  padding: 12px;
}
.cust-inv-left,
.cust-inv-right { display: flex; flex-direction: column; gap: 14px; }

.cust-inv-chart-card,
.cust-inv-alert-card {
  background: #f7f8fb;
  border: 1px solid #dce1ea;
  border-radius: 12px;
  overflow: hidden;
}

.cust-inv-subhd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid #dde3ec;
  background: #f9fbff;
}
.cust-inv-subhd .card-hd-t { font-size: 16px; font-weight: 700; letter-spacing: .01em; }

/* ═════ Mini-cards (sparkline per omvormer) ══════════════════════ */
.cust-inv-mini-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
}
.cust-mini-card {
  border: 1px solid #dce1ea;
  background: #f1f4f9;
  border-radius: 8px;
  padding: 8px;
}
.cust-mini-btn {
  display: block;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: box-shadow .14s ease, border-color .14s ease, transform .14s ease;
}
.cust-mini-btn:hover {
  border-color: #c3cedf;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .08);
  transform: translateY(-1px);
}
.cust-mini-btn:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 1px;
}
.cust-mini-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
}
.cust-mini-name { font-size: 12px; font-weight: 700; color: #334155; }
.cust-mini-meta { font-family: var(--mono); font-size: 10px; color: #7a8598; }
.cust-mini-svg  { display: block; width: 100%; height: 42px; border-radius: 6px; background: #eef3fa; }
.cust-mini-legend {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 10px;
  color: #7d8796;
}
.cust-mini-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 3px;
}

/* ═════ Alert-card meta-pills + tabel ════════════════════════════ */
.cust-inv-alert-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid #dde3ec;
  background: #f3f6fb;
}
.cust-inv-meta-pill {
  border: 1px solid #d5dde8;
  background: #fff;
  border-radius: 8px;
  padding: 5px 7px;
}
.cust-inv-meta-pill span    { display: block; font-family: var(--mono); font-size: 10px; color: #7a8596; }
.cust-inv-meta-pill strong  { font-size: 15px; color: #1f2937; }

.cust-inv-table-wrap { padding: 0 12px 0; overflow: auto; }
.cust-inv-table      { min-width: 1120px; }
.cust-inv-table thead th {
  background: #eef2f7;
  color: #475569;
  border-bottom: 1px solid #d8dee9;
  font-size: 10px;
  letter-spacing: .12em;
}
.cust-inv-table tbody td               { background: #ffffff; font-size: 13px; }
.cust-inv-table tbody tr:nth-child(odd) td { background: #f9fbff; }

.cust-inv-footer {
  padding: 10px 14px 12px;
  border-top: 1px solid #dce1ea;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background: #f8faff;
}

/* ═════ Tabel toolbar + advanced kolommen toggle (uit refresh.css) ═ */
.cust-inv-table-toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: var(--space-3) var(--space-7) var(--space-2);
  border-top: 1px solid var(--color-gray-200);
}

.cust-inv-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-11);
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
  font-weight: var(--fw-medium);
}
.cust-inv-toggle input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--color-brand);
  cursor: pointer;
}
.cust-inv-toggle:hover { color: var(--text-primary); }

#custInverterCard .cust-inv-col-advanced              { display: none; }
#custInverterCard.show-advanced .cust-inv-col-advanced { display: table-cell; }

/* ═════ Detail-popup ════════════════════════════════════════════ */
.cust-inv-detail-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.cust-inv-detail-kpi {
  background: #f7f9fc;
  border: 1px solid #dce4ef;
  border-radius: 10px;
  padding: 10px 12px;
}
.cust-inv-detail-kpi span {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  color: #6b7a8f;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.cust-inv-detail-kpi strong {
  display: block;
  margin-top: 6px;
  font-size: 15px;
  color: #1f2937;
  font-weight: 700;
}

.cust-inv-detail-block {
  background: #f8faff;
  border: 1px solid #dce4ef;
  border-radius: 10px;
  overflow: hidden;
}
.cust-inv-detail-block-hd {
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 700;
  color: #1f2937;
  background: #f1f5fb;
  border-bottom: 1px solid #dce4ef;
}
.cust-inv-collapse-hd {
  display: flex;
  align-items: center;
  gap: 6px;
  user-select: none;
}
.cust-inv-collapse-hd:hover {
  background: #e8edf5;
}
.cust-inv-collapse-icon {
  font-size: 12px;
  color: #64748b;
  transition: transform .15s;
}
.cust-inv-collapse-bd {
  padding: 12px;
}

.cust-inv-detail-chart-card {
  background: #f8faff;
  border: 1px solid #dce4ef;
  border-radius: 10px;
  overflow: hidden;
}
.cust-inv-detail-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid #dce4ef;
  background: #fbfdff;
}
.cust-inv-detail-controls .form-inp   { height: 32px; min-width: 150px; }
.cust-inv-detail-controls .rep-select { height: 32px; min-width: 240px; }
.cust-inv-detail-meta { padding: 8px 12px; color: #6b7a8f; }
.cust-inv-detail-canvas-wrap {
  position: relative;
  height: 260px;
  padding: 8px 10px 10px;
}
.cust-inv-detail-legend     { padding: 0 12px 10px; color: #6b7a8f; }
.cust-inv-detail-table-wrap { overflow: auto; }
.cust-inv-detail-table      { min-width: 560px; }
.cust-inv-detail-table thead th {
  background: #eef3fa;
  color: #4b5c74;
  font-size: 10px;
  letter-spacing: .12em;
  border-bottom: 1px solid #d9e2ef;
}
.cust-inv-detail-table tbody td               { background: #fff; font-size: 13px; }
.cust-inv-detail-table tbody tr:nth-child(odd) td { background: #f8fbff; }

/* ═════ Responsive ══════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .cust-inv-layout                     { grid-template-columns: 1fr; }
  .cust-inv-mini-grid                  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cust-inv-detail-grid                { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cust-inv-detail-controls .rep-select { min-width: 180px; }
}

@media (max-width: 720px) {
  .cust-inv-mini-grid                  { grid-template-columns: 1fr; }
  .cust-inv-alert-meta                 { grid-template-columns: 1fr; }
  .cust-inv-detail-grid                { grid-template-columns: 1fr; }
  .cust-inv-detail-controls            { display: grid; grid-template-columns: 1fr 1fr; }
  .cust-inv-detail-controls .rep-select,
  .cust-inv-detail-controls .form-inp  { min-width: 0; width: 100%; }
}

@media (max-width: 640px) {
  /* Mobile toolbar links uitlijnen + advanced cols toch tonen */
  .cust-inv-table-toolbar { justify-content: flex-start; }
  #custInverterCard.show-advanced .cust-inv-col-advanced { display: table-cell; }
}