/* SGS Visitor — Unified theme system (dark / light) * * Single source of truth for ALL colors. Uses the same semantic var names * as index.html (--bg-primary, --text-primary, --accent, etc.) plus * legacy --c-* aliases that the per-page Tailwind configs reference. * * Activated by setting [data-theme="dark"] or [data-theme="light"] on . */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap'); :root, :root[data-theme="dark"] { /* === DARK (default) — index.html palette === */ --bg-primary: #0f1117; --bg-secondary: #1a1d27; --bg-tertiary: #242836; --bg-card: #1e2230; --bg-card-hover: #252a3a; --border-color: #2d3348; --text-primary: #e8eaf0; --text-secondary: #9ca3b8; --text-muted: #6b7394; --accent: #6366f1; --accent-hover: #818cf8; --accent-muted: rgba(99, 102, 241, 0.15); --success: #22c55e; --success-muted: rgba(34, 197, 94, 0.15); --warning: #f59e0b; --warning-muted: rgba(245, 158, 11, 0.15); --danger: #ef4444; --danger-muted: rgba(239, 68, 68, 0.15); --info: #3b82f6; --info-muted: rgba(59, 130, 246, 0.15); /* === LEGACY ALIASES — used by per-page tailwind.config blocks === */ --c-deep: var(--bg-primary); --c-bg: var(--bg-primary); --c-bg2: var(--bg-secondary); --c-bg3: var(--bg-tertiary); --c-bg4: var(--bg-card-hover); --c-panel: var(--bg-secondary); --c-surface: var(--bg-card); --c-surface2: var(--bg-card-hover); --c-tx: var(--text-primary); --c-tx2: var(--text-secondary); --c-tx3: var(--text-muted); --c-dim: var(--text-secondary); --c-muted: var(--text-muted); --c-bdr: var(--border-color); --c-bdr2: var(--border-color); --c-accent: var(--accent); --c-accent2: var(--accent-hover); --c-accent-dim: var(--accent-muted); --c-blue: var(--info); --c-blue-dim: var(--info-muted); --c-red: var(--danger); --c-red-dim: var(--danger-muted); --c-orange: var(--warning); --c-purple: #a78bfa; --c-green: var(--success); --c-yellow: var(--warning); --c-accent-alt: var(--accent); } :root[data-theme="light"] { /* === LIGHT === */ --bg-primary: #f5f7fa; --bg-secondary: #ffffff; --bg-tertiary: #eef2f7; --bg-card: #ffffff; --bg-card-hover: #f7f9fc; --border-color: #e1e6ee; --text-primary: #1a2332; --text-secondary: #4a5568; --text-muted: #718096; --accent: #5b5cf7; --accent-hover: #4548e3; --accent-muted: rgba(91, 92, 247, 0.12); --success: #16a34a; --success-muted: rgba(22, 163, 74, 0.12); --warning: #d97706; --warning-muted: rgba(217, 119, 6, 0.12); --danger: #dc2626; --danger-muted: rgba(220, 38, 38, 0.12); --info: #2563eb; --info-muted: rgba(37, 99, 235, 0.12); } /* === GLOBAL FULL HEIGHT + RESPONSIVE + UNIFIED FONT === */ html, body { height: 100%; min-height: 100vh; margin: 0; padding: 0; background-color: var(--bg-primary) !important; color: var(--text-primary) !important; font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; transition: background-color 0.2s ease, color 0.2s ease; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { display: flex; flex-direction: column; align-items: stretch; } /* Force all interactive elements to inherit the unified font */ input, select, textarea, button, table, th, td { font-family: inherit !important; } /* === UNIFIED SCROLLBAR === */ * { scrollbar-width: thin; scrollbar-color: var(--border-color) transparent; } *::-webkit-scrollbar { width: 8px; height: 8px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; } *::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } /* === UNIFIED FORMS (inputs/selects/textareas) — overrides all per-page styles === */ input[type="text"]:not([class*="bg-"]), input[type="email"]:not([class*="bg-"]), input[type="password"]:not([class*="bg-"]), input[type="tel"]:not([class*="bg-"]), input[type="number"]:not([class*="bg-"]), input[type="date"]:not([class*="bg-"]), input[type="search"]:not([class*="bg-"]), select:not([class*="bg-"]), textarea:not([class*="bg-"]) { background-color: var(--bg-tertiary) !important; color: var(--text-primary) !important; border: 1px solid var(--border-color) !important; border-radius: 8px; outline: none; transition: border-color 0.15s, box-shadow 0.15s; } input:focus:not([class*="bg-"]), select:focus:not([class*="bg-"]), textarea:focus:not([class*="bg-"]) { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-muted); } /* === UNIFIED TABLES === */ table { color: var(--text-primary); border-collapse: collapse; } table th { background: var(--bg-tertiary) !important; color: var(--text-secondary) !important; border-bottom: 1px solid var(--border-color) !important; font-weight: 700; } table td { border-bottom: 1px solid var(--border-color) !important; color: var(--text-primary); } table tbody tr:hover td { background: var(--bg-card-hover) !important; } /* === UNIFIED MODAL OVERLAY === */ .modal-overlay, .modal-backdrop, [class*="bg-black/"][class*="fixed"][class*="inset-0"] { background: rgba(0, 0, 0, 0.6) !important; backdrop-filter: blur(4px); } :root[data-theme="light"] .modal-overlay, :root[data-theme="light"] .modal-backdrop, :root[data-theme="light"] [class*="bg-black/"][class*="fixed"][class*="inset-0"] { background: rgba(15, 23, 42, 0.45) !important; } .modal, .modal-content, [class*="bg-dark-"][class*="rounded"][class*="border"] { background: var(--bg-secondary) !important; border-color: var(--border-color) !important; color: var(--text-primary); } /* === UNIFIED TOASTS (handles both .ok/.err/.nfo and .success/.error/.warning/.info) === */ .toast-wrap, #toasts, #toast-container { position: fixed; top: 1rem; right: 1rem; z-index: 9999; display: flex; flex-direction: column; gap: 0.5rem; } .toast { padding: 0.6rem 1rem !important; border-radius: 10px !important; font-size: 0.82rem !important; font-weight: 600 !important; color: #fff !important; display: flex; align-items: center; gap: 0.5rem; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35); border: 1px solid transparent; animation: sgsToastIn 0.25s ease; } .toast.ok, .toast.success { background: var(--success) !important; color: #fff !important; } .toast.err, .toast.error { background: var(--danger) !important; color: #fff !important; } .toast.nfo, .toast.info { background: var(--info) !important; color: #fff !important; } .toast.warning { background: var(--warning) !important; color: #fff !important; } @keyframes sgsToastIn { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } } /* === UNIFIED CARDS / PANELS — overrides per-page bg classes === */ .bg-panel, .bg-bg2, .bg-surface, .bg-dark-800, .bg-bg3 { background-color: var(--bg-secondary) !important; } .bg-bg, .bg-deep, .bg-dark-900 { background-color: var(--bg-primary) !important; } .bg-bg4, .bg-surface2, .bg-dark-700, .bg-bg-card-hover { background-color: var(--bg-tertiary) !important; } .border-bdr, .border-bdr2, .border-border, .border-border2, .border-white\/10, .border-white\/\[0\.06\], .border-white\/\[0\.08\], .border-white\/\[0\.12\] { border-color: var(--border-color) !important; } .text-tx, .text-txt, .text-white { color: var(--text-primary) !important; } .text-tx2, .text-tx3, .text-gray-300, .text-gray-400, .text-slate-300, .text-slate-400 { color: var(--text-secondary) !important; } .text-dim, .text-muted, .text-gray-500, .text-gray-600, .text-slate-500, .text-slate-600 { color: var(--text-muted) !important; } /* Light theme — boxicons can be too dark on white */ :root[data-theme="light"] .text-white { color: var(--text-primary) !important; } /* When the unified topbar is injected, content below should fill the rest */ body.sgs-unified-nav > #sgsTopbar { flex-shrink: 0 !important; height: 56px !important; } /* Children of body don't auto-grow — they keep their natural height. * Each page is responsible for its own internal layout. The body bg fills any * remaining vertical space because of html,body { height:100% }. */ body.sgs-unified-nav > *:not(#sgsTopbar):not(.nav-sidebar):not(.nav-sidebar-overlay):not(#liaWidget):not(#sgsPanicBtn):not(#sgsPanicModal):not(#sgsPanicToast):not(#toast-container):not(.toast-wrap):not(#toast) { flex-shrink: 0; } /* === HIDE LEGACY PER-PAGE TOPBARS when unified is active === */ /* The unified topbar is injected by nav-menu.js as