/* * FairyAurora v3.0 — Component-Layer * * Styles für die in templates/_components/ definierten Aurora-Primitive: * - _brand * - _cyber_button * - _cyber_input (input + select) * - _status_pill * * Token-Nutzung: ausschließlich CSS-Custom-Properties aus fairy-aurora.css. * Keine Hex-Werte hier — sonst bricht Light/Dark-Switch. */ /* ═══════════════════════════════════════════════════════════════════ Brand ═══════════════════════════════════════════════════════════════════ */ .fa-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--fg); transition: opacity var(--t-fast) var(--ease-out); } .fa-brand:hover { opacity: 0.92; } .fa-brand:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; border-radius: var(--r-sm); } .fa-brand-mark { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-md); background: var(--brand-gradient); box-shadow: 0 0 12px var(--primary-glow), inset 0 0 0 1px rgb(255, 255, 255, 0.2); flex-shrink: 0; animation: fa-brand-breathe 3s ease-in-out infinite; position: relative; } /* Dark-Mode: extra heller Außen-Ring, damit das Logo sich vom dunklen Seiten-Hintergrund-Gradient (surface→bg) klar absetzt. */ html[data-theme="dark"] .fa-brand-mark { box-shadow: 0 0 12px var(--primary-glow), inset 0 0 0 1px rgb(255, 255, 255, 0.3), 0 0 0 1px rgb(var(--primary-rgb), 0.35); } .fa-brand-sparkle { color: var(--on-primary); font-size: 0.55em; line-height: 1; font-weight: 700; text-shadow: 0 1px 2px rgb(0, 0, 0, 0.25); /* design-spec: brand sparkle text lift on colored bg */ } /* ═══════════════════════════════════════════════════════════════════ App-Wide Tech-Backdrop — subtle Circuit-Optics on Schaltkreis-Optik wie Login-Sidebar, dezent app-weit als Hintergrund. Content-Container bleiben transparent, damit BG durchscheint. ═══════════════════════════════════════════════════════════════════ */ body { background-color: var(--bg); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 900' preserveAspectRatio='xMidYMid slice'%3E%3Cg stroke='%230284c7' stroke-width='0.7' fill='none' opacity='0.22'%3E%3Cpath d='M 0 120 L 240 120 L 270 150 L 520 150' stroke-linecap='round'/%3E%3Cpath d='M 1200 260 L 900 260 L 870 290 L 640 290' stroke-linecap='round'/%3E%3Cpath d='M 0 460 L 320 460 L 350 430 L 560 430' stroke-linecap='round'/%3E%3Cpath d='M 1200 640 L 820 640 L 790 670 L 620 670' stroke-linecap='round'/%3E%3Cpath d='M 140 780 L 380 780' stroke-linecap='round'/%3E%3Cpath d='M 700 820 L 1060 820' stroke-linecap='round'/%3E%3C/g%3E%3Cg fill='%237c3aed' opacity='0.5'%3E%3Ccircle cx='240' cy='120' r='2.2'/%3E%3Ccircle cx='520' cy='150' r='2.2'/%3E%3Ccircle cx='900' cy='260' r='2.2'/%3E%3Ccircle cx='640' cy='290' r='2.2'/%3E%3Ccircle cx='320' cy='460' r='2.2'/%3E%3Ccircle cx='560' cy='430' r='2.2'/%3E%3Ccircle cx='820' cy='640' r='2.2'/%3E%3Ccircle cx='620' cy='670' r='2.2'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(circle at 32px 32px, rgb(var(--primary-rgb), 0.22) 0.9px, transparent 1.6px); background-size: cover, 64px 64px; background-position: center center, 0 0; background-repeat: no-repeat, repeat; background-attachment: fixed, fixed; } html[data-theme="dark"] body { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 900' preserveAspectRatio='xMidYMid slice'%3E%3Cg stroke='%2338bdf8' stroke-width='0.7' fill='none' opacity='0.32'%3E%3Cpath d='M 0 120 L 240 120 L 270 150 L 520 150' stroke-linecap='round'/%3E%3Cpath d='M 1200 260 L 900 260 L 870 290 L 640 290' stroke-linecap='round'/%3E%3Cpath d='M 0 460 L 320 460 L 350 430 L 560 430' stroke-linecap='round'/%3E%3Cpath d='M 1200 640 L 820 640 L 790 670 L 620 670' stroke-linecap='round'/%3E%3Cpath d='M 140 780 L 380 780' stroke-linecap='round'/%3E%3Cpath d='M 700 820 L 1060 820' stroke-linecap='round'/%3E%3C/g%3E%3Cg fill='%23a78bfa' opacity='0.6'%3E%3Ccircle cx='240' cy='120' r='2.2'/%3E%3Ccircle cx='520' cy='150' r='2.2'/%3E%3Ccircle cx='900' cy='260' r='2.2'/%3E%3Ccircle cx='640' cy='290' r='2.2'/%3E%3Ccircle cx='320' cy='460' r='2.2'/%3E%3Ccircle cx='560' cy='430' r='2.2'/%3E%3Ccircle cx='820' cy='640' r='2.2'/%3E%3Ccircle cx='620' cy='670' r='2.2'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(circle at 32px 32px, rgb(var(--primary-rgb), 0.22) 1px, transparent 1.8px); } /* Content-Areas transparent, damit Body-Pattern durchscheint */ .app-main, .app-content, main.app-main, main > .container, main > .container-fluid { background: transparent; } /* ═══════════════════════════════════════════════════════════════════ App-Sidebar + Mega-Menu-Panel — Login-Pattern-BG (Gradient + Dots) Macht App-Seitenleiste optisch konsistent mit Login/Setup-Wizard- Left-Panel. Gradient (surface→bg) + subtile Dot-Pattern + Corner-Tick. ═══════════════════════════════════════════════════════════════════ */ .app-sidebar, .mega-menu-panel { background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%), /* Circuit-Traces als SVG-data-url (wie Login-TechBackdrop) */ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 800' preserveAspectRatio='xMidYMid slice'%3E%3Cg stroke='%230284c7' stroke-width='0.55' fill='none' opacity='0.12'%3E%3Cpath d='M 0 160 L 140 160 L 170 190 L 290 190' stroke-linecap='round'/%3E%3Cpath d='M 600 280 L 460 280 L 430 310 L 340 310' stroke-linecap='round'/%3E%3Cpath d='M 60 560 L 180 560 L 210 530 L 330 530' stroke-linecap='round'/%3E%3Cpath d='M 520 620 L 400 620' stroke-linecap='round'/%3E%3C/g%3E%3Cg fill='%237c3aed' opacity='0.3'%3E%3Ccircle cx='140' cy='160' r='1.8'/%3E%3Ccircle cx='290' cy='190' r='1.8'/%3E%3Ccircle cx='460' cy='280' r='1.8'/%3E%3Ccircle cx='340' cy='310' r='1.8'/%3E%3Ccircle cx='180' cy='560' r='1.8'/%3E%3Ccircle cx='330' cy='530' r='1.8'/%3E%3Ccircle cx='400' cy='620' r='1.8'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(circle at 24px 24px, var(--primary-tint) 0.7px, transparent 1.2px); background-size: 100% 100%, 100% 100%, 48px 48px; background-position: 0 0, center center, 0 0; background-repeat: no-repeat, no-repeat, repeat; position: relative; } .app-sidebar > *, .mega-menu-panel > * { position: relative; z-index: 1; /* local stacking-context */ } /* Subtile Corner-Tick-Marker oben-links (Login-Aesthetik) */ .app-sidebar::after { content: ''; position: absolute; top: 10px; left: 10px; width: 10px; height: 10px; border-top: 1px solid var(--primary); border-left: 1px solid var(--primary); opacity: 0.4; pointer-events: none; z-index: 0; /* local stacking-context */ } /* Dark-Mode — intensiver Dot-Pattern + hellere Circuit-Farben für Kontrast */ html[data-theme="dark"] .app-sidebar, html[data-theme="dark"] .mega-menu-panel { background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 800' preserveAspectRatio='xMidYMid slice'%3E%3Cg stroke='%2338bdf8' stroke-width='0.55' fill='none' opacity='0.22'%3E%3Cpath d='M 0 160 L 140 160 L 170 190 L 290 190' stroke-linecap='round'/%3E%3Cpath d='M 600 280 L 460 280 L 430 310 L 340 310' stroke-linecap='round'/%3E%3Cpath d='M 60 560 L 180 560 L 210 530 L 330 530' stroke-linecap='round'/%3E%3Cpath d='M 520 620 L 400 620' stroke-linecap='round'/%3E%3C/g%3E%3Cg fill='%23a78bfa' opacity='0.5'%3E%3Ccircle cx='140' cy='160' r='1.8'/%3E%3Ccircle cx='290' cy='190' r='1.8'/%3E%3Ccircle cx='460' cy='280' r='1.8'/%3E%3Ccircle cx='340' cy='310' r='1.8'/%3E%3Ccircle cx='180' cy='560' r='1.8'/%3E%3Ccircle cx='330' cy='530' r='1.8'/%3E%3Ccircle cx='400' cy='620' r='1.8'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(circle at 24px 24px, rgb(var(--primary-rgb), 0.18) 0.8px, transparent 1.4px); background-size: 100% 100%, 100% 100%, 48px 48px; background-position: 0 0, center center, 0 0; background-repeat: no-repeat, no-repeat, repeat; } /* ═══════════════════════════════════════════════════════════════════ Premium-Card — opt-in Aurora-Login-Pattern-Look für Dashboard-Cards. Usage:

oder als Modifier. Gibt: Gradient-Top-Line + primary-Glow-Shadow + Surface-Gradient-BG. ═══════════════════════════════════════════════════════════════════ */ .fa-card--premium, .card.fa-card--premium { position: relative; background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: 0 0 0 1px var(--primary-glow), 0 8px 24px rgb(0, 0, 0, 0.06); /* design-spec: premium card dark-mode composite with glow */ overflow: hidden; transition: box-shadow var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out); } .fa-card--premium::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--brand-gradient); } .fa-card--premium:hover { box-shadow: 0 0 0 1px var(--primary), 0 10px 28px var(--primary-glow); transform: translateY(-1px); } html[data-theme="dark"] .fa-card--premium { box-shadow: 0 0 0 1px var(--primary-glow), 0 8px 24px rgb(0, 0, 0, 0.3); /* design-spec: premium card dark-mode deep shadow */ } .fa-brand-text { display: flex; flex-direction: column; min-width: 0; } .fa-brand-name { font-family: var(--font-sans); font-weight: 600; letter-spacing: -0.2px; color: var(--fg); line-height: 1.1; white-space: nowrap; } .fa-brand-version { font-family: var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); margin-top: 2px; } @keyframes fa-brand-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); box-shadow: 0 0 16px var(--primary-glow); } } @media (prefers-reduced-motion: reduce) { .fa-brand-mark { animation: none; } } /* ═══════════════════════════════════════════════════════════════════ CyberButton ═══════════════════════════════════════════════════════════════════ */ .fa-cyber-btn { /* Layout */ display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; cursor: pointer; font-family: var(--font-sans); font-weight: 500; text-decoration: none; line-height: 1; white-space: nowrap; user-select: none; /* Default size = --md (matches Aurora-Spec): padding + radius + font-size. Buttons without explicit size modifier still render correctly. */ padding: 9px 16px; font-size: 13px; border-radius: var(--r-md); transition: transform var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); position: relative; } /* Safety-net for variant-less buttons: zero-specificity defaults via :where() so any --primary/--ghost/--danger/etc. variant always wins. Without this, a button with bare class="fa-cyber-btn" would have transparent bg + body fg-color → just text, no button-shape. With this, it looks like a secondary-style button. */ :where(.fa-cyber-btn) { background: transparent; color: var(--fg); border-color: var(--border-strong); } :where(.fa-cyber-btn):hover:not(.is-disabled, [disabled]) { background: var(--surface-2); border-color: var(--primary); } .fa-cyber-btn:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; box-shadow: 0 0 0 3px var(--primary-glow); } .fa-cyber-btn.is-disabled, .fa-cyber-btn[disabled] { opacity: 0.5; cursor: not-allowed; pointer-events: none; } .fa-cyber-btn.is-loading .fa-cyber-btn__label { opacity: 0.5; } /* — Sizes — */ .fa-cyber-btn--sm { padding: 6px 12px; font-size: 12px; border-radius: var(--r-sm); } .fa-cyber-btn--md { padding: 9px 16px; font-size: 13px; border-radius: var(--r-md); } .fa-cyber-btn--lg { padding: 12px 22px; font-size: 15px; border-radius: var(--r-md); } .fa-cyber-btn--full { width: 100%; } /* — Primary: notched-corner (top-left + bottom-right chamfer) — */ .fa-cyber-btn--primary { background: var(--primary-strong); color: var(--on-primary); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; box-shadow: 0 0 12px var(--primary-glow); clip-path: polygon( 8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px ); } .fa-cyber-btn--primary:hover:not(.is-disabled) { background: var(--primary-hover); transform: translateY(-1px); box-shadow: 0 0 20px var(--primary-glow); } .fa-cyber-btn--primary:active:not(.is-disabled) { transform: translateY(0); box-shadow: 0 0 8px var(--primary-glow); } /* — Secondary: transparent + border-strong — */ .fa-cyber-btn--secondary { background: transparent; color: var(--fg); border-color: var(--border-strong); } .fa-cyber-btn--secondary:hover:not(.is-disabled) { background: var(--surface-2); border-color: var(--primary); transform: translateY(-1px); } /* — Accent: violet-tint — */ .fa-cyber-btn--accent { background: var(--accent-tint); color: var(--accent); border-color: var(--accent); box-shadow: 0 0 12px var(--accent-glow); } .fa-cyber-btn--accent:hover:not(.is-disabled) { background: var(--accent-strong); color: var(--on-accent); transform: translateY(-1px); box-shadow: 0 0 20px var(--accent-glow); } /* — Ghost: minimal — */ .fa-cyber-btn--ghost { background: transparent; color: var(--fg-2); padding-left: 10px; padding-right: 10px; } .fa-cyber-btn--ghost:hover:not(.is-disabled) { color: var(--primary); background: var(--primary-tint); } /* — Danger: destructive — */ .fa-cyber-btn--danger { background: transparent; color: var(--danger); border-color: var(--danger); } .fa-cyber-btn--danger:hover:not(.is-disabled) { background: var(--danger-strong); color: var(--on-danger); transform: translateY(-1px); box-shadow: 0 0 15px var(--danger-glow); } /* — Success — */ .fa-cyber-btn--success { background: var(--success-strong); color: var(--on-success); border-color: var(--success-strong); box-shadow: 0 0 12px var(--success-glow); } .fa-cyber-btn--success:hover:not(.is-disabled) { background: var(--success); color: var(--on-success); transform: translateY(-1px); box-shadow: 0 0 20px var(--success-glow); } .fa-cyber-btn--success:active:not(.is-disabled) { transform: translateY(0); box-shadow: 0 0 8px var(--success-glow); } /* — Warning — */ .fa-cyber-btn--warning { background: var(--warning-strong); color: var(--on-warning); border-color: var(--warning-strong); box-shadow: 0 0 12px var(--warning-glow); } .fa-cyber-btn--warning:hover:not(.is-disabled) { background: var(--warning); color: var(--on-warning); transform: translateY(-1px); box-shadow: 0 0 20px var(--warning-glow); } .fa-cyber-btn--warning:active:not(.is-disabled) { transform: translateY(0); box-shadow: 0 0 8px var(--warning-glow); } /* — Loading-Dots — */ .fa-cyber-btn__dots { display: inline-flex; gap: 3px; margin-left: 6px; } .fa-cyber-btn__dots > span { width: 4px; height: 4px; background: currentColor; border-radius: 50%; animation: fa-btn-dots 1.2s var(--ease-in-out) infinite; } .fa-cyber-btn__dots > span:nth-child(2) { animation-delay: 0.15s; } .fa-cyber-btn__dots > span:nth-child(3) { animation-delay: 0.3s; } @keyframes fa-btn-dots { 0%, 100% { opacity: 0.3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } } @media (prefers-reduced-motion: reduce) { .fa-cyber-btn, .fa-cyber-btn__dots > span { animation: none !important; transition: none !important; } } /* ═══════════════════════════════════════════════════════════════════ CyberInput ═══════════════════════════════════════════════════════════════════ */ .fa-cyber-input { display: flex; flex-direction: column; gap: 6px; width: 100%; } .fa-cyber-input__header { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .fa-cyber-input__label { font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); } .fa-cyber-input__req { color: var(--danger); margin-left: 2px; } .fa-cyber-input__alva-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; background: var(--accent-tint); color: var(--accent); border: 1px solid var(--accent); border-radius: var(--r-pill); font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .fa-cyber-input__frame { position: relative; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out); } .fa-cyber-input__frame:hover { border-color: var(--border-strong); } .fa-cyber-input__frame:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow); } /* 4-Corner-Tick-Marker */ .fa-cyber-input__tick { position: absolute; width: 6px; height: 6px; pointer-events: none; border-color: var(--primary); opacity: 0.6; transition: opacity var(--t-fast) var(--ease-out); } .fa-cyber-input__tick--tl { top: -1px; left: -1px; border-top: 1px solid; border-left: 1px solid; } .fa-cyber-input__tick--tr { top: -1px; right: -1px; border-top: 1px solid; border-right: 1px solid; } .fa-cyber-input__tick--bl { bottom: -1px; left: -1px; border-bottom: 1px solid; border-left: 1px solid; } .fa-cyber-input__tick--br { bottom: -1px; right: -1px; border-bottom: 1px solid; border-right: 1px solid; } .fa-cyber-input__frame:focus-within .fa-cyber-input__tick { opacity: 1; } .fa-cyber-input__field { width: 100%; padding: 10px 12px; background: transparent; border: none; outline: none; color: var(--fg); font-family: var(--font-sans); font-size: 14px; line-height: 1.4; border-radius: var(--r-md); } .fa-cyber-input__field::placeholder { color: var(--fg-3); } .fa-cyber-input__field:disabled { cursor: not-allowed; opacity: 0.6; } /* Select-Variant */ .fa-cyber-input--select .fa-cyber-input__field { appearance: none; padding-right: 32px; cursor: pointer; } .fa-cyber-input__chevron { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--fg-3); font-size: 12px; } .fa-cyber-input__hint, .fa-cyber-input__error { font-size: 12px; line-height: 1.4; } .fa-cyber-input__hint { color: var(--fg-3); } .fa-cyber-input__error { color: var(--danger); } .fa-cyber-input.has-error .fa-cyber-input__frame { border-color: var(--danger); } .fa-cyber-input.has-error .fa-cyber-input__tick { border-color: var(--danger); opacity: 0.9; } .fa-cyber-input.has-error .fa-cyber-input__frame:focus-within { box-shadow: 0 0 0 3px var(--danger-glow); } .fa-cyber-input.is-disabled { opacity: 0.6; } /* ── Symfony form-theme additions (fa_cyber_input.html.twig) ────────────── */ /* Bootstrap's .form-control has 0,1,0 specificity and sets its own border, background, box-shadow on :focus (hardcoded #86b7fe). Symfony's form-theme renders inputs with BOTH classes (.form-control .fa-cyber-input__input), so we need to outrank Bootstrap's base rules. Specificity here uses :where() + class-stacking to stay authoritative without resorting to !important: .fa-cyber-input__frame .fa-cyber-input__field, .fa-cyber-input__frame .fa-cyber-input__input → 0,2,0 beats Bootstrap 0,1,0 Also handle Bootstrap classes rendered inside our frame as aliases. */ .fa-cyber-input__frame .fa-cyber-input__field, .fa-cyber-input__frame .fa-cyber-input__input, .fa-cyber-input__frame > .form-control, .fa-cyber-input__frame > .form-select, .fa-cyber-input__frame > textarea { width: 100%; padding: 10px 14px; background-color: transparent; background-image: none; color: var(--fg); border: 0; border-radius: inherit; box-shadow: none; font-family: var(--font-sans); font-size: 14px; line-height: 1.4; outline: none; min-height: auto; height: auto; } .fa-cyber-input__frame .fa-cyber-input__field, .fa-cyber-input__frame .fa-cyber-input__input::placeholder, .fa-cyber-input__frame > .form-control::placeholder { color: var(--fg-3); } /* :focus state: Bootstrap sets border-color + box-shadow with hardcoded blue. Our frame owns the focus-glow — kill Bootstrap's input-level focus. */ .fa-cyber-input__frame .fa-cyber-input__field, .fa-cyber-input__frame .fa-cyber-input__input:focus, .fa-cyber-input__frame > .form-control:focus, .fa-cyber-input__frame > .form-select:focus, .fa-cyber-input__frame > textarea:focus { border: 0; box-shadow: none; outline: none; background-color: transparent; color: var(--fg); } .fa-cyber-input__frame .fa-cyber-input__field, .fa-cyber-input__frame .fa-cyber-input__input:disabled, .fa-cyber-input__frame > .form-control:disabled, .fa-cyber-input__frame > .form-select:disabled { color: var(--fg-3); cursor: not-allowed; background-color: transparent; } /* Select appearance: strip native OS chevron so our frame stays clean */ .fa-cyber-input__frame > select, .fa-cyber-input__frame > .form-select, select.fa-cyber-input__field, select.fa-cyber-input__input { appearance: none; appearance: none; cursor: pointer; /* Custom chevron via background-image so users still see dropdown affordance */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 12px; padding-right: 36px; } /* Bootstrap's .form-floating remnant: if a floating-label wrapper ever lands inside our frame (e.g. legacy template), flatten it — no shrink-anim, no double-padding. */ .fa-cyber-input__frame > .form-floating, .fa-cyber-input__frame > .form-floating > .form-control { padding: 0; height: auto; } .fa-cyber-input__frame > .form-floating > label { display: none; } /* Error list rendered by form_errors block */ .fa-cyber-input__errors { margin: 0; padding: 0; list-style: none; font-size: 12px; color: var(--danger); } /* Checkboxes / Radios: flatten the frame so tick-marks don't surround them */ .fa-cyber-input .form-check, .fa-cyber-input .form-check-inline { padding-top: 4px; } .fa-cyber-input:has(> .fa-cyber-input__frame > .form-check) .fa-cyber-input__frame, .fa-cyber-input:has(> .fa-cyber-input__frame > .form-check-group) .fa-cyber-input__frame { border: 0; padding: 0; box-shadow: none; } /* ─────────────────────────────────────────────────────────────────────────── Aurora v4 — Field-Type Modifiers (file/range/date/time) Added in form-audit Sprint to bring file/range/date/time widgets under the Aurora cyber-input frame instead of bare Bootstrap fallback. ─────────────────────────────────────────────────────────────────────────── */ /* File-Upload Button (browser-native + Aurora-tinted) */ .fa-cyber-input__field--file { padding: 6px 0; cursor: pointer; } .fa-cyber-input__field--file::file-selector-button { background: var(--primary-tint); color: var(--primary-strong); border: 1px solid var(--primary); border-radius: var(--r-sm); padding: 4px 12px; margin-right: 12px; font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; cursor: pointer; transition: background 0.15s ease; } .fa-cyber-input__field--file::file-selector-button:hover { background: var(--primary); color: var(--on-primary); } /* Range-Slider (track + thumb in Aurora colors) */ .fa-cyber-input__field--range { width: 100%; height: 32px; background: transparent; appearance: none; cursor: pointer; } .fa-cyber-input__field--range::-webkit-slider-runnable-track { height: 4px; background: var(--surface-2); border-radius: var(--r-pill); } .fa-cyber-input__field--range::-moz-range-track { height: 4px; background: var(--surface-2); border-radius: var(--r-pill); } .fa-cyber-input__field--range::-webkit-slider-thumb { appearance: none; width: 16px; height: 16px; margin-top: -6px; background: var(--primary); border: 2px solid var(--surface); border-radius: var(--r-pill); box-shadow: 0 0 8px var(--primary-glow); cursor: grab; } .fa-cyber-input__field--range::-moz-range-thumb { width: 16px; height: 16px; background: var(--primary); border: 2px solid var(--surface); border-radius: var(--r-pill); box-shadow: 0 0 8px var(--primary-glow); cursor: grab; } /* Date / Time / DateTime — single-input widget gets standard frame; only group-version needs flex */ .fa-cyber-input__date-group, .fa-cyber-input__time-group, .fa-cyber-input__datetime-group { display: flex; align-items: center; gap: 6px; } .fa-cyber-input__date-group .form-select, .fa-cyber-input__time-group .form-select { padding-right: 28px; /* tighter chevron-pad for compact triple-select */ background-position: right 8px center; } /* ═══════════════════════════════════════════════════════════════════ Status-Pill ═══════════════════════════════════════════════════════════════════ */ .fa-status-pill { display: inline-flex; align-items: center; gap: 7px; /* Default = --md sizing — matches docs/design_system/assets/fairy-aurora-components.css */ padding: 5px 14px; font-size: 10px; border: 1px solid; border-radius: var(--r-pill); font-family: var(--font-mono); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; white-space: nowrap; } /* Padding scale aligned to design-system spec update 2026-05-17. Old prod values (2px 8px / 4px 10px / 6px 14px) were tighter than spec. */ .fa-status-pill--sm { padding: 3px 11px; font-size: 9px; } .fa-status-pill--md { padding: 5px 14px; font-size: 10px; } .fa-status-pill--lg { padding: 7px 18px; font-size: 12px; } .fa-status-pill__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 4px currentColor; flex-shrink: 0; } .fa-status-pill > .bi { font-size: 1em; } /* Tones */ .fa-status-pill--primary { background: var(--primary-tint); color: var(--primary); border-color: var(--primary); } .fa-status-pill--accent { background: var(--accent-tint); color: var(--accent); border-color: var(--accent); } .fa-status-pill--success { background: var(--success-glow); color: var(--success); border-color: var(--success); } .fa-status-pill--warning { background: var(--warning-glow); color: var(--warning-text); border-color: var(--warning); } .fa-status-pill--danger { background: var(--danger-glow); color: var(--danger); border-color: var(--danger); } .fa-status-pill--neutral { background: var(--surface-2); color: var(--fg-2); border-color: var(--border); } /* ═══════════════════════════════════════════════════════════════════ ENTITY-BADGE — ISMS-Entitäts-Marker (Finding, Risk, Control, …) Größer als status-pill, für Listen-Header und Detail-Marker. Komposition: Risk ═══════════════════════════════════════════════════════════════════ */ .fa-entity-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--r-pill); font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid transparent; background: var(--surface-2); color: var(--fg-2); border-color: var(--border); white-space: nowrap; line-height: 1; } .fa-entity-badge .fa-icon { width: 14px; height: 14px; flex-shrink: 0; } /* Entity-Type-Tones (folgen Aurora-Semantik) */ .fa-entity-badge--finding { background: var(--warning-glow); color: var(--warning-text); border-color: var(--warning); } .fa-entity-badge--nonconformity { background: var(--danger-glow); color: var(--danger); border-color: var(--danger); } .fa-entity-badge--risk { background: var(--accent-tint); color: var(--accent); border-color: var(--accent); } .fa-entity-badge--control { background: var(--primary-tint); color: var(--primary); border-color: var(--primary); } .fa-entity-badge--evidence { background: var(--success-glow); color: var(--success); border-color: var(--success); } .fa-entity-badge--policy { background: var(--surface-2); color: var(--fg); border-color: var(--border-strong); } .fa-entity-badge--asset { background: var(--primary-tint); color: var(--primary); border-color: var(--primary); } .fa-entity-badge--incident { background: var(--danger-glow); color: var(--danger); border-color: var(--danger); } .fa-entity-badge--audit { background: var(--accent-tint); color: var(--accent); border-color: var(--accent); } .fa-entity-badge--training { background: var(--success-glow); color: var(--success); border-color: var(--success); } /* ═══════════════════════════════════════════════════════════════════ ENTITY-CARD — Listen-Item-Card mit Entity-Icon links, Meta rechts Komposition:

F-2026-014 Lückenhafte Logging-Konfig

ISO 27001 A.8.15 · fällig 12.05.

Offen

═══════════════════════════════════════════════════════════════════ */ .fa-entity-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding: 14px 18px; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-xl); transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease; position: relative; } .fa-entity-card:hover { border-color: var(--primary); transform: translateY(-1px); box-shadow: 0 4px 16px -8px rgb(0, 0, 0, 0.3); /* design-spec: entity card hover clipped shadow */ } /* Linke Akzent-Leiste optional (für Entity-Type) */ .fa-entity-card--finding { border-left: 3px solid var(--warning); } .fa-entity-card--nonconformity { border-left: 3px solid var(--danger); } .fa-entity-card--risk { border-left: 3px solid var(--accent); } .fa-entity-card--control { border-left: 3px solid var(--primary); } .fa-entity-card--evidence { border-left: 3px solid var(--success); } .fa-entity-card--incident { border-left: 3px solid var(--danger); } .fa-entity-card--audit { border-left: 3px solid var(--accent); } .fa-entity-card__icon { width: 44px; height: 44px; border-radius: var(--r-xl); background: var(--surface-2); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .fa-entity-card__icon .fa-icon { width: 22px; height: 22px; background-color: var(--fg-2); } /* Icon-Color-Variants — kann zusätzlich gesetzt werden */ .fa-entity-card--finding .fa-entity-card__icon .fa-icon { background-color: var(--warning); } .fa-entity-card--nonconformity .fa-entity-card__icon .fa-icon { background-color: var(--danger); } .fa-entity-card--risk .fa-entity-card__icon .fa-icon { background-color: var(--accent); } .fa-entity-card--control .fa-entity-card__icon .fa-icon { background-color: var(--primary); } .fa-entity-card--evidence .fa-entity-card__icon .fa-icon { background-color: var(--success); } .fa-entity-card--incident .fa-entity-card__icon .fa-icon { background-color: var(--danger); } .fa-entity-card--audit .fa-entity-card__icon .fa-icon { background-color: var(--accent); } .fa-entity-card__body { min-width: 0; display: flex; flex-direction: column; gap: 4px; } .fa-entity-card__title { font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--fg); margin: 0; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fa-entity-card__meta { font-family: var(--font-ui); font-size: 12px; color: var(--fg-2); line-height: 1.4; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .fa-entity-card__meta > span + span::before { content: "·"; margin-right: 6px; opacity: 0.5; } .fa-entity-card__status { flex-shrink: 0; display: flex; align-items: center; gap: 8px; } /* Compact-Variante für dichte Listen */ .fa-entity-card--compact { padding: 10px 14px; gap: 12px; } .fa-entity-card--compact .fa-entity-card__icon { width: 32px; height: 32px; border-radius: var(--r-icon); } .fa-entity-card--compact .fa-entity-card__icon .fa-icon { width: 16px; height: 16px; } .fa-entity-card--compact .fa-entity-card__title { font-size: 13px; } .fa-entity-card--compact .fa-entity-card__meta { font-size: 11px; } /* Alva-Character-Styles wandern nach FA-4: assets/styles/alva.css (9-Mood-SVG-Engine mit Aura, Bob, Wings, Face, Decorations, Reduced-Motion) */ /* ═══════════════════════════════════════════════════════════════════ Empty-State mit Alva-Anchor ═══════════════════════════════════════════════════════════════════ */ .fa-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 48px 24px; text-align: center; min-height: 280px; } .fa-empty-state__alva { opacity: 0.95; margin-bottom: 8px; } .fa-empty-state__title { font-family: var(--font-sans); font-size: 18px; font-weight: 600; color: var(--fg); margin: 0; max-width: 440px; line-height: 1.35; } .fa-empty-state__desc { font-family: var(--font-sans); font-size: 14px; color: var(--fg-2); margin: 0; max-width: 480px; line-height: 1.55; } .fa-empty-state__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; } /* ═══════════════════════════════════════════════════════════════════ Sparkline ═══════════════════════════════════════════════════════════════════ */ .fa-sparkline { display: inline-block; vertical-align: middle; } .fa-sparkline--primary { color: var(--primary); } .fa-sparkline--accent { color: var(--accent); } .fa-sparkline--success { color: var(--success); } .fa-sparkline--warning { color: var(--warning); } .fa-sparkline--danger { color: var(--danger); } /* ═══════════════════════════════════════════════════════════════════ KPI-Card — Aurora-Pattern (überschreibt Legacy .kpi-card-Variante) ═══════════════════════════════════════════════════════════════════ */ .fa-kpi-card { position: relative; display: flex; gap: 14px; padding: 18px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out); overflow: hidden; } .fa-kpi-card__topline { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--brand-gradient); } .fa-kpi-card--emphasis { background: linear-gradient(145deg, var(--surface), var(--surface-2)); box-shadow: 0 0 0 1px var(--primary-glow), 0 4px 18px var(--primary-glow); border-color: transparent; } .fa-kpi-card--linked { cursor: pointer; } .fa-kpi-card--linked:hover { border-color: var(--primary); box-shadow: 0 4px 14px var(--primary-glow); transform: translateY(-1px); } .fa-kpi-card__icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0; background: var(--primary-tint); color: var(--primary); border-radius: var(--r-md); font-size: 16px; } .fa-kpi-card--accent .fa-kpi-card__icon { background: var(--accent-tint); color: var(--accent); } .fa-kpi-card--success .fa-kpi-card__icon { background: var(--success-glow); color: var(--success); } .fa-kpi-card--warning .fa-kpi-card__icon { background: var(--warning-glow); color: var(--warning); } .fa-kpi-card--danger .fa-kpi-card__icon { background: var(--danger-glow); color: var(--danger); } .fa-kpi-card__body { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; } .fa-kpi-card__label { font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); } .fa-kpi-card__value { display: baseline; gap: 4px; line-height: 1; } .fa-kpi-card__number { font-family: var(--font-sans); font-size: 30px; font-weight: 600; color: var(--fg); letter-spacing: -0.02em; } .fa-kpi-card__unit { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); margin-left: 4px; letter-spacing: 0.06em; text-transform: uppercase; } .fa-kpi-card__delta { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; margin-top: 2px; } .fa-kpi-card__delta.trend-up { color: var(--success); } .fa-kpi-card__delta.trend-down { color: var(--danger); } .fa-kpi-card__hint, .fa-kpi-card__hint-only { font-family: var(--font-sans); font-size: 11px; color: var(--fg-3); font-weight: 400; } .fa-kpi-card__sparkline { margin-top: 6px; margin-left: -4px; } .fa-kpi-card__link { align-self: flex-start; color: var(--fg-3); text-decoration: none; font-size: 18px; transition: color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out); } .fa-kpi-card__link:hover { color: var(--primary); transform: translateX(2px); } /* ═══════════════════════════════════════════════════════════════════ Flash-Messages + Aurora-Alert ═══════════════════════════════════════════════════════════════════ */ .fa-flash-messages { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; } .fa-flash-messages:empty { display: none; } .fa-alert { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--primary); border-radius: var(--r-md); position: relative; animation: fa-alert-enter var(--t-slow) var(--ease-out); } @keyframes fa-alert-enter { from { opacity: 0; } to { opacity: 1; } } .fa-alert.is-dismissing { animation: fa-alert-exit var(--t-base) var(--ease-in-out) forwards; } @keyframes fa-alert-exit { to { opacity: 0; transform: translateX(20px); max-height: 0; margin: 0; padding-top: 0; padding-bottom: 0; } } @media (prefers-reduced-motion: reduce) { .fa-alert, .fa-alert.is-dismissing { animation: none; } } .fa-alert__icon { font-size: 18px; line-height: 1.2; flex-shrink: 0; margin-top: 1px; } .fa-alert__alva { flex-shrink: 0; margin-top: -2px; } .fa-alert__body { flex: 1; min-width: 0; } .fa-alert__title { font-family: var(--font-sans); font-weight: 600; font-size: 14px; color: var(--fg); margin-bottom: 2px; } .fa-alert__message{ font-family: var(--font-sans); font-size: 13px; line-height: 1.5; color: var(--fg); } .fa-alert__actions{ margin-top: 8px; display: flex; gap: 8px; } .fa-alert__close { background: transparent; border: none; color: var(--fg-3); font-size: 22px; line-height: 1; padding: 0 4px; cursor: pointer; transition: color var(--t-fast) var(--ease-out); align-self: flex-start; } .fa-alert__close:hover { color: var(--fg); } /* Tone-Variants */ .fa-alert--primary { border-left-color: var(--primary); } .fa-alert--primary .fa-alert__icon { color: var(--primary); } .fa-alert--info { border-left-color: var(--primary); background: var(--primary-tint); } .fa-alert--info .fa-alert__icon { color: var(--primary); } .fa-alert--success { border-left-color: var(--success); background: var(--success-glow); } .fa-alert--success .fa-alert__icon { color: var(--success); } .fa-alert--warning { border-left-color: var(--warning); background: var(--warning-glow); } .fa-alert--warning .fa-alert__icon { color: var(--warning); } .fa-alert--warning .fa-alert__message { color: var(--warning-text); } .fa-alert--danger { border-left-color: var(--danger); background: var(--danger-glow); } .fa-alert--danger .fa-alert__icon { color: var(--danger); } /* Modifier variants used by _components/_alert.html.twig macro: --dismissible reserves space for close-button (right-side padding); --with-alva pulls the alva-illustration column to the left. */ .fa-alert--dismissible { padding-right: 36px; position: relative; } .fa-alert--with-alva { gap: 16px; align-items: flex-start; } .fa-alert--with-alva .fa-alert__alva { width: 56px; height: 56px; } /* Toast-Variant (stacked top-right, Progress-Bar) */ .fa-alert--toast { min-width: 320px; max-width: 420px; box-shadow: 0 4px 18px rgb(0, 0, 0, 0.15); /* design-spec: alert toast elevation singular */ position: relative; padding-bottom: 14px; } .fa-alert__progress { position: absolute; left: 0; bottom: 0; height: 2px; background: currentColor; opacity: 0.4; animation: fa-alert-progress linear forwards; } @keyframes fa-alert-progress { from { width: 100%; } to { width: 0%; } } @media (prefers-reduced-motion: reduce) { .fa-alert__progress { animation: none; width: 100%; } } /* Toast-Container (bleibt .toast-container für Kompat, styled nach Aurora) */ .toast-container { position: fixed; top: 20px; right: 20px; z-index: var(--z-toast, 9999); display: flex; flex-direction: column; gap: 10px; pointer-events: none; } .toast-container > * { pointer-events: auto; } @media (max-width: 639.98px) { .toast-container { top: 10px; right: 10px; left: 10px; } .fa-alert--toast { min-width: 0; max-width: none; } } /* ═══════════════════════════════════════════════════════════════════ Mode-Switch (3-State Light / Dark / System) ═══════════════════════════════════════════════════════════════════ */ .fa-mode-switch { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: transparent; border: 1px solid var(--border); border-radius: var(--r-md); color: var(--fg-2); cursor: pointer; position: relative; transition: border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out); } .fa-mode-switch:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-tint); } .fa-mode-switch:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; } .fa-mode-switch__icon { font-size: 16px; line-height: 1; position: absolute; opacity: 0; transform: scale(0.6) rotate(-30deg); transition: opacity var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out); } .fa-mode-switch[data-current-mode="light"] .fa-mode-switch__icon--light, .fa-mode-switch[data-current-mode="dark"] .fa-mode-switch__icon--dark, .fa-mode-switch[data-current-mode="system"] .fa-mode-switch__icon--system { opacity: 1; transform: scale(1) rotate(0); } @media (prefers-reduced-motion: reduce) { .fa-mode-switch__icon { transition: opacity var(--t-instant); transform: none; } } /* ═══════════════════════════════════════════════════════════════════ Topbar-Layout-Adjustments (FA-3 Shell) ═══════════════════════════════════════════════════════════════════ */ .header-system-status { display: inline-flex; align-items: center; } .header-alva { display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; } .header-actions { gap: 10px !important; } .header-logo { min-width: 0; } /* ═══════════════════════════════════════════════════════════════════ Step-Header (Setup-Wizard Right-Panel) ═══════════════════════════════════════════════════════════════════ */ .fa-step-header { margin-bottom: 20px; } .fa-step-header__meta { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3); } .fa-step-header__dot { margin: 0 4px; color: var(--primary); } .fa-step-header__title { font-family: var(--font-sans); font-size: 24px; font-weight: 600; letter-spacing: -0.5px; color: var(--fg); margin: 8px 0 0; line-height: 1.2; } .fa-step-header__sub { font-family: var(--font-sans); font-size: 13px; color: var(--fg-2); margin: 10px 0 0; line-height: 1.55; } /* ═══════════════════════════════════════════════════════════════════ CheckRow — Status + Label + Value + Hint ═══════════════════════════════════════════════════════════════════ */ .fa-check-row { display: grid; grid-template-columns: 20px 1fr auto; gap: 10px; align-items: center; padding: 8px 12px; background: var(--surface); border: 1px solid var(--border); border-left: 2px solid var(--border); border-radius: var(--r-sm); margin-bottom: 6px; } .fa-check-row__glyph { font-family: var(--font-mono); font-weight: 700; font-size: 13px; text-align: center; } .fa-check-row__label { font-family: var(--font-sans); font-size: 12.5px; font-weight: 500; color: var(--fg); } .fa-check-row__hint { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-3); margin-top: 1px; } .fa-check-row__value { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; } .fa-check-row--ok { border-left-color: var(--success); } .fa-check-row--ok .fa-check-row__glyph, .fa-check-row--ok .fa-check-row__value { color: var(--success); } .fa-check-row--warn { border-left-color: var(--warning); } .fa-check-row--warn .fa-check-row__glyph, .fa-check-row--warn .fa-check-row__value { color: var(--warning-text); } .fa-check-row--err { border-left-color: var(--danger); } .fa-check-row--err .fa-check-row__glyph, .fa-check-row--err .fa-check-row__value { color: var(--danger); } .fa-check-row--idle .fa-check-row__glyph { color: var(--fg-3); } .fa-check-row--idle .fa-check-row__value { color: var(--fg-2); } /* ═══════════════════════════════════════════════════════════════════ ToggleCard — Checkbox-Card ═══════════════════════════════════════════════════════════════════ */ .fa-toggle-card { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); cursor: pointer; position: relative; transition: border-color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out); } .fa-toggle-card:hover:not(.is-disabled) { border-color: var(--border-strong); } .fa-toggle-card.is-on { background: var(--primary-tint); border-color: var(--primary); box-shadow: 0 0 10px var(--primary-glow), inset 0 0 0 1px var(--primary-tint); } .fa-toggle-card.is-disabled { opacity: 0.5; cursor: not-allowed; } .fa-toggle-card__input { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; } .fa-toggle-card__box { width: 14px; height: 14px; border-radius: var(--r-sm); border: 1px solid var(--border-strong); background: transparent; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; transition: background-color var(--t-fast), border-color var(--t-fast); color: var(--on-primary); } .fa-toggle-card__box svg { display: block; opacity: 0; transition: opacity var(--t-fast); } .fa-toggle-card.is-on .fa-toggle-card__box, .fa-toggle-card:has(.fa-toggle-card__input:checked) .fa-toggle-card__box { background: var(--primary); border-color: var(--primary); } .fa-toggle-card.is-on .fa-toggle-card__box svg, .fa-toggle-card:has(.fa-toggle-card__input:checked) .fa-toggle-card__box svg { opacity: 1; } .fa-toggle-card:has(.fa-toggle-card__input:checked) { border-color: var(--primary); background: var(--primary-tint); } .fa-toggle-card__input:focus-visible + .fa-toggle-card__box, .fa-toggle-card:has(.fa-toggle-card__input:focus-visible) .fa-toggle-card__box { outline: 2px solid var(--primary); outline-offset: 2px; } .fa-toggle-card__body { flex: 1; min-width: 0; } .fa-toggle-card__title { color: var(--fg); font-family: var(--font-sans); font-size: 12.5px; font-weight: 500; display: flex; align-items: center; gap: 6px; } .fa-toggle-card__badge { font-family: var(--font-mono); font-size: 8px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); padding: 1px 4px; background: var(--accent-tint); border-radius: var(--r-sm); } .fa-toggle-card__sub { color: var(--fg-3); font-family: var(--font-sans); font-size: 10.5px; margin-top: 2px; line-height: 1.4; } /* ═══════════════════════════════════════════════════════════════════ NavBar (Wizard-Navigation) ═══════════════════════════════════════════════════════════════════ */ .fa-nav-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); } .fa-nav-bar__left, .fa-nav-bar__right { display: flex; align-items: center; gap: 10px; } /* ═══════════════════════════════════════════════════════════════════ TechBackdrop ═══════════════════════════════════════════════════════════════════ */ .fa-tech-backdrop { position: absolute; inset: 0; pointer-events: none; } /* ═══════════════════════════════════════════════════════════════════ OnboardingFairy Compound (Alva + Aura + Orbit) ═══════════════════════════════════════════════════════════════════ */ .fa-onboarding-fairy { position: relative; width: 220px; height: 220px; display: flex; align-items: center; justify-content: center; } .fa-onboarding-fairy__aura { position: absolute; inset: 36px; background: radial-gradient(circle, var(--primary-glow) 0%, transparent 70%); filter: blur(8px); animation: fa-onboard-pulse 3.5s ease-in-out infinite; border-radius: 50%; pointer-events: none; } .fa-onboarding-fairy--happy .fa-onboarding-fairy__aura, .fa-onboarding-fairy--celebrating .fa-onboarding-fairy__aura, .fa-onboarding-fairy--working .fa-onboarding-fairy__aura { background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%); } .fa-onboarding-fairy__orbit { position: absolute; inset: 0; animation: fa-onboard-orbit 18s linear infinite; } .fa-onboarding-fairy__character { position: relative; z-index: 1; /* local stacking-context */ transition: transform var(--t-magic) var(--ease-out); } .fa-onboarding-fairy--happy .fa-onboarding-fairy__character { transform: rotate(4deg); } .fa-onboarding-fairy--focused .fa-onboarding-fairy__character { transform: rotate(-2deg); } .fa-onboarding-fairy--working .fa-onboarding-fairy__character { transform: rotate(6deg); } @keyframes fa-onboard-pulse { 0%, 100% { opacity: 0.55; transform: scale(1); } 50% { opacity: 0.9; transform: scale(1.1); } } @keyframes fa-onboard-orbit { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .fa-onboarding-fairy__aura, .fa-onboarding-fairy__orbit { animation: none; } .fa-onboarding-fairy__character { transition: none; } } /* ═══════════════════════════════════════════════════════════════════ Typewriter ═══════════════════════════════════════════════════════════════════ */ .fa-typewriter { display: inline; position: relative; } .fa-typewriter__text { white-space: pre-wrap; } .fa-typewriter__caret { display: inline-block; color: var(--accent); animation: fa-typewriter-caret 0.8s step-end infinite; margin-left: 1px; } @keyframes fa-typewriter-caret { 50% { opacity: 0; } } .fa-typewriter__skip { display: inline-block; margin-left: 12px; padding: 2px 8px; background: transparent; border: 1px solid var(--border); border-radius: var(--r-pill); font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.06em; color: var(--fg-3); cursor: pointer; transition: color var(--t-fast), border-color var(--t-fast); } .fa-typewriter__skip:hover { color: var(--primary); border-color: var(--primary); } .fa-typewriter__skip[hidden] { display: none; } @media (prefers-reduced-motion: reduce) { .fa-typewriter__caret { animation: none; display: none; } } /* ═══════════════════════════════════════════════════════════════════ Setup-Wizard 2-Col Layout (Left 480 / Right flex) ═══════════════════════════════════════════════════════════════════ */ .fa-setup-shell { display: flex; min-height: 100vh; background: var(--bg); } .fa-setup-left { width: 480px; flex-shrink: 0; position: relative; background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 36px; overflow: hidden; } .fa-setup-left__tick { position: absolute; width: 12px; height: 12px; z-index: 2; /* local stacking-context */ pointer-events: none; } .fa-setup-left__tick--tl { top: 16px; left: 16px; border-top: 1px solid var(--primary); border-left: 1px solid var(--primary); } .fa-setup-left__tick--tr { top: 16px; right: 16px; border-top: 1px solid var(--primary); border-right: 1px solid var(--primary); } .fa-setup-left__tick--bl { bottom: 16px; left: 16px; border-bottom: 1px solid var(--primary); border-left: 1px solid var(--primary); } .fa-setup-left__tick--br { bottom: 16px; right: 16px; border-bottom: 1px solid var(--primary); border-right: 1px solid var(--primary); } .fa-setup-left__brand { position: relative; z-index: 1; /* local stacking-context */ } .fa-setup-left__middle { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; z-index: 1; /* local stacking-context */ gap: 14px; text-align: center; } .fa-setup-left__alva-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px; } .fa-setup-left__alva-label::before, .fa-setup-left__alva-label::after { content: ''; width: 14px; height: 1px; background: var(--accent); display: inline-block; } .fa-setup-left__line { color: var(--fg); font-family: var(--font-sans); font-size: 19px; font-weight: 500; line-height: 1.35; letter-spacing: -0.3px; min-height: 50px; max-width: 340px; } .fa-setup-left__sub { color: var(--fg-3); font-size: 12.5px; margin-top: 8px; font-family: var(--font-sans); line-height: 1.5; font-style: italic; max-width: 340px; } .fa-setup-left__phase { position: relative; z-index: 1; /* local stacking-context */ display: flex; flex-direction: column; gap: 12px; } .fa-setup-phase__head { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3); } .fa-setup-phase__head-phase { color: var(--primary); } .fa-setup-phase__bars { display: flex; gap: 3px; } .fa-setup-phase__bar { flex: 1; height: 3px; background: var(--surface-3); border-radius: 1px; /* design-spec: hairline mini-radius */ } .fa-setup-phase__bar.is-done { background: var(--primary); opacity: 0.7; } .fa-setup-phase__bar.is-active { background: var(--primary); box-shadow: 0 0 8px var(--primary-glow); } .fa-setup-phase__labels { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; color: var(--fg-3); text-transform: uppercase; } .fa-setup-phase__labels span.is-on { color: var(--fg); font-weight: 600; } .fa-setup-right { flex: 1; min-width: 0; position: relative; display: flex; flex-direction: column; background: var(--bg); padding: 32px 48px; overflow: auto; } .fa-setup-right__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-3); } .fa-setup-right__head-status { display: inline-flex; align-items: center; gap: 8px; } .fa-setup-right__status-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--success); box-shadow: 0 0 6px var(--success-glow); } .fa-setup-right__body { flex: 1; display: flex; flex-direction: column; } .fa-setup-right__content { flex: 1; } /* Mobile < lg: Left-Panel → Top-Strip */ @media (max-width: 1023.98px) { .fa-setup-shell { flex-direction: column; } .fa-setup-left { width: 100%; padding: 20px 24px; border-right: none; border-bottom: 1px solid var(--border); } .fa-setup-left__middle { flex-direction: row; gap: 16px; text-align: left; } .fa-onboarding-fairy { width: 80px; height: 80px; flex-shrink: 0; } .fa-onboarding-fairy__orbit { display: none; } .fa-setup-left__line { font-size: 14px; min-height: 0; max-width: none; } .fa-setup-left__sub { display: none; } .fa-setup-right { padding: 24px; } } /* ═══════════════════════════════════════════════════════════════════ Setup-Welcome Step (Proof-of-Concept) ═══════════════════════════════════════════════════════════════════ */ .fa-setup-welcome-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 24px 0; } @media (max-width: 767.98px) { .fa-setup-welcome-grid { grid-template-columns: 1fr; } } .fa-setup-welcome-col__title { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--primary); margin: 0 0 12px; display: flex; align-items: center; gap: 8px; } .fa-setup-welcome-info { background: var(--primary-tint); border: 1px solid var(--primary); border-radius: var(--r-md); padding: 16px 18px; margin: 24px 0; } .fa-setup-welcome-info__title { font-family: var(--font-sans); font-size: 14px; font-weight: 600; color: var(--fg); margin: 0 0 8px; display: flex; align-items: center; gap: 8px; } .fa-setup-welcome-info__desc { font-size: 13px; color: var(--fg-2); margin: 0 0 10px; line-height: 1.55; } .fa-setup-welcome-info__list { margin: 0; padding-left: 20px; font-size: 13px; color: var(--fg-2); line-height: 1.7; } /* ═══════════════════════════════════════════════════════════════════ Legacy Setup-Step Content Neutralisierung Legacy-Templates haben .container mt-5 + .row + .col-md-10 im step_content — zusammen mit fa-setup-right__padding ist das doppelt. Reset damit Bootstrap-Container nicht extra Constraints auflegen. ═══════════════════════════════════════════════════════════════════ */ .fa-setup-right__content > .container, .fa-setup-right__content > .container-fluid, .fa-setup-right__content .fa-setup-legacy-wrapper > .container { max-width: none; margin: 0; padding: 0; width: 100%; } .fa-setup-right__content > .container > .row, .fa-setup-right__content .fa-setup-legacy-wrapper > .container > .row { margin: 0; } .fa-setup-right__content > .container > .row > [class*="col-"], .fa-setup-right__content .fa-setup-legacy-wrapper > .container > .row > [class*="col-"] { max-width: none; padding: 0; flex: 0 0 100%; } /* Legacy mt-5 im setup-context → kein extra top-Margin (Layout hat Padding) */ .fa-setup-right__content > .container.mt-5, .fa-setup-right__content .fa-setup-legacy-wrapper > .container.mt-5 { margin-top: 0 !important; } /* ═══════════════════════════════════════════════════════════════════ Deep-Rewrite Setup-Step Patterns (FA-5b) ═══════════════════════════════════════════════════════════════════ */ /* Admin-User + frameworks 2-col Form-Grid */ .fa-setup-form { display: flex; flex-direction: column; gap: 14px; } .fa-setup-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 639.98px) { .fa-setup-form__grid { grid-template-columns: 1fr; } } .fa-setup-form__col { display: flex; flex-direction: column; gap: 6px; } /* Section-Title (Mono-Uppercase, Primary-Color) */ .fa-setup-section-title { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--primary); margin: 20px 0 10px; display: flex; align-items: center; gap: 8px; } .fa-setup-section-title i { font-size: 14px; } /* Toggle-Card-Grid für Module + Framework-Selection */ .fa-toggle-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; } @media (max-width: 767.98px) { .fa-toggle-card-grid { grid-template-columns: 1fr; } } /* Toggle-Card erweitert für Module-Meta (Dependencies + Required-By) */ .fa-toggle-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 6px; font-family: var(--font-sans); font-size: 10.5px; color: var(--fg-3); } .fa-toggle-card__meta i { font-size: 12px; } /* Bucket-spezifische Variants (mandatory/recommended/optional) */ .fa-toggle-card--bucket-mandatory { border-left: 4px solid var(--danger); } .fa-toggle-card--bucket-recommended { border-left: 4px solid var(--warning); } .fa-toggle-card--bucket-optional { border-left: 4px solid var(--border-strong); } .fa-toggle-card__reason { margin-top: 8px; padding: 6px 8px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-sm); font-size: 11px; color: var(--fg-2); line-height: 1.5; } .fa-toggle-card__reason i { color: var(--warning); margin-right: 4px; } /* Bucket-Header (Pills + Hint-Text) */ .fa-setup-bucket-header { display: flex; align-items: center; gap: 10px; margin: 20px 0 10px; flex-wrap: wrap; } .fa-setup-bucket-hint { font-size: 12px; color: var(--fg-3); font-style: italic; } /* Summary-Bar unten (modules selected count) */ .fa-setup-modules-summary { display: flex; align-items: center; gap: 10px; margin: 20px 0; padding: 14px 16px; background: var(--primary-tint); border: 1px solid var(--primary); border-radius: var(--r-md); font-size: 13px; color: var(--fg); } .fa-setup-modules-summary i { font-size: 16px; color: var(--primary); } /* ═══════════════════════════════════════════════════════════════════ Step11 Complete — Celebration-Layout ═══════════════════════════════════════════════════════════════════ */ .fa-setup-complete { display: flex; flex-direction: column; gap: 24px; } .fa-setup-complete__hero { text-align: center; padding: 20px 0 10px; } .fa-setup-complete__title { font-family: var(--font-sans); font-size: 28px; font-weight: 600; color: var(--fg); margin: 16px 0 8px; letter-spacing: -0.5px; } .fa-setup-complete__subtitle { font-size: 14px; color: var(--fg-2); margin: 0; line-height: 1.55; } .fa-setup-complete__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } @media (max-width: 1023.98px) { .fa-setup-complete__stats { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 639.98px) { .fa-setup-complete__stats { grid-template-columns: 1fr; } } .fa-setup-complete__section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 16px 18px; } .fa-setup-complete__section-title { font-family: var(--font-sans); font-size: 14px; font-weight: 600; color: var(--fg); margin: 0 0 10px; display: flex; align-items: center; gap: 8px; } .fa-setup-complete__section-title i { color: var(--primary); font-size: 16px; } .fa-setup-complete__next-steps { margin: 0; padding-left: 20px; color: var(--fg-2); font-size: 13px; line-height: 1.7; } .fa-setup-complete__next-steps li { margin-bottom: 4px; } .fa-setup-complete__actions { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; } .fa-setup-complete__secondary-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } @media (max-width: 639.98px) { .fa-setup-complete__secondary-actions { grid-template-columns: 1fr; } } /* ═══════════════════════════════════════════════════════════════════ Auth-Layout (Login / MFA / Password-Reset / Verify-Email) ═══════════════════════════════════════════════════════════════════ */ .fa-auth-body { margin: 0; background: var(--bg); min-height: 100vh; color: var(--fg); font-family: var(--font-sans); } .fa-auth-shell { display: flex; min-height: 100vh; } .fa-auth-left { width: 480px; flex-shrink: 0; position: relative; background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 36px; overflow: hidden; } .fa-auth-left__brand { position: relative; z-index: 1; /* local stacking-context */ } .fa-auth-left__middle { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; z-index: 1; /* local stacking-context */ gap: 14px; text-align: center; } .fa-auth-left__line { color: var(--fg); font-family: var(--font-sans); font-size: 20px; font-weight: 500; line-height: 1.35; letter-spacing: -0.3px; max-width: 340px; min-height: 30px; } .fa-auth-left__sub { color: var(--fg-3); font-size: 12.5px; margin-top: 8px; font-family: var(--font-sans); line-height: 1.5; font-style: italic; max-width: 340px; } .fa-auth-left__footer { position: relative; z-index: 1; /* local stacking-context */ font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; color: var(--fg-3); text-align: center; } .fa-auth-left__footer p { margin: 0; } .fa-auth-right { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; padding: 32px; background: var(--bg); } .fa-auth-right__inner { width: 100%; max-width: 420px; } /* Form-Inhalte */ .fa-auth-form { display: flex; flex-direction: column; gap: 14px; } .fa-auth-form__head { margin-bottom: 10px; } .fa-auth-form__eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--primary); display: inline-flex; align-items: center; gap: 6px; } .fa-auth-form__title { font-family: var(--font-sans); font-size: 26px; font-weight: 600; letter-spacing: -0.5px; color: var(--fg); margin: 6px 0 0; line-height: 1.2; } .fa-auth-form__desc { font-size: 13px; color: var(--fg-2); margin: 10px 0 0; line-height: 1.55; } .fa-auth-form__form { display: flex; flex-direction: column; gap: 14px; } .fa-auth-form__help { font-size: 12px; color: var(--fg-3); text-align: center; margin: 8px 0 0; } .fa-auth-remember { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-size: 13px; color: var(--fg-2); cursor: pointer; user-select: none; } .fa-auth-remember input { accent-color: var(--primary); } .fa-auth-form__divider { display: flex; align-items: center; gap: 10px; margin: 6px 0; color: var(--fg-3); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; } .fa-auth-form__divider::before, .fa-auth-form__divider::after { content: ''; flex: 1; height: 1px; background: var(--border); } .fa-auth-form__oauth { display: flex; flex-direction: column; gap: 8px; } .fa-auth-oauth-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 9px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); font-family: var(--font-sans); font-size: 13px; font-weight: 500; color: var(--fg); text-decoration: none; transition: border-color var(--t-fast), background-color var(--t-fast); } .fa-auth-oauth-btn:hover { border-color: var(--primary); background: var(--primary-tint); } .fa-auth-oauth-btn__logo { flex-shrink: 0; } .fa-auth-details { font-family: var(--font-sans); font-size: 12.5px; color: var(--fg-2); } .fa-auth-details summary { cursor: pointer; color: var(--primary); padding: 4px 0; font-weight: 500; } .fa-auth-details summary:hover { color: var(--primary-hover); } .fa-auth-details__body { margin: 6px 0 0; padding: 8px 10px; background: var(--surface-2); border-radius: var(--r-sm); color: var(--fg-3); line-height: 1.5; } .fa-auth-form__footer-link { text-align: center; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--border); } .fa-auth-cancel-link { display: inline-flex; align-items: center; gap: 6px; color: var(--fg-3); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; transition: color var(--t-fast); } .fa-auth-cancel-link:hover { color: var(--danger); } /* Mobile < lg: Left-Panel → Top-Strip */ @media (max-width: 1023.98px) { .fa-auth-shell { flex-direction: column; } .fa-auth-left { width: 100%; padding: 20px 24px; border-right: none; border-bottom: 1px solid var(--border); } .fa-auth-left__middle { flex-direction: row; gap: 16px; text-align: left; padding: 8px 0; } .fa-auth-left .fa-onboarding-fairy { width: 80px; height: 80px; flex-shrink: 0; } .fa-auth-left .fa-onboarding-fairy__orbit { display: none; } .fa-auth-left__line { font-size: 15px; min-height: 0; max-width: none; } .fa-auth-left__sub { display: none; } .fa-auth-left__footer { display: none; } } /* ═══════════════════════════════════════════════════════════════════ Bridge-Migration: Komponenten-Regeln aus fairy-aurora-bridge.css (Ehemals letzter Layer; hier weiterhin gültig als Aurora-native Regeln) ═══════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════ Globale Typografie-Migration: body/html/form-elements auf Inter ═══════════════════════════════════════════════════════════════════ */ body, input, select, textarea, button { font-family: var(--font-sans); color: var(--fg); } code, kbd, samp, pre, .font-mono, .mono, [class*="badge"] .mono, small.mono { font-family: var(--font-mono); } /* ═══════════════════════════════════════════════════════════════════ Aurora-Typografie: h1–h6, p, strong, .lead, .display-* Setzt Aurora-Font + Farbe für alle Überschriften global (höchste Cascade-Priorität: bridge lädt zuletzt). ═══════════════════════════════════════════════════════════════════ */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-sans); font-weight: 600; color: var(--fg); letter-spacing: -0.2px; line-height: 1.25; } h1 { letter-spacing: -0.5px; } h2 { letter-spacing: -0.3px; } p { color: var(--fg); line-height: 1.55; } strong, b { font-weight: 600; color: var(--fg); } /* Bootstrap .display-* — großformatige Hero-Überschriften */ .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 { font-family: var(--font-sans); font-weight: 700; letter-spacing: -0.5px; color: var(--fg); } /* Bootstrap .lead — Hero-Paragraph */ .lead { font-size: 1.125rem; color: var(--fg-2); line-height: 1.6; } /* Bootstrap h1–h6 utility classes */ .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--font-sans); font-weight: 600; color: var(--fg); letter-spacing: -0.2px; } /* Inline code — Mono-Font für Code/IDs/Versionen */ code:not([class]) { font-family: var(--font-mono); font-size: 0.875em; background: var(--surface-2); color: var(--accent); padding: 1px 5px; border-radius: var(--r-sm); } /* ═══════════════════════════════════════════════════════════════════ Mono-Label-Utility (Metadaten, Versions-Strings, Shortcuts) ═══════════════════════════════════════════════════════════════════ */ .fa-mono-label { font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); } /* ═══════════════════════════════════════════════════════════════════ Aurora-Gradient-BG-Utility (Hero-BG, Empty-States, Welcome) ═══════════════════════════════════════════════════════════════════ */ .fa-aurora-bg { background: var(--aurora-gradient); min-height: 100%; } .fa-brand-gradient { background: var(--brand-gradient); color: var(--on-primary); } .fa-focus-ring:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; box-shadow: 0 0 0 3px var(--primary-glow); } /* ═══════════════════════════════════════════════════════════════════ Bootstrap-Button section moved to Aurora v4 .btn → token bridge below (around line ~4150) — this older legacy block was dominated by the newer rules via source-order and is removed to avoid dead duplicates. ═══════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════ — Tastenkürzel-Badges (hohe Lesbarkeit in Light + Dark) ═══════════════════════════════════════════════════════════════════ */ kbd, .kbd, .keyboard-key { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; padding: 2px 8px; background: var(--surface-2); color: var(--fg); border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: var(--r-sm); font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.02em; line-height: 1.4; box-shadow: 0 1px 0 rgb(0, 0, 0, 0.06); /* design-spec: kbd key underside hairline */ white-space: nowrap; } /* Dark-Mode: deutlicher Kontrast durch helleren BG + subtile primary-glow */ html[data-theme="dark"] kbd, html[data-theme="dark"] .kbd, html[data-theme="dark"] .keyboard-key { background: var(--surface-3); color: var(--fg); border-color: var(--border-strong); box-shadow: 0 1px 0 rgb(0, 0, 0, 0.4), inset 0 0 0 1px rgb(var(--primary-rgb), 0.1); /* design-spec: kbd dark-mode underside + sky glow composite */ } /* ═══════════════════════════════════════════════════════════════════ Bootstrap-Card → Aurora-Card-Look (Dashboard-Unifikation) ═══════════════════════════════════════════════════════════════════ Spezifitäts-Strategie: - Bootstrap .card-header / .card-footer: (0,1,0) - Bootstrap .card-header:first-child: (0,2,0) — border-radius only - Bootstrap .card-footer:last-child: (0,2,0) — border-radius only - Bootstrap .card>.list-group+.card-footer: (0,3,0) — border-top:0 Lösung: Aurora schreibt .card > .card-header / .card > .card-footer mit Spezifität (0,2,0) → schlägt Bootstrap 1-Klassen-Regeln und liegt gleichauf mit Bootstrap-Pseudo-Klassen-Regeln (Aurora gewinnt per Load-Order, da Aurora nach Bootstrap lädt). ═══════════════════════════════════════════════════════════════════ */ /* Token-only root: Bootstrap reads --bs-card-* internally for background/color/border/cap-bg/cap-color; Aurora sets all five. Layout properties (border-radius, box-shadow, transition) stay as real declarations because no tokens cover them. */ .card { --bs-card-bg: var(--surface); --bs-card-color: var(--fg); --bs-card-border-color: var(--border); --bs-card-cap-bg: var(--surface-2); --bs-card-cap-color: var(--fg); --bs-card-title-color: var(--fg); --bs-card-subtitle-color: var(--fg-2); border-radius: var(--r-lg); box-shadow: 0 1px 2px rgb(0, 0, 0, 0.04); /* design-spec: card default ultra-faint elevation */ transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out); } .card:hover { border-color: var(--border-strong); box-shadow: 0 2px 8px rgb(0, 0, 0, 0.06); /* design-spec: card hover singular mid-lift */ } /* Preserve colored left-accent on hover — otherwise .card:hover (0,2,0) overrides the colored border-left from .card.border- (0,2,0) and the accent disappears when the user hovers. */ .card.border-primary:hover { border-left-color: var(--primary); } .card.border-success:hover { border-left-color: var(--success); } .card.border-warning:hover { border-left-color: var(--warning); } .card.border-danger:hover { border-left-color: var(--danger); } .card.border-info:hover { border-left-color: var(--primary); } .card.border-accent:hover { border-left-color: var(--accent); } /* Header/Footer: bg + color come from --bs-card-cap-* via Bootstrap's own rules. We only declare layout (radius, padding, typography) here. */ .card > .card-header { padding: 14px 18px; font-weight: 600; letter-spacing: -0.1px; /* Inner top-radius matches the card's outer radius minus border width */ border-top-left-radius: calc(var(--r-lg) - 1px); border-top-right-radius: calc(var(--r-lg) - 1px); border-bottom-left-radius: 0; border-bottom-right-radius: 0; } /* Flat alias for .card-header used outside a .card wrapper (typography only; colors come from --bs-card-cap-* via Bootstrap when nested in a .card). */ .card-header { padding: 14px 18px; font-weight: 600; letter-spacing: -0.1px; } .card-body { padding: 18px; } .card > .card-footer { color: var(--fg-2); /* Inner bottom-radius matches the card's outer radius minus border width */ border-bottom-left-radius: calc(var(--r-lg) - 1px); border-bottom-right-radius: calc(var(--r-lg) - 1px); border-top-left-radius: 0; border-top-right-radius: 0; } /* Flat alias for .card-footer used outside .card context */ .card-footer { color: var(--fg-2); } /* Bootstrap (0,3,0): .card>.list-group+.card-footer { border-top:0 } Re-apply Aurora border when a list-group precedes the footer. Specificity (0,3,0) equals Bootstrap, Aurora wins by load order. */ .card > .list-group + .card-footer { border-top: 1px solid var(--border); } /* Bootstrap's .card-header:first-child / .card-footer:last-child rules (0,2,0) affect border-radius. Aurora's .card > .card-header (0,2,0) tied on specificity and relied on load-order. Bump Aurora's specificity to (0,3,0) via :first-child / :last-child so Aurora wins regardless of import order. (0,3,0) selectors also match Bootstrap's `.card>.list-group+.card-footer { border-top:0 }` rule. */ .card > .card-header:first-child { border-top-left-radius: calc(var(--r-lg) - 1px); border-top-right-radius: calc(var(--r-lg) - 1px); border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .card > .card-footer:last-child { border-bottom-left-radius: calc(var(--r-lg) - 1px); border-bottom-right-radius: calc(var(--r-lg) - 1px); border-top-left-radius: 0; border-top-right-radius: 0; } /* When a .card-body is the only child (no header, no footer), it owns all four corners. Bootstrap sets this via .card-body:first-child:last-child (0,3,0); Aurora matches to enforce the token-based radius. */ .card > .card-body:only-child { border-radius: calc(var(--r-lg) - 1px); } .card-title { font-weight: 600; } .card-text { color: var(--fg-2); line-height: 1.55; } /* Bootstrap .card-header-tabs .nav-link.active (0,3,0) sets background-color:var(--bs-card-bg). Since --bs-card-bg is overridden to var(--surface) via token layer, this already resolves correctly. Explicit rule only needed if tab active state shows wrong BG. */ .card-header-tabs .nav-link.active { background-color: var(--surface); border-bottom-color: var(--surface); } /* card-img: no color/bg overrides needed; just ensure radius aligns */ .card > .card-img-top { border-radius: calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0; } .card > .card-img-bottom { border-radius: 0 0 calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px); } /* ═══════════════════════════════════════════════════════════════════ Menü-/Sidebar-/Navigation-Typografie — Aurora-Harmonisierung Zieht alle Menü-Schriften auf Inter (body-font) und behebt Dark-Mode- Kontrastlücken für Modul-Labels/Sub-Items die historisch auf --color-text / --color-text-muted hingen. ═══════════════════════════════════════════════════════════════════ */ .app-sidebar, .app-sidebar *, .mega-menu, .mega-menu *, .header, .header *, .navbar, .navbar * { font-family: var(--font-sans); } /* Primary-Navigation (Kategorien-Trigger in Sidebar) */ .mega-menu-trigger, .app-sidebar .nav-link { color: var(--fg-2); font-weight: 500; letter-spacing: -0.1px; } .mega-menu-trigger:hover, .mega-menu-trigger.active, .app-sidebar .nav-link:hover, .app-sidebar .nav-link.active { color: var(--primary-strong); } html[data-theme="dark"] .mega-menu-trigger, html[data-theme="dark"] .app-sidebar .nav-link { color: var(--fg); } html[data-theme="dark"] .mega-menu-trigger:hover, html[data-theme="dark"] .mega-menu-trigger.active, html[data-theme="dark"] .app-sidebar .nav-link:hover, html[data-theme="dark"] .app-sidebar .nav-link.active { color: var(--primary); } /* Section-Titles (BSI / ISMS / BCM / GDPR etc.) — Mono-Font-Aurora-Style */ .mega-menu-section-title { font-family: var(--font-mono); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.08em; color: var(--fg-2); border-bottom-color: var(--border); } html[data-theme="dark"] .mega-menu-section-title { color: var(--fg); } /* Sub-Item-Titles + Descriptions — Inter, Aurora-Farben */ .mega-menu-link-title { color: var(--fg); font-weight: 600; letter-spacing: -0.1px; } .mega-menu-link-desc { color: var(--fg-2); } .mega-menu-links a { color: var(--fg); } .mega-menu-links a:hover .mega-menu-link-desc, .mega-menu-links a.active .mega-menu-link-desc { color: var(--fg); } html[data-theme="dark"] .mega-menu-link-title, html[data-theme="dark"] .mega-menu-links a { color: var(--fg); } html[data-theme="dark"] .mega-menu-link-desc { color: var(--fg-2); } /* Panel-Header (Kategorie-Titel) */ .mega-menu-panel-title { font-family: var(--font-sans); font-weight: 600; letter-spacing: -0.2px; color: var(--fg); } /* --bs-*-Tokens sind jetzt vollständig in fairy-aurora.css definiert. Explizite nav-link-active Override — einige Templates rendern mit Bootstrap-Legacy-Farben, der Token-Pfad allein reicht nicht immer. */ .nav-link { color: var(--bs-nav-link-color); } .nav-link:hover, .nav-link:focus { color: var(--bs-nav-link-hover-color); } .nav-link.active, .nav-link.show, .nav-link[aria-current="page"] { color: var(--primary-strong); font-weight: 600; } html[data-theme="dark"] .nav-link.active, html[data-theme="dark"] .nav-link.show, html[data-theme="dark"] .nav-link[aria-current="page"] { color: var(--primary); } /* Pills-Variante: aktiver Pill bekommt Primary-BG und on-primary-Text */ .nav-pills .nav-link.active, .nav-pills .show > .nav-link { background-color: var(--primary-strong); color: var(--on-primary); } html[data-theme="dark"] .nav-pills .nav-link.active, html[data-theme="dark"] .nav-pills .show > .nav-link { background-color: var(--primary); color: var(--on-primary); } /* Aurora-Card-Heading-Kontrast — alle h1-h6 (Semantic UND .h1-.h6-Utility) in Karten bekommen full-fg, damit sie im Dark-Mode nicht auf fg-2/fg-3 absinken. Wichtig: .h1-.h6 Bootstrap-Utility (z.B. ) muss auch matchen. */ .card h1, .card h2, .card h3, .card h4, .card h5, .card h6, .card .h1, .card .h2, .card .h3, .card .h4, .card .h5, .card .h6, .card-header h1, .card-header h2, .card-header h3, .card-header h4, .card-header h5, .card-header h6, .card-header .h1, .card-header .h2, .card-header .h3, .card-header .h4, .card-header .h5, .card-header .h6, .card-body h1, .card-body h2, .card-body h3, .card-body h4, .card-body h5, .card-body h6, .card-body .h1, .card-body .h2, .card-body .h3, .card-body .h4, .card-body .h5, .card-body .h6, .widget-card h1, .widget-card h2, .widget-card h3, .widget-card h4, .widget-card h5, .widget-card h6, .widget-card .h1, .widget-card .h2, .widget-card .h3, .widget-card .h4, .widget-card .h5, .widget-card .h6, .kpi-card h1, .kpi-card h2, .kpi-card h3, .kpi-card h4, .kpi-card h5, .kpi-card h6, .kpi-card .h1, .kpi-card .h2, .kpi-card .h3, .kpi-card .h4, .kpi-card .h5, .kpi-card .h6, .stat-card h1, .stat-card h2, .stat-card h3, .stat-card h4, .stat-card h5, .stat-card h6, .stat-card .h1, .stat-card .h2, .stat-card .h3, .stat-card .h4, .stat-card .h5, .stat-card .h6, .fa-card--premium h1, .fa-card--premium h2, .fa-card--premium h3, .fa-card--premium h4, .fa-card--premium h5, .fa-card--premium h6, .fa-card--premium .h1, .fa-card--premium .h2, .fa-card--premium .h3, .fa-card--premium .h4, .fa-card--premium .h5, .fa-card--premium .h6 { color: var(--fg); } /* Ausnahme: Karten-Header mit farbigem BG behalten on-color (weiß auf primary etc.) */ .card-header.bg-primary h1, .card-header.bg-primary h2, .card-header.bg-primary h3, .card-header.bg-primary h4, .card-header.bg-primary h5, .card-header.bg-primary h6, .card-header.bg-success h1, .card-header.bg-success h2, .card-header.bg-success h3, .card-header.bg-success h4, .card-header.bg-success h5, .card-header.bg-success h6, .card-header.bg-danger h1, .card-header.bg-danger h2, .card-header.bg-danger h3, .card-header.bg-danger h4, .card-header.bg-danger h5, .card-header.bg-danger h6, .card-header.bg-warning h1, .card-header.bg-warning h2, .card-header.bg-warning h3, .card-header.bg-warning h4, .card-header.bg-warning h5, .card-header.bg-warning h6 { color: var(--on-primary); } .card.border-primary, .card.border-left-primary { border-left: 4px solid var(--primary); } .card.border-success, .card.border-left-success { border-left: 4px solid var(--success); } .card.border-warning, .card.border-left-warning { border-left: 4px solid var(--warning); } .card.border-danger, .card.border-left-danger { border-left: 4px solid var(--danger); } .card.border-info, .card.border-left-info { border-left: 4px solid var(--primary); } .card.border-accent, .card.border-left-accent { border-left: 4px solid var(--accent); } /* (0,2,0) — same specificity as .card > .card-header; wins by source order (these rules come after, so they override the base .card > .card-header above) */ .card-header.bg-primary, .card > .card-header.bg-primary { background: var(--brand-gradient); color: var(--on-primary); border-bottom: none; border-top-left-radius: calc(var(--r-lg) - 1px); border-top-right-radius: calc(var(--r-lg) - 1px); } .card-header.bg-primary h1, .card-header.bg-primary h2, .card-header.bg-primary h3, .card-header.bg-primary h4 { color: var(--on-primary); margin: 0; } .card-header.bg-success, .card > .card-header.bg-success { background: var(--success-strong); color: var(--on-success); } .card-header.bg-warning, .card > .card-header.bg-warning { background: var(--warning); color: var(--on-warning); } .card-header.bg-danger, .card > .card-header.bg-danger { background: var(--danger); color: var(--on-danger); } .card-header.bg-info, .card > .card-header.bg-info { background: var(--primary-strong); color: var(--on-primary); } /* Schutz gegen Bootstrap-Utility-Override: `.text-white !important` würde sonst auf farbigem Card-Header das Aurora on-color überfahren (v.a. Dark-Mode: weiß auf hellem --primary = unlesbar). */ .card-header.bg-primary .text-white, .card-header.bg-success .text-white, .card-header.bg-info .text-white, .card-header.bg-danger .text-white { color: var(--on-primary) !important; } .card-header.bg-warning .text-white { color: var(--on-warning) !important; } /* ═══════════════════════════════════════════════════════════════════ Bootstrap-Form-Control → Aurora-Look No --bs-form-control-* tokens exist; we use a class-doubled selector (.form-control.form-control = 0,2,0) to beat Bootstrap's class+pseudo rules without resorting to !important. ═══════════════════════════════════════════════════════════════════ */ .form-control.form-control, .form-select.form-select { background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); color: var(--fg); font-family: var(--font-sans); transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out); } .form-control.form-control::placeholder { color: var(--fg-3); } .form-control.form-control:hover, .form-select.form-select:hover { border-color: var(--border-strong); } .form-control.form-control:focus, .form-select.form-select:focus { background-color: var(--surface); border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow); color: var(--fg); outline: none; } .form-control.form-control:disabled, .form-select.form-select:disabled { background-color: var(--surface-2); opacity: 0.7; cursor: not-allowed; } .form-label { color: var(--fg); font-weight: 500; margin-bottom: 6px; } .form-text { color: var(--fg-3); font-size: 12px; } .form-control.is-invalid, .form-select.is-invalid, .was-validated .form-control:invalid { border-color: var(--danger); } .form-control.is-invalid:focus, .was-validated .form-control:invalid:focus { box-shadow: 0 0 0 3px var(--danger-glow); } .form-control.is-valid, .form-select.is-valid { border-color: var(--success); } .invalid-feedback { color: var(--danger); font-size: 12px; } .valid-feedback { color: var(--success); font-size: 12px; } .form-check-input { border-color: var(--border-strong); background-color: var(--surface); } .form-check-input:checked { background-color: var(--primary); border-color: var(--primary); } .form-check-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow); } .form-check-label { color: var(--fg); } .form-switch .form-check-input { background-color: var(--surface-2); border-color: var(--border-strong); } .form-switch .form-check-input:checked { background-color: var(--primary); border-color: var(--primary); } /* .required Pflichtfeld-Marker (Form-Field-Component + inline) */ .required, label .required, .form-label .required { color: var(--danger); margin-left: 2px; font-weight: 600; } /* Bootstrap Floating Labels (form-floating) — Aurora-Kontraste */ .form-floating > label { color: var(--fg-3); font-weight: 500; padding: 1rem 0.75rem; } .form-floating > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label, .form-floating > .form-select ~ label { color: var(--primary); opacity: 0.85; } .form-floating > .form-control, .form-floating > .form-select { background-color: var(--surface); } .form-floating > .form-control:focus, .form-floating > .form-control:not(:placeholder-shown) { background-color: var(--surface); } /* Hide placeholder INSIDE floating-label fields. Bootstrap normally sets ::placeholder to transparent so the label alone acts as the placeholder (and floats up on focus / value). Our generic .form-control.form-control override above (line ~2689) re-colours the placeholder, which Bootstrap loses on specificity + source-order — placeholder text and label render on top of each other in empty fields, illegible. Restore Bootstrap's intent only for floating-label wrappers. */ .form-floating > .form-control.form-control::placeholder, .form-floating > .form-control.form-control:focus::placeholder { color: transparent; } /* ═══════════════════════════════════════════════════════════════════ Bootstrap-Badge override moved to Aurora v4 bridge below (~line 4470). This older block was dominated by the newer rules via source-order. ═══════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════ Bootstrap-Alert override moved to Aurora v4 bridge below (~line 4400). This older block was dominated by the newer rules via source-order. ═══════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════ Bootstrap-Text-Utilities → Aurora-Farben (Dark-Mode-Fix für .text-dark) ═══════════════════════════════════════════════════════════════════ */ /* .text-dark zeigt in Bootstrap fix #212529 — in Dark-Mode unlesbar. In Aurora muss das Default-Text-Farbe werden (var(--fg)), damit Dashboard-Karten-Labels sichtbar bleiben. */ .text-dark { color: var(--fg) !important; } .text-body { color: var(--fg) !important; } .text-light { color: var(--fg-2) !important; } /* text-muted: --fg-2 statt --fg-3 — Dark-Mode-Lesbarkeit für Card-Body (Mapping-Hub etc.). Für Metadata-kleines-grau: */ .text-muted { color: var(--fg-2) !important; } .text-secondary { color: var(--fg-2) !important; } small.text-muted, .text-muted.small, .form-text, .form-text.text-muted, .fa-text-meta { color: var(--fg-3) !important; } .text-primary { color: var(--primary) !important; } .text-success { color: var(--success) !important; } .text-warning { color: var(--warning-text) !important; } .text-danger { color: var(--danger) !important; } .text-info { color: var(--primary) !important; } .text-white { color: white !important; } /* design-spec: text-white utility class alias */ /* Bootstrap-text-bg-* kombiniert BG + Text */ .text-bg-primary { background-color: var(--primary-strong) !important; color: var(--on-primary) !important; } .text-bg-success { background-color: var(--success-strong) !important; color: var(--on-success) !important; } .text-bg-warning { background-color: var(--warning) !important; color: var(--on-warning) !important; } .text-bg-danger { background-color: var(--danger) !important; color: var(--on-danger) !important; } .text-bg-info { background-color: var(--primary) !important; color: var(--on-primary) !important; } .text-bg-secondary { background-color: var(--surface-2) !important; color: var(--fg) !important; } /* Bootstrap-bg-* Utilities */ .bg-light { background-color: var(--surface-2) !important; } .bg-dark { background-color: var(--bg) !important; } .bg-white { background-color: var(--surface) !important; } .bg-body { background-color: var(--bg) !important; } .bg-body-tertiary { background-color: var(--surface-2) !important; } .bg-body-secondary { background-color: var(--surface-2) !important; } /* Solide bg-* Utilities (card-header bg-primary, docker-pw-highlight etc.) */ .bg-primary { background-color: var(--primary-strong) !important; color: var(--on-primary) !important; } .bg-success { background-color: var(--success-strong) !important; color: var(--on-success) !important; } .bg-warning { background-color: var(--warning) !important; color: var(--on-warning) !important; } .bg-danger { background-color: var(--danger) !important; color: var(--on-danger) !important; } .bg-info { background-color: var(--primary) !important; color: var(--on-primary) !important; } .bg-secondary { background-color: var(--surface-2) !important; color: var(--fg) !important; } /* Farbige bg-* Container erben on-Color an alle Text-Kinder (Icons, p, small, strong) */ .bg-primary *:not(.btn, a.btn, .badge), .bg-success *:not(.btn, a.btn, .badge), .bg-warning *:not(.btn, a.btn, .badge), .bg-danger *:not(.btn, a.btn, .badge), .bg-info *:not(.btn, a.btn, .badge) { color: inherit; } /* Bootstrap-border-* Utilities (1px Akzent-Borders, z.B. alert.border-success) */ .border-primary { border-color: var(--primary) !important; } .border-success { border-color: var(--success) !important; } .border-warning { border-color: var(--warning) !important; } .border-danger { border-color: var(--danger) !important; } .border-info { border-color: var(--primary) !important; } .border-secondary { border-color: var(--border-strong) !important; } /* btn-close (Alert-Dismiss × + Modal-Close) — Aurora-Kontrast + Dark-Mode */ .btn-close { opacity: 0.65; transition: opacity 0.15s ease; } .btn-close:hover, .btn-close:focus-visible { opacity: 1; } [data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } .alert-warning .btn-close, .bg-warning .btn-close { filter: none; } /* *-subtle (Bootstrap 5.3) für Badge/Icon-Hintergründe */ .bg-primary-subtle { background-color: var(--primary-tint) !important; } .bg-success-subtle { background-color: var(--success-glow) !important; } .bg-warning-subtle { background-color: var(--warning-glow) !important; } .bg-danger-subtle { background-color: var(--danger-glow) !important; } .bg-info-subtle { background-color: var(--primary-tint) !important; } .bg-light-subtle { background-color: var(--surface-2) !important; } /* Opacity-Utility "bg-opacity-*" bleibt Bootstrap (nutzt CSS-Vars intern, OK) */ /* ═══════════════════════════════════════════════════════════════════ Kontrast-Rettung innerhalb subtle-BG-Container: Bootstrap-Link-Color kann Text unter übernehmen und Kontrast brechen. Hier forcieren wir lesbare Aurora-Farben. ═══════════════════════════════════════════════════════════════════ */ .bg-warning-subtle, .bg-danger-subtle, .bg-success-subtle, .bg-info-subtle, .bg-primary-subtle, .bg-light-subtle { color: var(--fg); } .bg-warning-subtle a:not(.btn), .bg-danger-subtle a:not(.btn), .bg-success-subtle a:not(.btn), .bg-info-subtle a:not(.btn), .bg-primary-subtle a:not(.btn), .bg-light-subtle a:not(.btn) { color: var(--fg); } .bg-warning-subtle .text-dark, .bg-danger-subtle .text-dark, .bg-success-subtle .text-dark, .bg-info-subtle .text-dark, .bg-primary-subtle .text-dark { color: var(--fg) !important; } .bg-warning-subtle .text-muted, .bg-danger-subtle .text-muted, .bg-success-subtle .text-muted, .bg-info-subtle .text-muted, .bg-primary-subtle .text-muted { color: var(--fg-2) !important; } /* .lead (Bootstrap Hero-Paragraph) — Aurora-contrast */ .lead { color: var(--fg); } .lead.text-muted { color: var(--fg-2) !important; } /* Welcome-Hero (welcome.html.twig) — explizite Klassen damit text-muted nicht mehr nötig ist, aber Hero bleibt als leichter Farb-Akzent sichtbar. */ .welcome-hero__title { color: var(--fg); font-weight: 500; } .welcome-hero__lead { color: var(--fg-2); } /* Alle *-muted in kontrastkritischen Kontexten heben auf fg-2, damit Kompatibilität mit alten Templates bleibt aber Lesbarkeit wächst. */ .card .text-muted, .card-body .text-muted, .alert .text-muted, .fa-alert .text-muted, td.text-muted, th.text-muted { color: var(--fg-2) !important; } /* Micro-Meta weiterhin dezent (small-tags, form-hints, mono-labels) */ small.text-muted, .text-muted.small, .form-text, .fa-text-meta { color: var(--fg-3) !important; } /* Bootstrap text-opacity-XX wirkt sonst auf --bs-body-color und macht alles blass. Aurora setzt volle opacity-Kontrolle: */ .text-body-emphasis { color: var(--fg) !important; } .text-body-secondary { color: var(--fg-2) !important; } .text-body-tertiary { color: var(--fg-3) !important; } /* Border-Utilities auf Aurora-Farben */ .border { border-color: var(--border) !important; } .border-primary { border-color: var(--primary) !important; } .border-success { border-color: var(--success) !important; } .border-warning { border-color: var(--warning) !important; } .border-danger { border-color: var(--danger) !important; } .border-info { border-color: var(--primary) !important; } .border-light { border-color: var(--border) !important; } .border-dark { border-color: var(--border-strong) !important; } /* ═══════════════════════════════════════════════════════════════════ Legacy .kpi-card — Aurora-Farb-Override (Bug #2: Dark-Mode) Überschreibt hardcoded Hintergrundfarben und Textfarben in allen Themes. .fa-kpi-card (Aurora-Komponent) ist davon unabhängig. ═══════════════════════════════════════════════════════════════════ */ .kpi-card { background: var(--surface) !important; border-color: var(--border) !important; color: var(--fg) !important; } .kpi-card .label, .kpi-card-label, .kpi-card .kpi-card-label { color: var(--fg-3) !important; } .kpi-card .value, .kpi-card-value { color: var(--fg) !important; } .kpi-card .unit, .kpi-card-unit { color: var(--fg-3) !important; } .kpi-card-icon { background: var(--surface-2) !important; } /* ═══════════════════════════════════════════════════════════════════ Legacy dark-mode.css Bootstrap-Overrides vereinheitlichen — diese drei Klassen werden in dark-mode.css mit [data-theme="dark"] und !important überschrieben, aber mit faltem var(--surface-2). Die Bridge stellt hier sicher, dass Aurora-Tokens fließen. ═══════════════════════════════════════════════════════════════════ */ [data-theme="dark"] .card-header, [data-theme="dark"] .widget-header { background-color: var(--surface-2) !important; border-color: var(--border) !important; color: var(--fg) !important; } /* ═══════════════════════════════════════════════════════════════════ Dropdown override moved to Aurora v4 bridge below (~line 4520). The newer block declares the full token map and beats this older block via source-order; removed to avoid dead duplicates. ═══════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════ Modal — Aurora-Override (beide Modi) Token-only: Bootstrap reads --bs-modal-* internally for bg/color/ borders. We only declare layout (radius) explicitly. ═══════════════════════════════════════════════════════════════════ */ .modal { --bs-modal-bg: var(--surface); --bs-modal-color: var(--fg); --bs-modal-border-color: var(--border); --bs-modal-header-border-color: var(--border); --bs-modal-footer-border-color: var(--border); } .modal-content { border-radius: var(--r-lg); } /* Backdrop: theme-invariant dunkel */ .modal-backdrop { background-color: rgb(10, 14, 26, 0.6); } /* ═══════════════════════════════════════════════════════════════════ Accordion — Aurora-Override (beide Modi) ═══════════════════════════════════════════════════════════════════ */ .accordion { /* Bootstrap chevron-SVGs Aurora-gefärbt via data-URL statt filter-Trick. Collapsed: fg-2 (sekundär), Expanded: primary-strong / im Dark primary. */ --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%234c4a73'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230369a1'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); --bs-accordion-btn-icon-transform: rotate(-180deg); /* Aurora colour map — Bootstrap reads these for bg/color/border on .accordion-item, .accordion-button, .accordion-body. */ --bs-accordion-bg: var(--surface); --bs-accordion-color: var(--fg); --bs-accordion-border-color: var(--border); --bs-accordion-button-bg: var(--surface); --bs-accordion-button-color: var(--fg); --bs-accordion-active-bg: var(--primary-tint); --bs-accordion-active-color: var(--primary-strong); --bs-accordion-button-focus-border-color: var(--primary); --bs-accordion-button-focus-box-shadow: 0 0 0 3px var(--primary-glow); display: flex; flex-direction: column; gap: 8px; } html[data-theme="dark"] .accordion, html[data-theme="system"] .accordion { --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23b9bad4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2338bdf8'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); --bs-accordion-active-color: var(--primary); } .accordion-item { border-radius: var(--r-md); overflow: hidden; transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out); } .accordion-item:has(.accordion-button:not(.collapsed)) { border-color: var(--primary-glow); box-shadow: 0 0 0 1px var(--primary-glow); } .accordion-item:first-of-type, .accordion-item:last-of-type, .accordion-item:not(:first-of-type) { border-radius: var(--r-md); } .accordion-header { margin: 0; } .accordion-button { font-family: var(--font-sans); font-weight: 500; border-radius: var(--r-md); box-shadow: none; transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); } .accordion-button:hover { background-color: var(--surface-2); } .accordion-button:not(.collapsed) { border-radius: var(--r-md) var(--r-md) 0 0; box-shadow: inset 0 -1px 0 var(--border); } .accordion-body { padding: 16px; } /* Flush-Variante: keine Gaps, keine Rounded-Corners, keine Glow-Border */ .accordion-flush { gap: 0; } .accordion-flush .accordion-item { border-radius: 0; border-left: 0; border-right: 0; } .accordion-flush .accordion-item:has(.accordion-button:not(.collapsed)) { box-shadow: none; } .accordion-flush .accordion-button, .accordion-flush .accordion-button:not(.collapsed) { border-radius: 0; } /* ═══════════════════════════════════════════════════════════════════ List-Group — Aurora-Override (beide Modi) Token-only: Bootstrap reads --bs-list-group-* internally for bg/color/ border/hover/active/disabled states. ═══════════════════════════════════════════════════════════════════ */ .list-group { --bs-list-group-bg: var(--surface); --bs-list-group-color: var(--fg); --bs-list-group-border-color: var(--border); --bs-list-group-action-color: var(--fg); --bs-list-group-action-hover-bg: var(--surface-2); --bs-list-group-action-hover-color: var(--fg); --bs-list-group-action-active-bg: var(--surface-3); --bs-list-group-action-active-color: var(--fg); --bs-list-group-active-bg: var(--primary-strong); --bs-list-group-active-color: var(--on-primary); --bs-list-group-active-border-color: var(--primary-strong); --bs-list-group-disabled-bg: var(--surface); --bs-list-group-disabled-color: var(--fg-3); } html[data-theme="dark"] .list-group { --bs-list-group-active-bg: var(--primary); --bs-list-group-active-border-color: var(--primary); } /* Semantic list-group-item-* variants */ .list-group-item-primary { background-color: var(--primary-tint); color: var(--primary-strong); border-color: var(--primary-glow); } .list-group-item-success { background-color: var(--success-glow); color: var(--success-strong); border-color: var(--success-glow); } .list-group-item-warning { background-color: var(--warning-glow); color: var(--warning-strong); border-color: var(--warning-glow); } .list-group-item-danger { background-color: var(--danger-glow); color: var(--danger-strong); border-color: var(--danger-glow); } /* ═══════════════════════════════════════════════════════════════════ Pagination — see Aurora v4 bridge below (~line 4470). Older block removed; tokens are set there at the .pagination root. ═══════════════════════════════════════════════════════════════════ */ .page-link { transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out); } /* ═══════════════════════════════════════════════════════════════════ Offcanvas — Aurora-Override (beide Modi) Token-only: Bootstrap reads --bs-offcanvas-* internally. ═══════════════════════════════════════════════════════════════════ */ .offcanvas, .offcanvas-start, .offcanvas-end, .offcanvas-top, .offcanvas-bottom { --bs-offcanvas-bg: var(--surface); --bs-offcanvas-color: var(--fg); --bs-offcanvas-border-color: var(--border); } /* ═══════════════════════════════════════════════════════════════════ Popover — Aurora-Override (beide Modi) ═══════════════════════════════════════════════════════════════════ */ .popover { --bs-popover-bg: var(--surface); --bs-popover-border-color: var(--border); --bs-popover-header-bg: var(--surface-2); --bs-popover-header-color: var(--fg); --bs-popover-body-color: var(--fg); border-radius: var(--r-lg); box-shadow: 0 4px 16px rgb(0, 0, 0, 0.12); /* design-spec: popover/toast light-mode elevation */ } html[data-theme="dark"] .popover { box-shadow: 0 4px 20px rgb(0, 0, 0, 0.5); /* design-spec: popover/toast dark-mode heavy elevation */ } .popover-header { border-radius: var(--r-lg) var(--r-lg) 0 0; } /* Arrow: light-mode zeigt --surface; dark zeigt surface */ .popover .popover-arrow::after { border-color: transparent; } .bs-popover-auto[data-popper-placement^="top"] .popover-arrow::after, .bs-popover-top .popover-arrow::after { border-top-color: var(--surface); } .bs-popover-auto[data-popper-placement^="bottom"] .popover-arrow::after, .bs-popover-bottom .popover-arrow::after { border-bottom-color: var(--surface-2); /* header-bg matches */ } .bs-popover-auto[data-popper-placement^="start"] .popover-arrow::after, .bs-popover-start .popover-arrow::after { border-left-color: var(--surface); } .bs-popover-auto[data-popper-placement^="end"] .popover-arrow::after, .bs-popover-end .popover-arrow::after { border-right-color: var(--surface); } /* ═══════════════════════════════════════════════════════════════════ Tooltip — Aurora-Override (beide Modi) Tooltip = invertierter BG (fg auf surface) für maximalen Kontrast. Dark-Mode: surface-2 auf fg — ebenfalls maximaler Kontrast. ═══════════════════════════════════════════════════════════════════ */ /* Token-only root: Bootstrap reads --bs-tooltip-bg/-color for .tooltip-inner. Border-radius and dark-mode border are not tokenized — remain as rules. */ .tooltip { --bs-tooltip-bg: var(--fg); --bs-tooltip-color: var(--surface); } .tooltip-inner { border-radius: var(--r-sm); } html[data-theme="dark"] .tooltip { --bs-tooltip-bg: var(--surface-2); --bs-tooltip-color: var(--fg); } html[data-theme="dark"] .tooltip-inner { border: 1px solid var(--border); } /* Tooltip-Arrow anpassen */ .bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before, .bs-tooltip-top .tooltip-arrow::before { border-top-color: var(--fg); } .bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before, .bs-tooltip-bottom .tooltip-arrow::before { border-bottom-color: var(--fg); } .bs-tooltip-auto[data-popper-placement^="start"] .tooltip-arrow::before, .bs-tooltip-start .tooltip-arrow::before { border-left-color: var(--fg); } .bs-tooltip-auto[data-popper-placement^="end"] .tooltip-arrow::before, .bs-tooltip-end .tooltip-arrow::before { border-right-color: var(--fg); } html[data-theme="dark"] .bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before, html[data-theme="dark"] .bs-tooltip-top .tooltip-arrow::before { border-top-color: var(--surface-2); } html[data-theme="dark"] .bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before, html[data-theme="dark"] .bs-tooltip-bottom .tooltip-arrow::before { border-bottom-color: var(--surface-2); } html[data-theme="dark"] .bs-tooltip-auto[data-popper-placement^="start"] .tooltip-arrow::before, html[data-theme="dark"] .bs-tooltip-start .tooltip-arrow::before { border-left-color: var(--surface-2); } html[data-theme="dark"] .bs-tooltip-auto[data-popper-placement^="end"] .tooltip-arrow::before, html[data-theme="dark"] .bs-tooltip-end .tooltip-arrow::before { border-right-color: var(--surface-2); } /* ═══════════════════════════════════════════════════════════════════ Bootstrap-Toast — Aurora-Override (beide Modi) Achtung: Aurora nutzt .fa-alert--toast für eigene Toasts. Diese Regeln greifen auf Bootstrap-native .toast-Elemente. ═══════════════════════════════════════════════════════════════════ */ .toast { --bs-toast-bg: var(--surface); --bs-toast-color: var(--fg); --bs-toast-border-color: var(--border); --bs-toast-header-bg: var(--surface-2); --bs-toast-header-color: var(--fg); --bs-toast-header-border-color: var(--border); border-radius: var(--r-md); box-shadow: 0 4px 16px rgb(0, 0, 0, 0.12); /* design-spec: popover/toast light-mode elevation */ } html[data-theme="dark"] .toast { box-shadow: 0 4px 20px rgb(0, 0, 0, 0.5); /* design-spec: popover/toast dark-mode heavy elevation */ } /* ═══════════════════════════════════════════════════════════════════ Bootstrap-.table — Aurora-Override (beide Modi) Token-only approach: Bootstrap's own rules `.table>:not(caption)>*>*`, `.table-striped>...`, `.table-hover>...` read --bs-table-* internally. Setting tokens at .table-level lets Bootstrap's rules render Aurora colors without us re-declaring identical selectors (which lose the source-order war when the table also has .table-sm — that adds a class-specificity bump our `.table > ...` selector can't match). Thead override remains as a real rule because Bootstrap has no --bs-table-thead-* token. Its selector specificity (0,1,3) beats Bootstrap's `.table-sm:not(caption)>*>*` (0,2,1)? No — same level class+type — so we use `.table > thead > tr > th:not([class*="bg-"])` to add a class-presence specificity bump and ensure thead wins. ═══════════════════════════════════════════════════════════════════ */ .table { --bs-table-bg: var(--surface); --bs-table-color: var(--fg); --bs-table-border-color: var(--border); --bs-table-striped-bg: var(--surface-2); --bs-table-striped-color: var(--fg); --bs-table-hover-bg: var(--surface-3); --bs-table-hover-color: var(--fg); --bs-table-active-bg: var(--surface-3); --bs-table-active-color: var(--fg); color: var(--fg); border-color: var(--border); } /* Thead — no Bootstrap token exists, so explicit rule with class-bump specificity to beat .table-sm/.table-bordered etc. */ .table.table > thead { background-color: var(--surface-2); color: var(--fg); } .table.table > thead > tr > th { background-color: var(--surface-2); color: var(--fg); border-bottom: 2px solid var(--border); font-weight: 600; } /* ═══════════════════════════════════════════════════════════════════ Form-Switch + Form-Range — Aurora-Override ═══════════════════════════════════════════════════════════════════ */ .form-switch .form-check-input { background-color: var(--surface-3); border-color: var(--border-strong); /* Bootstrap nutzt background-image für den Track-Icon */ } .form-switch .form-check-input:checked { background-color: var(--primary); border-color: var(--primary); } .form-switch .form-check-input:focus { box-shadow: 0 0 0 3px var(--primary-glow); border-color: var(--primary); } .form-range::-webkit-slider-thumb { background-color: var(--primary); } .form-range::-moz-range-thumb { background-color: var(--primary); border: none; } .form-range::-webkit-slider-runnable-track { background-color: var(--surface-3); border-radius: var(--r-pill); } .form-range::-moz-range-track { background-color: var(--surface-3); } .form-range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--primary-glow); } /* ═══════════════════════════════════════════════════════════════════ Input-Group — Aurora-Override ═══════════════════════════════════════════════════════════════════ */ .input-group-text { background-color: var(--surface-2); color: var(--fg-2); border: 1px solid var(--border); border-radius: var(--r-md); } .input-group > .form-control:focus, .input-group > .form-select:focus { z-index: 3; /* local stacking-context */ } /* ═══════════════════════════════════════════════════════════════════ Progress — Aurora-Override (beide Modi) Überschreibt das app.css-Override, das noch hardcoded rgba nutzt. ═══════════════════════════════════════════════════════════════════ */ .progress { --bs-progress-bg: var(--surface-2); --bs-progress-bar-bg: var(--primary-strong); --bs-progress-bar-color: var(--on-primary); border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; } html[data-theme="dark"] .progress { --bs-progress-bar-bg: var(--primary); } .progress-bar.bg-success { background-color: var(--success-strong) !important; } .progress-bar.bg-warning { background-color: var(--warning) !important; color: var(--on-warning) !important; } .progress-bar.bg-danger { background-color: var(--danger) !important; color: var(--on-danger) !important; } .progress-bar.bg-info { background-color: var(--primary) !important; } /* ═══════════════════════════════════════════════════════════════════ Spinner (Bootstrap .spinner-border / .spinner-grow) — Aurora-Override .spinner-border nutzt currentColor — passt zu Aurora. Wir stellen sicher dass das Eltern-Element die richtige Farbe hat. ═══════════════════════════════════════════════════════════════════ */ .spinner-border { color: var(--primary); } .spinner-border.text-success { color: var(--success) !important; } .spinner-border.text-warning { color: var(--warning) !important; } .spinner-border.text-danger { color: var(--danger) !important; } .spinner-grow { background-color: var(--primary); } .spinner-grow.text-success { background-color: var(--success) !important; } .spinner-grow.text-warning { background-color: var(--warning) !important; } .spinner-grow.text-danger { background-color: var(--danger) !important; } /* ═══════════════════════════════════════════════════════════════════ Btn-Close — Aurora-Override (beide Modi) Bootstrap rendert .btn-close als SVG-data-url; wir nutzen filter. ═══════════════════════════════════════════════════════════════════ */ /* Light-Mode: dunkles X auf hellem Surface */ .btn-close { filter: brightness(0) saturate(100%) invert(20%) sepia(10%) saturate(600%) hue-rotate(220deg); opacity: 0.7; } .btn-close:hover { opacity: 1; } /* Dark-Mode: helles X auf dunklem Surface */ html[data-theme="dark"] .btn-close { filter: brightness(0) saturate(100%) invert(90%); opacity: 0.7; } html[data-theme="dark"] .btn-close:hover { opacity: 1; } /* Ausnahmen: Close auf farbigem Header (z.B. bg-danger) immer weiß */ .modal-header.bg-danger .btn-close, .alert-danger .btn-close { filter: brightness(0) saturate(100%) invert(100%) !important; opacity: 0.9; } /* ═══════════════════════════════════════════════════════════════════ Nav-Tabs / Nav-Pills — explizite Component-Fixes (--bs-*-Tokens gesetzt in fairy-aurora.css; hier zusätzliche Selektoren für Templates die nicht Bootstrap-Vars nutzen) ═══════════════════════════════════════════════════════════════════ */ /* Token-only nav-tabs root: Bootstrap reads --bs-nav-* internally for .nav-link colour, hover-border, and the active-tab triplet. We only declare the bottom-border + radius (no Bootstrap tokens). */ .nav-tabs { --bs-nav-link-color: var(--fg-2); --bs-nav-link-hover-color: var(--primary-strong); --bs-nav-tabs-link-active-color: var(--primary-strong); --bs-nav-tabs-link-active-bg: var(--surface); --bs-nav-tabs-link-active-border-color: var(--border) var(--border) var(--surface); --bs-nav-tabs-link-hover-border-color: var(--border) var(--border) transparent; border-bottom: 1px solid var(--border); } .nav-tabs .nav-link { border: 1px solid transparent; border-radius: var(--r-md) var(--r-md) 0 0; } .nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus { background-color: var(--surface-2); } html[data-theme="dark"] .nav-tabs { --bs-nav-link-hover-color: var(--primary); --bs-nav-tabs-link-active-color: var(--primary); } /* Tab-Content */ .tab-content { color: var(--fg); } .tab-pane { color: var(--fg); } /* ========================================================================== Wizard Busy Overlay — transparent overlay used by wizard_busy_controller during long-running Setup-Assistant requests (Restore, Migration, Seeding). ========================================================================== */ form.wizard-busy { position: relative; } .wizard-busy-overlay { position: absolute; inset: 0; background: rgb(var(--bs-body-bg-rgb, 255, 255, 255), 0.82); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: var(--z-popover); border-radius: inherit; pointer-events: all; cursor: wait; } .wizard-busy-overlay__inner { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.5rem; background: var(--surface, var(--bs-body-bg)); color: var(--fg, var(--bs-body-color)); border: 1px solid var(--border, var(--bs-border-color)); border-radius: var(--r-md, 8px); box-shadow: 0 4px 20px rgb(0, 0, 0, 0.1); /* design-spec: wizard-busy overlay singular */ font-weight: 500; } .wizard-busy-overlay__text { max-width: 32rem; } html[data-theme="dark"] .wizard-busy-overlay { background: rgb(var(--bs-body-bg-rgb, 23, 26, 32), 0.85); } /* ========================================================================== Aurora v4 — fa-aurora-surface utility ========================================================================== Opt-in background layer that brings the Setup-Wizard / Login atmosphere to any page. Usage: (default radial gradient) (+ circuit dots) (lower opacity) (higher opacity) Background layers stack in this order (top→bottom): 1. circuit-dot SVG (variant --dots only) 2. radial gradient from --primary-tint (top-left) 3. radial gradient from --accent-tint (bottom-right) 4. solid --surface base Opacity is controlled via --_pattern-opacity (internal var), set by the variant class so the utility remains single-rule. ========================================================================== */ .fa-aurora-surface { --_pattern-opacity: var(--pattern-opacity-default); position: relative; background: radial-gradient(circle at 12% 18%, color-mix(in oklab, var(--primary-tint) calc(var(--_pattern-opacity) * 1000%), transparent) 0%, transparent 55%), radial-gradient(circle at 88% 82%, color-mix(in oklab, var(--accent-tint) calc(var(--_pattern-opacity) * 1000%), transparent) 0%, transparent 55%), var(--surface); } .fa-aurora-surface--subtle { --_pattern-opacity: var(--pattern-opacity-subtle); } .fa-aurora-surface--hero { --_pattern-opacity: var(--pattern-opacity-hero); } .fa-aurora-surface--dots { background-image: radial-gradient(circle, color-mix(in oklab, var(--primary) 20%, transparent) 1px, transparent 1px), radial-gradient(circle at 12% 18%, color-mix(in oklab, var(--primary-tint) calc(var(--_pattern-opacity) * 1000%), transparent) 0%, transparent 55%), radial-gradient(circle at 88% 82%, color-mix(in oklab, var(--accent-tint) calc(var(--_pattern-opacity) * 1000%), transparent) 0%, transparent 55%); background-size: 24px 24px, 100% 100%, 100% 100%; background-color: var(--surface); background-position: 0 0, 0 0, 100% 100%; background-repeat: repeat, no-repeat, no-repeat; } @media (prefers-reduced-motion: no-preference) { .fa-aurora-surface { transition: background 0.4s ease-out; } } /* ========================================================================== Aurora v4 Phase 2 — fa-page-header ========================================================================== Replaces ad-hoc + + breadcrumb combos. Bottom border uses brand-gradient-line token. ========================================================================== */ .fa-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-block: 20px 16px; margin-bottom: 24px; flex-wrap: wrap; position: relative; /* isolation: isolate creates a local stacking context so that the ::after pseudo (z-index: -1) stays BEHIND the flex children but still renders above the element's own background — preventing the gradient divider from "painting through" badges or action-buttons. */ isolation: isolate; } /* Brand-gradient bottom-divider via pseudo-element instead of border-image. z-index: -1 (within the isolated stacking context) keeps the 2 px stripe below all flex children regardless of their position/z-index properties. */ .fa-page-header::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--brand-gradient-line); pointer-events: none; z-index: -1; /* local stacking-context */ } .fa-page-header__meta { display: flex; flex-direction: column; gap: 6px; min-width: 0; position: relative; /* lift above ::after (z-index: -1) */ z-index: 1; /* local stacking-context */ } .fa-page-header__badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--r-pill); background: var(--brand-gradient-soft); border: 1px solid var(--primary-tint); font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--primary); align-self: flex-start; } html[data-theme="dark"] .fa-page-header__badge { border-color: var(--primary); color: var(--primary); } .fa-page-header__badge i { font-size: 12px; } .fa-page-header__title { font-family: var(--font-sans); font-size: clamp(20px, 2.5vw, 28px); font-weight: 700; color: var(--fg); margin: 0; line-height: 1.2; } .fa-page-header__subtitle { font-family: var(--font-sans); font-size: 14px; color: var(--fg-2); margin: 0; line-height: 1.45; } .fa-page-header__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; position: relative; /* lift above ::after (z-index: -1) */ z-index: 1; /* local stacking-context */ } @media (max-width: 600px) { .fa-page-header { flex-direction: column; } .fa-page-header__actions { width: 100%; } } /* ========================================================================== Aurora v4 Phase 2 — fa-section ========================================================================== Replaces ad-hoc + section wrappers. Header divider: 1px gradient from --primary-tint to transparent. ========================================================================== */ .fa-section { margin-bottom: 32px; } .fa-section__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 10px; margin-bottom: 16px; position: relative; isolation: isolate; /* stacking context for ::after z-index: -1 */ } /* Bottom-divider via pseudo-element (border-image slice=1 hat Browser-Glitches). z-index: -1 keeps divider behind section children within isolated context. */ .fa-section__header::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, var(--primary-tint), transparent); pointer-events: none; z-index: -1; /* local stacking-context */ } .fa-section__title { font-family: var(--font-sans); font-size: 16px; font-weight: 600; color: var(--fg); margin: 0; letter-spacing: -0.01em; } .fa-section__tools { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .fa-section__body { /* content flows naturally; no forced padding so tables / charts bleed to edge */ } .fa-section__footer { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 13px; color: var(--fg-2); } /* fa-link — inline hyperlink style used in section footers */ .fa-link { color: var(--primary); text-decoration: none; font-weight: 500; transition: color var(--t-fast) var(--ease-out); } .fa-link:hover { color: var(--primary-hover); text-decoration: underline; } .fa-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--r-xs); } /* fa-link-subtle — muted inline hyperlink for secondary actions (e.g. PDF locale switch) */ .fa-link-subtle { color: var(--primary); text-decoration: underline; text-decoration-color: var(--primary-tint, color-mix(in srgb, var(--primary) 40%, transparent)); font-weight: 500; } .fa-link-subtle:hover { text-decoration-color: var(--primary); } /* ========================================================================== Aurora v4 Phase 2 — fa-feature-card ========================================================================== Replaces inconsistent KPI / stat tiles. Left accent bar driven by semantic variant; hover glow in matching color. Coexists with legacy .kpi-card — does NOT touch those rules. ========================================================================== */ .fa-feature-card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 18px 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out); } /* Left accent bar */ .fa-feature-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: var(--r-lg) 0 0 var(--r-lg); background: var(--_fc-color, var(--primary)); } /* Variant tokens */ .fa-feature-card--primary { --_fc-color: var(--primary); --_fc-glow: var(--primary-glow); --_fc-tint: var(--primary-tint); } .fa-feature-card--success { --_fc-color: var(--success); --_fc-glow: var(--success-glow); --_fc-tint: color-mix(in oklab, var(--success) 10%, transparent); } .fa-feature-card--warning { --_fc-color: var(--warning); --_fc-glow: var(--warning-glow); --_fc-tint: color-mix(in oklab, var(--warning) 10%, transparent); } .fa-feature-card--danger { --_fc-color: var(--danger); --_fc-glow: var(--danger-glow); --_fc-tint: color-mix(in oklab, var(--danger) 10%, transparent); } .fa-feature-card:hover { border-color: var(--_fc-color, var(--primary)); box-shadow: 0 0 0 3px var(--_fc-glow, var(--primary-glow)); } .fa-feature-card__icon-chip { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--r-md); background: var(--_fc-tint, var(--primary-tint)); color: var(--_fc-color, var(--primary)); font-size: 18px; align-self: flex-start; flex-shrink: 0; } .fa-feature-card__label { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); margin: 0; } .fa-feature-card__value-row { display: flex; align-items: baseline; gap: 4px; line-height: 1; } .fa-feature-card__value { font-family: var(--font-sans); font-size: 32px; font-weight: 700; color: var(--fg); letter-spacing: -0.02em; } .fa-feature-card__unit { font-family: var(--font-sans); font-size: 16px; font-weight: 500; color: var(--fg-3); } .fa-feature-card__hint { font-family: var(--font-sans); font-size: 12px; color: var(--fg-3); margin: 0; } .fa-feature-card__sparkline { margin-top: 4px; opacity: 0.85; } /* ========================================================================== Aurora v4 Phase 3 — fa-empty-state (active / macro variant) ========================================================================== Coexists with the existing .fa-empty-state passive rules above (line ~509). The macro wrapper adds .fa-empty-state--active to enable the aurora surface. ========================================================================== */ .fa-empty-state--active { position: relative; border-radius: var(--r-xl); overflow: hidden; /* Aurora-pattern background at ~20% opacity via --subtle variant */ background: radial-gradient(circle at 12% 18%, color-mix(in oklab, var(--primary-tint) calc(var(--pattern-opacity-subtle) * 1000%), transparent) 0%, transparent 55%), radial-gradient(circle at 88% 82%, color-mix(in oklab, var(--accent-tint) calc(var(--pattern-opacity-subtle) * 1000%), transparent) 0%, transparent 55%), var(--surface); border: 1px solid var(--border); } /* ========================================================================== Aurora v4 Phase 3 — fa-hero ========================================================================== Welcome-after-login banners + module start pages. Uses --hero opacity for background; Alva anchored left at lg size. Glow border mirrors fa-card--premium pattern. ========================================================================== */ .fa-hero { position: relative; display: flex; align-items: center; gap: 32px; padding: 40px 40px 40px 32px; border-radius: var(--r-2xl); overflow: hidden; background: radial-gradient(circle at 8% 40%, color-mix(in oklab, var(--primary-tint) calc(var(--pattern-opacity-hero) * 1000%), transparent) 0%, transparent 55%), radial-gradient(circle at 92% 60%, color-mix(in oklab, var(--accent-tint) calc(var(--pattern-opacity-hero) * 1000%), transparent) 0%, transparent 55%), var(--surface); border: 1px solid var(--border); box-shadow: 0 0 0 1px color-mix(in oklab, var(--primary) 20%, transparent), 0 8px 32px color-mix(in oklab, var(--primary) 8%, transparent); } html[data-theme="dark"] .fa-hero { box-shadow: 0 0 0 1px color-mix(in oklab, var(--primary) 35%, transparent), 0 8px 40px color-mix(in oklab, var(--primary) 12%, transparent); } .fa-hero__alva { flex-shrink: 0; opacity: 0.95; } .fa-hero__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; } .fa-hero__title { font-family: var(--font-sans); font-size: clamp(22px, 3vw, 32px); font-weight: 700; color: var(--fg); margin: 0; line-height: 1.15; letter-spacing: -0.02em; } .fa-hero__subtitle { font-family: var(--font-sans); font-size: 15px; color: var(--fg-2); margin: 0; line-height: 1.5; } .fa-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; } @media (max-width: 640px) { .fa-hero { flex-direction: column; align-items: flex-start; padding: 24px; } .fa-hero__alva { align-self: center; } } /* ========================================================================== Aurora v4 Phase 3 — fa-filter-chip standalone + active state ========================================================================== The passive .fa-filter-chip is already defined in fairy-aurora-edge.css. Here we add the --active modifier and the chip-group wrapper for the macro. ========================================================================== */ /* Active (selected) state */ .fa-filter-chip--active { background: var(--primary-tint); border-color: var(--primary); color: var(--primary); font-weight: 600; } /* Chip group — horizontal row of toggle chips */ .fa-filter-chip-group { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } /* Button-reset so * * *

* ------------------------------------------------------------------------- */ .fa-toast-stack { position: fixed; top: var(--space-4); right: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); z-index: var(--z-toast); max-width: min(420px, calc(100vw - 2 * var(--space-4))); pointer-events: none; } .fa-toast-stack--bottom-right { top: auto; bottom: var(--space-4); } .fa-toast-stack--bottom-left { top: auto; right: auto; bottom: var(--space-4); left: var(--space-4); } .fa-toast-stack--top-left { right: auto; left: var(--space-4); } .fa-toast { pointer-events: auto; position: relative; display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-5) var(--space-3) var(--space-3); background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--primary); border-radius: var(--r-md); box-shadow: var(--shadow-md); overflow: hidden; min-width: 280px; max-width: 100%; animation: fa-toast-enter var(--t-base) var(--ease-out); } .fa-toast.is-dismissing { animation: fa-toast-exit var(--t-base) var(--ease-in-out) forwards; } @keyframes fa-toast-enter { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } } @keyframes fa-toast-exit { to { opacity: 0; transform: translateX(16px); height: 0; padding-top: 0; padding-bottom: 0; margin: 0; border-width: 0; } } @media (prefers-reduced-motion: reduce) { .fa-toast, .fa-toast.is-dismissing { animation: none; } } .fa-toast__icon { font-size: 18px; line-height: 1.2; flex-shrink: 0; margin-top: 1px; color: var(--primary); } .fa-toast__body { flex: 1; min-width: 0; } .fa-toast__title { font-family: var(--font-sans); font-weight: 600; font-size: 14px; color: var(--fg); margin-bottom: 2px; } .fa-toast__message { font-family: var(--font-sans); font-size: 13px; line-height: 1.5; color: var(--fg-2); word-break: break-word; } .fa-toast__actions { margin-top: var(--space-2); display: flex; gap: var(--space-2); } .fa-toast__close { position: absolute; top: 6px; right: 8px; background: transparent; border: 0; color: var(--fg-3); cursor: pointer; font-size: 18px; line-height: 1; padding: 4px 6px; border-radius: var(--r-sm); transition: color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out); } .fa-toast__close:hover { color: var(--fg); background: var(--surface-2); } .fa-toast__close:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; } .fa-toast__progress { position: absolute; bottom: 0; left: 0; height: 2px; width: 100%; background: var(--primary); transform-origin: left center; animation: fa-toast-progress 5s linear forwards; } @keyframes fa-toast-progress { from { transform: scaleX(1); } to { transform: scaleX(0); } } @media (prefers-reduced-motion: reduce) { .fa-toast__progress { animation: none; width: 100%; } } /* Tones */ .fa-toast--info { border-left-color: var(--primary); } .fa-toast--info .fa-toast__icon, .fa-toast--info .fa-toast__progress { color: var(--primary); background: var(--primary); } .fa-toast--success { border-left-color: var(--success); background: var(--surface); } .fa-toast--success .fa-toast__icon, .fa-toast--success .fa-toast__progress { color: var(--success); background: var(--success); } .fa-toast--warning { border-left-color: var(--warning); } .fa-toast--warning .fa-toast__icon, .fa-toast--warning .fa-toast__progress { color: var(--warning); background: var(--warning); } .fa-toast--danger { border-left-color: var(--danger); } .fa-toast--danger .fa-toast__icon, .fa-toast--danger .fa-toast__progress { color: var(--danger); background: var(--danger); } .fa-toast--persistent .fa-toast__progress { display: none; } /* --------------------------------------------------------------------------- * fa-action-bar — Top-of-list/detail Action Toolbar (V3 W3-UX-ActionBar) * * Single-line action-bar that sits below the page-header and above list/table * content. Holds: search, filters (chips), sort, secondary actions (export * etc.), and primary CTA. Aurora-styled (surface bg, bottom-border). * * Markup pattern: *

(search + filter-chips) * * ... *

* * ... *

* ------------------------------------------------------------------------- */ .fa-action-bar { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-sm); margin-bottom: var(--space-4); } .fa-action-bar--flush { border: 0; border-bottom: 1px solid var(--border); border-radius: 0; box-shadow: none; padding-left: 0; padding-right: 0; } .fa-action-bar__lead, .fa-action-bar__trail { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; } .fa-action-bar__lead { flex: 1 1 auto; min-width: 0; } .fa-action-bar__trail { flex: 0 0 auto; } .fa-action-bar__title { font-family: var(--font-sans); font-weight: 600; font-size: 15px; color: var(--fg); margin: 0; margin-right: var(--space-3); } .fa-action-bar__count { font-size: 12px; color: var(--fg-3); font-weight: 500; } .fa-action-bar__search { flex: 1 1 240px; min-width: 200px; max-width: 360px; height: 36px; padding: 0 var(--space-3) 0 36px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); color: var(--fg); font-size: 13px; font-family: var(--font-sans); transition: border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out); } .fa-action-bar__search:focus { outline: 0; border-color: var(--primary); background: var(--surface); } .fa-action-bar__search-wrap { position: relative; flex: 1 1 240px; max-width: 360px; } .fa-action-bar__search-wrap > .bi, .fa-action-bar__search-wrap > .fa-icon { position: absolute; left: var(--space-3); top: 50%; transform: translateY(-50%); color: var(--fg-3); pointer-events: none; font-size: 14px; } .fa-action-bar__divider { width: 1px; align-self: stretch; background: var(--border); margin: 0 var(--space-1); } .fa-action-bar__chip-group { display: inline-flex; flex-wrap: wrap; gap: var(--space-1); align-items: center; } @media (max-width: 600px) { .fa-action-bar { padding: var(--space-3); } .fa-action-bar__lead, .fa-action-bar__trail { width: 100%; } .fa-action-bar__search, .fa-action-bar__search-wrap { max-width: 100%; } } /* --------------------------------------------------------------------------- * fa-table — Aurora Table Pattern (V3 W3-UX-Table) * * Replacement for raw bootstrap `` in list views. * Tokens-only (no hex), zebra-striping via --surface-2, hover-state, * sortable headers, sticky-header opt-in, selected-row state for bulk-select. * * Markup: *

* * * * * * * * * * *

Name
...

* * ------------------------------------------------------------------------- */ .fa-table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-sm); overflow: auto; /* horizontal scroll preserved on small viewports without losing border-radius */ isolation: isolate; } .fa-table { width: 100%; border-collapse: separate; border-spacing: 0; font-family: var(--font-sans); font-size: 13px; color: var(--fg); background: var(--surface); } .fa-table__head { background: var(--surface-2); } .fa-table--sticky-head .fa-table__head th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); } .fa-table__th { text-align: left; font-weight: 600; font-size: 12px; line-height: 1.4; letter-spacing: 0.02em; color: var(--fg-2); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); white-space: nowrap; user-select: none; } .fa-table__th--num, .fa-table__cell--num { text-align: right; font-variant-numeric: tabular-nums; } .fa-table__th--center, .fa-table__cell--center { text-align: center; } .fa-table__th--actions, .fa-table__cell--actions { text-align: right; white-space: nowrap; width: 1%; } .fa-table__th--sortable { cursor: pointer; transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); } .fa-table__th--sortable:hover { background: var(--surface-3); color: var(--fg); } .fa-table__th--sortable:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; } .fa-table__th--sortable::after { content: ""; display: inline-block; width: 0; height: 0; margin-left: var(--space-2); vertical-align: middle; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid var(--fg-3); opacity: 0.4; transition: opacity var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out); } .fa-table__th--sort-asc::after { opacity: 1; transform: rotate(180deg); border-top-color: var(--primary); } .fa-table__th--sort-desc::after { opacity: 1; border-top-color: var(--primary); } .fa-table__row { transition: background var(--t-fast) var(--ease-out); } .fa-table__row + .fa-table__row .fa-table__cell { border-top: 1px solid var(--border); } .fa-table--striped .fa-table__row:nth-child(even) { background: color-mix(in srgb, var(--surface-2) 50%, var(--surface)); } .fa-table--hover .fa-table__row:hover, .fa-table__row:hover { background: var(--surface-2); } .fa-table__row--selected, .fa-table__row--selected:hover { background: var(--primary-tint); } .fa-table__row--clickable { cursor: pointer; } /* row-click controller sets data-row-clickable="true" on rows whose first non-action anchor it can navigate to. Pointer cursor signals to the user that the whole row is the show-shortcut, not just the eye-icon button. */ tr.fa-table__row[data-row-clickable="true"] { cursor: pointer; } .fa-table__cell { padding: var(--space-3) var(--space-4); vertical-align: middle; line-height: 1.5; } .fa-table--compact .fa-table__cell, .fa-table--compact .fa-table__th { padding: var(--space-2) var(--space-3); } .fa-table__cell--checkbox, .fa-table__th--checkbox { width: 36px; padding-left: var(--space-3); padding-right: 0; } .fa-table__cell--muted { color: var(--fg-3); } .fa-table__empty { padding: var(--space-6) var(--space-4); text-align: center; color: var(--fg-3); } .fa-table__foot { background: var(--surface-2); color: var(--fg-2); font-size: 12px; } .fa-table__foot td { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border); } /* --------------------------------------------------------------------------- * fa-bulk-action-bar — Sticky Bulk-Action Bar (V3 W3-UX-Bulk) * * Sticky-bottom action bar that slides up when ≥1 row is selected. Aurora- * styled, supports primary/danger/ghost actions, count-display with live * region, deselect-all close button. * * Markup: * * ------------------------------------------------------------------------- */ .fa-bulk-action-bar { position: sticky; bottom: var(--space-4); margin: var(--space-4) auto 0; width: fit-content; max-width: calc(100% - 2 * var(--space-4)); display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-pill); box-shadow: var(--shadow-lg); z-index: var(--z-sticky); animation: fa-bulk-action-bar-enter var(--t-base) var(--ease-out); } @keyframes fa-bulk-action-bar-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .fa-bulk-action-bar { animation: none; } } .fa-bulk-action-bar[hidden] { display: none; } .fa-bulk-action-bar__count { display: inline-flex; align-items: baseline; gap: var(--space-2); font-family: var(--font-sans); font-size: 13px; color: var(--fg); white-space: nowrap; } .fa-bulk-action-bar__count-value { font-weight: 700; font-size: 15px; color: var(--primary); font-variant-numeric: tabular-nums; } .fa-bulk-action-bar__count-label { color: var(--fg-2); } .fa-bulk-action-bar__divider { width: 1px; height: 20px; background: var(--border); flex-shrink: 0; } .fa-bulk-action-bar__actions { display: inline-flex; align-items: center; gap: var(--space-1); } .fa-bulk-action-bar__close { background: transparent; border: 0; width: 32px; height: 32px; border-radius: var(--r-pill); color: var(--fg-3); cursor: pointer; font-size: 18px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; margin-left: var(--space-1); transition: color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out); } .fa-bulk-action-bar__close:hover { color: var(--fg); background: var(--surface-2); } .fa-bulk-action-bar__close:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; } /* Mobile: full-width bottom-pinned */ @media (max-width: 600px) { .fa-bulk-action-bar { position: fixed; left: var(--space-2); right: var(--space-2); bottom: var(--space-2); margin: 0; width: auto; max-width: none; border-radius: var(--r-lg); flex-wrap: wrap; justify-content: center; } } /* ═══════════════════════════════════════════════════════════════════ fa-drawer — Side-Sheet / Slide-In Drawer (DS: previews/drawer.html) Right (default) or left (--left). Sizes: --sm (360px), default (480px), --lg (720px). Toggle with .is-open. Backdrop: .fa-drawer-backdrop. ═══════════════════════════════════════════════════════════════════ */ .fa-drawer-backdrop { position: fixed; inset: 0; background: radial-gradient(circle at 70% 30%, color-mix(in oklab, var(--primary-glow) 30%, transparent) 0%, transparent 60%), radial-gradient(circle at 25% 80%, color-mix(in oklab, var(--accent-glow) 24%, transparent) 0%, transparent 55%), rgb(15 18 28 / 0.42); backdrop-filter: blur(6px) saturate(110%); opacity: 0; pointer-events: none; transition: opacity 260ms; z-index: var(--z-modal-backdrop, 1060); } .fa-drawer-backdrop.is-open { opacity: 1; pointer-events: auto; } .fa-drawer { position: fixed; top: 0; right: 0; height: 100vh; width: 480px; max-width: 92vw; background: radial-gradient(circle at 100% 0%, color-mix(in oklab, var(--primary-tint) 55%, transparent) 0%, transparent 45%), radial-gradient(circle at 0% 100%, color-mix(in oklab, var(--accent-tint) 45%, transparent) 0%, transparent 50%), var(--surface); border-left: 1px solid color-mix(in oklab, var(--primary) 22%, var(--border)); box-shadow: -1px 0 0 color-mix(in oklab, var(--primary) 14%, transparent) inset, -28px 0 64px -16px color-mix(in oklab, var(--primary-glow) 70%, transparent), -8px 0 24px -4px rgb(0 0 0 / 0.18); transform: translateX(102%); transition: transform 320ms cubic-bezier(0.2, 0.9, 0.3, 1); z-index: var(--z-modal, 1070); display: flex; flex-direction: column; overflow: hidden; isolation: isolate; } html[data-theme="dark"] .fa-drawer { background: radial-gradient(circle at 100% 0%, color-mix(in oklab, var(--primary-tint) 40%, transparent) 0%, transparent 45%), radial-gradient(circle at 0% 100%, color-mix(in oklab, var(--accent-tint) 30%, transparent) 0%, transparent 50%), var(--surface-2); } .fa-drawer.is-open { transform: translateX(0); } /* Gradient leading edge — Aurora signature */ .fa-drawer::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 3px; background: linear-gradient(180deg, var(--primary) 0%, var(--accent) 50%, var(--primary) 100%); opacity: 0.9; z-index: 2; } /* Corner aura */ .fa-drawer::after { content: ""; position: absolute; right: -60px; top: -60px; width: 240px; height: 240px; background: radial-gradient(circle, color-mix(in oklab, var(--primary-glow) 70%, transparent) 0%, transparent 65%); pointer-events: none; z-index: 0; } .fa-drawer--left { right: auto; left: 0; border-left: 0; border-right: 1px solid color-mix(in oklab, var(--primary) 22%, var(--border)); box-shadow: 1px 0 0 color-mix(in oklab, var(--primary) 14%, transparent) inset, 28px 0 64px -16px color-mix(in oklab, var(--primary-glow) 70%, transparent), 8px 0 24px -4px rgb(0 0 0 / 0.18); transform: translateX(-102%); } .fa-drawer--left::before { left: auto; right: 0; } .fa-drawer--lg { width: 720px; } .fa-drawer--sm { width: 360px; } .fa-drawer__header { position: relative; z-index: 1; display: flex; align-items: flex-start; gap: 14px; padding: 20px 22px 18px; border-bottom: 1px solid color-mix(in oklab, var(--primary) 12%, var(--border)); background: linear-gradient(180deg, color-mix(in oklab, var(--primary-tint) 35%, transparent) 0%, transparent 100%); } .fa-drawer__header-icon { width: 38px; height: 38px; border-radius: 10px; background: radial-gradient(circle at 30% 25%, color-mix(in oklab, var(--accent) 24%, transparent) 0%, transparent 65%), color-mix(in oklab, var(--primary-tint) 90%, var(--surface)); border: 1px solid color-mix(in oklab, var(--primary) 36%, transparent); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; font-size: 17px; box-shadow: 0 0 14px color-mix(in oklab, var(--primary-glow) 80%, transparent); flex-shrink: 0; } .fa-drawer__header-text { flex: 1; min-width: 0; } .fa-drawer__eyebrow { font: 700 10px var(--font-mono); color: var(--primary); text-transform: uppercase; letter-spacing: 0.12em; display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: var(--r-pill); background: color-mix(in oklab, var(--primary-tint) 90%, transparent); border: 1px solid color-mix(in oklab, var(--primary) 25%, transparent); } .fa-drawer__eyebrow::before { content: "✦"; font-size: 9px; color: var(--accent); } .fa-drawer__title { font: 700 17px var(--font-sans); color: var(--fg); margin: 8px 0 0; letter-spacing: -0.015em; } .fa-drawer__close { margin-left: auto; background: transparent; border: 1px solid transparent; color: var(--fg-2); width: 32px; height: 32px; border-radius: var(--r-md); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all 150ms; flex-shrink: 0; } .fa-drawer__close:hover { background: color-mix(in oklab, var(--primary-tint) 80%, transparent); border-color: color-mix(in oklab, var(--primary) 30%, transparent); color: var(--primary); } .fa-drawer__close:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .fa-drawer__body { position: relative; z-index: 1; padding: 22px; overflow-y: auto; flex: 1; } .fa-drawer__footer { position: relative; z-index: 1; padding: 14px 22px; border-top: 1px solid color-mix(in oklab, var(--primary) 10%, var(--border)); background: linear-gradient(0deg, color-mix(in oklab, var(--accent-tint) 30%, transparent) 0%, transparent 100%); display: flex; gap: 10px; justify-content: flex-end; backdrop-filter: blur(6px); } .fa-drawer__section { margin-bottom: 22px; } .fa-drawer__section h4 { font: 700 10px var(--font-mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg-3); margin: 0 0 10px; display: flex; align-items: center; gap: 8px; } .fa-drawer__section h4::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, color-mix(in oklab, var(--primary) 25%, transparent) 0%, transparent 100%); } .fa-drawer__kv { display: grid; grid-template-columns: 130px 1fr; gap: 8px 14px; font: 500 13px var(--font-sans); margin: 0; padding: 14px 16px; background: color-mix(in oklab, var(--primary-tint) 30%, var(--surface-2)); border: 1px solid color-mix(in oklab, var(--primary) 12%, var(--border)); border-radius: var(--r-md); } .fa-drawer__kv dt { color: var(--fg-3); font-weight: 600; } .fa-drawer__kv dd { color: var(--fg); margin: 0; font-weight: 600; } .fa-drawer__desc { font: 400 13px / 1.55 var(--font-sans); color: var(--fg-2); margin: 0; padding: 14px 16px; background: var(--surface-2); border-left: 3px solid color-mix(in oklab, var(--accent) 60%, transparent); border-radius: 0 var(--r-md) var(--r-md) 0; } .fa-drawer__list { font: 500 13px / 1.55 var(--font-sans); list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; } .fa-drawer__list li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); color: var(--fg); } .fa-drawer__list li i, .fa-drawer__list li .fa-icon { color: var(--success); font-size: 14px; width: 16px; text-align: center; } .fa-drawer__list li.is-pending i, .fa-drawer__list li.is-pending .fa-icon { color: var(--warning); } .fa-drawer__list li.is-pending { background: color-mix(in oklab, var(--warning-glow) 40%, var(--surface-2)); } .fa-drawer__pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; font: 700 11px var(--font-mono); border-radius: var(--r-pill); background: var(--danger-glow); color: var(--danger); border: 1px solid color-mix(in oklab, var(--danger) 40%, transparent); } @media (max-width: 600px) { .fa-drawer { width: 100%; max-width: 100%; } .fa-drawer--sm { width: 100%; } .fa-drawer--lg { width: 100%; } } /* ═══════════════════════════════════════════════════════════════════ fa-menu — Dropdown / Action-Menu (DS: previews/dropdown-menu.html) Anchor with .fa-menu-anchor, toggle .is-open on .fa-menu. ═══════════════════════════════════════════════════════════════════ */ .fa-menu-anchor { position: relative; display: inline-block; } .fa-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 220px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: 0 16px 32px -8px rgb(0 0 0 / 0.18), 0 2px 8px -2px rgb(0 0 0 / 0.08); padding: 6px; z-index: var(--z-dropdown, 1080); opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity 120ms, transform 120ms; } html[data-theme="dark"] .fa-menu { background: var(--surface-2); } .fa-menu.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; } .fa-menu--left { right: auto; left: 0; } .fa-menu__group { padding: 4px 0; } .fa-menu__group + .fa-menu__group { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 8px; } .fa-menu__label { font: 700 10px var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-3); padding: 4px 12px 6px; } .fa-menu__item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--r-sm); font: 500 13px var(--font-sans); color: var(--fg); cursor: pointer; text-decoration: none; user-select: none; background: transparent; border: 0; width: 100%; text-align: left; } .fa-menu__item:hover, .fa-menu__item:focus-visible { background: var(--surface-2); outline: none; } html[data-theme="dark"] .fa-menu__item:hover { background: var(--surface-3); } .fa-menu__item i, .fa-menu__item .fa-icon { font-size: 15px; color: var(--fg-2); width: 18px; text-align: center; } .fa-menu__item--danger { color: var(--danger); } .fa-menu__item--danger i, .fa-menu__item--danger .fa-icon { color: var(--danger); } .fa-menu__item-shortcut { margin-left: auto; font: 600 11px var(--font-mono); color: var(--fg-3); background: var(--surface-2); padding: 2px 6px; border-radius: 3px; } html[data-theme="dark"] .fa-menu__item-shortcut { background: var(--surface-3); } .fa-menu__item-check { margin-left: auto; color: var(--primary); } .fa-menu__divider { height: 1px; background: var(--border); margin: 4px 0; } /* ═══════════════════════════════════════════════════════════════════ fa-pager — Aurora Pagination (DS: previews/pagination.html) Pill-shell with glow surface, gradient active page, per-page select. ═══════════════════════════════════════════════════════════════════ */ .fa-pager { display: inline-flex; align-items: center; gap: 4px; padding: 4px; background: color-mix(in oklab, var(--surface) 70%, var(--primary-tint)); border: 1px solid color-mix(in oklab, var(--primary) 14%, var(--border)); border-radius: var(--r-pill); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.4), 0 4px 12px -4px color-mix(in oklab, var(--primary-glow) 50%, transparent); } html[data-theme="dark"] .fa-pager { background: color-mix(in oklab, var(--surface-2) 80%, var(--primary-tint)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.04), 0 4px 12px -4px color-mix(in oklab, var(--primary-glow) 60%, transparent); } .fa-pager__btn { position: relative; min-width: 32px; height: 32px; padding: 0 10px; background: transparent; border: 1px solid transparent; border-radius: var(--r-pill); color: var(--fg-2); font: 700 13px var(--font-mono); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all 140ms cubic-bezier(0.2, 0.9, 0.3, 1); } .fa-pager__btn:hover { background: color-mix(in oklab, var(--primary-tint) 90%, transparent); border-color: color-mix(in oklab, var(--primary) 26%, transparent); color: var(--primary); box-shadow: 0 0 12px color-mix(in oklab, var(--primary-glow) 70%, transparent); } .fa-pager__btn.is-active { background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%); color: var(--on-primary); border-color: color-mix(in oklab, var(--primary) 60%, transparent); box-shadow: 0 0 0 1px rgb(255 255 255 / 0.18) inset, 0 0 18px color-mix(in oklab, var(--primary-glow) 90%, transparent), 0 4px 10px -2px color-mix(in oklab, var(--primary) 50%, transparent); text-shadow: 0 1px 0 rgb(0 0 0 / 0.18); } .fa-pager__btn.is-active::after { content: "✦"; position: absolute; top: -4px; right: -4px; font-size: 8px; color: var(--accent); text-shadow: 0 0 6px var(--accent-glow); animation: fa-pager-spark 1.8s ease-in-out infinite; } @keyframes fa-pager-spark { 0%, 100% { opacity: 0.35; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1.2); } } @media (prefers-reduced-motion: reduce) { .fa-pager__btn.is-active::after { animation: none; } } .fa-pager__btn[disabled] { opacity: 0.32; cursor: not-allowed; } .fa-pager__btn[disabled]:hover { background: transparent; border-color: transparent; color: var(--fg-3); box-shadow: none; } .fa-pager__ellipsis { color: var(--fg-3); padding: 0 4px; font: 700 13px var(--font-mono); letter-spacing: 1px; } .fa-pager-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; background: radial-gradient(circle at 0% 50%, color-mix(in oklab, var(--primary-tint) 45%, transparent) 0%, transparent 35%), radial-gradient(circle at 100% 50%, color-mix(in oklab, var(--accent-tint) 35%, transparent) 0%, transparent 35%), var(--surface); border: 1px solid color-mix(in oklab, var(--primary) 12%, var(--border)); border-radius: var(--r-lg); box-shadow: 0 8px 24px -8px color-mix(in oklab, var(--primary-glow) 40%, transparent); flex-wrap: wrap; position: relative; overflow: hidden; } .fa-pager-bar::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--primary) 30%, var(--accent) 70%, transparent 100%); opacity: 0.65; } html[data-theme="dark"] .fa-pager-bar { background: radial-gradient(circle at 0% 50%, color-mix(in oklab, var(--primary-tint) 35%, transparent) 0%, transparent 35%), radial-gradient(circle at 100% 50%, color-mix(in oklab, var(--accent-tint) 25%, transparent) 0%, transparent 35%), var(--surface-2); } .fa-pager-bar__info { font: 500 13px var(--font-sans); color: var(--fg-2); display: inline-flex; align-items: center; gap: 8px; } .fa-pager-bar__info::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 8px var(--primary-glow); } .fa-pager-bar__info strong { color: var(--fg); font: 700 13px var(--font-mono); padding: 2px 8px; background: color-mix(in oklab, var(--primary-tint) 80%, transparent); border-radius: var(--r-sm); border: 1px solid color-mix(in oklab, var(--primary) 18%, transparent); } .fa-pager-perpage { display: inline-flex; align-items: center; gap: 8px; font: 500 13px var(--font-sans); color: var(--fg-2); } .fa-pager-perpage select { background: var(--surface); border: 1px solid color-mix(in oklab, var(--primary) 22%, var(--border)); border-radius: var(--r-pill); padding: 4px 10px; font: 700 12px var(--font-mono); color: var(--primary); box-shadow: 0 0 10px color-mix(in oklab, var(--primary-glow) 40%, transparent); cursor: pointer; } html[data-theme="dark"] .fa-pager-perpage select { background: var(--surface-2); } .fa-pager--compact { padding: 3px; } .fa-pager--compact .fa-pager__btn { min-width: 26px; height: 26px; font-size: 12px; padding: 0 6px; } .fa-pager--compact .fa-pager__btn.is-active::after { top: -3px; right: -3px; font-size: 7px; } /* ═══════════════════════════════════════════════════════════════════ fa-kbd — Keyboard key + combos (DS: previews/kbd-cheatsheet.html) fa-cheatsheet — Shortcut overlay content ═══════════════════════════════════════════════════════════════════ */ .fa-kbd { display: inline-flex; align-items: center; gap: 2px; font: 600 11px var(--font-mono); color: var(--fg-2); background: var(--surface); border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px; padding: 2px 6px; min-width: 22px; text-align: center; justify-content: center; box-shadow: 0 1px 0 rgb(0 0 0 / 0.04); } .fa-kbd--lg { font-size: 13px; padding: 4px 9px; min-width: 28px; } .fa-kbd-combo { display: inline-flex; align-items: center; gap: 4px; } .fa-kbd-combo__plus { color: var(--fg-3); font: 500 11px var(--font-mono); } .fa-cheatsheet { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 24px; max-width: 720px; } .fa-cheatsheet__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .fa-cheatsheet__title { font: 700 18px var(--font-sans); color: var(--fg); margin: 0; } .fa-cheatsheet__sub { font: 500 12px var(--font-mono); color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.06em; } .fa-cheatsheet__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; } @media (max-width: 600px) { .fa-cheatsheet__grid { grid-template-columns: 1fr; } } .fa-cheatsheet__group { margin-bottom: 16px; } .fa-cheatsheet__group h4 { font: 700 11px var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-3); margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border); } .fa-cheatsheet__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; font: 500 13px var(--font-sans); color: var(--fg); } .fa-cheatsheet__row span:first-child { color: var(--fg-2); } /* ─── fa-json-builder family (P-9 visual macros) ────────────────────────── Shared shell for: .fa-team-role-builder, .fa-resource-list, .fa-escalation-chain, .fa-success-criteria, .fa-subcontractor-chain Each is a card-like container with hidden raw-JSON textarea + visual editor. */ .fa-json-builder { display: flex; flex-direction: column; gap: 10px; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); } .fa-json-builder__hidden { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } .fa-json-builder__table-wrap { width: 100%; overflow-x: auto; } .fa-json-builder__table th, .fa-json-builder__table td { vertical-align: middle; padding: 6px 8px; } .fa-json-builder__empty { display: flex; align-items: center; gap: 8px; padding: 12px 10px; color: var(--fg-3); font: 500 13px var(--font-sans); background: var(--surface-2); border: 1px dashed var(--border); border-radius: var(--r-sm); } .fa-json-builder__toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; } .fa-json-builder__raw { display: flex; flex-direction: column; gap: 6px; padding: 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); } .fa-json-builder__raw textarea { font-family: var(--font-mono); font-size: 12px; min-height: 120px; } .fa-json-builder__raw-toggle[aria-pressed="true"] { border-color: var(--primary); color: var(--primary); } .fa-json-builder__row td:last-child { text-align: end; } /* ─── fa-resource-list — Tab-Layout for personnel/equipment/supplies ─── */ .fa-resource-list__tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 8px; } .fa-resource-list__tab { background: transparent; border: 1px solid transparent; border-bottom: none; padding: 6px 14px; font: 500 12px var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-3); cursor: pointer; border-radius: var(--r-sm) var(--r-sm) 0 0; transition: color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out); } .fa-resource-list__tab:hover { color: var(--fg); background: var(--surface-2); } .fa-resource-list__tab[aria-selected="true"] { color: var(--primary); border-color: var(--border); border-bottom-color: var(--surface); background: var(--surface); margin-bottom: -1px; } .fa-resource-list__count { margin-left: 6px; padding: 1px 6px; background: var(--surface-2); border-radius: var(--r-pill); font-size: 10px; color: var(--fg-2); } .fa-resource-list__panel { display: none; } .fa-resource-list__panel.is-active { display: flex; flex-direction: column; gap: 8px; } .fa-resource-list__chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 32px; padding: 6px; background: var(--surface-2); border: 1px dashed var(--border); border-radius: var(--r-sm); } .fa-resource-list__chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px 4px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pill); font: 500 12px var(--font-sans); color: var(--fg); } .fa-resource-list__chip-remove { background: transparent; border: none; padding: 0; color: var(--fg-3); cursor: pointer; font-size: 14px; line-height: 1; } .fa-resource-list__chip-remove:hover { color: var(--danger); } .fa-resource-list__add { display: flex; gap: 6px; align-items: center; } .fa-resource-list__add input { flex: 1 1 auto; } /* ─── fa-escalation-chain — horizontal stepper-like rows ─── */ .fa-escalation-chain__rows { display: flex; flex-direction: column; gap: 8px; } .fa-escalation-chain__row { display: grid; grid-template-columns: 56px 1fr 1fr 120px 40px; gap: 8px; align-items: center; padding: 8px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); } .fa-escalation-chain__level { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--primary-tint, var(--surface)); border: 1px solid var(--primary); color: var(--primary); border-radius: var(--r-pill); font: 700 14px var(--font-mono); } @media (max-width: 768px) { .fa-escalation-chain__row { grid-template-columns: 56px 1fr 40px; grid-template-rows: auto auto; } .fa-escalation-chain__row > :nth-child(3), .fa-escalation-chain__row > :nth-child(4) { grid-column: 1 / -1; } } /* ─── fa-success-criteria — table with prefill banner ─── */ .fa-success-criteria__prefill { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--accent-tint, var(--surface-2)); border: 1px solid var(--accent, var(--border)); border-radius: var(--r-sm); color: var(--accent, var(--fg-2)); font-size: 12px; } .fa-success-criteria__met-cell { text-align: center; } .fa-success-criteria__met-yes { color: var(--success); } .fa-success-criteria__met-no { color: var(--danger); } .fa-success-criteria__met-unknown { color: var(--fg-3); } /* ─── fa-subcontractor-chain — indented tree builder ─── */ .fa-subcontractor-chain__tree { display: flex; flex-direction: column; gap: 6px; } .fa-subcontractor-chain__node { display: grid; grid-template-columns: 1fr 80px 1fr 32px 40px 40px; gap: 6px; align-items: center; padding: 8px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); } .fa-subcontractor-chain__node[data-depth="1"] { margin-left: 28px; border-left: 3px solid var(--primary); } .fa-subcontractor-chain__node[data-depth="2"] { margin-left: 56px; border-left: 3px solid var(--accent, var(--primary)); } .fa-subcontractor-chain__node[data-depth="3"] { margin-left: 84px; border-left: 3px solid var(--warning, var(--accent, var(--primary))); } .fa-subcontractor-chain__critical { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; } .fa-subcontractor-chain__actions { display: flex; gap: 4px; } @media (max-width: 900px) { .fa-subcontractor-chain__node { grid-template-columns: 1fr 80px 32px 40px 40px; } .fa-subcontractor-chain__node > :nth-child(3) { grid-column: 1 / -1; } } /* ========================================================================== Aurora v4 — fa-matrix-table (Risk Heatmap) Macro: _components/_fa_matrix_table.html.twig Outer element carries BOTH .fa-matrix-table (Aurora primary) and .isms-risk-matrix (BC-shim). Inner BEM modifiers use .fa-matrix-table__*. ========================================================================== */ .fa-matrix-table { /* inherit cell palette from .isms-risk-matrix which is also on the element */ display: flex; flex-direction: column; gap: var(--space-2); font-family: var(--font-sans); } .fa-matrix-table__caption { font-size: 14px; font-weight: 600; color: var(--fg); margin-bottom: var(--space-2); text-align: left; } .fa-matrix-table__layout { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); } .fa-matrix-table__body { display: flex; flex-direction: column; gap: var(--space-2); } .fa-matrix-table__grid { display: grid; /* col 0 = row-label; cols 1..N = data cols */ grid-template-columns: auto repeat(var(--fa-matrix-cols, 5), minmax(72px, 1fr)); gap: 4px; } .fa-matrix-table__corner { /* empty top-left corner */ } .fa-matrix-table__hd { display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 600; color: var(--fg-2); font-size: 12px; padding: var(--space-1) var(--space-2); line-height: 1.3; text-align: center; } .fa-matrix-table__row-label { display: flex; align-items: center; justify-content: flex-end; font-size: 12px; font-weight: 600; color: var(--fg-2); padding: var(--space-1) var(--space-2); background: var(--surface-2); border-radius: var(--r-sm); white-space: nowrap; max-width: 120px; overflow: hidden; text-overflow: ellipsis; } .fa-matrix-table__cell { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: var(--r-sm); font-size: 13px; font-weight: 700; border: 1px solid transparent; transition: transform var(--t-fast, 0.15s) var(--ease-out, ease-out), box-shadow var(--t-fast, 0.15s) var(--ease-out, ease-out); text-decoration: none; cursor: default; position: relative; } a.fa-matrix-table__cell { cursor: pointer; } a.fa-matrix-table__cell:hover, a.fa-matrix-table__cell:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--primary); outline: none; } /* Severity variants — use same cell-N tokens as .isms-risk-matrix */ .fa-matrix-table__cell--low { background: var(--cell-1, var(--success-tint)); color: var(--cell-fg-1, var(--success-strong)); } .fa-matrix-table__cell--moderate { background: var(--cell-2, color-mix(in oklab, var(--success) 35%, transparent)); color: var(--cell-fg-2, var(--success-strong)); } .fa-matrix-table__cell--medium { background: var(--cell-3, var(--warning-tint)); color: var(--cell-fg-3, var(--warning-strong, var(--warning))); } .fa-matrix-table__cell--high { background: var(--cell-4, color-mix(in oklab, var(--warning) 45%, transparent)); color: var(--cell-fg-4, var(--warning-strong, var(--warning))); } .fa-matrix-table__cell--critical { background: var(--cell-5, var(--danger-tint)); color: var(--cell-fg-5, var(--danger-strong)); } /* Count pill inside cell */ .fa-matrix-table__count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--r-pill); background: color-mix(in oklab, currentColor 15%, transparent); font-size: 11px; font-weight: 700; color: inherit; } /* RAG-mode percentage label (mode='rag') */ .fa-matrix-table--rag .fa-matrix-table__cell { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 60px; } .fa-matrix-table__rate { font-size: 11px; font-weight: 600; line-height: 1; opacity: 0.85; } /* X-axis label */ .fa-matrix-table__x-label { text-align: center; font-size: 13px; font-weight: 600; color: var(--fg-2); padding-top: var(--space-1); } /* Legend */ .fa-matrix-table__legend { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border); margin-top: var(--space-2); } .fa-matrix-table__legend-chip { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 12px; font-weight: 500; color: var(--fg-2); padding: var(--space-1) var(--space-2); border-radius: var(--r-pill); } .fa-matrix-table__legend-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; } .fa-matrix-table__legend-chip--low .fa-matrix-table__legend-swatch { background: var(--cell-1, var(--success-tint)); } .fa-matrix-table__legend-chip--moderate .fa-matrix-table__legend-swatch { background: var(--cell-2, color-mix(in oklab, var(--success) 35%, transparent)); } .fa-matrix-table__legend-chip--medium .fa-matrix-table__legend-swatch { background: var(--cell-3, var(--warning-tint)); } .fa-matrix-table__legend-chip--high .fa-matrix-table__legend-swatch { background: var(--cell-4, color-mix(in oklab, var(--warning) 45%, transparent)); } .fa-matrix-table__legend-chip--critical .fa-matrix-table__legend-swatch { background: var(--cell-5, var(--danger-tint)); } /* ========================================================================== Aurora v4 — fa-settings-table (Admin Form-Grid) Macro: _components/_fa_settings_table.html.twig Tabellarisches Form-Layout für /admin/settings/* Seiten. ========================================================================== */ .fa-settings-table { width: 100%; border-collapse: separate; border-spacing: 0; font-family: var(--font-sans); font-size: 14px; } .fa-settings-table__caption { caption-side: top; padding: 0 0 var(--space-3); text-align: left; } .fa-settings-table__caption-title { font-size: 15px; font-weight: 600; color: var(--fg); } .fa-settings-table__caption-meta { margin-left: var(--space-3); font-size: 12px; color: var(--fg-3); font-family: var(--font-mono); } .fa-settings-table__col--label { width: 220px; } .fa-settings-table__col--control { /* flex placeholder — no explicit width */ } .fa-settings-table__col--status { width: 140px; } .fa-settings-table__row { border-bottom: 1px solid var(--border); } .fa-settings-table__row:last-child { border-bottom: none; } .fa-settings-table__label-cell { padding: var(--space-3) var(--space-4) var(--space-3) 0; vertical-align: middle; font-weight: normal; } .fa-settings-table__label { display: block; font-size: 13px; font-weight: 600; color: var(--fg); cursor: pointer; } .fa-settings-table__hint { display: block; font-size: 11px; color: var(--fg-3); margin-top: 2px; line-height: 1.4; } .fa-settings-table__control-cell { padding: var(--space-3) var(--space-4) var(--space-3) 0; vertical-align: middle; } .fa-settings-table__status-cell { padding: var(--space-3) 0; vertical-align: middle; text-align: right; white-space: nowrap; } /* Chips inside settings table */ .fa-settings-table__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; } .fa-settings-table__chip-label { cursor: pointer; margin: 0; } .fa-settings-table__chip-cb:focus-visible + .fa-filter-chip { outline: 2px solid var(--primary); outline-offset: 2px; } /* Compact .fa-cyber-input inside settings table */ .fa-settings-table .fa-cyber-input__frame { min-height: 36px; } .fa-settings-table .fa-cyber-input__field { padding: 6px 10px; font-size: 13px; } /* --------------------------------------------------------------------------- * fa-owner-picker — Unified Person/User owner-slot (audit-s4 P-1) * * Aurora wrapper around the recurring "User + Person + Deputies + * Legacy-Freetext" cluster. Renders the primary User and Person slots * side-by-side with an "— or —" separator, deputies underneath and the * legacy free-text tucked into an info alert. * * Companion macro: templates/_components/_fa_owner_picker.html.twig * Companion Stimulus controller: assets/controllers/owner_picker_controller.js * ------------------------------------------------------------------------- */ .fa-owner-picker { border: 1px dashed var(--border); border-radius: var(--r-md); padding: var(--space-3) var(--space-3) var(--space-2); background: var(--surface); } .fa-owner-picker > legend { width: auto; padding: 0 var(--space-2); margin-left: var(--space-2); color: var(--fg); font-weight: 600; float: none; } .fa-owner-picker__primary { margin-bottom: var(--space-2); } .fa-owner-picker__sep { align-items: center; justify-content: center; padding-bottom: var(--space-3); } .fa-owner-picker__sep-label { display: inline-flex; align-items: center; justify-content: center; padding: 0 var(--space-2); font: 600 11px var(--font-mono); color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.08em; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); height: 22px; border-radius: var(--r-sm); } .fa-owner-picker__slot { transition: opacity var(--t-fast) var(--ease-out); } .fa-owner-picker__slot[data-owner-picker-dimmed="true"] { opacity: 0.55; } .fa-owner-picker__slot[data-owner-picker-dimmed="true"]:hover, .fa-owner-picker__slot[data-owner-picker-dimmed="true"]:focus-within { opacity: 1; } .fa-owner-picker__legacy { border-top: 1px solid var(--border); padding-top: var(--space-2); } /* ─── fa-json-builder family (P-9 visual macros) ────────────────────────── Shared shell for: .fa-team-role-builder, .fa-resource-list, .fa-escalation-chain, .fa-success-criteria, .fa-subcontractor-chain Each is a card-like container with hidden raw-JSON textarea + visual editor. */ .fa-json-builder { display: flex; flex-direction: column; gap: 10px; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); } .fa-json-builder__hidden { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } .fa-json-builder__table-wrap { width: 100%; overflow-x: auto; } .fa-json-builder__table th, .fa-json-builder__table td { vertical-align: middle; padding: 6px 8px; } .fa-json-builder__empty { display: flex; align-items: center; gap: 8px; padding: 12px 10px; color: var(--fg-3); font: 500 13px var(--font-sans); background: var(--surface-2); border: 1px dashed var(--border); border-radius: var(--r-sm); } .fa-json-builder__toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; } .fa-json-builder__raw { display: flex; flex-direction: column; gap: 6px; padding: 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); } .fa-json-builder__raw textarea { font-family: var(--font-mono); font-size: 12px; min-height: 120px; } .fa-json-builder__raw-toggle[aria-pressed="true"] { border-color: var(--primary); color: var(--primary); } .fa-json-builder__row td:last-child { text-align: end; } /* ─── fa-resource-list — Tab-Layout for personnel/equipment/supplies ─── */ .fa-resource-list__tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 8px; } .fa-resource-list__tab { background: transparent; border: 1px solid transparent; border-bottom: none; padding: 6px 14px; font: 500 12px var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-3); cursor: pointer; border-radius: var(--r-sm) var(--r-sm) 0 0; transition: color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out); } .fa-resource-list__tab:hover { color: var(--fg); background: var(--surface-2); } .fa-resource-list__tab[aria-selected="true"] { color: var(--primary); border-color: var(--border); border-bottom-color: var(--surface); background: var(--surface); margin-bottom: -1px; } .fa-resource-list__count { margin-left: 6px; padding: 1px 6px; background: var(--surface-2); border-radius: var(--r-pill); font-size: 10px; color: var(--fg-2); } .fa-resource-list__panel { display: none; } .fa-resource-list__panel.is-active { display: flex; flex-direction: column; gap: 8px; } .fa-resource-list__chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 32px; padding: 6px; background: var(--surface-2); border: 1px dashed var(--border); border-radius: var(--r-sm); } .fa-resource-list__chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px 4px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pill); font: 500 12px var(--font-sans); color: var(--fg); } .fa-resource-list__chip-remove { background: transparent; border: none; padding: 0; color: var(--fg-3); cursor: pointer; font-size: 14px; line-height: 1; } .fa-resource-list__chip-remove:hover { color: var(--danger); } .fa-resource-list__add { display: flex; gap: 6px; align-items: center; } .fa-resource-list__add input { flex: 1 1 auto; } /* ─── fa-escalation-chain — horizontal stepper-like rows ─── */ .fa-escalation-chain__rows { display: flex; flex-direction: column; gap: 8px; } .fa-escalation-chain__row { display: grid; grid-template-columns: 56px 1fr 1fr 120px 40px; gap: 8px; align-items: center; padding: 8px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); } .fa-escalation-chain__level { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--primary-tint, var(--surface)); border: 1px solid var(--primary); color: var(--primary); border-radius: var(--r-pill); font: 700 14px var(--font-mono); } @media (max-width: 768px) { .fa-escalation-chain__row { grid-template-columns: 56px 1fr 40px; grid-template-rows: auto auto; } .fa-escalation-chain__row > :nth-child(3), .fa-escalation-chain__row > :nth-child(4) { grid-column: 1 / -1; } } /* ─── fa-success-criteria — table with prefill banner ─── */ .fa-success-criteria__prefill { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--accent-tint, var(--surface-2)); border: 1px solid var(--accent, var(--border)); border-radius: var(--r-sm); color: var(--accent, var(--fg-2)); font-size: 12px; } .fa-success-criteria__met-cell { text-align: center; } .fa-success-criteria__met-yes { color: var(--success); } .fa-success-criteria__met-no { color: var(--danger); } .fa-success-criteria__met-unknown { color: var(--fg-3); } /* ─── fa-subcontractor-chain — indented tree builder ─── */ .fa-subcontractor-chain__tree { display: flex; flex-direction: column; gap: 6px; } .fa-subcontractor-chain__node { display: grid; grid-template-columns: 1fr 80px 1fr 32px 40px 40px; gap: 6px; align-items: center; padding: 8px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); } .fa-subcontractor-chain__node[data-depth="1"] { margin-left: 28px; border-left: 3px solid var(--primary); } .fa-subcontractor-chain__node[data-depth="2"] { margin-left: 56px; border-left: 3px solid var(--accent, var(--primary)); } .fa-subcontractor-chain__node[data-depth="3"] { margin-left: 84px; border-left: 3px solid var(--warning, var(--accent, var(--primary))); } .fa-subcontractor-chain__critical { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; } .fa-subcontractor-chain__actions { display: flex; gap: 4px; } @media (max-width: 900px) { .fa-subcontractor-chain__node { grid-template-columns: 1fr 80px 32px 40px 40px; } .fa-subcontractor-chain__node > :nth-child(3) { grid-column: 1 / -1; } } /* ========================================================================== Norm-Bridge — Audit-S5 P-12 Subtle hint underneath a form-label that bridges ISO 27001 terminology to ISO 9001 / 14001 / other QM-systems for users with QMS background. Tokens consumed: --fg-3, --border, --primary, --sev-info-color. ========================================================================== */ .fa-norm-bridge { display: inline-flex; align-items: baseline; gap: var(--space-1); padding: 2px var(--space-2); margin: 4px 0 6px; font-size: 12px; line-height: 1.45; color: var(--fg-3); background: var(--surface); border-left: 2px solid var(--sev-info-color); border-radius: 0 var(--r-sm) var(--r-sm) 0; transition: opacity var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out); } .fa-norm-bridge--subtle { opacity: 0.78; } .fa-norm-bridge--subtle:hover, .fa-norm-bridge--subtle:focus-within { opacity: 1; background: var(--surface-2); } .fa-norm-bridge--always_visible { opacity: 1; } .fa-norm-bridge__icon { --fa-icon-size: 12px; flex-shrink: 0; color: var(--sev-info-color); transform: translateY(1px); } .fa-norm-bridge__norms { font-weight: 600; color: var(--fg-2); letter-spacing: 0.01em; white-space: nowrap; } .fa-norm-bridge__text { color: var(--fg-3); } /* ========================================================================== Severity-Choice — Audit-S5 P-13 4-stage radio-group (low / medium / high / critical) with hover-revealed definition. Each option uses a --sev-*-color tone for visual weight. ========================================================================== */ .fa-severity-choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-2); margin: var(--space-2) 0; } .fa-severity-choice__option { position: relative; display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); cursor: pointer; transition: background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out); } .fa-severity-choice__option:hover { background: var(--surface-2); border-color: var(--sev-tone, var(--border)); transform: translateY(-1px); } .fa-severity-choice__option.is-selected { background: var(--surface-2); border-color: var(--sev-tone, var(--primary)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--sev-tone, var(--primary)) 25%, transparent); } .fa-severity-choice__option--success { --sev-tone: var(--sev-success-color); } .fa-severity-choice__option--info { --sev-tone: var(--sev-info-color); } .fa-severity-choice__option--warning { --sev-tone: var(--sev-warning-color); } .fa-severity-choice__option--danger { --sev-tone: var(--sev-danger-color); } .fa-severity-choice__input { position: absolute; opacity: 0; pointer-events: none; } .fa-severity-choice__input:focus-visible + .fa-severity-choice__dot { outline: 2px solid var(--primary); outline-offset: 3px; } .fa-severity-choice__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--sev-tone, var(--border)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--sev-tone, var(--border)) 40%, transparent); align-self: flex-start; } .fa-severity-choice__label { font: 600 14px var(--font-sans); color: var(--fg); letter-spacing: 0.01em; } .fa-severity-choice__definition { font-size: 12px; line-height: 1.45; color: var(--fg-3); } .fa-severity-choice__option.is-selected .fa-severity-choice__label { color: var(--fg); } /* ══════════════════════════════════════════════════════════════ Audit-Log-Row — .fa-audit-row ══════════════════════════════════════════════════════════════ */ .fa-audit-feed { display: flex; flex-direction: column; background: var(--surface); } .fa-audit-row { display: grid; grid-template-columns: 110px 14px minmax(120px, 1fr) auto minmax(140px, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--border); font-size: 12px; border-left: 3px solid transparent; } .fa-audit-row:last-child { border-bottom: none; } .fa-audit-row:hover { background: var(--surface-2); } .fa-audit-row__ts { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-3); font-weight: 600; letter-spacing: 0.02em; } .fa-audit-row__sev { width: 8px; height: 8px; border-radius: 999px; background: var(--primary); box-shadow: 0 0 6px var(--primary); } .fa-audit-row__sev--info { background: var(--sev-info-color); box-shadow: 0 0 6px rgb(var(--sev-info-rgb) / 0.6); } .fa-audit-row__sev--warning { background: var(--sev-warning-color); box-shadow: 0 0 6px rgb(var(--sev-warning-rgb) / 0.6); } .fa-audit-row__sev--critical { background: var(--sev-critical-color); box-shadow: 0 0 8px rgb(var(--sev-critical-rgb) / 0.7); } .fa-audit-row__sev--danger { background: var(--sev-danger-color); box-shadow: 0 0 8px rgb(var(--sev-danger-rgb) / 0.7); } .fa-audit-row__actor { font-weight: 600; color: var(--fg); } .fa-audit-row__action { font-family: var(--font-mono); font-size: 11px; background: var(--primary-tint); color: var(--primary-strong); padding: 2px 7px; border-radius: 3px; border: 1px solid color-mix(in oklab, var(--primary) 22%, transparent); } .fa-audit-row__target { font-family: var(--font-mono); font-size: 11px; color: var(--fg-2); } .fa-audit-row__hash { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-3); margin-left: auto; letter-spacing: 0.04em; } .fa-audit-row__pill { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 7px; border-radius: 3px; background: rgb(var(--tone-purple-rgb) / 0.12); color: var(--tone-purple-strong); border: 1px solid rgb(var(--tone-purple-rgb) / 0.28); } .fa-audit-row--sealed { border-left-color: var(--tone-purple); background: linear-gradient(90deg, rgb(var(--tone-purple-rgb) / 0.04) 0%, transparent 40%); } .fa-audit-row--failed { border-left-color: var(--sev-danger-color); } /* ─────────────────────────────────────────────────────────────────────────── * fa-form-layout — Outline-Rail + Section-Cards for large forms (15+ fields) * Pattern: DPIA, Risk-Assessment, SoA-Bulk-Edit, Policy-Authoring, Audit-Plan * ─────────────────────────────────────────────────────────────────────────── */ .fa-form-layout { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-2xl); overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; } .fa-form-layout__header { display: grid; grid-template-columns: 1fr auto; gap: 14px; padding: 18px 24px 14px; border-bottom: 1px solid var(--border); background: linear-gradient( 180deg, color-mix(in oklab, var(--accent) 5%, transparent) 0%, transparent 100% ), var(--surface); position: relative; } .fa-form-layout__header::after { content: ""; position: absolute; left: 24px; right: 24px; bottom: -1px; height: 2px; background: linear-gradient(90deg, var(--primary), var(--accent), transparent); border-radius: 2px; } .fa-form-layout__eyebrow { display: inline-flex; align-items: center; gap: 6px; font: 600 10px var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-strong); margin-bottom: 4px; } .fa-form-layout__title { font: 700 18px/1.2 var(--font-sans); letter-spacing: -0.01em; margin: 0; } .fa-form-layout__sub { font: 400 12.5px/1.45 var(--font-sans); color: var(--fg-2); margin: 3px 0 0; } .fa-form-layout__progress { align-self: center; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; } .fa-form-layout__progress-text { font: 600 11px var(--font-mono); color: var(--fg-2); } .fa-form-layout__progress-text strong { color: var(--fg); } .fa-form-layout__progress-bar { width: 220px; height: 6px; background: var(--surface-3); border-radius: 999px; overflow: hidden; } .fa-form-layout__progress-fill { height: 100%; background: linear-gradient(90deg, var(--primary), var(--accent)); box-shadow: 0 0 12px var(--accent-glow); border-radius: 999px; transition: width 300ms var(--ease-out); } .fa-form-layout__draft-state { font: 500 10.5px var(--font-mono); color: var(--success); display: inline-flex; align-items: center; gap: 4px; } .fa-form-layout__body { display: grid; grid-template-columns: 240px 1fr; min-height: 0; } .fa-form-layout__outline { border-right: 1px solid var(--border); background: var(--surface-2); padding: 16px 14px; overflow-y: auto; } .fa-form-layout__outline-title { font: 600 10px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3); padding: 0 8px 8px; margin: 0; } .fa-form-layout__outline-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; } .fa-form-layout__outline-item { display: grid; grid-template-columns: 20px 1fr auto; gap: 8px; align-items: center; padding: 8px 10px; border-radius: var(--r-md); cursor: pointer; color: var(--fg-2); text-decoration: none; transition: background 120ms var(--ease-out), color 120ms var(--ease-out); } .fa-form-layout__outline-item:hover { background: var(--surface); color: var(--fg); } .fa-form-layout__outline-item--active { background: var(--surface); color: var(--fg); box-shadow: inset 3px 0 0 var(--accent); } .fa-form-layout__outline-state { width: 16px; height: 16px; border-radius: 50%; background: var(--surface-3); border: 1.5px solid var(--border-strong); display: flex; align-items: center; justify-content: center; font-size: 9px; color: var(--fg-3); } .fa-form-layout__outline-item--done .fa-form-layout__outline-state { background: var(--success); border-color: var(--success); color: var(--on-success); } .fa-form-layout__outline-item--current .fa-form-layout__outline-state { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 20%, transparent); } .fa-form-layout__outline-item--error .fa-form-layout__outline-state { background: var(--danger); border-color: var(--danger); color: var(--on-danger); } .fa-form-layout__outline-label { font: 500 12.5px var(--font-sans); } .fa-form-layout__outline-count { font: 600 9.5px var(--font-mono); color: var(--fg-3); background: var(--surface); padding: 2px 6px; border-radius: 4px; border: 1px solid var(--border); } .fa-form-layout__outline-item--error .fa-form-layout__outline-count { color: var(--danger); border-color: color-mix(in oklab, var(--danger) 30%, transparent); background: color-mix(in oklab, var(--danger) 8%, transparent); } .fa-form-layout__sections { padding: 18px 24px 24px; overflow-y: auto; max-height: 600px; } /* ── Section cards ────────────────────────────────────────────────────────── */ .fa-form-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); margin-bottom: 14px; overflow: hidden; scroll-margin-top: 16px; } .fa-form-section--current { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 6px 24px color-mix(in oklab, var(--accent) 18%, transparent); } .fa-form-section--error { border-color: var(--danger); } .fa-form-section__head { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 14px 18px; background: var(--surface-2); border-bottom: 1px solid var(--border); cursor: pointer; user-select: none; } .fa-form-section--collapsed .fa-form-section__head { border-bottom: none; } .fa-form-section__num { width: 28px; height: 28px; border-radius: 50%; background: var(--surface); color: var(--fg-2); border: 1px solid var(--border-strong); display: flex; align-items: center; justify-content: center; font: 600 12px var(--font-mono); flex-shrink: 0; } .fa-form-section--done .fa-form-section__num { background: var(--success); color: var(--on-success); border-color: var(--success); } .fa-form-section--current .fa-form-section__num { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } .fa-form-section--error .fa-form-section__num { background: var(--danger); color: var(--on-danger); border-color: var(--danger); } .fa-form-section__heading { display: flex; flex-direction: column; gap: 2px; } .fa-form-section__title { font: 700 14px var(--font-sans); margin: 0; } .fa-form-section__meta { font: 500 10.5px var(--font-mono); color: var(--fg-3); } .fa-form-section__chevron { font-size: 16px; color: var(--fg-3); transition: transform 200ms var(--ease-out); } .fa-form-section--open .fa-form-section__chevron { transform: rotate(180deg); } .fa-form-section__body { padding: 16px 18px 18px; } .fa-form-section--collapsed .fa-form-section__body { display: none; } .fa-form-section__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .fa-form-section__grid--single { grid-template-columns: 1fr; } /* ── Footer ───────────────────────────────────────────────────────────────── */ .fa-form-layout__footer { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 12px 24px; border-top: 1px solid var(--border); background: var(--surface-2); } .fa-form-layout__footer-meta { display: flex; gap: 14px; align-items: center; font: 500 11.5px var(--font-mono); color: var(--fg-3); } .fa-form-layout__footer-actions { display: flex; gap: 8px; justify-content: flex-end; } /* ── Responsive ───────────────────────────────────────────────────────────── */ @media (max-width: 768px) { .fa-form-layout__body { grid-template-columns: 1fr; } .fa-form-layout__outline { border-right: none; border-bottom: 1px solid var(--border); display: flex; flex-direction: row; overflow-x: auto; padding: 10px 12px; gap: 6px; } .fa-form-layout__outline-list { flex-direction: row; flex-wrap: nowrap; white-space: nowrap; } .fa-form-layout__outline-title { display: none; } .fa-form-layout__progress-bar { width: 140px; } .fa-form-section__grid { grid-template-columns: 1fr; } } /* ─────────────────────────────────────────────────────────────────────────── * fa-modal--wizard — High-stakes linear-flow modal with validation-gates * Pattern: Tenant-Setup, GDPR-Breach-Initial-Assessment, Compliance-Wizard, * Policy-Wizard * * Modifier: .fa-modal--wizard on the .fa-modal root * BEM blocks: fa-modal__wizard-header, __wizard-pips, __wizard-body, * __wizard-step, __wizard-validation, __wizard-footer * ─────────────────────────────────────────────────────────────────────────── */ /* ── Width + max-height override for wizard mode ────────────────────────── */ .fa-modal--wizard { width: min(96%, 720px); max-height: 85vh; } /* ── Wizard header: title + compact pip-rail ─────────────────────────────── */ .fa-modal__wizard-header { padding: 20px 24px 0; border-bottom: none; background: linear-gradient( 180deg, color-mix(in oklab, var(--accent) 8%, transparent) 0%, transparent 100% ), var(--surface); position: relative; } .fa-modal__wizard-header::after { content: ""; position: absolute; left: 24px; right: 24px; bottom: 0; height: 2px; background: linear-gradient(90deg, var(--primary), var(--accent), transparent); border-radius: 2px; } .fa-modal__wizard-header-top { display: flex; align-items: flex-start; gap: 12px; padding-bottom: 14px; } .fa-modal__wizard-icon { flex-shrink: 0; width: 36px; height: 36px; border-radius: var(--r-md); background: var(--accent-tint); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 17px; } .fa-modal__wizard-heading { flex: 1; min-width: 0; } .fa-modal__wizard-heading h2 { font: 700 16px/1.2 var(--font-sans); margin: 0 0 3px; color: var(--fg); } .fa-modal__wizard-heading p { font: 400 12.5px/1.45 var(--font-sans); color: var(--fg-2); margin: 0; } .fa-modal__wizard-close { flex-shrink: 0; width: 30px; height: 30px; border: 0; background: transparent; color: var(--fg-3); cursor: pointer; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); } .fa-modal__wizard-close:hover { background: var(--surface-2); color: var(--fg); } .fa-modal__wizard-close:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } /* ── Pip-rail: horizontal step indicator ─────────────────────────────────── */ .fa-modal__wizard-pips { display: flex; align-items: stretch; gap: 0; list-style: none; margin: 0; padding: 12px 0 0; overflow-x: auto; scrollbar-width: none; } .fa-modal__wizard-pips::-webkit-scrollbar { display: none; } .fa-modal__wizard-pip { flex: 1; min-width: 0; padding: 0 4px 12px; cursor: default; display: flex; flex-direction: column; gap: 5px; position: relative; } .fa-modal__wizard-pip--done { cursor: pointer; } .fa-modal__wizard-pip--done:hover .fa-modal__wizard-pip-bar { background: color-mix(in oklab, var(--primary) 60%, var(--surface-3)); } .fa-modal__wizard-pip-bar { height: 3px; background: var(--surface-3); border-radius: 2px; transition: background var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out); } .fa-modal__wizard-pip--current .fa-modal__wizard-pip-bar { background: linear-gradient(90deg, var(--primary), var(--accent)); box-shadow: 0 0 10px var(--accent-glow); } .fa-modal__wizard-pip--done .fa-modal__wizard-pip-bar { background: var(--primary); } .fa-modal__wizard-pip--error .fa-modal__wizard-pip-bar { background: var(--danger); } .fa-modal__wizard-pip-label { display: block; font: 600 10px var(--font-mono); letter-spacing: 0.07em; text-transform: uppercase; color: var(--fg-3); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color var(--t-fast) var(--ease-out); } .fa-modal__wizard-pip--current .fa-modal__wizard-pip-label { color: var(--accent-strong); } .fa-modal__wizard-pip--done .fa-modal__wizard-pip-label { color: var(--fg-2); } .fa-modal__wizard-pip-num { display: inline-flex; align-items: center; gap: 4px; font: 600 9.5px var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3); } .fa-modal__wizard-pip--current .fa-modal__wizard-pip-num { color: var(--accent-strong); } .fa-modal__wizard-pip--done .fa-modal__wizard-pip-num { color: var(--primary-strong); } .fa-modal__wizard-pip--error .fa-modal__wizard-pip-num { color: var(--danger); } /* ── Wizard body: shows one step at a time ───────────────────────────────── */ .fa-modal__wizard-body { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 24px 4px; scroll-behavior: smooth; } /* ── Wizard step: single page within the wizard ──────────────────────────── */ .fa-modal__wizard-step { display: none; } .fa-modal__wizard-step.is-active { display: block; animation: fa-wizard-step-in var(--t-moderate) var(--ease-out) both; } @keyframes fa-wizard-step-in { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: translateX(0); } } .fa-modal__wizard-step-title { font: 700 14px/1.3 var(--font-sans); color: var(--fg); margin: 0 0 14px; display: flex; align-items: center; gap: 8px; } .fa-modal__wizard-step-title .fa-icon { color: var(--accent); font-size: 16px; } /* ── Validation banner: shown when step has required empty fields ─────────── */ .fa-modal__wizard-validation { display: none; align-items: flex-start; gap: 10px; padding: 10px 14px; margin-top: 14px; background: color-mix(in oklab, var(--danger) 8%, var(--surface)); border: 1px solid color-mix(in oklab, var(--danger) 28%, transparent); border-left: 3px solid var(--danger); border-radius: var(--r-md); font: 500 12.5px/1.45 var(--font-sans); color: var(--fg); animation: fa-wizard-validation-in var(--t-fast) var(--ease-out) both; } .fa-modal__wizard-validation.is-visible { display: flex; } @keyframes fa-wizard-validation-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .fa-modal__wizard-validation .fa-icon { flex-shrink: 0; font-size: 15px; color: var(--danger); margin-top: 1px; } .fa-modal__wizard-validation-text { flex: 1; min-width: 0; } .fa-modal__wizard-step.has-validation-error .fa-modal__wizard-step-title { color: var(--danger); } /* ── Wizard footer: Back + Cancel + Next/Submit ───────────────────────────── */ .fa-modal__wizard-footer { display: flex; align-items: center; gap: 8px; padding: 12px 24px; border-top: 1px solid var(--border); background: var(--surface-2); flex-shrink: 0; } .fa-modal__wizard-footer-info { font: 500 11px var(--font-mono); color: var(--fg-3); flex: 1; min-width: 0; } .fa-modal__wizard-footer-info strong { color: var(--fg-2); font-weight: 600; } .fa-modal__wizard-footer-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0; } /* ── Review step: read-only summary styling ──────────────────────────────── */ .fa-modal__wizard-review-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .fa-modal__wizard-review-row { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 12px; } .fa-modal__wizard-review-label { font: 600 10px var(--font-mono); letter-spacing: 0.07em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 3px; } .fa-modal__wizard-review-value { font: 500 13px/1.4 var(--font-sans); color: var(--fg); word-break: break-word; } /* ── Responsive ──────────────────────────────────────────────────────────── */ @media (max-width: 640px) { .fa-modal--wizard { width: 100%; max-height: 100dvh; border-radius: 0; margin: 0; } .fa-modal__wizard-pips { gap: 2px; } .fa-modal__wizard-pip-label { display: none; } .fa-modal__wizard-review-grid { grid-template-columns: 1fr; } } /* ═══════════════════════════════════════════════════════════════════ fa-tabs — Tab-group for settings-style forms with 3-6 equal groups Pattern: /admin/settings/*, TenantType, UserType, Branding-Config NOT for: regulatory forms (fa-form-layout) or linear flows (fa-modal--wizard) ═══════════════════════════════════════════════════════════════════ */ .fa-tabs { display: grid; grid-template-rows: auto 1fr; width: 100%; min-height: 0; } /* ── Nav ──────────────────────────────────────────────────────────── */ .fa-tabs__nav { display: flex; align-items: stretch; gap: 0; list-style: none; margin: 0; padding: 0 var(--space-4); background: var(--surface-2); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: var(--z-sticky); overflow-x: auto; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE */ scroll-snap-type: x proximity; } .fa-tabs__nav::-webkit-scrollbar { display: none; } /* ── Nav item ─────────────────────────────────────────────────────── */ .fa-tabs__nav-item { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); font: 500 13.5px/1 var(--font-sans); color: var(--fg-2); cursor: pointer; white-space: nowrap; border: none; background: transparent; border-bottom: 2px solid transparent; margin-bottom: -1px; /* overlap nav bottom-border */ transition: color 160ms, border-color 160ms, background-color 160ms; scroll-snap-align: start; text-decoration: none; outline-offset: -2px; position: relative; } .fa-tabs__nav-item:hover:not(.is-disabled, .is-active) { color: var(--fg); background: color-mix(in oklab, var(--primary-tint) 60%, transparent); border-bottom-color: color-mix(in oklab, var(--primary) 30%, transparent); } .fa-tabs__nav-item:focus-visible { outline: 2px solid var(--primary); border-radius: var(--r-sm) var(--r-sm) 0 0; } .fa-tabs__nav-item.is-active { color: var(--primary-strong); border-bottom-color: var(--primary); font-weight: 600; background: color-mix(in oklab, var(--primary-tint) 40%, transparent); } .fa-tabs__nav-item.has-error { color: var(--danger); } .fa-tabs__nav-item.has-error::before { content: ""; position: absolute; top: 8px; right: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--danger); } .fa-tabs__nav-item.has-error.is-active { border-bottom-color: var(--danger); } .fa-tabs__nav-item.is-disabled { opacity: 0.42; cursor: not-allowed; pointer-events: none; } /* ── Nav icon ─────────────────────────────────────────────────────── */ .fa-tabs__nav-icon { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.8; } .fa-tabs__nav-item.is-active .fa-tabs__nav-icon { opacity: 1; } /* ── Nav badge ────────────────────────────────────────────────────── */ .fa-tabs__nav-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; font: 700 10px/1 var(--font-mono); letter-spacing: 0.04em; border-radius: var(--r-pill); background: rgb(var(--danger-rgb) / 0.12); color: var(--danger); border: 1px solid rgb(var(--danger-rgb) / 0.28); } .fa-tabs__nav-item:not(.has-error) .fa-tabs__nav-badge { background: var(--surface-3); color: var(--fg-2); border-color: var(--border); } /* ── Panels ───────────────────────────────────────────────────────── */ .fa-tabs__panels { min-height: 0; position: relative; } .fa-tabs__panel { display: none; padding: var(--space-5) var(--space-5); animation: fa-tabs-fadein 180ms ease; } .fa-tabs__panel.is-active { display: block; } @keyframes fa-tabs-fadein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } /* ── Panel section (sub-divider within a tab) ─────────────────────── */ .fa-tabs__panel-section { border-top: 1px solid var(--border); margin-top: var(--space-5); padding-top: var(--space-4); } .fa-tabs__panel-section:first-child { border-top: none; margin-top: 0; padding-top: 0; } .fa-tabs__panel-section-title { font: 600 11px/1 var(--font-mono); letter-spacing: 0.07em; text-transform: uppercase; color: var(--fg-3); margin-bottom: var(--space-3); } /* ── Responsive: ≤640px horizontal-scroll snap ───────────────────── */ @media (max-width: 640px) { .fa-tabs__nav { padding: 0 var(--space-2); } .fa-tabs__nav-item { padding: var(--space-3) var(--space-3); font-size: 13px; } .fa-tabs__panel { padding: var(--space-4) var(--space-3); } } /* ───────────────────────────────────────────────────────────────── fa-severity-legend — read-only severity-stage definitions block P-13 SeverityDefinitions (audit-2026-05-22) ───────────────────────────────────────────────────────────────── */ .fa-severity-legend { background: var(--surface-2); border: 1px solid var(--surface-3); border-radius: var(--radius-sm); padding: var(--space-3); } .fa-severity-legend__header { display: flex; align-items: center; gap: var(--space-2); font-size: 13px; font-weight: 600; color: var(--fg-2); margin-bottom: var(--space-2); } .fa-severity-legend__heading { letter-spacing: 0.02em; } .fa-severity-legend__list { display: grid; grid-template-columns: 1fr; gap: var(--space-2); list-style: none; padding: 0; margin: 0; } .fa-severity-legend--compact .fa-severity-legend__list { grid-template-columns: repeat(4, 1fr); } .fa-severity-legend__item { display: grid; grid-template-columns: auto auto 1fr; align-items: start; gap: var(--space-2); padding: var(--space-2); background: var(--surface); border-left: 3px solid var(--fg-3); border-radius: var(--radius-xs); font-size: 13px; line-height: 1.45; } .fa-severity-legend--compact .fa-severity-legend__item { grid-template-columns: 1fr; text-align: center; } .fa-severity-legend__item--success { border-left-color: var(--success-7); } .fa-severity-legend__item--info { border-left-color: var(--info-7); } .fa-severity-legend__item--warning { border-left-color: var(--warning-7); } .fa-severity-legend__item--danger { border-left-color: var(--danger-7); } .fa-severity-legend__dot { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 50%; margin-top: 0.35rem; background: var(--fg-3); } .fa-severity-legend__item--success .fa-severity-legend__dot { background: var(--success-7); } .fa-severity-legend__item--info .fa-severity-legend__dot { background: var(--info-7); } .fa-severity-legend__item--warning .fa-severity-legend__dot { background: var(--warning-7); } .fa-severity-legend__item--danger .fa-severity-legend__dot { background: var(--danger-7); } .fa-severity-legend__label { font-weight: 600; color: var(--fg-1); white-space: nowrap; } .fa-severity-legend__definition { color: var(--fg-2); } /* ═══════════════════════════════════════════════════════════════════ Aurora v4 Extension — Welle 2/3/4 Components (2026-05-27) 11 new components: A.1 density-toggle, A.2 persona-cockpit-card, A.3 coverage-matrix, A.4 reuse-roi-counter, A.5 audit-program-timeline, A.6 onboarding-banner, A.7 quick-action-btn, A.8 glossary-tooltip, A.9 industry-baseline-chip, A.10 maturity-heat-map, A.11 mega-menu-section-header ═══════════════════════════════════════════════════════════════════ */ /* ─── A.11 fa-mega-menu-section-header ────────────────────────────── */ .fa-mega-menu-section-header { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.375rem; } .fa-mega-menu-section-header__title { font-size: 0.6875rem; font-family: var(--font-mono); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-2); margin: 0; } .fa-mega-menu-section-header__norm { display: inline-flex; align-items: center; padding: 0.125rem 0.375rem; font-size: 0.625rem; font-family: var(--font-mono); font-weight: 600; background: var(--primary-tint); color: var(--primary-strong); border-radius: var(--r-sm); text-decoration: none; white-space: nowrap; transition: opacity var(--t-fast); } .fa-mega-menu-section-header__norm:hover { opacity: 0.8; color: var(--primary-strong); } .fa-mega-menu-section-header__density-hint { margin-left: auto; font-size: 0.5625rem; font-family: var(--font-mono); color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.06em; } .fa-mega-menu-section-header__view-all { margin-left: auto; font-size: 0.6875rem; color: var(--primary); text-decoration: none; white-space: nowrap; } .fa-mega-menu-section-header__view-all:hover { text-decoration: underline; color: var(--primary); } .fa-mega-menu-section-header__count { color: var(--fg-3); font-size: 0.625rem; } /* ─── A.6 fa-onboarding-banner ────────────────────────────────────── */ .fa-onboarding-banner { display: flex; align-items: flex-start; gap: 1.25rem; padding: 1.25rem 1.5rem; background: var(--onboarding-banner-bg); border: 1px solid var(--onboarding-banner-border); border-radius: var(--r-lg); box-shadow: var(--onboarding-banner-glow); position: relative; } @media (prefers-reduced-motion: no-preference) { .fa-onboarding-banner { animation: fa-onboarding-slide-in var(--t-base) var(--ease-out) both; } @keyframes fa-onboarding-slide-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } } @media (max-width: 767.98px) { .fa-onboarding-banner { flex-direction: column; align-items: stretch; } .fa-onboarding-banner__alva { width: 2rem; height: 2rem; } } .fa-onboarding-banner__alva { flex-shrink: 0; width: 4rem; height: 4rem; } .fa-onboarding-banner__content { flex: 1; min-width: 0; } .fa-onboarding-banner__title { font-size: 1rem; font-weight: 700; color: var(--fg); margin: 0 0 0.375rem; } .fa-onboarding-banner__body { font-size: 0.875rem; color: var(--fg-2); margin: 0 0 0.875rem; } .fa-onboarding-banner__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } .fa-onboarding-banner__dismiss { margin-left: auto; font-size: 0.75rem; color: var(--fg-3); background: none; border: none; cursor: pointer; padding: 0.25rem 0.5rem; border-radius: var(--r-sm); transition: color var(--t-fast); } .fa-onboarding-banner__dismiss:hover { color: var(--fg); background: var(--surface-2); } .fa-onboarding-banner__dismiss-group { display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; flex-shrink: 0; } /* ─── A.7 fa-quick-action-btn ─────────────────────────────────────── */ .fa-quick-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; } @media (max-width: 767.98px) { .fa-quick-actions { display: grid; grid-template-columns: 1fr 1fr; } } .fa-quick-action-btn { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem; background: var(--surface-2); border: 1px solid var(--primary); border-radius: var(--r-pill); color: var(--primary-strong); font-size: 0.8125rem; font-weight: 500; text-decoration: none; cursor: pointer; transition: background var(--t-fast), box-shadow var(--t-fast); box-shadow: var(--quick-action-shadow); white-space: nowrap; } .fa-quick-action-btn:hover { background: var(--primary-tint); box-shadow: var(--quick-action-shadow-hover); color: var(--primary-strong); text-decoration: none; } .fa-quick-action-btn:focus-visible { outline: 3px solid var(--primary-glow); outline-offset: 2px; } .fa-quick-action-btn:active { transform: scale(0.97); } .fa-quick-action-btn.is-loading .fa-icon { animation: fa-spin 0.8s linear infinite; } .fa-quick-action-btn__kbd { font-size: 0.625rem; font-family: var(--font-mono); color: var(--fg-3); background: var(--surface); border: 1px solid var(--border); border-radius: 2px; padding: 0 3px; margin-left: 0.25rem; } @media (max-width: 767.98px) { .fa-quick-action-btn__kbd { display: none; } } /* ─── A.8 fa-glossary-tooltip ─────────────────────────────────────── */ .fa-glossary-tooltip { display: inline; position: relative; } abbr.fa-glossary-tooltip, .fa-glossary-tooltip abbr { text-decoration: underline dotted var(--primary); cursor: help; } .fa-glossary-tooltip__indicator { display: inline-flex; align-items: center; justify-content: center; width: 0.875rem; height: 0.875rem; font-size: 0.5625rem; font-weight: 700; font-style: normal; background: var(--glossary-indicator-bg); color: var(--glossary-indicator-fg); border-radius: 50%; vertical-align: super; line-height: 1; margin-left: 0.125rem; cursor: help; transition: background var(--t-fast); } .fa-glossary-tooltip__indicator:hover { background: var(--primary); color: var(--on-primary); } .fa-glossary-tooltip__popover { position: absolute; bottom: calc(100% + 0.5rem); left: 50%; transform: translateX(-50%); z-index: var(--z-modal); /* Bootstrap modal-level popover */ min-width: 220px; max-width: 320px; background: var(--glossary-tooltip-bg); border: 1px solid var(--glossary-tooltip-border); border-radius: var(--r-sm); box-shadow: var(--glossary-tooltip-shadow); padding: 0.75rem; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity var(--t-fast), visibility var(--t-fast); } .fa-glossary-tooltip:hover .fa-glossary-tooltip__popover, .fa-glossary-tooltip:focus-within .fa-glossary-tooltip__popover, .fa-glossary-tooltip.is-open .fa-glossary-tooltip__popover { opacity: 1; visibility: visible; pointer-events: auto; } .fa-glossary-tooltip__title { font-weight: 700; font-size: 0.8125rem; color: var(--fg); margin: 0 0 0.25rem; } .fa-glossary-tooltip__norm { display: inline-block; font-size: 0.625rem; font-family: var(--font-mono); background: var(--primary-tint); color: var(--primary-strong); border-radius: var(--r-sm); padding: 0.125rem 0.25rem; margin-bottom: 0.375rem; } .fa-glossary-tooltip__def { font-size: 0.75rem; color: var(--fg-2); margin: 0 0 0.5rem; line-height: 1.4; } .fa-glossary-tooltip__link { font-size: 0.6875rem; font-weight: 600; color: var(--primary); text-decoration: none; } .fa-glossary-tooltip__link:hover { text-decoration: underline; } /* ─── A.9 fa-industry-baseline-chip ───────────────────────────────── */ .fa-industry-chip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.75rem; } .fa-industry-chip { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.875rem 1rem; background: var(--surface); border: 2px solid var(--border); border-radius: var(--r-lg); cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast); min-height: 44px; position: relative; text-align: left; } .fa-industry-chip:hover { background: var(--surface-2); border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-tint); } .fa-industry-chip:focus-visible { outline: 3px solid var(--primary-glow); outline-offset: 2px; } .fa-industry-chip[aria-checked="true"], .fa-industry-chip.is-selected { background: var(--primary-tint); border-color: var(--primary); } .fa-industry-chip__icon { width: 1.5rem; height: 1.5rem; margin-bottom: 0.25rem; color: var(--primary); } .fa-industry-chip__body { flex: 1; } .fa-industry-chip__name { font-size: 0.875rem; font-weight: 700; color: var(--fg); display: block; } .fa-industry-chip__desc { font-size: 0.75rem; color: var(--fg-2); display: block; margin-top: 0.125rem; } .fa-industry-chip__frameworks { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.5rem; } .fa-industry-chip__framework-badge { font-size: 0.5625rem; font-family: var(--font-mono); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.125rem 0.3125rem; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--border); color: var(--fg-2); } .fa-industry-chip__check { position: absolute; top: 0.625rem; right: 0.625rem; width: 1.25rem; height: 1.25rem; color: var(--primary); opacity: 0; transition: opacity var(--t-fast); } .fa-industry-chip[aria-checked="true"] .fa-industry-chip__check, .fa-industry-chip.is-selected .fa-industry-chip__check { opacity: 1; } /* ─── A.1 fa-density-toggle ───────────────────────────────────────── */ .fa-density-toggle { display: inline-flex; flex-direction: column; gap: 0.25rem; border: none; padding: 0; margin: 0; } .fa-density-toggle__group { display: flex; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--surface-2); overflow: hidden; } .fa-density-toggle__opt { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.125rem; padding: 0.375rem 0.75rem; cursor: pointer; position: relative; transition: background var(--t-fast); border-bottom: 3px solid transparent; } .fa-density-toggle__opt input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; } .fa-density-toggle__opt:hover { background: var(--surface-2); } .fa-density-toggle__opt.is-active, .fa-density-toggle__opt:has(input:checked) { background: var(--primary-tint); border-bottom-color: var(--primary-strong); } .fa-density-toggle__opt:focus-within { outline: 3px solid var(--primary-glow); outline-offset: -3px; border-radius: var(--r-sm); } .fa-density-toggle__label { font-size: 0.6875rem; font-weight: 600; color: var(--fg); line-height: 1; } .fa-density-toggle__hint { font-size: 0.5625rem; color: var(--fg-2); line-height: 1; white-space: nowrap; } .fa-density-toggle__badge { font-size: 0.5rem; font-family: var(--font-mono); background: var(--primary); color: var(--on-primary); border-radius: var(--r-pill); padding: 0.0625rem 0.25rem; line-height: 1.2; } /* ─── A.2 fa-persona-cockpit-card ─────────────────────────────────── */ .fa-persona-cockpit-card { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.25rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); text-decoration: none; color: inherit; transition: box-shadow var(--t-base), border-color var(--t-base); cursor: pointer; } .fa-persona-cockpit-card:hover { box-shadow: 0 4px 24px rgb(0 0 0 / 0.12), 0 0 0 1px var(--border-strong); text-decoration: none; color: inherit; } .fa-persona-cockpit-card:focus-visible { outline: 3px solid var(--primary-glow); outline-offset: 2px; } .fa-persona-cockpit-card__icon { width: 3rem; height: 3rem; border-radius: var(--r-lg); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; background: color-mix(in srgb, var(--persona-color, var(--primary)) 15%, transparent); color: var(--persona-color, var(--primary)); transition: box-shadow var(--t-base); } .fa-persona-cockpit-card:hover .fa-persona-cockpit-card__icon { box-shadow: 0 0 0 4px color-mix(in srgb, var(--persona-color, var(--primary)) 20%, transparent); } .fa-persona-cockpit-card__name { font-size: 1rem; font-weight: 700; color: var(--fg); margin: 0; } .fa-persona-cockpit-card__role { font-size: 0.8125rem; color: var(--fg-2); margin: 0; } .fa-persona-cockpit-card__kpis { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 0.25rem; } .fa-persona-cockpit-card__kpi { display: flex; flex-direction: column; gap: 0.125rem; } .fa-persona-cockpit-card__kpi-value { font-size: 1.125rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--fg); line-height: 1; } .fa-persona-cockpit-card__kpi-value--warning { color: var(--warning); } .fa-persona-cockpit-card__kpi-value--danger { color: var(--danger); } .fa-persona-cockpit-card__kpi-value--success { color: var(--success); } .fa-persona-cockpit-card__kpi-value--info { color: var(--info); } .fa-persona-cockpit-card__kpi-label { font-size: 0.625rem; color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.05em; } .fa-persona-cockpit-card__cta { font-size: 0.8125rem; font-weight: 600; color: var(--primary); margin-top: auto; } .fa-persona-cockpit-card--ciso { --persona-color: var(--persona-ciso); } .fa-persona-cockpit-card--isb { --persona-color: var(--persona-isb); } .fa-persona-cockpit-card--dpo { --persona-color: var(--persona-dpo); } .fa-persona-cockpit-card--risk { --persona-color: var(--persona-risk); } .fa-persona-cockpit-card--compliance { --persona-color: var(--persona-compliance); } .fa-persona-cockpit-card--bcm { --persona-color: var(--persona-bcm); } .fa-persona-cockpit-card--auditor { --persona-color: var(--persona-auditor); } .fa-persona-cockpit-card--board { --persona-color: var(--persona-board); } /* ─── A.3 fa-coverage-matrix ──────────────────────────────────────── */ .fa-coverage-matrix-wrap { overflow-x: auto; border-radius: var(--r-md); border: 1px solid var(--border); } .fa-coverage-matrix-wrap__head { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; background: var(--surface-2); border-bottom: 1px solid var(--border); } .fa-coverage-matrix-wrap__title { font-size: 0.875rem; font-weight: 700; color: var(--fg); margin: 0; } .fa-coverage-matrix-wrap__snapshot { font-size: 0.6875rem; font-family: var(--font-mono); color: var(--fg-3); margin-left: auto; } table.fa-coverage-matrix { width: 100%; border-collapse: collapse; font-size: 0.8125rem; background: var(--surface); } table.fa-coverage-matrix th, table.fa-coverage-matrix td { padding: 0.5rem 0.75rem; text-align: center; border: 1px solid var(--border); vertical-align: middle; } table.fa-coverage-matrix th { background: var(--surface-2); font-size: 0.6875rem; font-weight: 700; color: var(--fg-2); text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; } table.fa-coverage-matrix th:first-child, table.fa-coverage-matrix td:first-child { text-align: left; font-weight: 700; color: var(--fg); white-space: nowrap; } .fa-coverage-matrix__cell { cursor: pointer; transition: background var(--t-fast), box-shadow var(--t-fast); } .fa-coverage-matrix__cell:hover { box-shadow: inset 0 0 0 2px var(--primary); } .fa-coverage-matrix__cell:focus-visible { outline: 2px solid var(--primary-glow); outline-offset: -2px; } .fa-coverage-matrix__cell--heat-0 { background: var(--coverage-heat-0); } .fa-coverage-matrix__cell--heat-1 { background: var(--coverage-heat-1); } .fa-coverage-matrix__cell--heat-2 { background: var(--coverage-heat-2); } .fa-coverage-matrix__cell--heat-3 { background: var(--coverage-heat-3); } .fa-coverage-matrix__cell--heat-4 { background: var(--coverage-heat-4); } .fa-coverage-matrix__dots { font-size: 0.625rem; letter-spacing: -0.05em; display: block; color: var(--fg); } .fa-coverage-matrix__trend { font-family: var(--font-mono); font-size: 0.625rem; display: block; } .fa-coverage-matrix__trend--up { color: var(--success); } .fa-coverage-matrix__trend--flat { color: var(--fg-3); } .fa-coverage-matrix__trend--down { color: var(--danger); } @media (max-width: 767.98px) { .fa-coverage-matrix-wrap { overflow-x: visible; } table.fa-coverage-matrix, table.fa-coverage-matrix thead, table.fa-coverage-matrix tbody, table.fa-coverage-matrix th, table.fa-coverage-matrix td, table.fa-coverage-matrix tr { display: block; } table.fa-coverage-matrix thead { display: none; } table.fa-coverage-matrix tr { margin-bottom: 0.75rem; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; } table.fa-coverage-matrix td { text-align: left; border: none; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; } table.fa-coverage-matrix td::before { content: attr(data-label); font-weight: 700; font-size: 0.6875rem; color: var(--fg-2); text-transform: uppercase; letter-spacing: 0.05em; margin-right: 0.5rem; } } /* ─── A.4 fa-reuse-roi-counter ────────────────────────────────────── */ .fa-reuse-roi-counter { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem 1.25rem; background: var(--surface); border-radius: var(--r-md); border: 1px solid var(--border); } .fa-reuse-roi-counter--inline { padding: 0.5rem 0.75rem; display: inline-flex; border: none; background: none; } .fa-reuse-roi-counter--card-footer { border-top: 1px solid var(--border); border-radius: 0 0 var(--r-md) var(--r-md); background: var(--surface-2); } .fa-reuse-roi-counter__icon { font-size: 1.75rem; flex-shrink: 0; } .fa-reuse-roi-counter__main { flex: 1; } .fa-reuse-roi-counter__value { font-size: 2rem; font-weight: 800; font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--fg); line-height: 1; transition: text-shadow var(--t-magic); } .fa-reuse-roi-counter__value.is-complete { text-shadow: var(--reuse-roi-glow); } @media (prefers-reduced-motion: reduce) { .fa-reuse-roi-counter__value.is-complete { text-shadow: none; } } .fa-reuse-roi-counter__unit { font-size: 0.8125rem; color: var(--fg-2); display: block; margin-top: 0.125rem; } .fa-reuse-roi-counter__secondary { margin-top: 0.5rem; font-size: 0.875rem; color: var(--fg-2); font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .fa-reuse-roi-counter__period { font-size: 0.6875rem; color: var(--fg-3); display: block; margin-top: 0.125rem; } .fa-reuse-roi-counter__cta { font-size: 0.75rem; font-weight: 600; color: var(--primary); text-decoration: none; display: block; margin-top: 0.5rem; } .fa-reuse-roi-counter__cta:hover { text-decoration: underline; } /* ─── A.5 fa-audit-program-timeline ───────────────────────────────── */ .fa-audit-program-timeline { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); } .fa-audit-program-timeline__header { display: flex; background: var(--surface-2); border-bottom: 1px solid var(--border); } .fa-audit-program-timeline__col-label { flex: 1; padding: 0.375rem 0.5rem; font-size: 0.625rem; font-family: var(--font-mono); font-weight: 700; text-align: center; color: var(--fg-2); text-transform: uppercase; border-right: 1px solid var(--border); white-space: nowrap; } .fa-audit-program-timeline__col-label:last-child { border-right: none; } .fa-audit-program-timeline__track { position: relative; padding: 0.5rem 0; } .fa-audit-program-timeline__lane { display: flex; align-items: center; min-height: 2.5rem; border-bottom: 1px solid var(--border); position: relative; } .fa-audit-program-timeline__lane:last-child { border-bottom: none; } .fa-audit-program-timeline__lane-label { width: 8rem; flex-shrink: 0; padding: 0 0.75rem; font-size: 0.6875rem; font-weight: 600; color: var(--fg-2); white-space: nowrap; } .fa-audit-program-timeline__cells { flex: 1; position: relative; height: 2.5rem; } .fa-audit-program-timeline__today-line { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--audit-timeline-today); box-shadow: var(--audit-timeline-today-glow); z-index: 2; pointer-events: none; } .fa-audit-program-timeline__pin { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 1.25rem; height: 1.25rem; border-radius: var(--audit-timeline-pin-radius); background: var(--persona-color, var(--primary)); border: 2px solid var(--surface); cursor: pointer; z-index: 3; transition: box-shadow var(--t-fast); } .fa-audit-program-timeline__pin:hover, .fa-audit-program-timeline__pin:focus-visible { box-shadow: 0 0 0 4px color-mix(in srgb, var(--persona-color, var(--primary)) 30%, transparent); outline: none; } .fa-audit-program-timeline__pin--overdue { background: var(--audit-timeline-overdue); box-shadow: var(--audit-timeline-overdue-glow); } @media (prefers-reduced-motion: no-preference) { .fa-audit-program-timeline__pin--overdue { animation: fa-audit-pin-pulse 1.5s ease-in-out infinite; } @keyframes fa-audit-pin-pulse { 0%, 100% { box-shadow: var(--audit-timeline-overdue-glow); } 50% { box-shadow: 0 0 16px var(--audit-timeline-overdue); } } } .fa-audit-program-timeline__milestone { position: absolute; top: 50%; transform: translate(-50%, -50%) rotate(45deg); width: 0.875rem; height: 0.875rem; background: var(--accent); border: 2px solid var(--surface); z-index: 3; } @media (max-width: 767.98px) { .fa-audit-program-timeline { overflow-x: hidden; } .fa-audit-program-timeline__header { display: none; } .fa-audit-program-timeline__lane { flex-direction: column; align-items: flex-start; min-height: auto; padding: 0.5rem 0.75rem; } .fa-audit-program-timeline__lane-label { width: auto; padding: 0 0 0.25rem; } .fa-audit-program-timeline__cells { height: auto; display: flex; flex-wrap: wrap; gap: 0.375rem; } .fa-audit-program-timeline__pin { position: static; transform: none; } } /* ─── A.10 fa-maturity-heat-map ───────────────────────────────────── */ .fa-maturity-heat-map { display: inline-flex; align-items: center; gap: 0.25rem; margin-left: 0.5rem; vertical-align: middle; } .fa-maturity-heat-map__score { font-size: 0.625rem; font-family: var(--font-mono); font-weight: 700; color: var(--fg-2); white-space: nowrap; } .fa-maturity-heat-map__dots { display: inline-flex; gap: 2px; } .fa-maturity-heat-map__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--coverage-heat-0); transition: background var(--t-fast); } .fa-maturity-heat-map__dot--filled-0 { background: var(--coverage-heat-0); } .fa-maturity-heat-map__dot--filled-1 { background: var(--coverage-heat-1); } .fa-maturity-heat-map__dot--filled-2 { background: var(--coverage-heat-2); } .fa-maturity-heat-map__dot--filled-3 { background: var(--coverage-heat-3); } .fa-maturity-heat-map__dot--filled-4 { background: var(--coverage-heat-4); } .fa-maturity-heat-map__trend { font-size: 0.5625rem; font-family: var(--font-mono); color: var(--fg-3); } .fa-maturity-heat-map__trend--up { color: var(--success); } .fa-maturity-heat-map__trend--down { color: var(--danger); } /* ════════════════════════════════════════════════════════════ WAVE 5 — Sidebar Mega-Menu (App-Shell + Flyout-Panel) Source: docs/design_system/welle5-mega-menu-demo.html ════════════════════════════════════════════════════════════ */ /* ── App-Shell Grid ──────────────────────────────────────── */ .app { display: grid; grid-template-columns: 264px 1fr; grid-template-rows: 64px 1fr; grid-template-areas: "brand header" "sidebar main"; height: 100vh; position: relative; } /* ── Brand-Block (top-left) ──────────────────────────────── */ .app__brand { grid-area: brand; background: var(--surface); border-bottom: 1px solid color-mix(in oklab, var(--primary) 14%, var(--border)); border-right: 1px solid color-mix(in oklab, var(--primary) 14%, var(--border)); display: flex; align-items: center; gap: 12px; padding: 0 20px; } .app__brand-mark { width: 36px; height: 36px; border-radius: 9px; background: linear-gradient(135deg, var(--primary), var(--accent)); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 16px color-mix(in oklab, var(--accent) 40%, transparent); flex-shrink: 0; } .app__brand-name { font: 700 14px var(--font-sans); color: var(--fg); line-height: 1.2; } .app__brand-meta { font: 500 10px var(--font-mono); color: var(--fg-3); letter-spacing: 0.06em; } /* ── App-Header (top, right of brand) ────────────────────── */ .app__header { grid-area: header; display: flex; align-items: center; gap: 14px; padding: 0 22px; background: var(--bg); border-bottom: 1px solid color-mix(in oklab, var(--primary) 12%, var(--border)); position: relative; } .h-search { flex: 1; max-width: 520px; display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-pill); color: var(--fg-3); font: 500 12.5px var(--font-sans); cursor: text; } .h-search i { color: var(--fg-3); } .h-search__kbd { margin-left: auto; font: 600 10px var(--font-mono); padding: 2px 7px; background: var(--surface-3); color: var(--fg-2); border-radius: 4px; border: 1px solid var(--border); } .h-icon-btn { width: 36px; height: 36px; border-radius: 50%; background: transparent; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--fg-2); cursor: pointer; font-size: 16px; transition: background 0.15s var(--ease-out), border-color 0.15s var(--ease-out), color 0.15s var(--ease-out); position: relative; } .h-icon-btn:hover { background: var(--surface-2); border-color: color-mix(in oklab, var(--primary) 35%, var(--border)); color: var(--fg); } .h-icon-btn__badge { position: absolute; top: -2px; right: -2px; width: 16px; height: 16px; border-radius: 50%; background: var(--danger); color: var(--on-primary); font: 700 9px var(--font-mono); display: flex; align-items: center; justify-content: center; border: 2px solid var(--bg); } /* .h-icon-btn__pill is the accessible label companion for icon-only buttons */ .h-icon-btn__pill { position: absolute; clip: rect(0 0 0 0); clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; white-space: nowrap; } /* ── App-Header: Status-Pill ─────────────────────────────── */ .h-status { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; background: color-mix(in oklab, var(--success) 14%, transparent); color: var(--success); border: 1px solid color-mix(in oklab, var(--success) 30%, transparent); border-radius: var(--r-pill); font: 600 10px var(--font-mono); letter-spacing: 0.06em; } .h-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--success); box-shadow: 0 0 8px var(--success); animation: h-status-pulse 2s ease-in-out infinite; flex-shrink: 0; } @keyframes h-status-pulse { 50% { opacity: 0.5; } } /* ── App-Header: Language-Switch ─────────────────────────── */ .h-lang { display: flex; gap: 2px; padding: 2px; background: var(--surface-2); border-radius: var(--r-pill); border: 1px solid var(--border); } .h-lang button { border: 0; background: transparent; padding: 5px 12px; border-radius: var(--r-pill); font: 700 10.5px var(--font-mono); color: var(--fg-3); cursor: pointer; transition: background 0.15s var(--ease-out), color 0.15s var(--ease-out); } .h-lang button.is-active { background: linear-gradient(135deg, var(--primary), var(--accent)); color: var(--on-primary); box-shadow: 0 0 8px var(--primary-glow); } .h-lang button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } /* ── App-Header: Avatar ──────────────────────────────────── */ .h-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 60%, transparent), color-mix(in oklab, var(--primary) 60%, transparent)); color: var(--on-primary); display: flex; align-items: center; justify-content: center; font: 700 12px var(--font-mono); border: 1.5px solid color-mix(in oklab, var(--accent) 40%, transparent); cursor: pointer; flex-shrink: 0; } .h-avatar:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } /* ── Sidebar ─────────────────────────────────────────────── */ .app__sidebar { grid-area: sidebar; background: var(--surface); border-right: 1px solid color-mix(in oklab, var(--primary) 14%, var(--border)); display: flex; flex-direction: column; overflow-y: auto; position: relative; } /* Decorative corner brackets */ .app__sidebar::before, .app__sidebar::after { content: ""; position: absolute; width: 12px; height: 12px; border-color: color-mix(in oklab, var(--primary) 55%, transparent); pointer-events: none; } .app__sidebar::before { top: 14px; left: 14px; border-top: 1.5px dashed; border-left: 1.5px dashed; } .app__sidebar::after { bottom: 80px; right: 14px; border-bottom: 1.5px dashed; border-right: 1.5px dashed; } /* ── Prominent hero cards (Mein Tag + Aktivität) ─────────── */ .sb-prominent { padding: 18px 14px 14px; display: flex; flex-direction: column; gap: 8px; } .sb-prominent__item { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; text-decoration: none; background: linear-gradient(135deg, color-mix(in oklab, var(--primary) 12%, transparent), color-mix(in oklab, var(--accent) 8%, transparent)), var(--surface-2); border: 1px solid color-mix(in oklab, var(--primary) 22%, var(--border)); border-radius: var(--r-md); color: var(--fg); position: relative; overflow: hidden; cursor: pointer; transition: border-color 0.16s var(--ease-out), box-shadow 0.16s var(--ease-out), transform 0.12s var(--ease-out); } .sb-prominent__item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--primary), var(--accent)); box-shadow: 0 0 12px var(--accent-glow); } .sb-prominent__item:hover { border-color: var(--primary); box-shadow: 0 4px 16px color-mix(in oklab, var(--primary) 25%, transparent), 0 0 24px color-mix(in oklab, var(--accent) 18%, transparent); transform: translateX(2px); } .sb-prominent__icon { width: 36px; height: 36px; border-radius: var(--r-sm); background: color-mix(in oklab, var(--primary) 18%, transparent); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 17px; border: 1px solid color-mix(in oklab, var(--primary) 30%, transparent); } .sb-prominent__item:nth-child(2) .sb-prominent__icon { background: color-mix(in oklab, var(--accent) 18%, transparent); color: var(--accent); border-color: color-mix(in oklab, var(--accent) 30%, transparent); } .sb-prominent__body { display: flex; flex-direction: column; gap: 0; min-width: 0; } .sb-prominent__label { font: 700 14px var(--font-sans); color: var(--fg); line-height: 1.2; letter-spacing: -0.005em; } .sb-prominent__sub { font: 500 10.5px var(--font-mono); color: var(--fg-3); letter-spacing: 0.04em; line-height: 1.3; margin-top: 2px; } .sb-prominent__badge { min-width: 22px; height: 22px; border-radius: 11px; background: color-mix(in oklab, var(--primary) 28%, transparent); color: var(--primary); border: 1px solid color-mix(in oklab, var(--primary) 50%, transparent); font: 700 11px var(--font-mono); /* Phase 4.4: hidden by default; Stimulus live-badge adds .is-visible when count > 0 */ display: none; align-items: center; justify-content: center; padding: 0 6px; flex-shrink: 0; box-shadow: 0 0 8px color-mix(in oklab, var(--primary) 30%, transparent); } /* Phase 4.4: live-badge is-visible state */ .sb-prominent__badge.is-visible { display: inline-flex; } .sb-prominent__badge--danger { background: color-mix(in oklab, var(--danger) 22%, transparent); color: var(--danger); border-color: color-mix(in oklab, var(--danger) 50%, transparent); box-shadow: 0 0 10px color-mix(in oklab, var(--danger) 35%, transparent); animation: sb-badge-pulse 1.8s ease-in-out infinite; } @keyframes sb-badge-pulse { 50% { box-shadow: 0 0 16px color-mix(in oklab, var(--danger) 55%, transparent); } } /* ── Sidebar L1 category list ────────────────────────────── */ .sb-list { padding: 6px 12px; display: flex; flex-direction: column; gap: 2px; } .sb-link { display: grid; grid-template-columns: 20px 1fr 14px; gap: 12px; align-items: center; padding: 11px 10px; border-radius: var(--r-md); /* Reset browser