/* ══════════════════════════════════════════════════════════════════════════ GLOBAL DARK THEME — html[data-theme="dark"] --------------------------------------------------------------------------- The app toggles dark mode by setting data-theme="dark" on (see ThemeService). Individual redesigned screens ship their own :host-context([data-theme="dark"]) blocks that re-map their local --tp-* variables. This file is the FOUNDATION beneath those: it themes the parts no single component owns — • the AdminLTE shell (.content-wrapper, .main-footer) • raw Bootstrap primitives used across many screens (.card, .table, .form-control, .modal, .dropdown, .list-group, .breadcrumb, .nav-tabs, pagination, buttons, badges) • the utility classes defined in app.css (mobile card rows, help banner, custom checkbox) • vendor widgets (DataTables, ng-bootstrap) Loaded LAST in index.html (after app.css and adminlte.min.css) so these overrides win the cascade for global structures. Angular component-scoped styles carry attribute specificity and still win inside their own screen, which is intended — a screen with its own dark rules keeps them; everything else falls back to this layer. Palette (kept in sync with the components' own dark blocks): page #14161c surface/card #1c1f27 elevated #232733 border #2a2e39 table head #1f232d text #d6d9e2 muted #8b90a0 strong #f0f2f7 accent #5b87ff ══════════════════════════════════════════════════════════════════════════ */ html[data-theme="dark"] { --rg-bg: #14161c; --rg-surface: #1c1f27; --rg-elevated: #232733; --rg-border: #2a2e39; --rg-thead: #1f232d; --rg-text: #d6d9e2; --rg-muted: #8b90a0; --rg-strong: #f0f2f7; --rg-accent: #5b87ff; --rg-shadow: 0 1px 3px rgba(0,0,0,.4); } /* ── App shell ─────────────────────────────────────────────────────────── */ html[data-theme="dark"] body { background-color: var(--rg-bg); } html[data-theme="dark"] .content-wrapper { background-color: var(--rg-bg) !important; color: var(--rg-text); } /* Login/register screens paint a photographic background on ; in dark mode dim it by layering a translucent wash over the same image. Done as a background layer (not an overlay element) so nothing ever paints above the app content — on authenticated screens the opaque .content-wrapper covers this anyway, so it's only visible on the auth split-screen. */ html[data-theme="dark"] .app-body-background-image { background-image: linear-gradient(rgba(10, 12, 18, .62), rgba(10, 12, 18, .62)), url('/assets/img/login_background_image.jpg'); } html[data-theme="dark"] .main-footer { background-color: var(--rg-surface); border-top-color: var(--rg-border); color: var(--rg-muted); } html[data-theme="dark"] .main-footer a { color: var(--rg-accent); } /* Generic text-color helpers used ad hoc across screens. */ html[data-theme="dark"] .text-dark { color: var(--rg-strong) !important; } html[data-theme="dark"] .text-muted, html[data-theme="dark"] .text-secondary { color: var(--rg-muted) !important; } html[data-theme="dark"] .text-body { color: var(--rg-text) !important; } html[data-theme="dark"] a:not(.btn):not(.nav-link):not(.tp-btn) { color: #8fb0ff; } html[data-theme="dark"] hr { border-top-color: var(--rg-border); } html[data-theme="dark"] .border, html[data-theme="dark"] .border-top, html[data-theme="dark"] .border-bottom, html[data-theme="dark"] .border-left, html[data-theme="dark"] .border-right { border-color: var(--rg-border) !important; } /* ── Bootstrap / AdminLTE cards ────────────────────────────────────────── */ html[data-theme="dark"] .card { background-color: var(--rg-surface); border-color: var(--rg-border); color: var(--rg-text); box-shadow: var(--rg-shadow); } html[data-theme="dark"] .card-header, html[data-theme="dark"] .card-footer { background-color: var(--rg-surface); border-color: var(--rg-border); color: var(--rg-text); } html[data-theme="dark"] .card-title { color: var(--rg-strong); } /* AdminLTE stat widgets */ html[data-theme="dark"] .info-box { background-color: var(--rg-surface); color: var(--rg-text); box-shadow: var(--rg-shadow); } html[data-theme="dark"] .info-box .info-box-text { color: var(--rg-muted); } html[data-theme="dark"] .info-box .info-box-number { color: var(--rg-strong); } /* ── Tables ────────────────────────────────────────────────────────────── */ html[data-theme="dark"] .table { color: var(--rg-text); } html[data-theme="dark"] .table th, html[data-theme="dark"] .table td { border-color: var(--rg-border); } html[data-theme="dark"] .table thead th { background-color: var(--rg-thead); color: var(--rg-strong); border-color: var(--rg-border); } html[data-theme="dark"] .table-bordered, html[data-theme="dark"] .table-bordered th, html[data-theme="dark"] .table-bordered td { border-color: var(--rg-border); } html[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255,255,255,.025); } html[data-theme="dark"] .table-hover tbody tr:hover { background-color: var(--rg-elevated); color: var(--rg-strong); } /* ── Forms ─────────────────────────────────────────────────────────────── */ html[data-theme="dark"] .form-control, html[data-theme="dark"] .custom-select, html[data-theme="dark"] textarea.form-control, html[data-theme="dark"] select.form-control { background-color: var(--rg-elevated); border-color: var(--rg-border); color: var(--rg-text); } html[data-theme="dark"] .form-control:focus, html[data-theme="dark"] .custom-select:focus { background-color: var(--rg-elevated); border-color: var(--rg-accent); color: var(--rg-text); box-shadow: 0 0 0 .2rem rgba(91,135,255,.25); } html[data-theme="dark"] .form-control::placeholder { color: var(--rg-muted); } html[data-theme="dark"] .form-control:disabled, html[data-theme="dark"] .form-control[readonly] { background-color: #191c24; color: var(--rg-muted); } html[data-theme="dark"] .input-group-text { background-color: var(--rg-surface); border-color: var(--rg-border); color: var(--rg-muted); } html[data-theme="dark"] label, html[data-theme="dark"] .col-form-label { color: var(--rg-text); } html[data-theme="dark"] .form-text, html[data-theme="dark"] small.text-muted { color: var(--rg-muted) !important; } html[data-theme="dark"] .custom-control-label { color: var(--rg-text); } /* ── Buttons (neutral variants only — coloured buttons stay as-is) ─────── */ html[data-theme="dark"] .btn-light, html[data-theme="dark"] .btn-default { background-color: var(--rg-elevated); border-color: var(--rg-border); color: var(--rg-text); } html[data-theme="dark"] .btn-light:hover, html[data-theme="dark"] .btn-default:hover { background-color: #2c313f; color: var(--rg-strong); } html[data-theme="dark"] .btn-outline-secondary { color: var(--rg-text); border-color: var(--rg-border); } html[data-theme="dark"] .btn-outline-secondary:hover { background-color: var(--rg-elevated); color: var(--rg-strong); } /* ── Modals ────────────────────────────────────────────────────────────── */ html[data-theme="dark"] .modal-content { background-color: var(--rg-surface); border-color: var(--rg-border); color: var(--rg-text); } html[data-theme="dark"] .modal-header, html[data-theme="dark"] .modal-footer { border-color: var(--rg-border); } html[data-theme="dark"] .modal-title { color: var(--rg-strong); } html[data-theme="dark"] .close { color: var(--rg-text); text-shadow: none; } html[data-theme="dark"] .close:hover { color: var(--rg-strong); } /* ── Dropdowns ─────────────────────────────────────────────────────────── */ html[data-theme="dark"] .dropdown-menu { background-color: var(--rg-surface); border-color: var(--rg-border); box-shadow: 0 8px 24px rgba(0,0,0,.4); } html[data-theme="dark"] .dropdown-item { color: var(--rg-text); } html[data-theme="dark"] .dropdown-item:hover, html[data-theme="dark"] .dropdown-item:focus { background-color: var(--rg-elevated); color: var(--rg-strong); } html[data-theme="dark"] .dropdown-divider { border-color: var(--rg-border); } html[data-theme="dark"] .dropdown-header { color: var(--rg-muted); } /* ── List groups ───────────────────────────────────────────────────────── */ html[data-theme="dark"] .list-group-item { background-color: var(--rg-surface); border-color: var(--rg-border); color: var(--rg-text); } html[data-theme="dark"] .list-group-item-action:hover { background-color: var(--rg-elevated); color: var(--rg-strong); } /* ── Breadcrumbs / nav-tabs / pagination ───────────────────────────────── */ html[data-theme="dark"] .breadcrumb { background-color: var(--rg-surface); } html[data-theme="dark"] .breadcrumb-item, html[data-theme="dark"] .breadcrumb-item.active { color: var(--rg-muted); } html[data-theme="dark"] .nav-tabs { border-bottom-color: var(--rg-border); } html[data-theme="dark"] .nav-tabs .nav-link { color: var(--rg-muted); } html[data-theme="dark"] .nav-tabs .nav-link:hover { border-color: var(--rg-border); color: var(--rg-text); } html[data-theme="dark"] .nav-tabs .nav-link.active { background-color: var(--rg-surface); border-color: var(--rg-border) var(--rg-border) var(--rg-surface); color: var(--rg-strong); } html[data-theme="dark"] .page-link { background-color: var(--rg-surface); border-color: var(--rg-border); color: var(--rg-text); } html[data-theme="dark"] .page-link:hover { background-color: var(--rg-elevated); color: var(--rg-strong); } html[data-theme="dark"] .page-item.disabled .page-link { background-color: var(--rg-surface); color: var(--rg-muted); } /* ── Alerts (keep hue, darken the wash) ────────────────────────────────── */ html[data-theme="dark"] .alert-secondary { background-color: var(--rg-elevated); border-color: var(--rg-border); color: var(--rg-text); } html[data-theme="dark"] .alert-light { background-color: var(--rg-surface); border-color: var(--rg-border); color: var(--rg-text); } /* ── Badges — the pale "-soft" chips used across list screens ──────────── */ html[data-theme="dark"] .badge-light { background-color: var(--rg-elevated); color: var(--rg-text); } /* ══════════════════════════════════════════════════════════════════════ app.css UTILITY CLASSES — re-theme the hard-coded light values ══════════════════════════════════════════════════════════════════════ */ html[data-theme="dark"] .app-help-information { background-color: var(--rg-elevated); } html[data-theme="dark"] .app-help-information p, html[data-theme="dark"] .app-need-client-note { color: var(--rg-muted); } /* Custom checkbox (Orders / Estimate screens) */ html[data-theme="dark"] .checkmark { background-color: var(--rg-elevated); border-color: var(--rg-border); } html[data-theme="dark"] .containerCheckbox:hover input ~ .checkmark { background-color: #333a4a; } /* Mobile stacked-card table rows — app.css hard-codes #fff / #f9fafb. */ @media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) { html[data-theme="dark"] .rg-cards tbody tr, html[data-theme="dark"] .rg-form-cards tbody tr { background: var(--rg-surface) !important; border-color: var(--rg-border); } html[data-theme="dark"] .rg-cards tbody td.rg-num, html[data-theme="dark"] .rg-cards tbody td.rg-act { background: var(--rg-thead); border-bottom-color: var(--rg-border) !important; } html[data-theme="dark"] .rg-cards tbody td.rg-num, html[data-theme="dark"] .rg-cards tbody td.rg-num:before { color: var(--rg-strong) !important; } html[data-theme="dark"] td[data-label]:before { color: var(--rg-muted) !important; } html[data-theme="dark"] .rg-cards tbody td, html[data-theme="dark"] .rg-form-cards tbody td { border-bottom-color: var(--rg-border) !important; } } /* ══════════════════════════════════════════════════════════════════════ VENDOR WIDGETS ══════════════════════════════════════════════════════════════════════ */ /* DataTables (jquery.dataTables.css) */ html[data-theme="dark"] .dataTables_wrapper, html[data-theme="dark"] .dataTables_wrapper .dataTables_info, html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--rg-muted) !important; } html[data-theme="dark"] table.dataTable tbody tr { background-color: var(--rg-surface); } html[data-theme="dark"] table.dataTable thead th, html[data-theme="dark"] table.dataTable thead td { border-color: var(--rg-border); color: var(--rg-strong); } html[data-theme="dark"] table.dataTable.stripe tbody tr.odd, html[data-theme="dark"] table.dataTable.display tbody tr.odd { background-color: rgba(255,255,255,.025); } html[data-theme="dark"] .dataTables_wrapper .dataTables_filter input, html[data-theme="dark"] .dataTables_wrapper .dataTables_length select { background-color: var(--rg-elevated); border-color: var(--rg-border); color: var(--rg-text); } /* ng-bootstrap datepicker popup */ html[data-theme="dark"] .ngb-dp-header, html[data-theme="dark"] .ngb-dp-weekdays, html[data-theme="dark"] .ngb-dp-month-name, html[data-theme="dark"] ngb-datepicker { background-color: var(--rg-surface) !important; color: var(--rg-text); border-color: var(--rg-border); } html[data-theme="dark"] .ngb-dp-weekday { color: var(--rg-muted); } html[data-theme="dark"] .ngb-dp-day .btn-light { background: transparent; color: var(--rg-text); } html[data-theme="dark"] .ngb-dp-day .btn-light:hover { background: var(--rg-elevated); } html[data-theme="dark"] .ngb-dp-day.disabled, html[data-theme="dark"] .ngb-dp-day .text-muted { color: #5a6070 !important; }