/* ===================================================================== * Kariux UI shared design tokens + component primitives. * Consumed by both the admin and client areas so they feel like one * product. Token-driven and theme-aware (light + optional dark). * Adopt via the Blade components or the .kxui-* classes. * ===================================================================== */ :root { /* Brand falls back to the existing --button if a page sets it. */ --kx-brand: var(--button, #ff521c); --kx-brand-ink: #ffffff; --kx-brand-soft: color-mix(in srgb, var(--kx-brand) 10%, #ffffff); /* Surfaces & ink */ --kx-bg: #f6f8fa; --kx-surface: #ffffff; --kx-surface-2: #f8fafc; --kx-ink: #1f2733; --kx-ink-2: #5d697a; --kx-ink-3: #98a2b3; --kx-line: #e6e9ef; --kx-line-2: #eef1f5; /* Status */ --kx-success: #22a06b; --kx-info: #0ea5e9; --kx-warning: #f59e0b; --kx-danger: #e11d48; --kx-purple: #7c3aed; /* Radius / shadow / spacing scale */ --kx-radius-sm: 8px; --kx-radius: 12px; --kx-radius-lg: 16px; --kx-shadow-sm: 0 1px 2px rgba(16, 24, 40, .05); --kx-shadow: 0 8px 22px -16px rgba(16, 24, 40, .25); --kx-shadow-lg: 0 18px 45px -22px rgba(16, 24, 40, .35); --kx-gap: 16px; /* Typography scale */ --kx-fs-xs: 11.5px; --kx-fs-sm: 13px; --kx-fs: 14px; --kx-fs-lg: 16px; --kx-fs-xl: 22px; } /* Dark theme applied when the viewer opts in (data-theme="dark" on ). */ :root[data-theme="dark"] { /* Kariux UI tokens — refined "slate" dark: deep, cool, professional. */ --kx-bg: #0b0f15; /* page background */ --kx-surface: #141b24; /* cards */ --kx-surface-2: #1c2530; /* elevated / hover / inputs */ --kx-surface-3: #232e3b; /* highest elevation */ --kx-ink: #eef2f7; /* headings */ --kx-ink-2: #a7b2c0; /* body */ --kx-ink-3: #68727f; /* muted */ --kx-line: #26303c; /* borders */ --kx-line-2: #1b232d; /* subtle dividers */ --kx-brand-soft: color-mix(in srgb, var(--kx-brand) 20%, #141b24); /* Elevation shadows read better a touch deeper in dark. */ --kx-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --kx-shadow: 0 10px 26px -18px rgba(0, 0, 0, .7); --kx-shadow-lg: 0 22px 50px -24px rgba(0, 0, 0, .8); /* Remap the legacy theme variables so utility-class screens go dark too. */ --white: #141b24; /* .bg-white surfaces */ --frame: #0b0f15; /* page background */ --bg: #0b0f15; --title-text: #eef2f7; /* headings */ --para-text: #a7b2c0; /* body text */ --stroke: #1b232d; --black-stroke: #26303c; --frame-border: #26303c; --neutrals-100: #1c2530; --scroll-track: #141b24; --scroll-thumb: #323e4d; --title-text-10: rgba(238, 242, 247, 0.08); --sidebar-active: #1c2530; } /* Bootstrap / plugin surfaces that don't use the theme vars. */ :root[data-theme="dark"] body { background: var(--kx-bg); color: var(--kx-ink-2); } :root[data-theme="dark"] .modal-content, :root[data-theme="dark"] .dropdown-menu, :root[data-theme="dark"] .offcanvas, :root[data-theme="dark"] .card { background: var(--kx-surface); color: var(--kx-ink); border-color: var(--kx-line); } :root[data-theme="dark"] .dropdown-item { color: var(--kx-ink-2); } :root[data-theme="dark"] .dropdown-item:hover { background: var(--kx-surface-2); color: var(--kx-ink); } :root[data-theme="dark"] .form-control, :root[data-theme="dark"] .form-select { background-color: var(--kx-surface-2); border-color: var(--kx-line); color: var(--kx-ink); } :root[data-theme="dark"] .form-control::placeholder { color: var(--kx-ink-3); } :root[data-theme="dark"] .form-control:focus, :root[data-theme="dark"] .form-select:focus { background-color: var(--kx-surface-2); color: var(--kx-ink); border-color: var(--kx-brand); } :root[data-theme="dark"] .table { color: var(--kx-ink-2); border-color: var(--kx-line); } :root[data-theme="dark"] .table > :not(caption) > * > * { background-color: transparent; border-color: var(--kx-line); } :root[data-theme="dark"] .table thead th { color: var(--kx-ink-3); } :root[data-theme="dark"] .border-bottom, :root[data-theme="dark"] .border-top, :root[data-theme="dark"] .border { border-color: var(--kx-line) !important; } :root[data-theme="dark"] .btn-close { filter: invert(1) grayscale(1) brightness(1.6); } :root[data-theme="dark"] .text-dark { color: var(--kx-ink) !important; } :root[data-theme="dark"] .bg-light, :root[data-theme="dark"] .bg-body-bg { background-color: var(--kx-surface-2) !important; } :root[data-theme="dark"] .modal-header, :root[data-theme="dark"] .modal-footer { border-color: var(--kx-line); } :root[data-theme="dark"] .nav-tabs { border-color: var(--kx-line); } :root[data-theme="dark"] .alert-success { background: #12271c; color: #6ee7b7; border-color: #1c3a29; } :root[data-theme="dark"] .alert-danger { background: #2a1416; color: #fca5a5; border-color: #3a1c20; } :root[data-theme="dark"] .alert-warning { background: #2a2110; color: #fcd34d; border-color: #3a2e14; } :root[data-theme="dark"] img[src*="logo-black"], :root[data-theme="dark"] .kx-invert-dark { filter: brightness(0) invert(1); } /* Client dashboard custom cards (.kxc-*) hardcode light surfaces remap in dark. */ :root[data-theme="dark"] .kx-cust .kxc-att, :root[data-theme="dark"] .kx-cust .kxc-feed, :root[data-theme="dark"] .kx-cust .kxc-onb-step, :root[data-theme="dark"] .kx-cust .kxc-proj, :root[data-theme="dark"] .kx-cust .kxc-qa, :root[data-theme="dark"] .kx-cust .kxc-tile, :root[data-theme="dark"] .kx-cust .kx-nps { background: var(--kx-surface) !important; border-color: var(--kx-line) !important; } :root[data-theme="dark"] .kx-cust .kxc-att:hover, :root[data-theme="dark"] .kx-cust .kxc-qa:hover { background: var(--kx-surface-2) !important; } :root[data-theme="dark"] .kx-cust .kxc-onb-bar, :root[data-theme="dark"] .kx-cust .kxc-loyal-bar { background: var(--kx-line) !important; } :root[data-theme="dark"] .kx-cust .kxc-feed { border-bottom-color: var(--kx-line) !important; } /* Generic client component surfaces used across pages (files, team, brand-kit, etc.). */ :root[data-theme="dark"] .kx-files .kx-file-card, :root[data-theme="dark"] .kx-files .kx-chip, :root[data-theme="dark"] .kx-files .kx-files-search input { background: var(--kx-surface) !important; border-color: var(--kx-line) !important; color: var(--kx-ink); } :root[data-theme="dark"] .kx-file-thumb { background: var(--kx-surface-2) !important; } /* ===================================================================== * Dark-mode sidebar — the menu is a dark navy in BOTH themes, but the * dark token remap turns --frame (its icons/submenu text/caret) into the * page background. Restore legibility + a refined, professional treatment. * ===================================================================== */ :root[data-theme="dark"] .zSidebar { background-color: #0c1016; border-right: 1px solid #1a222c; } :root[data-theme="dark"] .zSidebar-logo { border-bottom-color: #1a222c; } :root[data-theme="dark"] .zSidebar-menu > li.sidebar-divider { border-top-color: #1a222c; } :root[data-theme="dark"] .zSidebar-menu > li.sidebar-divider p { color: #5b6673; } /* Top-level items */ :root[data-theme="dark"] .zSidebar-menu > li > a svg path, :root[data-theme="dark"] .zSidebar-menu > li > a svg circle, :root[data-theme="dark"] .zSidebar-menu > li > a svg rect { fill: #7e8b9a; transition: fill .15s ease; } :root[data-theme="dark"] .zSidebar-menu > li > a span { color: #c7cfda; } :root[data-theme="dark"] .zSidebar-menu > li > a::before { border-color: #7e8b9a; } :root[data-theme="dark"] .zSidebar-menu > li > a:hover { background-color: #151d27; } :root[data-theme="dark"] .zSidebar-menu > li > a:hover span { color: #eef2f7; } :root[data-theme="dark"] .zSidebar-menu > li > a:hover svg path, :root[data-theme="dark"] .zSidebar-menu > li > a:hover svg circle, :root[data-theme="dark"] .zSidebar-menu > li > a:hover svg rect { fill: #c7cfda; } /* Active top-level — brand-tinted highlight + left accent bar */ :root[data-theme="dark"] .zSidebar-menu > li > a.active { background-color: color-mix(in srgb, var(--kx-brand) 16%, transparent); position: relative; } :root[data-theme="dark"] .zSidebar-menu > li > a.active::after { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: var(--kx-brand); } :root[data-theme="dark"] .zSidebar-menu > li > a.active span { color: #ffffff; } :root[data-theme="dark"] .zSidebar-menu > li > a.active svg path, :root[data-theme="dark"] .zSidebar-menu > li > a.active svg circle, :root[data-theme="dark"] .zSidebar-menu > li > a.active svg rect { fill: var(--kx-brand); } :root[data-theme="dark"] .zSidebar-menu > li > a.active::before { border-color: #ffffff; } /* Submenu children (icon rows) */ :root[data-theme="dark"] .zSidebar-menu > li > a ~ div .zSidebar-submenu::before { background-color: #232c37; } :root[data-theme="dark"] .zSidebar-submenu li a { color: #9aa5b2; } :root[data-theme="dark"] .zSidebar-submenu li a i { color: #7e8b9a; } :root[data-theme="dark"] .zSidebar-submenu li a:hover { background-color: #151d27; color: #eef2f7; } :root[data-theme="dark"] .zSidebar-submenu li a:hover i { color: #c7cfda; } :root[data-theme="dark"] .zSidebar-submenu li a.active { background-color: color-mix(in srgb, var(--kx-brand) 16%, transparent); color: #ffffff; } :root[data-theme="dark"] .zSidebar-submenu li a.active i { color: var(--kx-brand); } :root[data-theme="dark"] .zSidebar-fixed > a p { color: #9aa5b2; } :root[data-theme="dark"] .zSidebar-fixed > a:hover p { color: #eef2f7; } /* ===================================================================== * Dark-mode element polish (Bootstrap surfaces the token remap misses). * ===================================================================== */ /* Theme toggle button */ :root[data-theme="dark"] #kxThemeToggle { background: var(--kx-surface-2) !important; border-color: var(--kx-line) !important; color: var(--kx-ink) !important; } :root[data-theme="dark"] #kxThemeToggle i { color: #fbbf24; } /* Top bar / header */ :root[data-theme="dark"] .main-header, :root[data-theme="dark"] .zHeader, :root[data-theme="dark"] .headerUserDropdown { background-color: var(--kx-surface); } /* Outline / light buttons */ :root[data-theme="dark"] .btn-outline-secondary { color: var(--kx-ink-2); border-color: var(--kx-line); } :root[data-theme="dark"] .btn-outline-secondary:hover { background: var(--kx-surface-2); color: var(--kx-ink); border-color: var(--kx-ink-3); } :root[data-theme="dark"] .btn-light, :root[data-theme="dark"] .btn-white { background: var(--kx-surface-2); border-color: var(--kx-line); color: var(--kx-ink); } :root[data-theme="dark"] .btn-light:hover, :root[data-theme="dark"] .btn-white:hover { background: var(--kx-surface-3); color: var(--kx-ink); } /* Links + brand text */ :root[data-theme="dark"] .text-primary { color: var(--kx-brand) !important; } :root[data-theme="dark"] .link-dark { color: var(--kx-ink) !important; } /* Dark text utility classes that never got remapped → were invisible on dark. .text-black (var(--black)=#000), .text-1b1c17 (#1b1c17), .text-title-color. */ :root[data-theme="dark"] .text-black, :root[data-theme="dark"] .text-1b1c17, :root[data-theme="dark"] .text-title-color, :root[data-theme="dark"] .text-neutrals-900, :root[data-theme="dark"] .text-neutrals-800 { color: var(--kx-ink) !important; } /* Headings with no explicit colour inherit body ink; force strong ink for clarity. */ :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 { color: var(--kx-ink); } /* Muted / secondary text — Bootstrap's is too dim on dark. */ :root[data-theme="dark"] .text-muted, :root[data-theme="dark"] .text-secondary, :root[data-theme="dark"] small.text-muted { color: var(--kx-ink-3) !important; } :root[data-theme="dark"] .small, :root[data-theme="dark"] small { color: inherit; } /* Table content reads brighter: names/links pop, body stays legible. */ :root[data-theme="dark"] .table td, :root[data-theme="dark"] .table tbody td { color: var(--kx-ink-2); } :root[data-theme="dark"] .table td strong, :root[data-theme="dark"] .table td b, :root[data-theme="dark"] .table td .fw-600, :root[data-theme="dark"] .table td .fw-700, :root[data-theme="dark"] .table td a:not(.btn) { color: var(--kx-ink) !important; } /* Pagination */ :root[data-theme="dark"] .pagination .page-link { background: var(--kx-surface); border-color: var(--kx-line); color: var(--kx-ink-2); } :root[data-theme="dark"] .pagination .page-link:hover { background: var(--kx-surface-2); color: var(--kx-ink); } :root[data-theme="dark"] .pagination .page-item.active .page-link { background: var(--kx-brand); border-color: var(--kx-brand); color: #fff; } :root[data-theme="dark"] .pagination .page-item.disabled .page-link { background: var(--kx-surface); color: var(--kx-ink-3); } /* Tabs / list groups / dividers */ :root[data-theme="dark"] .nav-tabs .nav-link { color: var(--kx-ink-2); border-color: transparent; } :root[data-theme="dark"] .nav-tabs .nav-link:hover { border-color: var(--kx-line); } :root[data-theme="dark"] .nav-tabs .nav-link.active { color: var(--kx-ink); background: var(--kx-surface); border-color: var(--kx-line) var(--kx-line) var(--kx-surface); } :root[data-theme="dark"] .list-group-item { background: var(--kx-surface); border-color: var(--kx-line); color: var(--kx-ink-2); } :root[data-theme="dark"] hr { border-color: var(--kx-line); opacity: 1; } /* Muted status pills that use inline light backgrounds fall back gracefully; generic bg-light badges get a dark surface. */ :root[data-theme="dark"] .badge.bg-light { background: var(--kx-surface-2) !important; color: var(--kx-ink-2) !important; } :root[data-theme="dark"] .badge.text-dark { color: var(--kx-ink) !important; } /* Inputs group text, disabled fields */ :root[data-theme="dark"] .input-group-text { background: var(--kx-surface-2); border-color: var(--kx-line); color: var(--kx-ink-2); } :root[data-theme="dark"] .form-control:disabled, :root[data-theme="dark"] .form-control[readonly] { background: var(--kx-surface); color: var(--kx-ink-3); } /* Scrollbar (webkit) */ :root[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--kx-scroll-thumb, #323e4d); } /* ===================================================================== * Buttons / links on the brand (primary) background must read WHITE. * `.bg-button` (solid orange) is frequently used without `.text-white`, * so its text inherited the page ink — poor contrast, worse in dark. * (`.bg-button-10/16` are light tints — a different class — untouched.) * ===================================================================== */ a.bg-button, button.bg-button, .btn.bg-button, .bg-button.btn, .btn-primary, .kxui-btn-primary, .kx-car-submit, .btn-kx { color: #fff; } a.bg-button:hover, button.bg-button:hover, .btn.bg-button:hover, .btn-primary:hover, .kxui-btn-primary:hover { color: #fff; } /* In dark mode, force it (beats any inherited ink token). */ :root[data-theme="dark"] a.bg-button, :root[data-theme="dark"] button.bg-button, :root[data-theme="dark"] .btn.bg-button, :root[data-theme="dark"] .bg-button.btn, :root[data-theme="dark"] .btn-primary, :root[data-theme="dark"] .kxui-btn-primary, :root[data-theme="dark"] .kx-car-submit, :root[data-theme="dark"] .btn-kx, :root[data-theme="dark"] .bg-badge-open-text, :root[data-theme="dark"] .zMainContent .btn.bg-button { color: #fff !important; } :root[data-theme="dark"] a.bg-button *, :root[data-theme="dark"] button.bg-button *, :root[data-theme="dark"] .btn.bg-button *, :root[data-theme="dark"] .btn-primary * { color: #fff !important; } /* Comfortable default padding for bare brand buttons that set none. */ .btn.bg-button, a.bg-button.btn { padding: 9px 18px; } /* ===================================================================== * kariux-admin.css ships its own --kxa-* token layer (light-only) that * drives admin headings, table headers/rows and badges. Remap it for dark * (higher specificity wins over the base .zMainContent definition). * ===================================================================== */ :root[data-theme="dark"] .zMainContent { --kxa-line: var(--kx-line); --kxa-line-soft: var(--kx-line-2); --kxa-ink: var(--kx-ink); --kxa-ink-2: var(--kx-ink-2); --kxa-muted: var(--kx-ink-3); --kxa-head-bg: transparent; --kxa-ink-soft: var(--kx-ink-2); } :root[data-theme="dark"] .zMainContent .table.align-middle tbody tr:hover td { background: var(--kx-surface-2) !important; } :root[data-theme="dark"] .zMainContent .bg-white.bd-one { box-shadow: 0 12px 30px -24px rgba(0,0,0,.8) !important; } :root[data-theme="dark"] .zMainContent .table img[style*="object-fit"] { border-color: var(--kx-line) !important; } /* Soft status badges → dark translucent chips. */ :root[data-theme="dark"] .zMainContent .badge.bg-success { background: color-mix(in srgb, var(--kx-success) 20%, transparent) !important; color: #6ee7b7 !important; } :root[data-theme="dark"] .zMainContent .badge.bg-danger { background: color-mix(in srgb, var(--kx-danger) 20%, transparent) !important; color: #fca5a5 !important; } :root[data-theme="dark"] .zMainContent .badge.bg-warning { background: color-mix(in srgb, var(--kx-warning) 22%, transparent) !important; color: #fcd34d !important; } :root[data-theme="dark"] .zMainContent .badge.bg-info { background: color-mix(in srgb, var(--kx-info) 20%, transparent) !important; color: #93c5fd !important; } :root[data-theme="dark"] .zMainContent .badge.bg-secondary { background: var(--kx-surface-2) !important; color: var(--kx-ink-2) !important; } /* ===================================================================== * Dark mode: borderless cards & tables — cleaner, more modern. Cards * separate from the page by surface contrast + subtle elevation instead * of hard outlines. * ===================================================================== */ :root[data-theme="dark"] .card, :root[data-theme="dark"] .kxui-card, :root[data-theme="dark"] .kxui-tile, :root[data-theme="dark"] .kxui-empty, :root[data-theme="dark"] .bd-one, :root[data-theme="dark"] .bd-c-black-stroke, :root[data-theme="dark"] .bd-c-stroke, :root[data-theme="dark"] .bd-c-frame-border, :root[data-theme="dark"] .bd-b-one, :root[data-theme="dark"] .bd-t-one { border-color: transparent !important; } /* Give the flat cards a whisper of elevation so they still read as cards. */ :root[data-theme="dark"] .card, :root[data-theme="dark"] .kxui-card, :root[data-theme="dark"] .bg-white.bd-one, :root[data-theme="dark"] .bd-one.bd-ra-10, :root[data-theme="dark"] .bd-one.bd-ra-8 { box-shadow: 0 1px 0 rgba(255,255,255,.02), 0 12px 30px -24px rgba(0,0,0,.8); } /* Tables: no outer/box borders + kill Bootstrap's light cell backgrounds. */ :root[data-theme="dark"] .table { --bs-table-bg: transparent; --bs-table-color: var(--kx-ink-2); --bs-table-striped-bg: var(--kx-surface-2); --bs-table-striped-color: var(--kx-ink); --bs-table-hover-bg: var(--kx-surface-2); --bs-table-hover-color: var(--kx-ink); --bs-table-border-color: transparent; color: var(--kx-ink-2); } :root[data-theme="dark"] .table > :not(caption) > * > *, :root[data-theme="dark"] .table th, :root[data-theme="dark"] .table td { border-color: transparent !important; background-color: transparent !important; } :root[data-theme="dark"] .table thead th, :root[data-theme="dark"] .table > thead > tr > th, :root[data-theme="dark"] table.dataTable thead th, :root[data-theme="dark"] .zTable thead tr th { background-color: transparent !important; color: var(--kx-ink-3) !important; } :root[data-theme="dark"] .table > tbody > tr:not(:last-child) > * { border-bottom: 1px solid var(--kx-line-2) !important; } :root[data-theme="dark"] .table thead th { border-bottom: 1px solid var(--kx-line) !important; } :root[data-theme="dark"] .zTable, :root[data-theme="dark"] .dataTable { border-color: transparent !important; } :root[data-theme="dark"] .table-light, :root[data-theme="dark"] .table-light > th, :root[data-theme="dark"] .table-light > td { background-color: var(--kx-surface-2) !important; color: var(--kx-ink) !important; } /* Keep intentional inner dividers subtle rather than gone. */ :root[data-theme="dark"] .border, :root[data-theme="dark"] .border-top, :root[data-theme="dark"] .border-bottom, :root[data-theme="dark"] .border-start, :root[data-theme="dark"] .border-end { border-color: var(--kx-line-2) !important; } /* Soften opaque light status/info bars seen in a few custom style blocks. */ :root[data-theme="dark"] [style*="#eef6ff"] { background: color-mix(in srgb, var(--kx-info) 15%, transparent) !important; color: #bcd8f5 !important; border-color: transparent !important; } /* ------------------------------- Page header ------------------------------- */ .kxui-page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; } .kxui-page-head .kxui-ph-title { font-size: var(--kx-fs-xl); font-weight: 700; color: var(--kx-ink); margin: 0 0 2px; } .kxui-page-head .kxui-ph-sub { font-size: var(--kx-fs-sm); color: var(--kx-ink-2); margin: 0; } .kxui-page-head .kxui-ph-actions { display: flex; flex-wrap: wrap; gap: 8px; } /* ------------------------------- Card ------------------------------- */ .kxui-card { background: var(--kx-surface); border: 1px solid var(--kx-line); border-radius: var(--kx-radius); padding: 20px; } .kxui-card.kxui-card-flush { padding: 0; overflow: hidden; } .kxui-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; } .kxui-card-title { font-size: var(--kx-fs-lg); font-weight: 700; color: var(--kx-ink); margin: 0; } /* ------------------------------- Stat tile ------------------------------- */ .kxui-tile { background: var(--kx-surface); border: 1px solid var(--kx-line); border-radius: var(--kx-radius); padding: 14px 16px; height: 100%; } .kxui-tile-label { display: flex; align-items: center; gap: 6px; font-size: var(--kx-fs-xs); color: var(--kx-ink-2); margin-bottom: 6px; } .kxui-tile-label i { color: var(--kx-tile-c, var(--kx-info)); } .kxui-tile-value { font-size: var(--kx-fs-xl); font-weight: 800; color: var(--kx-tile-c, var(--kx-ink)); line-height: 1.1; } .kxui-tile-value.ink { color: var(--kx-ink); } .kxui-tile-sub { font-size: var(--kx-fs-xs); color: var(--kx-ink-3); margin-top: 2px; } /* ------------------------------- Badge ------------------------------- */ .kxui-badge { display: inline-flex; align-items: center; gap: 4px; font-size: var(--kx-fs-xs); font-weight: 700; padding: 2px 9px; border-radius: 20px; background: color-mix(in srgb, var(--kx-badge-c, var(--kx-ink-3)) 14%, var(--kx-surface)); color: var(--kx-badge-c, var(--kx-ink-2)); } /* ------------------------------- Button ------------------------------- */ .kxui-btn { display: inline-flex; align-items: center; gap: 6px; font-size: var(--kx-fs-sm); font-weight: 600; padding: 9px 16px; border-radius: var(--kx-radius-sm); border: 1px solid var(--kx-line); background: var(--kx-surface); color: var(--kx-ink); text-decoration: none; cursor: pointer; transition: .12s; } .kxui-btn:hover { border-color: color-mix(in srgb, var(--kx-ink-3) 60%, var(--kx-line)); color: var(--kx-ink); } .kxui-btn-primary { background: var(--kx-brand); border-color: var(--kx-brand); color: var(--kx-brand-ink); } .kxui-btn-primary:hover { opacity: .92; color: var(--kx-brand-ink); } .kxui-btn-sm { padding: 6px 12px; font-size: var(--kx-fs-xs); } /* ------------------------------- Empty state ------------------------------- */ .kxui-empty { text-align: center; padding: 44px 20px; border: 1px dashed var(--kx-line); border-radius: var(--kx-radius); background: var(--kx-surface); } .kxui-empty-ic { font-size: 38px; color: var(--kx-ink-3); margin-bottom: 8px; } .kxui-empty-title { font-size: var(--kx-fs-lg); font-weight: 700; color: var(--kx-ink); margin: 0 0 4px; } .kxui-empty-text { font-size: var(--kx-fs-sm); color: var(--kx-ink-2); margin: 0; } /* Convenience grid for tiles */ .kxui-tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } /* --- Brand-align Bootstrap primary buttons (were blue) across dashboard areas --- */ .btn-primary { background-color: var(--kx-brand); border-color: var(--kx-brand); color: #fff; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary:not(:disabled):not(.disabled):active { background-color: var(--kx-brand); border-color: var(--kx-brand); color: #fff; opacity: .92; box-shadow: none; } .btn-outline-primary { color: var(--kx-brand); border-color: var(--kx-brand); } .btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active, .btn-outline-primary:not(:disabled):not(.disabled):active { background-color: var(--kx-brand); border-color: var(--kx-brand); color: #fff; box-shadow: none; } .btn-check:checked + .btn-outline-primary { background-color: var(--kx-brand); border-color: var(--kx-brand); } .text-primary { color: var(--kx-brand) !important; } .link-primary, a.text-primary:hover { color: var(--kx-brand) !important; } .form-check-input:checked { background-color: var(--kx-brand); border-color: var(--kx-brand); } .form-check-input:focus { border-color: var(--kx-brand); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--kx-brand) 20%, transparent); } .page-item.active .page-link { background-color: var(--kx-brand); border-color: var(--kx-brand); } .page-link { color: var(--kx-brand); } /* ------------------------------- Data-table enhancer ------------------------------- */ .kx-dt-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-bottom: 12px; } .kx-dt-search { position: relative; } .kx-dt-search i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--kx-ink-3); font-size: 13px; } .kx-dt-search input { padding: 7px 12px 7px 32px; border: 1px solid var(--kx-line); border-radius: var(--kx-radius-sm); font-size: var(--kx-fs-sm); background: var(--kx-surface); color: var(--kx-ink); min-width: 200px; } .kx-dt-export { display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px; border: 1px solid var(--kx-line); border-radius: var(--kx-radius-sm); background: var(--kx-surface); color: var(--kx-ink-2); font-size: var(--kx-fs-xs); font-weight: 600; cursor: pointer; } .kx-dt-export:hover { color: var(--kx-ink); border-color: var(--kx-ink-3); } th.kx-dt-sortable { cursor: pointer; user-select: none; white-space: nowrap; } th.kx-dt-sortable::after { content: '\2195'; opacity: .3; margin-left: 5px; font-size: 11px; } th.kx-dt-asc::after { content: '\2191'; opacity: .8; } th.kx-dt-desc::after { content: '\2193'; opacity: .8; } /* ===== Form rows: top/bottom padding + vertical gap so fields aren't cramped ===== */ form .row { padding-top: 6px; padding-bottom: 6px; } form .row:not([class*="rg-"]) { row-gap: 12px; } form .modal-body .row, form .modal-body .row:not([class*="rg-"]) { row-gap: 14px; } #kxCouponToggle { color: var(--kx-brand) !important; } :root[data-theme="dark"] .sf-select-section.select2-selection--multiple { background-color: var(--kx-surface-2)!important; border-color: var(--kx-line)!important; color: var(--kx-ink)!important; } :root[data-theme="dark"] .kx-aff .zMainContent { background: var(--white)!important; }