/* ============================================================ T.I.M.S. DARK MODE — shared stylesheet Activated when has the .dark class (toggled by darkmode.js) Wrapped in @media screen so print output always stays light. ============================================================ */ @media screen { html.dark { color-scheme: dark; } /* ---------- Shared color tokens ---------- */ html.dark { --text: #e2e8f0; --muted: #94a3b8; --muted-light: #64748b; --border: #334155; --card-bg: #1e293b; --bg: #0f172a; --surface: #1e293b; --gray: #94a3b8; --gray-light: #334155; --gray-dark: #cbd5e1; --light: #1e293b; --dark: #f1f5f9; --ink: #e2e8f0; --ink-soft: #94a3b8; --ink-faint: #64748b; --white: #f8fafc; --soft: #1e293b; --glass: rgba(30, 41, 59, 0.75); --glass-border: rgba(255, 255, 255, 0.12); --bg-a: #0f172a; --bg-b: #1e293b; --text-dark: #f1f5f9; --text-light: #94a3b8; --surface-dark: #1e293b; } html.dark body { background: #0f172a; } html.dark ::selection { background: rgba(99, 102, 241, 0.4); color: #fff; } /* ---------- Scrollbars ---------- */ html.dark ::-webkit-scrollbar-thumb { background: #334155; } html.dark ::-webkit-scrollbar-track { background: #0f172a; } /* ============================================================ Main.html (shell / sidebar / top bar / modals) ============================================================ */ html.dark .side-panel { background: rgba(15, 23, 42, 0.82); border-right-color: rgba(255, 255, 255, 0.08); box-shadow: 4px 0 30px rgba(0, 0, 0, 0.45); } html.dark .sidebar-header { border-bottom-color: rgba(255, 255, 255, 0.08); } html.dark .sidebar-title-group .system-name { color: #e0e7ff; } html.dark .sidebar-title-group .system-sub { color: #94a3b8; } html.dark .tab-list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); } html.dark .tab-btn { background: rgba(51, 65, 85, 0.4); color: #e2e8f0; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); } html.dark .tab-btn:hover { background: rgba(71, 85, 105, 0.6); border-color: rgba(129, 140, 248, 0.25); } html.dark .tab-btn.active { background: linear-gradient(135deg, #4f46e5, #7c3aed); color: #ffffff; } html.dark .tab-btn.active .badge { background: rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.9); } html.dark .tab-btn .badge { background: rgba(255, 255, 255, 0.12); color: #cbd5e1; } html.dark .sidebar-user-profile { background: rgba(255, 255, 255, 0.08); } html.dark .sidebar-user-profile:hover { background: rgba(255, 255, 255, 0.16); } html.dark .sidebar-user-name { color: #e2e8f0; } html.dark .top-bar { background: rgba(15, 23, 42, 0.78); border-bottom-color: rgba(255, 255, 255, 0.08); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3); } html.dark .top-bar .top-bar-item { color: #cbd5e1; } html.dark .top-bar .top-bar-item.sep { border-right-color: rgba(255, 255, 255, 0.12); } html.dark .topbar-dropup .sidebar-user-profile { background: rgba(255, 255, 255, 0.08); } html.dark .topbar-dropup .sidebar-user-profile:hover { background: rgba(255, 255, 255, 0.16); } html.dark .topbar-dropup .sidebar-user-name { color: #e2e8f0; } html.dark .dropup-menu { background: rgba(30, 41, 59, 0.95); border-color: rgba(255, 255, 255, 0.1); box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.5); } html.dark .dropup-menu a { color: #cbd5e1; } html.dark .dropup-menu a:hover { background: rgba(99, 102, 241, 0.22); color: #a5b4fc; } html.dark .content-area { background: linear-gradient(160deg, #0f172a 0%, #1e293b 100%) !important; background-size: cover !important; } html.dark .content-area iframe { background: #0f172a; } html.dark #floatingToggleBtn { background: rgba(30, 41, 59, 0.9); color: #e2e8f0; border-color: rgba(255, 255, 255, 0.15); } html.dark #floatingToggleBtn:hover { background: rgba(30, 41, 59, 1); } /* Main modals */ html.dark #profileModal .profile-modal-container, html.dark #announcementModal .profile-modal-container, html.dark #qrDataModal .profile-modal-container { background: rgba(15, 23, 42, 0.95); border-color: rgba(255, 255, 255, 0.1); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); } html.dark #profileModal .profile-modal-header, html.dark #announcementModal .profile-modal-header, html.dark #qrDataModal .profile-modal-header { border-bottom-color: rgba(255, 255, 255, 0.1); } html.dark #profileModal .profile-modal-header h3, html.dark #announcementModal .profile-modal-header h3, html.dark #qrDataModal .profile-modal-header h3 { color: #f1f5f9; } html.dark #profileModal .profile-modal-close:hover, html.dark #announcementModal .profile-modal-close:hover, html.dark #qrDataModal .profile-modal-close:hover { background: #273449; } html.dark #profileModal iframe, html.dark #announcementModal iframe, html.dark #qrDataModal iframe { background: #0f172a; } html.dark .admin-modal { background: rgba(15, 23, 42, 0.92); border-color: rgba(255, 255, 255, 0.1); box-shadow: 0 8px 40px rgba(0, 0, 0, 0.55); } html.dark .admin-title { color: #f1f5f9; } html.dark .admin-text { color: #94a3b8; } html.dark .admin-modal .form-input { background: #1e293b; border-color: #334155; color: #e2e8f0; } html.dark .admin-modal .form-input:focus { background: #1e293b; border-color: #6366f1; } html.dark .admin-modal .input-icon { color: #64748b; } html.dark .admin-modal .password-toggle { color: #94a3b8; } html.dark .modal-btn-secondary { background: #273449; color: #e2e8f0; } html.dark .modal-btn-secondary:hover { background: #334155; } html.dark .admin-modal .btn-secondary { background: #273449; color: #cbd5e1; border-color: #334155; } html.dark .admin-modal .btn-secondary:hover { background: #334155; color: #f1f5f9; } html.dark #downloadModal { background: rgba(15, 23, 42, 0.95) !important; border-color: rgba(255, 255, 255, 0.12) !important; } html.dark .chat-widget { background: #1e293b; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6); } html.dark .chat-widget iframe { background: #1e293b; } html.dark .online-toast { background: rgba(30, 41, 59, 0.95); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); } html.dark .online-toast-name { color: #f1f5f9; } html.dark .online-toast img { border-color: #1e293b; } html.dark .chat-toast { background: rgba(15, 23, 42, 0.95); } /* ============================================================ TicketAnalytics.html ============================================================ */ html.dark .kpi-card, html.dark .chart-container { background: rgba(30, 41, 59, 0.72); border-color: rgba(255, 255, 255, 0.1); } html.dark .greeting-panel { background: linear-gradient(120deg, rgba(30, 41, 59, 0.88) 0%, rgba(15, 23, 42, 0.72) 55%, rgba(76, 29, 149, 0.55) 100%) !important; border-color: rgba(255, 255, 255, 0.1); } html.dark .greeting-right::before { background: linear-gradient(to right, #0f172a 0%, transparent 100%); } html.dark .greeting-line { color: #a5b4fc; } html.dark .welcome-message { color: #94a3b8; } html.dark .kpi-info h3 { color: #94a3b8; } html.dark .kpi-info .value { color: #f1f5f9; } html.dark .tab-bar { background: rgba(255, 255, 255, 0.06); } html.dark .tab-btn { color: #94a3b8; } html.dark .tab-btn:hover { background: rgba(255, 255, 255, 0.1); } html.dark .tab-btn.active { background: #1e293b; color: #a5b4fc; } html.dark .activity-item { border-bottom-color: rgba(255, 255, 255, 0.08); } html.dark .activity-item:hover { background: rgba(99, 102, 241, 0.12); } html.dark .chart-header h2, html.dark .activity-title { color: #f1f5f9; } html.dark .activity-time { color: #94a3b8; } html.dark .spinner-overlay { background: rgba(15, 23, 42, 0.8); } /* ============================================================ Ticket Main Dashboard.html ============================================================ */ html.dark .header-container, html.dark .filters-pagination-container, html.dark .pagination-bottom-container { background: rgba(30, 41, 59, 0.75); border-color: rgba(255, 255, 255, 0.1); } html.dark .table-wrap { background: rgba(30, 41, 59, 0.72) !important; border-color: rgba(255, 255, 255, 0.1); } html.dark thead { background: rgba(30, 41, 59, 0.9); } html.dark thead th { color: #94a3b8 !important; } html.dark th, html.dark td { color: #e2e8f0 !important; border-bottom-color: rgba(255, 255, 255, 0.08); } html.dark tbody tr:hover { background: #273449 !important; color: #f1f5f9 !important; } html.dark .closed-row { background: rgba(30, 41, 59, 0.5) !important; color: #94a3b8 !important; } html.dark .open-in-progress-row { background-color: #0f2b3f !important; color: #7dd3fc !important; } html.dark .blink-new { background-color: #1e3a5f !important; color: #fde68a !important; } html.dark #dataTable.grid-view tr { background: rgba(30, 41, 59, 0.8); } html.dark #dataTable.grid-view .col-photo { background: #1e293b; } html.dark #searchBox, html.dark #statusFilter, html.dark #branchFilter, html.dark #repairStatusFilter, html.dark #dateFrom, html.dark #dateTo, html.dark #regionFilter, html.dark #dateFilter { background: #1e293b !important; border-color: #334155 !important; color: #e2e8f0 !important; } html.dark .view-toggle-group { background: rgba(255, 255, 255, 0.08); border-color: #334155; } html.dark .view-btn.active { background: #1e293b; color: #a5b4fc; } html.dark .selection-toolbar { background: #1e293b; border-color: #334155; } html.dark .user-profile-container { background: rgba(255, 255, 255, 0.08); } html.dark .system-sub { color: #94a3b8; } /* dashboard modals */ html.dark .modal-content, html.dark #statusModal .modal-content.update-modal, html.dark #summaryModal .modal-content, html.dark #exportDateRangeModal .modal-content, html.dark #requestModal .modal-content.ump-premium-modal { background: rgba(15, 23, 42, 0.96) !important; border-color: rgba(255, 255, 255, 0.1); } html.dark #summaryModal { background: rgba(15, 23, 42, 0.6) !important; } html.dark .modal-info-label { color: #94a3b8; } html.dark .modal-info-value { color: #e2e8f0; } html.dark .info-card { background: linear-gradient(180deg, #1e293b, #1b2433) !important; border-color: #334155; } html.dark .info-tile { background: #273449 !important; border-color: #334155; } html.dark .summary-title { background: transparent !important; color: #f1f5f9 !important; border-bottom-color: rgba(255, 255, 255, 0.1); } html.dark .modal-actions { background: transparent !important; border-color: rgba(255, 255, 255, 0.08); } html.dark .status-pill { background: #273449 !important; } html.dark .upload-drop { background: #1b2433 !important; } html.dark .field select, html.dark .field textarea, html.dark .field input[type="text"], html.dark #statusModal .field select, html.dark #statusModal .field textarea, html.dark #statusModal .field input { background: #1e293b !important; border-color: #334155 !important; color: #e2e8f0 !important; } html.dark #statusModal .modal-title { color: #f1f5f9; } html.dark #statusModal .modal-subtitle { color: #94a3b8; } html.dark #statusModal .ticket-badge { background: #273449; border-color: #334155; } html.dark #statusModal .ticket-badge .badge-label { color: #a5b4fc; } html.dark #statusModal .ticket-badge .badge-code { color: #c7d2fe; } html.dark #statusModal .info-label { color: #94a3b8; } html.dark #statusModal .info-value { color: #e2e8f0; } html.dark #statusModal .update-form-grid > .field label, html.dark #statusModal #transferPanel .field label { color: #e2e8f0; } html.dark #statusModal .field-helper { color: #94a3b8; } html.dark #statusModal .status-pill { color: #e2e8f0; } html.dark #statusModal .upload-drop .up-main { color: #e2e8f0; } html.dark #statusModal .upload-drop .up-sub { color: #94a3b8; } html.dark #statusModal #transferPanel h4 { color: #f1f5f9; } html.dark #statusModal .select-wrap > i, html.dark #statusModal .input-wrap > i { color: #94a3b8; } html.dark .ump-input-wrap { background: #1e293b !important; border-color: #334155 !important; } html.dark .ump-field input, html.dark .ump-field select, html.dark .ump-field textarea { background: #1e293b !important; border-color: #334155 !important; color: #e2e8f0 !important; } html.dark .modal-close { background: #273449; color: #cbd5e1; } html.dark .modal-close-x { color: #94a3b8; } html.dark .iframe-modal-content { background: #1e293b !important; } html.dark .repair-photo-tooltip { background: #1e293b; border-color: #334155; } html.dark .ump-wizard-sidebar { background: rgba(30, 41, 59, 0.85) !important; } html.dark .ump-section-card { background: rgba(30, 41, 59, 0.85) !important; } html.dark .ump-step-card { background: rgba(30, 41, 59, 0.9) !important; } html.dark .ump-nav-btn.ump-prev-btn, html.dark .ump-action-btn, html.dark .ump-close-btn, html.dark .ump-nav-btn.ump-cancel-btn { background: #273449; color: #cbd5e1; border-color: #334155; } html.dark .generating-overlay { background: rgba(15, 23, 42, 0.9) !important; } /* --- Submit New Ticket wizard (dark) --- */ html.dark #requestModal .ump-side-title, html.dark #requestModal .ump-step-title, html.dark #requestModal .ump-step-label, html.dark #requestModal .ump-section-head, html.dark #requestModal .ump-summary-block-title, html.dark #requestModal .ump-emp-title, html.dark #requestModal .ump-help-title { color: #f1f5f9; } html.dark #requestModal .ump-side-sub, html.dark #requestModal .ump-step-subtitle, html.dark #requestModal .ump-step-desc, html.dark #requestModal .ump-emp-desc, html.dark #requestModal .ump-upload-zone .upload-text { color: #94a3b8; } html.dark #requestModal .ump-step-item:not(.active):not(.completed) .ump-step-circle { background: #1e293b !important; border-color: #334155 !important; color: #94a3b8 !important; } html.dark #requestModal .ump-step-line { background: #334155 !important; } html.dark #requestModal .ump-wizard-sidebar { border-color: #334155 !important; } html.dark #requestModal .ump-help-card { background: rgba(30, 41, 59, 0.9) !important; border-color: #334155 !important; } html.dark #requestModal .ump-employee-card { background: linear-gradient(135deg, #1e293b 0%, #1b2433 55%, #273449 100%) !important; border-color: #334155 !important; } html.dark #requestModal .ump-pill { background: #273449 !important; border-color: #334155 !important; color: #cbd5e1 !important; } html.dark #requestModal .ump-progress { background: #273449 !important; } html.dark #requestModal .ump-input-wrap.is-select label { background: #1e293b !important; } html.dark #requestModal .ump-upload-zone { background: #1b2433 !important; border-color: #334155 !important; } html.dark #requestModal .ump-upload-zone:hover, html.dark #requestModal .ump-upload-zone.dragover { border-color: #818cf8 !important; background: #273449 !important; } html.dark #requestModal .ump-upload-zone .upload-btn { background: #273449 !important; border-color: #334155 !important; color: #a5b4fc !important; } html.dark #requestModal .ump-upload-zone .upload-btn:hover { background: #1e293b !important; border-color: #818cf8 !important; } html.dark #requestModal .ump-step-nav { background: #1e293b !important; border-color: #334155 !important; } html.dark #requestModal .ump-info-box { background: #1e293b !important; border-color: #334155 !important; color: #93c5fd !important; } html.dark #requestModal .ump-info-box i { color: #60a5fa !important; } html.dark #requestModal .ump-summary-block { background: #1b2433 !important; border-color: #334155 !important; } html.dark #requestModal .ump-summary-row { border-bottom-color: rgba(255, 255, 255, 0.08) !important; } html.dark #requestModal .ump-attach-preview img, html.dark #requestModal .ump-upload-zone .photo-preview { border-color: #334155 !important; } html.dark #requestModal .ump-confirm-check label { color: #cbd5e1 !important; } html.dark #requestModal .ump-check-box { background: #1e293b !important; border-color: #334155 !important; } html.dark #requestModal .ump-confirm-check .ump-check-box.error { background: rgba(239, 68, 68, 0.15) !important; border-color: #ef4444 !important; } html.dark #requestModal .ump-illustration-success { background: linear-gradient(135deg, #173024, #15281f) !important; border-color: rgba(34, 197, 94, 0.3) !important; } html.dark #requestModal .ump-ill-title { color: #86efac !important; } html.dark #requestModal .ump-ill-desc { color: #6ee7b7 !important; } html.dark #requestModal .close-btn { background: #273449 !important; border-color: #334155 !important; color: #cbd5e1 !important; } html.dark #requestModal .close-btn:hover { background: #1e293b !important; color: #a5b4fc !important; border-color: #818cf8 !important; } html.dark #requestModal .ump-wizard-content { scrollbar-color: #334155 transparent; } /* --- Ticket Summary modal (dark) --- */ html.dark #summaryModal .ump-ticket-result { background: linear-gradient(135deg, #1e293b, #1b2433) !important; border-color: #334155 !important; } html.dark #summaryModal .ump-result-hero { border-bottom-color: rgba(255, 255, 255, 0.1) !important; } html.dark #summaryModal .ump-hero-ticket { color: #f1f5f9 !important; } html.dark #summaryModal .ump-hero-ticket:hover { color: #a5b4fc !important; background: rgba(129, 140, 248, 0.12) !important; } html.dark #summaryModal .ump-hero-resolved { color: #94a3b8 !important; } html.dark #summaryModal .ump-action-btn { background: #273449 !important; border-color: #334155 !important; color: #cbd5e1 !important; } html.dark #summaryModal .ump-action-btn:hover { border-color: #818cf8 !important; color: #a5b4fc !important; } html.dark #summaryModal .ump-more-dropdown { background: #1b2433 !important; border-color: #334155 !important; } html.dark #summaryModal .ump-more-dropdown button { color: #cbd5e1 !important; } html.dark #summaryModal .ump-more-dropdown button:hover { background: #273449 !important; color: #a5b4fc !important; } html.dark #summaryModal .ump-tp-step:not(.completed):not(.failed):not(.active) .ump-tp-dot { background: #1e293b !important; border-color: #334155 !important; color: #94a3b8 !important; } html.dark #summaryModal .ump-tp-step.active .ump-tp-dot { background: rgba(124, 58, 237, 0.25) !important; border-color: #a78bfa !important; color: #a78bfa !important; } html.dark #summaryModal .ump-tp-step.completed .ump-tp-name, html.dark #summaryModal .ump-tp-step.active .ump-tp-name { color: #e2e8f0 !important; } html.dark #summaryModal .ump-tp-line { background: #334155 !important; } html.dark #summaryModal .ump-dash-card { background: #1e293b !important; border-color: #334155 !important; } html.dark #summaryModal .ump-dash-card-title { color: #f1f5f9 !important; } html.dark #summaryModal .ump-dash-card-title i { background: linear-gradient(135deg, #273449, #2a2440) !important; color: #a5b4fc !important; } html.dark #summaryModal .ump-info-item .ump-info-value { color: #e2e8f0 !important; } html.dark #summaryModal .ump-mini-card { background: #1b2433 !important; border-color: #334155 !important; } html.dark #summaryModal .ump-mini-card:hover { border-color: #6366f1 !important; } html.dark #summaryModal .ump-mini-card .ump-mini-value { color: #e2e8f0 !important; } html.dark #summaryModal .ump-close-btn { background: #273449 !important; border-color: #334155 !important; color: #cbd5e1 !important; } html.dark #summaryModal .ump-close-btn:hover { border-color: #818cf8 !important; color: #a5b4fc !important; } html.dark #summaryModal .ump-status-badge.completed { background: rgba(5, 150, 105, 0.18) !important; color: #34d399 !important; border-color: rgba(34, 197, 94, 0.35) !important; } html.dark #summaryModal .ump-status-badge.working { background: rgba(234, 88, 12, 0.18) !important; color: #fb923c !important; border-color: rgba(251, 146, 60, 0.35) !important; } html.dark #summaryModal .ump-status-badge.assigned { background: rgba(37, 99, 235, 0.18) !important; color: #60a5fa !important; border-color: rgba(96, 165, 250, 0.35) !important; } html.dark #summaryModal .ump-status-badge.cancelled, html.dark #summaryModal .ump-status-badge.failed { background: rgba(220, 38, 38, 0.18) !important; color: #f87171 !important; border-color: rgba(248, 113, 113, 0.35) !important; } html.dark #summaryModal .ump-status-badge.pending { background: rgba(100, 116, 139, 0.18) !important; color: #94a3b8 !important; border-color: rgba(148, 163, 184, 0.35) !important; } html.dark #summaryModal .modal-content::-webkit-scrollbar-thumb { background: #334155 !important; } html.dark #exportDateRangeModal .modal-content .modal-header { background: transparent !important; } html.dark #exportDateRangeModal .export-header { background: linear-gradient(135deg, #1e293b 0%, #1b2433 100%) !important; border-bottom: 1px solid #334155 !important; } html.dark #exportDateRangeModal .export-icon { background: #1e3a8a !important; color: #60a5fa !important; box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.25); } html.dark #exportDateRangeModal h3 { color: #f1f5f9 !important; } html.dark #exportDateRangeModal p { color: #94a3b8 !important; } html.dark #exportDateRangeModal .field label { color: #cbd5e1 !important; } html.dark #exportDateRangeModal .field input, html.dark #exportDateRangeModal .field input.form-control { background: #1e293b !important; border-color: #334155 !important; color: #f1f5f9 !important; color-scheme: dark; } html.dark #exportDateRangeModal .field input::-webkit-calendar-picker-indicator { filter: invert(0.8); cursor: pointer; } html.dark #exportDateRangeModal .field input:focus { border-color: #3b82f6 !important; box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15); } html.dark #exportDateRangeModal .arrow-separator { color: #64748b; } html.dark #exportDateRangeModal .modal-close-x:hover { background: #273449; color: #e2e8f0; } html.dark #exportDateRangeModal .modal-actions .modal-close { background: #273449 !important; color: #cbd5e1 !important; } html.dark #exportDateRangeModal .modal-actions .modal-close:hover { background: #334155 !important; color: #e2e8f0 !important; } /* ============================================================ IT Personnel.html ============================================================ */ html.dark .header { background: rgba(30, 41, 59, 0.7); border-color: rgba(255, 255, 255, 0.1); } html.dark .header-subtitle { color: #94a3b8; } html.dark .header-logo-svg { color: #a5b4fc; filter: drop-shadow(0 8px 16px rgba(165, 180, 252, 0.25)); } html.dark .header-logo-svg .svg-person { fill: #1e293b; } html.dark .header-logo-svg .svg-accent { fill: #1e293b; } html.dark .user-section { background: rgba(30, 41, 59, 0.6); border-color: rgba(255, 255, 255, 0.12); } html.dark .username { color: #f1f5f9; } html.dark .user-type { color: #94a3b8; } html.dark .stat-card, html.dark .table-container, html.dark .personnel-card { background: #1e293b; border-color: #334155; } html.dark .personnel-card:hover { background: #273449; } html.dark .view-toggle-container { background: #1e293b; border-color: #334155; } html.dark .view-btn.active { background: rgba(99, 102, 241, 0.22); color: #a5b4fc; } html.dark .view-btn:hover { background: #273449; } html.dark #searchInput { background: #1e293b; border-color: #334155; color: #e2e8f0; } html.dark thead { background: #1b2433; } html.dark tbody tr { border-bottom-color: #334155; } html.dark tbody tr:hover { background: #273449; } html.dark .region-tag { background: rgba(99, 102, 241, 0.2); color: #a5b4fc; } html.dark .card-name { color: #f1f5f9; } html.dark .card-role, html.dark .card-email, html.dark .card-stat-label, html.dark .username-table, html.dark .stat-label { color: #94a3b8; } html.dark .card-avg-ack { color: #cbd5e1; } html.dark .avg-ack-time { color: #f1f5f9; } html.dark .modal-container, html.dark .modal-header, html.dark .modal-footer { background: rgba(15, 23, 42, 0.96) !important; border-color: rgba(255, 255, 255, 0.1); } html.dark .modal-header h2 { color: #a5b4fc; } html.dark .form-field input, html.dark .form-field select, html.dark .form-field textarea { background: #1e293b; border-color: #334155; color: #e2e8f0; } html.dark .form-field label { color: #94a3b8; } html.dark .modal-close-btn:hover { background: #273449; } html.dark .modal-btn.secondary { background: #273449; color: #cbd5e1; } html.dark .modal-btn.secondary:hover { background: #334155; } html.dark .online-toast { background: rgba(30, 41, 59, 0.95); } html.dark .spinner-overlay { background: rgba(15, 23, 42, 0.8); } /* ============================================================ UserProfile.html ============================================================ */ html.dark .profile-header { background: rgba(30, 41, 59, 0.75); border-color: rgba(255, 255, 255, 0.1); } html.dark .profile-info h1 { color: #f1f5f9; } html.dark .profile-info p { color: #94a3b8; } html.dark .info-card { background: rgba(30, 41, 59, 0.75); border-color: rgba(255, 255, 255, 0.1); } html.dark .info-card h2.sticky-title { background: rgba(30, 41, 59, 0.9); } html.dark .info-label, html.dark .stat-label { color: #94a3b8; } html.dark .info-value, html.dark .stat-value { color: #f1f5f9; } html.dark .stat-card { background: #1e293b; border-color: #334155; } html.dark .table-wrapper { border-color: #334155; } html.dark #ticketHistoryTable thead { background: #1b2433; } html.dark #ticketHistoryTable th, html.dark #ticketHistoryTable td { border-bottom-color: #334155; } html.dark #ticketHistoryTable tbody tr:hover { background: #273449; } html.dark .toast { background: #1e293b; color: #f1f5f9; } html.dark #profilePic { background: #1e293b; } html.dark .spinner-overlay { background: rgba(15, 23, 42, 0.8); } /* ============================================================ Prints.html (assessment report) ============================================================ */ html.dark .report-container { background: #1e293b; border-color: #334155; } html.dark .header h1 { color: #e2e8f0; } html.dark .info-label, html.dark .signature-details { color: #cbd5e1; } html.dark .report-footer, html.dark .manager-field-label { color: #94a3b8; } html.dark .top-info-table { background: #1b2433; border-color: #334155; } html.dark .top-info-table td { border-color: #334155; } html.dark .form-table td, html.dark .form-table th { border-color: #475569; } html.dark .form-table td:first-child { background-color: #1b2433; } html.dark .photo-thumb, html.dark .photo-placeholder-subtle { background: #1b2433; border-color: #334155; } html.dark .photo-placeholder-subtle { color: #64748b; } html.dark .manager-select, html.dark .manager-input { background-color: #1e293b; border-color: #334155; color: #e2e8f0; } html.dark input:disabled, html.dark input[readonly], html.dark textarea:disabled { background-color: #1b2433 !important; color: #cbd5e1 !important; } html.dark .model-input-invisible, html.dark .cause-other-input { color: #e2e8f0; } html.dark .manual-checkbox-container label { color: #e2e8f0; } html.dark #othersSpecify { background: #1e293b !important; color: #e2e8f0 !important; border-bottom-color: #334155 !important; } html.dark #signatureModal h3 { color: #f1f5f9; } html.dark .signature-pad-container { background: #1e293b; } html.dark .signature-pad-container label { color: #94a3b8; } html.dark .signature-canvas { background: #1e293b; border-color: #334155; } html.dark .spinner-overlay { background: rgba(15, 23, 42, 0.9); } /* ============================================================ system_download.html ============================================================ */ html.dark .download-container { background: rgba(30, 41, 59, 0.82); border-color: rgba(255, 255, 255, 0.12); box-shadow: 0 2px 0 rgba(255, 255, 255, 0.06) inset, 0 25px 60px rgba(0, 0, 0, 0.55); } html.dark .download-footer { border-top-color: rgba(255, 255, 255, 0.1); } html.dark .download-progress-track { background: rgba(255, 255, 255, 0.12); } html.dark .orb.a, html.dark .orb.b, html.dark .orb.c { opacity: 0.18; filter: blur(70px) brightness(0.6); } html.dark .update-time, html.dark .download-progress-text { color: #94a3b8; } /* ============================================================ index.html (boot / splash screen) ============================================================ */ html.dark .warehouse-bg { filter: blur(12px) brightness(0.45) saturate(0.75); } html.dark .warehouse-bg::after { background: linear-gradient(180deg, rgba(15, 23, 42, 0.55), rgba(15, 23, 42, 0.75)); } html.dark .ambient, html.dark .vignette, html.dark .dots-matrix { opacity: 0.5; } html.dark .center-glass { background: linear-gradient(180deg, rgba(15, 23, 42, 0.78), rgba(30, 41, 59, 0.6)); border-color: rgba(255, 255, 255, 0.12); } html.dark .center-glass::before { background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0)); } html.dark .company-chip { background: linear-gradient(180deg, rgba(30, 41, 59, 0.9), rgba(30, 41, 59, 0.72)); border-color: rgba(255, 255, 255, 0.1); } html.dark .company-chip .chip-text span { color: #94a3b8; } html.dark .progress-track { background: rgba(255, 255, 255, 0.14); } html.dark .feat-card { background: linear-gradient(180deg, rgba(30, 41, 59, 0.85), rgba(30, 41, 59, 0.65)); border-color: rgba(255, 255, 255, 0.1); } html.dark .feat-card .f-desc, html.dark .footer-powered { color: #94a3b8; } html.dark .secure-card { background: linear-gradient(180deg, rgba(30, 41, 59, 0.85), rgba(30, 41, 59, 0.65)); border-color: rgba(255, 255, 255, 0.1); } html.dark .panel-footer { border-top-color: rgba(255, 255, 255, 0.12); } /* ============================================================ Ticket Home Page.html — Desktop Layout ============================================================ */ html.dark body { background: #0f172a; } html.dark .app-header { background: #0f172a; border-bottom-color: rgba(255, 255, 255, 0.08); } html.dark .header-brand-name { color: #f1f5f9; } html.dark .header-brand-sub { color: rgba(255, 255, 255, 0.45); } html.dark .header-breadcrumb { color: rgba(255, 255, 255, 0.45); } html.dark .header-breadcrumb span { color: rgba(255, 255, 255, 0.85); } html.dark .header-icon-btn { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.7); } html.dark .header-icon-btn:hover { background: rgba(255, 255, 255, 0.12); color: #fff; } html.dark .header-user { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.08); } html.dark .header-username { color: rgba(255, 255, 255, 0.85); } html.dark .header-version { color: rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.06); } html.dark .dark-toggle-btn { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.7); } html.dark .dark-toggle-btn:hover { background: rgba(255, 255, 255, 0.12); color: #fff; } html.dark .app-sidebar { background: url("back.jpg") no-repeat center center; background-size: cover; border-right-color: rgba(255, 255, 255, 0.08); } html.dark .sidebar-section-label { color: #94a3b8 !important; } html.dark .sidebar-link { color: #e2e8f0 !important; } html.dark .sidebar-link:hover { background: rgba(255, 255, 255, 0.1); color: #fff !important; } html.dark .sidebar-link.active { background: rgba(37, 99, 235, 0.2); color: #93c5fd !important; } html.dark .sidebar-divider { background: rgba(255, 255, 255, 0.06); } html.dark .sidebar-status { color: #64748b; border-top-color: rgba(255, 255, 255, 0.06); } html.dark .app-main { background: url('back.jpg') no-repeat center center; background-size: cover; position: relative; } html.dark .app-main::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.4); z-index: 0; pointer-events: none; } html.dark .main-title { color: #f1f5f9; } html.dark .main-subtitle { color: #94a3b8; } html.dark .summary-card { background: #1e293b; border-color: rgba(255, 255, 255, 0.06); } html.dark .summary-label { color: #94a3b8; } html.dark .summary-value { color: #f1f5f9; } html.dark .quick-actions { background: #1e293b; border-color: rgba(255, 255, 255, 0.06); } html.dark .section-title { color: #f1f5f9; } html.dark .section-title i { color: #64748b; } html.dark .action-btn { background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.08); } html.dark .action-btn:hover { border-color: #3b82f6; background: rgba(37, 99, 235, 0.08); } html.dark .action-label { color: #cbd5e1; } html.dark .recent-tickets { background: #1e293b; border-color: rgba(255, 255, 255, 0.06); } html.dark .tickets-table th { color: #64748b; border-bottom-color: rgba(255, 255, 255, 0.06); } html.dark .tickets-table td { color: #94a3b8; border-bottom-color: rgba(255, 255, 255, 0.04); } html.dark .tickets-table tbody tr:hover { background: rgba(255, 255, 255, 0.03); } html.dark .tickets-empty i { color: #334155; } html.dark .tickets-empty p { color: #64748b; } html.dark .help-banner { background: linear-gradient(135deg, rgba(15, 23, 42, 0.8), rgba(30, 41, 59, 0.6)); border-color: rgba(255, 255, 255, 0.08); } html.dark .help-banner-text h4 { color: #f1f5f9; } html.dark .help-banner-text p { color: #94a3b8; } html.dark .help-banner-btn { background: transparent; border-color: #3b82f6; color: #60a5fa; } html.dark .help-banner-btn:hover { background: #3b82f6; color: #fff; } html.dark .app-footer { color: #64748b; background: #0f172a; border-top-color: rgba(255, 255, 255, 0.06); } /* Home page modals */ html.dark .modal-content, html.dark .modal-card { background: rgba(15, 23, 42, 0.95) !important; border-color: rgba(255, 255, 255, 0.1); } html.dark .modal .modal-card { background: rgba(15, 23, 42, 0.92) !important; } html.dark #unifiedTicketModal .modal-content { background: #0f172a !important; } html.dark .admin-modal { background: rgba(15, 23, 42, 0.95) !important; border-color: rgba(255, 255, 255, 0.1); } html.dark #loginModal .login-card { background: rgba(15, 23, 42, 0.85); border-color: rgba(255, 255, 255, 0.1); } html.dark #loginModal .login-left { background: linear-gradient(160deg, #1e1b3a 0%, #221d47 50%, #261e3d 100%); } html.dark #loginModal .login-title, html.dark .admin-title { color: #f1f5f9; } html.dark #loginModal .left-sub, html.dark .admin-text { color: #94a3b8; } html.dark #loginModal .left-feat { color: #cbd5e1; } html.dark #registerModal .modal-card { background: rgba(15, 23, 42, 0.92) !important; } html.dark .email-content, html.dark .sig-content, html.dark .sig-canvas-wrap { background: #1e293b !important; } html.dark #signatureModal .sig-canvas-wrap { background: #ffffff !important; border-color: #334155; } html.dark .email-input-group input { background: #1e293b; color: #e2e8f0; } html.dark .spinner-overlay, html.dark .generating-overlay { background: rgba(15, 23, 42, 0.9) !important; } html.dark .result { background: rgba(30, 41, 59, 0.85); border-color: rgba(255, 255, 255, 0.1); } html.dark .ump-title, html.dark .ump-view-tab-text h3, html.dark .ump-step-title, html.dark .ump-summary-value { color: #f1f5f9; } html.dark .ump-subtitle, html.dark .ump-view-tab-text p, html.dark .ump-field label, html.dark .ump-group-label, html.dark .ump-summary-label { color: #94a3b8; } html.dark .ump-section-header h3 { color: #818cf8; } html.dark .ump-field input, html.dark .ump-field select, html.dark .ump-field textarea, html.dark #unifiedSearchView .ump-search-box input, html.dark #ticketModal input[type="text"], html.dark .modal-card .input, html.dark .email-input-group input { background: #1e293b !important; border-color: #334155 !important; color: #e2e8f0 !important; } html.dark .ump-field input:read-only, html.dark .ump-field select:read-only { background: #1b2433 !important; color: #a5b4fc !important; } html.dark .ump-step-indicator { background: linear-gradient(135deg, #1e293b, #1b2433); } html.dark .ump-step-nav { background: #1e293b; border-top-color: #334155; } html.dark .ump-summary-block, html.dark .ump-info-box, html.dark .ump-confirm-check, html.dark .ump-upload-zone { background: #1b2433; } html.dark .ump-illustration { background: linear-gradient(160deg, #241f3f, #211d42 55%, #241c3f); } html.dark .ump-close-btn, html.dark .ump-nav-btn, html.dark .ump-action-btn, html.dark .ump-help-btn.secondary { background: #273449; color: #cbd5e1; border-color: #334155; } html.dark #unifiedSearchView .ump-search-card { background: linear-gradient(135deg, #1e293b, #1b2433); } html.dark #unifiedSearchView .ump-ticket-result { background: linear-gradient(135deg, #1e293b, #1b2433); } html.dark #unifiedSearchView .ump-dash-card { background: #1e293b; } html.dark #unifiedSearchView .ump-mini-card { background: #1b2433; } html.dark #unifiedSearchView .ump-empty-state { background: #1e293b; } html.dark #unifiedSearchView .ump-help-card { background: linear-gradient(135deg, #2a2440, #223047); } html.dark .toast { color: #fff; } /* --- IT Support Center: header + view tabs --- */ html.dark .ump-header { background: rgba(15, 23, 42, 0.92); border-bottom-color: rgba(255, 255, 255, 0.1); } html.dark .ump-logo { background: #1e293b; } html.dark .ump-view-tabs { background: rgba(15, 23, 42, 0.9); border-bottom-color: rgba(255, 255, 255, 0.1); } html.dark .ump-view-tab { background: #1e293b; border-color: #334155; } html.dark .ump-view-tab:hover { border-color: #6366f1; } html.dark .ump-view-tab.active { background: linear-gradient(#1b2433, #1e293b) padding-box, linear-gradient(135deg, #4F46E5, #7C3AED) border-box; } html.dark .ump-search-card, html.dark .ump-result-card { background: #1e293b; border-color: #334155; } html.dark .ump-search-box input { background: #1e293b; border-color: #334155; color: #e2e8f0; } html.dark .ump-result-value { color: #e2e8f0; } html.dark .ump-result-section-header { border-bottom-color: rgba(255, 255, 255, 0.1); } /* --- IT Support Center: search result (unifiedSearchView) --- */ html.dark #unifiedSearchView .ump-search-card, html.dark #unifiedSearchView .ump-ticket-result { background: linear-gradient(135deg, #1e293b, #1b2433) !important; border-color: #334155 !important; } html.dark #unifiedSearchView .ump-search-box .clear-input-btn { background: #273449 !important; color: #cbd5e1 !important; } html.dark #unifiedSearchView .ump-search-box .clear-input-btn:hover { background: rgba(239, 68, 68, 0.2) !important; color: #f87171 !important; } html.dark #unifiedSearchView .ump-result-hero { border-bottom-color: rgba(255, 255, 255, 0.1) !important; } html.dark #unifiedSearchView .ump-hero-ticket { color: #f1f5f9 !important; } html.dark #unifiedSearchView .ump-hero-resolved { color: #94a3b8 !important; } html.dark #unifiedSearchView .ump-action-btn { background: #273449 !important; border-color: #334155 !important; color: #cbd5e1 !important; } html.dark #unifiedSearchView .ump-action-btn:hover { border-color: #818cf8 !important; color: #a5b4fc !important; } html.dark #unifiedSearchView .ump-more-dropdown { background: #1b2433 !important; border-color: #334155 !important; } html.dark #unifiedSearchView .ump-more-dropdown button { color: #cbd5e1 !important; } html.dark #unifiedSearchView .ump-more-dropdown button:hover { background: #273449 !important; color: #a5b4fc !important; } html.dark #unifiedSearchView .ump-tp-step:not(.completed):not(.failed):not(.active) .ump-tp-dot { background: #1e293b !important; border-color: #334155 !important; color: #94a3b8 !important; } html.dark #unifiedSearchView .ump-tp-step.active .ump-tp-dot { background: rgba(124, 58, 237, 0.25) !important; border-color: #a78bfa !important; color: #a78bfa !important; } html.dark #unifiedSearchView .ump-tp-step.completed .ump-tp-name, html.dark #unifiedSearchView .ump-tp-step.active .ump-tp-name { color: #e2e8f0 !important; } html.dark #unifiedSearchView .ump-tp-line { background: #334155 !important; } html.dark #unifiedSearchView .ump-dash-card { background: #1e293b !important; border-color: #334155 !important; } html.dark #unifiedSearchView .ump-dash-card-title { color: #f1f5f9 !important; } html.dark #unifiedSearchView .ump-dash-card-title i { background: linear-gradient(135deg, #273449, #2a2440) !important; color: #a5b4fc !important; } html.dark #unifiedSearchView .ump-info-item .ump-info-value { color: #e2e8f0 !important; } html.dark #unifiedSearchView .ump-mini-card { background: #1b2433 !important; border-color: #334155 !important; } html.dark #unifiedSearchView .ump-mini-card:hover { border-color: #6366f1 !important; } html.dark #unifiedSearchView .ump-mini-card .ump-mini-value { color: #e2e8f0 !important; } html.dark #unifiedSearchView .ump-gallery-thumb { background: #273449 !important; } html.dark #unifiedSearchView .ump-history-dot { background: rgba(124, 58, 237, 0.2) !important; border-color: #6d28d9 !important; } html.dark #unifiedSearchView .ump-history-item::before { background: linear-gradient(180deg, #4c1d95, #334155) !important; } html.dark #unifiedSearchView .ump-history-title { color: #f1f5f9 !important; } html.dark #unifiedSearchView .ump-satisfaction-card h4 { color: #f1f5f9 !important; } html.dark #unifiedSearchView #satFeedback { background: #1b2433 !important; border-color: #334155 !important; color: #e2e8f0 !important; } html.dark #unifiedSearchView #satFeedback:focus { border-color: #6366f1 !important; background: #1e293b !important; } html.dark #unifiedSearchView .ump-help-card { background: linear-gradient(135deg, #2a2440, #223047) !important; border-color: #4c1d95 !important; } html.dark #unifiedSearchView .ump-help-left h4 { color: #f1f5f9 !important; } html.dark #unifiedSearchView .ump-help-left p { color: #94a3b8 !important; } html.dark #unifiedSearchView .ump-help-btn.secondary { background: #273449 !important; border-color: #4c1d95 !important; color: #a5b4fc !important; } html.dark #unifiedSearchView .ump-help-btn.secondary:hover { background: #334155 !important; } html.dark #unifiedSearchView .ump-close-btn { background: #273449 !important; border-color: #334155 !important; color: #cbd5e1 !important; } html.dark #unifiedSearchView .ump-close-btn:hover { border-color: #818cf8 !important; color: #a5b4fc !important; } html.dark #unifiedSearchView .ump-empty-state { border-color: #334155 !important; } html.dark #unifiedSearchView .ump-status-badge.completed { background: rgba(5, 150, 105, 0.18) !important; color: #34d399 !important; border-color: rgba(34, 197, 94, 0.35) !important; } html.dark #unifiedSearchView .ump-status-badge.working { background: rgba(234, 88, 12, 0.18) !important; color: #fb923c !important; border-color: rgba(251, 146, 60, 0.35) !important; } html.dark #unifiedSearchView .ump-status-badge.assigned { background: rgba(37, 99, 235, 0.18) !important; color: #60a5fa !important; border-color: rgba(96, 165, 250, 0.35) !important; } html.dark #unifiedSearchView .ump-status-badge.cancelled, html.dark #unifiedSearchView .ump-status-badge.failed { background: rgba(220, 38, 38, 0.18) !important; color: #f87171 !important; border-color: rgba(248, 113, 113, 0.35) !important; } html.dark #unifiedSearchView .ump-status-badge.pending { background: rgba(100, 116, 139, 0.18) !important; color: #94a3b8 !important; border-color: rgba(148, 163, 184, 0.35) !important; } /* --- IT Support Center: submit wizard (unifiedTicketModal) --- */ html.dark #unifiedTicketModal .modal-content::-webkit-scrollbar-thumb { background: #334155 !important; } html.dark #unifiedTicketModal .ump-step-indicator { background: linear-gradient(135deg, #1e293b, #1b2433) !important; border-color: #334155 !important; } html.dark #unifiedTicketModal .ump-step-item:not(.active):not(.completed) .ump-step-circle { background: #1e293b !important; border-color: #334155 !important; color: #94a3b8 !important; } html.dark #unifiedTicketModal .ump-step-line { background: #334155 !important; } html.dark #unifiedTicketModal .ump-step-title { color: #f1f5f9 !important; } html.dark #unifiedTicketModal .ump-field label, html.dark #unifiedTicketModal .ump-group-label { color: #94a3b8 !important; } html.dark #unifiedTicketModal .ump-input-wrap label { background: #1e293b !important; } html.dark #unifiedTicketModal .ump-input-wrap .input-icon { color: #94a3b8 !important; } html.dark #unifiedTicketModal .ump-info-box { background: #1e293b !important; border-color: #334155 !important; color: #93c5fd !important; } html.dark #unifiedTicketModal .ump-info-box i { color: #60a5fa !important; } html.dark #unifiedTicketModal .ump-illustration { background: linear-gradient(160deg, #241f3f, #211d42 55%, #241c3f) !important; border-color: #334155 !important; } html.dark #unifiedTicketModal .ump-illustration .ump-ill-title { color: #f1f5f9 !important; } html.dark #unifiedTicketModal .ump-illustration .ump-ill-desc { color: #94a3b8 !important; } html.dark #unifiedTicketModal .ump-illustration .ump-ill-tags span { background: #273449 !important; border-color: #334155 !important; color: #a5b4fc !important; } html.dark #unifiedTicketModal .ump-illustration-success { background: linear-gradient(160deg, #173024, #15281f) !important; } html.dark #unifiedTicketModal .ump-upload-zone { background: #1b2433 !important; border-color: #334155 !important; } html.dark #unifiedTicketModal .ump-upload-zone.dragover { border-color: #6366f1 !important; background: #273449 !important; } html.dark #unifiedTicketModal .ump-upload-zone .upload-btn { background: #273449 !important; border-color: #6366f1 !important; color: #a5b4fc !important; } html.dark #unifiedTicketModal .ump-upload-zone .upload-btn:hover { background: #4f46e5 !important; color: #fff !important; } html.dark #unifiedTicketModal .ump-upload-zone .upload-text { color: #94a3b8 !important; } html.dark #unifiedTicketModal .ump-upload-zone .photo-preview { background: #1e293b !important; border-color: #334155 !important; } html.dark #unifiedTicketModal .ump-result-card { background: #1e293b !important; border-color: #334155 !important; } html.dark #unifiedTicketModal .ump-step-nav { background: #1e293b !important; border-top-color: #334155 !important; } html.dark #unifiedTicketModal .ump-nav-btn.ump-prev-btn { background: #273449 !important; border-color: #334155 !important; color: #cbd5e1 !important; } html.dark #unifiedTicketModal .ump-nav-btn.ump-prev-btn:hover:not(:disabled) { border-color: #6366f1 !important; color: #a5b4fc !important; background: #334155 !important; } html.dark #unifiedTicketModal .ump-summary-block { background: #1b2433 !important; border-color: #334155 !important; } html.dark #unifiedTicketModal .ump-summary-row { border-bottom-color: rgba(255, 255, 255, 0.08) !important; } html.dark #unifiedTicketModal .ump-summary-label { color: #94a3b8 !important; } html.dark #unifiedTicketModal .ump-summary-value { color: #e2e8f0 !important; } html.dark #unifiedTicketModal .ump-attach-preview img { border-color: #334155 !important; } html.dark #unifiedTicketModal .ump-confirm-check { background: rgba(79, 70, 229, 0.14) !important; border-color: #4c1d95 !important; } html.dark #unifiedTicketModal .ump-confirm-check label { color: #a5b4fc !important; } /* IT Support Center (Home page) - Submit New Ticket wizard (dark) */ html.dark #unifiedTicketModal .ump-side-title, html.dark #unifiedTicketModal .ump-step-label, html.dark #unifiedTicketModal .ump-step-num, html.dark #unifiedTicketModal .ump-section-head, html.dark #unifiedTicketModal .ump-summary-block-title, html.dark #unifiedTicketModal .ump-emp-title, html.dark #unifiedTicketModal .ump-help-title { color: #f1f5f9 !important; } html.dark #unifiedTicketModal .ump-side-sub, html.dark #unifiedTicketModal .ump-step-subtitle, html.dark #unifiedTicketModal .ump-step-desc, html.dark #unifiedTicketModal .ump-emp-desc, html.dark #unifiedTicketModal .ump-help-desc { color: #94a3b8 !important; } html.dark #unifiedTicketModal .ump-wizard-sidebar { border-color: #334155 !important; } html.dark #unifiedTicketModal .ump-help-card { background: rgba(30, 41, 59, 0.9) !important; border-color: #334155 !important; } html.dark #unifiedTicketModal .ump-employee-card { background: linear-gradient(135deg, #1e293b 0%, #1b2433 55%, #273449 100%) !important; border-color: #334155 !important; } html.dark #unifiedTicketModal .ump-pill { background: #273449 !important; border-color: #334155 !important; color: #cbd5e1 !important; } html.dark #unifiedTicketModal .ump-progress { background: #273449 !important; } html.dark #unifiedTicketModal .ump-input-wrap.is-select label { background: #1e293b !important; } html.dark #unifiedTicketModal .ump-char-counter { color: #94a3b8 !important; } html.dark #unifiedTicketModal .ump-check-box { background: #1e293b !important; border-color: #334155 !important; } html.dark #unifiedTicketModal .ump-confirm-check .ump-check-box.error { background: rgba(239, 68, 68, 0.15) !important; border-color: #ef4444 !important; } /* ============================================================ About Us.html ============================================================ */ html.dark .container { background: rgba(15, 23, 42, 0.82); border-color: rgba(255, 255, 255, 0.12); } html.dark .container:hover { box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); } html.dark .header { border-bottom-color: rgba(255, 255, 255, 0.1); } html.dark .mv-card { background: rgba(30, 41, 59, 0.7); border-color: rgba(129, 140, 248, 0.2); } html.dark .mv-card:hover { border-color: rgba(129, 140, 248, 0.4); box-shadow: 0 18px 40px rgba(79, 70, 229, 0.25); } html.dark .footer-text { background: linear-gradient(135deg, rgba(79, 70, 229, 0.14), rgba(129, 140, 248, 0.14)); border-color: rgba(129, 140, 248, 0.2); } html.dark li { background: rgba(79, 70, 229, 0.08); border-color: rgba(79, 70, 229, 0.15); } html.dark .deco-1, html.dark .deco-2, html.dark .deco-3, html.dark .deco-4 { opacity: 0.5; } /* ============================================================ announce.html ============================================================ */ html.dark .announcement-form, html.dark .announcements-board { background: rgba(30, 41, 59, 0.75); border-color: rgba(255, 255, 255, 0.1); } html.dark .announcement-item { background: #1e293b; } html.dark .announcement-title, html.dark header h1 { color: #f1f5f9; } html.dark .announcement-date, html.dark .empty-state { color: #94a3b8; } html.dark .form-group label { color: #e2e8f0; } html.dark .form-control { background: #1e293b; border-color: #334155; color: #e2e8f0; } html.dark .btn-secondary { background: #273449; color: #e2e8f0; border-color: #334155; } html.dark .btn-secondary:hover { background: #334155; } html.dark .delete-btn { color: #94a3b8; } html.dark .media-preview, html.dark .announcement-media img, html.dark .announcement-media video { border-color: #334155; } html.dark .spinner-overlay { background: rgba(15, 23, 42, 0.8); } /* ============================================================ chat.html ============================================================ */ html.dark .chat-container { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); } html.dark .msg.received .msg-bubble { background: #273449; color: #e2e8f0; } html.dark .avatar-wrap img { background: #273449; border-color: #334155; } html.dark #message { background: #1e293b; border-color: #334155; color: #e2e8f0; } html.dark #message::placeholder { color: #64748b; } html.dark #input-area, html.dark #typing-indicator, html.dark #image-preview-bar { border-top-color: #334155; } html.dark .preview-info { color: #e2e8f0; } html.dark #status { border-top-color: #334155 !important; } html.dark #toggle-debug { background: #273449; border-color: #334155; color: #cbd5e1; } html.dark #debug-log { background: #0f172a !important; color: #cbd5e1 !important; border-top-color: #334155 !important; } /* ============================================================ RegionBranchManagement.html ============================================================ */ html.dark .container { background: rgba(15, 23, 42, 0.7); border-color: rgba(255, 255, 255, 0.12); } html.dark .header { background: rgba(30, 41, 59, 0.7); border-color: rgba(255, 255, 255, 0.1); } html.dark .user-section { background: rgba(30, 41, 59, 0.6); border-color: rgba(255, 255, 255, 0.12); } html.dark .card { background: rgba(30, 41, 59, 0.75); border-color: rgba(255, 255, 255, 0.1); } html.dark .card:hover { background: rgba(30, 41, 59, 0.9); } html.dark #current-data-view { background: rgba(30, 41, 59, 0.6); border-color: rgba(255, 255, 255, 0.1); } html.dark #current-data-view > h2 { color: #e2e8f0; } html.dark .region-column { background: rgba(30, 41, 59, 0.7); border-color: rgba(255, 255, 255, 0.12); } html.dark .region-column:hover { background: rgba(30, 41, 59, 0.85); } html.dark .region-count { background: rgba(99, 102, 241, 0.2); } html.dark .form-field input, html.dark .form-field select { background: rgba(30, 41, 59, 0.8); color: #e2e8f0; border-color: rgba(255, 255, 255, 0.15); } html.dark .form-field input:focus, html.dark .form-field select:focus { background: rgba(30, 41, 59, 0.95); } html.dark .btn.secondary { background: rgba(255, 255, 255, 0.08); color: #e2e8f0; } html.dark .btn.secondary:hover { background: rgba(255, 255, 255, 0.16); } html.dark .modal-container { background: rgba(15, 23, 42, 0.9); border-color: rgba(255, 255, 255, 0.1); } html.dark .modal-header { border-bottom-color: rgba(255, 255, 255, 0.1); } html.dark .modal-body p, html.dark .delete-notification p { color: #cbd5e1; } html.dark .delete-notification { background: rgba(30, 41, 59, 0.95); border-color: rgba(255, 255, 255, 0.12); } html.dark .user-subtitle, html.dark .form-field label, html.dark .modal-close-btn, html.dark .empty-state { color: #94a3b8; } html.dark .user-avatar img { border-color: #334155; } /* ---------- Dark-mode toggle button (Main.html) ---------- */ .dark-toggle-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.2); color: #f59e0b; font-size: 15px; cursor: pointer; transition: all 0.25s ease; flex-shrink: 0; line-height: 1; } .dark-toggle-btn:hover { background: rgba(255, 255, 255, 0.4); transform: scale(1.08); } .dark-toggle-btn:active { transform: scale(0.92); } html.dark .dark-toggle-btn { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.25); color: #fbbf24; } html.dark .dark-toggle-btn:hover { background: rgba(255, 255, 255, 0.2); } /* ============================================================ GENERIC DARK-MODE TEXT READABILITY FALLBACK Safety net for any text that doesn't already have its own dark-mode color. Wrapped in :where() so specificity is zero: it only kicks in for elements with no other styling, so it never fights existing component or accent colors. ============================================================ */ :where(html.dark) body { color: #e2e8f0; } :where(html.dark) :where(h1, h2, h3, h4, h5, h6) { color: #f1f5f9; } :where(html.dark) :where(p, span:not(.fa, .fas), li, label, th, td, small, figcaption, legend, summary, dt, dd, blockquote) { color: inherit; } :where(html.dark) :where(button, .btn, .btn-primary, .btn-secondary) { color: inherit; } :where(html.dark) :where(.modal, .modal-content, .modal-card, .modal-container, .modal-box, .modal-overlay, .modal-body, .modal-header, .modal-footer, .modal-inner, .dialog, .popup) { color: #e2e8f0; } :where(html.dark) :where(.modal h1, .modal h2, .modal h3, .modal h4, .modal-content h1, .modal-content h2, .modal-content h3, .modal-content h4, .modal-card h1, .modal-card h2, .modal-card h3, .modal-card h4) { color: #f1f5f9; } :where(html.dark) :where(.toast, .empty-state, .empty, .no-data, .no-results) { color: #cbd5e1; } :where(html.dark) hr { border-color: #334155; } /* ============================================================ Ticket Home Page — new layout (sidebar + toolbar + cards) ============================================================ */ html.dark .app-sidebar { background: url("back.jpg") no-repeat center center; background-size: cover; border-right-color: rgba(255, 255, 255, 0.08); position: relative; } html.dark .app-sidebar::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 0; pointer-events: none; } html.dark .app-sidebar > * { position: relative; z-index: 1; } html.dark .sidebar-brand { border-bottom-color: rgba(255, 255, 255, 0.08); } html.dark .sidebar-toggle-btn:hover { background: rgba(255, 255, 255, 0.08); color: #e2e8f0; } html.dark .app-toolbar { background: #1e293b; border-bottom-color: rgba(255, 255, 255, 0.08); } html.dark .toolbar-btn { background: #1e293b; border-color: #334155; color: #e2e8f0; } html.dark .toolbar-btn:hover { background: #334155; border-color: #475569; color: #f1f5f9; } html.dark .welcome-banner { background: #1e293b; border-color: #334155; } html.dark .welcome-text h1 { color: #f1f5f9; } html.dark .action-card { background: #1e293b; border-color: #334155; } html.dark .action-card:hover { border-color: rgba(129, 140, 248, 0.4); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); } html.dark .action-arrow { color: #64748b; } html.dark .action-card:hover .action-arrow { color: #a5b4fc; } /* === NEW LAYOUT DARK MODE === */ html.dark .sidebar-divider { background: rgba(255, 255, 255, 0.08); } html.dark .search-box { background: #1e293b; border-color: #334155; } html.dark .search-box:focus-within { border-color: #7C3AED; background: #1e293b; } html.dark .search-input { color: #e2e8f0; } html.dark .search-icon { color: #64748b; } html.dark .welcome-banner { background: linear-gradient(135deg, #1e1b2e 0%, #1e1b3a 50%, #1e1b4a 100%); border-color: #334155; } html.dark .welcome-text p { color: #94a3b8; } html.dark .action-card-content h3 { color: #f1f5f9; } html.dark .action-card-content p { color: #94a3b8; } html.dark .help-card { background: #1e293b; border-color: #334155; } html.dark .help-content h3 { color: #f1f5f9; } html.dark .help-content p { color: #94a3b8; } html.dark .help-btn { border-color: #7C3AED; color: #a78bfa; } html.dark .help-btn:hover { background: #7C3AED; color: #fff; } html.dark .sidebar-overlay { background: rgba(0, 0, 0, 0.7); } html.dark .datetime-display { background: #1e293b; border-color: #334155; color: #e2e8f0; } html.dark .datetime-display i { color: #a78bfa; } html.dark .card-meta { color: #94a3b8; } html.dark .card-meta i { color: #a78bfa; } html.dark .legend-item { color: #94a3b8; } html.dark .topic-tag { background: #052e16; color: #4ade80; border-color: #166534; } html.dark .section-title { color: #f1f5f9; } html.dark .section-subtitle { color: #94a3b8; } html.dark .quick-help-card { background: #1e293b; border-color: #334155; color: #e2e8f0; } html.dark .quick-help-card:hover { background: #2d1b69; border-color: #7C3AED; color: #a78bfa; } html.dark .quick-help-card i { color: #a78bfa; } /* ============================================================ T.I.M.S. Enterprise — Dark Mode ============================================================ */ html.dark { color-scheme: dark; } html.dark body { background: #111827; } /* Header */ html.dark .app-header { background: #1f2937; border-color: #374151; } html.dark .header-name { color: #a78bfa; } html.dark .header-sep { background: #374151; } html.dark .header-subtitle, html.dark .header-corp { color: #9ca3af; } html.dark .header-nav { color: #9ca3af; } html.dark .header-nav.active { background: rgba(139, 92, 246, 0.12); color: #a78bfa; } html.dark .header-btn { background: #1f2937; border-color: #374151; color: #9ca3af; } html.dark .header-btn:hover { background: #374151; border-color: #7c3aed; color: #a78bfa; } html.dark .menu-toggle { background: #1f2937; border-color: #374151; color: #9ca3af; } /* Sidebar */ html.dark .app-sidebar { background: url("back.jpg") no-repeat center center; background-size: cover; border-right-color: rgba(255, 255, 255, 0.08); position: relative; } html.dark .app-sidebar::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 0; pointer-events: none; } html.dark .app-sidebar > * { position: relative; z-index: 1; } html.dark .nav-label { color: #6b7280; } html.dark .nav-item { color: #9ca3af; } html.dark .nav-item:hover { background: #374151; color: #e5e7eb; } html.dark .nav-item.active { background: rgba(139, 92, 246, 0.12); color: #a78bfa; } html.dark .nav-divider { background: #374151; } html.dark .sidebar-close { background: #374151; color: #9ca3af; } /* Main Content */ html.dark .app-main { background: url('back.jpg') no-repeat center center; background-size: cover; position: relative; } html.dark .app-main::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.4); z-index: 0; pointer-events: none; } /* Welcome */ html.dark .welcome-section { background: #1f2937; border-color: #374151; } html.dark .welcome-text h1 { color: #f3f4f6; } html.dark .welcome-text .hl { color: #a78bfa; } html.dark .welcome-sub { color: #d1d5db; } html.dark .welcome-desc { color: #9ca3af; } html.dark .illu-graphic { background: rgba(139, 92, 246, 0.1); } html.dark .illu-icon-main { color: #a78bfa; } /* Action Cards */ html.dark .action-card { background: #1f2937; border-color: #374151; } html.dark .action-card:hover { border-color: #7c3aed; } html.dark .action-body h3 { color: #f3f4f6; } html.dark .action-body p { color: #9ca3af; } html.dark .action-btn { color: #fff; } /* Section Title */ html.dark .section-title { color: #f3f4f6; } /* Quick Access */ html.dark .quick-card { background: #1f2937; border-color: #374151; } html.dark .quick-card:hover { border-color: #7c3aed; } html.dark .quick-info h4 { color: #f3f4f6; } html.dark .quick-info p { color: #9ca3af; } html.dark .quick-arrow { color: #6b7280; } html.dark .quick-card:hover .quick-arrow { color: #a78bfa; } /* Support */ html.dark .support-banner { background: #1f2937; border-color: #374151; } html.dark .support-icon { background: rgba(139, 92, 246, 0.1); color: #a78bfa; } html.dark .support-text h3 { color: #f3f4f6; } html.dark .support-text p { color: #9ca3af; } html.dark .support-btn { background: #1f2937; border-color: #374151; color: #9ca3af; } html.dark .support-btn:hover { border-color: #7c3aed; color: #a78bfa; background: rgba(139, 92, 246, 0.1); } /* Footer */ html.dark .app-footer { background: #1f2937; border-color: #374151; } html.dark .app-footer span { color: #6b7280; } html.dark .footer-version { color: #a78bfa !important; } /* Header New Elements */ html.dark .header-status { background: rgba(34, 197, 94, 0.1); border-color: rgba(34, 197, 94, 0.2); } html.dark .header-status-dot { background: #22C55E; } html.dark .header-status-text { color: #22C55E; } html.dark .notification-badge { border-color: #0f172a; } html.dark .header-user { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.08); } html.dark .header-username { color: rgba(255, 255, 255, 0.9); } html.dark .header-dropdown-icon { color: rgba(255, 255, 255, 0.5); } /* Sidebar Footer */ html.dark .sidebar-footer { border-top-color: rgba(255, 255, 255, 0.1); } html.dark .sidebar-company-icon { background: linear-gradient(135deg, #3b82f6, #7c3aed); } html.dark .sidebar-company-name { color: #f1f5f9; } html.dark .sidebar-company-sub { color: #94a3b8; } html.dark .sidebar-version { color: #94a3b8; } html.dark .version-badge { background: linear-gradient(135deg, #ef4444, #dc2626); color: #fff; } /* Hero Section */ html.dark .hero-section { background: linear-gradient(135deg, #1a1f3a, #1e2440, #221e3a); border-color: #374151; } html.dark .hero-pill { background: rgba(30, 41, 59, 0.8); border-color: rgba(37, 99, 235, 0.2); color: #60a5fa; } html.dark .hero-title { color: #f3f4f6; } html.dark .hero-highlight { color: #a78bfa; } html.dark .hero-subtitle { color: #9ca3af; } html.dark .hero-badge { background: rgba(30, 41, 59, 0.8); border-color: #374151; color: #d1d5db; } html.dark .hero-badge i { color: #60a5fa; } /* Asset Inventory Panel */ html.dark .asset-panel { background: #1f2937; border-color: #374151; } html.dark .asset-panel-title { color: #f3f4f6; } html.dark .asset-panel-link { color: #6b7280; } html.dark .asset-panel-link:hover { color: #60a5fa; } html.dark .asset-stat-value { color: #f3f4f6; } html.dark .asset-stat-label { color: #9ca3af; } html.dark .asset-type-title { color: #f3f4f6; } html.dark .asset-type-name { color: #d1d5db; } html.dark .asset-type-count { color: #f3f4f6; } html.dark .asset-type-bar { background: #374151; } html.dark .asset-type-pct { color: #9ca3af; } /* Explore Cards */ html.dark .explore-section .explore-title { color: #60a5fa; } html.dark .explore-card { background: #1f2937; border-color: #374151; } html.dark .explore-card:hover { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3); } html.dark .explore-card h3 { color: #f3f4f6; } html.dark .explore-card p { color: #9ca3af; } html.dark .explore-list li { color: #d1d5db; } }