/* ==========================================================================
   Shamwari Guide PWA - css/fleet.css
   Styles for the Fleet feature (js/features/fleet.js). Reuses design tokens
   defined on :root in app.css (--sg-*) - no tokens are redefined here.
   ========================================================================== */

.sg-fleet-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--sg-s-sm);
  padding: var(--sg-s-sm) var(--sg-s-md);
  border-radius: var(--sg-r-md);
  background: var(--sg-info-container, var(--sg-surface-variant));
  color: var(--sg-on-info-container, var(--sg-muted));
  font-size: 12px;
  line-height: 16px;
}
.sg-fleet-banner .sg-inline-icon { flex: 0 0 auto; margin-top: 1px; }

/* ---------- overview vehicle-row thumbnail ------------------------------ */
.sg-fleet-thumb {
  width: 44px;
  height: 44px;
  border-radius: var(--sg-r-sm);
  object-fit: cover;
  flex: 0 0 auto;
  background: var(--sg-surface-variant);
}
.sg-fleet-thumb--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sg-muted);
  border: 1px solid var(--sg-border);
}

/* ---------- vehicle detail header ---------------------------------------- */
.sg-fleet-header {
  display: flex;
  align-items: center;
  gap: var(--sg-s-md);
  padding: var(--sg-s-md);
}
.sg-fleet-photo {
  position: relative;
  flex: 0 0 auto;
  width: 84px;
  height: 84px;
  border-radius: var(--sg-r-md);
  overflow: hidden;
  border: 1px solid var(--sg-border);
  background: var(--sg-surface-variant);
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sg-fleet-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sg-fleet-photo__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sg-muted);
}
.sg-fleet-photo__badge {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sg-primary);
  color: var(--sg-on-primary);
  box-shadow: var(--sg-shadow-1, 0 1px 3px rgba(0, 0, 0, 0.25));
}

/* ---------- history list items (checks / services / handovers) ---------- */
.sg-fleet-history-item {
  padding: var(--sg-s-sm) 0;
  border-bottom: 1px solid var(--sg-border);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sg-fleet-history-item:last-child { border-bottom: none; }

/* ---------- weekly-check checklist form ---------------------------------- */
.sg-fleet-checkrow {
  display: flex;
  flex-direction: column;
  gap: var(--sg-s-xs);
  padding-bottom: var(--sg-s-sm);
  border-bottom: 1px solid var(--sg-border);
}
.sg-fleet-checkrow:last-of-type { border-bottom: none; padding-bottom: 0; }

/* ---------- status-change sheet list rows -------------------------------- */
.sg-fleet-banner + .sg-stats { margin-top: 0; }

/* ---------- card header action buttons -----------------------------------
   Fleet's card headers pair a long title ("Weekly checks & inspection
   history") with an action button ("New weekly check"). Scoped to
   .sg-fleet-page (this feature's own page wrapper) rather than the shared
   .sg-card__header class itself, so nothing outside Fleet is affected. */
.sg-fleet-page .sg-card__header {
  flex-wrap: wrap;
  row-gap: var(--sg-s-sm);
}
.sg-fleet-page .sg-card__header > .sg-row {
  margin-left: auto;
}
.sg-fleet-page .sg-card__header .sg-btn {
  white-space: nowrap;
}