/* ------------------------------------------------------------------
   Estimate Status (/estimating) — the same look as Customer Information and the loading boards.

   EVERYTHING here is written under `.es`, the wrapper templates/estimating/index.html.twig puts round the
   page. The panel, data-table, badge and button classes are shared with every other screen, so a rule
   against them on their own would restyle all of them; scoped under `.es` they cannot be reached.

   Theme: light is the default; `[data-bs-theme="dark"]` swaps the tokens for the dark neon-green palette.

   No wasted space between columns: the tables are `width: auto`, so a column is as wide as its widest
   cell instead of the panel's spare width being spread across all of them, and each stage panel is as
   wide as its table. The panels sit side by side and wrap when the row is full.
   ------------------------------------------------------------------ */

.es {
    --es-panel: #ffffff;
    --es-field: #ffffff;
    --es-line: #d9dfe7;
    --es-line-2: #c9d1dc;
    --es-edge: #d9dfe7;
    --es-glow: transparent;
    --es-row-line: #eaeef3;
    --es-row-hover: #f4fbf8;
    --es-ink: #1d2126;
    --es-muted: #5f6b7a;
    --es-green-text: #0a7a52;
    --es-focus: #00b87a;
    --es-draft: #7b8794;
    --es-awaiting: #d68a00;
    --es-ready: #12c98d;
    --es-converted: #1f78ff;
    --es-closed: #a3adba;
    color: var(--es-ink);
}
[data-bs-theme="dark"] .es {
    --es-panel: #04150d;
    --es-field: #031009;
    --es-line: #16302a;
    --es-line-2: #1f4036;
    --es-edge: #16302a;
    --es-glow: transparent;
    --es-row-line: #0e2a1e;
    --es-row-hover: #07271a;
    --es-ink: #e8f6ee;
    --es-muted: #8fb5a2;
    --es-green-text: #2ddf94;
    --es-focus: #2ddf94;
    --es-draft: #8fb5a2;
    --es-awaiting: #f6b93b;
    --es-ready: #2ddf94;
    --es-converted: #4c9aff;
    --es-closed: #56756a;
}

/* Wide page: the stage panels sit side by side, so the default 1200px cap would only force them to wrap. */
.app__main.app__main--board:has(> .es) { max-width: none; }

/* ---- Header ---- */
.es-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.25rem; flex-wrap: wrap; }
.es .es-head .page-title { font-size: 1.9rem; font-weight: 600; margin: 0.1rem 0 0.3rem; }
.es .es-head .btn { display: inline-flex; align-items: center; min-height: 2.6rem; padding-inline: 1.4rem; font-weight: 600; border-radius: 8px; }

/* ---- The stages at a glance ---- */
.es-stats { list-style: none; margin: 1.1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.es-stat {
    --tone: var(--es-draft);
    display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.4rem 0.85rem 0.4rem 0.75rem;
    border: 1px solid var(--es-edge); border-radius: 999px; background: var(--es-panel); box-shadow: 0 0 10px var(--es-glow);
    font-size: 0.82rem; color: var(--es-muted);
}
.es-stat::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--tone); flex: none; }
.es-stat b { font-weight: 600; color: var(--es-ink); font-variant-numeric: tabular-nums; }
.es-stat--draft { --tone: var(--es-draft); }
.es-stat--awaiting { --tone: var(--es-awaiting); }
.es-stat--ready { --tone: var(--es-ready); }
.es-stat--converted { --tone: var(--es-converted); }
.es-stat--closed { --tone: var(--es-closed); }

/* ---- Search and the payer filter (built by table_group_controller) ---- */
.es .table-tools { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin: 1.1rem 0 1.1rem; padding: 0; }
.es .table-tools__controls { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.es .table-tools__search {
    height: 2.6rem; width: min(37rem, 100%); padding: 0 0.85rem; border: 1px solid var(--es-line-2); border-radius: 8px;
    background: var(--es-field); color: var(--es-ink); font: inherit; font-size: 0.88rem; box-shadow: none;
}
.es .table-tools__search::placeholder { color: var(--es-muted); opacity: 1; }
.es .table-tools__search:focus { outline: none; border-color: var(--es-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--es-focus) 22%, transparent); }
/* The selected text is centred both ways: text-align + text-align-last across the box (a select ignores plain
   text-align for its one line), equal side padding so the arrow does not push it off-centre, and a line box as
   tall as the inside of the box for the vertical. background-color, not the `background` shorthand, which would
   drop the arrow image. */
.es .table-tools__filter {
    box-sizing: border-box; width: 8rem; max-width: 100%; height: 2.1rem; padding: 0 1.4rem; text-overflow: ellipsis; text-align: center; text-align-last: center;
    border: 1px solid var(--es-line-2); border-radius: 8px;
    background-color: var(--es-field); color: var(--es-ink); font: inherit; font-size: 0.82rem;
    line-height: calc(2.1rem - 2px);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%238fb5a2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='2,4 6,8 10,4'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-size: 11px; background-position: right 0.5rem center;
}
.es .table-tools__count { font-size: 0.8rem; color: var(--es-muted); }

/* ---- Stage panels ---- */
.es-board { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1rem; }
/* A column of stage panels: Drafts with Awaiting approval beneath it. The panels share the wider one's width. */
.es-stack { display: flex; flex-direction: column; gap: 1rem; flex: 0 1 auto; min-width: 0; max-width: 100%; }
.es .estimate-bucket {
    --tone: var(--es-draft);
    flex: none; min-width: min(100%, 24rem); max-width: 100%; margin: 0;
    background: var(--es-panel); border: 1px solid var(--es-edge); border-radius: 12px; box-shadow: 0 0 18px var(--es-glow); overflow: hidden;
}
.es .estimate-bucket--draft { --tone: var(--es-draft); }
.es .estimate-bucket--awaiting { --tone: var(--es-awaiting); }
.es .estimate-bucket--ready { --tone: var(--es-ready); }
.es .estimate-bucket--converted { --tone: var(--es-converted); }
.es .estimate-bucket--closed { --tone: var(--es-closed); }
.es .estimate-bucket > .panel__heading { padding: 0.8rem 1rem 0.7rem; border-bottom: 1px solid var(--es-line); }
.es .estimate-bucket__heading { align-items: center; gap: 0.6rem; font-size: 0.98rem; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--es-ink); }
/* The dark theme draws every .section-heading with an absolutely placed magenta bar and pads the heading for
   it (app.css); here the stage dot takes that place, so both are put back to a plain in-flow dot. */
.es .estimate-bucket .estimate-bucket__heading { padding-inline-start: 0; }
.es .estimate-bucket .estimate-bucket__heading::before {
    content: ""; position: static; inset: auto; width: 0.55rem; height: 0.55rem; border-radius: 50%;
    background: var(--tone); box-shadow: none; flex: none;
}
.es .estimate-bucket .panel-count {
    margin-inline-start: auto; min-width: 1.6rem; padding: 0.05rem 0.5rem; border-radius: 999px; text-align: center;
    background: color-mix(in srgb, var(--tone) 16%, transparent); color: var(--es-ink); font-size: 0.78rem; font-weight: 600;
}

/* ---- Tables: columns hug their content ---- */
.es .estimate-bucket .data-table { width: auto; min-width: 100%; }
.es .data-table thead th {
    padding: 0.6rem 0.9rem; font-family: inherit; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.02em; text-transform: none;
    color: var(--es-muted); border-bottom: 1px solid var(--es-line); white-space: nowrap;
}
.es .data-table tbody td { padding: 0.55rem 0.9rem; border-bottom: 1px solid var(--es-row-line); font-size: 0.88rem; }
.es .data-table tbody tr:hover { background: var(--es-row-hover); }
.es .data-table__num { text-align: end; }
.es .data-table thead th.data-table__num { text-align: end; }
.es .data-table__reg { font-family: inherit; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; }
.es .data-table__reg .wip { color: #000; text-decoration: none; }
.es .data-table__reg .wip:hover { text-decoration: underline; }
[data-bs-theme="dark"] .es .data-table__reg .wip { color: #fff; }
.es .estimate-age { font-family: inherit; font-size: 0.84rem; color: var(--es-muted); }
.es .data-table tbody td.data-table__num { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.es .data-table tbody td.data-table__atomic .estimate-age { font-weight: 400; }
/* The panel paints the colour, edge to edge. The shared .table-scroll draws its own opaque scroll-hint
   gradients in the app's panel colour, which is what let a different shade show at the sides and corners. */
.es .estimate-bucket .table-scroll { background: none; border-radius: 0; }
.es .estimate-bucket > .panel__heading, .es .estimate-bucket > .pager { background: none; }
.es .estimate-bucket > .pager { margin-top: 0; padding: 0.7rem 1rem; border-top: 1px solid var(--es-line); }

/* ------------------------------------------------------------------
   Claims (/claims) — the same look on its own screen. The page wraps itself in `.es es--claims`, so the
   tokens, header, search box and table rules above carry over; only what Estimate Status does not have
   is added here: one wide panel round the table, the filter bar, and the decision key.
   ------------------------------------------------------------------ */
.es .data-table__reg .entity-link { color: #000; text-decoration: none; }
.es .data-table__reg .entity-link:hover { text-decoration: underline; }
[data-bs-theme="dark"] .es .data-table__reg .entity-link { color: #fff; }

.es--claims .panel {
    width: fit-content; max-width: 100%;
    background: var(--es-panel); border: 1px solid var(--es-edge); border-radius: 12px; box-shadow: 0 0 18px var(--es-glow); overflow: hidden;
}
.es--claims .panel .table-scroll { background: none; border-radius: 0; }
.es--claims .panel .data-table { width: auto; min-width: 100%; }
.es--claims .panel .empty-state { color: var(--es-muted); }
/* The search row and the decision key sit inside the panel now, so they take its inset. */
.es--claims .table-scroll--legend .table-tools { margin: 0.9rem 1rem; }
.es--claims .table-scroll--legend .claim-legend { margin: 0.9rem 1rem 0.9rem 0; color: var(--es-muted); }
.es--claims .panel > .claim-legend { margin: 0.9rem 1rem; color: var(--es-muted); }
.es--claims .panel .table-scroll .data-table thead th { border-top: 1px solid var(--es-line); }
.es--claims .panel > .pager, .es--claims .table-scroll > .pager { padding: 0.7rem 1rem; }

/* ---- The filter bar: the same fields as the table's own filters ---- */
.es .filter-bar { margin: 1.1rem 0; gap: 0.6rem 0.8rem; align-items: flex-end; }
.es .filter-bar__field { gap: 0.3rem; }
.es .filter-bar__field label {
    font-family: inherit; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.02em; text-transform: none; color: var(--es-muted);
}
.es .filter-bar__field select, .es .filter-bar__field input {
    box-sizing: border-box; height: 2.1rem; min-width: 8.5rem; padding: 0 1.6rem 0 0.8rem;
    border: 1px solid var(--es-line-2); border-radius: 8px; font: inherit; font-size: 0.84rem; line-height: calc(2.1rem - 2px);
    background-color: var(--es-field); color: var(--es-ink); box-shadow: none;
}
.es .filter-bar__field select {
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%238fb5a2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='2,4 6,8 10,4'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-size: 11px; background-position: right 0.5rem center;
}
.es .filter-bar__field select:focus, .es .filter-bar__field input:focus {
    outline: none; border-color: var(--es-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--es-focus) 22%, transparent);
}
.es .filter-bar__actions .btn { height: 2.1rem; display: inline-flex; align-items: center; border-radius: 8px; font-weight: 600; }

/* ------------------------------------------------------------------
   Live Technician Status (/board/who) — the same look again, with photo-led technician cards.
   The page wraps itself in `.es es--tech`. The `.tech-card*` classes are also used by other screens (licences,
   training), so every rule below is under `.es--tech` and reaches no one else.
   Two colours per card, as before: the STATE colour (--tech-accent: badge, dot) and the BAND colour
   (--tech-band: the border, i.e. whether the card needs you). They differ on a technician who is on a job but
   over the estimate — green badge, red border.
   ------------------------------------------------------------------ */
.es--tech {
    --t-job: #0a8f63; --t-idle: #b87800; --t-late: #c4271d; --t-off: #8a94a3; --t-away: #1f6fe0; --t-sick: #7a4fd6; --t-over: #c4271d;
    --es-row-hover: #f4f5f7;   /* a neutral hover, not the shared palette's green wash */
}
[data-bs-theme="dark"] .es--tech {
    --t-job: #2ddf94; --t-idle: #f6b93b; --t-late: #ff6b5f; --t-off: #7d8791; --t-away: #4c9aff; --t-sick: #a98bff; --t-over: #ff6b5f;
    /* Pure black, neutral surfaces — the page's own black. The green of the shared palette stays on the outer edges and the
       state colours; it is not in the fills, dividers, hovers or text inside the boxes. */
    --es-panel: #000000; --es-field: #000000; --es-line: #262626; --es-line-2: #333333;
    --es-row-line: #1c1c1c; --es-row-hover: #141414; --es-ink: #eceef0; --es-muted: #9aa2aa;
}

/* ---- Header ---- */
.es--tech .es-head__sub { margin: 0; display: flex; align-items: center; gap: 0.55rem; font-size: 0.9rem; color: var(--es-muted); }
.es-live-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--t-job); animation: esLive 1.8s infinite; }
@keyframes esLive { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--t-job) 60%, transparent); } 70%, 100% { box-shadow: 0 0 0 8px transparent; } }
@media (prefers-reduced-motion: reduce) { .es-live-dot { animation: none; } }
.es--tech .es-head__actions { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.es--tech .btn, .es--tech .view-toggle .btn {
    display: inline-flex; align-items: center; height: 2.1rem; padding: 0 0.95rem; border-radius: 8px;
    border: 1px solid var(--es-line-2); background: var(--es-field); color: var(--es-ink); font-size: 0.84rem; font-weight: 600; box-shadow: none; white-space: nowrap;
}
.es--tech .btn:hover { border-color: var(--es-focus); background: var(--es-field); color: var(--es-ink); }
.es--tech .btn--sm { height: 1.85rem; padding: 0 0.7rem; font-size: 0.78rem; }
.es--tech .btn--danger { color: var(--t-late); border-color: color-mix(in srgb, var(--t-late) 50%, transparent); background: var(--es-field); }
.es--tech .btn--danger:hover { background: color-mix(in srgb, var(--t-late) 12%, transparent); border-color: var(--t-late); color: var(--t-late); }
.es--tech .view-toggle { display: inline-flex; gap: 0; border: 1px solid var(--es-line-2); border-radius: 8px; overflow: hidden; background: var(--es-field); }
.es--tech .view-toggle .btn { border: 0; border-radius: 0; background: transparent; color: var(--es-muted); font-weight: 400; }
.es--tech .view-toggle .btn + .btn { border-inline-start: 1px solid var(--es-line-2); }
.es--tech .view-toggle .btn[aria-pressed="true"] { background: color-mix(in srgb, var(--es-focus) 14%, transparent); color: var(--es-ink); box-shadow: inset 0 0 0 1px var(--es-focus); font-weight: 500; }

/* ---- Stage chips ---- */
.es-stat--on_job { --tone: var(--t-job); }
.es-stat--idle { --tone: var(--t-idle); }
.es-stat--off { --tone: var(--t-off); }
.es-stat--away { --tone: var(--t-away); }

/* ---- The panel round the cards (and the table view) ---- */
.es--tech .panel { background: var(--es-panel); border: 1px solid var(--es-edge); border-radius: 12px; box-shadow: 0 0 18px var(--es-glow); overflow: hidden; }
.es--tech .panel__heading { padding: 0.8rem 1rem 0.7rem; border-bottom: 1px solid var(--es-line); }
[data-bs-theme="dark"] .es--tech .panel__heading { padding-inline-start: 1rem; }
.es--tech .panel__heading .section-heading { display: flex; align-items: center; gap: 0.6rem; padding-inline-start: 0; font-size: 0.98rem; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--es-ink); }
.es--tech .panel__heading .section-heading::before { display: none; }
.es--tech .panel__heading .panel-count {
    margin-inline-start: auto; min-width: 1.6rem; padding: 0.05rem 0.5rem; border-radius: 999px; text-align: center;
    background: color-mix(in srgb, var(--es-muted) 18%, transparent); color: var(--es-ink); font-size: 0.78rem; font-weight: 600;
}

/* ---- Technician cards ---- */
/* Every card is the same size as every other, always: equal-width columns, and every row as tall as the tallest
   card (grid-auto-rows: 1fr), so a card with one job and a card with none are the same box. */
.es--tech .tech-card-grid { grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr)); grid-auto-rows: 1fr; gap: 0.7rem; padding: 0.85rem; align-items: stretch; }
.es--tech .tech-card {
    --tech-accent: var(--t-off);
    --tech-band: var(--tech-accent);
    display: flex; flex-direction: column; gap: 0.5rem; padding: 0.65rem 0.75rem 0.65rem; opacity: 1; overflow: visible;
    border: 1.5px solid color-mix(in srgb, var(--tech-band) 55%, var(--es-line)); border-radius: 12px;
    background: var(--es-panel); box-shadow: none;
}
.es--tech .tech-card::after { display: none; }
.es--tech .tech-card--on_job { --tech-accent: var(--t-job); }
.es--tech .tech-card--idle { --tech-accent: var(--t-idle); }
.es--tech .tech-card--off { --tech-accent: var(--t-off); }
.es--tech .tech-card--holiday { --tech-accent: var(--t-away); }
.es--tech .tech-card--unpaid, .es--tech .tech-card--other { --tech-accent: var(--t-off); }
.es--tech .tech-card--sick { --tech-accent: var(--t-sick); }
.es--tech .tech-card--clock-idle_long { --tech-band: var(--t-late); }
.es--tech .tech-card--clock-overrun { --tech-band: var(--t-over); }

.es--tech .tech-card__top { display: flex; align-items: center; gap: 0.8rem; }
.es--tech .tech-card__photo {
    /* A portrait slot, like an ID photo: 4.6rem wide by 5.6rem tall. It is taller than the name / trade / status block
       beside it, so it sets the height of the card's top row. */
    position: relative; flex: none; width: 4.6rem; height: 5.6rem; aspect-ratio: auto; border-radius: 11px; overflow: hidden;
    display: grid; place-items: center; border: 1px solid var(--es-line-2);
    background: linear-gradient(135deg, color-mix(in srgb, var(--es-muted) 16%, var(--es-field)), color-mix(in srgb, var(--es-muted) 6%, var(--es-field)));
}
.es--tech .tech-card__photo--empty,
[data-bs-theme="dark"] .es--tech .tech-card__photo--empty { background: linear-gradient(135deg, color-mix(in srgb, var(--es-muted) 16%, var(--es-field)), color-mix(in srgb, var(--es-muted) 6%, var(--es-field))); }
.es--tech .tech-card__initial { font-family: inherit; font-size: 1.35rem; font-weight: 600; color: var(--es-ink); }
.es--tech .tech-card__who { min-width: 0; flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; }
.es--tech .tech-card__name { font-size: 0.98rem; font-weight: 600; line-height: 1.2; color: var(--es-ink); overflow-wrap: anywhere; }
.es--tech .tech-card__trade, .es--tech .tech-card__site { font-size: 0.78rem; line-height: 1.2; color: var(--es-muted); }
.es--tech .tech-card__badges { margin-top: 0.2rem; }
.es--tech .tech-badge { font-size: 0.74rem; padding: 0.18rem 0.6rem; border: 1px solid color-mix(in srgb, var(--tech-accent) 40%, transparent); }
.es--tech .tech-badge--over { border-color: color-mix(in srgb, var(--t-over) 40%, transparent); color: var(--t-over); background: color-mix(in srgb, var(--t-over) 14%, transparent); }
.es--tech .tech-badge--over::before { background: var(--t-over); }

.es--tech .tech-card__body { flex: 1 1 auto; padding: 0; gap: 0.4rem 0.4rem; flex-direction: row; flex-wrap: wrap; align-items: center; align-content: flex-start; }
.es--tech .tech-card__jobs, .es--tech .tech-card__since { flex: 0 0 100%; }
.es--tech .tech-card__actions, .es--tech .tech-card__start, .es--tech .tech-card__history { flex: 0 0 auto; }
.es--tech .tech-card__jobs { gap: 0.4rem; }
.es--tech .tech-card__job-row, .es--tech .tech-card__job-row + .tech-card__job-row {
    padding: 0.4rem 0.6rem; border: 1px solid var(--es-line); border-radius: 9px; background: color-mix(in srgb, var(--es-field) 70%, transparent);
}
.es--tech .tech-card__job { font-family: inherit; font-size: 1rem; font-weight: 700; letter-spacing: 0.02em; color: #000; text-decoration: none; }
[data-bs-theme="dark"] .es--tech .tech-card__job { color: #fff; }
.es--tech .tech-card__job:hover { color: inherit; text-decoration: underline; }
.es--tech .tech-card__since { margin-top: 0.15rem; font-size: 0.8rem; color: var(--es-muted); font-variant-numeric: tabular-nums; }

/* The buttons: the clock actions, then Put on a job, then this technician's own Clocking history. */
.es--tech .tech-card__actions { order: 1; margin: 0; padding: 0; gap: 0.4rem; }
.es--tech .tech-card__start { order: 2; margin-top: 0; }
.es--tech .tech-card__history { order: 3; margin-top: 0; }
.es--tech .tech-card__history > .btn,
.es--tech .tech-card__actions .btn,
.es--tech .tech-card__start > .btn { height: 1.85rem; padding: 0 0.7rem; font-size: 0.78rem; }
.es--tech .tech-card__history > .btn { gap: 0.4rem; font-weight: 600; color: var(--es-muted); }
.es--tech .tech-card__history > .btn:hover { color: var(--es-ink); }
.es--tech .tech-card__history > .btn::before {
    content: ""; width: 0.95rem; height: 0.95rem; flex: none; background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* The technician name search in the filter bar: a wider field than the dropdowns, with the browser's own
   search chrome removed so it matches them. */
.es .filter-bar__field input[type="search"] { min-width: 15rem; padding-inline: 0.8rem; appearance: none; -webkit-appearance: none; }
.es .filter-bar__field input[type="search"]::placeholder { color: var(--es-muted); opacity: 1; }
.es .filter-bar__field input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }

/* The name search hides cards and rows with the `hidden` attribute; the display rules above would otherwise win. */
.es--tech [data-technician-name][hidden] { display: none !important; }

/* ------------------------------------------------------------------
   Asset Maintenance (/workshop/equipment) — the same look again. The page wraps itself in `.es .es--assets`.
   The asset cards reuse the shared `.vehicle-card` classes, so everything below is under `.es--assets`.
   ------------------------------------------------------------------ */
.es--assets {
    --a-overdue: #c4271d; --a-soon: #b87800; --a-ok: #0a8f63; --a-none: #8a94a3;
    --es-row-hover: #f4f5f7;   /* a neutral hover, not the shared palette's green wash */
}
[data-bs-theme="dark"] .es--assets {
    --a-overdue: #ff6b5f; --a-soon: #f6b93b; --a-ok: #2ddf94; --a-none: #7d8791;
    /* Pure black surfaces, exactly the page's own black (the boxes read only by their edge and dividers): the green of the shared palette stays on the outer edge and
       on the accents, but not in the fills, lines, hovers and text inside the boxes. */
    --es-panel: #000000; --es-field: #000000; --es-line: #262626; --es-line-2: #333333;
    --es-row-line: #1c1c1c; --es-row-hover: #141414; --es-ink: #eceef0; --es-muted: #9aa2aa;
}
.es--assets .es-head__actions { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.es--assets .btn {
    display: inline-flex; align-items: center; height: 2.1rem; padding: 0 0.95rem; border-radius: 8px;
    border: 1px solid var(--es-line-2); background: var(--es-field); color: var(--es-ink); font-size: 0.84rem; font-weight: 600; box-shadow: none; white-space: nowrap;
}
.es--assets .btn:hover { border-color: var(--es-focus); background: var(--es-field); color: var(--es-ink); }
.es--assets .btn--sm { height: 1.85rem; padding: 0 0.7rem; font-size: 0.78rem; }
.es--assets .btn--primary { background: var(--es-focus); border-color: var(--es-focus); color: #03281a; }
.es--assets .btn--primary:hover { background: var(--es-focus); filter: brightness(1.08); color: #03281a; }
.es--assets .view-switch { display: inline-flex; border: 1px solid var(--es-line-2); border-radius: 8px; overflow: hidden; background: var(--es-field); }
.es--assets .view-switch__btn { height: 2.1rem; padding: 0 1rem; border: 0; background: transparent; color: var(--es-muted); font-size: 0.84rem; cursor: pointer; }
.es--assets .view-switch__btn + .view-switch__btn { border-inline-start: 1px solid var(--es-line-2); }
.es--assets .view-switch__btn.is-active { background: color-mix(in srgb, var(--es-focus) 14%, transparent); color: var(--es-ink); box-shadow: inset 0 0 0 1px var(--es-focus); font-weight: 500; }

.es--assets .es-stats { margin-bottom: 1.1rem; }
.es-stat--overdue { --tone: var(--a-overdue); }
.es-stat--soon { --tone: var(--a-soon); }
.es-stat--ok { --tone: var(--a-ok); }
.es-stat--none { --tone: var(--a-none); }

.es--assets .panel { background: var(--es-panel); border: 1px solid var(--es-edge); border-radius: 12px; box-shadow: 0 0 18px var(--es-glow); overflow: hidden; }
.es--assets .panel__heading { padding: 0.8rem 1rem 0.7rem; border-bottom: 1px solid var(--es-line); }
[data-bs-theme="dark"] .es--assets .panel__heading { padding-inline-start: 1rem; }
.es--assets .panel__heading .section-heading { display: flex; align-items: center; gap: 0.6rem; padding-inline-start: 0; font-size: 0.98rem; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--es-ink); }
.es--assets .panel__heading .section-heading::before { display: none; }
.es--assets .panel__heading .panel-count {
    margin-inline-start: auto; min-width: 1.6rem; padding: 0.05rem 0.5rem; border-radius: 999px; text-align: center;
    background: color-mix(in srgb, var(--es-muted) 18%, transparent); color: var(--es-ink); font-size: 0.78rem; font-weight: 600;
}
.es--assets .panel .table-scroll { background: none; border-radius: 0; }
.es--assets .panel .empty-state { color: var(--es-muted); }

/* ---- The cards ---- */
.es--assets .vehicle-card-grid { grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 1rem; padding: 1rem; }
.es--assets .vehicle-card.equipment-card {
    --tone: var(--es-line);
    display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: var(--es-ink);
    border: 1.5px solid color-mix(in srgb, var(--tone) 60%, var(--es-line)); border-radius: 12px; box-shadow: none;
    background: color-mix(in srgb, var(--tone) 5%, var(--es-panel));
}
.es--assets .vehicle-card.equipment-card:hover { border-color: var(--es-focus); }
.es--assets .equipment-card:has(.badge-flag--danger) { --tone: var(--a-overdue); }
.es--assets .equipment-card:has(.badge-flag--warning) { --tone: var(--a-soon); }
.es--assets .equipment-card.vehicle-card--dead { opacity: 0.6; }
.es--assets .equipment-card .vehicle-card__photo { aspect-ratio: 11 / 5; border-bottom: 1px solid var(--es-line); background: linear-gradient(135deg, color-mix(in srgb, var(--tone) 14%, var(--es-field)), var(--es-field)); }
.es--assets .equipment-card .vehicle-card__photo--cover { background: var(--es-field); }
[data-bs-theme="dark"] .es--assets .equipment-card .vehicle-card__photo--empty { background: linear-gradient(135deg, color-mix(in srgb, var(--tone) 14%, var(--es-field)), var(--es-field)); }
.es--assets .equipment-card .vehicle-card__initial { font-family: inherit; font-size: 1.6rem; font-weight: 600; color: var(--es-muted); }
.es--assets .equipment-card .vehicle-card__body { padding: 0.7rem 0.85rem 0.8rem; gap: 0.15rem; }
.es--assets .equipment-card .vehicle-card__reg { font-family: inherit; font-size: 0.98rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--es-ink); }
.es--assets .equipment-card .vehicle-card__model { font-size: 0.8rem; color: var(--es-muted); }
.es--assets .equipment-card .vehicle-card__loc { font-size: 0.8rem; }
/* Location on the left, next due on the right of one row (the due badge keeps its right edge even with no location);
   a long location gives way with an ellipsis rather than pushing the badge off the card. */
.es--assets .equipment-card__row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.15rem; }
.es--assets .equipment-card__row .vehicle-card__loc { min-width: 0; flex: 1 1 auto; display: flex; align-items: center; gap: 0.25rem; }
.es--assets .equipment-card__loc-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.es--assets .equipment-card__due { flex: none; margin-inline-start: auto; }
/* Active is alone at the very bottom of the card — the same place on every card, since the body fills the card and the
   badge block is pushed to its foot. */
.es--assets .equipment-card .vehicle-card__body { flex: 1 1 auto; }
.es--assets .equipment-card .vehicle-card__badges { flex-direction: column; align-items: flex-start; gap: 0.35rem; margin-top: auto; padding-top: 0.5rem; }
.es--assets .badge-flag {
    --bt: var(--a-none); display: inline-flex; align-items: center; padding: 0.18rem 0.6rem; border-radius: 999px; font-family: inherit;
    font-size: 0.74rem; font-weight: 600; letter-spacing: 0; text-transform: none;
    color: var(--bt); background: color-mix(in srgb, var(--bt) 14%, transparent); border: 1px solid color-mix(in srgb, var(--bt) 40%, transparent);
}
.es--assets .badge-flag--danger { --bt: var(--a-overdue); }
.es--assets .badge-flag--warning { --bt: var(--a-soon); }
.es--assets .badge-flag--active { --bt: var(--a-ok); }
.es--assets .badge-flag--neutral { --bt: var(--a-none); }
.es--assets .data-table__reg .entity-link, .es--assets .entity-link { color: #000; text-decoration: none; font-weight: 600; }
[data-bs-theme="dark"] .es--assets .entity-link { color: #fff; }
.es--assets .entity-link:hover { text-decoration: underline; }

/* ---- The individual asset page (/workshop/equipment/{id}): `.es .es--assets .es--asset` ---- */
.es--asset .es-head__actions form { margin: 0; display: inline-flex; }
.es--asset .btn--danger { color: var(--a-overdue); border-color: color-mix(in srgb, var(--a-overdue) 50%, transparent); background: var(--es-field); }
.es--asset .btn--danger:hover { background: color-mix(in srgb, var(--a-overdue) 12%, transparent); border-color: var(--a-overdue); color: var(--a-overdue); }
.es--asset .panel { margin-bottom: 1rem !important; }
.es--asset .panel__body { padding: 1rem; }
.es--asset .panel__body > p { margin: 0.9rem 0 0; color: var(--es-ink); font-size: 0.9rem; line-height: 1.5; }
.es--asset .detail-grid { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1rem 1.5rem; }
.es--asset .detail-grid dt { font-family: inherit; text-transform: none; letter-spacing: 0.02em; font-size: 0.74rem; font-weight: 600; color: var(--es-muted); }
.es--asset .detail-grid dd { margin: 0.2rem 0 0; font-size: 0.95rem; color: var(--es-ink); }
/* A panel that is a form (the upload card) takes the panel's own padding and the full width. */
.es--asset .panel.form-card { max-width: none; padding: 0; }
.es--asset .panel.form-card > .section-heading {
    display: flex; align-items: center; gap: 0.6rem; margin: 0; padding: 0.8rem 1rem 0.7rem; border-bottom: 1px solid var(--es-line);
    font-size: 0.98rem; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--es-ink);
}
.es--asset .panel.form-card > .section-heading::before { display: none; }
.es--asset .panel.form-card > form, .es--asset .panel.form-card > .form-hint, .es--asset .panel.form-card > p { margin: 1rem; }
/* Fields: the same boxes as the list's filter bar. */
.es--asset .field label { font-family: inherit; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.02em; text-transform: none; color: var(--es-muted); }
.es--asset .field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .es--asset .field select, .es--asset .field textarea {
    box-sizing: border-box; min-height: 2.1rem; padding: 0.35rem 0.8rem; border: 1px solid var(--es-line-2); border-radius: 8px; font: inherit; font-size: 0.88rem;
    background-color: var(--es-field); color: var(--es-ink); box-shadow: none;
}
.es--asset .field input:focus, .es--asset .field select:focus, .es--asset .field textarea:focus {
    outline: none; border-color: var(--es-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--es-focus) 22%, transparent);
}
.es--asset .form-hint { color: var(--es-muted); font-size: 0.82rem; }
/* Photos: rounded tiles on the panel's own colour; the cover keeps its hi-vis ring. */
.es--asset .photo-grid { gap: 0.75rem; }
.es--asset .photo-tile { border: 1px solid var(--es-line); border-radius: 10px; overflow: hidden; background: var(--es-field); }
.es--asset .photo-tile--cover { box-shadow: inset 0 0 0 2px var(--es-focus); }
.es--asset .section-heading { font-family: inherit; }
/* The file chooser: the same box as the other fields — no charcoal fill — with its button drawn like the page's buttons. */
.es--asset .field input[type="file"], [data-bs-theme="dark"] .es--asset .field input[type="file"] {
    box-sizing: border-box; width: 100%; padding: 0.35rem 0.5rem; border: 1px solid var(--es-line-2); border-radius: 8px;
    background: var(--es-field); color: var(--es-ink); font: inherit; font-size: 0.88rem; box-shadow: none;
}
.es--asset .field input[type="file"]::file-selector-button {
    height: 1.85rem; margin-inline-end: 0.7rem; padding: 0 0.8rem; border: 1px solid var(--es-line-2); border-radius: 7px;
    background: var(--es-panel); color: var(--es-ink); font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer;
}
.es--asset .field input[type="file"]::file-selector-button:hover { border-color: var(--es-focus); }

/* ---- The asset page, packed: no panel runs the width with little in it ---- */
.es--asset .es-asset-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem; align-items: start; }
.es--asset .es-asset-grid > .panel { margin: 0 !important; min-width: 0; }
.es--asset .es-asset-grid > .es-asset-grid__wide { grid-column: 1 / -1; }
@media (max-width: 1100px) { .es--asset .es-asset-grid { grid-template-columns: minmax(0, 1fr); } }
.es--asset .es-stats { margin-bottom: 0.85rem; }
.es--asset .panel > .panel__heading { padding: 0.6rem 0.9rem 0.55rem; }
[data-bs-theme="dark"] .es--asset .panel__heading { padding-inline-start: 0.9rem; }
.es--asset .panel__body { padding: 0.8rem 0.9rem; }
.es--asset .panel__body > p { margin-top: 0.6rem; }
.es--asset .detail-grid { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.65rem 1.25rem; }
/* An empty section is a single quiet line, not a tall blank panel. */
.es--asset .empty-state { padding: 0.8rem 0.9rem; text-align: start; font-size: 0.85rem; color: var(--es-muted); }
.es--asset .data-table thead th { padding: 0.5rem 0.75rem; }
.es--asset .data-table tbody td { padding: 0.45rem 0.75rem; }
/* "Add schedule" and its siblings sit tight under the table. */
.es--asset .panel__body > details, .es--asset .panel__body > .btn { margin: 0; }
.es--asset .photo-grid { gap: 0.6rem; }
/* The upload card: type, file and the button on one row. */
.es--asset .panel.form-card > .section-heading { padding: 0.6rem 0.9rem 0.55rem; }
.es--asset .panel.form-card > form { margin: 0.8rem 0.9rem; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem; }
.es--asset .panel.form-card > form > .form-grid { flex: 1 1 18rem; grid-template-columns: minmax(7rem, 0.6fr) minmax(0, 1fr); gap: 0.75rem; }
.es--asset .panel.form-card > form > .form-actions { margin: 0; padding: 0; }
/* Two stacks, each as tall as its own panels: schedules over records on the left, photos over upload on the right, so a short panel
   never leaves a gap beside a tall one. */
.es--asset .es-asset-col { display: flex; flex-direction: column; gap: 0.85rem; min-width: 0; }
.es--asset .es-asset-col > .panel { margin: 0 !important; }
.es--asset .badge-flag { white-space: nowrap; }
/* In the half-width panels a table must fit without a scrollbar: tighter cells, headings that may wrap, a snug actions cell. */
.es--asset .es-asset-col .data-table thead th { white-space: normal; padding: 0.45rem 0.6rem; line-height: 1.2; }
.es--asset .es-asset-col .data-table tbody td { padding: 0.4rem 0.6rem; }
.es--asset .es-asset-col .data-table__actions { white-space: nowrap; }
.es--asset .es-asset-col .data-table__actions > * + * { margin-inline-start: 0.3rem; }

/* ---- Graduated green neon on the technician cards ----
   The edge is a gradient, a muted shade of the RepairSphere logo green at the top left fading to deep green at the bottom right, with a soft green glow
   outside and a faint one inside. Cards that need attention (idle too long, over the estimate, idle) keep their solid
   red / amber edge instead, so they still stand out from the green. */
.es--tech {
    --neon-a: #05b36e; --neon-b: #048a56; --neon-c: #02442d; --neon-glow: rgba(5, 179, 110, 0.06);
    /* The card fill: the same graduation, as a wash over the card colour (stronger at the top left, fading out). */
    --neon-fill: linear-gradient(155deg, rgba(5, 179, 110, 0.04) 0%, rgba(4, 138, 86, 0.02) 55%, rgba(2, 68, 45, 0.01) 100%);
}
[data-bs-theme="dark"] .es--tech {
    --neon-a: #05b36e; --neon-b: #048a56; --neon-c: #02442d; --neon-glow: rgba(5, 179, 110, 0.11);
    --neon-fill: linear-gradient(155deg, rgba(5, 179, 110, 0.05) 0%, rgba(4, 138, 86, 0.025) 55%, rgba(2, 68, 45, 0.015) 100%);
}
.es--tech .tech-card {
    border: 1.5px solid transparent;
    background:
        var(--neon-fill) padding-box,
        linear-gradient(var(--es-panel), var(--es-panel)) padding-box,
        linear-gradient(155deg, var(--neon-a) 0%, var(--neon-b) 55%, var(--neon-c) 100%) border-box;
    box-shadow: 0 0 16px -3px var(--neon-glow), inset 0 0 20px -12px var(--neon-glow);
}
.es--tech .tech-card--clock-idle,
.es--tech .tech-card--clock-idle_long,
.es--tech .tech-card--clock-overrun {
    border-color: var(--tech-band);
    background: var(--neon-fill) padding-box, linear-gradient(var(--es-panel), var(--es-panel)) padding-box;
    box-shadow: 0 0 14px -4px color-mix(in srgb, var(--tech-band) 55%, transparent);
}
/* An idle card that is not yet "too long" reads amber, the rest of the alert set keeps the band colour. */
.es--tech .tech-card--clock-idle:not(.tech-card--clock-idle_long) { --tech-band: var(--t-idle); }

/* The panel round the cards (and the table view) takes the same graduated blue neon edge and glow as the cards inside it. */
.es--tech .panel {
    border: 1.5px solid transparent;
    background:
        linear-gradient(var(--es-panel), var(--es-panel)) padding-box,
        linear-gradient(155deg, var(--neon-a) 0%, var(--neon-b) 55%, var(--neon-c) 100%) border-box;
    box-shadow: 0 0 22px -4px var(--neon-glow), inset 0 0 26px -14px var(--neon-glow);
}
/* Inside the cards the job box and the empty photo slot take a faint tint of the green, not black boxes. */
.es--tech .tech-card__job-row, .es--tech .tech-card__job-row + .tech-card__job-row {
    background: color-mix(in srgb, var(--neon-b) 5%, rgba(0, 0, 0, 0.30)); border-color: color-mix(in srgb, var(--neon-b) 22%, transparent);
}
[data-bs-theme="light"] .es--tech .tech-card__job-row, [data-bs-theme="light"] .es--tech .tech-card__job-row + .tech-card__job-row { background: rgba(255, 255, 255, 0.7); }
.es--tech .tech-card__photo, .es--tech .tech-card__photo--empty,
[data-bs-theme="dark"] .es--tech .tech-card__photo--empty {
    background: color-mix(in srgb, var(--neon-b) 8%, rgba(0, 0, 0, 0.35)); border-color: color-mix(in srgb, var(--neon-a) 25%, transparent);
}
[data-bs-theme="light"] .es--tech .tech-card__photo, [data-bs-theme="light"] .es--tech .tech-card__photo--empty { background: color-mix(in srgb, var(--neon-b) 5%, #fff); }

/* ------------------------------------------------------------------
   Trolleys (/parts/trolleys), Total Loss Parking (/total-loss) and the Job Archive (/jobs/archive) — the same look again.
   Each page wraps itself in `.es .es--assets`, so the panel, table, badge, chip and button rules above apply unchanged;
   what follows is only what those pages add.
   ------------------------------------------------------------------ */
.es-intro { margin: 0.2rem 0 1rem; max-width: 60rem; font-size: 0.88rem; line-height: 1.45; color: var(--es-muted); }
.es--assets .es-head .es-intro { margin-bottom: 0; }
.es--assets .es-stats + .es-intro { margin-top: 1rem; }
.es--assets .form-success {
    margin: 1rem 0 0; padding: 0.6rem 0.9rem; border-radius: 8px; font-size: 0.86rem;
    color: var(--a-ok); background: color-mix(in srgb, var(--a-ok) 12%, transparent); border: 1px solid color-mix(in srgb, var(--a-ok) 40%, transparent);
}
.es--assets .panel + .panel, .es--assets .es-stats + .panel, .es--assets .es-intro + .panel, .es--assets .form-success + .panel { margin-top: 1rem; }
.es--assets .es-stats + .panel { margin-top: 1.1rem; }

/* The new-trolley form and the archive's filter bar sit in the page head / panel, in the shared field style. */
.es--assets input[type="number"], .es--assets .filter-bar input, .es--assets .filter-bar select {
    height: 2.1rem; padding: 0 0.6rem; border: 1px solid var(--es-line-2); border-radius: 8px; background: var(--es-field); color: var(--es-ink); font: inherit; font-size: 0.84rem;
}
.es--assets input[type="number"]:focus, .es--assets .filter-bar input:focus, .es--assets .filter-bar select:focus {
    outline: none; border-color: var(--es-focus); box-shadow: 0 0 3px color-mix(in srgb, var(--es-focus) 40%, transparent);
}
.es--assets .es-head__actions label { font-size: 0.82rem; color: var(--es-muted); }
.es--assets .es-archive > .filter-bar, .es--assets .es-archive > .situation-filter, .es--assets .es-archive > form { margin: 0.9rem 1rem 0; }
.es--assets .es-archive .table-tools { margin: 0.9rem 1rem; }
.es--assets .es-archive .empty-state { padding: 1.25rem 1rem; }

/* ---- The trolley cards: the asset cards' shape, a neutral edge, green for an available trolley ---- */
.es--assets .vehicle-card-grid--trolleys { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.es--assets .vehicle-card.trolley-card {
    --tone: var(--es-line);
    display: flex; flex-direction: column; overflow: hidden; color: var(--es-ink);
    border: 1.5px solid color-mix(in srgb, var(--tone) 60%, var(--es-line)); border-radius: 12px; box-shadow: none;
    background: color-mix(in srgb, var(--tone) 5%, var(--es-panel));
}
.es--assets .trolley-card:has(.badge-flag--active) { --tone: var(--a-ok); }
.es--assets .trolley-card:has(.badge-flag--warning) { --tone: var(--a-soon); }
.es--assets .vehicle-card.trolley-card.is-row-link:hover:not(:has(.vehicle-card__photo-link:hover)),
.es--assets .vehicle-card.trolley-card:focus-within:not(:has(.vehicle-card__photo-link:focus-visible)) { border-color: var(--es-focus); box-shadow: none; }
.es--assets .trolley-card .vehicle-card__photo { border-bottom: 1px solid var(--es-line); background: linear-gradient(135deg, color-mix(in srgb, var(--tone) 14%, var(--es-field)), var(--es-field)); }
.es--assets .trolley-card .vehicle-card__photo--cover { background: var(--es-field); }
.es--assets .trolley-card .vehicle-card__initial { font-family: inherit; font-weight: 600; color: var(--es-muted); }
.es--assets .trolley-card .vehicle-card__body { flex: 1 1 auto; padding: 0.7rem 0.85rem 0.8rem; gap: 0.15rem; }
.es--assets .trolley-card .vehicle-card__reg { font-family: inherit; font-size: 0.98rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--es-ink); }
.es--assets .trolley-card .vehicle-card__model { font-size: 0.8rem; color: var(--es-muted); }
.es--assets .trolley-card .vehicle-card__badges { flex-wrap: wrap; gap: 0.35rem; margin-top: auto; padding-top: 0.5rem; }

/* ---- The individual trolley page (/parts/trolleys/{id}): `.es .es--assets .es--asset .es--trolley` ---- */
.es--trolley .es-head__title { min-width: 0; }
.es--trolley .es-rename { display: flex; align-items: center; gap: 0.5rem; margin: 0.1rem 0 0.3rem; }
.es--trolley .es-rename__input {
    box-sizing: border-box; height: 2.6rem; min-width: 16rem; padding: 0 0.8rem; border: 1px solid var(--es-line-2); border-radius: 8px;
    background: var(--es-field); color: var(--es-ink); font: inherit; font-size: 1.5rem; font-weight: 600;
}
.es--trolley .es-rename__input:focus { outline: none; border-color: var(--es-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--es-focus) 22%, transparent); }
.es--trolley .es-qr { display: block; margin-top: 0.9rem; border-radius: 8px; background: #fff; padding: 0.4rem; }
.es--trolley .es-form-row { margin-top: 0.9rem; }
.es--trolley .es-form-row .field label, .es--trolley .es-upload label { font-size: 0.74rem; font-weight: 600; color: var(--es-muted); }
.es--trolley .es-form-row select, .es--trolley textarea {
    box-sizing: border-box; min-height: 2.1rem; padding: 0.35rem 0.8rem; border: 1px solid var(--es-line-2); border-radius: 8px;
    background-color: var(--es-field); color: var(--es-ink); font: inherit; font-size: 0.88rem; box-shadow: none;
}
.es--trolley .es-form-row select:focus, .es--trolley textarea:focus { outline: none; border-color: var(--es-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--es-focus) 22%, transparent); }
.es--trolley .es-inline { display: inline-flex; margin: 0; }
.es--trolley .es-section-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 1.1rem 0 0.85rem; }
.es--trolley .es-section-head form { margin: 0; }
.es--trolley .es-section-head .section-heading { display: flex; align-items: center; gap: 0.6rem; margin: 0; padding-inline-start: 0; font-size: 1.05rem; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--es-ink); }
.es--trolley .es-section-head .section-heading::before { display: none; }
.es--trolley .es-section-head .panel-count {
    min-width: 1.6rem; padding: 0.05rem 0.5rem; border-radius: 999px; text-align: center;
    background: color-mix(in srgb, var(--es-muted) 18%, transparent); color: var(--es-ink); font-size: 0.78rem; font-weight: 600;
}
.es--trolley .es-shelf-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.es--trolley .es-shelf-head form { margin: 0; }
/* The photo, file and upload button of a card on one row. */
.es--trolley .es-upload { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 0.8rem 0 0; }
.es--trolley .es-upload input[type="file"] {
    box-sizing: border-box; flex: 1 1 12rem; min-width: 0; padding: 0.35rem 0.5rem; border: 1px solid var(--es-line-2); border-radius: 8px;
    background: var(--es-field); color: var(--es-ink); font: inherit; font-size: 0.84rem;
}
.es--trolley .es-upload input[type="file"]::file-selector-button {
    height: 1.85rem; margin-inline-end: 0.7rem; padding: 0 0.8rem; border: 1px solid var(--es-line-2); border-radius: 7px;
    background: var(--es-panel); color: var(--es-ink); font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer;
}
.es--trolley .es-upload input[type="file"]::file-selector-button:hover { border-color: var(--es-focus); }
.es--trolley .es-shelf-item { border-top: 1px solid var(--es-line); }
.es--trolley .es-shelf-item__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.es--trolley .es-shelf-item__row > div:last-child { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.es--trolley .es-shelf-item__row p { margin: 0 0 0.35rem; }
.es--trolley .cover-picker__hint { color: var(--es-muted); font-size: 0.8rem; }
.es--trolley .es-shelves > .panel { min-width: 0; }

/* ------------------------------------------------------------------
   Stock management (/stock cockpit with its four tabs, the stock item page and form, request browse, level suggestions) — the
   same look again. The cockpit, browse and suggestions pages wrap themselves in `.es .es--assets .es--stock`; the stock item
   page and its form in `.es .es--assets .es--asset` (the single-item page rules above). What follows restyles what those
   pages draw with the app's older classes: the tab bar, the count tiles, the filter row, supplier / job groups and row forms.
   ------------------------------------------------------------------ */
.es--assets .es-stockvalue { text-align: end; line-height: 1.1; }
.es--assets .es-stockvalue b { display: block; font-size: 1.7rem; font-weight: 600; color: var(--es-ink); font-variant-numeric: tabular-nums; }
.es--assets .es-stockvalue span { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.02em; color: var(--es-muted); }
.es--assets .es-head__actions .form-hint { margin: 0; }

/* The tab bar: an underline in the accent green, not a boxed Bootstrap tab. */
.es--assets .nav.nav-tabs, .es--assets .nav.pc-tabs { gap: 0.25rem; margin-bottom: 1.1rem; border-bottom: 1px solid var(--es-line); }
.es--assets .nav-tabs .nav-link {
    margin: 0 0 -1px; padding: 0.55rem 0.95rem; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none;
    font-size: 0.9rem; font-weight: 600; color: var(--es-muted);
}
.es--assets .nav-tabs .nav-link:hover { color: var(--es-ink); border-bottom-color: var(--es-line-2); }
.es--assets .nav-tabs .nav-link.active { color: var(--es-ink); background: none; border-bottom-color: var(--es-focus); }

/* Count tiles (the older .board-tile): the panel colour, a status-coloured edge, a quiet figure. */
.es--assets .board-tile {
    --tone: var(--a-none); box-sizing: border-box; padding: 0.7rem 0.9rem; border: 1.5px solid color-mix(in srgb, var(--tone) 55%, var(--es-line)); border-left-width: 1.5px;
    border-radius: 12px; background: var(--es-panel); box-shadow: none; color: var(--es-ink);
}
.es--assets .board-tile--green { --tone: var(--a-ok); }
.es--assets .board-tile--amber { --tone: var(--a-soon); }
.es--assets .board-tile--red { --tone: var(--a-overdue); }
.es--assets .board-tile--blue { --tone: var(--es-converted); }
.es--assets .board-tile--neutral { --tone: var(--a-none); }
.es--assets .board-tile .board-tile__count { font-family: inherit; font-size: 1.6rem; font-weight: 600; line-height: 1.1; color: var(--es-ink); font-variant-numeric: tabular-nums; }
.es--assets .board-tile--status .board-tile__count { font-size: 1.5rem; }
.es--assets .board-tile .board-tile__count--zero { color: var(--es-muted); opacity: 0.7; }
.es--assets .board-tile--red .board-tile__count:not(.board-tile__count--zero), .es--assets .board-tile--loss .board-tile__count { color: var(--a-overdue); }
.es--assets .board-tile .board-tile__label { margin-top: 0.2rem; font-size: 0.8rem; font-weight: 600; color: var(--es-muted); }
.es--assets .board-tile .board-tile__hint { margin-top: 0.3rem; font-family: inherit; font-size: 0.72rem; letter-spacing: 0; text-transform: none; color: var(--es-muted); }
.es--assets .board-tile .board-tile__absent { font-size: 0.95rem; color: var(--es-muted); }
.es--assets .board-grid { gap: 0.75rem; }
.es--assets a.board-tile:hover, .es--assets .pc-tile.is-active { border-color: var(--es-focus); box-shadow: none; transform: none; }

/* The cockpit's tile groups. */
.es--stock .pc-ledger { gap: 1rem; margin-bottom: 1rem; }
.es--stock .pc-group__label, .es--stock .pc-section-label, .es--stock .pc-subchips__lead {
    margin: 0 0 0.4rem 0.1rem; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.02em; text-transform: none; color: var(--es-muted);
}
.es--stock .pc-section-label { margin-top: 1.1rem; }
.es--stock .pc-tiles { gap: 0.6rem; }
.es--stock .pc-tile .board-tile__label { min-height: 2.4em; }
.es--assets .pc-tile__sub { font-size: 0.7rem; letter-spacing: 0; text-transform: none; opacity: 1; color: var(--es-muted); }
.es--assets .pc-meta { font-size: 0.78rem; letter-spacing: 0; text-transform: none; color: var(--es-muted); }
.es--assets .pc-sub { color: var(--es-muted); }
.es--assets .pc-suggest { color: var(--a-soon); }
.es--assets .pc-incoming, [data-bs-theme="dark"] .es--assets .pc-incoming { color: var(--es-converted); }

/* Filters, category chips and search. */
.es--assets .pc-filters { gap: 0.6rem; margin-bottom: 1rem; }
.es--assets .pc-filters select, .es--assets .pc-filters input, .es--assets .pc-search input, .es--assets .pc-condition {
    box-sizing: border-box; height: 2.1rem; padding: 0 0.7rem; border: 1px solid var(--es-line-2); border-radius: 8px;
    background-color: var(--es-field); color: var(--es-ink); font: inherit; font-size: 0.84rem; box-shadow: none;
}
.es--assets .pc-filters select:focus, .es--assets .pc-filters input:focus, .es--assets .pc-search input:focus {
    outline: none; border-color: var(--es-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--es-focus) 22%, transparent);
}
.es--assets .pc-rowform select, .es--assets .pc-rowform input, .es--assets .pc-storage-input {
    box-sizing: border-box; height: 1.85rem; padding: 0 0.5rem; border: 1px solid var(--es-line-2); border-radius: 7px;
    background-color: var(--es-field); color: var(--es-ink); font: inherit; font-size: 0.78rem;
}
.es--assets .pc-rowform select:focus, .es--assets .pc-rowform input:focus, .es--assets .pc-storage-input:focus { outline: none; border-color: var(--es-focus); }
.es--assets .pc-worklist__head { align-items: center; margin-bottom: 0.6rem; }

/* Supplier and job groups: a panel with an accent edge, the plate and WIP in quiet colours. */
.es--stock .pc-jobgroup { border-inline-start: 3px solid var(--es-focus); }
.es--stock .pc-jobgroup + .pc-jobgroup { margin-top: 0.85rem; }
.es--stock .pc-jobgroup__head { padding: 0.8rem 1rem 0.6rem; }
.es--stock .pc-supplier { font-size: 0.98rem; font-weight: 600; color: var(--es-ink); }
.es--stock .pc-jobgroup__count { font-size: 0.74rem; letter-spacing: 0; text-transform: none; color: var(--es-muted); }
.es--stock .pc-plate, [data-bs-theme="dark"] .es--stock .pc-plate { color: var(--es-ink); font-size: 0.98rem; font-weight: 600; }
.es--stock .pc-wip, [data-bs-theme="dark"] .es--stock .pc-wip { color: var(--es-muted); font-weight: 600; font-size: 0.86rem; }

/* The stock cards on the inventory tab and the request browse: the trolley card's shape. */
.es--stock .vehicle-card-grid { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; padding: 1rem; }
.es--assets .vehicle-card.stock-card {
    --tone: var(--es-line); display: flex; flex-direction: column; overflow: hidden; color: var(--es-ink);
    border: 1.5px solid color-mix(in srgb, var(--tone) 60%, var(--es-line)); border-radius: 12px; box-shadow: none;
    background: color-mix(in srgb, var(--tone) 5%, var(--es-panel));
}
.es--assets .stock-card:has(.badge-flag--active) { --tone: var(--a-ok); }
.es--assets .stock-card:has(.badge-flag--warning) { --tone: var(--a-soon); }
.es--assets .stock-card:has(.badge-flag--danger) { --tone: var(--a-overdue); }
.es--assets .vehicle-card.stock-card:hover { border-color: var(--es-focus); box-shadow: none; transform: none; }
.es--assets .stock-card .vehicle-card__photo { border-bottom: 1px solid var(--es-line); background: linear-gradient(135deg, color-mix(in srgb, var(--tone) 14%, var(--es-field)), var(--es-field)); }
.es--assets .stock-card .vehicle-card__photo--cover { background: var(--es-field); }
.es--assets .stock-card .vehicle-card__initial { font-family: inherit; font-weight: 600; color: var(--es-muted); }
.es--assets .stock-card .vehicle-card__body { flex: 1 1 auto; padding: 0.7rem 0.85rem 0.8rem; gap: 0.15rem; }
.es--assets .stock-card .vehicle-card__reg { font-family: inherit; font-size: 0.95rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--es-ink); }
.es--assets .stock-card .vehicle-card__model, .es--assets .stock-card .vehicle-card__loc, .es--assets .stock-card__value { color: var(--es-muted); }
.es--assets .stock-card .vehicle-card__badges { flex-wrap: wrap; gap: 0.35rem; margin-top: auto; padding-top: 0.5rem; }
.es--assets .stock-card__ask { border-top: 1px solid var(--es-line); }
.es--assets .stock-card__ask select, .es--assets .stock-card__ask input { height: 1.85rem; padding: 0 0.5rem; border: 1px solid var(--es-line-2); border-radius: 7px; background-color: var(--es-field); color: var(--es-ink); font: inherit; font-size: 0.78rem; }

/* The tables inside the stock panels. */
.es--stock .panel .table-scroll { background: none; border-radius: 0; }
.es--stock .panel .empty-state, .es--assets .panel .empty-state { color: var(--es-muted); }
.es--stock .data-table { width: 100%; }
.es--assets .form-error {
    margin: 1rem 0 0; padding: 0.6rem 0.9rem; border-radius: 8px; font-size: 0.86rem;
    color: var(--a-overdue); background: color-mix(in srgb, var(--a-overdue) 10%, transparent); border: 1px solid color-mix(in srgb, var(--a-overdue) 40%, transparent);
}
.es--stock .es-head + .form-error, .es--stock .es-head + .form-success { margin-top: 1rem; }

/* The stock item page and its form: the forms are the full add/edit grid, not the asset page's one-row upload, so the packed
   one-row layout of `.es--asset` is put back to a plain stacked form here. */
.es--stockitem .panel.form-card > form, .es--people .panel.form-card > form { display: block; margin: 1rem; }
.es--stockitem .panel.form-card > form > .form-grid, .es--people .panel.form-card > form > .form-grid { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.85rem 1rem; }
.es--stockitem .panel.form-card > form > .form-grid > .field--full, .es--people .panel.form-card > form > .form-grid > .field--full { grid-column: 1 / -1; }
.es--stockitem .panel.form-card > form > .form-actions, .es--people .panel.form-card > form > .form-actions { margin-top: 1rem; display: flex; gap: 0.6rem; }
.es--stockitem .panel.form-card > .form-error, .es--people .panel.form-card > .form-error { margin: 1rem; }
.es--stockitem .panel.form-card, .es--people .panel.form-card { padding: 0; }
.es--stockitem .field__hint, .es--people .field__hint { color: var(--es-muted); font-size: 0.78rem; }
.es--stockitem .es-head__actions form, .es--people .es-head__actions form { margin: 0; display: inline-flex; }
.es--stockitem .board-grid, .es--people .board-grid { margin-bottom: 1rem !important; }

/* ---- Job Parts tab: no table wider than its text needs ----
   Each job's panel is as wide as its table (not the page), and a column is as wide as its longest likely entry: a part description
   wraps after ~26rem (a long OEM description plus its part number), a supplier or contact after ~13rem, the rest hug their content.
   The app's `min-width: max-content` on a table-scroll table is lifted here, since it would stop a long description wrapping. */
.es--stock .pc-jobs .pc-jobgroup, .es--stock .pc-jobs > .panel { width: fit-content; min-width: min(100%, 34rem); max-width: 100%; }
.es--stock .pc-jobs .table-scroll .data-table { width: auto; min-width: 100%; }
.es--stock .pc-jobs .data-table thead th { white-space: nowrap; }
.es--stock .pc-jobs .data-table tbody td { vertical-align: top; }
.es--stock .pc-jobs .pc-cell-text { max-width: 26rem; overflow-wrap: anywhere; }
.es--stock .pc-jobs .pc-col-supplier .pc-cell-text, .es--stock .pc-jobs .pc-col-contact .pc-cell-text { max-width: 13rem; }
.es--stock .pc-jobs .pc-col-part .eyebrow { margin-inline-start: 0.35rem; white-space: nowrap; }
.es--stock .pc-jobs .pc-col-job, .es--stock .pc-jobs .pc-col-status, .es--stock .pc-jobs .pc-col-qty { white-space: nowrap; width: 1%; }
.es--stock .pc-jobs .pc-col-status .pc-sub { white-space: normal; max-width: 11rem; }
.es--stock .pc-jobs .pc-col-actions { white-space: nowrap; width: 1%; text-align: end; }
.es--stock .pc-jobs .pc-col-actions .pc-rowform { vertical-align: top; }
.es--stock .pc-jobs .pc-col-actions .pc-rowform + .pc-rowform { margin-inline-start: 0.4rem; }
.es--stock .pc-jobs .pc-col-actions select { max-width: 9rem; }
.es--stock .pc-jobs .pc-jobgroup__head { gap: 0.5rem 1.5rem; }
.es--stock .pc-jobs .pc-col-supplier select.pc-supplier-select { max-width: 13rem; height: 1.85rem; }
.es--stock .pc-jobs .pc-col-expected { width: 1%; }
.es--assets .pc-rowform input.pc-date-input { width: 8.5rem; padding: 0 0.4rem; }
/* The day-first date field (date_dmy_controller) in a Job Parts row: a compact text box plus its calendar button, not full width. */
.es--stock .pc-col-expected .date-dmy { width: 10.5rem; }
.es--stock .pc-col-expected .date-dmy__text {
    box-sizing: border-box; height: 1.85rem; padding: 0 0.5rem; border: 1px solid var(--es-line-2); border-radius: 7px;
    background-color: var(--es-field); color: var(--es-ink); font: inherit; font-size: 0.78rem;
}
.es--stock .pc-col-expected .date-dmy__text:focus { outline: none; border-color: var(--es-focus); }
.es--stock .pc-col-expected .date-dmy__pick { width: 1.85rem; height: 1.85rem; border: 1px solid var(--es-line-2); border-radius: 7px; background: var(--es-field); color: var(--es-muted); }
.es--stock .pc-col-expected .date-dmy__pick:hover { border-color: var(--es-focus); }

/* ------------------------------------------------------------------
   Personnel (Absences, Approvals, Attended Hours, Calendar, My Team, Overtime, Record Sick, Staff, Staff Records and its training /
   leave / documents / disciplinary tabs, Technician Schedule, Workforce settings) — the same look again. Each page wraps itself in
   `.es .es--assets .es--asset .es--people`: panels, tables, badges, buttons and fields come from the rules above; the form-card
   layout reset is shared with the stock item pages (see `.es--stockitem` above). What follows is only what these pages add.
   ------------------------------------------------------------------ */
.es--people .es-head__actions { align-items: center; }
.es--people .es-head__actions .view-toggle { display: inline-flex; gap: 0.3rem; }
.es--people .view-toggle .btn.btn--secondary { border-color: var(--es-focus); background: color-mix(in srgb, var(--es-focus) 14%, transparent); }
.es--people .view-toggle .btn.btn--ghost { background: var(--es-field); }
.es--people .section-intro, .es--people .panel__heading > p, .es--people .text-secondary { color: var(--es-muted); font-size: 0.86rem; }
.es--people .panel__heading > p { margin: 0; }
.es--people .panel.form-card > .section-heading, .es--people .panel.form-card form > .section-heading {
    display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.85rem; font-size: 0.98rem; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--es-ink);
}
.es--people .panel.form-card form > .section-heading::before, .es--people .panel.form-card > .section-heading::before { display: none; }
.es--people .panel.form-card form > .section-heading:not(:first-of-type) { margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--es-line); }
.es--people .check-row label, .es--people .checkbox, .es--people .check-group label { color: var(--es-ink); font-size: 0.88rem; }
.es--people .field select, .es--people .field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]), .es--people .field textarea { max-width: 100%; }

/* Month navigation (Calendar, Technician Schedule): the shared button look, not the old mono uppercase pills. */
.es--people .wf-calendar-nav { display: inline-flex; gap: 0.4rem; }
.es--people .wf-calendar-nav a {
    display: inline-flex; align-items: center; height: 2.1rem; padding: 0 0.95rem; border: 1px solid var(--es-line-2); border-radius: 8px;
    background: var(--es-field); color: var(--es-ink); font-family: inherit; font-size: 0.84rem; font-weight: 600; letter-spacing: 0; text-transform: none; text-decoration: none;
}
.es--people .wf-calendar-nav a:hover { border-color: var(--es-focus); }
.es--people .wf-legend { color: var(--es-muted); margin-bottom: 1rem; }
.es--people .wf-calendar-scroll { border: 1px solid var(--es-edge); border-radius: 12px; background: var(--es-panel); }
.es--people .wf-calendar-table thead th { background: var(--es-panel); border-bottom-color: var(--es-line); font-family: inherit; }
[data-bs-theme="dark"] .es--people .wf-calendar-table th, [data-bs-theme="dark"] .es--people .wf-calendar-table td { border-bottom-color: var(--es-row-line); border-right-color: var(--es-row-line); }
[data-bs-theme="dark"] .es--people .wf-calendar-table .wf-calendar__name, [data-bs-theme="dark"] .es--people .wf-calendar-table .wf-calendar__total { background: var(--es-panel); }
.es--people .wf-calendar-table td.is-today { background-image: linear-gradient(color-mix(in srgb, var(--es-focus) 12%, transparent), color-mix(in srgb, var(--es-focus) 12%, transparent)); }
.es--people .wf-calendar-table { --wk-l: none; --wk-r: none; }
.es--people .wf-calendar-table :not(.is-weekend) + .is-weekend { --wk-l: inset 2px 0 0 0 var(--es-line-2); }
.es--people .wf-calendar-table .is-weekend:has(+ :not(.is-weekend)), .es--people .wf-calendar-table .is-weekend:last-child { --wk-r: inset -2px 0 0 0 var(--es-line-2); }
.es--people .wf-calendar-group-heading td { color: var(--es-muted); }

/* Staff records: the person head, the section tabs and the staff cards. */
.es--people .records-person__photo { border: 1px solid var(--es-line-2); background: var(--es-field); color: var(--es-muted); }
.es--people .records-tabs { display: flex; gap: 0.25rem; margin: 1.1rem 0 1.1rem; border-bottom: 1px solid var(--es-line); overflow-x: auto; }
.es--people .records-tabs__tab {
    margin: 0 0 -1px; padding: 0.55rem 0.95rem; border: 0; border-bottom: 2px solid transparent; font-size: 0.9rem; font-weight: 600; color: var(--es-muted); text-decoration: none; white-space: nowrap;
}
.es--people .records-tabs__tab:hover { color: var(--es-ink); border-bottom-color: var(--es-line-2); }
.es--people .records-tabs__tab.is-current { color: var(--es-ink); border-bottom-color: var(--es-focus); }
.es--people .tech-card-grid { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 1rem; }
.es--people .tech-card {
    border: 1.5px solid var(--es-line-2); border-radius: 12px; background: var(--es-panel); box-shadow: none; color: var(--es-ink); overflow: hidden;
}
.es--people a.tech-card:hover, .es--people .tech-card:hover { border-color: var(--es-focus); box-shadow: none; transform: none; }
.es--people .tech-card__photo, .es--people .tech-card__photo--empty { background: linear-gradient(135deg, color-mix(in srgb, var(--es-muted) 14%, var(--es-field)), var(--es-field)); border-bottom: 1px solid var(--es-line); }
.es--people .tech-card__initial { font-family: inherit; font-weight: 600; color: var(--es-muted); }
.es--people .tech-card__name { font-family: inherit; color: var(--es-ink); letter-spacing: 0; text-transform: none; }
.es--people .tech-card__site, .es--people .tech-card__count-label { color: var(--es-muted); }
.es--people .tech-card__count { font-family: inherit; color: var(--es-ink); font-variant-numeric: tabular-nums; }

/* The figure tiles (days left, overtime totals). */
.es--people .kpi-stats { gap: 0.75rem; }
.es--people .kpi-stat {
    padding: 0.8rem 1rem; border: 1.5px solid var(--es-line-2); border-radius: 12px; background: var(--es-panel); box-shadow: none;
}
.es--people .kpi-stat__n { font-family: inherit; font-weight: 600; color: var(--es-ink); font-variant-numeric: tabular-nums; }
.es--people .kpi-stat__n--green { color: var(--a-ok); }
.es--people .kpi-stat__n--amber { color: var(--a-soon); }
.es--people .kpi-stat__n--red { color: var(--a-overdue); }
.es--people .kpi-stat__n--neutral { color: var(--es-muted); }
.es--people .kpi-stat__label { font-family: inherit; font-size: 0.8rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--es-muted); }
.es--people .kpi-stat--hero { background: var(--es-panel); border-color: var(--es-focus); }
.es--people .kpi-stat--hero .kpi-stat__n { color: var(--es-focus); }
.es--people .kpi-stat--hero .kpi-stat__label { color: var(--es-muted); }

/* Attended hours and the person lookup. */
.es--people .attended-hours__figure { font-variant-numeric: tabular-nums; color: var(--es-ink); }
.es--people .attended-hours__pending { color: var(--a-soon); }
.es--people .typeahead__results { background: var(--es-panel); border: 1px solid var(--es-line-2); border-radius: 8px; color: var(--es-ink); }
.es--people .typeahead__item:hover, .es--people .typeahead__item.is-active { background: color-mix(in srgb, var(--es-focus) 12%, transparent); }

/* Technician schedule: the grid takes the panel edge; the rail is a panel. */
.es--people .ts-layout { gap: 1rem; }
.es--people .ts-grid { border-color: var(--es-edge); border-radius: 12px; }

/* ---- Staff Records cards: the Live Technician Status card, for staff ----
   Same portrait photo, name / site / status badge, green gradient edge and glow, inside the same glowing panel. The
   state colour comes from the training status (current = on-job green, expiring = amber, expired = red, none = grey). */
.es--people {
    --t-job: #0a8f63; --t-idle: #b87800; --t-late: #c4271d; --t-off: #8a94a3;
    --neon-a: #05b36e; --neon-b: #048a56; --neon-c: #02442d; --neon-glow: rgba(5, 179, 110, 0.06);
    --neon-fill: linear-gradient(155deg, rgba(5, 179, 110, 0.04) 0%, rgba(4, 138, 86, 0.02) 55%, rgba(2, 68, 45, 0.01) 100%);
}
[data-bs-theme="dark"] .es--people {
    --t-job: #2ddf94; --t-idle: #f6b93b; --t-late: #ff6b5f; --t-off: #7d8791;
    --neon-glow: rgba(5, 179, 110, 0.11);
    --neon-fill: linear-gradient(155deg, rgba(5, 179, 110, 0.05) 0%, rgba(4, 138, 86, 0.025) 55%, rgba(2, 68, 45, 0.015) 100%);
}
.es--people .panel[data-view="cards"], .es--people .panel[data-view="table"] {
    border: 1.5px solid transparent; border-radius: 12px; overflow: hidden;
    background: linear-gradient(var(--es-panel), var(--es-panel)) padding-box, linear-gradient(155deg, var(--neon-a) 0%, var(--neon-b) 55%, var(--neon-c) 100%) border-box;
    box-shadow: 0 0 22px -4px var(--neon-glow), inset 0 0 26px -14px var(--neon-glow);
}
.es--people .panel[data-view][hidden] { display: none; }
.es--people .tech-card-grid { grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr)); grid-auto-rows: 1fr; gap: 0.7rem; padding: 0.85rem; align-items: stretch; }
.es--people .tech-card {
    --tech-accent: var(--t-off); --tech-band: var(--tech-accent);
    display: flex; flex-direction: column; padding: 0; overflow: visible; color: var(--es-ink);
    border: 1.5px solid transparent; border-radius: 12px; transform: none;
    background: var(--neon-fill) padding-box, linear-gradient(var(--es-panel), var(--es-panel)) padding-box, linear-gradient(155deg, var(--neon-a) 0%, var(--neon-b) 55%, var(--neon-c) 100%) border-box;
    box-shadow: 0 0 16px -3px var(--neon-glow), inset 0 0 20px -12px var(--neon-glow);
}
.es--people .tech-card::after { display: none; }
.es--people .tech-card--current { --tech-accent: var(--t-job); }
.es--people .tech-card--no_expiry { --tech-accent: var(--t-off); }
.es--people .tech-card--expiring_soon { --tech-accent: var(--t-idle); }
.es--people .tech-card--expired { --tech-accent: var(--t-late); }
.es--people .tech-card--none { --tech-accent: var(--t-off); }
.es--people .tech-card--expiring_soon, .es--people .tech-card--expired {
    border-color: var(--tech-accent); background: var(--neon-fill) padding-box, linear-gradient(var(--es-panel), var(--es-panel)) padding-box;
    box-shadow: 0 0 14px -4px color-mix(in srgb, var(--tech-accent) 55%, transparent);
}
.es--people a.tech-card:hover, .es--people .tech-card:hover { border-color: transparent; }
.es--people .tech-card--expiring_soon:hover, .es--people .tech-card--expired:hover { border-color: var(--tech-accent); }
.es--people .tech-card__link { display: flex; flex-direction: column; flex: 1; gap: 0.5rem; padding: 0.65rem 0.75rem; color: inherit; text-decoration: none; }
.es--people .tech-card__top { display: flex; align-items: center; gap: 0.8rem; }
.es--people .tech-card__photo {
    position: relative; flex: none; width: 4.6rem; height: 5.6rem; aspect-ratio: auto; border-radius: 11px; overflow: hidden;
    display: grid; place-items: center; border: 1px solid var(--es-line-2);
    background: linear-gradient(135deg, color-mix(in srgb, var(--es-muted) 16%, var(--es-field)), color-mix(in srgb, var(--es-muted) 6%, var(--es-field)));
}
.es--people .tech-card__initial { font-size: 1.35rem; color: var(--es-ink); }
.es--people .tech-card__who { min-width: 0; flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; }
.es--people .tech-card__name { font-size: 0.98rem; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.es--people .tech-card__site { font-size: 0.78rem; line-height: 1.2; font-weight: 600; color: #0a9d68; }
[data-bs-theme="dark"] .es--people .tech-card__site { color: var(--bs-hi-vis); }
.es--people .tech-card__badges { margin-top: 0.2rem; }
.es--people .tech-badge { font-size: 0.74rem; padding: 0.18rem 0.6rem; border: 1px solid color-mix(in srgb, var(--tech-accent) 40%, transparent); }
.es--people .tech-card__body { padding: 0; }
.es--people .tech-card__count { display: flex; align-items: baseline; gap: 0.4rem; font-size: 1rem; font-weight: 700; }
.es--people .tech-card__count-label { font-size: 0.8rem; font-weight: 400; }

/* ---- Technician Schedule: the whole month across the full page width ----
   The suggestions pane drops below the grid (it only exists when there is something to decide), so the grid takes the whole
   row, and its day columns share the width equally: no sideways scroll at desktop widths, 28-31 days always visible. */
.es--people .ts-layout { grid-template-columns: minmax(0, 1fr); }
.es--people .ts-layout > .panel:first-child { padding: 1rem 1.1rem; }
.es--people .ts-grid .wf-calendar-table { width: 100%; min-width: 60rem; table-layout: fixed; }
.es--people .ts-grid .wf-calendar-table .wf-calendar__name { width: 9.5rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.es--people .ts-grid .wf-calendar-table th, .es--people .ts-grid .wf-calendar-table td { padding-inline: 0.15rem; }
.es--people .ts-grid .wf-calendar-table td { height: 3rem; }
.es--people .ts-grid .ts-cell { min-width: 0; width: 100%; max-width: 3.2rem; height: 2.4rem; padding-inline: 0.1rem; }
.es--people .ts-grid .ts-cell__chip { max-width: 100%; }

/* Full-bleed to the sidebar: no centred cap and only a slim gutter either side, for the month grid. */
.app__main.app__main--flush:has(> .es) { max-width: none; margin: 0; padding-inline: 0.75rem; }
.es--people .ts-grid .wf-calendar-table thead th.wf-calendar__name { text-align: center; vertical-align: middle; }

/* ---- Public holiday: neon blue, in the legend and on the calendars (Calendar and Technician Schedule) ---- */
.es--people { --holiday-neon: #00a2f5; }
[data-bs-theme="dark"] .es--people { --holiday-neon: #1fb8ff; }
.es--people .wf-cell--public_holiday, .es--people .ts-cell--holiday {
    color: var(--holiday-neon); font-weight: 700;
    background: color-mix(in srgb, var(--holiday-neon) 14%, transparent);
    border-color: color-mix(in srgb, var(--holiday-neon) 60%, transparent);
    text-shadow: 0 0 6px color-mix(in srgb, var(--holiday-neon) 45%, transparent);
}

/* Legend: every swatch the same size and every swatch + label centred on one line. The schedule's swatches are also
   `.ts-cell`, which would otherwise give them that cell's own width, height and auto margins. */
.es--people .wf-legend { align-items: center; gap: 0.5rem 1.4rem; }
.es--people .wf-legend__item { align-items: center; line-height: 1; }
.es--people .wf-legend__swatch, .es--people .wf-legend__swatch.ts-cell {
    width: 1.6rem; height: 1.6rem; min-width: 1.6rem; max-width: none; margin: 0; padding: 0; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
}
.es--people .wf-legend__item > span:not(.wf-legend__swatch) { display: inline-flex; align-items: center; }

/* ---- Technician Schedule: one letter and colour per absence type ----
   H booked holiday (green), PH public holiday (neon blue, above), S sick (red), A unpaid leave (purple), other absence (grey). */
.es--people .ts-cell--absence_sick { background: color-mix(in srgb, #d64545 14%, transparent); border-color: color-mix(in srgb, #d64545 55%, transparent); color: #c4271d; }
.es--people .ts-cell--absence_unpaid { background: color-mix(in srgb, #7a4fd6 14%, transparent); border-color: color-mix(in srgb, #7a4fd6 55%, transparent); color: #7a4fd6; }
.es--people .ts-cell--absence_other { background: color-mix(in srgb, #8a94a3 14%, transparent); border-color: color-mix(in srgb, #8a94a3 55%, transparent); color: #6b7380; }
[data-bs-theme="dark"] .es--people .ts-cell--absence_sick { color: #ff6b5f; }
[data-bs-theme="dark"] .es--people .ts-cell--absence_unpaid { color: #a98bff; }
[data-bs-theme="dark"] .es--people .ts-cell--absence_other { color: #9aa2aa; }
/* "PH" is two letters: keep it inside the legend swatch. */
.es--people .wf-legend__swatch.ts-cell--holiday { font-size: 0.55rem; letter-spacing: -0.02em; }

/* ---- Booked holiday (H): dark neon blue, on the Technician Schedule and the Calendar, legend included ----
   Deeper than the public-holiday neon blue (PH) so the two stay apart. The half-day fill follows it. */
.es--people { --hol-dark: #1f5bff; }
[data-bs-theme="dark"] .es--people { --hol-dark: #3d7bff; }
.es--people .ts-cell--absence_holiday, .es--people .wf-cell--absence_holiday {
    --wf-fill: color-mix(in srgb, var(--hol-dark) 16%, var(--es-panel));
    color: var(--hol-dark); font-weight: 700;
    background: color-mix(in srgb, var(--hol-dark) 16%, transparent);
    border-color: color-mix(in srgb, var(--hol-dark) 65%, transparent);
    text-shadow: 0 0 6px color-mix(in srgb, var(--hol-dark) 45%, transparent);
}
.es--people .wf-cell--second-absence_holiday { --wf-fill-2: color-mix(in srgb, var(--hol-dark) 16%, var(--es-panel)); }
.es--people .wf-cell--half-am.wf-cell--absence_holiday { background: linear-gradient(135deg, var(--wf-fill) 50%, transparent 50%); }
.es--people .wf-cell--half-pm.wf-cell--absence_holiday { background: linear-gradient(135deg, transparent 50%, var(--wf-fill) 50%); }
.es--people .wf-cell--half-am.wf-cell--split.wf-cell--absence_holiday { background: linear-gradient(135deg, var(--wf-fill) 50%, var(--wf-fill-2) 50%); }
.es--people .ts-grid .wf-calendar-table tbody th.wf-calendar__name { padding-inline-start: 1.1rem; text-align: left; }

/* ------------------------------------------------------------------
   Settings menu and its sub-pages — the same look again. Pages wrap themselves in
   `.es .es--assets .es--asset .es--people .es--settings`; panels, badges, buttons and fields come from the rules above.
   ------------------------------------------------------------------ */
/* Form cards: one even inset all round, whether the content is a <form> or loose headings / lists / paragraphs. */
.es--settings.es--people .panel.form-card { padding: 1rem 1.1rem; max-width: 56rem; }
.es--settings.es--people .panel.form-card > form,
.es--settings.es--people .panel.form-card > .form-hint,
.es--settings.es--people .panel.form-card > p,
.es--settings.es--people .panel.form-card > .form-error { margin: 0 0 0.9rem; }
.es--settings.es--people .panel.form-card > form { margin-bottom: 0; }
.es--settings.es--people .panel.form-card > .section-heading,
.es--settings.es--people .panel.form-card > h2 { margin: 0 0 0.6rem; padding: 0; border: 0; }
.es--settings .section-heading { font-size: 0.98rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--es-ink); }
.es--settings .section-heading::before { display: none; }
.es--settings .text-secondary, .es--settings .kpi-empty { color: var(--es-muted); font-size: 0.86rem; }
.es--settings > p.text-secondary { margin: 0 0 0.9rem; }

/* Tables: columns take only the width their content needs, long names and text wrap instead of forcing the table wider,
   and the action column hugs its buttons. */
.es--settings .panel .table-scroll { background: none; border-radius: 0; }
.es--settings .data-table { width: 100%; }
.es--settings .data-table thead th { padding: 0.5rem 0.75rem; white-space: nowrap; }
.es--settings .data-table tbody td, .es--settings .data-table tbody th { padding: 0.45rem 0.75rem; vertical-align: middle; overflow-wrap: anywhere; }
.es--settings .data-table td.data-table__actions, .es--settings .data-table th.data-table__actions { width: 1%; white-space: nowrap; overflow-wrap: normal; }
.es--settings .data-table .badge-flag, .es--settings .data-table .btn { white-space: nowrap; }
.es--settings .data-table input:not([type="checkbox"]):not([type="radio"]), .es--settings .data-table select { max-width: 100%; min-width: 4rem; }
@media (max-width: 860px) { .es--settings .table-scroll .data-table { min-width: 0; } }
.es--settings .panel { margin-bottom: 1rem; }
.es--settings .panel > .empty-state { padding: 0.8rem 0.9rem; text-align: start; font-size: 0.85rem; color: var(--es-muted); }

/* ---- Settings tables, tighter still ----
   A panel holding a table now shrinks to the table's own width (and grows with its content up to the page width) instead of
   stretching a few short columns across the whole row; long names / text wrap, and a wide table scrolls inside the panel. */
.es--settings .panel:has(> .table-scroll > .data-table:not(.kpi-targets__table)),
.es--settings .panel:has(> .table-scroll > table:not(.kpi-targets__table)) { width: fit-content; max-width: 100%; min-width: min(100%, 22rem); }
.es--settings .panel > .table-scroll { max-width: 100%; }
.es--settings .data-table thead th, .es--settings .data-table tbody td, .es--settings .data-table tbody th { padding-inline: 0.65rem; }
.es--settings .data-table thead th:first-child, .es--settings .data-table tbody td:first-child { padding-inline-start: 0.9rem; }
.es--settings .data-table thead th:last-child, .es--settings .data-table tbody td:last-child { padding-inline-end: 0.9rem; }
/* Fields inside table cells size to what they hold, not to the column. */
.es--settings .data-table td input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]) { width: auto; field-sizing: content; min-width: 4rem; max-width: 22rem; }
.es--settings .data-table td select { width: auto; max-width: 20rem; }
.es--settings .data-table td form { margin: 0; }
/* KPI targets keep their fixed column grid (so tabs line up), just without the 52rem floor and the outsized padding. */
.es--settings .kpi-targets__table { min-width: 40rem; }
.es--settings .kpi-targets__group { padding: 0.8rem 1rem 0.4rem; margin-bottom: 1rem; }
.es--settings .kpi-targets__col-target { width: 10.5rem; }
.es--settings .kpi-targets__col-margin { width: 7rem; }
.es--settings .kpi-targets__col-clear { width: 4.5rem; }

/* ---- KPI targets & visibility: one section, two tabs ---- */
/* The two role tables (technician roles, office roles) sit side by side and stack on a narrow screen. */
.es--settings .kpi-vis-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); gap: 0 1.25rem; align-items: start; }
.es--settings .kpi-vis-col .panel { width: 100%; }
.es--settings .kpi-vis-col .section-heading { margin: 0.25rem 0 0.5rem; }
.es--settings .kpi-vis-col .text-secondary { margin: 0 0 0.5rem; max-width: none; }
.es--settings .panel:has(> .table-scroll > .data-table) .data-table td:nth-child(2) { font-variant-numeric: tabular-nums; }
/* The sites list on the targets tab: a compact, content-width list. */
.es--settings .panel[style*="padding:1.25rem"] { padding: 0.4rem 0 !important; margin-bottom: 1rem !important; }
.es--settings .panel[style*="padding:1.25rem"] > .empty-state { padding: 0.8rem 0.9rem; }
.es--settings .records-tabs { margin-top: 0; }

/* ---- Settings: text-entry boxes with a grey fill (dark theme) are deep graphite (#0e1012) ----
   The boxes inside a `.field` are already true black and stay that way; this reaches the others — the table filter / search
   boxes, the inline fields in table rows, standalone selects and notes. background-color only, so search icons and select
   arrows survive. */
[data-bs-theme="dark"] .es--settings :is(input, select, textarea):not(.field *):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
[data-bs-theme="dark"] .es--settings .table-tools__search,
[data-bs-theme="dark"] .es--settings .table-tools__filter {
    background-color: #0e1012;
}

/* Service providers > tag management: the "Tag Name" box lines up, left edge and width, with the name boxes in the rows below. */
.es--settings .tags-panel .inline-form { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin: 0; }
.es--settings .tags-panel .tags-panel__add { margin-bottom: 0.75rem; }
.es--settings .tags-panel .tags-panel__add input[type="text"],
.es--settings .tags-panel .data-table td:first-child input[type="text"] { width: 16rem; max-width: 100%; field-sizing: fixed; margin: 0; }
.es--settings .tags-panel .data-table td:first-child { padding-inline-start: 0; }
.es--settings .tags-panel .data-table thead th:first-child { padding-inline-start: 0; }
.es--settings .tags-panel .table-scroll { background: none; }

/* Service provider names stay clickable (and the whole row opens them) but read as plain bold text, not as an underlined link. */
.es--settings a.sp-name-link, .es--settings a.sp-name-link:hover, .es--settings a.sp-name-link:focus-visible { color: var(--es-ink); text-decoration: none; }
.es--settings a.sp-name-link:focus-visible { outline: 2px solid var(--es-focus); outline-offset: 2px; border-radius: 3px; }

/* ------------------------------------------------------------------
   Messages (inbox, compose, one message) — the same look again. Pages wrap themselves in
   `.es .es--assets .es--asset .es--people .es--messages`.
   ------------------------------------------------------------------ */
.es--messages .panel { margin-bottom: 1rem; }
.es--messages .panel > .empty-state { padding: 0.8rem 0.9rem; text-align: start; font-size: 0.85rem; color: var(--es-muted); }
/* The message list: a quiet row per message — who and what on the left, when on the right — and unread ones carry the green accent. */
.es--messages .notif-list { border-radius: 0; }
.es--messages .panel > .notif-list { border-radius: 0 0 12px 12px; }
.es--messages .notif { padding: 0.55rem 0.9rem; gap: 0.9rem; border-bottom: 1px solid var(--es-row-line); background: transparent; }
.es--messages .notif:hover { background: var(--es-row-hover); }
.es--messages .notif--unread, [data-bs-theme="dark"] .es--messages .notif--unread {
    background: color-mix(in srgb, var(--es-focus) 9%, transparent); box-shadow: inset 3px 0 0 var(--es-focus);
}
.es--messages .notif--unread .entity-link { font-weight: 700; }
.es--messages .notif__main { flex-wrap: wrap; gap: 0.4rem 0.6rem; }
.es--messages .notif__when { font-family: inherit; font-size: 0.78rem; letter-spacing: 0; color: var(--es-muted); font-variant-numeric: tabular-nums; }
.es--messages .notif__chip { font-size: 0.74rem; color: var(--es-muted); }
.es--messages .entity-link { color: var(--es-ink); }
/* One message. */
.es--messages .detail-grid { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.65rem 1.25rem; margin-bottom: 0.9rem; }
.es--messages .detail-grid dt { font-family: inherit; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.02em; text-transform: none; color: var(--es-muted); }
.es--messages .detail-grid dd { font-size: 0.92rem; color: var(--es-ink); }
.es--messages .message-body { margin: 0; padding: 0.8rem 0.95rem; border: 1px solid var(--es-line); border-radius: 10px; background: var(--es-field); color: var(--es-ink); font-size: 0.92rem; line-height: 1.5; }
.es--messages .message-photo { max-height: 22rem; width: auto; border: 1px solid var(--es-line-2); border-radius: 10px; margin-top: 0.75rem; }
/* Compose and reply: the shared form-card inset, with the text areas the same boxes as every other field. */
.es--messages .panel.form-card { max-width: 56rem; padding: 1rem 1.1rem; }
.es--messages .panel.form-card > form { margin: 0; }
.es--messages .panel.form-card > .section-heading { margin: 0 0 0.6rem; padding: 0; border: 0; }
.es--messages .field textarea { min-height: 5rem; resize: vertical; }
.es--messages .field { margin-bottom: 0.75rem; }

/* Compose: the "To" picker — search, then click the radio beside a name to add that colleague (or all of them). */
.es--messages .field__label { display: block; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.02em; color: var(--es-muted); margin-bottom: 0.35rem; }
.es--messages .recipient-picker { position: relative; }
.es--messages .recipient-picker__field {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; min-height: 2.4rem; padding: 0.25rem 0.5rem;
    border: 1px solid var(--es-line-2); border-radius: 8px; background-color: var(--es-field); cursor: text;
}
.es--messages .recipient-picker__field:focus-within { border-color: var(--es-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--es-focus) 22%, transparent); }
.es--messages .recipient-picker__chips { display: contents; }
.es--messages .recipient-picker__chip {
    display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.12rem 0.2rem 0.12rem 0.6rem; border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--es-focus) 45%, transparent); background: color-mix(in srgb, var(--es-focus) 12%, transparent);
    color: var(--es-ink); font-size: 0.82rem; font-weight: 600;
}
.es--messages .recipient-picker__remove { border: 0; background: none; color: var(--es-muted); font-size: 1rem; line-height: 1; padding: 0 0.35rem; cursor: pointer; border-radius: 999px; }
.es--messages .recipient-picker__remove:hover { color: var(--es-ink); background: color-mix(in srgb, var(--es-ink) 12%, transparent); }
.es--messages .recipient-picker__search {
    flex: 1 1 10rem; min-width: 8rem; border: 0 !important; outline: none; box-shadow: none !important; background: transparent !important; color: var(--es-ink);
    font: inherit; font-size: 0.88rem; padding: 0.2rem 0.25rem; min-height: 0; appearance: none; -webkit-appearance: none;
}
.es--messages .recipient-picker__menu {
    position: absolute; z-index: 20; inset-inline: 0; margin: 0.25rem 0 0; padding: 0.25rem 0; list-style: none; max-height: 15rem; overflow-y: auto;
    border: 1px solid var(--es-line-2); border-radius: 10px; background: var(--es-panel); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}
.es--messages .recipient-picker__menu li[hidden] { display: none; }
.es--messages .recipient-picker__option {
    display: flex; align-items: center; gap: 0.65rem; width: 100%; padding: 0.4rem 0.8rem; border: 0; background: none; text-align: start;
    color: var(--es-ink); font: inherit; font-size: 0.88rem; cursor: pointer;
}
.es--messages .recipient-picker__option:hover, .es--messages .recipient-picker__option:focus-visible { background: var(--es-row-hover); outline: none; }
.es--messages .recipient-picker__option--all { border-bottom: 1px solid var(--es-line); font-weight: 600; margin-bottom: 0.15rem; }
.es--messages .recipient-picker__radio {
    flex: none; width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid var(--es-line-2); background: transparent; box-sizing: border-box;
}
.es--messages .recipient-picker__option[aria-selected="true"] .recipient-picker__radio { border-color: var(--es-focus); background: radial-gradient(circle, var(--es-focus) 0 38%, transparent 42%); }
.es--messages .recipient-picker__name { font-weight: 600; }
.es--messages .recipient-picker__email { color: var(--es-muted); font-size: 0.78rem; margin-inline-start: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.es--messages .recipient-picker__none { padding: 0.55rem 0.8rem; font-size: 0.84rem; color: var(--es-muted); }

/* Message subjects: bold in the list, with the start of the message after it; a wide cell on the message page. */
.es--messages .notif__subject { font-weight: 700; color: var(--es-ink); }
.es--messages .notif__preview { color: var(--es-muted); font-weight: 400; }
.es--messages .detail-grid__wide { grid-column: 1 / -1; }

/* ------------------------------------------------------------------
   Help (the manual and the learning course) — the same look again. Pages wrap themselves in `.es .es--assets .es--help`; the rail,
   search, topic cards, reading column, steps, notes, plates and pager keep their markup and behaviour, only their dress changes.
   ------------------------------------------------------------------ */
.es--help { --help-edge: var(--es-edge); }
.es--help .help { gap: 1.5rem; }

/* Contents rail: a panel. */
.es--help .help-rail { background: var(--es-panel); border: 1px solid var(--es-edge); border-radius: 12px; box-shadow: 0 0 18px var(--es-glow); padding: 0.4rem; scrollbar-width: thin; }
.es--help .help-rail__home { padding: 0.6rem 0.7rem; border-radius: 9px; color: var(--es-ink); }
.es--help .help-rail__home:hover { background: var(--es-row-hover); }
.es--help .help-rail__home.is-active { background: color-mix(in srgb, var(--es-focus) 14%, transparent); box-shadow: inset 0 0 0 1px var(--es-focus); }
.es--help .help-rail__home.is-active .eyebrow, .es--help .help-rail__home.is-active .help-rail__hometitle { color: var(--es-ink); }
.es--help .help-rail__hometitle { font-family: inherit; font-size: 1.05rem; font-weight: 600; letter-spacing: 0; text-transform: none; margin-top: 0.1rem; }
.es--help .help-rail__input {
    box-sizing: border-box; min-height: 2.1rem; padding: 0.35rem 0.8rem; border: 1px solid var(--es-line-2); border-radius: 8px;
    background-color: var(--es-field); color: var(--es-ink); font: inherit; font-size: 0.86rem; box-shadow: none;
}
.es--help .help-rail__input:focus, .es--help .help-rail__input:focus-visible { outline: none; border-color: var(--es-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--es-focus) 22%, transparent); }
.es--help .help-rail__chaptertitle { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.02em; text-transform: none; color: var(--es-ink); }
.es--help .help-rail__topics a { color: var(--es-muted); border-radius: 8px; }
.es--help .help-rail__topics a:hover { color: var(--es-ink); background: var(--es-row-hover); }
.es--help .help-rail__topics a.is-active { color: var(--es-ink); border-inline-start-color: var(--es-focus); background: color-mix(in srgb, var(--es-focus) 10%, transparent); }
.es--help .help-rail__empty { color: var(--es-muted); }
.es--help .help-railtoggle {
    display: none; font-family: inherit; font-size: 0.84rem; font-weight: 600; letter-spacing: 0; text-transform: none; height: 2.1rem; padding: 0 0.95rem;
    border: 1px solid var(--es-line-2); border-radius: 8px; background: var(--es-field); color: var(--es-ink);
}
@media (max-width: 860px) { .es--help .help-railtoggle { display: inline-flex; align-items: center; } }

/* Landing: title block, then a card per chapter. */
.es--help .help-lede .page-title { font-size: 1.9rem; font-weight: 600; margin: 0.1rem 0 0.4rem; }
.es--help .help-lede__text { color: var(--es-muted); font-size: 0.95rem; }
.es--help .help-lede .btn { display: inline-flex; align-items: center; min-height: 2.1rem; border-radius: 8px; font-weight: 600; font-size: 0.86rem; }
.es--help .help-contents { gap: 0.85rem; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.es--help .help-card {
    background: var(--es-panel); border: 1px solid var(--es-edge); border-radius: 12px; box-shadow: 0 0 14px var(--es-glow);
    padding: 0.85rem 1rem 0.9rem; transition: border-color 0.15s ease;
}
.es--help .help-card::before { display: none; }
.es--help .help-card:hover { border-color: var(--es-focus); transform: none; }
.es--help .help-card__title { font-family: inherit; font-size: 0.98rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--es-ink); margin: 0 0 0.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--es-line); }
.es--help .help-card__topics li { border-top-color: var(--es-row-line); }
.es--help .help-card__topics a { color: var(--es-ink); font-size: 0.88rem; padding: 0.32rem 0; }
.es--help .help-card__topics a:hover { color: var(--es-focus); }

/* A topic. */
.es--help .help-crumbs { font-family: inherit; font-size: 0.78rem; letter-spacing: 0; text-transform: none; color: var(--es-muted); }
.es--help .help-crumbs a { color: var(--es-muted); }
.es--help .help-crumbs a:hover, .es--help .help-crumbs__here { color: var(--es-ink); }
.es--help .help-topic__head .page-title { font-size: 1.9rem; font-weight: 600; margin: 0.1rem 0 0.3rem; }
.es--help .help-topic__body { color: var(--es-ink); }
.es--help .help-topic__body p, .es--help .help-topic__body li { color: var(--es-ink); }
.es--help .help-topic__body h2 { font-size: 1.15rem; font-weight: 600; padding-top: 0.3rem; }
.es--help .help-topic__body h3 { font-size: 1rem; font-weight: 600; }
.es--help .help-topic__body li::marker { color: var(--es-muted); }
.es--help .help-topic__body a { color: var(--es-green-text); }
.es--help .help-topic__body code { background: var(--es-field); border: 1px solid var(--es-line); color: var(--es-ink); }
.es--help .help-topic__body ol.help-steps > li::before { background: var(--es-focus); color: #04100a; font-family: inherit; font-weight: 700; border-radius: 50%; }
.es--help .help-topic__body .help-note { border-inline-start-color: var(--es-focus); background: color-mix(in srgb, var(--es-focus) 8%, transparent); border-radius: 0 10px 10px 0; }
.es--help .help-topic__body .help-note--warn { border-inline-start-color: var(--es-awaiting); background: color-mix(in srgb, var(--es-awaiting) 10%, transparent); }
.es--help .help-topic__body .help-note__label { font-family: inherit; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; text-transform: none; color: var(--es-muted); }
.es--help .help-topic__body .help-plate img { border: 1px solid var(--es-line-2); box-shadow: none; }
.es--help .help-topic__body .help-plate figcaption { font-family: inherit; font-size: 0.76rem; letter-spacing: 0; text-transform: none; color: var(--es-muted); }
.es--help .help-onthispage__label { font-family: inherit; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.02em; text-transform: none; color: var(--es-muted); }
.es--help .help-onthispage__list { border-inline-start-color: var(--es-line); }
.es--help .help-onthispage__list a { color: var(--es-muted); }
.es--help .help-onthispage__list a:hover { color: var(--es-ink); }
.es--help .help-onthispage__list a.is-active { color: var(--es-ink); border-inline-start-color: var(--es-focus); }
.es--help .help-pager { border-top-color: var(--es-line); }
.es--help .help-pager__link { background: var(--es-panel); border: 1px solid var(--es-edge); border-radius: 12px; }
.es--help .help-pager__link:hover { border-color: var(--es-focus); }
.es--help .help-pager__dir { font-family: inherit; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.02em; text-transform: none; color: var(--es-muted); }
.es--help .help-pager__title { color: var(--es-ink); font-weight: 600; }

/* The learning course. */
.es--help .learning-journey, .es--help .learning-section {
    background: var(--es-panel); border: 1px solid var(--es-edge); border-radius: 12px; box-shadow: 0 0 14px var(--es-glow);
}
.es--help .learning-journey { border-inline-start: 1px solid var(--es-edge); }
.es--help .learning-journey__title, .es--help .learning-course__title { font-size: 1.05rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--es-ink); }
.es--help .learning-journey__progress, .es--help .learning-section__summary, .es--help .learning-section__meta { color: var(--es-muted); }
.es--help .learning-journey__bar { background: var(--es-line); }
.es--help .learning-journey__bar span { background: var(--es-focus); }
.es--help .learning-section { padding: 0.7rem 0.9rem; }
.es--help .learning-section__name { color: var(--es-ink); }
.es--help .learning-section--done { border-inline-start: 3px solid var(--es-focus); }
.es--help .btn { display: inline-flex; align-items: center; height: 2.1rem; padding: 0 0.95rem; border-radius: 8px; font-size: 0.84rem; font-weight: 600; }

/* Help: section headings in neon blue — the chapter titles in the rail and on the landing cards, and the section headings inside a topic. */
.es--help { --help-heading: #00a2f5; }
[data-bs-theme="dark"] .es--help { --help-heading: #1fb8ff; }
.es--help .help-rail__chaptertitle,
.es--help .help-card__title,
.es--help .help-topic__body h2 { color: var(--help-heading); }

/* Messages: the delete buttons. */
.es--messages .notif__delete { margin: 0; flex: none; display: inline-flex; }
.es--messages .panel__heading { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.es--messages .panel__heading-action { margin: 0; }