/* Fleet Admin visual finish, wave 1 — 2026-09-06.
 * Shared chrome, Home and Add/Edit unit dialogs. Existing renderers retain
 * density, navigation, fields, permissions and operational status colors.
 * Local polish tokens do not redefine the app's semantic/theme variables.
 */
:is(#panel-fleetadmin, #fa-add-truck-root, #fa-add-trailer-root,
    #fa-edit-truck-root, #fa-edit-trailer-root) {
  --fa-pol-page: var(--emr-bg-muted);
  --fa-pol-surface: var(--emr-card-bg);
  --fa-pol-inset: var(--emr-bg-muted);
  --fa-pol-border: var(--emr-border);
  --fa-pol-border-strong: var(--emr-border-strong);
  --fa-pol-text: var(--emr-text);
  --fa-pol-muted: var(--emr-text-muted);
  --fa-pol-subtle: var(--emr-text-subtle);
  --fa-pol-shadow: 0 1px 2px #00000006, 0 3px 12px #00000005;
  --fa-pol-shadow-hover: 0 2px 8px #0000000c;
  --fa-pol-highlight: inset 0 1px 0 #ffffffb3;
  --fa-pol-accent: color-mix(in srgb, var(--gold, var(--accent)) 40%, #152033);
  --fa-pol-accent-tint: color-mix(in srgb, var(--gold, var(--accent)) 6%, var(--fa-pol-surface));
}
html:is([data-theme="dark"],[data-theme="dim"]) :is(#panel-fleetadmin, #fa-add-truck-root, #fa-add-trailer-root,
    #fa-edit-truck-root, #fa-edit-trailer-root) {
  --fa-pol-page: var(--emr-bg);
  --fa-pol-surface: var(--emr-card-bg);
  --fa-pol-inset: var(--emr-bg-muted);
  --fa-pol-border: var(--emr-border);
  --fa-pol-border-strong: var(--emr-border-strong);
  --fa-pol-text: var(--emr-text);
  --fa-pol-muted: var(--emr-text-muted);
  --fa-pol-subtle: var(--emr-text-subtle);
  --fa-pol-shadow: 0 2px 5px #00000026;
  --fa-pol-shadow-hover: 0 3px 10px #00000040;
  --fa-pol-highlight: inset 0 1px 0 #ffffff06;
  --fa-pol-accent: color-mix(in srgb, var(--gold, var(--accent)) 72%, white);
}

/* The group rail and its nested tab rail keep their placement and dimensions. */
#panel-fleetadmin > div > .section-hdr {
  background: var(--fa-pol-surface);
  border-bottom-color: var(--fa-pol-border);
  box-shadow: var(--fa-pol-highlight);
}
#panel-fleetadmin #fleetadm-tabs {
  background: var(--fa-pol-inset) !important;
  border-bottom-color: var(--fa-pol-border) !important;
}
#panel-fleetadmin :is(#fleetadm-groups, #fleetadm-subtabs) .fa-main-tab {
  color: var(--fa-pol-muted);
}
#panel-fleetadmin :is(#fleetadm-groups, #fleetadm-subtabs) .fa-main-tab:hover {
  background: var(--fa-pol-accent-tint);
  color: var(--fa-pol-text);
}
#panel-fleetadmin :is(#fleetadm-groups, #fleetadm-subtabs) .fa-main-tab.active {
  color: var(--fa-pol-text);
  background: var(--fa-pol-accent-tint);
}
#panel-fleetadmin :is(#fleetadm-groups, #fleetadm-subtabs) .fa-main-tab:focus-visible {
  outline: 2px solid var(--fa-pol-accent);
  outline-offset: -2px;
}

/* Keep every summary and work card, including its existing deep-link target.
 * Static totals use a quiet inset; interactive cards have a distinct surface.
 * Preserve colored left edges and status icons rather than resetting borders.
 */
#panel-fleetadmin #fleetadm-pane-home { background: var(--fa-pol-page); }
#panel-fleetadmin #fleetadm-pane-home .emr-metric-card {
  background: var(--fa-pol-surface);
  border-top-color: var(--fa-pol-border);
  border-right-color: var(--fa-pol-border);
  border-bottom-color: var(--fa-pol-border);
  border-radius: 8px;
  box-shadow: var(--fa-pol-shadow), var(--fa-pol-highlight);
}
#panel-fleetadmin #fleetadm-trucks-pills .emr-metric-card {
  background: var(--fa-pol-inset);
  box-shadow: var(--fa-pol-highlight);
}
#panel-fleetadmin #fleetadm-pane-home .emr-metric-card-label {
  color: var(--fa-pol-muted);
}
#panel-fleetadmin #fleetadm-pane-home .emr-metric-card-value {
  color: var(--fa-pol-text);
}
#panel-fleetadmin #fleetadm-pane-home .emr-metric-card:hover {
  transform: none;
}
#panel-fleetadmin #fleetadm-trucks-pills .emr-metric-card:hover {
  box-shadow: var(--fa-pol-highlight);
}
#panel-fleetadmin #fleetadm-pane-home button.emr-metric-card:hover {
  background: var(--fa-pol-accent-tint);
  box-shadow: var(--fa-pol-shadow-hover), inset 0 0 0 1px var(--fa-pol-accent);
}
#panel-fleetadmin #fleetadm-pane-home button.emr-metric-card:focus-visible {
  outline: 2px solid var(--fa-pol-accent);
  outline-offset: 2px;
}

/* These four unit dialogs mount outside the panel. High-specificity scoping
 * also wins over the existing late-injected fa-modal-style sheet. */
:is(#fa-add-truck-root, #fa-add-trailer-root, #fa-edit-truck-root, #fa-edit-trailer-root)
  .fa-modal-card {
  background: var(--fa-pol-surface);
  border-color: var(--fa-pol-border-strong);
  box-shadow: 0 14px 40px #00000040, var(--fa-pol-highlight);
  color: var(--fa-pol-text);
}
:is(#fa-add-truck-root, #fa-add-trailer-root, #fa-edit-truck-root, #fa-edit-trailer-root)
  :is(.fa-modal-header, .fa-modal-footer) {
  background: var(--fa-pol-inset);
  border-color: var(--fa-pol-border);
}
:is(#fa-add-truck-root, #fa-add-trailer-root, #fa-edit-truck-root, #fa-edit-trailer-root)
  :is(.fa-modal-title, .fa-modal-body) { color: var(--fa-pol-text); }
:is(#fa-add-truck-root, #fa-add-trailer-root, #fa-edit-truck-root, #fa-edit-trailer-root)
  :is(.fa-modal-label, .fa-modal-close) { color: var(--fa-pol-muted); }
:is(#fa-add-truck-root, #fa-add-trailer-root, #fa-edit-truck-root, #fa-edit-trailer-root)
  .fa-modal-input {
  border-color: var(--fa-pol-border-strong);
  box-shadow: inset 0 1px 2px #00000008;
}
:is(#fa-add-truck-root, #fa-add-trailer-root, #fa-edit-truck-root, #fa-edit-trailer-root)
  .fa-modal-input:not(:disabled) {
  background: var(--fa-pol-page);
  color: var(--fa-pol-text);
}
:is(#fa-add-truck-root, #fa-add-trailer-root, #fa-edit-truck-root, #fa-edit-trailer-root)
  .fa-modal-btn-primary {
  background: var(--gold, var(--accent));
  color: var(--emr-text-on-gold, #1a1a1a);
}
:is(#fa-add-truck-root, #fa-add-trailer-root, #fa-edit-truck-root, #fa-edit-trailer-root)
  .fa-modal-btn-secondary {
  background: var(--fa-pol-surface);
  border-color: var(--fa-pol-border-strong);
  color: var(--fa-pol-muted);
  box-shadow: var(--fa-pol-highlight);
}
:is(#fa-add-truck-root, #fa-add-trailer-root, #fa-edit-truck-root, #fa-edit-trailer-root)
  .fa-modal-btn-secondary:hover:not(:disabled) {
  background: var(--fa-pol-inset);
  border-color: var(--fa-pol-accent);
  color: var(--fa-pol-text);
}
:is(#fa-add-truck-root, #fa-add-trailer-root, #fa-edit-truck-root, #fa-edit-trailer-root)
  :is(button, input, select, textarea):focus-visible {
  outline: 2px solid var(--fa-pol-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  #panel-fleetadmin #fleetadm-pane-home .emr-metric-card { transition: none; }
}

/* Home work cards retain their familiar box while native buttons provide
 * Enter/Space activation, focus and assistive-technology semantics. */
#fleetadm-pane-home button.emr-metric-card { font:inherit; text-align:left; width:100%; }
#fleetadm-pane-home button.emr-metric-card > span { display:block; }
#fleetadm-pane-home button.emr-metric-card .emr-metric-card-top { display:flex; }

/* Six work shortcuts form a complete row; smaller screens use even groups. */
#panel-fleetadmin #fa-home-workcards { grid-template-columns:repeat(6,minmax(0,1fr)) !important; }
#panel-fleetadmin .fa-home-work-heading { color:var(--fa-pol-muted); }
@media (max-width:1200px) { #panel-fleetadmin #fa-home-workcards { grid-template-columns:repeat(3,minmax(0,1fr)) !important; } }
@media (max-width:700px) { #panel-fleetadmin #fa-home-workcards { grid-template-columns:repeat(2,minmax(0,1fr)) !important; } }

.fa-health-panel{padding:16px;border-bottom:1px solid var(--border2);background:var(--bg)}
.fa-health-heading{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.fa-health-heading>div{flex:1;min-width:220px}
.fa-health-panel h3{margin:0;font-size:15px}.fa-health-panel p{font-size:12px;color:var(--text2);line-height:1.5}
.fa-health-heading button,.fa-health-panel button,.fa-health-settings button{border:1px solid var(--border2);background:var(--bg2);color:var(--text);border-radius:6px;padding:6px 10px;font:inherit;cursor:pointer}
.fa-health-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin:12px 0}
.fa-health-reading{border:1px solid var(--border2);border-radius:9px;padding:12px;background:var(--bg2);min-width:0}
.fa-health-reading>div{display:flex;justify-content:space-between;gap:6px;font-size:12px}.fa-health-reading strong{display:block;font-size:22px;margin:8px 0;font-variant-numeric:tabular-nums}.fa-health-reading small{display:block;color:var(--text3);font-size:10px;line-height:1.6}.fa-health-reading strong small{display:inline;font-size:12px}.fa-health-reading[data-stale="true"]{border-style:dashed}
.fa-health-unit-flag{display:inline-block;border-radius:5px;padding:2px 5px;font-size:10px;font-weight:650;background:#fef3c7;color:#92400e;white-space:nowrap}.fa-health-unit-flag[data-state="confirmed"]{background:#fee2e2;color:#991b1b}
.fa-health-alerts{border-left:3px solid #f59e0b;padding:2px 12px;background:var(--bg2)}.fa-health-error{color:#b91c1c!important}
.fa-health-settings{width:min(760px,94vw);max-height:90vh;overflow:auto;box-sizing:border-box;border:1px solid var(--border);border-radius:12px;background:var(--bg);color:var(--text);padding:22px}.fa-health-settings::backdrop{background:#0f172a88}
.fa-health-settings h2{font-size:18px}.fa-health-settings p{font-size:12px;line-height:1.5;color:var(--text2)}.fa-health-settings label{display:block;font-size:12px;margin:8px 0}.fa-health-settings input:not([type="checkbox"]){display:block;box-sizing:border-box;width:100%;padding:7px;border:1px solid var(--border2);border-radius:5px;background:var(--bg2);color:var(--text)}
.fa-health-settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.fa-health-settings fieldset{min-width:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;border:1px solid var(--border2);border-radius:8px}.fa-health-settings legend{font-size:12px}.fa-health-source{grid-column:1/-1}.fa-health-settings footer{display:flex;justify-content:flex-end;gap:10px}
@media(max-width:520px){.fa-health-settings-grid{grid-template-columns:1fr}.fa-health-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.fa-health-reading{padding:9px}}

.fa-health-settings{margin:auto}