/* 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: 19.2dvw !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-priority,
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id^="comments-table"] td.dt-pin-c-priority  { width: 5.2dvw !important; }
.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: 20dvw !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`.
   ====================================================================== */
/* Per-column widths in dvw. table-layout: fixed reads these from the colgroup;
   the sum stays within calc(100dvw - 465px) (≈ 69.7dvw at 1536px viewport) so
   the table never exceeds the visible main-content width. Column order:
   SN, Date, Ticket no, Merchant, Category, Message, Comment, Status, Priority, Read, Last reply, Action.
   Admin sum    : 2.5 + 4.0 + 5.5 + 6.5 + 5.5 + 8.5 + 14.0 + 5.5 + 4.0 + 4.0 + 5.5 + 3.5 = 69.0dvw
   Merchant sum : 2.5 + 4.0 + 6.0 + 6.5 + 10.0 + 18.0 + 6.5 + 5.0 + 6.0 + 4.0          = 68.5dvw */

/* Shared defaults — apply to both admin + merchant tickets tables. */
.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.5dvw !important; }
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id^="tickets-table"] th.dt-pin-t-created,
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id^="tickets-table"] td.dt-pin-t-created   { width: 4.0dvw !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: 6.0dvw !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: 6.5dvw !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: 6.5dvw !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: 10.0dvw !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: 18.0dvw !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: 6.5dvw !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.0dvw !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: 4.0dvw !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: 6.0dvw !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.0dvw !important; }

/* Admin-side overrides — 12 cols so each non-essential column is tightened. */
.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: 5.5dvw !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.5dvw !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: 8.5dvw !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: 14.0dvw !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: 5.5dvw !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.0dvw !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: 5.5dvw !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.5dvw !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;
}

/* Truncated cell content — Message + Comment use this so long text gets an
   ellipsis instead of overflowing the column. The full text is in title=. */
.dt-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

/* Horizontal-scroll safety: if the viewport gets narrower than the table's
   minimum width (e.g. zoomed-in browser, narrow window), the wrapper scrolls
   instead of clipping the right-hand columns. Scoped via :has() so it only
   affects the tickets-table wrappers. */
.default-list-table.yajra-dataTable:has(.table.dynamic-table[data-dt-id^="tickets-table"]) {
    overflow-x: auto;
}

/* 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;
    }
}

/* ====================================================================
   PARCEL TABLES — consistent, zoom-stable, horizontally-scrollable layout
   --------------------------------------------------------------------
   Scoped to the two parcel tables by data-dt-id; the other dynamic tables
   (operations / comments / tickets / post-delivery / reports) are untouched.

   WHY rem REPLACES dvw here:
   - dvw (viewport width) makes every column a fraction of the SCREEN, so a
     column is physically wider on a 1920px monitor than on a 1366px laptop
     and narrower again on mobile — the table never looks the same twice, and
     it reflows under browser zoom while the old px font breakpoint (14px ->
     12px @max-width:768px) flips the layout mid-zoom.
   - rem is anchored to the root font-size, so a 14rem column is 224px on EVERY
     device, and zoom scales width + font + padding together as ONE unit. The
     table therefore renders identically across mobile / laptop / big screen
     and across zoom in/out, and simply SCROLLS (never squishes) when the
     viewport is narrower than the column sum (min-width below).
   - width:100% + min-width:<sum>rem keeps the DataTables controls full-width
     (only the table scrolls when narrow); max-width:none cancels the base
     calc(100dvw - 465px) cap. The dvw inline-width engine in
     dynamic-table.js is disabled for these tables (see isFixedRemTable).
   ==================================================================== */

/* Shared: sizing + typography for BOTH parcel tables. */
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id^="parcel-table"] {
    table-layout: fixed;
    width: 100% !important;
    max-width: none !important;          /* cancel the base calc(100dvw - 465px) cap */
}
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id^="parcel-table"] th,
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id^="parcel-table"] td {
    font-size: 0.875rem !important;      /* 14px @ root — scales as one unit on zoom   */
    padding: 0.6rem 0.75rem !important;  /* was px; rem keeps proportions on zoom       */
    box-sizing: border-box;
}
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id^="parcel-table"] thead th {
    font-weight: 600;
}

/* Themed sticky header — matches the app's premium table look (light panel,
   indigo text + underline), not a heavy fill. Opaque so rows scroll under it. */
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id^="parcel-table"] thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: #f4f5fb;
    color: #18227C;
    border-bottom: 2px solid #18227C;
}
/* Active sort accent in brand orange. */
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id^="parcel-table"] thead th.sorting_asc,
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id^="parcel-table"] thead th.sorting_desc {
    color: #F36621;
    box-shadow: inset 0 -2px 0 0 #F36621;
}

/* No frozen left column — every column scrolls with the table (sticky header kept). */

/* Scroll wrapper: only the wrappers that actually contain a parcel table, so
   the focus ring doesn't leak onto other dynamic-table wrappers. */
.default-list-table.yajra-dataTable:has(.table.dynamic-table[data-dt-id^="parcel-table"]) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}
.default-list-table.yajra-dataTable:has(.table.dynamic-table[data-dt-id^="parcel-table"]):focus-visible {
    outline: 2px solid #F36621;
    outline-offset: -2px;
}
/* Always-visible, themed horizontal scrollbar — a clear affordance that the
   table scrolls sideways (otherwise off-screen columns look "missing"). */
.default-list-table.yajra-dataTable:has(.table.dynamic-table[data-dt-id^="parcel-table"]) {
    scrollbar-width: thin;                 /* Firefox */
    scrollbar-color: #c3c8e6 #eef0f8;
}
.default-list-table.yajra-dataTable:has(.table.dynamic-table[data-dt-id^="parcel-table"])::-webkit-scrollbar {
    height: 0.625rem;
}
.default-list-table.yajra-dataTable:has(.table.dynamic-table[data-dt-id^="parcel-table"])::-webkit-scrollbar-track {
    background: #eef0f8;
    border-radius: 0.5rem;
}
.default-list-table.yajra-dataTable:has(.table.dynamic-table[data-dt-id^="parcel-table"])::-webkit-scrollbar-thumb {
    background: #c3c8e6;
    border-radius: 0.5rem;
}
.default-list-table.yajra-dataTable:has(.table.dynamic-table[data-dt-id^="parcel-table"])::-webkit-scrollbar-thumb:hover {
    background: #18227C;
}

/* ADMIN parcel table — 11 cols, min-width 93rem; Address (width:100%) absorbs the
   slack so it fills wide screens and scrolls when narrower. notes_parcel_table_css.md */
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="parcel-table-admin"] { min-width: 93rem !important; max-width: none !important; }
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="parcel-table-admin"] thead th.dt-pin-xs   { width: 5rem !important; }  /* SN */
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="parcel-table-admin"] thead th:nth-child(2){ width: 5rem  !important; }  /* Date */
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="parcel-table-admin"] thead th:nth-child(3){ width: 11rem !important; }  /* Merchant */
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="parcel-table-admin"] thead th:nth-child(4){ width: 9rem  !important; }  /* Parcel no */
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="parcel-table-admin"] thead th:nth-child(5){ width: 10rem !important; }  /* Receiver */
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="parcel-table-admin"] thead th:nth-child(6){ width: 8rem  !important; }  /* Phone */
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="parcel-table-admin"] thead th:nth-child(7){ width: 9rem  !important; }  /* Destination */
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="parcel-table-admin"] thead th:nth-child(8){ width: 100% !important; min-width: 14rem !important; }  /* Address — fills remaining width */
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="parcel-table-admin"] thead th.dt-pin-sm   { width: 6rem  !important; }  /* COD */
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="parcel-table-admin"] thead th.dt-pin-lg   { width: 9rem  !important; }  /* Status */
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="parcel-table-admin"] thead th.dt-action-cell { width: 7rem !important; } /* Action */

/* MERCHANT parcel table — 10 cols (no Merchant col), fixed 82rem; SN/Date/COD match admin. */
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="parcel-table-merchant"] { min-width: 82rem !important; max-width: 82rem !important; }
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="parcel-table-merchant"] thead th.dt-pin-xs   { width: 5rem !important; }  /* SN */
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="parcel-table-merchant"] thead th:nth-child(2){ width: 5rem  !important; }  /* Date */
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="parcel-table-merchant"] thead th:nth-child(3){ width: 9rem  !important; }  /* Parcel no */
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="parcel-table-merchant"] thead th:nth-child(4){ width: 10rem !important; }  /* Receiver */
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="parcel-table-merchant"] thead th:nth-child(5){ width: 8rem  !important; }  /* Phone */
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="parcel-table-merchant"] thead th:nth-child(6){ width: 9rem  !important; }  /* Destination */
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="parcel-table-merchant"] thead th:nth-child(7){ width: 14rem !important; }  /* Address */
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="parcel-table-merchant"] thead th.dt-pin-sm   { width: 6rem  !important; }  /* COD */
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="parcel-table-merchant"] thead th.dt-pin-lg   { width: 9rem  !important; }  /* Status */
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="parcel-table-merchant"] thead th.dt-action-cell { width: 7rem !important; } /* Action */

/* ---- UI polish (both parcel tables): denser rows, zebra striping, clear row
   borders, numeric COD alignment, stronger hover — faster to scan a wide table. */
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id^="parcel-table"] tbody td {
    padding-top: 0.45rem !important;
    padding-bottom: 0.45rem !important;
    line-height: 1.4;
    vertical-align: middle;
    border-bottom: 1px solid #eef0f5;
}
/* Zebra striping (subtle) — easier to follow one row across many columns. */
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id^="parcel-table"] tbody tr:nth-child(even) td,
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id^="parcel-table"] tbody tr:nth-child(even) td:first-child {
    background: #fafbfd;
}
/* Row hover — one clear highlight across every cell. */
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id^="parcel-table"] tbody tr:hover td,
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id^="parcel-table"] tbody tr:hover td:first-child {
    background: #eef1fb;
}
/* COD amount — left-aligned to match the SN / Date / Status columns and the
   `text-start` class the DataTable already sets on the COD column. */
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id^="parcel-table"] thead th.dt-pin-sm,
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id^="parcel-table"] tbody td.dt-pin-sm,
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id^="parcel-table"] tbody td.dt-pin-sm > * {
    text-align: left;
}

/* SN column: never ellipsis-clip the serial — show checkbox + number inline.
   (DT_RowIndex grows with the dataset, so the number can reach 6-7 digits.) */
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id^="parcel-table"] td.dt-pin-xs .dt-sn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
    max-width: none;
}
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id^="parcel-table"] td.dt-pin-xs,
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id^="parcel-table"] th.dt-pin-xs {
    white-space: nowrap;
}

/* The REAL horizontal scroller is the inner .dataTables_wrapper (the table is a
   direct child of it) — put the themed scrollbar + focus ring + overscroll there
   so the visible scrollbar matches and keyboard users can arrow-scroll it. */
.dataTables_wrapper:has(.table.dynamic-table[data-dt-id^="parcel-table"]) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: #c3c8e6 #eef0f8;
}
.dataTables_wrapper:has(.table.dynamic-table[data-dt-id^="parcel-table"])::-webkit-scrollbar { height: 0.625rem; }
.dataTables_wrapper:has(.table.dynamic-table[data-dt-id^="parcel-table"])::-webkit-scrollbar-track { background: #eef0f8; border-radius: 0.5rem; }
.dataTables_wrapper:has(.table.dynamic-table[data-dt-id^="parcel-table"])::-webkit-scrollbar-thumb { background: #c3c8e6; border-radius: 0.5rem; }
.dataTables_wrapper:has(.table.dynamic-table[data-dt-id^="parcel-table"])::-webkit-scrollbar-thumb:hover { background: #18227C; }
.dataTables_wrapper:has(.table.dynamic-table[data-dt-id^="parcel-table"]):focus-visible {
    outline: 2px solid #F36621;
    outline-offset: -2px;
}

/* Keep the DataTables controls (length / search / info / pagination) pinned to the
   left edge so ONLY the table scrolls sideways, not the controls (easier to use). */
.dataTables_wrapper:has(.table.dynamic-table[data-dt-id^="parcel-table"]) > .dataTables_length,
.dataTables_wrapper:has(.table.dynamic-table[data-dt-id^="parcel-table"]) > .dataTables_filter,
.dataTables_wrapper:has(.table.dynamic-table[data-dt-id^="parcel-table"]) > .dataTables_info,
.dataTables_wrapper:has(.table.dynamic-table[data-dt-id^="parcel-table"]) > .dataTables_paginate {
    position: sticky;
    left: 0;
}

/* Honor reduced-motion (no smooth-scroll surprises for users who ask for it). */
@media (prefers-reduced-motion: reduce) {
    .default-list-table.yajra-dataTable:has(.table.dynamic-table[data-dt-id^="parcel-table"]),
    .dataTables_wrapper:has(.table.dynamic-table[data-dt-id^="parcel-table"]) {
        scroll-behavior: auto;
    }
}

/* Flatten the table's own 20px corners — the card already rounds the panel. */
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="parcel-table-admin"],
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="parcel-table-admin"] thead th,
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="parcel-table-admin"] tbody tr:last-child td {
    border-radius: 0 !important;
}
/* Status — left-align header, cell and badge (badge is centred by default). */
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="parcel-table-admin"] thead th.dt-pin-lg,
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="parcel-table-admin"] tbody td.dt-pin-lg,
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="parcel-table-admin"] tbody td.dt-pin-lg .status-wrap,
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="parcel-table-admin"] tbody td.dt-pin-lg .status-wrap > * {
    text-align: left !important;
}

/* Mobile: shrink the 14px base font on small screens (column widths unchanged). */
@media (max-width: 767.98px) {
    .default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id^="parcel-table"] th,
    .default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id^="parcel-table"] td {
        font-size: 0.75rem !important;       /* 12px */
        padding: 0.45rem 0.55rem !important;
    }
}
@media (max-width: 479.98px) {
    .default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id^="parcel-table"] th,
    .default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id^="parcel-table"] td {
        font-size: 0.6875rem !important;     /* 11px */
        padding: 0.4rem 0.5rem !important;
    }
}

/* ====================================================================
   PARCEL UPDATE LOG report — same premium fixed-rem look as the parcel
   tables (sticky themed header, flat corners, horizontal scroll); dvw
   width engine disabled via isFixedRemTable().
   ==================================================================== */
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="parcel-update-log"] {
    table-layout: fixed;
    width: 100% !important;
    min-width: 76rem !important;
    max-width: none !important;
}
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="parcel-update-log"] th,
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="parcel-update-log"] td {
    font-size: 0.875rem !important;
    padding: 0.6rem 0.75rem !important;
    box-sizing: border-box;
    vertical-align: top;
}
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="parcel-update-log"] thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    font-weight: 600;
    background: #f4f5fb;
    color: #18227C;
    border-bottom: 2px solid #18227C;
}
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="parcel-update-log"],
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="parcel-update-log"] thead th,
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="parcel-update-log"] tbody tr:last-child td {
    border-radius: 0 !important;
}
.default-list-table.yajra-dataTable:has(.table.dynamic-table[data-dt-id="parcel-update-log"]) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #c3c8e6 #eef0f8;
}
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="parcel-update-log"] thead th:nth-child(1) { width: 4rem  !important; }
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="parcel-update-log"] thead th:nth-child(2) { width: 6rem  !important; }
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="parcel-update-log"] thead th:nth-child(3) { width: 7.5rem !important; }
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="parcel-update-log"] thead th:nth-child(4) { width: 9rem  !important; }
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="parcel-update-log"] thead th:nth-child(5) { width: 7rem  !important; }
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="parcel-update-log"] thead th:nth-child(6) { width: 11rem !important; }
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="parcel-update-log"] thead th:nth-child(7) { width: 14rem !important; }
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="parcel-update-log"] tbody td:nth-child(7) { white-space: normal; line-height: 1.5; }
/* Changes absorbs the slack (width:100%) so it fills wide screens; min keeps it usable. */
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="parcel-update-log"] thead th:nth-child(8) { width: 100% !important; min-width: 24rem !important; }
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="parcel-update-log"] tbody td:nth-child(8) { white-space: normal; line-height: 1.5; }
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="parcel-update-log"] td .dt-chg-more-count { font-size: 11px; }
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="parcel-update-log"] td .dt-changes-more { font-size: 12px; color: #F36621; cursor: pointer; }
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="parcel-update-log"] td .dt-changes-more:hover { text-decoration: underline; }

/* "View details" popup content: long unbroken values / reason strings must
   wrap inside the modal instead of overflowing its width. */
.modal-body .dt-chg-reason,
.modal-body .dt-chg-detail-table th,
.modal-body .dt-chg-detail-table td,
.modal-body .dt-stmt-meta {
    word-break: break-word;
    overflow-wrap: anywhere;
}
.modal-body .dt-chg-detail-table {
    width: 100%;
    table-layout: fixed;
}

@media (max-width: 767.98px) {
    .default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="parcel-update-log"] th,
    .default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="parcel-update-log"] td {
        font-size: 0.75rem !important;
        padding: 0.45rem 0.55rem !important;
    }
}

/* ====================================================================
   Staff transaction log — same premium fixed-rem look as the parcel
   table; the Transaction column absorbs the slack so the row reads as a
   single sentence next to a clear Income/Expense badge + signed amount.
   ==================================================================== */
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="staff-transaction-log"] {
    table-layout: fixed;
    width: 100% !important;
}
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="staff-transaction-log"] th,
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="staff-transaction-log"] td {
    font-size: 0.875rem !important;
    padding: 0.6rem 0.75rem !important;
    box-sizing: border-box;
    vertical-align: top;
}
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="staff-transaction-log"] thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    font-weight: 600;
    background: #f4f5fb;
    color: #18227C;
    border-bottom: 2px solid #18227C;
}
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="staff-transaction-log"],
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="staff-transaction-log"] thead th,
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="staff-transaction-log"] tbody tr:last-child td {
    border-radius: 0 !important;
}
.default-list-table.yajra-dataTable:has(.table.dynamic-table[data-dt-id="staff-transaction-log"]) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #c3c8e6 #eef0f8;
}
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="staff-transaction-log"] thead th:nth-child(1) { width: 4rem  !important; }
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="staff-transaction-log"] thead th:nth-child(2) { width: 6rem  !important; }
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="staff-transaction-log"] thead th:nth-child(3) { width: 100% !important; min-width: 18rem !important; }
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="staff-transaction-log"] tbody td:nth-child(3) { white-space: normal; line-height: 1.5; }
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="staff-transaction-log"] thead th:nth-child(4) { width: 8rem  !important; }
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="staff-transaction-log"] thead th:nth-child(5) { width: 12rem !important; }
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="staff-transaction-log"] tbody td:nth-child(5) { white-space: normal; overflow: visible; text-overflow: clip; }
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="staff-transaction-log"] td .badge { white-space: normal; }
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="staff-transaction-log"] thead th:nth-child(6) { width: 9rem  !important; }
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="staff-transaction-log"] td .dt-txn-title { font-weight: 500; }
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="staff-transaction-log"] td .dt-txn-ref { font-size: 11px; }
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="staff-transaction-log"] td .dt-amount { font-weight: 600; white-space: nowrap; }

@media (max-width: 767.98px) {
    .default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="staff-transaction-log"] th,
    .default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="staff-transaction-log"] td {
        font-size: 0.75rem !important;
        padding: 0.45rem 0.55rem !important;
    }
}

/* ====================================================================
   Account statement — per-account ledger. Same premium theme; the rich
   Source/Details cell absorbs the slack, direction is an Added/Deducted
   badge + signed amount. Content-width (fit-content), not stretched.
   ==================================================================== */
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="account-statement"] {
    table-layout: fixed;
    width: 100% !important;
}
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="account-statement"] th,
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="account-statement"] td {
    font-size: 0.875rem !important;
    padding: 0.6rem 0.75rem !important;
    box-sizing: border-box;
    vertical-align: top;
}
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="account-statement"] thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    font-weight: 600;
    background: #f4f5fb;
    color: #18227C;
    border-bottom: 2px solid #18227C;
}
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="account-statement"],
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="account-statement"] thead th,
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="account-statement"] tbody tr:last-child td {
    border-radius: 0 !important;
}
.default-list-table.yajra-dataTable:has(.table.dynamic-table[data-dt-id="account-statement"]) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #c3c8e6 #eef0f8;
}
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="account-statement"] thead th:nth-child(1) { width: 4rem  !important; }
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="account-statement"] thead th:nth-child(2) { width: 6rem  !important; }
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="account-statement"] thead th:nth-child(3) { width: 14rem !important; }
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="account-statement"] tbody td:nth-child(3) { white-space: normal; line-height: 1.5; }
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="account-statement"] thead th:nth-child(4) { width: 100% !important; }
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="account-statement"] tbody td:nth-child(4) { white-space: normal; line-height: 1.5; }
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="account-statement"] td .dt-stmt-meta { line-height: 1.5; }
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="account-statement"] td .dt-changes-more { font-size: 12px; color: #F36621; cursor: pointer; }
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="account-statement"] td .dt-changes-more:hover { text-decoration: underline; }
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="account-statement"] thead th:nth-child(5) { width: 12rem !important; }
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="account-statement"] tbody td:nth-child(5) { white-space: normal; overflow: visible; text-overflow: clip; }
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="account-statement"] td .badge { white-space: normal; }
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="account-statement"] thead th:nth-child(6) { width: 9rem  !important; }
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="account-statement"] td .dt-stmt-title { font-weight: 500; }
/* Filter toggle sits just before the search box (scoped to this table only). */
.default-list-table.yajra-dataTable:has(.table.dynamic-table[data-dt-id="account-statement"]) .dataTables_filter {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}
.default-list-table.yajra-dataTable:has(.table.dynamic-table[data-dt-id="account-statement"]) .dataTables_filter #filterBTN {
    margin: 0 !important;
}
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="account-statement"] td .dt-stmt-meta { font-size: 12px; }
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="account-statement"] td .dt-amount { font-weight: 600; white-space: nowrap; }
/* Statement is read in full — let the Source label + detail meta wrap instead
   of the dynamic-table's single-line ellipsis safety-net. */
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="account-statement"] td .dt-stmt-title,
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="account-statement"] td .dt-stmt-meta,
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="account-statement"] td .dt-stmt-meta span,
.default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="account-statement"] td .dt-stmt-meta a {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

@media (max-width: 767.98px) {
    .default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="account-statement"] th,
    .default-list-table.yajra-dataTable .table.dynamic-table[data-dt-id="account-statement"] td {
        font-size: 0.75rem !important;
        padding: 0.45rem 0.55rem !important;
    }
}