/* ================================================================ */
/* Therion admin redesign — shared component vocabulary              */
/* Source of truth: design_handoff_admin_redesign/README.md          */
/* All colours come from the token layer in admin-overrides.css      */
/* (--t-*) and the UNFOLD["COLORS"] ramps, so every class here is    */
/* light/dark correct without per-mode rules unless noted.           */
/* ================================================================ */

/* ---------------------------------------------------------------- */
/* Chips — mono 10px uppercase, 20px tall, 5px radius                */
/* ---------------------------------------------------------------- */
.th-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    padding: 0 8px;
    border-radius: 5px;
    width: fit-content;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    border: 1px solid transparent;
}
.th-chip--amber {
    background: var(--t-warn-tint);
    color: var(--t-warn-ink);
    border-color: var(--t-warn-tint-border);
}
.th-chip--green {
    background: var(--t-success-tint);
    color: var(--t-success);
    border-color: var(--t-success-tint-border);
}
.th-chip--blue {
    background: var(--t-info-tint);
    color: var(--t-info);
    border-color: var(--t-info-tint-border);
}
.th-chip--red {
    background: var(--t-danger-tint);
    color: var(--t-danger);
    border-color: var(--t-danger-tint-border);
}
.th-chip--grey {
    background: var(--color-base-100);
    color: var(--color-base-500);
    border-color: var(--t-border-hairline);
}
.dark .th-chip--grey {
    background: var(--color-base-800);
    color: var(--color-base-400);
}
/* Violet — a non-RAG accent for classification tags (e.g. a subcontract
   operation), distinct from the amber/blue/green/grey workflow-status chips. */
.th-chip--violet {
    background: rgba(109, 92, 211, 0.12);
    color: var(--t-series-violet);
    border-color: rgba(109, 92, 211, 0.30);
}
.dark .th-chip--violet {
    background: rgba(143, 126, 231, 0.18);
    border-color: rgba(143, 126, 231, 0.34);
}

/* ---------------------------------------------------------------- */
/* Buttons                                                           */
/* Quiet (default): white surface, hairline border, muted text.      */
/* Primary: navy fill. Ghost: invisible until hover. Dashed: adders. */
/* ---------------------------------------------------------------- */
.th-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    border: 1px solid var(--t-border-hairline);
    border-radius: 7px;
    background: var(--t-surface);
    color: var(--color-base-500);
    font-family: var(--font-sans);
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: border-color 0.12s ease, color 0.12s ease,
        background-color 0.12s ease;
}
.th-btn:hover {
    border-color: var(--t-disabled);
    color: var(--t-ink);
}
.th-btn:focus-visible {
    outline: none;
    border-color: var(--t-primary);
    box-shadow: 0 0 0 3px var(--t-focus-ring);
}
.th-btn--sm {
    height: 30px;
    font-size: 12px;
}
.th-btn--primary {
    background: var(--t-primary);
    border-color: var(--t-primary-hover);
    color: #fff;
    font-weight: 600;
    padding: 0 16px;
    box-shadow: 0 1px 2px rgba(31, 44, 72, 0.15);
}
.th-btn--primary:hover {
    background: var(--t-primary-hover);
    border-color: var(--t-primary-hover);
    color: #fff;
}
.th-btn--ghost {
    background: transparent;
    border-color: transparent;
    color: var(--color-base-500);
}
.th-btn--ghost:hover {
    border-color: var(--t-border-bright);
    color: var(--t-primary);
    background: transparent;
}
.dark .th-btn--ghost:hover {
    color: var(--t-info);
}
.th-btn--dashed {
    background: transparent;
    border-style: dashed;
    border-color: var(--t-disabled);
    color: var(--color-base-500);
}
.th-btn--dashed:hover {
    border-color: var(--t-primary);
    color: var(--t-primary);
    background: transparent;
}
.dark .th-btn--dashed:hover {
    border-color: var(--t-info);
    color: var(--t-info);
}
.th-btn--amber {
    background: var(--t-bulkbar-cta);
    border-color: var(--t-bulkbar-cta);
    color: #141a26;
    font-weight: 600;
}
.th-btn--amber:hover {
    background: #f0cd85;
    border-color: #f0cd85;
    color: #141a26;
}
/* Quiet red text action ("Delete job…", "Remove operation") */
.th-link-danger {
    font-family: var(--font-sans);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--t-danger);
    opacity: 0.75;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    text-decoration: none;
}
.th-link-danger:hover {
    opacity: 1;
    color: var(--t-danger);
}

/* ---------------------------------------------------------------- */
/* Section header — numbered mono eyebrow with amber dot + hairline  */
/* <div class="th-section-head"><span class="th-section-dot"></span> */
/*   <span class="th-section-label">01 · JOB INFO</span>             */
/*   <span class="th-section-rule"></span> [actions]</div>           */
/* ---------------------------------------------------------------- */
.th-section-head {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 16px;
}
.th-section-dot {
    width: 6px;
    height: 6px;
    border-radius: 2px;
    background: var(--t-warn);
    flex: none;
}
.th-section-label {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-base-500);
    white-space: nowrap;
}
.th-section-rule {
    flex: 1;
    height: 1px;
    background: var(--t-border-hairline);
}

/* ---------------------------------------------------------------- */
/* Key-value pairs — read-only values render as plain text           */
/* ---------------------------------------------------------------- */
.th-kv-label {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-base-400);
    margin-bottom: 5px;
}
.th-kv-value {
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    color: var(--t-ink);
}
.th-kv-value--mono {
    font-family: var(--font-mono);
    font-weight: 600;
}
.th-kv-value--muted {
    font-weight: 400;
    color: var(--color-base-500);
}
.th-kv-value a,
a.th-kv-link {
    color: var(--t-primary);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--t-primary) 30%, transparent);
    text-underline-offset: 3px;
}
.dark .th-kv-value a,
.dark a.th-kv-link {
    color: var(--t-info);
}

/* ---------------------------------------------------------------- */
/* Cards & stat cards                                                */
/* ---------------------------------------------------------------- */
.th-card {
    background: var(--t-surface);
    border: 1px solid var(--t-border-hairline);
    border-radius: 9px;
}
.th-card--pad {
    padding: 18px 20px;
}
.th-stat-card {
    background: var(--t-surface);
    border: 1px solid var(--t-border-hairline);
    border-left: 3px solid var(--t-primary);
    border-radius: 8px;
    padding: 14px 16px;
    display: block;
    color: inherit;
    text-decoration: none;
}
.th-stat-card--amber {
    border-left-color: var(--t-warn);
}
.th-stat-card--green {
    border-left-color: var(--t-success);
}
.th-stat-card--red {
    border-left-color: var(--t-danger);
}
.th-stat-card--grey {
    border-left-color: var(--t-disabled);
}
a.th-stat-card {
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
a.th-stat-card:hover {
    box-shadow: 0 2px 8px rgba(31, 44, 72, 0.1);
}
.th-stat-value {
    font-family: var(--font-sans);
    font-size: 20px;
    font-weight: 600;
    color: var(--t-ink);
    font-variant-numeric: tabular-nums;
}
.th-stat-value .th-stat-dim {
    font-size: 13px;
    font-weight: 400;
    color: var(--color-base-400);
}
.th-stat-label {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-base-400);
    margin-top: 4px;
}
/* £0.00 and other zero values render faint */
.th-faint {
    color: var(--t-disabled) !important;
}

/* ---------------------------------------------------------------- */
/* Compact inline-form fields (32px) + focus ring                    */
/* Scope: add .th-form to the container.                             */
/* ---------------------------------------------------------------- */
.th-form input[type="text"],
.th-form input[type="number"],
.th-form input[type="date"],
.th-form input:not([type]),
.th-form select,
.th-input,
select.th-input {
    width: 100%;
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--t-border-bright);
    border-radius: 6px;
    background-color: var(--t-surface);
    font-family: var(--font-sans);
    font-size: 12.5px;
    color: var(--t-ink);
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.th-form select,
select.th-input {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 26px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="5"><path d="M0 0l4 5 4-5z" fill="%2396A0B4"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
}
.th-form input:focus,
.th-form select:focus,
.th-input:focus {
    outline: none;
    border-color: var(--t-primary);
    box-shadow: 0 0 0 3px var(--t-focus-ring);
}
.th-form input.th-mono,
.th-input.th-mono {
    font-family: var(--font-mono);
}
.th-form ::placeholder {
    color: var(--t-disabled);
}
.th-field-label {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 600;
    color: var(--color-base-500);
    margin-bottom: 5px;
    display: block;
}
.th-field-label .th-req {
    color: var(--t-warn);
}

/* ---------------------------------------------------------------- */
/* Computed box — shared tinted-background container for anything    */
/* system-derived: linked-record rows, derived-value strips. Combine  */
/* with a content class (.th-linked-inline, .th-stat-strip) for the   */
/* internal layout — this class only supplies the box chrome.        */
/* ---------------------------------------------------------------- */
.th-computed-box {
    width: 100%;
    background: var(--t-info-tint);
    border: 1px solid var(--t-info-tint-border);
    border-radius: 8px;
    padding: 12px 14px;
}

/* ---------------------------------------------------------------- */
/* Derived-value stat strip — flex-wrap row of mono k/v pairs.        */
/* Pair with .th-computed-box for the tinted background.             */
/* ---------------------------------------------------------------- */
.th-stat-strip {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.th-stat-strip .th-stat-k {
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-base-400);
}
.th-stat-strip .th-stat-v {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--t-ink);
}
.th-stat-strip .th-stat-v--warn {
    color: var(--t-warn);
}
/* Group labels + trailing cue inside a two-group computed strip (planned vs   */
/* actual / received). Shared by the Job Operations and Job Materials inlines   */
/* (#133) — kept here rather than a per-inline stylesheet so both tabs match.   */
.th-stat-strip .th-stat-group-label {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-base-400);
}
.th-stat-strip .th-stat-group-label--actual {
    color: var(--t-warn);
}
/* Muted cue while a strip has no actuals yet (e.g. "Actuals appear once        */
/* material is issued", "Receipts appear once a PO is raised").                 */
.th-stat-strip .th-stat-hint {
    margin-left: auto;
    font-size: 11px;
    color: var(--color-base-400);
}

/* ---------------------------------------------------------------- */
/* Computed mini-tiles — a row of blue, tinted cards for system-     */
/* derived values (cost snapshots, planned vs actual). Generalised   */
/* from the Job change form so any change form can reuse them; the    */
/* Job form keeps its own page-scoped copy (identical look).          */
/* ---------------------------------------------------------------- */
.th-computed-tiles {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: stretch;
}
.th-computed-tile {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 108px;
    padding: 8px 12px;
    border: 1px solid var(--t-info-tint-border);
    border-radius: 8px;
    background: var(--t-info-tint);
}
.th-computed-tile .th-stat-k {
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-base-400);
}
.th-computed-tile .th-stat-v {
    font-size: 14px;
    font-weight: 600;
    color: var(--t-primary-text, var(--color-base-700));
    line-height: 1.1;
}
.dark .th-computed-tile .th-stat-v {
    color: var(--color-base-200);
}

/* ---------------------------------------------------------------- */
/* Underline tabs (page tabs and list queue tabs)                    */
/* ---------------------------------------------------------------- */
.th-tabs {
    display: flex;
    gap: 26px;
    overflow-x: auto;
}
.th-tab {
    padding: 0 2px 12px;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-base-500);
    cursor: pointer;
    white-space: nowrap;
    border: none;
    background: none;
    box-shadow: inset 0 -2px 0 transparent;
    text-decoration: none;
    transition: color 0.12s ease, box-shadow 0.12s ease;
}
.th-tab:hover {
    color: var(--t-ink);
}
.th-tab.is-active {
    color: var(--t-ink);
    font-weight: 600;
    box-shadow: inset 0 -2px 0 var(--t-primary);
}
.dark .th-tab.is-active {
    box-shadow: inset 0 -2px 0 var(--t-info);
}
/* Unfold tab bar vendored override (templates/unfold/helpers/tab_items.html) */
ul.th-tabs-bar {
    display: flex;
    gap: 26px;
    list-style: none;
    margin: 0;
    padding: 0;
    border: none;
}
ul.th-tabs-bar li {
    border: none;
}
ul.th-tabs-bar .th-tab {
    display: block;
    padding: 8px 2px 12px;
}

.th-tab-count {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    color: var(--color-base-400);
    margin-left: 4px;
}
.th-tab.is-active .th-tab-count {
    color: var(--t-warn-ink);
    background: var(--t-warn-tint);
    border: 1px solid var(--t-warn-tint-border);
    border-radius: 4px;
    padding: 1px 5px;
}

/* ---------------------------------------------------------------- */
/* Lifecycle stepper                                                 */
/* ---------------------------------------------------------------- */
.th-stepper {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 8px;
}
.th-step {
    display: flex;
    align-items: center;
}
.th-step-node {
    display: flex;
    align-items: center;
    gap: 7px;
}
.th-step-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 600;
    flex: none;
    border: 1px solid var(--t-border-bright);
    background: var(--t-surface);
    color: var(--t-disabled);
}
.th-step--done .th-step-dot {
    background: var(--t-primary);
    border-color: var(--t-primary);
    color: #fff;
}
.th-step--current .th-step-dot {
    background: var(--t-warn-tint);
    border-color: var(--t-warn);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--t-warn) 18%, transparent);
    color: var(--t-warn-ink);
}
.th-step-label {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 500;
    color: var(--color-base-400);
    white-space: nowrap;
}
.th-step--done .th-step-label {
    color: var(--color-base-500);
}
.th-step--current .th-step-label {
    color: var(--t-ink);
    font-weight: 600;
}
.th-step-rule {
    width: 34px;
    height: 1px;
    background: var(--t-border-bright);
    margin: 0 12px;
}
.th-readiness-wrap {
    margin-left: auto;
    position: relative;
    display: inline-flex;
}
.th-readiness {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    color: var(--color-base-400);
    white-space: nowrap;
    /* Rendered as a <button> for keyboard/hover tooltip access; strip the */
    /* native chrome so it reads as the plain badge it replaced.           */
    background: none;
    border: none;
    padding: 2px 3px;
    margin: -2px -3px;
    cursor: help;
}
.th-readiness:focus-visible {
    outline: 2px solid var(--t-info);
    outline-offset: 2px;
    border-radius: 4px;
}
.th-readiness b {
    color: var(--t-warn);
    font-weight: 600;
}
.th-readiness b.th-readiness--ready {
    color: var(--t-success);
}

/* Readiness tooltip: the N/5 score broken into its five Factory Complete    */
/* gates, each with the live figure against its threshold.                   */
.th-readiness-tip {
    position: absolute;
    z-index: 40;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 268px;
    background: var(--t-surface);
    border: 1px solid var(--t-border-hairline);
    border-radius: 9px;
    box-shadow: 0 10px 32px rgba(31, 44, 72, 0.16);
    padding: 10px 12px;
    text-align: left;
    white-space: normal;
    cursor: default;
}
.dark .th-readiness-tip {
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.45);
}
.th-readiness-tip-head {
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--color-base-400);
    margin-bottom: 8px;
}
.th-readiness-tip-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.th-readiness-tip-row {
    display: grid;
    grid-template-columns: 14px auto 1fr;
    align-items: baseline;
    gap: 8px;
    font-family: var(--font-sans);
    font-size: 12px;
}
.th-readiness-tip-mark {
    font-size: 11px;
    line-height: 1;
    color: var(--t-warn);
}
.th-readiness-tip-row.is-met .th-readiness-tip-mark {
    color: var(--t-success);
}
.th-readiness-tip-label {
    font-weight: 600;
    color: var(--t-ink);
}
.th-readiness-tip-detail {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--color-base-400);
    text-align: right;
    white-space: nowrap;
}
.th-readiness-tip-foot {
    margin-top: 9px;
    padding-top: 8px;
    border-top: 1px solid var(--t-border-hairline);
    font-family: var(--font-sans);
    font-size: 11px;
    color: var(--color-base-400);
}

/* Readiness squares (13px) */
.th-readiness-squares {
    display: flex;
    gap: 3px;
}
.th-readiness-square {
    width: 13px;
    height: 13px;
    border-radius: 3px;
    border: 1px solid var(--t-border-bright);
    background: var(--color-base-100);
}
.dark .th-readiness-square {
    background: var(--color-base-800);
}
.th-readiness-square.is-met {
    background: var(--t-success);
    border-color: var(--t-success);
}

/* ---------------------------------------------------------------- */
/* Popover menu (Lifecycle ▾ / Select action ▾)                      */
/* ---------------------------------------------------------------- */
.th-menu {
    position: absolute;
    z-index: 40;
    min-width: 236px;
    background: var(--t-surface);
    border: 1px solid var(--t-border-hairline);
    border-radius: 9px;
    box-shadow: 0 10px 32px rgba(31, 44, 72, 0.16);
    padding: 6px;
    display: flex;
    flex-direction: column;
}
.dark .th-menu {
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.45);
}
.th-menu-heading {
    padding: 7px 10px 5px;
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--color-base-400);
}
.th-menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 6px;
    font-family: var(--font-sans);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--t-ink);
    cursor: pointer;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    text-decoration: none;
}
.th-menu-item:hover {
    background: var(--color-base-100);
    color: var(--t-ink);
}
.dark .th-menu-item:hover {
    background: var(--color-base-800);
}
.th-menu-item--danger {
    color: var(--t-danger);
}
.th-menu-item--danger:hover {
    color: var(--t-danger);
}
.th-menu-item[disabled],
.th-menu-item.is-disabled {
    color: var(--t-disabled);
    cursor: not-allowed;
    pointer-events: none;
}
.th-menu-hint {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 400;
    color: var(--t-disabled);
    white-space: nowrap;
}

/* Shared modal — theme-token colours so it renders in light + dark (dark-mode.md).
   Used by the purchasing Raise-PO picker and the quotes bulk close-reason
   dialog (bulkbar.js). Toggled by removing the [hidden] attribute. */
.th-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(9, 17, 32, 0.55);
}
.th-modal-overlay[hidden] { display: none; }
.th-modal {
    width: 100%;
    max-width: 520px;
    background: var(--t-surface);
    color: var(--t-ink);
    border: 1px solid var(--t-border-hairline);
    border-radius: 12px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
    overflow: hidden;
}
.th-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--t-border-hairline);
}
.th-modal-title { font-weight: 600; font-size: 15px; color: var(--t-ink); }
.th-modal-close {
    background: none;
    border: 0;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    color: var(--color-base-500);
}
.th-modal-close:hover { color: var(--t-ink); }
.th-modal-body { padding: 18px; }
.th-modal-intro {
    font-size: 12.5px;
    color: var(--color-base-500);
    margin: 0 0 14px;
    line-height: 1.5;
}
.th-modal-label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--t-ink);
    margin-bottom: 6px;
}
.th-modal-req { color: var(--t-danger, #dc2626); }
.th-modal-body select {
    width: 100%;
    height: 38px;
    padding: 0 10px;
    border: 1px solid var(--t-border-hairline);
    border-radius: 7px;
    background: var(--t-surface);
    color: var(--t-ink);
    font-size: 13px;
}
.th-modal-body select.is-invalid { border-color: var(--t-danger, #dc2626); }
.th-modal-error { color: var(--t-danger, #dc2626); font-size: 12px; margin-top: 6px; }
.th-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 18px;
    border-top: 1px solid var(--t-border-hairline);
}
.th-btn--danger {
    background: var(--t-danger);
    border-color: var(--t-danger);
    color: #fff;
}
.th-btn--danger:hover {
    filter: brightness(0.94);
    color: #fff;
}

/* ---------------------------------------------------------------- */
/* Data-list rows (Jobs list, Inventory, queues)                     */
/* ---------------------------------------------------------------- */
.th-list {
    background: var(--t-surface);
    border: 1px solid var(--t-border-hairline);
    border-radius: 9px;
    overflow-x: auto;
}
.th-list table {
    width: 100%;
    border-collapse: collapse;
}
.th-list thead th {
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-base-400);
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--t-border-hairline);
    background: transparent;
    white-space: nowrap;
}
.th-list tbody td {
    padding: 10px 12px;
    font-size: 13px;
    color: var(--t-ink);
    border-bottom: 1px solid var(--t-page);
}
.th-list tbody tr:last-child td {
    border-bottom: none;
}
.th-list tbody tr {
    transition: background-color 0.12s ease;
}
.th-list tbody tr:hover {
    background: var(--t-row-hover);
}
.th-list tbody tr.is-selected {
    background: var(--t-row-selected);
}
.th-mono-cell {
    font-family: var(--font-mono);
    font-size: 12px;
}
.th-num-cell {
    font-family: var(--font-mono);
    font-size: 12px;
    text-align: right;
    color: var(--color-base-500);
}

/* Checkbox — 15px, checked = navy fill + white tick */
.th-check {
    width: 15px;
    height: 15px;
    border-radius: 4px;
    border: 1px solid var(--t-border-bright);
    background: var(--t-surface);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    margin: 0;
}
.th-check:checked {
    background: var(--t-primary);
    border-color: var(--t-primary);
}
.th-check:checked::after {
    content: "";
    position: absolute;
    left: 4.5px;
    top: 1.5px;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
}
.th-check:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--t-focus-ring);
}

/* ---------------------------------------------------------------- */
/* Bottom context bar (bulk actions, Django admin convention)        */
/* ---------------------------------------------------------------- */
.th-bulkbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    background: var(--t-bulkbar);
    color: #e6ebf5;
    padding: 10px 36px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 -8px 24px rgba(15, 20, 32, 0.35);
}
.th-bulkbar-count {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #f5d9a0;
    white-space: nowrap;
}
.th-bulkbar-link {
    font-family: var(--font-sans);
    font-size: 12.5px;
    color: #aab6d0;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}
.th-bulkbar-link:hover {
    color: #e6ebf5;
}
.th-bulkbar .th-btn {
    background: transparent;
    border-color: #39445c;
    color: #e6ebf5;
}
.th-bulkbar .th-btn:hover {
    border-color: #66718b;
    color: #fff;
}
.th-bulkbar-eligibility {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--t-disabled);
    white-space: nowrap;
}

/* ---------------------------------------------------------------- */
/* Bottom context bar — Unfold's fixed actions dock, restyled ink    */
/* (templates/unfold/helpers/change_list_actions.html adds           */
/* .th-bulkbar-dock; Django's actions form lives inside unchanged).  */
/* ---------------------------------------------------------------- */
.th-bulkbar-dock {
    background: var(--t-bulkbar);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 -8px 24px rgba(15, 20, 32, 0.35);
    color: #e6ebf5;
}
/* Neutralise Unfold's blue (bg-primary-600) actions wrapper so the plain
   action bar matches the ink-dark bulkbar chrome on non-bulkbar changelists.
   Harmless on bulkbar lists (Jobs/Quotes) where #changelist-actions is hidden. */
.th-bulkbar-dock .bg-primary-600 {
    background-color: transparent !important;
    box-shadow: none !important;
}
.th-bulkbar-dock select {
    height: 34px;
    padding: 0 26px 0 13px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 7px;
    background-color: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-family: var(--font-sans);
    font-size: 12.5px;
    font-weight: 500;
}
.th-bulkbar-dock select option {
    color: var(--t-ink);
    background: var(--t-surface);
}
.th-bulkbar-dock .action-counter {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #f5d9a0;
    white-space: nowrap;
}
.th-bulkbar-dock button[name="index"] {
    height: 34px;
    padding: 0 16px;
    border-radius: 7px;
    background: var(--t-bulkbar-cta);
    color: #141a26;
    font-family: var(--font-sans);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}
.th-bulkbar-dock .question a,
.th-bulkbar-dock .clear a {
    font-family: var(--font-sans);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.65);
    background: transparent;
    border: none;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.3);
    text-underline-offset: 3px;
    padding: 0;
}
.th-bulkbar-dock .question a:hover,
.th-bulkbar-dock .clear a:hover {
    color: #fff;
    background: transparent;
}

/* Enhanced mode (Jobs list): the native select/run/counter are hidden
   and driven by the custom eligibility menu built in job_bulkbar.js. */
.th-bulkbar-enhanced #changelist-actions {
    display: none;
}
.th-bulkbar-ui {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
}
.th-bulkbar-sep {
    width: 1px;
    height: 16px;
    background: rgba(255, 255, 255, 0.2);
    flex: none;
}
.th-bulkbar-hint {
    font-family: var(--font-sans);
    font-size: 11.5px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.5);
}
.th-bulkbar-menuwrap {
    position: relative;
}
.th-bulkbar-ui .th-btn {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.25);
    color: #fff;
}
.th-bulkbar-ui .th-btn:hover {
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}
.th-bulkbar-ui .th-btn--amber,
.th-bulkbar-ui .th-btn--amber:hover {
    color: #141a26;
}
.th-bulkbar-ui .th-btn--amber {
    background: var(--t-bulkbar-cta);
    border-color: var(--t-bulkbar-cta);
}
.th-bulkbar-ui .th-btn--amber:hover {
    background: #edc873;
    border-color: #edc873;
}
.th-menu--up {
    bottom: 42px;
    left: 0;
    width: 300px;
}
.th-menu-badge {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    border-radius: 4px;
    padding: 1px 6px;
    background: var(--color-base-100);
    color: var(--t-disabled);
    white-space: nowrap;
}
.dark .th-menu-badge {
    background: var(--color-base-800);
}
.th-menu-badge.is-on {
    background: var(--t-warn-tint);
    color: var(--t-warn-ink);
}

/* ---------------------------------------------------------------- */
/* Peek drawer                                                       */
/* ---------------------------------------------------------------- */
@keyframes th-peek-in {
    from {
        transform: translateX(40px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}
@keyframes th-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
.th-scrim {
    position: fixed;
    inset: 0;
    background: rgba(31, 44, 72, 0.28);
    z-index: 60;
    animation: th-fade-in 0.15s ease;
}
.dark .th-scrim {
    background: rgba(8, 11, 18, 0.55);
}
.th-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 460px;
    max-width: 92vw;
    background: var(--t-surface-raised);
    border-left: 1px solid var(--t-border-hairline);
    box-shadow: -16px 0 48px rgba(31, 44, 72, 0.18);
    z-index: 61;
    display: flex;
    flex-direction: column;
    animation: th-peek-in 0.18s ease;
}
.dark .th-drawer {
    box-shadow: -16px 0 48px rgba(0, 0, 0, 0.5);
}
.th-drawer-header {
    flex: none;
    padding: 16px 22px 14px;
    border-bottom: 1px solid var(--t-border-hairline);
    background: var(--t-surface);
}
.th-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 22px 28px;
    display: flex;
    flex-direction: column;
    gap: 26px;
}
.th-drawer-crumb {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--t-disabled);
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}
.th-drawer-crumb:hover {
    color: var(--t-primary);
}
.th-drawer-crumb.is-current {
    color: var(--t-ink);
    cursor: default;
}
.th-drawer-iconbtn {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--t-border-hairline);
    border-radius: 6px;
    background: var(--t-surface);
    color: var(--color-base-400);
    cursor: pointer;
    font-size: 11px;
    padding: 0;
}
.th-drawer-iconbtn:hover {
    color: var(--t-ink);
    border-color: var(--t-disabled);
}
.th-linked-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border: 1px solid var(--t-border-hairline);
    border-radius: 7px;
    background: var(--t-surface);
    cursor: pointer;
    transition: border-color 0.12s ease;
}
.th-linked-row:hover {
    border-color: var(--t-disabled);
}
.th-linked-row.is-here {
    background: var(--t-warn-tint);
    border-color: var(--t-warn-tint-border);
    cursor: default;
}
.th-linked-tag {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--color-base-400);
    border: 1px solid var(--t-border-hairline);
    border-radius: 4px;
    padding: 2px 5px;
    background: var(--t-surface);
    white-space: nowrap;
}

/* ---------------------------------------------------------------- */
/* Sticky page header / footer bars (change form)                    */
/* ---------------------------------------------------------------- */
.th-pagehead {
    background: color-mix(in srgb, var(--t-page) 88%, transparent);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--t-border-hairline);
}
.th-pagefoot {
    background: color-mix(in srgb, var(--t-surface) 92%, transparent);
    backdrop-filter: blur(6px);
    border-top: 1px solid var(--t-border-hairline);
}
.th-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-base-400);
}
.th-breadcrumb a {
    color: var(--color-base-400);
    text-decoration: none;
}
.th-breadcrumb a:hover {
    color: var(--color-base-500);
}
.th-breadcrumb .th-breadcrumb-dot {
    color: var(--t-warn);
}
.th-breadcrumb .is-current {
    color: var(--color-base-500);
}
.th-page-title {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 22px;
    line-height: 1.2;
    font-weight: 600;
    color: var(--t-ink);
}
.th-page-title .th-title-sep {
    color: var(--color-base-400);
    font-weight: 400;
}

/* Mono micro-note (UNSAVED CHANGES · 0, footer scope lines) */
.th-micro {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 400;
    color: var(--t-disabled);
    letter-spacing: 0.04em;
}

/* ---------------------------------------------------------------- */
/* Toolbar search                                                    */
/* ---------------------------------------------------------------- */
.th-search {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 12px;
    border: 1px solid var(--t-border-hairline);
    border-radius: 7px;
    background: var(--t-surface);
    color: var(--color-base-400);
    min-width: 220px;
}
.th-search input {
    border: none;
    background: transparent;
    font-family: var(--font-sans);
    font-size: 12.5px;
    color: var(--t-ink);
    outline: none;
    width: 100%;
    padding: 0;
    height: auto;
}
.th-search:focus-within {
    border-color: var(--t-primary);
    box-shadow: 0 0 0 3px var(--t-focus-ring);
}

/* ---------------------------------------------------------------- */
/* Segmented control (Month|Week, Inventory|Buy-direct)              */
/* ---------------------------------------------------------------- */
.th-segment {
    display: inline-flex;
    height: 32px;
    border: 1px solid var(--t-border-bright);
    border-radius: 6px;
    overflow: hidden;
}
.th-segment-opt {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    background: var(--t-surface);
    color: var(--color-base-400);
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    white-space: nowrap;
    /* the control is used with <button> (client toggles) and <a> (toggles that
       persist in the querystring) — keep both looking identical */
    text-decoration: none;
}
.th-segment-opt + .th-segment-opt {
    border-left: 1px solid var(--t-border-bright);
}
.th-segment-opt:hover {
    color: var(--color-base-500);
}
.th-segment-opt.is-active {
    background: var(--t-info-tint);
    color: var(--t-primary);
    font-weight: 600;
}
.dark .th-segment-opt.is-active {
    color: var(--t-info);
}
.th-segment--ink .th-segment-opt.is-active {
    background: var(--t-ink);
    color: var(--t-page);
}

/* ---------------------------------------------------------------- */
/* Empty state                                                       */
/* ---------------------------------------------------------------- */
.th-empty {
    border: 1px dashed var(--t-border-bright);
    border-radius: 9px;
    padding: 48px;
    text-align: center;
    background: color-mix(in srgb, var(--t-surface) 50%, transparent);
}
.th-empty-title {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-base-400);
    margin-bottom: 8px;
}
.th-empty-sub {
    font-family: var(--font-sans);
    font-size: 13px;
    color: var(--color-base-500);
}

/* ---------------------------------------------------------------- */
/* Collapsed stacked-inline header — one consistent style across     */
/* every admin form (#133/#201). Each change-form CSS used to        */
/* duplicate this polish, so any form that missed it (e.g. Quotes)   */
/* looked different from Jobs/Materials. Centralised here; the        */
/* per-form rules are more specific and still win where they exist.  */
/* ---------------------------------------------------------------- */
.inline-stacked > h3 {
    padding: 11px 16px;
    font-size: 13.5px;
    transition: background-color 0.12s ease;
}
.inline-stacked > h3:hover {
    background: var(--t-row-hover);
}
.inline-stacked > h3 .material-symbols-outlined {
    color: var(--t-disabled);
    font-size: 18px;
}
.inline-stacked > h3 .delete label {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--t-disabled);
}

/* "Add another …" inline control — one consistent dashed pill button across
   every admin form (#133/#201). Previously duplicated per form, so forms that
   missed it (e.g. Quotes) showed a plain text link. Per-form rules still win. */
.inline-group .add-row {
    border: none;
    padding: 10px 16px;
    text-align: right;
}
.inline-group .add-row a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 12px;
    border: 1px dashed var(--t-disabled);
    border-radius: 7px;
    background: transparent;
    color: inherit;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
}
.inline-group .add-row a:hover {
    border-color: var(--t-primary);
    color: var(--t-primary);
}
.dark .inline-group .add-row a:hover {
    border-color: var(--t-info);
    color: var(--t-info);
}

/* Autocomplete (select2) fields inside stacked inlines resolve to the hidden
   <select>'s width (~114px) rather than filling their cell like the plain
   selects — because select2 initialises while the inline/tab is hidden. Force
   full width so they line up with every other field (#133/#201). */
.inline-related .select2-container {
    width: 100% !important;
}

/* ============================================================= */
/* Dark-mode legibility sweep for change-form muted text (#133)   */
/* ============================================================= */
/* Every per-form change_form.css colours its section eyebrows and field
   labels with the fixed --color-base-500 (rgb 92,104,128). That mid-slate
   reads fine on the light theme but is too dark against the dark panels, so
   the "01 SECTION" eyebrows and field labels were hard to read on every form
   (Sales Orders, Shipments, master data, …). Rather than patch 30+ files one
   by one — and miss any form added later — lift them here, form-wide, to the
   legible base-300 in dark mode only. Light mode keeps the per-form base-500.
   !important is needed because the per-form rules are scoped by the form's
   #id and would otherwise win. The section dot, counter and hairline are set
   by separate rules and are untouched; the required-field asterisk keeps its
   warn colour (it is a child span / ::after, not the label element). */
.dark .change-form .px-4 > fieldset.module > h2,
.dark .change-form fieldset.module > div > h2 {
    color: var(--color-base-300) !important;
}
.dark .change-form fieldset label {
    color: var(--color-base-300) !important;
}