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

/* Table fills the container width on desktop. Small columns (SN, Wt, Dt) are
   pinned via CSS max-width so they don't balloon when the browser proportionally
   stretches columns to fill the window. */
table.dynamic-table {
    table-layout: fixed;
    width: 100% !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-*. */
.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: 35px !important;
}
.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: 85px !important;
}
.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: 140px !important;
}
/* Compact action column for merchant/merchant-staff parcel table — admin side keeps dt-pin-md (140px). */
.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: 100px !important;
}

/* ======================================================================
   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: 25px !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: 80px !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: 105px !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: 350px !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: 105px !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: 80px !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: 115px !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: 100px !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: 70px !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: 100px !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: 140px !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: 475px !important; }

/* 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: 120px !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;
    }
}