/*!
 * SPDX-FileCopyrightText: 2024-2026 Techstas Global Innovations
 * SPDX-License-Identifier: LicenseRef-Techstas-Proprietary
 *
 * PROPRIETARY AND CONFIDENTIAL. Unauthorised copying, distribution or use
 * of this file, via any medium, is strictly prohibited. See LICENSE at the
 * repository root.
 */

/* ════════════════════════════════════════════════════════════════════════════
   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-500); /* v23: was n-400, 2.6:1 on white */

    /* 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:16px}
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:14px;
    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:14px;
    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:14px;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:14px;
    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:14px}

/* 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:12px;
    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:13px}
.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:13px;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:12px;
    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:14px; }
.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:16px;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:14px;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:14px;
}
.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:20px !important;font-weight:700 !important;letter-spacing:-.01em}
.swal2-styled.swal2-confirm{
    border-radius:var(--r-sm) !important;font-weight:600 !important;font-size:14px !important}
.swal2-styled.swal2-cancel{
    border-radius:var(--r-sm) !important;font-weight:600 !important;font-size:14px !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:#8b9ab0; /* v23: was #64748b, 3.0:1 on --surface */

    --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:13px; }
.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:16px; 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:12px; 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:12px !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:16px; }

/* 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:12px !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:13px;
    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:12px !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:16px; 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:12px;
    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:14px; }
.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; }

/* ── 30 · AUDIT CONSOLIDATION (v23, 2026-10-03) ──────────────────────────── */
/* The 2026-10-03 live audit (fleet docs: docs/registers/AUDIT-2026-10-03-inston-
   live-ui.md) measured the product WITH this file loaded and still found up to
   18 font sizes and three families per screen, 25-60% of text under WCAG 4.5:1,
   buttons at 25-80px, a 90px header and placeholder-only inputs. This section
   closes what the earlier passes left open. It works through this file's own
   tokens; it adds only --header-h and the type-scale tokens below. Behaviour that
   CSS cannot express lives in /assets/js/theme-enterprise.js.

   The type scale is six sizes and nothing renders below 12px. This file's own
   10/11/12.5/13.5/15/18/19px values were moved onto the scale in v23. */
:root {
    --fs-xs:12px; --fs-sm:13px; --fs-base:14px; --fs-md:16px; --fs-lg:20px; --fs-xl:24px;
    --ctl-h:38px; --ctl-h-sm:32px;
    --header-h:64px;
}

/* One typeface. style.css sets Poppins on eight selectors and individual views
   add Helvetica, Plus Jakarta Sans and Segoe UI. Text elements take the token;
   icon elements keep their icon fonts because they are excluded by name. */
body :is(h1,h2,h3,h4,h5,h6,p,a,span,div,label,li,dt,dd,td,th,caption,small,strong,b,em,legend,
         button,input,select,textarea,option,.btn,.form-control,.form-select,.nav-link,.dropdown-item,
         .badge,.card-title,.modal-title,.breadcrumb,.page-link,.select2-selection,.select2-results__option,
         .ts-control,.swal2-popup,.toast):not(.bi):not(.fa):not([class*=" fa-"]):not([class^="fa-"]):not(.bx):not([class^="bx"]):not([class*=" bx-"]):not([class^="ri-"]):not([class*=" ri-"]):not(.material-icons):not([class*="material-symbols"]):not(.ti):not([class^="ti-"]):not([class*=" ti-"]):not(code):not(kbd):not(pre) {
    font-family:var(--app-font) !important;
}

/* Headings on the scale. */
#main > h1, #main section > h1, #main :is(.pagetitle h1, .page-title, .page-header h1, .content-header h1) {
    font-size:var(--fs-lg) !important; font-weight:600 !important; line-height:1.3 !important;
    letter-spacing:-.01em; color:var(--ink) !important;
}
#main h1 { font-size:var(--fs-lg); font-weight:600; }
#main :is(h2,h3) { font-size:var(--fs-md); font-weight:600; line-height:1.35; }
#main :is(h4,h5,h6) { font-size:var(--fs-base); font-weight:600; line-height:1.4; }
#main .card-title { font-size:var(--fs-md) !important; font-weight:600 !important; color:var(--ink) !important; }
#main :is(small,.small,.form-text,.text-xs) { font-size:var(--fs-xs) !important; }
#main label, #main .form-label, #main .col-form-label { font-size:var(--fs-sm); font-weight:500; color:var(--ink-2); }

/* Secondary text that still reads (--ink-3 was #94a3b8, 2.6:1 on white). */
.text-muted, .text-secondary, .text-black-50, .text-body-secondary { color:var(--ink-2) !important; }
::placeholder { color:var(--n-500) !important; opacity:1 !important; }
#main a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link) { color:color-mix(in srgb, var(--primary-color) 72%, #000); }
[data-theme="dark"] #main a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link) { color:color-mix(in srgb, var(--primary-color) 70%, #fff); }

/* Shell: a 64px header instead of 90px — 26px more working area on every screen. */
.header { height:var(--header-h) !important; }
#main { margin-top:var(--header-h) !important; }
.sidebar { top:var(--header-h) !important; height:calc(100vh - var(--header-h)) !important; }
.header .nav-profile span, .header .nav-profile h6 { white-space:nowrap; }
.header .logo img { max-height:36px; width:auto; }

/* Controls: two heights. */
.form-control, .form-select { min-height:var(--ctl-h); font-size:var(--fs-base); }
.form-control-sm, .form-select-sm { min-height:var(--ctl-h-sm); font-size:var(--fs-sm); }
.form-control:focus, .form-select:focus { border-color:var(--primary-color) !important; box-shadow:0 0 0 3px var(--ring) !important; }
.select2-container .select2-selection--single, .select2-container .select2-selection--multiple { min-height:var(--ctl-h) !important; }
.select2-container .select2-selection--single .select2-selection__rendered { line-height:calc(var(--ctl-h) - 2px) !important; }
.select2-container .select2-selection--single .select2-selection__arrow { height:calc(var(--ctl-h) - 2px) !important; }

/* Buttons: two heights, one radius. */
.btn, .dt-button {
    min-height:var(--ctl-h); padding-top:0; padding-bottom:0;
    display:inline-flex; align-items:center; justify-content:center; gap:6px; vertical-align:middle; line-height:1.2;
}
.btn-sm, .btn-group-sm > .btn, .dt-buttons .dt-button { min-height:var(--ctl-h-sm); }
.btn-lg { min-height:44px; }
.btn-link { min-height:0; }
#main .btn, #main .dt-button { border-radius:var(--r-sm) !important; }
#main .dataTables_wrapper .btn, #main .dt-buttons .btn, #main .datatable-settings-btn {
    min-height:var(--ctl-h-sm) !important; height:var(--ctl-h-sm) !important;
    border-radius:var(--r-sm) !important; padding-top:0 !important; padding-bottom:0 !important;
}
.dts-btn-reset, .dts-btn-save { height:var(--ctl-h) !important; border-radius:var(--r-sm) !important; }
/* Icon-only action buttons in table rows keep a 32px square hit area. */
#main td .btn:not(:has(> span, > :not(i):not(svg))) { min-width:var(--ctl-h-sm); min-height:var(--ctl-h-sm); padding-left:0; padding-right:0; }

/* Tables. */
#main table.table, #main table.dataTable { font-size:var(--fs-sm); }
#main .table > thead > tr > th, #main table.dataTable > thead > tr > th {
    font-size:var(--fs-xs) !important; font-weight:600 !important; color:var(--ink-2) !important; white-space:nowrap;
}
#main .table-responsive > .table > thead > tr > th { position:sticky; top:0; z-index:2; }
#main .dataTables_wrapper :is(.dataTables_info, .dataTables_length, .dataTables_filter) { font-size:var(--fs-sm) !important; color:var(--ink-2) !important; }
#main thead :is(input, select) { min-height:30px; font-size:var(--fs-xs) !important; }
/* An empty table says so plainly, centred, with room to breathe. The words come
   from theme-enterprise.js (DataTables defaults); views that set their own keep theirs. */
#main td.dataTables_empty {
    padding:44px 16px !important; text-align:center !important; color:var(--ink-2) !important;
    font-size:var(--fs-base) !important; background:var(--surface) !important;
}
#main td.dataTables_empty::before {
    content:""; display:block; width:40px; height:40px; margin:0 auto 10px; border-radius:50%;
    background:var(--surface-2) no-repeat center / 20px 20px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%2364748b' stroke-width='1.6' viewBox='0 0 24 24'%3E%3Cpath d='M3 7h18M3 12h18M3 17h10'/%3E%3C/svg%3E");
}

/* Sidebar on the scale. */
.sidebar-nav .nav-link { font-size:var(--fs-base) !important; min-height:36px; }
.sidebar-nav .nav-content a { font-size:var(--fs-sm) !important; min-height:32px; display:flex; align-items:center; }
.sidebar-nav .nav-heading { font-size:var(--fs-xs) !important; color:var(--n-500) !important; }

/* Focus, skip link, keyboard-reachable clickables. */
:focus-visible { outline:2px solid var(--primary-color) !important; outline-offset:2px !important; }
.cw-skip {
    position:fixed; left:12px; top:-60px; z-index:2000; background:var(--ink); color:var(--surface) !important;
    padding:10px 16px; border-radius:var(--r-sm); font-weight:600; text-decoration:none; transition:top var(--t-fast) var(--ease);
}
.cw-skip:focus { top:12px; }
#main [role="button"]:is(i, span, div, td) { cursor:pointer; }
#main :is(i, span)[role="button"] { display:inline-flex; align-items:center; justify-content:center; min-width:24px; min-height:24px; }

/* States. */
.cw-unset { color:var(--n-500); }
.cw-spinner {
    display:inline-block; width:14px; height:14px; border:2px solid var(--line-strong); border-top-color:var(--primary-color);
    border-radius:50%; animation:cw-spin .8s linear infinite; vertical-align:-2px; margin-right:6px;
}
@keyframes cw-spin { to { transform:rotate(360deg); } }

/* Small screens: filters wrap instead of running off the edge, and the floating
   chat button no longer sits on the last field of a form. */
@media (max-width:767.98px) {
    #main { padding-left:16px !important; padding-right:16px !important; padding-bottom:96px !important; }
    #main .pagetitle { flex-wrap:wrap; gap:8px; }
    #main .pagetitle :is(select, .form-select, .form-control, .select2-container) { max-width:100% !important; min-width:0 !important; flex:1 1 140px; }
    #main :is(.form-select, .form-control) { max-width:100%; }
}

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

/* Collapsible sidebar sections (config ui.sidebar_collapsible_sections). The sidebar
   script puts aria-expanded on a heading and nav-sec-collapsed on the groups of a
   folded section, so with the setting off none of this matches anything. */
.sidebar-nav > li.nav-sec-collapsed { display:none !important; }
.sidebar-nav .nav-heading[aria-expanded] {
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    cursor:pointer; user-select:none; border-radius:var(--r-sm);
    transition:color var(--t-fast) var(--ease);
}
.sidebar-nav .nav-heading[aria-expanded]:hover { color:var(--ink-2) !important; }
.sidebar-nav .nav-heading[aria-expanded]::after {
    content:""; flex:none; width:6px; height:6px;
    border-right:2px solid currentColor; border-bottom:2px solid currentColor;
    transform:translateY(-2px) rotate(45deg);
    transition:transform var(--t-fast) var(--ease);
}
.sidebar-nav .nav-heading[aria-expanded="false"]::after { transform:translateX(-2px) rotate(-45deg); }

/* ── 31 · RESPONSIVE (v25, 2026-10-04) ────────────────────────────────────── */
/* The product is used on phones by counsellors and on tablets at the front desk.
   Three widths are designed for: phone < 768px, tablet 768-1199px (the sidebar
   already becomes an overlay below 1200px), desktop. Nothing here applies above
   1199px except the media rules that are harmless everywhere.

   Tables become cards on phones. theme-enterprise.js marks a table .cw-stack and
   gives each cell its column name (data-label) only when the table is a plain
   list: one header row, 2-14 visible columns, not opted out with .cw-no-stack.
   Matrices (attendance, timetables, multi-row report headers) keep scrolling.
   With INSTON_UI_MOBILE_CARD_TABLES=false the script marks nothing, so none of
   the card rules match. */

#main :is(img, video, canvas, iframe, embed, object, svg):not(.bi):not([class*="icon"]) { max-width:100%; }
#main img:not([height]), #main video { height:auto; }
#main :is(.select2-container, .ts-wrapper, .selectize-control) { max-width:100%; }
#main [_echarts_instance_], #main .apexcharts-canvas { max-width:100%; }

/* Kanban boards: columns snap one at a time instead of squeezing. */
#main :has(> .kanban-col), #main :has(> .stage-col) {
    overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; overscroll-behavior-x:contain;
}
#main :is(.kanban-col, .stage-col) { scroll-snap-align:start; }

/* Header on narrow screens: the signed-in name and role step aside for the avatar
   (they are in the profile menu), so the icons fit a 375px phone. */
@media (max-width:767.98px) {
    .header .user-profile b { display:block; max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}
@media (max-width:575.98px) {
    .header .user-profile { display:none !important; }
    .header .header-nav > ul > li.pe-3 { padding-right:8px !important; }
}
#main .datatable-settings-btn { min-width:var(--ctl-h-sm); }

/* style.css hides every .tablelapView at <= 600px and expects the screen to carry
   its own .cardMobileview list instead. 30 screens carry no such list, so on a
   phone they showed no records at all - only a "Load More" button that loads
   into nothing. Where a screen has no card list, the real table stays (and
   becomes cards via .cw-stack below); the orphan Load More goes. */
@media only screen and (max-width:600px) {
    body:not(:has(.cardMobileview)) #main .tablelapView { display:block !important; }
    body:not(:has(.cardMobileview)) #main .loadmore { display:none !important; }
}

/* Tablet: the header's centre link strip needs 1200px; below that it ran off the
   right edge, so it shows from the desktop breakpoint up (the sidebar has every link). */
@media (max-width:1199.98px) {
    .header .header-nav.me-auto { display:none !important; }
}

/* Floating buttons on phones: smaller, clear of the screen edge, and out of the way
   while a field has focus (the keyboard is up and the button would sit on the form).
   Back-to-top is dropped on phones; the browser's own scroll does that job. */
@media (max-width:767.98px) {
    #aibos-widget-btn { width:48px !important; height:48px !important; right:16px !important; bottom:16px !important; }
    body:has(#main :is(input, select, textarea):focus) #aibos-widget-btn { opacity:0; pointer-events:none; }
    .back-to-top { display:none !important; }
}

/* Tab strips scroll instead of wrapping into a stack of half-buttons. */
@media (max-width:991.98px) {
    #main :is(.nav-tabs, .nav-pills):not(.flex-column) {
        flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -webkit-overflow-scrolling:touch;
    }
    #main :is(.nav-tabs, .nav-pills):not(.flex-column)::-webkit-scrollbar { display:none; }
    #main :is(.nav-tabs, .nav-pills):not(.flex-column) .nav-link { white-space:nowrap; }
    #main .dataTables_wrapper .dataTables_scroll, #main .table-responsive { -webkit-overflow-scrolling:touch; }
}

/* Touch: hit areas that a thumb can find. */
@media (pointer:coarse) {
    .sidebar-nav .nav-link { min-height:44px; }
    .sidebar-nav .nav-content a { min-height:40px; }
    #main td .btn:not(:has(> span, > :not(i):not(svg))) { min-width:36px; min-height:36px; }
    .header .nav-icon, .header .toggle-sidebar-btn { min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
}

@media (max-width:767.98px) {
    /* No accidental zoom on iOS: a focused field under 16px makes Safari zoom in. */
    #main :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea, .form-control, .form-select),
    .modal :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea, .form-control, .form-select),
    .select2-container .select2-selection__rendered, .select2-search__field { font-size:16px !important; }

    /* Form rows: a label/field column with no phone breakpoint takes the full width. */
    :is(#main, .modal) .row > :is(.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11):has(input, select, textarea, .select2-container) {
        flex:0 0 100%; max-width:100%;
    }

    /* Page header, breadcrumbs, toolbars wrap. */
    #main .pagetitle, #main .card-header, #main .card-title { flex-wrap:wrap; row-gap:8px; }
    #main .breadcrumb { flex-wrap:wrap; }
    #main .d-flex.justify-content-between { flex-wrap:wrap; row-gap:8px; }
    #main :is(input, select, textarea) { max-width:100%; }
    #main input[type="date"], #main input[type="datetime-local"], #main input[type="month"] { min-width:0; }
    #main .btn-toolbar, #main .d-flex:has(> .btn + .btn) { flex-wrap:wrap; gap:8px; }

    /* DataTables chrome: one control per line, centred paging. */
    #main .dataTables_wrapper :is(.dataTables_length, .dataTables_filter, .dataTables_info, .dataTables_paginate) {
        float:none !important; text-align:left !important; width:100%; margin:6px 0;
    }
    #main .dataTables_wrapper .dataTables_filter input { width:100% !important; margin-left:0 !important; }
    #main .dataTables_wrapper .dataTables_filter label { display:block; width:100%; }
    #main .dataTables_wrapper .pagination { flex-wrap:wrap; justify-content:center; }
    #main .dt-buttons { display:flex; flex-wrap:wrap; gap:6px; }
    #main .dt-buttons .btn, #main .dt-buttons .dt-button { margin:0 !important; }

    /* Tables that stay tables scroll inside their card, never the page. */
    #main .dataTables_wrapper, #main .table-responsive { max-width:100%; overflow-x:auto; }

    /* Large dialogs fill the screen; small confirmations keep a margin. */
    .modal-dialog { margin:8px; max-width:none; }
    .modal-dialog:is(.modal-lg, .modal-xl) { margin:0; min-height:100%; }
    .modal-dialog:is(.modal-lg, .modal-xl) .modal-content { min-height:100dvh; border-radius:0; border:0; }
    .modal-dialog:is(.modal-lg, .modal-xl) .modal-body { overflow-y:auto; }
    .modal-footer { flex-wrap:wrap; gap:8px; }
    .modal-footer > .btn { flex:1 1 auto; }
    .offcanvas.offcanvas-end, .offcanvas.offcanvas-start { width:100% !important; max-width:100%; }

    /* Drawers and side panels never wider than the phone (several set 340-500px,
       two of them inline). */
    :is(.offcanvas, .custom-offcanvas, .dts-offcanvas, .ic-drawer, .messaging-chat-offcanvas,
        .chatbot-panel, #aibos-window, .chat-window, .ticket-list-panel) { max-width:100vw !important; }
    .header .search-bar { min-width:0 !important; }

    /* Fixed-width artwork and boards scale or scroll inside their card. */
    #main :is(.campaign-qr-poster, .campaign-table-qr-poster, .circle-top) { max-width:100% !important; }
    #main :is(.campaign-qr-poster__inner, .campaign-table-qr-poster__inner) { overflow:hidden; }
    #main :has(> .circle-top) { max-width:100% !important; overflow:hidden; }
    #main :has(> .stage-row) { overflow-x:auto; -webkit-overflow-scrolling:touch; }

    /* Side summaries stop sticking and flow with the page. */
    #main :is(.order-summary, .module-panel, .trigger-panel, .sidebar-card) { position:static !important; }
    #main .d-flex.justify-content-end { flex-wrap:wrap; row-gap:8px; }

    /* Filter bars folded by theme-enterprise.js step 10. */
    #main .cw-filter-folded { display:none !important; }
    #main .cw-filter-toggle { width:100%; justify-content:space-between; margin:0 0 12px; }
    #main .cw-filter-toggle > span:first-of-type { margin-right:auto; }
    #main .cw-filter-toggle .badge { background:var(--primary-color); color:#fff; }
    #main .cw-filter-toggle[aria-expanded="true"] { border-color:var(--primary-color); color:var(--primary-color); }

    /* Notifications fit the screen. */
    .swal2-popup { width:calc(100vw - 32px) !important; max-width:480px; }
    #toast-container > div { width:calc(100vw - 32px) !important; }

    /* Kanban: one column per screen width. */
    #main :is(.kanban-col, .stage-col) { flex:0 0 86vw !important; width:86vw !important; max-width:86vw !important; }

    /* Cards from lists. */
    #main table.cw-stack > thead {
        position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
    }
    #main table.cw-stack, #main table.cw-stack > tbody, #main table.cw-stack > tbody > tr, #main table.cw-stack > tbody > tr > td {
        display:block; width:100% !important; min-width:0 !important; max-width:100%;
        box-sizing:border-box !important; /* DataTables sets content-box on cells */
    }
    #main table.cw-stack { border:0 !important; background:transparent !important; }
    #main table.cw-stack > tbody > tr {
        margin:0 0 12px; padding:6px 14px; border:1px solid var(--line) !important; border-radius:var(--r-md);
        background:var(--surface) !important; box-shadow:var(--sh-1);
    }
    /* The value keeps its own inline flow (badges, links, icons) on the right; the
       column name floats in the left 38%, and the cell grows to whichever is taller. */
    #main table.cw-stack > tbody > tr > td {
        display:flow-root !important; position:relative !important; left:auto !important; right:auto !important;
        min-height:36px; padding:8px 0 !important; border:0 !important; border-bottom:1px solid var(--line) !important;
        text-align:right !important; white-space:normal !important; overflow-wrap:anywhere; box-shadow:none !important;
        background:transparent !important;
    }
    #main table.cw-stack > tbody > tr > td:last-child { border-bottom:0 !important; }
    #main table.cw-stack > tbody > tr > td[data-label]::before {
        content:attr(data-label); float:left; width:38%; margin-right:8px; text-align:left;
        font-size:var(--fs-xs); font-weight:600; color:var(--ink-2); line-height:1.5; overflow-wrap:normal; white-space:normal;
    }
    #main table.cw-stack > tbody > tr > td[data-label=""]::before { content:none; }
    #main table.cw-stack > tbody > tr > td[colspan] { display:block !important; text-align:left !important; }
    #main table.cw-stack > tbody > tr > td.dataTables_empty { display:block !important; text-align:center !important; padding:32px 16px !important; }
    #main table.cw-stack > tbody > tr:has(> td.dataTables_empty) { box-shadow:none; }
    #main table.cw-stack > tbody > tr > td :is(.btn-group, .actions, .d-flex) { flex-wrap:wrap; justify-content:flex-end; }
    #main table.cw-stack > tbody > tr > td > :is(.d-flex, .btn-group, .actions) { display:inline-flex; }
    #main table.cw-stack > tfoot { display:block; }
    #main .cw-stack-wrap :is(.dataTables_scrollHead, .dataTables_scrollFoot) { display:none !important; }
    #main .cw-stack-wrap .dataTables_scrollBody { overflow:visible !important; height:auto !important; max-height:none !important; }
    #main .cw-stack-wrap, #main .cw-stack-wrap .dataTables_scroll { overflow:visible !important; }
}