/* ── Policies page styles ───────────────────────────── */ .policy-page { max-width: 960px; margin: 0 auto; } .policy-header { margin-bottom: 24px; } .policy-header h1 { margin: 0 0 4px; font-size: 1.5rem; } .policy-subtitle { color: var(--text-secondary, #8b949e); font-size: 0.92rem; margin: 0; } /* ── Org selector ────────────────────────────────────── */ .policy-org-selector { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; } .policy-org-selector label { font-weight: 600; white-space: nowrap; } .policy-org-selector select { flex: 1; max-width: 360px; } /* ── Policy cards ────────────────────────────────────── */ .policy-card { background: var(--bg-secondary, #161b22); border: 1px solid var(--border-primary, #30363d); border-radius: 8px; margin-bottom: 16px; overflow: hidden; } .policy-card-header { display: flex; align-items: center; gap: 12px; padding: 16px 20px; cursor: pointer; user-select: none; } .policy-card-header:hover { background: var(--bg-tertiary, #1c2128); } .policy-card-icon .material-icons { font-size: 24px; color: var(--accent-blue, #58a6ff); } .policy-card-info { flex: 1; } .policy-card-info h3 { margin: 0; font-size: 1rem; } .policy-card-info p { margin: 2px 0 0; font-size: 0.82rem; color: var(--text-secondary, #8b949e); } /* ── Status badge ────────────────────────────────────── */ .policy-status-badge { font-size: 0.78rem; padding: 3px 10px; border-radius: 12px; background: var(--bg-tertiary, #1c2128); color: var(--text-secondary, #8b949e); } .policy-status-badge.configured { background: rgba(63, 185, 80, .15); color: #3fb950; } /* ── Card body ───────────────────────────────────────── */ .policy-card-body { padding: 0 20px 20px; } /* ── Fields ──────────────────────────────────────────── */ .policy-field { margin-bottom: 16px; } .policy-field label { display: block; margin-bottom: 6px; font-size: 0.88rem; color: var(--text-secondary, #8b949e); } .policy-field .form-input { width: 100%; max-width: 400px; } .policy-field textarea.form-input { resize: vertical; font-family: var(--font-mono, 'SF Mono', 'Cascadia Code', 'Consolas', monospace); font-size: 0.82rem; } /* ── Toggle group ────────────────────────────────────── */ .policy-toggle-group { margin-bottom: 16px; } .policy-toggle { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border-primary, #30363d); } .policy-toggle:last-child { border-bottom: none; } .policy-toggle label { font-size: 0.88rem; cursor: pointer; } /* ── Toggle switch ───────────────────────────────────── */ .toggle-switch { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 40px; height: 22px; background: var(--bg-tertiary, #21262d); border-radius: 11px; position: relative; cursor: pointer; outline: none; border: 1px solid var(--border-primary, #30363d); transition: background .2s; flex-shrink: 0; } .toggle-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: var(--text-secondary, #8b949e); border-radius: 50%; transition: transform .2s, background .2s; } .toggle-switch:checked { background: var(--accent-blue, #58a6ff); border-color: var(--accent-blue, #58a6ff); } .toggle-switch:checked::after { transform: translateX(18px); background: #fff; } /* ── Audit entries ───────────────────────────────────── */ .policy-audit-list { max-height: 320px; overflow-y: auto; } .audit-entry { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border-primary, #30363d); font-size: 0.84rem; } .audit-entry:last-child { border-bottom: none; } .audit-time { color: var(--text-secondary, #8b949e); min-width: 140px; font-family: var(--font-mono, monospace); font-size: 0.78rem; } .audit-actor { font-weight: 600; min-width: 80px; } .audit-section.badge { font-size: 0.72rem; padding: 2px 8px; border-radius: 10px; background: var(--accent-blue, #58a6ff); color: #fff; } .audit-detail { flex: 1; color: var(--text-secondary, #8b949e); } /* ── Responsive ──────────────────────────────────────── */ @media (max-width: 768px) { .policy-org-selector { flex-direction: column; align-items: flex-start; } .policy-org-selector select { max-width: 100%; } .policy-field .form-input { max-width: 100%; } .audit-entry { flex-wrap: wrap; } } /* ── Attestation Stats ───────────────────────────────── */ .attestation-stats { display: flex; gap: 16px; margin-bottom: 24px; } .att-stat-card { flex: 1; display: flex; align-items: center; gap: 12px; background: var(--bg-secondary, #161b22); border: 1px solid var(--border-primary, #30363d); border-radius: 8px; padding: 16px 20px; } .att-stat-card .material-icons { font-size: 28px; color: var(--accent-green, #3fb950); } .att-stat-card.warning .material-icons { color: var(--accent-yellow, #d29922); } .att-stat-card.danger .material-icons { color: var(--accent-red, #f85149); } .att-stat-value { font-size: 1.5rem; font-weight: 700; line-height: 1; } .att-stat-label { font-size: 0.82rem; color: var(--text-secondary, #8b949e); margin-top: 2px; } @media (max-width: 768px) { .attestation-stats { flex-direction: column; } }