/* Global theme stylesheet: light/dark using data-theme on */ /* Base (light) defaults via Bootstrap, minimal overrides */ html[data-theme='light'] body { background-color: #f8f9fa; color: #2c3e50; } /* Light theme: unify common components */ html[data-theme='light'] .card { background-color: #ffffff; border-color: #e5e7eb; color: #2c3e50; } html[data-theme='light'] .content-card, html[data-theme='light'] .leave-form-card, html[data-theme='light'] .form-container, html[data-theme='light'] .table-section, html[data-theme='light'] .section-header, html[data-theme='light'] .progress-indicator, html[data-theme='light'] .document-info, html[data-theme='light'] .leave-credits, html[data-theme='light'] .approval-section, html[data-theme='light'] .approval-box, html[data-theme='light'] .final-approval-section { background-color: #ffffff; border-color: #e5e7eb; color: #2c3e50; } /* Light theme: employee profile components */ html[data-theme='light'] .profile-card, html[data-theme='light'] .profile-stats, html[data-theme='light'] .accent-box, html[data-theme='light'] .family-member { background-color: #ffffff; color: #2c3e50; border-color: #e5e7eb; } html[data-theme='light'] .profile-header { background: #ffffff; color: #2c3e50; border-color: #e5e7eb; } html[data-theme='light'] .profile-card h3, html[data-theme='light'] .profile-card h4 { color: #2c3e50; border-color: #e5e7eb; } html[data-theme='light'] .info-item { border-color: #e5e7eb; } html[data-theme='light'] .profile-card .info-grid .info-item { padding: 12px 0; border-bottom: 1px solid #e5e7eb; } html[data-theme='light'] .profile-card .info-grid .info-item:last-child { border-bottom: 1px solid #e5e7eb; } html[data-theme='light'] .profile-card .info-grid .info-label { min-width: 180px; color: #495057; font-weight: 600; } html[data-theme='light'] .profile-card .info-grid .info-value { color: #2c3e50; } html[data-theme='light'] .gov-grid .accent-box { background: #ffffff; border: 1px solid #e5e7eb; border-left: 4px solid #0d6efd; } /* Light theme: tables */ html[data-theme='light'] .table thead th { background-color: #f8f9fa; color: #495057; border-color: #e5e7eb; } /* Shared utility: description box (used in incident details modal) */ .desc-box { white-space: pre-wrap; padding: 10px; border-radius: 6px; } html[data-theme='light'] .desc-box { background: #f8f9fa; border: 1px solid #e5e7eb; color: #2c3e50; } html[data-theme='dark'] .desc-box { background: var(--form-bg); border: 1px solid var(--input-border); color: var(--text-color); } /* Dark theme overrides */ html[data-theme='dark'] body { background: #0f1115 !important; /* override any page gradients */ color: #e6e8eb; } /* Override custom props used by auth templates */ html[data-theme='dark'] { --bg-color: #0f1115; --card-bg: #151922; --text-color: #e6e8eb; --text-muted: #a0a8b8; --border-color: #263041; --input-border: #2b3547; --primary-color: #1f6feb; --primary-hover: #1a5fd0; --shadow: rgba(0,0,0,0.35); /* Admin layout specific */ --bg-secondary: #131a24; --navbar-bg: #1f2937; --sidebar-bg: #1f2937; --sidebar-text: #d1d5db; --table-bg: #151922; --table-stripe: #121722; --table-hover: #1a2230; --modal-bg: #151922; --dropdown-bg: #151922; --form-bg: #0f1520; --text-secondary: #c7ccd6; } html[data-theme='dark'] .card { background-color: #151922; border-color: #263041; color: #e6e8eb; } /* Employee and generic components */ html[data-theme='dark'] .navbar { background: var(--navbar-bg) !important; } html[data-theme='dark'] .navbar.sticky-top { background: var(--navbar-bg) !important; } html[data-theme='dark'] .sidebar { background: var(--sidebar-bg); } html[data-theme='dark'] .sidebar .nav-link:hover, html[data-theme='dark'] .sidebar .nav-link.active { background-color: rgba(255,255,255,0.08); } html[data-theme='dark'] .content-card, html[data-theme='dark'] .leave-form-card, html[data-theme='dark'] .form-container, html[data-theme='dark'] .table-section, html[data-theme='dark'] .section-header, html[data-theme='dark'] .progress-indicator, html[data-theme='dark'] .document-info, html[data-theme='dark'] .leave-credits, html[data-theme='dark'] .approval-section, html[data-theme='dark'] .approval-box, html[data-theme='dark'] .final-approval-section { background: var(--card-bg); border-color: var(--border-color); color: var(--text-color); } /* Employee Profile (LinkedIn-style) */ html[data-theme='dark'] .profile-card, html[data-theme='dark'] .profile-stats, html[data-theme='dark'] .accent-box, html[data-theme='dark'] .family-member { background-color: var(--card-bg) !important; color: var(--text-color) !important; border-color: var(--border-color) !important; } html[data-theme='dark'] .profile-header { background: var(--card-bg) !important; color: var(--text-color) !important; border-color: var(--border-color) !important; } html[data-theme='dark'] .profile-banner { background: linear-gradient(135deg, #0f172a 0%, #0b1220 100%) !important; } html[data-theme='dark'] .profile-name, html[data-theme='dark'] .accent-title, html[data-theme='dark'] .timeline-title { color: var(--text-color) !important; } html[data-theme='dark'] .profile-card h3, html[data-theme='dark'] .profile-card h4 { color: var(--text-color) !important; border-color: var(--border-color) !important; } html[data-theme='dark'] .profile-title, html[data-theme='dark'] .profile-location, html[data-theme='dark'] .accent-value, html[data-theme='dark'] .timeline-subtitle, html[data-theme='dark'] .timeline-description, html[data-theme='dark'] .stat-label, html[data-theme='dark'] .info-item .info-label, html[data-theme='dark'] .info-item .info-value { color: var(--text-muted) !important; } html[data-theme='dark'] .info-item { border-color: var(--border-color) !important; } html[data-theme='dark'] .timeline-item { border-color: var(--border-color) !important; } /* Uniform data presentation: labels/values and separators */ html[data-theme='dark'] .profile-card .info-grid .info-item { padding: 12px 0 !important; border-bottom: 1px solid var(--border-color) !important; } html[data-theme='dark'] .profile-card .info-grid .info-item:last-child { border-bottom: 1px solid var(--border-color) !important; /* keep separator for uniform look */ } html[data-theme='dark'] .profile-card .info-grid .info-label { min-width: 180px; color: var(--text-secondary) !important; font-weight: 600; } html[data-theme='dark'] .profile-card .info-grid .info-value { color: var(--text-color) !important; } /* Government IDs & Licenses boxes */ html[data-theme='dark'] .gov-grid .accent-box { background: var(--card-bg) !important; border: 1px solid var(--border-color) !important; border-left: 4px solid var(--primary-color) !important; } html[data-theme='dark'] .form-control { background-color: #0f1520; border-color: #2b3547; color: #e6e8eb; } html[data-theme='dark'] .form-control::placeholder { color: #8b95a7; } html[data-theme='dark'] .form-control:focus { background-color: #0f1520; border-color: #4da7f7; box-shadow: 0 0 0 0.2rem rgba(77, 171, 247, 0.25); } html[data-theme='dark'] .btn-primary { background-color: #1f6feb; border-color: #1f6feb; } html[data-theme='dark'] .btn-primary:hover { background-color: #1a5fd0; border-color: #1a5fd0; } html[data-theme='dark'] .btn-outline-primary { color: #8fb6ff; border-color: #364968; } html[data-theme='dark'] .btn-outline-primary:hover { background-color: #1a2a44; color: #dce7ff; } html[data-theme='dark'] .alert-success { background-color: rgba(33, 138, 83, 0.15); border-color: #2a7a57; color: #b9f5d0; } html[data-theme='dark'] .alert-danger { background-color: rgba(176, 42, 55, 0.18); border-color: #7d2a31; color: #ffd1d6; } html[data-theme='dark'] .alert-warning { background-color: rgba(253, 126, 20, 0.15); border-color: #a35c12; color: #ffe5c2; } html[data-theme='dark'] a { color: #86b7ff; } html[data-theme='dark'] a:hover { color: #b0ceff; } /* Theme toggle button container */ .theme-toggle-container { position: fixed; top: 16px; right: 16px; z-index: 1050; } .theme-toggle-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(128,128,128,0.35); background: transparent; color: inherit; } html[data-theme='dark'] .theme-toggle-btn { border-color: #2b3547; } /* Text utilities in dark mode */ html[data-theme='dark'] .text-muted { color: var(--text-muted) !important; } html[data-theme='dark'] .text-success { color: #66d08c !important; } html[data-theme='dark'] .text-warning { color: #f0c679 !important; } /* Buttons in dark mode */ html[data-theme='dark'] .btn-warning { background-color: var(--warning-color, #d29922); border-color: #b8841f; color: #fff; } html[data-theme='dark'] .btn-warning:hover { background-color: #bd861d; border-color: #a77419; } html[data-theme='dark'] .btn-success { background-color: var(--success-color, #2ea043); border-color: #248a36; color: #fff; } html[data-theme='dark'] .btn-success:hover { background-color: #277c35; border-color: #20692c; } html[data-theme='dark'] .btn-info { background-color: var(--info-color, #1f6feb); border-color: #1b5fcc; color:#fff; } html[data-theme='dark'] .btn-info:hover { background-color:#1a5fd0; border-color:#1856bb; } html[data-theme='dark'] .btn-danger { background-color: var(--danger-color, #f85149); border-color:#d4453d; color:#fff; } html[data-theme='dark'] .btn-danger:hover { background-color:#dc463e; border-color:#c03d36; } /* Outline buttons */ html[data-theme='dark'] .btn-outline-warning { color:#f0c679; border-color:#70551a; } html[data-theme='dark'] .btn-outline-warning:hover { background-color:#3a2c0d; color:#ffdca1; } html[data-theme='dark'] .btn-outline-success { color:#83e0a4; border-color:#2c6b42; } html[data-theme='dark'] .btn-outline-success:hover { background-color:#173423; color:#bff1cf; } html[data-theme='dark'] .btn-outline-info { color:#8fb6ff; border-color:#2e4f86; } html[data-theme='dark'] .btn-outline-info:hover { background-color:#13223a; color:#dce7ff; } html[data-theme='dark'] .btn-outline-danger { color:#ffb3ae; border-color:#7a2a26; } html[data-theme='dark'] .btn-outline-danger:hover { background-color:#3a1614; color:#ffd6d3; } /* Badges in dark mode */ html[data-theme='dark'] .badge.bg-warning { background-color: rgba(210,153,34,0.18) !important; color:#f0c679 !important; border:1px solid #70551a; } html[data-theme='dark'] .badge.bg-success { background-color: rgba(46,160,67,0.18) !important; color:#83e0a4 !important; border:1px solid #2c6b42; } html[data-theme='dark'] .badge.bg-info { background-color: rgba(31,111,235,0.15) !important; color:#a7c6ff !important; border:1px solid #2e4f86; } html[data-theme='dark'] .badge.bg-danger { background-color: rgba(248,81,73,0.18) !important; color:#ffb3ae !important; border:1px solid #7a2a26; } /* Tables (Bootstrap/DataTables) */ html[data-theme='dark'] .table { --bs-table-bg: var(--table-bg); --bs-table-color: var(--text-color); --bs-border-color: var(--border-color); --bs-table-striped-bg: var(--table-stripe); --bs-table-hover-bg: var(--table-hover); --bs-table-hover-color: var(--text-color); color: var(--text-color); background-color: var(--table-bg); } html[data-theme='dark'] .table thead th { background-color: #1a2230; color:#c7ccd6; border-color: var(--border-color); } html[data-theme='dark'] .table tbody td { border-color: var(--border-color); } /* Ensure hover cells keep readable text color */ html[data-theme='dark'] .table-hover tbody tr:hover > * { color: var(--text-color); } html[data-theme='dark'] .table-hover tbody tr:hover .text-muted { color: var(--text-secondary) !important; } html[data-theme='dark'] .table-hover tbody tr:hover small { color: var(--text-secondary); } /* DataTables controls */ html[data-theme='dark'] .dataTables_wrapper .dataTables_filter input, html[data-theme='dark'] .dataTables_wrapper .dataTables_length select { background-color: var(--form-bg); border-color: var(--input-border); color: var(--text-color); } html[data-theme='dark'] .dataTables_wrapper .dataTables_filter input::placeholder { color: var(--text-muted); } html[data-theme='dark'] .dataTables_wrapper .dataTables_paginate .page-link { background-color: var(--form-bg); border-color: var(--input-border); color: var(--text-color); } html[data-theme='dark'] .dataTables_wrapper .dataTables_paginate .page-item.active .page-link { background-color: var(--primary-color); border-color: var(--primary-color); color: #fff; } /* Nav tabs */ html[data-theme='dark'] .nav-tabs { border-color: var(--border-color); } html[data-theme='dark'] .nav-tabs .nav-link { color: var(--text-muted); background-color: transparent; border-color: transparent; } html[data-theme='dark'] .nav-tabs .nav-link:hover { color: var(--text-color); } html[data-theme='dark'] .nav-tabs .nav-link.active { color: var(--text-color); background-color: var(--card-bg); border-color: var(--border-color) var(--border-color) transparent; } /* Form selects and input group */ html[data-theme='dark'] .form-select { background-color: var(--form-bg); border-color: var(--input-border); color: var(--text-color); } html[data-theme='dark'] .input-group-text { background-color: var(--form-bg); border-color: var(--input-border); color: var(--text-muted); } /* Accordions */ html[data-theme='dark'] .accordion-item { background-color: var(--card-bg); border-color: var(--border-color); } html[data-theme='dark'] .accordion-button { background-color: var(--card-bg); color: var(--text-color); } html[data-theme='dark'] .accordion-button:not(.collapsed) { background-color: #1a2230; color: var(--text-color); box-shadow: inset 0 -1px 0 var(--border-color); } html[data-theme='dark'] .accordion-button:focus { box-shadow: 0 0 0 .2rem rgba(31,111,235,.25); } html[data-theme='dark'] .accordion-body { background-color: var(--card-bg); color: var(--text-color); } html[data-theme='light'] .accordion-item { background-color: #ffffff; border-color: #e5e7eb; } html[data-theme='light'] .accordion-button { background-color: #ffffff; color: #2c3e50; } html[data-theme='light'] .accordion-button:not(.collapsed) { background-color: #f8f9fa; color: #2c3e50; box-shadow: inset 0 -1px 0 #e5e7eb; } /* Dropdowns & Modals */ html[data-theme='dark'] .dropdown-menu { background-color: var(--dropdown-bg); border-color: var(--border-color); color: var(--text-color); } html[data-theme='dark'] .dropdown-item { color: var(--text-color); } html[data-theme='dark'] .dropdown-item:hover { background-color: var(--table-hover); } html[data-theme='dark'] .modal-content { background-color: var(--modal-bg); color: var(--text-color); border-color: var(--border-color); } html[data-theme='dark'] .modal-header, html[data-theme='dark'] .modal-footer { border-color: var(--border-color); } /* Breadcrumbs */ html[data-theme='dark'] .breadcrumb-item a { color: #9bb5e8; } html[data-theme='dark'] .breadcrumb-item.active { color: var(--text-muted); } /* Native browser controls: ensure popup UI matches theme */ html[data-theme='dark'] input[type="date"], html[data-theme='dark'] input[type="time"], html[data-theme='dark'] input[type="datetime-local"], html[data-theme='dark'] select, html[data-theme='dark'] textarea { color-scheme: dark; } html[data-theme='light'] input[type="date"], html[data-theme='light'] input[type="time"], html[data-theme='light'] input[type="datetime-local"], html[data-theme='light'] select, html[data-theme='light'] textarea { color-scheme: light; } /* EIS specific tweaks */ html[data-theme='dark'] .form-header { background: var(--navbar-bg) !important; color: var(--text-color) !important; } html[data-theme='dark'] .form-actions { background-color: var(--card-bg); border-top: 1px solid var(--border-color); } html[data-theme='dark'] .dynamic-table th { background-color: #1a2230; color: var(--text-color); } html[data-theme='dark'] .dynamic-table td { border-color: var(--border-color); } html[data-theme='dark'] .dynamic-table input:focus { background-color: var(--form-bg); border-color: var(--input-border); } html[data-theme='dark'] #eisProfileAvatar { border-color: var(--border-color) !important; background: var(--form-bg) !important; } html[data-theme='dark'] .badge.bg-light { background-color: #1a2230 !important; color: var(--text-color) !important; border: 1px solid var(--border-color); } html[data-theme='dark'] .form-header .breadcrumb { background: rgba(255,255,255,0.06) !important; } html[data-theme='dark'] .form-header .breadcrumb .breadcrumb-item a { color: #c7ccd6 !important; } html[data-theme='dark'] .form-header .breadcrumb .breadcrumb-item.active { color: #ffffff !important; } html[data-theme='light'] .form-header .breadcrumb { background: rgba(0,0,0,0.04) !important; } html[data-theme='light'] .form-header .breadcrumb .breadcrumb-item a { color: #495057 !important; } html[data-theme='light'] .form-header .breadcrumb .breadcrumb-item.active { color: #2c3e50 !important; } /* Secondary button */ html[data-theme='dark'] .btn-secondary { background-color: #334155; border-color: #3b516b; color: #e6e8eb; } html[data-theme='dark'] .btn-secondary:hover { background-color: #2b3b4e; border-color: #34485f; } /* Leave Form (MCNP) - screen view only, print styles remain in template */ html[data-theme='dark'] .leave-form-container { background: var(--card-bg) !important; border-color: var(--border-color) !important; box-shadow: 0 10px 30px var(--shadow); } html[data-theme='dark'] .mcnp-header { background: #121826 !important; color: var(--text-color) !important; border-bottom-color: var(--border-color) !important; } html[data-theme='dark'] .mcnp-header .form-title { color: var(--text-color) !important; } html[data-theme='dark'] .document-info { background: transparent !important; color: var(--text-color) !important; border-color: var(--border-color) !important; } html[data-theme='dark'] .form-row { color: var(--text-color); } html[data-theme='dark'] .form-label { color: var(--text-color) !important; } html[data-theme='dark'] .form-input { color: var(--text-color) !important; border-bottom-color: var(--border-color) !important; } html[data-theme='dark'] .form-input::placeholder { color: var(--text-muted); } html[data-theme='dark'] .checkbox-section, html[data-theme='dark'] .signature-section, html[data-theme='dark'] .approval-section { background: transparent !important; border-color: var(--border-color) !important; } html[data-theme='dark'] .signature-box, html[data-theme='dark'] .approval-box, html[data-theme='dark'] .final-approval-box { background: transparent !important; border-color: var(--border-color) !important; } html[data-theme='dark'] .signature-line { border-bottom-color: var(--border-color) !important; } html[data-theme='dark'] .approval-name { color: var(--text-color) !important; } html[data-theme='dark'] .approval-title, html[data-theme='dark'] .signature-subtitle { color: var(--text-muted) !important; } html[data-theme='dark'] .mcnp-logo { border-color: var(--border-color) !important; background: var(--navbar-bg) !important; } /* Admin EIS: strengthen dark mode contrasts for section cards and borders */ html[data-theme='dark'] .form-section { background: var(--card-bg) !important; border: 1px solid var(--border-color) !important; box-shadow: 0 4px 6px -1px var(--shadow) !important; color: var(--text-color) !important; } html[data-theme='dark'] .section-title { color: var(--text-color) !important; border-bottom-color: var(--border-color) !important; } /* Generic border utility in dark mode */ html[data-theme='dark'] .border { border-color: var(--border-color) !important; } html[data-theme='dark'] .rounded.border { border-color: var(--border-color) !important; } /* Emergency contacts list items and similar boxed items */ html[data-theme='dark'] .emergency-contact-item { background: transparent !important; border-color: var(--border-color) !important; } /* Tables inside forms */ html[data-theme='dark'] .form-section .table { background-color: var(--table-bg) !important; } html[data-theme='dark'] .table > :not(caption) > * > * { border-color: var(--border-color) !important; } html[data-theme='dark'] .table thead th { background-color: #1a2230 !important; } /* Headings and labels inside dark sections */ html[data-theme='dark'] h3, html[data-theme='dark'] h4, html[data-theme='dark'] h5, html[data-theme='dark'] .form-label { color: var(--text-color) !important; } /* Fine-tuning */ html[data-theme='dark'] hr { border-color: var(--border-color) !important; opacity: 1 !important; } html[data-theme='dark'] .form-text { color: var(--text-muted) !important; } html[data-theme='dark'] .btn-light { background-color: #2a3342 !important; border-color: #3a465b !important; color: #e6e8eb !important; } html[data-theme='dark'] .btn-light:hover { background-color: #324059 !important; border-color: #44546d !important; color:#fff !important; } /* Avoid bright yellow autofill in dark mode */ html[data-theme='dark'] input:-webkit-autofill, html[data-theme='dark'] input:-webkit-autofill:hover, html[data-theme='dark'] input:-webkit-autofill:focus, html[data-theme='dark'] textarea:-webkit-autofill, html[data-theme='dark'] select:-webkit-autofill { -webkit-text-fill-color: var(--text-color) !important; -webkit-box-shadow: 0 0 0px 1000px var(--form-bg) inset !important; box-shadow: 0 0 0px 1000px var(--form-bg) inset !important; } /* Table striping/hover tweaks */ html[data-theme='dark'] .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: var(--table-stripe) !important; color: var(--text-color) !important; } html[data-theme='dark'] .table-hover tbody tr:hover > * { background-color: var(--table-hover) !important; } /* Inputs inside tables (education, siblings, employment) */ html[data-theme='dark'] .form-section .table .form-control, html[data-theme='dark'] .form-section .table input, html[data-theme='dark'] .form-section .table select, html[data-theme='dark'] .form-section .table textarea { background-color: var(--form-bg) !important; color: var(--text-color) !important; border-color: var(--input-border) !important; caret-color: var(--text-color) !important; } html[data-theme='dark'] .form-section .table .form-control:focus, html[data-theme='dark'] .form-section .table select:focus, html[data-theme='dark'] .form-section .table textarea:focus, html[data-theme='dark'] .form-section .table input:focus { background-color: var(--form-bg) !important; color: var(--text-color) !important; border-color: #4da7f7 !important; box-shadow: 0 0 0 0.2rem rgba(77, 171, 247, 0.25) !important; } html[data-theme='dark'] .form-section .table input::placeholder, html[data-theme='dark'] .form-section .table textarea::placeholder { color: var(--text-muted) !important; opacity: 1 !important; } /* Disabled controls remain readable */ html[data-theme='dark'] .form-section .table .form-control:disabled, html[data-theme='dark'] .form-section .table .form-select:disabled { background-color: #0f1520 !important; color: var(--text-muted) !important; border-color: var(--input-border) !important; opacity: 1 !important; } /* Date input text and icon */ html[data-theme='dark'] .form-section .table input[type="date"] { color: var(--text-color) !important; color-scheme: dark; } html[data-theme='dark'] .form-section .table input[type="date"]::-webkit-datetime-edit { color: var(--text-color) !important; } html[data-theme='dark'] .form-section .table input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.9); opacity: 0.85; }