/* Tecuity Identity Admin -- CSS stack (import order matters) */ @import url('css/variables.css'); @import url('css/typography.css'); @import url('css/layout.css'); @import url('css/responsive.css'); @import url('css/branding.css'); @import url('css/toast.css'); /* Bootstrap Icons font is loaded via the CDN in App.razor's . */ /* Darker border for checkboxes */ .darker-border-checkbox.form-check-input { border-color: #929292; } /* ── User Management Enhancements ─────────────────────────────────── */ /* Page header with action button aligned right */ .page-header { margin-bottom: 1.25rem; } /* Quick action button group — tighter on small screens */ .btn-group.btn-group-sm .btn { padding: 0.2rem 0.45rem; } /* Password strength indicator labels */ .password-strength-weak { color: var(--bs-danger); font-weight: 600; } .password-strength-moderate { color: var(--bs-warning); font-weight: 600; } .password-strength-strong { color: var(--bs-success); font-weight: 600; } /* User history table — highlight danger events */ .history-event-danger { background-color: rgba(220, 53, 69, 0.06); } .history-event-warning { background-color: rgba(255, 193, 7, 0.08); } /* MFA reset fieldset styling */ fieldset.border { border-color: var(--bs-border-color) !important; } fieldset.border legend { float: none; width: auto; color: var(--bs-secondary-color); } /* Modal form — consistent label weight */ .modal-body .fw-semibold { font-weight: 600; } /* Sortable column header buttons */ table thead .btn-link { color: inherit; font-weight: 600; text-decoration: none; } table thead .btn-link:hover { color: var(--bs-primary); text-decoration: underline; } /* ── WCAG 2.1 AA Accessibility Enhancements ───────────────────────── */ /* T4: Skip link — visually hidden until focused (WCAG 2.4.1) */ .skip-link { position: absolute; top: -999px; left: -999px; z-index: 9999; padding: 0.5rem 1rem; background: var(--brand-primary, #1b6ec2); color: #ffffff; font-weight: 600; border-radius: 0 0 0.375rem 0.375rem; text-decoration: none; white-space: nowrap; } .skip-link:focus { top: 0; left: 0; } /* T13: Focus indicators — explicit :focus-visible styles (WCAG 2.4.7, 1.4.11) */ /* Override Bootstrap's outline reset with a compliant 3px outline, 3:1 contrast */ :focus-visible { outline: 3px solid #005fcc !important; outline-offset: 2px !important; box-shadow: none !important; } /* Buttons, links, and form controls need distinct focus rings */ .btn:focus-visible, .btn-close:focus-visible, .form-control:focus-visible, .form-select:focus-visible, .form-check-input:focus-visible, .page-link:focus-visible, .nav-link:focus-visible, .sidebar-nav-link:focus-visible, a:focus-visible { outline: 3px solid #005fcc !important; outline-offset: 2px !important; box-shadow: 0 0 0 4px rgba(0, 95, 204, 0.25) !important; } /* Ensure focus ring is visible on dark sidebar backgrounds */ .app-sidebar :focus-visible, .app-sidebar a:focus-visible, .app-sidebar button:focus-visible { outline: 3px solid #ffffff !important; outline-offset: 2px !important; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.4) !important; } /* T12: Badge bg-secondary contrast fix (WCAG 1.4.3) */ /* Bootstrap bg-secondary (#6c757d) with white text = 2.98:1 — FAILS for small text */ /* Fix: darken background to #495057 → white text = 5.74:1 — PASS */ .badge.bg-secondary { background-color: #495057 !important; color: #ffffff !important; } /* T12: Ensure text-muted and text-secondary use accessible values from variables.css */ .text-muted { color: var(--text-muted, #6b7280) !important; } /* T11: Visually-hidden aria-live regions remain accessible to screen readers */ /* (Bootstrap's .visually-hidden already handles this; this is for belt-and-braces) */ [aria-live] { speak: normal; } /* ── Password Requirements Indicators ─────────────────────────────── */ /* Container for password requirement list */ .password-requirements { margin-top: 0.5rem; } /* Individual requirement item — spacing and smooth transitions */ .requirement { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0; transition: color var(--transition-fast, 150ms ease); } /* Icon transition for smooth state changes */ .requirement i { flex-shrink: 0; transition: color var(--transition-fast, 150ms ease); } /* Password match indicator below confirm password field */ .pwd-match-indicator { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.375rem; font-size: var(--font-size-sm, 12px); font-weight: 500; transition: color var(--transition-fast, 150ms ease); } .pwd-match-indicator i { flex-shrink: 0; transition: color var(--transition-fast, 150ms ease); } /* ============================================================================ Fraud Review - guided walkthrough (timeline, stepper, decision cards) ============================================================================ */ .fraud-timeline { position: relative; margin: 0; padding: 0; } .fraud-timeline-item { position: relative; padding: 0 0 1rem 1.5rem; } .fraud-timeline-item:not(:last-child)::before { content: ""; position: absolute; left: 5px; top: 0.4rem; bottom: -0.25rem; width: 2px; background: var(--bs-border-color, #dee2e6); } .fraud-timeline-dot { position: absolute; left: 0; top: 0.3rem; width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 3px #fff; } .fraud-stepper { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0 0 1rem 0; padding: 0; } .fraud-step { display: flex; align-items: center; gap: 0.5rem; flex: 1 1 0; min-width: 180px; border: 1px solid var(--bs-border-color, #dee2e6); border-radius: 0.5rem; padding: 0.5rem 0.75rem; background: #fff; color: var(--bs-secondary-color, #6c757d); cursor: pointer; text-align: left; transition: border-color 150ms ease, background 150ms ease, color 150ms ease; } .fraud-step:hover:not(:disabled) { border-color: var(--bs-primary, #0d6efd); } .fraud-step:disabled { cursor: default; opacity: 0.65; } .fraud-step.is-active { border-color: var(--bs-primary, #0d6efd); background: rgba(13,110,253,0.06); color: var(--bs-body-color, #212529); } .fraud-step.is-complete .fraud-step-num { background: var(--bs-success, #198754); border-color: var(--bs-success, #198754); color: #fff; } .fraud-step-num { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; flex-shrink: 0; border-radius: 50%; border: 2px solid currentColor; font-weight: 600; font-size: 0.85rem; } .fraud-step.is-active .fraud-step-num { background: var(--bs-primary, #0d6efd); border-color: var(--bs-primary, #0d6efd); color: #fff; } .fraud-step-label { line-height: 1.15; } .fraud-step-label small { display: block; font-size: 0.7rem; opacity: 0.8; } .fraud-summary-banner { border-left: 4px solid var(--bs-secondary, #6c757d); } .fraud-summary-banner.risk-deny { border-left-color: var(--bs-danger, #dc3545); } .fraud-summary-banner.risk-review { border-left-color: var(--bs-warning, #ffc107); } .fraud-summary-banner.risk-allow { border-left-color: var(--bs-success, #198754); } .fraud-decision-card { height: 100%; transition: box-shadow 150ms ease, transform 150ms ease; } .fraud-decision-card:hover { box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,0.1); }