/* ============================================================ SF Audit Studio — Dark Mode Activated by adding `.dark` to . The light-mode design comes from Tailwind classes baked into each page; here we override them with !important when dark mode is on, so we don't have to touch every component. ============================================================ */ html.dark { color-scheme: dark; } html.dark body { background-color: #0a0e1a !important; color: #e1e1e6 !important; } /* --- Surfaces ----------------------------------------------- */ html.dark .bg-white { background-color: #1e2233 !important; } html.dark .bg-background { background-color: #0a0e1a !important; } html.dark .bg-surface { background-color: #1a1d2e !important; } html.dark .bg-surface-container-lowest { background-color: #181b2a !important; } html.dark .bg-surface-container-low { background-color: #1f2233 !important; } html.dark .bg-surface-container { background-color: #252839 !important; } html.dark .bg-surface-container-high { background-color: #2d3144 !important; } html.dark .bg-surface-container-highest { background-color: #363a4d !important; } html.dark .hover\:bg-surface-container:hover { background-color: #252839 !important; } html.dark .hover\:bg-surface-container-low:hover { background-color: #1f2233 !important; } html.dark .hover\:bg-surface-container-high:hover { background-color: #363a4d !important; } html.dark .hover\:bg-surface-container-lowest:hover { background-color: #181b2a !important; } /* --- Text --------------------------------------------------- */ html.dark .text-on-surface { color: #e1e1e6 !important; } html.dark .text-on-surface-variant { color: #a0a0b0 !important; } html.dark .text-on-background { color: #e1e1e6 !important; } html.dark .text-outline { color: #6f7088 !important; } /* --- Borders ------------------------------------------------ */ html.dark .border-outline-variant { border-color: #3a3f56 !important; } html.dark .border-s.border-outline-variant, html.dark .border-b.border-outline-variant, html.dark .border-t.border-outline-variant, html.dark .border-r.border-outline-variant, html.dark .border-l.border-outline-variant { border-color: #3a3f56 !important; } html.dark .divide-outline-variant > * + * { border-color: #3a3f56 !important; } html.dark .border-outline { border-color: #4a4d65 !important; } /* --- Primary palette (lighter for contrast on dark bg) ------ */ html.dark .text-primary { color: #b6a4e6 !important; } html.dark .bg-primary { background-color: #6750a4 !important; } html.dark .text-on-primary { color: #ffffff !important; } html.dark .border-primary { border-color: #b6a4e6 !important; } html.dark .focus\:ring-primary:focus { --tw-ring-color: #b6a4e6 !important; } html.dark .focus\:border-primary:focus { border-color: #b6a4e6 !important; } html.dark .bg-primary-container { background-color: #4a3776 !important; } html.dark .text-on-primary-container { color: #e0d2ff !important; } html.dark .bg-primary-fixed { background-color: #2d2349 !important; } html.dark .text-on-primary-fixed { color: #ddccff !important; } /* Secondary container — used by active sidebar item */ html.dark .bg-secondary-container { background-color: #3a3258 !important; } html.dark .text-on-secondary-container { color: #d8c8ff !important; } /* --- Severity tints ----------------------------------------- */ html.dark .bg-error-container, html.dark .bg-\[\#FDEDEC\] { background-color: rgba(192, 57, 43, 0.18) !important; } html.dark .text-error, html.dark .text-\[\#C0392B\] { color: #ff7466 !important; } html.dark .bg-orange-50, html.dark .bg-orange-100 { background-color: rgba(230, 126, 34, 0.18) !important; } html.dark .text-orange-500, html.dark .text-orange-600, html.dark .text-orange-700 { color: #ffa15e !important; } html.dark .bg-yellow-50, html.dark .bg-yellow-100 { background-color: rgba(241, 196, 15, 0.14) !important; } html.dark .border-yellow-300 { border-color: rgba(241, 196, 15, 0.35) !important; } html.dark .text-yellow-700, html.dark .text-yellow-800, html.dark .text-yellow-900 { color: #ffd966 !important; } html.dark .bg-green-100 { background-color: rgba(39, 174, 96, 0.18) !important; } html.dark .text-green-600, html.dark .text-green-700 { color: #5dd394 !important; } html.dark .bg-red-100 { background-color: rgba(192, 57, 43, 0.18) !important; } html.dark .text-red-600, html.dark .text-red-700 { color: #ff7466 !important; } /* Tertiary (used for medium severity + tip cards) */ html.dark .bg-tertiary-container { background-color: rgba(201, 167, 77, 0.18) !important; } html.dark .text-tertiary { color: #ddc97a !important; } html.dark .bg-tertiary-fixed { background-color: rgba(255, 223, 147, 0.10) !important; } html.dark .text-on-tertiary-fixed { color: #ffe9b3 !important; } html.dark .border-tertiary-container { border-color: rgba(201, 167, 77, 0.35) !important; } html.dark .bg-tertiary-fixed-dim { background-color: rgba(231, 195, 101, 0.18) !important; } /* --- Brand-specific hex classes used in Stitch source ------- */ html.dark .text-\[\#1F3A5F\] { color: #88aee0 !important; } html.dark .bg-\[\#1F3A5F\] { background-color: #4a6da0 !important; } html.dark .hover\:bg-\[\#162a45\]:hover { background-color: #5277b0 !important; } html.dark .text-\[\#2C3E50\] { color: #c5d3df !important; } html.dark .bg-\[\#FADBD8\] { background-color: rgba(192, 57, 43, 0.15) !important; } html.dark .border-\[\#FADBD8\] { border-color: rgba(192, 57, 43, 0.35) !important; } html.dark .text-\[\#27AE60\] { color: #5dd394 !important; } /* --- Form controls ----------------------------------------- */ html.dark input[type="text"], html.dark input[type="email"], html.dark input[type="password"], html.dark input[type="url"], html.dark input[type="search"], html.dark textarea, html.dark select { background-color: #1f2233 !important; border-color: #3a3f56 !important; color: #e1e1e6 !important; } html.dark input::placeholder, html.dark textarea::placeholder { color: #6f7088 !important; } html.dark input[type="checkbox"], html.dark input[type="radio"] { background-color: #1f2233; border-color: #3a3f56; } html.dark input[type="checkbox"]:checked, html.dark input[type="radio"]:checked { background-color: #b6a4e6; border-color: #b6a4e6; } /* --- Avatars / placeholder elements ------------------------ */ html.dark .border-2.border-white { border-color: #1e2233 !important; } html.dark .ring-white { --tw-ring-color: #1e2233 !important; } /* --- Score ring (conic gradient) — invert the gray track --- */ html.dark .score-ring { /* The gradient is set inline via CSS var-like style; this rule re-tints the "remainder" portion of the ring by overriding via mix-blend-mode. */ filter: brightness(1.05); } /* The inner circle of the score ring */ html.dark .score-ring > .bg-white { background-color: #1e2233 !important; } /* --- Code/mono blocks --------------------------------------- */ html.dark .font-mono.bg-surface-container, html.dark .font-mono.bg-surface-container-low { background-color: #161929 !important; color: #c5d3df !important; } /* --- Modal backdrops --------------------------------------- */ html.dark .bg-black\/40 { background-color: rgba(0, 0, 0, 0.7) !important; } html.dark .bg-black\/50 { background-color: rgba(0, 0, 0, 0.75) !important; } /* --- Table striping (alternate rows in library) ------------- */ html.dark .bg-surface-container-lowest.even, html.dark tr.bg-surface-container-lowest { background-color: #181b2a !important; } html.dark .bg-\[\#F8F9F9\] { background-color: #1f2233 !important; } html.dark .hover\:bg-\[\#F8F9F9\]:hover { background-color: #252839 !important; } /* --- Shadows ------------------------------------------------ */ html.dark .shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.6) !important; } html.dark .shadow, html.dark .shadow-lg, html.dark .shadow-xl { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important; } /* --- Focus rings -------------------------------------------- */ html.dark .focus\:ring-2:focus { --tw-ring-color: rgba(182, 164, 230, 0.45) !important; } /* --- Gradient backgrounds (login screen) -------------------- */ html.dark .login-gradient { background: radial-gradient(circle at top right, #2a2347 0%, #0e1224 50%, #1a1d2e 100%) !important; } /* --- Misc utility-color fixups ----------------------------- */ html.dark .border-yellow-300 { border-color: rgba(241, 196, 15, 0.4) !important; } html.dark .border-green-200, html.dark .border-green-500\/20 { border-color: rgba(39, 174, 96, 0.3) !important; } html.dark .border-orange-200 { border-color: rgba(230, 126, 34, 0.3) !important; } /* ============================================================ Print mode — when the user hits Print or "Save as PDF" we strip the app chrome (sidebar, header, sticky actions) and expand every accordion so the whole audit prints linearly. ============================================================ */ @media print { /* Hide global chrome */ aside.fixed, header.fixed, .theme-toggle-btn, .print-hide { display: none !important; } /* Layout reset — main becomes full-width */ main { margin: 0 !important; padding: 12mm 10mm !important; padding-top: 0 !important; } main.grid { display: block !important; } /* Inside report-viewer the right sidebar is its own