/* ======================================================
   GCI MODULE
   Reference layout: Clinics_Pagalungan_S2/f1/GCI.php
   ====================================================== */
.gci-module { width: 100%; margin: 0 auto; }
.gci-summary-card {
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  background: var(--bg-card, #fff); border: 1px solid var(--border-default, #e8e6df);
  border-radius: var(--radius-lg, 12px); padding: 18px 20px; margin-bottom: 14px;
}
.gci-sum-left, .gci-sum-right { display: flex; align-items: center; gap: 14px; }
.gci-sum-icon {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px;
  background: #fef3c7; color: #f59e0b; font-size: 24px;
}
.gci-sum-info .lbl, .gci-sum-metric .lbl, .gci-hero .lbl {
  color: var(--text-secondary, #888); font-size: 10px; font-weight: 500;
  letter-spacing: .3px; text-transform: uppercase;
}
.gci-sum-info .title { color: var(--text-primary, #222); font-size: 17px; font-weight: 700; }
.gci-sum-info .sub { color: var(--text-secondary, #888); font-size: 11px; margin-top: 2px; }
.gci-sum-right { gap: 28px; }
.gci-sum-metric { min-width: 92px; }
.gci-sum-metric .val { font-size: 20px; font-weight: 700; margin-top: 2px; }
.gci-sum-metric .u, .gci-hero-value .u, .gci-kpi-box .u { color: var(--text-secondary, #888); font-size: 11px; margin-left: 3px; }
.gci-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.gci-grid.is-single { grid-template-columns: minmax(0, 680px); justify-content: center; }
.gci-card {
  background: var(--bg-card, #fff); border: 1px solid var(--border-default, #e8e6df);
  border-radius: var(--radius-lg, 12px); padding: 16px; margin-bottom: 14px;
}
.gci-card.is-active { border-color: #fde68a; }
.gci-card-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.gci-card-title-left { display: flex; align-items: center; gap: 8px; color: var(--text-primary, #222); font-size: 13px; font-weight: 700; }
.gci-card-title .dot { width: 7px; height: 7px; border-radius: 50%; background: #f59e0b; flex: 0 0 auto; }
.gci-device-kind { color: var(--text-secondary, #888); font-size: 10px; font-weight: 500; }
.gci-pill { display: inline-flex; align-items: center; gap: 5px; border-radius: 20px; padding: 4px 9px; font-size: 10px; font-weight: 600; }
.gci-pill.is-ok { background: #dcfce7; color: #15803d; }
.gci-pill.is-idle { background: var(--bg-panel, #fafaf7); color: var(--text-secondary, #888); }
.pill-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.gci-hero { display: flex; justify-content: space-between; align-items: end; padding: 4px 0 12px; }
.gci-hero-value { color: var(--text-primary, #222); font-size: 32px; font-weight: 700; line-height: 1; margin-top: 4px; }
.gci-efficiency { color: var(--text-secondary, #888); font-size: 11px; }
.gci-efficiency strong { color: #16a34a; font-family: var(--font-mono, "DM Mono", monospace); font-size: 15px; margin-left: 4px; }
.gci-efficiency strong span { font-family: var(--font-sans, "DM Sans", sans-serif); font-size: 10px; margin-left: 1px; }
.gci-section-label { border-bottom: 1px solid var(--border-default, #e8e6df); color: var(--text-primary, #222); font-size: 10px; font-weight: 700; letter-spacing: .35px; margin: 10px 0 8px; padding: 8px 0 5px; text-transform: uppercase; }
.gci-table { background: var(--bg-panel, #fafaf7); border-radius: var(--radius-sm, 6px); overflow: hidden; }
.gci-table-head, .gci-table-row { display: grid; grid-template-columns: 1.2fr repeat(3, 1fr); align-items: center; column-gap: 8px; padding: 6px 10px; }
.gci-table-head { color: var(--text-secondary, #888); font-size: 9px; font-weight: 600; text-align: right; text-transform: uppercase; }
.gci-table-head span:first-child, .gci-table-row span:first-child { text-align: left; }
.gci-table-row { border-top: 1px solid var(--border-default, #e8e6df); color: var(--text-primary, #333); font-size: 11px; text-align: right; }
.gci-table-row .mono { font-size: 11px; }
.gci-table-row .pv-power { color: #d97706; font-weight: 600; }
.gci-table-row.is-sum { color: var(--text-primary, #222); font-weight: 700; }
.gci-phase-chip { color: var(--text-secondary, #666); font-size: 10px; font-weight: 700; }
.gci-kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.gci-kpi-box { background: var(--bg-panel, #fafaf7); border-radius: var(--radius-sm, 6px); padding: 9px 10px; min-width: 0; }
.gci-kpi-box .lbl { color: var(--text-secondary, #888); font-size: 9px; text-transform: uppercase; }
.gci-kpi-box .val { font-size: 14px; font-weight: 600; margin-top: 3px; white-space: nowrap; }
.gci-empty-state { color: var(--text-secondary, #888); text-align: center; }
@media (max-width: 1024px) {
  .gci-grid, .gci-grid.is-single { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .gci-summary-card { align-items: flex-start; flex-direction: column; }
  .gci-sum-right { flex-wrap: wrap; gap: 14px 22px; }
  .gci-kpi-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) {
  .gci-card { padding: 12px; }
  .gci-table-head, .gci-table-row { padding-left: 7px; padding-right: 7px; }
  .gci-hero-value { font-size: 27px; }
}