/* ═══════════════════════════════════════════════════════════════
   Drive Me — Listing tables
   Loaded on every admin page, after driveme.css, before dm-mobile.css.

   The compact, icon-led table pattern that Orders established, made
   general so Customers and Drivers read the same way.

   Two ideas carry the whole thing:

     1. States are an icon and a colour, not a word. A column of
        "Unassigned" / "Approved" / "Available" pills is the widest
        thing on a listing and the least worth reading twice.

     2. Below 992px the table stops scrolling sideways. Columns drop
        out by priority and a disclosure row brings them back in
        place — dragging a row off-screen to read the rest of it
        loses the row you were reading.

   A page marks each column with a drop priority and a width role;
   nothing in here knows what any particular column contains.
═══════════════════════════════════════════════════════════════ */


/* ──────────────────────────────────────────────────────────────
   §1  THE TABLE
────────────────────────────────────────────────────────────── */
.dm-list-table {
    width: 100%;
    font-size: .8rem;
    margin-bottom: 0;
}

.dm-list-table > thead > tr > th {
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--dm-txt-3, #64748B);
    padding: .5rem .6rem;
    white-space: nowrap;
    background: var(--dm-surface-alt, #F8FAFC);
    border-bottom: 1px solid var(--dm-border, #E2E8F0);
}

.dm-list-table > tbody > tr > td {
    padding: .38rem .6rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--dm-border, #E2E8F0);
}

.dm-list-table > tbody > tr:last-child > td { border-bottom: none; }
.dm-list-row:hover > td { background: var(--dm-indigo-50, #EEF2FF); }

/* The two cells every listing has: a name with something smaller
   underneath it, and a monospace identifier.

   Both ellipsis, and the cap is what makes that happen: a nowrap cell
   with no cap sizes its own column to the longest string in the table,
   which on desktop is one address deciding the layout for every other
   row. Pages that want a different ceiling set the variable rather
   than redeclaring the rule. */
.dm-list-primary {
    font-weight: 600;
    line-height: 1.25;
    max-width: var(--dm-list-primary-max, 190px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dm-list-secondary {
    font-size: .7rem;
    color: var(--dm-txt-3, #64748B);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dm-list-mono {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    /* dm-mobile.css lets table cells break mid-token below 992px. A
       phone number or a reference is the one kind of string here that
       must never be split across two lines. */
    white-space: nowrap;
}
.dm-list-truncate {
    max-width: var(--dm-list-truncate-max, 260px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--dm-txt-2, #334155);
}
.dm-list-stack { white-space: nowrap; line-height: 1.25; }


/* ──────────────────────────────────────────────────────────────
   §2  STATE ICONS

   One shape per state, one colour per state. Colour alone would fail
   a red/green colour-blind reader, so the shapes differ too: a tick
   is never a cross however either one is rendered.

   Every state icon needs a tooltip and an aria-label — the icon is
   the whole cell, so the label is the only text there is.
────────────────────────────────────────────────────────────── */
.dm-list-state {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    font-size: .72rem;
    border: 1px solid transparent;
    cursor: default;
}

.dm-list-state-green { background:#DCFCE7; color:#15803D; border-color:#BBF7D0; }
.dm-list-state-amber { background:#FEF3C7; color:#B45309; border-color:#FDE68A; }
.dm-list-state-blue  { background:#DBEAFE; color:#1D4ED8; border-color:#BFDBFE; }
.dm-list-state-teal  { background:#CCFBF1; color:#0F766E; border-color:#99F6E4; }
.dm-list-state-red   { background:#FEE2E2; color:#B91C1C; border-color:#FECACA; }
.dm-list-state-slate { background:#F1F5F9; color:#475569; border-color:#E2E8F0; }

/* For the one state per page that is changing while you look at it. */
.dm-list-state-live { position: relative; }
.dm-list-state-live::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 0 0 rgba(20, 184, 166, .5);
    animation: dm-list-pulse 2s infinite;
}
@keyframes dm-list-pulse {
    70%  { box-shadow: 0 0 0 6px rgba(20, 184, 166, 0); }
    100% { box-shadow: 0 0 0 0 rgba(20, 184, 166, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .dm-list-state-live::after { animation: none; }
}

/* A count, rather than a state: the number is the information. */
.dm-list-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 24px;
    padding: 0 7px;
    border-radius: 7px;
    font-size: .72rem;
    font-weight: 700;
    background: var(--dm-slate-100, #F1F5F9);
    color: var(--dm-txt-2, #334155);
    border: 1px solid var(--dm-border, #E2E8F0);
}
.dm-list-count-active {
    background: #CCFBF1;
    color: #0F766E;
    border-color: #99F6E4;
}


/* ──────────────────────────────────────────────────────────────
   §3  ROW ACTIONS
────────────────────────────────────────────────────────────── */
.dm-list-act {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid var(--dm-border, #E2E8F0);
    background: #fff;
    color: var(--dm-txt-3, #64748B);
    font-size: .72rem;
    text-decoration: none;
    transition: all .15s ease;
    padding: 0;
}
.dm-list-act:hover         { border-color:#4338CA; color:#4338CA; background:#EEF2FF; }
.dm-list-act-map:hover     { border-color:#0F766E; color:#0F766E; background:#CCFBF1; }
.dm-list-act-warning:hover { border-color:#B45309; color:#B45309; background:#FEF3C7; }
.dm-list-act-disabled      { opacity: .3; pointer-events: none; }


/* ──────────────────────────────────────────────────────────────
   §4  ICON KEY

   An icon-only cell is only readable once you have learned it, and a
   tooltip cannot be scanned. This can.
────────────────────────────────────────────────────────────── */
.dm-list-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    font-size: .68rem;
    color: var(--dm-txt-3, #64748B);
}
.dm-list-legend span { display: inline-flex; align-items: center; gap: 4px; }
.dm-list-legend i { width: 13px; text-align: center; }


/* ──────────────────────────────────────────────────────────────
   §5  FILTER / SEARCH BAR
────────────────────────────────────────────────────────────── */
.dm-list-filters {
    border: 1px solid var(--dm-border, #E2E8F0);
    border-radius: 8px;
    background: var(--dm-surface, #fff);
    padding: 8px 10px;
}
.dm-list-filters .form-control,
.dm-list-filters .form-select {
    font-size: .8rem;
    height: auto;
    min-height: 32px;
}
.dm-list-filters .form-control { padding: .28rem .55rem; }

/* The chevron on a select is a background image and the room for it is
   padding-right. Tightening one means moving both together, or the
   longest option sits under the arrow. */
.dm-list-filters .form-select {
    padding: .28rem 1.6rem .28rem .55rem;
    background-position: right .5rem center;
    background-size: 11px 8px;
}
.dm-list-filters .input-group-text {
    font-size: .75rem;
    padding: .28rem .5rem;
    background: var(--dm-surface-alt, #F8FAFC);
}
.dm-list-filters .btn {
    font-size: .78rem;
    padding: .3rem .7rem;
    min-height: 32px;
    white-space: nowrap;
}

/* Bootstrap input groups wrap by default, so a squeezed column drops
   its input onto a second line under the icon rather than getting
   narrower. There is no width at which that is the better outcome. */
.dm-list-filters .input-group { flex-wrap: nowrap; }
.dm-list-filters .input-group .form-control { min-width: 0; }

.dm-list-field { min-width: 0; }

@media (min-width: 992px) {
    .dm-list-field-search { min-width: 200px; }
    .dm-list-field-phone  { width: 168px; }
}


/* ──────────────────────────────────────────────────────────────
   §6  DISCLOSURE

   The desktop table has no disclosure column and never opens a row.
────────────────────────────────────────────────────────────── */
.dm-list-c-toggle { display: none; }
.dm-list-detail-row { display: none; }

.dm-list-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--dm-border, #E2E8F0);
    border-radius: 6px;
    background: #fff;
    color: var(--dm-txt-3, #64748B);
    font-size: .68rem;
    transition: transform .18s ease, color .15s ease, border-color .15s ease;
}
.dm-list-row.is-open .dm-list-toggle {
    transform: rotate(180deg);
    color: #4338CA;
    border-color: #4338CA;
    background: #EEF2FF;
}
.dm-list-row.is-open > td {
    background: #EEF2FF;
    border-bottom-color: transparent;
}

.dm-list-detail-row > td {
    padding: 0 !important;
    background: #F8FAFC;
    border-bottom: 2px solid var(--dm-border, #E2E8F0);
}
.dm-list-detail { padding: 12px 14px 14px; }

.dm-list-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
}
.dm-list-detail-item { min-width: 0; }
.dm-list-detail-item-wide { grid-column: 1 / -1; }
.dm-list-detail-label {
    display: block;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--dm-txt-4, #94A3B8);
    margin-bottom: 1px;
}
.dm-list-detail-value {
    display: block;
    font-size: .8rem;
    line-height: 1.35;
    color: var(--dm-txt, #0F172A);
    overflow-wrap: anywhere;
}
.dm-list-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--dm-border, #E2E8F0);
}
.dm-list-detail-actions .btn { flex: 1 1 auto; }


/* ──────────────────────────────────────────────────────────────
   §7  RESPONSIVE COLUMNS

   A page tags each column with how early it may drop. Lower numbers
   go first, so the least useful column at a glance is the first to
   leave. An untagged column never drops.

     .dm-list-c-1   gone below 992px
     .dm-list-c-2   gone below 768px
     .dm-list-c-3   gone below 576px

   And with how it should be sized once the table goes fixed-layout:

     .dm-list-w-flex    absorbs whatever is left  (exactly one per table)
     .dm-list-w-icon    52px   — a single state icon
     .dm-list-w-tight   100px  — a date, a short number
     .dm-list-w-share   42%    — the one long text column
────────────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {

    /* table-layout: fixed rather than auto, and this is the load-bearing
       line. Under auto layout a nowrap cell sizes its own column to the
       full string and drags the table back out past the viewport — the
       sideways scrolling this breakpoint exists to remove. Capping the
       text instead needs a width, and no single width is right from
       320px to 991px. Fixed layout inverts it: the columns below are
       given their widths, one column takes whatever is left, and the
       table cannot exceed 100% at any size.

       The extra class beats dm-mobile.css, which sizes every other
       table in the dashboard to its content below 992px. */
    .table-responsive > .dm-list-table,
    .dm-scroll-x > .dm-list-table {
        width: 100%;
        min-width: 0;
        table-layout: fixed;
    }
    .table-responsive > .dm-list-table > * > tr > td,
    .table-responsive > .dm-list-table > * > tr > th,
    .dm-scroll-x > .dm-list-table > * > tr > td,
    .dm-scroll-x > .dm-list-table > * > tr > th {
        max-width: none;
    }

    .dm-list-c-1 { display: none; }

    .dm-list-c-toggle { display: table-cell; width: 46px; }

    .dm-list-w-flex  { width: auto; overflow: hidden; }
    .dm-list-w-share { width: 42%; overflow: hidden; }
    .dm-list-w-tight { width: 100px; }
    .dm-list-w-icon  { width: 52px; }

    /* Fixed layout hands each cell a width; the caps above would fight
       it, so they hand over here and the text clips to the column. */
    .dm-list-primary,
    .dm-list-truncate {
        max-width: 100%;
    }

    .dm-list-row { cursor: pointer; }
    .dm-list-row.is-open + .dm-list-detail-row { display: table-row; }
}

@media (max-width: 767.98px) {
    .dm-list-c-2 { display: none; }
}

@media (max-width: 575.98px) {
    .dm-list-c-3 { display: none; }
    .dm-list-detail-grid { gap: 9px 12px; }
}


/* ──────────────────────────────────────────────────────────────
   §8  TOUCH

   Icon-only cells lean on a tooltip, and a phone has no hover, so
   these targets grow here rather than shrink with everything else.
────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .dm-list-act    { width: 32px; height: 32px; }
    .dm-list-state  { width: 28px; height: 28px; }
    .dm-list-toggle { width: 34px; height: 34px; }

    /* An icon column is 52px wide and its heading is a whole word —
       "APPROVAL" does not fit, and under nowrap it ran straight over the
       next heading. Smaller and tighter here, with the ellipsis as the
       safety net so a longer label than any of today's still clips
       instead of colliding. */
    .dm-list-table > thead > tr > th.dm-list-w-icon {
        font-size: .56rem;
        letter-spacing: .01em;
        padding-left: .2rem;
        padding-right: .2rem;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* The key goes too: seven labelled icons is a screenful on a phone,
       and the whole strip has to go or its padding leaves an empty
       white band above the table. */
    .dm-list-legend-bar { display: none; }

    /* Any input under 16px makes iOS Safari zoom the viewport when it is
       tapped, and the page does not zoom back — a worse cost than a few
       pixels of height on a bar that is collapsed behind a toggle. */
    .dm-list-filters .form-control,
    .dm-list-filters .form-select {
        font-size: 16px;
        min-height: 38px;
    }
    .dm-list-filters .form-select {
        padding-right: 2rem;
        background-size: 13px 10px;
    }
}