*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --sidebar-width: 240px; --sidebar-collapsed: 56px; --sidebar-bg: #1e293b; --sidebar-hover: #334155; --sidebar-active: #3b82f6; --header-height: 56px; --accent: #3b82f6; --accent-dark: #2563eb; --accent-light: #eff6ff; --danger: #ef4444; --success: #22c55e; --warning: #f59e0b; --text-primary: #0f172a; /* Bumped from #64748b (~4.2:1) to #475569 (~7:1) — AAA-level contrast for metadata, placeholders, and secondary labels. */ --text-secondary: #475569; --border: #e2e8f0; --bg: #f8fafc; --white: #ffffff; --row-alt: #f1f5f9; --shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06); --shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06); --shadow-lg: 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05); --radius: 6px; --radius-lg: 10px; /* Spacing scale used by newer components; legacy hardcoded values kept for now, but new / refactored code should use var(--sp-*). */ --sp-xs: 4px; --sp-sm: 8px; --sp-md: 12px; --sp-lg: 16px; --sp-xl: 24px; --sp-2xl: 32px; /* Mirror of --white kept around for callers that want to opt out of the dark-mode override (rare; only modals printing labels on light paper backgrounds use this). */ --surface-fixed-light: #ffffff; } /* Sprint UX backlog 4D: dark mode. Activated by [data-theme="dark"] on ; the theme-toggle in Settings flips the attribute and persists the choice in localStorage. Initial value is set by an inline script in before paint to avoid flash-of-light-theme. Strategy: redefine the semantic tokens so any component reading var(--bg) / var(--text-primary) / var(--white) / var(--border) automatically adapts. Hardcoded `#fff` / `#0f172a` in inline styles stay light — acceptable known limitation; touched piecemeal as each page is refactored. */ html[data-theme="dark"] { color-scheme: dark; --sidebar-bg: #0b1220; --sidebar-hover: #1e293b; --sidebar-active: #3b82f6; --accent: #60a5fa; --accent-dark: #3b82f6; --accent-light: #1e3a8a; --danger: #f87171; --success: #34d399; --warning: #fbbf24; --text-primary: #f1f5f9; --text-secondary: #94a3b8; --border: #1e293b; --bg: #0a0f1a; /* --white is conceptually "card background" in this codebase; in dark mode that becomes a near-black surface so cards still pop against the page background. */ --white: #111827; --row-alt: #1f2937; --shadow: 0 1px 3px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.4); --shadow-md: 0 4px 6px rgba(0,0,0,0.45), 0 2px 4px rgba(0,0,0,0.35); --shadow-lg: 0 10px 15px rgba(0,0,0,0.55), 0 4px 6px rgba(0,0,0,0.35); } html[data-theme="dark"] body { background: var(--bg); color: var(--text-primary); } html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea { background: var(--white); color: var(--text-primary); border-color: var(--border); } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: var(--text-secondary); opacity: .8; } /* Sprint UX backlog 4D follow-up: components with hardcoded light gradients / pill backgrounds get explicit dark-mode replacements. Tokens alone don't reach inline-style gradients on .trial-card, .plans-card-featured, .plans-badge-*, .trial-badge.*, etc. */ html[data-theme="dark"] .trial-card { background: linear-gradient(135deg, #1f2937 0%, #111827 100%); border-color: #b45309; } html[data-theme="dark"] .trial-card.warning { background: linear-gradient(135deg, #2d1f0a 0%, #111827 100%); border-color: #d97706; } html[data-theme="dark"] .trial-card.critical { background: linear-gradient(135deg, #2d0f0f 0%, #111827 100%); border-color: #ef4444; } html[data-theme="dark"] .trial-meta-pill { background: rgba(255,255,255,.06); border-color: var(--border); color: var(--text-primary); } html[data-theme="dark"] .trial-badge { background: #2d1f0a; border-color: #d97706; color: #fbbf24; } html[data-theme="dark"] .trial-badge.warning { background: #2d1f0a; border-color: #d97706; color: #fbbf24; } html[data-theme="dark"] .trial-badge.critical { background: #2d0f0f; border-color: #ef4444; color: #fca5a5; } /* Onboarding card surfaces */ html[data-theme="dark"] .onboarding-card { background: var(--white); } /* Plans modal (Abonamente) — every card has a hardcoded light background, the badges use light pills with dark text, and the active-plan ribbon shows a green check on light. Map all to dark. */ html[data-theme="dark"] .plans-card { background: var(--white); border-color: var(--border); color: var(--text-primary); } html[data-theme="dark"] .plans-card-featured { background: linear-gradient(160deg, #0c1d33 0%, #111827 60%); border-color: var(--accent); box-shadow: 0 0 0 3px rgba(96,165,250,.18); } html[data-theme="dark"] .plans-badge-starter { background: #1e293b; color: #cbd5e1; } html[data-theme="dark"] .plans-badge-growth { background: #0c1d33; color: #93c5fd; } html[data-theme="dark"] .plans-badge-pro { background: #2a1450; color: #c4b5fd; } html[data-theme="dark"] .plans-features li { color: var(--text-primary); } html[data-theme="dark"] .plans-features li.plans-locked { color: var(--text-secondary); opacity: .55; } html[data-theme="dark"] .plans-hint { border-top-color: var(--border); color: var(--text-secondary); } html[data-theme="dark"] .plans-card-current { border-color: #10b981 !important; box-shadow: 0 0 0 3px rgba(16,185,129,.22) !important; } /* Subscription pricing footer rows inside the plans modal */ html[data-theme="dark"] .subscription-chip, html[data-theme="dark"] .subscription-feature-grid, html[data-theme="dark"] .subscription-plan-meta, html[data-theme="dark"] .subscription-upgrade-note { background: var(--white); color: var(--text-primary); border-color: var(--border); } /* Filter selects (Etichete, Inventory chips area, etc.) */ html[data-theme="dark"] select.fsel { background: var(--white); color: var(--text-primary); border-color: var(--border); } /* Modal generic — background was --white token (now dark) but the inline-style hint cards inside many modals had ad-hoc light pills; keep modal surface coherent. */ html[data-theme="dark"] .modal { background: var(--white); color: var(--text-primary); } html[data-theme="dark"] .modal-header { border-color: var(--border); } html[data-theme="dark"] .modal-close { color: var(--text-secondary); } html[data-theme="dark"] .modal-close:hover { background: rgba(255,255,255,.05); } /* Confirm dialog ("Premium Confirm Modal" in index.html uses inline white background) */ html[data-theme="dark"] #premium-confirm-overlay > div { background: var(--white) !important; color: var(--text-primary); } html[data-theme="dark"] #premium-confirm-overlay h3 { color: var(--text-primary) !important; } html[data-theme="dark"] #premium-confirm-overlay p { color: var(--text-secondary) !important; } /* Cards / pills sprinkled across Settings that use raw white background */ html[data-theme="dark"] .settings-card { background: var(--white); border-color: var(--border); } /* Tables / table rows */ html[data-theme="dark"] tbody tr:nth-child(even) td { background: var(--row-alt); } html[data-theme="dark"] tbody tr:hover td { background: rgba(96,165,250,.06); } html[data-theme="dark"] thead th { background: var(--bg); color: var(--text-primary); border-bottom-color: var(--border); } /* Sidebar nav active marker (already token-driven but the gradient highlight needs a touch more luminosity on dark) */ html[data-theme="dark"] .nav-item.active { background: rgba(96,165,250,.18); color: var(--accent); } /* Sticky labels / page headers — sometimes use explicit background */ html[data-theme="dark"] .page-header, html[data-theme="dark"] .filters-bar, html[data-theme="dark"] .chip-bar { background: transparent; } /* Etichete page: the toolbar pills + filter inputs render as empty light squares because the wrapping divs had no background token and the inline placeholder text matched the surface. Force a readable dark surface. */ html[data-theme="dark"] .form-input, html[data-theme="dark"] .pagination button { background: var(--white); color: var(--text-primary); border-color: var(--border); } html[data-theme="dark"] .pagination button.active { background: var(--accent); color: #fff; border-color: var(--accent); } html[data-theme="dark"] .pagination .pg-info { color: var(--text-secondary); } /* ── Aggressive dark-mode overrides for hardcoded inline styles ── Many components (filter selects, picker cards, premium confirm dialog, payment cards, KPI tiles) bake `background:#fff` and `color:#0f172a` straight into the style="" attribute. Without these overrides those nodes render as bright-white islands inside the dark UI. Substring-match attribute selectors + !important are the only way to defeat inline-style specificity without editing every call site. */ html[data-theme="dark"] [style*="background:#fff"], html[data-theme="dark"] [style*="background: #fff"], html[data-theme="dark"] [style*="background:#ffffff"], html[data-theme="dark"] [style*="background:white"], html[data-theme="dark"] [style*="background-color:#fff"] { background: var(--white) !important; color: var(--text-primary); } /* Yellow backup-codes pane on MFA enrollment — keep its yellow tint but tone down luminosity so the warning still reads as warning. */ html[data-theme="dark"] [style*="background:#fffbeb"], html[data-theme="dark"] [style*="background: #fffbeb"] { background: #1f1a08 !important; color: #fde68a !important; } /* Dark text on white → light text on dark for the explicit cases */ html[data-theme="dark"] [style*="color:#0f172a"], html[data-theme="dark"] [style*="color: #0f172a"], html[data-theme="dark"] [style*="color:#1a1a2e"], html[data-theme="dark"] [style*="color:#1e293b"], html[data-theme="dark"] [style*="color:#334155"] { color: var(--text-primary) !important; } html[data-theme="dark"] [style*="color:#475569"], html[data-theme="dark"] [style*="color:#64748b"], html[data-theme="dark"] [style*="color:#6b7280"] { color: var(--text-secondary) !important; } /* Light-coloured borders typically used to outline cards on a light page. Re-map to the dark border token so they don't disappear. */ html[data-theme="dark"] [style*="border:1px solid #e2e8f0"], html[data-theme="dark"] [style*="border: 1px solid #e2e8f0"], html[data-theme="dark"] [style*="border:2px solid #e2e8f0"], html[data-theme="dark"] [style*="border: 2px solid #e2e8f0"], html[data-theme="dark"] [style*="border:1px solid #cbd5e1"], html[data-theme="dark"] [style*="border: 1px solid #cbd5e1"] { border-color: var(--border) !important; } /* Select elements: many in inline-style have hardcoded backgrounds AND no color, so they render as white-on-dark or invisible. Force both. */ html[data-theme="dark"] select, html[data-theme="dark"] input[type="text"], html[data-theme="dark"] input[type="search"], html[data-theme="dark"] input[type="email"], html[data-theme="dark"] input[type="number"], html[data-theme="dark"] input[type="date"], html[data-theme="dark"] input[type="tel"], html[data-theme="dark"] input[type="url"], html[data-theme="dark"] input[type="password"] { background: var(--white) !important; color: var(--text-primary) !important; border-color: var(--border); } /* Header user dropdown row (Plan badge etc.) sometimes uses cream backgrounds via inline styles */ html[data-theme="dark"] [style*="background:#fef3c7"], html[data-theme="dark"] [style*="background: #fef3c7"], html[data-theme="dark"] [style*="background:#fffbeb"], html[data-theme="dark"] [style*="background: #fffbeb"] { background: #1f1a08 !important; } /* Numbers / pricing inside the plans modal — explicit colours kept for accent semantics; ensure surrounding card text is readable */ html[data-theme="dark"] [style*="background:#f1f5f9"], html[data-theme="dark"] [style*="background: #f1f5f9"], html[data-theme="dark"] [style*="background:#f8fafc"], html[data-theme="dark"] [style*="background: #f8fafc"] { background: var(--row-alt) !important; } /* ── subscription-ui.css component overrides ── */ html[data-theme="dark"] .subscription-feature-list { background: var(--white); border-color: var(--border); color: var(--text-primary); } html[data-theme="dark"] .subscription-feature-list.included { background: #0c1d33; border-color: #1e3a8a; } html[data-theme="dark"] .subscription-feature-list.blocked { background: #2d1f0a; border-color: #b45309; } html[data-theme="dark"] .subscription-feature-list-title { color: var(--text-secondary); } html[data-theme="dark"] .subscription-feature-pill { background: #0c1d33; color: #93c5fd; } html[data-theme="dark"] .subscription-feature-pill.blocked { background: #2d1f0a; color: #fbbf24; } html[data-theme="dark"] .sa-plan-badge, html[data-theme="dark"] .subscription-chip { background: var(--white); color: var(--text-primary); border-color: var(--border); } /* User dropdown / avatar area in the top header sometimes has cream background pills */ html[data-theme="dark"] .user-avatar { background: var(--accent); color: #fff; } /* Toasts (admin) — ensure dark surface + readable text on dark mode */ html[data-theme="dark"] .toast { background: var(--white); color: var(--text-primary); border-color: var(--border); } /* Settings card sections often nest white sub-cards */ html[data-theme="dark"] .settings-card-header { background: var(--white); color: var(--text-primary); border-color: var(--border); } html[data-theme="dark"] .settings-card-body { background: var(--white); color: var(--text-primary); } /* Pricing cards inside the Abonamente modal — the "Recomandat" / featured middle column had a hardcoded #eff6ff (very light blue) background that made "Implementare" + "Abonament anual" labels invisible on dark theme. */ html[data-theme="dark"] .plans-price-card { background: var(--bg); border-color: var(--border); color: var(--text-primary); } html[data-theme="dark"] .plans-price-card-featured { background: #0c1d33; border-color: var(--accent); } html[data-theme="dark"] .plans-price-divider { background: var(--border); } html[data-theme="dark"] .plans-price-custom { color: #c4b5fd; } /* Sprint UX-1: visible focus on every interactive element (WCAG 2.4.7) */ *:focus-visible { outline: 3px solid var(--accent, #3b82f6); outline-offset: 2px; box-shadow: 0 0 0 5px rgba(59, 130, 246, 0.35); border-radius: inherit; } /* Honor reduced-motion preference */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; animation-iteration-count: 1 !important; } } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 14px; color: var(--text-primary); background: var(--bg); overflow-x: hidden; } /* LOGIN */ #login-screen { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: linear-gradient(135deg, #1e293b 0%, #334155 100%); } .login-card { background: var(--white); border-radius: var(--radius-lg); padding: 40px 36px; width: 400px; box-shadow: var(--shadow-lg); } .login-card h1 { font-size: 22px; font-weight: 700; margin-bottom: 4px; } .login-card .subtitle { color: var(--text-secondary); margin-bottom: 28px; font-size: 13px; } .login-card .form-group { margin-bottom: 16px; } .login-card label { display: block; font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.04em; } .login-card input { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); font-size: 14px; transition: border-color .15s; outline: none; } .login-card input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(59,130,246,.15); } #login-error { color: var(--danger); font-size: 13px; margin-top: 12px; display: none; background: #fef2f2; padding: 8px 12px; border-radius: var(--radius); border: 1px solid #fecaca; } /* APP SHELL */ #app { display: none; min-height: 100vh; } /* SIDEBAR */ #sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-width); background: var(--sidebar-bg); display: flex; flex-direction: column; z-index: 100; transition: width .2s ease; overflow: hidden; } #sidebar.collapsed { width: var(--sidebar-collapsed); } .sidebar-logo { height: var(--header-height); display: flex; align-items: center; padding: 0 14px; border-bottom: 1px solid rgba(255,255,255,.07); gap: 10px; flex-shrink: 0; } .logo-icon { width: 28px; height: 28px; background: var(--accent); border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 13px; font-weight: 800; color: white; letter-spacing: -.5px; } .logo-text { font-weight: 700; font-size: 15px; color: white; white-space: nowrap; } #sidebar.collapsed .logo-text { display: none; } .sidebar-nav { flex: 1; padding: 10px 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; -ms-overflow-style: none; } .sidebar-nav::-webkit-scrollbar { display: none; } .nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 16px; cursor: pointer; color: #94a3b8; transition: background .15s, color .15s; white-space: nowrap; position: relative; user-select: none; } /* Sprint UX-1: