/* ================================================================ */
/* 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);
}

/* ---------------------------------------------------------------- */
/* 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;
}
.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;
}
.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);
}