/* ===== TEMA GLOBALE - LIGHT / DARK ===== */ /* Detecta automaticamente prefers-color-scheme del browser */ /* Può essere forzato con data-theme="light" o data-theme="dark" su */ /* ===== LIGHT THEME (default) ===== */ :root, [data-theme="light"] { --bg-primary: #f0f9ff; --bg-secondary: #f8fafc; --bg-card: #ffffff; --bg-card-hover: #f8fafc; --bg-input: #f8fafc; --bg-input-focus: #ffffff; --bg-overlay: rgba(0, 0, 0, 0.5); --bg-code: rgba(59, 130, 246, 0.08); --bg-badge: rgba(59, 130, 246, 0.1); --text-primary: #1e293b; --text-secondary: #64748b; --text-muted: #94a3b8; --text-inverse: #ffffff; --border-color: #e2e8f0; --border-light: #f1f5f9; --border-focus: #60a5fa; --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.08); --shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.1); --shadow-card: 0 4px 6px rgba(0, 0, 0, 0.04); --shadow-card-hover: 0 16px 32px rgba(0, 0, 0, 0.1); --accent: #3b82f6; --accent-light: #60a5fa; --accent-lighter: #93c5fd; --accent-bg: rgba(59, 130, 246, 0.1); --success: #10b981; --success-bg: rgba(16, 185, 129, 0.1); --warning: #f59e0b; --warning-bg: rgba(245, 158, 11, 0.1); --danger: #ef4444; --danger-bg: rgba(239, 68, 68, 0.1); --info: #06b6d4; --info-bg: rgba(6, 182, 212, 0.1); --pink: #ec4899; --pink-bg: rgba(236, 72, 153, 0.1); --violet: #8b5cf6; --violet-bg: rgba(139, 92, 246, 0.1); --gradient-page: linear-gradient(135deg, #f0f9ff 0%, #e8f1ff 100%); --gradient-header: linear-gradient(135deg, #5b9ef5 0%, #4a7fd7 100%); --table-header-bg: #f8f9fa; --table-row-hover: #f8fafc; --table-border: #f1f5f9; --scrollbar-track: #f1f5f9; --scrollbar-thumb: #cbd5e1; --topbar-bg: var(--bg-card); --sidebar-bg: #1a1d21; --sidebar-hover: #26292d; --sidebar-text: rgba(255, 255, 255, 0.7); --sidebar-text-active: #ffffff; color-scheme: light; } /* ===== DARK THEME ===== */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg-primary: #0f0f0f; --bg-secondary: #171717; --bg-card: #1a1a1a; --bg-card-hover: #222222; --bg-input: #1a1a1a; --bg-input-focus: #222222; --bg-overlay: rgba(0, 0, 0, 0.7); --bg-code: rgba(255, 255, 255, 0.06); --bg-badge: rgba(255, 255, 255, 0.08); --text-primary: #e5e5e5; --text-secondary: #a3a3a3; --text-muted: #737373; --text-inverse: #0f0f0f; --border-color: #262626; --border-light: #1f1f1f; --border-focus: #4a90d9; --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.5); --shadow-card: 0 4px 6px rgba(0, 0, 0, 0.2); --shadow-card-hover: 0 20px 40px rgba(0, 0, 0, 0.4); --accent: #4a90d9; --accent-light: #60a5fa; --accent-lighter: #93c5fd; --accent-bg: rgba(74, 144, 217, 0.15); --success: #10b981; --success-bg: rgba(16, 185, 129, 0.15); --warning: #f59e0b; --warning-bg: rgba(245, 158, 11, 0.15); --danger: #ef4444; --danger-bg: rgba(239, 68, 68, 0.15); --info: #06b6d4; --info-bg: rgba(6, 182, 212, 0.15); --pink: #ec4899; --pink-bg: rgba(236, 72, 153, 0.15); --violet: #8b5cf6; --violet-bg: rgba(139, 92, 246, 0.15); --gradient-page: linear-gradient(135deg, #0f0f0f 0%, #141414 100%); --gradient-header: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); --table-header-bg: #1f1f1f; --table-row-hover: #222222; --table-border: #262626; --scrollbar-track: #1a1a1a; --scrollbar-thumb: #404040; --topbar-bg: #1a1a1a; --sidebar-bg: #111111; --sidebar-hover: #1a1a1a; --sidebar-text: rgba(255, 255, 255, 0.6); --sidebar-text-active: #ffffff; color-scheme: dark; } } [data-theme="dark"] { --bg-primary: #0f0f0f; --bg-secondary: #171717; --bg-card: #1a1a1a; --bg-card-hover: #222222; --bg-input: #1a1a1a; --bg-input-focus: #222222; --bg-overlay: rgba(0, 0, 0, 0.7); --bg-code: rgba(255, 255, 255, 0.06); --bg-badge: rgba(255, 255, 255, 0.08); --text-primary: #e5e5e5; --text-secondary: #a3a3a3; --text-muted: #737373; --text-inverse: #0f0f0f; --border-color: #262626; --border-light: #1f1f1f; --border-focus: #4a90d9; --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.5); --shadow-card: 0 4px 6px rgba(0, 0, 0, 0.2); --shadow-card-hover: 0 20px 40px rgba(0, 0, 0, 0.4); --accent: #4a90d9; --accent-light: #60a5fa; --accent-lighter: #93c5fd; --accent-bg: rgba(74, 144, 217, 0.15); --success: #10b981; --success-bg: rgba(16, 185, 129, 0.15); --warning: #f59e0b; --warning-bg: rgba(245, 158, 11, 0.15); --danger: #ef4444; --danger-bg: rgba(239, 68, 68, 0.15); --info: #06b6d4; --info-bg: rgba(6, 182, 212, 0.15); --pink: #ec4899; --pink-bg: rgba(236, 72, 153, 0.15); --violet: #8b5cf6; --violet-bg: rgba(139, 92, 246, 0.15); --gradient-page: linear-gradient(135deg, #0f0f0f 0%, #141414 100%); --gradient-header: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); --table-header-bg: #1f1f1f; --table-row-hover: #222222; --table-border: #262626; --scrollbar-track: #1a1a1a; --scrollbar-thumb: #404040; --topbar-bg: #1a1a1a; --sidebar-bg: #111111; --sidebar-hover: #1a1a1a; --sidebar-text: rgba(255, 255, 255, 0.6); --sidebar-text-active: #ffffff; color-scheme: dark; } /* ===== GLOBAL THEME OVERRIDES ===== */ /* These apply to all pages that include this file */ body { background: var(--bg-primary) !important; color: var(--text-primary) !important; transition: background-color 0.3s ease, color 0.3s ease; } /* Cards and containers */ .card, .modal-content, .dropdown-menu, .employees-section, .bento-container, .quick-links-section, .filter-section, .header-section { background: var(--bg-card) !important; color: var(--text-primary) !important; border-color: var(--border-color) !important; } /* Tables */ .table { color: var(--text-primary) !important; } .table th { background: var(--table-header-bg) !important; color: var(--text-secondary) !important; border-color: var(--table-border) !important; } .table td { border-color: var(--table-border) !important; color: var(--text-primary) !important; } .table tbody tr:hover { background: var(--table-row-hover) !important; } /* Form controls */ .form-control, .form-select { background: var(--bg-input) !important; color: var(--text-primary) !important; border-color: var(--border-color) !important; } .form-control:focus, .form-select:focus { background: var(--bg-input-focus) !important; border-color: var(--border-focus) !important; color: var(--text-primary) !important; box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.15) !important; } .form-control::placeholder { color: var(--text-muted) !important; } /* Alerts — keep readable in dark mode */ [data-theme="dark"] .alert-info, :root:not([data-theme="light"]) .alert-info { background: var(--accent-bg) !important; color: var(--accent-lighter) !important; border-color: rgba(59, 130, 246, 0.2) !important; } [data-theme="dark"] .alert-success, :root:not([data-theme="light"]) .alert-success { background: var(--success-bg) !important; color: #6ee7b7 !important; border-color: rgba(16, 185, 129, 0.2) !important; } [data-theme="dark"] .alert-warning, :root:not([data-theme="light"]) .alert-warning { background: var(--warning-bg) !important; color: #fcd34d !important; border-color: rgba(245, 158, 11, 0.2) !important; } [data-theme="dark"] .alert-danger, :root:not([data-theme="light"]) .alert-danger { background: var(--danger-bg) !important; color: #fca5a5 !important; border-color: rgba(239, 68, 68, 0.2) !important; } /* Modal */ .modal-header, .modal-footer { border-color: var(--border-color) !important; } /* Dropdown */ .dropdown-menu { box-shadow: var(--shadow-lg) !important; } .dropdown-item { color: var(--text-primary) !important; } .dropdown-item:hover { background: var(--bg-card-hover) !important; } .dropdown-divider { border-color: var(--border-color) !important; } /* Scrollbar */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--scrollbar-track); } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } /* Text utilities */ .text-muted { color: var(--text-muted) !important; } /* Search box in dark mode */ .search-box { background: var(--bg-input) !important; border-color: var(--border-color) !important; color: var(--text-primary) !important; } .search-box:focus { background: var(--bg-input-focus) !important; border-color: var(--border-focus) !important; } /* ===== THEME TOGGLE BUTTON ===== */ .theme-toggle { position: fixed; bottom: 1.5rem; right: 1.5rem; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border-color); background: var(--bg-card); color: var(--text-secondary); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 9999; font-size: 1.1rem; transition: all 0.3s ease; box-shadow: var(--shadow-md); } .theme-toggle:hover { transform: scale(1.1); border-color: var(--accent); color: var(--accent); box-shadow: var(--shadow-lg); } /* Hide the icon that doesn't match current theme */ .theme-toggle .fa-moon { display: inline; } .theme-toggle .fa-sun { display: none; } [data-theme="dark"] .theme-toggle .fa-moon { display: none; } [data-theme="dark"] .theme-toggle .fa-sun { display: inline; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .fa-moon { display: none; } :root:not([data-theme="light"]) .theme-toggle .fa-sun { display: inline; } } /* ===== BOOTSTRAP CLASS OVERRIDES FOR DARK MODE ===== */ /* Override Bootstrap utility classes that don't adapt to dark mode */ [data-theme="dark"] .bg-white, [data-theme="dark"] .bg-light { background-color: var(--bg-card) !important; } [data-theme="dark"] .text-dark { color: var(--text-primary) !important; } [data-theme="dark"] .text-body { color: var(--text-primary) !important; } [data-theme="dark"] .border-light { border-color: var(--border-color) !important; } [data-theme="dark"] .card-header.bg-light { background-color: var(--bg-secondary) !important; } [data-theme="dark"] .badge.bg-light { background-color: var(--bg-secondary) !important; color: var(--text-primary) !important; } [data-theme="dark"] .list-group-item { background-color: var(--bg-card) !important; color: var(--text-primary) !important; border-color: var(--border-color) !important; } [data-theme="dark"] .breadcrumb { background-color: var(--bg-secondary) !important; } [data-theme="dark"] .page-link { background-color: var(--bg-card) !important; color: var(--text-primary) !important; border-color: var(--border-color) !important; } [data-theme="dark"] .page-item.active .page-link { background-color: var(--accent) !important; border-color: var(--accent) !important; color: white !important; } [data-theme="dark"] .nav-tabs .nav-link { color: var(--text-secondary) !important; } [data-theme="dark"] .nav-tabs .nav-link.active { background-color: var(--bg-card) !important; color: var(--text-primary) !important; border-color: var(--border-color) var(--border-color) var(--bg-card) !important; } [data-theme="dark"] .input-group-text { background-color: var(--bg-secondary) !important; color: var(--text-secondary) !important; border-color: var(--border-color) !important; } [data-theme="dark"] .form-floating label { color: var(--text-muted) !important; } /* Same overrides for auto-detected dark mode */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bg-white, :root:not([data-theme="light"]) .bg-light { background-color: var(--bg-card) !important; } :root:not([data-theme="light"]) .text-dark { color: var(--text-primary) !important; } :root:not([data-theme="light"]) .text-body { color: var(--text-primary) !important; } :root:not([data-theme="light"]) .border-light { border-color: var(--border-color) !important; } :root:not([data-theme="light"]) .card-header.bg-light { background-color: var(--bg-secondary) !important; } :root:not([data-theme="light"]) .badge.bg-light { background-color: var(--bg-secondary) !important; color: var(--text-primary) !important; } :root:not([data-theme="light"]) .list-group-item { background-color: var(--bg-card) !important; color: var(--text-primary) !important; border-color: var(--border-color) !important; } :root:not([data-theme="light"]) .page-link { background-color: var(--bg-card) !important; color: var(--text-primary) !important; border-color: var(--border-color) !important; } :root:not([data-theme="light"]) .page-item.active .page-link { background-color: var(--accent) !important; border-color: var(--accent) !important; color: white !important; } :root:not([data-theme="light"]) .nav-tabs .nav-link { color: var(--text-secondary) !important; } :root:not([data-theme="light"]) .nav-tabs .nav-link.active { background-color: var(--bg-card) !important; color: var(--text-primary) !important; border-color: var(--border-color) var(--border-color) var(--bg-card) !important; } :root:not([data-theme="light"]) .input-group-text { background-color: var(--bg-secondary) !important; color: var(--text-secondary) !important; border-color: var(--border-color) !important; } :root:not([data-theme="light"]) .form-floating label { color: var(--text-muted) !important; } }