/* ───────────────────────────────────────────────────────────────────────── Theme System for PreciseLab Enterprise ───────────────────────────────────────────────────────────────────────── Light / Dark mode through [data-theme] on . Persistent in localStorage. Falls back to prefers-color-scheme on first visit. The toggle lives in dashboardLayout() / loginForm() and writes the choice to + localStorage('dpms_theme'). ───────────────────────────────────────────────────────────────────────── */ :root, [data-theme="light"] { /* Surfaces */ --bg-page: #f5f5f7; --bg-surface: #ffffff; --bg-elevated: #ffffff; --bg-subtle: #fafafc; --bg-muted: #f0f0f3; --bg-inverted: #1d1d1f; /* Text — secondary/muted/faint calibrated for WCAG AA on --bg-page (--text-muted #5b6370 = 5.57:1 on #f5f5f7, passes AA for normal text) */ --text-primary: #1d1d1f; --text-secondary: #4b5563; --text-muted: #5b6370; --text-faint: #9ca3af; --text-inverted: #ffffff; /* Borders & dividers */ --border: #e5e5e7; --border-strong: #d1d5db; --border-subtle: #f5f5f7; /* Accent (matches the project purple #5856d6 used across the app) */ --accent: #5856d6; --accent-hover: #4745b8; --accent-strong: #4745b8; --accent-soft: #ede9fe; --accent-fg: #5b21b6; /* Status */ --success: #10b981; --success-soft: #d1fae5; --warning: #f59e0b; --warning-soft: #fef3c7; --danger: #ef4444; --danger-soft: #fee2e2; --info: #0ea5e9; --info-soft: #dbeafe; /* Shadow & overlay */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow: 0 2px 8px rgba(0, 0, 0, 0.06); --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.10); --shadow-color: rgba(0, 0, 0, 0.06); --overlay: rgba(0, 0, 0, 0.45); /* Misc */ --radius: 12px; --transition: background-color .2s ease, color .2s ease, border-color .2s ease; } [data-theme="dark"] { /* Surfaces */ --bg-page: #0f1115; --bg-surface: #1a1d24; --bg-elevated: #232730; --bg-subtle: #1f232c; --bg-muted: #2a2f3a; --bg-inverted: #f5f5f7; /* Text */ --text-primary: #f3f4f6; --text-secondary: #d1d5db; --text-muted: #9ca3af; --text-faint: #6b7280; --text-inverted: #0f1115; /* Borders & dividers */ --border: #2f333d; --border-strong: #3d424d; --border-subtle: #1f232c; /* Accent — keep brand purple, slightly brighter for dark */ --accent: #7c79ee; --accent-hover: #8e8bf3; --accent-strong: #6c69d9; --accent-soft: #2e2a4a; --accent-fg: #c4b5fd; /* Status — soft variants adjusted for dark */ --success: #34d399; --success-soft: #0f3a2c; --warning: #fbbf24; --warning-soft: #3d2e0a; --danger: #f87171; --danger-soft: #3d1a1a; --info: #38bdf8; --info-soft: #0c2c40; /* Shadow & overlay */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow: 0 2px 8px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.55); --shadow-color: rgba(0, 0, 0, 0.45); --overlay: rgba(0, 0, 0, 0.65); } /* ─── Global smoothing — every themed element animates color transitions ─ */ html, body, [data-theme-aware] { transition: var(--transition); } body { background: var(--bg-page); color: var(--text-primary); } /* ─── Scrollbar theming (WebKit + Firefox) ──────────────────────────── Without this, OS scrollbars stay light in dark mode and look out of place. We tint the track/thumb to match --bg-muted and --text-faint. */ * { scrollbar-color: var(--text-faint) transparent; scrollbar-width: thin; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--text-faint); border-radius: 8px; border: 2px solid var(--bg-page); } ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } /* ─── Selection highlight (matches accent) ──────────────────────────── */ ::selection { background: var(--accent-soft); color: var(--text-primary); } /* ─── Placeholder fallback (browsers that ignore per-element rule) ── */ input::placeholder, textarea::placeholder { color: var(--text-faint); opacity: 1; } /* ─── Surfaces & cards ────────────────────────────────────────────────── */ .theme-surface { background: var(--bg-surface); color: var(--text-primary); border: 1px solid var(--border); } .theme-elevated { background: var(--bg-elevated); color: var(--text-primary); border: 1px solid var(--border); } .theme-subtle { background: var(--bg-subtle); color: var(--text-primary); } .theme-card { background: var(--bg-surface); color: var(--text-primary); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); } /* ─── Text helpers ───────────────────────────────────────────────────── */ .theme-text { color: var(--text-primary); } .theme-text-muted { color: var(--text-muted); } .theme-text-secondary { color: var(--text-secondary); } .theme-text-faint { color: var(--text-faint); } /* ─── Form controls ──────────────────────────────────────────────────── */ .theme-input, .theme-select, .theme-textarea { background: var(--bg-surface); color: var(--text-primary); border: 1px solid var(--border); border-radius: 9px; padding: 10px 12px; width: 100%; transition: var(--transition); } .theme-input:focus, .theme-select:focus, .theme-textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .theme-input::placeholder, .theme-textarea::placeholder { color: var(--text-faint); } .theme-input:disabled, .theme-select:disabled { opacity: .55; cursor: not-allowed; } /* ─── Generic form-control theming (works without .theme-* class) ───── Inputs/selects/textareas that use raw Tailwind utilities (e.g. an auth form that ships with `class="border border-gray-300"`) will already get a dark surface via the .dpms-page rules below. But for the auth pages (register, forgot-password) that don't use .dpms-page, the [data-theme="dark"] body selector below gives them a working dark surface. */ [data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), [data-theme="dark"] select, [data-theme="dark"] textarea { background-color: var(--bg-elevated); color: var(--text-primary); border-color: var(--border); } [data-theme="dark"] input:focus, [data-theme="dark"] select:focus, [data-theme="dark"] textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); outline: none; } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: var(--text-faint); } [data-theme="dark"] input:disabled, [data-theme="dark"] select:disabled, [data-theme="dark"] textarea:disabled { opacity: .55; cursor: not-allowed; } /* Checkbox / radio use the brand accent (works in both modes) */ [data-theme] input[type="checkbox"], [data-theme] input[type="radio"] { accent-color: var(--accent); } /* Code, kbd, samp, mark, pre */ [data-theme] code, [data-theme] kbd, [data-theme] samp { background: var(--bg-muted); color: var(--text-primary); border-radius: 4px; padding: 1px 6px; font-size: 0.9em; } [data-theme] pre { background: var(--bg-elevated); color: var(--text-primary); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; overflow-x: auto; } [data-theme] pre code { background: transparent; padding: 0; } [data-theme] mark { background: var(--warning-soft); color: var(--text-primary); } /* Tables — fallback for pages that don't already have table styles */ [data-theme] table { color: var(--text-primary); } [data-theme] th, [data-theme] td { border-color: var(--border); } /* ─── Buttons ─────────────────────────────────────────────────────────── */ .theme-btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; border-radius: 9px; font-size: 13.5px; font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: var(--transition); } .theme-btn-primary { background: var(--accent); color: #fff; } .theme-btn-primary:hover { background: var(--accent-hover); } .theme-btn-secondary { background: var(--bg-surface); color: var(--text-primary); border-color: var(--border); } .theme-btn-secondary:hover { background: var(--bg-subtle); } .theme-btn-ghost { background: transparent; color: var(--text-secondary); } .theme-btn-ghost:hover { background: var(--bg-subtle); color: var(--text-primary); } /* ─── Theme toggle button (used in dashboard topbar + login) ──────────── */ .theme-toggle { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--bg-subtle); color: var(--text-secondary); border: 1px solid var(--border); cursor: pointer; transition: var(--transition); } .theme-toggle:hover { background: var(--bg-muted); color: var(--text-primary); } .theme-toggle i { font-size: 15px; line-height: 1; } [data-theme="light"] .theme-toggle .theme-icon-moon { display: inline-flex; } [data-theme="light"] .theme-toggle .theme-icon-sun { display: none; } [data-theme="dark"] .theme-toggle .theme-icon-moon { display: none; } [data-theme="dark"] .theme-toggle .theme-icon-sun { display: inline-flex; } /* ─── Sidebar / Topbar overrides (dashboard) ─────────────────────────── */ .dpms-sidebar { background: var(--bg-surface); border-color: var(--border) !important; } .dpms-sidebar a { color: var(--text-secondary); } .dpms-sidebar a:hover { background: var(--bg-subtle); color: var(--text-primary); } .dpms-sidebar .text-gray-900 { color: var(--text-primary) !important; } .dpms-sidebar .text-gray-700 { color: var(--text-secondary) !important; } .dpms-sidebar .text-gray-500 { color: var(--text-muted) !important; } .dpms-sidebar .text-gray-400 { color: var(--text-faint) !important; } .dpms-sidebar .border-gray-200 { border-color: var(--border) !important; } .dpms-topbar { background: var(--bg-surface) !important; border-bottom: 1px solid var(--border); color: var(--text-primary); } .dpms-topbar h1 { color: var(--text-primary); } .dpms-topbar .text-gray-900 { color: var(--text-primary) !important; } .dpms-topbar .text-gray-500 { color: var(--text-muted) !important; } .dpms-topbar .border-gray-200 { border-color: var(--border) !important; } .dpms-topbar .bg-gray-50 { background: var(--bg-subtle) !important; } /* ─── Page Content area ─────────────────────────────────────────────── The main
element wraps every dashboard page's content. By default it inherits the body background. In dark mode we want the area itself to feel dark and the white Tailwind cards to turn into dark surfaces. The remap below covers every common Tailwind utility found in the dashboard pages (index, patients, doctors, finance, reports, settings, employee-management, audit-logs, ...). */ .dpms-page { background: var(--bg-page); color: var(--text-primary); } [data-theme="dark"] .dpms-page .bg-white { background: var(--bg-surface) !important; } [data-theme="dark"] .dpms-page .bg-white\/60 { background: var(--bg-elevated) !important; } [data-theme="dark"] .dpms-page .bg-gray-50 { background: var(--bg-subtle) !important; } [data-theme="dark"] .dpms-page .bg-gray-100 { background: var(--bg-muted) !important; } [data-theme="dark"] .dpms-page .bg-gray-200 { background: var(--bg-muted) !important; } [data-theme="dark"] .dpms-page .bg-gray-900\/50 { background: var(--bg-overlay) !important; } [data-theme="dark"] .dpms-page .border-gray-100 { border-color: var(--border) !important; } [data-theme="dark"] .dpms-page .border-gray-200 { border-color: var(--border) !important; } [data-theme="dark"] .dpms-page .border-gray-300 { border-color: var(--border-strong) !important; } [data-theme="dark"] .dpms-page .text-gray-900 { color: var(--text-primary) !important; } [data-theme="dark"] .dpms-page .text-gray-800 { color: var(--text-primary) !important; } [data-theme="dark"] .dpms-page .text-gray-700 { color: var(--text-secondary) !important; } [data-theme="dark"] .dpms-page .text-gray-600 { color: var(--text-secondary) !important; } [data-theme="dark"] .dpms-page .text-gray-500 { color: var(--text-muted) !important; } [data-theme="dark"] .dpms-page .text-gray-400 { color: var(--text-faint) !important; } [data-theme="dark"] .dpms-page .hover\:bg-gray-50:hover { background: var(--bg-subtle) !important; } [data-theme="dark"] .dpms-page .hover\:bg-gray-100:hover { background: var(--bg-muted) !important; } [data-theme="dark"] .dpms-page .placeholder-gray-500::placeholder { color: var(--text-faint) !important; } [data-theme="dark"] .dpms-page .divide-gray-200 > * + * { border-color: var(--border) !important; } [data-theme="dark"] .dpms-page .ring-gray-200 { --tw-ring-color: var(--border) !important; } [data-theme="dark"] .dpms-page .shadow-sm { box-shadow: 0 1px 2px rgba(0,0,0,.45) !important; } [data-theme="dark"] .dpms-page .shadow { box-shadow: 0 2px 8px rgba(0,0,0,.45) !important; } [data-theme="dark"] .dpms-page .shadow-md { box-shadow: 0 4px 12px rgba(0,0,0,.45) !important; } [data-theme="dark"] .dpms-page .shadow-lg { box-shadow: 0 10px 24px rgba(0,0,0,.55) !important; } /* Inputs / form controls inside the page */ [data-theme="dark"] .dpms-page input, [data-theme="dark"] .dpms-page select, [data-theme="dark"] .dpms-page textarea { background-color: var(--bg-elevated); color: var(--text-primary); border-color: var(--border); } [data-theme="dark"] .dpms-page input:focus, [data-theme="dark"] .dpms-page select:focus, [data-theme="dark"] .dpms-page textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } [data-theme="dark"] .dpms-page .disabled\:bg-gray-50:disabled, [data-theme="dark"] .dpms-page input:disabled, [data-theme="dark"] .dpms-page select:disabled, [data-theme="dark"] .dpms-page textarea:disabled { background: var(--bg-subtle) !important; color: var(--text-muted) !important; } /* Active/selected side-nav item is bg-blue-50 + text-blue-600 — turn into accent-tinted dark surface so it doesn't read as a random light spot. */ [data-theme="dark"] .dpms-page .bg-blue-50 { background: var(--accent-soft) !important; } [data-theme="dark"] .dpms-page .text-blue-600 { color: var(--accent-fg) !important; } [data-theme="dark"] .dpms-page .text-blue-700 { color: var(--accent-fg) !important; } [data-theme="dark"] .dpms-page .text-blue-500 { color: var(--accent) !important; } [data-theme="dark"] .dpms-page .ring-blue-500 { --tw-ring-color: var(--accent) !important; } /* ─── Landing page (index.html) ───────────────────────────────────────── The landing page is built with raw Tailwind utilities (no .dpms-page wrapper), so we provide an opt-in .landing-page class that re-maps the same Tailwind colors for dark mode. Sections that are intentionally brand-dark (the "سالانه" pricing card + the odontogram feature) keep their original dark surface in both modes. */ .landing-page { color: var(--text-primary); } /* Header / Nav */ [data-theme="dark"] .landing-page .bg-white\/80 { background: rgba(26, 29, 36, 0.85) !important; /* var(--bg-surface) @ 85% */ } [data-theme="dark"] .landing-page .border-gray-200\/60 { border-color: var(--border) !important; } /* Section backgrounds */ [data-theme="dark"] .landing-page .bg-white { background: var(--bg-surface) !important; } [data-theme="dark"] .landing-page .bg-sky-50 { background: var(--bg-subtle) !important; } [data-theme="dark"] .landing-page .bg-sky-100 { background: rgba(56, 189, 248, 0.12) !important; } /* sky tinted */ [data-theme="dark"] .landing-page .bg-cyan-50 { background: var(--bg-subtle) !important; } [data-theme="dark"] .landing-page .bg-cyan-100 { background: rgba(34, 211, 238, 0.12) !important; } /* cyan tinted */ [data-theme="dark"] .landing-page .bg-indigo-100 { background: rgba(129, 140, 248, 0.14) !important; } /* indigo tinted */ [data-theme="dark"] .landing-page .bg-rose-100 { background: rgba(244, 63, 94, 0.14) !important; } /* rose tinted */ [data-theme="dark"] .landing-page .bg-emerald-50 { background: var(--success-soft) !important; } [data-theme="dark"] .landing-page .bg-emerald-100 { background: var(--success-soft) !important; } /* Borders */ [data-theme="dark"] .landing-page .border-slate-100 { border-color: var(--border) !important; } [data-theme="dark"] .landing-page .border-slate-200 { border-color: var(--border) !important; } [data-theme="dark"] .landing-page .border-sky-100 { border-color: var(--border) !important; } [data-theme="dark"] .landing-page .border-sky-200 { border-color: var(--border) !important; } [data-theme="dark"] .landing-page .border-sky-700 { border-color: var(--accent) !important; } [data-theme="dark"] .landing-page .border-cyan-200 { border-color: var(--border) !important; } [data-theme="dark"] .landing-page .border-cyan-400 { border-color: var(--accent) !important; } [data-theme="dark"] .landing-page .border-white\/20 { border-color: rgba(255, 255, 255, 0.12) !important; } [data-theme="dark"] .landing-page .border-white\/40 { border-color: rgba(255, 255, 255, 0.18) !important; } /* Text colors — full slate/cyan/sky scale */ [data-theme="dark"] .landing-page .text-slate-900 { color: var(--text-primary) !important; } [data-theme="dark"] .landing-page .text-slate-800 { color: var(--text-primary) !important; } [data-theme="dark"] .landing-page .text-slate-700 { color: var(--text-secondary) !important; } [data-theme="dark"] .landing-page .text-slate-600 { color: var(--text-secondary) !important; } [data-theme="dark"] .landing-page .text-slate-500 { color: var(--text-muted) !important; } [data-theme="dark"] .landing-page .text-slate-400 { color: var(--text-faint) !important; } [data-theme="dark"] .landing-page .text-sky-900 { color: var(--text-primary) !important; } [data-theme="dark"] .landing-page .text-sky-700 { color: var(--accent-fg) !important; } [data-theme="dark"] .landing-page .text-sky-200 { color: var(--text-muted) !important; } [data-theme="dark"] .landing-page .text-cyan-700 { color: var(--accent-fg) !important; } [data-theme="dark"] .landing-page .text-cyan-600 { color: var(--accent) !important; } [data-theme="dark"] .landing-page .text-cyan-500 { color: var(--accent) !important; } [data-theme="dark"] .landing-page .text-cyan-400 { color: var(--accent) !important; } [data-theme="dark"] .landing-page .text-cyan-300 { color: var(--accent) !important; } [data-theme="dark"] .landing-page .text-emerald-600 { color: var(--success) !important; } [data-theme="dark"] .landing-page .text-emerald-800 { color: var(--success) !important; } [data-theme="dark"] .landing-page .text-rose-600 { color: var(--danger) !important; } [data-theme="dark"] .landing-page .text-rose-800 { color: var(--danger) !important; } [data-theme="dark"] .landing-page .text-indigo-600 { color: #a5b4fc !important; } /* indigo stays readable on dark */ [data-theme="dark"] .landing-page .text-purple-600 { color: #c4b5fd !important; } /* Backgrounds of the small text-slate-400 URL badge in hero mockup */ [data-theme="dark"] .landing-page .text-slate-400.bg-white { color: var(--text-muted) !important; background: var(--bg-elevated) !important; } /* Hero decorative blurs (the soft cyan/sky glows) — keep visible but slightly desaturated so they don't punch through the dark surface too hard. */ [data-theme="dark"] .landing-page .bg-cyan-200\/30 { background: rgba(34, 211, 238, 0.10) !important; } [data-theme="dark"] .landing-page .bg-sky-200\/40 { background: rgba(56, 189, 248, 0.10) !important; } /* The brand-dark cards (اشتراک سالانه + اودونتوگرام تعاملی) keep their navy/sky-900 surface in BOTH modes — they're a brand feature, not a bug. We only tweak the cyan accent badge on the pricing card so it reads well against the navy. */ [data-theme="dark"] .landing-page .bg-sky-900 { background: #0c2236 !important; } /* slightly darker for dark mode */ [data-theme="dark"] .landing-page .bg-sky-950 { background: #050d18 !important; } /* The "best plan" badge — keep brand cyan */ [data-theme="dark"] .landing-page .bg-cyan-400 { background: var(--accent) !important; } [data-theme="dark"] .landing-page .text-sky-950 { color: #ffffff !important; } /* Floating glass icons (dentistry, calendar, security) */ [data-theme="dark"] .landing-page .glass-panel { background: rgba(35, 39, 48, 0.7) !important; } /* Form container (semi-transparent white card) */ [data-theme="dark"] .landing-page .bg-white\/95 { background: rgba(26, 29, 36, 0.95) !important; } /* Footer — keep dark in both modes, but lighten slightly in dark mode so it doesn't completely blend into the page bg. */ [data-theme="dark"] .landing-page .bg-slate-900 { background: #13161d !important; } [data-theme="dark"] .landing-page .border-sky-700 { border-color: var(--accent) !important; } [data-theme="dark"] .landing-page .bg-white\/10 { background: rgba(255, 255, 255, 0.06) !important; } /* Gradient text (used by some headings) */ [data-theme="dark"] .landing-page .text-gradient { background-image: linear-gradient(to right, #93c5fd, #67e8f9) !important; } /* Avatar border in testimonials */ [data-theme="dark"] .landing-page .border-cyan-200 { border-color: var(--accent) !important; } /* Tabular numbers (the small "dashboard.preciselab.ir" badge) */ [data-theme="dark"] .landing-page .bg-sky-50 { background: var(--bg-subtle) !important; } [data-theme="dark"] .landing-page .bg-cyan-50 { background: var(--bg-subtle) !important; } /* ─── Landing page HEADER ─────────────────────────────────────────────── The header lives OUTSIDE
— it's a sibling of
, not a child — so the .landing-page-scoped overrides above do NOT reach the nav links, the login button or the request-demo CTA when [data-theme="dark"] is active. The original markup uses Tailwind's `dark:` variant (e.g. `dark:text-slate-300`). That variant only activates when Tailwind is configured with `darkMode: 'class'` AND a `.dark` class is on ; this project drives the theme via the custom `[data-theme="..."]` attribute on , so the `dark:` variants are never matched when the user clicks the toggle. We therefore remap the header's text / background / border colors directly under `[data-theme="dark"] .landing-header` so the menu, the login button and the "درخواست دمو" CTA flip cleanly between light and dark. */ [data-theme="dark"] .landing-header { color: var(--text-primary); } /* Nav links — full slate/sky scale (text + active border) */ [data-theme="dark"] .landing-header .text-sky-700 { color: var(--accent-fg) !important; } [data-theme="dark"] .landing-header .text-sky-300 { color: var(--accent-fg) !important; } [data-theme="dark"] .landing-header .text-sky-900 { color: var(--text-primary) !important; } [data-theme="dark"] .landing-header .text-slate-300 { color: var(--text-secondary) !important; } [data-theme="dark"] .landing-header .text-slate-600 { color: var(--text-secondary) !important; } [data-theme="dark"] .landing-header .text-slate-500 { color: var(--text-muted) !important; } [data-theme="dark"] .landing-header .hover\:text-sky-900:hover { color: var(--text-primary) !important; } [data-theme="dark"] .landing-header .hover\:text-white:hover { color: #ffffff !important; } [data-theme="dark"] .landing-header .border-sky-700 { border-color: var(--accent) !important; } [data-theme="dark"] .landing-header .border-sky-400 { border-color: var(--accent) !important; } /* Theme toggle button inside the header — keep it on the soft surface the rest of the header uses. The .theme-toggle base style already reads the theme tokens; this is just an extra safeguard in case someone later adds hard-coded utilities to it. */ [data-theme="dark"] .landing-header .theme-toggle { background: var(--bg-muted) !important; color: var(--text-primary) !important; border-color: var(--border) !important; } /* Login button — neutral slate surface (overrides the inline `text-slate-700 bg-slate-50 border-slate-200` utilities on the anchor so the button feels native in BOTH themes). The `.nav-login-btn` class in landing.css already provides this; we add `!important` here to outrank the inline Tailwind utilities that have the same specificity but load from the tailwind.js bundle. */ .landing-header .nav-login-btn, [data-theme="dark"] .landing-header .nav-login-btn { background-color: var(--bg-subtle) !important; color: var(--text-secondary) !important; border-color: var(--border) !important; } .landing-header .nav-login-btn:hover, [data-theme="dark"] .landing-header .nav-login-btn:hover { background-color: var(--bg-muted) !important; color: var(--text-primary) !important; } [data-theme="light"] .landing-header .nav-login-btn { background-color: var(--bg-subtle) !important; color: var(--text-secondary) !important; border-color: var(--border) !important; } /* "درخواست دمو" CTA — intentionally dark (sky-900) in light mode. In dark mode we deepen it slightly so it doesn't look like a foreign bright spot floating on the dark page, and we keep the white text. */ [data-theme="dark"] .landing-header a[href="#demo-request"] { background-color: #0c2236 !important; /* var(--bg-sky-900) darkened */ color: #ffffff !important; border-color: transparent !important; } [data-theme="dark"] .landing-header a[href="#demo-request"]:hover { background-color: #0a1c2c !important; } /* ─── Login page specific ─────────────────────────────────────────────── */ .auth-shell { min-height: 100vh; display: grid; grid-template-columns: 1fr; background: var(--bg-page); position: relative; overflow: hidden; } @media (min-width: 1024px) { .auth-shell { grid-template-columns: 1.1fr 1fr; } } .auth-brand { display: none; position: relative; background: radial-gradient(at 20% 20%, var(--accent-soft) 0%, transparent 50%), radial-gradient(at 80% 70%, var(--info-soft) 0%, transparent 50%), linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%); color: #fff; padding: 56px 48px; overflow: hidden; } @media (min-width: 1024px) { .auth-brand { display: flex; flex-direction: column; } } .auth-brand::before, .auth-brand::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .12); pointer-events: none; filter: blur(40px); animation: auth-blob 14s ease-in-out infinite; } .auth-brand::before { width: 320px; height: 320px; top: -80px; left: -80px; } .auth-brand::after { width: 260px; height: 260px; bottom: -60px; right: -60px; animation-delay: -7s; } @keyframes auth-blob { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(30px, 40px) scale(1.08); } } .auth-brand h1 { font-size: 32px; font-weight: 800; margin: 0 0 12px; letter-spacing: -0.5px; } .auth-brand p { font-size: 15.5px; line-height: 1.8; opacity: .92; max-width: 460px; } .auth-brand .features { display: grid; gap: 14px; margin-top: 28px; max-width: 460px; } .auth-brand .features li { display: flex; align-items: flex-start; gap: 10px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .18); border-radius: 12px; padding: 12px 14px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 13.5px; } .auth-brand .features li i { font-size: 16px; margin-top: 2px; opacity: .9; } .auth-form-pane { display: flex; align-items: center; justify-content: center; padding: 32px 24px; position: relative; } .auth-card { width: 100%; max-width: 440px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 20px; padding: 36px 32px; box-shadow: var(--shadow-lg); } .auth-card .logo { width: 56px; height: 56px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%); color: #fff; font-size: 26px; box-shadow: 0 8px 20px rgba(88, 86, 214, .35); margin-bottom: 18px; } .auth-card h2 { font-size: 22px; font-weight: 800; color: var(--text-primary); margin: 0 0 6px; } .auth-card .subtitle { color: var(--text-muted); font-size: 13.5px; margin: 0 0 26px; } .auth-card .label { display: block; font-size: 12.5px; font-weight: 700; color: var(--text-secondary); margin-bottom: 6px; } .auth-card .label i { color: var(--text-faint); margin-left: 4px; } .auth-card .help { font-size: 11.5px; color: var(--text-faint); margin-top: 6px; } .auth-card .row-between { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 18px; } .auth-card .checkbox-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); } .auth-card .checkbox-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); } .auth-card .link { color: var(--accent); font-size: 12.5px; text-decoration: none; font-weight: 600; } .auth-card .link:hover { color: var(--accent-hover); } .auth-card .divider { height: 1px; background: var(--border); margin: 22px 0 18px; position: relative; } .auth-card .divider::before { content: "یا"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--bg-surface); padding: 0 10px; color: var(--text-faint); font-size: 12px; } .auth-card .demo-credentials { background: var(--info-soft); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; font-size: 12.5px; color: var(--text-secondary); margin-top: 18px; } .auth-card .demo-credentials code { background: var(--bg-muted); color: var(--text-primary); padding: 2px 6px; border-radius: 6px; font-size: 12px; direction: ltr; display: inline-block; } .auth-card .alert { padding: 10px 12px; border-radius: 9px; margin-bottom: 14px; font-size: 13px; display: flex; align-items: center; gap: 8px; } .auth-card .alert-error { background: var(--danger-soft); color: var(--danger); border: 1px solid var(--border); } .auth-card .alert-success { background: var(--success-soft); color: var(--success); border: 1px solid var(--border); } /* Password field with show/hide toggle (right-aligned for RTL) */ .auth-card .password-wrap { position: relative; } .auth-card .password-wrap input { padding-left: 42px; } .auth-card .password-toggle { position: absolute; left: 6px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--text-faint); width: 32px; height: 32px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; } .auth-card .password-toggle:hover { color: var(--text-secondary); background: var(--bg-subtle); } .auth-card .submit-btn { width: 100%; margin-top: 8px; padding: 12px 16px; border-radius: 11px; background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%); color: #fff; font-weight: 700; font-size: 14px; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 6px 18px rgba(88, 86, 214, .35); transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease; } .auth-card .submit-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(88, 86, 214, .45); } .auth-card .submit-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; } /* ───────────────────────────────────────────────────────────────────────── Dashboard colored elements (icons, status pills, role chips) ───────────────────────────────────────────────────────────────────────── The dashboard pages use hard-coded Tailwind `bg-{color}-100` and `text-{color}-600/700/800` utilities for the stat-card icon circles, status pills (confirmed / scheduled / completed), the recent-patients avatars, and the dynamic role badge that lives in both the sidebar and the topbar. These pastel surfaces stayed bright in dark mode and became glaring hot-spots on the dark page. The rules below remap the background to a translucent brand-tinted dark surface and the foreground to the matching 400-tint swatch so the meaning of the color is preserved (blue = patients, green = success, yellow = pending, purple = doctors, red = danger, indigo = info) while the element reads as native in BOTH themes. Scoped under .dpms-page to avoid clashing with the landing page, which already has its own remap block earlier in this file. */ [data-theme="dark"] .dpms-page .bg-blue-100, [data-theme="dark"] .dpms-page .bg-blue-50 { background: rgba(59, 130, 246, 0.18) !important; } [data-theme="dark"] .dpms-page .bg-green-100, [data-theme="dark"] .dpms-page .bg-green-50 { background: rgba(16, 185, 129, 0.18) !important; } [data-theme="dark"] .dpms-page .bg-yellow-100, [data-theme="dark"] .dpms-page .bg-yellow-50 { background: rgba(245, 158, 11, 0.18) !important; } [data-theme="dark"] .dpms-page .bg-purple-100, [data-theme="dark"] .dpms-page .bg-purple-50 { background: rgba(139, 92, 246, 0.18) !important; } [data-theme="dark"] .dpms-page .bg-red-100, [data-theme="dark"] .dpms-page .bg-red-50 { background: rgba(239, 68, 68, 0.18) !important; } [data-theme="dark"] .dpms-page .bg-rose-100, [data-theme="dark"] .dpms-page .bg-rose-50 { background: rgba(244, 63, 94, 0.18) !important; } [data-theme="dark"] .dpms-page .bg-indigo-100, [data-theme="dark"] .dpms-page .bg-indigo-50 { background: rgba(99, 102, 241, 0.18) !important; } [data-theme="dark"] .dpms-page .bg-teal-100, [data-theme="dark"] .dpms-page .bg-teal-50 { background: rgba(20, 184, 166, 0.18) !important; } [data-theme="dark"] .dpms-page .bg-sky-100, [data-theme="dark"] .dpms-page .bg-sky-50 { background: rgba(56, 189, 248, 0.18) !important; } [data-theme="dark"] .dpms-page .bg-cyan-100, [data-theme="dark"] .dpms-page .bg-cyan-50 { background: rgba(34, 211, 238, 0.18) !important; } /* Matching text colors — full 600/700/800 scale, switched to the 300/400 swatch in dark mode for AA contrast on the dark surface. */ [data-theme="dark"] .dpms-page .text-blue-600, [data-theme="dark"] .dpms-page .text-blue-700, [data-theme="dark"] .dpms-page .text-blue-800 { color: #93c5fd !important; } [data-theme="dark"] .dpms-page .text-green-600, [data-theme="dark"] .dpms-page .text-green-700, [data-theme="dark"] .dpms-page .text-green-800 { color: #6ee7b7 !important; } [data-theme="dark"] .dpms-page .text-yellow-600, [data-theme="dark"] .dpms-page .text-yellow-700, [data-theme="dark"] .dpms-page .text-yellow-800 { color: #fcd34d !important; } [data-theme="dark"] .dpms-page .text-purple-600, [data-theme="dark"] .dpms-page .text-purple-700, [data-theme="dark"] .dpms-page .text-purple-800 { color: #c4b5fd !important; } [data-theme="dark"] .dpms-page .text-red-600, [data-theme="dark"] .dpms-page .text-red-700, [data-theme="dark"] .dpms-page .text-red-800 { color: #fca5a5 !important; } [data-theme="dark"] .dpms-page .text-rose-500, [data-theme="dark"] .dpms-page .text-rose-600, [data-theme="dark"] .dpms-page .text-rose-700, [data-theme="dark"] .dpms-page .text-rose-800 { color: #fda4af !important; } [data-theme="dark"] .dpms-page .text-indigo-600, [data-theme="dark"] .dpms-page .text-indigo-700 { color: #a5b4fc !important; } [data-theme="dark"] .dpms-page .text-teal-600, [data-theme="dark"] .dpms-page .text-teal-700 { color: #5eead4 !important; } /* Light mode: keep the original 600/700/800 swatches but pin them on the colored -50/-100 surface so designers can still use the standard Tailwind pairs (text-blue-600 on bg-blue-100) without surprises. */ /* Border color matches for status pills + role chips */ [data-theme="dark"] .dpms-page .border-blue-100, [data-theme="dark"] .dpms-page .border-blue-200 { border-color: rgba(59, 130, 246, 0.40) !important; } [data-theme="dark"] .dpms-page .border-green-100, [data-theme="dark"] .dpms-page .border-green-200 { border-color: rgba(16, 185, 129, 0.40) !important; } [data-theme="dark"] .dpms-page .border-yellow-100, [data-theme="dark"] .dpms-page .border-yellow-200 { border-color: rgba(245, 158, 11, 0.40) !important; } [data-theme="dark"] .dpms-page .border-purple-100, [data-theme="dark"] .dpms-page .border-purple-200 { border-color: rgba(139, 92, 246, 0.40) !important; } [data-theme="dark"] .dpms-page .border-red-100, [data-theme="dark"] .dpms-page .border-red-200 { border-color: rgba(239, 68, 68, 0.40) !important; } [data-theme="dark"] .dpms-page .border-rose-100, [data-theme="dark"] .dpms-page .border-rose-200 { border-color: rgba(244, 63, 94, 0.40) !important; } [data-theme="dark"] .dpms-page .border-indigo-100, [data-theme="dark"] .dpms-page .border-indigo-200 { border-color: rgba(99, 102, 241, 0.40) !important; } [data-theme="dark"] .dpms-page .border-teal-100, [data-theme="dark"] .dpms-page .border-teal-200 { border-color: rgba(20, 184, 166, 0.40) !important; } [data-theme="dark"] .dpms-page .border-gray-100, [data-theme="dark"] .dpms-page .border-gray-200 { border-color: var(--border) !important; } /* Hover for the colored role badges (topbar + sidebar). Alpine toggles `hover:bg-{color}-100` together with the base 50 surface. */ [data-theme="dark"] .dpms-page .hover\:bg-red-50:hover, [data-theme="dark"] .dpms-page .hover\:bg-red-100:hover { background: rgba(239, 68, 68, 0.28) !important; } [data-theme="dark"] .dpms-page .hover\:bg-blue-50:hover, [data-theme="dark"] .dpms-page .hover\:bg-blue-100:hover { background: rgba(59, 130, 246, 0.28) !important; } [data-theme="dark"] .dpms-page .hover\:bg-green-50:hover, [data-theme="dark"] .dpms-page .hover\:bg-green-100:hover { background: rgba(16, 185, 129, 0.28) !important; } [data-theme="dark"] .dpms-page .hover\:bg-yellow-50:hover, [data-theme="dark"] .dpms-page .hover\:bg-yellow-100:hover { background: rgba(245, 158, 11, 0.28) !important; } [data-theme="dark"] .dpms-page .hover\:bg-teal-50:hover, [data-theme="dark"] .dpms-page .hover\:bg-teal-100:hover { background: rgba(20, 184, 166, 0.28) !important; } [data-theme="dark"] .dpms-page .hover\:bg-purple-50:hover, [data-theme="dark"] .dpms-page .hover\:bg-purple-100:hover { background: rgba(139, 92, 246, 0.28) !important; } [data-theme="dark"] .dpms-page .hover\:bg-gray-50:hover, [data-theme="dark"] .dpms-page .hover\:bg-gray-100:hover { background: var(--bg-muted) !important; } /* ───────────────────────────────────────────────────────────────────────── Sidebar + Topbar colored elements (active nav, role chip, hover) ───────────────────────────────────────────────────────────────────────── The sidebar (.dpms-sidebar) and the topbar (.dpms-topbar) are siblings of the main content (.dpms-page) — they are NOT inside it. The earlier rules remap the active nav-link colors and the dynamic role-chip palette under `.dpms-page` only, which is why the active sidebar item (e.g. "داشبورد") stays in bright Tailwind `bg-blue-50` and the role badge keeps its pastel red/blue/green/yellow/teal/purple surfaces when [data-theme="dark"] is active. The block below mirrors those remaps for `.dpms-sidebar` and `.dpms-topbar` and also covers the hover-only utilities used on the logout button (`hover:text-red-600`) and on the role-chip dropdown trigger (`hover:bg-{color}-100`). */ /* Active sidebar nav link */ .dpms-sidebar a.bg-blue-50, .dpms-sidebar a.bg-blue-50\/30 { background: var(--accent-soft) !important; } .dpms-sidebar a.text-blue-600 { color: var(--accent-fg) !important; } .dpms-sidebar a.text-blue-700 { color: var(--accent-fg) !important; } .dpms-sidebar a.border-blue-200 { border-color: rgba(99, 102, 241, 0.40) !important; } .dpms-sidebar a.hover\:bg-gray-50:hover { background: var(--bg-subtle) !important; } .dpms-sidebar a.hover\:bg-gray-100:hover { background: var(--bg-muted) !important; } /* Dynamic role chip — `role_chip_classes()` returns a pair of bg-{color}-50 + border-{color}-200 + text-{color}-700 utilities. We mirror the same tinted palette we use in `.dpms-page` so the chip reads the same in both layouts. */ .dpms-sidebar .bg-red-50, .dpms-topbar .bg-red-50 { background: rgba(239, 68, 68, 0.18) !important; } .dpms-sidebar .border-red-200, .dpms-topbar .border-red-200 { border-color: rgba(239, 68, 68, 0.40) !important; } .dpms-sidebar .text-red-700, .dpms-topbar .text-red-700 { color: #fca5a5 !important; } .dpms-sidebar .bg-blue-50, .dpms-topbar .bg-blue-50 { background: rgba(59, 130, 246, 0.18) !important; } .dpms-sidebar .border-blue-200, .dpms-topbar .border-blue-200 { border-color: rgba(59, 130, 246, 0.40) !important; } .dpms-sidebar .text-blue-700, .dpms-topbar .text-blue-700 { color: #93c5fd !important; } .dpms-sidebar .bg-green-50, .dpms-topbar .bg-green-50 { background: rgba(16, 185, 129, 0.18) !important; } .dpms-sidebar .border-green-200, .dpms-topbar .border-green-200 { border-color: rgba(16, 185, 129, 0.40) !important; } .dpms-sidebar .text-green-700, .dpms-topbar .text-green-700 { color: #6ee7b7 !important; } .dpms-sidebar .bg-yellow-50, .dpms-topbar .bg-yellow-50 { background: rgba(245, 158, 11, 0.18) !important; } .dpms-sidebar .border-yellow-200, .dpms-topbar .border-yellow-200 { border-color: rgba(245, 158, 11, 0.40) !important; } .dpms-sidebar .text-yellow-700, .dpms-topbar .text-yellow-700 { color: #fcd34d !important; } .dpms-sidebar .bg-teal-50, .dpms-topbar .bg-teal-50 { background: rgba(20, 184, 166, 0.18) !important; } .dpms-sidebar .border-teal-200, .dpms-topbar .border-teal-200 { border-color: rgba(20, 184, 166, 0.40) !important; } .dpms-sidebar .text-teal-700, .dpms-topbar .text-teal-700 { color: #5eead4 !important; } .dpms-sidebar .bg-purple-50, .dpms-topbar .bg-purple-50 { background: rgba(139, 92, 246, 0.18) !important; } .dpms-sidebar .border-purple-200, .dpms-topbar .border-purple-200 { border-color: rgba(139, 92, 246, 0.40) !important; } .dpms-sidebar .text-purple-700, .dpms-topbar .text-purple-700 { color: #c4b5fd !important; } /* Hover variant of the role chip (the dropdown trigger uses `hover:bg-{color}-100`). Light mode brightens by one step, so we do the same in dark mode by bumping the alpha. */ .dpms-sidebar .hover\:bg-red-50:hover, .dpms-topbar .hover\:bg-red-50:hover { background: rgba(239, 68, 68, 0.28) !important; } .dpms-sidebar .hover\:bg-blue-50:hover, .dpms-topbar .hover\:bg-blue-50:hover { background: rgba(59, 130, 246, 0.28) !important; } .dpms-sidebar .hover\:bg-green-50:hover, .dpms-topbar .hover\:bg-green-50:hover { background: rgba(16, 185, 129, 0.28) !important; } .dpms-sidebar .hover\:bg-yellow-50:hover, .dpms-topbar .hover\:bg-yellow-50:hover{ background: rgba(245, 158, 11, 0.28) !important; } .dpms-sidebar .hover\:bg-teal-50:hover, .dpms-topbar .hover\:bg-teal-50:hover { background: rgba(20, 184, 166, 0.28) !important; } .dpms-sidebar .hover\:bg-purple-50:hover, .dpms-topbar .hover\:bg-purple-50:hover{ background: rgba(139, 92, 246, 0.28) !important; } .dpms-sidebar .hover\:bg-gray-50:hover, .dpms-topbar .hover\:bg-gray-50:hover { background: var(--bg-muted) !important; } .dpms-sidebar .hover\:bg-gray-100:hover, .dpms-topbar .hover\:bg-gray-100:hover { background: var(--bg-muted) !important; } /* Logout button — `text-gray-400 hover:text-red-600`. The base color is already remapped to text-faint; the hover variant was not. In dark mode the hover should still escalate to the red 400 swatch (not 600) to keep parity with the other remapped text colors. */ .dpms-sidebar .hover\:text-red-600:hover, .dpms-topbar .hover\:text-red-600:hover { color: #fca5a5 !important; } .dpms-sidebar .hover\:text-gray-700:hover, .dpms-topbar .hover\:text-gray-700:hover { color: var(--text-primary) !important; } .dpms-sidebar .hover\:text-gray-900:hover, .dpms-topbar .hover\:text-gray-900:hover { color: var(--text-primary) !important; } /* Sidebar logo "brand chip" gradient (the rounded square next to the product name). The original `from-{color}-400 to-{color}-600` pair is intentionally brand-tinted and reads correctly on both themes, but we still want to make sure the *border* around it in dark mode uses the regular border color. */ .dpms-sidebar .border-gray-100 { border-color: var(--border) !important; } /* "Jostojou" search input that lives at the top of the sidebar is rendered by the page rather than the layout, but when it shows up it uses `bg-gray-50 border-gray-200` — the override below makes sure the placeholder/input text reads correctly in dark mode. */ .dpms-sidebar input, .dpms-topbar input { color: var(--text-primary); } .dpms-sidebar input::placeholder, .dpms-topbar input::placeholder { color: var(--text-muted); } [data-theme="dark"] .dpms-sidebar .bg-gray-50, [data-theme="dark"] .dpms-topbar .bg-gray-50 { background: var(--bg-subtle) !important; } [data-theme="dark"] .dpms-sidebar .focus\:ring-blue-500:focus, [data-theme="dark"] .dpms-topbar .focus\:ring-blue-500:focus { box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.35) !important; } /* ───────────────────────────────────────────────────────────────────────── Appointments page (templates/dashboard/appointments.html) ───────────────────────────────────────────────────────────────────────── Unlike the dashboard/index.html which uses Tailwind utility classes, the appointments page embeds an iOS-style stylesheet at the top of the template and sprinkles inline `style="..."` attributes throughout the markup. The hard-coded hex colors (#1d1d1f, #86868b, #f5f5f7, white, #e5e5e7, ...) did not respond to the theme toggle at all and the page stayed in a permanent light state. The block below remaps the page-wide surface tokens, all the static .stat-card / .status-badge / .tab-btn / .search-input / .slot-btn / .modal-* classes, and the most common inline-style patterns (background: white / #f5f5f7, color: #1d1d1f / #86868b, border: 1px solid #e5e5e7, etc.) so the page reads native in BOTH themes. Inline-style overrides use the `[style*="..."]` attribute selector pattern. They're slightly fragile (they require the source attribute to be present verbatim) but they're the cleanest way to override inline styles without forking the template. */ .appointments-container { background: var(--bg-page); } .appointments-container .page-title, .appointments-container .form-label, .appointments-container .modal-title, .appointments-container .form-input { color: var(--text-primary); } /* Page header / user profile (icon-btn, user-profile) */ .appointments-container .icon-btn { background: var(--bg-surface); border-color: var(--border); color: var(--text-muted); } .appointments-container .icon-btn:hover { background: var(--bg-subtle); border-color: var(--border-strong); color: var(--text-primary); } .appointments-container .user-profile { background: var(--bg-surface); border-color: var(--border); } .appointments-container .user-profile:hover { border-color: var(--border-strong); box-shadow: 0 2px 8px var(--shadow-color); } .appointments-container .user-name { color: var(--text-primary); } .appointments-container .user-role { color: var(--text-muted); } .appointments-container .stat-card, .appointments-container .tabs-container { background: var(--bg-surface); border-color: var(--border); } .appointments-container .stat-card:hover { box-shadow: 0 4px 16px var(--shadow-color); } /* Tabs header + filters + tab buttons */ .appointments-container .tabs-header { border-bottom-color: var(--border); } .appointments-container .tab-btn { color: var(--text-muted); } .appointments-container .tab-btn.active { color: var(--accent-fg); border-bottom-color: var(--accent); } .appointments-container .filters-section { border-bottom-color: var(--border); } .appointments-container .search-input { background: var(--bg-subtle); border-color: var(--border); color: var(--text-primary); } .appointments-container .search-input:focus { background: var(--bg-surface); border-color: var(--accent); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18); } .appointments-container .search-icon { color: var(--text-muted); } .appointments-container .date-filter { background: var(--bg-surface); border-color: var(--border); color: var(--text-primary); } .appointments-container .date-filter:hover { border-color: var(--border-strong); background: var(--bg-subtle); } .appointments-container .export-btn { background: var(--accent); color: #ffffff; } .appointments-container .export-btn:hover { background: var(--accent-strong); box-shadow: 0 4px 12px rgba(99, 102, 241, 0.40); } /* The second "چاپ لیست" export button overrides its base .export-btn background to white with a purple border — make it theme-aware. */ .appointments-container .export-btn[style*="background: white"], .appointments-container .export-btn[style*="background:white"] { background: var(--bg-surface) !important; color: var(--accent-fg) !important; border: 1px solid var(--accent-soft) !important; } /* Appointments table — header / rows / cells */ .appointments-container .appointments-table thead th { color: var(--text-muted); background: var(--bg-subtle); border-bottom-color: var(--border); } .appointments-container .appointments-table tbody tr { border-bottom-color: var(--border-subtle); } .appointments-container .appointments-table tbody tr:hover { background: var(--bg-subtle); } .appointments-container .appointments-table tbody td { color: var(--text-primary); } .appointments-container .patient-name { color: var(--text-primary); } /* Status badge palette — the page defines its own .status-scheduled / .status-confirmed / .status-in_progress / .status-completed / .status-cancelled / .status-no_show with light pastel backgrounds. */ [data-theme="dark"] .appointments-container .status-scheduled { background: rgba(245, 158, 11, 0.18) !important; color: #fcd34d !important; } [data-theme="dark"] .appointments-container .status-confirmed { background: rgba(59, 130, 246, 0.18) !important; color: #93c5fd !important; } [data-theme="dark"] .appointments-container .status-in_progress { background: rgba(139, 92, 246, 0.18) !important; color: #c4b5fd !important; } [data-theme="dark"] .appointments-container .status-completed { background: rgba(16, 185, 129, 0.18) !important; color: #6ee7b7 !important; } [data-theme="dark"] .appointments-container .status-cancelled { background: rgba(239, 68, 68, 0.18) !important; color: #fca5a5 !important; } [data-theme="dark"] .appointments-container .status-no_show { background: rgba(107, 114, 128, 0.22) !important; color: #d1d5db !important; } /* Action buttons — colored icons that are pinned inline as `style="color: ..."` */ .appointments-container .action-btn { color: var(--text-muted); } .appointments-container .action-btn:hover { background: var(--bg-subtle); color: var(--text-primary); } .appointments-container .action-btn[style*="color: #34c759"], .appointments-container .action-btn[style*="color:#34c759"] { color: #34c759 !important; } .appointments-container .action-btn[style*="color: #7c3aed"], .appointments-container .action-btn[style*="color:#7c3aed"] { color: #a78bfa !important; } .appointments-container .action-btn[style*="color: #5856d6"], .appointments-container .action-btn[style*="color:#5856d6"] { color: #a5b4fc !important; } .appointments-container .action-btn[style*="color: #0ea5e9"], .appointments-container .action-btn[style*="color:#0ea5e9"] { color: #38bdf8 !important; } .appointments-container .action-btn[style*="color: #6b7280"], .appointments-container .action-btn[style*="color:#6b7280"] { color: #9ca3af !important; } .appointments-container .action-btn[style*="color: #ff3b30"], .appointments-container .action-btn[style*="color:#ff3b30"] { color: #f87171 !important; } /* Pagination strip */ .appointments-container [style*="border-top: 1px solid #e5e5e7"]:not([style*="background"]) { border-top-color: var(--border) !important; } /* Empty state */ .appointments-container [style*="background: #f5f5f7"] { background: var(--bg-subtle) !important; } .appointments-container [style*="color: #86868b"] { color: var(--text-muted) !important; } .appointments-container [style*="color: #1d1d1f"] { color: var(--text-primary) !important; } .appointments-container [style*="color: #6e6e73"] { color: var(--text-secondary) !important; } .appointments-container [style*="border: 1px solid #e5e5e7"] { border-color: var(--border) !important; } .appointments-container [style*="border: 1px solid #f5f5f7"] { border-color: var(--border-subtle) !important; } .appointments-container [style*="background: white"] { background: var(--bg-surface) !important; } .appointments-container [style*="background: #fafafa"] { background: var(--bg-subtle) !important; } .appointments-container [style*="background: #fafafa"]:not([class]) { background: var(--bg-subtle) !important; } /* Inline purple-tinted "selected slot info" + "service summary" card */ .appointments-container [style*="background: #f0f0ff"] { background: rgba(99, 102, 241, 0.16) !important; border-color: rgba(99, 102, 241, 0.40) !important; } .appointments-container [style*="color: #5856d6"] { color: var(--accent-fg) !important; } .appointments-container [style*="border: 1px solid #c7c7ff"] { border-color: rgba(99, 102, 241, 0.40) !important; } /* Selected/active date filter button (when any date filter is on) */ .appointments-container [style*="border-color: #5856d6"][style*="background: #f0f0ff"] { border-color: var(--accent) !important; color: var(--accent-fg) !important; background: rgba(99, 102, 241, 0.16) !important; } /* "Filter active range" pill inside the date dropdown */ .appointments-container [style*="background: #f0f0ff"][style*="color: #5856d6"] { background: rgba(99, 102, 241, 0.18) !important; color: var(--accent-fg) !important; } /* "Delete filter" red button (uses #ffebee / #ffcdd2 / #c62828 trio) */ .appointments-container [style*="background: #ffebee"] { background: rgba(239, 68, 68, 0.18) !important; } .appointments-container [style*="border: 1px solid #ffcdd2"] { border-color: rgba(239, 68, 68, 0.40) !important; } .appointments-container [style*="color: #c62828"] { color: #fca5a5 !important; } /* Stat-card highlight ring (when a filter is active) */ .appointments-container [style*="border-color: #5856d6"][style*="box-shadow: 0 0 0 3px rgba(88,86,214"] { border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18) !important; } .appointments-container [style*="border-color: #f59e0b"][style*="rgba(245,158,11"] { border-color: #f59e0b !important; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18) !important; } .appointments-container [style*="border-color: #3b82f6"][style*="rgba(59,130,246"] { border-color: #3b82f6 !important; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18) !important; } .appointments-container [style*="border-color: #10b981"][style*="rgba(16,185,129"] { border-color: #10b981 !important; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18) !important; } .appointments-container [style*="border-color: #ef4444"][style*="rgba(239,68,68"] { border-color: #ef4444 !important; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18) !important; } /* Form input / form-group */ .appointments-container .form-group { color: var(--text-primary); } .appointments-container .form-input { background: var(--bg-surface); border-color: var(--border); color: var(--text-primary); } .appointments-container .form-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18); } .appointments-container .form-input::placeholder { color: var(--text-muted); } .appointments-container .form-input[style*="background: #fafafa"] { background: var(--bg-subtle) !important; } .appointments-container select.form-input { color: var(--text-primary); } /* Modal overlay + content (backdrop blur stays — it's universal) */ .appointments-container .modal-content { background: var(--bg-surface); } .appointments-container .modal-header { border-bottom-color: var(--border); } .appointments-container .modal-title { color: var(--text-primary); } .appointments-container .modal-close { background: var(--bg-subtle); color: var(--text-muted); } .appointments-container .modal-close:hover { background: var(--bg-muted); color: var(--text-primary); } .appointments-container .modal-footer { border-top-color: var(--border); } .appointments-container .modal-body [style*="background: #f5f5f7"] { background: var(--bg-subtle) !important; } /* Patient/Doctor "selected" confirmation pill (green) */ .appointments-container [style*="background: #e8f5e9"] { background: rgba(16, 185, 129, 0.18) !important; } .appointments-container [style*="border: 1px solid #c8e6c9"] { border-color: rgba(16, 185, 129, 0.40) !important; } .appointments-container [style*="color: #2e7d32"] { color: #6ee7b7 !important; } /* "Notes" callout in detail modal (yellow) */ .appointments-container [style*="background: #fffbeb"] { background: rgba(245, 158, 11, 0.14) !important; } .appointments-container [style*="border: 1px solid #fde68a"] { border-color: rgba(245, 158, 11, 0.40) !important; } .appointments-container [style*="color: #92400e"] { color: #fcd34d !important; } .appointments-container [style*="color: #78350f"] { color: #fde68a !important; } /* "Service summary" card (purple) — already covered above */ /* "Slot empty" (orange) */ .appointments-container .slot-empty { color: var(--text-muted); } .appointments-container [style*="background: #fff8f0"] { background: rgba(249, 115, 22, 0.14) !important; } .appointments-container [style*="border: 1px solid #fed7aa"] { border-color: rgba(249, 115, 22, 0.40) !important; } .appointments-container [style*="color: #c2410c"] { color: #fdba74 !important; } /* "New" badge inside the appointment ID cell */ .appointments-container [style*="background: #e3f2fd"] { background: rgba(59, 130, 246, 0.18) !important; } .appointments-container [style*="color: #1976d2"] { color: #93c5fd !important; } /* Price text in detail modal (green) */ .appointments-container [style*="color: #059669"] { color: #6ee7b7 !important; } /* Slot picker buttons */ .appointments-container .slot-btn { background: var(--bg-surface); border-color: var(--border); color: var(--text-primary); } .appointments-container .slot-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-fg); background: rgba(99, 102, 241, 0.10); } .appointments-container .slot-btn.selected { background: var(--accent); color: #ffffff; border-color: var(--accent); } .appointments-container .slot-btn.booked { background: rgba(239, 68, 68, 0.10); border-color: rgba(239, 68, 68, 0.40); color: #fca5a5; } .appointments-container .slot-btn.past { background: var(--bg-subtle); border-color: var(--border); color: var(--text-faint); } .appointments-container .slot-btn.blocked { background: rgba(249, 115, 22, 0.10); border-color: rgba(249, 115, 22, 0.40); color: #fdba74; } .appointments-container .slot-loading, .appointments-container .slot-empty { color: var(--text-muted); } /* Legend swatches inside the slot picker */ .appointments-container [style*="background: white"][style*="border: 1.5px solid #e5e5e7"] { background: var(--bg-surface) !important; border-color: var(--border) !important; } .appointments-container [style*="background: #fff5f5"][style*="border: 1.5px solid #fecaca"] { background: rgba(239, 68, 68, 0.18) !important; border-color: rgba(239, 68, 68, 0.40) !important; } .appointments-container [style*="background: #f5f5f7"][style*="border: 1.5px solid"]:not([style*="color"]) { background: var(--bg-subtle) !important; } /* Detail modal "danger" cancel button (light red) */ .appointments-container [style*="background: #fee2e2"] { background: rgba(239, 68, 68, 0.18) !important; } .appointments-container [style*="color: #dc2626"] { color: #fca5a5 !important; } /* Detail modal "no show" button (light gray) */ .appointments-container [style*="background: #f3f4f6"] { background: var(--bg-subtle) !important; } .appointments-container [style*="color: #4b5563"] { color: var(--text-muted) !important; } /* Datepicker inline backdrop */ .appointments-container [style*="background: rgba(0, 0, 0, 0.5)"] { background: rgba(0, 0, 0, 0.70) !important; } /* Confirm-modal colored top bar + green/red/blue action buttons keep their brand color in dark mode (they're saturated gradients that read fine on a dark page). */ /* Loading spinner border */ .appointments-container [style*="border: 3px solid #e5e5e7"] { border-color: var(--border) !important; } /* Force the ::-webkit-scrollbar styles to follow the theme */ .appointments-container ::-webkit-scrollbar-track { background: var(--bg-subtle); } .appointments-container ::-webkit-scrollbar-thumb { background: var(--border-strong); } .appointments-container ::-webkit-scrollbar-thumb:hover { background: var(--text-faint); } /* Persian DatePicker (jQuery plugin) — its dropdown uses jQuery-set inline styles so [style*=...] is unreliable; instead we override the main class hooks with theme variables. */ .datepicker-plot-area { background: var(--bg-surface) !important; color: var(--text-primary) !important; border-color: var(--border) !important; } .datepicker-plot-area .datepicker-day-view td { color: var(--text-primary) !important; } .datepicker-plot-area .datepicker-day-view th { color: var(--text-muted) !important; } .datepicker-plot-area .datepicker-days, .datepicker-plot-area .datepicker-months, .datepicker-plot-area .datepicker-years { background: var(--bg-surface) !important; } .datepicker-plot-area .table-striped > tbody > tr:nth-of-type(odd) { background: var(--bg-subtle) !important; } .datepicker-plot-area .datepicker-header { background: var(--bg-muted) !important; color: var(--text-primary) !important; } .datepicker-plot-area .datepicker-title { color: var(--text-primary) !important; } /* ───────────────────────────────────────────────────────────────────────── Dashboard sub-pages: patients, doctors, finance ───────────────────────────────────────────────────────────────────────── All three of these pages use the same embedded iOS-style stylesheet pattern as the appointments page, but each with its own container class (.pt-container / .doctors-container / .fin-container). They share the same internal vocabulary (stat-card, tabs-container, search-input, tab-btn, modal-*, form-input, .btn-*, status-badge, .b-*, action-btn, mr-card, mr-card., cards-grid, doctor-card, totals-box, items-table, report-card, view-toggle, …) so we cover them with a single comma-separated selector set. The block below is organised top-down by visual concern: page chrome → stat cards → tabs / filters / search → table → cards → status badges → action buttons → empty / loading / toast → modal → form → button utility classes. The inline-style `[style*="..."]` overrides at the bottom catch the same patterns the appointments page emits (white, #f5f5f7, #fafafa, #1d1d1f, #86868b, #5856d6, border 1px solid #e5e5e7, …). */ /* Page chrome */ .pt-container, .doctors-container, .fin-container { background: var(--bg-page); } .pt-container .page-title, .doctors-container .page-title, .fin-container .fin-title, .pt-container .page-header, .doctors-container .page-header, .fin-container .fin-header { color: inherit; } .pt-container .user-profile, .doctors-container .user-profile { background: var(--bg-surface); border-color: var(--border); } .pt-container .user-profile:hover, .doctors-container .user-profile:hover { border-color: var(--border-strong); box-shadow: 0 2px 8px var(--shadow-color); } .pt-container .user-name, .doctors-container .user-name { color: var(--text-primary); } .pt-container .user-role, .doctors-container .user-role { color: var(--text-muted); } /* Stat cards (all 3 pages use the same .stat-card / .stat-icon / .stat-label / .stat-value / .stat-desc class set) */ .pt-container .stat-card, .doctors-container .stat-card, .fin-container .stat-card { background: var(--bg-surface); border-color: var(--border); } .pt-container .stat-card:hover, .doctors-container .stat-card:hover, .fin-container .stat-card:hover { box-shadow: 0 4px 16px var(--shadow-color); } .pt-container .stat-icon, .doctors-container .stat-icon, .fin-container .stat-icon { background: var(--bg-subtle); color: var(--accent-fg); } .pt-container .stat-label, .doctors-container .stat-label, .fin-container .stat-label, .pt-container .stat-desc, .doctors-container .stat-desc, .fin-container .stat-desc { color: var(--text-muted); } .pt-container .stat-value, .doctors-container .stat-value, .fin-container .stat-value { color: var(--text-primary); } /* Tabs / filters / search / view-toggle */ .pt-container .tabs-container, .doctors-container .tabs-container, .fin-container .tabs-card { background: var(--bg-surface); border-color: var(--border); } .pt-container .tabs-header, .doctors-container .tabs-header, .fin-container .tab-bar { border-bottom-color: var(--border); } .pt-container .tab-btn, .doctors-container .tab-btn, .fin-container .tab-btn { color: var(--text-muted); } .pt-container .tab-btn.active, .doctors-container .tab-btn.active, .fin-container .tab-btn.active { color: var(--accent-fg); border-bottom-color: var(--accent); } .pt-container .tab-btn .badge, .fin-container .tab-btn .badge { background: var(--accent-soft); color: var(--accent-fg); } .pt-container .view-toggle, .doctors-container .view-toggle { background: var(--bg-subtle); } .pt-container .view-toggle-btn, .doctors-container .view-toggle-btn { color: var(--text-muted); background: transparent; } .pt-container .view-toggle-btn.active, .doctors-container .view-toggle-btn.active { background: var(--bg-surface); color: var(--accent-fg); box-shadow: 0 1px 3px var(--shadow-color); } .pt-container .filters-section, .doctors-container .filters-section, .fin-container .filters-row { border-bottom-color: var(--border); } .pt-container .search-input, .doctors-container .search-input, .fin-container .search-input { background: var(--bg-subtle); border-color: var(--border); color: var(--text-primary); } .pt-container .search-input:focus, .doctors-container .search-input:focus, .fin-container .search-input:focus { background: var(--bg-surface); border-color: var(--accent); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18); } .pt-container .search-input::placeholder, .doctors-container .search-input::placeholder, .fin-container .search-input::placeholder { color: var(--text-muted); } .pt-container .search-icon, .doctors-container .search-icon { color: var(--text-muted); } .pt-container .filter-select, .doctors-container .filter-select { background: var(--bg-surface); border-color: var(--border); color: var(--text-primary); } .pt-container .filter-select:hover, .doctors-container .filter-select:hover { border-color: var(--border-strong); } .pt-container .filter-select:focus, .doctors-container .filter-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18); } /* Action buttons (.add-btn in patients, .export-btn / .print-btn in doctors, .btn in finance). The "second export" style override (white bg, purple text) is handled by the same selector set as the appointments page. */ .pt-container .add-btn, .doctors-container .export-btn, .fin-container .btn-primary { background: var(--accent); color: #ffffff; } .pt-container .add-btn:hover, .doctors-container .export-btn:hover, .fin-container .btn-primary:hover { background: var(--accent-strong); box-shadow: 0 4px 12px rgba(99, 102, 241, 0.40); } .pt-container .add-btn[style*="background: white"], .pt-container .add-btn[style*="background:white"], .doctors-container .export-btn[style*="background: white"], .doctors-container .export-btn[style*="background:white"] { background: var(--bg-surface) !important; color: var(--accent-fg) !important; border: 1px solid var(--accent-soft) !important; } .doctors-container .print-btn { background: var(--bg-surface) !important; color: var(--accent-fg) !important; border: 1px solid var(--accent-soft) !important; } .doctors-container .print-btn:hover { background: var(--accent-soft) !important; border-color: var(--accent) !important; } /* Tables (3 page-specific class names, same anatomy) */ .pt-container .pt-table thead th, .doctors-container .doctors-table thead th, .fin-container .fin-table thead th { color: var(--text-muted); background: var(--bg-subtle); border-bottom-color: var(--border); } .pt-container .pt-table tbody tr, .doctors-container .doctors-table tbody tr, .fin-container .fin-table tbody tr { border-bottom-color: var(--border-subtle); } .pt-container .pt-table tbody tr:hover, .doctors-container .doctors-table tbody tr:hover, .fin-container .fin-table tbody tr:hover { background: var(--bg-subtle); } .pt-container .pt-table tbody td, .doctors-container .doctors-table tbody td, .fin-container .fin-table tbody td { color: var(--text-primary); } .pt-container .patient-name, .doctors-container .doctor-name { color: var(--text-primary); } .doctors-container .doctor-specialty { color: var(--text-muted); } .doctors-container .doctor-card { background: var(--bg-surface); border-color: var(--border); } .doctors-container .doctor-card:hover { box-shadow: 0 4px 16px var(--shadow-color); border-color: var(--accent-soft); } .doctors-container .doctor-card-name { color: var(--text-primary); } .doctors-container .doctor-card-specialty { color: var(--accent-fg); } .doctors-container .doctor-card-details { color: var(--text-secondary); border-top-color: var(--border-subtle); } .doctors-container .doctor-card-details i { color: var(--text-muted); } .doctors-container .doctor-card-actions { border-top-color: var(--border-subtle); } /* Status badges — patients/doctors define their own .status-{name}, finance uses the .b-{name} family. We remap both. */ [data-theme="dark"] .pt-container .status-active, [data-theme="dark"] .doctors-container .status-active { background: rgba(16, 185, 129, 0.18) !important; color: #6ee7b7 !important; } [data-theme="dark"] .pt-container .status-inactive, [data-theme="dark"] .doctors-container .status-inactive { background: rgba(239, 68, 68, 0.18) !important; color: #fca5a5 !important; } [data-theme="dark"] .pt-container .status-archived { background: rgba(107, 114, 128, 0.22) !important; color: #d1d5db !important; } [data-theme="dark"] .doctors-container .status-on_leave { background: rgba(245, 158, 11, 0.18) !important; color: #fcd34d !important; } [data-theme="dark"] .fin-container .b-draft { background: rgba(107, 114, 128, 0.22) !important; color: #d1d5db !important; } [data-theme="dark"] .fin-container .b-issued { background: rgba(59, 130, 246, 0.18) !important; color: #93c5fd !important; } [data-theme="dark"] .fin-container .b-partially_paid { background: rgba(245, 158, 11, 0.18) !important; color: #fcd34d !important; } [data-theme="dark"] .fin-container .b-paid { background: rgba(16, 185, 129, 0.18) !important; color: #6ee7b7 !important; } [data-theme="dark"] .fin-container .b-cancelled { background: rgba(239, 68, 68, 0.18) !important; color: #fca5a5 !important; } [data-theme="dark"] .fin-container .b-overdue { background: rgba(245, 158, 11, 0.18) !important; color: #fcd34d !important; } [data-theme="dark"] .fin-container .b-pending { background: rgba(245, 158, 11, 0.18) !important; color: #fcd34d !important; } [data-theme="dark"] .fin-container .b-approved { background: rgba(59, 130, 246, 0.18) !important; color: #93c5fd !important; } [data-theme="dark"] .fin-container .b-rejected { background: rgba(239, 68, 68, 0.18) !important; color: #fca5a5 !important; } [data-theme="dark"] .fin-container .b-processed { background: rgba(16, 185, 129, 0.18) !important; color: #6ee7b7 !important; } /* Light mode: keep the original 100/800 swatches for status badges (they already pass WCAG AA on a white surface) */ /* Action buttons */ .pt-container .action-btn, .doctors-container .action-btn, .fin-container .action-btn { color: var(--text-muted); } .pt-container .action-btn:hover, .doctors-container .action-btn:hover, .fin-container .action-btn:hover { background: var(--bg-subtle); color: var(--text-primary); } .doctors-container .action-btn.danger:hover { background: rgba(239, 68, 68, 0.18); color: #fca5a5; } .fin-container .action-btn.danger:hover { background: rgba(239, 68, 68, 0.18); color: #fca5a5; } /* Inline action button colors that come from :style bindings (color: #5856d6 / #10b981 / #0ea5e9 / #f59e0b) */ .pt-container .action-btn[style*="color: #5856d6"], .pt-container .action-btn[style*="color:#5856d6"] { color: #a5b4fc !important; } .pt-container .action-btn[style*="color: #10b981"], .pt-container .action-btn[style*="color:#10b981"] { color: #6ee7b7 !important; } .pt-container .action-btn[style*="color: #0ea5e9"], .pt-container .action-btn[style*="color:#0ea5e9"] { color: #7dd3fc !important; } .doctors-container .action-btn[style*="color: #5856d6"], .doctors-container .action-btn[style*="color:#5856d6"] { color: #a5b4fc !important; } .doctors-container .action-btn[style*="color: #dc2626"], .doctors-container .action-btn[style*="color:#dc2626"] { color: #fca5a5 !important; } .doctors-container .action-btn[style*="color: #10b981"], .doctors-container .action-btn[style*="color:#10b981"] { color: #6ee7b7 !important; } .doctors-container .action-btn[style*="color: #f59e0b"], .doctors-container .action-btn[style*="color:#f59e0b"] { color: #fcd34d !important; } /* Empty / loading / toast */ .pt-container .empty-state, .doctors-container .empty-state, .fin-container .empty-state { color: var(--text-muted); } .pt-container .empty-state .title, .doctors-container .empty-state .title, .fin-container .empty-state .title { color: var(--text-secondary); } .pt-container .empty-state .subtitle, .doctors-container .empty-state .subtitle, .fin-container .empty-state .subtitle { color: var(--text-muted); } .pt-container .empty-state i, .doctors-container .empty-state i, .fin-container .empty-state i { color: var(--text-faint); } .pt-container .spinner, .doctors-container .spinner, .fin-container .spinner { border-color: var(--border) !important; border-top-color: var(--accent) !important; } /* The toast gradients (#10b981 → #059669, #ef4444 → #dc2626, #3b82f6 → #2563eb, #34c759 → #30d158, #ff3b30 → #ff453a) are saturated and read correctly on the dark page, so we leave them alone. */ /* Modal (shared overlay / content / header pattern) */ .pt-container .modal-overlay, .doctors-container .modal-overlay, .fin-container .modal-overlay { background: rgba(0, 0, 0, 0.70); } .pt-container .modal-content, .doctors-container .modal-content, .fin-container .modal-content { background: var(--bg-surface); } /* Doctors — schedule preview modal */ .doctors-container .schedule-modal-content { background: var(--bg-surface); box-shadow: 0 20px 60px var(--shadow-color); } .doctors-container .day-tile { background: var(--bg-subtle); border-color: var(--border); } .doctors-container .day-tile.has-shifts { background: var(--accent-soft); border-color: var(--accent); } .doctors-container .day-tile.is-off { background: var(--bg-muted); } .doctors-container .day-tile-name { color: var(--text-primary); } .doctors-container .day-tile-shift { color: var(--accent-fg); background: var(--bg-surface); border-color: var(--border); } .doctors-container .day-tile-off { color: var(--text-faint); } .doctors-container .pagination { border-top-color: var(--border); } .doctors-container .pagination-info { color: var(--text-muted); } .doctors-container .page-btn { background: var(--bg-surface); border-color: var(--border); color: var(--text-primary); } .doctors-container .page-btn:hover:not(:disabled) { background: var(--bg-subtle); border-color: var(--border-strong); } .doctors-container .page-btn.active { background: var(--accent); color: #ffffff; border-color: var(--accent); } .pt-container .modal-header, .doctors-container .modal-header, .fin-container .modal-header { border-bottom-color: var(--border); } .pt-container .modal-title, .doctors-container .modal-title, .fin-container .modal-title { color: var(--text-primary); } .pt-container .modal-close, .doctors-container .modal-close, .fin-container .modal-close { background: var(--bg-subtle); color: var(--text-muted); } .pt-container .modal-close:hover, .doctors-container .modal-close:hover, .fin-container .modal-close:hover { background: var(--bg-muted); color: var(--text-primary); } .fin-container .modal-footer { background: var(--bg-subtle); border-top-color: var(--border); } /* The two .modal-header gradients in the three pages (linear-gradient 135deg, #5856d6,#4745b8 in doctors/finance and #5856d6,#7c3aed in patients detail) are brand-tinted and read fine on dark, so they stay. */ /* Forms */ .pt-container .form-row, .doctors-container .form-row, .fin-container .form-row, .pt-container .form-group, .doctors-container .form-group, .fin-container .form-group { color: var(--text-primary); } .pt-container .form-group label, .doctors-container .form-label, .fin-container .form-group label { color: var(--text-primary); } .pt-container .form-input, .doctors-container .form-input, .fin-container .form-input { background: var(--bg-surface); border-color: var(--border); color: var(--text-primary); } .pt-container .form-input:focus, .doctors-container .form-input:focus, .fin-container .form-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18); } .pt-container .form-input::placeholder, .doctors-container .form-input::placeholder, .fin-container .form-input::placeholder { color: var(--text-muted); } .fin-container .form-input:disabled { background: var(--bg-subtle); } /* Button utility classes (finance + patients) */ .fin-container .btn-secondary { background: var(--bg-subtle); color: var(--text-primary); } .fin-container .btn-secondary:hover { background: var(--bg-muted); } .fin-container .btn-danger { background: rgba(239, 68, 68, 0.18) !important; color: #fca5a5 !important; } .fin-container .btn-danger:hover { background: rgba(239, 68, 68, 0.28) !important; } .pt-container .btn-secondary { background: var(--bg-subtle); color: var(--text-primary); } .pt-container .btn-secondary:hover { background: var(--bg-muted); } .pt-container .btn-danger { background: rgba(239, 68, 68, 0.18) !important; color: #fca5a5 !important; } .pt-container .btn-danger:hover { background: rgba(239, 68, 68, 0.28) !important; } .pt-container .btn-primary { background: var(--accent) !important; color: #ffffff !important; } .pt-container .btn-primary:hover { background: var(--accent-strong) !important; } /* Medical Record Cards (used in the patients detail modal) */ .pt-container .mr-card { background: var(--bg-subtle); border-right-color: var(--accent); } .pt-container .tabs-row { background: var(--bg-subtle); border-bottom-color: var(--border); } .pt-container .pt-plan-card { background: var(--accent-soft); border-color: var(--accent); } .pt-container .pt-plan-card:hover { background: var(--bg-muted); } .pt-container [style*="color: #ff3b30"], .pt-container [style*="color:#ff3b30"] { color: var(--danger) !important; } .pt-container .mr-card.examination { border-right-color: #3b82f6; } .pt-container .mr-card.treatment { border-right-color: #10b981; } .pt-container .mr-card.diagnosis { border-right-color: #f59e0b; } .pt-container .mr-card.surgery { border-right-color: #ef4444; } .pt-container .mr-card.followup { border-right-color: #8b5cf6; } .pt-container .mr-card [style*="background: white"], .pt-container .mr-card [style*="background:white"] { background: var(--bg-surface) !important; color: var(--accent-fg) !important; } /* Patients page — "چاپ پرونده" / "نمودار دندان" / "بستن" inline buttons in the detail modal footer, and the doctor-card "selected" filter ring on the stats cards. */ .pt-container [style*="background: #f0f0ff"] { background: rgba(99, 102, 241, 0.16) !important; } .pt-container [style*="border: 1px solid #c7c7ff"] { border-color: rgba(99, 102, 241, 0.40) !important; } .pt-container [style*="background: #e0f2fe"] { background: rgba(56, 189, 248, 0.18) !important; } .pt-container [style*="border: 1px solid #bae6fd"] { border-color: rgba(56, 189, 248, 0.40) !important; } .pt-container [style*="color: #0369a1"] { color: #7dd3fc !important; } .pt-container [style*="background: #f5f3ff"] { background: rgba(99, 102, 241, 0.14) !important; } .pt-container [style*="border: 1px solid #ddd6fe"] { border-color: rgba(99, 102, 241, 0.30) !important; } .pt-container [style*="color: #4c1d95"] { color: #c4b5fd !important; } .pt-container [style*="color: #6b21a8"] { color: #c4b5fd !important; } .pt-container [style*="background: #ddd6fe"] { background: rgba(99, 102, 241, 0.30) !important; } .pt-container [style*="color: #5856d6"]:not(.action-btn) { color: var(--accent-fg) !important; } .pt-container [style*="background: #ede9fe"] { background: var(--accent-soft) !important; } /* Highlight rings on the patients stat cards (one per status) */ .pt-container [style*="border-color: #5856d6"][style*="rgba(88,86,214,0.1)"] { border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18) !important; } .pt-container [style*="border-color: #10b981"][style*="rgba(16,185,129,0.1)"] { border-color: #10b981 !important; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18) !important; } .pt-container [style*="border-color: #ef4444"][style*="rgba(239,68,68,0.1)"] { border-color: #ef4444 !important; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18) !important; } .pt-container [style*="border-color: #6b7280"][style*="rgba(107,114,128,0.1)"] { border-color: #6b7280 !important; box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.18) !important; } /* Treatment plan status badges (.plan-badge-{status} rendered dynamically via getPlanStatusStyle). The page binds an inline style with the original hex color which we remap here. */ .pt-container [style*="background: #f3f4f6"][style*="color: #374151"] { background: rgba(107, 114, 128, 0.22) !important; color: #d1d5db !important; } .pt-container [style*="background: #fef3c7"][style*="color: #b45309"] { background: rgba(245, 158, 11, 0.18) !important; color: #fcd34d !important; } .pt-container [style*="background: #dbeafe"][style*="color: #1e40af"] { background: rgba(59, 130, 246, 0.18) !important; color: #93c5fd !important; } .pt-container [style*="background: #ede9fe"][style*="color: #7c3aed"] { background: rgba(139, 92, 246, 0.18) !important; color: #c4b5fd !important; } .pt-container [style*="background: #d1fae5"][style*="color: #047857"] { background: rgba(16, 185, 129, 0.18) !important; color: #6ee7b7 !important; } .pt-container [style*="background: #fee2e2"][style*="color: #b91c1c"] { background: rgba(239, 68, 68, 0.18) !important; color: #fca5a5 !important; } /* Patient notes (yellow) + edit history (orange) + "confidential" lock (red) */ .pt-container [style*="background: #fffbeb"] { background: rgba(245, 158, 11, 0.14) !important; } .pt-container [style*="border: 1px solid #fde68a"] { border-color: rgba(245, 158, 11, 0.40) !important; } .pt-container [style*="color: #92400e"] { color: #fcd34d !important; } .pt-container [style*="color: #78350f"] { color: #fde68a !important; } .pt-container [style*="background: #fff8f0"] { background: rgba(249, 115, 22, 0.14) !important; } .pt-container [style*="border: 1px solid #fed7aa"] { border-color: rgba(249, 115, 22, 0.40) !important; } .pt-container [style*="color: #c2410c"] { color: #fdba74 !important; } .pt-container [style*="background: #fef3c7"] { background: rgba(245, 158, 11, 0.18) !important; } .pt-container [style*="color: #dc2626"]:not(.action-btn) { color: #fca5a5 !important; } .pt-container [style*="color: #059669"] { color: #6ee7b7 !important; } /* ─── Generic inline-style pattern overrides (shared by the 3 pages) ─── */ .pt-container [style*="background: #f5f5f7"], .doctors-container [style*="background: #f5f5f7"], .fin-container [style*="background: #f5f5f7"] { background: var(--bg-subtle) !important; } .pt-container [style*="background: #fafafa"], .doctors-container [style*="background: #fafafa"], .fin-container [style*="background: #fafafa"] { background: var(--bg-subtle) !important; } .pt-container [style*="background: white"], .doctors-container [style*="background: white"], .fin-container [style*="background: white"] { background: var(--bg-surface) !important; } .pt-container [style*="color: #1d1d1f"], .doctors-container [style*="color: #1d1d1f"], .fin-container [style*="color: #1d1d1f"] { color: var(--text-primary) !important; } .pt-container [style*="color: #86868b"], .doctors-container [style*="color: #86868b"], .fin-container [style*="color: #86868b"] { color: var(--text-muted) !important; } .pt-container [style*="color: #6e6e73"], .doctors-container [style*="color: #6e6e73"], .fin-container [style*="color: #6e6e73"] { color: var(--text-secondary) !important; } .pt-container [style*="color: #555"], .doctors-container [style*="color: #555"], .fin-container [style*="color: #555"] { color: var(--text-secondary) !important; } .pt-container [style*="color: #475569"], .doctors-container [style*="color: #475569"], .fin-container [style*="color: #475569"] { color: var(--text-secondary) !important; } .pt-container [style*="color: #64748b"], .doctors-container [style*="color: #64748b"], .fin-container [style*="color: #64748b"] { color: var(--text-muted) !important; } .pt-container [style*="border: 1px solid #e5e5e7"], .doctors-container [style*="border: 1px solid #e5e5e7"], .fin-container [style*="border: 1px solid #e5e5e7"] { border-color: var(--border) !important; } .pt-container [style*="border: 1px solid #f5f5f7"], .doctors-container [style*="border: 1px solid #f5f5f7"], .fin-container [style*="border: 1px solid #f5f5f7"] { border-color: var(--border-subtle) !important; } .pt-container [style*="border: 1px solid #d2d2d7"], .doctors-container [style*="border: 1px solid #d2d2d7"], .fin-container [style*="border: 1px solid #d2d2d7"] { border-color: var(--border-strong) !important; } .pt-container [style*="border-top: 1px solid #e5e5e7"], .doctors-container [style*="border-top: 1px solid #e5e5e7"], .fin-container [style*="border-top: 1px solid #e5e5e7"] { border-top-color: var(--border) !important; } .pt-container [style*="border: 1px solid #c7c7ff"], .doctors-container [style*="border: 1px solid #c7c7ff"], .fin-container [style*="border: 1px solid #c7c7ff"] { border-color: rgba(99, 102, 241, 0.40) !important; } .pt-container [style*="color: #d2d2d7"], .doctors-container [style*="color: #d2d2d7"], .fin-container [style*="color: #d2d2d7"] { color: var(--text-faint) !important; } .pt-container [style*="color: #5856d6"]:not(.action-btn), .doctors-container [style*="color: #5856d6"]:not(.action-btn), .fin-container [style*="color: #5856d6"]:not(.action-btn) { color: var(--accent-fg) !important; } .pt-container [style*="color: #b91c1c"], .doctors-container [style*="color: #b91c1c"], .fin-container [style*="color: #b91c1c"] { color: #fca5a5 !important; } .pt-container [style*="color: #b45309"], .doctors-container [style*="color: #b45309"], .fin-container [style*="color: #b45309"] { color: #fcd34d !important; } .pt-container [style*="color: #1e40af"], .doctors-container [style*="color: #1e40af"], .fin-container [style*="color: #1e40af"] { color: #93c5fd !important; } .pt-container [style*="color: #047857"], .doctors-container [style*="color: #047857"], .fin-container [style*="color: #047857"] { color: #6ee7b7 !important; } .pt-container [style*="color: #374151"], .doctors-container [style*="color: #374151"], .fin-container [style*="color: #374151"] { color: #d1d5db !important; } .pt-container [style*="background: #f8fafc"], .doctors-container [style*="background: #f8fafc"], .fin-container [style*="background: #f8fafc"] { background: var(--bg-subtle) !important; } .pt-container [style*="background: #edf2f7"], .doctors-container [style*="background: #edf2f7"], .fin-container [style*="background: #edf2f7"] { background: var(--bg-subtle) !important; } /* The required-asterisk * and lock-style indicators should stay red in both themes (`color: #ff3b30` / `color: #ef4444`). They are universal and don't need a dark-mode swap. */ /* ───────────────────────────────────────────────────────────────────────── Dashboard sub-pages: services, my_schedule, treatment_plans, reports, audit_logs, employee_management, settings ───────────────────────────────────────────────────────────────────────── The remaining 7 dashboard pages all follow the same iOS-style hard-coded colour pattern that the patients/doctors/finance block already remapped, but each with its own container prefix (.services-container / .ms-container / .tp-container / .rep-* / .al-* / .em-*). To keep this section manageable we cover them with a single comma-separated container set where the internal class names happen to be identical (stat-card, btn-*, search-input, modal-*, badge, b-*, action-badge, em-action-btn, em-page-btn, em-modal-*, …) and add page-specific blocks for the bits that diverge. */ /* Page chrome */ .services-container, .ms-container, .tp-container, .al-container, .em-container { background: var(--bg-page); } .services-container .page-title, .ms-container .page-title, .tp-container .tp-title, .al-container .al-title, .em-container .em-title { color: var(--text-primary); } .services-container .al-subtitle, .em-container .em-subtitle { color: var(--text-muted); } .services-container .cat-tab, .ms-container .day-card, .tp-container .tp-card, .al-container .al-card, .em-container .em-card, .services-container .main-card { background: var(--bg-surface); border-color: var(--border); } /* Services — category tabs + services table + buttons */ .services-container .cat-tab { color: var(--text-secondary); } .services-container .cat-tab:hover { border-color: var(--border-strong); background: var(--bg-subtle); } .services-container .cat-tab.active { color: #ffffff; } .services-container .cat-tab .badge { background: rgba(255, 255, 255, 0.25); color: #ffffff; } .services-container .svc-table thead th { color: var(--text-muted); background: var(--bg-subtle); border-bottom-color: var(--border); } .services-container .svc-table tbody tr { border-bottom-color: var(--border-subtle); } .services-container .svc-table tbody tr:hover { background: var(--bg-subtle); } .services-container .svc-table tbody td { color: var(--text-primary); } .services-container .code-badge { background: rgba(99, 102, 241, 0.18); color: var(--accent-fg); } .services-container .active-dot { background: var(--text-primary); } .services-container .action-btn { color: var(--text-muted); } .services-container .action-btn:hover { background: var(--bg-subtle); color: var(--text-primary); } .services-container .action-btn.del:hover { background: rgba(239, 68, 68, 0.18); color: #fca5a5; } .services-container .add-btn, .services-container .btn-primary { background: var(--accent); color: #ffffff; } .services-container .add-btn:hover, .services-container .btn-primary:hover { background: var(--accent-strong); } .services-container .btn-secondary { background: var(--bg-subtle); color: var(--text-primary); } .services-container .btn-secondary:hover { background: var(--bg-muted); } .services-container .btn-danger { background: rgba(239, 68, 68, 0.18); color: #fca5a5; } .services-container .btn-danger:hover { background: rgba(239, 68, 68, 0.28); } .services-container .modal-box { background: var(--bg-surface); box-shadow: 0 20px 60px var(--shadow-color); } .services-container .modal-head { border-bottom-color: var(--border); } .services-container .modal-head h3 { color: var(--text-primary); } .services-container .modal-foot { border-top-color: var(--border); } .services-container .form-group input, .services-container .form-group select, .services-container .form-group textarea { background: var(--bg-surface); border-color: var(--border); color: var(--text-primary); } .services-container .form-group input:focus, .services-container .form-group select:focus, .services-container .form-group textarea:focus { background: var(--bg-surface); border-color: var(--accent); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18); } /* My schedule — day cards, toggle switch, shift rows, save-bar */ .ms-container .card-title, .ms-container .day-name { color: var(--text-primary); } .ms-container .day-card.has-shifts { border-color: var(--accent); background: rgba(99, 102, 241, 0.10); } .ms-container .day-card.is-off { background: var(--bg-subtle); opacity: .85; } .ms-container .day-card.readonly .time-input { background: var(--bg-subtle); cursor: not-allowed; } .ms-container .toggle { background: var(--border-strong); } .ms-container .toggle.on { background: var(--accent); } .ms-container .toggle .knob { background: var(--bg-surface); box-shadow: 0 1px 3px var(--shadow-color); } .ms-container .time-input { border-color: var(--border); color: var(--text-primary); background: var(--bg-surface); } .ms-container .time-input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.18); } .ms-container .remove-shift { background: rgba(239, 68, 68, 0.18); color: #fca5a5; } .ms-container .remove-shift:hover { background: rgba(239, 68, 68, 0.28); } .ms-container .add-shift-btn { border-color: var(--border-strong); color: var(--text-muted); } .ms-container .add-shift-btn:hover { border-color: var(--accent); color: var(--accent-fg); background: rgba(99, 102, 241, 0.12); } .ms-container .copy-link { color: var(--accent-fg); } .ms-container .copy-link:hover { color: var(--accent); } .ms-container .save-bar { background: var(--bg-surface); border-color: var(--border); box-shadow: 0 8px 24px var(--shadow-color); } .ms-container .breadcrumb { color: var(--text-muted); } .ms-container .breadcrumb a { color: var(--accent-fg); } .ms-container .breadcrumb a:hover { color: var(--accent); } .ms-container .breadcrumb i { color: var(--text-faint); } .ms-container .readonly-banner { background: linear-gradient(135deg, rgba(245,158,11,0.18), rgba(245,158,11,0.28)); border-color: rgba(245, 158, 11, 0.40); color: #fcd34d; } .ms-container .readonly-banner i { color: #fcd34d; } .ms-container .readonly-banner code { background: rgba(255, 255, 255, 0.10); color: #fde68a; } /* Doctor search dropdown (rendered inside .ms-container) */ .ms-container [style*="background: #e8f5e9"] { background: rgba(16, 185, 129, 0.18) !important; } .ms-container [style*="border: 1px solid #c8e6c9"] { border-color: rgba(16, 185, 129, 0.40) !important; } .ms-container [style*="color: #2e7d32"] { color: #6ee7b7 !important; } .ms-container [style*="background: #fee2e2"] { background: rgba(239, 68, 68, 0.18) !important; } .ms-container [style*="color: #34c759"] { color: #6ee7b7 !important; } .ms-container [style*="background: #f0f0ff"] { background: rgba(99, 102, 241, 0.16) !important; } .ms-container [style*="border: 1px solid #cbd5e1"] { border-color: var(--border-strong) !important; } .ms-container [style*="color: #64748b"] { color: var(--text-muted) !important; } /* Treatment plans — stat cards, table, badges, summary box, items, modal */ .tp-container .stat-card.active { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18); } .tp-container .tp-card { background: var(--bg-surface); border-color: var(--border); } .tp-container .filters-row { border-bottom-color: var(--border-subtle); } .tp-container .search-input { background: var(--bg-subtle); border-color: var(--border); color: var(--text-primary); } .tp-container .search-input:focus { background: var(--bg-surface); border-color: var(--accent); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18); } .tp-container .btn-primary, .tp-container .btn-success, .tp-container .btn-warning { background: var(--accent); color: #ffffff; } .tp-container .btn-primary:hover { background: var(--accent-strong); } .tp-container .btn-success { background: #10b981 !important; } .tp-container .btn-success:hover { background: #059669 !important; } .tp-container .btn-warning { background: #f59e0b !important; } .tp-container .btn-warning:hover { background: #d97706 !important; } .tp-container .btn-secondary { background: var(--bg-subtle); color: var(--text-primary); } .tp-container .btn-secondary:hover { background: var(--bg-muted); } .tp-container .btn-danger { background: rgba(239, 68, 68, 0.18) !important; color: #fca5a5 !important; } .tp-container .btn-danger:hover { background: rgba(239, 68, 68, 0.28) !important; } .tp-container .tp-table thead th { color: var(--text-muted); background: var(--bg-subtle); border-bottom-color: var(--border); } .tp-container .tp-table tbody tr { border-bottom-color: var(--border-subtle); } .tp-container .tp-table tbody tr:hover { background: var(--bg-subtle); } .tp-container .tp-table tbody td { color: var(--text-primary); } .tp-container .badge { background: var(--bg-subtle); color: var(--text-secondary); } [data-theme="dark"] .tp-container .b-draft { background: rgba(107, 114, 128, 0.22) !important; color: #d1d5db !important; } [data-theme="dark"] .tp-container .b-proposed { background: rgba(245, 158, 11, 0.18) !important; color: #fcd34d !important; } [data-theme="dark"] .tp-container .b-approved { background: rgba(59, 130, 246, 0.18) !important; color: #93c5fd !important; } [data-theme="dark"] .tp-container .b-in_progress { background: rgba(139, 92, 246, 0.18) !important; color: #c4b5fd !important; } [data-theme="dark"] .tp-container .b-completed { background: rgba(16, 185, 129, 0.18) !important; color: #6ee7b7 !important; } [data-theme="dark"] .tp-container .b-cancelled { background: rgba(239, 68, 68, 0.18) !important; color: #fca5a5 !important; } [data-theme="dark"] .tp-container .b-pending { background: rgba(107, 114, 128, 0.22) !important; color: #d1d5db !important; } .tp-container .progress { background: var(--bg-muted); } .tp-container .progress-fill { background: linear-gradient(90deg, #10b981, #34d399); } .tp-container .summary-box { background: linear-gradient(135deg, rgba(99,102,241,0.18), rgba(99,102,241,0.10)); border-color: rgba(99, 102, 241, 0.30); } .tp-container .summary-cell { color: #c4b5fd; } .tp-container .summary-cell .value { color: #ddd6fe; } .tp-container .items-section-head h4 { color: var(--text-primary); } .tp-container .item-card { background: var(--bg-subtle); border-color: var(--border); } .tp-container .item-card:hover { background: var(--bg-surface); box-shadow: 0 2px 8px var(--shadow-color); } .tp-container .item-name { color: var(--text-primary); } .tp-container .item-code { color: var(--text-muted); } .tp-container .item-meta { color: var(--text-secondary); } .tp-container .tooth-chip { background: #0ea5e9; color: #ffffff; } .tp-container .empty { color: var(--text-muted); } .tp-container .empty i { color: var(--text-faint); } .tp-container .modal-content { background: var(--bg-surface); } .tp-container .modal-header { border-bottom-color: var(--border); background: linear-gradient(135deg, var(--accent), var(--accent-strong)); color: #ffffff; } .tp-container .modal-title { color: #ffffff; } .tp-container .modal-close { background: rgba(255, 255, 255, 0.20); color: #ffffff; } .tp-container .modal-close:hover { background: rgba(255, 255, 255, 0.35); } .tp-container .modal-body { background: var(--bg-surface); } .tp-container .modal-footer { background: var(--bg-subtle); border-top-color: var(--border); } .tp-container .form-group label { color: var(--text-primary); } .tp-container .form-group label .required { color: #ef4444; } .tp-container .form-input { background: var(--bg-surface); border-color: var(--border); color: var(--text-primary); } .tp-container .form-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18); } /* Reports — rep-card, rep-pill, rep-tab, rep-btn, rep-input, rep-table, rep-spinner, rep-empty, rep-progress, rep-icon-box (.rep-ic-*) */ .rep-card { background: var(--bg-surface); border-color: var(--border); } .rep-card:hover { box-shadow: 0 4px 16px var(--shadow-color); } .rep-stat-label { color: var(--text-muted); } .rep-stat-value { color: var(--text-primary); } .rep-section-title { color: var(--text-primary); } .rep-section-title i { color: var(--accent-fg); } .rep-pill-up { background: rgba(16, 185, 129, 0.18); color: #6ee7b7; } .rep-pill-down { background: rgba(239, 68, 68, 0.18); color: #fca5a5; } .rep-pill-flat { background: rgba(107, 114, 128, 0.22); color: #d1d5db; } .rep-tab-bar { border-bottom-color: var(--border-subtle); } .rep-tab { color: var(--text-muted); } .rep-tab:hover { color: var(--text-primary); } .rep-tab.active { color: var(--accent-fg); border-bottom-color: var(--accent); } .rep-btn { background: var(--bg-surface); color: var(--text-primary); border-color: var(--border); } .rep-btn:hover { background: var(--bg-subtle); } .rep-btn-primary { background: var(--accent); color: #ffffff; border-color: var(--accent); } .rep-btn-primary:hover { background: var(--accent-strong); } .rep-input, .rep-select { background: var(--bg-surface); border-color: var(--border); color: var(--text-primary); } .rep-input:focus, .rep-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18); } .rep-table thead th { color: var(--text-muted); background: var(--bg-subtle); border-bottom-color: var(--border); } .rep-table tbody td { color: var(--text-primary); border-bottom-color: var(--border-subtle); } .rep-table tbody tr:hover { background: var(--bg-subtle); } .rep-loading { color: var(--text-muted); } .rep-spinner { border-color: var(--border); border-top-color: var(--accent); } .rep-empty { color: var(--text-muted); } .rep-empty i { color: var(--text-faint); } .rep-progress { background: var(--bg-muted); } .rep-progress-bar { background: linear-gradient(90deg, var(--accent), #8b5cf6); } .rep-ic-blue { background: rgba(59, 130, 246, 0.18); color: #93c5fd; } .rep-ic-green { background: rgba(16, 185, 129, 0.18); color: #6ee7b7; } .rep-ic-purple { background: rgba(139, 92, 246, 0.18); color: #c4b5fd; } .rep-ic-orange { background: rgba(249, 115, 22, 0.18); color: #fdba74; } .rep-ic-pink { background: rgba(236, 72, 153, 0.18); color: #f9a8d4; } .rep-ic-red { background: rgba(239, 68, 68, 0.18); color: #fca5a5; } .rep-ic-cyan { background: rgba(34, 211, 238, 0.18); color: #67e8f9; } .rep-ic-gray { background: rgba(107, 114, 128, 0.22); color: #d1d5db; } /* Audit logs — al-card, al-table, action-badge, json-block, pagination */ .al-container .stat-card { background: var(--bg-surface); border-color: var(--border); } .al-container .stat-card.active { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18); } .al-container .filters-row { border-bottom-color: var(--border-subtle); } .al-container .filter-input, .al-container .filter-select { background: var(--bg-surface); border-color: var(--border); color: var(--text-primary); } .al-container .filter-input:focus, .al-container .filter-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18); } .al-container .search-input { background: var(--bg-subtle); border-color: var(--border); color: var(--text-primary); } .al-container .search-input:focus { background: var(--bg-surface); border-color: var(--accent); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18); } .al-container .btn-primary { background: var(--accent); color: #ffffff; } .al-container .btn-primary:hover { background: var(--accent-strong); } .al-container .btn-secondary { background: var(--bg-subtle); color: var(--text-primary); } .al-container .btn-secondary:hover { background: var(--bg-muted); } .al-container .al-table thead th { color: var(--text-muted); background: var(--bg-subtle); border-bottom-color: var(--border); } .al-container .al-table tbody tr { border-bottom-color: var(--border-subtle); } .al-container .al-table tbody tr:hover { background: var(--bg-subtle); } .al-container .al-table tbody td { color: var(--text-primary); } .al-container .action-badge { background: var(--bg-subtle); color: var(--text-secondary); } [data-theme="dark"] .al-container .a-create { background: rgba(16, 185, 129, 0.18) !important; color: #6ee7b7 !important; } [data-theme="dark"] .al-container .a-update { background: rgba(59, 130, 246, 0.18) !important; color: #93c5fd !important; } [data-theme="dark"] .al-container .a-delete { background: rgba(239, 68, 68, 0.18) !important; color: #fca5a5 !important; } [data-theme="dark"] .al-container .a-login { background: rgba(139, 92, 246, 0.18) !important; color: #c4b5fd !important; } [data-theme="dark"] .al-container .a-logout { background: rgba(107, 114, 128, 0.22) !important; color: #d1d5db !important; } [data-theme="dark"] .al-container .a-export { background: rgba(249, 115, 22, 0.18) !important; color: #fdba74 !important; } [data-theme="dark"] .al-container .a-view { background: rgba(56, 189, 248, 0.18) !important; color: #7dd3fc !important; } .al-container .modal-content { background: var(--bg-surface); } .al-container .modal-header { border-bottom-color: var(--border); background: linear-gradient(135deg, var(--accent), var(--accent-strong)); color: #ffffff; } .al-container .modal-title { color: #ffffff; } .al-container .modal-close { background: rgba(255, 255, 255, 0.20); color: #ffffff; } .al-container .modal-close:hover { background: rgba(255, 255, 255, 0.35); } .al-container .modal-body { background: var(--bg-surface); } .al-container .detail-row { border-bottom-color: var(--border-subtle); } .al-container .detail-label { color: var(--text-muted); } .al-container .detail-value { color: var(--text-primary); } .al-container .pagination-row { background: var(--bg-surface); border-top-color: var(--border); } .al-container .page-info { color: var(--text-muted); } .al-container .page-num { color: var(--accent-fg); } /* json-block keeps its dark blue background — it's a code block, not a surface, so it should look the same in both themes. */ /* Odontogram — od-container, page elements, modal, form, status-grid, teeth-chips */ .od-container { background: var(--bg-page); } .od-container .od-breadcrumb { color: var(--text-muted); } .od-container .od-breadcrumb a { color: var(--accent-fg); } .od-container .od-title { color: var(--text-primary); } .od-container .patient-bar { background: var(--bg-surface); border-color: var(--border); box-shadow: var(--shadow-sm); } .od-container .patient-bar [style*="color: #0f172a"], .od-container .patient-bar [style*="color:#0f172a"] { color: var(--text-primary) !important; } .od-container .patient-meta { color: var(--text-muted); } .od-container .od-panel { background: var(--bg-surface); border-color: var(--border); box-shadow: var(--shadow-sm); } .od-container .od-panel h3 { color: var(--text-primary); border-bottom-color: var(--border-subtle); } .od-container .legend-item { background: var(--bg-subtle); color: var(--text-secondary); border-color: transparent; } .od-container .legend-item:hover { background: var(--bg-muted); border-color: var(--border); } .od-container .legend-item.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-fg); } .od-container .legend-color { border-color: var(--bg-surface); } .od-container .legend-count { background: var(--bg-surface); border-color: var(--border); color: var(--text-muted); } .od-container .odo-card { background: var(--bg-surface); border-color: var(--border); box-shadow: var(--shadow-sm); } .od-container .odo-mode-info { color: var(--text-muted); } .od-container .odo-mode-info b { color: var(--accent-fg); } .od-container .toggle-btn { background: var(--bg-muted); color: var(--text-secondary); border-color: transparent; } .od-container .toggle-btn:hover { background: var(--border-strong); } .od-container .toggle-btn.active { background: var(--accent); color: #ffffff; } .od-container .jaw-label { color: var(--text-faint); } .od-container .arch-divider hr { border-top-color: var(--border); } .od-container .arch-divider span { color: var(--text-faint); background: var(--bg-surface); } .od-container .tooth-code { color: var(--text-muted); } .od-container .tooth-cell.selected .tooth-code { color: var(--accent); } .od-container .tooth-shape { stroke: var(--text-faint); } .od-container .tooth-cell:hover .tooth-shape { stroke: var(--accent); } .od-container .tooth-cell.selected .tooth-shape { stroke: var(--accent); } .od-container .help-banner { background: linear-gradient(135deg, var(--accent-soft), rgba(14,165,233,0.10)); border-color: var(--accent); } .od-container .help-banner-icon { background: var(--bg-surface); color: var(--accent-fg); } .od-container .help-steps { color: var(--text-secondary); } .od-container .btn-secondary { background: var(--bg-muted); color: var(--text-secondary); } .od-container .btn-secondary:hover { background: var(--border-strong); } .od-container .btn-danger { background: var(--danger-soft); color: var(--danger); } .od-container .btn-danger:hover { background: rgba(239,68,68,0.28); } .od-container .btn-white-primary { background: var(--bg-surface); color: var(--accent-fg); } .od-container .btn-white-primary:hover { background: var(--bg-subtle); } .od-container .history-item { background: var(--bg-subtle); border-color: var(--border); } .od-container .history-item:hover { background: var(--bg-surface); box-shadow: var(--shadow-sm); } .od-container .history-meta { color: var(--text-muted); } .od-container .history-desc { color: var(--text-secondary); } .od-container .history-empty { color: var(--text-muted); } .od-container .history-empty i { color: var(--text-faint); } .od-container .history-list::-webkit-scrollbar-thumb { background: var(--border-strong); } .od-container .hs-done { background: var(--success-soft); color: var(--success); } .od-container .hs-in_progress { background: var(--warning-soft); color: var(--warning); } .od-container .hs-followup { background: rgba(245,158,11,0.22); color: var(--warning); } .od-container .hs-planned { background: var(--accent-soft); color: var(--accent-fg); } /* Inline style overrides for odontogram */ .od-container [style*="background: white"], .od-container [style*="background:white"] { background: var(--bg-surface) !important; } .od-container [style*="background: #f8fafc"], .od-container [style*="background:#f8fafc"] { background: var(--bg-subtle) !important; } .od-container [style*="background: #f1f5f9"], .od-container [style*="background:#f1f5f9"] { background: var(--bg-muted) !important; } .od-container [style*="color: #0f172a"], .od-container [style*="color:#0f172a"] { color: var(--text-primary) !important; } .od-container [style*="color: #334155"], .od-container [style*="color:#334155"] { color: var(--text-secondary) !important; } .od-container [style*="color: #475569"], .od-container [style*="color:#475569"] { color: var(--text-secondary) !important; } .od-container [style*="color: #64748b"], .od-container [style*="color:#64748b"] { color: var(--text-muted) !important; } .od-container [style*="color: #94a3b8"], .od-container [style*="color:#94a3b8"] { color: var(--text-faint) !important; } .od-container [style*="color: #cbd5e1"], .od-container [style*="color:#cbd5e1"] { color: var(--border-strong) !important; } .od-container [style*="border: 1px solid #e2e8f0"], .od-container [style*="border:1px solid #e2e8f0"] { border-color: var(--border) !important; } .od-container [style*="border: 2px solid #e2e8f0"], .od-container [style*="border:2px solid #e2e8f0"] { border-color: var(--border) !important; } .od-container [style*="border-bottom: 1px solid #f1f5f9"], .od-container [style*="border-bottom:1px solid #f1f5f9"] { border-bottom-color: var(--border-subtle) !important; } .od-container [style*="border-bottom: 2px solid #e2e8f0"], .od-container [style*="border-bottom:2px solid #e2e8f0"] { border-bottom-color: var(--border) !important; } .od-container [style*="border-top: 2px dashed #e2e8f0"], .od-container [style*="border-top:2px dashed #e2e8f0"] { border-top-color: var(--border) !important; } /* Modal overrides */ .od-container .modal-overlay { background: rgba(0, 0, 0, 0.70); } .od-container .modal-content { background: var(--bg-surface); box-shadow: 0 20px 60px var(--shadow-color); } .od-container .modal-header { border-bottom-color: var(--border); background: linear-gradient(135deg, #0ea5e9, #0284c7); color: #ffffff; } .od-container .modal-title { color: #ffffff; } /* (modal-close, modal-body, modal-footer, teeth-chips, form-input, status-card, tab-bar, spinner are already covered in the block above) */ .od-container .od-page-title { color: var(--text-primary); } .od-container .od-summary { background: var(--bg-surface); border-color: var(--border); } .od-container .od-summary-label { color: var(--text-muted); } .od-container .od-summary-value { color: var(--text-primary); } .od-container .history-panel { background: var(--bg-surface); border-color: var(--border); } .od-container .history-title { color: var(--text-primary); } .od-container .history-empty { color: var(--text-muted); } .od-container .history-empty i { color: var(--text-faint); } .od-container .tooth-svg { filter: none; } .od-container [style*="background: #f8fafc"] { background: var(--bg-subtle) !important; } .od-container [style*="background: white"], .od-container [style*="background:white"] { background: var(--bg-surface) !important; } .od-container [style*="color: #0f172a"], .od-container [style*="color:#0f172a"] { color: var(--text-primary) !important; } .od-container [style*="color: #334155"], .od-container [style*="color:#334155"] { color: var(--text-secondary) !important; } .od-container [style*="color: #64748b"], .od-container [style*="color:#64748b"] { color: var(--text-muted) !important; } .od-container [style*="border: 1px solid #e2e8f0"], .od-container [style*="border:1px solid #e2e8f0"] { border-color: var(--border) !important; } .od-container [style*="border: 2px solid #e2e8f0"], .od-container [style*="border:2px solid #e2e8f0"] { border-color: var(--border) !important; } .od-container [style*="background: #f1f5f9"], .od-container [style*="background:#f1f5f9"] { background: var(--bg-muted) !important; } /* Medical Record Form — mr-container */ .mr-container { background: var(--bg-page); } .mr-container .breadcrumb { color: var(--text-muted); } .mr-container .breadcrumb a { color: var(--accent-fg); } .mr-container .page-title { color: var(--text-primary); } .mr-container .patient-banner { background: var(--bg-surface); border-color: var(--border); } .mr-container .patient-banner [style*="color: #1d1d1f"], .mr-container .patient-banner [style*="color:#1d1d1f"] { color: var(--text-primary) !important; } .mr-container .patient-meta { color: var(--text-muted); } .mr-container .form-section { background: var(--bg-surface); border-color: var(--border); } .mr-container .section-title { color: var(--text-primary); border-bottom-color: var(--border-subtle); } .mr-container .form-group label { color: var(--text-primary); } .mr-container .form-group label .required { color: var(--danger); } .mr-container .form-input { background: var(--bg-surface); border-color: var(--border); color: var(--text-primary); } .mr-container .form-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .mr-container .form-input:disabled { background: var(--bg-subtle); } .mr-container .form-input[style*="background: #f0f0ff"] { background: var(--accent-soft) !important; color: var(--accent-fg) !important; } .mr-container .edit-warning { background: linear-gradient(135deg, var(--warning-soft), rgba(245,158,11,0.20)); border-color: rgba(245,158,11,0.40); } .mr-container .edit-warning-title { color: var(--warning); } .mr-container .edit-warning p { color: var(--text-secondary); } .mr-container .edit-warning [style*="color: #ff3b30"] { color: var(--danger) !important; } .mr-container .action-bar { background: var(--bg-surface); border-color: var(--border); box-shadow: 0 8px 24px var(--shadow-color); } .mr-container .service-info { background: var(--accent-soft); border-color: var(--accent); } .mr-container .service-info [style*="color: #1d1d1f"], .mr-container .service-info [style*="color:#1d1d1f"] { color: var(--text-primary) !important; } .mr-container .service-info [style*="color: #86868b"], .mr-container .service-info [style*="color:#86868b"] { color: var(--text-muted) !important; } .mr-container .service-info [style*="color: #059669"], .mr-container .service-info [style*="color:#059669"] { color: var(--success) !important; } .mr-container [style*="background: #f5f5f7"], .mr-container [style*="background:#f5f5f7"] { background: var(--bg-subtle) !important; } .mr-container [style*="color: #86868b"], .mr-container [style*="color:#86868b"] { color: var(--text-muted) !important; } .mr-container [style*="color: #1d1d1f"], .mr-container [style*="color:#1d1d1f"] { color: var(--text-primary) !important; } .mr-container [style*="color: #dc2626"], .mr-container [style*="color:#dc2626"] { color: var(--danger) !important; } .mr-container [style*="color: #059669"], .mr-container [style*="color:#059669"] { color: var(--success) !important; } .mr-container [style*="color: #92400e"], .mr-container [style*="color:#92400e"] { color: var(--warning) !important; } .mr-container [style*="color: #c2410c"], .mr-container [style*="color:#c2410c"] { color: var(--warning) !important; } .mr-container [style*="border: 1px solid #e5e5e7"], .mr-container [style*="border:1px solid #e5e5e7"] { border-color: var(--border) !important; } .mr-container [style*="background: white"], .mr-container [style*="background:white"] { background: var(--bg-surface) !important; } .mr-container [style*="color: #ff3b30"], .mr-container [style*="color:#ff3b30"] { color: var(--danger) !important; } .mr-container .spinner { border-color: var(--border); border-top-color: var(--accent); } /* Employee management — em-stat, em-card, em-table, em-badge, em-action-btn, em-pagination, em-page-btn, em-modal-* */ .em-container .em-stat { background: var(--bg-surface); border-color: var(--border); } .em-container .em-stat:hover { box-shadow: 0 4px 16px var(--shadow-color); } .em-container .em-stat-label { color: var(--text-muted); } .em-container .em-stat-value { color: var(--text-primary); } .em-container .em-card { background: var(--bg-surface); border-color: var(--border); } .em-container .em-filters { border-bottom-color: var(--border-subtle); } .em-container .em-input, .em-container .em-select { background: var(--bg-surface); border-color: var(--border); color: var(--text-primary); } .em-container .em-input:focus, .em-container .em-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18); } .em-container .em-table th { color: var(--text-muted); background: var(--bg-subtle); border-bottom-color: var(--border-subtle); } .em-container .em-table td { color: var(--text-primary); border-bottom-color: var(--border-subtle); } .em-container .em-table tr:hover td { background: var(--bg-subtle); } .em-container .em-badge { background: var(--bg-subtle); color: var(--text-secondary); } [data-theme="dark"] .em-container .em-badge-active { background: rgba(16, 185, 129, 0.18) !important; color: #6ee7b7 !important; } [data-theme="dark"] .em-container .em-badge-suspended { background: rgba(239, 68, 68, 0.18) !important; color: #fca5a5 !important; } [data-theme="dark"] .em-container .em-badge-inactive { background: rgba(107, 114, 128, 0.22) !important; color: #d1d5db !important; } [data-theme="dark"] .em-container .em-badge-admin { background: linear-gradient(135deg, rgba(245,158,11,0.18), rgba(245,158,11,0.28)) !important; color: #fcd34d !important; } [data-theme="dark"] .em-container .em-badge-sa { background: linear-gradient(135deg, rgba(139,92,246,0.18), rgba(139,92,246,0.28)) !important; color: #c4b5fd !important; } .em-container .em-action-btn { background: var(--bg-surface); border-color: var(--border); color: var(--text-muted); } .em-container .em-action-btn:hover { background: var(--bg-subtle); } .em-container .em-action-btn.danger:hover { background: rgba(239, 68, 68, 0.18); color: #fca5a5; border-color: rgba(239, 68, 68, 0.40); } .em-container .em-action-btn.success:hover { background: rgba(16, 185, 129, 0.18); color: #6ee7b7; border-color: rgba(16, 185, 129, 0.40); } .em-container .em-action-btn.warn:hover { background: rgba(245, 158, 11, 0.18); color: #fcd34d; border-color: rgba(245, 158, 11, 0.40); } .em-container .em-pagination { background: var(--bg-subtle); border-top-color: var(--border-subtle); } .em-container .em-page-btn { background: var(--bg-surface); border-color: var(--border); color: var(--text-primary); } .em-container .em-page-btn:hover:not(:disabled) { background: var(--bg-subtle); } .em-container .em-page-btn.active { background: var(--accent) !important; color: #ffffff !important; border-color: var(--accent) !important; } .em-container .em-modal-backdrop { background: rgba(0, 0, 0, 0.70); } .em-container .em-modal { background: var(--bg-surface); box-shadow: 0 25px 60px var(--shadow-color); } .em-container .em-modal-header { background: var(--bg-surface); border-bottom-color: var(--border-subtle); } .em-container .em-modal-title { color: var(--text-primary); } .em-container .em-modal-body { background: var(--bg-surface); } .em-container .em-modal-footer { background: var(--bg-subtle); border-top-color: var(--border-subtle); } /* Settings — logo-preview + logo-action-btn + invoice-preview */ .settings-page .logo-preview { background: linear-gradient(135deg, rgba(99,102,241,0.18), rgba(139,92,246,0.18)); border-color: rgba(99, 102, 241, 0.40); } .settings-page .logo-preview img { background: var(--bg-surface); } .settings-page .logo-preview .placeholder { color: #a78bfa; } .settings-page .logo-action-btn.upload { background: var(--accent); color: #ffffff; } .settings-page .logo-action-btn.upload:hover { background: var(--accent-strong); } .settings-page .logo-action-btn.remove { background: var(--bg-surface); color: #fca5a5; border-color: rgba(239, 68, 68, 0.40); } .settings-page .logo-action-btn.remove:hover { background: rgba(239, 68, 68, 0.18); } .settings-page .invoice-preview { background: var(--bg-surface); border-color: var(--border); color: var(--text-secondary); } .settings-page .invoice-preview-label { color: var(--accent-fg); } /* ─── Shared inline-style overrides (the 7 pages emit the same hard-coded colour snippets as the appointments / patients / doctors / finance block, so the generic selectors below catch every occurrence). ─── */ .services-container [style*="background: #f5f5f7"], .ms-container [style*="background: #f5f5f7"], .tp-container [style*="background: #f5f5f7"], .al-container [style*="background: #f5f5f7"], .em-container [style*="background: #f5f5f7"] { background: var(--bg-subtle) !important; } .services-container [style*="background: #fafafa"], .ms-container [style*="background: #fafafa"], .tp-container [style*="background: #fafafa"], .al-container [style*="background: #fafafa"], .em-container [style*="background: #fafafa"], .services-container [style*="background: #fafafc"], .ms-container [style*="background: #fafafc"], .tp-container [style*="background: #fafafc"], .al-container [style*="background: #fafafc"], .em-container [style*="background: #fafafc"] { background: var(--bg-subtle) !important; } .services-container [style*="background: white"], .ms-container [style*="background: white"], .tp-container [style*="background: white"], .al-container [style*="background: white"], .em-container [style*="background: white"] { background: var(--bg-surface) !important; } .services-container [style*="color: #1d1d1f"], .ms-container [style*="color: #1d1d1f"], .tp-container [style*="color: #1d1d1f"], .al-container [style*="color: #1d1d1f"], .em-container [style*="color: #1d1d1f"] { color: var(--text-primary) !important; } .services-container [style*="color: #86868b"], .ms-container [style*="color: #86868b"], .tp-container [style*="color: #86868b"], .al-container [style*="color: #86868b"], .em-container [style*="color: #86868b"] { color: var(--text-muted) !important; } .services-container [style*="color: #6e6e73"], .ms-container [style*="color: #6e6e73"], .tp-container [style*="color: #6e6e73"], .al-container [style*="color: #6e6e73"], .em-container [style*="color: #6e6e73"] { color: var(--text-secondary) !important; } .services-container [style*="color: #555"], .ms-container [style*="color: #555"], .tp-container [style*="color: #555"], .al-container [style*="color: #555"], .em-container [style*="color: #555"] { color: var(--text-secondary) !important; } .services-container [style*="color: #475569"], .ms-container [style*="color: #475569"], .tp-container [style*="color: #475569"], .al-container [style*="color: #475569"], .em-container [style*="color: #475569"] { color: var(--text-secondary) !important; } .services-container [style*="color: #64748b"], .ms-container [style*="color: #64748b"], .tp-container [style*="color: #64748b"], .al-container [style*="color: #64748b"], .em-container [style*="color: #64748b"] { color: var(--text-muted) !important; } .services-container [style*="color: #94a3b8"], .ms-container [style*="color: #94a3b8"], .tp-container [style*="color: #94a3b8"], .al-container [style*="color: #94a3b8"], .em-container [style*="color: #94a3b8"] { color: var(--text-faint) !important; } .services-container [style*="border: 1px solid #e5e5e7"], .ms-container [style*="border: 1px solid #e5e5e7"], .tp-container [style*="border: 1px solid #e5e5e7"], .al-container [style*="border: 1px solid #e5e5e7"], .em-container [style*="border: 1px solid #e5e5e7"] { border-color: var(--border) !important; } .services-container [style*="border: 1px solid #f5f5f7"], .ms-container [style*="border: 1px solid #f5f5f7"], .tp-container [style*="border: 1px solid #f5f5f7"], .al-container [style*="border: 1px solid #f5f5f7"], .em-container [style*="border: 1px solid #f5f5f7"] { border-color: var(--border-subtle) !important; } .services-container [style*="border: 1px solid #d2d2d7"], .ms-container [style*="border: 1px solid #d2d2d7"], .tp-container [style*="border: 1px solid #d2d2d7"], .al-container [style*="border: 1px solid #d2d2d7"], .em-container [style*="border: 1px solid #d2d2d7"] { border-color: var(--border-strong) !important; } .services-container [style*="border-top: 1px solid #e5e5e7"], .ms-container [style*="border-top: 1px solid #e5e5e7"], .tp-container [style*="border-top: 1px solid #e5e5e7"], .al-container [style*="border-top: 1px solid #e5e5e7"], .em-container [style*="border-top: 1px solid #e5e5e7"] { border-top-color: var(--border) !important; } .services-container [style*="color: #5856d6"]:not(.action-btn), .ms-container [style*="color: #5856d6"]:not(.action-btn), .tp-container [style*="color: #5856d6"]:not(.action-btn), .al-container [style*="color: #5856d6"]:not(.action-btn), .em-container [style*="color: #5856d6"]:not(.action-btn) { color: var(--accent-fg) !important; } .services-container [style*="color: #b91c1c"], .ms-container [style*="color: #b91c1c"], .tp-container [style*="color: #b91c1c"], .al-container [style*="color: #b91c1c"], .em-container [style*="color: #b91c1c"] { color: #fca5a5 !important; } .services-container [style*="color: #b45309"], .ms-container [style*="color: #b45309"], .tp-container [style*="color: #b45309"], .al-container [style*="color: #b45309"], .em-container [style*="color: #b45309"] { color: #fcd34d !important; } .services-container [style*="color: #1e40af"], .ms-container [style*="color: #1e40af"], .tp-container [style*="color: #1e40af"], .al-container [style*="color: #1e40af"], .em-container [style*="color: #1e40af"] { color: #93c5fd !important; } .services-container [style*="color: #047857"], .ms-container [style*="color: #047857"], .tp-container [style*="color: #047857"], .al-container [style*="color: #047857"], .em-container [style*="color: #047857"] { color: #6ee7b7 !important; } .services-container [style*="color: #7c3aed"], .ms-container [style*="color: #7c3aed"], .tp-container [style*="color: #7c3aed"], .al-container [style*="color: #7c3aed"], .em-container [style*="color: #7c3aed"] { color: #c4b5fd !important; } .services-container [style*="color: #c2410c"], .ms-container [style*="color: #c2410c"], .tp-container [style*="color: #c2410c"], .al-container [style*="color: #c2410c"], .em-container [style*="color: #c2410c"] { color: #fdba74 !important; } .services-container [style*="color: #92400e"], .ms-container [style*="color: #92400e"], .tp-container [style*="color: #92400e"], .al-container [style*="color: #92400e"], .em-container [style*="color: #92400e"] { color: #fcd34d !important; } .services-container [style*="color: #dc2626"], .ms-container [style*="color: #dc2626"], .tp-container [style*="color: #dc2626"], .al-container [style*="color: #dc2626"], .em-container [style*="color: #dc2626"] { color: #fca5a5 !important; } .services-container [style*="color: #6d28d9"], .ms-container [style*="color: #6d28d9"], .tp-container [style*="color: #6d28d9"], .al-container [style*="color: #6d28d9"], .em-container [style*="color: #6d28d9"] { color: #c4b5fd !important; } .services-container [style*="color: #34c759"]:not(.action-btn), .ms-container [style*="color: #34c759"]:not(.action-btn), .tp-container [style*="color: #34c759"]:not(.action-btn), .al-container [style*="color: #34c759"]:not(.action-btn), .em-container [style*="color: #34c759"]:not(.action-btn) { color: #6ee7b7 !important; } .services-container [style*="background: #f0f0ff"], .ms-container [style*="background: #f0f0ff"], .tp-container [style*="background: #f0f0ff"], .al-container [style*="background: #f0f0ff"], .em-container [style*="background: #f0f0ff"] { background: rgba(99, 102, 241, 0.16) !important; } .services-container [style*="background: #f3f4f6"], .ms-container [style*="background: #f3f4f6"], .tp-container [style*="background: #f3f4f6"], .al-container [style*="background: #f3f4f6"], .em-container [style*="background: #f3f4f6"] { background: var(--bg-subtle) !important; } .services-container [style*="background: #f1f5f9"], .ms-container [style*="background: #f1f5f9"], .tp-container [style*="background: #f1f5f9"], .al-container [style*="background: #f1f5f9"], .em-container [style*="background: #f1f5f9"] { background: var(--bg-muted) !important; } .services-container [style*="background: #ede9fe"], .ms-container [style*="background: #ede9fe"], .tp-container [style*="background: #ede9fe"], .al-container [style*="background: #ede9fe"], .em-container [style*="background: #ede9fe"] { background: rgba(139, 92, 246, 0.18) !important; } .services-container [style*="background: #fef3c7"], .ms-container [style*="background: #fef3c7"], .tp-container [style*="background: #fef3c7"], .al-container [style*="background: #fef3c7"], .em-container [style*="background: #fef3c7"] { background: rgba(245, 158, 11, 0.18) !important; } .services-container [style*="background: #dbeafe"], .ms-container [style*="background: #dbeafe"], .tp-container [style*="background: #dbeafe"], .al-container [style*="background: #dbeafe"], .em-container [style*="background: #dbeafe"] { background: rgba(59, 130, 246, 0.18) !important; } .services-container [style*="background: #d1fae5"], .ms-container [style*="background: #d1fae5"], .tp-container [style*="background: #d1fae5"], .al-container [style*="background: #d1fae5"], .em-container [style*="background: #d1fae5"] { background: rgba(16, 185, 129, 0.18) !important; } .services-container [style*="background: #fee2e2"], .ms-container [style*="background: #fee2e2"], .tp-container [style*="background: #fee2e2"], .al-container [style*="background: #fee2e2"], .em-container [style*="background: #fee2e2"] { background: rgba(239, 68, 68, 0.18) !important; } .services-container [style*="background: #fde68a"], .ms-container [style*="background: #fde68a"], .tp-container [style*="background: #fde68a"], .al-container [style*="background: #fde68a"], .em-container [style*="background: #fde68a"] { background: rgba(245, 158, 11, 0.18) !important; } .services-container [style*="background: #d1d5db"], .ms-container [style*="background: #d1d5db"], .tp-container [style*="background: #d1d5db"], .al-container [style*="background: #d1d5db"], .em-container [style*="background: #d1d5db"] { background: rgba(107, 114, 128, 0.22) !important; } .services-container [style*="background: #cbd5e1"], .ms-container [style*="background: #cbd5e1"], .tp-container [style*="background: #cbd5e1"], .al-container [style*="background: #cbd5e1"], .em-container [style*="background: #cbd5e1"] { background: var(--text-faint) !important; } .services-container [style*="background: #fff3cd"], .ms-container [style*="background: #fff3cd"], .tp-container [style*="background: #fff3cd"], .al-container [style*="background: #fff3cd"], .em-container [style*="background: #fff3cd"] { background: rgba(245, 158, 11, 0.14) !important; } .services-container [style*="color: #f59e0b"], .ms-container [style*="color: #f59e0b"], .tp-container [style*="color: #f59e0b"], .al-container [style*="color: #f59e0b"], .em-container [style*="color: #f59e0b"] { color: #fcd34d !important; } .services-container [style*="color: #d97706"], .ms-container [style*="color: #d97706"], .tp-container [style*="color: #d97706"], .al-container [style*="color: #d97706"], .em-container [style*="color: #d97706"] { color: #fcd34d !important; } .services-container [style*="color: #075985"], .ms-container [style*="color: #075985"], .tp-container [style*="color: #075985"], .al-container [style*="color: #075985"], .em-container [style*="color: #075985"] { color: #7dd3fc !important; } .services-container [style*="color: #991b1b"], .ms-container [style*="color: #991b1b"], .tp-container [style*="color: #991b1b"], .al-container [style*="color: #991b1b"], .em-container [style*="color: #991b1b"] { color: #fca5a5 !important; } .services-container [style*="color: #065f46"], .ms-container [style*="color: #065f46"], .tp-container [style*="color: #065f46"], .al-container [style*="color: #065f46"], .em-container [style*="color: #065f46"] { color: #6ee7b7 !important; } .services-container [style*="color: #5b21b6"], .ms-container [style*="color: #5b21b6"], .tp-container [style*="color: #5b21b6"], .al-container [style*="color: #5b21b6"], .em-container [style*="color: #5b21b6"] { color: #c4b5fd !important; } .services-container [style*="color: #4b5563"], .ms-container [style*="color: #4b5563"], .tp-container [style*="color: #4b5563"], .al-container [style*="color: #4b5563"], .em-container [style*="color: #4b5563"] { color: var(--text-muted) !important; } .services-container [style*="color: #374151"], .ms-container [style*="color: #374151"], .tp-container [style*="color: #374151"], .al-container [style*="color: #374151"], .em-container [style*="color: #374151"] { color: #d1d5db !important; } .services-container [style*="color: #d1d5db"], .ms-container [style*="color: #d1d5db"], .tp-container [style*="color: #d1d5db"], .al-container [style*="color: #d1d5db"], .em-container [style*="color: #d1d5db"] { color: var(--text-faint) !important; } .services-container [style*="border: 3px solid #e5e5e7"], .ms-container [style*="border: 3px solid #e5e5e7"], .tp-container [style*="border: 3px solid #e5e5e7"], .al-container [style*="border: 3px solid #e5e5e7"], .em-container [style*="border: 3px solid #e5e5e7"] { border-color: var(--border) !important; } .services-container [style*="background: rgba(0, 0, 0, 0.5)"], .ms-container [style*="background: rgba(0, 0, 0, 0.5)"], .tp-container [style*="background: rgba(0, 0, 0, 0.5)"], .al-container [style*="background: rgba(0, 0, 0, 0.5)"], .em-container [style*="background: rgba(0, 0, 0, 0.5)"] { background: rgba(0, 0, 0, 0.70) !important; } /* Mobile sidebar overlay — in light mode the overlay is gray-900 @ 50% opacity, which already darkens the page underneath. In dark mode the same overlay on top of an already-dark page becomes invisible, so we bump the alpha to 70% for proper contrast. */ [data-theme="dark"] .bg-gray-900\/50, [data-theme="dark"] .bg-opacity-50.bg-gray-900 { background: rgba(0, 0, 0, 0.70) !important; } /* ═════════════════════════════════════════════════════════════════════════ COMPREHENSIVE THEME OVERRIDES — pages: finance, services, my_schedule, treatment_plans, reports, audit_logs, employee_management, settings ═════════════════════════════════════════════════════════════════════════ The first 7 dashboard pages (patients/doctors/finance block above) had the same hard-coded-colour problem, but these 7 pages have: • inline styles written as 'color:#X' (NO space after the colon) • inline styles written as 'background: #X' (WITH space) • direct Tailwind utility classes on the elements (text-gray-500, bg-blue-50, border-purple-300, etc.) • Alpine-bound :style and :class which render at runtime The just-the-hex-code pattern [style*="#XXXXXX"] matches BOTH the space and no-space variants in one rule. Tailwind utility overrides are generated with container-scoped class selectors. */ /* ─── Comprehensive inline-color remap (handles BOTH 'color: #X' AND 'color:#X' formats via the just-the-hex pattern) ─── */ [data-theme="dark"] .fin-container [style*="#5856d6"] { color: var(--accent-fg) !important; } [data-theme="dark"] .services-container [style*="#5856d6"] { color: var(--accent-fg) !important; } [data-theme="dark"] .ms-container [style*="#5856d6"] { color: var(--accent-fg) !important; } [data-theme="dark"] .tp-container [style*="#5856d6"] { color: var(--accent-fg) !important; } [data-theme="dark"] .al-container [style*="#5856d6"] { color: var(--accent-fg) !important; } [data-theme="dark"] .em-container [style*="#5856d6"] { color: var(--accent-fg) !important; } [data-theme="dark"] .rep-card [style*="#5856d6"] { color: var(--accent-fg) !important; } [data-theme="dark"] .settings-page [style*="#5856d6"] { color: var(--accent-fg) !important; } [data-theme="dark"] .fin-container [style*="#7c3aed"] { color: #c4b5fd !important; } [data-theme="dark"] .services-container [style*="#7c3aed"] { color: #c4b5fd !important; } [data-theme="dark"] .ms-container [style*="#7c3aed"] { color: #c4b5fd !important; } [data-theme="dark"] .tp-container [style*="#7c3aed"] { color: #c4b5fd !important; } [data-theme="dark"] .al-container [style*="#7c3aed"] { color: #c4b5fd !important; } [data-theme="dark"] .em-container [style*="#7c3aed"] { color: #c4b5fd !important; } [data-theme="dark"] .rep-card [style*="#7c3aed"] { color: #c4b5fd !important; } [data-theme="dark"] .settings-page [style*="#7c3aed"] { color: #c4b5fd !important; } [data-theme="dark"] .fin-container [style*="#5b21b6"] { color: #c4b5fd !important; } [data-theme="dark"] .services-container [style*="#5b21b6"] { color: #c4b5fd !important; } [data-theme="dark"] .ms-container [style*="#5b21b6"] { color: #c4b5fd !important; } [data-theme="dark"] .tp-container [style*="#5b21b6"] { color: #c4b5fd !important; } [data-theme="dark"] .al-container [style*="#5b21b6"] { color: #c4b5fd !important; } [data-theme="dark"] .em-container [style*="#5b21b6"] { color: #c4b5fd !important; } [data-theme="dark"] .rep-card [style*="#5b21b6"] { color: #c4b5fd !important; } [data-theme="dark"] .settings-page [style*="#5b21b6"] { color: #c4b5fd !important; } [data-theme="dark"] .fin-container [style*="#6d28d9"] { color: #c4b5fd !important; } [data-theme="dark"] .services-container [style*="#6d28d9"] { color: #c4b5fd !important; } [data-theme="dark"] .ms-container [style*="#6d28d9"] { color: #c4b5fd !important; } [data-theme="dark"] .tp-container [style*="#6d28d9"] { color: #c4b5fd !important; } [data-theme="dark"] .al-container [style*="#6d28d9"] { color: #c4b5fd !important; } [data-theme="dark"] .em-container [style*="#6d28d9"] { color: #c4b5fd !important; } [data-theme="dark"] .rep-card [style*="#6d28d9"] { color: #c4b5fd !important; } [data-theme="dark"] .settings-page [style*="#6d28d9"] { color: #c4b5fd !important; } [data-theme="dark"] .fin-container [style*="#8b5cf6"] { color: #c4b5fd !important; } [data-theme="dark"] .services-container [style*="#8b5cf6"] { color: #c4b5fd !important; } [data-theme="dark"] .ms-container [style*="#8b5cf6"] { color: #c4b5fd !important; } [data-theme="dark"] .tp-container [style*="#8b5cf6"] { color: #c4b5fd !important; } [data-theme="dark"] .al-container [style*="#8b5cf6"] { color: #c4b5fd !important; } [data-theme="dark"] .em-container [style*="#8b5cf6"] { color: #c4b5fd !important; } [data-theme="dark"] .rep-card [style*="#8b5cf6"] { color: #c4b5fd !important; } [data-theme="dark"] .settings-page [style*="#8b5cf6"] { color: #c4b5fd !important; } [data-theme="dark"] .fin-container [style*="#1d1d1f"] { color: var(--text-primary) !important; } [data-theme="dark"] .services-container [style*="#1d1d1f"] { color: var(--text-primary) !important; } [data-theme="dark"] .ms-container [style*="#1d1d1f"] { color: var(--text-primary) !important; } [data-theme="dark"] .tp-container [style*="#1d1d1f"] { color: var(--text-primary) !important; } [data-theme="dark"] .al-container [style*="#1d1d1f"] { color: var(--text-primary) !important; } [data-theme="dark"] .em-container [style*="#1d1d1f"] { color: var(--text-primary) !important; } [data-theme="dark"] .rep-card [style*="#1d1d1f"] { color: var(--text-primary) !important; } [data-theme="dark"] .settings-page [style*="#1d1d1f"] { color: var(--text-primary) !important; } [data-theme="dark"] .fin-container [style*="#334155"] { color: var(--text-secondary) !important; } [data-theme="dark"] .services-container [style*="#334155"] { color: var(--text-secondary) !important; } [data-theme="dark"] .ms-container [style*="#334155"] { color: var(--text-secondary) !important; } [data-theme="dark"] .tp-container [style*="#334155"] { color: var(--text-secondary) !important; } [data-theme="dark"] .al-container [style*="#334155"] { color: var(--text-secondary) !important; } [data-theme="dark"] .em-container [style*="#334155"] { color: var(--text-secondary) !important; } [data-theme="dark"] .rep-card [style*="#334155"] { color: var(--text-secondary) !important; } [data-theme="dark"] .settings-page [style*="#334155"] { color: var(--text-secondary) !important; } [data-theme="dark"] .fin-container [style*="#374151"] { color: #d1d5db !important; } [data-theme="dark"] .services-container [style*="#374151"] { color: #d1d5db !important; } [data-theme="dark"] .ms-container [style*="#374151"] { color: #d1d5db !important; } [data-theme="dark"] .tp-container [style*="#374151"] { color: #d1d5db !important; } [data-theme="dark"] .al-container [style*="#374151"] { color: #d1d5db !important; } [data-theme="dark"] .em-container [style*="#374151"] { color: #d1d5db !important; } [data-theme="dark"] .rep-card [style*="#374151"] { color: #d1d5db !important; } [data-theme="dark"] .settings-page [style*="#374151"] { color: #d1d5db !important; } [data-theme="dark"] .fin-container [style*="#4b5563"] { color: var(--text-muted) !important; } [data-theme="dark"] .services-container [style*="#4b5563"] { color: var(--text-muted) !important; } [data-theme="dark"] .ms-container [style*="#4b5563"] { color: var(--text-muted) !important; } [data-theme="dark"] .tp-container [style*="#4b5563"] { color: var(--text-muted) !important; } [data-theme="dark"] .al-container [style*="#4b5563"] { color: var(--text-muted) !important; } [data-theme="dark"] .em-container [style*="#4b5563"] { color: var(--text-muted) !important; } [data-theme="dark"] .rep-card [style*="#4b5563"] { color: var(--text-muted) !important; } [data-theme="dark"] .settings-page [style*="#4b5563"] { color: var(--text-muted) !important; } [data-theme="dark"] .fin-container [style*="#475569"] { color: var(--text-secondary) !important; } [data-theme="dark"] .services-container [style*="#475569"] { color: var(--text-secondary) !important; } [data-theme="dark"] .ms-container [style*="#475569"] { color: var(--text-secondary) !important; } [data-theme="dark"] .tp-container [style*="#475569"] { color: var(--text-secondary) !important; } [data-theme="dark"] .al-container [style*="#475569"] { color: var(--text-secondary) !important; } [data-theme="dark"] .em-container [style*="#475569"] { color: var(--text-secondary) !important; } [data-theme="dark"] .rep-card [style*="#475569"] { color: var(--text-secondary) !important; } [data-theme="dark"] .settings-page [style*="#475569"] { color: var(--text-secondary) !important; } [data-theme="dark"] .fin-container [style*="#64748b"] { color: var(--text-muted) !important; } [data-theme="dark"] .services-container [style*="#64748b"] { color: var(--text-muted) !important; } [data-theme="dark"] .ms-container [style*="#64748b"] { color: var(--text-muted) !important; } [data-theme="dark"] .tp-container [style*="#64748b"] { color: var(--text-muted) !important; } [data-theme="dark"] .al-container [style*="#64748b"] { color: var(--text-muted) !important; } [data-theme="dark"] .em-container [style*="#64748b"] { color: var(--text-muted) !important; } [data-theme="dark"] .rep-card [style*="#64748b"] { color: var(--text-muted) !important; } [data-theme="dark"] .settings-page [style*="#64748b"] { color: var(--text-muted) !important; } [data-theme="dark"] .fin-container [style*="#6b7280"] { color: #9ca3af !important; } [data-theme="dark"] .services-container [style*="#6b7280"] { color: #9ca3af !important; } [data-theme="dark"] .ms-container [style*="#6b7280"] { color: #9ca3af !important; } [data-theme="dark"] .tp-container [style*="#6b7280"] { color: #9ca3af !important; } [data-theme="dark"] .al-container [style*="#6b7280"] { color: #9ca3af !important; } [data-theme="dark"] .em-container [style*="#6b7280"] { color: #9ca3af !important; } [data-theme="dark"] .rep-card [style*="#6b7280"] { color: #9ca3af !important; } [data-theme="dark"] .settings-page [style*="#6b7280"] { color: #9ca3af !important; } [data-theme="dark"] .fin-container [style*="#6e6e73"] { color: var(--text-secondary) !important; } [data-theme="dark"] .services-container [style*="#6e6e73"] { color: var(--text-secondary) !important; } [data-theme="dark"] .ms-container [style*="#6e6e73"] { color: var(--text-secondary) !important; } [data-theme="dark"] .tp-container [style*="#6e6e73"] { color: var(--text-secondary) !important; } [data-theme="dark"] .al-container [style*="#6e6e73"] { color: var(--text-secondary) !important; } [data-theme="dark"] .em-container [style*="#6e6e73"] { color: var(--text-secondary) !important; } [data-theme="dark"] .rep-card [style*="#6e6e73"] { color: var(--text-secondary) !important; } [data-theme="dark"] .settings-page [style*="#6e6e73"] { color: var(--text-secondary) !important; } [data-theme="dark"] .fin-container [style*="#86868b"] { color: var(--text-muted) !important; } [data-theme="dark"] .services-container [style*="#86868b"] { color: var(--text-muted) !important; } [data-theme="dark"] .ms-container [style*="#86868b"] { color: var(--text-muted) !important; } [data-theme="dark"] .tp-container [style*="#86868b"] { color: var(--text-muted) !important; } [data-theme="dark"] .al-container [style*="#86868b"] { color: var(--text-muted) !important; } [data-theme="dark"] .em-container [style*="#86868b"] { color: var(--text-muted) !important; } [data-theme="dark"] .rep-card [style*="#86868b"] { color: var(--text-muted) !important; } [data-theme="dark"] .settings-page [style*="#86868b"] { color: var(--text-muted) !important; } [data-theme="dark"] .fin-container [style*="#94a3b8"] { color: var(--text-faint) !important; } [data-theme="dark"] .services-container [style*="#94a3b8"] { color: var(--text-faint) !important; } [data-theme="dark"] .ms-container [style*="#94a3b8"] { color: var(--text-faint) !important; } [data-theme="dark"] .tp-container [style*="#94a3b8"] { color: var(--text-faint) !important; } [data-theme="dark"] .al-container [style*="#94a3b8"] { color: var(--text-faint) !important; } [data-theme="dark"] .em-container [style*="#94a3b8"] { color: var(--text-faint) !important; } [data-theme="dark"] .rep-card [style*="#94a3b8"] { color: var(--text-faint) !important; } [data-theme="dark"] .settings-page [style*="#94a3b8"] { color: var(--text-faint) !important; } [data-theme="dark"] .fin-container [style*="#9ca3af"] { color: var(--text-faint) !important; } [data-theme="dark"] .services-container [style*="#9ca3af"] { color: var(--text-faint) !important; } [data-theme="dark"] .ms-container [style*="#9ca3af"] { color: var(--text-faint) !important; } [data-theme="dark"] .tp-container [style*="#9ca3af"] { color: var(--text-faint) !important; } [data-theme="dark"] .al-container [style*="#9ca3af"] { color: var(--text-faint) !important; } [data-theme="dark"] .em-container [style*="#9ca3af"] { color: var(--text-faint) !important; } [data-theme="dark"] .rep-card [style*="#9ca3af"] { color: var(--text-faint) !important; } [data-theme="dark"] .settings-page [style*="#9ca3af"] { color: var(--text-faint) !important; } [data-theme="dark"] .fin-container [style*="#d1d5db"] { color: var(--text-faint) !important; } [data-theme="dark"] .services-container [style*="#d1d5db"] { color: var(--text-faint) !important; } [data-theme="dark"] .ms-container [style*="#d1d5db"] { color: var(--text-faint) !important; } [data-theme="dark"] .tp-container [style*="#d1d5db"] { color: var(--text-faint) !important; } [data-theme="dark"] .al-container [style*="#d1d5db"] { color: var(--text-faint) !important; } [data-theme="dark"] .em-container [style*="#d1d5db"] { color: var(--text-faint) !important; } [data-theme="dark"] .rep-card [style*="#d1d5db"] { color: var(--text-faint) !important; } [data-theme="dark"] .settings-page [style*="#d1d5db"] { color: var(--text-faint) !important; } [data-theme="dark"] .fin-container [style*="#555"] { color: var(--text-secondary) !important; } [data-theme="dark"] .services-container [style*="#555"] { color: var(--text-secondary) !important; } [data-theme="dark"] .ms-container [style*="#555"] { color: var(--text-secondary) !important; } [data-theme="dark"] .tp-container [style*="#555"] { color: var(--text-secondary) !important; } [data-theme="dark"] .al-container [style*="#555"] { color: var(--text-secondary) !important; } [data-theme="dark"] .em-container [style*="#555"] { color: var(--text-secondary) !important; } [data-theme="dark"] .rep-card [style*="#555"] { color: var(--text-secondary) !important; } [data-theme="dark"] .settings-page [style*="#555"] { color: var(--text-secondary) !important; } [data-theme="dark"] .fin-container [style*="#059669"] { color: #6ee7b7 !important; } [data-theme="dark"] .services-container [style*="#059669"] { color: #6ee7b7 !important; } [data-theme="dark"] .ms-container [style*="#059669"] { color: #6ee7b7 !important; } [data-theme="dark"] .tp-container [style*="#059669"] { color: #6ee7b7 !important; } [data-theme="dark"] .al-container [style*="#059669"] { color: #6ee7b7 !important; } [data-theme="dark"] .em-container [style*="#059669"] { color: #6ee7b7 !important; } [data-theme="dark"] .rep-card [style*="#059669"] { color: #6ee7b7 !important; } [data-theme="dark"] .settings-page [style*="#059669"] { color: #6ee7b7 !important; } [data-theme="dark"] .fin-container [style*="#10b981"] { color: #6ee7b7 !important; } [data-theme="dark"] .services-container [style*="#10b981"] { color: #6ee7b7 !important; } [data-theme="dark"] .ms-container [style*="#10b981"] { color: #6ee7b7 !important; } [data-theme="dark"] .tp-container [style*="#10b981"] { color: #6ee7b7 !important; } [data-theme="dark"] .al-container [style*="#10b981"] { color: #6ee7b7 !important; } [data-theme="dark"] .em-container [style*="#10b981"] { color: #6ee7b7 !important; } [data-theme="dark"] .rep-card [style*="#10b981"] { color: #6ee7b7 !important; } [data-theme="dark"] .settings-page [style*="#10b981"] { color: #6ee7b7 !important; } [data-theme="dark"] .fin-container [style*="#15803d"] { color: #6ee7b7 !important; } [data-theme="dark"] .services-container [style*="#15803d"] { color: #6ee7b7 !important; } [data-theme="dark"] .ms-container [style*="#15803d"] { color: #6ee7b7 !important; } [data-theme="dark"] .tp-container [style*="#15803d"] { color: #6ee7b7 !important; } [data-theme="dark"] .al-container [style*="#15803d"] { color: #6ee7b7 !important; } [data-theme="dark"] .em-container [style*="#15803d"] { color: #6ee7b7 !important; } [data-theme="dark"] .rep-card [style*="#15803d"] { color: #6ee7b7 !important; } [data-theme="dark"] .settings-page [style*="#15803d"] { color: #6ee7b7 !important; } [data-theme="dark"] .fin-container [style*="#166534"] { color: #6ee7b7 !important; } [data-theme="dark"] .services-container [style*="#166534"] { color: #6ee7b7 !important; } [data-theme="dark"] .ms-container [style*="#166534"] { color: #6ee7b7 !important; } [data-theme="dark"] .tp-container [style*="#166534"] { color: #6ee7b7 !important; } [data-theme="dark"] .al-container [style*="#166534"] { color: #6ee7b7 !important; } [data-theme="dark"] .em-container [style*="#166534"] { color: #6ee7b7 !important; } [data-theme="dark"] .rep-card [style*="#166534"] { color: #6ee7b7 !important; } [data-theme="dark"] .settings-page [style*="#166534"] { color: #6ee7b7 !important; } [data-theme="dark"] .fin-container [style*="#2e7d32"] { color: #6ee7b7 !important; } [data-theme="dark"] .services-container [style*="#2e7d32"] { color: #6ee7b7 !important; } [data-theme="dark"] .ms-container [style*="#2e7d32"] { color: #6ee7b7 !important; } [data-theme="dark"] .tp-container [style*="#2e7d32"] { color: #6ee7b7 !important; } [data-theme="dark"] .al-container [style*="#2e7d32"] { color: #6ee7b7 !important; } [data-theme="dark"] .em-container [style*="#2e7d32"] { color: #6ee7b7 !important; } [data-theme="dark"] .rep-card [style*="#2e7d32"] { color: #6ee7b7 !important; } [data-theme="dark"] .settings-page [style*="#2e7d32"] { color: #6ee7b7 !important; } [data-theme="dark"] .fin-container [style*="#30d158"] { color: #6ee7b7 !important; } [data-theme="dark"] .services-container [style*="#30d158"] { color: #6ee7b7 !important; } [data-theme="dark"] .ms-container [style*="#30d158"] { color: #6ee7b7 !important; } [data-theme="dark"] .tp-container [style*="#30d158"] { color: #6ee7b7 !important; } [data-theme="dark"] .al-container [style*="#30d158"] { color: #6ee7b7 !important; } [data-theme="dark"] .em-container [style*="#30d158"] { color: #6ee7b7 !important; } [data-theme="dark"] .rep-card [style*="#30d158"] { color: #6ee7b7 !important; } [data-theme="dark"] .settings-page [style*="#30d158"] { color: #6ee7b7 !important; } [data-theme="dark"] .fin-container [style*="#34c759"] { color: #6ee7b7 !important; } [data-theme="dark"] .services-container [style*="#34c759"] { color: #6ee7b7 !important; } [data-theme="dark"] .ms-container [style*="#34c759"] { color: #6ee7b7 !important; } [data-theme="dark"] .tp-container [style*="#34c759"] { color: #6ee7b7 !important; } [data-theme="dark"] .al-container [style*="#34c759"] { color: #6ee7b7 !important; } [data-theme="dark"] .em-container [style*="#34c759"] { color: #6ee7b7 !important; } [data-theme="dark"] .rep-card [style*="#34c759"] { color: #6ee7b7 !important; } [data-theme="dark"] .settings-page [style*="#34c759"] { color: #6ee7b7 !important; } [data-theme="dark"] .fin-container [style*="#047857"] { color: #6ee7b7 !important; } [data-theme="dark"] .services-container [style*="#047857"] { color: #6ee7b7 !important; } [data-theme="dark"] .ms-container [style*="#047857"] { color: #6ee7b7 !important; } [data-theme="dark"] .tp-container [style*="#047857"] { color: #6ee7b7 !important; } [data-theme="dark"] .al-container [style*="#047857"] { color: #6ee7b7 !important; } [data-theme="dark"] .em-container [style*="#047857"] { color: #6ee7b7 !important; } [data-theme="dark"] .rep-card [style*="#047857"] { color: #6ee7b7 !important; } [data-theme="dark"] .settings-page [style*="#047857"] { color: #6ee7b7 !important; } [data-theme="dark"] .fin-container [style*="#065f46"] { color: #6ee7b7 !important; } [data-theme="dark"] .services-container [style*="#065f46"] { color: #6ee7b7 !important; } [data-theme="dark"] .ms-container [style*="#065f46"] { color: #6ee7b7 !important; } [data-theme="dark"] .tp-container [style*="#065f46"] { color: #6ee7b7 !important; } [data-theme="dark"] .al-container [style*="#065f46"] { color: #6ee7b7 !important; } [data-theme="dark"] .em-container [style*="#065f46"] { color: #6ee7b7 !important; } [data-theme="dark"] .rep-card [style*="#065f46"] { color: #6ee7b7 !important; } [data-theme="dark"] .settings-page [style*="#065f46"] { color: #6ee7b7 !important; } [data-theme="dark"] .fin-container [style*="#b91c1c"] { color: #fca5a5 !important; } [data-theme="dark"] .services-container [style*="#b91c1c"] { color: #fca5a5 !important; } [data-theme="dark"] .ms-container [style*="#b91c1c"] { color: #fca5a5 !important; } [data-theme="dark"] .tp-container [style*="#b91c1c"] { color: #fca5a5 !important; } [data-theme="dark"] .al-container [style*="#b91c1c"] { color: #fca5a5 !important; } [data-theme="dark"] .em-container [style*="#b91c1c"] { color: #fca5a5 !important; } [data-theme="dark"] .rep-card [style*="#b91c1c"] { color: #fca5a5 !important; } [data-theme="dark"] .settings-page [style*="#b91c1c"] { color: #fca5a5 !important; } [data-theme="dark"] .fin-container [style*="#991b1b"] { color: #fca5a5 !important; } [data-theme="dark"] .services-container [style*="#991b1b"] { color: #fca5a5 !important; } [data-theme="dark"] .ms-container [style*="#991b1b"] { color: #fca5a5 !important; } [data-theme="dark"] .tp-container [style*="#991b1b"] { color: #fca5a5 !important; } [data-theme="dark"] .al-container [style*="#991b1b"] { color: #fca5a5 !important; } [data-theme="dark"] .em-container [style*="#991b1b"] { color: #fca5a5 !important; } [data-theme="dark"] .rep-card [style*="#991b1b"] { color: #fca5a5 !important; } [data-theme="dark"] .settings-page [style*="#991b1b"] { color: #fca5a5 !important; } [data-theme="dark"] .fin-container [style*="#dc2626"] { color: #fca5a5 !important; } [data-theme="dark"] .services-container [style*="#dc2626"] { color: #fca5a5 !important; } [data-theme="dark"] .ms-container [style*="#dc2626"] { color: #fca5a5 !important; } [data-theme="dark"] .tp-container [style*="#dc2626"] { color: #fca5a5 !important; } [data-theme="dark"] .al-container [style*="#dc2626"] { color: #fca5a5 !important; } [data-theme="dark"] .em-container [style*="#dc2626"] { color: #fca5a5 !important; } [data-theme="dark"] .rep-card [style*="#dc2626"] { color: #fca5a5 !important; } [data-theme="dark"] .settings-page [style*="#dc2626"] { color: #fca5a5 !important; } [data-theme="dark"] .fin-container [style*="#ef4444"] { color: #fca5a5 !important; } [data-theme="dark"] .services-container [style*="#ef4444"] { color: #fca5a5 !important; } [data-theme="dark"] .ms-container [style*="#ef4444"] { color: #fca5a5 !important; } [data-theme="dark"] .tp-container [style*="#ef4444"] { color: #fca5a5 !important; } [data-theme="dark"] .al-container [style*="#ef4444"] { color: #fca5a5 !important; } [data-theme="dark"] .em-container [style*="#ef4444"] { color: #fca5a5 !important; } [data-theme="dark"] .rep-card [style*="#ef4444"] { color: #fca5a5 !important; } [data-theme="dark"] .settings-page [style*="#ef4444"] { color: #fca5a5 !important; } [data-theme="dark"] .fin-container [style*="#b45309"] { color: #fcd34d !important; } [data-theme="dark"] .services-container [style*="#b45309"] { color: #fcd34d !important; } [data-theme="dark"] .ms-container [style*="#b45309"] { color: #fcd34d !important; } [data-theme="dark"] .tp-container [style*="#b45309"] { color: #fcd34d !important; } [data-theme="dark"] .al-container [style*="#b45309"] { color: #fcd34d !important; } [data-theme="dark"] .em-container [style*="#b45309"] { color: #fcd34d !important; } [data-theme="dark"] .rep-card [style*="#b45309"] { color: #fcd34d !important; } [data-theme="dark"] .settings-page [style*="#b45309"] { color: #fcd34d !important; } [data-theme="dark"] .fin-container [style*="#92400e"] { color: #fcd34d !important; } [data-theme="dark"] .services-container [style*="#92400e"] { color: #fcd34d !important; } [data-theme="dark"] .ms-container [style*="#92400e"] { color: #fcd34d !important; } [data-theme="dark"] .tp-container [style*="#92400e"] { color: #fcd34d !important; } [data-theme="dark"] .al-container [style*="#92400e"] { color: #fcd34d !important; } [data-theme="dark"] .em-container [style*="#92400e"] { color: #fcd34d !important; } [data-theme="dark"] .rep-card [style*="#92400e"] { color: #fcd34d !important; } [data-theme="dark"] .settings-page [style*="#92400e"] { color: #fcd34d !important; } [data-theme="dark"] .fin-container [style*="#9a3412"] { color: #fdba74 !important; } [data-theme="dark"] .services-container [style*="#9a3412"] { color: #fdba74 !important; } [data-theme="dark"] .ms-container [style*="#9a3412"] { color: #fdba74 !important; } [data-theme="dark"] .tp-container [style*="#9a3412"] { color: #fdba74 !important; } [data-theme="dark"] .al-container [style*="#9a3412"] { color: #fdba74 !important; } [data-theme="dark"] .em-container [style*="#9a3412"] { color: #fdba74 !important; } [data-theme="dark"] .rep-card [style*="#9a3412"] { color: #fdba74 !important; } [data-theme="dark"] .settings-page [style*="#9a3412"] { color: #fdba74 !important; } [data-theme="dark"] .fin-container [style*="#c2410c"] { color: #fdba74 !important; } [data-theme="dark"] .services-container [style*="#c2410c"] { color: #fdba74 !important; } [data-theme="dark"] .ms-container [style*="#c2410c"] { color: #fdba74 !important; } [data-theme="dark"] .tp-container [style*="#c2410c"] { color: #fdba74 !important; } [data-theme="dark"] .al-container [style*="#c2410c"] { color: #fdba74 !important; } [data-theme="dark"] .em-container [style*="#c2410c"] { color: #fdba74 !important; } [data-theme="dark"] .rep-card [style*="#c2410c"] { color: #fdba74 !important; } [data-theme="dark"] .settings-page [style*="#c2410c"] { color: #fdba74 !important; } [data-theme="dark"] .fin-container [style*="#d97706"] { color: #fcd34d !important; } [data-theme="dark"] .services-container [style*="#d97706"] { color: #fcd34d !important; } [data-theme="dark"] .ms-container [style*="#d97706"] { color: #fcd34d !important; } [data-theme="dark"] .tp-container [style*="#d97706"] { color: #fcd34d !important; } [data-theme="dark"] .al-container [style*="#d97706"] { color: #fcd34d !important; } [data-theme="dark"] .em-container [style*="#d97706"] { color: #fcd34d !important; } [data-theme="dark"] .rep-card [style*="#d97706"] { color: #fcd34d !important; } [data-theme="dark"] .settings-page [style*="#d97706"] { color: #fcd34d !important; } [data-theme="dark"] .fin-container [style*="#f59e0b"] { color: #fcd34d !important; } [data-theme="dark"] .services-container [style*="#f59e0b"] { color: #fcd34d !important; } [data-theme="dark"] .ms-container [style*="#f59e0b"] { color: #fcd34d !important; } [data-theme="dark"] .tp-container [style*="#f59e0b"] { color: #fcd34d !important; } [data-theme="dark"] .al-container [style*="#f59e0b"] { color: #fcd34d !important; } [data-theme="dark"] .em-container [style*="#f59e0b"] { color: #fcd34d !important; } [data-theme="dark"] .rep-card [style*="#f59e0b"] { color: #fcd34d !important; } [data-theme="dark"] .settings-page [style*="#f59e0b"] { color: #fcd34d !important; } [data-theme="dark"] .fin-container [style*="#f97316"] { color: #fdba74 !important; } [data-theme="dark"] .services-container [style*="#f97316"] { color: #fdba74 !important; } [data-theme="dark"] .ms-container [style*="#f97316"] { color: #fdba74 !important; } [data-theme="dark"] .tp-container [style*="#f97316"] { color: #fdba74 !important; } [data-theme="dark"] .al-container [style*="#f97316"] { color: #fdba74 !important; } [data-theme="dark"] .em-container [style*="#f97316"] { color: #fdba74 !important; } [data-theme="dark"] .rep-card [style*="#f97316"] { color: #fdba74 !important; } [data-theme="dark"] .settings-page [style*="#f97316"] { color: #fdba74 !important; } [data-theme="dark"] .fin-container [style*="#0369a1"] { color: #7dd3fc !important; } [data-theme="dark"] .services-container [style*="#0369a1"] { color: #7dd3fc !important; } [data-theme="dark"] .ms-container [style*="#0369a1"] { color: #7dd3fc !important; } [data-theme="dark"] .tp-container [style*="#0369a1"] { color: #7dd3fc !important; } [data-theme="dark"] .al-container [style*="#0369a1"] { color: #7dd3fc !important; } [data-theme="dark"] .em-container [style*="#0369a1"] { color: #7dd3fc !important; } [data-theme="dark"] .rep-card [style*="#0369a1"] { color: #7dd3fc !important; } [data-theme="dark"] .settings-page [style*="#0369a1"] { color: #7dd3fc !important; } [data-theme="dark"] .fin-container [style*="#075985"] { color: #7dd3fc !important; } [data-theme="dark"] .services-container [style*="#075985"] { color: #7dd3fc !important; } [data-theme="dark"] .ms-container [style*="#075985"] { color: #7dd3fc !important; } [data-theme="dark"] .tp-container [style*="#075985"] { color: #7dd3fc !important; } [data-theme="dark"] .al-container [style*="#075985"] { color: #7dd3fc !important; } [data-theme="dark"] .em-container [style*="#075985"] { color: #7dd3fc !important; } [data-theme="dark"] .rep-card [style*="#075985"] { color: #7dd3fc !important; } [data-theme="dark"] .settings-page [style*="#075985"] { color: #7dd3fc !important; } [data-theme="dark"] .fin-container [style*="#0c4a6e"] { color: #7dd3fc !important; } [data-theme="dark"] .services-container [style*="#0c4a6e"] { color: #7dd3fc !important; } [data-theme="dark"] .ms-container [style*="#0c4a6e"] { color: #7dd3fc !important; } [data-theme="dark"] .tp-container [style*="#0c4a6e"] { color: #7dd3fc !important; } [data-theme="dark"] .al-container [style*="#0c4a6e"] { color: #7dd3fc !important; } [data-theme="dark"] .em-container [style*="#0c4a6e"] { color: #7dd3fc !important; } [data-theme="dark"] .rep-card [style*="#0c4a6e"] { color: #7dd3fc !important; } [data-theme="dark"] .settings-page [style*="#0c4a6e"] { color: #7dd3fc !important; } [data-theme="dark"] .fin-container [style*="#0ea5e9"] { color: #7dd3fc !important; } [data-theme="dark"] .services-container [style*="#0ea5e9"] { color: #7dd3fc !important; } [data-theme="dark"] .ms-container [style*="#0ea5e9"] { color: #7dd3fc !important; } [data-theme="dark"] .tp-container [style*="#0ea5e9"] { color: #7dd3fc !important; } [data-theme="dark"] .al-container [style*="#0ea5e9"] { color: #7dd3fc !important; } [data-theme="dark"] .em-container [style*="#0ea5e9"] { color: #7dd3fc !important; } [data-theme="dark"] .rep-card [style*="#0ea5e9"] { color: #7dd3fc !important; } [data-theme="dark"] .settings-page [style*="#0ea5e9"] { color: #7dd3fc !important; } [data-theme="dark"] .fin-container [style*="#1e40af"] { color: #93c5fd !important; } [data-theme="dark"] .services-container [style*="#1e40af"] { color: #93c5fd !important; } [data-theme="dark"] .ms-container [style*="#1e40af"] { color: #93c5fd !important; } [data-theme="dark"] .tp-container [style*="#1e40af"] { color: #93c5fd !important; } [data-theme="dark"] .al-container [style*="#1e40af"] { color: #93c5fd !important; } [data-theme="dark"] .em-container [style*="#1e40af"] { color: #93c5fd !important; } [data-theme="dark"] .rep-card [style*="#1e40af"] { color: #93c5fd !important; } [data-theme="dark"] .settings-page [style*="#1e40af"] { color: #93c5fd !important; } [data-theme="dark"] .fin-container [style*="#2563eb"] { color: #93c5fd !important; } [data-theme="dark"] .services-container [style*="#2563eb"] { color: #93c5fd !important; } [data-theme="dark"] .ms-container [style*="#2563eb"] { color: #93c5fd !important; } [data-theme="dark"] .tp-container [style*="#2563eb"] { color: #93c5fd !important; } [data-theme="dark"] .al-container [style*="#2563eb"] { color: #93c5fd !important; } [data-theme="dark"] .em-container [style*="#2563eb"] { color: #93c5fd !important; } [data-theme="dark"] .rep-card [style*="#2563eb"] { color: #93c5fd !important; } [data-theme="dark"] .settings-page [style*="#2563eb"] { color: #93c5fd !important; } [data-theme="dark"] .fin-container [style*="background: white"], [data-theme="dark"] .fin-container [style*="background:white"] { background: var(--bg-surface) !important; } [data-theme="dark"] .services-container [style*="background: white"], [data-theme="dark"] .services-container [style*="background:white"] { background: var(--bg-surface) !important; } [data-theme="dark"] .ms-container [style*="background: white"], [data-theme="dark"] .ms-container [style*="background:white"] { background: var(--bg-surface) !important; } [data-theme="dark"] .tp-container [style*="background: white"], [data-theme="dark"] .tp-container [style*="background:white"] { background: var(--bg-surface) !important; } [data-theme="dark"] .al-container [style*="background: white"], [data-theme="dark"] .al-container [style*="background:white"] { background: var(--bg-surface) !important; } [data-theme="dark"] .em-container [style*="background: white"], [data-theme="dark"] .em-container [style*="background:white"] { background: var(--bg-surface) !important; } [data-theme="dark"] .rep-card [style*="background: white"], [data-theme="dark"] .rep-card [style*="background:white"] { background: var(--bg-surface) !important; } [data-theme="dark"] .settings-page [style*="background: white"], [data-theme="dark"] .settings-page [style*="background:white"] { background: var(--bg-surface) !important; } [data-theme="dark"] .fin-container [style*="background: #f5f5f7"], [data-theme="dark"] .fin-container [style*="background:#f5f5f7"] { background: var(--bg-subtle) !important; } [data-theme="dark"] .services-container [style*="background: #f5f5f7"], [data-theme="dark"] .services-container [style*="background:#f5f5f7"] { background: var(--bg-subtle) !important; } [data-theme="dark"] .ms-container [style*="background: #f5f5f7"], [data-theme="dark"] .ms-container [style*="background:#f5f5f7"] { background: var(--bg-subtle) !important; } [data-theme="dark"] .tp-container [style*="background: #f5f5f7"], [data-theme="dark"] .tp-container [style*="background:#f5f5f7"] { background: var(--bg-subtle) !important; } [data-theme="dark"] .al-container [style*="background: #f5f5f7"], [data-theme="dark"] .al-container [style*="background:#f5f5f7"] { background: var(--bg-subtle) !important; } [data-theme="dark"] .em-container [style*="background: #f5f5f7"], [data-theme="dark"] .em-container [style*="background:#f5f5f7"] { background: var(--bg-subtle) !important; } [data-theme="dark"] .rep-card [style*="background: #f5f5f7"], [data-theme="dark"] .rep-card [style*="background:#f5f5f7"] { background: var(--bg-subtle) !important; } [data-theme="dark"] .settings-page [style*="background: #f5f5f7"], [data-theme="dark"] .settings-page [style*="background:#f5f5f7"] { background: var(--bg-subtle) !important; } [data-theme="dark"] .fin-container [style*="background: #fafafa"], [data-theme="dark"] .fin-container [style*="background:#fafafa"] { background: var(--bg-subtle) !important; } [data-theme="dark"] .services-container [style*="background: #fafafa"], [data-theme="dark"] .services-container [style*="background:#fafafa"] { background: var(--bg-subtle) !important; } [data-theme="dark"] .ms-container [style*="background: #fafafa"], [data-theme="dark"] .ms-container [style*="background:#fafafa"] { background: var(--bg-subtle) !important; } [data-theme="dark"] .tp-container [style*="background: #fafafa"], [data-theme="dark"] .tp-container [style*="background:#fafafa"] { background: var(--bg-subtle) !important; } [data-theme="dark"] .al-container [style*="background: #fafafa"], [data-theme="dark"] .al-container [style*="background:#fafafa"] { background: var(--bg-subtle) !important; } [data-theme="dark"] .em-container [style*="background: #fafafa"], [data-theme="dark"] .em-container [style*="background:#fafafa"] { background: var(--bg-subtle) !important; } [data-theme="dark"] .rep-card [style*="background: #fafafa"], [data-theme="dark"] .rep-card [style*="background:#fafafa"] { background: var(--bg-subtle) !important; } [data-theme="dark"] .settings-page [style*="background: #fafafa"], [data-theme="dark"] .settings-page [style*="background:#fafafa"] { background: var(--bg-subtle) !important; } [data-theme="dark"] .fin-container [style*="background: #fafafc"], [data-theme="dark"] .fin-container [style*="background:#fafafc"] { background: var(--bg-subtle) !important; } [data-theme="dark"] .services-container [style*="background: #fafafc"], [data-theme="dark"] .services-container [style*="background:#fafafc"] { background: var(--bg-subtle) !important; } [data-theme="dark"] .ms-container [style*="background: #fafafc"], [data-theme="dark"] .ms-container [style*="background:#fafafc"] { background: var(--bg-subtle) !important; } [data-theme="dark"] .tp-container [style*="background: #fafafc"], [data-theme="dark"] .tp-container [style*="background:#fafafc"] { background: var(--bg-subtle) !important; } [data-theme="dark"] .al-container [style*="background: #fafafc"], [data-theme="dark"] .al-container [style*="background:#fafafc"] { background: var(--bg-subtle) !important; } [data-theme="dark"] .em-container [style*="background: #fafafc"], [data-theme="dark"] .em-container [style*="background:#fafafc"] { background: var(--bg-subtle) !important; } [data-theme="dark"] .rep-card [style*="background: #fafafc"], [data-theme="dark"] .rep-card [style*="background:#fafafc"] { background: var(--bg-subtle) !important; } [data-theme="dark"] .settings-page [style*="background: #fafafc"], [data-theme="dark"] .settings-page [style*="background:#fafafc"] { background: var(--bg-subtle) !important; } [data-theme="dark"] .fin-container [style*="background: #f3f4f6"], [data-theme="dark"] .fin-container [style*="background:#f3f4f6"] { background: var(--bg-subtle) !important; } [data-theme="dark"] .services-container [style*="background: #f3f4f6"], [data-theme="dark"] .services-container [style*="background:#f3f4f6"] { background: var(--bg-subtle) !important; } [data-theme="dark"] .ms-container [style*="background: #f3f4f6"], [data-theme="dark"] .ms-container [style*="background:#f3f4f6"] { background: var(--bg-subtle) !important; } [data-theme="dark"] .tp-container [style*="background: #f3f4f6"], [data-theme="dark"] .tp-container [style*="background:#f3f4f6"] { background: var(--bg-subtle) !important; } [data-theme="dark"] .al-container [style*="background: #f3f4f6"], [data-theme="dark"] .al-container [style*="background:#f3f4f6"] { background: var(--bg-subtle) !important; } [data-theme="dark"] .em-container [style*="background: #f3f4f6"], [data-theme="dark"] .em-container [style*="background:#f3f4f6"] { background: var(--bg-subtle) !important; } [data-theme="dark"] .rep-card [style*="background: #f3f4f6"], [data-theme="dark"] .rep-card [style*="background:#f3f4f6"] { background: var(--bg-subtle) !important; } [data-theme="dark"] .settings-page [style*="background: #f3f4f6"], [data-theme="dark"] .settings-page [style*="background:#f3f4f6"] { background: var(--bg-subtle) !important; } [data-theme="dark"] .fin-container [style*="background: #f1f5f9"], [data-theme="dark"] .fin-container [style*="background:#f1f5f9"] { background: var(--bg-muted) !important; } [data-theme="dark"] .services-container [style*="background: #f1f5f9"], [data-theme="dark"] .services-container [style*="background:#f1f5f9"] { background: var(--bg-muted) !important; } [data-theme="dark"] .ms-container [style*="background: #f1f5f9"], [data-theme="dark"] .ms-container [style*="background:#f1f5f9"] { background: var(--bg-muted) !important; } [data-theme="dark"] .tp-container [style*="background: #f1f5f9"], [data-theme="dark"] .tp-container [style*="background:#f1f5f9"] { background: var(--bg-muted) !important; } [data-theme="dark"] .al-container [style*="background: #f1f5f9"], [data-theme="dark"] .al-container [style*="background:#f1f5f9"] { background: var(--bg-muted) !important; } [data-theme="dark"] .em-container [style*="background: #f1f5f9"], [data-theme="dark"] .em-container [style*="background:#f1f5f9"] { background: var(--bg-muted) !important; } [data-theme="dark"] .rep-card [style*="background: #f1f5f9"], [data-theme="dark"] .rep-card [style*="background:#f1f5f9"] { background: var(--bg-muted) !important; } [data-theme="dark"] .settings-page [style*="background: #f1f5f9"], [data-theme="dark"] .settings-page [style*="background:#f1f5f9"] { background: var(--bg-muted) !important; } [data-theme="dark"] .fin-container [style*="background: #f9fafb"], [data-theme="dark"] .fin-container [style*="background:#f9fafb"] { background: var(--bg-subtle) !important; } [data-theme="dark"] .services-container [style*="background: #f9fafb"], [data-theme="dark"] .services-container [style*="background:#f9fafb"] { background: var(--bg-subtle) !important; } [data-theme="dark"] .ms-container [style*="background: #f9fafb"], [data-theme="dark"] .ms-container [style*="background:#f9fafb"] { background: var(--bg-subtle) !important; } [data-theme="dark"] .tp-container [style*="background: #f9fafb"], [data-theme="dark"] .tp-container [style*="background:#f9fafb"] { background: var(--bg-subtle) !important; } [data-theme="dark"] .al-container [style*="background: #f9fafb"], [data-theme="dark"] .al-container [style*="background:#f9fafb"] { background: var(--bg-subtle) !important; } [data-theme="dark"] .em-container [style*="background: #f9fafb"], [data-theme="dark"] .em-container [style*="background:#f9fafb"] { background: var(--bg-subtle) !important; } [data-theme="dark"] .rep-card [style*="background: #f9fafb"], [data-theme="dark"] .rep-card [style*="background:#f9fafb"] { background: var(--bg-subtle) !important; } [data-theme="dark"] .settings-page [style*="background: #f9fafb"], [data-theme="dark"] .settings-page [style*="background:#f9fafb"] { background: var(--bg-subtle) !important; } [data-theme="dark"] .fin-container [style*="background: #eee"], [data-theme="dark"] .fin-container [style*="background:#eee"] { background: var(--bg-muted) !important; } [data-theme="dark"] .services-container [style*="background: #eee"], [data-theme="dark"] .services-container [style*="background:#eee"] { background: var(--bg-muted) !important; } [data-theme="dark"] .ms-container [style*="background: #eee"], [data-theme="dark"] .ms-container [style*="background:#eee"] { background: var(--bg-muted) !important; } [data-theme="dark"] .tp-container [style*="background: #eee"], [data-theme="dark"] .tp-container [style*="background:#eee"] { background: var(--bg-muted) !important; } [data-theme="dark"] .al-container [style*="background: #eee"], [data-theme="dark"] .al-container [style*="background:#eee"] { background: var(--bg-muted) !important; } [data-theme="dark"] .em-container [style*="background: #eee"], [data-theme="dark"] .em-container [style*="background:#eee"] { background: var(--bg-muted) !important; } [data-theme="dark"] .rep-card [style*="background: #eee"], [data-theme="dark"] .rep-card [style*="background:#eee"] { background: var(--bg-muted) !important; } [data-theme="dark"] .settings-page [style*="background: #eee"], [data-theme="dark"] .settings-page [style*="background:#eee"] { background: var(--bg-muted) !important; } [data-theme="dark"] .fin-container [style*="background: #e8f5e9"], [data-theme="dark"] .fin-container [style*="background:#e8f5e9"] { background: rgba(16, 185, 129, 0.18) !important; } [data-theme="dark"] .services-container [style*="background: #e8f5e9"], [data-theme="dark"] .services-container [style*="background:#e8f5e9"] { background: rgba(16, 185, 129, 0.18) !important; } [data-theme="dark"] .ms-container [style*="background: #e8f5e9"], [data-theme="dark"] .ms-container [style*="background:#e8f5e9"] { background: rgba(16, 185, 129, 0.18) !important; } [data-theme="dark"] .tp-container [style*="background: #e8f5e9"], [data-theme="dark"] .tp-container [style*="background:#e8f5e9"] { background: rgba(16, 185, 129, 0.18) !important; } [data-theme="dark"] .al-container [style*="background: #e8f5e9"], [data-theme="dark"] .al-container [style*="background:#e8f5e9"] { background: rgba(16, 185, 129, 0.18) !important; } [data-theme="dark"] .em-container [style*="background: #e8f5e9"], [data-theme="dark"] .em-container [style*="background:#e8f5e9"] { background: rgba(16, 185, 129, 0.18) !important; } [data-theme="dark"] .rep-card [style*="background: #e8f5e9"], [data-theme="dark"] .rep-card [style*="background:#e8f5e9"] { background: rgba(16, 185, 129, 0.18) !important; } [data-theme="dark"] .settings-page [style*="background: #e8f5e9"], [data-theme="dark"] .settings-page [style*="background:#e8f5e9"] { background: rgba(16, 185, 129, 0.18) !important; } [data-theme="dark"] .fin-container [style*="background: #c8e6c9"], [data-theme="dark"] .fin-container [style*="background:#c8e6c9"] { background: rgba(16, 185, 129, 0.40) !important; } [data-theme="dark"] .services-container [style*="background: #c8e6c9"], [data-theme="dark"] .services-container [style*="background:#c8e6c9"] { background: rgba(16, 185, 129, 0.40) !important; } [data-theme="dark"] .ms-container [style*="background: #c8e6c9"], [data-theme="dark"] .ms-container [style*="background:#c8e6c9"] { background: rgba(16, 185, 129, 0.40) !important; } [data-theme="dark"] .tp-container [style*="background: #c8e6c9"], [data-theme="dark"] .tp-container [style*="background:#c8e6c9"] { background: rgba(16, 185, 129, 0.40) !important; } [data-theme="dark"] .al-container [style*="background: #c8e6c9"], [data-theme="dark"] .al-container [style*="background:#c8e6c9"] { background: rgba(16, 185, 129, 0.40) !important; } [data-theme="dark"] .em-container [style*="background: #c8e6c9"], [data-theme="dark"] .em-container [style*="background:#c8e6c9"] { background: rgba(16, 185, 129, 0.40) !important; } [data-theme="dark"] .rep-card [style*="background: #c8e6c9"], [data-theme="dark"] .rep-card [style*="background:#c8e6c9"] { background: rgba(16, 185, 129, 0.40) !important; } [data-theme="dark"] .settings-page [style*="background: #c8e6c9"], [data-theme="dark"] .settings-page [style*="background:#c8e6c9"] { background: rgba(16, 185, 129, 0.40) !important; } [data-theme="dark"] .fin-container [style*="background: #bbf7d0"], [data-theme="dark"] .fin-container [style*="background:#bbf7d0"] { background: rgba(16, 185, 129, 0.30) !important; } [data-theme="dark"] .services-container [style*="background: #bbf7d0"], [data-theme="dark"] .services-container [style*="background:#bbf7d0"] { background: rgba(16, 185, 129, 0.30) !important; } [data-theme="dark"] .ms-container [style*="background: #bbf7d0"], [data-theme="dark"] .ms-container [style*="background:#bbf7d0"] { background: rgba(16, 185, 129, 0.30) !important; } [data-theme="dark"] .tp-container [style*="background: #bbf7d0"], [data-theme="dark"] .tp-container [style*="background:#bbf7d0"] { background: rgba(16, 185, 129, 0.30) !important; } [data-theme="dark"] .al-container [style*="background: #bbf7d0"], [data-theme="dark"] .al-container [style*="background:#bbf7d0"] { background: rgba(16, 185, 129, 0.30) !important; } [data-theme="dark"] .em-container [style*="background: #bbf7d0"], [data-theme="dark"] .em-container [style*="background:#bbf7d0"] { background: rgba(16, 185, 129, 0.30) !important; } [data-theme="dark"] .rep-card [style*="background: #bbf7d0"], [data-theme="dark"] .rep-card [style*="background:#bbf7d0"] { background: rgba(16, 185, 129, 0.30) !important; } [data-theme="dark"] .settings-page [style*="background: #bbf7d0"], [data-theme="dark"] .settings-page [style*="background:#bbf7d0"] { background: rgba(16, 185, 129, 0.30) !important; } [data-theme="dark"] .fin-container [style*="background: #d1fae5"], [data-theme="dark"] .fin-container [style*="background:#d1fae5"] { background: rgba(16, 185, 129, 0.18) !important; } [data-theme="dark"] .services-container [style*="background: #d1fae5"], [data-theme="dark"] .services-container [style*="background:#d1fae5"] { background: rgba(16, 185, 129, 0.18) !important; } [data-theme="dark"] .ms-container [style*="background: #d1fae5"], [data-theme="dark"] .ms-container [style*="background:#d1fae5"] { background: rgba(16, 185, 129, 0.18) !important; } [data-theme="dark"] .tp-container [style*="background: #d1fae5"], [data-theme="dark"] .tp-container [style*="background:#d1fae5"] { background: rgba(16, 185, 129, 0.18) !important; } [data-theme="dark"] .al-container [style*="background: #d1fae5"], [data-theme="dark"] .al-container [style*="background:#d1fae5"] { background: rgba(16, 185, 129, 0.18) !important; } [data-theme="dark"] .em-container [style*="background: #d1fae5"], [data-theme="dark"] .em-container [style*="background:#d1fae5"] { background: rgba(16, 185, 129, 0.18) !important; } [data-theme="dark"] .rep-card [style*="background: #d1fae5"], [data-theme="dark"] .rep-card [style*="background:#d1fae5"] { background: rgba(16, 185, 129, 0.18) !important; } [data-theme="dark"] .settings-page [style*="background: #d1fae5"], [data-theme="dark"] .settings-page [style*="background:#d1fae5"] { background: rgba(16, 185, 129, 0.18) !important; } [data-theme="dark"] .fin-container [style*="background: #dcfce7"], [data-theme="dark"] .fin-container [style*="background:#dcfce7"] { background: rgba(16, 185, 129, 0.18) !important; } [data-theme="dark"] .services-container [style*="background: #dcfce7"], [data-theme="dark"] .services-container [style*="background:#dcfce7"] { background: rgba(16, 185, 129, 0.18) !important; } [data-theme="dark"] .ms-container [style*="background: #dcfce7"], [data-theme="dark"] .ms-container [style*="background:#dcfce7"] { background: rgba(16, 185, 129, 0.18) !important; } [data-theme="dark"] .tp-container [style*="background: #dcfce7"], [data-theme="dark"] .tp-container [style*="background:#dcfce7"] { background: rgba(16, 185, 129, 0.18) !important; } [data-theme="dark"] .al-container [style*="background: #dcfce7"], [data-theme="dark"] .al-container [style*="background:#dcfce7"] { background: rgba(16, 185, 129, 0.18) !important; } [data-theme="dark"] .em-container [style*="background: #dcfce7"], [data-theme="dark"] .em-container [style*="background:#dcfce7"] { background: rgba(16, 185, 129, 0.18) !important; } [data-theme="dark"] .rep-card [style*="background: #dcfce7"], [data-theme="dark"] .rep-card [style*="background:#dcfce7"] { background: rgba(16, 185, 129, 0.18) !important; } [data-theme="dark"] .settings-page [style*="background: #dcfce7"], [data-theme="dark"] .settings-page [style*="background:#dcfce7"] { background: rgba(16, 185, 129, 0.18) !important; } [data-theme="dark"] .fin-container [style*="background: #fecaca"], [data-theme="dark"] .fin-container [style*="background:#fecaca"] { background: rgba(239, 68, 68, 0.30) !important; } [data-theme="dark"] .services-container [style*="background: #fecaca"], [data-theme="dark"] .services-container [style*="background:#fecaca"] { background: rgba(239, 68, 68, 0.30) !important; } [data-theme="dark"] .ms-container [style*="background: #fecaca"], [data-theme="dark"] .ms-container [style*="background:#fecaca"] { background: rgba(239, 68, 68, 0.30) !important; } [data-theme="dark"] .tp-container [style*="background: #fecaca"], [data-theme="dark"] .tp-container [style*="background:#fecaca"] { background: rgba(239, 68, 68, 0.30) !important; } [data-theme="dark"] .al-container [style*="background: #fecaca"], [data-theme="dark"] .al-container [style*="background:#fecaca"] { background: rgba(239, 68, 68, 0.30) !important; } [data-theme="dark"] .em-container [style*="background: #fecaca"], [data-theme="dark"] .em-container [style*="background:#fecaca"] { background: rgba(239, 68, 68, 0.30) !important; } [data-theme="dark"] .rep-card [style*="background: #fecaca"], [data-theme="dark"] .rep-card [style*="background:#fecaca"] { background: rgba(239, 68, 68, 0.30) !important; } [data-theme="dark"] .settings-page [style*="background: #fecaca"], [data-theme="dark"] .settings-page [style*="background:#fecaca"] { background: rgba(239, 68, 68, 0.30) !important; } [data-theme="dark"] .fin-container [style*="background: #fee2e2"], [data-theme="dark"] .fin-container [style*="background:#fee2e2"] { background: rgba(239, 68, 68, 0.18) !important; } [data-theme="dark"] .services-container [style*="background: #fee2e2"], [data-theme="dark"] .services-container [style*="background:#fee2e2"] { background: rgba(239, 68, 68, 0.18) !important; } [data-theme="dark"] .ms-container [style*="background: #fee2e2"], [data-theme="dark"] .ms-container [style*="background:#fee2e2"] { background: rgba(239, 68, 68, 0.18) !important; } [data-theme="dark"] .tp-container [style*="background: #fee2e2"], [data-theme="dark"] .tp-container [style*="background:#fee2e2"] { background: rgba(239, 68, 68, 0.18) !important; } [data-theme="dark"] .al-container [style*="background: #fee2e2"], [data-theme="dark"] .al-container [style*="background:#fee2e2"] { background: rgba(239, 68, 68, 0.18) !important; } [data-theme="dark"] .em-container [style*="background: #fee2e2"], [data-theme="dark"] .em-container [style*="background:#fee2e2"] { background: rgba(239, 68, 68, 0.18) !important; } [data-theme="dark"] .rep-card [style*="background: #fee2e2"], [data-theme="dark"] .rep-card [style*="background:#fee2e2"] { background: rgba(239, 68, 68, 0.18) !important; } [data-theme="dark"] .settings-page [style*="background: #fee2e2"], [data-theme="dark"] .settings-page [style*="background:#fee2e2"] { background: rgba(239, 68, 68, 0.18) !important; } [data-theme="dark"] .fin-container [style*="background: #fef2f2"], [data-theme="dark"] .fin-container [style*="background:#fef2f2"] { background: rgba(239, 68, 68, 0.14) !important; } [data-theme="dark"] .services-container [style*="background: #fef2f2"], [data-theme="dark"] .services-container [style*="background:#fef2f2"] { background: rgba(239, 68, 68, 0.14) !important; } [data-theme="dark"] .ms-container [style*="background: #fef2f2"], [data-theme="dark"] .ms-container [style*="background:#fef2f2"] { background: rgba(239, 68, 68, 0.14) !important; } [data-theme="dark"] .tp-container [style*="background: #fef2f2"], [data-theme="dark"] .tp-container [style*="background:#fef2f2"] { background: rgba(239, 68, 68, 0.14) !important; } [data-theme="dark"] .al-container [style*="background: #fef2f2"], [data-theme="dark"] .al-container [style*="background:#fef2f2"] { background: rgba(239, 68, 68, 0.14) !important; } [data-theme="dark"] .em-container [style*="background: #fef2f2"], [data-theme="dark"] .em-container [style*="background:#fef2f2"] { background: rgba(239, 68, 68, 0.14) !important; } [data-theme="dark"] .rep-card [style*="background: #fef2f2"], [data-theme="dark"] .rep-card [style*="background:#fef2f2"] { background: rgba(239, 68, 68, 0.14) !important; } [data-theme="dark"] .settings-page [style*="background: #fef2f2"], [data-theme="dark"] .settings-page [style*="background:#fef2f2"] { background: rgba(239, 68, 68, 0.14) !important; } [data-theme="dark"] .fin-container [style*="background: #fff5f5"], [data-theme="dark"] .fin-container [style*="background:#fff5f5"] { background: rgba(239, 68, 68, 0.10) !important; } [data-theme="dark"] .services-container [style*="background: #fff5f5"], [data-theme="dark"] .services-container [style*="background:#fff5f5"] { background: rgba(239, 68, 68, 0.10) !important; } [data-theme="dark"] .ms-container [style*="background: #fff5f5"], [data-theme="dark"] .ms-container [style*="background:#fff5f5"] { background: rgba(239, 68, 68, 0.10) !important; } [data-theme="dark"] .tp-container [style*="background: #fff5f5"], [data-theme="dark"] .tp-container [style*="background:#fff5f5"] { background: rgba(239, 68, 68, 0.10) !important; } [data-theme="dark"] .al-container [style*="background: #fff5f5"], [data-theme="dark"] .al-container [style*="background:#fff5f5"] { background: rgba(239, 68, 68, 0.10) !important; } [data-theme="dark"] .em-container [style*="background: #fff5f5"], [data-theme="dark"] .em-container [style*="background:#fff5f5"] { background: rgba(239, 68, 68, 0.10) !important; } [data-theme="dark"] .rep-card [style*="background: #fff5f5"], [data-theme="dark"] .rep-card [style*="background:#fff5f5"] { background: rgba(239, 68, 68, 0.10) !important; } [data-theme="dark"] .settings-page [style*="background: #fff5f5"], [data-theme="dark"] .settings-page [style*="background:#fff5f5"] { background: rgba(239, 68, 68, 0.10) !important; } [data-theme="dark"] .fin-container [style*="background: #fde68a"], [data-theme="dark"] .fin-container [style*="background:#fde68a"] { background: rgba(245, 158, 11, 0.20) !important; } [data-theme="dark"] .services-container [style*="background: #fde68a"], [data-theme="dark"] .services-container [style*="background:#fde68a"] { background: rgba(245, 158, 11, 0.20) !important; } [data-theme="dark"] .ms-container [style*="background: #fde68a"], [data-theme="dark"] .ms-container [style*="background:#fde68a"] { background: rgba(245, 158, 11, 0.20) !important; } [data-theme="dark"] .tp-container [style*="background: #fde68a"], [data-theme="dark"] .tp-container [style*="background:#fde68a"] { background: rgba(245, 158, 11, 0.20) !important; } [data-theme="dark"] .al-container [style*="background: #fde68a"], [data-theme="dark"] .al-container [style*="background:#fde68a"] { background: rgba(245, 158, 11, 0.20) !important; } [data-theme="dark"] .em-container [style*="background: #fde68a"], [data-theme="dark"] .em-container [style*="background:#fde68a"] { background: rgba(245, 158, 11, 0.20) !important; } [data-theme="dark"] .rep-card [style*="background: #fde68a"], [data-theme="dark"] .rep-card [style*="background:#fde68a"] { background: rgba(245, 158, 11, 0.20) !important; } [data-theme="dark"] .settings-page [style*="background: #fde68a"], [data-theme="dark"] .settings-page [style*="background:#fde68a"] { background: rgba(245, 158, 11, 0.20) !important; } [data-theme="dark"] .fin-container [style*="background: #fef3c7"], [data-theme="dark"] .fin-container [style*="background:#fef3c7"] { background: rgba(245, 158, 11, 0.18) !important; } [data-theme="dark"] .services-container [style*="background: #fef3c7"], [data-theme="dark"] .services-container [style*="background:#fef3c7"] { background: rgba(245, 158, 11, 0.18) !important; } [data-theme="dark"] .ms-container [style*="background: #fef3c7"], [data-theme="dark"] .ms-container [style*="background:#fef3c7"] { background: rgba(245, 158, 11, 0.18) !important; } [data-theme="dark"] .tp-container [style*="background: #fef3c7"], [data-theme="dark"] .tp-container [style*="background:#fef3c7"] { background: rgba(245, 158, 11, 0.18) !important; } [data-theme="dark"] .al-container [style*="background: #fef3c7"], [data-theme="dark"] .al-container [style*="background:#fef3c7"] { background: rgba(245, 158, 11, 0.18) !important; } [data-theme="dark"] .em-container [style*="background: #fef3c7"], [data-theme="dark"] .em-container [style*="background:#fef3c7"] { background: rgba(245, 158, 11, 0.18) !important; } [data-theme="dark"] .rep-card [style*="background: #fef3c7"], [data-theme="dark"] .rep-card [style*="background:#fef3c7"] { background: rgba(245, 158, 11, 0.18) !important; } [data-theme="dark"] .settings-page [style*="background: #fef3c7"], [data-theme="dark"] .settings-page [style*="background:#fef3c7"] { background: rgba(245, 158, 11, 0.18) !important; } [data-theme="dark"] .fin-container [style*="background: #fefce8"], [data-theme="dark"] .fin-container [style*="background:#fefce8"] { background: rgba(245, 158, 11, 0.14) !important; } [data-theme="dark"] .services-container [style*="background: #fefce8"], [data-theme="dark"] .services-container [style*="background:#fefce8"] { background: rgba(245, 158, 11, 0.14) !important; } [data-theme="dark"] .ms-container [style*="background: #fefce8"], [data-theme="dark"] .ms-container [style*="background:#fefce8"] { background: rgba(245, 158, 11, 0.14) !important; } [data-theme="dark"] .tp-container [style*="background: #fefce8"], [data-theme="dark"] .tp-container [style*="background:#fefce8"] { background: rgba(245, 158, 11, 0.14) !important; } [data-theme="dark"] .al-container [style*="background: #fefce8"], [data-theme="dark"] .al-container [style*="background:#fefce8"] { background: rgba(245, 158, 11, 0.14) !important; } [data-theme="dark"] .em-container [style*="background: #fefce8"], [data-theme="dark"] .em-container [style*="background:#fefce8"] { background: rgba(245, 158, 11, 0.14) !important; } [data-theme="dark"] .rep-card [style*="background: #fefce8"], [data-theme="dark"] .rep-card [style*="background:#fefce8"] { background: rgba(245, 158, 11, 0.14) !important; } [data-theme="dark"] .settings-page [style*="background: #fefce8"], [data-theme="dark"] .settings-page [style*="background:#fefce8"] { background: rgba(245, 158, 11, 0.14) !important; } [data-theme="dark"] .fin-container [style*="background: #fff3cd"], [data-theme="dark"] .fin-container [style*="background:#fff3cd"] { background: rgba(245, 158, 11, 0.14) !important; } [data-theme="dark"] .services-container [style*="background: #fff3cd"], [data-theme="dark"] .services-container [style*="background:#fff3cd"] { background: rgba(245, 158, 11, 0.14) !important; } [data-theme="dark"] .ms-container [style*="background: #fff3cd"], [data-theme="dark"] .ms-container [style*="background:#fff3cd"] { background: rgba(245, 158, 11, 0.14) !important; } [data-theme="dark"] .tp-container [style*="background: #fff3cd"], [data-theme="dark"] .tp-container [style*="background:#fff3cd"] { background: rgba(245, 158, 11, 0.14) !important; } [data-theme="dark"] .al-container [style*="background: #fff3cd"], [data-theme="dark"] .al-container [style*="background:#fff3cd"] { background: rgba(245, 158, 11, 0.14) !important; } [data-theme="dark"] .em-container [style*="background: #fff3cd"], [data-theme="dark"] .em-container [style*="background:#fff3cd"] { background: rgba(245, 158, 11, 0.14) !important; } [data-theme="dark"] .rep-card [style*="background: #fff3cd"], [data-theme="dark"] .rep-card [style*="background:#fff3cd"] { background: rgba(245, 158, 11, 0.14) !important; } [data-theme="dark"] .settings-page [style*="background: #fff3cd"], [data-theme="dark"] .settings-page [style*="background:#fff3cd"] { background: rgba(245, 158, 11, 0.14) !important; } [data-theme="dark"] .fin-container [style*="background: #ffedd5"], [data-theme="dark"] .fin-container [style*="background:#ffedd5"] { background: rgba(249, 115, 22, 0.18) !important; } [data-theme="dark"] .services-container [style*="background: #ffedd5"], [data-theme="dark"] .services-container [style*="background:#ffedd5"] { background: rgba(249, 115, 22, 0.18) !important; } [data-theme="dark"] .ms-container [style*="background: #ffedd5"], [data-theme="dark"] .ms-container [style*="background:#ffedd5"] { background: rgba(249, 115, 22, 0.18) !important; } [data-theme="dark"] .tp-container [style*="background: #ffedd5"], [data-theme="dark"] .tp-container [style*="background:#ffedd5"] { background: rgba(249, 115, 22, 0.18) !important; } [data-theme="dark"] .al-container [style*="background: #ffedd5"], [data-theme="dark"] .al-container [style*="background:#ffedd5"] { background: rgba(249, 115, 22, 0.18) !important; } [data-theme="dark"] .em-container [style*="background: #ffedd5"], [data-theme="dark"] .em-container [style*="background:#ffedd5"] { background: rgba(249, 115, 22, 0.18) !important; } [data-theme="dark"] .rep-card [style*="background: #ffedd5"], [data-theme="dark"] .rep-card [style*="background:#ffedd5"] { background: rgba(249, 115, 22, 0.18) !important; } [data-theme="dark"] .settings-page [style*="background: #ffedd5"], [data-theme="dark"] .settings-page [style*="background:#ffedd5"] { background: rgba(249, 115, 22, 0.18) !important; } [data-theme="dark"] .fin-container [style*="background: #fff7ed"], [data-theme="dark"] .fin-container [style*="background:#fff7ed"] { background: rgba(249, 115, 22, 0.14) !important; } [data-theme="dark"] .services-container [style*="background: #fff7ed"], [data-theme="dark"] .services-container [style*="background:#fff7ed"] { background: rgba(249, 115, 22, 0.14) !important; } [data-theme="dark"] .ms-container [style*="background: #fff7ed"], [data-theme="dark"] .ms-container [style*="background:#fff7ed"] { background: rgba(249, 115, 22, 0.14) !important; } [data-theme="dark"] .tp-container [style*="background: #fff7ed"], [data-theme="dark"] .tp-container [style*="background:#fff7ed"] { background: rgba(249, 115, 22, 0.14) !important; } [data-theme="dark"] .al-container [style*="background: #fff7ed"], [data-theme="dark"] .al-container [style*="background:#fff7ed"] { background: rgba(249, 115, 22, 0.14) !important; } [data-theme="dark"] .em-container [style*="background: #fff7ed"], [data-theme="dark"] .em-container [style*="background:#fff7ed"] { background: rgba(249, 115, 22, 0.14) !important; } [data-theme="dark"] .rep-card [style*="background: #fff7ed"], [data-theme="dark"] .rep-card [style*="background:#fff7ed"] { background: rgba(249, 115, 22, 0.14) !important; } [data-theme="dark"] .settings-page [style*="background: #fff7ed"], [data-theme="dark"] .settings-page [style*="background:#fff7ed"] { background: rgba(249, 115, 22, 0.14) !important; } [data-theme="dark"] .fin-container [style*="background: #dbeafe"], [data-theme="dark"] .fin-container [style*="background:#dbeafe"] { background: rgba(59, 130, 246, 0.18) !important; } [data-theme="dark"] .services-container [style*="background: #dbeafe"], [data-theme="dark"] .services-container [style*="background:#dbeafe"] { background: rgba(59, 130, 246, 0.18) !important; } [data-theme="dark"] .ms-container [style*="background: #dbeafe"], [data-theme="dark"] .ms-container [style*="background:#dbeafe"] { background: rgba(59, 130, 246, 0.18) !important; } [data-theme="dark"] .tp-container [style*="background: #dbeafe"], [data-theme="dark"] .tp-container [style*="background:#dbeafe"] { background: rgba(59, 130, 246, 0.18) !important; } [data-theme="dark"] .al-container [style*="background: #dbeafe"], [data-theme="dark"] .al-container [style*="background:#dbeafe"] { background: rgba(59, 130, 246, 0.18) !important; } [data-theme="dark"] .em-container [style*="background: #dbeafe"], [data-theme="dark"] .em-container [style*="background:#dbeafe"] { background: rgba(59, 130, 246, 0.18) !important; } [data-theme="dark"] .rep-card [style*="background: #dbeafe"], [data-theme="dark"] .rep-card [style*="background:#dbeafe"] { background: rgba(59, 130, 246, 0.18) !important; } [data-theme="dark"] .settings-page [style*="background: #dbeafe"], [data-theme="dark"] .settings-page [style*="background:#dbeafe"] { background: rgba(59, 130, 246, 0.18) !important; } [data-theme="dark"] .fin-container [style*="background: #eff6ff"], [data-theme="dark"] .fin-container [style*="background:#eff6ff"] { background: rgba(59, 130, 246, 0.14) !important; } [data-theme="dark"] .services-container [style*="background: #eff6ff"], [data-theme="dark"] .services-container [style*="background:#eff6ff"] { background: rgba(59, 130, 246, 0.14) !important; } [data-theme="dark"] .ms-container [style*="background: #eff6ff"], [data-theme="dark"] .ms-container [style*="background:#eff6ff"] { background: rgba(59, 130, 246, 0.14) !important; } [data-theme="dark"] .tp-container [style*="background: #eff6ff"], [data-theme="dark"] .tp-container [style*="background:#eff6ff"] { background: rgba(59, 130, 246, 0.14) !important; } [data-theme="dark"] .al-container [style*="background: #eff6ff"], [data-theme="dark"] .al-container [style*="background:#eff6ff"] { background: rgba(59, 130, 246, 0.14) !important; } [data-theme="dark"] .em-container [style*="background: #eff6ff"], [data-theme="dark"] .em-container [style*="background:#eff6ff"] { background: rgba(59, 130, 246, 0.14) !important; } [data-theme="dark"] .rep-card [style*="background: #eff6ff"], [data-theme="dark"] .rep-card [style*="background:#eff6ff"] { background: rgba(59, 130, 246, 0.14) !important; } [data-theme="dark"] .settings-page [style*="background: #eff6ff"], [data-theme="dark"] .settings-page [style*="background:#eff6ff"] { background: rgba(59, 130, 246, 0.14) !important; } [data-theme="dark"] .fin-container [style*="background: #f0f9ff"], [data-theme="dark"] .fin-container [style*="background:#f0f9ff"] { background: rgba(56, 189, 248, 0.14) !important; } [data-theme="dark"] .services-container [style*="background: #f0f9ff"], [data-theme="dark"] .services-container [style*="background:#f0f9ff"] { background: rgba(56, 189, 248, 0.14) !important; } [data-theme="dark"] .ms-container [style*="background: #f0f9ff"], [data-theme="dark"] .ms-container [style*="background:#f0f9ff"] { background: rgba(56, 189, 248, 0.14) !important; } [data-theme="dark"] .tp-container [style*="background: #f0f9ff"], [data-theme="dark"] .tp-container [style*="background:#f0f9ff"] { background: rgba(56, 189, 248, 0.14) !important; } [data-theme="dark"] .al-container [style*="background: #f0f9ff"], [data-theme="dark"] .al-container [style*="background:#f0f9ff"] { background: rgba(56, 189, 248, 0.14) !important; } [data-theme="dark"] .em-container [style*="background: #f0f9ff"], [data-theme="dark"] .em-container [style*="background:#f0f9ff"] { background: rgba(56, 189, 248, 0.14) !important; } [data-theme="dark"] .rep-card [style*="background: #f0f9ff"], [data-theme="dark"] .rep-card [style*="background:#f0f9ff"] { background: rgba(56, 189, 248, 0.14) !important; } [data-theme="dark"] .settings-page [style*="background: #f0f9ff"], [data-theme="dark"] .settings-page [style*="background:#f0f9ff"] { background: rgba(56, 189, 248, 0.14) !important; } [data-theme="dark"] .fin-container [style*="background: #ede9fe"], [data-theme="dark"] .fin-container [style*="background:#ede9fe"] { background: rgba(139, 92, 246, 0.18) !important; } [data-theme="dark"] .services-container [style*="background: #ede9fe"], [data-theme="dark"] .services-container [style*="background:#ede9fe"] { background: rgba(139, 92, 246, 0.18) !important; } [data-theme="dark"] .ms-container [style*="background: #ede9fe"], [data-theme="dark"] .ms-container [style*="background:#ede9fe"] { background: rgba(139, 92, 246, 0.18) !important; } [data-theme="dark"] .tp-container [style*="background: #ede9fe"], [data-theme="dark"] .tp-container [style*="background:#ede9fe"] { background: rgba(139, 92, 246, 0.18) !important; } [data-theme="dark"] .al-container [style*="background: #ede9fe"], [data-theme="dark"] .al-container [style*="background:#ede9fe"] { background: rgba(139, 92, 246, 0.18) !important; } [data-theme="dark"] .em-container [style*="background: #ede9fe"], [data-theme="dark"] .em-container [style*="background:#ede9fe"] { background: rgba(139, 92, 246, 0.18) !important; } [data-theme="dark"] .rep-card [style*="background: #ede9fe"], [data-theme="dark"] .rep-card [style*="background:#ede9fe"] { background: rgba(139, 92, 246, 0.18) !important; } [data-theme="dark"] .settings-page [style*="background: #ede9fe"], [data-theme="dark"] .settings-page [style*="background:#ede9fe"] { background: rgba(139, 92, 246, 0.18) !important; } [data-theme="dark"] .fin-container [style*="background: #f5f3ff"], [data-theme="dark"] .fin-container [style*="background:#f5f3ff"] { background: rgba(99, 102, 241, 0.16) !important; } [data-theme="dark"] .services-container [style*="background: #f5f3ff"], [data-theme="dark"] .services-container [style*="background:#f5f3ff"] { background: rgba(99, 102, 241, 0.16) !important; } [data-theme="dark"] .ms-container [style*="background: #f5f3ff"], [data-theme="dark"] .ms-container [style*="background:#f5f3ff"] { background: rgba(99, 102, 241, 0.16) !important; } [data-theme="dark"] .tp-container [style*="background: #f5f3ff"], [data-theme="dark"] .tp-container [style*="background:#f5f3ff"] { background: rgba(99, 102, 241, 0.16) !important; } [data-theme="dark"] .al-container [style*="background: #f5f3ff"], [data-theme="dark"] .al-container [style*="background:#f5f3ff"] { background: rgba(99, 102, 241, 0.16) !important; } [data-theme="dark"] .em-container [style*="background: #f5f3ff"], [data-theme="dark"] .em-container [style*="background:#f5f3ff"] { background: rgba(99, 102, 241, 0.16) !important; } [data-theme="dark"] .rep-card [style*="background: #f5f3ff"], [data-theme="dark"] .rep-card [style*="background:#f5f3ff"] { background: rgba(99, 102, 241, 0.16) !important; } [data-theme="dark"] .settings-page [style*="background: #f5f3ff"], [data-theme="dark"] .settings-page [style*="background:#f5f3ff"] { background: rgba(99, 102, 241, 0.16) !important; } [data-theme="dark"] .fin-container [style*="background: #faf5ff"], [data-theme="dark"] .fin-container [style*="background:#faf5ff"] { background: rgba(139, 92, 246, 0.14) !important; } [data-theme="dark"] .services-container [style*="background: #faf5ff"], [data-theme="dark"] .services-container [style*="background:#faf5ff"] { background: rgba(139, 92, 246, 0.14) !important; } [data-theme="dark"] .ms-container [style*="background: #faf5ff"], [data-theme="dark"] .ms-container [style*="background:#faf5ff"] { background: rgba(139, 92, 246, 0.14) !important; } [data-theme="dark"] .tp-container [style*="background: #faf5ff"], [data-theme="dark"] .tp-container [style*="background:#faf5ff"] { background: rgba(139, 92, 246, 0.14) !important; } [data-theme="dark"] .al-container [style*="background: #faf5ff"], [data-theme="dark"] .al-container [style*="background:#faf5ff"] { background: rgba(139, 92, 246, 0.14) !important; } [data-theme="dark"] .em-container [style*="background: #faf5ff"], [data-theme="dark"] .em-container [style*="background:#faf5ff"] { background: rgba(139, 92, 246, 0.14) !important; } [data-theme="dark"] .rep-card [style*="background: #faf5ff"], [data-theme="dark"] .rep-card [style*="background:#faf5ff"] { background: rgba(139, 92, 246, 0.14) !important; } [data-theme="dark"] .settings-page [style*="background: #faf5ff"], [data-theme="dark"] .settings-page [style*="background:#faf5ff"] { background: rgba(139, 92, 246, 0.14) !important; } [data-theme="dark"] .fin-container [style*="background: #ddd6fe"], [data-theme="dark"] .fin-container [style*="background:#ddd6fe"] { background: rgba(139, 92, 246, 0.30) !important; } [data-theme="dark"] .services-container [style*="background: #ddd6fe"], [data-theme="dark"] .services-container [style*="background:#ddd6fe"] { background: rgba(139, 92, 246, 0.30) !important; } [data-theme="dark"] .ms-container [style*="background: #ddd6fe"], [data-theme="dark"] .ms-container [style*="background:#ddd6fe"] { background: rgba(139, 92, 246, 0.30) !important; } [data-theme="dark"] .tp-container [style*="background: #ddd6fe"], [data-theme="dark"] .tp-container [style*="background:#ddd6fe"] { background: rgba(139, 92, 246, 0.30) !important; } [data-theme="dark"] .al-container [style*="background: #ddd6fe"], [data-theme="dark"] .al-container [style*="background:#ddd6fe"] { background: rgba(139, 92, 246, 0.30) !important; } [data-theme="dark"] .em-container [style*="background: #ddd6fe"], [data-theme="dark"] .em-container [style*="background:#ddd6fe"] { background: rgba(139, 92, 246, 0.30) !important; } [data-theme="dark"] .rep-card [style*="background: #ddd6fe"], [data-theme="dark"] .rep-card [style*="background:#ddd6fe"] { background: rgba(139, 92, 246, 0.30) !important; } [data-theme="dark"] .settings-page [style*="background: #ddd6fe"], [data-theme="dark"] .settings-page [style*="background:#ddd6fe"] { background: rgba(139, 92, 246, 0.30) !important; } [data-theme="dark"] .fin-container [style*="background: #f0f0ff"], [data-theme="dark"] .fin-container [style*="background:#f0f0ff"] { background: rgba(99, 102, 241, 0.16) !important; } [data-theme="dark"] .services-container [style*="background: #f0f0ff"], [data-theme="dark"] .services-container [style*="background:#f0f0ff"] { background: rgba(99, 102, 241, 0.16) !important; } [data-theme="dark"] .ms-container [style*="background: #f0f0ff"], [data-theme="dark"] .ms-container [style*="background:#f0f0ff"] { background: rgba(99, 102, 241, 0.16) !important; } [data-theme="dark"] .tp-container [style*="background: #f0f0ff"], [data-theme="dark"] .tp-container [style*="background:#f0f0ff"] { background: rgba(99, 102, 241, 0.16) !important; } [data-theme="dark"] .al-container [style*="background: #f0f0ff"], [data-theme="dark"] .al-container [style*="background:#f0f0ff"] { background: rgba(99, 102, 241, 0.16) !important; } [data-theme="dark"] .em-container [style*="background: #f0f0ff"], [data-theme="dark"] .em-container [style*="background:#f0f0ff"] { background: rgba(99, 102, 241, 0.16) !important; } [data-theme="dark"] .rep-card [style*="background: #f0f0ff"], [data-theme="dark"] .rep-card [style*="background:#f0f0ff"] { background: rgba(99, 102, 241, 0.16) !important; } [data-theme="dark"] .settings-page [style*="background: #f0f0ff"], [data-theme="dark"] .settings-page [style*="background:#f0f0ff"] { background: rgba(99, 102, 241, 0.16) !important; } [data-theme="dark"] .fin-container [style*="background: #f0fdf4"], [data-theme="dark"] .fin-container [style*="background:#f0fdf4"] { background: rgba(16, 185, 129, 0.18) !important; } [data-theme="dark"] .services-container [style*="background: #f0fdf4"], [data-theme="dark"] .services-container [style*="background:#f0fdf4"] { background: rgba(16, 185, 129, 0.18) !important; } [data-theme="dark"] .ms-container [style*="background: #f0fdf4"], [data-theme="dark"] .ms-container [style*="background:#f0fdf4"] { background: rgba(16, 185, 129, 0.18) !important; } [data-theme="dark"] .tp-container [style*="background: #f0fdf4"], [data-theme="dark"] .tp-container [style*="background:#f0fdf4"] { background: rgba(16, 185, 129, 0.18) !important; } [data-theme="dark"] .al-container [style*="background: #f0fdf4"], [data-theme="dark"] .al-container [style*="background:#f0fdf4"] { background: rgba(16, 185, 129, 0.18) !important; } [data-theme="dark"] .em-container [style*="background: #f0fdf4"], [data-theme="dark"] .em-container [style*="background:#f0fdf4"] { background: rgba(16, 185, 129, 0.18) !important; } [data-theme="dark"] .rep-card [style*="background: #f0fdf4"], [data-theme="dark"] .rep-card [style*="background:#f0fdf4"] { background: rgba(16, 185, 129, 0.18) !important; } [data-theme="dark"] .settings-page [style*="background: #f0fdf4"], [data-theme="dark"] .settings-page [style*="background:#f0fdf4"] { background: rgba(16, 185, 129, 0.18) !important; } [data-theme="dark"] .fin-container [style*="background: #fdf2f8"], [data-theme="dark"] .fin-container [style*="background:#fdf2f8"] { background: rgba(236, 72, 153, 0.18) !important; } [data-theme="dark"] .services-container [style*="background: #fdf2f8"], [data-theme="dark"] .services-container [style*="background:#fdf2f8"] { background: rgba(236, 72, 153, 0.18) !important; } [data-theme="dark"] .ms-container [style*="background: #fdf2f8"], [data-theme="dark"] .ms-container [style*="background:#fdf2f8"] { background: rgba(236, 72, 153, 0.18) !important; } [data-theme="dark"] .tp-container [style*="background: #fdf2f8"], [data-theme="dark"] .tp-container [style*="background:#fdf2f8"] { background: rgba(236, 72, 153, 0.18) !important; } [data-theme="dark"] .al-container [style*="background: #fdf2f8"], [data-theme="dark"] .al-container [style*="background:#fdf2f8"] { background: rgba(236, 72, 153, 0.18) !important; } [data-theme="dark"] .em-container [style*="background: #fdf2f8"], [data-theme="dark"] .em-container [style*="background:#fdf2f8"] { background: rgba(236, 72, 153, 0.18) !important; } [data-theme="dark"] .rep-card [style*="background: #fdf2f8"], [data-theme="dark"] .rep-card [style*="background:#fdf2f8"] { background: rgba(236, 72, 153, 0.18) !important; } [data-theme="dark"] .settings-page [style*="background: #fdf2f8"], [data-theme="dark"] .settings-page [style*="background:#fdf2f8"] { background: rgba(236, 72, 153, 0.18) !important; } [data-theme="dark"] .fin-container [style*="background: #d1d5db"], [data-theme="dark"] .fin-container [style*="background:#d1d5db"] { background: rgba(107, 114, 128, 0.22) !important; } [data-theme="dark"] .services-container [style*="background: #d1d5db"], [data-theme="dark"] .services-container [style*="background:#d1d5db"] { background: rgba(107, 114, 128, 0.22) !important; } [data-theme="dark"] .ms-container [style*="background: #d1d5db"], [data-theme="dark"] .ms-container [style*="background:#d1d5db"] { background: rgba(107, 114, 128, 0.22) !important; } [data-theme="dark"] .tp-container [style*="background: #d1d5db"], [data-theme="dark"] .tp-container [style*="background:#d1d5db"] { background: rgba(107, 114, 128, 0.22) !important; } [data-theme="dark"] .al-container [style*="background: #d1d5db"], [data-theme="dark"] .al-container [style*="background:#d1d5db"] { background: rgba(107, 114, 128, 0.22) !important; } [data-theme="dark"] .em-container [style*="background: #d1d5db"], [data-theme="dark"] .em-container [style*="background:#d1d5db"] { background: rgba(107, 114, 128, 0.22) !important; } [data-theme="dark"] .rep-card [style*="background: #d1d5db"], [data-theme="dark"] .rep-card [style*="background:#d1d5db"] { background: rgba(107, 114, 128, 0.22) !important; } [data-theme="dark"] .settings-page [style*="background: #d1d5db"], [data-theme="dark"] .settings-page [style*="background:#d1d5db"] { background: rgba(107, 114, 128, 0.22) !important; } [data-theme="dark"] .fin-container [style*="background: #cbd5e1"], [data-theme="dark"] .fin-container [style*="background:#cbd5e1"] { background: var(--text-faint) !important; } [data-theme="dark"] .services-container [style*="background: #cbd5e1"], [data-theme="dark"] .services-container [style*="background:#cbd5e1"] { background: var(--text-faint) !important; } [data-theme="dark"] .ms-container [style*="background: #cbd5e1"], [data-theme="dark"] .ms-container [style*="background:#cbd5e1"] { background: var(--text-faint) !important; } [data-theme="dark"] .tp-container [style*="background: #cbd5e1"], [data-theme="dark"] .tp-container [style*="background:#cbd5e1"] { background: var(--text-faint) !important; } [data-theme="dark"] .al-container [style*="background: #cbd5e1"], [data-theme="dark"] .al-container [style*="background:#cbd5e1"] { background: var(--text-faint) !important; } [data-theme="dark"] .em-container [style*="background: #cbd5e1"], [data-theme="dark"] .em-container [style*="background:#cbd5e1"] { background: var(--text-faint) !important; } [data-theme="dark"] .rep-card [style*="background: #cbd5e1"], [data-theme="dark"] .rep-card [style*="background:#cbd5e1"] { background: var(--text-faint) !important; } [data-theme="dark"] .settings-page [style*="background: #cbd5e1"], [data-theme="dark"] .settings-page [style*="background:#cbd5e1"] { background: var(--text-faint) !important; } [data-theme="dark"] .fin-container [style*="background: #c7c7ff"], [data-theme="dark"] .fin-container [style*="background:#c7c7ff"] { background: rgba(99, 102, 241, 0.40) !important; } [data-theme="dark"] .services-container [style*="background: #c7c7ff"], [data-theme="dark"] .services-container [style*="background:#c7c7ff"] { background: rgba(99, 102, 241, 0.40) !important; } [data-theme="dark"] .ms-container [style*="background: #c7c7ff"], [data-theme="dark"] .ms-container [style*="background:#c7c7ff"] { background: rgba(99, 102, 241, 0.40) !important; } [data-theme="dark"] .tp-container [style*="background: #c7c7ff"], [data-theme="dark"] .tp-container [style*="background:#c7c7ff"] { background: rgba(99, 102, 241, 0.40) !important; } [data-theme="dark"] .al-container [style*="background: #c7c7ff"], [data-theme="dark"] .al-container [style*="background:#c7c7ff"] { background: rgba(99, 102, 241, 0.40) !important; } [data-theme="dark"] .em-container [style*="background: #c7c7ff"], [data-theme="dark"] .em-container [style*="background:#c7c7ff"] { background: rgba(99, 102, 241, 0.40) !important; } [data-theme="dark"] .rep-card [style*="background: #c7c7ff"], [data-theme="dark"] .rep-card [style*="background:#c7c7ff"] { background: rgba(99, 102, 241, 0.40) !important; } [data-theme="dark"] .settings-page [style*="background: #c7c7ff"], [data-theme="dark"] .settings-page [style*="background:#c7c7ff"] { background: rgba(99, 102, 241, 0.40) !important; } [data-theme="dark"] .fin-container [style*="border"][style*="#e5e5e7"] { border-color: var(--border) !important; } [data-theme="dark"] .services-container [style*="border"][style*="#e5e5e7"] { border-color: var(--border) !important; } [data-theme="dark"] .ms-container [style*="border"][style*="#e5e5e7"] { border-color: var(--border) !important; } [data-theme="dark"] .tp-container [style*="border"][style*="#e5e5e7"] { border-color: var(--border) !important; } [data-theme="dark"] .al-container [style*="border"][style*="#e5e5e7"] { border-color: var(--border) !important; } [data-theme="dark"] .em-container [style*="border"][style*="#e5e5e7"] { border-color: var(--border) !important; } [data-theme="dark"] .rep-card [style*="border"][style*="#e5e5e7"] { border-color: var(--border) !important; } [data-theme="dark"] .settings-page [style*="border"][style*="#e5e5e7"] { border-color: var(--border) !important; } [data-theme="dark"] .fin-container [style*="border"][style*="#f5f5f7"] { border-color: var(--border-subtle) !important; } [data-theme="dark"] .services-container [style*="border"][style*="#f5f5f7"] { border-color: var(--border-subtle) !important; } [data-theme="dark"] .ms-container [style*="border"][style*="#f5f5f7"] { border-color: var(--border-subtle) !important; } [data-theme="dark"] .tp-container [style*="border"][style*="#f5f5f7"] { border-color: var(--border-subtle) !important; } [data-theme="dark"] .al-container [style*="border"][style*="#f5f5f7"] { border-color: var(--border-subtle) !important; } [data-theme="dark"] .em-container [style*="border"][style*="#f5f5f7"] { border-color: var(--border-subtle) !important; } [data-theme="dark"] .rep-card [style*="border"][style*="#f5f5f7"] { border-color: var(--border-subtle) !important; } [data-theme="dark"] .settings-page [style*="border"][style*="#f5f5f7"] { border-color: var(--border-subtle) !important; } [data-theme="dark"] .fin-container [style*="border"][style*="#d2d2d7"] { border-color: var(--border-strong) !important; } [data-theme="dark"] .services-container [style*="border"][style*="#d2d2d7"] { border-color: var(--border-strong) !important; } [data-theme="dark"] .ms-container [style*="border"][style*="#d2d2d7"] { border-color: var(--border-strong) !important; } [data-theme="dark"] .tp-container [style*="border"][style*="#d2d2d7"] { border-color: var(--border-strong) !important; } [data-theme="dark"] .al-container [style*="border"][style*="#d2d2d7"] { border-color: var(--border-strong) !important; } [data-theme="dark"] .em-container [style*="border"][style*="#d2d2d7"] { border-color: var(--border-strong) !important; } [data-theme="dark"] .rep-card [style*="border"][style*="#d2d2d7"] { border-color: var(--border-strong) !important; } [data-theme="dark"] .settings-page [style*="border"][style*="#d2d2d7"] { border-color: var(--border-strong) !important; } [data-theme="dark"] .fin-container [style*="border"][style*="#e5e7eb"] { border-color: var(--border) !important; } [data-theme="dark"] .services-container [style*="border"][style*="#e5e7eb"] { border-color: var(--border) !important; } [data-theme="dark"] .ms-container [style*="border"][style*="#e5e7eb"] { border-color: var(--border) !important; } [data-theme="dark"] .tp-container [style*="border"][style*="#e5e7eb"] { border-color: var(--border) !important; } [data-theme="dark"] .al-container [style*="border"][style*="#e5e7eb"] { border-color: var(--border) !important; } [data-theme="dark"] .em-container [style*="border"][style*="#e5e7eb"] { border-color: var(--border) !important; } [data-theme="dark"] .rep-card [style*="border"][style*="#e5e7eb"] { border-color: var(--border) !important; } [data-theme="dark"] .settings-page [style*="border"][style*="#e5e7eb"] { border-color: var(--border) !important; } [data-theme="dark"] .fin-container [style*="border"][style*="#cbd5e1"] { border-color: var(--border-strong) !important; } [data-theme="dark"] .services-container [style*="border"][style*="#cbd5e1"] { border-color: var(--border-strong) !important; } [data-theme="dark"] .ms-container [style*="border"][style*="#cbd5e1"] { border-color: var(--border-strong) !important; } [data-theme="dark"] .tp-container [style*="border"][style*="#cbd5e1"] { border-color: var(--border-strong) !important; } [data-theme="dark"] .al-container [style*="border"][style*="#cbd5e1"] { border-color: var(--border-strong) !important; } [data-theme="dark"] .em-container [style*="border"][style*="#cbd5e1"] { border-color: var(--border-strong) !important; } [data-theme="dark"] .rep-card [style*="border"][style*="#cbd5e1"] { border-color: var(--border-strong) !important; } [data-theme="dark"] .settings-page [style*="border"][style*="#cbd5e1"] { border-color: var(--border-strong) !important; } [data-theme="dark"] .fin-container [style*="border"][style*="#c7c7ff"] { border-color: rgba(99, 102, 241, 0.40) !important; } [data-theme="dark"] .services-container [style*="border"][style*="#c7c7ff"] { border-color: rgba(99, 102, 241, 0.40) !important; } [data-theme="dark"] .ms-container [style*="border"][style*="#c7c7ff"] { border-color: rgba(99, 102, 241, 0.40) !important; } [data-theme="dark"] .tp-container [style*="border"][style*="#c7c7ff"] { border-color: rgba(99, 102, 241, 0.40) !important; } [data-theme="dark"] .al-container [style*="border"][style*="#c7c7ff"] { border-color: rgba(99, 102, 241, 0.40) !important; } [data-theme="dark"] .em-container [style*="border"][style*="#c7c7ff"] { border-color: rgba(99, 102, 241, 0.40) !important; } [data-theme="dark"] .rep-card [style*="border"][style*="#c7c7ff"] { border-color: rgba(99, 102, 241, 0.40) !important; } [data-theme="dark"] .settings-page [style*="border"][style*="#c7c7ff"] { border-color: rgba(99, 102, 241, 0.40) !important; } [data-theme="dark"] .fin-container [style*="border"][style*="#c8e6c9"] { border-color: rgba(16, 185, 129, 0.40) !important; } [data-theme="dark"] .services-container [style*="border"][style*="#c8e6c9"] { border-color: rgba(16, 185, 129, 0.40) !important; } [data-theme="dark"] .ms-container [style*="border"][style*="#c8e6c9"] { border-color: rgba(16, 185, 129, 0.40) !important; } [data-theme="dark"] .tp-container [style*="border"][style*="#c8e6c9"] { border-color: rgba(16, 185, 129, 0.40) !important; } [data-theme="dark"] .al-container [style*="border"][style*="#c8e6c9"] { border-color: rgba(16, 185, 129, 0.40) !important; } [data-theme="dark"] .em-container [style*="border"][style*="#c8e6c9"] { border-color: rgba(16, 185, 129, 0.40) !important; } [data-theme="dark"] .rep-card [style*="border"][style*="#c8e6c9"] { border-color: rgba(16, 185, 129, 0.40) !important; } [data-theme="dark"] .settings-page [style*="border"][style*="#c8e6c9"] { border-color: rgba(16, 185, 129, 0.40) !important; } [data-theme="dark"] .fin-container [style*="border"][style*="#bae6fd"] { border-color: rgba(56, 189, 248, 0.40) !important; } [data-theme="dark"] .services-container [style*="border"][style*="#bae6fd"] { border-color: rgba(56, 189, 248, 0.40) !important; } [data-theme="dark"] .ms-container [style*="border"][style*="#bae6fd"] { border-color: rgba(56, 189, 248, 0.40) !important; } [data-theme="dark"] .tp-container [style*="border"][style*="#bae6fd"] { border-color: rgba(56, 189, 248, 0.40) !important; } [data-theme="dark"] .al-container [style*="border"][style*="#bae6fd"] { border-color: rgba(56, 189, 248, 0.40) !important; } [data-theme="dark"] .em-container [style*="border"][style*="#bae6fd"] { border-color: rgba(56, 189, 248, 0.40) !important; } [data-theme="dark"] .rep-card [style*="border"][style*="#bae6fd"] { border-color: rgba(56, 189, 248, 0.40) !important; } [data-theme="dark"] .settings-page [style*="border"][style*="#bae6fd"] { border-color: rgba(56, 189, 248, 0.40) !important; } [data-theme="dark"] .fin-container [style*="border"][style*="#ddd6fe"] { border-color: rgba(139, 92, 246, 0.30) !important; } [data-theme="dark"] .services-container [style*="border"][style*="#ddd6fe"] { border-color: rgba(139, 92, 246, 0.30) !important; } [data-theme="dark"] .ms-container [style*="border"][style*="#ddd6fe"] { border-color: rgba(139, 92, 246, 0.30) !important; } [data-theme="dark"] .tp-container [style*="border"][style*="#ddd6fe"] { border-color: rgba(139, 92, 246, 0.30) !important; } [data-theme="dark"] .al-container [style*="border"][style*="#ddd6fe"] { border-color: rgba(139, 92, 246, 0.30) !important; } [data-theme="dark"] .em-container [style*="border"][style*="#ddd6fe"] { border-color: rgba(139, 92, 246, 0.30) !important; } [data-theme="dark"] .rep-card [style*="border"][style*="#ddd6fe"] { border-color: rgba(139, 92, 246, 0.30) !important; } [data-theme="dark"] .settings-page [style*="border"][style*="#ddd6fe"] { border-color: rgba(139, 92, 246, 0.30) !important; } [data-theme="dark"] .fin-container [style*="border"][style*="#bbf7d0"] { border-color: rgba(16, 185, 129, 0.30) !important; } [data-theme="dark"] .services-container [style*="border"][style*="#bbf7d0"] { border-color: rgba(16, 185, 129, 0.30) !important; } [data-theme="dark"] .ms-container [style*="border"][style*="#bbf7d0"] { border-color: rgba(16, 185, 129, 0.30) !important; } [data-theme="dark"] .tp-container [style*="border"][style*="#bbf7d0"] { border-color: rgba(16, 185, 129, 0.30) !important; } [data-theme="dark"] .al-container [style*="border"][style*="#bbf7d0"] { border-color: rgba(16, 185, 129, 0.30) !important; } [data-theme="dark"] .em-container [style*="border"][style*="#bbf7d0"] { border-color: rgba(16, 185, 129, 0.30) !important; } [data-theme="dark"] .rep-card [style*="border"][style*="#bbf7d0"] { border-color: rgba(16, 185, 129, 0.30) !important; } [data-theme="dark"] .settings-page [style*="border"][style*="#bbf7d0"] { border-color: rgba(16, 185, 129, 0.30) !important; } [data-theme="dark"] .fin-container [style*="border"][style*="#fde68a"] { border-color: rgba(245, 158, 11, 0.40) !important; } [data-theme="dark"] .services-container [style*="border"][style*="#fde68a"] { border-color: rgba(245, 158, 11, 0.40) !important; } [data-theme="dark"] .ms-container [style*="border"][style*="#fde68a"] { border-color: rgba(245, 158, 11, 0.40) !important; } [data-theme="dark"] .tp-container [style*="border"][style*="#fde68a"] { border-color: rgba(245, 158, 11, 0.40) !important; } [data-theme="dark"] .al-container [style*="border"][style*="#fde68a"] { border-color: rgba(245, 158, 11, 0.40) !important; } [data-theme="dark"] .em-container [style*="border"][style*="#fde68a"] { border-color: rgba(245, 158, 11, 0.40) !important; } [data-theme="dark"] .rep-card [style*="border"][style*="#fde68a"] { border-color: rgba(245, 158, 11, 0.40) !important; } [data-theme="dark"] .settings-page [style*="border"][style*="#fde68a"] { border-color: rgba(245, 158, 11, 0.40) !important; } [data-theme="dark"] .fin-container [style*="border"][style*="#fed7aa"] { border-color: rgba(249, 115, 22, 0.40) !important; } [data-theme="dark"] .services-container [style*="border"][style*="#fed7aa"] { border-color: rgba(249, 115, 22, 0.40) !important; } [data-theme="dark"] .ms-container [style*="border"][style*="#fed7aa"] { border-color: rgba(249, 115, 22, 0.40) !important; } [data-theme="dark"] .tp-container [style*="border"][style*="#fed7aa"] { border-color: rgba(249, 115, 22, 0.40) !important; } [data-theme="dark"] .al-container [style*="border"][style*="#fed7aa"] { border-color: rgba(249, 115, 22, 0.40) !important; } [data-theme="dark"] .em-container [style*="border"][style*="#fed7aa"] { border-color: rgba(249, 115, 22, 0.40) !important; } [data-theme="dark"] .rep-card [style*="border"][style*="#fed7aa"] { border-color: rgba(249, 115, 22, 0.40) !important; } [data-theme="dark"] .settings-page [style*="border"][style*="#fed7aa"] { border-color: rgba(249, 115, 22, 0.40) !important; } [data-theme="dark"] .fin-container [style*="border"][style*="#fecaca"] { border-color: rgba(239, 68, 68, 0.30) !important; } [data-theme="dark"] .services-container [style*="border"][style*="#fecaca"] { border-color: rgba(239, 68, 68, 0.30) !important; } [data-theme="dark"] .ms-container [style*="border"][style*="#fecaca"] { border-color: rgba(239, 68, 68, 0.30) !important; } [data-theme="dark"] .tp-container [style*="border"][style*="#fecaca"] { border-color: rgba(239, 68, 68, 0.30) !important; } [data-theme="dark"] .al-container [style*="border"][style*="#fecaca"] { border-color: rgba(239, 68, 68, 0.30) !important; } [data-theme="dark"] .em-container [style*="border"][style*="#fecaca"] { border-color: rgba(239, 68, 68, 0.30) !important; } [data-theme="dark"] .rep-card [style*="border"][style*="#fecaca"] { border-color: rgba(239, 68, 68, 0.30) !important; } [data-theme="dark"] .settings-page [style*="border"][style*="#fecaca"] { border-color: rgba(239, 68, 68, 0.30) !important; } [data-theme="dark"] .fin-container [style*="border"][style*="#ffcdd2"] { border-color: rgba(239, 68, 68, 0.40) !important; } [data-theme="dark"] .services-container [style*="border"][style*="#ffcdd2"] { border-color: rgba(239, 68, 68, 0.40) !important; } [data-theme="dark"] .ms-container [style*="border"][style*="#ffcdd2"] { border-color: rgba(239, 68, 68, 0.40) !important; } [data-theme="dark"] .tp-container [style*="border"][style*="#ffcdd2"] { border-color: rgba(239, 68, 68, 0.40) !important; } [data-theme="dark"] .al-container [style*="border"][style*="#ffcdd2"] { border-color: rgba(239, 68, 68, 0.40) !important; } [data-theme="dark"] .em-container [style*="border"][style*="#ffcdd2"] { border-color: rgba(239, 68, 68, 0.40) !important; } [data-theme="dark"] .rep-card [style*="border"][style*="#ffcdd2"] { border-color: rgba(239, 68, 68, 0.40) !important; } [data-theme="dark"] .settings-page [style*="border"][style*="#ffcdd2"] { border-color: rgba(239, 68, 68, 0.40) !important; } /* ─── Tailwind utility class overrides (scoped to the 8 page containers) ─── */ [data-theme="dark"] .fin-container .text-gray-300, .fin-container .text-gray-400, .fin-container .text-slate-300, .fin-container .text-slate-400, .services-container .text-gray-300, .services-container .text-gray-400, .services-container .text-slate-300, .services-container .text-slate-400, .ms-container .text-gray-300, .ms-container .text-gray-400, .ms-container .text-slate-300, .ms-container .text-slate-400, .tp-container .text-gray-300, .tp-container .text-gray-400, .tp-container .text-slate-300, .tp-container .text-slate-400, .al-container .text-gray-300, .al-container .text-gray-400, .al-container .text-slate-300, .al-container .text-slate-400, .em-container .text-gray-300, .em-container .text-gray-400, .em-container .text-slate-300, .em-container .text-slate-400, .rep-card .text-gray-300, .rep-card .text-gray-400, .rep-card .text-slate-300, .rep-card .text-slate-400, .settings-page .text-gray-300, .settings-page .text-gray-400, .settings-page .text-slate-300, .settings-page .text-slate-400 { color: var(--text-faint) !important; } [data-theme="dark"] .fin-container .text-gray-500, .fin-container .text-slate-500, .services-container .text-gray-500, .services-container .text-slate-500, .ms-container .text-gray-500, .ms-container .text-slate-500, .tp-container .text-gray-500, .tp-container .text-slate-500, .al-container .text-gray-500, .al-container .text-slate-500, .em-container .text-gray-500, .em-container .text-slate-500, .rep-card .text-gray-500, .rep-card .text-slate-500, .settings-page .text-gray-500, .settings-page .text-slate-500 { color: var(--text-muted) !important; } [data-theme="dark"] .fin-container .text-gray-600, .fin-container .text-gray-700, .fin-container .text-slate-600, .fin-container .text-slate-700, .services-container .text-gray-600, .services-container .text-gray-700, .services-container .text-slate-600, .services-container .text-slate-700, .ms-container .text-gray-600, .ms-container .text-gray-700, .ms-container .text-slate-600, .ms-container .text-slate-700, .tp-container .text-gray-600, .tp-container .text-gray-700, .tp-container .text-slate-600, .tp-container .text-slate-700, .al-container .text-gray-600, .al-container .text-gray-700, .al-container .text-slate-600, .al-container .text-slate-700, .em-container .text-gray-600, .em-container .text-gray-700, .em-container .text-slate-600, .em-container .text-slate-700, .rep-card .text-gray-600, .rep-card .text-gray-700, .rep-card .text-slate-600, .rep-card .text-slate-700, .settings-page .text-gray-600, .settings-page .text-gray-700, .settings-page .text-slate-600, .settings-page .text-slate-700 { color: var(--text-secondary) !important; } [data-theme="dark"] .fin-container .text-gray-900, .fin-container .text-slate-800, .fin-container .text-slate-900, .services-container .text-gray-900, .services-container .text-slate-800, .services-container .text-slate-900, .ms-container .text-gray-900, .ms-container .text-slate-800, .ms-container .text-slate-900, .tp-container .text-gray-900, .tp-container .text-slate-800, .tp-container .text-slate-900, .al-container .text-gray-900, .al-container .text-slate-800, .al-container .text-slate-900, .em-container .text-gray-900, .em-container .text-slate-800, .em-container .text-slate-900, .rep-card .text-gray-900, .rep-card .text-slate-800, .rep-card .text-slate-900, .settings-page .text-gray-900, .settings-page .text-slate-800, .settings-page .text-slate-900 { color: var(--text-primary) !important; } [data-theme="dark"] .fin-container .text-amber-700, .fin-container .text-yellow-500, .fin-container .text-yellow-600, .fin-container .text-yellow-700, .fin-container .text-yellow-800, .services-container .text-amber-700, .services-container .text-yellow-500, .services-container .text-yellow-600, .services-container .text-yellow-700, .services-container .text-yellow-800, .ms-container .text-amber-700, .ms-container .text-yellow-500, .ms-container .text-yellow-600, .ms-container .text-yellow-700, .ms-container .text-yellow-800, .tp-container .text-amber-700, .tp-container .text-yellow-500, .tp-container .text-yellow-600, .tp-container .text-yellow-700, .tp-container .text-yellow-800, .al-container .text-amber-700, .al-container .text-yellow-500, .al-container .text-yellow-600, .al-container .text-yellow-700, .al-container .text-yellow-800, .em-container .text-amber-700, .em-container .text-yellow-500, .em-container .text-yellow-600, .em-container .text-yellow-700, .em-container .text-yellow-800, .rep-card .text-amber-700, .rep-card .text-yellow-500, .rep-card .text-yellow-600, .rep-card .text-yellow-700, .rep-card .text-yellow-800, .settings-page .text-amber-700, .settings-page .text-yellow-500, .settings-page .text-yellow-600, .settings-page .text-yellow-700, .settings-page .text-yellow-800 { color: #fcd34d !important; } [data-theme="dark"] .fin-container .text-blue-500, .fin-container .text-sky-500, .fin-container .text-sky-600, .fin-container .text-sky-700, .services-container .text-blue-500, .services-container .text-sky-500, .services-container .text-sky-600, .services-container .text-sky-700, .ms-container .text-blue-500, .ms-container .text-sky-500, .ms-container .text-sky-600, .ms-container .text-sky-700, .tp-container .text-blue-500, .tp-container .text-sky-500, .tp-container .text-sky-600, .tp-container .text-sky-700, .al-container .text-blue-500, .al-container .text-sky-500, .al-container .text-sky-600, .al-container .text-sky-700, .em-container .text-blue-500, .em-container .text-sky-500, .em-container .text-sky-600, .em-container .text-sky-700, .rep-card .text-blue-500, .rep-card .text-sky-500, .rep-card .text-sky-600, .rep-card .text-sky-700, .settings-page .text-blue-500, .settings-page .text-sky-500, .settings-page .text-sky-600, .settings-page .text-sky-700 { color: #7dd3fc !important; } [data-theme="dark"] .fin-container .text-blue-600, .fin-container .text-blue-700, .fin-container .text-blue-800, .services-container .text-blue-600, .services-container .text-blue-700, .services-container .text-blue-800, .ms-container .text-blue-600, .ms-container .text-blue-700, .ms-container .text-blue-800, .tp-container .text-blue-600, .tp-container .text-blue-700, .tp-container .text-blue-800, .al-container .text-blue-600, .al-container .text-blue-700, .al-container .text-blue-800, .em-container .text-blue-600, .em-container .text-blue-700, .em-container .text-blue-800, .rep-card .text-blue-600, .rep-card .text-blue-700, .rep-card .text-blue-800, .settings-page .text-blue-600, .settings-page .text-blue-700, .settings-page .text-blue-800 { color: #93c5fd !important; } [data-theme="dark"] .fin-container .text-cyan-500, .fin-container .text-cyan-600, .services-container .text-cyan-500, .services-container .text-cyan-600, .ms-container .text-cyan-500, .ms-container .text-cyan-600, .tp-container .text-cyan-500, .tp-container .text-cyan-600, .al-container .text-cyan-500, .al-container .text-cyan-600, .em-container .text-cyan-500, .em-container .text-cyan-600, .rep-card .text-cyan-500, .rep-card .text-cyan-600, .settings-page .text-cyan-500, .settings-page .text-cyan-600 { color: #67e8f9 !important; } [data-theme="dark"] .fin-container .text-green-500, .fin-container .text-green-600, .fin-container .text-green-700, .fin-container .text-green-800, .services-container .text-green-500, .services-container .text-green-600, .services-container .text-green-700, .services-container .text-green-800, .ms-container .text-green-500, .ms-container .text-green-600, .ms-container .text-green-700, .ms-container .text-green-800, .tp-container .text-green-500, .tp-container .text-green-600, .tp-container .text-green-700, .tp-container .text-green-800, .al-container .text-green-500, .al-container .text-green-600, .al-container .text-green-700, .al-container .text-green-800, .em-container .text-green-500, .em-container .text-green-600, .em-container .text-green-700, .em-container .text-green-800, .rep-card .text-green-500, .rep-card .text-green-600, .rep-card .text-green-700, .rep-card .text-green-800, .settings-page .text-green-500, .settings-page .text-green-600, .settings-page .text-green-700, .settings-page .text-green-800 { color: #6ee7b7 !important; } [data-theme="dark"] .fin-container .text-indigo-500, .fin-container .text-indigo-600, .fin-container .text-indigo-700, .services-container .text-indigo-500, .services-container .text-indigo-600, .services-container .text-indigo-700, .ms-container .text-indigo-500, .ms-container .text-indigo-600, .ms-container .text-indigo-700, .tp-container .text-indigo-500, .tp-container .text-indigo-600, .tp-container .text-indigo-700, .al-container .text-indigo-500, .al-container .text-indigo-600, .al-container .text-indigo-700, .em-container .text-indigo-500, .em-container .text-indigo-600, .em-container .text-indigo-700, .rep-card .text-indigo-500, .rep-card .text-indigo-600, .rep-card .text-indigo-700, .settings-page .text-indigo-500, .settings-page .text-indigo-600, .settings-page .text-indigo-700 { color: #a5b4fc !important; } [data-theme="dark"] .fin-container .text-orange-500, .fin-container .text-orange-600, .fin-container .text-orange-700, .services-container .text-orange-500, .services-container .text-orange-600, .services-container .text-orange-700, .ms-container .text-orange-500, .ms-container .text-orange-600, .ms-container .text-orange-700, .tp-container .text-orange-500, .tp-container .text-orange-600, .tp-container .text-orange-700, .al-container .text-orange-500, .al-container .text-orange-600, .al-container .text-orange-700, .em-container .text-orange-500, .em-container .text-orange-600, .em-container .text-orange-700, .rep-card .text-orange-500, .rep-card .text-orange-600, .rep-card .text-orange-700, .settings-page .text-orange-500, .settings-page .text-orange-600, .settings-page .text-orange-700 { color: #fdba74 !important; } [data-theme="dark"] .fin-container .text-pink-500, .fin-container .text-pink-600, .services-container .text-pink-500, .services-container .text-pink-600, .ms-container .text-pink-500, .ms-container .text-pink-600, .tp-container .text-pink-500, .tp-container .text-pink-600, .al-container .text-pink-500, .al-container .text-pink-600, .em-container .text-pink-500, .em-container .text-pink-600, .rep-card .text-pink-500, .rep-card .text-pink-600, .settings-page .text-pink-500, .settings-page .text-pink-600 { color: #f9a8d4 !important; } [data-theme="dark"] .fin-container .text-purple-500, .fin-container .text-purple-600, .fin-container .text-purple-700, .fin-container .text-purple-800, .services-container .text-purple-500, .services-container .text-purple-600, .services-container .text-purple-700, .services-container .text-purple-800, .ms-container .text-purple-500, .ms-container .text-purple-600, .ms-container .text-purple-700, .ms-container .text-purple-800, .tp-container .text-purple-500, .tp-container .text-purple-600, .tp-container .text-purple-700, .tp-container .text-purple-800, .al-container .text-purple-500, .al-container .text-purple-600, .al-container .text-purple-700, .al-container .text-purple-800, .em-container .text-purple-500, .em-container .text-purple-600, .em-container .text-purple-700, .em-container .text-purple-800, .rep-card .text-purple-500, .rep-card .text-purple-600, .rep-card .text-purple-700, .rep-card .text-purple-800, .settings-page .text-purple-500, .settings-page .text-purple-600, .settings-page .text-purple-700, .settings-page .text-purple-800 { color: #c4b5fd !important; } [data-theme="dark"] .fin-container .text-red-500, .fin-container .text-red-600, .fin-container .text-red-700, .fin-container .text-red-800, .services-container .text-red-500, .services-container .text-red-600, .services-container .text-red-700, .services-container .text-red-800, .ms-container .text-red-500, .ms-container .text-red-600, .ms-container .text-red-700, .ms-container .text-red-800, .tp-container .text-red-500, .tp-container .text-red-600, .tp-container .text-red-700, .tp-container .text-red-800, .al-container .text-red-500, .al-container .text-red-600, .al-container .text-red-700, .al-container .text-red-800, .em-container .text-red-500, .em-container .text-red-600, .em-container .text-red-700, .em-container .text-red-800, .rep-card .text-red-500, .rep-card .text-red-600, .rep-card .text-red-700, .rep-card .text-red-800, .settings-page .text-red-500, .settings-page .text-red-600, .settings-page .text-red-700, .settings-page .text-red-800 { color: #fca5a5 !important; } [data-theme="dark"] .fin-container .text-rose-500, .fin-container .text-rose-600, .fin-container .text-rose-700, .fin-container .text-rose-800, .services-container .text-rose-500, .services-container .text-rose-600, .services-container .text-rose-700, .services-container .text-rose-800, .ms-container .text-rose-500, .ms-container .text-rose-600, .ms-container .text-rose-700, .ms-container .text-rose-800, .tp-container .text-rose-500, .tp-container .text-rose-600, .tp-container .text-rose-700, .tp-container .text-rose-800, .al-container .text-rose-500, .al-container .text-rose-600, .al-container .text-rose-700, .al-container .text-rose-800, .em-container .text-rose-500, .em-container .text-rose-600, .em-container .text-rose-700, .em-container .text-rose-800, .rep-card .text-rose-500, .rep-card .text-rose-600, .rep-card .text-rose-700, .rep-card .text-rose-800, .settings-page .text-rose-500, .settings-page .text-rose-600, .settings-page .text-rose-700, .settings-page .text-rose-800 { color: #fda4af !important; } [data-theme="dark"] .fin-container .text-teal-500, .fin-container .text-teal-600, .fin-container .text-teal-700, .services-container .text-teal-500, .services-container .text-teal-600, .services-container .text-teal-700, .ms-container .text-teal-500, .ms-container .text-teal-600, .ms-container .text-teal-700, .tp-container .text-teal-500, .tp-container .text-teal-600, .tp-container .text-teal-700, .al-container .text-teal-500, .al-container .text-teal-600, .al-container .text-teal-700, .em-container .text-teal-500, .em-container .text-teal-600, .em-container .text-teal-700, .rep-card .text-teal-500, .rep-card .text-teal-600, .rep-card .text-teal-700, .settings-page .text-teal-500, .settings-page .text-teal-600, .settings-page .text-teal-700 { color: #5eead4 !important; } [data-theme="dark"] .fin-container .text-white, .services-container .text-white, .ms-container .text-white, .tp-container .text-white, .al-container .text-white, .em-container .text-white, .rep-card .text-white, .settings-page .text-white { color: #ffffff !important; } [data-theme="dark"] .fin-container .bg-amber-50, .fin-container .bg-yellow-50, .services-container .bg-amber-50, .services-container .bg-yellow-50, .ms-container .bg-amber-50, .ms-container .bg-yellow-50, .tp-container .bg-amber-50, .tp-container .bg-yellow-50, .al-container .bg-amber-50, .al-container .bg-yellow-50, .em-container .bg-amber-50, .em-container .bg-yellow-50, .rep-card .bg-amber-50, .rep-card .bg-yellow-50, .settings-page .bg-amber-50, .settings-page .bg-yellow-50 { background-color: rgba(245, 158, 11, 0.18) !important; } [data-theme="dark"] .fin-container .bg-amber-100, .fin-container .bg-yellow-100, .services-container .bg-amber-100, .services-container .bg-yellow-100, .ms-container .bg-amber-100, .ms-container .bg-yellow-100, .tp-container .bg-amber-100, .tp-container .bg-yellow-100, .al-container .bg-amber-100, .al-container .bg-yellow-100, .em-container .bg-amber-100, .em-container .bg-yellow-100, .rep-card .bg-amber-100, .rep-card .bg-yellow-100, .settings-page .bg-amber-100, .settings-page .bg-yellow-100 { background-color: rgba(245, 158, 11, 0.20) !important; } [data-theme="dark"] .fin-container .bg-blue-50, .services-container .bg-blue-50, .ms-container .bg-blue-50, .tp-container .bg-blue-50, .al-container .bg-blue-50, .em-container .bg-blue-50, .rep-card .bg-blue-50, .settings-page .bg-blue-50 { background-color: rgba(59, 130, 246, 0.18) !important; } [data-theme="dark"] .fin-container .bg-blue-100, .services-container .bg-blue-100, .ms-container .bg-blue-100, .tp-container .bg-blue-100, .al-container .bg-blue-100, .em-container .bg-blue-100, .rep-card .bg-blue-100, .settings-page .bg-blue-100 { background-color: rgba(59, 130, 246, 0.20) !important; } [data-theme="dark"] .fin-container .bg-blue-600, .services-container .bg-blue-600, .ms-container .bg-blue-600, .tp-container .bg-blue-600, .al-container .bg-blue-600, .em-container .bg-blue-600, .rep-card .bg-blue-600, .settings-page .bg-blue-600 { background-color: var(--accent) !important; } [data-theme="dark"] .fin-container .bg-blue-700, .services-container .bg-blue-700, .ms-container .bg-blue-700, .tp-container .bg-blue-700, .al-container .bg-blue-700, .em-container .bg-blue-700, .rep-card .bg-blue-700, .settings-page .bg-blue-700 { background-color: var(--accent-strong) !important; } [data-theme="dark"] .fin-container .bg-cyan-50, .services-container .bg-cyan-50, .ms-container .bg-cyan-50, .tp-container .bg-cyan-50, .al-container .bg-cyan-50, .em-container .bg-cyan-50, .rep-card .bg-cyan-50, .settings-page .bg-cyan-50 { background-color: rgba(34, 211, 238, 0.18) !important; } [data-theme="dark"] .fin-container .bg-cyan-100, .services-container .bg-cyan-100, .ms-container .bg-cyan-100, .tp-container .bg-cyan-100, .al-container .bg-cyan-100, .em-container .bg-cyan-100, .rep-card .bg-cyan-100, .settings-page .bg-cyan-100 { background-color: rgba(34, 211, 238, 0.20) !important; } [data-theme="dark"] .fin-container .bg-gray-50, .fin-container .bg-slate-50, .services-container .bg-gray-50, .services-container .bg-slate-50, .ms-container .bg-gray-50, .ms-container .bg-slate-50, .tp-container .bg-gray-50, .tp-container .bg-slate-50, .al-container .bg-gray-50, .al-container .bg-slate-50, .em-container .bg-gray-50, .em-container .bg-slate-50, .rep-card .bg-gray-50, .rep-card .bg-slate-50, .settings-page .bg-gray-50, .settings-page .bg-slate-50 { background-color: var(--bg-subtle) !important; } [data-theme="dark"] .fin-container .bg-gray-100, .fin-container .bg-gray-200, .fin-container .bg-slate-100, .fin-container .bg-slate-200, .services-container .bg-gray-100, .services-container .bg-gray-200, .services-container .bg-slate-100, .services-container .bg-slate-200, .ms-container .bg-gray-100, .ms-container .bg-gray-200, .ms-container .bg-slate-100, .ms-container .bg-slate-200, .tp-container .bg-gray-100, .tp-container .bg-gray-200, .tp-container .bg-slate-100, .tp-container .bg-slate-200, .al-container .bg-gray-100, .al-container .bg-gray-200, .al-container .bg-slate-100, .al-container .bg-slate-200, .em-container .bg-gray-100, .em-container .bg-gray-200, .em-container .bg-slate-100, .em-container .bg-slate-200, .rep-card .bg-gray-100, .rep-card .bg-gray-200, .rep-card .bg-slate-100, .rep-card .bg-slate-200, .settings-page .bg-gray-100, .settings-page .bg-gray-200, .settings-page .bg-slate-100, .settings-page .bg-slate-200 { background-color: var(--bg-muted) !important; } [data-theme="dark"] .fin-container .bg-green-50, .services-container .bg-green-50, .ms-container .bg-green-50, .tp-container .bg-green-50, .al-container .bg-green-50, .em-container .bg-green-50, .rep-card .bg-green-50, .settings-page .bg-green-50 { background-color: rgba(16, 185, 129, 0.18) !important; } [data-theme="dark"] .fin-container .bg-green-100, .services-container .bg-green-100, .ms-container .bg-green-100, .tp-container .bg-green-100, .al-container .bg-green-100, .em-container .bg-green-100, .rep-card .bg-green-100, .settings-page .bg-green-100 { background-color: rgba(16, 185, 129, 0.20) !important; } [data-theme="dark"] .fin-container .bg-indigo-50, .services-container .bg-indigo-50, .ms-container .bg-indigo-50, .tp-container .bg-indigo-50, .al-container .bg-indigo-50, .em-container .bg-indigo-50, .rep-card .bg-indigo-50, .settings-page .bg-indigo-50 { background-color: rgba(99, 102, 241, 0.18) !important; } [data-theme="dark"] .fin-container .bg-indigo-100, .services-container .bg-indigo-100, .ms-container .bg-indigo-100, .tp-container .bg-indigo-100, .al-container .bg-indigo-100, .em-container .bg-indigo-100, .rep-card .bg-indigo-100, .settings-page .bg-indigo-100 { background-color: rgba(99, 102, 241, 0.20) !important; } [data-theme="dark"] .fin-container .bg-orange-50, .services-container .bg-orange-50, .ms-container .bg-orange-50, .tp-container .bg-orange-50, .al-container .bg-orange-50, .em-container .bg-orange-50, .rep-card .bg-orange-50, .settings-page .bg-orange-50 { background-color: rgba(249, 115, 22, 0.18) !important; } [data-theme="dark"] .fin-container .bg-orange-100, .services-container .bg-orange-100, .ms-container .bg-orange-100, .tp-container .bg-orange-100, .al-container .bg-orange-100, .em-container .bg-orange-100, .rep-card .bg-orange-100, .settings-page .bg-orange-100 { background-color: rgba(249, 115, 22, 0.20) !important; } [data-theme="dark"] .fin-container .bg-pink-50, .services-container .bg-pink-50, .ms-container .bg-pink-50, .tp-container .bg-pink-50, .al-container .bg-pink-50, .em-container .bg-pink-50, .rep-card .bg-pink-50, .settings-page .bg-pink-50 { background-color: rgba(236, 72, 153, 0.18) !important; } [data-theme="dark"] .fin-container .bg-pink-100, .services-container .bg-pink-100, .ms-container .bg-pink-100, .tp-container .bg-pink-100, .al-container .bg-pink-100, .em-container .bg-pink-100, .rep-card .bg-pink-100, .settings-page .bg-pink-100 { background-color: rgba(236, 72, 153, 0.20) !important; } [data-theme="dark"] .fin-container .bg-purple-50, .services-container .bg-purple-50, .ms-container .bg-purple-50, .tp-container .bg-purple-50, .al-container .bg-purple-50, .em-container .bg-purple-50, .rep-card .bg-purple-50, .settings-page .bg-purple-50 { background-color: rgba(139, 92, 246, 0.18) !important; } [data-theme="dark"] .fin-container .bg-purple-100, .services-container .bg-purple-100, .ms-container .bg-purple-100, .tp-container .bg-purple-100, .al-container .bg-purple-100, .em-container .bg-purple-100, .rep-card .bg-purple-100, .settings-page .bg-purple-100 { background-color: rgba(139, 92, 246, 0.20) !important; } [data-theme="dark"] .fin-container .bg-red-50, .services-container .bg-red-50, .ms-container .bg-red-50, .tp-container .bg-red-50, .al-container .bg-red-50, .em-container .bg-red-50, .rep-card .bg-red-50, .settings-page .bg-red-50 { background-color: rgba(239, 68, 68, 0.18) !important; } [data-theme="dark"] .fin-container .bg-red-100, .services-container .bg-red-100, .ms-container .bg-red-100, .tp-container .bg-red-100, .al-container .bg-red-100, .em-container .bg-red-100, .rep-card .bg-red-100, .settings-page .bg-red-100 { background-color: rgba(239, 68, 68, 0.20) !important; } [data-theme="dark"] .fin-container .bg-rose-50, .services-container .bg-rose-50, .ms-container .bg-rose-50, .tp-container .bg-rose-50, .al-container .bg-rose-50, .em-container .bg-rose-50, .rep-card .bg-rose-50, .settings-page .bg-rose-50 { background-color: rgba(244, 63, 94, 0.18) !important; } [data-theme="dark"] .fin-container .bg-rose-100, .services-container .bg-rose-100, .ms-container .bg-rose-100, .tp-container .bg-rose-100, .al-container .bg-rose-100, .em-container .bg-rose-100, .rep-card .bg-rose-100, .settings-page .bg-rose-100 { background-color: rgba(244, 63, 94, 0.20) !important; } [data-theme="dark"] .fin-container .bg-sky-50, .services-container .bg-sky-50, .ms-container .bg-sky-50, .tp-container .bg-sky-50, .al-container .bg-sky-50, .em-container .bg-sky-50, .rep-card .bg-sky-50, .settings-page .bg-sky-50 { background-color: rgba(56, 189, 248, 0.18) !important; } [data-theme="dark"] .fin-container .bg-sky-100, .services-container .bg-sky-100, .ms-container .bg-sky-100, .tp-container .bg-sky-100, .al-container .bg-sky-100, .em-container .bg-sky-100, .rep-card .bg-sky-100, .settings-page .bg-sky-100 { background-color: rgba(56, 189, 248, 0.20) !important; } [data-theme="dark"] .fin-container .bg-teal-50, .services-container .bg-teal-50, .ms-container .bg-teal-50, .tp-container .bg-teal-50, .al-container .bg-teal-50, .em-container .bg-teal-50, .rep-card .bg-teal-50, .settings-page .bg-teal-50 { background-color: rgba(20, 184, 166, 0.18) !important; } [data-theme="dark"] .fin-container .bg-teal-100, .services-container .bg-teal-100, .ms-container .bg-teal-100, .tp-container .bg-teal-100, .al-container .bg-teal-100, .em-container .bg-teal-100, .rep-card .bg-teal-100, .settings-page .bg-teal-100 { background-color: rgba(20, 184, 166, 0.20) !important; } [data-theme="dark"] .fin-container .bg-white, .services-container .bg-white, .ms-container .bg-white, .tp-container .bg-white, .al-container .bg-white, .em-container .bg-white, .rep-card .bg-white, .settings-page .bg-white { background-color: var(--bg-surface) !important; } [data-theme="dark"] .fin-container .border-amber-200, .fin-container .border-yellow-200, .services-container .border-amber-200, .services-container .border-yellow-200, .ms-container .border-amber-200, .ms-container .border-yellow-200, .tp-container .border-amber-200, .tp-container .border-yellow-200, .al-container .border-amber-200, .al-container .border-yellow-200, .em-container .border-amber-200, .em-container .border-yellow-200, .rep-card .border-amber-200, .rep-card .border-yellow-200, .settings-page .border-amber-200, .settings-page .border-yellow-200 { border-color: rgba(245, 158, 11, 0.40) !important; } [data-theme="dark"] .fin-container .border-amber-300, .fin-container .border-yellow-300, .services-container .border-amber-300, .services-container .border-yellow-300, .ms-container .border-amber-300, .ms-container .border-yellow-300, .tp-container .border-amber-300, .tp-container .border-yellow-300, .al-container .border-amber-300, .al-container .border-yellow-300, .em-container .border-amber-300, .em-container .border-yellow-300, .rep-card .border-amber-300, .rep-card .border-yellow-300, .settings-page .border-amber-300, .settings-page .border-yellow-300 { border-color: rgba(245, 158, 11, 0.50) !important; } [data-theme="dark"] .fin-container .border-blue-100, .services-container .border-blue-100, .ms-container .border-blue-100, .tp-container .border-blue-100, .al-container .border-blue-100, .em-container .border-blue-100, .rep-card .border-blue-100, .settings-page .border-blue-100 { border-color: rgba(59, 130, 246, 0.30) !important; } [data-theme="dark"] .fin-container .border-blue-200, .services-container .border-blue-200, .ms-container .border-blue-200, .tp-container .border-blue-200, .al-container .border-blue-200, .em-container .border-blue-200, .rep-card .border-blue-200, .settings-page .border-blue-200 { border-color: rgba(59, 130, 246, 0.40) !important; } [data-theme="dark"] .fin-container .border-blue-300, .services-container .border-blue-300, .ms-container .border-blue-300, .tp-container .border-blue-300, .al-container .border-blue-300, .em-container .border-blue-300, .rep-card .border-blue-300, .settings-page .border-blue-300 { border-color: rgba(59, 130, 246, 0.50) !important; } [data-theme="dark"] .fin-container .border-blue-400, .services-container .border-blue-400, .ms-container .border-blue-400, .tp-container .border-blue-400, .al-container .border-blue-400, .em-container .border-blue-400, .rep-card .border-blue-400, .settings-page .border-blue-400 { border-color: rgba(59, 130, 246, 0.60) !important; } [data-theme="dark"] .fin-container .border-blue-500, .services-container .border-blue-500, .ms-container .border-blue-500, .tp-container .border-blue-500, .al-container .border-blue-500, .em-container .border-blue-500, .rep-card .border-blue-500, .settings-page .border-blue-500 { border-color: var(--accent) !important; } [data-theme="dark"] .fin-container .border-cyan-200, .services-container .border-cyan-200, .ms-container .border-cyan-200, .tp-container .border-cyan-200, .al-container .border-cyan-200, .em-container .border-cyan-200, .rep-card .border-cyan-200, .settings-page .border-cyan-200 { border-color: rgba(34, 211, 238, 0.40) !important; } [data-theme="dark"] .fin-container .border-cyan-300, .services-container .border-cyan-300, .ms-container .border-cyan-300, .tp-container .border-cyan-300, .al-container .border-cyan-300, .em-container .border-cyan-300, .rep-card .border-cyan-300, .settings-page .border-cyan-300 { border-color: rgba(34, 211, 238, 0.50) !important; } [data-theme="dark"] .fin-container .border-gray-100, .services-container .border-gray-100, .ms-container .border-gray-100, .tp-container .border-gray-100, .al-container .border-gray-100, .em-container .border-gray-100, .rep-card .border-gray-100, .settings-page .border-gray-100 { border-color: var(--border-subtle) !important; } [data-theme="dark"] .fin-container .border-gray-200, .fin-container .border-slate-200, .services-container .border-gray-200, .services-container .border-slate-200, .ms-container .border-gray-200, .ms-container .border-slate-200, .tp-container .border-gray-200, .tp-container .border-slate-200, .al-container .border-gray-200, .al-container .border-slate-200, .em-container .border-gray-200, .em-container .border-slate-200, .rep-card .border-gray-200, .rep-card .border-slate-200, .settings-page .border-gray-200, .settings-page .border-slate-200 { border-color: var(--border) !important; } [data-theme="dark"] .fin-container .border-gray-300, .fin-container .border-gray-400, .fin-container .border-slate-300, .services-container .border-gray-300, .services-container .border-gray-400, .services-container .border-slate-300, .ms-container .border-gray-300, .ms-container .border-gray-400, .ms-container .border-slate-300, .tp-container .border-gray-300, .tp-container .border-gray-400, .tp-container .border-slate-300, .al-container .border-gray-300, .al-container .border-gray-400, .al-container .border-slate-300, .em-container .border-gray-300, .em-container .border-gray-400, .em-container .border-slate-300, .rep-card .border-gray-300, .rep-card .border-gray-400, .rep-card .border-slate-300, .settings-page .border-gray-300, .settings-page .border-gray-400, .settings-page .border-slate-300 { border-color: var(--border-strong) !important; } [data-theme="dark"] .fin-container .border-green-200, .services-container .border-green-200, .ms-container .border-green-200, .tp-container .border-green-200, .al-container .border-green-200, .em-container .border-green-200, .rep-card .border-green-200, .settings-page .border-green-200 { border-color: rgba(16, 185, 129, 0.40) !important; } [data-theme="dark"] .fin-container .border-green-300, .services-container .border-green-300, .ms-container .border-green-300, .tp-container .border-green-300, .al-container .border-green-300, .em-container .border-green-300, .rep-card .border-green-300, .settings-page .border-green-300 { border-color: rgba(16, 185, 129, 0.50) !important; } [data-theme="dark"] .fin-container .border-green-500, .services-container .border-green-500, .ms-container .border-green-500, .tp-container .border-green-500, .al-container .border-green-500, .em-container .border-green-500, .rep-card .border-green-500, .settings-page .border-green-500 { border-color: #10b981 !important; } [data-theme="dark"] .fin-container .border-indigo-200, .services-container .border-indigo-200, .ms-container .border-indigo-200, .tp-container .border-indigo-200, .al-container .border-indigo-200, .em-container .border-indigo-200, .rep-card .border-indigo-200, .settings-page .border-indigo-200 { border-color: rgba(99, 102, 241, 0.40) !important; } [data-theme="dark"] .fin-container .border-indigo-300, .services-container .border-indigo-300, .ms-container .border-indigo-300, .tp-container .border-indigo-300, .al-container .border-indigo-300, .em-container .border-indigo-300, .rep-card .border-indigo-300, .settings-page .border-indigo-300 { border-color: rgba(99, 102, 241, 0.50) !important; } [data-theme="dark"] .fin-container .border-orange-200, .services-container .border-orange-200, .ms-container .border-orange-200, .tp-container .border-orange-200, .al-container .border-orange-200, .em-container .border-orange-200, .rep-card .border-orange-200, .settings-page .border-orange-200 { border-color: rgba(249, 115, 22, 0.40) !important; } [data-theme="dark"] .fin-container .border-orange-300, .services-container .border-orange-300, .ms-container .border-orange-300, .tp-container .border-orange-300, .al-container .border-orange-300, .em-container .border-orange-300, .rep-card .border-orange-300, .settings-page .border-orange-300 { border-color: rgba(249, 115, 22, 0.50) !important; } [data-theme="dark"] .fin-container .border-pink-200, .services-container .border-pink-200, .ms-container .border-pink-200, .tp-container .border-pink-200, .al-container .border-pink-200, .em-container .border-pink-200, .rep-card .border-pink-200, .settings-page .border-pink-200 { border-color: rgba(236, 72, 153, 0.40) !important; } [data-theme="dark"] .fin-container .border-purple-200, .services-container .border-purple-200, .ms-container .border-purple-200, .tp-container .border-purple-200, .al-container .border-purple-200, .em-container .border-purple-200, .rep-card .border-purple-200, .settings-page .border-purple-200 { border-color: rgba(139, 92, 246, 0.40) !important; } [data-theme="dark"] .fin-container .border-purple-300, .services-container .border-purple-300, .ms-container .border-purple-300, .tp-container .border-purple-300, .al-container .border-purple-300, .em-container .border-purple-300, .rep-card .border-purple-300, .settings-page .border-purple-300 { border-color: rgba(139, 92, 246, 0.50) !important; } [data-theme="dark"] .fin-container .border-purple-400, .services-container .border-purple-400, .ms-container .border-purple-400, .tp-container .border-purple-400, .al-container .border-purple-400, .em-container .border-purple-400, .rep-card .border-purple-400, .settings-page .border-purple-400 { border-color: rgba(139, 92, 246, 0.60) !important; } [data-theme="dark"] .fin-container .border-purple-500, .services-container .border-purple-500, .ms-container .border-purple-500, .tp-container .border-purple-500, .al-container .border-purple-500, .em-container .border-purple-500, .rep-card .border-purple-500, .settings-page .border-purple-500 { border-color: #8b5cf6 !important; } [data-theme="dark"] .fin-container .border-red-200, .services-container .border-red-200, .ms-container .border-red-200, .tp-container .border-red-200, .al-container .border-red-200, .em-container .border-red-200, .rep-card .border-red-200, .settings-page .border-red-200 { border-color: rgba(239, 68, 68, 0.40) !important; } [data-theme="dark"] .fin-container .border-red-300, .services-container .border-red-300, .ms-container .border-red-300, .tp-container .border-red-300, .al-container .border-red-300, .em-container .border-red-300, .rep-card .border-red-300, .settings-page .border-red-300 { border-color: rgba(239, 68, 68, 0.50) !important; } [data-theme="dark"] .fin-container .border-rose-200, .services-container .border-rose-200, .ms-container .border-rose-200, .tp-container .border-rose-200, .al-container .border-rose-200, .em-container .border-rose-200, .rep-card .border-rose-200, .settings-page .border-rose-200 { border-color: rgba(244, 63, 94, 0.40) !important; } [data-theme="dark"] .fin-container .border-sky-200, .services-container .border-sky-200, .ms-container .border-sky-200, .tp-container .border-sky-200, .al-container .border-sky-200, .em-container .border-sky-200, .rep-card .border-sky-200, .settings-page .border-sky-200 { border-color: rgba(56, 189, 248, 0.40) !important; } [data-theme="dark"] .fin-container .border-teal-200, .services-container .border-teal-200, .ms-container .border-teal-200, .tp-container .border-teal-200, .al-container .border-teal-200, .em-container .border-teal-200, .rep-card .border-teal-200, .settings-page .border-teal-200 { border-color: rgba(20, 184, 166, 0.40) !important; } [data-theme="dark"] .fin-container .border-teal-500, .services-container .border-teal-500, .ms-container .border-teal-500, .tp-container .border-teal-500, .al-container .border-teal-500, .em-container .border-teal-500, .rep-card .border-teal-500, .settings-page .border-teal-500 { border-color: #14b8a6 !important; } /* ─── Scoped overrides for the 3 problem pages: finance, my_schedule, employee_management ─── These pages contain large