/* ════════════════════════════════════════════════════════════════════════════
   theme-enterprise.css — instonerplive Enterprise Design System v1
   ─────────────────────────────────────────────────────────────────────────────
   PURELY ADDITIVE VISUAL LAYER. Loaded LAST in layouts/header.blade.php so it
   wins the cascade over style.css, the inline header styles and theme-dark.css
   without deleting or editing any of them. Zero markup / logic / workflow
   changes. Same safe pattern as the Phase-6 dark theme.

   Contents
     1. Design tokens (light)          6. Tables + DataTables
     2. Base typography                7. Badges / alerts
     3. Page chrome (title, crumbs)    8. Modals / dropdowns / tabs
     4. Buttons                        9. Toastr / SweetAlert / misc vendors
     5. Forms + Select2/TomSelect     10. Scrollbars, focus, selection
                                      11. Dark-mode alignment
   Tenant branding: --primary-color (set per tenant in header.blade.php :root)
   is consumed, never redefined here.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 1 · TOKENS ───────────────────────────────────────────────────────────── */
:root {
    /* neutrals — slate scale (matches the dark theme's family) */
    --n-0:#ffffff;  --n-50:#f8fafc; --n-100:#f1f5f9; --n-200:#e2e8f0;
    --n-300:#cbd5e1;--n-400:#94a3b8;--n-500:#64748b; --n-600:#475569;
    --n-700:#334155;--n-800:#1e293b;--n-900:#0f172a;

    /* semantic status */
    --ok:#16a34a;   --ok-bg:#f0fdf4;   --ok-bd:#bbf7d0;
    --warn:#b45309; --warn-bg:#fffbeb; --warn-bd:#fde68a;
    --err:#dc2626;  --err-bg:#fef2f2;  --err-bd:#fecaca;
    --inf:#0369a1;  --inf-bg:#f0f9ff;  --inf-bd:#bae6fd;

    /* surfaces (remapped in dark) */
    --page:var(--n-50);      --surface:var(--n-0);   --surface-2:var(--n-100);
    --line:var(--n-200);     --line-strong:var(--n-300);
    --ink:var(--n-900);      --ink-2:var(--n-600);   --ink-3:var(--n-400);

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

    /* radii */
    --r-sm:6px; --r-md:10px; --r-lg:14px; --r-full:999px;

    /* elevation */
    --sh-1:0 1px 2px rgba(15,23,42,.05);
    --sh-2:0 1px 3px rgba(15,23,42,.06),0 4px 12px rgba(15,23,42,.05);
    --sh-3:0 4px 10px rgba(15,23,42,.07),0 12px 32px rgba(15,23,42,.09);

    /* motion */
    --ease:cubic-bezier(.4,0,.2,1); --t-fast:150ms; --t-med:220ms;

    /* focus ring derived from tenant brand */
    --ring:color-mix(in srgb,var(--primary-color),transparent 82%);

    /* bridge Bootstrap variables onto the system */
    --bs-body-font-family:var(--app-font);
    --bs-border-radius:var(--r-sm);
    --bs-border-color:var(--line);
}

/* ── 2 · BASE TYPOGRAPHY ──────────────────────────────────────────────────── */
html { -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }

body {
    font-family:var(--app-font) !important;   /* beats style.css Poppins */
    font-size:14px;
    line-height:1.55;
    color:var(--ink);
    letter-spacing:0;
}

h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {
    font-family:var(--app-font) !important;   /* beats style.css Poppins */
    font-weight:700;
    letter-spacing:-.015em;
    color:var(--ink);
}
h1,.h1{font-size:24px} h2,.h2{font-size:20px} h3,.h3{font-size:18px}
h4,.h4{font-size:16px} h5,.h5{font-size:14px} h6,.h6{font-size:13px}

small,.small{font-size:12px}
.text-muted{color:var(--ink-3) !important}

/* data reads better with lining tabular figures */
table, .tnum, .badge, .kval { font-variant-numeric:tabular-nums; }

/* never touch icon fonts — restate their families defensively */
.bi{font-family:'bootstrap-icons' !important}
.fa{font-family:FontAwesome !important}
[class^="bx"],[class*=" bx"]{font-family:'boxicons' !important}
[class^="ri-"],[class*=" ri-"]{font-family:'remixicon' !important}
.material-icons{font-family:'Material Icons' !important}

/* ── 3 · PAGE CHROME ──────────────────────────────────────────────────────── */
/* Page title: was a hard primary-color slab with black text — now a clean,
   quiet bar with a brand accent rail. */
.pagetitle {
    background:var(--surface);
    border:1px solid var(--line);
    border-left:3px solid var(--primary-color);
    border-radius:var(--r-md);
    padding:10px 16px;
    margin-bottom:14px;
    box-shadow:var(--sh-1);
}
.pagetitle h1 {
    font-size:16px;
    font-weight:700;
    letter-spacing:-.01em;
    color:var(--ink);
}
.pagetitle-icon { border-radius:8px; box-shadow:none; }

.breadcrumb { font-size:12px; }
.breadcrumb, .breadcrumb a { color:var(--ink-3); }
.breadcrumb a:hover { color:var(--primary-color); }
.breadcrumb .active { color:var(--ink-2); font-weight:600; }

/* main canvas */
#main { background:transparent; }

/* generic section headings inside cards */
.card-title { font-size:14px; font-weight:700; letter-spacing:-.01em; color:var(--ink); }

/* ── 4 · BUTTONS ──────────────────────────────────────────────────────────── */
.btn {
    font-family:var(--app-font);
    font-size:13px;
    font-weight:600;
    letter-spacing:.01em;
    line-height:1.35;
    border-radius:var(--r-sm);
    padding:.5rem 1rem;
    transition:background-color var(--t-fast) var(--ease),
               border-color var(--t-fast) var(--ease),
               color var(--t-fast) var(--ease),
               box-shadow var(--t-fast) var(--ease),
               transform var(--t-fast) var(--ease);
}
.btn:active { transform:translateY(1px); }
.btn:focus-visible { outline:2px solid var(--primary-color); outline-offset:2px; box-shadow:none; }

.btn-sm{font-size:12px;padding:.35rem .75rem;border-radius:var(--r-sm)}
.btn-lg{font-size:14px;padding:.65rem 1.35rem;border-radius:var(--r-md)}

/* brand the primary action with the tenant color (was stock Bootstrap blue) */
.btn-primary {
    --bs-btn-bg:var(--primary-color);
    --bs-btn-border-color:var(--primary-color);
    --bs-btn-hover-bg:var(--primary-dark-color,color-mix(in srgb,var(--primary-color),#000 15%));
    --bs-btn-hover-border-color:var(--primary-dark-color,color-mix(in srgb,var(--primary-color),#000 15%));
    --bs-btn-active-bg:var(--primary-dark-color,color-mix(in srgb,var(--primary-color),#000 20%));
    --bs-btn-active-border-color:var(--primary-dark-color,color-mix(in srgb,var(--primary-color),#000 20%));
    --bs-btn-focus-shadow-rgb:0,0,0;
    box-shadow:var(--sh-1);
}
.btn-primary:hover { box-shadow:var(--sh-2); }
.btn-outline-primary {
    --bs-btn-color:var(--primary-color);
    --bs-btn-border-color:var(--primary-color);
    --bs-btn-hover-bg:var(--primary-color);
    --bs-btn-hover-border-color:var(--primary-color);
    --bs-btn-active-bg:var(--primary-color);
    --bs-btn-active-border-color:var(--primary-color);
}
.btn-secondary,.btn-light {
    --bs-btn-bg:var(--surface);
    --bs-btn-border-color:var(--line-strong);
    --bs-btn-color:var(--ink);
    --bs-btn-hover-bg:var(--surface-2);
    --bs-btn-hover-border-color:var(--n-400);
    --bs-btn-hover-color:var(--ink);
    --bs-btn-active-bg:var(--surface-2);
    --bs-btn-active-color:var(--ink);
}
.btn-success{--bs-btn-bg:var(--ok);--bs-btn-border-color:var(--ok)}
.btn-danger{--bs-btn-bg:var(--err);--bs-btn-border-color:var(--err)}
.btn-warning{--bs-btn-bg:#f59e0b;--bs-btn-border-color:#f59e0b;--bs-btn-color:#1f2937}
.btn-info{--bs-btn-bg:var(--inf);--bs-btn-border-color:var(--inf);--bs-btn-color:#fff}

/* ── 5 · FORMS ────────────────────────────────────────────────────────────── */
.form-label,label {
    font-size:12px;
    font-weight:600;
    color:var(--ink-2);
    letter-spacing:.01em;
    margin-bottom:.3rem;
}
.form-control,.form-select,.input-group-text {
    font-family:var(--app-font);
    font-size:13.5px;
    color:var(--ink);
    background-color:var(--surface);
    border:1px solid var(--line-strong);
    border-radius:var(--r-sm);
    transition:border-color var(--t-fast) var(--ease),
               box-shadow var(--t-fast) var(--ease),
               background-color var(--t-fast) var(--ease);
}
.form-control::placeholder{color:var(--ink-3)}
.form-control:focus,.form-select:focus {
    border-color:var(--primary-color);
    box-shadow:0 0 0 3px var(--ring);
    background-color:var(--surface);
}
.input-group-text{background:var(--surface-2);color:var(--ink-2)}
.form-check-input:checked{background-color:var(--primary-color);border-color:var(--primary-color)}
.form-check-input:focus{border-color:var(--primary-color);box-shadow:0 0 0 3px var(--ring)}
.form-switch .form-check-input{border-radius:var(--r-full)}

/* Select2 — align with the token system (overrides the inline header block) */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background-color:var(--surface);
    border:1px solid var(--line-strong);
    border-radius:var(--r-sm);
    font-size:13.5px;
    color:var(--ink);
    transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open  .select2-selection--single,
.select2-container--default.select2-container--open  .select2-selection--multiple {
    border-color:var(--primary-color);
    box-shadow:0 0 0 3px var(--ring);
}
.select2-container--default .select2-selection--single .select2-selection__rendered{color:var(--ink)}
.select2-container--default .select2-selection--single .select2-selection__placeholder{color:var(--ink-3)}
.select2-container--default .select2-selection--multiple .select2-selection__choice{
    background-color:var(--primary-color);border-radius:5px;font-size:12px;font-weight:500}
.select2-dropdown{
    border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-3);overflow:hidden}
.select2-container--default .select2-results__option{font-size:13.5px;padding:7px 12px}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{
    background-color:var(--primary-color)}
.select2-search--dropdown .select2-search__field{
    border:1px solid var(--line-strong) !important;border-radius:var(--r-sm) !important;padding:6px 10px}

/* Tom Select / Selectize harmony */
.ts-control,.selectize-input{
    border:1px solid var(--line-strong) !important;
    border-radius:var(--r-sm) !important;
    font-size:13.5px;
    background:var(--surface) !important;
    color:var(--ink);
    transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
.ts-control.focus,.selectize-input.focus{
    border-color:var(--primary-color) !important;box-shadow:0 0 0 3px var(--ring) !important}
.ts-dropdown,.selectize-dropdown{
    border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-3);font-size:13.5px}

/* flatpickr */
.flatpickr-calendar{border-radius:var(--r-md);box-shadow:var(--sh-3);border:1px solid var(--line);font-family:var(--app-font)}
.flatpickr-day.selected,.flatpickr-day.selected:hover{background:var(--primary-color);border-color:var(--primary-color)}

/* ── 6 · CARDS / PANELS ───────────────────────────────────────────────────── */
.card {
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--r-lg);
    box-shadow:var(--sh-1);
    transition:box-shadow var(--t-med) var(--ease);
}
.card:hover { box-shadow:var(--sh-2); }
.card-header {
    background:transparent;
    border-bottom:1px solid var(--line);
    font-weight:700;
    font-size:14px;
    padding:.85rem 1.15rem;
}
.card-footer { background:var(--surface-2); border-top:1px solid var(--line); }

/* ── TABLES + DATATABLES ──────────────────────────────────────────────────── */
.table { --bs-table-color:var(--ink); font-size:13px; border-color:var(--line); }
.table > thead th,
table.dataTable thead th, table.dataTable thead td {
    font-size:11px;
    font-weight:600;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--ink-3);
    background:var(--surface-2);
    border-bottom:1px solid var(--line) !important;
    border-top:none;
    padding-top:.6rem; padding-bottom:.6rem;
    vertical-align:middle;
}
.table > :not(caption) > * > * { padding:.62rem .75rem; border-bottom-color:var(--line); }
.table-hover > tbody > tr { transition:background-color var(--t-fast) var(--ease); }
.table-hover > tbody > tr:hover > *,
table.dataTable.hover tbody tr:hover, table.dataTable tbody tr:hover {
    background-color:color-mix(in srgb,var(--surface-2),transparent 35%);
    --bs-table-accent-bg:transparent;
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg:color-mix(in srgb,var(--surface-2),transparent 55%);
}
table.dataTable{border-collapse:collapse !important}

/* DataTables chrome (length, info, pagination) */
.dataTables_wrapper .dataTables_length select{
    border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:4px 8px;font-size:12.5px}
.dataTables_wrapper .dataTables_info{font-size:12px;color:var(--ink-3)}
.dataTables_wrapper .dataTables_paginate .paginate_button{border-radius:var(--r-sm) !important}
.page-item .page-link{
    font-size:12.5px;color:var(--ink-2);border-color:var(--line);
    transition:all var(--t-fast) var(--ease)}
.page-item .page-link:hover{background:var(--surface-2);color:var(--ink)}
.page-item.active .page-link{
    background:var(--primary-color);border-color:var(--primary-color);
    box-shadow:var(--sh-1)}
.dt-buttons .btn,.dt-button{
    font-size:12px !important;border-radius:var(--r-sm) !important}

/* ── 7 · BADGES / ALERTS ──────────────────────────────────────────────────── */
.badge {
    font-family:var(--app-font);
    font-size:11px;
    font-weight:600;
    letter-spacing:.03em;
    border-radius:var(--r-full);
    padding:.3em .7em;
}
.alert { border-radius:var(--r-md); border-width:1px; font-size:13.5px; }
.alert-success{color:var(--ok);background:var(--ok-bg);border-color:var(--ok-bd)}
.alert-warning{color:var(--warn);background:var(--warn-bg);border-color:var(--warn-bd)}
.alert-danger{color:var(--err);background:var(--err-bg);border-color:var(--err-bd)}
.alert-info{color:var(--inf);background:var(--inf-bg);border-color:var(--inf-bd)}

/* ── 8 · MODALS / DROPDOWNS / TABS ────────────────────────────────────────── */
.modal-content {
    border:1px solid var(--line);
    border-radius:var(--r-lg);
    box-shadow:var(--sh-3);
}
.modal-header{border-bottom:1px solid var(--line);padding:1rem 1.25rem}
.modal-title{font-size:15px;font-weight:700;letter-spacing:-.01em}
.modal-footer{border-top:1px solid var(--line);background:var(--surface-2);
    border-bottom-left-radius:var(--r-lg);border-bottom-right-radius:var(--r-lg)}
.modal-backdrop.show{opacity:.45}

.dropdown-menu {
    border:1px solid var(--line);
    border-radius:var(--r-md);
    box-shadow:var(--sh-3);
    font-size:13px;
    padding:.35rem;
}
.dropdown-item{border-radius:var(--r-sm);padding:.45rem .7rem;transition:background var(--t-fast) var(--ease)}
.dropdown-item:hover,.dropdown-item:focus{background:var(--surface-2);color:var(--ink)}
.dropdown-divider{border-color:var(--line)}

.nav-tabs{border-bottom:1px solid var(--line)}
.nav-tabs .nav-link{
    font-size:13px;font-weight:600;color:var(--ink-2);border:none;
    border-bottom:2px solid transparent;border-radius:0;
    transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.nav-tabs .nav-link:hover{color:var(--ink);border-color:var(--line-strong)}
.nav-tabs .nav-link.active{
    color:var(--primary-color);background:transparent;
    border-bottom:2px solid var(--primary-color)}
.nav-pills .nav-link{font-size:13px;font-weight:600;border-radius:var(--r-sm);color:var(--ink-2)}
.nav-pills .nav-link.active{background:var(--primary-color)}

/* accordion */
.accordion-item{border-color:var(--line)}
.accordion-button{font-size:13.5px;font-weight:600}
.accordion-button:not(.collapsed){
    background:var(--primary-light-color,var(--surface-2));color:var(--primary-color);box-shadow:none}
.accordion-button:focus{border-color:var(--primary-color);box-shadow:0 0 0 3px var(--ring)}

/* ── 9 · VENDOR WIDGETS ───────────────────────────────────────────────────── */
#toast-container > div{
    border-radius:var(--r-md) !important;
    box-shadow:var(--sh-3) !important;
    opacity:.98 !important;
    font-family:var(--app-font);
    font-size:13.5px;
}
.swal2-popup{
    border-radius:var(--r-lg) !important;
    font-family:var(--app-font) !important;
    font-size:14px !important;
    box-shadow:var(--sh-3) !important;
}
.swal2-title{font-size:19px !important;font-weight:700 !important;letter-spacing:-.01em}
.swal2-styled.swal2-confirm{
    border-radius:var(--r-sm) !important;font-weight:600 !important;font-size:13.5px !important}
.swal2-styled.swal2-cancel{
    border-radius:var(--r-sm) !important;font-weight:600 !important;font-size:13.5px !important}
/* legacy sweetalert 1/2.x */
.sweet-alert{border-radius:var(--r-lg) !important;font-family:var(--app-font) !important}
.sweet-alert h2{font-weight:700;letter-spacing:-.01em}
.sweet-alert .confirm,.sweet-alert .cancel{border-radius:var(--r-sm) !important;font-weight:600}

.tooltip .tooltip-inner{
    font-family:var(--app-font);font-size:12px;border-radius:var(--r-sm);padding:5px 10px}
.popover{border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-3);font-family:var(--app-font)}

/* ── 10 · POLISH DETAILS ──────────────────────────────────────────────────── */
::selection{background:color-mix(in srgb,var(--primary-color),transparent 78%)}

*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--n-300);border-radius:var(--r-full);border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:var(--n-400);background-clip:content-box;border:2px solid transparent}

a{transition:color var(--t-fast) var(--ease)}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{
    outline:2px solid var(--primary-color);outline-offset:2px}

img{-webkit-user-drag:none}

@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

/* ── 11 · DARK MODE ALIGNMENT ─────────────────────────────────────────────── */
/* theme-dark.css already restyles the broad surfaces. These rules remap this
   file's tokens under dark so every component above flips consistently, and
   they load after theme-dark.css so they win any overlap. */
[data-theme="dark"] {
    --page:#0f172a; --surface:#1e293b; --surface-2:#243044;
    --line:#334155; --line-strong:#46536b;
    --ink:#e2e8f0;  --ink-2:#94a3b8;  --ink-3:#64748b;

    --ok:#4ade80;  --ok-bg:#0c2818;  --ok-bd:#14532d;
    --warn:#fbbf24;--warn-bg:#2a2008;--warn-bd:#713f12;
    --err:#f87171; --err-bg:#2b1214; --err-bd:#7f1d1d;
    --inf:#38bdf8; --inf-bg:#0c2436; --inf-bd:#075985;

    --sh-1:0 1px 2px rgba(0,0,0,.4);
    --sh-2:0 1px 3px rgba(0,0,0,.45),0 4px 12px rgba(0,0,0,.35);
    --sh-3:0 4px 10px rgba(0,0,0,.5),0 12px 32px rgba(0,0,0,.45);

    --ring:color-mix(in srgb,var(--primary-color),transparent 65%);
}
[data-theme="dark"] body{color:var(--ink)}
[data-theme="dark"] a{color:#93c5fd}
[data-theme="dark"] .pagetitle{
    background:var(--surface) !important;
    border:1px solid var(--line) !important;
    border-left:3px solid var(--primary-color) !important}
[data-theme="dark"] .pagetitle h1{color:var(--ink) !important}
[data-theme="dark"] .card{background:var(--surface) !important;border-color:var(--line) !important}
[data-theme="dark"] .card-header{border-bottom-color:var(--line) !important;background:transparent !important}
[data-theme="dark"] .card-footer{background:var(--surface-2) !important;border-top-color:var(--line) !important}
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] .input-group-text{
    background-color:var(--surface-2) !important;
    border-color:var(--line-strong) !important;
    color:var(--ink) !important}
[data-theme="dark"] .form-control::placeholder{color:var(--ink-3) !important}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus{
    border-color:var(--primary-light-color,#7ea6f4) !important;
    box-shadow:0 0 0 3px var(--ring) !important}
[data-theme="dark"] .btn-secondary,
[data-theme="dark"] .btn-light{
    --bs-btn-bg:var(--surface-2);--bs-btn-border-color:var(--line-strong);
    --bs-btn-color:var(--ink);--bs-btn-hover-bg:#2c3a52;
    --bs-btn-hover-color:var(--ink);--bs-btn-hover-border-color:var(--n-500)}
[data-theme="dark"] .table{--bs-table-color:var(--ink);--bs-table-bg:transparent}
[data-theme="dark"] .table > thead th,
[data-theme="dark"] table.dataTable thead th,
[data-theme="dark"] table.dataTable thead td{
    background:var(--surface-2) !important;color:var(--ink-3) !important;
    border-bottom-color:var(--line) !important}
[data-theme="dark"] .table > :not(caption) > * > *{border-bottom-color:var(--line);color:var(--ink)}
[data-theme="dark"] .table-hover > tbody > tr:hover > *,
[data-theme="dark"] table.dataTable tbody tr:hover{
    background-color:#243044 !important}
[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > *{
    --bs-table-accent-bg:rgba(36,48,68,.5)}
[data-theme="dark"] .modal-content{background:var(--surface);border-color:var(--line)}
[data-theme="dark"] .modal-header{border-bottom-color:var(--line)}
[data-theme="dark"] .modal-footer{background:var(--surface-2);border-top-color:var(--line)}
[data-theme="dark"] .btn-close{filter:invert(1) grayscale(100%) brightness(200%)}
[data-theme="dark"] .dropdown-menu{background:var(--surface);border-color:var(--line);color:var(--ink)}
[data-theme="dark"] .dropdown-item{color:var(--ink-2)}
[data-theme="dark"] .dropdown-item:hover,[data-theme="dark"] .dropdown-item:focus{
    background:var(--surface-2);color:var(--ink)}
[data-theme="dark"] .nav-tabs{border-bottom-color:var(--line)}
[data-theme="dark"] .nav-tabs .nav-link{color:var(--ink-2)}
[data-theme="dark"] .nav-tabs .nav-link.active{color:#93c5fd;border-bottom-color:#93c5fd}
[data-theme="dark"] .alert-success{color:var(--ok);background:var(--ok-bg);border-color:var(--ok-bd)}
[data-theme="dark"] .alert-warning{color:var(--warn);background:var(--warn-bg);border-color:var(--warn-bd)}
[data-theme="dark"] .alert-danger{color:var(--err);background:var(--err-bg);border-color:var(--err-bd)}
[data-theme="dark"] .alert-info{color:var(--inf);background:var(--inf-bg);border-color:var(--inf-bd)}
[data-theme="dark"] .select2-container--default .select2-selection--single,
[data-theme="dark"] .select2-container--default .select2-selection--multiple,
[data-theme="dark"] .ts-control,[data-theme="dark"] .selectize-input{
    background-color:var(--surface-2) !important;
    border-color:var(--line-strong) !important;color:var(--ink) !important}
[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered{
    color:var(--ink) !important}
[data-theme="dark"] .select2-dropdown,
[data-theme="dark"] .ts-dropdown,[data-theme="dark"] .selectize-dropdown{
    background:var(--surface);border-color:var(--line);color:var(--ink)}
[data-theme="dark"] .select2-container--default .select2-results__option{color:var(--ink-2)}
[data-theme="dark"] .select2-search--dropdown .select2-search__field{
    background:var(--surface-2) !important;border-color:var(--line-strong) !important;color:var(--ink) !important}
[data-theme="dark"] .page-item .page-link{
    background:var(--surface);border-color:var(--line);color:var(--ink-2)}
[data-theme="dark"] .page-item .page-link:hover{background:var(--surface-2);color:var(--ink)}
[data-theme="dark"] .page-item.active .page-link{
    background:var(--primary-color);border-color:var(--primary-color);color:#fff}
[data-theme="dark"] .swal2-popup{background:var(--surface) !important;color:var(--ink) !important}
[data-theme="dark"] .swal2-title,[data-theme="dark"] .swal2-html-container{color:var(--ink) !important}
[data-theme="dark"] .sweet-alert{background:var(--surface) !important}
[data-theme="dark"] .sweet-alert h2,[data-theme="dark"] .sweet-alert p{color:var(--ink) !important}
[data-theme="dark"] .flatpickr-calendar{background:var(--surface);border-color:var(--line);box-shadow:var(--sh-3)}
[data-theme="dark"] .flatpickr-day{color:var(--ink)}
[data-theme="dark"] .flatpickr-day.flatpickr-disabled{color:var(--ink-3)}
[data-theme="dark"] *::-webkit-scrollbar-thumb{background:var(--line);background-clip:content-box;border:2px solid transparent}
[data-theme="dark"] ::selection{background:color-mix(in srgb,var(--primary-color),transparent 55%)}

/* ── 12 · SPACING & ALIGNMENT PASS (v2) ───────────────────────────────────── */
/* Neutral canvas — replaces the tenant-tinted green page background. The brand
   color stays in actions/accents where it belongs, not washed over the page. */
body { background:var(--page) !important; }

/* Content area: consistent padding, clear the 90px fixed header */
#main { padding:14px 28px 44px; }
@media (max-width:1199px){ #main { padding:12px 16px 36px; } }

/* Page title bar: title + breadcrumb aligned, consistent margins */
.pagetitle { margin:2px 0 16px; }
.pagetitle h1 { margin-bottom:2px; }
.pagetitle .breadcrumb, .breadcrumb { margin-bottom:0; padding:0; }

/* Header rows: everything vertically centered, pills never clip or misalign */
.header { overflow:visible; }
.filter-nav-tabs { display:flex; align-items:center; flex-wrap:wrap; row-gap:6px; margin:0; }
/* Center only the header's top-level icon row — NEVER dropdown panels.
   (v2 regression: the broad `.header-nav ul` rule forced notification/message/
   language dropdown menus permanently open. Scoped + explicit reset below.) */
.header-nav > ul:not(.dropdown-menu) { display:flex; align-items:center; margin-bottom:0; }
.header-nav ul.dropdown-menu { display:none; align-items:initial; }
.header-nav ul.dropdown-menu.show { display:block; }
.filter-nav-tabs .nav-link { padding:0; }

/* Form rhythm: one control height everywhere so filter rows line up */
.form-control,.form-select { min-height:38px; padding-top:.42rem; padding-bottom:.42rem; }
textarea.form-control { min-height:auto; height:auto; }
.form-control-sm,.form-select-sm { min-height:31px; font-size:12.5px; }
.input-group-text { min-height:38px; }
.select2-container--default .select2-selection--single { height:38px; }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height:36px; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height:36px; }

/* Vertical gaps inside filter/form grids (fixes cramped stacked fields) */
form .row, .card .row { row-gap:12px; }
.dataTables_wrapper .row { row-gap:8px; }

/* Cards: consistent inner padding and stacking gap */
.card-body { padding:1.15rem 1.3rem; }
.card + .card { margin-top:1rem; }

/* DataTables toolbar breathing room */
div.dataTables_wrapper div.dataTables_length,
div.dataTables_wrapper div.dataTables_filter { padding:2px 0; }

/* Dark-mode canvas stays correct with the body override above */
[data-theme="dark"] body { background:var(--page) !important; }

/* ── 13 · CONSISTENCY REFINEMENTS (v4) ────────────────────────────────────── */
/* Select2 single-selects: hard-enforce the standard control height so wide
   page-level instances (e.g. "All Sources") match neighboring selects */
/* v5: flex-center the rendered text instead of line-height clamps — text can
   never sit outside the box no matter what height a page forces */
.select2-container--default .select2-selection--single {
    height:38px !important; min-height:38px !important;
    display:flex !important; align-items:center !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height:normal !important; padding-top:0 !important; padding-bottom:0 !important;
    flex:1; display:block;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height:100% !important; top:0 !important; display:flex; align-items:center;
}
.select2-container { max-width:100%; }

/* Progress bars: slim, rounded, quiet track */
.progress { height:8px; border-radius:var(--r-full); background:var(--surface-2); box-shadow:none; }
.progress-bar { border-radius:var(--r-full); }
[data-theme="dark"] .progress { background:var(--surface-2); }

/* Native date/time inputs align with the 38px rhythm */
input[type="date"].form-control, input[type="time"].form-control,
input[type="datetime-local"].form-control { min-height:38px; }

/* Pastel icon tiles used on dashboards: consistent rounding */
.card .icon, .stat-icon, .dashboard-icon { border-radius:var(--r-md); }

/* ── 14 · ALIGNMENT REPAIR PASS (v5) ──────────────────────────────────────── */
/* Page title block: enforce inner padding even where pages zero it out,
   tighten the title/subtitle stack */
.pagetitle { padding:12px 18px !important; }
.pagetitle h1 { margin:0; line-height:1.3; }
.pagetitle .breadcrumb { margin-top:2px; }

/* Header action icons: uniform hit-area, centered glyphs, badges pinned
   to the corner instead of floating */
.header-nav .nav-link.nav-icon {
    display:flex; align-items:center; justify-content:center;
    width:40px; height:40px; border-radius:50%; position:relative;
    transition:background var(--t-fast) var(--ease);
}
.header-nav .nav-link.nav-icon:hover { background:var(--surface-2); }
.header-nav .nav-icon i { font-size:18px; line-height:1; }
.header-nav .badge-number {
    position:absolute; top:3px; right:3px;
    min-width:16px; height:16px; padding:0 4px;
    display:flex; align-items:center; justify-content:center;
    font-size:10px; font-weight:700; line-height:1; border-radius:var(--r-full);
}
.header-nav > ul:not(.dropdown-menu) { gap:2px; }

/* DataTables toolbar: length select, export buttons and search on one line,
   vertically centered, consistent heights */
div.dataTables_wrapper div.dataTables_length,
div.dataTables_wrapper div.dataTables_filter {
    display:flex; align-items:center; gap:8px;
}
div.dataTables_wrapper div.dataTables_filter { justify-content:flex-end; }
.dataTables_wrapper .dataTables_length select {
    width:auto; min-height:34px; padding:4px 28px 4px 10px;
}
.dt-buttons { display:inline-flex !important; align-items:center; gap:6px; vertical-align:middle; }
.dt-buttons .btn, .dt-button {
    display:inline-flex; align-items:center; justify-content:center;
    min-height:34px; margin:0 !important;
}
/* v8: the former [class*="col-"] flex rule broke DataTables' scroll-header
   width sync (compressed header cells). Target only the toolbar/pagination. */
div.dataTables_wrapper div.dataTables_paginate { display:flex; justify-content:flex-end; align-items:center; }
div.dataTables_wrapper div.dataTables_info { display:flex; align-items:center; }
div.dataTables_wrapper table { width:100% !important; }

/* ── 15 · DROPDOWN INDICATORS (v6) ────────────────────────────────────────── */
/* One clean chevron everywhere — kills the browser default caret, the Select2
   border-triangle, and the Bootstrap border caret. */

/* Native selects (with or without .form-select) */
select:not([multiple]):not([size]) {
    -webkit-appearance:none; -moz-appearance:none; appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 10px center;
    background-size:15px;
    padding-right:32px !important;
}
select:not([multiple]):not([size])::-ms-expand { display:none; }

/* Select2: hide the triangle, draw the same chevron, rotate when open */
.select2-container--default .select2-selection--single .select2-selection__arrow b { display:none !important; }
.select2-container--default .select2-selection--single .select2-selection__arrow {
    width:26px !important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:center; background-size:15px;
    transition:transform var(--t-fast) var(--ease);
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow {
    transform:rotate(180deg);
}

/* Bootstrap dropdown-toggle caret → chevron via mask (inherits text color) */
.dropdown-toggle::after {
    border:none !important;
    width:14px; height:14px;
    margin-left:6px;
    vertical-align:-2px;
    background-color:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E") no-repeat center / 14px;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E") no-repeat center / 14px;
}
.dropdown-toggle.show::after { transform:rotate(180deg); }

/* Dark mode: lighter chevron for native selects + Select2 */
[data-theme="dark"] select:not([multiple]):not([size]),
[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__arrow {
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2394a3b8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
}

/* ── 16 · SINGLE-ROW FIXES (v7) ───────────────────────────────────────────── */
/* Dashboard title filters (All Organizations / Campaigns / Sources): keep on
   ONE row — cap the JS-widened Select2/select so it can't force a wrap */
.pagetitle .d-flex.flex-wrap { flex-wrap:nowrap !important; }
.pagetitle .d-flex .select2-container,
.pagetitle select.dashboard-white-select {
    width:auto !important; min-width:170px; max-width:240px; flex:0 0 auto;
}
.pagetitle select.dashboard-white-select {
    font-size:13px; font-weight:600; text-align:left;
    border:1px solid var(--line-strong); background-color:var(--surface);
    min-height:38px; border-radius:var(--r-sm);
}
@media (max-width: 991px){
    .pagetitle .d-flex.flex-wrap { flex-wrap:wrap !important; } /* small screens may wrap */
}

/* Header module pills: never wrap to a second row — slim them slightly
   (Inter is a touch wider than the old font) and allow silent side-scroll */
.filter-nav-tabs {
    flex-wrap:nowrap !important;
    overflow-x:auto; overflow-y:visible;
    scrollbar-width:none; -ms-overflow-style:none;
}
.filter-nav-tabs::-webkit-scrollbar { display:none; }
.filter-nav-tab,
.filter-nav-tab.lead, .filter-nav-tab.lead-followup,
.filter-nav-tab.enquiry, .filter-nav-tab.enquiry-followup,
.filter-nav-tab.address-list, .filter-nav-tab.ivr-nav,
.filter-nav-tab.meta-nav, .filter-nav-tab.whatsapp-nav {
    font-size:11px !important;
    padding:5px 11px 5px 8px !important;
    gap:5px !important;
    flex:0 0 auto;
}
.filter-nav-tab img { width:16px !important; height:16px !important; }

/* ── 17 · REPORT-SCREEN POLISH (v8) ───────────────────────────────────────── */
/* Table headers: quiet enterprise style EVERYWHERE — beats per-page solid
   primary-color header bars (loud green slabs) */
.table thead th, .table > thead > tr > th,
table.dataTable thead th, table.dataTable thead td {
    background:var(--surface-2) !important;
    color:var(--ink-2) !important;
    border-bottom:1px solid var(--line) !important;
}
[data-theme="dark"] .table thead th, [data-theme="dark"] .table > thead > tr > th,
[data-theme="dark"] table.dataTable thead th, [data-theme="dark"] table.dataTable thead td {
    background:#243044 !important;
    color:#94a3b8 !important;
}

/* Sort arrows: stop colliding with header text */
table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc,
table.dataTable thead th.dt-orderable-asc,
table.dataTable thead th.dt-orderable-desc { padding-right:26px !important; position:relative; }
table.dataTable thead .sorting:before, table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:before, table.dataTable thead .sorting_desc:after {
    right:8px; opacity:.35;
}

/* Filter rows: inline labels like "TO" sit centered against their inputs */
form .row > .col-auto, .card .row > .col-auto {
    display:flex; align-items:center;
    font-size:12px; font-weight:600; color:var(--ink-3); letter-spacing:.04em;
}

/* Export/tool icon buttons (gear, excel, pdf, print rows): uniform tiles */
.dt-buttons .btn i, .dt-button i { font-size:15px; }

/* Count pills like "Total Enquiries: 0" — tokenized, not raw blue */
.badge.bg-primary, .btn.bg-primary { font-weight:600; letter-spacing:.02em; }

/* ── 18 · BRAND WIRING + BADGE SYSTEM (v9) ────────────────────────────────── */
/* Wire Bootstrap's --bs-primary to the tenant color: task-theme.css and other
   modules read --bs-primary first and were falling back to Bootstrap BLUE */
:root { --bs-primary:var(--primary-color); }
.text-primary { color:var(--primary-color) !important; }
.bg-primary { background-color:var(--primary-color) !important; }
.border-primary { border-color:var(--primary-color) !important; }
.btn-link { color:var(--primary-color); }

/* Badges: soft enterprise tints instead of loud solid blocks; text never clips */
.badge { white-space:normal; line-height:1.35; }
.badge.bg-success { background:var(--ok-bg) !important; color:var(--ok) !important; border:1px solid var(--ok-bd); }
.badge.bg-warning { background:var(--warn-bg) !important; color:var(--warn) !important; border:1px solid var(--warn-bd); }
.badge.bg-danger  { background:var(--err-bg) !important; color:var(--err) !important; border:1px solid var(--err-bd); }
.badge.bg-info    { background:var(--inf-bg) !important; color:var(--inf) !important; border:1px solid var(--inf-bd); }
.badge.bg-secondary { background:var(--surface-2) !important; color:var(--ink-2) !important; border:1px solid var(--line); }
.badge.bg-primary {
    background:var(--primary-050,#eef2ff) !important;
    color:var(--primary-color) !important;
    border:1px solid color-mix(in srgb,var(--primary-color),#fff 70%);
}

/* Header count bubbles stay SOLID (they must pop against the toolbar) */
.header-nav .badge-number { color:#fff !important; border:none !important; }
.header-nav .badge-number.bg-success { background:var(--ok) !important; }
.header-nav .badge-number.bg-danger  { background:var(--err) !important; }
.header-nav .badge-number.bg-primary,
.header-nav .badge-number.bg-info    { background:#3b82f6 !important; }

/* Task filter cards: let them size to their label (no more clipped text),
   tokenized borders, tenant-colored active state instead of blue */
.task-category-filter-card {
    width:auto !important; min-width:150px;
    border:1px solid var(--line) !important;
    border-radius:var(--r-md) !important;
    box-shadow:var(--sh-1) !important;
    transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
.task-category-filter-card:hover { box-shadow:var(--sh-2) !important; }
.task-category-filter-card.active,
.task-category-filter-card.selected,
.task-category-filter-card[class*="active"] {
    border-color:var(--primary-color) !important;
    box-shadow:0 0 0 3px var(--ring) !important;
}
.task-card-body .badge { display:inline-block !important; }
.task-filter-section-title { font-size:13px; font-weight:700; color:var(--ink); margin:10px 0 6px; }

/* ── 19 · PRODUCTION PIPELINE STAGE STRIP (v10) ───────────────────────────── */
/* Even grid: all stage cards the same width on every row (was flex — row 2
   stretched huge while row 1 cramped and inputs overflowed card edges) */
.stage-strip .ss-rail {
    display:grid !important;
    grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
    gap:12px;
}
.stage-strip .ss-node { min-width:0; max-width:100%; border-color:var(--line); }
.stage-strip .ss-urlrow { min-width:0; }
.stage-strip .ss-url { min-width:0; width:100%; max-width:100%; }
.stage-strip .ss-select { max-width:100%; }
.stage-strip { border-color:var(--line); box-shadow:var(--sh-1); }
[data-theme="dark"] .stage-strip { background:var(--surface); border-color:var(--line); }
[data-theme="dark"] .stage-strip .ss-node { border-color:var(--line); background:var(--surface-2); }
[data-theme="dark"] .stage-strip .ss-name,
[data-theme="dark"] .stage-strip .ss-title { color:var(--ink) !important; }
[data-theme="dark"] .stage-strip .ss-select,
[data-theme="dark"] .stage-strip .ss-url {
    background:var(--surface); border-color:var(--line-strong); color:var(--ink);
}

/* ── 20 · MASTER TABLES + LOAD MORE (v11) ─────────────────────────────────── */
/* Quiet headers for MasterTable too — mirrors the exact high-specificity
   selectors of the older inline "solid primary" rules so the cascade (this
   file loads last) resolves to ONE consistent header style app-wide */
table.MasterTable thead tr:first-child th,
table.MasterTable thead.tablehead tr:first-child th,
.tablehead tr:first-child th,
table.dataTable thead tr:first-child > th.dtfc-fixed-left,
table.dataTable thead tr:first-child > th.dtfc-fixed-right,
table.MasterTable thead tr:first-child > th.dtfc-fixed-left,
table.MasterTable thead tr:first-child > th.dtfc-fixed-right {
    background-color:var(--surface-2) !important;
    background-image:none !important;
    color:var(--ink-2) !important;
    border-right:none !important;
    border-bottom:1px solid var(--line) !important;
    font-size:11px !important;
    letter-spacing:.06em !important;
}
[data-theme="dark"] table.MasterTable thead tr:first-child th,
[data-theme="dark"] table.MasterTable thead.tablehead tr:first-child th,
[data-theme="dark"] .tablehead tr:first-child th,
[data-theme="dark"] table.dataTable thead tr:first-child > th.dtfc-fixed-left,
[data-theme="dark"] table.dataTable thead tr:first-child > th.dtfc-fixed-right,
[data-theme="dark"] table.MasterTable thead tr:first-child > th.dtfc-fixed-left,
[data-theme="dark"] table.MasterTable thead tr:first-child > th.dtfc-fixed-right {
    background-color:#243044 !important;
    color:#94a3b8 !important;
    border-bottom-color:#334155 !important;
}
/* Column-filter row under the header: tidy inputs */
table.MasterTable thead tr:nth-child(2) th { background:var(--surface) !important; padding:6px 8px !important; border-bottom:1px solid var(--line) !important; }
table.MasterTable thead tr:nth-child(2) input {
    width:100%; min-height:32px; font-size:12.5px;
    border:1px solid var(--line-strong); border-radius:var(--r-sm);
    padding:4px 10px; background:var(--surface); color:var(--ink);
}
table.MasterTable thead tr:nth-child(2) input:focus {
    outline:none; border-color:var(--primary-color); box-shadow:0 0 0 3px var(--ring);
}

/* "Load More" — was a bare unstyled <button> floating below the card */
.loadmore { margin:18px 0 6px; }
.loadmore button, .loadmore #next {
    font-family:var(--app-font); font-size:13px; font-weight:600;
    color:#fff; background:var(--primary-color);
    border:none; border-radius:var(--r-sm);
    padding:9px 22px; cursor:pointer;
    box-shadow:var(--sh-1);
    transition:box-shadow var(--t-fast) var(--ease),filter var(--t-fast) var(--ease),transform var(--t-fast) var(--ease);
}
.loadmore button:hover, .loadmore #next:hover { filter:brightness(.94); box-shadow:var(--sh-2); }
.loadmore button:active, .loadmore #next:active { transform:translateY(1px); }

/* ── 21 · SORT ARROW CENTERING (v12) ──────────────────────────────────────── */
table.dataTable thead th.sorting::before, table.dataTable thead th.sorting::after,
table.dataTable thead th.sorting_asc::before, table.dataTable thead th.sorting_asc::after,
table.dataTable thead th.sorting_desc::before, table.dataTable thead th.sorting_desc::after,
table.MasterTable thead tr:first-child th.sorting::before,
table.MasterTable thead tr:first-child th.sorting::after,
table.MasterTable thead tr:first-child th.sorting_asc::before,
table.MasterTable thead tr:first-child th.sorting_asc::after,
table.MasterTable thead tr:first-child th.sorting_desc::before,
table.MasterTable thead tr:first-child th.sorting_desc::after {
    color:var(--ink-3) !important;
    opacity:.55 !important;
    right:8px !important;
    top:50% !important;
    bottom:auto !important;
    line-height:1 !important;
    font-size:10px !important;
}
/* stacked pair: nudge the up arrow above center, down arrow below */
table.dataTable thead th.sorting::before,
table.MasterTable thead tr:first-child th.sorting::before { transform:translateY(-90%) !important; }
table.dataTable thead th.sorting::after,
table.MasterTable thead tr:first-child th.sorting::after { transform:translateY(-10%) !important; }
table.dataTable thead th.sorting_asc::before, table.dataTable thead th.sorting_desc::after,
table.MasterTable thead tr:first-child th.sorting_asc::before,
table.MasterTable thead tr:first-child th.sorting_desc::after { transform:translateY(-50%) !important; }

/* ── 22 · LENGTH SELECT SPACING (v13) ─────────────────────────────────────── */
/* "Show [10] entries": align the three tokens on one baseline and tighten the
   select's inner padding (chevron was reserving too much right space) */
.dataTables_wrapper .dataTables_length label {
    display:flex; align-items:center; gap:8px; margin:0;
    font-size:13px; font-weight:500; color:var(--ink-2);
}
.dataTables_wrapper .dataTables_length select {
    padding:6px 24px 6px 8px !important;
    background-position:right 8px center !important;
    min-width:64px; width:64px;
    text-align:center; text-align-last:center;
    margin:0;
}

/* ── 23 · PROJECT-WIDE SWEEP (v16) ────────────────────────────────────────── */
/* Sidebar submenu: calm default (no tinted pill on every item) — pill only on
   hover and the active item */
.sidebar-nav .nav-content a { background:transparent !important; }
.sidebar-nav .nav-content a:hover {
    background:color-mix(in srgb,var(--primary-color),#fff 92%) !important;
    color:var(--primary-color) !important;
}
.sidebar-nav .nav-content a.active {
    background:color-mix(in srgb,var(--primary-color),#fff 88%) !important;
    color:var(--primary-color) !important;
    font-weight:700;
}
[data-theme="dark"] .sidebar-nav .nav-content a { background:transparent !important; }
[data-theme="dark"] .sidebar-nav .nav-content a:hover,
[data-theme="dark"] .sidebar-nav .nav-content a.active {
    background:color-mix(in srgb,var(--primary-color),#0f172a 75%) !important;
    color:#cbd5e1 !important;
}

/* Legacy .savebtn (used across 20+ modals): align with .btn-primary system */
.savebtn, .responsebtn {
    font-family:var(--app-font); font-size:13px; font-weight:600;
    border-radius:var(--r-sm) !important;
    padding:.5rem 1.1rem;
    box-shadow:var(--sh-1);
    transition:filter var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),transform var(--t-fast) var(--ease);
}
.savebtn:hover, .responsebtn:hover { filter:brightness(.92); box-shadow:var(--sh-2); }
.savebtn:active { transform:translateY(1px); }

/* Legacy custom tabs (.tablinks) used on task board modals */
.tablinks {
    font-family:var(--app-font); font-size:13px; font-weight:600;
    color:var(--ink-2); background:transparent;
    border:none; border-bottom:2px solid transparent;
    padding:8px 14px; cursor:pointer;
    transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
}
.tablinks:hover { color:var(--ink); border-bottom-color:var(--line-strong); }
.tablinks.active { color:var(--primary-color); border-bottom-color:var(--primary-color); }

/* Offcanvas panels (task detail drawer etc.) */
.offcanvas {
    border:none; box-shadow:var(--sh-3);
    font-family:var(--app-font);
}
.offcanvas-header { border-bottom:1px solid var(--line); }
.offcanvas-title { font-weight:700; letter-spacing:-.01em; }
[data-theme="dark"] .offcanvas { background:var(--surface); color:var(--ink); }
[data-theme="dark"] .offcanvas-header { border-bottom-color:var(--line); }

/* Kanban / board task cards (dynamic boards) */
.kanban-card, .tk-card { border-radius:var(--r-md); }
[data-theme="dark"] .kanban-column { background:var(--surface) !important; }
[data-theme="dark"] .kanban-card { background:var(--surface-2) !important; border-color:var(--line) !important; color:var(--ink); }

/* Dashed "add" placeholders: subtle, brand on hover */
[class*="add-task"], .add-task-placeholder, .ss-empty button {
    transition:border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}

/* Print: reports come out clean — no app chrome */
@media print {
    .header, .sidebar, .filter-nav-tabs, .qc-fab, .back-to-top,
    .dt-buttons, .dataTables_filter, .dataTables_length,
    #cw-theme-toggle, .quick-panel { display:none !important; }
    #main { margin:0 !important; padding:0 !important; }
    body { background:#fff !important; }
    .card, .tablecard { box-shadow:none !important; border:1px solid #ddd !important; }
}

/* ── 24 · DENSITY & RHYTHM SWEEP (v17) ────────────────────────────────────── */
/* Buttons: icon + label always on one line, centered (fixes stacked "Reset",
   clipped "Search" icon, and every icon-button alignment in the app) */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; white-space:nowrap; }
.btn i { line-height:1; font-size:1.05em; }

/* Cards: compact padding; kill trailing margins that create dead space */
.card-body { padding:.85rem 1.05rem; }
.card-body > :last-child { margin-bottom:0 !important; }
.card > .row:last-child, .card form:last-child { margin-bottom:0; }

/* Standard rhythm: consistent gutters and row gaps inside cards and forms */
.card .row { --bs-gutter-x:14px; }
form .row, .card .row { row-gap:10px; }
.card .mb-4 { margin-bottom:1rem !important; }
.card h4, .card h5, .card h6 { margin-bottom:.5rem; }

/* Form rows: vertically center controls with inline labels like "TO"
   (scoped via :has so tall content columns are untouched) */
.card .row:has(> [class*="col"] > .form-control):not(:has(.card)),
.card .row:has(> [class*="col"] > .form-select):not(:has(.card)),
form .row:has(> [class*="col"] > .form-control):not(:has(.card)) {
    align-items:center;
}

/* Select2 clear (×): pinned inside the control, right of the text */
.select2-container--default .select2-selection--single .select2-selection__clear {
    position:absolute; right:28px; top:50%; transform:translateY(-50%);
    margin:0; padding:0 4px; border:none; background:none;
    font-size:15px; font-weight:400; color:var(--ink-3);
}
.select2-container--default .select2-selection--single .select2-selection__clear:hover { color:var(--err); }

/* DataTables chrome: no double-height toolbars */
div.dataTables_wrapper div.dataTables_length,
div.dataTables_wrapper div.dataTables_filter { padding:0; }
.dataTables_wrapper .row { row-gap:6px; }
.dataTables_wrapper .row > [class*="col"] { padding-top:2px; padding-bottom:2px; }

/* Empty states: quiet, compact */
.dataTables_empty, .tk-empty { padding:22px 0 !important; color:var(--ink-3) !important; font-size:13px; }

/* Section headings above content blocks (e.g. "Departments"): consistent */
.card > .card-body > h5:first-child,
.card > .card-body > h6:first-child { margin-bottom:.75rem; }

/* Stat/summary cards: content-sized, not artificially tall */
.card.info-card, .pmo-scope .card { min-height:0; }
.card .card-title { margin-bottom:.4rem; padding:0; }

/* ── 25 · HEADER ICON SPACING (v18) ───────────────────────────────────────── */
/* Kill the per-item utility margins (me-md-2 etc.) — one uniform 4px gap */
.header-nav > ul:not(.dropdown-menu) { gap:4px !important; }
.header-nav > ul:not(.dropdown-menu) > li,
.header-nav > ul:not(.dropdown-menu) > a,
.header-nav > ul:not(.dropdown-menu) .nav-item { margin:0 !important; }
.header-nav .quick-panel { margin:0 !important; display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; }
.header-nav .quick-panel:hover { background:var(--surface-2); }

/* ── 26 · KILL DUPLICATE TABLE TOOLBARS + TEMPLATE CHIPS (v19) ────────────── */
/* Master pages render their OWN length select (#pageLengthSelect) and search
   (#SearchBar), yet DataTables' dom string also injects its default "Show N
   entries" + filter — a double toolbar. Hide the generated one ONLY when the
   page's custom control exists (zero functional loss). */
body:has(#pageLengthSelect) .dataTables_wrapper .dataTables_length { display:none !important; }
body:has(#SearchBar) .dataTables_wrapper .dataTables_filter { display:none !important; }

/* Custom toolbar row above master tables: compact, aligned */
.main_heading.subheading { align-items:center; row-gap:8px; padding:6px 0 10px; margin:0; }
#pageLengthSelect { width:auto; min-width:64px; }

/* Template/department filter chips: tokenized frame, tenant active ring
   (dept badge colors themselves are user data — untouched) */
.task-template-filter-card {
    border:1px solid var(--line) !important;
    border-radius:var(--r-md) !important;
    box-shadow:var(--sh-1) !important;
    background:var(--surface) !important;
    transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
.task-template-filter-card:hover { box-shadow:var(--sh-2) !important; }
.task-template-filter-card.selected-filter {
    border-color:var(--primary-color) !important;
    box-shadow:0 0 0 3px var(--ring) !important;
}
.add-dept-template {
    width:32px; height:32px; padding:0 !important;
    display:inline-flex; align-items:center; justify-content:center;
}

/* List/card view toggle buttons: uniform circles, tenant active */
#search-results-table, #search-results-card,
.task-view-toggle-btn, .view-toggle-btn {
    width:36px; height:36px; padding:0;
    display:inline-flex; align-items:center; justify-content:center;
    border:1px solid var(--line-strong); border-radius:50%;
    background:var(--surface); color:var(--ink-2);
    transition:all var(--t-fast) var(--ease);
}
#search-results-table:hover, #search-results-card:hover,
.task-view-toggle-btn:hover { border-color:var(--primary-color); color:var(--primary-color); }
#search-results-table.active, #search-results-card.active,
.task-view-toggle-btn.active {
    background:var(--primary-color) !important;
    border-color:var(--primary-color) !important;
    color:#fff !important;
}

/* ── 27 · FINAL ENTERPRISE PASS (v20) ─────────────────────────────────────── */
/* DataTables processing overlay: branded card instead of default text */
div.dataTables_processing {
    background:var(--surface) !important; border:1px solid var(--line);
    border-radius:var(--r-md); box-shadow:var(--sh-3);
    color:var(--ink-2) !important; font-size:13px; padding:10px 18px;
}
/* Bottom info + pagination on one aligned row */
.dataTables_wrapper .bottom {
    display:flex; align-items:center; justify-content:space-between;
    flex-wrap:wrap; gap:8px; padding-top:8px;
}
/* Keyboard hints */
kbd, .tk-kbd {
    background:var(--surface-2); border:1px solid var(--line-strong);
    border-radius:4px; padding:1px 6px; font-size:11px;
    color:var(--ink-2); font-family:var(--app-font); box-shadow:none;
}
/* Dividers + containers */
hr { border-color:var(--line); opacity:1; }
.table-responsive { border-radius:var(--r-md); }
html { scroll-behavior:smooth; }
.spinner-border { --bs-spinner-border-width:2px; }
/* Breadcrumb hidden when the dedup script empties it */
.pagetitle .breadcrumb[data-cw-dup="1"] { display:none !important; }

/* ── 28 · PAYROLL / ACCOUNTS / FINANCE MODULE HARMONIZATION (v21) ─────────── */
/* These modules are pre-launch — deep-themed to the system. Shared classes
   used across their views: */
.main_card { border-radius:var(--r-lg) !important; border:1px solid var(--line) !important; box-shadow:var(--sh-1) !important; }
.main_card .card-header { font-size:13.5px; }
.kpi-card { border:1px solid var(--line) !important; box-shadow:var(--sh-1) !important; }
.kpi-card:hover { box-shadow:var(--sh-2) !important; }
/* Subtle-tint Bootstrap badges used in these modules follow semantic tokens */
.bg-success-subtle { background:var(--ok-bg) !important; } .text-success { color:var(--ok) !important; }
.bg-danger-subtle { background:var(--err-bg) !important; } .text-danger { color:var(--err) !important; }
.bg-warning-subtle { background:var(--warn-bg) !important; }
.bg-info-subtle { background:var(--inf-bg) !important; }
/* Voucher/report tables in accounts: monospace-free tabular figures */
.accounts-table td, .voucher-table td { font-variant-numeric:tabular-nums; }
[data-theme="dark"] .main_card, [data-theme="dark"] .kpi-card { background:var(--surface) !important; }
[data-theme="dark"] .welcome-banner { box-shadow:var(--sh-2); }

/* ── 29 · HEADER ICON SPACING, ROOT CAUSE (v22) ───────────────────────────── */
/* style.css puts margin-right:25px on .nav-icon itself — that was the gap */
.header-nav .nav-icon { margin-right:0 !important; margin-left:0 !important; }
.header-nav > ul:not(.dropdown-menu) { gap:2px !important; }