/* ============================================================================ SAScore Theme Overlay — dark mode + UI polish + RTL fixes ---------------------------------------------------------------------------- Pure overlay: loaded AFTER styles.sc1.css. Touches nothing in the compiled Angular bundle or the ionCube core. Light mode is the default and stays visually the app it already is (only subtle, safe polish). Dark mode is an opt-in theme toggled by adding (see sascore-theme.js). Why so many explicit rules: the app's PrimeNG theme was compiled with the colors baked in as literal hex (e.g. .p-datatable th{background:#f8f9fa}) — it does NOT read the --surface-* CSS variables — so re-theming needs concrete overrides, not just variable reassignment. We still override the variables too (color-scheme, native controls, any component that does read them). Palette + color-carrying properties in dark mode use !important so the overlay reliably wins over the baked compiled theme regardless of its specificity. ============================================================================ */ /* ---------------------------------------------------------------------------- 1) UNIVERSAL POLISH (applies to BOTH themes — deliberately subtle) ---------------------------------------------------------------------------- */ :root{ --sc-radius: 8px; --sc-radius-sm: 6px; --sc-transition: .18s ease; /* Brand accent — identity v2 "Petrol / Live Cyan / Beacon Amber". Text/border accent vs. button-fill accent are separate; --sc-on-accent is the text color ON accent fills (white on petrol; deep-sea on cyan). */ --sc-accent: #0C7489; --sc-accent-fill: #0C7489; --sc-accent-fill-hover: #0C8599; --sc-accent-fill-active:#095C6D; --sc-accent-weak: rgba(12,116,137,.10); --sc-accent-ring: rgba(12,116,137,.28); --sc-on-accent: #FFFFFF; /* Re-point PrimeNG's var-driven bits to the brand accent (both themes). */ --primary-color: var(--sc-accent); --highlight-bg: var(--sc-accent-weak); --focus-ring: 0 0 0 .2rem var(--sc-accent-ring); } :root[data-theme="dark"]{ --sc-accent: #3FC6DB; /* Live Cyan — readable on dark grounds */ --sc-accent-fill: #22B8CF; /* cyan fill wears DEEP-SEA text, not white */ --sc-accent-fill-hover: #3FC6DB; --sc-accent-fill-active:#1BA8BD; --sc-accent-weak: rgba(34,184,207,.16); --sc-accent-ring: rgba(63,198,219,.35); --sc-on-accent: #06232B; } /* Softer, more modern cards + smoother interactions, without changing colors. */ .card{ border-radius: var(--sc-radius); transition: box-shadow var(--sc-transition), border-color var(--sc-transition), background-color var(--sc-transition); } .btn, .p-button, .form-control, .p-inputtext, .badge, .p-dropdown, .p-multiselect, .p-datatable, .modal-content{ transition: background-color var(--sc-transition), color var(--sc-transition), border-color var(--sc-transition), box-shadow var(--sc-transition); } .btn{ border-radius: var(--sc-radius-sm); } /* Nicer, consistent focus ring in both themes (accessibility + polish). */ .form-control:focus, .p-inputtext:focus, .btn:focus, .p-dropdown:not(.p-disabled).p-focus, .p-multiselect:not(.p-disabled).p-focus{ outline: none; border-color: var(--sc-accent); box-shadow: 0 0 0 .18rem var(--sc-accent-ring); } /* ---------------------------------------------------------------------------- 1.5) BRAND ACCENT RETARGET (both themes) The compiled CoreUI/Bootstrap theme bakes the old sky-blue (#20a8d8) and PrimeNG bakes #2196F3 as literal hex. Re-point the visible accent carriers to Indigo Core. Semantic colors (success/warning/danger) are untouched. ---------------------------------------------------------------------------- */ a{ color: var(--sc-accent); } a:hover{ color: var(--sc-accent-fill-hover); } .btn-primary{ background-color: var(--sc-accent-fill) !important; border-color: var(--sc-accent-fill) !important; color:var(--sc-on-accent) !important; } .btn-primary:hover{ background-color: var(--sc-accent-fill-hover) !important; border-color: var(--sc-accent-fill-hover) !important; } .btn-primary:focus, .btn-primary.focus{ box-shadow: 0 0 0 .2rem var(--sc-accent-ring) !important; } .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show>.btn-primary.dropdown-toggle{ background-color: var(--sc-accent-fill-active) !important; border-color: var(--sc-accent-fill-active) !important; } .btn-outline-primary{ color: var(--sc-accent) !important; border-color: var(--sc-accent) !important; } .btn-outline-primary:hover, .btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active{ background-color: var(--sc-accent-fill) !important; border-color: var(--sc-accent-fill) !important; color:var(--sc-on-accent) !important; } .btn-link{ color: var(--sc-accent); } .btn-link:hover{ color: var(--sc-accent-fill-hover); } .badge-primary{ background-color: var(--sc-accent-fill) !important; color:var(--sc-on-accent) !important; } .text-primary{ color: var(--sc-accent) !important; } .border-primary{ border-color: var(--sc-accent) !important; } .bg-primary{ background-color: var(--sc-accent-fill) !important; } .page-link{ color: var(--sc-accent); } .pagination li.active .page-link, .pagination li.active a, .page-item.active .page-link{ background-color: var(--sc-accent-fill) !important; border-color: var(--sc-accent-fill) !important; color:var(--sc-on-accent) !important; } .nav-pills .nav-link.active, .nav-pills .show>.nav-link{ background-color: var(--sc-accent-fill) !important; color:var(--sc-on-accent) !important; } .sidebar .nav-link:hover{ background-color: var(--sc-accent-fill); } .sidebar .nav-link.active .nav-icon, .sidebar .nav-link.active i{ color: var(--sc-accent) !important; } .switch-primary>.switch-input:checked~.switch-label{ background: var(--sc-accent-fill) !important; border-color: var(--sc-accent-fill-active) !important; } .switch-primary-outline>.switch-input:checked~.switch-label, .switch-primary-outline-alt>.switch-input:checked~.switch-label{ border-color: var(--sc-accent-fill) !important; } .switch-primary-outline>.switch-input:checked~.switch-label:after, .switch-primary-outline-alt>.switch-input:checked~.switch-label:after{ color: var(--sc-accent-fill) !important; } /* ngx-bootstrap datepicker header ("theme-green" is the app's chosen skin) */ .theme-green .bs-datepicker-head{ background-color: var(--sc-accent-fill) !important; } .theme-green .bs-datepicker-body table td span.selected, .theme-green .bs-datepicker-body table td.selected span{ background-color: var(--sc-accent-fill) !important; } /* PrimeNG: default (primary) buttons only — severity/text/outlined variants excluded */ .p-button:not(.p-button-secondary):not(.p-button-success):not(.p-button-info):not(.p-button-warning):not(.p-button-danger):not(.p-button-help):not(.p-button-plain):not(.p-button-text):not(.p-button-outlined):not(.p-button-link){ background: var(--sc-accent-fill); border-color: var(--sc-accent-fill); color: var(--sc-on-accent); } .p-button:not(.p-button-secondary):not(.p-button-success):not(.p-button-info):not(.p-button-warning):not(.p-button-danger):not(.p-button-help):not(.p-button-plain):not(.p-button-text):not(.p-button-outlined):not(.p-button-link):enabled:hover{ background: var(--sc-accent-fill-hover); border-color: var(--sc-accent-fill-hover); } .p-checkbox .p-checkbox-box.p-highlight, .p-radiobutton .p-radiobutton-box.p-highlight{ background: var(--sc-accent-fill) !important; border-color: var(--sc-accent-fill) !important; } .p-checkbox .p-checkbox-box.p-highlight .p-checkbox-icon{ color: var(--sc-on-accent) !important; } .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover, .p-radiobutton:not(.p-radiobutton-disabled) .p-radiobutton-box:hover{ border-color: var(--sc-accent); } .p-inputtext:enabled:focus{ border-color: var(--sc-accent) !important; box-shadow: 0 0 0 .2rem var(--sc-accent-ring) !important; } .p-paginator .p-paginator-page.p-highlight{ background: var(--sc-accent-fill) !important; border-color: var(--sc-accent-fill) !important; color:var(--sc-on-accent) !important; } .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link{ color: var(--sc-accent) !important; border-color: var(--sc-accent) !important; } .p-datatable .p-sortable-column.p-highlight, .p-datatable .p-sortable-column.p-highlight .p-sortable-column-icon{ color: var(--sc-accent) !important; } .p-progressbar .p-progressbar-value{ background: var(--sc-accent-fill); } .p-slider .p-slider-range{ background: var(--sc-accent-fill); } .p-slider .p-slider-handle{ border-color: var(--sc-accent-fill); } /* ---------------------------------------------------------------------------- 1.6) BRAND MARK — the "signal core" logo (theme-aware). The compiled CSS bakes ONE logo image for both themes; we swap per theme. NB: url() here resolves relative to THIS stylesheet (assets/css/) → ../img/. ---------------------------------------------------------------------------- */ .app-header.navbar .navbar-brand{ background-image: url(../img/logo-sascore-v2-light.png) !important; background-size: 130px auto !important; } :root[data-theme="dark"] .app-header.navbar .navbar-brand{ background-image: url(../img/logo-sascore-v2-dark.png) !important; } @media (min-width: 992px){ .brand-minimized .app-header.navbar .navbar-brand{ background-image: url(../img/logo-symbol-v2-light.png) !important; background-size: 30px !important; } :root[data-theme="dark"] .brand-minimized .app-header.navbar .navbar-brand{ background-image: url(../img/logo-symbol-v2-dark.png) !important; } } /* The in-content site logo comes from the backend (api/resources/logo → one file for panel + UCP + invoices, light colours). In the panel's dark mode swap the rendered image for the dark lockup (same 232x120 box, so layout is unchanged). */ :root[data-theme="dark"] img[src*="resources/logo"]{ content: url(../img/api-default-logo-dark-v2.png); } /* ---------------------------------------------------------------------------- 1.85) FOOTER — the brand's quiet signature (content injected by sascore-theme.js: SASCORE · Network Core Platform | v5.41 · © ). Wordmark-spaced caps left, mono metadata right; wraps politely on narrow. ---------------------------------------------------------------------------- */ .app-footer{ justify-content: space-between !important; gap: 8px 18px; flex-wrap: wrap; font-size: 12px !important; } .sc-footer-brand, .sc-footer-meta{ display:inline-flex; align-items:baseline; gap:8px; white-space:nowrap; } .sc-footer-brand a{ font-weight: 800; letter-spacing: .09em; font-size: 12.5px; color: inherit; text-decoration: none; } .sc-footer-brand a:hover{ color: var(--sc-accent); } .sc-ftag{ letter-spacing: .04em; opacity: .75; } .sc-fsep{ opacity: .4; } .sc-footer-meta{ font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 11.5px; opacity: .85; } .sc-fver{ color: var(--sc-accent); font-weight: 600; } .sc-footer-meta a{ color: inherit; text-decoration: none; } .sc-footer-meta a:hover{ color: var(--sc-accent); } [dir="rtl"] .app-footer{ direction: ltr; } /* brand line stays Latin-ordered */ /* ---------------------------------------------------------------------------- 1.9) NO IN-CONTENT BRAND LOGOS — the header carries the brand; the big site logo repeated inside dashboards/About wastes the best screen real estate. Scoped to .main (the routed app area), so the LOGIN page — which has no header and lives outside .main — keeps its logo. In place of the image, its row leaves a whisper of the brand: a petrol signal-line ending in the amber beacon. Data moves up; the brand stays present. ---------------------------------------------------------------------------- */ .main img[src*="resources/logo"]{ display:none !important; } .main .row:has(> div > img[src*="resources/logo"])::after{ content:""; display:block; height:10px; width:150px; margin:8px auto 4px; background: radial-gradient(circle at calc(100% - 5px) 50%, #F59F00 3.2px, transparent 4.2px), linear-gradient(90deg, transparent, var(--sc-accent)) left center / calc(100% - 16px) 2.5px no-repeat; } /* Login layout stability: the compiled login template renders the site logo with height="" (nothing reserved) and the api/resources/logo endpoint is no-cache — so on every refresh the image arrives late and its 120px growth shoves the login card down. Reserve the slot up front (aspect-ratio also reserves the width) so the card never moves. !important beats the component-scoped `height:auto`. Forces the same 120px on the About page logo — identical to its natural size, so no visual change there. */ img.logo_image{ height: 120px !important; width: auto !important; aspect-ratio: 232 / 120; object-fit: contain; } /* ---------------------------------------------------------------------------- 1.8) LOGIN BACKDROP — identity v2 "deep sea & orbits". Replaces the vendor gradient (#26a0da→#314755) + bg1.png texture with the brand scene: deep-sea water, faint orbit rings drifting from the corners, scattered nodes and one amber beacon. Two gradients + one inline SVG — fully local. The backdrop is a committed dark brand moment in BOTH themes, so the login logo always uses the dark lockup. ---------------------------------------------------------------------------- */ .login-background{ background: radial-gradient(760px 480px at 80% 22%, rgba(34,184,207,.16), transparent 62%), radial-gradient(620px 440px at 12% 92%, rgba(245,159,0,.10), transparent 58%), linear-gradient(135deg, #081218 0%, #0A2530 52%, #0C7489 135%) !important; } .login-background .image-container, .login-container .image-container{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 700' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-opacity='.055' stroke-width='1.6'%3E%3Ccircle cx='1120' cy='60' r='240'/%3E%3Ccircle cx='1120' cy='60' r='400'/%3E%3Ccircle cx='1120' cy='60' r='570'/%3E%3Ccircle cx='1120' cy='60' r='750'/%3E%3C/g%3E%3Cg fill='none' stroke='%2322B8CF' stroke-opacity='.12' stroke-width='1.4'%3E%3Ccircle cx='60' cy='700' r='300'/%3E%3Ccircle cx='60' cy='700' r='470'/%3E%3C/g%3E%3Ccircle cx='884' cy='180' r='4' fill='%2322B8CF' fill-opacity='.55'/%3E%3Ccircle cx='722' cy='60' r='3' fill='%23FFFFFF' fill-opacity='.3'/%3E%3Ccircle cx='1048' cy='390' r='3.5' fill='%2322B8CF' fill-opacity='.35'/%3E%3Ccircle cx='300' cy='480' r='4.5' fill='%23F59F00' fill-opacity='.85'/%3E%3Ccircle cx='152' cy='592' r='3' fill='%23FFFFFF' fill-opacity='.25'/%3E%3Cpath d='M300 480L152 592' stroke='%23F59F00' stroke-opacity='.22' stroke-width='1.2'/%3E%3Cpath d='M884 180L1048 390' stroke='%2322B8CF' stroke-opacity='.15' stroke-width='1.2'/%3E%3C/svg%3E") !important; background-position: center !important; background-size: cover !important; opacity: 1 !important; } /* the backdrop is always deep — always show the dark lockup on the login page */ .login-background img[src*="resources/logo"], .login-container img[src*="resources/logo"]{ content: url(../img/api-default-logo-dark-v2.png); } /* frosted dark glass card reads better on the deep scene than frosted white */ .login-background .login-card, .login-container .login-card{ background: rgba(10, 22, 32, .62) !important; border: 1px solid rgba(255,255,255,.10) !important; backdrop-filter: blur(6px); color: #E4EDF0 !important; } .login-background .login-card h1, .login-container .login-card h1{ color: #E4EDF0 !important; } .login-background .login-card .text-muted, .login-container .login-card .text-muted{ color: #93A6AE !important; } .login-background .login-card .form-control, .login-container .login-card .form-control, .login-background .login-card .input-group-text, .login-container .login-card .input-group-text{ background: rgba(255,255,255,.07) !important; border-color: rgba(255,255,255,.16) !important; color: #E4EDF0 !important; } .login-background .login-card .form-control::placeholder, .login-container .login-card .form-control::placeholder{ color: #7E909A !important; } .login-background .login-card select.form-control option, .login-container .login-card select.form-control option{ background:#0E1920; color:#E4EDF0; } /* Chrome autofill paints fields white via an internal shadow — repaint it. */ .login-background .login-card input:-webkit-autofill, .login-container .login-card input:-webkit-autofill{ -webkit-box-shadow: 0 0 0 1000px #152430 inset !important; -webkit-text-fill-color: #E4EDF0 !important; caret-color: #E4EDF0; } /* On this branded scene the primary action wears Live Cyan (scene-scoped — the panel-wide accent is unchanged until identity v2 is approved). */ .login-background .login-card .btn-primary, .login-container .login-card .btn-primary{ background-color: #22B8CF !important; border-color: #22B8CF !important; color: #06232B !important; font-weight: 600; } .login-background .login-card .btn-primary:hover, .login-container .login-card .btn-primary:hover{ background-color: #3FC6DB !important; border-color: #3FC6DB !important; } /* Refined scrollbars (WebKit) — light theme keeps neutral greys. */ *{ scrollbar-width: thin; } ::-webkit-scrollbar{ width: 10px; height: 10px; } ::-webkit-scrollbar-track{ background: transparent; } ::-webkit-scrollbar-thumb{ background: #c2ccd6; border-radius: 8px; border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover{ background: #a7b3bf; background-clip: content-box; } /* ============================================================================ 2) DARK THEME ============================================================================ */ :root[data-theme="dark"]{ /* our palette */ --sc-ground: #14161a; /* app background (deepest) */ --sc-surface: #1e2128; /* cards, header, dialogs, dropdowns, inputs */ --sc-surface-2: #262a32; /* table header, elevated, hover base */ --sc-surface-hover: #2d323b; /* row / item hover */ --sc-sidebar: #191c22; /* slightly darker than surface for depth */ --sc-border: #333944; --sc-border-subtle: #2a2f38; --sc-text: #e5e8ee; --sc-text-muted: #9aa3b2; --sc-text-dim: #6b7482; --sc-primary: var(--sc-accent); /* Indigo Core (dark variant) */ --sc-primary-weak: var(--sc-accent-weak); /* re-point PrimeNG design tokens (covers native controls + any var-driven bits) */ --surface-a: var(--sc-surface); --surface-b: var(--sc-ground); --surface-c: var(--sc-surface-2); --surface-d: var(--sc-border); --surface-e: var(--sc-surface); --surface-f: var(--sc-surface); --surface-0: var(--sc-ground); --surface-ground: var(--sc-ground); --surface-section: var(--sc-surface); --surface-card: var(--sc-surface); --surface-overlay: var(--sc-surface); --surface-border: var(--sc-border); --surface-hover: var(--sc-surface-hover); --text-color: var(--sc-text); --text-color-secondary: var(--sc-text-muted); --highlight-bg: var(--sc-primary-weak); --highlight-text-color: var(--sc-text); --maskbg: rgba(0,0,0,.6); color-scheme: dark; } /* ---- 2a) CoreUI shell -------------------------------------------------------- */ :root[data-theme="dark"] body{ background-color: var(--sc-ground) !important; color: var(--sc-text) !important; } :root[data-theme="dark"] .app-header.navbar{ background-color: var(--sc-surface) !important; border-bottom-color: var(--sc-border) !important; } :root[data-theme="dark"] .app-header.navbar .navbar-brand{ background-color: var(--sc-surface) !important; border-bottom-color: var(--sc-border) !important; } :root[data-theme="dark"] .navbar-toggler .navbar-toggler-icon{ filter: invert(.85); } :root[data-theme="dark"] .sidebar{ background: var(--sc-sidebar) !important; } :root[data-theme="dark"] .sidebar .nav-link{ color: #c4ccd6 !important; } :root[data-theme="dark"] .sidebar .nav-link:hover, :root[data-theme="dark"] .sidebar .nav-link.active{ color: #fff !important; background: rgba(255,255,255,.05) !important; } :root[data-theme="dark"] .sidebar .nav-link.active{ border-left-color: var(--sc-primary) !important; } :root[data-theme="dark"] .sidebar .nav-dropdown.open{ background: rgba(0,0,0,.20) !important; } :root[data-theme="dark"] .sidebar .nav-title{ color: var(--sc-text-dim) !important; } :root[data-theme="dark"] .sidebar-minimizer{ background-color: rgba(0,0,0,.25) !important; } :root[data-theme="dark"] .main{ background: var(--sc-ground) !important; } :root[data-theme="dark"] .app-footer{ background: var(--sc-surface) !important; color: var(--sc-text-muted) !important; border-top-color: var(--sc-border) !important; } :root[data-theme="dark"] .breadcrumb{ background-color: var(--sc-surface) !important; border-bottom: 1px solid var(--sc-border) !important; } :root[data-theme="dark"] .breadcrumb-item, :root[data-theme="dark"] .breadcrumb-item a{ color: var(--sc-text-muted) !important; } :root[data-theme="dark"] .breadcrumb-item.active{ color: var(--sc-text) !important; } /* cards / panels / wells */ :root[data-theme="dark"] .card{ background-color: var(--sc-surface) !important; border-color: var(--sc-border) !important; color: var(--sc-text) !important; } :root[data-theme="dark"] .card-header, :root[data-theme="dark"] .card-footer{ background-color: var(--sc-surface-2) !important; border-color: var(--sc-border) !important; color: var(--sc-text) !important; } :root[data-theme="dark"] .bg-white, :root[data-theme="dark"] .bg-light{ background-color: var(--sc-surface) !important; } /* text helpers that hardcode near-black */ :root[data-theme="dark"] .text-dark, :root[data-theme="dark"] .text-black, :root[data-theme="dark"] h1, :root[data-theme="dark"] h2, :root[data-theme="dark"] h3, :root[data-theme="dark"] h4, :root[data-theme="dark"] h5, :root[data-theme="dark"] h6, :root[data-theme="dark"] label{ color: var(--sc-text) !important; } :root[data-theme="dark"] .text-muted{ color: var(--sc-text-muted) !important; } :root[data-theme="dark"] hr{ border-top-color: var(--sc-border) !important; } :root[data-theme="dark"] a{ color: var(--sc-primary); } /* ---- 2b) Bootstrap tables + forms ------------------------------------------- */ :root[data-theme="dark"] .table{ color: var(--sc-text) !important; } :root[data-theme="dark"] .table th, :root[data-theme="dark"] .table td{ border-color: var(--sc-border) !important; } :root[data-theme="dark"] .table thead th{ border-color: var(--sc-border) !important; color: var(--sc-text-muted) !important; } :root[data-theme="dark"] .table-hover tbody tr:hover{ background-color: var(--sc-surface-hover) !important; color: var(--sc-text) !important; } :root[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd){ background-color: rgba(255,255,255,.02) !important; } /* Bootstrap pagination (used by list pages that aren't PrimeNG datatables). */ :root[data-theme="dark"] .pagination .page-link{ background-color: var(--sc-surface) !important; color: var(--sc-text-muted) !important; border-color: var(--sc-border) !important; } :root[data-theme="dark"] .pagination .page-link:hover{ background-color: var(--sc-surface-hover) !important; color: var(--sc-text) !important; } :root[data-theme="dark"] .pagination .page-item.active .page-link{ background-color: var(--sc-accent-fill) !important; border-color: var(--sc-accent-fill) !important; color: var(--sc-on-accent) !important; } :root[data-theme="dark"] .pagination .page-item.disabled .page-link{ background-color: var(--sc-surface) !important; color: var(--sc-text-dim) !important; border-color: var(--sc-border) !important; } /* App-specific horizontal legend/summary bars that hardcode a white background. */ :root[data-theme="dark"] .legend-box{ background-color: var(--sc-surface) !important; border-color: var(--sc-border) !important; color: var(--sc-text) !important; } :root[data-theme="dark"] .form-control, :root[data-theme="dark"] .custom-select, :root[data-theme="dark"] .input-group-text{ background-color: var(--sc-surface-2) !important; color: var(--sc-text) !important; border-color: var(--sc-border) !important; } :root[data-theme="dark"] .form-control::placeholder{ color: var(--sc-text-dim) !important; } :root[data-theme="dark"] .form-control:disabled, :root[data-theme="dark"] .form-control[readonly]{ background-color: #191c22 !important; color: var(--sc-text-muted) !important; } /* dropdown menus (Bootstrap) */ :root[data-theme="dark"] .dropdown-menu{ background-color: var(--sc-surface) !important; border-color: var(--sc-border) !important; color: var(--sc-text) !important; box-shadow: 0 6px 24px rgba(0,0,0,.45) !important; } :root[data-theme="dark"] .dropdown-item{ color: var(--sc-text) !important; } :root[data-theme="dark"] .dropdown-item:hover, :root[data-theme="dark"] .dropdown-item:focus{ background-color: var(--sc-surface-hover) !important; color: #fff !important; } :root[data-theme="dark"] .dropdown-divider{ border-top-color: var(--sc-border) !important; } :root[data-theme="dark"] .dropdown-header{ color: var(--sc-text-dim) !important; } /* modals */ :root[data-theme="dark"] .modal-content{ background-color: var(--sc-surface) !important; color: var(--sc-text) !important; border: 1px solid var(--sc-border) !important; } :root[data-theme="dark"] .modal-header, :root[data-theme="dark"] .modal-footer{ border-color: var(--sc-border) !important; } :root[data-theme="dark"] .close{ color: var(--sc-text) !important; text-shadow: none !important; opacity: .7; } :root[data-theme="dark"] .modal-backdrop.show{ opacity: .6; } /* ---- 2c) PrimeNG components (baked-hex theme → explicit overrides) ----------- */ :root[data-theme="dark"] .p-component{ color: var(--sc-text); } /* DataTable */ :root[data-theme="dark"] .p-datatable .p-datatable-header, :root[data-theme="dark"] .p-datatable .p-datatable-footer{ background: var(--sc-surface-2) !important; color: var(--sc-text) !important; border-color: var(--sc-border) !important; } :root[data-theme="dark"] .p-datatable .p-datatable-thead>tr>th{ background: var(--sc-surface-2) !important; color: var(--sc-text-muted) !important; border-color: var(--sc-border) !important; } :root[data-theme="dark"] .p-datatable .p-datatable-tbody>tr{ background: var(--sc-surface) !important; color: var(--sc-text) !important; } :root[data-theme="dark"] .p-datatable .p-datatable-tbody>tr>td{ border-color: var(--sc-border-subtle) !important; } :root[data-theme="dark"] .p-datatable .p-datatable-tbody>tr:nth-child(even){ background: rgba(255,255,255,.02) !important; } :root[data-theme="dark"] .p-datatable .p-datatable-tbody>tr.p-highlight{ background: var(--sc-primary-weak) !important; color: var(--sc-text) !important; } :root[data-theme="dark"] .p-datatable .p-datatable-tbody>tr:hover{ background: var(--sc-surface-hover) !important; } :root[data-theme="dark"] .p-datatable .p-sortable-column.p-highlight, :root[data-theme="dark"] .p-datatable .p-sortable-column:hover{ background: var(--sc-surface-hover) !important; color: var(--sc-text) !important; } :root[data-theme="dark"] .p-datatable .p-sortable-column .p-sortable-column-icon{ color: var(--sc-text-muted) !important; } /* Paginator */ :root[data-theme="dark"] .p-paginator{ background: var(--sc-surface) !important; color: var(--sc-text-muted) !important; border-color: var(--sc-border) !important; } :root[data-theme="dark"] .p-paginator .p-paginator-page, :root[data-theme="dark"] .p-paginator .p-paginator-first, :root[data-theme="dark"] .p-paginator .p-paginator-prev, :root[data-theme="dark"] .p-paginator .p-paginator-next, :root[data-theme="dark"] .p-paginator .p-paginator-last{ color: var(--sc-text-muted) !important; } :root[data-theme="dark"] .p-paginator .p-paginator-page.p-highlight{ background: var(--sc-accent-fill) !important; color: var(--sc-on-accent) !important; } :root[data-theme="dark"] .p-paginator .p-paginator-page:not(.p-highlight):hover{ background: var(--sc-surface-hover) !important; color: var(--sc-text) !important; } /* Inputs / Dropdown / MultiSelect / Calendar / Textarea */ :root[data-theme="dark"] .p-inputtext, :root[data-theme="dark"] .p-dropdown, :root[data-theme="dark"] .p-multiselect, :root[data-theme="dark"] .p-calendar .p-inputtext, :root[data-theme="dark"] .p-inputnumber-input, :root[data-theme="dark"] textarea.p-inputtextarea{ background: var(--sc-surface-2) !important; color: var(--sc-text) !important; border-color: var(--sc-border) !important; } :root[data-theme="dark"] .p-inputtext::placeholder{ color: var(--sc-text-dim) !important; } :root[data-theme="dark"] .p-dropdown .p-dropdown-label, :root[data-theme="dark"] .p-multiselect .p-multiselect-label{ color: var(--sc-text) !important; } :root[data-theme="dark"] .p-dropdown-panel, :root[data-theme="dark"] .p-multiselect-panel, :root[data-theme="dark"] .p-datepicker:not(.p-datepicker-inline){ background: var(--sc-surface) !important; color: var(--sc-text) !important; border-color: var(--sc-border) !important; } :root[data-theme="dark"] .p-dropdown-items .p-dropdown-item, :root[data-theme="dark"] .p-multiselect-items .p-multiselect-item{ color: var(--sc-text) !important; } :root[data-theme="dark"] .p-dropdown-items .p-dropdown-item:hover, :root[data-theme="dark"] .p-multiselect-items .p-multiselect-item:hover{ background: var(--sc-surface-hover) !important; } :root[data-theme="dark"] .p-dropdown-items .p-dropdown-item.p-highlight, :root[data-theme="dark"] .p-multiselect-items .p-multiselect-item.p-highlight{ background: var(--sc-primary-weak) !important; color: var(--sc-text) !important; } :root[data-theme="dark"] .p-datepicker table td>span{ color: var(--sc-text) !important; } :root[data-theme="dark"] .p-datepicker table td>span.p-highlight{ background: var(--sc-accent-fill) !important; color:var(--sc-on-accent) !important; } :root[data-theme="dark"] .p-datepicker table td>span:hover{ background: var(--sc-surface-hover) !important; } /* Dialog / Overlay panel / Menu / TabView / Card / Panel */ :root[data-theme="dark"] .p-dialog .p-dialog-header, :root[data-theme="dark"] .p-dialog .p-dialog-content, :root[data-theme="dark"] .p-dialog .p-dialog-footer, :root[data-theme="dark"] .p-overlaypanel, :root[data-theme="dark"] .p-menu, :root[data-theme="dark"] .p-panel .p-panel-header, :root[data-theme="dark"] .p-panel .p-panel-content, :root[data-theme="dark"] .p-card{ background: var(--sc-surface) !important; color: var(--sc-text) !important; border-color: var(--sc-border) !important; } :root[data-theme="dark"] .p-dialog .p-dialog-header{ border-bottom: 1px solid var(--sc-border) !important; } :root[data-theme="dark"] .p-dialog .p-dialog-footer{ border-top: 1px solid var(--sc-border) !important; } :root[data-theme="dark"] .p-dialog .p-dialog-title{ color: var(--sc-text) !important; } :root[data-theme="dark"] .p-menu .p-menuitem-link .p-menuitem-text, :root[data-theme="dark"] .p-menu .p-menuitem-link .p-menuitem-icon{ color: var(--sc-text) !important; } :root[data-theme="dark"] .p-menu .p-menuitem-link:hover{ background: var(--sc-surface-hover) !important; } :root[data-theme="dark"] .p-tabview .p-tabview-nav{ background: transparent !important; border-color: var(--sc-border) !important; } :root[data-theme="dark"] .p-tabview .p-tabview-nav li .p-tabview-nav-link{ background: transparent !important; color: var(--sc-text-muted) !important; border-color: var(--sc-border) !important; } :root[data-theme="dark"] .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link{ color: var(--sc-primary) !important; border-color: var(--sc-primary) !important; } :root[data-theme="dark"] .p-tabview .p-tabview-panels{ background: var(--sc-surface) !important; color: var(--sc-text) !important; } /* Checkbox / Radio boxes */ :root[data-theme="dark"] .p-checkbox .p-checkbox-box, :root[data-theme="dark"] .p-radiobutton .p-radiobutton-box{ background: var(--sc-surface-2) !important; border-color: var(--sc-border) !important; } :root[data-theme="dark"] .p-checkbox .p-checkbox-box.p-highlight, :root[data-theme="dark"] .p-radiobutton .p-radiobutton-box.p-highlight{ background: var(--sc-accent-fill) !important; border-color: var(--sc-primary) !important; } /* Overlays / masks / tooltips */ :root[data-theme="dark"] .p-component-overlay{ background: rgba(0,0,0,.6) !important; } :root[data-theme="dark"] .p-tooltip .p-tooltip-text{ background: #0f1114 !important; color: var(--sc-text) !important; } /* PrimeNG message/badge/tag surfaces that hardcode pale backgrounds keep their semantic hue but darken the surface a touch for contrast. */ :root[data-theme="dark"] .p-inputgroup-addon{ background: var(--sc-surface-2) !important; color: var(--sc-text-muted) !important; border-color: var(--sc-border) !important; } /* ---- 2d) C3 / D3 charts ----------------------------------------------------- */ :root[data-theme="dark"] .c3 svg{ color: var(--sc-text); } :root[data-theme="dark"] .c3-axis .tick text, :root[data-theme="dark"] .c3-axis text, :root[data-theme="dark"] .c3-legend-item text{ fill: var(--sc-text-muted) !important; } :root[data-theme="dark"] .c3-axis path.domain, :root[data-theme="dark"] .c3-axis .tick line{ stroke: var(--sc-border) !important; } :root[data-theme="dark"] .c3-grid line{ stroke: var(--sc-border-subtle) !important; } :root[data-theme="dark"] .c3-tooltip{ background: var(--sc-surface) !important; color: var(--sc-text) !important; box-shadow: 0 4px 16px rgba(0,0,0,.5) !important; } :root[data-theme="dark"] .c3-tooltip th{ background: var(--sc-surface-2) !important; color: var(--sc-text) !important; } :root[data-theme="dark"] .c3-tooltip td{ border-color: var(--sc-border) !important; background: var(--sc-surface) !important; } /* ---- 2d²) Highcharts (dashboard + reports) --------------------------------- */ :root[data-theme="dark"] .highcharts-background, :root[data-theme="dark"] .highcharts-plot-background{ fill: transparent !important; } :root[data-theme="dark"] .highcharts-axis-labels text, :root[data-theme="dark"] .highcharts-legend-item text, :root[data-theme="dark"] .highcharts-axis-title, :root[data-theme="dark"] .highcharts-data-label text, :root[data-theme="dark"] .highcharts-credits{ fill: var(--sc-text-muted) !important; } :root[data-theme="dark"] .highcharts-title, :root[data-theme="dark"] .highcharts-subtitle{ fill: var(--sc-text) !important; } :root[data-theme="dark"] .highcharts-grid-line{ stroke: var(--sc-border-subtle) !important; } :root[data-theme="dark"] .highcharts-axis-line, :root[data-theme="dark"] .highcharts-tick{ stroke: var(--sc-border) !important; } :root[data-theme="dark"] .highcharts-tooltip-box{ fill: var(--sc-surface) !important; stroke: var(--sc-border) !important; } :root[data-theme="dark"] .highcharts-tooltip text{ fill: var(--sc-text) !important; } /* ---- 2e) dark scrollbars ---------------------------------------------------- */ :root[data-theme="dark"] ::-webkit-scrollbar-thumb{ background: #3a414c; background-clip: content-box; } :root[data-theme="dark"] ::-webkit-scrollbar-thumb:hover{ background: #49515e; background-clip: content-box; } :root[data-theme="dark"]{ scrollbar-color: #3a414c transparent; } /* ============================================================================ 3) RTL FIXES (CoreUI mirrors the shell already; these fill the gaps — chiefly PrimeNG, icon spacing, and native alignment PrimeNG misses.) ============================================================================ */ [dir="rtl"] .p-datatable .p-datatable-thead>tr>th, [dir="rtl"] .p-datatable .p-datatable-tbody>tr>td, [dir="rtl"] .p-datatable .p-datatable-tfoot>tr>td{ text-align: right; } [dir="rtl"] .p-paginator{ direction: rtl; } [dir="rtl"] .p-dropdown .p-dropdown-trigger, [dir="rtl"] .p-multiselect .p-multiselect-trigger{ margin-left: 0; margin-right: auto; } [dir="rtl"] .p-dropdown .p-dropdown-label{ text-align: right; } [dir="rtl"] .p-inputtext, [dir="rtl"] .p-dropdown-label, [dir="rtl"] textarea.p-inputtextarea{ text-align: right; } [dir="rtl"] .p-dialog .p-dialog-header-icons{ margin-left: 0; margin-right: auto; } [dir="rtl"] .p-checkbox, [dir="rtl"] .p-radiobutton{ margin-left: .5rem; margin-right: 0; } /* FontAwesome / primeicons that sit next to text: mirror the gap in RTL. */ [dir="rtl"] .btn > i.fa, [dir="rtl"] .btn > i[class^="pi-"], [dir="rtl"] .btn > i.pi, [dir="rtl"] .nav-link > i{ margin-left: .4rem; margin-right: 0; } [dir="rtl"] .input-group > .input-group-prepend > .input-group-text{ border-radius: 0; } /* Numeric / code / IP fields read better forced LTR even in an RTL page. */ [dir="rtl"] input[type="number"], [dir="rtl"] input[inputmode="numeric"], [dir="rtl"] .sc-ltr{ direction: ltr; text-align: right; } /* ============================================================================ 4) THEME TOGGLE control (injected into the header by sascore-theme.js) ============================================================================ */ .sc-theme-toggle{ display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0 .25rem; padding: 0; border: 0; background: transparent; cursor: pointer; border-radius: 50%; color: #647184; transition: background-color var(--sc-transition), color var(--sc-transition); } .sc-theme-toggle:hover{ background: rgba(0,0,0,.06); color: var(--sc-accent); } .sc-theme-toggle svg{ width: 20px; height: 20px; display: block; } .sc-theme-toggle .sc-icon-sun{ display: none; } .sc-theme-toggle .sc-icon-moon{ display: block; } :root[data-theme="dark"] .sc-theme-toggle{ color: #9aa3b2; } :root[data-theme="dark"] .sc-theme-toggle:hover{ background: rgba(255,255,255,.08); color: var(--sc-accent); } :root[data-theme="dark"] .sc-theme-toggle .sc-icon-sun{ display: block; } :root[data-theme="dark"] .sc-theme-toggle .sc-icon-moon{ display: none; } /* Mobile header: the compiled CSS centres the brand as an absolute 220px box (left:50%, margin-left:-110px) — with the theme toggle added to the right cluster they collide on phones. Shrink the brand box (and the toggle) so the centred logo and the right cluster never meet. */ @media (max-width: 991.98px){ .app-header.navbar .navbar-brand{ width: 150px !important; margin-left: -75px !important; background-size: 105px auto !important; } } @media (max-width: 520px){ .app-header.navbar .navbar-brand{ width: 118px !important; margin-left: -59px !important; background-size: 94px auto !important; } .sc-theme-toggle{ width: 34px; height: 34px; margin: 0; } .sc-theme-toggle svg{ width: 18px; height: 18px; } } /* Floating fallback (used only when there is no header to host the toggle, e.g. the login screen). Sits in the top corner, flips side under RTL. */ .sc-theme-toggle--floating{ position: fixed; top: 14px; inset-inline-end: 14px; z-index: 2000; width: 44px; height: 44px; margin: 0; background: rgba(255,255,255,.9); box-shadow: 0 2px 10px rgba(0,0,0,.18); } :root[data-theme="dark"] .sc-theme-toggle--floating{ background: rgba(30,33,40,.92); box-shadow: 0 2px 12px rgba(0,0,0,.55); }