/* =============================================================================
   Door lists (2026-09-30) — the list additions to the Doors tab (Fire Doors) and
   the Items tab (Fire Stopping), and the list tracker page in both modules.

   Plan: docs/features/2026-09-30-door-list-preload-plan.md (P3, §4.9).
   Boards: docs/features/2026-09-30-door-list-ui/FD-DoorList.html,
           FS-ItemsList.html, Tracker-View.html.

   Loaded by layout/app.php on inspection-show, fire-stopping-survey-show,
   inspection-door-list and fire-stopping-item-list only. It styles ONLY the
   classes door lists added (dl-*); it shapes no existing page.

   ⚠ The Doors tab's own chips (.pass-chip / .chip-pass / .chip-fail) live in a
   desktop-only block of inspection_show.css; on a phone or touch screen the row
   is a table card and table-cards.css draws the pill from the row's
   data-rc-tone. The rules below follow the same split: the chip look on desktop,
   and only the two things a card cannot express (the hollow "not yet inspected"
   circle and its dashed edge) inside the table-cards media query.
   ============================================================================= */

/* ---- list-state chips: Doors tab + Items tab (desktop) ---------------------- */

/* "Not yet inspected" / "Awaiting this visit": dashed edge, hollow circle. */
.dl-chip-await {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--surface-card);
    color: var(--ink-2);
    border: 1px dashed color-mix(in srgb, var(--ink) 40%, transparent) !important;
}

.dl-chip-await > i {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: 1.5px solid var(--ink-3);
    background: transparent;
    flex: none;
}

/* "Added on site": the blue info chip, shown beside the door's real result. */
.dl-chip-added {
    background: color-mix(in srgb, var(--info) 8%, transparent);
    color: var(--info);
    border-color: color-mix(in srgb, var(--info) 20%, transparent) !important;
}

/* "Inspected twice": a second result for a listed door, saved beside it for the office
   to resolve (list_flags.inspected_twice_of) — the amber of the tracker's flag lines. */
.dl-chip-twice {
    background: var(--accent-soft);
    color: var(--accent-ink);
    border-color: color-mix(in srgb, var(--accent) 30%, transparent) !important;
}

.page-section--inspection-show :is(.dl-chip-added, .dl-chip-twice),
.page-section--fs-survey-show :is(.dl-chip-added, .dl-chip-twice) {
    display: inline-flex;
    align-items: center;
    margin-top: 4px;
    min-height: 20px;
    padding: 2px 8px;
    border: 1px solid;
    border-radius: 5px;
    font-size: 11px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

/* The Ref column: first data column, narrow. */
.page-section--inspection-show .door-overview-table thead th.dl-ref-th,
.page-section--fs-survey-show .fss-pen-table thead th[data-col="ref"] {
    width: 96px;
}

.dl-ref {
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dl-muted {
    color: var(--ink-4);
}

.dl-warn {
    color: var(--accent-ink);
}

/* The rail's "· list from <source>" line and its two buttons. */
.dl-rail-source {
    margin-left: 6px;
}

.dl-rail-actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* A listed row's reason ("Not built yet") under its name. */
.dl-list-reason {
    display: block;
    margin-top: 2px;
    color: var(--ink-4);
    font-size: 11px;
}

/* ---- phone and touch: the table card -------------------------------------- */

@media (max-width: 900px), (any-pointer: coarse) {
    :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] :is(td, th)[data-rc="pill"] > .dl-chip-await {
        background: var(--surface-card) !important;
        color: var(--ink-2) !important;
        border: 1px dashed color-mix(in srgb, var(--ink) 40%, transparent) !important;
    }

    :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] :is(td, th)[data-rc="pill"] > .dl-chip-await > i {
        display: inline-block !important;
        width: 7px !important;
        height: 7px !important;
        background: transparent !important;
        border: 1.5px solid currentColor;
    }

    :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] :is(td, th)[data-rc="pill"] > .dl-chip-added {
        background: color-mix(in srgb, var(--info) 8%, transparent) !important;
        color: var(--info) !important;
        margin-right: 4px !important;
    }
}

/* ============================================================================
   The list tracker page (inspection-door-list / fire-stopping-item-list)
   ========================================================================== */

/* The outcome chips — the Doors tab's chip values (inspection_show.css
   `.pass-chip`, `.chip-pass`, `.chip-fail`, `.chip-neutral`), copied verbatim
   because that stylesheet is not loaded on this page. */
.dl-tracker-page .pass-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 20px;
    padding: 2px 8px;
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, 0.11);
    font-size: 11px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.dl-tracker-page .chip-pass {
    background: var(--success-soft);
    color: var(--success);
    border-color: rgba(30, 122, 69, 0.2);
}

.dl-tracker-page .chip-fail {
    background: var(--danger-soft);
    color: var(--danger);
    border-color: rgba(176, 48, 48, 0.18);
}

.dl-tracker-page .chip-neutral {
    background: var(--surface-inset);
    color: var(--ink-3);
    border-color: rgba(0, 0, 0, 0.11);
}

.dl-tracker-page .dl-chip-added {
    margin-right: 4px;
}

.dl-tracker-page .dl-tracker-outcome {
    white-space: nowrap;
}

.dl-tracker-page .dl-tracker-name {
    font-weight: 600;
    color: var(--ink);
}

.dl-tracker-page .dl-tracker-flag {
    display: block;
    margin-top: 2px;
    color: var(--accent-ink);
    font-size: 12px;
}

.dl-tracker-page .dl-tracker-ref {
    font-weight: 600;
    white-space: nowrap;
}

.dl-tracker-page .dl-tracker-empty {
    padding: 16px 20px;
    color: var(--ink-4);
}

.dl-tracker-history__list {
    margin: 0;
    padding: 0 0 0 18px;
    display: grid;
    gap: 4px;
    font-size: 13px;
    color: var(--ink-3);
}

/* ---- the stats strip: "35 of 47" (Doors inspected / Items assessed) ---------- */

.page-section--inspection-show .sc-value-of,
.page-section--fs-survey-show .fss-sc-value-of {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink-4);
    letter-spacing: 0;
}

/* Fire Stopping's "Defective" on the tracker: the amber of the Doors tab's Medium
   severity chip (inspection_show.css `.sev-m`). */
.dl-tracker-page .chip-warn {
    background: rgba(196, 149, 16, 0.08);
    color: var(--accent-ink);
    border-color: rgba(196, 149, 16, 0.22);
}

.dl-tracker-page .dl-tracker-sub {
    display: block;
    margin-top: 2px;
    color: var(--ink-4);
    font-size: 12px;
}

/* Door lists (2026-09-30, Chrome check at 390): the tracker's rail carries three buttons,
   and the shared rail keeps them in a row with flex-shrink 0 — the copy column was squeezed
   to one word per line ("EVER / Y DOOR"). The canonical rail at this width is a column
   (the Doors tab's own rule in inspection_show.css, and clients.css / team.css). */
@media (max-width: 900px) {
    .dl-tracker-page .ipi-filter-rail {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .dl-tracker-page .ipi-filter-rail__actions {
        flex-wrap: wrap;
    }
}

/* Door lists (2026-09-30, Chrome check at 1024): with ten columns the table broke short
   values mid-word ("Baseme / nt", "Ye / s", "Printe / d"). Words wrap whole; the short
   one-word columns never wrap. Desktop table only — the cards below 901px are untouched. */
@media (min-width: 901px) {
    .dl-tracker-page .dl-tracker-table td,
    .dl-tracker-page .dl-tracker-table th {
        word-break: normal;
        overflow-wrap: normal;
    }

    .dl-tracker-page .dl-tracker-table td[data-rc-label="Pin"],
    .dl-tracker-page .dl-tracker-table td[data-rc-label="Rating"] {
        white-space: nowrap;
    }
}

/* UI review (owner, 2026-09-30: "door list tracker needs to be polished"). Rows were 67px at
   1440 and up to 164px at 1024 because "Lower ground" and the recorded line wrapped in narrow
   columns while the Door column was squeezed; the floor filter stretched across the page. */
.dl-tracker-page .dl-nowrap {
    white-space: nowrap;
}

.dl-tracker-page .dl-tracker-when {
    color: var(--ink-4);
}

@media (min-width: 901px) {
    .dl-tracker-page .dl-tracker-filterbar {
        grid-template-columns: repeat(3, minmax(150px, 210px));
        justify-content: start;
    }

    .dl-tracker-page .dl-tracker-table td[data-rc="title"] {
        min-width: 160px;
    }

    .dl-tracker-page .dl-tracker-table td[data-rc-label="Reason"] {
        min-width: 130px;
    }
}

/* A flag on a card is a full-width line under the subtitle (it was cut off in a fact slot),
   in the amber the desktop row uses, not the card system's red. */
.dl-tracker-page table[data-rc="card"] .dl-tracker-flag[data-rc-flag] {
    color: var(--accent-ink);
}

/* Wide screens: the recorded line on one line (it wrapped name / time at 1440 too). */
@media (min-width: 1200px) {
    .dl-tracker-page .dl-tracker-table :is(td[data-rc-label="Recorded"], td[data-rc-label="Label"]) {
        white-space: nowrap;
    }

    .dl-tracker-page .dl-tracker-table td[data-rc="title"] {
        min-width: 190px;
    }
}

/* 901-1199px: nine columns fit only with tighter cells (the table ran 49px past its card at 1024). */
@media (min-width: 901px) and (max-width: 1199px) {
    .dl-tracker-page .dl-tracker-table :is(td, th) {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* FS Items tab cards: the subtitle already reads "Penetration seal · P.B.02", so the Ref fact
   was a duplicate squeezed to "P.B…" in a four-fact row (UI review, 2026-09-30). */
@media (max-width: 900px), (any-pointer: coarse) {
    .page-section--fs-survey-show :is(html:not(.rc-wide), [data-rc-touch]) table[data-rc="card"] td.dl-ref,
    :is(html:not(.rc-wide), [data-rc-touch]) .page-section--fs-survey-show table[data-rc="card"] td.dl-ref {
        display: none;
    }
}

/* ---- Add doors / Add items pop-up (owner, 2026-09-30) -----------------------------------
   door_list/_add_modal.php and item_list/_add_modal.php: a One | Several switch under the
   header, then either the one-door form or a grid to type or paste into. On a phone (and a
   touch screen under 901px) the grid's rows are table-cards editor cards
   (data-rc-editor="list-add", table-cards.css); everything below the media query is desktop. */

.dl-add__modes {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    margin: 0;
    padding: 12px 22px;
    border-bottom: 1px solid var(--set-border-rule, var(--rule));
    background: var(--surface-card);
}

.dl-add__mode {
    min-height: 36px;
    padding: 7px 16px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: var(--surface-inset);
    color: var(--ink-3);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.dl-add__mode[aria-selected="true"] {
    border-color: var(--ink);
    background: var(--ink);
    color: var(--surface-card);
}

.dl-add__mode:focus-visible {
    outline: 2px solid var(--accent-ink);
    outline-offset: 2px;
}

.dl-add__error {
    margin: 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--danger-soft);
    color: var(--danger);
    font-size: 13px;
    font-weight: 500;
}

.dl-add__lead {
    margin: 0;
    font-size: 13px;
    color: var(--ink-3);
}

/* The footer line lists what went in ("Added D.LG.58, D.LG.59"), so it may run long. */
.dl-add [data-list-add-added] {
    overflow-wrap: anywhere;
}

.dl-add__grid-wrap {
    min-width: 0;
}

.dl-add__grid {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.dl-add__grid th {
    padding: 0 4px 6px;
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.dl-add__grid th:nth-child(1) { width: 13%; }
.dl-add__grid th:nth-child(2) { width: 25%; }
.dl-add__grid th:nth-child(3) { width: 14%; }
.dl-add__grid th:nth-child(4) { width: 13%; }
.dl-add__grid th:nth-child(5) { width: 14%; }
.dl-add__grid th:nth-child(6) { width: auto; }
.dl-add__grid th:nth-child(7) { width: 36px; }

.dl-add__grid td {
    padding: 3px 4px;
    vertical-align: middle;
}

.dl-add__grid input {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 36px;
    padding: 0 9px;
    border: 1px solid var(--rule-strong);
    border-radius: 7px;
    background: var(--surface-card);
    color: var(--ink);
    font: inherit;
    font-size: 13px;
}

.dl-add__grid input:focus {
    outline: 2px solid var(--accent-ink);
    outline-offset: -1px;
    border-color: transparent;
}

/* A row the server refused: tinted, with its reason in the row under it. Desktop only
   (html.rc-wide): on a card the reason line under the card is enough. */
html.rc-wide .dl-add__grid tr.is-invalid > td,
html.rc-wide .dl-add .dl-add__grid tr[data-rc-message] > td.dl-add__err {
    background: var(--danger-soft);
}

html.rc-wide .dl-add__grid tr.is-invalid > td:first-child {
    border-radius: 8px 0 0 0;
}

html.rc-wide .dl-add__grid tr.is-invalid > td:last-child {
    border-radius: 0 8px 0 0;
}

.dl-add .dl-add__grid tr[data-rc-message] > td.dl-add__err {
    padding: 2px 8px 8px;
    border-radius: 0 0 8px 8px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--danger);
}

.dl-add__remove {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--ink-3);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.dl-add__remove:hover {
    background: var(--danger-soft);
    color: var(--danger);
}

.dl-add__more {
    align-self: flex-start;
    margin-top: 6px;
    padding: 6px 4px;
    border: 0;
    background: none;
    color: var(--ink);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

@media (max-width: 900px) {
    .dl-add__modes {
        padding: 10px 16px;
    }

    .dl-add__mode {
        flex: 1 1 0;
        min-height: 44px;
        font-size: 14px;
    }

    /* A failed row's reason under its card. */
    .dl-add .dl-add__grid tr[data-rc-message] > td.dl-add__err {
        padding: 0 2px 4px;
        font-size: 13.5px;
    }
}

/* The "rows weren't imported" banner on the Doors / Items tab: its Add and Dismiss are
   btn-small (34px); on a phone or tablet they get the 44px tap target (UI review, 2026-09-30). */
@media (max-width: 1024px), (any-pointer: coarse) {
    [data-dl-leftout-notice] .fp-notice__actions .btn {
        min-height: 44px;
    }
}

/* The header card's "31 still to inspect · 1 no access · 1 added on site": each figure keeps its
   words together (FD .sc-foot, FS .fss-sc-foot), so a wrap falls between figures. */
.sc-foot__part {
    white-space: nowrap;
}

/* Wide-screen rows (2026-10-08 table redesign plan): both trackers carry data-rc-rows. The
   Floor cell is the card's subtitle (data-rc-sub on the cell itself), and table-rows.css
   draws a subtitle as a block — on a table cell that broke the row. Here it stays a cell
   and reads like its neighbours. Nothing here applies below 901px. */
html.rc-wide .dl-tracker-page .dl-tracker-table[data-rc-rows] > tbody > tr > td[data-rc-sub] {
    display: table-cell;
    max-width: none;
    margin-top: 0;
    overflow: visible;
    font-size: 13.5px;
    color: var(--ink-2);
}

/* The vocabulary (owner sign-off 2026-10-08): ONE line per row on wide screens. A door's flag
   and an item's type sit beside the name as its grey line (each ellipses); the reason ellipses
   rather than wrapping; the awaiting pill drops its dot like every other pill; "Added on site"
   reads as plain text before the outcome pill. Cards below 901px are untouched. */
html.rc-wide .dl-tracker-page .dl-tracker-table[data-rc-rows] > tbody > tr > td[data-rc="title"] {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Inline, so the cell's ellipsis cuts the line where it runs out ("Schedule P05 says D.B…"). */
html.rc-wide .dl-tracker-page .dl-tracker-table[data-rc-rows] :is(.dl-tracker-flag, .dl-tracker-sub) {
    display: inline;
    margin: 0 0 0 8px;
    font-size: 12.5px;
    white-space: nowrap;
}

html.rc-wide .dl-tracker-page .dl-tracker-table[data-rc-rows] > tbody > tr > td:is([data-rc-label="Recorded"], [data-rc-label="Label"]) {
    white-space: nowrap;
}

html.rc-wide .dl-tracker-page .dl-tracker-table[data-rc-rows] > tbody > tr > td[data-rc-label="Reason"] {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html.rc-wide .dl-tracker-page .dl-tracker-table[data-rc-rows] [data-rc-pill] > i {
    display: none;
}

html.rc-wide .dl-tracker-page .dl-tracker-table[data-rc-rows] .dl-chip-added[data-rc-plain] {
    margin-right: 8px !important;
    color: var(--ink-3) !important;
}

@media (max-width: 1366px) {
    html.rc-wide .dl-tracker-page .dl-tracker-table[data-rc-rows] > tbody > tr > td[data-rc-label="Reason"] {
        max-width: 140px;
    }
}

/* 901-1199px: with the recorded line and the label kept to one line, the nine columns ran 77px
   past the card at 1024. The door column gives up its floor and the cells 2px a side. */
@media (min-width: 901px) and (max-width: 1199px) {
    html.rc-wide .dl-tracker-page table.dl-tracker-table[data-rc][data-rc-rows] > :is(thead, tbody) > tr > :is(td, th) {
        padding-left: 8px;
        padding-right: 8px;
    }

    html.rc-wide .dl-tracker-page .dl-tracker-table[data-rc-rows] > tbody > tr > td[data-rc="title"] {
        min-width: 120px;
    }

    html.rc-wide .dl-tracker-page .dl-tracker-table[data-rc-rows] > tbody > tr > td[data-rc-label="Reason"] {
        max-width: 130px;
    }
}