/**
 * DH Suite — shared tables.
 *
 * Split out of components.css, which had grown to 1,073 lines
 * across eleven unrelated families. Same layer, same order: these are
 * linked in the sequence they were concatenated, because within a layer
 * later source wins.
 */

@layer components {

/* ==========================================================================
   Tables
   ========================================================================== */

/* --- Wrapper for horizontal scroll -------------------------------------- */

.table-wrapper {
    /* Wide tables stay reachable rather than being cut off — the app shell
       clips overflow-x.

       This used to be an alias pair, `.table-wrapper, .table-container`, for
       one thing under two names. Settled on `.table-wrapper`:
       it is the wrapper, not a container of tables, and it
       had 43 usages against 12. */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background-color: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

/* --- Data table --------------------------------------------------------- */

.data-table {
    width: 100%;
    border-collapse: collapse;
    background-color: white;
}

.data-table th,
.data-table td {
    padding: var(--spacing-3) var(--spacing-4);
    text-align: left;
    border-bottom: 1px solid var(--color-gray-200);
}

.data-table th {
    background-color: var(--color-gray-50);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
    white-space: nowrap;
}

.data-table th.sortable {
    cursor: pointer;
    user-select: none;
}

.data-table th.sortable:hover {
    background-color: var(--color-gray-100);
}

.data-table th.sortable:focus-visible {
    outline: var(--focus-ring);
    outline-offset: calc(-1 * var(--focus-ring-offset, 2px));
}

.data-table tbody tr:hover {
    background-color: var(--color-gray-50);
}

.data-table tbody tr.clickable,
.data-table[data-row-link] tbody tr:has(a[href]) {
    cursor: pointer;
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

/* --- Phones: tables become list rows -------------------------------------- */
/* js/data-table-cards.js gives every .data-table with a header the classes
   `stacked` and `phone-list`, copies each column's header onto its cells as
   `data-label`, and gives each cell a role in `data-phone`: from the header
   cell's own `data-phone` if it has one, else from the cell's content.
     lead    a lone checkbox, in the left margin
     title   the first line, in bold
     detail  a small "Label: value" line of its own
     sub     a muted line with no label (a tuned list's second line)
     meta    badges (status, priority), together on the last line
     action  buttons, at the right end of that line
     hide    left out until chosen in "Details shown"
   A column the person turned off in "Details shown" gets `phone-off`; an
   empty value, `phone-empty`. A table marked `data-no-stack` stays a grid
   and scrolls in its own box. */
@media (max-width: 767px) {
    .data-table.stacked thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }
    .data-table.stacked,
    .data-table.stacked tbody,
    .data-table.stacked tr,
    .data-table.stacked td {
        display: block;
        width: 100%;
    }
    .data-table.stacked tr {
        margin-bottom: var(--spacing-3);
        border: 1px solid var(--color-gray-200);
        border-radius: var(--radius-lg);
        overflow: hidden;
    }
    /* Each label sits above its value, left-aligned: side by side, a long
       label and value squeezed each other at a large text size */
    .data-table.stacked td {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        text-align: left;
        border-bottom: 1px solid var(--color-gray-100);
        min-width: 0;
        /* a long email breaks only where it must */
        overflow-wrap: break-word;
    }
    .data-table.stacked tr:last-child td:last-child,
    .data-table.stacked td:last-child {
        border-bottom: none;
    }
    .data-table.stacked td::before {
        content: attr(data-label);
        font-size: var(--font-size-xs);
        font-weight: var(--font-weight-semibold);
        color: var(--color-gray-600);
    }
    /* Buttons in a cell keep their own width, side by side */
    .data-table.stacked td:not([data-label]),
    .data-table.stacked td[data-label=""] {
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--spacing-2);
    }
    /* A cell with no header (row buttons) needs no label */
    .data-table.stacked td[data-label=""]::before,
    .data-table.stacked td:not([data-label])::before {
        content: none;
    }
    /* A placeholder row ("No work orders match.") reads as a sentence */
    .data-table.stacked td[colspan] {
        display: block;
        text-align: center;
    }

    /* The list rows */
    .table-wrapper:has(> .data-table.phone-list) {
        overflow-x: visible;
    }
    .data-table.phone-list tbody {
        display: block;
    }
    .data-table.phone-list tr {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 2px var(--spacing-2);
        margin: 0;
        padding: var(--spacing-3) var(--spacing-4);
        border: 0;
        border-bottom: 1px solid var(--color-gray-200);
        border-radius: 0;
        overflow: visible;
    }
    .data-table.phone-list tr:last-child {
        border-bottom: 0;
    }
    .data-table.phone-list :is(td, th) {
        display: block;
        width: auto;
        padding: 0;
        border: 0;
        text-align: left;
        min-width: 0;
        overflow-wrap: break-word;
    }
    .data-table.phone-list :is(td, th)::before {
        content: none;
    }
    /* The row: the title on the full width, then each detail on its own
       line, then the badges together on the last line with any buttons at
       its right end. A checkbox sits in the left margin. */
    .data-table.phone-list tr:has(> td[data-phone="lead"]) {
        padding-left: calc(var(--spacing-4) + 2rem);
    }
    .data-table.phone-list :is(td, th)[data-phone="lead"] {
        position: absolute;
        left: var(--spacing-4);
        top: 50%;
        transform: translateY(-50%);
    }
    .data-table.phone-list :is(td, th)[data-phone="title"] {
        order: -1;
        flex: 1 1 100%;
        font-weight: var(--font-weight-semibold);
        color: var(--color-gray-900);
    }
    .data-table.phone-list :is(td, th)[data-phone="sub"] {
        flex: 1 1 100%;
        font-size: var(--font-size-sm);
        color: var(--color-gray-600);
    }
    .data-table.phone-list :is(td, th)[data-phone="sub"]:empty {
        display: none;
    }
    /* Badges and buttons finish the row, whatever the column order */
    .data-table.phone-list :is(td, th)[data-phone="meta"] {
        order: 1;
        flex: 0 1 auto;
        margin-top: var(--spacing-1);
        font-size: var(--font-size-sm);
    }
    .data-table.phone-list :is(td, th)[data-phone="action"] {
        order: 2;
        flex: 0 0 auto;
        margin-left: auto;
        margin-top: var(--spacing-1);
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: var(--spacing-1);
    }
    /* A row's own "open" button (View, Edit): the row opens on a tap, so
       the button stays only for keyboards and screen readers
       (data-table-cards.js) */
    .data-table.phone-list .row-open {
        position: absolute;
        width: 1px;
        height: 1px;
        min-height: 0;
        min-width: 0;
        padding: 0;
        margin: -1px;
        border: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    .data-table.phone-list :is(td, th)[data-phone="detail"] {
        flex: 1 1 100%;
        font-size: var(--font-size-sm);
        color: var(--color-gray-700);
    }
    .data-table.phone-list :is(td, th)[data-phone="detail"][data-label]:not([data-label=""])::before {
        content: attr(data-label) ": ";
        color: var(--color-gray-600);
        font-weight: var(--font-weight-semibold);
    }
    .data-table.phone-list :is(td, th)[data-phone="hide"],
    .data-table.phone-list :is(td, th).phone-off,
    .data-table.phone-list :is(td, th)[data-phone="detail"].phone-empty,
    .data-table.phone-list :is(td, th)[data-phone="sub"].phone-empty {
        display: none;
    }
    .data-table.phone-list :is(td, th)[colspan] {
        flex: 1 1 100%;
        text-align: center;
    }
    /* The row is the target: the whole of it opens the record */
    .data-table.phone-list tr.clickable,
    .data-table.phone-list tr.phone-tap {
        cursor: pointer;
    }
    .data-table.phone-list tr.clickable:active,
    .data-table.phone-list tr.phone-tap:active {
        background-color: var(--color-gray-100);
    }
}

/* --- Legacy .table class (Reach compatibility) -------------------------- */

.table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-4);
}

.table thead th {
    background: var(--color-gray-50);
    color: var(--color-gray-600);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    font-size: var(--font-size-xs);
    letter-spacing: 0.05em;
    padding: var(--spacing-3) var(--spacing-4);
    text-align: left;
    border-bottom: 2px solid var(--color-gray-200);
    white-space: nowrap;
}

.table tbody td {
    padding: var(--spacing-3) var(--spacing-4);
    border-bottom: 1px solid var(--color-gray-100);
    vertical-align: top;
    color: var(--color-gray-700);
}

.table tbody tr {
    background: white;
    transition: background-color var(--transition-fast);
}

.table tbody tr:hover {
    background: var(--color-gray-50);
}

.table tbody tr:last-child td {
    border-bottom: none;
}

/* --- Compact density ---------------------------------------------------- */

/* Legacy .table-compact variant (Reach compatibility) */
.table-compact thead th {
    padding: var(--spacing-2) var(--spacing-3);
}

.table-compact tbody td {
    padding: var(--spacing-2) var(--spacing-3);
}

/* .data-table compact variant */
.compact-view .data-table th,
.compact-view .data-table td {
    padding: var(--spacing-2) var(--spacing-3);
    font-size: var(--font-size-sm);
}

.compact-view .data-table th {
    font-size: var(--font-size-xs);
}

.compact-view .badge {
    padding: 0.125rem 0.375rem;
    font-size: 0.6875rem;
}

.compact-view .btn-icon {
    width: 28px;
    height: 28px;
    padding: var(--spacing-1);
}

.compact-view .btn-icon svg {
    width: 14px;
    height: 14px;
}

/* --- Action buttons in table rows --------------------------------------- */

.action-buttons {
    display: flex;
    gap: var(--spacing-1);
}

.compact-view .action-buttons {
    gap: 2px;
}

/* --- Column visibility -------------------------------------------------- */

.col-hidden {
    display: none !important;
}

/* The column chooser's panel (js/column-chooser.js) */
.col-config-panel {
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 50;
    min-width: 180px;
    background: white;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: var(--spacing-2) 0;
}

.col-config-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-3);
    font-size: var(--font-size-sm);
    cursor: pointer;
    white-space: nowrap;
}

.col-config-item:hover {
    background: var(--color-gray-50);
}

.col-config-item input[type="checkbox"] {
    margin: 0;
}

.col-config-reset {
    margin: var(--spacing-1) var(--spacing-3) 0;
}

/* --- One line per row --------------------------------------------------- */

/* Every cell of a list stays on one line, so rows keep one height and
   read as a list: long text ends in an ellipsis, with the full text on
   hover. A block inside a cell, such as the town under an address, is its
   own line. Phones show list rows instead (phone.css).

   A table cell ignores max-width, so the cut is made inside it:
   js/column-chooser.js puts each body cell's content in
   <span class="cell-clip"><span class="cell-text">, for rows a template
   renders and rows a script adds later. .cell-clip is a one-column grid
   whose column may shrink to nothing, so a list too wide for the screen
   narrows its text columns, each in proportion to its text, rather than
   running off the side; no cell grows past 24rem. .cell-text carries the
   ellipsis. Left as they are: a cell marked .cell-wrap, which may wrap
   where a page needs it (on a table, every cell of a table of prose, as
   in help); one holding a menu, a disclosure or a form control; a cell
   spanning columns; a cell of sixteen characters or fewer, which also
   sets the narrowest its column goes. Below 768px the spans take no box of
   their own. */
.cell-clip,
.cell-text {
    display: contents;
}

@media (min-width: 768px) {
    .data-table td {
        white-space: nowrap;
    }

    .data-table .cell-clip {
        display: grid;
        grid-template-columns: minmax(0, max-content);
        max-width: 24rem;
    }

    .data-table .cell-text {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        /* room for a link's focus ring inside the cut */
        padding: 3px;
        margin: -3px;
    }

    .data-table .cell-text > div,
    .data-table .cell-text > p,
    .data-table .cell-text > small,
    .data-table .cell-text > .text-muted {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .data-table td.cell-wrap,
    .data-table th.cell-wrap,
    .data-table.cell-wrap td,
    .data-table.cell-wrap th,
    .data-table td[colspan] {
        white-space: normal;
    }
}

/* --- The pager under a paged list (shared/static/js/pager.js) ---------- */

.dh-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    margin-top: var(--spacing-4);
}

.dh-pager-line {
    font-size: var(--font-size-sm);
    color: var(--color-gray-500);
}

}