/* ───────────────────────────────────────────────────────────────────────────── GlobalTech — Dark Mode Activated by adding class "dark" to element. Adapted from menu module's production dark mode implementation. ───────────────────────────────────────────────────────────────────────────── */ html.dark { --gt-bg: #121212; --gt-surface: #1e1e1e; --gt-border: #333333; --gt-text: #e8eaed; --gt-text-muted: #9aa0a6; --gt-sidebar-bg: #111111; --gt-sidebar-hover: #252525; --gt-sidebar-text: #bdc1c6; } html.dark body { background: var(--gt-bg); color: var(--gt-text); } /* Cards */ html.dark .gt-card, html.dark .module-card, html.dark .stat-card, html.dark .gt-table { background: var(--gt-surface); border-color: var(--gt-border); } /* Topbar */ html.dark .gt-topbar { background: #1e1e1e; border-bottom-color: var(--gt-border); } /* Tables */ html.dark .gt-table thead th { background: #252525; } html.dark table.table { color: var(--gt-text); } html.dark table.table-striped > tbody > tr:nth-of-type(odd) > * { background: rgba(255,255,255,.03); } html.dark table.table-hover > tbody > tr:hover > * { background: rgba(255,255,255,.05); } html.dark .table-bordered { border-color: var(--gt-border); } /* Forms */ html.dark .form-control, html.dark .form-select { background: #252525; border-color: var(--gt-border); color: var(--gt-text); } html.dark .form-control:focus, html.dark .form-select:focus { background: #2d2d2d; } html.dark .form-control::placeholder { color: #666; } /* Alerts */ html.dark .gt-alert-success { background: #1a3326; color: #81c784; } html.dark .gt-alert-error { background: #3b1a18; color: #e57373; } html.dark .gt-alert-warning { background: #3b2f00; color: #ffcc80; } html.dark .gt-alert-info { background: #003d52; color: #80deea; } /* Bootstrap utility overrides */ html.dark .card { background: var(--gt-surface); border-color: var(--gt-border); color: var(--gt-text); } html.dark .card-header, html.dark .card-footer { background: #252525; border-color: var(--gt-border); } html.dark .list-group-item { background: var(--gt-surface); border-color: var(--gt-border); color: var(--gt-text); } html.dark .modal-content { background: var(--gt-surface); border-color: var(--gt-border); } html.dark .modal-header, html.dark .modal-footer { border-color: var(--gt-border); } html.dark .dropdown-menu { background: #252525; border-color: var(--gt-border); } html.dark .dropdown-item { color: var(--gt-text); } html.dark .dropdown-item:hover { background: #333; } html.dark .btn-outline-secondary { color: var(--gt-text-muted); border-color: var(--gt-border); } html.dark .btn-outline-secondary:hover { background: #333; color: var(--gt-text); } html.dark .text-muted { color: var(--gt-text-muted) !important; } html.dark .border { border-color: var(--gt-border) !important; } html.dark .bg-white, html.dark .bg-light { background-color: var(--gt-surface) !important; } /* Section title */ html.dark .section-title { color: #666; } /* Scrollbar */ html.dark ::-webkit-scrollbar { width: 6px; height: 6px; } html.dark ::-webkit-scrollbar-track { background: #1a1a1a; } html.dark ::-webkit-scrollbar-thumb { background: #444; border-radius: 3px; } html.dark ::-webkit-scrollbar-thumb:hover { background: #555; }