/* ============================================================
 * V5 RAC — Layer 2 worklist paint
 *
 * Repaints the shared worklist primitives (.ds-*, .kpi-card,
 * .empty-state, .badge, .page-header) AND every per-module
 * namespaced primitive (.veh-*, .cust-*, .dep-*, .acc-*,
 * .users-*, .apr-*, .bkg-*) to the V5 dark canvas when those
 * components render inside the V5 shell (`.app-main`).
 *
 * Why `.app-main`-scoped instead of editing per-template inline
 * <style> blocks: tests pin specific class names and DOM
 * structure (`apr-kpi-strip`, `dep-table__row--warn`, etc.). A
 * single scoped override lets us flip the colour palette without
 * renaming any class or touching any test.
 *
 * Notes:
 *   - Dashboard (`dsh-*`, `cmd-*`) and Action Center (`acv5-*`)
 *     have their own V5 inline styles; this file deliberately
 *     does NOT touch those namespaces.
 *   - Login / unauthenticated pages render outside `.app-main`,
 *     so this file has zero effect there.
 *   - Loaded AFTER ds.css and v5-shell.css so it can override
 *     both foundation tokens and any shell-level paint.
 * ============================================================ */

/* ============================================================
 * 1. Page header  (partials/page_header.html)
 * ============================================================ */
.app-main .page-header {
    background: linear-gradient(180deg, var(--v5-void-3), var(--v5-void-2));
    border: 1px solid var(--v5-line-strong);
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 18px;
    color: var(--v5-on-void-2);
}
.app-main .page-header__title,
.app-main .page-header h1 {
    color: var(--v5-on-void-2);
    line-height: 1.18;
}
.app-main .page-header__subtitle,
.app-main .page-header__sub,
.app-main .page-header p {
    color: var(--v5-on-void-mute);
    font-size: 13.5px;
    line-height: 1.5;
}
.app-main .page-header__breadcrumb,
.app-main .page-header__crumbs {
    color: var(--v5-on-void-mute);
}
.app-main .page-header__crumbs a { color: var(--v5-on-void-mute); }
.app-main .page-header__crumbs a:hover { color: var(--v5-rac-orange); }

/* ============================================================
 * 2. Filter bars  (ds + per-module variants)
 * ============================================================ */
.app-main .ds-filter-bar,
.app-main .veh-filter-bar,
.app-main .cust-filter-bar,
.app-main .dep-filter-bar,
.app-main .acc-filter-bar,
.app-main .users-filter-bar,
.app-main .apr-filter-bar,
.app-main .bkg-filter-bar {
    background: var(--v5-void-3);
    border: 1px solid var(--v5-line-strong);
    color: var(--v5-on-void);
    padding: 15px;
    gap: 13px;
}
.app-main .ds-filter-bar__label,
.app-main .veh-filter-bar__label,
.app-main .cust-filter-bar__label,
.app-main .dep-filter-bar__label,
.app-main .acc-filter-bar__label,
.app-main .users-filter-bar__label {
    color: var(--v5-on-void-mute);
    font-family: var(--ff-mono);
    letter-spacing: 0.11em;
    text-transform: uppercase;
    font-size: 10.5px;
    font-weight: 650;
    line-height: 1.35;
}
.app-main .ds-filter-bar__input,
.app-main .ds-filter-bar__select,
.app-main .veh-filter-bar__input,
.app-main .cust-filter-bar__input,
.app-main .dep-filter-bar__input,
.app-main .acc-filter-bar__input,
.app-main .users-filter-bar__input,
.app-main .apr-filter-bar__input {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--v5-line);
    color: var(--v5-on-void-2);
    min-height: 36px;
    padding: 8px 11px;
    font-size: 13.5px;
    line-height: 1.35;
}
.app-main .ds-filter-bar__input::placeholder,
.app-main .veh-filter-bar__input::placeholder,
.app-main .cust-filter-bar__input::placeholder,
.app-main .dep-filter-bar__input::placeholder { color: var(--v5-on-void-dim); }
.app-main .ds-filter-bar__input:focus,
.app-main .ds-filter-bar__select:focus,
.app-main .veh-filter-bar__input:focus,
.app-main .cust-filter-bar__input:focus,
.app-main .dep-filter-bar__input:focus,
.app-main .acc-filter-bar__input:focus,
.app-main .users-filter-bar__input:focus {
    border-color: var(--v5-rac-orange);
    outline: none;
    box-shadow: 0 0 0 3px rgba(224, 122, 53, 0.14);
}
.app-main .ds-filter-bar__reset,
.app-main .veh-filter-bar__reset,
.app-main .cust-filter-bar__reset,
.app-main .dep-filter-bar__reset,
.app-main .acc-filter-bar__reset,
.app-main .users-filter-bar__reset {
    color: var(--v5-on-void-mute);
    font-weight: 600;
}
.app-main .ds-filter-bar__reset:hover,
.app-main .veh-filter-bar__reset:hover,
.app-main .cust-filter-bar__reset:hover,
.app-main .dep-filter-bar__reset:hover,
.app-main .acc-filter-bar__reset:hover,
.app-main .users-filter-bar__reset:hover { color: var(--v5-on-void-2); }

/* Status chip rows under the filter bar */
.app-main .veh-filter-bar__status,
.app-main .dep-filter-bar__status,
.app-main .acc-filter-bar__status {
    border-top: 1px solid var(--v5-line);
    padding-top: 9px;
}
.app-main .veh-status-chip,
.app-main .dep-status-chip,
.app-main .acc-chip {
    color: var(--v5-on-void);
    font-size: 12.5px;
    line-height: 1.4;
}
.app-main .veh-status-chip input,
.app-main .dep-status-chip input,
.app-main .acc-chip input { accent-color: var(--v5-rac-orange); }

/* ============================================================
 * 3. Worklist tables  (ds-table + per-module variants)
 * ============================================================ */
.app-main .ds-table-wrap,
.app-main .veh-table-wrap,
.app-main .cust-table-wrap,
.app-main .dep-table-wrap,
.app-main .acc-table-wrap,
.app-main .users-table-wrap {
    background: var(--v5-void-3);
    border: 1px solid var(--v5-line-strong);
    overflow-x: auto;
}
.app-main .ds-table,
.app-main .veh-table,
.app-main .cust-table,
.app-main .dep-table,
.app-main .acc-table,
.app-main .users-table,
.app-main .apr-table {
    color: var(--v5-on-void-2);
    font-size: 13.5px;
    line-height: 1.45;
}
.app-main .ds-table thead th,
.app-main .veh-table thead th,
.app-main .cust-table thead th,
.app-main .dep-table thead th,
.app-main .acc-table thead th,
.app-main .users-table thead th,
.app-main .apr-table thead th {
    background: rgba(0, 0, 0, 0.20);
    color: var(--v5-on-void-mute);
    border-bottom: 1px solid var(--v5-line);
    font-family: var(--ff-mono);
    letter-spacing: 0.11em;
    text-transform: uppercase;
    font-size: 10.75px;
    font-weight: 700;
    line-height: 1.35;
    padding: 11px 14px;
}
.app-main .ds-table tbody td,
.app-main .veh-table tbody td,
.app-main .cust-table tbody td,
.app-main .dep-table tbody td,
.app-main .acc-table tbody td,
.app-main .users-table tbody td,
.app-main .apr-table tbody td {
    border-bottom: 1px solid var(--v5-line-soft);
    color: var(--v5-on-void-2);
    padding: 13px 14px;
    vertical-align: middle;
}
.app-main .ds-table__row:hover,
.app-main .veh-table__row:hover,
.app-main .cust-table__row:hover,
.app-main .dep-table__row:hover,
.app-main .acc-table__row:hover,
.app-main .users-table__row:hover,
.app-main .apr-table__row:hover { background: rgba(255, 255, 255, 0.04); }
.app-main .ds-table__row:hover td { background: transparent; }

.app-main .ds-table__link,
.app-main .veh-table__plate,
.app-main .cust-table__name,
.app-main .users-table__name {
    color: var(--v5-on-void-2);
    font-weight: 650;
}
.app-main .ds-table__link:hover,
.app-main .veh-table__plate:hover,
.app-main .cust-table__name:hover,
.app-main .users-table__name:hover { color: var(--v5-rac-orange); }
.app-main .dep-table__no,
.app-main .dep-table__link {
    color: var(--v5-on-void-2);
    font-weight: 650;
}
.app-main .dep-table__no:hover,
.app-main .dep-table__link:hover {
    color: var(--v5-rac-orange);
}
.app-main .ds-table__muted,
.app-main .veh-table__muted,
.app-main .cust-table__muted,
.app-main .users-table__muted,
.app-main .dep-num,
.app-main .dep-age-cell,
.app-main .acc-table__sub,
.app-main .cust-table__sub,
.app-main .apr-muted { color: var(--v5-on-void-mute); }

.app-main .dep-table tfoot td {
    background: rgba(0, 0, 0, 0.26);
    color: var(--v5-on-void-2);
    border-top: 1px solid var(--v5-line-strong);
    font-size: 13px;
    font-weight: 650;
}

/* Severity row variants (preserve test markers) */
.app-main .dep-table__row--warn {
    background: linear-gradient(180deg, rgba(227, 179, 82, 0.05), transparent);
}
.app-main .cust-table__row--blacklisted {
    background: linear-gradient(180deg, rgba(214, 85, 67, 0.06), transparent);
}
.app-main .acc-table__row--total {
    background: linear-gradient(180deg, rgba(214, 85, 67, 0.06), transparent);
}

/* ============================================================
 * 4. KPI strip + cards  (shared `.kpi-card` primitive)
 * ============================================================ */
.app-main .kpi-card {
    background: linear-gradient(180deg, var(--v5-void-3), var(--v5-void-2));
    border: 1px solid var(--v5-line-strong);
    color: var(--v5-on-void);
}
.app-main .kpi-card:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--v5-rac-orange);
}
.app-main .kpi-card__label {
    color: var(--v5-on-void-mute);
    font-family: var(--ff-mono);
    letter-spacing: 0.18em;
}
.app-main .kpi-card__value { color: var(--v5-on-void-2); }
.app-main .kpi-card__of,
.app-main .kpi-card__sub { color: var(--v5-on-void-mute); }
.app-main .kpi-card--rail-warning { border-left-color: var(--v5-warn); }
.app-main .kpi-card--rail-danger  { border-left-color: var(--v5-crit); }

/* ============================================================
 * 5. Status badge primitive  (shared `.badge` from ds.css)
 *
 * The badge keeps its semantic palette; only the muted/closed
 * variants need adjustment so they read on the dark canvas.
 * ============================================================ */
.app-main .badge--withdrawn,
.app-main .badge--closed,
.app-main .badge--inactive,
.app-main .badge--cancelled,
.app-main .badge--refunded {
    background: rgba(255, 255, 255, 0.03);
    color: var(--v5-on-void-mute);
    border-color: var(--v5-line-strong);
}

.app-main .badge {
    min-height: 22px;
    padding: 3px 8px;
    font-size: 11.5px;
    font-weight: 650;
    line-height: 1.35;
}

/* ============================================================
 * 6. Empty state  (`partials/components/empty_state.html`)
 * ============================================================ */
.app-main .empty-state {
    background: var(--v5-void-3);
    border: 1px dashed var(--v5-line-strong);
    color: var(--v5-on-void);
}
.app-main .empty-state__title { color: var(--v5-on-void-2); }
.app-main .empty-state__message,
.app-main .empty-state__icon { color: var(--v5-on-void-mute); }

/* ============================================================
 * 6b. Deposit detail drawer
 *
 * The ledger template still defines a light-token drawer locally.
 * Keep the markup and HTMX flow intact, but make the overlay match the
 * RAC dark work surface and improve the detail/read log typography.
 * ============================================================ */
.app-main .dep-drawer-scrim {
    background: rgba(3, 5, 10, 0.74);
    backdrop-filter: blur(2px);
}
.app-main .dep-drawer {
    background:
        radial-gradient(720px 420px at 100% 0%, rgba(224, 122, 53, 0.08), transparent 58%),
        linear-gradient(180deg, var(--v5-void-3), var(--v5-void-2));
    border-left: 1px solid var(--v5-line-strong);
    color: var(--v5-on-void);
    box-shadow:
        -28px 0 70px -26px rgba(0, 0, 0, 0.78),
        -1px 0 0 rgba(255, 255, 255, 0.04);
}
.app-main .dep-drawer__head {
    padding: 16px 20px;
    border-bottom: 1px solid var(--v5-line);
    background: rgba(8, 13, 20, 0.42);
}
.app-main .dep-drawer__title {
    color: var(--v5-on-void-2);
    font-size: 18px;
    line-height: 1.25;
    font-weight: 700;
}
.app-main .dep-drawer__close {
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--v5-line);
    background: rgba(255, 255, 255, 0.035);
    color: var(--v5-on-void-mute);
}
.app-main .dep-drawer__close:hover {
    background: var(--v5-rac-tint);
    border-color: rgba(224, 122, 53, 0.42);
    color: var(--v5-rac-orange);
}
.app-main .dep-drawer__body {
    padding: 20px;
    background: transparent;
}

/* ============================================================
 * 7. Pagers  (`.ds-pager`, per-module pager fallbacks)
 * ============================================================ */
.app-main .ds-pager,
.app-main .veh-pager,
.app-main .cust-pager,
.app-main .dep-pager,
.app-main .acc-pager,
.app-main .users-pager,
.app-main .apr-pager { color: var(--v5-on-void-mute); }
.app-main .ds-pager__count,
.app-main .veh-pager__count,
.app-main .cust-pager__count,
.app-main .dep-pager__count,
.app-main .acc-pager__count,
.app-main .users-pager__count { color: var(--v5-on-void-mute); }

/* ============================================================
 * 8. Approval inbox extras  (KPI strip + bulk bar + tabs + drawer)
 * ============================================================ */
.app-main .apr-kpi-strip { color: var(--v5-on-void); }
.app-main .apr-bulk-bar {
    background: linear-gradient(180deg, var(--v5-void-3), var(--v5-void-2));
    border: 1px solid var(--v5-line-strong);
    color: var(--v5-on-void-2);
}
.app-main .apr-bulk-bar__count { color: var(--v5-on-void-mute); }
.app-main .apr-tabs { border-bottom-color: var(--v5-line); }
.app-main .apr-tabs__tab {
    color: var(--v5-on-void-mute);
    font-family: var(--ff-mono);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.app-main .apr-tabs__tab:hover { color: var(--v5-on-void-2); }
.app-main .apr-tabs__tab.is-active {
    color: var(--v5-rac-orange);
    border-bottom-color: var(--v5-rac-orange);
}
.app-main .apr-drawer-body {
    background: var(--v5-void-3);
    border: 1px solid var(--v5-line-strong);
    color: var(--v5-on-void);
}

/* ============================================================
 * 9. Vehicles list extras  (fleet strip)
 * ============================================================ */
.app-main .fleet-strip,
.app-main .veh-fleet-strip {
    background: linear-gradient(180deg, var(--v5-void-3), var(--v5-void-2));
    border: 1px solid var(--v5-line-strong);
    color: var(--v5-on-void);
}
.app-main .veh-expiry-dot { background: var(--v5-crit); }

/* ============================================================
 * 10. Job Cards Kanban  (V5 namespace — was raw Tailwind)
 * ============================================================ */
.app-main .job5-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--v5-line);
}
.app-main .job5-eyebrow {
    font-family: var(--ff-mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--v5-rac-orange);
    margin-bottom: 6px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.app-main .job5-eyebrow::before {
    content: "";
    width: 18px; height: 1px;
    background: var(--v5-rac-orange);
}
.app-main .job5-title {
    font-size: 24px;
    font-weight: 500;
    color: var(--v5-on-void-2);
    margin: 0;
    letter-spacing: 0;
}
.app-main .job5-sub {
    color: var(--v5-on-void-mute);
    font-size: 12.5px;
    margin: 4px 0 0;
    font-family: var(--ff-mono);
    letter-spacing: 0.04em;
}
.app-main .job5-filter {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    flex-wrap: wrap;
}
.app-main .job5-field { display: flex; flex-direction: column; gap: 4px; }
.app-main .job5-field-label {
    font-family: var(--ff-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--v5-on-void-mute);
}
.app-main .job5-input {
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--v5-line);
    border-radius: 6px;
    color: var(--v5-on-void-2);
    font-family: var(--ff-ui);
    font-size: 12.5px;
    min-width: 180px;
}
.app-main .job5-input:focus { border-color: var(--v5-rac-orange); outline: none; }
.app-main .job5-cancel {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--v5-on-void-mute);
    font-family: var(--ff-mono);
    letter-spacing: 0.04em;
}
.app-main .job5-cancel input { accent-color: var(--v5-rac-orange); }

.app-main .job5-board {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}
@media (max-width: 1100px) { .app-main .job5-board { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .app-main .job5-board { grid-template-columns: 1fr; } }

.app-main .job5-col {
    background: linear-gradient(180deg, var(--v5-void-3), var(--v5-void-2));
    border: 1px solid var(--v5-line-strong);
    border-radius: 11px;
    padding: 10px;
    min-height: 120px;
}
.app-main .job5-col__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 6px 8px;
    border-bottom: 1px solid var(--v5-line);
    font-family: var(--ff-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--v5-on-void-mute);
    font-weight: 600;
    margin-bottom: 8px;
}
.app-main .job5-col__count {
    background: rgba(0, 0, 0, 0.25);
    padding: 1px 6px;
    border-radius: 8px;
    color: var(--v5-on-void-2);
    font-size: 10px;
}
.app-main .job5-card {
    display: block;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--v5-line);
    border-radius: 8px;
    text-decoration: none;
    color: var(--v5-on-void);
    margin-bottom: 6px;
    transition: border-color var(--t-base), background var(--t-base);
}
.app-main .job5-card:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--v5-rac-orange);
}
.app-main .job5-card__no {
    font-family: var(--ff-mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--v5-on-void-2);
    letter-spacing: 0.02em;
}
.app-main .job5-card__plate {
    font-family: var(--ff-mono);
    font-size: 11px;
    color: var(--v5-on-void);
    margin-top: 2px;
}
.app-main .job5-card__cost {
    font-family: var(--ff-mono);
    font-size: 11px;
    color: var(--v5-on-void-mute);
    margin-top: 2px;
}
.app-main .job5-card__warn {
    margin-top: 4px;
    font-family: var(--ff-mono);
    font-size: 10px;
    color: var(--v5-warn);
    letter-spacing: 0.04em;
}
.app-main .job5-card__date {
    margin-top: 4px;
    font-family: var(--ff-mono);
    font-size: 9.5px;
    color: var(--v5-on-void-dim);
    letter-spacing: 0.06em;
}
.app-main .job5-col__empty {
    padding: 8px 6px;
    font-family: var(--ff-mono);
    font-size: 10px;
    color: var(--v5-on-void-dim);
    letter-spacing: 0.06em;
}

.app-main .job5-cancelled {
    margin-top: 14px;
    background: var(--v5-void-3);
    border: 1px solid var(--v5-line-strong);
    border-radius: 11px;
    padding: 12px 14px;
}
.app-main .job5-cancelled__title {
    font-family: var(--ff-mono);
    font-size: 10px;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: var(--v5-on-void-mute);
    margin: 0 0 6px;
}
.app-main .job5-cancelled__list { list-style: none; padding: 0; margin: 0; font-size: 12.5px; color: var(--v5-on-void); }
.app-main .job5-cancelled__list li { padding: 4px 0; border-bottom: 1px solid var(--v5-line-soft); }
.app-main .job5-cancelled__list li:last-child { border-bottom: 0; }
.app-main .job5-cancelled__list a { color: var(--v5-on-void-2); text-decoration: none; }
.app-main .job5-cancelled__list a:hover { color: var(--v5-rac-orange); text-decoration: underline; }

/* ============================================================
 * 11. Damages list  (V5 namespace — was raw Tailwind)
 * ============================================================ */
.app-main .dmg5-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--v5-line);
}
.app-main .dmg5-title {
    font-size: 24px;
    font-weight: 500;
    color: var(--v5-on-void-2);
    margin: 0;
    letter-spacing: 0;
}
.app-main .dmg5-sub {
    color: var(--v5-on-void-mute);
    font-size: 13.5px;
    margin: 4px 0 0;
    font-family: var(--ff-mono);
    letter-spacing: 0;
}
.app-main .dmg5-filter {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    align-items: end;
    background: var(--v5-void-3);
    border: 1px solid var(--v5-line-strong);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 14px;
}
@media (max-width: 900px) { .app-main .dmg5-filter { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .app-main .dmg5-filter { grid-template-columns: 1fr; } }
.app-main .dmg5-field { display: flex; flex-direction: column; gap: 4px; }
.app-main .dmg5-field-label {
    font-family: var(--ff-mono);
    font-size: 10.75px;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--v5-on-void-mute);
    font-weight: 650;
}
.app-main .dmg5-input {
    padding: 8px 11px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--v5-line);
    border-radius: 6px;
    color: var(--v5-on-void-2);
    font-family: var(--ff-ui);
    font-size: 13.5px;
    min-height: 36px;
}
.app-main .dmg5-input:focus { border-color: var(--v5-rac-orange); outline: none; }

.app-main .dmg5-status-row {
    grid-column: 1 / -1;
    border-top: 1px solid var(--v5-line);
    padding-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}
.app-main .dmg5-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--ff-mono);
    font-size: 12px;
    color: var(--v5-on-void);
    letter-spacing: 0;
}
.app-main .dmg5-chip input { accent-color: var(--v5-rac-orange); }

.app-main .dmg5-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    align-items: center;
}
.app-main .dmg5-reset {
    font-family: var(--ff-mono);
    font-size: 11px;
    color: var(--v5-on-void-mute);
    letter-spacing: 0.06em;
}
.app-main .dmg5-reset:hover { color: var(--v5-on-void-2); }

.app-main .dmg5-table-wrap {
    background: var(--v5-void-3);
    border: 1px solid var(--v5-line-strong);
    border-radius: 11px;
    overflow: hidden;
}
.app-main .dmg5-table { width: 100%; border-collapse: collapse; font-size: 13.5px; line-height: 1.45; color: var(--v5-on-void-2); }
.app-main .dmg5-table thead th {
    background: rgba(0, 0, 0, 0.20);
    color: var(--v5-on-void-mute);
    font-family: var(--ff-mono);
    font-size: 10.75px;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--v5-line);
    font-weight: 700;
}
.app-main .dmg5-table thead th.num { text-align: right; }
.app-main .dmg5-table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--v5-line-soft);
    vertical-align: middle;
}
.app-main .dmg5-table tbody tr:last-child td { border-bottom: 0; }
.app-main .dmg5-table tbody tr:hover { background: rgba(255, 255, 255, 0.04); }
.app-main .dmg5-table td.num { text-align: right; font-family: var(--ff-mono); }
.app-main .dmg5-table td.mono { font-family: var(--ff-mono); font-size: 12px; }
.app-main .dmg5-table a { color: var(--v5-on-void-2); font-weight: 650; text-decoration: none; }
.app-main .dmg5-table a:hover { color: var(--v5-rac-orange); }
.app-main .dmg5-table__muted { color: var(--v5-on-void-mute); }

/* Damage status pills */
.app-main .dmg5-pill {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 4px;
    font-family: var(--ff-mono);
    font-size: 10px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    border: 1px solid;
    white-space: nowrap;
}
.app-main .dmg5-pill--open    { color: var(--v5-warn); border-color: rgba(227, 179, 82, 0.40); background: rgba(227, 179, 82, 0.08); }
.app-main .dmg5-pill--charged { color: var(--v5-info); border-color: rgba(124, 177, 224, 0.40); background: rgba(124, 177, 224, 0.08); }
.app-main .dmg5-pill--waived  { color: var(--v5-on-void-mute); border-color: var(--v5-line-strong); background: rgba(255, 255, 255, 0.025); }
.app-main .dmg5-pill--closed  { color: var(--v5-ok); border-color: rgba(108, 191, 122, 0.40); background: rgba(108, 191, 122, 0.08); }

.app-main .dmg5-empty {
    padding: 32px 20px;
    text-align: center;
    color: var(--v5-on-void-mute);
    font-size: 13px;
}

.app-main .dmg5-pager {
    margin-top: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--v5-on-void-mute);
    font-size: 12px;
}
.app-main .dmg5-pager__nav { display: flex; gap: 8px; }
.app-main .dmg5-pager__nav a {
    padding: 4px 10px;
    border: 1px solid var(--v5-line-strong);
    border-radius: 6px;
    color: var(--v5-on-void);
    text-decoration: none;
    font-family: var(--ff-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
}
.app-main .dmg5-pager__nav a:hover {
    border-color: var(--v5-rac-orange);
    color: var(--v5-rac-orange);
}

/* ============================================================
 * 12. Settings hub tiles  (V5 namespace — was raw Tailwind)
 * ============================================================ */
.app-main .set5-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
@media (max-width: 1100px) { .app-main .set5-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .app-main .set5-grid { grid-template-columns: 1fr; } }

.app-main .set5-tile {
    display: block;
    background: linear-gradient(180deg, var(--v5-void-3), var(--v5-void-2));
    border: 1px solid var(--v5-line-strong);
    border-radius: 11px;
    padding: 16px 18px;
    text-decoration: none;
    color: var(--v5-on-void);
    transition: border-color var(--t-base), background var(--t-base), transform var(--t-base);
    position: relative;
}
.app-main .set5-tile:hover {
    border-color: var(--v5-rac-orange);
    background: rgba(255, 255, 255, 0.035);
    transform: translateY(-1px);
}
.app-main .set5-tile__name {
    font-size: 14px;
    font-weight: 500;
    color: var(--v5-on-void-2);
    margin-bottom: 4px;
    letter-spacing: 0;
}
.app-main .set5-tile__desc {
    font-size: 12.5px;
    color: var(--v5-on-void-mute);
    line-height: 1.45;
    margin: 0;
}
.app-main .set5-tile__used {
    margin-top: 8px;
    font-family: var(--ff-mono);
    font-size: 10px;
    letter-spacing: 0.10em;
    color: var(--v5-on-void-dim);
}

.app-main .set5-empty {
    background: var(--v5-void-3);
    border: 1px dashed var(--v5-line-strong);
    border-radius: 11px;
    padding: 22px;
    color: var(--v5-on-void-mute);
    font-size: 13px;
}

/* ============================================================
 * 13. Imports hub tiles  (V5 namespace — was raw Tailwind)
 *
 * The hub reuses the same look as Settings, but the "import"
 * focus warrants its own prefix so the hover accent + footer
 * note can drift independently if needed.
 * ============================================================ */
.app-main .imp5-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
@media (max-width: 1100px) { .app-main .imp5-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .app-main .imp5-grid { grid-template-columns: 1fr; } }

.app-main .imp5-tile {
    display: block;
    background: linear-gradient(180deg, var(--v5-void-3), var(--v5-void-2));
    border: 1px solid var(--v5-line-strong);
    border-radius: 11px;
    padding: 16px 18px;
    text-decoration: none;
    color: var(--v5-on-void);
    transition: border-color var(--t-base), background var(--t-base), transform var(--t-base);
}
.app-main .imp5-tile:hover {
    border-color: var(--v5-rac-orange);
    background: rgba(255, 255, 255, 0.035);
    transform: translateY(-1px);
}
.app-main .imp5-tile__label {
    font-size: 14px;
    font-weight: 500;
    color: var(--v5-on-void-2);
    margin-bottom: 4px;
    letter-spacing: 0;
}
.app-main .imp5-tile__desc {
    font-size: 12.5px;
    color: var(--v5-on-void-mute);
    line-height: 1.45;
    margin: 0;
}
.app-main .imp5-footnote {
    margin-top: 18px;
    font-family: var(--ff-mono);
    font-size: 10.5px;
    letter-spacing: 0.08em;
    color: var(--v5-on-void-dim);
    max-width: 720px;
    line-height: 1.5;
}