/* CRM — DESIGN-V3 (dark-first) layer. Loaded AFTER custom.css: adds Albert Sans, a dark palette + light/dark toggle, DESIGN-V3 refinements, and re-tokens the CRM's hardcoded-light chrome so it works in both themes. Bootstrap 5.3 dark via data-bs-theme. Layout markup (.wrapper/.sidebar/.navbar-custom/.content) unchanged. */ :root{ --ink:#16202a; --muted:#5d6b78; --faint:#5f6a75; --line:#e3e8ec; --primary:#387698; --primary-d:#2c6180; --teal-soft:#e9f1f6; --green:#1d7f52; --amber:#8a6200; --red:#c02c3d; --canvas:#f2f4f7; --card:#fff; --nav:#0f2230; --soft2:#eef1f3; --shadow:0 1px 2px rgba(15,34,48,.04),0 8px 24px rgba(15,34,48,.07); --bs-border-radius:.85rem; } [data-bs-theme=dark]{ --ink:#e6edf3; --muted:#9cb0bd; --faint:#8093a1; --line:#22303d; --primary:#5da4c8; --primary-d:#8cc3de; --teal-soft:#15303f; --green:#3fae7c; --amber:#e3c06a; --red:#ef7585; --canvas:#0e161f; --card:#151f2b; --nav:#0f2230; --soft2:#1c2937; --shadow:0 1px 2px rgba(0,0,0,.25),0 8px 24px rgba(0,0,0,.35); /* DESIGN-V3 dark palette over Bootstrap's defaults */ --bs-body-bg:#0e161f; --bs-body-color:#e6edf3; --bs-border-color:#22303d; --bs-secondary-color:#9cb0bd; --bs-tertiary-bg:#1c2937; --bs-secondary-bg:#101b26; --bs-emphasis-color:#fff; --bs-card-bg:#151f2b; --bs-dropdown-bg:#151f2b; --bs-dropdown-link-hover-bg:#1c2937; --bs-modal-bg:#151f2b; } body{font-family:'Albert Sans',system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif} h1,h2,h3,h4,h5,h6,.page-title{letter-spacing:-.01em} .page-title{font-weight:800} /* ── canvas + topbar + footer ─────────────────────────────────────────── */ .content{background:var(--canvas)} .navbar-custom{background:var(--card);border-bottom-color:var(--line)} .topbar h4{color:var(--ink)} .button-toggle-menu{color:var(--muted)} .topbar-menu .nav-link{color:var(--muted)} .topbar-menu .nav-link:hover{color:var(--primary)} .footer{background:var(--card);border-top-color:var(--line);color:var(--muted)} /* ── sidebar (DESIGN-V3 deep navy + teal active accent) ───────────────── */ .sidebar{background:var(--nav)} .menu-title{color:#547181} .menu-link{color:#9db4c2;min-height:44px;border-left-color:transparent} .menu-link:hover{color:#d9e6ee;background:rgba(255,255,255,.06)} .menu-item.active .menu-link{color:#fff;background:rgba(93,160,196,.16);border-left-color:#6fb3d4} /* ── cards / dropdowns / modals ───────────────────────────────────────── */ .card{border:0;border-radius:18px;box-shadow:var(--shadow);--bs-card-bg:var(--card)} .card-header{background:transparent;border-bottom-color:var(--line)} .dropdown-menu{box-shadow:var(--shadow)} .dropdown-header{color:var(--muted)} .dropdown-item:hover{background:var(--soft2)} .toast-container .toast{background:var(--card)} .modal-content{background:var(--card)} /* ── tables (theme-adaptive header) ───────────────────────────────────── */ .table{--bs-table-bg:transparent;color:var(--ink)} .table thead th{background:var(--soft2);color:var(--faint);border-color:var(--line)} .table tbody td{border-color:var(--line)} .table-light,.table>thead.table-light>tr>th{--bs-table-bg:var(--soft2); --bs-table-color:var(--ink);--bs-table-border-color:var(--line);background-color:var(--soft2)} /* ── forms ────────────────────────────────────────────────────────────── */ .form-label{color:var(--muted)} .form-control:not(.form-control-sm),.form-select:not(.form-select-sm){min-height:44px} .input-group-sm .form-control,.input-group-sm .form-select{min-height:auto} .form-control:focus,.form-select:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(56,118,152,.18)} /* ── badges (pill) ────────────────────────────────────────────────────── */ .badge{border-radius:999px} /* ── global search / notifications / search results ───────────────────── */ #globalSearchWrap .input-group-text,#globalSearchWrap .form-control{background:var(--soft2);border-color:var(--line);color:var(--ink)} #globalSearchWrap .form-control:focus{background:var(--card)} .search-group-title{background:var(--soft2);color:var(--faint)} .search-result-item,.notif-item{color:var(--ink);border-bottom-color:var(--line)} .search-result-item:hover,.notif-item:hover{background:var(--soft2)} .search-result-item .search-meta,.notif-item .notif-desc{color:var(--muted)} /* crm.js renders the result title with Bootstrap's .text-dark (#212529 !important), invisible on the dark dropdown — let it inherit the item's theme-aware --ink. */ .search-result-item .text-dark{color:inherit!important} /* ── kanban / timeline / bulk bar / skeleton ──────────────────────────── */ .kanban-column{background:var(--soft2)} .kanban-card{background:var(--card)} [data-bs-theme=dark] .kanban-count{background:rgba(255,255,255,.1)} .timeline::before{background:var(--line)} .bulk-action-bar{border-color:var(--line)} .empty-state-title{color:var(--ink)} [data-bs-theme=dark] .skeleton{background:linear-gradient(90deg,#1a2430 25%,#243040 50%,#1a2430 75%);background-size:200% 100%} .inline-edit-stock{border-bottom-color:var(--muted)} /* profit colours: brighten in dark for AA */ [data-bs-theme=dark] .profit-good{color:#3fae7c} [data-bs-theme=dark] .profit-low{color:#e3c06a} [data-bs-theme=dark] .profit-negative{color:#ef7585} /* ── login ────────────────────────────────────────────────────────────── */ .login-box{background:var(--card)} [data-bs-theme=dark] .login-page{background:linear-gradient(135deg,#12303f 0%,#0e161f 100%)} /* ── theme toggle (>=44px) ────────────────────────────────────────────── */ .ttoggle{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%; border:1px solid var(--line);background:var(--card);color:var(--muted);cursor:pointer;padding:0} .ttoggle:hover{color:var(--ink)} .ttoggle:focus-visible{outline:2px solid var(--primary);outline-offset:2px} /* ── Quill note editor + note items (dark) ──────────────────────────────── The lead/client note pages load Quill Snow + fixed light-theme note rules via $extraCss, which the header prints AFTER this file. Those page rules are not !important, so these dark overrides win on cascade weight despite loading earlier — keeping the toolbar glyphs, placeholder, editor text and note-hover legible on the dark card. Only active in dark; light keeps Quill's own look. */ [data-bs-theme=dark] .note-item:hover{background-color:var(--soft2)!important} [data-bs-theme=dark] .ql-toolbar.ql-snow, [data-bs-theme=dark] .ql-container.ql-snow{border-color:var(--line)!important} [data-bs-theme=dark] .ql-editor{color:var(--ink)!important} [data-bs-theme=dark] .ql-editor.ql-blank::before{color:var(--faint)!important} [data-bs-theme=dark] .ql-snow .ql-stroke{stroke:var(--ink)!important} [data-bs-theme=dark] .ql-snow .ql-fill, [data-bs-theme=dark] .ql-snow .ql-stroke.ql-fill{fill:var(--ink)!important} [data-bs-theme=dark] .ql-snow .ql-picker{color:var(--ink)!important} [data-bs-theme=dark] .ql-snow .ql-picker-options{background-color:var(--card)!important;border-color:var(--line)!important} [data-bs-theme=dark] .ql-snow.ql-toolbar button:hover .ql-stroke, [data-bs-theme=dark] .ql-snow.ql-toolbar button.ql-active .ql-stroke, [data-bs-theme=dark] .ql-snow .ql-toolbar button:hover .ql-stroke{stroke:var(--primary)!important} [data-bs-theme=dark] .ql-snow.ql-toolbar button:hover .ql-fill, [data-bs-theme=dark] .ql-snow.ql-toolbar button.ql-active .ql-fill{fill:var(--primary)!important} [data-bs-theme=dark] .ql-snow.ql-toolbar button:hover, [data-bs-theme=dark] .ql-snow .ql-picker-label:hover, [data-bs-theme=dark] .ql-snow .ql-picker-item:hover, [data-bs-theme=dark] .ql-snow .ql-picker-item.ql-selected{color:var(--primary)!important} /* ── page-level dark-mode polish ────────────────────────────────────────── A few pages ship their own $extraCss/