/* =============================================================================
   Cynix Noir — Black shell + Light content
   -----------------------------------------------------------------------------
   Loaded AFTER dashlite9b70.css + theme9b70.css so its tokens win.

   Layout brief:
     • Black shell: sidebar + topbar are pure black with white text.
       Sidebar active state = gray tile (contrast inversion).
     • Light content area: soft off-white body with pure white cards
       that "pop" against it. Editorial typography, hairline borders.
     • Gray buttons for secondary / default actions; black filled for
       primary CTAs; outlined for tertiary.

   Palette (three tokens, everything derived from opacity):
     --cx-black : #080808   (shell + primary ink)
     --cx-white : #f4f6fa   (page bg / dark-shell text)
     --cx-gray  : #f2f2f2   (buttons, active tiles, subtle surfaces)
   ========================================================================== */

:root {
    /* Core palette */
    --cx-black:      #080808;
    --cx-white:      #f4f6fa;
    --cx-gray:       #f2f2f2;
    --cx-white-pure: #ffffff;

    /* Content-area surfaces (light) */
    --cx-bg:         #f4f6fa;     /* body / content region */
    --cx-panel:      #ffffff;     /* cards, panels — pure white */
    --cx-panel-2:    #f7f8fb;     /* subtle callout / alt row */
    --cx-panel-3:    #f2f2f2;     /* buttons default, chips */

    /* Ink ramp on light */
    --cx-ink:        #080808;                    /* headings, KPI values */
    --cx-ink-2:      rgba(8, 8, 8, .78);         /* body */
    --cx-ink-3:      rgba(8, 8, 8, .56);         /* secondary */
    --cx-ink-4:      rgba(8, 8, 8, .40);         /* tertiary / meta */
    --cx-ink-5:      rgba(8, 8, 8, .22);         /* disabled */

    /* Dark-shell (sidebar + topbar) surfaces & text */
    --cx-shell:        #080808;
    --cx-shell-2:      #141414;     /* elevated / hover on shell */
    --cx-shell-active: #f2f2f2;     /* active menu tile (gray) */
    --cx-shell-ink:    #f4f6fa;
    --cx-shell-ink-2:  rgba(244, 246, 250, .74);
    --cx-shell-ink-3:  rgba(244, 246, 250, .50);
    --cx-shell-ink-4:  rgba(244, 246, 250, .34);
    --cx-shell-border: rgba(244, 246, 250, .08);

    /* Hairline borders on light */
    --cx-border:     rgba(8, 8, 8, .06);
    --cx-border-2:   rgba(8, 8, 8, .10);
    --cx-border-3:   rgba(8, 8, 8, .18);

    /* Elevation */
    --cx-shadow-sm:  0 1px 2px rgba(8, 8, 8, .04);
    --cx-shadow-md:  0 4px 14px rgba(8, 8, 8, .06), 0 1px 3px rgba(8, 8, 8, .03);
    --cx-shadow-lg:  0 18px 44px rgba(8, 8, 8, .12), 0 4px 10px rgba(8, 8, 8, .05);

    /* Focus ring */
    --cx-focus:      0 0 0 3px rgba(8, 8, 8, .12);

    /* Radii */
    --cx-radius-sm:  6px;
    --cx-radius:     10px;
    --cx-radius-lg:  14px;
    --cx-radius-xl:  18px;

    /* Type */
    --cx-font:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* ═══ BASE ═════════════════════════════════════════════════════════════════ */

html, body {
    background: var(--cx-bg) !important;
    color: var(--cx-ink) !important;
    font-family: var(--cx-font) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -.005em;
}

.nk-app-root { background: var(--cx-bg) !important; min-height: 100vh; }
.nk-main, .nk-wrap { background: var(--cx-bg) !important; }
.nk-content, .nk-content-inner, .nk-content-body { background: transparent !important; }

/* Breathing room between the black topbar and the first content block */
.nk-content { padding: 26px 0 40px !important; }

a { color: var(--cx-ink); }
a:hover, a:focus { color: var(--cx-black); text-decoration: none; }

::selection { background: var(--cx-black); color: var(--cx-white); }
::-moz-selection { background: var(--cx-black); color: var(--cx-white); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(8, 8, 8, .18); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(8, 8, 8, .32); }

/* ═══ FLATTEN THE DASHLITE COLOUR SYSTEM ═══════════════════════════════════ */

.bg-primary, .bg-info, .bg-success, .bg-warning, .bg-danger, .bg-purple, .bg-teal,
.bg-orange, .bg-pink, .bg-indigo, .bg-blue, .bg-red, .bg-green, .bg-yellow,
.bg-primary-dim, .bg-success-dim, .bg-warning-dim, .bg-danger-dim, .bg-info-dim {
    background-color: var(--cx-black) !important;
    color: var(--cx-white) !important;
}
.bg-light, .bg-lighter { background-color: var(--cx-panel-2) !important; color: var(--cx-ink) !important; }
.bg-white { background-color: var(--cx-panel) !important; color: var(--cx-ink) !important; }
.bg-dark, .is-dark { background: var(--cx-black) !important; color: var(--cx-white) !important; }

.text-primary, .text-info, .text-success, .text-warning, .text-danger,
.text-purple, .text-teal, .text-orange, .text-pink, .text-indigo,
.text-blue, .text-red, .text-green, .text-yellow, .text-base, .text-dark {
    color: var(--cx-ink) !important;
}
.text-soft, .text-muted, .text-secondary { color: var(--cx-ink-3) !important; }
.text-white { color: var(--cx-white) !important; }
.text-lighter { color: var(--cx-ink-4) !important; }

.border-primary, .border-info, .border-success, .border-warning, .border-danger,
.border-light { border-color: var(--cx-border-2) !important; }

/* ═══ TYPOGRAPHY ═══════════════════════════════════════════════════════════ */

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--cx-ink) !important;
    font-weight: 700;
    letter-spacing: -.02em;
}
.page-title, .nk-block-title { color: var(--cx-ink) !important; }
.title, .card-title, .nk-block-head-content h3, .nk-block-head-content h4 {
    color: var(--cx-ink) !important;
    font-weight: 700;
    letter-spacing: -.015em;
}
.sub-text, .nk-block-des, .nk-block-des p { color: var(--cx-ink-3) !important; }
.lead-text { color: var(--cx-ink) !important; font-weight: 600; }

.overline-title, .caption-text {
    color: var(--cx-ink-4) !important;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 10.5px !important;
    font-weight: 700 !important;
}

/* ═══ SIDEBAR ═════════════════════════════════════════════════════════════
   Black shell against light body — high contrast, editorial nav.
   Active state = GRAY tile (inverted from the black bg).
   ═════════════════════════════════════════════════════════════════════════ */

.nk-sidebar {
    background: var(--cx-shell) !important;
    border-right: none !important;
    color: var(--cx-shell-ink) !important;
    box-shadow: 1px 0 0 rgba(8, 8, 8, .08);
}
.nk-sidebar-inner, .nk-sidebar-main { background: transparent !important; }

.nk-sidebar .nk-menu-content > .title,
.nk-sidebar h5.title,
.nk-sidebar h6.overline-title {
    padding: 20px 22px 10px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
    color: var(--cx-shell-ink-4) !important;
    margin: 0 !important;
    border-top: 1px solid var(--cx-shell-border);
    margin-top: 6px !important;
}
.nk-sidebar .nk-menu-content:first-child > .title:first-child,
.nk-sidebar h5.title:first-of-type { border-top: none; margin-top: 0 !important; }

.nk-sidebar .nk-menu { padding: 4px 10px !important; margin: 0 !important; }
.nk-sidebar .nk-menu-item { margin: 2px 0 !important; }

.nk-sidebar .nk-menu-link {
    color: var(--cx-shell-ink-2) !important;
    padding: 10px 14px !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    font-size: 13.5px !important;
    transition: background .12s ease, color .12s ease;
    display: flex; align-items: center; gap: 12px;
    letter-spacing: -.005em;
    line-height: 1.35;
}
.nk-sidebar .nk-menu-link:hover {
    background: rgba(244, 246, 250, .06) !important;
    color: var(--cx-shell-ink) !important;
}

/* Active — GRAY tile with black text (contrast inversion) */
.nk-sidebar .nk-menu-item.active > .nk-menu-link,
.nk-sidebar .nk-menu-item.current-page > .nk-menu-link {
    background: var(--cx-shell-active) !important;
    color: var(--cx-black) !important;
    font-weight: 700 !important;
}
.nk-sidebar .nk-menu-item.active > .nk-menu-link .nk-menu-icon,
.nk-sidebar .nk-menu-item.current-page > .nk-menu-link .nk-menu-icon,
.nk-sidebar .nk-menu-item.active > .nk-menu-link .icon,
.nk-sidebar .nk-menu-item.current-page > .nk-menu-link .icon {
    color: var(--cx-black) !important;
    opacity: 1 !important;
}

.nk-sidebar .nk-menu-icon, .nk-sidebar .nk-menu-link .icon {
    color: inherit !important;
    opacity: .82;
    font-size: 17px !important;
}
.nk-sidebar .nk-menu-link:hover .nk-menu-icon { opacity: 1 !important; }
.nk-sidebar .nk-menu-toggle::after { color: var(--cx-shell-ink-3) !important; }
.nk-sidebar .nk-menu-sub { background: transparent !important; padding: 4px 0 4px 8px !important; }
.nk-sidebar .nk-menu-sub .nk-menu-link {
    padding: 7px 12px 7px 40px !important;
    font-size: 12.5px !important;
    color: var(--cx-shell-ink-3) !important;
    border-radius: 6px !important;
}
.nk-sidebar .nk-menu-sub .nk-menu-link:hover { color: var(--cx-shell-ink) !important; }
.nk-sidebar .nk-menu-sub .nk-menu-item.active > .nk-menu-link {
    color: var(--cx-black) !important;
    background: var(--cx-shell-active) !important;
    font-weight: 700 !important;
}

/* Brand block */
.cynix-sidebar-brand {
    background: var(--cx-shell) !important;
    border-bottom: 1px solid var(--cx-shell-border) !important;
    padding: 20px 22px !important;
}
/* Cynix logo PNG is gray-on-transparent — force it white on the dark shell */
.nk-sidebar .cynix-sidebar-brand img,
.nk-header-brand .logo-img { filter: brightness(0) invert(1); }

/* ═══ TOP BAR ═════════════════════════════════════════════════════════════
   Same black shell as the sidebar for a unified dark frame.
   ═════════════════════════════════════════════════════════════════════════ */

.nk-header, .nk-header-fixed {
    background: var(--cx-shell) !important;
    border-bottom: 1px solid var(--cx-shell-border) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}
.nk-header .nk-header-wrap { min-height: 62px; }
.nk-header .nk-quick-nav-icon,
.nk-header .dropdown-toggle { color: var(--cx-shell-ink-2) !important; }
.nk-header .nk-quick-nav-icon:hover {
    color: var(--cx-shell-ink) !important;
    background: rgba(244, 246, 250, .06);
    border-radius: 8px;
}

/* User chip on the dark topbar */
.user-toggle {
    padding: 4px 6px !important;
    border-radius: 8px !important;
    transition: background .12s ease;
}
.user-toggle:hover { background: rgba(244, 246, 250, .06); }
.user-toggle .user-avatar {
    background: var(--cx-shell-active) !important;   /* gray tile */
    color: var(--cx-black) !important;
    font-weight: 800 !important;
    letter-spacing: -.02em;
}
.user-toggle .user-status {
    color: var(--cx-shell-ink-3) !important;
    font-size: 10.5px !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
}
.user-toggle .user-name {
    color: var(--cx-shell-ink) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    letter-spacing: -.01em;
}

/* Inside the user dropdown (which is on the LIGHT surface), the avatar
   should sit on white and use black bg for pop. */
.dropdown-menu .user-card-wrap .user-avatar,
.dropdown-menu .user-card .user-avatar {
    background: var(--cx-black) !important;
    color: var(--cx-white) !important;
}

/* ═══ CARDS ═══════════════════════════════════════════════════════════════ */

.card, .card-bordered, .nk-block .card {
    background: var(--cx-panel) !important;
    border: 1px solid var(--cx-border) !important;
    border-radius: var(--cx-radius-lg) !important;
    box-shadow: var(--cx-shadow-sm) !important;
    color: var(--cx-ink) !important;
}
.card-inner { color: var(--cx-ink) !important; padding: 20px !important; }
.card-inner-lg { padding: 24px !important; }
.card-title-group + .card-inner { padding-top: 0 !important; }
.card-head, .card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--cx-border) !important;
    padding: 16px 20px !important;
}
.card-head .card-title { margin: 0 !important; }

/* ═══ BUTTONS ═════════════════════════════════════════════════════════════
   Default (light/secondary) = GRAY. Primary = solid BLACK. Outline = bordered.
   ═════════════════════════════════════════════════════════════════════════ */

.btn {
    border-radius: var(--cx-radius-sm) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: 8px 16px !important;
    transition: transform .08s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, color .15s ease !important;
    border: 1px solid transparent !important;
    letter-spacing: -.005em;
    line-height: 1.35;
    display: inline-flex; align-items: center; gap: 8px;
}
.btn:focus, .btn:focus-visible { box-shadow: var(--cx-focus) !important; outline: none !important; }
.btn:active { transform: translateY(1px); }
.btn .icon { font-size: 15px; }

/* Primary — solid BLACK for strong CTAs */
.btn-primary, .btn-info, .btn-success, .btn-warning, .btn-danger, .btn-dark {
    background: var(--cx-black) !important;
    border-color: var(--cx-black) !important;
    color: var(--cx-white) !important;
}
.btn-primary:hover, .btn-info:hover, .btn-success:hover, .btn-warning:hover,
.btn-danger:hover, .btn-dark:hover {
    background: #1a1a1a !important;
    border-color: #1a1a1a !important;
    color: var(--cx-white) !important;
    box-shadow: 0 4px 12px rgba(8, 8, 8, .18) !important;
}

/* Outline — thin black border, invert on hover */
.btn-outline-primary, .btn-outline-info, .btn-outline-success, .btn-outline-warning,
.btn-outline-danger, .btn-outline-dark, .btn-outline-secondary, .btn-outline-light {
    background: transparent !important;
    color: var(--cx-black) !important;
    border: 1px solid var(--cx-border-3) !important;
}
.btn-outline-primary:hover, .btn-outline-info:hover, .btn-outline-success:hover,
.btn-outline-warning:hover, .btn-outline-danger:hover, .btn-outline-dark:hover,
.btn-outline-secondary:hover, .btn-outline-light:hover {
    background: var(--cx-black) !important;
    color: var(--cx-white) !important;
    border-color: var(--cx-black) !important;
}

/* Light / Secondary — GRAY fill (the default "soft" button per brief) */
.btn-light, .btn-secondary {
    background: var(--cx-panel-3) !important;
    color: var(--cx-black) !important;
    border-color: var(--cx-panel-3) !important;
}
.btn-light:hover, .btn-secondary:hover {
    background: #e6e6e6 !important;
    color: var(--cx-black) !important;
    border-color: #e6e6e6 !important;
}

/* Trigger / icon — square button. Plain .btn-icon (no variant class) is
   transparent with a gray-tile hover. Compound rules below let variant
   classes (.btn-primary, .btn-outline-primary, .btn-light, …) win over
   this default so you can build filled or outlined icon buttons. */
.btn-trigger, .btn-icon {
    padding: 0 !important;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cx-ink-2);
    background: transparent;
    border: 1px solid transparent;
}
.btn-icon.btn-sm, .btn-trigger.btn-sm { width: 30px; height: 30px; }
.btn-trigger:hover, .btn-icon:hover { color: var(--cx-black); background: var(--cx-panel-3); }

/* Variant + .btn-icon compound rules — must beat DasLite / Bootstrap's own
   .btn-primary etc. Use triple-class specificity (.btn.btn-icon.btn-*) plus
   both background + background-color longhand for maximum reliability. */
.btn.btn-icon.btn-primary, .btn.btn-icon.btn-info, .btn.btn-icon.btn-success,
.btn.btn-icon.btn-warning, .btn.btn-icon.btn-danger, .btn.btn-icon.btn-dark {
    background: var(--cx-black) !important;
    background-color: var(--cx-black) !important;
    background-image: none !important;
    color: var(--cx-white) !important;
    border: 1px solid var(--cx-black) !important;
}
.btn.btn-icon.btn-primary:hover, .btn.btn-icon.btn-info:hover, .btn.btn-icon.btn-success:hover,
.btn.btn-icon.btn-warning:hover, .btn.btn-icon.btn-danger:hover, .btn.btn-icon.btn-dark:hover {
    background: #1a1a1a !important;
    background-color: #1a1a1a !important;
    color: var(--cx-white) !important;
    border-color: #1a1a1a !important;
}
.btn.btn-icon.btn-outline-primary, .btn.btn-icon.btn-outline-info,
.btn.btn-icon.btn-outline-success, .btn.btn-icon.btn-outline-warning,
.btn.btn-icon.btn-outline-danger, .btn.btn-icon.btn-outline-dark,
.btn.btn-icon.btn-outline-secondary, .btn.btn-icon.btn-outline-light {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--cx-black) !important;
    border: 1px solid var(--cx-border-3) !important;
}
.btn.btn-icon.btn-outline-primary:hover, .btn.btn-icon.btn-outline-info:hover,
.btn.btn-icon.btn-outline-success:hover, .btn.btn-icon.btn-outline-warning:hover,
.btn.btn-icon.btn-outline-danger:hover, .btn.btn-icon.btn-outline-dark:hover,
.btn.btn-icon.btn-outline-secondary:hover, .btn.btn-icon.btn-outline-light:hover {
    background: var(--cx-black) !important;
    background-color: var(--cx-black) !important;
    color: var(--cx-white) !important;
    border-color: var(--cx-black) !important;
}
.btn.btn-icon.btn-light, .btn.btn-icon.btn-secondary {
    background: var(--cx-panel-3) !important;
    background-color: var(--cx-panel-3) !important;
    color: var(--cx-black) !important;
    border: 1px solid var(--cx-panel-3) !important;
}
.btn.btn-icon.btn-light:hover, .btn.btn-icon.btn-secondary:hover {
    background: #e6e6e6 !important;
    background-color: #e6e6e6 !important;
    color: var(--cx-black) !important;
    border-color: #e6e6e6 !important;
}

/* DasLite flex-based tables (.nk-tb-list) — only two overrides:
     1. Style the header cells (uppercase micro-labels).
     2. Give the actions column enough room and clip overflow so buttons
        never spill outside the card.
   Leave column widths, padding, and layout to DasLite so head/body align. */
.nk-tb-list { overflow-x: hidden; }
.nk-tb-item.nk-tb-head { background: transparent !important; }
.nk-tb-item.nk-tb-head .nk-tb-col .sub-text {
    color: var(--cx-ink-4) !important;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: 10.5px !important;
    font-weight: 700 !important;
}
.nk-tb-col-tools {
    min-width: 100px !important;
    justify-content: flex-end !important;
}
.nk-tb-col-tools > .d-inline-flex { gap: 6px; justify-content: flex-end; }

.btn-sm { padding: 6px 12px !important; font-size: 12px !important; }
.btn-lg { padding: 12px 22px !important; font-size: 14px !important; }
.btn-block { display: flex !important; justify-content: center; width: 100%; }

/* ═══ FORMS ═══════════════════════════════════════════════════════════════ */

.form-control, .form-select, .custom-select, textarea, input[type="text"],
input[type="email"], input[type="number"], input[type="tel"], input[type="url"],
input[type="password"], input[type="search"], input[type="date"], input[type="time"],
input[type="datetime-local"], select {
    background: var(--cx-panel) !important;
    color: var(--cx-ink) !important;
    border: 1px solid var(--cx-border-2) !important;
    border-radius: var(--cx-radius-sm) !important;
    padding: 9px 12px !important;
    font-size: 13px !important;
    box-shadow: none !important;
    transition: border-color .15s ease, box-shadow .15s ease !important;
    letter-spacing: -.005em;
}
.form-control:focus, .form-select:focus, textarea:focus, input:focus, select:focus {
    border-color: var(--cx-black) !important;
    box-shadow: var(--cx-focus) !important;
    outline: none !important;
}
.form-control::placeholder,
input::placeholder, textarea::placeholder { color: var(--cx-ink-4) !important; }

.form-control-lg { padding: 12px 14px !important; font-size: 14px !important; }

/* Bootstrap's .form-control has width:100% which fights flex siblings —
   force any input placed directly inside a horizontal flex container to
   share space properly with buttons/addons on either side. */
.d-flex > .form-control, .d-flex > .form-select, .d-flex > .form-control-sm,
.d-inline-flex > .form-control, .d-inline-flex > .form-select {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
}

/* When a button sits next to a form-control in a flex row, stretch it to
   match the input's height so they visually align (no short button hanging
   above/below a taller input). Excludes icon-only square buttons. */
.d-flex > .btn:not(.btn-icon),
.d-inline-flex > .btn:not(.btn-icon) { align-self: stretch; }
.form-label {
    color: var(--cx-ink) !important;
    font-weight: 600 !important;
    font-size: 12.5px !important;
    margin-bottom: 6px !important;
    letter-spacing: -.005em;
}
.form-label-group { display: flex; justify-content: space-between; align-items: center; }
.form-note, .form-text { color: var(--cx-ink-4) !important; font-size: 11.5px !important; }

.form-icon { color: var(--cx-ink-3) !important; }
.form-icon:hover { color: var(--cx-black) !important; }

.custom-control-label::before {
    background: var(--cx-panel) !important;
    border-color: var(--cx-border-3) !important;
}
.custom-control-input:checked ~ .custom-control-label::before {
    background: var(--cx-black) !important;
    border-color: var(--cx-black) !important;
}

/* ═══ TABLES ══════════════════════════════════════════════════════════════ */

/* Any container holding a bare table gets horizontal scroll so wide tables
   (many columns, long labels) don't clip off the right edge of the viewport.
   Uses :has() — supported in all modern browsers as of 2024. */
.table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}
.card-inner:has(> table),
.card-inner:has(> .table),
.container:has(> table),
.container:has(> .table),
.container-fluid:has(> table),
.container-fluid:has(> .table),
.nk-block:has(> table),
.nk-block:has(> .table) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table, table { color: var(--cx-ink) !important; border-collapse: collapse; background: transparent !important; }
.table thead th, table thead th {
    background: transparent !important;
    color: var(--cx-ink-4) !important;
    font-weight: 700 !important;
    font-size: 10.5px !important;
    text-transform: uppercase !important;
    letter-spacing: .1em !important;
    padding: 12px 14px !important;
    border-bottom: 1px solid var(--cx-border-2) !important;
    border-top: none !important;
}
.table tbody td, table tbody td {
    padding: 13px 14px !important;
    border-bottom: 1px solid var(--cx-border) !important;
    color: var(--cx-ink) !important;
    font-size: 13px !important;
    background: transparent;
    vertical-align: middle !important;
}
.table tbody tr:hover, table tbody tr:hover { background: var(--cx-panel-2) !important; }
.table-bordered td, .table-bordered th { border: 1px solid var(--cx-border) !important; }
.table-striped tbody tr:nth-of-type(odd) { background: var(--cx-panel-2) !important; }

/* ═══ BADGES / PILLS ══════════════════════════════════════════════════════ */

.badge, .badge-pill, span[class^="badge-"], span[class*=" badge-"] {
    background: var(--cx-panel-3) !important;
    color: var(--cx-ink) !important;
    border: 1px solid var(--cx-border) !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
    font-size: 10.5px !important;
    padding: 3px 9px !important;
    letter-spacing: .04em !important;
    text-transform: uppercase;
}
.badge.solid, .badge-primary, .badge-success, .badge-info, .badge-dark {
    background: var(--cx-black) !important;
    color: var(--cx-white) !important;
    border-color: var(--cx-black) !important;
}
.badge-warning, .badge-danger, .badge-secondary {
    background: transparent !important;
    color: var(--cx-black) !important;
    border: 1px solid var(--cx-black) !important;
}

/* ═══ DROPDOWNS / MODALS ══════════════════════════════════════════════════ */

.dropdown-menu {
    background: var(--cx-panel) !important;
    border: 1px solid var(--cx-border-2) !important;
    border-radius: var(--cx-radius) !important;
    box-shadow: var(--cx-shadow-lg) !important;
    padding: 6px !important;
    color: var(--cx-ink) !important;
}
.dropdown-item, .dropdown-menu a, .link-list a, .link-list li a {
    color: var(--cx-ink-2) !important;
    border-radius: var(--cx-radius-sm);
    padding: 8px 12px !important;
    font-size: 13px !important;
    display: flex; align-items: center; gap: 10px;
}
.dropdown-item:hover, .dropdown-menu a:hover, .link-list a:hover, .link-list li a:hover {
    background: var(--cx-panel-3) !important;
    color: var(--cx-black) !important;
}
.dropdown-head {
    color: var(--cx-ink) !important;
    border-bottom: 1px solid var(--cx-border);
    padding: 12px 12px 10px !important;
}
.dropdown-foot { border-top: 1px solid var(--cx-border); padding: 8px 12px !important; }
.dropdown-title { color: var(--cx-ink) !important; font-weight: 700; }

.modal-content {
    background: var(--cx-panel) !important;
    border: 1px solid var(--cx-border-2) !important;
    border-radius: var(--cx-radius-lg) !important;
    color: var(--cx-ink) !important;
    box-shadow: var(--cx-shadow-lg) !important;
}
.modal-header, .modal-footer { border-color: var(--cx-border) !important; }
.modal-title { color: var(--cx-ink) !important; font-weight: 700 !important; letter-spacing: -.015em; }
.modal-body { color: var(--cx-ink-2) !important; }
.modal-backdrop { background: rgba(8, 8, 8, .68) !important; }
.close, .btn-close { color: var(--cx-ink) !important; opacity: .5; }
.close:hover, .btn-close:hover { color: var(--cx-black) !important; opacity: 1; }

/* ═══ PAGINATION ══════════════════════════════════════════════════════════ */

.pagination .page-link {
    color: var(--cx-ink) !important;
    background: var(--cx-panel) !important;
    border: 1px solid var(--cx-border-2) !important;
    padding: 7px 12px !important;
    font-size: 12.5px !important;
    font-weight: 600;
}
.pagination .page-item.active .page-link {
    background: var(--cx-black) !important;
    color: var(--cx-white) !important;
    border-color: var(--cx-black) !important;
}
.pagination .page-link:hover { background: var(--cx-panel-3) !important; color: var(--cx-black) !important; }
.pagination .page-item.disabled .page-link { color: var(--cx-ink-5) !important; background: var(--cx-panel-2) !important; }

/* ═══ ALERTS ══════════════════════════════════════════════════════════════ */

.alert {
    background: var(--cx-panel) !important;
    color: var(--cx-ink-2) !important;
    border: 1px solid var(--cx-border) !important;
    border-left: 3px solid var(--cx-black) !important;
    border-radius: var(--cx-radius) !important;
    padding: 14px 18px !important;
    box-shadow: var(--cx-shadow-sm);
}
.alert-warning, .alert-danger, .alert-info, .alert-success {
    background: var(--cx-panel) !important;
    color: var(--cx-ink-2) !important;
    border-color: var(--cx-border) !important;
    border-left-color: var(--cx-black) !important;
}
/* .alert-icon in DasLite absolutely-positions the icon, which overlaps the
   text once our padding differs. Force flex layout so the icon sits to the
   left of the text with a proper gap. */
.alert.alert-icon {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 14px 18px !important;
}
.alert.alert-icon > em.icon {
    position: static !important;
    flex: 0 0 auto;
    font-size: 18px;
    line-height: 1.5;
    margin: 0 !important;
    color: currentColor;
}

/* Spacing between stacked .nk-block cards on detail pages — override
   DasLite's larger default to a tight 12px gap. */
.nk-block { margin-bottom: 12px !important; }
.nk-block:last-child { margin-bottom: 0 !important; }

/* ═══ TABS ════════════════════════════════════════════════════════════════ */

.nav-tabs, .nav-tabs-mb-icon {
    border-bottom: 1px solid var(--cx-border-2) !important;
    background: transparent !important;
}
.nav-tabs .nav-link, .nav-tabs-mb-icon .nav-link {
    color: var(--cx-ink-3) !important;
    background: transparent !important;
    border: none !important;
    padding: 10px 16px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    border-bottom: 2px solid transparent !important;
    letter-spacing: -.005em;
}
.nav-tabs .nav-link:hover, .nav-tabs-mb-icon .nav-link:hover { color: var(--cx-black) !important; }
.nav-tabs .nav-link.active, .nav-tabs-mb-icon .nav-link.active {
    color: var(--cx-black) !important;
    background: transparent !important;
    border-bottom: 2px solid var(--cx-black) !important;
}

/* ═══ TOOLTIP / POPOVER ══════════════════════════════════════════════════ */

.tooltip .tooltip-inner {
    background: var(--cx-black) !important;
    color: var(--cx-white) !important;
    font-weight: 600;
    font-size: 11.5px;
    padding: 5px 10px;
}
.tooltip .arrow::before { border-color: var(--cx-black) !important; }

.popover {
    background: var(--cx-panel) !important;
    border: 1px solid var(--cx-border-2) !important;
    box-shadow: var(--cx-shadow-lg) !important;
}
.popover-header {
    background: var(--cx-panel-2) !important;
    color: var(--cx-black) !important;
    border-bottom: 1px solid var(--cx-border) !important;
}
.popover-body { color: var(--cx-ink-2) !important; }

/* ═══ MISC ════════════════════════════════════════════════════════════════ */

em.icon, .icon { color: inherit; }
.icon-status { color: var(--cx-ink) !important; }
.icon-status::before, .icon-status::after { background: var(--cx-ink-4) !important; }

hr, .hr { border-color: var(--cx-border) !important; }

/* ═══ AUTH PAGES (login, forgot, reset) ══════════════════════════════════
   Body stays light, right promo panel gets the dark shell treatment.
   ═════════════════════════════════════════════════════════════════════════ */

body.pg-auth { background: var(--cx-bg) !important; color: var(--cx-ink) !important; }
body.pg-auth .nk-app-root { background: var(--cx-bg) !important; }
body.pg-auth .nk-split-content.bg-white,
body.pg-auth .nk-split-content { background: var(--cx-bg) !important; }
body.pg-auth .nk-split-content.nk-split-stretch,
body.pg-auth .nk-split-content.bg-lighter {
    background: var(--cx-shell) !important;
    color: var(--cx-shell-ink) !important;
    border-left: none;
}
body.pg-auth .nk-auth-body { max-width: 440px; margin: 0 auto; padding-top: 40px; }
body.pg-auth .nk-block-head h5.nk-block-title,
body.pg-auth .nk-block-head-content h5 {
    font-size: 26px !important;
    font-weight: 700 !important;
    letter-spacing: -.02em !important;
    margin-bottom: 8px !important;
    color: var(--cx-black) !important;
}
body.pg-auth .nk-block-des p { color: var(--cx-ink-3) !important; font-size: 14px; }
body.pg-auth .brand-logo { margin-bottom: 32px !important; }
body.pg-auth .brand-logo img { filter: brightness(0); }  /* logo is gray-on-transparent; on light bg, make it dark */
body.pg-auth .nk-auth-footer p,
body.pg-auth .nk-auth-footer a { color: var(--cx-ink-4) !important; }
body.pg-auth .nk-auth-footer a:hover { color: var(--cx-black) !important; }

/* Right-side promo (on dark) — copy is white */
body.pg-auth .nk-split-content.nk-split-stretch .nk-feature-content h4 { color: var(--cx-shell-ink) !important; }
body.pg-auth .nk-split-content.nk-split-stretch .nk-feature-content p  { color: var(--cx-shell-ink-3) !important; }
body.pg-auth .nk-split-content.nk-split-stretch img.round { border-radius: 14px; }

/* ═══ SIMPLEBAR ═══════════════════════════════════════════════════════════ */

/* Sidebar simplebar (dark bg) — light thumb */
.nk-sidebar .simplebar-scrollbar::before { background: rgba(244, 246, 250, .18) !important; }
/* Content simplebar — dark thumb */
.simplebar-scrollbar::before { background: rgba(8, 8, 8, .16) !important; }

/* ═══ DASHBOARD (.cx-*) OVERRIDES ═════════════════════════════════════════
   Override per-view :root tokens so dashboards inherit the noir palette.
   ═════════════════════════════════════════════════════════════════════════ */

:root {
    --dash-orange: var(--cx-black); --dash-orange-2: var(--cx-black);
    --dash-blue:   var(--cx-black); --dash-blue-2:   var(--cx-black);
    --dash-green:  var(--cx-black);
    --dash-teal:   var(--cx-black);
    --dash-red:    var(--cx-black);
    --dash-amber:  var(--cx-black);
    --dash-ink:    var(--cx-ink);
    --dash-ink-soft: var(--cx-ink-3);
    --dash-muted:  var(--cx-ink-4);
    --dash-border: var(--cx-border);
    --dash-panel:  var(--cx-panel);
    --dash-bg-soft: var(--cx-panel-2);
}

/* Hero block — pure white card with a strong left rule and generous type */
.cx-hero, .cx-profile {
    background: var(--cx-panel) !important;
    border: 1px solid var(--cx-border) !important;
    border-radius: var(--cx-radius-lg) !important;
    color: var(--cx-ink) !important;
    box-shadow: var(--cx-shadow-sm);
    padding: 24px 26px !important;
}
.cx-hero h2, .cx-profile__name {
    color: var(--cx-black) !important;
    font-size: 24px !important;
    letter-spacing: -.025em !important;
    font-weight: 700 !important;
}
.cx-hero p, .cx-profile__meta { color: var(--cx-ink-3) !important; }
.cx-hero strong, .cx-profile__meta strong { color: var(--cx-black) !important; font-weight: 600; }

.cx-profile__avatar {
    background: var(--cx-black) !important;
    color: var(--cx-white) !important;
    font-weight: 800 !important;
    letter-spacing: -.02em;
}
.cx-profile__status.active {
    background: var(--cx-black) !important;
    color: var(--cx-white) !important;
    border: none;
    font-weight: 700 !important;
}
.cx-profile__status.suspended, .cx-profile__status.inactive {
    background: transparent !important;
    color: var(--cx-black) !important;
    border: 1px solid var(--cx-black) !important;
}

/* KPI cards — WHITE. Big black tabular number, uppercase micro-label. */
.cx-kpi {
    background: var(--cx-panel) !important;
    border: 1px solid var(--cx-border) !important;
    border-left: none !important;
    color: var(--cx-ink) !important;
    border-radius: var(--cx-radius-lg) !important;
    padding: 18px 20px !important;
    box-shadow: var(--cx-shadow-sm);
    position: relative;
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.cx-kpi:hover {
    border-color: var(--cx-border-3) !important;
    box-shadow: var(--cx-shadow-md) !important;
    transform: translateY(-2px) !important;
    color: var(--cx-ink) !important;
}
.cx-kpi__val {
    color: var(--cx-black) !important;
    font-size: 30px !important;
    font-weight: 700 !important;
    letter-spacing: -.03em !important;
    line-height: 1.05 !important;
    font-variant-numeric: tabular-nums;
}
.cx-kpi__label {
    color: var(--cx-ink-4) !important;
    font-size: 10.5px !important;
    letter-spacing: .12em !important;
    text-transform: uppercase;
    font-weight: 700 !important;
}
.cx-kpi__sub {
    color: var(--cx-ink-3) !important;
    font-size: 11.5px !important;
    letter-spacing: -.005em;
}

/* Content panels */
.cx-panel {
    background: var(--cx-panel) !important;
    border: 1px solid var(--cx-border) !important;
    border-radius: var(--cx-radius-lg) !important;
    padding: 20px !important;
    box-shadow: var(--cx-shadow-sm);
    color: var(--cx-ink) !important;
}
.cx-panel__head { padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--cx-border); }
.cx-panel__head h3 {
    color: var(--cx-black) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: -.015em !important;
}
.cx-link { color: var(--cx-ink-3) !important; font-weight: 600; font-size: 12px; }
.cx-link:hover { color: var(--cx-black) !important; text-decoration: none; }

/* Dashboard mini tables */
.cx-table { background: transparent !important; }
.cx-table th {
    background: transparent !important;
    color: var(--cx-ink-4) !important;
    font-size: 10px !important;
    letter-spacing: .12em !important;
    padding: 10px 12px !important;
    border-bottom: 1px solid var(--cx-border) !important;
    text-transform: uppercase;
    font-weight: 700;
}
.cx-table td {
    padding: 12px !important;
    border-bottom: 1px solid var(--cx-border) !important;
    color: var(--cx-ink) !important;
    font-size: 13px !important;
}
.cx-table tbody tr:hover { background: var(--cx-panel-2) !important; }
.cx-table tr:last-child td { border-bottom: none !important; }
.cx-table td a { color: var(--cx-black) !important; font-weight: 600; }
.cx-table td a:hover { color: var(--cx-black) !important; text-decoration: underline; }

/* Status pills — three distinct visual codes, monochrome */
.cx-status-pill {
    background: transparent !important;
    color: var(--cx-ink-2) !important;
    border: 1px solid var(--cx-border-2) !important;
    font-weight: 700 !important;
    font-size: 10.5px !important;
    padding: 3px 9px !important;
    letter-spacing: .04em !important;
    border-radius: 999px !important;
    text-transform: uppercase;
    display: inline-flex; align-items: center; gap: 6px;
}
.cx-status-pill.approved, .cx-status-pill.completed {
    background: var(--cx-black) !important;
    color: var(--cx-white) !important;
    border-color: var(--cx-black) !important;
}
.cx-status-pill.approved::before {
    content: '';
    width: 5px; height: 5px; border-radius: 50%; background: var(--cx-white);
}
.cx-status-pill.rejected, .cx-status-pill.failed {
    background: transparent !important;
    color: var(--cx-ink-4) !important;
    border: 1px solid var(--cx-border-2) !important;
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
}
.cx-status-pill.pending, .cx-status-pill.pending_approval, .cx-status-pill.warning {
    background: transparent !important;
    color: var(--cx-black) !important;
    border: 1px dashed var(--cx-border-3) !important;
}
.cx-status-pill.under_review, .cx-status-pill.needs_review, .cx-status-pill.generating {
    background: transparent !important;
    color: var(--cx-black) !important;
    border: 1px dashed var(--cx-black) !important;
}

/* Countdown */
.cx-countdown { color: var(--cx-black) !important; font-variant-numeric: tabular-nums; font-weight: 700; }
.cx-countdown.urgent {
    background: var(--cx-black);
    color: var(--cx-white) !important;
    padding: 2px 8px;
    border-radius: 4px;
    display: inline-block;
    font-weight: 800 !important;
    text-decoration: none;
}
.cx-countdown.warn   { color: var(--cx-black) !important; }
.cx-countdown.ok     { color: var(--cx-ink-3) !important; font-weight: 600; }

/* Alerts inside dashboards */
.cx-alert {
    background: var(--cx-panel) !important;
    border: 1px solid var(--cx-border) !important;
    border-left: 3px solid var(--cx-black) !important;
    color: var(--cx-ink-2) !important;
    box-shadow: var(--cx-shadow-sm);
    padding: 14px 18px !important;
    border-radius: var(--cx-radius) !important;
    display: flex; align-items: center; gap: 14px;
}
.cx-alert strong { color: var(--cx-black) !important; }
.cx-alert.critical {
    background: var(--cx-black) !important;
    color: var(--cx-white) !important;
    border-color: var(--cx-black) !important;
    border-left-color: var(--cx-white) !important;
}
.cx-alert.critical strong { color: var(--cx-white) !important; }
.cx-alert.critical .cx-alert__cta { color: var(--cx-white) !important; }
.cx-alert__cta { color: var(--cx-black) !important; font-weight: 700 !important; }

/* Team tiles — gray inner chip on white card */
.cx-team-tile {
    background: var(--cx-panel-2) !important;
    border: 1px solid var(--cx-border) !important;
    border-radius: var(--cx-radius) !important;
    padding: 14px !important;
    transition: background .12s ease, border-color .12s ease;
}
.cx-team-tile:hover { background: var(--cx-panel-3) !important; border-color: var(--cx-border-2) !important; }
.cx-team-tile__val {
    color: var(--cx-black) !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    letter-spacing: -.025em !important;
    font-variant-numeric: tabular-nums;
}
.cx-team-tile__label {
    color: var(--cx-ink-4) !important;
    font-size: 10.5px !important;
    letter-spacing: .1em !important;
    text-transform: uppercase;
    font-weight: 700 !important;
}

/* Activity feed */
.cx-activity__icon {
    background: var(--cx-panel-3) !important;
    color: var(--cx-black) !important;
    border-radius: 8px;
}
.cx-activity__title { color: var(--cx-ink) !important; }
.cx-activity__meta  { color: var(--cx-ink-4) !important; }
.cx-activity__row { border-bottom-color: var(--cx-border) !important; }
.cx-activity__row:last-child { border-bottom: none !important; }
.cx-activity__meta a { color: var(--cx-black) !important; font-weight: 600; }

/* Avatar */
.cx-avatar {
    background: var(--cx-black) !important;
    color: var(--cx-white) !important;
    font-weight: 800 !important;
    letter-spacing: -.02em;
}

/* Doc tiles */
.cx-doc-tile {
    background: var(--cx-panel-2) !important;
    border: 1px solid var(--cx-border) !important;
    border-radius: var(--cx-radius) !important;
    padding: 12px 14px !important;
}
.cx-doc-tile__val { color: var(--cx-black) !important; font-weight: 700 !important; font-variant-numeric: tabular-nums; }
.cx-doc-tile__label { color: var(--cx-ink-4) !important; text-transform: uppercase; letter-spacing: .1em; font-size: 10.5px !important; font-weight: 700 !important; }
.cx-doc-tile.completed .cx-doc-tile__val,
.cx-doc-tile.pending .cx-doc-tile__val,
.cx-doc-tile.generating .cx-doc-tile__val,
.cx-doc-tile.failed .cx-doc-tile__val { color: var(--cx-black) !important; }

/* Scope chips */
.cx-chip {
    background: var(--cx-panel-3) !important;
    color: var(--cx-ink-2) !important;
    border: 1px solid var(--cx-border) !important;
    border-radius: 999px !important;
    padding: 4px 12px !important;
    font-size: 11.5px !important;
    font-weight: 600;
}
.cx-chip strong { color: var(--cx-black) !important; font-weight: 700; }

/* Hero CTAs — force black primary, outlined secondary */
.cx-hero-actions .btn[style*="background"] {
    background: var(--cx-black) !important;
    border-color: var(--cx-black) !important;
    color: var(--cx-white) !important;
}
.cx-hero-actions .btn-outline-primary {
    background: transparent !important;
    color: var(--cx-black) !important;
    border: 1px solid var(--cx-border-3) !important;
}
.cx-hero-actions .btn-outline-primary:hover {
    background: var(--cx-black) !important;
    color: var(--cx-white) !important;
    border-color: var(--cx-black) !important;
}

/* Inline links still using --dash-* colours */
[style*="color:var(--dash-orange)"],
[style*="color: var(--dash-orange)"],
[style*="color:var(--dash-blue)"],
[style*="color: var(--dash-blue)"] { color: var(--cx-black) !important; }

/* Page title / header inside content body */
.nk-block-head h3.nk-block-title { color: var(--cx-black) !important; }
.nk-block-head-content .toggle-expand-content { color: var(--cx-ink-3) !important; }

/* ═══ SWEET-ALERT ═════════════════════════════════════════════════════════ */

.swal-overlay { background: rgba(8, 8, 8, .55) !important; }
.swal-modal {
    background: var(--cx-panel) !important;
    border: 1px solid var(--cx-border-2) !important;
    border-radius: var(--cx-radius-lg) !important;
    box-shadow: var(--cx-shadow-lg) !important;
}
.swal-title { color: var(--cx-black) !important; font-weight: 700 !important; letter-spacing: -.015em; }
.swal-text { color: var(--cx-ink-2) !important; }
.swal-button {
    background: var(--cx-black) !important;
    color: var(--cx-white) !important;
    font-weight: 700 !important;
    border-radius: var(--cx-radius-sm) !important;
}
.swal-button:hover { background: #1a1a1a !important; box-shadow: 0 4px 14px rgba(8, 8, 8, .18) !important; }
.swal-button--cancel { background: var(--cx-panel-3) !important; color: var(--cx-black) !important; }
.swal-button--cancel:hover { background: #e6e6e6 !important; }

/* ═══ FILE UPLOADS ═══════════════════════════════════════════════════════ */

.custom-file-label, .custom-file-input {
    background: var(--cx-panel) !important;
    color: var(--cx-ink) !important;
    border-color: var(--cx-border-2) !important;
}
.custom-file-label::after {
    background: var(--cx-panel-3) !important;
    color: var(--cx-black) !important;
    border-left: 1px solid var(--cx-border-2);
}

/* ═══ SELECT2 (v4) ═══════════════════════════════════════════════════════
   Role-management + partner-registration forms use Select2 v4 for multi-
   select dropdowns. Rebuilt against v4's actual DOM: the "search" <li> is
   a sibling of the pill <li>s inside .select2-selection__rendered, so it
   must be styled transparent (not a separate boxed input) or you get a
   ghost empty field under every multi-select.
   ═════════════════════════════════════════════════════════════════════════ */

/* ─── Shared: outer container ─────────────────────────────────────────── */
.select2-container { max-width: 100%; }
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background: var(--cx-panel) !important;
    border: 1px solid var(--cx-border-2) !important;
    border-radius: var(--cx-radius-sm) !important;
    box-shadow: none !important;
    font-family: var(--cx-font) !important;
    font-size: 13px !important;
    box-sizing: border-box !important;
    min-height: 40px !important;
    height: auto !important;
}
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--cx-black) !important;
    box-shadow: var(--cx-focus) !important;
}

/* ─── Single-select ───────────────────────────────────────────────────── */
.select2-container--default .select2-selection--single {
    display: flex !important;
    align-items: center !important;
    padding: 0 32px 0 10px !important;   /* room on the right for the arrow */
    position: relative;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--cx-ink) !important;
    line-height: 1.4 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--cx-ink-4) !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    position: absolute;
    top: 0; right: 8px;
    height: 100% !important;
    width: 20px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    position: static !important;
    margin: 0 !important;
    border-color: var(--cx-ink-3) transparent transparent transparent !important;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--cx-ink) transparent !important;
}
.select2-container--default .select2-selection--single .select2-selection__clear {
    color: var(--cx-ink-3) !important;
    font-weight: 700;
    margin-right: 8px !important;
    padding: 0 !important;
    order: 2;
}
.select2-container--default .select2-selection--single .select2-selection__clear:hover {
    color: var(--cx-black) !important;
}

/* ─── Multi-select ───────────────────────────────────────────────────── */
/* Strategy: DO NOT touch the layout properties Select2 sets on its own
   containers/ul/li — only recolour + resize. Overriding `display` or
   `float` on the <ul> / <li> breaks Select2's own row-wrap logic which
   causes pills to look invisible or clip when the dropdown opens. */

.select2-container--default .select2-selection--multiple {
    padding: 4px 6px !important;
    cursor: text;
    /* Cap pill area at ~3 rows and scroll internally instead of overflowing
       outside the box. Keeps the form layout stable no matter how many
       states/cities the CO has selected. */
    max-height: 120px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(8, 8, 8, .20) transparent;
}
.select2-container--default .select2-selection--multiple::-webkit-scrollbar { width: 6px; }
.select2-container--default .select2-selection--multiple::-webkit-scrollbar-track { background: transparent; }
.select2-container--default .select2-selection--multiple::-webkit-scrollbar-thumb { background: rgba(8, 8, 8, .18); border-radius: 3px; }
.select2-container--default .select2-selection--multiple::-webkit-scrollbar-thumb:hover { background: rgba(8, 8, 8, .32); }

/* Pill (li.select2-selection__choice) — recolour only, don't change display */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--cx-black) !important;
    color: var(--cx-white) !important;
    border: 1px solid var(--cx-black) !important;
    border-radius: 999px !important;
    padding: 3px 10px 3px 10px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: -.005em;
    line-height: 1.5 !important;
    margin: 3px 4px 3px 0 !important;
    max-width: calc(100% - 6px);
    white-space: normal;
    word-break: break-word;
    cursor: default;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
    color: var(--cx-white) !important;
    padding-left: 2px !important;
    padding-right: 6px !important;
}

/* The remove (×) button — in v4.1 it's a proper <button> preceding the label. */
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: rgba(244, 246, 250, .74) !important;
    background-color: transparent !important;
    border: none !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    padding: 0 4px 0 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
    cursor: pointer;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover,
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:focus {
    color: var(--cx-white) !important;
    background-color: transparent !important;
}

/* Inline search field — transparent so it doesn't render as a ghost box */
.select2-container--default .select2-search--inline .select2-search__field {
    background-color: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    color: var(--cx-ink) !important;
    padding: 3px 4px !important;
    margin-top: 6px !important;
    margin-bottom: 3px !important;
    min-width: 60px;
    font-family: var(--cx-font) !important;
    font-size: 13px !important;
}
.select2-container--default .select2-search--inline .select2-search__field::placeholder {
    color: var(--cx-ink-4) !important;
}

/* Empty-state placeholder inside the multi-select box */
.select2-container--default .select2-selection--multiple .select2-selection__placeholder {
    color: var(--cx-ink-4) !important;
    padding: 4px 4px !important;
    line-height: 1.6;
}

/* ─── Dropdown panel ─────────────────────────────────────────────────── */
.select2-container--default .select2-dropdown {
    background: var(--cx-panel) !important;
    border: 1px solid var(--cx-border-2) !important;
    border-radius: var(--cx-radius) !important;
    box-shadow: var(--cx-shadow-lg) !important;
    overflow: hidden;
}
.select2-container--default .select2-search--dropdown {
    padding: 8px !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
    background: var(--cx-panel) !important;
    color: var(--cx-ink) !important;
    border: 1px solid var(--cx-border-2) !important;
    border-radius: var(--cx-radius-sm) !important;
    padding: 8px 10px !important;
    font-size: 13px !important;
    font-family: var(--cx-font) !important;
    outline: none !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--cx-black) !important;
    box-shadow: var(--cx-focus) !important;
}
.select2-container--default .select2-results__option {
    color: var(--cx-ink-2) !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted {
    background: var(--cx-panel-3) !important;
    color: var(--cx-black) !important;
}
.select2-container--default .select2-results__option[aria-selected=true] {
    background: transparent !important;
    color: var(--cx-black) !important;
    font-weight: 600;
    position: relative;
    padding-right: 34px !important;
}
.select2-container--default .select2-results__option[aria-selected=true]::after {
    content: '\2713';
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--cx-black);
    font-weight: 700;
}

/* ═══ btn-link / Cancel link — flatten orange DasLite default ═══════════ */

.btn-link {
    color: var(--cx-ink-3) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}
.btn-link:hover {
    color: var(--cx-black) !important;
    background: var(--cx-panel-3) !important;
    text-decoration: none !important;
}

/* ═══ LEGACY WIDGET NUKE ══════════════════════════════════════════════════ */

.nk-sticky-toolbar, .nk-demo-panel, .pmo-lv, .pmo-st, .demo-settings, .nk-opt-panel,
#region { display: none !important; }