/* Shared modal shell used by several unrelated views.
 *
 * These eight rules are generic modal chrome (overlay, panel, header, close,
 * body, footer). They lived in settings/sso.css, which only ONE route declares
 * — while four views emit the markup: settings-sso, metric-catalog,
 * vendor-ratings and settings-threat-feeds. The other three rendered their
 * modals completely unstyled: a full-screen overlay with no background, no
 * panel and no layout.
 *
 * Loaded globally from app/index.html alongside the other component sheets,
 * because the markup is emitted by views with no other stylesheet in common —
 * adding settings/sso.css to three unrelated routes would have styled them
 * while cementing a dependency on a settings-specific file.
 *
 * The `sso-` prefix is kept deliberately: renaming it would mean touching the
 * markup in four views at once for no rendering benefit, and the class names
 * are what those views already emit.
 */

.sso-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 9999; }
.sso-modal { background: var(--card-bg); border-radius: 12px; width: 90%; max-width: 600px; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; }
.sso-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--border-color); }
.sso-modal-header h3 { margin: 0; font-size: var(--text-lg, 1.125rem); font-weight: 600; color: var(--text-primary); }
.sso-modal-close { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 4px; }
.sso-modal-close:hover { color: var(--text-primary); }
.sso-modal-body { padding: 24px; overflow-y: auto; flex: 1; }
.sso-modal-footer { padding: 16px 24px; border-top: 1px solid var(--border-color); display: flex; justify-content: flex-end; gap: 12px; }