/* ============================================================================ k12panel — design token layer ---------------------------------------------------------------------------- Restyles the existing Bootstrap 4 markup via CSS custom properties. Loaded AFTER Bootstrap (and dashboard.css / simple-sidebar.css) so it wins the cascade. No HTML/class changes required. Rollout is phased (see DOCS/specs/REDESIGN-PLAN.md): Phase 0 (this commit) — tokens + safe global primitives only. Phase 1 — app shell (sidebar, topbar, footer, message banner) + canvas. Phase 2 — buttons, cards, alerts, badges, dropdowns, modals, tabs. Phase 3 — bootstrap-table data grids. Phase 4 — forms. Component sections are added in their phase; do not pre-empt them here. ============================================================================ */ /* ============================================================================ TOKENS (source of truth — many are inert until consumed in a later phase) ========================================================================== */ :root { /* ---- Color: neutral canvas + surfaces ---- */ --canvas: #f5f6f8; --surface: #ffffff; --surface-2: #f1f3f5; --border: #e7e9ee; --border-strong: #d6dae1; /* ---- Text ---- */ --text: #14181f; --text-muted: #69707d; --text-faint: #98a0ac; /* ---- Brand / primary (fixed brand blue — do NOT bind to org color) ---- */ --primary: #3b5bdb; --primary-600: #324fc4; --primary-700: #2942a8; --primary-soft: #eef1fd; /* Content-link color (separate from --primary so links can be lighter on dark without affecting buttons/nav/dropdowns). */ --link: #3b5bdb; --link-hover: #2942a8; /* ---- Per-org accent: set inline from {% get_active_org_color %} in base.html. Scoped to the org chip / active accent only (contrast). ---- */ --org-accent: var(--primary); /* ---- Status (soft tints + solid) ---- */ --success:#1f9d57; --success-soft:#e7f6ee; --warning:#b7791f; --warning-soft:#fcf3e3; /* dark accent for badge/alert text on soft bg */ --warning-strong:#dd5b10; --warning-strong-600:#c44f0d; /* caution-orange for SOLID warning buttons (white text safe) */ --danger: #d6455d; --danger-soft:#fdebef; --info: #2a86b8; --info-soft:#e7f3fa; /* ---- Sidebar (dark) ---- */ --side-bg: #0f1626; --side-bg-2: #0b1120; --side-text: #c4cad6; --side-text-mut: #7e8699; --side-active-bg: rgba(255,255,255,.07); --side-active-bd: var(--primary); /* ---- Shape & elevation ---- */ --radius-sm: 7px; --radius: 10px; --radius-lg: 14px; --shadow-sm: 0 1px 2px rgba(16,24,40,.06); --shadow: 0 1px 3px rgba(16,24,40,.08), 0 1px 2px rgba(16,24,40,.05); --shadow-md: 0 6px 18px rgba(16,24,40,.08), 0 2px 6px rgba(16,24,40,.04); /* ---- Type ---- */ --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; } /* ============================================================================ DARK THEME — token overrides applied when is set. Scoped to the attribute, so anything without it (logged-out pages, backoffice) stays light automatically. Solid status/button colors are kept (white text reads fine on them over dark); only canvas/surfaces/text/borders/soft-tints and the link-primary flip. Values are tunable. ========================================================================== */ :root[data-theme="dark"] { /* Render native controls (selects + their OS-drawn option popups, scrollbars, checkboxes, date/number inputs) in dark. The only way to dark-mode a native select's option list, which CSS can't style. */ color-scheme: dark; --canvas: #0b1120; /* dark body matched to the left-menu's dark tone (menu unchanged) */ --surface: #19223c; --surface-2: #222d4c; --border: #2d3858; --border-strong: #3e4b70; --text: #e6e8eb; --text-muted: #9aa3af; --text-faint: #6b7480; --primary: #5b78e8; --primary-600: #4d6ad9; --primary-700: #93a6f5; --primary-soft: #1e2747; --link: #93a6f5; /* paler blue: more legible as text on dark */ --link-hover: #b9c6fa; --success-soft: #14271c; --warning-soft: #2a2110; --danger-soft: #2c1820; --info-soft: #10232e; /* bootstrap-table's own theme vars (its dark values key on data-bs-theme, which we don't set) — point them at our tokens. */ --bt-table-border-color: var(--border); --bt-table-loading-bg: var(--surface); --bt-table-loading-color: var(--text); } /* Component backgrounds routed through tokens so they flip with the theme. (In light, --surface is #fff, so these are no-ops there.) */ .list-group-item { background: var(--surface); color: var(--text); border-color: var(--border); } /* ============================================================================ PHASE 0 — global primitives only (typography, headings, links) Canvas background is intentionally deferred to Phase 1 so bare tables don't sit on gray before surfaces are introduced. ========================================================================== */ body { font-family: var(--font); font-size: .875rem; /* baseline density; backoffice/base-nologon lack dashboard.css */ color: var(--text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: -0.006em; } a { color: var(--link); } a:hover { color: var(--link-hover); } h1, h2, h3, h4, h5, h6 { font-weight: 600; letter-spacing: -0.02em; color: var(--text); } /* Tame Bootstrap's oversized .display-3 (used for the org name on the dashboard) down to a modern page-title scale. */ .display-3 { font-size: 1.9rem; font-weight: 700; letter-spacing: -0.03em; } /* ============================================================================ PHASE 1 — app shell (sidebar, topbar), canvas + base surfaces, alerts. CSS-only; restyles existing base.html markup. No template/class changes. ========================================================================== */ /* ---- Canvas (deferred from Phase 0; paired here with surfaces below) ---- */ body { background: var(--canvas); } /* ---- Sidebar -------------------------------------------------------------- */ #sidebar-wrapper { background: linear-gradient(180deg, var(--side-bg), var(--side-bg-2)); border-right: 0 !important; box-shadow: inset -1px 0 0 rgba(255,255,255,.04); } #sidebar-wrapper .sidebar-heading { background: transparent !important; padding: 1.1rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,.06); } /* Neutralize the localdev/staging green tint that base.html paints on .list-group-flush — it sits behind the now-dark sidebar. The fixed "LOCALDEV / STAGING" corner banner remains the environment cue. */ #sidebar-wrapper .list-group-flush { background: transparent !important; } #sidebar-wrapper .list-group { padding: .5rem; } /* internal: box-sizing keeps width 15rem */ #sidebar-wrapper .list-group-item { background: transparent !important; /* override per-item .bg-light */ border: 0; color: var(--side-text); border-radius: var(--radius-sm); padding: .55rem .7rem; margin: 1px 0; font-weight: 500; transition: background .12s ease, color .12s ease; } #sidebar-wrapper .list-group-item svg { color: var(--side-text-mut); } #sidebar-wrapper .list-group-item:hover { background: var(--side-active-bg) !important; color: #fff; } #sidebar-wrapper .list-group-item:hover svg { color: #fff; } /* Active page — base.html marks it with .active OR .list-group-item-dark */ #sidebar-wrapper .list-group-item.active, #sidebar-wrapper .list-group-item-dark { background: var(--side-active-bg) !important; color: #fff !important; box-shadow: inset 3px 0 0 var(--side-active-bd); } #sidebar-wrapper .list-group-item.active svg, #sidebar-wrapper .list-group-item-dark svg { color: var(--primary); } /* Sidebar footer credits / policy links — keep readable on the dark bg */ #sidebar-wrapper .text-muted { color: var(--side-text-mut) !important; } #sidebar-wrapper .text-dark, #sidebar-wrapper a.text-secondary { color: var(--side-text) !important; } #sidebar-wrapper .border-top, #sidebar-wrapper .border-bottom { border-color: rgba(255,255,255,.08) !important; } #sidebar-wrapper .text-muted img { filter: brightness(0) invert(1); opacity: .45; } /* ---- Topbar --------------------------------------------------------------- */ .navbar.bg-light { background: var(--surface) !important; border-bottom: 1px solid var(--border) !important; box-shadow: var(--shadow-sm); padding: .55rem 1rem; } #menu-toggle.btn-dark { background: #1b2330; border: 0; border-radius: var(--radius); color: #fff !important; /* override the element's .text-light */ } #menu-toggle.btn-dark:hover { background: #232c3d; } .navbar .rounded-circle.btn-light { background: var(--surface-2); border: 1px solid var(--border) !important; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; } .navbar .rounded-circle.btn-light svg { width: 20px; height: 20px; } /* Org chip keeps its inline org color; we only refine its shape. */ .navbar .dropdown-toggle.btn-outline-dark { border: 0; border-radius: var(--radius); padding: .45rem .85rem; font-weight: 600; } /* Omni search: bg stays the inline #EEEEEE (~surface-2); refine shape/focus. */ #omni-input { border: 1px solid var(--border) !important; border-radius: var(--radius) !important; height: 40px; padding: 0 .9rem; } #omni-input:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 3px var(--primary-soft) !important; } /* ---- Base surfaces (so content doesn't float on bare canvas) -------------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); } .card-header { background: transparent; border-bottom: 1px solid var(--border); font-weight: 600; } .card-footer { background: var(--surface-2); border-top: 1px solid var(--border); } /* Wrap data grids in a surface. Note: do NOT set overflow:hidden here — that would kill horizontal scroll on wide tables (e.g. the assets grid). */ .table-responsive { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); } /* ---- Alerts (the messages banner in base.html + page alerts) -------------- */ .alert { border: 0; border-radius: var(--radius); padding: 1rem 1.15rem; } .alert-success { background: var(--success-soft); color: #15663a; box-shadow: inset 3px 0 0 var(--success); } .alert-warning { background: var(--warning-soft); color: #7a5210; box-shadow: inset 3px 0 0 var(--warning); } .alert-danger { background: var(--danger-soft); color: #93283b; box-shadow: inset 3px 0 0 var(--danger); } .alert-info { background: var(--info-soft); color: #1c5b7d; box-shadow: inset 3px 0 0 var(--info); } /* ============================================================================ PHASE 2 — core component primitives: buttons, badges, dropdowns, modals, tabs/pills. CSS-only; restyles existing Bootstrap classes. ========================================================================== */ /* ---- Buttons -------------------------------------------------------------- */ .btn { border-radius: var(--radius); font-weight: 500; padding: .45rem .9rem; transition: background .12s ease, border-color .12s ease, color .12s ease; } .btn-sm { border-radius: var(--radius-sm); padding: .3rem .65rem; } .btn-lg { border-radius: var(--radius-lg); } .btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; } .btn-primary:hover, .btn-primary:focus { background: var(--primary-600); border-color: var(--primary-600); color: #fff; } /* Solid neutral (NOT inverted to white): one button rides .text-light on it. */ .btn-secondary { background: #5c6370; border-color: #5c6370; color: #fff; } .btn-secondary:hover, .btn-secondary:focus { background: #4d5560; border-color: #4d5560; color: #fff; } .btn-info { background: var(--info); border-color: var(--info); color: #fff; } .btn-info:hover { background: #246f99; border-color: #246f99; color: #fff; } .btn-success { background: var(--success); border-color: var(--success); color: #fff; } .btn-success:hover { background: #1a824a; border-color: #1a824a; color: #fff; } .btn-warning { background: var(--warning-strong); border-color: var(--warning-strong); color: #fff; } .btn-warning:hover { background: var(--warning-strong-600); border-color: var(--warning-strong-600); color: #fff; } .btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; } .btn-danger:hover { background: #c13a51; border-color: #c13a51; color: #fff; } .btn-dark { background: #1f2733; border-color: #1f2733; color: #fff; } .btn-dark:hover { background: #283242; border-color: #283242; color: #fff; } .btn-light { background: var(--surface); border-color: var(--border-strong); color: var(--text); } .btn-light:hover { background: var(--surface-2); border-color: var(--border-strong); color: var(--text); } .btn-outline-primary { color: var(--primary); border-color: var(--primary); } .btn-outline-primary:hover { background: var(--primary); color: #fff; } .btn-outline-secondary { color: var(--text-muted); border-color: var(--border-strong); } .btn-outline-secondary:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); } .btn-outline-dark { color: var(--text); border-color: var(--border-strong); } .btn-outline-dark:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); } /* ---- Badges (pill, soft-tint) --------------------------------------------- */ .badge { font-weight: 600; border-radius: 999px; padding: .32em .6em; } .badge-secondary { background: var(--surface-2); color: var(--text-muted); } .badge-primary { background: var(--primary-soft); color: var(--primary-700); } .badge-info { background: var(--info-soft); color: var(--info); } .badge-success { background: var(--success-soft); color: var(--success); } .badge-warning { background: var(--warning-soft); color: var(--warning); } .badge-danger { background: var(--danger-soft); color: var(--danger); } /* ---- Soft accent surfaces (connectors, quick commands) --------------------- These controls used to hardcode style="background-color:lightgreen|lightcyan" inline. An inline style beats every stylesheet, so in dark mode the .text-dark override below flipped their text to light while the pastel background stayed put — white text on lightgreen. Route them through the soft status tokens so the background flips with the theme too. Background-only vs text: the -bg- classes are safe on and .dropdown-menu, where the children supply their own color; pair them with the matching -text- class on badges/buttons that previously relied on .text-dark. */ .bg-soft-success { background-color: var(--success-soft) !important; } .bg-soft-info { background-color: var(--info-soft) !important; } .text-soft-success { color: var(--success) !important; } .text-soft-info { color: var(--info) !important; } /* ---- Dropdowns ------------------------------------------------------------ */ .dropdown-menu { background: var(--surface); color: var(--text); /* Bootstrap hardcodes #212529; route loose menu content (icons, footnotes) through the token */ border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: .4rem; } .dropdown-item { color: var(--text); border-radius: var(--radius-sm); padding: .45rem .7rem; } /* Items with an inline bg (org colors, command shortcuts) keep it — inline wins. */ .dropdown-item:hover, .dropdown-item:focus { background: var(--surface-2); color: var(--text); } .dropdown-header { color: var(--text-faint); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; } .dropdown-divider { border-top-color: var(--border); } /* ---- Modals --------------------------------------------------------------- */ /* No overflow:hidden here — would clip Chosen dropdowns inside modal bodies. */ .modal-content { background: var(--surface); border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); } .modal-header { border-bottom: 1px solid var(--border); padding: 1rem 1.15rem; align-items: center; } .modal-footer { border-top: 1px solid var(--border); padding: .85rem 1.15rem; } /* ---- Tabs (asset/people detail) — underline style ------------------------- */ /* Inactive tabs carry .bg-light.border; active carries .active (per base tpls). */ .nav-tabs { border-bottom: 1px solid var(--border); } .nav-tabs .nav-link { border: 0 !important; background: transparent !important; color: var(--text-muted); border-radius: var(--radius-sm) var(--radius-sm) 0 0; padding: .55rem .9rem; margin-bottom: -1px; font-weight: 500; } .nav-tabs .nav-link:hover { color: var(--text); background: var(--surface-2) !important; } .nav-tabs .nav-link.active { color: var(--primary); background: transparent !important; border-bottom: 2px solid var(--primary) !important; } /* Count badges inside detail tabs — solid + bold so the number stands out. (The soft-tint badge style elsewhere is too quiet for at-a-glance counts.) !important on shape overrides the .rounded/.pl-1/.pr-1 utilities on these spans. */ .nav-tabs .nav-link .badge-secondary, .nav-tabs .nav-link .badge-primary, .nav-tabs .nav-link .badge-danger, .nav-tabs .nav-link .badge-warning { font-weight: 700; font-size: .72rem; color: #fff; border-radius: 999px !important; padding: .15em .5em !important; margin-left: .35rem; vertical-align: middle; } .nav-tabs .nav-link .badge-secondary { background: #5c6370; } .nav-tabs .nav-link .badge-primary { background: var(--primary); } .nav-tabs .nav-link .badge-danger { background: var(--danger); } .nav-tabs .nav-link .badge-warning { background: var(--warning-strong); } /* ---- Pills (org settings) — solid active --------------------------------- */ /* Inactive pills carry .bg-light; active carries .active (per base tpls). */ .nav-pills .nav-link { background: var(--surface) !important; color: var(--text-muted); border: 1px solid var(--border); border-radius: var(--radius); } .nav-pills .nav-link:hover { background: var(--surface-2) !important; color: var(--text); } .nav-pills .nav-link.active { background: var(--primary) !important; border-color: var(--primary); color: #fff; } /* ============================================================================ PHASE 3 — data grids (bootstrap-table chrome) + page-top rhythm. Scoped to BT-generated wrappers so it never touches modal / print / form tables. No data-* attributes or formatter JS are touched. ========================================================================== */ /* ---- Page-top rhythm: content no longer butts against the topbar ---------- */ #page-content-wrapper > .container-fluid { padding-top: 1rem; } /* ---- Grid toolbar: room for the search/controls inside the surface -------- */ .fixed-table-toolbar { padding: .5rem .5rem .65rem; } .fixed-table-toolbar .search input, .fixed-table-toolbar input.search-input { border: 1px solid var(--border) !important; border-radius: var(--radius); height: 36px; } .fixed-table-toolbar .search input:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 3px var(--primary-soft); } /* ---- Grid header + rows (zebra dropped in favor of hover) ----------------- */ .bootstrap-table thead th { border-top: 0; border-bottom: 1px solid var(--border); background-color: var(--surface-2); /* (B) tinted header band */ text-transform: uppercase; font-size: .7rem; letter-spacing: .04em; font-weight: 600; color: var(--text-muted); /* readable on the tint */ padding-top: .55rem; padding-bottom: .55rem; } /* (A) roomier rows; vertical padding only so header/body columns stay aligned */ .bootstrap-table tbody td { border-top: 1px solid var(--border); vertical-align: middle; padding: .8rem .75rem; } .bootstrap-table tbody tr:nth-of-type(odd) { background-color: transparent; } .bootstrap-table tbody tr:hover { background-color: var(--surface-2); } .bootstrap-table table { margin-bottom: 0; } /* Surface card for EVERY grid, even when the page didn't wrap it in .table-responsive (wrapper usage was historically inconsistent, so some list pages had the card and others didn't). When the grid IS inside a .table-responsive, that wrapper already provides the card — neutralize the inner one so we never get a double border/shadow. */ .bootstrap-table { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); } .table-responsive .bootstrap-table { background: transparent; border: 0; border-radius: 0; box-shadow: none; } /* ---- Grid pagination ------------------------------------------------------ */ .fixed-table-pagination { padding: .65rem .5rem .3rem; } .fixed-table-pagination .pagination-info { color: var(--text-muted); } .fixed-table-pagination .pagination { margin: 0; } .fixed-table-pagination .page-link { border: 1px solid var(--border); color: var(--text-muted); border-radius: var(--radius-sm); margin: 0 2px; } .fixed-table-pagination .page-link:hover { background: var(--surface-2); color: var(--text); } .fixed-table-pagination .page-item.active .page-link { background: var(--primary); border-color: var(--primary); color: #fff; } .fixed-table-pagination .page-item.disabled .page-link { color: var(--text-faint); } /* ============================================================================ PHASE 4 — forms. CSS-first: style the bare widgets that Django's form.as_table / as_p render without .form-control, plus Chosen, the XDSoft datepicker, and CodeMirror. The old :required rule was removed from base.html. Scoped to `form …` so the topbar omni-search and grid search (outside any
, and already styled) are not affected. ========================================================================== */ /* ---- Text fields, selects, textareas -------------------------------------- */ form input[type="text"], form input[type="email"], form input[type="number"], form input[type="password"], form input[type="url"], form input[type="tel"], form input[type="search"], form input[type="date"], form input[type="datetime-local"], form input[type="time"], form textarea, form select, .form-control { background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: .4rem .6rem; color: var(--text); font-size: .875rem; line-height: 1.45; max-width: 100%; } /* Required affordance — a left accent bar (replaces the black-border/gray-bg). */ form input:required:not([type="checkbox"]):not([type="radio"]), form select[required], form textarea[required], .form-control:required { border-left: 3px solid var(--primary); } /* Focus — declared last so it wins over the required border when focused. */ form input[type="text"]:focus, form input[type="email"]:focus, form input[type="number"]:focus, form input[type="password"]:focus, form input[type="url"]:focus, form input[type="tel"]:focus, form input[type="search"]:focus, form input[type="date"]:focus, form input[type="datetime-local"]:focus, form input[type="time"]:focus, form textarea:focus, form select:focus, .form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); outline: 0; } /* Input-group: keep prepended/appended buttons the same height as the field. (.btn and .form-control got independent padding/line-height in Phase 2/4, so the button rendered slightly taller — e.g. the assets AI-search button.) */ .input-group > .btn, .input-group-prepend .btn, .input-group-append .btn { padding-top: .4rem; padding-bottom: .4rem; line-height: 1.45; font-size: .875rem; /* match the field's font (Phase 4 set inputs to .875rem) */ } /* ============================================================================ Navigation niceties — smooth in-page scrolling, a global floating back-to-top button (markup/JS in base.html), and the asset-detail "On this page" section nav (with scrollspy active state). ========================================================================== */ html { scroll-behavior: smooth; scroll-padding-top: 1rem; } #back-to-top { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1030; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 999px; background: var(--primary); color: #fff; box-shadow: var(--shadow-md); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .15s ease, transform .15s ease, visibility .15s; } #back-to-top.show { opacity: 1; visibility: visible; transform: none; } #back-to-top:hover { background: var(--primary-600); color: #fff; } #asset-section-nav .nav-link { color: var(--text-muted); border-radius: var(--radius-sm); } #asset-section-nav .nav-link:hover { color: var(--text); background: var(--surface-2); } #asset-section-nav .nav-link.active { color: var(--primary); font-weight: 600; background: var(--primary-soft); } /* ============================================================================ DARK THEME — D2 polish. Routes the remaining hardcoded / Bootstrap colors so dark mode looks finished. Mostly scoped to [data-theme="dark"]; the few token-driven rules are no-ops in light (where --surface is #fff, etc.). ========================================================================== */ /* Alert text — light variants for contrast on the dark soft-tint backgrounds. Screen-only so print (which resets tokens to light) keeps the dark text. */ @media screen { [data-theme="dark"] .alert-success { color: #7ee0a3; } [data-theme="dark"] .alert-warning { color: #f0c987; } [data-theme="dark"] .alert-danger { color: #f1a3b0; } [data-theme="dark"] .alert-info { color: #8fcdec; } } /* Bootstrap hardcodes `.table { color:#212529 }`, which overrides the body token and renders dark-on-dark in dark mode (e.g. /settings/ "Organization Name:"). Route it through the token so table text flips with the theme. Token-driven, so it's a no-op in light. */ .table { color: var(--text); } /* Bootstrap also hardcodes .table cell/header borders (#dee2e6); route those through the token so grid lines flip with the theme (the darker --border tone in dark, not light-grey) — across grids AND plain tables. */ .table td, .table th { border-color: var(--border); } .table thead th { border-bottom-color: var(--border); } /* Bootstrap hardcodes the .progress track to a light grey (#e9ecef) — route it through the surface token so gauge/progress backgrounds aren't too bright in dark mode. */ .progress { background-color: var(--surface-2); } /* Muted (silenced) PC-Health issue rows: a subtle fill sets them apart from active issues. */ .health-issue-muted { background-color: var(--surface-2); } /* Bootstrap colour utilities */ [data-theme="dark"] .bg-light:not(.nav-link) { background-color: var(--surface-2) !important; } [data-theme="dark"] .bg-white { background-color: var(--surface) !important; } /* Bootstrap hardcodes 
 to near-black text; once its .bg-light plate (or the page surface)
   goes dark it's dark-on-dark. Route pre + nested code through the text token. */
[data-theme="dark"] pre,
[data-theme="dark"] pre code { color: var(--text); }

/* highlight.js ships a LIGHT theme (default.min.css) — its .hljs class paints a
   #F0F0F0 background with light-tuned token colours, so syntax-highlighted code
   (blueprint Properties/Validator/Worker, etc.) renders as a light box in dark
   mode. Re-tune .hljs to the dark surface + the app's semantic palette. */
[data-theme="dark"] .hljs { background: var(--surface-2); color: var(--text); }
[data-theme="dark"] .hljs-comment,
[data-theme="dark"] .hljs-quote { color: var(--text-muted); font-style: italic; }
[data-theme="dark"] .hljs-keyword,
[data-theme="dark"] .hljs-selector-tag,
[data-theme="dark"] .hljs-built_in,
[data-theme="dark"] .hljs-meta,
[data-theme="dark"] .hljs-name { color: #8fcdec; }
[data-theme="dark"] .hljs-string,
[data-theme="dark"] .hljs-attr,
[data-theme="dark"] .hljs-regexp,
[data-theme="dark"] .hljs-addition { color: #7ee0a3; }
[data-theme="dark"] .hljs-number,
[data-theme="dark"] .hljs-literal,
[data-theme="dark"] .hljs-variable,
[data-theme="dark"] .hljs-template-variable,
[data-theme="dark"] .hljs-type { color: #f0c987; }
[data-theme="dark"] .hljs-title,
[data-theme="dark"] .hljs-section,
[data-theme="dark"] .hljs-selector-id { color: #c9a9f0; }
[data-theme="dark"] .hljs-deletion { color: #f1a3b0; }
[data-theme="dark"] .hljs-emphasis { font-style: italic; }
[data-theme="dark"] .hljs-strong { font-weight: bold; }
[data-theme="dark"] .text-dark { color: var(--text) !important; }
[data-theme="dark"] .text-muted { color: var(--text-muted) !important; }
[data-theme="dark"] .text-secondary { color: var(--text-muted) !important; }

/* Semantic text utilities — Bootstrap's values are tuned for light backgrounds
   and read muddy on dark; lighten them (covers inline icons like the trash on
   the date-mapping rules, stat figures, etc.). */
[data-theme="dark"] .text-danger  { color: #f1a3b0 !important; }
[data-theme="dark"] .text-success { color: #7ee0a3 !important; }
[data-theme="dark"] .text-warning { color: #f0c987 !important; }
[data-theme="dark"] .text-info    { color: #8fcdec !important; }
[data-theme="dark"] .text-primary { color: var(--primary-700) !important; }

/* Neutral (.btn-secondary) button — surface-elevated in dark so it feels native
   (covers the NL search button + bootstrap-table column/export/refresh controls
   + Cancel/Mass-Change etc.); stays the solid slate in light. */
[data-theme="dark"] .btn-secondary {
  background: var(--surface-2);
  border-color: var(--border-strong);
  color: var(--text);
}
[data-theme="dark"] .btn-secondary:hover,
[data-theme="dark"] .btn-secondary:focus {
  background: var(--border-strong);
  border-color: var(--border-strong);
  color: var(--text);
}

/* Topbar (the quick-search bar) shares the dark body background in dark mode */
[data-theme="dark"] .navbar.bg-light { background: var(--canvas) !important; }

/* Striped non-grid tables get a faint light stripe; keep bootstrap-table grids zebra-free */
[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255,255,255,.035); }
[data-theme="dark"] .bootstrap-table tbody tr:nth-of-type(odd) { background-color: transparent; }

/* Bootstrap contextual table rows (.table-danger/-warning/-success/-info) are
   light pastels; in dark they kept the light fill with light text (white-on-pink
   on the Windows Update failed-updates rows). Re-tint them to the dark soft tones. */
[data-theme="dark"] .table-danger,  [data-theme="dark"] .table-danger > td,  [data-theme="dark"] .table-danger > th  { background-color: var(--danger-soft)  !important; color: var(--text); }
[data-theme="dark"] .table-warning, [data-theme="dark"] .table-warning > td, [data-theme="dark"] .table-warning > th { background-color: var(--warning-soft) !important; color: var(--text); }
[data-theme="dark"] .table-success, [data-theme="dark"] .table-success > td, [data-theme="dark"] .table-success > th { background-color: var(--success-soft) !important; color: var(--text); }
[data-theme="dark"] .table-info,    [data-theme="dark"] .table-info > td,    [data-theme="dark"] .table-info > th    { background-color: var(--info-soft)    !important; color: var(--text); }

/* Solid contextual background utilities (.bg-warning/-success/-danger/-info) are
   bright brand fills tuned for light mode (e.g. the .card-header.bg-warning panels
   on /settings/importexport, plus inline status chips). In dark they kept the
   glaring bright fill while the surrounding text cascade went light — washed-out
   and low-contrast. Route them to the dark soft tones, same as the table-context
   and mark treatments. Leave `color` un-!important so explicit .text-white/.text-light
   chips keep their own (still legible) text; the default case picks up --text. */
[data-theme="dark"] .bg-warning { background-color: var(--warning-soft) !important; color: var(--text); }
[data-theme="dark"] .bg-success { background-color: var(--success-soft) !important; color: var(--text); }
[data-theme="dark"] .bg-danger  { background-color: var(--danger-soft)  !important; color: var(--text); }
[data-theme="dark"] .bg-info    { background-color: var(--info-soft)    !important; color: var(--text); }

/* Grid pagination page-links (Bootstrap defaults them to white) */
[data-theme="dark"] .page-link { background-color: var(--surface); }

/* Bootstrap's .border utility hardcodes light-grey #dee2e6 (e.g. the assets
   AI-search box's outer border); give it the visible input-box tone in dark.
   (Grid LINES are handled globally above via .table td/th borders.) */
[data-theme="dark"] .border { border-color: var(--border-strong) !important; }

/* Force every bootstrap-table border (cells AND the fixed-table-* structural
   containers) to the token in dark — covers the light line atop a header row
   wherever it originates (Bootstrap-core .table borders or grid chrome). */
[data-theme="dark"] .bootstrap-table table,
[data-theme="dark"] .bootstrap-table th,
[data-theme="dark"] .bootstrap-table td,
[data-theme="dark"] .fixed-table-container,
[data-theme="dark"] .fixed-table-header,
[data-theme="dark"] .fixed-table-body,
[data-theme="dark"] .fixed-table-toolbar,
[data-theme="dark"] .fixed-table-pagination { border-color: var(--border) !important; }

/* Row hover: Bootstrap's .table-hover forces color:#212529 + a near-black tint
   on hover (text vanishes on dark). Give a discernible lighter highlight and
   keep the text light. */
[data-theme="dark"] .table-hover tbody tr:hover { background-color: #2a3a5e; color: var(--text); }

/* Omni search input (base.html sets inline #EEEEEE + focus JS; !important wins over inline) */
[data-theme="dark"] #omni-input { background-color: var(--surface-2) !important; color: var(--text); }

/* Inline cyan command-shortcut highlights +  */
[data-theme="dark"] [style*="lightcyan"] { background-color: var(--surface-2) !important; color: var(--text) !important; }
[data-theme="dark"] mark { background-color: var(--warning-soft); color: var(--text); }

/* Integration logos are third-party images built for light backgrounds (dark
   artwork on transparent bg). Put them on a white plate in dark mode so they
   stay legible regardless of the individual logo's colors. */
[data-theme="dark"] .integration-logo {
  background: #fff;
  border-radius: var(--radius);
  padding: 8px 12px;
}

/* The org logo (top-right chip) ships as 
   — already a light plate. But our dark `.bg-light` override turned that plate
   dark, so transparent logos showed a dark backing. Force it back to white
   (!important + the ID selector beat the .bg-light !important override). Both
   modes, since the chip sits on the org's theme-independent brand colour. */
#navbarDropdown img { background: #fff !important; }

/* Chosen.js dropdown panel (token-driven; no-op in light) */
.chosen-container .chosen-drop { background: var(--surface) !important; }
.chosen-container .chosen-results { color: var(--text); }
.chosen-container-single .chosen-search input,
.chosen-container .chosen-search-input {
  background: var(--surface) !important;
  color: var(--text);
  border-color: var(--border-strong) !important;
}

/* XDSoft datepicker popup */
[data-theme="dark"] .xdsoft_datetimepicker {
  background: var(--surface) !important;
  color: var(--text);
  box-shadow: var(--shadow-md) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_calendar td,
[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_calendar th,
[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_time_box .xdsoft_time {
  background: var(--surface-2) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .xdsoft_datetimepicker .xdsoft_label { background: var(--surface) !important; color: var(--text) !important; }

/* jstree (Org Units tree, /people) hardcodes light-blue hover/selected states
   (#e7f4f9 / #beebff) — dark highlights wash out the light node text. Retheme
   the hover/selected states for dark. */
[data-theme="dark"] .jstree-default .jstree-hovered,
[data-theme="dark"] .jstree-default .jstree-wholerow-hovered {
  background: var(--surface-2);
  box-shadow: none;
}
[data-theme="dark"] .jstree-default .jstree-clicked,
[data-theme="dark"] .jstree-default .jstree-wholerow-clicked {
  background: #2f4288;   /* more pronounced than --primary-soft, which sits too close to the surface */
  box-shadow: none;
}

/* jQuery UI sortable rows (.ui-state-default — e.g. the date-mapping rules list)
   hardcode a light-theme text colour (#555) and a light gradient background, so
   rule numbers and inline chips render dark-on-dark. Route to the tokens. */
[data-theme="dark"] .ui-state-default {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text);
}

/* Print always renders light, regardless of the active theme. */
@media print {
  :root[data-theme="dark"] {
    --canvas:#fff; --surface:#fff; --surface-2:#f1f3f5;
    --border:#e7e9ee; --border-strong:#d6dae1;
    --text:#14181f; --text-muted:#69707d; --text-faint:#98a0ac;
    --primary:#3b5bdb; --primary-700:#2942a8; --primary-soft:#eef1fd;
    --success-soft:#e7f6ee; --warning-soft:#fcf3e3; --danger-soft:#fdebef; --info-soft:#e7f3fa;
  }
}

/* Labels + as_table layout spacing */
form label { font-weight: 500; color: var(--text); }
form table th { font-weight: 500; color: var(--text); text-align: left; vertical-align: top; padding: .4rem .6rem; }
form table td { padding: .35rem .6rem; }

/* ---- Chosen.js (flatten the dated gradient; keep native sizing/arrow) ----- */
.chosen-container-single .chosen-single,
.chosen-container-multi .chosen-choices {
  background: var(--surface) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: none !important;
  color: var(--text);
}
.chosen-container-active .chosen-single,
.chosen-container-active .chosen-choices {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px var(--primary-soft) !important;
}
.chosen-container .chosen-drop {
  border-color: var(--border-strong) !important;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm) !important;
  box-shadow: var(--shadow-md) !important;
}
.chosen-container .chosen-results li.highlighted { background: var(--primary) !important; }
.chosen-container-multi .chosen-choices li.search-choice {
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: none !important;
  color: var(--text) !important;
}

/* ---- XDSoft datetimepicker (light theming of the popup) ------------------- */
.xdsoft_datetimepicker {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-md) !important;
}
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current,
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box > div > div.xdsoft_current {
  background: var(--primary) !important;
  box-shadow: none !important;
}

/* ============================================================================
   SimpleMDE markdown editor — dark theme.
   The editor (service-case description + log entries) is loaded from a CDN with
   no dark styling, so in dark mode its CodeMirror body stayed white and its
   toolbar icons (dark by default, with !important) were invisible on the dark
   page. Scoped to [data-theme="dark"] so light mode is untouched; !important is
   required to beat SimpleMDE's own !important toolbar rules and CDN load order.
   ========================================================================== */

/* ---- Toolbar: container + icon buttons ---- */
[data-theme="dark"] .editor-toolbar {
  border-color: var(--border);
  background: var(--surface-2);
}
[data-theme="dark"] .editor-toolbar a {
  color: var(--text-muted) !important;
}
[data-theme="dark"] .editor-toolbar a.active,
[data-theme="dark"] .editor-toolbar a:hover {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--text) !important;
}
[data-theme="dark"] .editor-toolbar i.separator {
  border-left-color: var(--border);
  border-right-color: var(--border);
}
[data-theme="dark"] .editor-toolbar.disabled-for-preview a:not(.no-disable) {
  opacity: .45;
}

/* ---- Editor body (CodeMirror) ---- */
[data-theme="dark"] .CodeMirror {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}
[data-theme="dark"] .CodeMirror-cursor {
  border-left-color: var(--text);
}
[data-theme="dark"] .CodeMirror-selected,
[data-theme="dark"] .CodeMirror-focused .CodeMirror-selected {
  background: rgba(147, 166, 245, .22);   /* --link at low alpha */
}
/* inline code / code blocks: SimpleMDE tints these with rgba(0,0,0,.05) (invisible on dark) */
[data-theme="dark"] .CodeMirror .cm-comment {
  background: rgba(255, 255, 255, .06);
  color: var(--text);
}
[data-theme="dark"] .CodeMirror .cm-link,
[data-theme="dark"] .CodeMirror .cm-url {
  color: var(--link);
}
[data-theme="dark"] .CodeMirror .cm-header,
[data-theme="dark"] .CodeMirror .cm-strong { color: var(--text); }

/* ---- Rendered preview pane + status bar ---- */
[data-theme="dark"] .editor-preview,
[data-theme="dark"] .editor-preview-side {
  background: var(--surface);
  color: var(--text);
}
[data-theme="dark"] .editor-statusbar { color: var(--text-muted); }

/* ---- Fullscreen mode keeps the dark canvas ---- */
[data-theme="dark"] .CodeMirror-fullscreen,
[data-theme="dark"] .editor-toolbar.fullscreen,
[data-theme="dark"] .editor-preview-side {
  background: var(--surface);
}