/* ============================================================
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: #EEAD21;
--accent-hover: rgba(212, 232, 115, 0.25);
--accent-glow: rgba(212, 232, 115, 0.25);
--accent-text: #121212;
--accent-text-alt: #15130C;
--accent-progress-from: #EEAD21;
--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);
}
/* ---- Scrollbar ---- */
* {
scrollbar-width:thin;
scrollbar-color:#2A2A2A #161718;
}
html.light-mode *{
scrollbar-color:#D7D7D7 #F4F4F4 !important;
}
/* ---- 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: #F4F4F4;
--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: #E5E8EB;
--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: #E5E8EB;
--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);
}
.notification-icon{
color:#666;
}
.light-mode .notification-icon{
color:#15130C;
}
/* ============================================================ */
/* BASE / BODY */
/* ============================================================ */
.light-mode body {
background-color: var(--bg-body) !important;
color: var(--text-secondary) !important;
}
/* Selection color adjustment */
.light-mode ::selection {
background-color: #EEAD21 !important;
color: #15130C !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: #767676 !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: #EEAD21;
font-weight: 600;
}
.card-admin-colega {
color: #ffa94d;
font-weight: 500;
}
.card-admin-enviada {
color: #60a5fa;
font-weight: 500;
}
.light-mode .card-admin {
color: var(--text-muted-3) !important;
}
.light-mode .card-admin-self {
color: #00dbe9 !important;
}
.light-mode .card-admin-colega {
color: #f97316 !important;
}
.light-mode .card-admin-enviada {
color: #3b82f6 !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, .light-mode .kanban-column-header {
background: var(--bg-kanban-col) !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-top-color: var(--border-light) !important;
border-right-color: var(--border-light) !important;
border-bottom-color: var(--border-light) !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.light-mode .kanban-card:hover {
transform: translateY(-3px) scale(1.02);
border-top-color: var(--border-med) !important;
border-right-color: var(--border-med) !important;
border-bottom-color: var(--border-med) !important;
box-shadow: 0 8px 24px rgba(0,0,0,0.1) !important;
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.light-mode .kanban-badge {
background: var(--bg-badge) !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 */
/* ============================================================ */
/* Yellow primary buttons */
.light-mode [class*="bg-[#EEAD21]"],
.light-mode [class*="bg-[#EEAD21]"],
.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: #15130C !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: #1A1A1A !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: #b8860b !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: #b8860b !important;
}
.light-mode .card-score-pct {
color: #b8860b !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-top-color: #E9ECEF !important;
border-right-color: #E9ECEF !important;
border-bottom-color: #E9ECEF !important;
}
.light-mode [style*="border:1px solid rgba(255,255,255,0.04)"] {
border-top-color: #E9ECEF !important;
border-right-color: #E9ECEF !important;
border-bottom-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-\\[\\#EEAD21\\] {
color: #868e96 !important;
}
.light-mode .text-gray-400.hover\\:text-\\[\\#EEAD21\\]:hover {
color: #b8860b !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: #EEAD21 !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: #DFDFDF !important;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12) !important;
}
.light-mode .modal-header-modern {
background: #F7F7F7 !important;
border-color: #DFDFDF !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: #DFDFDF !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: #272727 !important;
}
.light-mode .tab-count {
background: rgba(0, 0, 0, 0.05) !important;
color: #868e96 !important;
}
.light-mode .tab-modern.active .tab-count {
background: #EEAD21 !important;
color: #15130C !important;
}
.light-mode .info-mini-card {
background: rgba(248, 249, 250, 0.95) !important;
border-color: #DFDFDF !important;
}
.light-mode .info-mini-icon {
color: #b8860b !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: #DFDFDF !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: #DFDFDF !important;
}
.light-mode .file-card:hover {
border-color: #EEAD21 !important;
}
.light-mode .file-name {
color: #212529 !important;
}
.light-mode .file-link {
color: #b8860b !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: #DFDFDF !important;
color: #212529 !important;
}
.light-mode .chat-bubble.bubble-admin {
background: #EEAD21 !important;
color: #15130C !important;
}
.light-mode .chat-field {
background: rgba(248, 249, 250, 0.95) !important;
border-color: #DFDFDF !important;
color: #212529 !important;
}
.light-mode .chat-field:focus {
border-color: #EEAD21 !important;
}
.light-mode .chat-tool-btn {
background: rgba(248, 249, 250, 0.95) !important;
border-color: #DFDFDF !important;
color: #868e96 !important;
}
.light-mode .chat-tool-btn:hover {
border-color: #EEAD21 !important;
color: #b8860b !important;
}
.light-mode .chat-input-modern {
border-color: #DFDFDF !important;
}
.light-mode .rec-cancel {
background: rgba(0, 0, 0, 0.06) !important;
color: rgba(0, 0, 0, 0.5) !important;
}
/* ============================================================ */
/* RESPONSIVE */
/* ============================================================ */
/* ============================================================ */
/* 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: #252525;
border: 1px solid rgba(255, 255, 255, 0.3);
position: relative;
transition: all 0.3s ease;
flex-shrink: 0;
}
.light-mode .theme-switch-track {
background: #F7F8F9;
border-color: #EAEAEA;
}
.theme-switch-thumb {
position: absolute;
top: 2px;
left: 2px;
width: 16px;
height: 16px;
border-radius: 50%;
background: #fbbf24;
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 {
/* moon icon as inline SVG background (use currentColor) */
content: "";
display: inline-block;
width: 10px;
height: 10px;
color: #121212;
background: url("data:image/svg+xml;utf8,") center/contain no-repeat;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
line-height: 0;
}
.light-mode .theme-switch-thumb::after {
/* use inline SVG for the sun icon: use currentColor so it contrasts with thumb */
content: "";
display: inline-block;
width: 11px;
height: 11px;
color: #15130C;
background: url("data:image/svg+xml;utf8,") center/contain no-repeat;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
line-height: 0;
position: relative;
left:1px;
}