/* Fleet heads share a compact visual hierarchy; charging/control state is unchanged. */
#app-view #fleet-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 14px;
}

#fleet-list .fleet-head-card {
  --fh-tone: #716b66;
  --fh-tone-soft: #f0eeec;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  min-width: 0;
  margin: 0;
  padding: 16px;
  overflow: hidden;
  border: 1px solid #e6ddd6;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 3px 14px #3c291005;
}

#fleet-list .fleet-head-card[data-state="ready"] { --fh-tone: #356a4e; --fh-tone-soft: #edf6f0; }
#fleet-list .fleet-head-card[data-state="charging"] { --fh-tone: #86591c; --fh-tone-soft: #fff3de; }
#fleet-list .fleet-head-card[data-state="fault"] { --fh-tone: #a64131; --fh-tone-soft: #fff0eb; }
#fleet-list .fleet-head-card[data-state="offline"],
#fleet-list .fleet-head-card[data-state="occupied"] { --fh-tone: #82672e; --fh-tone-soft: #fbf5e9; }

#fleet-list .fleet-head-card .fh-main {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 13px;
  min-width: 0;
  height: auto;
  padding: 0;
  border: 0;
  background: transparent;
}
#fleet-list .fleet-head-card .fh-main > .charger-visual {
  width: 80px;
  flex: 0 0 80px;
  align-self: start;
  margin: 0;
}
#fleet-list .fleet-head-card .charger-image-frame {
  display: grid;
  place-items: center;
  width: 100%;
  height: 90px;
  border: 1px solid #ece5de;
  border-radius: 14px;
  background: linear-gradient(145deg, #fff, #f7f3ef);
}
#fleet-list .fleet-head-card .charger-image-frame img,
#fleet-list .fleet-head-card .charger-image-frame .charger-product-image {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  padding: 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
  transform: none;
}
#fleet-list .fleet-head-card .charger-visual figcaption { display: none; }
#fleet-list .fleet-head-card .fh-identity { flex: 1; min-width: 0; }
#fleet-list .fleet-head-card .fh-name {
  display: block;
  margin: 0;
  color: var(--ink, #292524);
  font-size: 17px;
  line-height: 1.45;
  font-weight: 700;
  letter-spacing: -.2px;
  overflow-wrap: anywhere;
}
#fleet-list .fleet-head-card .fh-site {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  margin-top: 4px;
  color: #746a63;
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
#fleet-list .fleet-head-card .fh-site .ui-icon { width: 14px; height: 18px; flex: 0 0 14px; }
#fleet-list .fleet-head-card .fh-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}
#fleet-list .fleet-head-card .fh-tags .status-dot,
#fleet-list .fleet-head-card .fh-connector {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 25px;
  padding: 3px 8px;
  border: 0;
  border-radius: 7px;
  font-size: 12px;
  line-height: 1.5;
  font-weight: 550;
  white-space: normal;
}
#fleet-list .fleet-head-card .fh-tags .status-dot { background: var(--fh-tone-soft); color: var(--fh-tone); }
#fleet-list .fleet-head-card .fh-tags .status-dot::before {
  content: '';
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: currentColor;
}
#fleet-list .fleet-head-card .fh-connector { background: #f7f4f0; color: #71665d; }

#fleet-list .fleet-head-card .fh-metrics {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  margin-top: 14px;
  padding: 10px 0;
  border-radius: 12px;
  background: #faf7f4;
}
#fleet-list .fleet-head-card .fh-metrics > div {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 3px 5px;
  min-width: 0;
  padding: 0 12px;
}
#fleet-list .fleet-head-card .fh-metrics > div + div { border-left: 1px solid #e9e1d9; }
#fleet-list .fleet-head-card .fh-metrics small {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 100%;
  color: #7b7068;
  font-size: 12px;
  line-height: 1.45;
}
#fleet-list .fleet-head-card .fh-metrics > div > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 5px;
  min-width: 0;
}
#fleet-list .fleet-head-card .fh-metrics small .ui-icon { width: 14px; height: 14px; flex-basis: 14px; }
#fleet-list .fleet-head-card .fh-metrics strong {
  color: #362d27;
  font-size: 22px;
  line-height: 1.35;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
#fleet-list .fleet-head-card .fh-metrics span { color: #796b60; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
#fleet-list .fleet-head-card .fh-power strong:only-child { font-size: 15px; }
#fleet-list .fleet-head-card .fh-metrics strong.fh-missing { font-size: 14px; font-weight: 500; line-height: 2.1; color: #81766d; }

#fleet-list .fleet-head-card .fh-details {
  min-width: 0;
  margin-top: 8px;
  color: #72685f;
  font-size: 13px;
}
#fleet-list .fleet-head-card .fh-details > summary {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 6px 0;
  list-style: none;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.5;
}
#fleet-list .fleet-head-card .fh-details > summary::-webkit-details-marker { display: none; }
#fleet-list .fleet-head-card .fh-details > summary::after { content: '⌄'; margin-left: auto; font-size: 17px; color: #8b7b6f; }
#fleet-list .fleet-head-card .fh-details[open] > summary::after { content: '⌃'; }
#fleet-list .fleet-head-card .fh-details dl {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px 12px;
  min-width: 0;
  margin: 0 0 8px;
  padding: 11px 12px;
  border-radius: 10px;
  background: #faf8f5;
  font-size: 13px;
  line-height: 1.6;
}
#fleet-list .fleet-head-card .fh-details dl > div {
  display: grid;
  grid-template-columns: minmax(76px, .42fr) minmax(0, 1fr);
  gap: 7px 12px;
  min-width: 0;
}
#fleet-list .fleet-head-card .fh-details dt { color: #8b7b6f; }
#fleet-list .fleet-head-card .fh-details dd { min-width: 0; margin: 0; color: #5d5147; overflow-wrap: anywhere; }
#fleet-list .fleet-head-card .fh-details .device-photo-note { margin: 5px 0 10px; font-size: 12px; color: #877970; line-height: 1.6; }
#fleet-list .fleet-head-card .fh-details:not([open]) > :not(summary) { display: none; }

#fleet-list .fleet-head-card .fh-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: inherit;
  letter-spacing: normal;
}
#fleet-list .fleet-head-card .fh-actions:has(> .fh-manage) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#fleet-list .fleet-head-card .fh-actions span { display: inline; }
#fleet-list .fleet-head-card .fh-actions .button,
#fleet-list .fleet-head-card .fh-manage > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  min-width: 0;
  min-height: 46px;
  margin: 0;
  padding: 10px 9px;
  border: 1px solid #e5d8ce;
  border-radius: 11px;
  color: #58463a;
  background: #fff;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 600;
  text-align: center;
  white-space: normal;
  cursor: pointer;
}
#fleet-list .fleet-head-card .fh-actions .fh-qr { color: #fff; background: var(--brand, #a7441e); border-color: var(--brand, #a7441e); }
#fleet-list .fleet-head-card .fh-actions .fh-qr:hover { background: #963c1d; border-color: #963c1d; }
#fleet-list .fleet-head-card .fh-manage,
#fleet-list .fleet-head-card .fh-manage[open] { min-width: 0; grid-column: 2; }
#fleet-list .fleet-head-card .fh-manage > summary { list-style: none; }
#fleet-list .fleet-head-card .fh-manage > summary::-webkit-details-marker { display: none; }
#fleet-list .fleet-head-card .fh-manage > summary::after { content: '⌄'; margin-left: auto; font-size: 17px; }
#fleet-list .fleet-head-card .fh-manage[open] > summary { background: #faf4ee; border-color: #d3b6a2; }
#fleet-list .fleet-head-card .fh-manage[open] > summary::after { content: '⌃'; }
#fleet-list .fleet-head-card .fh-manage-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: calc(200% + 8px);
  max-width: none;
  margin-top: 8px;
  margin-left: calc(-100% - 8px);
  padding: 10px;
  border-radius: 12px;
  background: #faf6f1;
}
#fleet-list .fleet-head-card .fh-manage-options > .button { min-height: 44px; font-size: 13px; padding: 9px 6px; background: #fff; }
#fleet-list .fleet-head-card .fh-manage:not([open]) > .fh-manage-options { display: none; }
#fleet-list .fleet-head-card .ui-icon { width: 18px; height: 18px; flex: 0 0 18px; }
#fleet-list .fleet-head-card :is(summary, .button):focus-visible { outline: 3px solid var(--brand, #a7441e); outline-offset: 3px; }

@media (max-width: 360px) {
  #fleet-list .fleet-head-card { padding: 14px; border-radius: 16px; }
  #fleet-list .fleet-head-card .fh-main { gap: 11px; }
  #fleet-list .fleet-head-card .fh-main > .charger-visual { width: 72px; flex-basis: 72px; }
  #fleet-list .fleet-head-card .charger-image-frame { height: 84px; }
  #fleet-list .fleet-head-card .fh-name { font-size: 16px; }
  #fleet-list .fleet-head-card .fh-site { font-size: 12px; }
  #fleet-list .fleet-head-card .fh-metrics > div { padding-inline: 10px; }
  #fleet-list .fleet-head-card .fh-actions .button,
  #fleet-list .fleet-head-card .fh-manage > summary { font-size: 13px; }
}

@media (min-width: 1050px) {
  #app-view #fleet-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  #fleet-list .fleet-head-card { padding: 18px; }
  #fleet-list .fleet-head-card .fh-name { font-size: 18px; }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  #fleet-list .fleet-head-card { transition: border-color .16s ease, box-shadow .16s ease; }
  #fleet-list .fleet-head-card:hover { border-color: #d7c6b8; box-shadow: 0 6px 20px #3c29100b; }
}
@media (prefers-reduced-motion: reduce) {
  #fleet-list .fleet-head-card,
  #fleet-list .fleet-head-card .button { transition: none; }
}