/* ------------------------------------------------------------------
   My Loading Queue and Live Workshop Status — the stage-board design (demo:
   public/demo/my-loading-queue-app.html and live-workshop-status-app.html, plus their -light twins).

   EVERYTHING here is written under `.lv`, the wrapper templates/time/my_queue.html.twig and
   templates/jobs/job/index.html.twig put round the page. The vehicle card, the mq-tile columns, the
   badges and the buttons are shared with other screens (Due Out, the Workshop board, equipment, stock),
   so a rule against those classes on their own would restyle all of them; scoped under `.lv` they cannot
   be reached. Do not "simplify" a selector here by dropping the `.lv`.

   Theme: light is the default; `[data-bs-theme="dark"]` swaps the tokens for the black palette.
   Specificity: app.css (loaded first) styles .vehicle-card, .mq-tile and the badges with selectors up to
   (0,3,0) in dark. The rules below carry the extra `.lv` (and, where a dark rule exists, a second
   structural class) so they sit above those without !important or source-order luck.

   Column colours are NOT set here: each tile carries its own `--c` inline (stage_colour(), which reads
   the same TradeColours the Workshop Loading page draws its trades in).
   ------------------------------------------------------------------ */

.lv {
    --lv-page: #eef1f6;
    --lv-panel: #ffffff;
    --lv-col: #f8f9fc;
    --lv-card: #ffffff;
    --lv-card-2: #ffffff;
    --lv-line: #d5dce8;
    --lv-card-edge: #8c9bb8;
    --lv-line-2: #cfd7e6;
    --lv-ink: #1d2126;
    --lv-muted: #5d6a85;
    --lv-hover: #3f5fa8;
    --lv-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
    --lv-green: #12c98d;
    --lv-green-ink: #0a8f63;
    --lv-blue: #0b6cf0;
    --lv-red: #c4271d;
    --lv-amber: #a56a00;
    --lv-violet: #6d4fe0;
    --lv-track: #dfe5f0;
    --lv-head-mix: #fff;     /* what a column header's tint is mixed toward */
    --lv-head-ink: #000;     /* what its text is mixed toward for contrast */

    color: var(--lv-ink);
    background: var(--lv-page);
    padding: 22px 24px 28px;
    min-height: 100vh;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
[data-bs-theme="dark"] .lv {
    --lv-page: #000000;
    --lv-panel: #0a0a0a;
    --lv-col: #050505;
    --lv-card: #121212;
    --lv-card-2: #0a0a0a;
    --lv-line: #262626;
    --lv-card-edge: #6e6e6e;
    --lv-line-2: #2a2a2a;
    --lv-ink: #eaf0fb;
    --lv-muted: #8b9ac0;
    --lv-hover: #b5b5b5;
    --lv-shadow: none;
    --lv-green: #19e3a0;
    --lv-green-ink: #19e3a0;
    --lv-blue: #0b7cff;
    --lv-red: #ff8b82;
    --lv-amber: #f6b93b;
    --lv-violet: #8f74f4;
    --lv-track: #222222;
    --lv-head-mix: #000;
    --lv-head-ink: #fff;
}

/* The page owns the whole main area: no inset, no 1600px cap (eleven to thirteen columns want the
   width), and the backdrop runs to the edges. */
.app__main:has(> .lv) { padding: 0; max-width: none; margin: 0; }
.lv > * { min-width: 0; }

/* ---- Header ---------------------------------------------------- */
.lv-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.lv-title { margin-inline-end: auto; min-width: 230px; }
.lv .eyebrow { color: var(--lv-violet); }
.lv .page-title { margin: 2px 0; font-family: inherit; font-size: 1.9rem; font-weight: 800; letter-spacing: -0.01em; text-transform: none; color: var(--lv-ink); }
.lv-sub { margin: 0; color: var(--lv-muted); font-size: 0.9rem; }
.lv-live { display: inline-flex; align-items: center; gap: 7px; margin-inline-end: 0.5rem; color: var(--lv-green-ink); font-size: 0.8rem; font-weight: 700; }
.lv-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--lv-green); animation: lvLive 1.8s infinite; }
@keyframes lvLive { 0% { box-shadow: 0 0 0 0 rgba(25, 227, 160, 0.7); } 70%, 100% { box-shadow: 0 0 0 8px rgba(25, 227, 160, 0); } }

.lv-stats { display: flex; gap: 14px; flex-wrap: wrap; }
.lv-stat {
    display: flex; align-items: center; gap: 12px; min-width: 150px; padding: 12px 18px;
    background: var(--lv-panel); border: 1px solid var(--lv-line); border-radius: 12px; box-shadow: var(--lv-shadow);
}
.lv-stat b { display: block; font-size: 1.35rem; line-height: 1; font-variant-numeric: tabular-nums; }
.lv-stat span { color: var(--lv-muted); font-size: 0.8rem; }
.lv-stat__icon { flex: none; }

.lv-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lv-actions > .tech-action-bar,
.lv-actions #technician-action-bar { display: contents; }

/* The search box: the app's own input, drawn as the design's field with the magnifier inside it. */
.lv .table-tools { position: relative; display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; flex: 0 1 auto; min-width: 0; }
.lv .table-tools__search {
    height: 42px; min-width: 300px; padding: 0 14px 0 40px; border-radius: 10px;
    background: var(--lv-panel); border: 1px solid var(--lv-line); color: var(--lv-ink); font: inherit; box-shadow: var(--lv-shadow);
}
.lv .table-tools__search::placeholder { color: var(--lv-muted); }
.lv .table-tools__search:focus { outline: none; border-color: var(--lv-green); box-shadow: 0 0 0 3px rgba(25, 227, 160, 0.2); }
.lv .lv-search__icon { position: absolute; inset-inline-start: 13px; top: 50%; transform: translateY(-50%); color: var(--lv-muted); pointer-events: none; }
.lv .table-tools__count { color: var(--lv-muted); font-size: 0.8rem; }

/* ---- Buttons --------------------------------------------------- */
.lv .btn, .lv-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 14px;
    border-radius: 8px; border: 1px solid var(--lv-line-2); background: var(--lv-panel); color: var(--lv-ink);
    font: inherit; font-size: 0.86rem; font-weight: 600; white-space: nowrap; text-decoration: none; cursor: pointer;
    box-shadow: none;
}
.lv .btn:hover, .lv-btn:hover { border-color: var(--lv-hover); background: var(--lv-panel); color: var(--lv-ink); }
.lv .btn--sm { height: 32px; padding: 0 12px; font-size: 0.82rem; }
.lv .btn--primary, .lv .btn--secondary, .lv-btn--primary { background: var(--lv-blue); border-color: var(--lv-blue); color: #fff; }
.lv .btn--primary:hover, .lv .btn--secondary:hover, .lv-btn--primary:hover { background: var(--lv-blue); border-color: var(--lv-blue); color: #fff; filter: brightness(1.1); }
/* Clock In / Clock Out are the plain buttons beside the blue Start Work, as designed. */
.lv .tech-action-bar .btn--primary, .lv .tech-action-bar .btn--danger { background: var(--lv-panel); border-color: var(--lv-line-2); color: var(--lv-ink); }
.lv .tech-action-bar .btn--primary:hover, .lv .tech-action-bar .btn--danger:hover { background: var(--lv-panel); border-color: var(--lv-hover); color: var(--lv-ink); filter: none; }
.lv .tech-action-bar .btn--secondary { background: var(--lv-blue); border-color: var(--lv-blue); color: #fff; }
.lv .tech-action-bar .btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.lv-btn--lg { height: 46px; padding: 0 20px; font-size: 0.95rem; }
.lv .view-toggle { gap: 8px; }
.lv .view-toggle .btn { height: 36px; padding: 0 14px; font-size: 0.86rem; }
.lv .view-toggle .btn[aria-pressed="true"] { background: var(--lv-green); border-color: var(--lv-green); color: #03281c; font-weight: 700; }
.lv .view-toggle .btn[aria-pressed="true"]:hover { background: var(--lv-green); border-color: var(--lv-green); }
.lv :focus-visible { outline: 2px solid var(--lv-green); outline-offset: 2px; }

/* ---- Panels: My Clock and Working Now -------------------------- */
.lv-panel { background: var(--lv-panel); border: 1px solid var(--lv-line); border-radius: 14px; padding: 16px 18px; box-shadow: var(--lv-shadow); }
.lv-ph { margin: 0 0 12px; font-family: inherit; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lv-muted); }
.lv-hero { display: grid; grid-template-columns: minmax(300px, 0.9fr) 1.6fr; gap: 16px; }
.lv-hero:not(:has(.lv-working)) { grid-template-columns: minmax(300px, 640px); }
.lv-hero > div { min-width: 0; }
.lv-hero .lv-panel { height: 100%; }
/* The clock card shares .clock-card with nothing else on this page, but app.css gives it a left accent
   rail and a card background of its own; the design has neither. */
.lv .clock-card { border: 1px solid var(--lv-line); border-left-width: 1px; box-shadow: var(--lv-shadow); display: block; }
.lv-clock__row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.lv-clock__state { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 10px; background: rgba(18, 201, 141, 0.1); border: 1px solid rgba(18, 201, 141, 0.3); }
.lv-clock__state b { display: block; font-size: 1.05rem; }
.lv-clock__state small, .lv-clock__fig small { color: var(--lv-muted); font-size: 0.8rem; }
.lv-clock__dot { width: 16px; height: 16px; border-radius: 50%; background: var(--lv-green); box-shadow: 0 0 12px var(--lv-green); flex: none; }
.lv-clock__state--idle { background: rgba(255, 90, 79, 0.1); border-color: rgba(255, 90, 79, 0.35); }
.lv-clock__state--idle .lv-clock__dot { background: #ff5a4f; box-shadow: 0 0 12px #ff5a4f; }
.lv-clock__state--off { background: transparent; border-color: var(--lv-line); }
.lv-clock__state--off .lv-clock__dot { background: var(--lv-muted); box-shadow: none; }
.lv-clock__fig b { display: block; font-size: 1.7rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; font-family: inherit; color: var(--lv-ink); }
.lv-clock__row form { margin: 0; }

.lv-working__body { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.lv-thumb { width: 104px; height: 68px; border-radius: 10px; background: var(--lv-col); border: 1px solid var(--lv-line); display: grid; place-items: center; flex: none; overflow: hidden; color: var(--lv-muted); font-weight: 800; font-size: 1.4rem; text-decoration: none; }
.lv-thumb img { width: 100%; height: 100%; object-fit: contain; }
.lv-working__car { display: flex; flex-direction: column; color: var(--lv-muted); font-size: 0.84rem; text-decoration: none; }
.lv-working__car:hover { color: var(--lv-ink); }
.lv-working__reg { color: var(--lv-ink); font-size: 1.25rem; font-weight: 800; letter-spacing: 0.01em; }
.lv-working__progress { flex: 1; min-width: 220px; }
.lv-working__stage { font-weight: 600; }
.lv-working__bar { display: flex; align-items: center; gap: 10px; }
.lv-working__bar .lv-bar { flex: 1; }
.lv-working__bar b { color: var(--lv-green-ink); font-size: 0.85rem; }
.lv-working__times { color: var(--lv-muted); font-size: 0.84rem; font-variant-numeric: tabular-nums; }
.lv-working__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lv-working__actions form { margin: 0; }
.lv-bar { height: 8px; border-radius: 99px; background: var(--lv-track); overflow: hidden; margin: 7px 0; }
.lv-bar > i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--lv-green), #10c78a); }

/* ---- Board: the rail, the stage columns ------------------------ */
.lv .mq-board__hint { margin: 0; color: var(--lv-muted); font-size: 0.85rem; }
.lv .mq-rail { gap: 8px; }
.lv .mq-rail__arrow { background: var(--lv-panel); border-color: var(--lv-line); box-shadow: var(--lv-shadow); }
.lv .mq-rail__chevron { border-inline-start-color: var(--lv-muted); }
.lv .mq-tiles { gap: 10px; padding: 2px 2px 8px; scrollbar-color: var(--lv-line-2) transparent; }

/* A column: coloured by its own --c (the trade). `color-mix` keeps the border, the header wash and the
   header text all one hue at different strengths, on either background. */
.lv .mq-tile {
    --c: #64748b;
    flex: 0 0 200px; max-width: 200px; padding: 0; gap: 0; border-radius: 12px;
    background: var(--lv-col); border: 1px solid color-mix(in srgb, var(--c) 50%, var(--lv-head-mix));
}
.lv .mq-tile.is-drop { border-color: var(--lv-green); box-shadow: 0 0 0 2px rgba(25, 227, 160, 0.3); }
.lv .mq-tile > .mq-tile__head {
    margin: 0; padding: 9px 10px; gap: 6px; border-radius: 11px 11px 0 0;
    background-color: var(--lv-col);
    background-image: linear-gradient(180deg, color-mix(in srgb, var(--c) 26%, transparent), color-mix(in srgb, var(--c) 8%, transparent));
    border-bottom: 1px solid color-mix(in srgb, var(--c) 40%, var(--lv-head-mix));
    color: color-mix(in srgb, var(--c) 66%, var(--lv-head-ink));
}
.lv .mq-tile > .mq-tile__head.is-pinned { background-color: var(--lv-col); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); }
.lv .mq-tile__dot { display: none; }
.lv .stage-icon { width: 18px; height: 18px; flex: none; color: var(--c); }
.lv .mq-tile__name { font-family: inherit; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: inherit; line-height: 1.15; }
.lv .mq-tile__count { margin-inline-start: auto; min-width: 24px; padding: 1px 7px; border-radius: 99px; text-align: center; font-family: inherit; font-size: 0.78rem; font-weight: 700; background: rgba(0, 0, 0, 0.08); color: var(--lv-ink); }
[data-bs-theme="dark"] .lv .mq-tile__count { background: rgba(0, 0, 0, 0.45); color: #fff; }
.lv .mq-tile__cards { padding: 8px; gap: 8px; flex: 1; }
.lv .mq-tile__cards:has(> .mq-tile__empty) { margin: 10px; padding: 20px 14px; border: 1.5px dashed var(--lv-line-2); border-radius: 10px; justify-content: center; align-items: center; }
.lv .mq-tile__empty { color: var(--lv-muted); font-size: 0.8rem; padding: 0; }
.lv .mq-tile__cards .vehicle-card-wrap { width: 100%; }

/* ---- Cards ----------------------------------------------------- */
/* The wrapper IS the card where there is one (the action row lives inside it); the anchor is then the
   card's face. Without a wrapper the anchor is the card itself. */
.lv .vehicle-card-wrap {
    flex-direction: column; height: auto; border-radius: 10px; overflow: hidden;
    background: linear-gradient(180deg, var(--lv-card), var(--lv-card-2)); border: 1px solid var(--lv-card-edge); box-shadow: var(--lv-shadow);
}
.lv .vehicle-card-wrap:hover { border-color: var(--lv-hover); }
.lv .vehicle-card-wrap > .vehicle-card { flex: 0 0 auto; border: 0; border-radius: 0; background: none; box-shadow: none; }
.lv .vehicle-card-wrap:has(> .vehicle-card--due-amber) { border-color: color-mix(in srgb, #f6b93b 65%, transparent); }
.lv .vehicle-card-wrap:has(> .vehicle-card--due-red) { border-color: rgba(255, 90, 79, 0.6); background: linear-gradient(180deg, rgba(255, 90, 79, 0.1), var(--lv-card-2)); }
.lv .vehicle-card {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "body photo"; align-items: start;
    border-radius: 10px; border: 1px solid var(--lv-card-edge); background: linear-gradient(180deg, var(--lv-card), var(--lv-card-2)); box-shadow: var(--lv-shadow); color: var(--lv-ink);
}
.lv .vehicle-card:hover { border-color: var(--lv-hover); }
.lv .vehicle-card.vehicle-card--due-amber { border-color: color-mix(in srgb, #f6b93b 65%, transparent); }
.lv .vehicle-card.vehicle-card--due-red { border-color: rgba(255, 90, 79, 0.6); }
.lv .vehicle-card-wrap > .vehicle-card.vehicle-card--due-amber, .lv .vehicle-card-wrap > .vehicle-card.vehicle-card--due-red { border: 0; }
/* The urgency ring is drawn around the whole wrapper instead: the anchor's ::after would stop short of
   the action row. */
.lv .vehicle-card-wrap > .vehicle-card--due-amber::after, .lv .vehicle-card-wrap > .vehicle-card--due-red::after { display: none; }
.lv .vehicle-card-wrap:has(> .vehicle-card--due-red) { animation: lvDuePulse 1.3s ease-in-out infinite; }
@keyframes lvDuePulse { 0%, 100% { border-color: rgba(255, 90, 79, 0.9); } 50% { border-color: var(--lv-card-edge); } }
@media (prefers-reduced-motion: reduce) { .lv .vehicle-card-wrap:has(> .vehicle-card--due-red) { animation: none; } }

.lv .vehicle-card__photo {
    grid-area: photo; width: 52px; height: 30px; aspect-ratio: auto; margin: 10px 10px 0 0; border-radius: 6px; background: none; overflow: hidden;
}
.lv .vehicle-card__photo--cover { background: var(--lv-col); }
.lv .vehicle-card__photo--empty { background: var(--lv-col); }
/* app.css paints the dark theme's photo slot charcoal (--surface-3); here the emblem sits straight on the card,
   so the slot is transparent (the empty-initial slot keeps its own tint). */
[data-bs-theme="dark"] .lv .vehicle-card__photo { background: none; }
[data-bs-theme="dark"] .lv .vehicle-card__photo--cover,
[data-bs-theme="dark"] .lv .vehicle-card__photo--empty { background: var(--lv-col); }
.lv .vehicle-card__initial { font-family: inherit; font-size: 1rem; font-weight: 800; color: var(--lv-muted); }
.lv .vehicle-card__body { grid-area: body; padding: 9px 0 9px 10px; gap: 2px; min-width: 0; display: flex; flex-direction: column; }
.lv .vehicle-card__reg { font-family: inherit; font-size: 0.95rem; font-weight: 800; letter-spacing: 0; color: var(--lv-ink); white-space: nowrap; }
.lv .vehicle-card__wip, .lv .vehicle-card__model { font-size: 0.84rem; font-weight: 400; color: var(--lv-muted); }
.lv--queue .vehicle-card__model { order: 2; }
.lv--queue .vehicle-card__wip { order: 3; }
.lv--queue .vehicle-card__reg { order: 1; }
.lv .vehicle-card__body > :not(.vehicle-card__reg):not(.vehicle-card__model):not(.vehicle-card__wip) { order: 4; }
.lv .vehicle-card__loc, .lv .veh__loc { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 600; color: var(--lv-green-ink); }
.lv .vehicle-card__pin, .lv .veh__pin { fill: currentColor; width: 13px; height: 13px; }
.lv .vehicle-card__badges { gap: 5px; margin-top: 4px; }
.lv .vehicle-card__tech { margin-top: 4px; padding-top: 0; border-top: 0; font-size: 0.82rem; color: var(--lv-ink); }
.lv .vehicle-card__tech.is-awaiting { color: var(--lv-amber); }
.lv .vehicle-card__time { font-size: 0.8rem; color: var(--lv-muted); font-variant-numeric: tabular-nums; }
.lv .vehicle-card__time--left { color: var(--lv-amber); }
.lv .vehicle-card__target { font-size: 0.82rem; color: var(--lv-muted); }
.lv .vehicle-card__target--red { color: var(--lv-red); }
.lv .vehicle-card__target--amber { color: var(--lv-amber); }

/* Badges: the design's outlined pills, tinted by meaning. app.css draws them as filled chips for the
   light theme only; here one rule set serves both themes through the tokens. */
.lv .badge-flag { font-family: inherit; text-transform: none; letter-spacing: 0; font-size: 0.68rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; border: 1px solid var(--lv-line-2); background: transparent; color: var(--lv-muted); white-space: nowrap; }
.lv .badge-flag--red, .lv .badge-flag--danger, .lv .badge-flag--stop { color: var(--lv-red); border-color: rgba(255, 90, 79, 0.55); background: rgba(255, 90, 79, 0.12); }
.lv .badge-flag--amber, .lv .badge-flag--warning, .lv .badge-flag--credit, .lv .badge-flag--pending { color: var(--lv-amber); border-color: rgba(246, 185, 59, 0.6); background: rgba(246, 185, 59, 0.1); }
.lv .badge-flag--green, .lv .badge-flag--ok, .lv .badge-flag--authorised { color: var(--lv-green-ink); border-color: rgba(25, 227, 160, 0.5); background: rgba(25, 227, 160, 0.1); }
.lv .badge-flag--blue { color: var(--lv-blue); border-color: rgba(11, 124, 255, 0.6); background: rgba(11, 124, 255, 0.12); }
[data-bs-theme="dark"] .lv .badge-flag--blue { color: #6db1ff; }
.lv .badge-flag--violet { color: var(--lv-violet); border-color: rgba(143, 116, 244, 0.55); background: rgba(143, 116, 244, 0.12); }
.lv .badge-flag--neutral, .lv .badge-flag--cancelled { color: var(--lv-muted); }

/* The action row: Start job / Pause on the queue, and Move on every card that can move. Always
   showing — the app's own hover-revealed Move pill is for the other boards. */
.lv .vehicle-card__actions { display: flex; gap: 6px; padding: 0 10px 10px; }
.lv .vehicle-card__start, .lv .vehicle-card-wrap .vehicle-card__move {
    flex: 1; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 30px; padding: 0 8px; white-space: nowrap;
    border-radius: 8px; border: 1px solid var(--lv-line-2); background: var(--lv-panel); color: var(--lv-ink);
    font: inherit; font-size: 0.82rem; font-weight: 600; text-decoration: none; cursor: pointer;
}
.lv .vehicle-card__start { background: var(--lv-blue); border-color: var(--lv-blue); color: #fff; }
.lv .vehicle-card-wrap .vehicle-card__move {
    position: static; max-width: none; opacity: 1; pointer-events: auto; overflow: visible; text-overflow: clip;
}
.lv .vehicle-card-wrap .vehicle-card__move::after { content: "→"; }
.lv .vehicle-card__start:hover, .lv .vehicle-card-wrap .vehicle-card__move:hover { border-color: var(--lv-hover); }
.lv .vehicle-card__start:hover { border-color: var(--lv-blue); filter: brightness(1.1); }
.lv .vehicle-card-wrap > .vehicle-card__move:not(:only-child) { margin: 0 12px 11px; }

/* ---- Live Workshop Status: the rework counter, park strip, panel ---- */
.lv .lv-board-panel { background: transparent; border: 0; box-shadow: none; padding: 0 !important; }
.lv .table-tools--board { flex-wrap: wrap; gap: 8px; }
.lv .rework-flag, .lv .park-strip__chip {
    height: 32px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--lv-line-2); background: var(--lv-panel);
    color: var(--lv-ink); font-size: 0.82rem; font-weight: 600; display: inline-flex; align-items: center; gap: 7px;
}
.lv .park-strip { margin-inline-start: 0; gap: 8px; }
.lv .park-strip__label { font-family: inherit; font-size: 0.82rem; letter-spacing: 0; text-transform: none; color: var(--lv-muted); }
.lv .park-strip__chip { border-style: solid; }
.lv .park-strip__chip.is-drop { border-color: var(--lv-green); background: rgba(25, 227, 160, 0.16); box-shadow: 0 0 0 2px rgba(25, 227, 160, 0.28); }
.lv .rework-flag__count { font-family: inherit; }
.lv .rework-flag--active { color: var(--lv-red); }
.lv .empty-state { color: var(--lv-muted); }

/* ---- The Table view keeps its own markup; it only picks up the page's colours ---- */
.lv .panel.form-card, .lv .lv-board-panel .panel { background: var(--lv-panel); border-color: var(--lv-line); }

@media (max-width: 1100px) {
    .lv-hero { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
    .lv { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .lv-live::before { animation: none; }
}