/* LubeWatch refinement: task-first layout, compact mobile summaries and clear data.
   Uses the incumbent palette and icon family; scoped to the signed-in main app. */
body.shell {
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --ui-muted: #596979;
  --ui-focus: #3A6098;
}
:root[data-theme="dark"] body.shell {
  --ui-muted: #A9B7C7;
  --ui-focus: #9CBEE6;
}
body.shell ::selection { background: var(--gold-200); color: var(--navy-900); }
body.shell :is(input, textarea) { caret-color: var(--ui-focus); }
body.shell :is(button, a, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: 3px;
}
body.shell #view-main > .topbar :focus-visible { outline-color: var(--gold-200); }
body.shell #panes :is(.hint, .row .sub) { color: var(--ui-muted); }
body.shell #panes input::placeholder { color: var(--ui-muted); opacity: 1; }
body.shell #panes :is(.tile .n, .qty, .acti-due) { font-variant-numeric: tabular-nums; }
body.shell #panes :is(.row .name, .row .sub) { overflow-wrap: anywhere; }
body.shell #panes .row > .grow { min-width: 0; }
body.shell #panes > .card { border-radius: var(--r-lg); }
body.shell #panes .view-header h2 { letter-spacing: 0; }
body.shell #panes .tiles { gap: 8px; }
body.shell #panes .tile {
  min-width: 0; min-height: 68px; padding: 12px 14px;
  border-radius: var(--r-lg); gap: 8px;
  box-shadow: none;
}
body.shell #panes .tile::before { display: none; }
body.shell #panes .tile .n { padding: 0; font-weight: 700; font-size: 28px; }
body.shell #panes .tile .l {
  padding: 0; background: none; border-radius: 0;
  color: var(--ink-700); font-size: 12px; letter-spacing: 0;
  text-transform: none; white-space: normal;
}
body.shell #panes .tile.tap:hover { border-color: var(--ui-focus); box-shadow: none; }
body.shell #panes .tile.tap:active { transform: none; background: var(--bg-soft); }
body.shell #panes .pane-card { border-radius: var(--r-lg); }
/* Let dashboard tracks and their cards shrink inside the viewport on desktop too.
   Without a zero minimum, a wide row in either column can enlarge the grid past the page. */
body.shell #panes .dash-grid {
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
}
body.shell #panes .dash-col,
body.shell #panes .dash-grid .pane-card { min-width: 0; }
body.shell #panes .pane-card > .sec { gap: 12px; }
body.shell #panes .pane-card > .sec h2 { min-width: 0; }
body.shell #panes .pane-card > .sec .more { flex-shrink: 0; }
body.shell #panes .hico { border: 0; border-radius: 0; background: none; width: 24px; height: 24px; }
body.shell #panes .row .reg { font-weight: 700; }
body.shell #panes .row .badge.due { color: var(--due-ink); }
body.shell #panes .row .badge.warn { color: var(--warn-ink); }
body.shell #panes .page-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 16px 0;
}
body.shell #panes .page-actions > button {
  margin: 0; min-height: 40px; height: auto; padding: 9px 12px;
  width: auto; border-radius: var(--r-md);
}
/* Explicit action priority, including the desktop ghost-button rule. */
body.shell #panes #btn-as-scan,
body.shell #panes #btn-op-add {
  background: var(--navy-700); border: 1px solid var(--navy-700); color: #fff;
  border-radius: var(--r-md); font-weight: 600;
}
body.shell #panes #btn-as-scan:hover,
body.shell #panes #btn-op-add:hover { background: var(--navy-600); border-color: var(--navy-600); }
body.shell #panes #btn-as-scan .ic { width: 18px; height: 18px; vertical-align: -3px; margin-right: 6px; }
body.shell #panes #stock-list .qty {
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  flex: 0 0 auto; font-size: 17px; font-weight: 700; line-height: 1.4;
}
body.shell #panes #stock-list .qty .badge { font-weight: 500; font-size: 11px; }
body.shell #panes #home-stock .qty { font-size: 15px; font-weight: 700; }
body.shell #panes #stock-list .catgrp > .row { padding-top: 14px; padding-bottom: 14px; }
body.shell #panes #stock-list .row .name { line-height: 1.6; }
body.shell #panes #stock-list .row .sub { margin-top: 3px; }
body.shell #panes :is(#af-q, #stock-q) { border-radius: var(--r-md); background: var(--surface); }
body.shell #panes #asset-name-mode { border-radius: var(--r-md); }
body.shell #panes #asset-list .row { padding-top: 14px; padding-bottom: 14px; }

/* Staff stock: concise overview first, details on demand. */
body.shell #tab-stock .tiles { margin-bottom: 12px; }
body.shell #tab-stock .page-actions { margin: 10px 0 12px; }
body.shell #tab-stock #stock-q { margin: 0 0 12px; }
body.shell #tab-stock .co-stock { margin-bottom: 8px; border-radius: 10px; box-shadow: none; }
body.shell #tab-stock .co-stock > summary {
  min-height: 54px; padding: 10px 14px; gap: 16px;
}
body.shell #tab-stock .co-stock .co-name { min-width: 0; line-height: 1.5; }
body.shell #tab-stock .co-stock-meta {
  display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap;
  gap: 6px; flex: 0 0 auto;
}
body.shell #tab-stock .co-count { color: var(--ui-muted); font-size: 12px; white-space: nowrap; }
body.shell #tab-stock .co-badges { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
body.shell #tab-stock .co-badges:empty { display: none; }

/* Missing product metadata is important, but the list should not dominate the page. */
body.shell #panes details.banner.gapban {
  display: block; width: min(100%, 720px); max-width: 720px;
  padding: 0; overflow: hidden; border-radius: 10px; margin: 8px 0 12px;
}
body.shell #panes details.banner.gapban > summary {
  display: flex; align-items: center; gap: 9px; min-height: 42px;
  margin: 0; padding: 8px 12px; border: 0; list-style: none; cursor: pointer;
  font-size: 12.5px; font-weight: 500;
}
body.shell #panes details.banner.gapban > summary::-webkit-details-marker { display: none; }
body.shell #panes details.banner.gapban > summary .ic { flex: 0 0 auto; margin: 0; }
body.shell #panes .gap-toggle {
  margin-left: auto; padding-left: 10px; color: inherit; font-size: 11.5px;
  font-weight: 700; white-space: nowrap;
}
body.shell #panes .gap-hide,
body.shell #panes details.gapban[open] .gap-show { display: none; }
body.shell #panes details.gapban[open] .gap-hide { display: inline; }
body.shell #panes .gapbody { padding: 0 12px 12px 36px; border-top: 1px solid var(--warn-line); }
body.shell #panes .gapbody > p { margin: 10px 0 8px; font-size: 12px; line-height: 1.6; }
body.shell #panes .gapban .gaplist { margin-top: 0; gap: 5px; }
body.shell #panes .gapban .gaplist .more {
  min-height: 32px; height: auto; padding: 5px 9px; font-size: 11.5px; border-radius: 999px;
}

/* Product catalogue: compact cards are easier to scan than one long ruled list. */
body.shell #adm-products > .sec:first-child { margin: 18px 0 10px; }
body.shell #adm-products > .sec:first-child h2 { margin: 0; }
body.shell #adm-products #prod-bar { margin: 10px 0 12px; }
body.shell #adm-prod-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
body.shell #adm-prod-list .adm-product-row {
  min-width: 0; margin: 0; padding: 12px; align-items: flex-start;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
}
body.shell #adm-prod-list .adm-product-row:last-child { border-bottom: 1px solid var(--line); }
body.shell #adm-prod-list .adm-product-row .name { line-height: 1.55; }
body.shell #adm-prod-list .adm-product-row .sub { margin-top: 3px; line-height: 1.55; }
body.shell #adm-prod-list .adm-product-row .qty { margin-left: 8px; }
body.shell #adm-prod-list .adm-product-row .rowtools { display: flex; gap: 4px; margin: 0; }

/* Account: calm profile overview with clear identity and security zones. */
body.shell #tab-account { max-width: 900px; padding: 0; overflow: hidden; }
body.shell #tab-account .account-hero {
  display: flex; align-items: center; gap: 16px; padding: 22px 24px;
  background: linear-gradient(135deg, var(--navy-700), var(--navy-600)); color: #fff;
}
body.shell #tab-account .account-avatar {
  display: grid; place-items: center; flex: 0 0 auto; width: 56px; height: 56px;
  border: 1px solid #ffffff4d; border-radius: 16px; background: #ffffff18;
  color: #fff; font-size: 20px; font-weight: 700; letter-spacing: .5px;
}
body.shell #tab-account .account-kicker {
  margin-bottom: 2px; color: var(--gold-300); font-size: 11px; font-weight: 700;
  letter-spacing: .8px; text-transform: uppercase;
}
body.shell #tab-account .account-hero h2 { margin: 0; color: #fff; font-size: 21px; line-height: 1.4; }
body.shell #tab-account .account-hero .hint { max-width: 660px; margin: 3px 0 0; color: #e8eef5; line-height: 1.6; }
body.shell #tab-account .account-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
  padding: 18px 18px 10px;
}
body.shell #tab-account .account-field {
  position: relative; min-width: 0; min-height: 106px; padding: 14px 15px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface-alt);
}
body.shell #tab-account .account-label {
  color: var(--ui-muted); font-size: 11px; font-weight: 700; letter-spacing: .3px;
}
body.shell #tab-account .account-value {
  margin-top: 8px; color: var(--ink-900); font-size: 16px; font-weight: 700;
  line-height: 1.5; overflow-wrap: anywhere;
}
body.shell #tab-account .account-email { font-size: 14px; font-weight: 600; }
body.shell #tab-account .account-note { margin-top: 5px; color: var(--ui-muted); font-size: 11.5px; line-height: 1.5; }
body.shell #tab-account .account-role {
  display: inline-flex; align-items: center; min-height: 26px; padding: 3px 9px;
  border: 1px solid var(--info-line); border-radius: 999px;
  background: var(--info-bg); color: var(--info-ink); font-size: 12px;
}
body.shell #tab-account .account-field-actions { position: absolute; top: 11px; right: 11px; }
body.shell #tab-account .account-field-actions .more { margin: 0; font-size: 11.5px; }
body.shell #tab-account :is(#mn-msg, #cn-msg):empty { display: none; }
body.shell #tab-account :is(#mn-msg, #cn-msg):not(:empty) { grid-column: 1 / -1; margin: 0; }
body.shell #tab-account .account-security {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  margin: 8px 18px 18px; padding: 15px 16px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--surface);
}
body.shell #tab-account .account-security-title { margin-top: 3px; font-size: 14px; font-weight: 700; }
body.shell #tab-account .account-security .hint { margin: 2px 0 0; }
body.shell #tab-account #btn-pw { flex: 0 0 auto; min-height: 40px; margin: 0; }

/* Header: keep the primary workspace quiet and move personal/device actions into one profile menu. */
body.shell #view-main > .topbar .profile-menu {
  position: relative; flex: 0 0 auto; min-width: 0; margin: 0;
}
body.shell #view-main > .topbar .profile-menu > summary {
  list-style: none; cursor: pointer; user-select: none;
}
body.shell #view-main > .topbar .profile-menu > summary::-webkit-details-marker { display: none; }
body.shell #view-main > .topbar .topbar-user {
  min-height: 38px; padding: 4px 7px; border: 1px solid transparent;
  border-radius: 10px; transition: background .14s, border-color .14s, box-shadow .14s;
}
body.shell #view-main > .topbar .profile-menu[open] > .topbar-user,
body.shell #view-main > .topbar .topbar-user:hover {
  background: var(--bg-soft); border-color: var(--line);
}
body.shell #view-main > .topbar .topbar-identity { min-width: 0; }
body.shell #view-main > .topbar .profile-chevron {
  width: 14px; height: 14px; margin-left: 2px; color: var(--ui-muted);
  transition: transform .14s ease;
}
body.shell #view-main > .topbar .profile-menu[open] .profile-chevron { transform: rotate(180deg); }
body.shell #view-main > .topbar .profile-popover {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 120;
  width: 280px; padding: 7px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); color: var(--ink-900); box-shadow: var(--shadow-pop);
}
body.shell #view-main > .topbar .profile-popover-head {
  display: flex; flex-direction: column; gap: 2px; padding: 9px 10px 10px;
  border-bottom: 1px solid var(--line);
}
body.shell #view-main > .topbar .profile-popover-head strong {
  font-size: 13px; line-height: 1.5; overflow-wrap: anywhere;
}
body.shell #view-main > .topbar .profile-popover-head span {
  color: var(--ui-muted); font-size: 11px; line-height: 1.45; overflow-wrap: anywhere;
}
body.shell #view-main > .topbar .profile-popover button {
  display: flex; align-items: center; justify-content: flex-start; gap: 10px;
  width: 100%; min-height: 40px; margin: 2px 0 0; padding: 8px 10px;
  border: 0; border-radius: 8px; background: transparent; color: var(--ink-700);
  font-size: 12.5px; font-weight: 500; text-align: left;
}
body.shell #view-main > .topbar .profile-popover button:hover { background: var(--bg-soft); color: var(--ink-900); }
body.shell #view-main > .topbar .profile-popover button .ic { width: 17px; height: 17px; color: var(--ui-muted); }
body.shell #view-main > .topbar .profile-theme-icon { display: inline-flex; }
body.shell #view-main > .topbar .profile-signout { border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; }

/* Staff administration: one job per sidebar entry, with only closely-related catalogue tabs kept in-page. */
body.shell #tab-admin { max-width: 1060px; }
body.shell #tab-admin .admin-page-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  margin: 0 0 16px; padding: 2px 0 16px; border-bottom: 1px solid var(--line);
}
body.shell #tab-admin .admin-page-head > div { min-width: 0; }
body.shell #tab-admin .admin-page-head h2 { margin: 0; font-size: 22px; line-height: 1.35; }
body.shell #tab-admin .admin-page-head .hint { max-width: 680px; margin: 5px 0 0; line-height: 1.6; }
body.shell #tab-admin #btn-admin-newco {
  flex: 0 0 auto; width: auto; min-height: 38px; margin: 0; padding: 8px 13px;
  border-radius: 8px; background: var(--navy-700); color: #fff;
}
body.shell #tab-admin .admin-catalog-nav { width: fit-content; margin: 0 0 16px; }
body.shell #tab-admin .admin-back {
  width: auto; min-height: 38px; margin: 0 0 14px; padding: 8px 12px;
}
body.shell #tab-admin :is(#adm-models, #adm-logos) > .sec:first-child { margin-top: 0 !important; }
body.shell.web #tab-admin .filters,
body.shell.web #tab-stickers :is(#prod-bar, #stk-bar) {
  grid-template-columns: minmax(240px, 380px) minmax(240px, 1fr);
}
body.shell.web #tab-admin .filters .filter-feedback,
body.shell.web #tab-stickers :is(#prod-bar, #stk-bar) .filter-feedback {
  margin: 0; min-height: 34px;
}
@media (max-width: 899px) {
  body.shell.web #tab-admin .filters { grid-template-columns: minmax(0, 1fr); }
  body.shell.web #tab-admin .filters > * { min-width: 0; max-width: 100%; }
}
@media (min-width: 900px) {
  body.shell.web #view-main > .topbar { height: 58px; gap: 10px; padding: 0 28px; }
  body.shell.web #view-main > .topbar :focus-visible { outline-color: var(--ui-focus); }
  body.shell.web .topbar-search { width: min(31vw, 390px); flex-shrink: 1; min-width: 180px; }
  body.shell.web #view-main > .topbar .profile-menu { order: 2; }
  body.shell.web #view-main > .topbar .topbar-user { max-width: 330px; padding-right: 9px; }
  body.shell.web #view-main > .topbar .topbar-identity > div:first-child {
    display: flex; align-items: center; gap: 6px; overflow: visible;
  }
  body.shell.web #view-main > .topbar #me-name {
    max-width: 138px; overflow: hidden; text-overflow: ellipsis;
  }
  body.shell.web #view-main > .topbar #me-role { flex: 0 0 auto; }
  body.shell.web #view-main > .topbar #me-customer { max-width: 220px; }
  body.shell.web #view-main > .topbar #btn-board { order: 1; }
  body.shell.web #panes { padding-top: 28px; }
  body.shell.web #panes .view-header { margin-bottom: 20px; }
  body.shell.web #panes .view-header h2 { font-size: 23px; }
  body.shell.web #panes .dash-grid { gap: 20px; }
  body.shell.web #panes .dash-col { gap: 20px; }
  body.shell.web #panes .pane-card > .sec { min-height: 54px; padding: 14px 16px; }
  body.shell.web #panes .pane-card > .sec h2 { font-size: 14px; }
  body.shell.web #panes .tiles { grid-template-columns: repeat(auto-fit, minmax(132px, 168px)); margin-bottom: 20px; }
  body.shell.web #panes .tile { min-height: 80px; }
  body.shell.web #panes #home-actions .row { padding-top: 14px; padding-bottom: 14px; }
  body.shell.web #panes #stock-list .row .name { font-size: 14px; }
  body.shell.web #panes #asset-list .reg { font-size: 16px; }
  body.shell.web #panes :is(#af-q, #stock-q) { height: 38px; }
  body.shell.web #panes #as-qrwrap { display: inline-block; vertical-align: top; margin: 0 8px 12px 0; }
  body.shell.web #panes #btn-as-scan { height: 36px; margin-top: 0; }
  body.shell.web #panes #as-scan-msg:empty { display: none; }
  body.shell.web #panes #tab-assets .pagetools { display: inline-flex; margin: 0 0 12px; vertical-align: top; }
  body.shell.web #panes #tab-assets .pagetools button { height: 36px; min-height: 36px; margin: 0; }
  body.shell.web #panes #asset-name-mode { display: flex; width: fit-content; }
  body.shell.web #panes #tab-assets > .thead { color: var(--ui-muted); background: var(--surface-alt); }
}
@media (max-width: 899px) {
  body.shell #view-main > .topbar {
    display: flex; flex-direction: column; align-items: stretch;
    gap: 10px; padding: 14px 16px; border-radius: 16px;
    background: linear-gradient(120deg, #19364d, #2c5275);
    box-shadow: 0 6px 18px rgba(25, 54, 77, .12);
  }
  body.shell #view-main > .topbar .profile-menu { width: 100%; }
  body.shell #view-main > .topbar .topbar-user {
    width: 100%; min-height: 44px; margin: 0; padding: 0; border: 0; gap: 12px;
  }
  body.shell #view-main > .topbar .topbar-identity { flex: 1; }
  body.shell #view-main > .topbar .topbar-identity > div:first-child {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px;
    white-space: normal; overflow: visible; line-height: 1.4;
  }
  body.shell #view-main > .topbar #me-name {
    min-width: 0; color: #fff; font-size: 16px; font-weight: 700; overflow-wrap: anywhere;
  }
  body.shell #view-main > .topbar #me-customer {
    margin-top: 5px; font-size: 12px; line-height: 1.5; color: rgba(255,255,255,.85);
    white-space: normal; overflow: visible; overflow-wrap: anywhere;
  }
  body.shell #view-main > .topbar #me-role {
    max-width: 100%; margin: 0; padding: 2px 8px; font-size: 11px; line-height: 1.5;
    color: #fff; background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.3);
    white-space: normal; overflow-wrap: anywhere;
  }
  body.shell #view-main > .topbar .profile-chevron { flex-shrink: 0; color: rgba(255,255,255,.8); }
  body.shell #view-main > .topbar .profile-menu[open] > .topbar-user,
  body.shell #view-main > .topbar .topbar-user:hover { background: transparent; border-color: transparent; }
  body.shell #view-main > .topbar .profile-popover {
    position: absolute; top: calc(100% + 12px); right: 0; left: 0; width: auto;
    max-height: min(65vh, 420px); overflow-y: auto;
  }
  body.shell #view-main > .topbar #btn-board {
    align-self: flex-end; min-height: 36px; padding: 7px 12px; border-radius: 10px;
    font-size: 12px; line-height: 1.5;
  }
  body.shell #tab-admin .admin-page-head { flex-direction: column; gap: 12px; }
  body.shell #tab-admin .admin-page-head h2 { font-size: 20px; }
  body.shell #tab-admin #btn-admin-newco { width: 100%; min-height: 44px; }
  body.shell #tab-admin .admin-catalog-nav { width: 100%; }
  body.shell #tab-admin .admin-catalog-nav button { min-height: 44px; }
  body.shell #tab-admin .filters,
  body.shell #tab-stickers :is(#prod-bar, #stk-bar) { grid-template-columns: minmax(0, 1fr); }
  body.shell #panes > .card { padding: 14px; }
  body.shell #panes .tile {
    flex-direction: row-reverse; align-items: center; justify-content: space-between;
    min-height: 58px; padding: 10px 12px; gap: 6px;
  }
  body.shell #panes .tile .n { flex-shrink: 0; font-size: 24px; }
  body.shell #panes .tile .l { gap: 5px; font-size: 12px; line-height: 1.5; }
  body.shell #panes .tile .l::before { width: 6px; height: 6px; }
  body.shell #panes #btn-as-scan { min-height: 44px; margin-top: 4px; padding: 10px 12px; }
  body.shell #panes #tab-assets .pagetools { margin-top: 8px; gap: 8px; }
  body.shell #panes #tab-assets .pagetools button { min-height: 44px; padding: 8px; font-size: 12px; }
  body.shell #panes #asset-name-mode { margin-top: 12px; }
  body.shell #panes #asset-name-mode button { min-height: 44px; padding: 8px; font-size: 13px; }
  body.shell #panes #asset-name-mode button.on { background: var(--navy-700); color: #fff; }
  body.shell #panes #af-q { min-height: 44px; padding: 10px 12px; font-size: 16px; }
  body.shell #panes #af-fold > summary { min-height: 44px; padding: 10px 12px; }
  body.shell #panes #asset-list .reg { font-size: 18px; }
  body.shell #panes #asset-list .row .sub { font-size: 12px; line-height: 1.7; }
  body.shell #panes .page-actions > button { flex: 1 1 auto; min-height: 44px; font-size: 12px; }
  body.shell #panes #stock-list .qty { font-size: 16px; max-width: 42%; white-space: normal; text-align: right; }
  body.shell #panes #stock-list .qty .badge { white-space: normal; }
  body.shell #panes #stock-list .row { gap: 12px; }
  body.shell #panes .pane-card > .sec h2 { font-size: 15px; }
  body.shell #panes .pane-card > .sec .more { font-size: 11px; }
  body.shell #tab-stock .co-stock > summary { align-items: flex-start; padding: 11px 12px; }
  body.shell #tab-stock .co-stock-meta { max-width: 48%; }
  body.shell #adm-prod-list { grid-template-columns: minmax(0, 1fr); }
  body.shell #panes details.banner.gapban { width: 100%; }
  body.shell #panes details.banner.gapban > summary { align-items: flex-start; }
  body.shell #panes .gapbody { padding-left: 12px; }
  body.shell #tab-account .account-hero { align-items: flex-start; padding: 18px 16px; }
  body.shell #tab-account .account-avatar { width: 48px; height: 48px; border-radius: 14px; font-size: 17px; }
  body.shell #tab-account .account-grid { grid-template-columns: minmax(0, 1fr); padding: 12px 12px 6px; }
  body.shell #tab-account .account-field { min-height: 96px; }
  body.shell #tab-account .account-security {
    align-items: stretch; flex-direction: column; gap: 12px; margin: 6px 12px 12px; padding: 14px;
  }
  body.shell #tab-account #btn-pw { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  body.shell #panes :is(.tile, .row, button), body.shell .tabs button { transition: none; }
}

/* Clickable summaries retain native keyboard behavior without button layout drift. */
body.shell #panes button.tile {
  width: auto; margin: 0; color: var(--ink); font: inherit;
}
body.shell #panes .tile[aria-pressed="true"] {
  border-color: var(--ui-focus);
  background: var(--tile-bg);
  outline: 1px solid var(--ui-focus); outline-offset: -2px;
}
body.shell #panes .tile[aria-pressed="true"]:focus-visible {
  outline: 2px solid var(--ui-focus); outline-offset: 3px;
}
body.shell #panes button:disabled { cursor: not-allowed; }
body.shell #panes button[aria-busy="true"] { cursor: progress; }
@media (hover: hover) and (pointer: fine) {
  body.shell #panes :is(#stock-list, #home-stock) .row.tap:hover { background: var(--surface-alt); }
  body.shell #panes button.ghost:not(:disabled):hover { border-color: var(--ui-focus); }
}
body.shell #panes :is(.page-actions > button, #btn-as-scan):not(:disabled):active {
  filter: brightness(.88);
}
body.shell #panes #home-stock .qty {
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  flex: 0 0 auto; line-height: 1.4;
}
body.shell #panes #home-stock .qty .badge { font-size: 11px; font-weight: 500; }
@media (max-width: 899px) {
  /* Grid items must shrink with the phone instead of inheriting content width. */
  body.shell #panes .dash-grid,
  body.shell #panes .dash-col { grid-template-columns: minmax(0, 1fr); min-width: 0; }
  body.shell #panes .dash-grid .pane-card { min-width: 0; }
  body.shell #panes .pane-card > .sec { flex-wrap: wrap; }
  body.shell #panes #home-stock .row { flex-direction: column; gap: 6px; }
  body.shell #panes #home-stock .row > .qty {
    max-width: 100%; flex-direction: row; flex-wrap: wrap;
    align-items: center; justify-content: flex-start; text-align: left;
    overflow-wrap: anywhere; column-gap: 8px;
  }
  body.shell #panes #home-stock .qty { max-width: 42%; white-space: normal; text-align: right; }
  body.shell #panes #home-stock .qty .badge { white-space: normal; }
}

/* Vehicle sheet: navigation has its own row; identity gets the full phone width. */
body.shell #view-asset > .topbar .asset-identity { min-width: 0; }
body.shell #view-asset > .topbar :is(#as-sub, #as-notes) { overflow-wrap: anywhere; }
@media (max-width: 899px) {
  body.shell #view-asset > .topbar {
    display: grid; grid-template-columns: minmax(0,1fr) auto;
    gap: 12px; padding: 14px; align-items: start;
  }
  body.shell #view-asset > .topbar #btn-as-back {
    grid-row: 1; grid-column: 1; justify-self: start;
    margin: 0; min-height: 44px; padding: 8px 12px; font-size: 13px;
    max-width: 100%; white-space: normal; text-align: left;
  }
  body.shell #view-asset > .topbar #as-menu { grid-row: 1; grid-column: 2; }
  body.shell #view-asset > .topbar #as-menu > summary { min-width: 44px; min-height: 44px; }
  body.shell #view-asset > .topbar .asset-identity { grid-row: 2; grid-column: 1 / -1; }
  body.shell #view-asset #as-name { font-size: 22px; line-height: 1.35; }
  body.shell #view-asset #as-sub { font-size: 13px; line-height: 1.65; margin-top: 5px; color: #edf2f8; }
  body.shell #view-asset #as-notes {
    margin-top: 10px; padding-top: 10px; border-top: 1px solid #ffffff35;
    font-size: 13px; line-height: 1.65; color: #edf2f8;
  }
}
/* Shared form rhythm and field sizing, including date inputs in iOS. */
body.shell :is(#as-pm-form, #pi-form, #scan-found) :is(input, select, textarea) {
  min-width: 0; max-width: 100%; font-size: 16px; scroll-margin-block: 80px;
  background: var(--surface); color: var(--ink); border-color: var(--line);
}
body.shell :is(#as-pm-form, #pi-form, #scan-found) :is(label, .hint, .sub) { color: var(--ui-muted); }
body.shell :is(#as-pm-form, #pi-form, #scan-found) input::placeholder { color: var(--ui-muted); opacity: 1; }
body.shell :is(#as-pm-form, #pi-form, #scan-found) input[type="date"] { display: block; width: 100%; min-height: 46px; }
body.shell :is(#as-pm-form, #pi-form, #scan-found) .grid2 > div { min-width: 0; }
body.shell #scan-found { border-radius: 12px; padding: 16px; }
body.shell #scan-found #sf-qtyline { padding: 10px 12px; background: var(--surface-alt); border-radius: 8px; }
body.shell #scan-found #sf-kindwrap { margin-top: 16px; }
body.shell :is(#btn-pm-save, #btn-pi-save, #btn-sf-save) { min-height: 44px; }
body.shell button[aria-busy="true"] { cursor: progress; opacity: .8; }
body.shell :is(#as-pm-form, #pi-form, #scan-found) .msg:not(:empty) {
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface-alt); overflow-wrap: anywhere; line-height: 1.65;
}
body.shell :is(#as-pm-form, #pi-form, #scan-found) .msg.err { background: var(--due-bg); color: var(--due-ink); border-color: var(--due-line); }
body.shell :is(#as-pm-form, #pi-form, #scan-found) .msg.ok { background: var(--ok-bg); color: var(--ok-ink, var(--ink)); border-color: var(--ok-line); }
body.shell #pm-selection { margin: 12px 0 0; border: 1px solid var(--line); border-radius: 10px; }
body.shell #pm-selection > summary { min-height: 44px; padding: 12px; cursor: pointer; font-weight: 600; font-size: 14px; }
body.shell #pm-selection-count { float: right; font-size: 12px; color: var(--ui-muted); margin-left: 8px; }
body.shell #pm-points { margin: 0; padding: 0 12px 12px; gap: 0; }
body.shell #pm-points label { border: 0; border-top: 1px solid var(--line); border-radius: 0; min-height: 48px; padding: 8px 0; background: transparent; color: var(--ink); }
body.shell #pm-points label:has(input:checked) { color: var(--info-ink); }
body.shell #pm-points input { min-height: 20px; width: 20px; height: 20px; }
body.shell #pm-points .nm { font-size: 14px; line-height: 1.5; }
body.shell #pm-points .nm small { font-size: 12px; color: var(--ui-muted); }
body.shell #pm-selection-names { margin: 8px 0 16px; line-height: 1.65; overflow-wrap: anywhere; }
body.shell #pm-selection[open] + #pm-selection-names { display: none; }
body.shell #pm-who { padding: 10px 12px; border-color: var(--line); background: var(--surface-alt); }
@media (min-width: 700px) { body.shell #pm-points { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 16px; } }
@media (max-width: 380px) {
  body.shell #pi-form .repair-form-people .grid2 { grid-template-columns: minmax(0,1fr); }
  body.shell #scan-found #sf-kind button { padding-inline: 4px; font-size: 12px; white-space: normal; }
}
/* Replace fixed light repair surfaces with the active theme's tokens. */
body.shell :is(.repair-head, .repair-foot, .repair-detail-people, .repair-detail-recorded, .repair-minor-foot, .repair-people-button[aria-expanded="true"]) { background: var(--surface-alt); }
body.shell :is(#pi-detail-body, .repair-detail-note, .repair-detail-people, .repair-people, .repair-form-people, .repair-card-note, .repair-history-actions, #pi-items .repair-entry-row, #pi-list .repair-booking, :is(#hist-list,#as-hist,#home-recent) .repair-booking) { border-color: var(--line); }
body.shell #pi-items .card, body.shell .repair-foot > .repair-people { background: var(--surface-alt); border-color: var(--line); }
body.shell :is(#pi-detail, #pi-form) h3 { color: var(--ink); }
body.shell :is(.repair-label, .repair-items .qty, .repair-detail-items h3 span) { color: var(--ui-muted); }
body.shell :is(.repair-booking .golink, #as-parts-recent .golink, .repair-people-button) { color: var(--info-ink); }
body.shell .repair-people-button .repair-person-icon { stroke: currentColor; }
body.shell .repair-date { background: var(--warn-bg); color: var(--warn-ink); }
body.shell .repair-date .repair-label { color: inherit; }
@media(max-width:899px) { body.shell #tab-parts { padding-bottom: 88px; } }

/* One visible reset affordance per filter group, also outside collapsed panels. */
body.shell .filter-feedback {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-basis: 100%; margin: 8px 0 12px; padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--surface-alt); color: var(--ui-muted); font-size: 12px;
}
body.shell .filter-feedback[hidden] { display: none; }
body.shell .filter-feedback.is-active { background: #263f59; color: #fff; border-color: #6085ad; }
body.shell #panes .filter-feedback .filter-clear {
  width: auto; min-height: 36px; height: auto; padding: 7px 10px; margin: 0;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 6px;
  font-size: 12px; white-space: nowrap;
}
body.shell #panes .filter-feedback.is-active .filter-clear { background: #fff; color: #263f59; border-color: #fff; }
body.shell #panes .filter-feedback .filter-clear:disabled { opacity: .55; cursor: default; }
body.shell #panes .is-filtered { border-color: #6085ad; background: var(--info-bg); color: var(--info-ink); }
body.shell #panes details.filter-active > summary { background: #263f59; color: #fff; border-radius: 8px; }
body.shell #panes details.filter-active > summary .badge { background: #fff; color: #263f59; border-color: #fff; }
body.shell #panes #asset-tiles .tile[aria-pressed="true"] { background: #263f59; border-color: #6085ad; }
body.shell #panes #asset-tiles .tile[aria-pressed="true"] :is(.n,.l) { color: #fff; }
body.shell #panes :is(#af-q, #stock-q, input, select).is-filtered { border-color: #6085ad; background: var(--info-bg); color: var(--info-ink); }

body.shell #pick-brands .chip.on:not([data-brand=""]) { background: #263f59; color: #fff; border-color: #6085ad; }

/* Repair sheets must fit Safari's dynamic viewport, including native date fields. */
body.shell #pi-form > .modal-panel { box-sizing: border-box; min-width: 0; width: 100%; max-width: min(760px,100%); overflow-x: hidden; }
body.shell #pi-form :is(input,select,textarea) { box-sizing: border-box; min-inline-size: 0; max-inline-size: 100%; }
body.shell #pi-form input[type="date"] { appearance: none; -webkit-appearance: none; inline-size: 100%; overflow: hidden; }
body.shell #pi-form input[type="date"]::-webkit-date-and-time-value { min-width: 0; text-align: left; }
@media(max-width:699px) {
  body.shell #pi-form { height: 100dvh; max-height: 100dvh; }
  body.shell #pi-form > .modal-panel { max-height: calc(100dvh - 24px - env(safe-area-inset-top,0px)); padding-bottom: calc(18px + env(safe-area-inset-bottom,0px)); overscroll-behavior: contain; }
}

body.shell #btn-sd-withdraw { width: 100%; min-height: 44px; margin: 14px 0; }

/* Recent activity is a compact reading list; it has no selection column. */
body.shell #home-recent > .row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px 16px; align-items: start; padding: 16px 20px; margin: 0; border-color: var(--line); }
body.shell #home-recent > .row > .pick { display: none; }
body.shell #home-recent .grow { min-width: 0; }
body.shell #home-recent .name { font-size: 16px; line-height: 1.6; font-weight: 650; color: var(--ink); }
body.shell #home-recent .tag { display: inline-block; font-size: 11px; font-weight: 600; line-height: 1.6; padding: 2px 7px; border-radius: 6px; margin-right: 6px; vertical-align: 2px; white-space: nowrap; }
body.shell #home-recent .tag-rep { color: var(--rep); background: var(--rep-bg); border-color: var(--rep-line); }
body.shell #home-recent .sub { font-size: 12px; line-height: 1.65; margin-top: 4px; color: var(--ui-muted); }
body.shell #home-recent .golink { border-bottom: 0; text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb,currentColor 35%,transparent); text-underline-offset: 3px; }
body.shell #home-recent .golink:hover { text-decoration-color: currentColor; }
body.shell #home-recent > .row > .qty { font-size: 15px; line-height: 1.6; padding-top: 2px; white-space: nowrap; font-variant-numeric: tabular-nums; }
body.shell #home-recent .repair-history-row > .qty { align-self: end; padding: 0; }
body.shell #home-recent .rowtools .more { font-size: 12px; color: var(--ui-focus); padding: 6px 8px; min-height: 36px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
body.shell .c-recent > .sec { gap: 12px; padding: 16px 20px; }
body.shell .c-recent > .sec h2 { font-size: 19px; }
body.shell .c-recent > .sec > .more { font-size: 12px; color: var(--ui-muted); white-space: nowrap; }
@media(max-width:480px) {
  body.shell #home-recent > .row { padding: 14px 16px; column-gap: 10px; }
  body.shell #home-recent .name { font-size: 15px; }
  body.shell #home-recent > .row > .qty { font-size: 14px; }
  body.shell .c-recent > .sec { padding: 14px 16px; gap: 8px; }
  body.shell .c-recent > .sec h2 { font-size: 17px; }
  body.shell .c-recent > .sec .hico { display: none; }
}
body.shell .c-recent > .sec { display: flex; align-items: center; justify-content: space-between; margin: 0; min-height: 0; }
body.shell .c-recent > .sec h2 { margin: 0; line-height: 1.4; }

/* Dashboard polish preview: preserve the existing palette and status semantics. */
body.shell #tab-home > .view-header {
  padding: 0 0 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--gold-400);
}
body.shell #tab-home #home-title { font-size: 26px; line-height: 1.45; font-weight: 700; }
body.shell #tab-home #home-sub { margin-top: 6px; line-height: 1.7; color: var(--ui-muted); }
body.shell #tab-home #home-banners { margin-bottom: 12px; }
body.shell #tab-home #home-note:empty { display: none; }
body.shell #panes #home-actions .row.acti { padding-top: 18px; padding-bottom: 18px; }
body.shell #panes #home-actions .name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
body.shell #panes #home-actions .reg { font-size: 17px; line-height: 1.5; }
body.shell #panes #home-actions .idalt { font-size: 12px; line-height: 1.7; color: var(--ui-muted); }
body.shell #panes #home-actions .sub { line-height: 1.65; }
body.shell #panes #home-actions .acti-sep { display: none; }
body.shell #panes #home-actions .acti-pt,
body.shell #panes #home-actions .acti-due { display: block; }
body.shell #panes #home-actions .acti-pt { font-size: 12px; color: var(--ui-muted); }
body.shell #panes #home-actions .acti-due { font-size: 14px; font-weight: 600; color: var(--ink-900); }
body.shell #panes #home-actions .qty { min-width: 88px; text-align: right; }
body.shell #panes #home-actions .badge { min-width: 78px; text-align: center; }
@media (max-width: 899px) {
  body.shell #tab-home > .view-header { padding-bottom: 16px; margin-bottom: 16px; }
  body.shell #tab-home #home-title { font-size: 22px; }
  body.shell #panes #home-actions .row.acti { align-items: flex-start; gap: 10px; padding-top: 16px; padding-bottom: 16px; }
  body.shell #panes #home-actions .name { display: block; }
  body.shell #panes #home-actions .idalt { display: block; margin: 2px 0 0; }
  body.shell #panes #home-actions .sub { margin-top: 8px; }
  body.shell #panes #home-actions .qty { padding-top: 3px; }
}

/* Chronological activity groups; keep existing rows and their click targets. */
body.shell #home-recent .recent-day {
  margin: 0; padding: 18px 20px 8px; font-size: 12px; font-weight: 600;
  line-height: 1.6; color: var(--ui-muted);
}
body.shell #home-recent > .row {
  margin: 0 20px; padding: 10px 0;
  border-bottom: 0;
}
body.shell #home-recent > .row.repair-recent-row { display: block; padding: 0; }
body.shell #home-recent > .row:last-child { margin-bottom: 18px; }
body.shell #home-recent .repair-recent-summary { min-height: 68px; }
@media (min-width: 900px) {
  body.shell #panes #home-actions .acti-pt { font-size: 14px; }
}

/* Date headings separate history days without changing row actions or selection. */
body.shell :is(#hist-list,#as-hist,#home-recent) .history-day {
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;
  margin:22px 0 12px;padding:12px 16px;border:1px solid var(--line);
  border-left:5px solid var(--brand);border-radius:10px;background:var(--bg);
  font-size:22px;font-weight:750;line-height:1.4;color:var(--ink);
}
body.shell :is(#hist-list,#as-hist,#home-recent) .history-day:first-child { margin-top: 0; }

/* Vehicle oil intervals: one scannable service list instead of nested cards.
   Keep the existing primary button emoji and gradient; this pass changes only
   information hierarchy, spacing, and responsive layout. */
body.shell #as-lube-card > .sec:first-child { margin-bottom: 0; }
body.shell #as-lube-card #btn-as-pm,
body.shell.web #view-asset #as-lube-card #btn-as-pm {
  background: var(--grad); border-color: transparent;
}
body.shell #as-lube-list { background: var(--surface); }
body.shell #as-lube-list .lp {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "head tools"
    "summary summary"
    "bar bar"
    "last last";
  gap: 8px 12px;
  margin: 0;
  padding: 16px 2px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}
body.shell #as-lube-list .lp:last-child { border-bottom: 0; }
body.shell #as-lube-list .lp-head { grid-area: head; min-width: 0; align-self: start; }
body.shell #as-lube-list .lp-head .nm {
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px 8px;
  min-width: 0; font-size: 17px; font-weight: 700; line-height: 1.45;
  color: var(--ink-900);
}
body.shell #as-lube-list .lp-head .nm > .badge {
  min-height: 0; padding: 2px 9px; border-color: var(--line);
  font-size: 12px; font-weight: 600; line-height: 1.45;
  color: var(--ink-500); background: var(--surface);
  white-space: nowrap;
}
body.shell #as-lube-list .rowtools {
  grid-area: tools; align-self: start; display: flex; align-items: center;
  gap: 7px; min-width: 0; margin: 0;
}
body.shell #as-lube-list .rowtools > .badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 28px; padding: 3px 10px; margin: 0;
  font-size: 12px; line-height: 1.25; white-space: nowrap;
}
body.shell #as-lube-list .rowmenu > summary {
  width: 44px; height: 44px; border-radius: 11px;
}
body.shell #as-lube-list .lp-summary { grid-area: summary; min-width: 0; }
body.shell #as-lube-list .lp-metricline {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px;
  font-variant-numeric: tabular-nums;
}
body.shell #as-lube-list .lp-metricline strong {
  font-size: 21px; font-weight: 700; line-height: 1.35; letter-spacing: -.2px;
  color: var(--ink-900);
}
body.shell #as-lube-list .lp-metricline.warn strong { color: var(--warn); }
body.shell #as-lube-list .lp-metricline.due strong { color: var(--due); }
body.shell #as-lube-list .lp-metricline.ok strong { color: var(--ok); }
body.shell #as-lube-list .lp-metricline span {
  font-size: 14px; font-weight: 600; color: var(--ink-500);
}
body.shell #as-lube-list .lp-due,
body.shell #as-lube-list .lp-cycle,
body.shell #as-lube-list .lp-missing,
body.shell #as-lube-list .lp-last {
  font-size: 13px; line-height: 1.6; color: var(--ui-muted);
  font-variant-numeric: tabular-nums;
}
body.shell #as-lube-list .lp-due { margin-top: 3px; color: var(--ink-600); }
body.shell #as-lube-list .lp-cycle { margin-bottom: 3px; color: var(--ink-600); }
body.shell #as-lube-list .lp-missing { color: var(--ink-500); }
body.shell #as-lube-list .lp-last { grid-area: last; }
body.shell #as-lube-list .bar {
  grid-area: bar; width: 100%; height: 6px; margin: 0;
  border-radius: 99px; background: var(--line-soft);
}

@media (min-width: 900px) {
  body.shell.web #as-lube-list .lp {
    grid-template-columns: minmax(0, 1.08fr) minmax(170px, .92fr) auto;
    grid-template-areas:
      "head summary tools"
      "last summary tools"
      ". bar bar";
    align-items: start; column-gap: 16px; row-gap: 5px;
    padding: 14px 0;
  }
  body.shell.web #as-lube-list .lp-head .nm { font-size: 14.5px; }
  body.shell.web #as-lube-list .lp-head .nm > .badge { font-size: 11px; }
  body.shell.web #as-lube-list .lp-metricline strong { font-size: 16px; }
  body.shell.web #as-lube-list .lp-metricline span { font-size: 12.5px; }
  body.shell.web #as-lube-list .lp-due,
  body.shell.web #as-lube-list .lp-cycle,
  body.shell.web #as-lube-list .lp-missing,
  body.shell.web #as-lube-list .lp-last { font-size: 11.5px; }
  body.shell.web #as-lube-list .rowmenu > summary { width: 36px; height: 36px; border-radius: 8px; }
}

@media (max-width: 420px) {
  body.shell #as-lube-card > .sec:first-child { align-items: flex-start; }
  body.shell #as-lube-card > .sec:first-child .btn-head { padding: 7px 10px; font-size: 12px; }
  body.shell #as-lube-list .lp { padding: 15px 0; column-gap: 8px; }
  body.shell #as-lube-list .lp-head .nm { font-size: 16px; }
  body.shell #as-lube-list .lp-head .nm > .badge { flex-basis: fit-content; }
  body.shell #as-lube-list .rowtools { gap: 5px; }
  body.shell #as-lube-list .rowtools > .badge { padding-inline: 8px; }
  body.shell #as-lube-list .lp-metricline strong { font-size: 20px; }
}

/* Repair workspace: page actions, filters, queue, and completed work. */
body.shell #tab-parts .repair-page-header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px}
body.shell #tab-parts .repair-page-header h2{margin:0 0 6px}
body.shell #tab-parts .repair-page-header .hint{margin:0;font-size:13px;line-height:1.6}
body.shell #tab-parts .repair-tools{margin:0;flex:none;gap:8px}
body.shell #tab-parts .repair-tools button{flex:none;width:auto;min-height:44px;font-size:13px;padding:10px 14px}
body.shell #tab-parts .repair-filter-bar{display:flex;align-items:center;flex-wrap:wrap;gap:12px 24px;padding:16px 18px;border:1px solid var(--line);border-radius:14px;box-shadow:none}
body.shell #tab-parts .repair-filter-field{display:flex;align-items:center;gap:14px;flex:1;min-width:0}
body.shell #tab-parts label[for="pi-filter"]{flex:none;margin:0;color:var(--ui-muted);font-size:12px}
body.shell #tab-parts #pi-filter{margin:0;min-width:0;width:100%;max-width:360px;min-height:44px;padding:9px 12px;font-size:13px}
body.shell #tab-parts .repair-filter-field{flex:1 1 220px}
body.shell #tab-parts .repair-filter-field label{flex:none;white-space:nowrap;margin:0;color:var(--ui-muted);font-size:12px}
body.shell #tab-parts :is(#pi-type-filter,#pi-work-filter){margin:0;min-width:0;width:100%;min-height:44px;padding:9px 12px;font-size:13px}
body.shell #tab-parts #pi-person-filter{margin:0;line-height:1.6}
body.shell #tab-parts #pi-msg:empty{display:none}
body.shell #tab-parts #pi-msg:not(:empty){flex-basis:100%;margin:0}
body.shell #tab-parts .repair-work-section{margin-top:24px}
body.shell #pi-list h2{font-size:17px;margin:0 0 12px;line-height:1.5}
body.shell #pi-list .repair-history-section{margin-top:28px}
body.shell #pi-list :is(.repair-pending-list,#pi-completed-list)>.hint{margin:0;padding:20px 18px;border:1px dashed var(--line);border-radius:14px;background:var(--surface);font-size:13px}
body.shell #tab-parts #btn-pi-more{display:block;width:auto;min-height:44px;margin:18px auto 0;padding:10px 24px;font-size:13px}
body.shell #tab-parts #btn-pi-more.hidden{display:none}
@media(max-width:899px){
 body.shell #tab-parts .repair-page-header{align-items:stretch;flex-direction:column;gap:16px}
 body.shell #tab-parts .repair-tools{display:grid;grid-template-columns:minmax(0,1fr) auto}
 body.shell #tab-parts .repair-filter-bar{padding:14px 12px;gap:10px}
 body.shell #tab-parts .repair-filter-field{align-items:stretch;flex-direction:column;gap:6px}
 body.shell #tab-parts #pi-filter{max-width:none}
 body.shell #tab-parts .repair-work-section{margin-top:20px}
}
@media(max-width:380px){body.shell #tab-parts .repair-tools button{font-size:12px;padding-inline:10px}}

body.shell #tab-parts .repair-filter-field{order:1}
body.shell #tab-parts .repair-filter-bar .filter-feedback{order:2;flex-basis:auto;flex-shrink:0;margin:0;padding:0;border:0;background:transparent}
body.shell #tab-parts .repair-filter-bar .filter-feedback:not(.is-active)>span{display:none}
body.shell #tab-parts .repair-filter-bar .filter-feedback.is-active{padding:6px 8px;background:#263f59;color:#fff}
body.shell #tab-parts .repair-filter-bar .filter-clear{min-height:44px}
body.shell #tab-parts #pi-person-filter{order:3;flex-basis:100%}
body.shell #tab-parts #pi-msg{order:4}
@media(max-width:899px){body.shell #tab-parts .repair-filter-bar .filter-feedback{align-self:flex-end}body.shell #tab-parts .repair-filter-bar .filter-feedback.is-active{flex-basis:100%}}

body.shell #pi-list .repair-foot.repair-ledger-actions{background:transparent}
body.shell #pi-list :is(.repair-ledger-actions>button,.repair-completed-row>button.ghost,.repair-ledger-status select){min-height:44px}

/* Incomplete oil intervals remain readable and editable, with lower emphasis. */
body.shell #as-lube-list .lp.lp-lacking{background:var(--surface-alt);border-radius:10px;padding-inline:12px}
body.shell #as-lube-list .lp-lacking :is(.lp-head .nm,.lp-summary,.lp-cycle,.lp-missing,.lp-last){color:var(--ui-muted)}
body.shell #as-lube-list .lp-lacking .lp-head .nm{font-weight:500}
body.shell #as-lube-list .lp-lacking .lp-head .nm>.badge{color:var(--ui-muted);background:var(--surface-alt)}
body.shell #as-lube-list .lp-lacking .rowtools>.badge{color:var(--ui-muted);background:var(--surface-alt)}

/* Feature Lab placeholder: the same status appears in desktop and mobile navigation. */
.menu-soon {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; width: fit-content; padding: 3px 7px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg-soft); color: var(--muted);
  font-size: 10px; font-weight: 600; line-height: 1.2; white-space: nowrap;
}
.tabs button .menu-soon { margin-left: auto; }
.tires-title { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.tires-title > .ic { width: 28px; height: 28px; }

/* Logo registry must remain usable when staff add tire images on a phone. */
@media(max-width:899px){body.shell.web #tab-admin #adm-logos .filters{grid-template-columns:minmax(0,1fr)}body.shell #adm-logos .rowtools{flex-shrink:0}body.shell #adm-logos .rowtools .more{white-space:nowrap}}

/* Vehicle status is opened from the header menu; the four work cards follow reading order. */
body.shell #as-state-card { max-width: 560px; }
body.shell .as-state-dialog-header { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px; }
body.shell .as-state-dialog-header h2 { flex:1; min-width:0; margin:0; font-size:20px; }
body.shell #btn-as-state-close { flex:none; width:auto !important; min-width:52px; min-height:44px; margin:0; }
body.shell #as-state-card .seg { margin:16px 0; max-width:100%; }
body.shell #as-state-card .found { margin-top:16px; }
body.shell #as-state-log { border-top:1px solid var(--line); padding-top:16px; }
body.shell #as-state-log:empty { display:none; }
@media (min-width:900px) {
  body.shell.web #view-asset > :is(#as-meter-card,#as-parts-card,#as-lube-card,#as-history-card) { min-width:0; }
}

/* Keep vehicle and booking date together, including narrow repair sheets. */
body.shell #pi-form .repair-form-heading { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px; }
body.shell #pi-form .repair-form-heading > div { min-width: 0; }

/* One source heading with indented linked activities; no enclosing group card. */
body.shell :is(#hist-list,#as-hist,#home-recent) .history-tree { border: 0; border-radius: 0; margin: 0; padding: 0; background: transparent; }
body.shell :is(#hist-list,#as-hist,#home-recent) .history-tree .history-group-head { display: block; padding: 0; border: 0; font-size: inherit; font-weight: inherit; }
body.shell :is(#hist-list,#as-hist,#home-recent) .history-tree .history-group-head > .row { margin: 0; padding-left: 0; padding-right: 0; padding-bottom: 10px; border-bottom: 0; }
body.shell :is(#hist-list,#as-hist,#home-recent) .history-group-count { margin-left: 8px; color: var(--ui-muted); font-size: 12px; font-weight: 400; white-space: nowrap; }
body.shell :is(#hist-list,#as-hist,#home-recent) .history-group-children { margin: 0 0 18px 25px; padding-left: 18px; border-left: 1px solid var(--line); }
body.shell :is(#hist-list,#as-hist,#home-recent) .history-group-children > .row { position: relative; margin: 0; padding: 10px 0; border-bottom: 0; }
body.shell :is(#hist-list,#as-hist,#home-recent) .history-group-children > .row::before { content: none; }

/* Keep long site lists and imported vehicle notes out of collapsed headers. */
body.shell .co-sites { padding: 12px 14px; border-bottom: 1px solid var(--line); }
body.shell .co-sites-list { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 8px; overflow-wrap: anywhere; }
body.shell #view-asset #as-notes { white-space: normal; }
body.shell #view-asset #as-notes > summary {
  margin: 0; padding: 6px 0; border: 0; color: inherit; font-size: inherit; cursor: pointer;
}
body.shell #view-asset #as-notes-text { white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 4px; }

/* Explicit popup dismissal keeps accidental background taps from losing input. */
.modal-panel > button.modal-dismiss { float: right; width: 44px !important; min-width: 44px; min-height: 44px; padding: 0; margin: 0 0 8px 12px; font-size: 20px; }

.modal-dismiss + :not(.hidden) { min-height: 44px; }

body.shell #tab-stock .stock-filters{display:flex;gap:12px;flex-wrap:wrap;align-items:end;margin:12px 0}
body.shell #tab-stock .stock-filters label{flex:1 1 180px;margin:0}

/* Type illustrations leave the unit identifier and controls readable. */
#asset-list .vehicle-list-identity { display:flex; align-items:center; gap:14px; min-width:0; }
#asset-list .vehicle-list-text { min-width:0; flex:1; overflow-wrap:anywhere; }
#asset-list .vehicle-art { width:112px; height:76px; object-fit:contain; flex:none; }
#view-asset .vehicle-detail-art { width:184px; height:100px; object-fit:contain; flex:none; }
@media(max-width:899px) {
 #asset-list .vehicle-list-identity { gap:10px; }
 #asset-list .vehicle-art { width:84px; height:64px; }
 body.shell #view-asset > .topbar.has-vehicle-art .asset-identity { grid-column:1; }
 body.shell #view-asset > .topbar .vehicle-detail-art { grid-row:2; grid-column:2; width:88px; height:70px; align-self:center; }
}

@media(min-width:900px){#asset-list .vehicle-art-trailer{width:76px;height:48px;}}

/* Fleet composition on the machinery page and keyboard/hover summary. */
.fleet-type-chart{margin:16px 0;padding:18px;border:1px solid var(--line,#dbe3ee);border-radius:16px;background:var(--card,#fff)}
.fleet-type-content{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.fleet-type-pie{width:160px;height:160px;border-radius:50%;display:grid;place-items:center;flex:none}
.fleet-type-pie>span{width:94px;height:94px;border-radius:50%;background:var(--card,#fff);display:flex;align-items:center;justify-content:center;flex-direction:column;font-size:28px;font-weight:700}
.fleet-type-pie small{font-size:13px;font-weight:400}
.fleet-type-content ul{list-style:none;padding:0;margin:0;flex:1;min-width:180px;max-height:280px;overflow:auto}
.fleet-type-content li{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:14px}
.fleet-type-content li i{width:10px;height:10px;border-radius:50%;flex:none}
.fleet-type-content li span{flex:1;overflow-wrap:anywhere}.fleet-type-content li strong{white-space:nowrap}
.fleet-type-hover{position:relative;min-width:0}.fleet-type-hover>.tile{width:100%;height:100%}
.fleet-type-popup{display:none;position:absolute;top:100%;right:0;width:min(460px,85vw);padding:18px;background:var(--card,#fff);color:var(--ink,#172033);border:1px solid var(--line,#dbe3ee);border-radius:16px;box-shadow:0 12px 32px #14233c25;z-index:40;text-align:left}
.fleet-type-hover:hover>.fleet-type-popup,.fleet-type-hover:focus-within>.fleet-type-popup{display:block}
#fleet-trailers{margin:20px 0}#fleet-trailer-list .trailer-row{display:flex;gap:16px;align-items:center;flex-wrap:wrap;padding:12px;border-bottom:1px solid var(--line,#dbe3ee)}
#fleet-trailer-list .trailer-row>div:first-child{flex:1;min-width:140px}.tire-meter-skip{display:block;font-size:14px}
@media(max-width:600px){.fleet-type-content{gap:14px}.fleet-type-popup .fleet-type-pie{width:112px;height:112px}.fleet-type-popup .fleet-type-pie>span{width:70px;height:70px}.fleet-type-chart{padding:14px}.fleet-type-popup{position:fixed;top:auto;bottom:80px;right:5vw;width:90vw;max-height:65vh;overflow:auto;box-sizing:border-box}}
body.shell :is(#panes,#view-asset) #tab-tires :is(#tire-install-form,#tire-round-form) .tire-meter-skip,
body.shell #pi-form .tire-meter-skip,
body.shell #sf-meterwrap .tire-meter-skip{display:flex;align-items:center;gap:8px;min-height:36px;font-size:14px;color:var(--ink,#172033);line-height:1.5;margin:8px 0}
body.shell :is(#panes,#view-asset) #tab-tires :is(#tire-install-form,#tire-round-form) .tire-meter-skip input[type=checkbox],
body.shell #pi-form .tire-meter-skip input[type=checkbox],
body.shell #sf-meterwrap .tire-meter-skip input[type=checkbox]{width:20px;height:20px;min-height:20px;flex:0 0 20px;padding:0;margin:0;accent-color:var(--primary,#2563eb)}
@media(max-width:600px){.fleet-type-chart .fleet-type-pie{width:120px;height:120px}.fleet-type-chart .fleet-type-pie>span{width:78px;height:78px;font-size:25px}.fleet-type-chart .fleet-type-content ul{min-width:140px}}

/* Keep machinery status and composition together without squeezing mobile cards. */
.fleet-summary{display:grid;gap:16px;margin-bottom:20px;align-items:center}
body.shell #panes .fleet-summary #asset-tiles{margin:0;min-width:0}
.fleet-summary .fleet-type-chart{margin:0;min-width:0;padding:16px 18px;background:linear-gradient(135deg,var(--card,#fff),var(--bg,#f7f9fc))}
.fleet-summary .fleet-type-chart h3{font-size:14px;margin:0 0 12px}
.fleet-summary .fleet-type-content{gap:16px;flex-wrap:nowrap}
.fleet-summary .fleet-type-pie{width:104px;height:104px;box-shadow:0 4px 14px #17203309}
.fleet-summary .fleet-type-pie>span{width:72px;height:72px;font-size:26px}
.fleet-summary .fleet-type-content ul{min-width:0;max-height:150px}
.fleet-summary .fleet-type-content li{font-size:12px;gap:7px;padding:3px 0}
@media(min-width:1100px){
 .fleet-summary{grid-template-columns:minmax(0,1fr) minmax(340px,.65fr)}
 body.shell.web #panes .fleet-summary #asset-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
}

@media(min-width:1100px){
 .fleet-summary{align-items:stretch}
 .fleet-summary .fleet-type-chart{contain:size;box-sizing:border-box;padding:6px 12px;display:grid;grid-template-columns:60px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);column-gap:12px;align-content:center}
 .fleet-summary .fleet-type-chart h3{grid-column:2;margin:0 0 2px;font-size:12px;line-height:16px}
 .fleet-summary .fleet-type-content{display:contents}
 .fleet-summary .fleet-type-pie{grid-column:1;grid-row:1 / 3;align-self:center;width:60px;height:60px}
 .fleet-summary .fleet-type-pie>span{width:42px;height:42px;font-size:18px;line-height:20px}
 .fleet-summary .fleet-type-pie small{font-size:10px;line-height:12px}
 .fleet-summary .fleet-type-content ul{grid-column:2;max-height:48px;align-self:center}
 .fleet-summary .fleet-type-content li{font-size:11px;line-height:12px;padding:0;min-height:12px}
 .fleet-summary .fleet-type-content li i{width:7px;height:7px}
}

/* Compact summary opens a larger, dismissible view of every type. */
.fleet-summary .fleet-type-chart{padding:0;display:block}
body.shell #panes .fleet-type-summary{width:100%;height:100%;box-sizing:border-box;margin:0;padding:16px 18px;display:block;text-align:left;border:0;border-radius:inherit;background:transparent;color:inherit;cursor:pointer;min-height:0;box-shadow:none;font:inherit}
body.shell #panes .fleet-type-summary:focus-visible{outline:2px solid var(--primary,#6085ad);outline-offset:3px}
.fleet-summary .fleet-type-summary ul{overflow:hidden}
.fleet-type-details{position:fixed;inset:auto;margin:0;width:min(480px,calc(100vw - 24px));box-sizing:border-box;max-height:calc(100dvh - 24px);overflow:auto;padding:20px;border:1px solid var(--line,#dbe3ee);border-radius:18px;background:var(--card,#fff);color:var(--ink,#172033);box-shadow:0 16px 48px #14233c28}
.fleet-type-details::backdrop{background:transparent}
.fleet-type-details h3{margin:0 36px 18px 0;font-size:16px}
.fleet-type-details .fleet-type-content{gap:20px;flex-wrap:nowrap}
.fleet-type-details .fleet-type-pie{width:120px;height:120px}
.fleet-type-details .fleet-type-pie>span{width:82px;height:82px;font-size:25px}
.fleet-type-details .fleet-type-content ul{min-width:0;max-height:min(360px,50dvh)}
.fleet-type-details .fleet-type-content li{font-size:14px;padding:6px 0}
.fleet-type-close{position:absolute;right:10px;top:10px;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:var(--bg,#f3f6fa);color:inherit;font-size:24px;cursor:pointer}
@media(min-width:1100px){
 body.shell #panes .fleet-type-summary{padding:6px 12px;display:grid;grid-template-columns:60px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);column-gap:12px;align-content:center}
}
@media(max-width:600px){
 .fleet-type-details{left:12px;bottom:80px;max-height:70dvh}
 .fleet-type-details .fleet-type-content{flex-direction:column;align-items:stretch}
 .fleet-type-details .fleet-type-pie{align-self:center}
 .fleet-type-details .fleet-type-content ul{flex:auto;max-height:35dvh}
}

body.shell #panes #home-actions .home-asset-picture{display:grid;place-items:center;flex:0 0 56px;width:56px;height:56px;border-radius:14px;background:var(--surface-alt,#f4f7fa);align-self:center}
body.shell #panes #home-actions .home-asset-picture .vic{width:44px;height:44px;margin:0;stroke-width:1.3}
@media(max-width:600px){
 body.shell #panes #home-actions .home-asset-picture{flex-basis:40px;width:40px;height:40px;border-radius:10px;align-self:flex-start}
 body.shell #panes #home-actions .home-asset-picture .vic{width:34px;height:34px}
}
@container(min-width:560px){
 body.shell.web #panes #home-actions .row.acti{grid-template-columns:56px minmax(0,1.35fr) minmax(0,1fr) minmax(88px,auto);column-gap:14px}
}

/* Overview exposes the same pastel summary without requiring a hover. */
body.shell #panes button.home-fleet-chart{border:1px solid var(--line,#dbe3ee);border-radius:16px;background:var(--card,#fff);min-width:0;grid-column:1 / -1}
.home-fleet-chart h3{font-size:14px;margin:0 0 12px}
.home-fleet-chart .fleet-type-content{gap:16px;flex-wrap:nowrap}
.home-fleet-chart .fleet-type-pie{width:104px;height:104px}
.home-fleet-chart .fleet-type-pie>span{width:72px;height:72px;font-size:26px}
.home-fleet-chart .fleet-type-content ul{min-width:0;overflow:hidden}
.home-fleet-chart .fleet-type-content li{font-size:12px;padding:3px 0}
@media(min-width:1100px){
 body.shell.web #panes #home-tiles{grid-template-columns:repeat(var(--home-status-count,4),minmax(0,1fr)) minmax(340px,2.5fr);align-items:stretch}
 body.shell #panes button.home-fleet-chart{contain:size;grid-column:auto}
 .home-fleet-chart h3{grid-column:2;margin:0 0 2px;font-size:12px;line-height:16px}
 .home-fleet-chart .fleet-type-content{display:contents}
 .home-fleet-chart .fleet-type-pie{grid-column:1;grid-row:1 / 3;align-self:center;width:60px;height:60px}
 .home-fleet-chart .fleet-type-pie>span{width:42px;height:42px;font-size:18px;line-height:20px}
 .home-fleet-chart .fleet-type-pie small{font-size:10px;line-height:12px}
 .home-fleet-chart .fleet-type-content ul{grid-column:2;max-height:48px;align-self:center}
 .home-fleet-chart .fleet-type-content li{font-size:11px;line-height:12px;padding:0;min-height:12px}
 .home-fleet-chart .fleet-type-content li i{width:7px;height:7px}
}
/* Reuse the machinery illustrations and reserve a single line for registration. */
.vehicle-art{display:block;object-fit:contain;flex:none;max-width:100%;height:auto}
body.shell #panes #home-actions .home-asset-picture{flex-basis:96px;width:96px;height:72px;background:transparent;border-radius:0}
.home-asset-picture .vehicle-art{width:96px;height:72px;object-fit:contain}
body.shell #asset-list .vehicle-list-identity{display:flex;gap:12px;align-items:center;min-width:0}
body.shell #asset-list .vehicle-art{width:88px;height:68px;object-fit:contain}
body.shell #asset-list .vehicle-list-text{min-width:0;flex:1}
body.shell #asset-list .reg{white-space:nowrap;overflow-wrap:normal;word-break:normal}
body.shell #asset-list .asset-description>span{display:block}
body.shell #asset-list .asset-brand{margin-top:5px}
@media(min-width:1100px){
 body.shell.web #tab-assets :is(.thead,.trow){grid-template-columns:minmax(200px,1.6fr) minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.2fr) 100px}
}
@media(min-width:900px) and (max-width:1099px){body.shell #asset-list .vehicle-list-identity{flex-direction:column;align-items:flex-start;gap:4px}}
@container(min-width:560px){body.shell.web #panes #home-actions .row.acti{grid-template-columns:96px minmax(0,1.35fr) minmax(0,1fr) minmax(88px,auto)}}
@media(max-width:600px){
 body.shell #panes #home-actions .home-asset-picture{flex-basis:64px;width:64px;height:52px}
 .home-asset-picture .vehicle-art{width:64px;height:52px}
 body.shell #asset-list .vehicle-art{width:72px;height:56px}
}

/* Oil detail history keeps the selected product and location in the panel header. */
body.shell #view-main #sd-hist{padding-inline:16px;}
@media(min-width:768px){body.shell #view-main #sd-hist{padding-inline:20px;}}
body.shell #view-main #sd-hist .history-day{display:block;margin:20px 0 8px;padding:0;border:0;border-radius:0;background:none;color:var(--muted);font-size:14px;font-weight:600;line-height:1.5}
body.shell #view-main #sd-hist .history-day:first-child{margin-top:8px}
body.shell #view-main #sd-hist .history-day>span{display:none}
body.shell #view-main #sd-hist .row{align-items:flex-start;padding:13px 0;gap:10px}
body.shell #view-main #sd-hist .grow{min-width:0}
body.shell #view-main #sd-hist .name{display:flex;align-items:center;flex-wrap:wrap;gap:7px;font-size:14px;line-height:1.5}
body.shell #view-main #sd-hist .qty{flex:none;text-align:right;white-space:nowrap}
body.shell #view-main #sd-hist .amt{font-size:16px;font-weight:700}
body.shell #view-main #sd-hist .sub{font-size:12px;line-height:1.7;overflow-wrap:anywhere}
body.shell #view-main #sd-hist .hist-origin-label{display:none}
body.shell #view-main #sd-hist .stock-history-route{font-size:13px;line-height:1.6}
body.shell #view-main #sd-hist .hist-info-wrap{position:relative;display:inline-flex}
body.shell #view-main #sd-hist .hist-time{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;min-height:26px;padding:0;margin:0;border:0;background:transparent;box-shadow:none;color:var(--muted);cursor:pointer}
body.shell #view-main #sd-hist .hist-info-panel{display:none;position:absolute;z-index:1100;top:var(--hist-info-top,100%);left:var(--hist-info-left,0px);width:280px;max-width:calc(100vw - 24px);padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--card,#fff);color:var(--ink);font-size:12px;font-weight:400;line-height:1.6;white-space:normal;box-shadow:0 4px 16px #0002}
body.shell #view-main #sd-hist .hist-info-wrap.is-open>.hist-info-panel{display:grid;gap:4px}
body.shell #view-main #sd-hist .hist-info-panel [data-goperson]{text-decoration:underline;cursor:pointer}

body.shell #view-main #sd-hist .hist-oil-details{min-width:0;margin-top:4px}
body.shell #view-main #sd-hist .hist-oil-details>summary{display:flex;align-items:center;gap:8px;list-style:none;cursor:pointer}
body.shell #view-main #sd-hist .hist-oil-details>summary::-webkit-details-marker{display:none}
body.shell #view-main #sd-hist .hist-oil-summary{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:var(--muted)}
body.shell #view-main #sd-hist .hist-oil-summary button{display:inline;padding:0;min-height:0;line-height:inherit;vertical-align:baseline}
body.shell #view-main #sd-hist .hist-detail-label{flex:none;font-size:11px;white-space:nowrap;color:var(--muted)}
body.shell #view-main #sd-hist .hist-oil-details[open] .hist-oil-summary{white-space:normal;overflow:visible}
body.shell #view-main #sd-hist .hist-oil-expanded{padding-top:5px}
body.shell #view-main #sd-hist .hist-actions{position:relative}
body.shell #view-main #sd-hist .hist-actions-toggle{width:34px;min-height:32px;margin-top:5px;padding:0;border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:7px}
body.shell #view-main #sd-hist .hist-actions-items{display:none}
body.shell #view-main #sd-hist .hist-actions-open .hist-actions-items{display:flex;flex-direction:column;position:absolute;z-index:65;right:0;top:calc(100% + 4px);min-width:150px;padding:4px;background:var(--card,#fff);border:1px solid var(--line);border-radius:8px;box-shadow:0 4px 16px #0002}
body.shell #view-main #sd-hist .hist-actions-up .hist-actions-items{top:auto;bottom:calc(100% + 4px)}
body.shell #view-main #sd-hist .hist-actions-items .more{margin:0;min-height:34px;padding:7px 10px;text-align:left;border:0;background:transparent;box-shadow:none}

/* Stock records reserve two rows and a small action trigger, including on phones. */
body.shell #view-main #sd-hist .row{display:grid;grid-template-columns:minmax(0,1fr) auto 32px;grid-template-rows:24px auto;column-gap:8px;row-gap:0;align-items:center;padding:8px 0;}
body.shell #view-main #sd-hist .row>.grow,body.shell #view-main #sd-hist .row>.qty{display:contents;}
body.shell #view-main #sd-hist .row .name{grid-column:1;grid-row:1;min-width:0;flex-wrap:nowrap;gap:4px;font-size:13px;line-height:20px;white-space:nowrap;}
body.shell #view-main #sd-hist .row .amt{grid-column:2;grid-row:1;font-size:14px;line-height:20px;text-align:right;white-space:nowrap;}
body.shell #view-main #sd-hist .row .rowtools{grid-column:3;grid-row:1 / span 2;align-self:center;margin:0;}
body.shell #view-main #sd-hist .row .hist-actions-toggle{width:32px;min-width:32px;min-height:32px;height:32px;margin:0;padding:0;}
body.shell #view-main #sd-hist .row .hist-oil-details{grid-column:1 / span 2;grid-row:2;margin:0;}
body.shell #view-main #sd-hist .row>.grow>.sub{grid-column:1 / span 2;grid-row:2;min-width:0;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px;}
body.shell #view-main #sd-hist .row .hist-oil-details>summary{min-height:20px;line-height:20px;gap:6px;}
body.shell #view-main #sd-hist .row .hist-time{width:20px;height:20px;min-height:20px;}
body.shell #view-main #sd-hist .row .hist-oil-details[open] .hist-oil-summary{white-space:normal;}
body.shell #view-main #sd-hist .row:has(.hist-oil-details[open]) .rowtools{align-self:start;margin-top:4px;}

body.shell #view-main #sd-hist .row .hist-oil-details{padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;}
body.shell #view-main #sd-hist .row .hist-oil-details>summary{padding:0;margin:0;border:0;border-radius:0;background:transparent;box-shadow:none;font-weight:400;}

/* Keep the established history layout; reserve bold text for headings. */
body.shell :is(#view-main,#view-asset) :is(#hist-list,#as-hist,#home-recent,#sd-hist) :is(.name,.amt,.hist-oil-name,.hist-repair-number,.hist-repair-vehicle,.hist-origin-name,.history-group-head,strong,b,[data-oil-document],.repair-source-link){font-weight:400;}
body.shell :is(#view-main,#view-asset) :is(#hist-list,#as-hist,#home-recent,#sd-hist) :is(.tag,button.history-kind-chip){font-size:11px;font-weight:400;line-height:1.45;padding:1px 6px;letter-spacing:0;}
body.shell :is(#pi-completed-list,#oil-pool-list,#oil-detail-body) :is(strong,b,.repair-list-vehicle,.repair-list-reg,.repair-list-title,.oil-pool-row-title){font-weight:400;}
body.shell #as-meter-hist :is(.mh-val,strong,b){font-weight:400;}
body.shell :is(#panes,#view-asset) #tab-tires .tire-event-row :is(strong,b,.tire-event-kind){font-weight:400;}
/* Maintain comfortable gutters without removing the familiar section frames. */
body.shell #panes :is(.grid2,.filters) > *{min-width:0;}
body.shell :is(#panes,#view-asset,.modal-panel) :is(.hint,.sub,.repair-detail-note){overflow-wrap:anywhere;}
@media(max-width:899px){
 body.shell #panes > .card:not(#tab-account){padding:16px;}
 body.shell .modal-backdrop > .modal-panel,
 body.shell #stock-sheet:has(> #stock-detail:not(.hidden)) > #stock-detail,
 body.shell #cal-sheet:has(> #cal-detail.day) > #cal-detail{padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px));}
}
@media(max-width:899px){
 /* Keep the history action menu clear of the fixed navigation and scan button. */
 body.shell #panes > #tab-history.card{padding-bottom:calc(112px + env(safe-area-inset-bottom,0px));}
}
/* Fleet suggestions stay anchored below the desktop search field. */
.topbar-search-panel {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 80;
  width: min(480px, calc(100vw - 32px)); max-height: min(65vh, 540px); overflow-y: auto;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
  color: var(--ink); box-shadow: 0 12px 32px rgba(15,24,34,.18); padding: 6px;
}
.topbar-search-panel[hidden] { display: none; }
.topbar-search-panel p { margin: 6px 10px 8px; color: var(--muted); font-size: 12px; }
.topbar-search-panel button {
  display: block; width: 100%; text-align: left; white-space: normal;
  border: 0; border-radius: 8px; padding: 10px; background: transparent; color: var(--ink);
}
.topbar-search-panel button:hover, .topbar-search-panel button[aria-selected="true"],
.topbar-search-panel button:focus-visible { background: var(--bg-soft); outline: 2px solid var(--line-strong); outline-offset: -2px; }
.topbar-search-panel strong { display: block; font-size: 14px; }
.topbar-search-panel span { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.topbar-search-panel [data-search-all] { border-top: 1px solid var(--line); border-radius: 0; font-weight: 600; font-size: 12px; }

.topbar-search-panel .search-meter { color: var(--ink); font-weight: 600; }

.topbar-search-panel small {display:block;color:var(--muted);font-size:11px;margin-bottom:2px;}
.topbar-search-panel span {display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;}
.topbar-search-panel .search-meter {display:block;}
.topbar-search-panel [data-search-all][hidden] {display:none;}

/* Recent vehicle history: five complete activity groups per page. */
body.shell.web #view-asset > #as-history-card {align-self:start;}
body.shell #view-asset #as-hist .detail-history-body {max-height:none;overflow:visible;scrollbar-gutter:auto;}
body.shell #view-asset #as-hist .asset-history-entry {padding:0;border-bottom:1px solid var(--line);}
body.shell #view-asset #as-hist .asset-history-entry:last-child {border-bottom:0;}
body.shell #view-asset #as-hist .history-day {display:block;margin:10px 0 2px;padding:0;border:0;border-radius:0;background:transparent;font-size:14px;font-weight:650;line-height:1.5;color:var(--muted);}
body.shell #view-asset #as-hist .history-day > span {display:none;}
body.shell #view-asset #as-hist .asset-history-entry:first-child .history-day {margin-top:0;}
body.shell #view-asset #as-hist .asset-history-entry .row {min-height:0;padding:8px 0;margin:0;gap:10px;align-items:center;border-bottom:0;}
body.shell #view-asset #as-hist .rowmenu > summary {width:36px;height:36px;min-height:36px;}
body.shell #view-asset #as-hist .history-action-group {margin:0;padding:0;}

/* Explicit page visibility wins over row/article display rules. */
body.shell :is(#as-hist,#tire-changes-panel) .detail-history-body > [hidden] {display:none!important;}
body.shell :is(#as-hist,#tire-changes-panel) .detail-history-pages {display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:12px;min-width:0;}
body.shell :is(#as-hist,#tire-changes-panel) .detail-history-count {flex-basis:100%;margin-bottom:2px;color:var(--muted);font-size:12px;}
body.shell :is(#as-hist,#tire-changes-panel) .detail-history-pages button {width:auto!important;min-width:34px;min-height:36px;height:auto!important;padding:6px 10px!important;margin:0!important;font-size:13px;}
body.shell :is(#as-hist,#tire-changes-panel) .detail-history-pages button[aria-current="page"] {background:#244456!important;color:#fff!important;}
body.shell :is(#as-hist,#tire-changes-panel) .detail-history-pages button:disabled {opacity:.45;}