/** * AdminFactura — Design System & Theme Engine * * Sistema de temas basado en CSS Custom Properties. * Soporta 7 paletas de color + Dark Mode. * * Uso: * * * * Temas disponibles: indigo, emerald, amber, rose, cyan, violet, slate * Modos: light, dark */ /* ============================================ THEME DEFINITIONS — LIGHT MODE ============================================ */ /* ---------- Indigo (Default) ---------- */ [data-theme="indigo"], :root { --c-primary-50: 238 242 255; --c-primary-100: 224 231 255; --c-primary-200: 199 210 254; --c-primary-400: 129 140 248; --c-primary-500: 99 102 241; --c-primary-600: 79 70 229; --c-primary-700: 67 56 202; --c-primary-900: 49 46 129; --c-surface: 248 250 252; --c-surface-card: 255 255 255; --c-surface-raised: 241 245 249; --c-sidebar: 15 23 42; --c-sidebar-hover: 255 255 255; --c-sidebar-border: 30 41 59; --c-sidebar-text: 148 163 184; --c-sidebar-active-bg: 99 102 241; --c-text: 15 23 42; --c-text-secondary: 100 116 139; --c-text-muted: 148 163 184; --c-text-inverted: 255 255 255; --c-border: 241 245 249; --c-border-strong: 226 232 240; --c-input-bg: 248 250 252; --c-input-border: 241 245 249; --c-input-focus: 99 102 241; --c-success: 16 185 129; --c-warning: 245 158 11; --c-danger: 239 68 68; --c-info: 59 130 246; --shadow-color: 0 0% 70%; --radius-sm: 0.5rem; --radius-md: 0.75rem; --radius-lg: 1rem; --radius-xl: 1.5rem; --radius-2xl: 1.5rem; --radius-card: 1.5rem; } /* ---------- Emerald ---------- */ [data-theme="emerald"] { --c-primary-50: 236 253 245; --c-primary-100: 209 250 229; --c-primary-200: 167 243 208; --c-primary-400: 52 211 153; --c-primary-500: 16 185 129; --c-primary-600: 5 150 105; --c-primary-700: 4 120 87; --c-primary-900: 6 78 59; --c-sidebar-active-bg: 5 150 105; } /* ---------- Amber ---------- */ [data-theme="amber"] { --c-primary-50: 255 251 235; --c-primary-100: 254 243 199; --c-primary-200: 253 230 138; --c-primary-400: 251 191 36; --c-primary-500: 245 158 11; --c-primary-600: 217 119 6; --c-primary-700: 180 83 9; --c-primary-900: 120 53 15; --c-sidebar: 28 25 23; --c-sidebar-border: 41 37 36; --c-sidebar-active-bg: 217 119 6; } /* ---------- Rose ---------- */ [data-theme="rose"] { --c-primary-50: 255 241 242; --c-primary-100: 255 228 230; --c-primary-200: 254 205 211; --c-primary-400: 251 113 133; --c-primary-500: 244 63 94; --c-primary-600: 225 29 72; --c-primary-700: 190 18 60; --c-primary-900: 136 19 55; --c-sidebar: 28 25 23; --c-sidebar-border: 41 37 36; --c-sidebar-active-bg: 225 29 72; } /* ---------- Cyan ---------- */ [data-theme="cyan"] { --c-primary-50: 236 254 255; --c-primary-100: 207 250 254; --c-primary-200: 165 243 252; --c-primary-400: 34 211 238; --c-primary-500: 6 182 212; --c-primary-600: 8 145 178; --c-primary-700: 14 116 144; --c-primary-900: 22 78 99; --c-sidebar-active-bg: 8 145 178; } /* ---------- Violet ---------- */ [data-theme="violet"] { --c-primary-50: 245 243 255; --c-primary-100: 237 233 254; --c-primary-200: 221 214 254; --c-primary-400: 167 139 250; --c-primary-500: 139 92 246; --c-primary-600: 124 58 237; --c-primary-700: 109 40 217; --c-primary-900: 76 29 149; --c-sidebar: 30 27 75; --c-sidebar-border: 49 46 129; --c-sidebar-active-bg: 124 58 237; } /* ---------- Slate (Minimal) ---------- */ [data-theme="slate"] { --c-primary-50: 248 250 252; --c-primary-100: 241 245 249; --c-primary-200: 226 232 240; --c-primary-400: 148 163 184; --c-primary-500: 100 116 139; --c-primary-600: 71 85 105; --c-primary-700: 51 65 85; --c-primary-900: 15 23 42; --c-sidebar-active-bg: 71 85 105; } /* ============================================ DARK MODE OVERRIDES ============================================ */ [data-mode="dark"] { --c-surface: 15 23 42; --c-surface-card: 30 41 59; --c-surface-raised: 51 65 85; --c-sidebar: 2 6 23; --c-sidebar-border: 30 41 59; --c-sidebar-text: 148 163 184; --c-text: 248 250 252; --c-text-secondary: 148 163 184; --c-text-muted: 100 116 139; --c-text-inverted: 15 23 42; --c-border: 51 65 85; --c-border-strong: 71 85 105; --c-input-bg: 30 41 59; --c-input-border: 51 65 85; --shadow-color: 0 0% 5%; } /* Dark mode specific sidebar adjustments per theme */ [data-mode="dark"][data-theme="amber"], [data-mode="dark"][data-theme="rose"] { --c-sidebar: 12 10 9; --c-sidebar-border: 28 25 23; } [data-mode="dark"][data-theme="violet"] { --c-sidebar: 13 11 51; --c-sidebar-border: 30 27 75; } /* ============================================ SEMANTIC UTILITY CLASSES ============================================ */ /* Surfaces */ .bg-surface { background-color: rgb(var(--c-surface)); } .bg-surface-card { background-color: rgb(var(--c-surface-card)); } .bg-surface-raised { background-color: rgb(var(--c-surface-raised)); } /* Primary colors */ .bg-primary { background-color: rgb(var(--c-primary-500)); } .bg-primary-hover { background-color: rgb(var(--c-primary-600)); } .bg-primary-light { background-color: rgb(var(--c-primary-50)); } .bg-primary-100 { background-color: rgb(var(--c-primary-100)); } .bg-primary-200 { background-color: rgb(var(--c-primary-200)); } .text-primary { color: rgb(var(--c-primary-500)); } .text-primary-600 { color: rgb(var(--c-primary-600)); } .text-primary-700 { color: rgb(var(--c-primary-700)); } .text-primary-400 { color: rgb(var(--c-primary-400)); } .text-primary-900 { color: rgb(var(--c-primary-900)); } .border-primary { border-color: rgb(var(--c-primary-500)); } .border-primary-200 { border-color: rgb(var(--c-primary-200)); } .border-primary-100 { border-color: rgb(var(--c-primary-100)); } .ring-primary { --tw-ring-color: rgb(var(--c-primary-500) / 0.2); } /* Sidebar */ .bg-sidebar { background-color: rgb(var(--c-sidebar)); } .border-sidebar { border-color: rgb(var(--c-sidebar-border)); } .text-sidebar { color: rgb(var(--c-sidebar-text)); } .bg-sidebar-active { background-color: rgb(var(--c-sidebar-active-bg)); } /* Text */ .text-base-primary { color: rgb(var(--c-text)); } .text-base-secondary { color: rgb(var(--c-text-secondary)); } .text-base-muted { color: rgb(var(--c-text-muted)); } .text-base-inverted { color: rgb(var(--c-text-inverted)); } /* Borders */ .border-theme { border-color: rgb(var(--c-border)); } .border-theme-strong { border-color: rgb(var(--c-border-strong)); } /* Input */ .bg-input { background-color: rgb(var(--c-input-bg)); } .border-input { border-color: rgb(var(--c-input-border)); } /* Gradient */ .gradient-primary { background: linear-gradient(135deg, rgb(var(--c-primary-500)) 0%, rgb(var(--c-primary-700)) 100%); } .gradient-text-primary { background: linear-gradient(135deg, rgb(var(--c-primary-500)) 0%, rgb(var(--c-primary-700)) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Shadow with theme-aware color */ .shadow-primary { box-shadow: 0 4px 14px 0 rgb(var(--c-primary-500) / 0.25); } .shadow-primary-lg { box-shadow: 0 10px 25px -5px rgb(var(--c-primary-500) / 0.2); } /* ============================================ THEME TRANSITION ============================================ */ html.theme-transitioning, html.theme-transitioning *, html.theme-transitioning *::before, html.theme-transitioning *::after { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important; } /* ============================================ SIDEBAR — THEME-AWARE STYLES ============================================ */ .nav-link { transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); position: relative; } .nav-link:hover { background: rgba(255, 255, 255, 0.05); color: white; } .nav-link.active { background: rgb(var(--c-sidebar-active-bg) / 0.15); color: rgb(var(--c-primary-400)); border-right: 3px solid rgb(var(--c-sidebar-active-bg)); border-radius: 0; margin-right: -12px; } .nav-link.active i { color: rgb(var(--c-primary-400)); } /* ============================================ COMPONENT STYLES ============================================ */ /* Safe area for iOS devices */ .safe-area-bottom { padding-bottom: env(safe-area-inset-bottom, 0); } /* Navigation item styles */ .nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0.5rem; color: rgb(var(--c-text-muted)); transition: color 0.2s; } .nav-item:hover, .nav-item.active { color: rgb(var(--c-primary-500)); } .nav-item svg { margin-bottom: 0.25rem; } /* Toast notifications */ .toast { position: fixed; bottom: 5rem; left: 50%; transform: translateX(-50%) translateY(100%); padding: 0.75rem 1.5rem; border-radius: 0.75rem; font-size: 0.875rem; font-weight: 500; z-index: 100; opacity: 0; transition: all 0.3s ease; max-width: 90%; text-align: center; } .toast.show { transform: translateX(-50%) translateY(0); opacity: 1; } .toast-success { background-color: rgb(var(--c-success)); color: white; } .toast-error { background-color: rgb(var(--c-danger)); color: white; } .toast-info { background-color: rgb(var(--c-primary-500)); color: white; } /* Confetti animation */ .confetti-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 200; overflow: hidden; } .confetti { position: absolute; width: 10px; height: 10px; border-radius: 2px; animation: confetti-fall 3s ease-out forwards; } @keyframes confetti-fall { 0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; } 100% { transform: translateY(100vh) rotate(720deg); opacity: 0; } } /* Scanner animation */ @keyframes scan { 0%, 100% { top: 0; } 50% { top: calc(100% - 2px); } } .animate-scan { animation: scan 2s ease-in-out infinite; } /* Slide up animation for modals */ @keyframes slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } } .animate-slide-up { animation: slide-up 0.3s ease-out; } /* Pulse animation for loading */ @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } /* Spin animation */ @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .animate-spin { animation: spin 1s linear infinite; } /* Custom scrollbar — theme-aware */ ::-webkit-scrollbar { width: 4px; height: 4px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgb(var(--c-border-strong)); border-radius: 2px; } ::-webkit-scrollbar-thumb:hover { background: rgb(var(--c-text-muted)); } /* Input focus styles — theme-aware */ input:focus, select:focus, textarea:focus { outline: none; box-shadow: 0 0 0 2px rgb(var(--c-primary-500) / 0.3); } /* Button disabled state */ button:disabled, a.disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; } /* Card hover effect */ .card-hover { transition: transform 0.2s, box-shadow 0.2s; } .card-hover:hover { transform: translateY(-2px); box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); } /* Gradient text — theme-aware */ .gradient-text { background: linear-gradient(135deg, rgb(var(--c-primary-500)) 0%, rgb(var(--c-primary-700)) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Glass effect */ .glass { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } [data-mode="dark"] .glass { background: rgba(0, 0, 0, 0.2); } /* Badge styles — theme-aware */ .badge { display: inline-flex; align-items: center; padding: 0.25rem 0.75rem; font-size: 0.75rem; font-weight: 500; border-radius: 9999px; } .badge-success { background-color: #d1fae5; color: #065f46; } .badge-warning { background-color: #fef3c7; color: #92400e; } .badge-danger { background-color: #fee2e2; color: #991b1b; } .badge-info { background-color: rgb(var(--c-primary-100)); color: rgb(var(--c-primary-900)); } [data-mode="dark"] .badge-success { background-color: rgba(16, 185, 129, 0.15); color: #6ee7b7; } [data-mode="dark"] .badge-warning { background-color: rgba(245, 158, 11, 0.15); color: #fcd34d; } [data-mode="dark"] .badge-danger { background-color: rgba(239, 68, 68, 0.15); color: #fca5a5; } [data-mode="dark"] .badge-info { background-color: rgb(var(--c-primary-500) / 0.15); color: rgb(var(--c-primary-400)); } /* Progress bar — theme-aware */ .progress-bar { height: 0.5rem; background-color: rgb(var(--c-border)); border-radius: 9999px; overflow: hidden; } .progress-bar-fill { height: 100%; background: linear-gradient(90deg, rgb(var(--c-primary-500)) 0%, rgb(var(--c-primary-700)) 100%); border-radius: 9999px; transition: width 0.3s ease; } /* Skeleton loading — theme-aware */ .skeleton { background: linear-gradient(90deg, rgb(var(--c-surface-raised)) 25%, rgb(var(--c-border)) 50%, rgb(var(--c-surface-raised)) 75%); background-size: 200% 100%; animation: skeleton-loading 1.5s infinite; } @keyframes skeleton-loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Hide scrollbar but keep functionality */ .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } .no-scrollbar::-webkit-scrollbar { display: none; } /* Truncate text with ellipsis */ .truncate-2 { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Price highlight — theme-aware */ .price-highlight { font-size: 1.5rem; font-weight: 700; color: rgb(var(--c-primary-500)); } /* Confidence score colors */ .confidence-high { background-color: #d1fae5; color: #065f46; } .confidence-medium { background-color: #fef3c7; color: #92400e; } .confidence-low { background-color: #fee2e2; color: #991b1b; } /* ============================================ SIDEBAR COLLAPSE TRANSITIONS ============================================ */ #sidebar { transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s ease-in-out; } @media (min-width: 1024px) { .sidebar-collapsed { width: 72px !important; } .sidebar-collapsed .sidebar-text, .sidebar-collapsed .sidebar-section-title, .sidebar-collapsed .sidebar-footer-text, .sidebar-collapsed .sidebar-logo-text { display: none; } .sidebar-collapsed .nav-link { justify-content: center; padding-left: 0; padding-right: 0; } .sidebar-collapsed .sidebar-header { justify-content: center; padding-left: 0; padding-right: 0; } } .sidebar-collapsed .nav-section-title { text-align: center; padding: 0; font-size: 8px; } /* Custom scrollbar for sidebar */ .sidebar-scroll::-webkit-scrollbar { width: 3px; } .sidebar-scroll::-webkit-scrollbar-track { background: transparent; } .sidebar-scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 10px; } /* Main transition */ main { transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1); } @media (min-width: 1024px) { .content-shifted { margin-left: 72px; } } /* ============================================ PREMIUM TOOLTIPS ============================================ */ .sidebar-tooltip { position: fixed; left: 80px; background: rgba(var(--c-sidebar), 0.95); backdrop-filter: blur(8px); color: white; padding: 6px 12px; border-radius: 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; pointer-events: none; opacity: 0; transform: translateX(-10px); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); z-index: 100; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3); } .sidebar-tooltip.visible { opacity: 1; transform: translateX(0); } .sidebar-tooltip::before { content: ''; position: absolute; left: -4px; top: 50%; transform: translateY(-50%) rotate(45deg); width: 8px; height: 8px; background: rgba(var(--c-sidebar), 0.95); border-left: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.1); } /* ============================================ THEME SELECTOR COMPONENT ============================================ */ .theme-selector-panel { position: absolute; bottom: calc(100% + 8px); left: 8px; right: 8px; background: rgb(var(--c-surface-card)); border: 1px solid rgb(var(--c-border)); border-radius: var(--radius-xl); padding: 1rem; box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.25); opacity: 0; transform: translateY(10px) scale(0.95); pointer-events: none; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); z-index: 60; } .theme-selector-panel.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .theme-dot { width: 28px; height: 28px; border-radius: 50%; cursor: pointer; border: 3px solid transparent; transition: all 0.2s ease; position: relative; } .theme-dot:hover { transform: scale(1.15); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .theme-dot.active { border-color: rgb(var(--c-primary-500)); box-shadow: 0 0 0 2px rgb(var(--c-surface-card)), 0 0 0 4px rgb(var(--c-primary-500)); } .theme-dot.active::after { content: '✓'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 900; color: white; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } /* Dark mode toggle */ .mode-toggle { position: relative; width: 48px; height: 26px; background: rgb(var(--c-border-strong)); border-radius: 13px; cursor: pointer; transition: background 0.3s ease; border: none; padding: 0; } .mode-toggle.dark { background: rgb(var(--c-primary-500)); } .mode-toggle-knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: white; border-radius: 50%; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: flex; align-items: center; justify-content: center; font-size: 11px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .mode-toggle.dark .mode-toggle-knob { transform: translateX(22px); } /* ============================================ UI DENSITY (ZOOM) SYSTEM ============================================ Permite al usuario escalar el contenido principal para adaptarse a pantallas de baja resolución. Niveles: compact (85%), default (100%), comfortable (90%), spacious (95%) Se aplica vía data-density en y afecta solo el
. ============================================ */ /* Density slider styles */ .density-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 2px; background: rgb(var(--c-border-strong)); outline: none; transition: background 0.2s; } .density-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: rgb(var(--c-primary-500)); cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); transition: transform 0.15s ease, box-shadow 0.15s ease; } .density-slider::-webkit-slider-thumb:hover { transform: scale(1.2); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25); } .density-slider::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: rgb(var(--c-primary-500)); cursor: pointer; border: none; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); } /* Density level labels */ .density-labels { display: flex; justify-content: space-between; margin-top: 4px; } .density-label { font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: rgb(var(--c-text-muted)); transition: color 0.2s; } .density-label.active { color: rgb(var(--c-primary-500)); } /* Zoom applied to main content only */ [data-density="compact"] main { zoom: 0.82; } [data-density="small"] main { zoom: 0.88; } [data-density="default"] main, main { zoom: 1; } [data-density="comfortable"] main { zoom: 0.94; } /* Firefox fallback: zoom not supported, use transform */ @supports not (zoom: 1) { [data-density="compact"] main { transform: scale(0.82); transform-origin: top left; width: 121.95%; } [data-density="small"] main { transform: scale(0.88); transform-origin: top left; width: 113.64%; } [data-density="comfortable"] main { transform: scale(0.94); transform-origin: top left; width: 106.38%; } }/* ============================================ DARK MODE — TAILWIND CLASS OVERRIDES ============================================ Intercepta clases Tailwind hardcodeadas en vistas que aún no fueron migradas a CSS custom properties. ============================================ */ /* --- Backgrounds --- */ [data-mode="dark"] .bg-white { background-color: rgb(var(--c-surface-card)) !important; } [data-mode="dark"] .bg-slate-50, [data-mode="dark"] .bg-slate-100 { background-color: rgb(var(--c-surface)) !important; } [data-mode="dark"] .bg-slate-900 { background-color: rgb(var(--c-sidebar)) !important; } [data-mode="dark"] .bg-gray-50, [data-mode="dark"] .bg-gray-100 { background-color: rgb(var(--c-surface)) !important; } /* Input backgrounds */ [data-mode="dark"] .bg-slate-50\/50, [data-mode="dark"] .bg-slate-50\/30 { background-color: rgb(var(--c-surface-raised) / 0.3) !important; } /* Colored light backgrounds → subtle dark versions */ [data-mode="dark"] .bg-indigo-50, [data-mode="dark"] .bg-indigo-100 { background-color: rgb(var(--c-primary-500) / 0.12) !important; } [data-mode="dark"] .bg-indigo-600 { background-color: rgb(var(--c-primary-600)) !important; } [data-mode="dark"] .bg-indigo-900 { background-color: rgb(var(--c-primary-900)) !important; } [data-mode="dark"] .bg-emerald-50, [data-mode="dark"] .bg-emerald-100 { background-color: rgba(16, 185, 129, 0.12) !important; } [data-mode="dark"] .bg-amber-50, [data-mode="dark"] .bg-amber-100 { background-color: rgba(245, 158, 11, 0.12) !important; } [data-mode="dark"] .bg-rose-50, [data-mode="dark"] .bg-rose-100 { background-color: rgba(244, 63, 94, 0.12) !important; } [data-mode="dark"] .bg-blue-50, [data-mode="dark"] .bg-blue-100 { background-color: rgba(59, 130, 246, 0.12) !important; } [data-mode="dark"] .bg-purple-50, [data-mode="dark"] .bg-purple-100 { background-color: rgba(139, 92, 246, 0.12) !important; } [data-mode="dark"] .bg-teal-50 { background-color: rgba(20, 184, 166, 0.12) !important; } [data-mode="dark"] .bg-red-50, [data-mode="dark"] .bg-red-100 { background-color: rgba(239, 68, 68, 0.12) !important; } [data-mode="dark"] .bg-yellow-50, [data-mode="dark"] .bg-yellow-100 { background-color: rgba(234, 179, 8, 0.12) !important; } [data-mode="dark"] .bg-green-50, [data-mode="dark"] .bg-green-100 { background-color: rgba(34, 197, 94, 0.12) !important; } [data-mode="dark"] .bg-violet-50 { background-color: rgba(139, 92, 246, 0.12) !important; } [data-mode="dark"] .bg-cyan-50 { background-color: rgba(6, 182, 212, 0.12) !important; } /* --- Text Colors --- */ [data-mode="dark"] .text-slate-900, [data-mode="dark"] .text-slate-800 { color: rgb(var(--c-text)) !important; } [data-mode="dark"] .text-slate-700 { color: rgb(226 232 240) !important; } [data-mode="dark"] .text-slate-600 { color: rgb(203 213 225) !important; } [data-mode="dark"] .text-slate-500 { color: rgb(var(--c-text-secondary)) !important; } [data-mode="dark"] .text-slate-400 { color: rgb(var(--c-text-muted)) !important; } [data-mode="dark"] .text-gray-800, [data-mode="dark"] .text-gray-900 { color: rgb(var(--c-text)) !important; } [data-mode="dark"] .text-gray-700 { color: rgb(226 232 240) !important; } [data-mode="dark"] .text-gray-600 { color: rgb(203 213 225) !important; } [data-mode="dark"] .text-gray-500 { color: rgb(var(--c-text-secondary)) !important; } /* Colored text — keep but soften for dark */ [data-mode="dark"] .text-indigo-600, [data-mode="dark"] .text-indigo-700 { color: rgb(var(--c-primary-400)) !important; } [data-mode="dark"] .text-indigo-800, [data-mode="dark"] .text-indigo-900 { color: rgb(var(--c-primary-400)) !important; } [data-mode="dark"] .text-emerald-600, [data-mode="dark"] .text-emerald-700, [data-mode="dark"] .text-emerald-800 { color: #6ee7b7 !important; } [data-mode="dark"] .text-amber-600, [data-mode="dark"] .text-amber-700 { color: #fcd34d !important; } [data-mode="dark"] .text-rose-600, [data-mode="dark"] .text-rose-700, [data-mode="dark"] .text-rose-800 { color: #fda4af !important; } [data-mode="dark"] .text-blue-600, [data-mode="dark"] .text-blue-700 { color: #93c5fd !important; } [data-mode="dark"] .text-purple-600, [data-mode="dark"] .text-purple-700 { color: #c4b5fd !important; } [data-mode="dark"] .text-red-600, [data-mode="dark"] .text-red-700, [data-mode="dark"] .text-red-800 { color: #fca5a5 !important; } [data-mode="dark"] .text-green-600, [data-mode="dark"] .text-green-700, [data-mode="dark"] .text-green-800 { color: #86efac !important; } [data-mode="dark"] .text-yellow-600, [data-mode="dark"] .text-yellow-700, [data-mode="dark"] .text-yellow-800 { color: #fde047 !important; } [data-mode="dark"] .text-teal-600, [data-mode="dark"] .text-teal-700 { color: #5eead4 !important; } [data-mode="dark"] .text-violet-600, [data-mode="dark"] .text-violet-700 { color: #c4b5fd !important; } /* --- Borders --- */ [data-mode="dark"] .border-slate-100, [data-mode="dark"] .border-slate-200 { border-color: rgb(var(--c-border)) !important; } [data-mode="dark"] .border-slate-300 { border-color: rgb(var(--c-border-strong)) !important; } [data-mode="dark"] .border-slate-700, [data-mode="dark"] .border-slate-800 { border-color: rgb(var(--c-sidebar-border)) !important; } [data-mode="dark"] .border-gray-100, [data-mode="dark"] .border-gray-200 { border-color: rgb(var(--c-border)) !important; } [data-mode="dark"] .border-indigo-100, [data-mode="dark"] .border-indigo-200 { border-color: rgb(var(--c-primary-500) / 0.2) !important; } [data-mode="dark"] .border-emerald-100, [data-mode="dark"] .border-emerald-200 { border-color: rgba(16, 185, 129, 0.2) !important; } [data-mode="dark"] .border-amber-100, [data-mode="dark"] .border-amber-200 { border-color: rgba(245, 158, 11, 0.2) !important; } [data-mode="dark"] .border-rose-100, [data-mode="dark"] .border-rose-200 { border-color: rgba(244, 63, 94, 0.2) !important; } [data-mode="dark"] .border-blue-100, [data-mode="dark"] .border-blue-200 { border-color: rgba(59, 130, 246, 0.2) !important; } [data-mode="dark"] .border-white { border-color: rgb(var(--c-border)) !important; } /* --- Divide Colors --- */ [data-mode="dark"] .divide-slate-100 > :not([hidden]) ~ :not([hidden]), [data-mode="dark"] .divide-slate-200 > :not([hidden]) ~ :not([hidden]) { border-color: rgb(var(--c-border)) !important; } /* --- Shadows for dark mode — reduce intensity --- */ [data-mode="dark"] .shadow-sm, [data-mode="dark"] .shadow { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.3) !important; } [data-mode="dark"] .shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3) !important; } [data-mode="dark"] .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3) !important; } [data-mode="dark"] .shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.3) !important; } /* Colored shadows */ [data-mode="dark"] .shadow-indigo-500\/20, [data-mode="dark"] .shadow-indigo-500\/25, [data-mode="dark"] .shadow-indigo-100\/50, [data-mode="dark"] .shadow-indigo-900\/20 { box-shadow: 0 10px 25px -5px rgb(var(--c-primary-500) / 0.15) !important; } /* --- Hover states for dark mode --- */ [data-mode="dark"] .hover\:bg-slate-50:hover, [data-mode="dark"] .hover\:bg-slate-100:hover { background-color: rgb(var(--c-surface-raised)) !important; } [data-mode="dark"] .hover\:bg-slate-200:hover { background-color: rgb(var(--c-border)) !important; } [data-mode="dark"] .hover\:bg-indigo-50:hover { background-color: rgb(var(--c-primary-500) / 0.15) !important; } [data-mode="dark"] .hover\:bg-indigo-700:hover { background-color: rgb(var(--c-primary-700)) !important; } [data-mode="dark"] .hover\:bg-white:hover { background-color: rgb(var(--c-surface-raised)) !important; } /* --- Ring/Focus overrides --- */ [data-mode="dark"] .focus\:ring-indigo-500\/20:focus, [data-mode="dark"] .focus\:ring-indigo-500\/10:focus { --tw-ring-color: rgb(var(--c-primary-500) / 0.3) !important; } [data-mode="dark"] .focus\:border-indigo-500:focus { border-color: rgb(var(--c-primary-500)) !important; } /* --- Inputs & Forms in dark mode --- */ [data-mode="dark"] input, [data-mode="dark"] select, [data-mode="dark"] textarea { background-color: rgb(var(--c-input-bg)); border-color: rgb(var(--c-input-border)); color: rgb(var(--c-text)); } [data-mode="dark"] input::placeholder, [data-mode="dark"] select::placeholder, [data-mode="dark"] textarea::placeholder { color: rgb(var(--c-text-muted)); } [data-mode="dark"] input:focus, [data-mode="dark"] select:focus, [data-mode="dark"] textarea:focus { box-shadow: 0 0 0 2px rgb(var(--c-primary-500) / 0.3); border-color: rgb(var(--c-primary-500)); } /* --- Table specific dark overrides --- */ [data-mode="dark"] table { color: rgb(var(--c-text)); } [data-mode="dark"] thead tr { background-color: rgb(var(--c-surface-raised) / 0.5) !important; } [data-mode="dark"] tbody tr { border-color: rgb(var(--c-border)) !important; } [data-mode="dark"] tbody tr:hover { background-color: rgb(var(--c-surface-raised) / 0.3) !important; } /* --- Card / Table containers — catch-all for bg-white with rounded/border --- */ [data-mode="dark"] div[class*="bg-white"][class*="rounded"], [data-mode="dark"] div[class*="bg-white"][class*="border"], [data-mode="dark"] div[class*="bg-white"][class*="shadow"] { background-color: rgb(var(--c-surface-card)) !important; border-color: rgb(var(--c-border)) !important; } /* --- Missing bg-slate variants --- */ [data-mode="dark"] .bg-slate-200 { background-color: rgb(var(--c-surface-raised)) !important; } [data-mode="dark"] .bg-slate-300 { background-color: rgb(var(--c-border)) !important; } [data-mode="dark"] .bg-slate-600 { background-color: rgb(51 65 85) !important; } [data-mode="dark"] .bg-slate-800 { background-color: rgb(15 23 42) !important; } /* --- Missing divide colors --- */ [data-mode="dark"] .divide-slate-50 > :not([hidden]) ~ :not([hidden]) { border-color: rgb(var(--c-border)) !important; } /* --- Missing border --- */ [data-mode="dark"] .border-slate-50 { border-color: rgb(var(--c-border)) !important; } /* --- Missing hover states --- */ [data-mode="dark"] .hover\:bg-slate-100:hover { background-color: rgb(var(--c-surface-raised)) !important; } [data-mode="dark"] .hover\:bg-slate-600:hover { background-color: rgb(51 65 85) !important; } [data-mode="dark"] .hover\:bg-slate-800:hover { background-color: rgb(15 23 42) !important; } /* --- Missing text-slate light variants (already light, need to stay light in dark) --- */ [data-mode="dark"] .text-slate-100 { color: rgb(241 245 249) !important; } [data-mode="dark"] .text-slate-200 { color: rgb(226 232 240) !important; } [data-mode="dark"] .text-slate-300 { color: rgb(203 213 225) !important; } [data-mode="dark"] .text-slate-800 { color: rgb(var(--c-text)) !important; } /* --- Misc Overrides --- */ [data-mode="dark"] .border-t.border-slate-200, [data-mode="dark"] .border-b.border-slate-200, [data-mode="dark"] .border-t.border-slate-100, [data-mode="dark"] .border-b.border-slate-100 { border-color: rgb(var(--c-border)) !important; } /* --- Pagination dark mode --- */ [data-mode="dark"] a[class*="bg-white"][class*="rounded"], [data-mode="dark"] button[class*="bg-white"][class*="rounded"] { background-color: rgb(var(--c-surface-card)) !important; border-color: rgb(var(--c-border)) !important; color: rgb(var(--c-text-secondary)) !important; } [data-mode="dark"] a[class*="bg-white"][class*="rounded"]:hover, [data-mode="dark"] button[class*="bg-white"][class*="rounded"]:hover { background-color: rgb(var(--c-surface-raised)) !important; } /* --- Action buttons in tables (bg-white with border) --- */ [data-mode="dark"] a.bg-white, [data-mode="dark"] button.bg-white { background-color: rgb(var(--c-surface-raised)) !important; border-color: rgb(var(--c-border)) !important; color: rgb(var(--c-text-secondary)) !important; } [data-mode="dark"] a.bg-white:hover, [data-mode="dark"] button.bg-white:hover { background-color: rgb(var(--c-border)) !important; } /* Gradient text in dark mode */ [data-mode="dark"] .gradient-text { background: linear-gradient(135deg, rgb(var(--c-primary-400)) 0%, rgb(var(--c-primary-500)) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Body global text */ [data-mode="dark"] body { color: rgb(var(--c-text)); } /* Scrollbar in dark mode */ [data-mode="dark"] ::-webkit-scrollbar-thumb { background: rgb(var(--c-border-strong)); } [data-mode="dark"] ::-webkit-scrollbar-thumb:hover { background: rgb(var(--c-text-muted)); } /* --- Inline style overrides for elements using style="border-bottom: ..." --- */ [data-mode="dark"] [style*="border-bottom"], [data-mode="dark"] [style*="border-top"] { border-color: rgb(var(--c-border)) !important; } /* --- Form labels in dark mode --- */ [data-mode="dark"] label { color: rgb(var(--c-text-secondary)); } /* --- Select dropdown arrow visibility --- */ [data-mode="dark"] select option { background-color: rgb(var(--c-surface-card)); color: rgb(var(--c-text)); } /* --- th text dark mode --- */ [data-mode="dark"] th { color: rgb(var(--c-text-muted)) !important; } /* --- td text dark mode — ensure readability --- */ [data-mode="dark"] td { color: rgb(var(--c-text)); } [data-mode="dark"] td .text-slate-900, [data-mode="dark"] td .text-slate-800, [data-mode="dark"] td .text-slate-700 { color: rgb(var(--c-text)) !important; } /* --- Role badges dark mode --- */ [data-mode="dark"] span[class*="bg-slate-100"][class*="text-slate-600"] { background-color: rgb(var(--c-surface-raised)) !important; color: rgb(var(--c-text-secondary)) !important; border-color: rgb(var(--c-border)) !important; } /* --- Status badges dark — soften borders --- */ [data-mode="dark"] span[class*="bg-emerald-50"] { background-color: rgba(16, 185, 129, 0.15) !important; border-color: rgba(16, 185, 129, 0.25) !important; } [data-mode="dark"] span[class*="bg-rose-50"] { background-color: rgba(244, 63, 94, 0.15) !important; border-color: rgba(244, 63, 94, 0.25) !important; } /* --- Title h1/h2/h3 dark mode (catch-all) --- */ [data-mode="dark"] h1, [data-mode="dark"] h2, [data-mode="dark"] h3 { color: rgb(var(--c-text)); } /* --- Subtitle / description text --- */ [data-mode="dark"] p[class*="text-slate-400"], [data-mode="dark"] p[class*="text-slate-500"] { color: rgb(var(--c-text-muted)) !important; }