/* 2.4.8 SolarGrade, live: project SolarGrade tab and customer SolarGrade section (web/solargrade.js). */
.sgl .sgl-head { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.sgl .sgl-head h3 { margin: 0; display: flex; align-items: center; gap: 6px; }
.sgl-conn { font-size: var(--fs-xs); padding: 2px 8px; border-radius: var(--r-pill); background: var(--soft); color: var(--muted); border: 1px solid var(--line); }
.sgl-conn.s-connected { background: var(--good-bg); color: var(--good); border-color: var(--good-line); }
.sgl-conn.s-sample, .sgl-conn.s-unverified { background: var(--warn-bg); color: var(--warn); }
.sgl-conn.s-login_failed, .sgl-conn.s-permission, .sgl-conn.s-error { background: var(--bad-bg); color: var(--bad); }
.sgl-fresh { display: inline-flex; align-items: center; gap: var(--sp-2); }
.sgl-site { display: flex; gap: var(--sp-3); align-items: flex-start; justify-content: space-between; flex-wrap: wrap; margin: var(--sp-3) 0; padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel-solid, var(--panel)); }
.sgl-site-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 280px; }
.sgl-site-t b { overflow-wrap: anywhere; }
.sgl-facts { color: var(--muted); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.sgl-note { display: flex; gap: 6px; align-items: flex-start; color: var(--muted); font-size: var(--fs-sm); margin: 0 0 var(--sp-3); }
.sgl-note svg { flex: none; margin-top: 2px; }
.sgl-embed { border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; margin-bottom: var(--sp-3); background: #fff; }
.sgl-embed iframe { display: block; width: 100%; height: min(78vh, 900px); border: 0; }
.sgl-listh { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin: var(--sp-2) 0; }
.sgl-h4 { margin: var(--sp-3) 0 var(--sp-2); font-size: var(--fs-md); }
.sgl-h4 .muted { font-weight: 400; font-size: var(--fs-sm); margin-left: 6px; }
.sgl-visits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sgl-visit { display: grid; grid-template-columns: 104px minmax(0, 1fr) auto auto; gap: var(--sp-3); align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel-solid, var(--panel)); }
.sgl-visit.mine { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.sgl-when { display: flex; flex-direction: column; }
.sgl-when small { color: var(--muted); }
.sgl-what { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sgl-name { font-weight: 600; overflow-wrap: anywhere; }
.sgl-sub { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: var(--fs-sm); color: var(--ink-2); }
.sgl-who::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--good); margin-right: 5px; vertical-align: middle; }
.sgl-who.ext::before { background: var(--faint); }
.sgl-proj { color: var(--muted); }
.sgl-proj .link { text-align: left; padding: 0; }
.sgl-chip { font-size: var(--fs-2xs); font-weight: 600; padding: 1px 6px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-text); vertical-align: middle; }
.sgl-state { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.sgl-pct { position: relative; display: inline-flex; align-items: center; width: 64px; height: 16px; border-radius: var(--r-pill); background: var(--soft); overflow: hidden; font-size: var(--fs-2xs); }
.sgl-pct { border: 1px solid var(--line); }
.sgl-pct span { position: absolute; inset: 0 auto 0 0; background: var(--good-line, var(--good-bg)); }
.sgl-pct b { position: relative; margin: 0 auto; font-weight: 600; }
.sgl-iss { display: inline-flex; gap: 6px; font-size: var(--fs-xs); color: var(--muted); }
.sgl-iss .bad { color: var(--bad); font-weight: 600; }
.sgl-acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.sgl-acts .btn { white-space: nowrap; }
.sgl-reports { margin-top: var(--sp-3); }
.sgl-reports summary { cursor: pointer; font-weight: 600; }
.sgl-reports ul { list-style: none; margin: var(--sp-2) 0 0; padding: 0; }
.sgl-reports li { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: var(--sp-2); padding: 4px 0; border-bottom: 1px solid var(--line); align-items: center; }
.sgl-reports li span:nth-child(2) { overflow-wrap: anywhere; }
.sgl-sites { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sgl-site-pick { display: flex; gap: var(--sp-3); align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel-solid, var(--panel)); }
.sgl-site-pick > div { display: flex; flex-direction: column; min-width: 0; flex: 1 1 260px; }
.sgl-site-pick small { color: var(--muted); overflow-wrap: anywhere; }
.sgl-find .row input { flex: 1 1 260px; min-width: 0; }
.sgl-foot { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-3); }
.sgl-pref { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.sgl-pref button { font-size: var(--fs-xs); padding: 3px 9px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--panel-solid, var(--panel)); color: var(--ink-2); cursor: pointer; }
.sgl-pref button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-text); border-color: var(--accent); }
.sgl-pdf { height: min(74vh, 860px); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; margin-bottom: var(--sp-3); background: #fff; }
.sgl-pdf iframe { width: 100%; height: 100%; border: 0; display: block; }
.sgl-cust .sgl-pref { margin-top: var(--sp-3); }
@media (max-width: 760px) {
  .sgl-visit { grid-template-columns: minmax(0, 1fr) auto; }
  .sgl-visit .sgl-when { grid-column: 1 / -1; flex-direction: row; gap: 6px; }
  .sgl-visit .sgl-state { justify-content: flex-start; }
  .sgl-visit .sgl-acts { grid-column: 1 / -1; justify-content: flex-start; }
  .sgl-reports li { grid-template-columns: minmax(0, 1fr); }
}