/* ============================================================ HKL Tickets — Theme System (Dark / Light Mode) ============================================================ Usage: Add class "light-mode" to element. Persisted in localStorage key "hkl-theme". ============================================================ */ /* ---- CSS Custom Properties (Dark Mode = default) ---- */ :root { /* Backgrounds */ --bg-body: #121212; --bg-surface: rgba(26, 27, 30, 0.85); --bg-surface-solid: #1a1b1e; --bg-surface-2: #1e1e1e; --bg-surface-3: #1b2027; --bg-nav: rgba(18, 18, 18, 0.92); --bg-sidebar: rgba(18, 18, 18, 0.5); --bg-card: rgba(22, 27, 34, 0.95); --bg-input: #1a1b1e; --bg-input-2: #1e1e1e; --bg-input-3: #1b2027; --bg-kanban-col: rgba(26, 27, 30, 0.5); --bg-kanban-col-solid: rgba(26, 27, 30, 0.6); --bg-modal: rgba(26, 27, 30, 0.96); --bg-modal-overlay: rgba(0, 0, 0, 0.7); --bg-badge: rgba(255, 255, 255, 0.06); --bg-hover: rgba(255, 255, 255, 0.05); --bg-hover-2: rgba(255, 255, 255, 0.04); --bg-hover-3: rgba(255, 255, 255, 0.02); --bg-progress-empty: rgba(255, 255, 255, 0.06); --bg-progress-empty-2: rgba(255, 255, 255, 0.05); --bg-table-header: rgba(255, 255, 255, 0.02); --bg-table-hover: rgba(255, 255, 255, 0.02); --bg-code: rgba(255, 255, 255, 0.04); --bg-tag: rgba(255, 255, 255, 0.04); --bg-stat-card: #1a1b1e; --bg-message-success: rgba(34, 197, 94, 0.1); --bg-message-warning: rgba(234, 179, 8, 0.1); --bg-message-error: rgba(239, 68, 68, 0.1); --bg-message-info: #1a1b1e; /* Text */ --text-primary: #ffffff; --text-secondary: #e0e0e0; --text-tertiary: rgba(255, 255, 255, 0.55); --text-muted: rgba(255, 255, 255, 0.35); --text-muted-2: rgba(255, 255, 255, 0.25); --text-muted-3: rgba(255, 255, 255, 0.2); --text-muted-4: rgba(255, 255, 255, 0.45); --text-gray-300: #d1d5db; --text-gray-400: #9ca3af; --text-gray-500: #6b7280; --text-gray-600: #4b5563; --text-placeholder: rgba(107, 114, 128, 0.5); /* Borders */ --border-light: rgba(255, 255, 255, 0.06); --border-med: rgba(255, 255, 255, 0.10); --border-input: rgba(255, 255, 255, 0.10); --border-hover: rgba(255, 255, 255, 0.15); --border-table: rgba(255, 255, 255, 0.06); --border-white-5: rgba(255, 255, 255, 0.05); /* Accent */ --accent: #d4e873; --accent-hover: rgba(212, 232, 115, 0.25); --accent-glow: rgba(212, 232, 115, 0.25); --accent-text: #121212; --accent-text-alt: #161e00; --accent-progress-from: #c3f400; --accent-progress-to: #86b000; --accent-pause: #ffd43b; /* Scrollbar */ --scrollbar-thumb: rgba(255, 255, 255, 0.08); --scrollbar-thumb-kanban: rgba(255, 255, 255, 0.1); /* Shadows */ --shadow-card: 0 6px 20px rgba(0, 0, 0, 0.3); --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.5); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); /* Misc */ --overlay-bg: rgba(0, 0, 0, 0.6); } /* ---- Light Mode Overrides ---- */ html.light-mode { /* Backgrounds */ --bg-body: #F8F9FA; --bg-surface: rgba(255, 255, 255, 0.85); --bg-surface-solid: #FFFFFF; --bg-surface-2: #FFFFFF; --bg-surface-3: #FFFFFF; --bg-nav: rgba(255, 255, 255, 0.92); --bg-sidebar: rgba(255, 255, 255, 0.7); --bg-card: #FFFFFF; --bg-input: #FFFFFF; --bg-input-2: #FFFFFF; --bg-input-3: #FFFFFF; --bg-kanban-col: rgba(255, 255, 255, 0.5); --bg-kanban-col-solid: rgba(248, 249, 250, 0.8); --bg-modal: rgba(255, 255, 255, 0.98); --bg-modal-overlay: rgba(0, 0, 0, 0.3); --bg-badge: rgba(0, 0, 0, 0.05); --bg-hover: rgba(0, 0, 0, 0.03); --bg-hover-2: rgba(0, 0, 0, 0.02); --bg-hover-3: rgba(0, 0, 0, 0.01); --bg-progress-empty: #E9ECEF; --bg-progress-empty-2: #E9ECEF; --bg-table-header: rgba(0, 0, 0, 0.02); --bg-table-hover: rgba(0, 0, 0, 0.02); --bg-code: rgba(0, 0, 0, 0.03); --bg-tag: rgba(0, 0, 0, 0.03); --bg-stat-card: #FFFFFF; --bg-message-success: #EBFBEE; --bg-message-warning: #FFF4E6; --bg-message-error: #FFF5F5; --bg-message-info: #FFFFFF; /* Text */ --text-primary: #212529; --text-secondary: #343a40; --text-tertiary: #6C757D; --text-muted: #6C757D; --text-muted-2: #868e96; --text-muted-3: #adb5bd; --text-muted-4: #495057; --text-gray-300: #495057; --text-gray-400: #6C757D; --text-gray-500: #868e96; --text-gray-600: #adb5bd; --text-placeholder: rgba(108, 117, 125, 0.5); /* Borders */ --border-light: #E9ECEF; --border-med: #DEE2E6; --border-input: #DEE2E6; --border-hover: #CED4DA; --border-table: #E9ECEF; --border-white-5: #E9ECEF; /* Shadows */ --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06); --shadow-modal: 0 10px 40px rgba(0, 0, 0, 0.15); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); /* Misc */ --overlay-bg: rgba(0, 0, 0, 0.3); } /* ============================================================ */ /* BASE / BODY */ /* ============================================================ */ .light-mode body { background-color: var(--bg-body) !important; color: var(--text-secondary) !important; } /* Selection color adjustment */ .light-mode ::selection { background-color: #d4e873 !important; color: #161e00 !important; } /* ============================================================ */ /* GLASS PANELS */ /* ============================================================ */ .light-mode .glass-panel, .light-mode .glass-panel-thin, .light-mode .glass-card { background: var(--bg-surface) !important; border-color: var(--border-light) !important; backdrop-filter: blur(12px); } .light-mode .glass-panel-thin { backdrop-filter: blur(8px); } .light-mode .glass-card:hover { border-color: var(--border-med) !important; } /* ============================================================ */ /* NAVBAR & SIDEBAR */ /* ============================================================ */ .light-mode nav, .light-mode nav[class*="bg-"], .light-mode [style*="background:rgba(18,18,18,0.92)"], .light-mode [style*="background: rgba(18,18,18,0.92)"] { background: var(--bg-nav) !important; border-color: var(--border-light) !important; } .light-mode aside, .light-mode aside[class*="bg-"], .light-mode [style*="background:rgba(18,18,18,0.5)"], .light-mode [style*="background: rgba(18,18,18,0.5)"] { background: var(--bg-sidebar) !important; border-color: var(--border-light) !important; } /* ============================================================ */ /* TEXT COLORS */ /* ============================================================ */ .light-mode .text-white { color: var(--text-primary) !important; } .light-mode .text-gray-300 { color: var(--text-gray-300) !important; } .light-mode .text-gray-400 { color: var(--text-gray-400) !important; } .light-mode .text-gray-500 { color: var(--text-gray-500) !important; } .light-mode .text-gray-600 { color: var(--text-gray-600) !important; } .light-mode .text-gray-700, .light-mode .text-gray-800, .light-mode .text-gray-900 { color: #495057 !important; } /* Timeline & muted texts */ .light-mode .card-timer-label, .light-mode .timeline-time, .light-mode .timeline-author, .light-mode .card-id, .light-mode .card-footer { color: var(--text-muted-2) !important; } .light-mode .card-empty-text, .light-mode .card-tag { color: var(--text-muted-3) !important; } .light-mode .card-client { color: var(--text-muted-4) !important; } .card-admin { font-size: 0.65rem; color: var(--text-muted-2); margin-top: 0.15rem; display: flex; align-items: center; gap: 0.25rem; } .card-admin-self { color: #c3f400; font-weight: 600; } .light-mode .card-admin { color: var(--text-muted-3) !important; } .light-mode .card-admin-self { color: #00dbe9 !important; } .light-mode .card-title { color: var(--text-primary) !important; } .light-mode .card-deadline { color: var(--text-muted) !important; } /* ============================================================ */ /* BACKGROUND OVERRIDES (inline style targets) */ /* ============================================================ */ /* bg-[#1a1b1e], bg-[#1e1e1e], bg-[#1b2027] - very common */ .light-mode [style*="background: #1a1b1e"], .light-mode [style*="background:#1a1b1e"], .light-mode [style*="background: #1e1e1e"], .light-mode [style*="background:#1e1e1e"], .light-mode [style*="background: #1b2027"], .light-mode [style*="background:#1b2027"], .light-mode .bg-\\[\\#1a1b1e\\], .light-mode .bg-\\[\\#1e1e1e\\], .light-mode .bg-\\[\\#1b2027\\] { background: var(--bg-surface-solid) !important; } /* Specific known inline bg patterns */ .light-mode [class*="bg-["] { /* Will use .light-mode .bg-\[...\] patterns below */ } /* ============================================================ */ /* KANBAN */ /* ============================================================ */ .light-mode .kanban-column { background: var(--bg-kanban-col) !important; border-color: var(--border-light) !important; } .light-mode [style*="background:rgba(26,27,30,0.6)"], .light-mode [style*="background: rgba(26,27,30,0.6)"] { background: var(--bg-kanban-col-solid) !important; } .light-mode .kanban-card { background: var(--bg-card) !important; border-color: var(--border-light) !important; } .light-mode .kanban-card:hover { border-color: var(--border-med) !important; box-shadow: var(--shadow-card) !important; } .light-mode .kanban-badge { background: var(--bg-badge) !important; } .light-mode .kanban-column-header { border-color: var(--border-light) !important; } /* ============================================================ */ /* FORM INPUTS */ /* ============================================================ */ .light-mode input, .light-mode select, .light-mode textarea, .light-mode [class*="bg-\\[\\#1a1b1e\\]"], .light-mode [class*="bg-\\[\\#1e1e1e\\]"], .light-mode [class*="bg-\\[\\#1b2027\\]"] { background-color: var(--bg-input) !important; border-color: var(--border-input) !important; color: var(--text-primary) !important; } .light-mode input:focus, .light-mode select:focus, .light-mode textarea:focus { border-color: var(--accent) !important; outline: none !important; } .light-mode input::placeholder, .light-mode textarea::placeholder { color: var(--text-placeholder) !important; } /* ============================================================ */ /* MODALS */ /* ============================================================ */ .light-mode .modal-overlay { background: var(--overlay-bg) !important; backdrop-filter: blur(8px); } .light-mode .modal-moderno, .light-mode .modal-content { background: var(--bg-modal) !important; border-color: var(--border-med) !important; box-shadow: var(--shadow-modal) !important; } .light-mode .modal-header, .light-mode .modal-content .border-b { border-color: var(--border-light) !important; } .light-mode .modal-close { color: var(--text-muted) !important; } .light-mode .modal-close:hover { background: var(--bg-hover) !important; color: var(--text-primary) !important; } /* ============================================================ */ /* BUTTONS */ /* ============================================================ */ /* Lime green primary buttons */ .light-mode [class*="bg-[#d4e873]"], .light-mode [class*="bg-[#c3f400]"], .light-mode button[class*="bg-"]:not([class*="bg-red"]):not([class*="bg-green"]):not([class*="bg-yellow"]):not([class*="bg-orange"]):not([class*="bg-blue"]):not([class*="bg-cyan"]):not([class*="bg-amber"]):not([class*="bg-white"]):not([class*="bg-gray"]):not([class*="bg-black"]):not([class*="bg-transparent"]) { color: #161e00 !important; } /* Hover shadows for accent buttons */ .light-mode [class*="hover:shadow-["] { /* keep the shadow but make it less intense */ } /* ============================================================ */ /* HISTÓRICO / TIMELINE */ /* ============================================================ */ .light-mode .hist-btn { background: var(--bg-hover-2) !important; border-color: var(--border-light) !important; color: var(--text-muted) !important; } .light-mode .hist-btn:hover { background: var(--bg-hover) !important; color: var(--text-muted-4) !important; border-color: var(--border-med) !important; } .light-mode .timeline-item:not(:last-child)::before { background: var(--border-light) !important; } .light-mode .timeline-text { color: var(--text-tertiary) !important; } /* ============================================================ */ /* TABLES */ /* ============================================================ */ .light-mode table { color: var(--text-secondary) !important; } .light-mode thead tr, .light-mode th { border-color: var(--border-table) !important; color: var(--text-muted) !important; } .light-mode tbody tr { border-color: var(--border-table) !important; } .light-mode tbody tr:hover { background: var(--bg-table-hover) !important; } .light-mode td.text-white { color: var(--text-primary) !important; } /* ============================================================ */ /* STATUS BADGES & PRIORITY TAGS */ /* ============================================================ */ /* Non-iniciado (gray) */ .light-mode .text-gray-400.bg-white\\/5, .light-mode .text-gray-400\.bg-white\/5 { color: #495057 !important; background: #F1F3F5 !important; } /* Card priority badges already use explicit classes, fine as-is */ /* ============================================================ */ /* LANDING PAGE CUSTOM COLORS */ /* ============================================================ */ .light-mode .text-on-surface-variant { color: #6C757D !important; } .light-mode .bg-surface-dim { background-color: #F8F9FA !important; } .light-mode .bg-surface-container-lowest { background-color: #F8F9FA !important; } .light-mode .bg-surface-container-low { background-color: #F1F3F5 !important; } .light-mode .text-primary-fixed { color: #7a9a00 !important; } .light-mode .text-secondary-fixed-dim { color: #0a7a8a !important; } .light-mode .text-on-surface { color: #212529 !important; } .light-mode .bg-surface-container { background-color: #FFFFFF !important; } .light-mode .bg-surface-container-high { background-color: #F8F9FA !important; } .light-mode .bg-surface-container-highest { background-color: #F1F3F5 !important; } .light-mode .border-white\\/10, .light-mode .border-white\/10 { border-color: #E9ECEF !important; } .light-mode .text-on-surface-variant\\/50, .light-mode .text-on-surface-variant\/50 { color: rgba(108, 117, 125, 0.5) !important; } /* Landing page navbar-specific override */ .light-mode nav[class*="bg-surface-dim"] { background: rgba(248, 249, 250, 0.9) !important; border-color: #E9ECEF !important; } /* Auth page body */ .light-mode body[style*="background:#0B0E14"], .light-mode body[style*="background: #0B0E14"] { background: #F8F9FA !important; color: #212529 !important; } /* Admin login glass panel */ .light-mode .glass-panel[style*="background:rgba(22,27,34,0.8)"], .light-mode .glass-panel[style*="background: rgba(22,27,34,0.8)"] { background: rgba(255, 255, 255, 0.9) !important; border-color: #E9ECEF !important; } /* ============================================================ */ /* OVERRIDE INLINE STYLE COLORS */ /* ============================================================ */ /* Borders with rgba white - convert to light borders */ .light-mode [style*="border-color: rgba(255,255,255,0.06)"], .light-mode [style*="border-color: rgba(255, 255, 255, 0.06)"] { border-color: #E9ECEF !important; } .light-mode [style*="border-color: rgba(255,255,255,0.1)"], .light-mode [style*="border-color: rgba(255, 255, 255, 0.1)"] { border-color: #DEE2E6 !important; } .light-mode [style*="border-color: rgba(255,255,255,0.05)"], .light-mode [style*="border-color: rgba(255, 255, 255, 0.05)"] { border-color: #E9ECEF !important; } /* Timeline pseudo-element border */ .light-mode .timeline-item:not(:last-child)::before { background: #E9ECEF !important; } /* ============================================================ */ /* SPECIFIC COMPONENT OVERRIDES */ /* ============================================================ */ /* Card timer button timer-playing border animation - keep animated but adjust colors */ .light-mode .card-timer-btn.timer-playing::before { background: conic-gradient(transparent 0deg, #b0c040 90deg, transparent 180deg, transparent 270deg) !important; } .light-mode .card-timer-btn.timer-playing::after { background: rgba(176, 192, 64, 0.08) !important; } /* Timer time text */ .light-mode .card-timer-time { color: #7a9a00 !important; } .light-mode .card-score-pct { color: #7a9a00 !important; } .light-mode .card-score-fill { background: linear-gradient(90deg, #b0c040, #86a020) !important; } /* Counter badge */ .light-mode .counter-badge { background: rgba(0, 0, 0, 0.05) !important; color: #6C757D !important; } /* Admin dashboard card inline styles */ .light-mode [style*="background:rgba(30,30,30,0.9)"], .light-mode [style*="background: rgba(30,30,30,0.9)"] { background: #FFFFFF !important; border-color: #E9ECEF !important; } .light-mode [style*="border:1px solid rgba(255,255,255,0.04)"] { border-color: #E9ECEF !important; } .light-mode [style*="background:rgba(255,255,255,0.05)"] { background: #E9ECEF !important; } /* Admin cards labels */ .light-mode [style*="background:rgba(30,30,30,0.9)"] .text-gray-400, .light-mode [style*="background: rgba(30,30,30,0.9)"] .text-gray-400 { color: #6C757D !important; } .light-mode [style*="background:rgba(30,30,30,0.9)"] .text-gray-500, .light-mode [style*="background: rgba(30,30,30,0.9)"] .text-gray-500 { color: #868e96 !important; } .light-mode [style*="background:rgba(30,30,30,0.9)"] .text-white, .light-mode [style*="background: rgba(30,30,30,0.9)"] .text-white { color: #212529 !important; } /* Profile menu dropdown */ .light-mode .glass-panel-thin[style*="box-shadow:0 8px 32px"], .light-mode [style*="box-shadow:0 8px 32px"] { background: rgba(255, 255, 255, 0.98) !important; border-color: #DEE2E6 !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; } /* Links in profile menu */ .light-mode .glass-panel-thin a.text-gray-400, .light-mode .glass-panel-thin button.text-gray-400 { color: #6C757D !important; } .light-mode .glass-panel-thin a.text-gray-400:hover, .light-mode .glass-panel-thin button.text-gray-400:hover { color: #212529 !important; background: rgba(0, 0, 0, 0.03) !important; } /* Sidebar links */ .light-mode aside a.text-gray-400 { color: #6C757D !important; } .light-mode aside a.text-gray-400:hover { color: #212529 !important; background: rgba(0, 0, 0, 0.02) !important; } /* Sidebar active link */ .light-mode aside a.text-white.font-semibold.bg-white\\/5 { color: #212529 !important; background: rgba(0, 0, 0, 0.03) !important; } /* Navbar icons */ .light-mode .text-gray-400.hover\\:text-\\[\\#d4e873\\] { color: #868e96 !important; } .light-mode .text-gray-400.hover\\:text-\\[\\#d4e873\\]:hover { color: #7a9a00 !important; } /* Navbar username */ .light-mode .text-gray-300 { color: #495057 !important; } /* Notification badges - keep red */ .light-mode .bg-red-500, .light-mode .text-red-400, .light-mode .text-red-500 { /* Keep original red colors for safety */ } /* ============================================================ */ /* FORM SECTION */ /* ============================================================ */ .light-mode input[type="date"], .light-mode input[type="datetime-local"], .light-mode input[type="number"], .light-mode input[type="text"], .light-mode select, .light-mode textarea { background-color: #FFFFFF !important; border-color: #DEE2E6 !important; color: #212529 !important; } .light-mode input[type="date"]:focus, .light-mode input[type="datetime-local"]:focus, .light-mode input[type="number"]:focus, .light-mode input[type="text"]:focus, .light-mode select:focus, .light-mode textarea:focus { border-color: #d4e873 !important; } /* Search/date input specific */ .light-mode .w-28[type="date"], .light-mode input.w-28 { background-color: #FFFFFF !important; border-color: #DEE2E6 !important; color: #212529 !important; } /* ============================================================ */ /* TABLE OVERRIDES */ /* ============================================================ */ .light-mode .border-b.border-white\\/5, .light-mode .border-b.border-white\/5 { border-color: #E9ECEF !important; } .light-mode .bg-white\\/\\[0\\.02\\], .light-mode .bg-white\/\[0\.02\] { background: rgba(0, 0, 0, 0.02) !important; } .light-mode .hover\\:bg-white\\/\\[0\\.02\\]:hover, .light-mode .hover\:bg-white\/\[0\.02\]:hover { background: rgba(0, 0, 0, 0.02) !important; } /* ============================================================ */ /* KPIs CARDS */ /* ============================================================ */ .light-mode .glass-panel.rounded-xl.p-5.border-t-2 { background: #FFFFFF !important; border-color: #E9ECEF !important; } /* Timeline text in modals */ .light-mode .timeline-text { color: #6C757D !important; } .light-mode .timeline-time { color: #ADB5BD !important; } .light-mode .timeline-author { color: #ADB5BD !important; } /* Modal header texts */ .light-mode .modal-header h3.text-white { color: #212529 !important; } .light-mode .modal-body .text-white { color: #212529 !important; } /* ============================================================ */ /* FILTER SECTION */ /* ============================================================ */ .light-mode .text-gray-600 { color: #ADB5BD !important; } /* ============================================================ */ /* RESPONSIVE */ /* ============================================================ */ /* Keep the original kanban responsive behavior, just adjust colors */ /* ============================================================ */ /* SCROLLBAR */ /* ============================================================ */ .light-mode ::-webkit-scrollbar-thumb { background: #CED4DA !important; } .light-mode ::-webkit-scrollbar-track { background: transparent !important; } .light-mode .kanban-cards::-webkit-scrollbar-thumb { background: #CED4DA !important; } /* ============================================================ */ /* CARD TIMER BUTTON */ /* ============================================================ */ .light-mode .card-timer-btn { background: var(--bg-hover-2) !important; border-color: var(--border-light) !important; } .light-mode .card-timer-btn:hover { background: var(--bg-hover) !important; border-color: var(--border-med) !important; } .light-mode .card-timer-btn.timer-playing::after { background: rgba(212, 232, 115, 0.12) !important; } .light-mode .icon-play { border-color: transparent transparent transparent var(--text-muted) !important; } .light-mode .card-timer-btn:hover .icon-play { border-color: transparent transparent transparent var(--text-muted-4) !important; } /* ============================================================ */ /* PROFILE MENU / DROPDOWN */ /* ============================================================ */ .light-mode #funcProfileMenu, .light-mode #profileMenu, .light-mode [id$="ProfileMenu"], .light-mode [id$="profileMenu"] { background: var(--bg-modal) !important; border-color: var(--border-med) !important; box-shadow: var(--shadow-modal) !important; } /* ============================================================ */ /* MISC ELEMENTS */ /* ============================================================ */ /* Progress bars */ .light-mode .w-full.bg-white\\/5, .light-mode [class*="bg-white/5"]:not(.light-mode [class*="bg-white/5"].bg-white\/5) { background-color: var(--bg-progress-empty) !important; } /* Score bar */ .light-mode .card-score-bar { background: var(--bg-progress-empty-2) !important; } /* Message alerts */ .light-mode .bg-green-500\\/10 { background: var(--bg-message-success) !important; border-color: rgba(34, 197, 94, 0.3) !important; } .light-mode .bg-yellow-500\\/10 { background: var(--bg-message-warning) !important; border-color: rgba(234, 179, 8, 0.3) !important; } .light-mode .bg-red-500\\/10 { background: var(--bg-message-error) !important; border-color: rgba(239, 68, 68, 0.3) !important; } .light-mode .bg-\\[\\#1a1b1e\\] { background: var(--bg-surface-solid) !important; border-color: var(--border-light) !important; } /* Tags/keywords */ .light-mode .card-tag { background: var(--bg-tag) !important; color: var(--text-muted) !important; } /* Kanban empty state */ .light-mode .kanban-empty span { opacity: 0.3 !important; } /* Card footer */ .light-mode .card-footer { border-color: var(--border-light) !important; } /* KPIs stat cards */ .light-mode .bg-\\[\\#1a1b1e\\].rounded-lg { background: var(--bg-stat-card) !important; border-color: var(--border-light) !important; } /* ============================================================ */ /* TASK DETAIL MODAL (tarefaModalFunc) */ /* ============================================================ */ .light-mode .modal-tarefa { background: rgba(255, 255, 255, 0.98) !important; border-color: #DEE2E6 !important; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12) !important; } .light-mode .modal-header-modern { background: linear-gradient(135deg, rgba(248, 249, 250, 0.98) 0%, rgba(255, 255, 255, 0.98) 100%) !important; border-color: #E9ECEF !important; } .light-mode .modal-title-text { color: #212529 !important; } .light-mode .modal-badge-id { color: #868e96 !important; } .light-mode .modal-close-modern { background: rgba(0, 0, 0, 0.04) !important; color: #868e96 !important; } .light-mode .modal-close-modern:hover { background: #FFF5F5 !important; color: #EF4444 !important; } .light-mode .modal-tabs-modern { border-color: #E9ECEF !important; background: rgba(248, 249, 250, 0.95) !important; } .light-mode .tab-modern { color: #868e96 !important; } .light-mode .tab-modern:hover { color: #495057 !important; } .light-mode .tab-modern.active { color: #7a9a00 !important; border-bottom-color: #7a9a00 !important; } .light-mode .tab-count { background: rgba(0, 0, 0, 0.05) !important; color: #868e96 !important; } .light-mode .tab-modern.active .tab-count { background: #d4e873 !important; color: #161e00 !important; } .light-mode .info-mini-card { background: rgba(248, 249, 250, 0.95) !important; border-color: #E9ECEF !important; } .light-mode .info-mini-icon { color: #7a9a00 !important; } .light-mode .info-mini-label { color: #868e96 !important; } .light-mode .info-mini-value { color: #212529 !important; } .light-mode .edit-label { color: #868e96 !important; } .light-mode .readonly-block { background: rgba(248, 249, 250, 0.95) !important; border-color: #E9ECEF !important; color: #212529 !important; } .light-mode .files-title { color: #212529 !important; } .light-mode .files-empty { color: #868e96 !important; } .light-mode .file-card { background: rgba(248, 249, 250, 0.95) !important; border-color: #E9ECEF !important; } .light-mode .file-card:hover { border-color: #d4e873 !important; } .light-mode .file-name { color: #212529 !important; } .light-mode .file-link { color: #7a9a00 !important; } .light-mode .file-date { color: #868e96 !important; } .light-mode .chat-empty-modern { color: #868e96 !important; } .light-mode .chat-bubble.bubble-func { background: rgba(248, 249, 250, 0.95) !important; border-color: #E9ECEF !important; color: #212529 !important; } .light-mode .chat-bubble.bubble-admin { background: #d4e873 !important; color: #161e00 !important; } .light-mode .chat-field { background: rgba(248, 249, 250, 0.95) !important; border-color: #E9ECEF !important; color: #212529 !important; } .light-mode .chat-field:focus { border-color: #d4e873 !important; } .light-mode .chat-tool-btn { background: rgba(248, 249, 250, 0.95) !important; border-color: #E9ECEF !important; color: #868e96 !important; } .light-mode .chat-tool-btn:hover { border-color: #d4e873 !important; color: #7a9a00 !important; } .light-mode .chat-input-modern { border-color: #E9ECEF !important; } .light-mode .rec-cancel { background: rgba(0, 0, 0, 0.06) !important; color: rgba(0, 0, 0, 0.5) !important; } /* ============================================================ */ /* RESPONSIVE */ /* ============================================================ */ /* Keep the original kanban responsive behavior, just adjust colors */ .light-mode .kanban-card { border-left: 3px solid transparent; } /* ============================================================ */ /* THEME SWITCH BUTTON (Component) */ /* ============================================================ */ .theme-switch { position: relative; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; -webkit-tap-highlight-color: transparent; } .theme-switch-track { width: 40px; height: 22px; border-radius: 11px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.08); position: relative; transition: all 0.3s ease; flex-shrink: 0; } .light-mode .theme-switch-track { background: rgba(0, 0, 0, 0.08); border-color: rgba(0, 0, 0, 0.06); } .theme-switch-thumb { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #a0a0a0; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); } .light-mode .theme-switch-thumb { left: 20px; background: #fbbf24; box-shadow: 0 1px 4px rgba(251, 191, 36, 0.3); } .theme-switch-thumb::after { content: '🌙'; font-size: 9px; line-height: 1; } .light-mode .theme-switch-thumb::after { content: '☀️'; }