/* Dynamic Table — reusable enhancements for Yajra DataTables.
   Opt-in via class="dynamic-table" + data-dt-id="<unique-id>" on the <table>. */

/* Table width is viewport-based (dvw) so the table claims the same visual
   share of the screen at every desktop size (1280, 1440, 1600, 1920) without
   getting clipped by parent containers that happen to grow with content.
   Offset accounts for ALL layout chrome to the left+right of the table:
     sidebar expanded   = 312px (.main-wrapper padding-left)
     main-content pad   =  24px (.main-content-wrapper 12+12)
     outer container    =  24px (Bootstrap container-fluid 12+12)
     row gutter / col   =  20px (col-lg-12 padding 10+10)
     inner container    =  24px (Bootstrap container-fluid 12+12)
     card p-sm-30       =  60px (.bg-white.p-sm-30 30+30)
     inner col-lg-12    =   0px (cancelled by row negative margins)
     scrollbar + slack  =  17px
     ----------------------------
     total offset       = 481px (expanded) / 249px (collapsed)
   Use 465/233 to leave a few px of breathing room. */
table.dynamic-table {
    table-layout: fixed;
    width: calc(100dvw - 465px) !important;
    max-width: calc(100dvw - 465px) !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    margin: 0 2px;
}
.sidebar-collapse table.dynamic-table {
    width: calc(100dvw - 233px) !important;
    max-width: calc(100dvw - 233px) !important;
}
/* Mobile / tablet: sidebar overlays the content, so use near-full viewport. */
@media (max-width: 991px) {
    table.dynamic-table,
    .sidebar-collapse table.dynamic-table {
        width: calc(100dvw - 80px) !important;
        max-width: calc(100dvw - 80px) !important;
    }
}
/* Pin tiny columns: SN col (1st), Wt col (6th), Dt col (8th) for both admin and
   merchant table — they have the same column order. The merchant table has no
   Merchant column so positions shift; we use addClass('dt-pin-XS') instead. */
/* `table-layout: fixed` reads first-row widths to allocate columns. We set
   width + min-width + max-width with !important; combined with the HTML
   `<th width="N">` attribute (set in PHP getColumns()), these columns hold
   their pinned width even when DataTables/Yajra inline-styles them.

   IMPORTANT: app.css ships a rule
       `.default-list-table.yajra-dataTable .table tr th { width: 25% !important; }`
   with specificity (0,0,3,2). Our selectors below mirror that path and add
   the pin class to win the cascade — without this guard, every column
   collapses to ~25% of the table width regardless of dt-pin-*. */
/* Generic pinned-column widths — viewport-based (dvw) so they scale with
   screen size. Conversion calibrated to 1536px viewport (= dvw% × 15.36 px).
   Minimum px widths protect icon/badge columns from being squeezed below
   usable size when the JS scale-to-fit runs at smaller viewports. */
.default-list-table.yajra-dataTable .table.dynamic-table tr th.dt-pin-xs,
.default-list-table.yajra-dataTable .table.dynamic-table tr td.dt-pin-xs,
.dynamic-table th.dt-pin-xs,
.dynamic-table td.dt-pin-xs {
    width: 3.25dvw !important;
    min-width: 36px;
}
.default-list-table.yajra-dataTable .table.dynamic-table tr th.dt-pin-sm,
.default-list-table.yajra-dataTable .table.dynamic-table tr td.dt-pin-sm,
.dynamic-table th.dt-pin-sm,
.dynamic-table td.dt-pin-sm {
    width: 5.5dvw !important;
    min-width: 60px;
}
.default-list-table.yajra-dataTable .table.dynamic-table tr th.dt-pin-md,
.default-list-table.yajra-dataTable .table.dynamic-table tr td.dt-pin-md,
.dynamic-table th.dt-pin-md,
.dynamic-table td.dt-pin-md {
    width: 7.15dvw !important;
    min-width: 90px;
}
/* Compact action column for merchant/merchant-staff parcel table — admin side keeps dt-pin-md. */
.default-list-table.yajra-dataTable .table.dynamic-table tr th.dt-pin-action-sm,
.default-list-table.yajra-dataTable .table.dynamic-table tr td.dt-pin-action-sm,
.dynamic-table th.dt-pin-action-sm,
.dynamic-table td.dt-pin-action-sm {
    width: 6.5dvw !important;
    min-width: 80px;
}
/* Admin parcel action cell has 4 inline icons (menu / copy / print / sticker) —
   needs more room than merchant's 3-icon action cell. Override dt-pin-md min-width
   only on action cells (selected via the always-present dt-action-cell class). */
.default-list-table.yajra-dataTable .table.dynamic-table tr th.dt-pin-md.dt-action-cell,
.default-list-table.yajra-dataTable .table.dynamic-table tr td.dt-pin-md.dt-action-cell,
.dynamic-table th.dt-pin-md.dt-action-cell,
.dynamic-table td.dt-pin-md.dt-action-cell {
    width: 7.5dvw !important;
    min-width: 110px;
}

/* ======================================================================
   Comments table — per-column widths + compact row height + By-cell color.
   Scoped via the data-dt-id attribute so these rules don't bleed into
   other dynamic tables (parcels, etc.).
   ====================================================================== */
/* IMPORTANT: classes use the `dt-pin-` prefix so dynamic-table.js's
   isPinned() detects them and skips writing inline width. Selectors are
   prefixed with `.default-list-table.yajra-dataTable .table` to match the
   specificity of `_statistics.scss:50`'s `width: 25% !important` rule
   (without that prefix the 25% rule wins despite both having !important). */
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id^="comments-table"] th.dt-pin-c-sn,
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id^="comments-table"] td.dt-pin-c-sn        { width: 2.6dvw !important; }
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id^="comments-table"] th.dt-pin-c-pn,
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id^="comments-table"] td.dt-pin-c-pn        { width: 5.2dvw !important; }
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id^="comments-table"] th.dt-pin-c-merchant,
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id^="comments-table"] td.dt-pin-c-merchant  { width: 6.8dvw !important; }
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id^="comments-table"] th.dt-pin-c-comment,
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id^="comments-table"] td.dt-pin-c-comment   { width: 24.4dvw !important; }
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id^="comments-table"] th.dt-pin-c-name,
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id^="comments-table"] td.dt-pin-c-name      { width: 6.8dvw !important; }
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id^="comments-table"] th.dt-pin-c-phone,
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id^="comments-table"] td.dt-pin-c-phone     { width: 5.2dvw !important; }
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id^="comments-table"] th.dt-pin-c-pstatus,
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id^="comments-table"] td.dt-pin-c-pstatus   { width: 7.5dvw !important; }
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id^="comments-table"] th.dt-pin-c-by,
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id^="comments-table"] td.dt-pin-c-by        { width: 6.5dvw !important; font-size: 14px; }
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id^="comments-table"] th.dt-pin-c-status,
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id^="comments-table"] td.dt-pin-c-status    { width: 4.5dvw !important; }
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id^="comments-table"] th.dt-pin-c-date,
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id^="comments-table"] td.dt-pin-c-date      { width: 6.5dvw !important; }

/* Merchant-side overrides — wider Name and Comment columns since the merchant
   table has no Merchant column, so there's room to spare. The selectors target
   the exact merchant data-dt-id which has higher specificity than the
   starts-with admin rules above. */
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="comments-table-merchant"] th.dt-pin-c-name,
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="comments-table-merchant"] td.dt-pin-c-name      { width: 9.1dvw !important; }
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="comments-table-merchant"] th.dt-pin-c-comment,
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="comments-table-merchant"] td.dt-pin-c-comment   { width: 24.4dvw !important; }

/* ======================================================================
   Tickets table — per-column widths + compact row height. Scoped via the
   data-dt-id attribute so these rules don't bleed into other dynamic tables.
   Used by both `tickets-table-admin` and `tickets-table-merchant`.
   ====================================================================== */
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id^="tickets-table"] th.dt-pin-t-sn,
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id^="tickets-table"] td.dt-pin-t-sn        { width: 2.6dvw !important; }
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id^="tickets-table"] th.dt-pin-t-no,
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id^="tickets-table"] td.dt-pin-t-no        { width: 7.15dvw !important; }
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id^="tickets-table"] th.dt-pin-t-merchant,
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id^="tickets-table"] td.dt-pin-t-merchant  { width: 8.45dvw !important; }
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id^="tickets-table"] th.dt-pin-t-category,
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id^="tickets-table"] td.dt-pin-t-category  { width: 7.15dvw !important; }
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id^="tickets-table"] th.dt-pin-t-message,
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id^="tickets-table"] td.dt-pin-t-message   { width: 13dvw !important; }
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id^="tickets-table"] th.dt-pin-t-comment,
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id^="tickets-table"] td.dt-pin-t-comment   { width: 16.9dvw !important; }
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id^="tickets-table"] th.dt-pin-t-priority,
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id^="tickets-table"] td.dt-pin-t-priority  { width: 5.2dvw !important; }
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id^="tickets-table"] th.dt-pin-t-status,
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id^="tickets-table"] td.dt-pin-t-status    { width: 7.15dvw !important; }
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id^="tickets-table"] th.dt-pin-t-read,
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id^="tickets-table"] td.dt-pin-t-read      { width: 5.2dvw !important; }
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id^="tickets-table"] th.dt-pin-t-date,
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id^="tickets-table"] td.dt-pin-t-date      { width: 7.8dvw !important; }
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id^="tickets-table"] th.dt-pin-t-action,
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id^="tickets-table"] td.dt-pin-t-action    { width: 4.5dvw !important; }

/* Merchant-side: no Merchant column, so widen Comment for breathing room. */
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="tickets-table-merchant"] th.dt-pin-t-comment,
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="tickets-table-merchant"] td.dt-pin-t-comment   { width: 22.1dvw !important; }

/* Admin-side overrides — admin has 11 columns (SN, Ticket no, Merchant, Category,
   Message, Comment, Priority, Status, Read, Last reply, Action) vs merchant's 9,
   so each non-essential column is tightened to keep total table width manageable. */
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="tickets-table-admin"] th.dt-pin-t-no,
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="tickets-table-admin"] td.dt-pin-t-no        { width: 6.2dvw !important; }
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="tickets-table-admin"] th.dt-pin-t-merchant,
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="tickets-table-admin"] td.dt-pin-t-merchant  { width: 7.15dvw !important; }
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="tickets-table-admin"] th.dt-pin-t-category,
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="tickets-table-admin"] td.dt-pin-t-category  { width: 5.85dvw !important; }
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="tickets-table-admin"] th.dt-pin-t-message,
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="tickets-table-admin"] td.dt-pin-t-message   { width: 9.75dvw !important; }
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="tickets-table-admin"] th.dt-pin-t-comment,
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="tickets-table-admin"] td.dt-pin-t-comment   { width: 18.2dvw !important; }
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="tickets-table-admin"] th.dt-pin-t-priority,
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="tickets-table-admin"] td.dt-pin-t-priority  { width: 4.5dvw !important; }
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="tickets-table-admin"] th.dt-pin-t-status,
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="tickets-table-admin"] td.dt-pin-t-status    { width: 6.2dvw !important; }
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="tickets-table-admin"] th.dt-pin-t-read,
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="tickets-table-admin"] td.dt-pin-t-read      { width: 4.5dvw !important; }
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="tickets-table-admin"] th.dt-pin-t-date,
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="tickets-table-admin"] td.dt-pin-t-date      { width: 7.15dvw !important; }
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="tickets-table-admin"] th.dt-pin-t-action,
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="tickets-table-admin"] td.dt-pin-t-action    { width: 3.9dvw !important; }

/* Compact row height — overrides the default 10px padding. */
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id^="tickets-table"] td,
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id^="tickets-table"] th {
    padding: 5px 8px !important;
    font-size: 13px;
}

/* Compact row height — overrides the default 10px padding from the
   `.default-list-table.yajra-dataTable .table.dynamic-table td` rule above. */
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id^="comments-table"] td,
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id^="comments-table"] th {
    padding: 5px 8px !important;
    font-size: 13px;
}

/* By-cell — colored background block. Matches the avatar colors used in the
   parcel-comments timeline:
     Naarad side (admin / superadmin / staff) → #f36621 (brand orange)
     Merchant side (merchant / merchant_staff) → #25ab7c (green) */
.dynamic-table[data-dt-id^="comments-table"] td.dt-pin-c-by .by-tag {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 4px;
    color: #fff;
    font-weight: 500;
    font-size: 13px;
    line-height: 1.3;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dynamic-table[data-dt-id^="comments-table"] td.dt-pin-c-by .by-tag.by-naarad   { background-color: #f36621; }
.dynamic-table[data-dt-id^="comments-table"] td.dt-pin-c-by .by-tag.by-merchant { background-color: #25ab7c; }

/* Custom cell tooltip — replaces the browser's native title-attribute hover.
   Shows on hover OR click; only closes on outside click (mirrors parcel-form
   COD hint behavior). One popover instance appended to <body>, positioned per
   cell by JS. */
.dt-cell-tooltip {
    position: absolute;
    z-index: 1100;
    background: #18227c;
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.4;
    max-width: 360px;
    word-wrap: break-word;
    white-space: normal;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}
/* Cells with the custom tooltip get a soft hover hint — same affordance the
   browser's native title gave (cursor change + slight underline on overflow). */
.dynamic-table [data-dt-tooltip] {
    cursor: help;
}
.default-list-table.yajra-dataTable .table.dynamic-table tr th.dt-pin-lg,
.default-list-table.yajra-dataTable .table.dynamic-table tr td.dt-pin-lg,
.dynamic-table th.dt-pin-lg,
.dynamic-table td.dt-pin-lg {
    width: 7.8dvw !important;
}
/* Every cell clips overflow. Multi-line cells (Customer, Status, etc.) use
   block-level inner elements that stack vertically; each inner element gets
   its own single-line ellipsis so long text truncates with `...` and the
   full text is exposed via the `title` attribute set by DynamicTable.js. */
.dynamic-table th,
.dynamic-table td {
    overflow: hidden;
    vertical-align: top;
    text-align: left;
    white-space: normal;
}
.dynamic-table th {
    vertical-align: middle;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dynamic-table tbody td {
    font-size: 14px;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}

/* Override app.css `.default-list-table .table td/th { padding: 15px }`
   with the same selector chain + dynamic-table — 10px is plenty given our
   compact ellipsis layout and lets columns hold ~30px more for content. */
.default-list-table.yajra-dataTable .table.dynamic-table td,
.default-list-table.yajra-dataTable .table.dynamic-table th {
    padding: 10px !important;
}

/* Action column must let its bootstrap dropdown menu spill out of the td.
   The shared td rule above sets overflow:hidden for ellipsis; on action cells
   we override so the menu is visible AND stacks above subsequent rows. */
.dynamic-table td.dt-action-cell {
    overflow: visible !important;
    position: relative;
}
.dynamic-table tbody tr:has(.dropdown-menu.show) {
    position: relative;
    z-index: 1050;
}
.dynamic-table td.dt-action-cell .dropdown-menu.show {
    z-index: 1050;
}
/* Three-dot dropdown menu: width sized so items like "Received By Pickup Man"
   fit on a single line; hover highlights the <li> (and its <a>) only. */
.dynamic-table td.dt-action-cell .dropdown-menu {
    min-width: 220px;
    padding: 4px 0;
}
.dynamic-table td.dt-action-cell .dropdown-menu > li {
    list-style: none;
}
.dynamic-table td.dt-action-cell .dropdown-menu .dropdown-item {
    background-color: transparent;
    color: #212529;
    padding: 0.45rem 0.9rem;
    white-space: nowrap;
}
.dynamic-table td.dt-action-cell .dropdown-menu > li:hover,
.dynamic-table td.dt-action-cell .dropdown-menu > li:hover > .dropdown-item,
.dynamic-table td.dt-action-cell .dropdown-menu .dropdown-item:hover,
.dynamic-table td.dt-action-cell .dropdown-menu .dropdown-item:focus {
    background-color: rgba(24, 34, 124, 0.10);
    color: #18227c;
}

/* Suppress row :hover background while a dropdown is open in that row, so
   only the dropdown <li> being hovered shows highlighting (not the whole row).
   Bootstrap adds `.show` to `.dropdown-menu` (not the parent `.dropdown`). */
.dynamic-table tbody tr:has(.dropdown-menu.show),
.dynamic-table tbody tr:has(.dropdown-menu.show) td,
.dynamic-table tbody tr:has(.dropdown-menu.show):hover,
.dynamic-table tbody tr:has(.dropdown-menu.show):hover td {
    background-color: transparent !important;
}

/* The action area must not be selectable on click — prevents accidental
   text-selection when toggling the three-dot. */
.dynamic-table td .action-card {
    user-select: none;
}

/* Status cell: badge always anchored to the left edge of the cell. */
.dynamic-table td .status-wrap {
    text-align: left;
}
.dynamic-table td .status-wrap .badge {
    display: inline-block;
}
.dynamic-table td.dt-ellipsis {
    cursor: help;
}

/* SN cell: checkbox + number on the same baseline. Opt out of generic
   inner-element ellipsis so the flex container isn't forced to inline-block. */
.dynamic-table td .dt-sn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1;
}
.dynamic-table td .dt-sn input[type="checkbox"] {
    margin: 0;
    flex-shrink: 0;
}
.dynamic-table td .dt-sn .dt-sn-num {
    font-size: 13px;
    line-height: 1;
}

/* Action cell: keep flex layout for icons; do NOT clip the icon row. */
.dynamic-table td .action-card,
.dynamic-table td .action-card * {
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
    max-width: none;
}

/* Compact three-dot toggle — narrow vertical strip with the ellipsis-v icon. */
.action-card .dropdown-toggle {
    height: 25px;
    width: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
}

/* Opt-out: any element with .dt-no-ellipsis (and its descendants) skips the
   single-line ellipsis — used for short amount lines that should always render
   in full (e.g. "Delivery Due: NPR 25.00"). */
.dynamic-table td .dt-no-ellipsis,
.dynamic-table td .dt-no-ellipsis * {
    overflow: visible !important;
    white-space: nowrap !important;
    text-overflow: clip !important;
    max-width: none !important;
}

/* Generic ellipsis safety-net for inner elements in EVERY data cell.
   Block-level children stack vertically (each line ellipses). The opt-outs
   above (.dt-sn, .action-card) override this. */
.dynamic-table td > div,
.dynamic-table td > span,
.dynamic-table td > a,
.dynamic-table td > p {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}
.dynamic-table td > div > div,
.dynamic-table td > div > span,
.dynamic-table td > div > a,
.dynamic-table td > div > p {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

/* Column resize handles — appended to each <th>. */
.dynamic-table th {
    position: relative;
}
.dynamic-table th .dt-resize-handle {
    position: absolute;
    top: 0;
    right: 0;
    width: 6px;
    height: 100%;
    cursor: col-resize;
    user-select: none;
    z-index: 5;
}
.dynamic-table th .dt-resize-handle:hover,
.dynamic-table th .dt-resize-handle.dt-resizing {
    background: rgba(0, 123, 255, 0.35);
}
body.dt-col-resizing,
body.dt-col-resizing * {
    cursor: col-resize !important;
    user-select: none !important;
}

/* Toolbar — reset widths + select-all-on-page buttons. */
.dt-toolbar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.dt-reset-btn {
    display: none;
    font-size: 12px;
    line-height: 1;
}
.dt-reset-btn.dt-visible {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.dt-select-all-btn {
    font-size: 12px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Wrapper around the table: allow horizontal scroll when natural column sum
   exceeds the container so all data stays accessible. The table itself is
   `width:100%` + `table-layout:fixed`, so columns compress to fit when there
   is room; on narrower viewports the wrapper scrolls instead of clipping. */
.default-list-table.yajra-dataTable,
.dataTables_wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Mobile: ellipsis still applies, but column min-widths shouldn't fight the scroll container. */
@media (max-width: 768px) {
    .dynamic-table th,
    .dynamic-table td {
        font-size: 12px;
    }
}