.btn.btn-add-action,
    a.btn[href*="/create"],
    a.tw-dw-btn[href*="/create"],
    .box-tools a.btn-primary,
    .box-tools a.btn-success,
    .box-tools a.tw-dw-btn,
    .btn:not(.btn-link):not(.mkbtn):has(> i.fa-plus),
    .btn:not(.btn-link):has(> .icon-tabler-plus),
    .tw-dw-btn:not(.mkbtn):has(> i.fa-plus),
    .tw-dw-btn:has(> .icon-tabler-plus),
    button.tw-dw-btn-primary:has(i.fa-plus),
    button.tw-dw-btn-success:has(i.fa-plus),
    /* Import / Download / Export header buttons (any container) — exclude small in-table variants. */
    .tw-dw-btn:not(.tw-dw-btn-xs):not(.tw-dw-btn-sm):not(.mkbtn):has(> i.fa-upload),
    .tw-dw-btn:not(.tw-dw-btn-xs):not(.tw-dw-btn-sm):has(> .icon-tabler-upload),
    .tw-dw-btn:not(.tw-dw-btn-xs):not(.tw-dw-btn-sm):not(.mkbtn):has(> i.fa-download),
    .tw-dw-btn:not(.tw-dw-btn-xs):not(.tw-dw-btn-sm):has(> .icon-tabler-download),
    .tw-dw-btn:not(.tw-dw-btn-xs):not(.tw-dw-btn-sm):not(.mkbtn):has(> i.fa-file-import) {
        background: linear-gradient(to right, #3b82f6, #2563eb) !important;
        color: #fff !important;
        border: none !important;
        border-radius: 10px !important;
        padding: 0.7rem 0.8rem !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.45rem !important;
        line-height: 1.2 !important;
        height: auto !important;
        min-height: 0 !important;
        vertical-align: middle !important;
        box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    }
    /* Keep the icon a uniform size so every Add button has the same height,
       regardless of whether it uses an SVG (24x24) or a FontAwesome icon. */
    .btn.btn-add-action > svg,            .btn.btn-add-action > i,
    a.btn[href*="/create"] > svg,         a.btn[href*="/create"] > i,
    a.tw-dw-btn[href*="/create"] > svg,   a.tw-dw-btn[href*="/create"] > i,
    .box-tools a.btn-primary > svg,       .box-tools a.btn-primary > i,
    .box-tools a.btn-success > svg,       .box-tools a.btn-success > i,
    .box-tools a.tw-dw-btn > svg,         .box-tools a.tw-dw-btn > i,
    .btn:not(.btn-link):not(.mkbtn):has(> i.fa-plus) > i,
    .btn:not(.btn-link):has(> .icon-tabler-plus) > svg,
    .tw-dw-btn:not(.mkbtn):has(> i.fa-plus) > i,
    .tw-dw-btn:has(> .icon-tabler-plus) > svg,
    button.tw-dw-btn-primary:has(i.fa-plus) > i,
    button.tw-dw-btn-success:has(i.fa-plus) > i,
    .tw-dw-btn:not(.tw-dw-btn-xs):not(.tw-dw-btn-sm):not(.mkbtn):has(> i.fa-upload) > i,
    .tw-dw-btn:not(.tw-dw-btn-xs):not(.tw-dw-btn-sm):has(> .icon-tabler-upload) > svg,
    .tw-dw-btn:not(.tw-dw-btn-xs):not(.tw-dw-btn-sm):not(.mkbtn):has(> i.fa-download) > i,
    .tw-dw-btn:not(.tw-dw-btn-xs):not(.tw-dw-btn-sm):has(> .icon-tabler-download) > svg,
    .tw-dw-btn:not(.tw-dw-btn-xs):not(.tw-dw-btn-sm):not(.mkbtn):has(> i.fa-file-import) > i {
        width: 24px !important;
        height: 24px !important;
        font-size: 24px !important;
        flex: 0 0 auto !important;
    }
    .btn.btn-add-action:hover,
    a.btn[href*="/create"]:hover,
    a.tw-dw-btn[href*="/create"]:hover,
    .box-tools a.btn-primary:hover,
    .box-tools a.btn-success:hover,
    .box-tools a.tw-dw-btn:hover,
    .tw-dw-btn:not(.mkbtn):has(> i.fa-plus):hover,
    .tw-dw-btn:has(> .icon-tabler-plus):hover {
        filter: brightness(1.08);
        color: #fff !important;
        text-decoration: none !important;
    }
    .btn.btn-add-action > i,
    .btn.btn-add-action > svg,
    .box-tools .btn > i,
    .box-tools .btn > svg { font-size: 0.95rem; }

    /* Unified modal action buttons — same look as the global Add button.
       Covers both .modal-footer placement AND inline placements (e.g. <div class="form-group text-right">). */
    .modal-footer button[type="submit"]:not(.mkbtn),
    .modal-footer button.btn-primary:not(.mkbtn),
    .modal-footer button.btn-success:not(.mkbtn),
    .modal-footer .tw-dw-btn-success:not(.mkbtn),
    .modal-footer .tw-dw-btn-primary:not(.mkbtn),
    .modal button[type="submit"]:not(.close):not(.mkbtn),
    .modal button.btn-primary:not(.close):not(.mkbtn),
    .modal button.btn-success:not(.close):not(.mkbtn),
    .modal .tw-dw-btn-success:not(.mkbtn),
    .modal .tw-dw-btn-primary:not(.mkbtn){
        background: linear-gradient(to right, #3b82f6, #2563eb) !important;
        color: #fff !important;
        border: none !important;
        border-radius: 10px !important;
        padding: 0.45rem 1.4rem !important;
        font-size: 0.875rem !important;
        font-weight: 600 !important;
        box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    }
    .modal-footer button[type="submit"]:not(.mkbtn):hover,
    .modal-footer button.btn-primary:not(.mkbtn):hover,
    .modal-footer button.btn-success:not(.mkbtn):hover,
    .modal-footer .tw-dw-btn-success:not(.mkbtn):hover,
    .modal-footer .tw-dw-btn-primary:not(.mkbtn):hover,
    .modal button[type="submit"]:not(.close):not(.mkbtn):hover,
    .modal button.btn-primary:not(.close):not(.mkbtn):hover,
    .modal button.btn-success:not(.close):not(.mkbtn):hover,
    .modal .tw-dw-btn-success:not(.mkbtn):hover,
    .modal .tw-dw-btn-primary:not(.mkbtn):hover{ filter: brightness(1.08); color: #fff !important; }

    .modal-footer button.btn-default:not(.mkbtn),
    .modal-footer button[data-dismiss="modal"]:not([aria-label="Close"]):not(.mkbtn),
    .modal-footer .tw-dw-btn-neutral:not(.mkbtn),
    .modal button.btn-default:not(.close):not(.mkbtn),
    .modal button[data-dismiss="modal"]:not([aria-label="Close"]):not(.close):not(.mkbtn),
    .modal .tw-dw-btn-neutral:not(.mkbtn){
        background: #374151 !important;
        color: #fff !important;
        border: 1px solid #374151 !important;
        border-radius: 10px !important;
        padding: 0.45rem 1.4rem !important;
        font-size: 0.875rem !important;
        font-weight: 600 !important;
    }
    .modal-footer button.btn-default:not(.mkbtn):hover,
    .modal-footer button[data-dismiss="modal"]:not([aria-label="Close"]):not(.mkbtn):hover,
    .modal-footer .tw-dw-btn-neutral:not(.mkbtn):hover,
    .modal button.btn-default:not(.close):not(.mkbtn):hover,
    .modal button[data-dismiss="modal"]:not([aria-label="Close"]):not(.close):not(.mkbtn):hover,
    .modal .tw-dw-btn-neutral:not(.mkbtn):hover{ background: #1f2937 !important; color: #fff !important; }

    /* Reject / error buttons in modals — same size as the other modal buttons, red. */
    .modal-footer .tw-dw-btn-error:not(.mkbtn),
    .modal .tw-dw-btn-error:not(.mkbtn){
        background: #dc3545 !important;
        color: #fff !important;
        border: none !important;
        border-radius: 10px !important;
        padding: 0.45rem 1.4rem !important;
        font-size: 0.875rem !important;
        font-weight: 600 !important;
    }
    .modal .tw-dw-btn-error:hover { background: #b91c1c !important; color: #fff !important; }

    /* ============================================================
       Global action-button colors (system-wide):
       • AI buttons (fa-magic)  → orange gradient
       • Print buttons (fa-print) → bright green
       • Close (×) buttons        → dark gray
       ============================================================ */

    /* AI — orange gradient. Keeps the "AI" label (icon + AI). */
    .btn-ai-action:not(.mkbtn),
    .btn:not(.btn-link):not(.mkbtn):has(> i.fa-magic),
    .tw-dw-btn:not(.mkbtn):has(> i.fa-magic),
    button:not(.close):not(.mkbtn):has(> i.fa-magic) {
        background: linear-gradient(to right, #f97316, #ea580c) !important;
        color: #fff !important;
        border: none !important;
        border-radius: 10px !important;
        padding: 0.7rem 0.8rem !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.45rem !important;
        line-height: 1.2 !important;
        height: auto !important;
        min-height: 0 !important;
        vertical-align: middle !important;
        box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    }
    .btn-ai-action:not(.mkbtn):hover,
    .btn:not(.btn-link):not(.mkbtn):has(> i.fa-magic):hover,
    .tw-dw-btn:not(.mkbtn):has(> i.fa-magic):hover,
    button:not(.close):not(.mkbtn):has(> i.fa-magic):hover { filter: brightness(1.08); color: #fff !important; }
    /* Match the 24px icon height of the Add/Import/Download buttons. */
    .btn-ai-action:not(.mkbtn) > i.fa-magic,
    .btn:not(.btn-link):not(.mkbtn):has(> i.fa-magic) > i.fa-magic,
    .tw-dw-btn:not(.mkbtn):has(> i.fa-magic) > i.fa-magic,
    button:not(.close):not(.mkbtn):has(> i.fa-magic) > i.fa-magic {
        font-size: 24px !important;
        width: 24px !important;
        height: 24px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Print — bright green. Same geometry as the global Add/Import buttons.
       Opted out, alongside the small-button classes: .oc-mini, the icon revealed on
       hovering an org-chart card. It is an 11px glyph in the corner of a card, not a
       page action, and the skin rendered it as a green block half the width of the
       department it belongs to. */
    .btn-print-action:not(.mkbtn),
    .btn:not(.btn-link):not(.btn-xs):not(.btn-sm):not(.tw-dw-btn-xs):not(.tw-dw-btn-sm):not(.mkbtn):not(.oc-mini):has(> i.fa-print),
    .tw-dw-btn:not(.btn-xs):not(.btn-sm):not(.tw-dw-btn-xs):not(.tw-dw-btn-sm):not(.mkbtn):not(.oc-mini):has(> i.fa-print),
    button:not(.close):not(.btn-xs):not(.btn-sm):not(.tw-dw-btn-xs):not(.tw-dw-btn-sm):not(.mkbtn):not(.oc-mini):has(> i.fa-print) {
        background: linear-gradient(to right, #22c55e, #16a34a) !important;
        color: #fff !important;
        border: none !important;
        border-radius: 10px !important;
        padding: 0.7rem 0.8rem !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.45rem !important;
        line-height: 1.2 !important;
        height: auto !important;
        min-height: 0 !important;
        vertical-align: middle !important;
        box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    }
    .btn-print-action:not(.mkbtn):hover,
    .btn:not(.btn-link):not(.btn-xs):not(.btn-sm):not(.tw-dw-btn-xs):not(.tw-dw-btn-sm):not(.mkbtn):not(.oc-mini):has(> i.fa-print):hover,
    .tw-dw-btn:not(.btn-xs):not(.btn-sm):not(.tw-dw-btn-xs):not(.tw-dw-btn-sm):not(.mkbtn):not(.oc-mini):has(> i.fa-print):hover,
    button:not(.close):not(.btn-xs):not(.btn-sm):not(.tw-dw-btn-xs):not(.tw-dw-btn-sm):not(.mkbtn):not(.oc-mini):has(> i.fa-print):hover { filter: brightness(1.08); color: #fff !important; }
    /* Match the 24px icon height of the other global action buttons. */
    .btn-print-action:not(.mkbtn) > i,
    .btn:not(.btn-link):not(.btn-xs):not(.btn-sm):not(.tw-dw-btn-xs):not(.tw-dw-btn-sm):not(.mkbtn):not(.oc-mini):has(> i.fa-print) > i.fa-print,
    .tw-dw-btn:not(.btn-xs):not(.btn-sm):not(.tw-dw-btn-xs):not(.tw-dw-btn-sm):not(.mkbtn):not(.oc-mini):has(> i.fa-print) > i.fa-print,
    button:not(.close):not(.btn-xs):not(.btn-sm):not(.tw-dw-btn-xs):not(.tw-dw-btn-sm):not(.mkbtn):not(.oc-mini):has(> i.fa-print) > i.fa-print {
        font-size: 24px !important;
        width: 24px !important;
        height: 24px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Close (×) — dark gray icon button. */
    .modal .close,
    button.close {
        background: #374151 !important;
        color: #fff !important;
        opacity: 1 !important;
        border-radius: 8px !important;
        width: 32px !important;
        height: 32px !important;
        line-height: 1 !important;
        font-size: 20px !important;
        text-shadow: none !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: none !important;
    }
    .modal .close:hover,
    button.close:hover { background: #1f2937 !important; color: #fff !important; opacity: 1 !important; }

    /* How-to-use buttons — green gradient, same geometry as the other global
       action buttons. Use class="btn-howto-action" instead of inline styles. */
    .btn-howto-action:not(.mkbtn) {
        background: linear-gradient(to right, #059669, #0d9488) !important;
        color: #fff !important;
        border: none !important;
        border-radius: 10px !important;
        padding: 0.7rem 0.8rem !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.45rem !important;
        line-height: 1.2 !important;
        height: auto !important;
        min-height: 0 !important;
        vertical-align: middle !important;
        text-decoration: none !important;
        box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    }

    .btn-howto-action:not(.mkbtn):hover,
    .btn-howto-action:not(.mkbtn):focus { filter: brightness(1.08); color: #fff !important; text-decoration: none !important; }
    .btn-howto-action:not(.mkbtn) > i,
    .btn-howto-action:not(.mkbtn) > svg {
        font-size: 24px !important;
        width: 24px !important;
        height: 24px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 auto !important;
    }

    /* Bulk bank-details button — purple, icon-only (bank). Same geometry as the
       other global action buttons. Use class="btn-bank-bulk-action". */
    .btn-bank-bulk-action:not(.mkbtn) {
        background: linear-gradient(to right, #7c3aed, #6d28d9) !important;
        color: #fff !important;
        border: none !important;
        border-radius: 10px !important;
        padding: 0.7rem 0.8rem !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.45rem !important;
        line-height: 1.2 !important;
        height: auto !important;
        min-height: 0 !important;
        vertical-align: middle !important;
        text-decoration: none !important;
        box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    }
    .btn-bank-bulk-action:not(.mkbtn):hover,
    .btn-bank-bulk-action:not(.mkbtn):focus { filter: brightness(1.08); color: #fff !important; text-decoration: none !important; }
    .btn-bank-bulk-action:not(.mkbtn) > i,
    .btn-bank-bulk-action:not(.mkbtn) > svg {
        font-size: 24px !important;
        width: 24px !important;
        height: 24px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 auto !important;
    }

    /* A select paired with a "+" manage button (user form: Primary location,
       Department, Designation). The wrapper is flex, and select2 renders its
       container at a FIXED pixel width taken from the select's inline width:100%
       — so as a flex item it refused to shrink, the .input-group-btn was squeezed
       to 5px, and the 50px button overflowed 29px past the column and sat on top
       of the NEXT field. Let the control shrink, pin the button, match heights.
       Use class="input-group mk-field-with-add". */
    .mk-field-with-add {
        display: flex !important;
        align-items: stretch !important;
        gap: 6px;
        width: 100%;
    }
    .mk-field-with-add > .select2-container,
    .mk-field-with-add > select,
    .mk-field-with-add > .form-control {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: auto !important;
    }
    .mk-field-with-add > .input-group-btn {
        flex: 0 0 auto !important;
        width: auto !important;
        display: flex !important;
        font-size: 0;               /* no stray text node gap */
    }
    .mk-field-with-add > .input-group-btn > .btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 42px;
        padding: 0 12px !important;
        border-radius: 8px !important;
        font-size: 15px;
        line-height: 1 !important;
    }

    /* Bulk NSSF-pension button — teal, icon-only (shield-alt). Shares the bank grid's
       geometry via .btn-bank-bulk-action; this rule only re-colours it, so the two
       bulk buttons sitting side by side stay distinguishable. Placed AFTER the bank
       rule so it wins. Use class="btn-bank-bulk-action btn-pension-bulk-action". */
    .btn-pension-bulk-action:not(.mkbtn) {
        background: linear-gradient(to right, #0d9488, #0f766e) !important;
    }

    /* Bulk password generator — amber, icon-only (key). Shares the bank grid's
       geometry the same way the pension button does; amber because the two buttons
       it stands beside are purple and teal, and cyan/teal are not tellable apart at
       this size. Use class="btn-bank-bulk-action btn-password-bulk-action". */
    .btn-password-bulk-action:not(.mkbtn) {
        background: linear-gradient(to right, #d97706, #b45309) !important;
    }

    /* Import buttons — gray, icon-only (down arrow). Same geometry as the other
       global action buttons. Use class="btn-import-action". Placed AFTER the Add
       rule so it wins for buttons that still carry a download icon. */
    .btn-import-action:not(.mkbtn) {
        background: linear-gradient(to right, #6b7280, #4b5563) !important;
        color: #fff !important;
        border: none !important;
        border-radius: 10px !important;
        padding: 0.7rem 0.8rem !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.45rem !important;
        line-height: 1.2 !important;
        height: auto !important;
        min-height: 0 !important;
        vertical-align: middle !important;
        text-decoration: none !important;
        box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    }
    .btn-import-action:not(.mkbtn):hover,
    .btn-import-action:not(.mkbtn):focus { filter: brightness(1.08); color: #fff !important; text-decoration: none !important; }
    .btn-import-action:not(.mkbtn) > i,
    .btn-import-action:not(.mkbtn) > svg {
        font-size: 24px !important;
        width: 24px !important;
        height: 24px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 auto !important;
    }

    /* Header action-button bar: uniform flex row, right-aligned, 2px gap, with a
       FIXED left-to-right order regardless of source order:
            AI  ·  (misc: download / export / templates / back)  ·  Import  ·  How-to  ·  Add
       Works for both the float-based and tw-flex box-tools, plus any container
       tagged .action-btn-bar. */
    .box-tools:has(.btn-add-action),
    .box-tools:has(.btn-import-action),
    .box-tools:has(.btn-howto-action),
    .box-tools:has(.btn-ai-action),
    .box-tools:has(.btn-print-action),
    .box-tools:has(.docs_and_notes_btn),
    .box-tools:has(a[href*="/create"]),
    .box-tools:has(i.fa-plus),
    .box-tools:has(.icon-tabler-plus),
    .action-btn-bar {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap;
        justify-content: flex-end !important;
        align-items: center !important;
        gap: 2px !important;
    }
    /* Default slot = misc buttons (download/export/templates/back…). */
    .box-tools > *,
    .action-btn-bar > * { order: 2; }
    /* Neutralize per-button margins/floats so only the 2px gap controls spacing. */
    .box-tools .btn-add-action,
    .box-tools .btn-import-action,
    .box-tools .btn-howto-action,
    .box-tools .btn-ai-action,
    .box-tools .btn-print-action,
    .box-tools > a.tw-dw-btn,
    .box-tools .docs_and_notes_btn,
    .action-btn-bar > * {
        margin: 0 !important;
        float: none !important;
    }
    /* Fixed order of the known button types (only takes effect inside a flex bar). */
    .btn-ai-action:not(.mkbtn),
    .box-tools > :has(i.fa-magic),
    .action-btn-bar > :has(i.fa-magic) { order: 1 !important; }
    .btn-import-action:not(.mkbtn)  { order: 3 !important; }
    .btn-howto-action:not(.mkbtn)   { order: 4 !important; }
    /* POS sits with Add (order 5) — same slot, and DOM order puts it just after. */
    .box-tools > .btn-pos-action,
    .action-btn-bar > .btn-pos-action { order: 5 !important; }
    /* Add = ANY direct child of a button bar that contains a plus icon, whatever
       its class. Scoped to the bars so it can't affect unrelated buttons. */
    .box-tools > :has(i.fa-plus),
    .box-tools > :has(.icon-tabler-plus),
    .action-btn-bar > :has(i.fa-plus),
    .action-btn-bar > :has(.icon-tabler-plus),
    .box-tools > .docs_and_notes_btn,
    .action-btn-bar > .docs_and_notes_btn { order: 5 !important; }

    /* DataTable export buttons (global dom) — keep them on ONE line at the far
       right and strip the per-button vertical margins so the controls row stays
       short (otherwise they wrap and push the table down). */
    .dt-export-right .dt-buttons {
        display: inline-flex;
        flex-wrap: nowrap;
        justify-content: flex-end;
        gap: 0;
        white-space: nowrap;
    }
    .dt-export-right .dt-buttons .tw-dw-btn {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    /* Kill the default gap between the controls row and the table:
       dt-buttons ships margin-bottom:.5em and table.dataTable ships
       margin-top:6px — both add empty space under the button bar. */
    /* Length-menu dropdown.
       It used to be painted as a slate button with WHITE text, but DataTables gives
       this select class="form-control", so whichever input style is active repaints
       its background white — and the number went invisible again (white on white).
       Owner's call: plain black number on white, like the search box beside it. A
       colour that does not depend on winning a cascade fight cannot go missing. */
    .dataTables_wrapper .dataTables_length select,
    .dataTables_wrapper .dataTables_length select.form-control,
    .dataTables_wrapper .dataTables_length select.form-control.input-sm,
    /* This long selector is deliberate. The input-style block ends in
       `[class*="inputstyle-"]:not(…):not(…) :is(.form-control, …,
        .select2-container--default .select2-selection--single) { padding-left: var(--pl) !important }`
       and `:is()` takes the specificity of its MOST specific argument — that last
       two-class one — so the rule scores five classes and beat every shorter
       selector here. That stray 12px of left padding is what pushed the number off
       centre. Five classes + two elements settles it. */
    body .dataTables_wrapper .dt-search-export .dataTables_length select.form-control.input-sm {
        height: 32px;
        width: 32px;
        border-radius: 8px !important;
        /* !important on all three: the active input style sets its own padding and
           text-align on .form-control, which pushed the number right and down —
           that is why it read as "not centred" even after the colour was fixed. */
        /* Longhands too: the input style sets `padding-left: 12px !important`, and a
           longhand beats the shorthand at equal importance — that 12px was pushing
           the number off centre. */
        padding: 0 !important;
        padding-left: 0 !important; padding-right: 0 !important;
        text-align: center !important;
        text-align-last: center !important;
        color: #1f2937 !important;
        font-weight: 700;
        font-size: 14px;
        /* The number has to sit in the MIDDLE of the box. A select cannot be a flex
           container, so the line box does the centring: 30px = the 32px button less
           its 1px borders. `word-break: break-all` was also wrapping "1,000" onto a
           second line and pushing the text off-centre. */
        line-height: 30px;
        white-space: nowrap;
        text-indent: 0;
        overflow: hidden;
        cursor: pointer;
        /* no dropdown caret — just a square box showing the number */
        -webkit-appearance: none; -moz-appearance: none; appearance: none;
        background: #fff !important;
        border: 1px solid #d1d5db !important;
        box-shadow: 0 1px 2px rgba(0,0,0,.06);
        transition: border-color .12s ease;
    }
    .dataTables_wrapper .dataTables_length select:hover { border-color: #9ca3af !important; }
    .dataTables_wrapper .dataTables_length select option { color: #1f2937; background: #fff; }

    /* ── Global: give form inputs / selects a small rounded corner. ────────── */
    .form-control,
    select.form-control,
    textarea.form-control,
    .select2-container--default .select2-selection--single,
    .select2-container--default .select2-selection--multiple {
        border-radius: 8px !important;
    }
    /* keep input-groups tidy: only round the outer edges, not the joined sides */
    .input-group .form-control:not(:first-child):not(:last-child),
    .input-group .form-control:first-child { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
    .input-group .form-control:not(:first-child):not(:last-child),
    .input-group .form-control:last-child { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
    /* round the LEFT (outer) corners of the leading icon addon */
    .input-group > .input-group-addon:first-child {
        border-top-left-radius: 8px !important;
        border-bottom-left-radius: 8px !important;
    }
    /* round the RIGHT (outer) corners of a trailing addon / button */
    .input-group > .input-group-addon:last-child,
    .input-group > .input-group-btn:last-child > .btn {
        border-top-right-radius: 8px !important;
        border-bottom-right-radius: 8px !important;
    }

    /* ── Global: select2 inside an input-group (icon addon + select2). Flex so
       the addon, the select2 (fills remaining width) and any button line up;
       the addon never shrinks (otherwise the icon gets clipped). ──────────── */
    .input-group:has(> .select2-container) { display: flex !important; width: 100% !important; max-width: 100% !important; align-items: stretch; }
    .input-group:has(> .select2-container) > .input-group-addon {
        display: flex; align-items: center; justify-content: center;
        flex: 0 0 auto; min-width: 38px; white-space: nowrap;
    }
    /* flex-basis 0 so select2 grows into whatever space is left after the icon
       and button — it never uses its own content width (which caused overflow). */
    .input-group:has(> .select2-container) > .select2-container { flex: 1 1 0% !important; width: auto !important; min-width: 0 !important; max-width: 100%; }
    .input-group:has(> .select2-container) > .input-group-btn { display: flex; flex: 0 0 auto; }
    /* the trailing link/button matches the field height and rounds on the right */
    .input-group:has(> .select2-container) > .input-group-btn > .btn,
    .input-group:has(> .select2-container) > .input-group-btn > a.btn {
        display: flex; align-items: center; justify-content: center;
        height: 100%; margin: 0;
        border-top-right-radius: 8px !important; border-bottom-right-radius: 8px !important;
        border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important;
    }
    .input-group > .select2-container .select2-selection {
        height: 100% !important;
        /* meets the leading icon addon — no curve on the left */
        border-top-left-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
    }
    /* round the select2's right corners ONLY when nothing follows it; if a button
       follows, keep it square so it meets the button cleanly. */
    .input-group > .select2-container:last-child .select2-selection {
        border-top-right-radius: 8px !important; border-bottom-right-radius: 8px !important;
    }
    .input-group > .select2-container:not(:last-child) .select2-selection {
        border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important;
    }
    /* leading icon sits before select2 → square its right side */
    .input-group:has(> .select2-container) > .input-group-addon:first-child {
        border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important;
    }

    /* Table controls (search / entries / cog / download) stay in normal flow —
       INSIDE the card body, directly above the table, together with it. (An older
       big-screen rule lifted them -58px up onto the header line, which pushed them
       outside the card body; removed per request so the group stays together.) */

    /* Small screens: round the table-responsive frame and give the controls a
       gap from it so the group isn't flush against the frame. */
     @media (max-width: 767px) {
        .table-responsive {
            border-radius: 10px !important;
        }
        .table-responsive .dataTables_wrapper > .row.margin-bottom-12 {
            padding: 8px 8px 0 !important;
        }
    }

    /* Global filter card sits closer to the taskbar: AdminLTE's .content-header
       (padding:15px 15px 0) and .content (padding:15px) both pushed the collapsed
       filter bar well below the taskbar. Only sections that actually carry the filter
       card are tightened, so page titles elsewhere keep their normal breathing room.
       Both wrappers are covered: index pages use either one (/sells is a
       .content-header, /products and /contacts are .content). */
    section.content-header:has(.compact-filter-card),
    section.content:has(.compact-filter-card) { padding-top: 0 !important; }
    /* a little air between the taskbar and the card (owner, 2026-10-07: "a little space
       and gap from the top taskbar"); its own bottom margin separates it from the list */
    section.content-header:has(.compact-filter-card) > .compact-filter-card,
    section.content:has(.compact-filter-card) > .compact-filter-card { margin-top: 8px !important; }

    .dataTables_wrapper .dt-buttons { margin-bottom: 0 !important; }
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter { margin-bottom: 0 !important; }
    .dataTables_wrapper table.dataTable { margin-top: 10px !important; }

    /* ── Compact index toolbar ───────────────────────────────────────────────
       On desktop app.css absolutely positions .box-tools OVER the DataTables
       controls line so the action buttons share that row. Those buttons render
       ~46px tall against a 32px control row, so they used to hang ~14px into the
       table (icons overlapping the first header row). Size them to the row height
       instead: everything lands on one line and the table can sit close under it.
       Scoped to exactly the boxes app.css overlays, so form/detail pages and the
       stacked mobile layout are untouched. */
    /* Action buttons relocated INTO the DataTables toolbar row (see
       taxonomies_js.html): match the 32px control height so the whole line reads as
       one group, and keep them at the end of the row. */
    /* margin-left:auto pushes the group to the far right of the toolbar row,
       leaving search + entries on the left. */
    .dt-search-export .box-tools {
        margin: 0 0 0 auto !important; order: 3; gap: 2px !important;
        justify-content: flex-end !important;   /* hug the right edge */
    }
    /* The view switcher shares the toolbar line and is centred on the row itself
       (absolute, not auto-margins) so it stays put regardless of how wide the
       left controls or the right button group are. */
    .dt-search-export:has(.js-taxonomy-view-switcher) { position: relative; }
    /* base rule first: the desktop override below must win, so it can't be followed
       by a generic margin declaration of equal specificity */
    .dt-search-export .js-taxonomy-view-switcher { order: 2; margin: 0 8px !important; }
    @media (min-width: 992px) {
        .dt-search-export .js-taxonomy-view-switcher {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            margin: 0 !important;
        }
    }
    .dt-search-export .js-taxonomy-view-switcher .tw-dw-btn {
        height: 32px !important; min-height: 32px !important;
        padding: 0 12px !important; font-size: 13px !important; line-height: 1 !important;
    }

    /* the row is padded 0/15px, which left the group inset while search sat flush
       against the left edge — even it up */
    .dt-search-export:has(.box-tools) { padding-right: 0 !important; }
    .dt-search-export .box-tools > .btn,
    .dt-search-export .box-tools > a,
    .dt-search-export .box-tools > button {
        height: 32px !important;
        min-height: 32px !important;
        padding: 0 9px !important;
        font-size: 13px !important;
        line-height: 1 !important;
    }
    .dt-search-export .box-tools > * > svg,
    .dt-search-export .box-tools > * > i {
        width: 18px !important; height: 18px !important; font-size: 18px !important;
    }

    @media (min-width: 992px) {
        .box-primary:has(.dataTables_wrapper) .box-header:not(:has(.box-title)) .box-tools > .btn,
        .box-primary:has(.dataTables_wrapper) .box-header:not(:has(.box-title)) .box-tools > a,
        .box-primary:has(.dataTables_wrapper) .box-header:not(:has(.box-title)) .box-tools > button {
            height: 32px !important;
            min-height: 32px !important;
            padding: 0 9px !important;
            font-size: 13px !important;
            line-height: 1 !important;
        }
        .box-primary:has(.dataTables_wrapper) .box-header:not(:has(.box-title)) .box-tools > * > svg,
        .box-primary:has(.dataTables_wrapper) .box-header:not(:has(.box-title)) .box-tools > * > i {
            width: 18px !important;
            height: 18px !important;
            font-size: 18px !important;
        }
        /* table tucked under that single toolbar line */
        .box-primary:has(.dataTables_wrapper) .dataTables_wrapper > .row.margin-bottom-12 { margin-bottom: 0 !important; }
        .box-primary:has(.dataTables_wrapper) .dataTables_wrapper table.dataTable { margin-top: 4px !important; }
        .box-primary:has(.dataTables_wrapper) .dataTables_wrapper .dataTables_scroll { margin-top: 4px !important; }
    }
    /* For scrolling tables (scrollX/scrollY) the gap must go on the scroll
       wrapper, NOT the inner head/body/foot tables — otherwise the footer
       totals row gets pushed down and misaligns. */
    .dataTables_wrapper .dataTables_scrollHead table.dataTable,
    .dataTables_wrapper .dataTables_scrollBody table.dataTable,
    .dataTables_wrapper .dataTables_scrollFoot table.dataTable { margin-top: 0 !important; }
    .dataTables_wrapper .dataTables_scroll { margin-top: 10px; }

    /* Group the search button + export button together, left-aligned. */
    .dt-search-export {
        display: flex !important;
        align-items: center;
        justify-content: flex-start;
        gap: 4px !important;
    }
    /* Order: search (0) → entries (1) → cog+download group (2, at the end). */
    .dt-search-export .dataTables_filter { margin: 0 !important; order: 0; }
    .dt-search-export .dataTables_length { order: 1; }
    .dt-search-export .dt-buttons { width: auto !important; margin: 0 !important; order: 2; }
    .dt-search-export .dataTables_length,
    .dt-search-export .dataTables_length label {
        display: inline-flex; align-items: center;
        margin: 0 !important; line-height: 1;
    }
    .dt-search-export .dataTables_length select { vertical-align: middle; margin: 0 !important; }

    /* ── Collapsible table search ──────────────────────────────────────────
       The global search starts as a magnifier BUTTON. Clicking it focuses the
       input, which slides open. It stays open while focused or while it holds
       text (:not(:placeholder-shown)); empties + blurs collapse back to a button.
       Pure CSS — the <label> wraps the <input>, so clicking the icon focuses it. */
    .dataTables_wrapper .dataTables_filter { display: inline-flex; align-items: center; }
    .dataTables_wrapper .dataTables_filter label {
        display: inline-flex; align-items: center; margin: 0; cursor: pointer;
    }
    .dataTables_wrapper .dataTables_filter label::before {
        content: '\f002';                       /* fa-search */
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        display: inline-flex; align-items: center; justify-content: center;
        width: 32px; height: 32px; flex: 0 0 auto;
        border-radius: 8px; cursor: pointer;
        background: linear-gradient(to right, #64748b, #475569);
        color: #fff;
        box-shadow: 0 1px 2px rgba(0,0,0,.12);
        transition: filter .12s ease;
    }
    .dataTables_wrapper .dataTables_filter label:hover::before { filter: brightness(1.08); }
    /* A collapsed search must take NO room, or the magnifier sits further from the
       entries box than every other button. It was 14px wide at `width:0`: the
       input-style block's `padding-left: var(--pl) !important` + its 1px border,
       which outscore a short selector (see the note on the length select above).
       Hence the long selector and the !importants here. */
    body .dataTables_wrapper .dt-search-export .dataTables_filter input.form-control.input-sm[type="search"] {
        -webkit-appearance: none; appearance: none;
        min-width: 0; flex: 0 0 auto;
        width: 0; opacity: 0;
        padding: 0 !important; padding-left: 0 !important; padding-right: 0 !important;
        border: 0 !important; margin-left: 0;
        box-sizing: border-box; background: #fff;
        transition: width .25s ease, opacity .2s ease, padding .25s ease, margin .25s ease;
    }
    body .dataTables_wrapper .dt-search-export .dataTables_filter input.form-control.input-sm[type="search"]:focus,
    body .dataTables_wrapper .dt-search-export .dataTables_filter input.form-control.input-sm[type="search"]:not(:placeholder-shown) {
        /* 220px on wide screens; capped to the viewport on small ones so the
           opened input never runs off-screen. */
        width: min(220px, 45vw); opacity: 1; margin-left: 4px;
        padding: 6px 8px !important;
        border: 1px solid #cbd5e1 !important; border-radius: 8px; outline: none;
    }

    /* ── Collapsible export tools ──────────────────────────────────────────
       One toggle button (injected by common.js) reveals CSV / Excel / Print /
       PDF / column-visibility. They stay collapsed (max-width:0) until the
       group has .tools-open, then slide open. Toggle is pinned to the right. */
    .dt-buttons .dt-tools-toggle {
        display: inline-flex; align-items: center; justify-content: center;
        width: 32px; height: 32px; flex: 0 0 auto; order: 99;
        border: none; border-radius: 8px; cursor: pointer; color: #fff;
        background: linear-gradient(to right, #16a34a, #15803d);
        box-shadow: 0 1px 2px rgba(0,0,0,.12);
        transition: filter .12s ease;
    }
    .dt-buttons .dt-tools-toggle > i { color: #fff; font-size: 15px; }
    .dt-buttons .dt-tools-toggle:hover { filter: brightness(1.08); }
    /* Keep the column-visibility (cog) button right next to the download toggle.
       Order: cog (10) → export buttons (50) → toggle (99). When closed the
       export buttons are zero-width so cog sits beside the toggle; opening them
       expands between cog and toggle, pushing the cog + search to the left.

       All four rules below are scoped to `> button` on purpose. A `buttons-collection`
       button (colvis is one) makes DataTables append its OWN floating dropdown panel —
       `.dt-button-collection`, a <div>, position:absolute -- as a further direct child
       of `.dt-buttons`. `:not(.dt-tools-toggle):not(:has(.fa-cog))` used to match that
       DIV too (it is neither the toggle nor cog-shaped), so it inherited the collapsed
       toolbar button's `max-width:0` (closed) or `max-width:90px` (open) — a real
       library-positioned dropdown squeezed to a sliver 0-90px wide, its content (column
       checkboxes, one per report column) folded into unreadable single-character-wide
       lines. `max-width`/`width` still apply to a `position:absolute` element, so being
       out of flex flow did not save it. `> button` alone is never true of the panel
       DataTables always builds it as a div — so this excludes it precisely, with no
       extra class needed and no change for any real toolbar button (colvis/csv/excel/
       print/pdf/the toggle are themselves all real `<button>` elements). Confirmed on
       ReportHub's report table, but the selector is table-agnostic (`.dataTables_wrapper
       .dt-buttons`), so any other page using this same collapsible-tools convention with
       a `buttons-collection` button had the identical bug. */
    .dataTables_wrapper .dt-buttons > button:has(.fa-cog) {
        order: 10 !important; margin: 0 4px 0 0 !important;
        width: 32px !important; height: 32px !important;
        padding: 0 !important; border-radius: 8px !important;
        flex: 0 0 auto;
        /* center the cog now that the ▼ beside it (below) is gone */
        display: flex !important; align-items: center; justify-content: center;
    }
    /* A `buttons-collection` button (colvis) ships its own "this opens a menu" ▼
       (`.dt-button-down-arrow`) next to the icon. Squeezed into a 32x32 icon-only
       button it reads as visual noise beside the cog rather than a hint -- the cog
       shape already says "settings/columns" on its own. */
    .dataTables_wrapper .dt-buttons > button:has(.fa-cog) .dt-button-down-arrow {
        display: none !important;
    }
    /* Every button in the group EXCEPT the toggle and the column-visibility
       (cog) button stays collapsed by default. The cog stays out as its own
       standalone button next to the search. */
    .dataTables_wrapper .dt-buttons > button:not(.dt-tools-toggle):not(:has(.fa-cog)) {
        order: 50 !important;
        max-width: 0 !important; min-width: 0 !important; opacity: 0;
        padding: 0 !important; margin: 0 !important; border: 0 !important;
        overflow: hidden; white-space: nowrap; flex: 0 0 auto;
        transition: max-width .25s ease, opacity .2s ease, padding .2s ease, margin .2s ease;
    }
    .dataTables_wrapper .dt-buttons.tools-open > button:not(.dt-tools-toggle):not(:has(.fa-cog)) {
        max-width: 90px !important; opacity: 1;
        padding: 6px 12px !important; margin: 0 2px !important;
    }
    /* The collection panel itself: give it its own real width instead of inheriting
       whatever `.dt-buttons > *` happened to say. DataTables' own buttons.dataTables.css
       already sets `min-width:100%` (relative to the triggering button, ~32px) which is
       why it was invisible rather than merely narrow before this rule existed too. */
    .dataTables_wrapper .dt-buttons > .dt-button-collection,
    /* Same rule, for the moment after dt_collection_portal.html has moved it to
       <body> (to escape .table-responsive's clipping on a short table) -- its parent
       selector no longer matches once the parent changes. */
    body > .dt-button-collection {
        width: max-content !important; max-width: min(320px, 90vw) !important;
        min-width: 200px !important;
    }

    /* `.no-print` has to WIN, not merely exist. vendor.css defines it as one class
       (0,1,0); rules in this file are far heavier — the Print button above is
       `button:not(.close):not(.btn-xs)…:has(> i.fa-print)` carrying
       `display:inline-flex !important`, which outranks `.no-print` at print time. So
       every voucher printed its own green Print button, and only that button: the
       Close button beside it, with no fa-print icon, obeyed .no-print and vanished.
       The [class] repeats are specificity ballast — the same trick button_style.html
       uses against these rules — so nothing in the app can out-specify "do not print
       this". Children too: hiding a wrapper must hide what it wraps. */
    @media print {
        .no-print[class][class][class][class][class][class][class][class],
        .no-print[class][class][class][class][class][class][class][class] * {
            display: none !important;
        }
    }



    /* ============================================================
       In-table ROW ACTION buttons (.btn-xs) — nicer, colored by function.
       Palette:
         green  → view / approve / confirm / activate
         orange → edit
         red    → delete / cancel / remove / reject / deactivate
         blue   → print
         sky    → info / open / details / list / external link
         teal   → money / payment / discount
         indigo → people / assign / email / phone / transfer / tasks
         amber  → shipping / history / time / stock
         purple → copy / duplicate / tags / security
         slate  → default (anything else)
       Only Bootstrap-styled .btn-xs get the slate base; daisyUI .tw-dw-btn-*
       xs buttons keep their own look unless they carry a recognised icon. */

    /* --- shared pill shape (slate default for bootstrap-classed btn-xs) --- */
    .btn-xs.btn-default, .btn-xs.btn-primary, .btn-xs.btn-info,
    .btn-xs.btn-success, .btn-xs.btn-danger, .btn-xs.btn-warning,
    :is(.btn-xs, .tw-dw-btn-xs):has(.fa-eye), :is(.btn-xs, .tw-dw-btn-xs):has(.fa-edit), :is(.btn-xs, .tw-dw-btn-xs):has(.fa-pencil),
    :is(.btn-xs, .tw-dw-btn-xs):has(.fa-pencil-alt), :is(.btn-xs, .tw-dw-btn-xs):has(.glyphicon-edit), :is(.btn-xs, .tw-dw-btn-xs):has(.fa-trash),
    :is(.btn-xs, .tw-dw-btn-xs):has(.fa-trash-alt), :is(.btn-xs, .tw-dw-btn-xs):has(.glyphicon-trash), :is(.btn-xs, .tw-dw-btn-xs):has(.fa-times),
    :is(.btn-xs, .tw-dw-btn-xs):has(.fa-times-circle), :is(.btn-xs, .tw-dw-btn-xs):has(.fa-ban), :is(.btn-xs, .tw-dw-btn-xs):has(.fa-minus-circle),
    :is(.btn-xs, .tw-dw-btn-xs):has(.fa-check), :is(.btn-xs, .tw-dw-btn-xs):has(.fa-check-circle), :is(.btn-xs, .tw-dw-btn-xs):has(.fa-thumbs-up),
    :is(.btn-xs, .tw-dw-btn-xs):has(.fa-power-off), :is(.btn-xs, .tw-dw-btn-xs):has(.fa-print), :is(.btn-xs, .tw-dw-btn-xs):has(.fa-info),
    :is(.btn-xs, .tw-dw-btn-xs):has(.fa-info-circle), :is(.btn-xs, .tw-dw-btn-xs):has(.fa-list), :is(.btn-xs, .tw-dw-btn-xs):has(.fa-eye-slash),
    :is(.btn-xs, .tw-dw-btn-xs):has(.fa-external-link), :is(.btn-xs, .tw-dw-btn-xs):has(.fa-external-link-alt), :is(.btn-xs, .tw-dw-btn-xs):has(.fa-download),
    :is(.btn-xs, .tw-dw-btn-xs):has(.fa-money-bill), :is(.btn-xs, .tw-dw-btn-xs):has(.fa-money-bill-alt), :is(.btn-xs, .tw-dw-btn-xs):has(.fa-money-bill-wave),
    :is(.btn-xs, .tw-dw-btn-xs):has(.fa-money), :is(.btn-xs, .tw-dw-btn-xs):has(.fa-dollar-sign), :is(.btn-xs, .tw-dw-btn-xs):has(.fa-credit-card),
    :is(.btn-xs, .tw-dw-btn-xs):has(.fa-hand-holding-usd), :is(.btn-xs, .tw-dw-btn-xs):has(.fa-percent), :is(.btn-xs, .tw-dw-btn-xs):has(.fa-user),
    :is(.btn-xs, .tw-dw-btn-xs):has(.fa-users), :is(.btn-xs, .tw-dw-btn-xs):has(.fa-envelope), :is(.btn-xs, .tw-dw-btn-xs):has(.fa-phone),
    :is(.btn-xs, .tw-dw-btn-xs):has(.fa-exchange-alt), :is(.btn-xs, .tw-dw-btn-xs):has(.fa-sitemap), :is(.btn-xs, .tw-dw-btn-xs):has(.fa-tasks),
    :is(.btn-xs, .tw-dw-btn-xs):has(.fa-id-card), :is(.btn-xs, .tw-dw-btn-xs):has(.fa-truck), :is(.btn-xs, .tw-dw-btn-xs):has(.fa-history),
    :is(.btn-xs, .tw-dw-btn-xs):has(.fa-clock), :is(.btn-xs, .tw-dw-btn-xs):has(.fa-shopping-basket), :is(.btn-xs, .tw-dw-btn-xs):has(.fa-copy),
    :is(.btn-xs, .tw-dw-btn-xs):has(.fa-tags), :is(.btn-xs, .tw-dw-btn-xs):has(.fa-key), :is(.btn-xs, .tw-dw-btn-xs):has(.fa-lock), :is(.btn-xs, .tw-dw-btn-xs):has(.fa-map-marker),
    :is(.btn-xs, .tw-dw-btn-xs):has(.fa-map-marker-alt) {
        background: linear-gradient(to right, #64748b, #475569) !important; /* slate default */
        color: #fff !important;
        border: none !important;
        border-radius: 6px !important;
        padding: 4px 10px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        line-height: 1.5 !important;
        height: auto !important;
        min-height: 0 !important;
        box-shadow: 0 1px 2px rgba(0,0,0,0.12);
        margin: 1px !important;
    }
    /* keep the icon a consistent size inside every action button */
    :is(.btn-xs, .tw-dw-btn-xs):has(> i) > i,
    :is(.btn-xs, .tw-dw-btn-xs):has(> .glyphicon) > .glyphicon {
        font-size: 14px !important;
    }

    /* --- function colors (override the slate default) --- */
    /* green: view / approve / activate */
    :is(.btn-xs, .tw-dw-btn-xs):has(.fa-eye), :is(.btn-xs, .tw-dw-btn-xs):has(.fa-check), :is(.btn-xs, .tw-dw-btn-xs):has(.fa-check-circle),
    :is(.btn-xs, .tw-dw-btn-xs):has(.fa-thumbs-up), :is(.btn-xs, .tw-dw-btn-xs):has(.fa-power-off) {
        background: linear-gradient(to right, #22c55e, #16a34a) !important;
    }
    /* orange: edit */
    :is(.btn-xs, .tw-dw-btn-xs):has(.fa-edit), :is(.btn-xs, .tw-dw-btn-xs):has(.fa-pencil), :is(.btn-xs, .tw-dw-btn-xs):has(.fa-pencil-alt),
    :is(.btn-xs, .tw-dw-btn-xs):has(.glyphicon-edit) {
        background: linear-gradient(to right, #f97316, #ea580c) !important;
    }
    /* red: delete / cancel / remove / reject */
    :is(.btn-xs, .tw-dw-btn-xs):has(.fa-trash), :is(.btn-xs, .tw-dw-btn-xs):has(.fa-trash-alt), :is(.btn-xs, .tw-dw-btn-xs):has(.glyphicon-trash),
    :is(.btn-xs, .tw-dw-btn-xs):has(.fa-times), :is(.btn-xs, .tw-dw-btn-xs):has(.fa-times-circle), :is(.btn-xs, .tw-dw-btn-xs):has(.fa-ban),
    :is(.btn-xs, .tw-dw-btn-xs):has(.fa-minus-circle) {
        background: linear-gradient(to right, #ef4444, #dc2626) !important;
    }
    /* blue: print */
    :is(.btn-xs, .tw-dw-btn-xs):has(.fa-print) {
        background: linear-gradient(to right, #3b82f6, #2563eb) !important;
    }
    /* sky: info / open / details / list */
    :is(.btn-xs, .tw-dw-btn-xs):has(.fa-info), :is(.btn-xs, .tw-dw-btn-xs):has(.fa-info-circle), :is(.btn-xs, .tw-dw-btn-xs):has(.fa-list),
    :is(.btn-xs, .tw-dw-btn-xs):has(.fa-external-link), :is(.btn-xs, .tw-dw-btn-xs):has(.fa-external-link-alt),
    :is(.btn-xs, .tw-dw-btn-xs):has(.fa-download), :is(.btn-xs, .tw-dw-btn-xs):has(.fa-eye-slash) {
        background: linear-gradient(to right, #0ea5e9, #0284c7) !important;
    }
    /* teal: money / payment / discount */
    :is(.btn-xs, .tw-dw-btn-xs):has(.fa-money-bill), :is(.btn-xs, .tw-dw-btn-xs):has(.fa-money-bill-alt), :is(.btn-xs, .tw-dw-btn-xs):has(.fa-money-bill-wave),
    :is(.btn-xs, .tw-dw-btn-xs):has(.fa-money), :is(.btn-xs, .tw-dw-btn-xs):has(.fa-dollar-sign), :is(.btn-xs, .tw-dw-btn-xs):has(.fa-credit-card),
    :is(.btn-xs, .tw-dw-btn-xs):has(.fa-hand-holding-usd), :is(.btn-xs, .tw-dw-btn-xs):has(.fa-percent) {
        background: linear-gradient(to right, #14b8a6, #0d9488) !important;
    }
    /* indigo: people / assign / contact / transfer / tasks */
    :is(.btn-xs, .tw-dw-btn-xs):has(.fa-user), :is(.btn-xs, .tw-dw-btn-xs):has(.fa-users), :is(.btn-xs, .tw-dw-btn-xs):has(.fa-envelope),
    :is(.btn-xs, .tw-dw-btn-xs):has(.fa-phone), :is(.btn-xs, .tw-dw-btn-xs):has(.fa-exchange-alt), :is(.btn-xs, .tw-dw-btn-xs):has(.fa-sitemap),
    :is(.btn-xs, .tw-dw-btn-xs):has(.fa-tasks), :is(.btn-xs, .tw-dw-btn-xs):has(.fa-id-card) {
        background: linear-gradient(to right, #6366f1, #4f46e5) !important;
    }
    /* amber: shipping / history / time / stock */
    :is(.btn-xs, .tw-dw-btn-xs):has(.fa-truck), :is(.btn-xs, .tw-dw-btn-xs):has(.fa-history), :is(.btn-xs, .tw-dw-btn-xs):has(.fa-clock),
    :is(.btn-xs, .tw-dw-btn-xs):has(.fa-shopping-basket) {
        background: linear-gradient(to right, #f59e0b, #d97706) !important;
    }
    /* purple: copy / duplicate / tags / security / map */
    :is(.btn-xs, .tw-dw-btn-xs):has(.fa-copy), :is(.btn-xs, .tw-dw-btn-xs):has(.fa-tags), :is(.btn-xs, .tw-dw-btn-xs):has(.fa-key),
    :is(.btn-xs, .tw-dw-btn-xs):has(.fa-lock), :is(.btn-xs, .tw-dw-btn-xs):has(.fa-map-marker), :is(.btn-xs, .tw-dw-btn-xs):has(.fa-map-marker-alt) {
        background: linear-gradient(to right, #a855f7, #7e22ce) !important;
    }

    /* hover lift for any colored action button */
    .btn-xs[class*="btn-"]:hover,
    :is(.btn-xs, .tw-dw-btn-xs):has(.fa-eye):hover,
    :is(.btn-xs, .tw-dw-btn-xs):has(.fa-edit):hover,
    :is(.btn-xs, .tw-dw-btn-xs):has(.glyphicon-edit):hover,
    :is(.btn-xs, .tw-dw-btn-xs):has(.fa-trash):hover,
    :is(.btn-xs, .tw-dw-btn-xs):has(.glyphicon-trash):hover,
    :is(.btn-xs, .tw-dw-btn-xs):has(.fa-print):hover { filter: brightness(1.1); color: #fff !important; }

    /* ============================================================
       ACTION DROPDOWN MENUS (the "Actions ▾" menus inside .btn-group, used in
       tables). EVERY leading icon becomes a filled chip — recognised actions
       get a palette color, the rest fall back to slate. Scoped to .btn-group
       so the navbar / profile / settings dropdowns are untouched. Overrides the
       inline icon colors (no !important) used in some server-rendered menus. */
    .btn-group .dropdown-menu > li > a {
        display: flex !important;
        align-items: center !important;
        padding: 6px 14px !important;
        white-space: nowrap;
    }
    /* base chip (slate default) for any icon in an action row */
    .btn-group .dropdown-menu > li > a > i {
        flex: 0 0 auto !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 26px !important;
        height: 26px !important;
        border-radius: 6px !important;
        color: #fff !important;
        border: none !important;
        padding: 0 !important;
        margin-right: 9px !important;
        font-size: 12px !important;
        box-shadow: 0 1px 2px rgba(0,0,0,0.12);
        background: linear-gradient(to right, #64748b, #475569) !important; /* slate default */
    }
    /* green */
    .btn-group .dropdown-menu > li > a > i.fa-eye, .btn-group .dropdown-menu > li > a > i.fa-check,
    .btn-group .dropdown-menu > li > a > i.fa-check-circle, .btn-group .dropdown-menu > li > a > i.fa-thumbs-up,
    .btn-group .dropdown-menu > li > a > i.fa-power-off {
        background: linear-gradient(to right, #22c55e, #16a34a) !important;
    }
    /* orange */
    .btn-group .dropdown-menu > li > a > i.fa-edit, .btn-group .dropdown-menu > li > a > i.fa-pencil,
    .btn-group .dropdown-menu > li > a > i.fa-pencil-alt, .btn-group .dropdown-menu > li > a > i.glyphicon-edit {
        background: linear-gradient(to right, #f97316, #ea580c) !important;
    }
    /* red */
    .btn-group .dropdown-menu > li > a > i.fa-trash, .btn-group .dropdown-menu > li > a > i.fa-trash-alt,
    .btn-group .dropdown-menu > li > a > i.glyphicon-trash, .btn-group .dropdown-menu > li > a > i.fa-times,
    .btn-group .dropdown-menu > li > a > i.fa-times-circle, .btn-group .dropdown-menu > li > a > i.fa-ban {
        background: linear-gradient(to right, #ef4444, #dc2626) !important;
    }
    /* blue */
    .btn-group .dropdown-menu > li > a > i.fa-print { background: linear-gradient(to right, #3b82f6, #2563eb) !important; }
    /* sky */
    .btn-group .dropdown-menu > li > a > i.fa-info, .btn-group .dropdown-menu > li > a > i.fa-info-circle,
    .btn-group .dropdown-menu > li > a > i.fa-list, .btn-group .dropdown-menu > li > a > i.fa-external-link,
    .btn-group .dropdown-menu > li > a > i.fa-external-link-alt, .btn-group .dropdown-menu > li > a > i.fa-download,
    .btn-group .dropdown-menu > li > a > i.fa-file-download, .btn-group .dropdown-menu > li > a > i.fa-image {
        background: linear-gradient(to right, #0ea5e9, #0284c7) !important;
    }
    /* teal */
    .btn-group .dropdown-menu > li > a > i.fa-money-bill, .btn-group .dropdown-menu > li > a > i.fa-money-bill-alt,
    .btn-group .dropdown-menu > li > a > i.fa-money-bill-wave, .btn-group .dropdown-menu > li > a > i.fa-money,
    .btn-group .dropdown-menu > li > a > i.fa-dollar-sign, .btn-group .dropdown-menu > li > a > i.fa-credit-card,
    .btn-group .dropdown-menu > li > a > i.fa-hand-holding-usd, .btn-group .dropdown-menu > li > a > i.fa-percent {
        background: linear-gradient(to right, #14b8a6, #0d9488) !important;
    }
    /* indigo */
    .btn-group .dropdown-menu > li > a > i.fa-user, .btn-group .dropdown-menu > li > a > i.fa-users,
    .btn-group .dropdown-menu > li > a > i.fa-envelope, .btn-group .dropdown-menu > li > a > i.fa-phone,
    .btn-group .dropdown-menu > li > a > i.fa-exchange-alt, .btn-group .dropdown-menu > li > a > i.fa-sitemap,
    .btn-group .dropdown-menu > li > a > i.fa-tasks, .btn-group .dropdown-menu > li > a > i.fa-id-card,
    .btn-group .dropdown-menu > li > a > i.fa-telegram-plane, .btn-group .dropdown-menu > li > a > i.fa-paperclip {
        background: linear-gradient(to right, #6366f1, #4f46e5) !important;
    }
    /* amber */
    .btn-group .dropdown-menu > li > a > i.fa-truck, .btn-group .dropdown-menu > li > a > i.fa-history,
    .btn-group .dropdown-menu > li > a > i.fa-clock, .btn-group .dropdown-menu > li > a > i.fa-shopping-basket,
    .btn-group .dropdown-menu > li > a > i.fa-undo, .btn-group .dropdown-menu > li > a > i.fa-recycle {
        background: linear-gradient(to right, #f59e0b, #d97706) !important;
    }
    /* purple */
    .btn-group .dropdown-menu > li > a > i.fa-copy, .btn-group .dropdown-menu > li > a > i.fa-tags,
    .btn-group .dropdown-menu > li > a > i.fa-key, .btn-group .dropdown-menu > li > a > i.fa-lock,
    .btn-group .dropdown-menu > li > a > i.fa-map-marker, .btn-group .dropdown-menu > li > a > i.fa-map-marker-alt {
        background: linear-gradient(to right, #a855f7, #7e22ce) !important;
    }
    .btn-group .dropdown-menu > li > a:hover { background: #f1f5f9; }

    /* Right side — clean white card (force-override AdminLTE's nav-tabs-custom box). */
    .user-show-content .nav-tabs-custom,
    .user-show-content .user-profile-tabs-shell {
        background: #fff !important;
        border: none !important;
        border-top: none !important;
        border-radius: 14px !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
        margin-bottom: 0 !important;
    }
    .user-show-content .nav-tabs-custom > .tab-content,
    .user-show-content .tab-content {
        background: #fff !important;
        border: none !important;
        border-radius: 14px !important;
        padding: 18px !important;
    }

    /* chip icons */
    /* Flat plain-grey inline icons for ALL sidebar menus. (The old 30×30 gradient
       "chip" icons and their ~40 per-icon color variants were removed so every
       menu is uniform — matching the Business-Settings module drawer. The active
       row re-colors its own icon via the rule further below.) */

    /* outlined count pill shown at the end of a sidebar item label */

    /* Home sits above a rule of its own here too — same as the section menus.
       (!important because every rule in this block carries it.) */
    /* Icon tile — same 60x60 rounded tile the header dropdowns use for
       .recommended-icon (this block used to force flat 20px grey icons and, being
       later in the file, it silently beat the tile rule above). */
    /* Same 28px colour-tinted tile the section menus use (the tint itself is set
       per row by mkTintSectionMenus in javascripts.html). */
    /* Active row uses the business theme (header) color — --vtab-accent /
       --vtab-accent-bg are set at runtime from the header's gradient; the hex
       fallbacks apply if that ever fails. */
    /* Same active row as the section menus: filled in the header gradient with a
       translucent white icon tile. */




    /* ============================================================
       GLOBAL detail-page action buttons (Edit + AI). Reusable pair used on the
       user/contact detail pages — replaces the old per-page inline styles so the
       design is defined once. Container: .detail-action-btns (flex row);
       buttons: .btn-edit-action (blue) / .btn-ai-action (amber). */
    .detail-action-btns {
        display: flex; gap: 8px; margin: 8px 0;
    }
    .detail-action-btns > .btn-edit-action,
    .detail-action-btns > .btn-pay-action,
    .detail-action-btns > .btn-discount-action,
    .detail-action-btns > .btn-ai-action {
        flex: 1 1 0; min-width: 0;
        display: inline-flex; align-items: center; justify-content: center; gap: 7px;
        border: none; border-radius: 8px; padding: 9px 14px; cursor: pointer;
        color: #fff !important; font-weight: 700; font-size: 14px; line-height: 1.2;
        text-decoration: none; white-space: nowrap;
        transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
    }
    .btn-edit-action:not(.mkbtn) { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); box-shadow: 0 2px 6px rgba(37,99,235,.28); }
    .btn-pay-action:not(.mkbtn)  { background: linear-gradient(135deg, #10b981 0%, #059669 100%); box-shadow: 0 2px 6px rgba(5,150,105,.28); }
    .btn-ai-action:not(.mkbtn)   { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); box-shadow: 0 2px 6px rgba(217,119,6,.28); }
    .btn-discount-action:not(.mkbtn) { background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%); box-shadow: 0 2px 6px rgba(109,40,217,.28); }
    .btn-edit-action:not(.mkbtn):hover, .btn-edit-action:focus,
    .btn-pay-action:not(.mkbtn):hover, .btn-pay-action:focus,
    .btn-discount-action:not(.mkbtn):hover, .btn-discount-action:focus,
    .btn-ai-action:not(.mkbtn):hover, .btn-ai-action:focus {
        color: #fff !important; filter: brightness(1.06); transform: translateY(-1px);
        box-shadow: 0 5px 12px rgba(0,0,0,.18);
    }
    .btn-edit-action:not(.mkbtn):active, .btn-pay-action:active, .btn-discount-action:active, .btn-ai-action:active { transform: translateY(0); box-shadow: 0 2px 5px rgba(0,0,0,.18); }
    .detail-action-btns > .btn-edit-action i, .detail-action-btns > .btn-pay-action i, .detail-action-btns > .btn-discount-action i, .detail-action-btns > .btn-ai-action i { font-size: 14px; }

    /* GLOBAL identity card (profile photo + name/role + verification QR) shown at
       the top of the Basic/Info view on the user & contact detail pages — one
       shared design so the two pages are clones. */
    .detail-idcard {
        display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
        padding: 16px; margin-bottom: 16px;
        border: 1px solid #d1d5db; border-radius: 10px; background: #fff;
        box-shadow: 0 1px 3px rgba(0,0,0,.06);
    }
    .detail-idcard-photo { flex: 0 0 auto; margin: 0; }
    .detail-idcard-photo img {
        width: 96px; height: 96px; object-fit: cover; border-radius: 50%;
        border: 3px solid #fff; box-shadow: 0 1px 5px rgba(0,0,0,.18);
    }
    .detail-idcard-meta { flex: 1 1 auto; min-width: 0; }
    .detail-idcard-name { font-size: 19px; font-weight: 700; color: #111827; }
    .detail-idcard-role { color: #6b7280; font-size: 13px; margin-top: 2px; }
    .detail-idcard-sub  { color: #6b7280; font-size: 13px; margin-top: 4px; }
    .detail-idcard-sub i { color: #9ca3af; margin-right: 4px; }
    .detail-idcard-qr { flex: 0 0 auto; text-align: center; }
    .detail-idcard-qr-title { font-size: 12px; font-weight: 700; color: #475569; margin-bottom: 6px; }
    .detail-idcard-qr-title i { color: #4f46e5; }
    .detail-idcard-qr img {
        width: 92px; height: 92px; border: 3px solid #fff; border-radius: 6px;
        background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.12);
    }
    .detail-idcard-qr-help { font-size: 10px; color: #94a3b8; margin-top: 6px; }
    @media (max-width: 575px) {
        .detail-idcard { justify-content: center; text-align: center; }
        .detail-idcard-meta { text-align: center; }
    }

    /* right-side content panel — clean white card */
    
    /* Small screens: sidebar becomes a single horizontal scrolling row on top. */
    @media (max-width: 991px) {

        /* …EXCEPT a rail that has been moved into a slide-in drawer. The rule above
           was written when the rail was a column beside the content, where turning it
           into a scrolling strip on a phone is right. The contact and user detail
           pages now keep their rail in a 380px panel that slides in from the left, and
           there the same rule squeezed every tab into a 2,800px horizontal scroller
           inside a 347px drawer — the drawer opened and showed a tab strip instead of
           a list (user report 2026-08-15). Inside a drawer it stays a vertical list;
           the drawer is already the "on top of everything" affordance. */
    }

    /* ============================================================
       GLOBAL detail-page frame — ONE shared visual design so the user
       (/users/{id}) and contact (/contacts/{id}) detail pages are visual
       CLONES: identical frame, only the data/content differs. The per-page
       layout classes are aliased to a single definition here, so neither
       template carries any per-page frame CSS of its own. Generic aliases
       (.detail-page-layout / -sidebar / -content / -card) are provided too,
       so future detail pages can adopt the same frame with no new CSS. */

    /* Column layout: col-md-3 sidebar + col-md-9 content, -5px gutter,
       5px column padding, identical collapse breakpoint (col grid @ 992px). */
    .detail-page-layout,
    .user-show-layout,
    .contact-show-layout {
        margin-left: -5px !important;
        margin-right: -5px !important;
    }
    .detail-page-layout  > .detail-page-sidebar,
    .detail-page-layout  > .detail-page-content,
    .user-show-layout    > .user-show-sidebar,
    .user-show-layout    > .user-show-content,
    .contact-show-layout > .contact-show-sidebar,
    .contact-show-layout > .contact-show-content {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    /* Collapse (driven by the global header ☰ via window.__togglePageDrawer):
       hide the sidebar, widen the content column to full width. */
    .detail-page-layout.sidebar-collapsed  > .detail-page-sidebar,
    .user-show-layout.sidebar-collapsed     > .user-show-sidebar,
    .contact-show-layout.sidebar-collapsed  > .contact-show-sidebar {
        display: none !important;
    }
    .detail-page-layout.sidebar-collapsed  > .detail-page-content,
    .user-show-layout.sidebar-collapsed     > .user-show-content,
    .contact-show-layout.sidebar-collapsed  > .contact-show-content,
    .contact-show-layout.sidebar-collapsed  > [class*="col-md-"]:not(.contact-show-sidebar) {
        width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important;
    }

    /* Sidebar card rhythm: every sidebar widget is the SAME white card —
       identical padding / border / radius / shadow / spacing on both pages. */
    .detail-page-card,
    .user-show-photo-widget,
    .user-verify-widget,
    .contact-show-photo-widget,
    .contact-show-qr-widget {
        background: #fff;
        padding: 10px;
        margin-bottom: 8px;
        border: 1px solid #e5e7eb;
        border-radius: 6px;
        box-shadow: 0 1px 2px rgba(0,0,0,.04);
    }
    .user-show-search,
    .contact-show-search { margin-bottom: 8px; }

    .user-show-content    .nav-tabs-custom,
    .contact-show-content .nav-tabs-custom { margin-top: 0; }
    .detail-page-content  .nav-tabs-custom { margin-top: 0; }

    /* DataTable export toolbar buttons — give them all a consistent FILLED
       background (by type), instead of only Print being filled. */
    .dt-buttons .tw-dw-btn-xs, .dt-buttons .dt-button, .dt-buttons > .btn {
        color: #fff !important;
        border: none !important;
        border-radius: 6px !important;
        padding: 6px 12px !important;
        margin: 0 2px !important;
        font-size: 14px !important;
        line-height: 1 !important;
        height: auto !important;
        min-height: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 1px 2px rgba(0,0,0,.12);
        background: linear-gradient(to right, #64748b, #475569) !important; /* default: settings/slate */
    }
    .dt-buttons .tw-dw-btn-xs > i, .dt-buttons .dt-button > i,
    .dt-buttons .tw-dw-btn-xs i, .dt-buttons .dt-button i {
        color: #fff !important;
        font-size: 15px !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
    }
    .dt-buttons .tw-dw-btn-xs:has(.fa-file-csv) { background: linear-gradient(to right, #22c55e, #16a34a) !important; } /* CSV */
    .dt-buttons .tw-dw-btn-xs:has(.fa-file-excel) { background: linear-gradient(to right, #16a34a, #15803d) !important; } /* Excel */
    .dt-buttons .tw-dw-btn-xs:has(.fa-print) { background: linear-gradient(to right, #3b82f6, #2563eb) !important; } /* Print */
    .dt-buttons .tw-dw-btn-xs:has(.fa-file-pdf) { background: linear-gradient(to right, #ef4444, #dc2626) !important; } /* PDF */
    .dt-buttons .tw-dw-btn-xs:hover, .dt-buttons .dt-button:hover { filter: brightness(1.08); color: #fff !important; }

    /* ── Column-visibility (cog) dropdown — clean white panel ──────────── */
    .dt-button-collection {
        background: #ffffff !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 10px !important;
        box-shadow: 0 12px 32px rgba(0,0,0,.15) !important;
        padding: 6px !important;
        min-width: 190px;
    }
    .dt-button-collection .dt-button,
    .dt-button-collection button,
    .dt-button-collection a,
    .dt-button-collection .btn {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        text-align: left !important;
        white-space: nowrap !important;
        background: #ffffff !important;
        background-image: none !important;
        color: #000000 !important;
        border: none !important;
        border-radius: 6px !important;
        padding: 4px 12px !important;
        margin: 1px 0 !important;
        font-size: 13px !important;
        line-height: 1.4 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
    .dt-button-collection .dt-button > *,
    .dt-button-collection button > *,
    .dt-button-collection a > *,
    .dt-button-collection .btn > * { display: inline !important; }
    .dt-button-collection .dt-button span,
    .dt-button-collection button span,
    .dt-button-collection a span,
    .dt-button-collection .btn span { color: #000000 !important; }
    .dt-button-collection .dt-button:hover,
    .dt-button-collection button:hover,
    .dt-button-collection a:hover,
    .dt-button-collection .btn:hover,
    .dt-button-collection .dt-button:focus,
    .dt-button-collection button:focus,
    .dt-button-collection a:focus,
    .dt-button-collection .btn:focus,
    .dt-button-collection .dt-button:active,
    .dt-button-collection button:active,
    .dt-button-collection a:active,
    .dt-button-collection .btn:active {
        background: #f3f4f6 !important;
        background-image: none !important;
        color: #000000 !important;
        filter: none !important;
        outline: none !important;
        box-shadow: none !important;
    }
    /* SHOWN columns (.active): light-green row + green border + dark text + eye. */
    .dt-button-collection .dt-button.active,
    .dt-button-collection button.active,
    .dt-button-collection a.active,
    .dt-button-collection .btn.active,
    .dt-button-collection .active span {
        color: #14532d !important;
        font-weight: 600 !important;
        text-decoration: none !important;
        background: #ecfdf5 !important;
        background-image: none !important;
    }
    .dt-button-collection .dt-button.active,
    .dt-button-collection button.active,
    .dt-button-collection a.active,
    .dt-button-collection .btn.active {
        border: 1px solid #86efac !important;
    }
     @keyframes dt-eye-pulse {
        0%, 100% { transform: scale(1); opacity: 1; }
        50%      { transform: scale(1.22); opacity: .7; }
    }
    .dt-button-collection .dt-button.active::before {
        content: '\f06e';                 /* fa-eye = shown */
        font-family: 'Font Awesome 5 Free'; font-weight: 900;
        color: #16a34a; margin-right: 10px; font-size: 13px; width: 16px;
        display: inline-block; text-align: center;
        animation: dt-eye-pulse 1.6s ease-in-out infinite;
    }
    .dt-button-collection .dt-button.active:hover,
    .dt-button-collection button.active:hover,
    .dt-button-collection a.active:hover,
    .dt-button-collection .btn.active:hover { background: #d1fae5 !important; }

    /* HIDDEN columns (NOT .active): muted grey + grey EYE-SLASH icon. */
    .dt-button-collection .dt-button:not(.active),
    .dt-button-collection button:not(.active),
    .dt-button-collection a:not(.active),
    .dt-button-collection .btn:not(.active),
    .dt-button-collection :not(.active) > span {
        color: #9aa0a6 !important;
        font-weight: 400 !important;
        text-decoration: none !important;
        background: #ffffff !important;
        background-image: none !important;
    }
    .dt-button-collection .dt-button:not(.active),
    .dt-button-collection button:not(.active),
    .dt-button-collection a:not(.active),
    .dt-button-collection .btn:not(.active) {
        border: 1px solid #e5e7eb !important;
    }
    .dt-button-collection .dt-button:not(.active)::before {
        content: '\f070';                 /* fa-eye-slash = hidden */
        font-family: 'Font Awesome 5 Free'; font-weight: 900;
        color: #c0c4c8; margin-right: 10px; font-size: 13px; width: 16px;
        display: inline-block; text-align: center;
    }
    .dt-button-collection .dt-button:not(.active):hover,
    .dt-button-collection button:not(.active):hover,
    .dt-button-collection a:not(.active):hover,
    .dt-button-collection .btn:not(.active):hover { background: #f3f4f6 !important; }
    .dt-button-background { background: rgba(15,23,42,.2) !important; }