/* =============================================================================
   TOLA S6 — REV-B screen gaps (screen-gaps.js) · dark-mode safe (CSS vars only)
   ============================================================================= */
.sg-card { margin-bottom: 16px; }
.sg-card-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.sg-pad { padding: 10px 16px; }
.sg-link { background: none; border: 0; padding: 0; color: var(--brand-gold); cursor: pointer; text-decoration: underline; font: inherit; }
.sg-link:focus-visible, .sg-kpi[role="button"]:focus-visible, .sg-qf select:focus-visible { outline: 2px solid var(--brand-gold); outline-offset: 2px; }
.sg-actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }

/* AD-02 home */
.sg-scope { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; margin-bottom: 14px; background: var(--surface-color); border: 1px solid var(--border-color); border-radius: var(--radius-md); }
.sg-scope .tola-label { margin: 0; }
.sg-scope .tola-select { width: auto; min-width: 240px; }
.sg-kpi[role="button"] { cursor: pointer; }
.sg-kpi-src { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 11px; color: var(--text-muted); }
.sg-kpi-ok .tola-kpi-value { color: var(--color-ok); }
.sg-kpi-warn .tola-kpi-value { color: var(--color-warn); }
.sg-kpi-danger .tola-kpi-value { color: var(--color-danger); }
.sg-kpi-offline .tola-kpi-value { color: var(--color-offline); }
.sg-kpi-info .tola-kpi-value { color: var(--color-info); }
.sg-home-extras { margin-top: 8px; }
.sg-trend { position: relative; display: flex; align-items: flex-end; gap: 6px; height: 170px; padding: 18px 4px 0; border-bottom: 1px solid var(--border-color); }
.sg-trend-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.sg-trend-b { display: block; width: 70%; max-width: 28px; background: var(--brand-gold); border-radius: 3px 3px 0 0; }
.sg-trend-b.is-alert { background: var(--color-warn); background-image: repeating-linear-gradient(45deg, transparent 0 4px, rgba(0,0,0,.18) 4px 6px); }
.sg-trend-v { font-size: 10px; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; }
.sg-trend-d { font-size: 10px; color: var(--text-muted); margin-top: 4px; white-space: nowrap; }
.sg-trend-target { position: absolute; inset-inline: 0; border-top: 1px dashed var(--color-danger); pointer-events: none; }
.sg-trend-target span { position: absolute; inset-inline-end: 0; top: -16px; font-size: 10px; color: var(--color-danger); background: var(--surface-color); padding: 0 4px; }

/* AD-03 fleet quick filters & bulk */
.sg-qf, .sg-filterbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.sg-filterbar { padding: 10px 14px; border-radius: var(--radius-md); }
.sg-qf-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); }
.sg-qf-item .tola-select, .sg-qf-item .tola-input { width: auto; min-width: 130px; padding: 4px 8px; font-size: 12px; }
.sg-switch input { accent-color: var(--brand-gold); }
.sg-bulk { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.sg-preview { background: var(--surface-alt); border: 1px solid var(--border-color); border-inline-start: 4px solid var(--brand-gold); border-radius: var(--radius-md); padding: 10px 12px; margin: 10px 0; font-size: 13px; display: grid; gap: 6px; }
.sg-idlist { display: flex; flex-wrap: wrap; gap: 6px; max-height: 96px; overflow: auto; }
.sg-idlist bdi { padding: 1px 6px; border: 1px solid var(--border-color); border-radius: 4px; background: var(--surface-color); font-size: 12px; }
.sg-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 14px; }

/* AD-04 unit detail */
.sg-unit-states { display: grid; gap: 8px; margin-bottom: 12px; }
.sg-unit-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.sg-cmdstrip { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; border-radius: var(--radius-md); background: var(--color-info-bg, var(--surface-alt)); border: 1px solid var(--color-info-border, var(--border-color)); font-size: 13px; }
.sg-cmdstrip .tfi-sep { color: var(--text-muted); }

/* AD-06 alerts */
.sg-snooze { font-size: 12px; margin-top: 2px; }

/* AD-15 audit */
.sg-prev { color: var(--text-muted); text-decoration: line-through; text-decoration-color: var(--color-danger); }
.sg-new { font-weight: 600; }

/* AD-16 OTA */
.sg-prog { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--surface-alt); border: 1px solid var(--border-color); margin: 8px 0; }
.sg-prog span { display: block; height: 100%; }
.sg-prog-ok { background: var(--color-ok); }
.sg-prog-fail { background: var(--color-danger); background-image: repeating-linear-gradient(45deg, transparent 0 4px, rgba(255,255,255,.25) 4px 7px); }
.sg-prog-def { background: var(--color-info); }
.sg-prog-legend { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 12px; margin-bottom: 8px; }
.sg-details summary { cursor: pointer; font-size: 13px; color: var(--text-muted); margin: 6px 0; }
.sg-fieldset { border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 8px 12px; margin: 8px 0; }
.sg-fieldset legend { font-size: 12px; color: var(--text-muted); padding: 0 6px; }
.sg-check { display: inline-flex; align-items: center; gap: 6px; margin-inline-end: 14px; font-size: 13px; }
.sg-checks { display: flex; flex-wrap: wrap; gap: 6px 0; margin-top: 8px; }
.sg-seg { display: inline-flex; gap: 6px; margin-top: 8px; }

/* AD-17 integrations */
.sg-int-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.sg-int .tola-card-body { display: grid; gap: 8px; }
.sg-int-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--text-muted); }
.sg-checks-res { border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 8px 10px; background: var(--surface-alt); font-size: 12.5px; }
.sg-checks-res[data-ok="false"] { border-inline-start: 4px solid var(--color-danger); }
.sg-checks-res[data-ok="true"] { border-inline-start: 4px solid var(--color-ok); }
.sg-checks-res ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.sg-checks-res li { display: flex; gap: 8px; align-items: baseline; }

@media (max-width: 720px) { .sg-scope .tola-select { min-width: 0; width: 100%; } .sg-trend-v { display: none; } }