/* ============================================================
   topdevphone — Garages app styles
   Steel-blue identity (#4f9cf7 → #2a3e8f). base.css chrome +
   CSS vars only, so dark AND light themes both look right.
   ============================================================ */

/* vehicle card */
.gar-card {
  background: var(--bg-secondary);
  border-radius: var(--radius-card-lg);
  padding: 13px 14px;
  margin-bottom: 12px;
}
.gar-card.gar-focus { animation: garFocus 1.5s ease 2; }
@keyframes garFocus {
  0%, 100% { box-shadow: none; }
  40% { box-shadow: 0 0 0 2.5px #4f9cf7; }
}

.gc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gc-name {
  font-size: 15.5px; font-weight: 800; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gar-plate {
  flex: 0 0 auto;
  background: var(--bg-tertiary); color: var(--text-secondary);
  border: 1px solid var(--separator);
  padding: 2.5px 8px; border-radius: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: 1px;
}

/* location / status line */
.gc-loc { margin-top: 5px; font-size: 12px; }
.gar-loc { display: inline-flex; align-items: center; gap: 5px; color: var(--text-secondary); }
.gar-loc .ic { width: 13px; height: 13px; }
.gar-loc.stored { color: var(--accent-green); }
.gar-loc.out { color: var(--accent-orange); }
.gar-loc.impound { color: var(--accent-red); }

/* fuel / engine / body mini bars */
.gc-bars { display: flex; gap: 10px; margin-top: 11px; }
.gar-bar { flex: 1; min-width: 0; }
.gb-head {
  display: flex; justify-content: space-between; gap: 4px;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase;
  color: var(--text-tertiary); margin-bottom: 4px;
}
.gb-track { height: 5px; border-radius: 3px; background: var(--bg-tertiary); overflow: hidden; }
.gb-fill { height: 100%; border-radius: 3px; transition: width 0.3s; }
.gb-fill.ok { background: var(--accent-green); }
.gb-fill.warn { background: var(--accent-yellow); }
.gb-fill.bad { background: var(--accent-red); }

/* card actions */
.gc-actions { display: flex; gap: 8px; margin-top: 12px; }
.gar-act {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px;
  padding: 8px 6px; border-radius: 10px;
  background: var(--bg-tertiary); color: var(--text-primary);
  font-size: 12px; font-weight: 700;
  transition: filter 0.15s, transform 0.1s;
}
.gar-act:active { transform: scale(0.97); filter: brightness(0.85); }
.gar-act .ic { width: 14px; height: 14px; }
.gar-act.primary { background: linear-gradient(140deg, #4f9cf7, #2a3e8f); color: #fff; }
.gar-act.pay { background: var(--accent-green); color: #fff; }

/* garage filter chip (Vehicles tab, after tapping a garage) */
.gar-filter {
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(79, 156, 247, 0.14); color: #4f9cf7;
  border-radius: 10px; padding: 8px 12px; margin: 2px 0 12px;
  font-size: 12.5px; font-weight: 700;
}
[data-theme='light'] .gar-filter { color: #2a5db0; }
.gar-filter button { color: inherit; font-size: 14px; display: flex; align-items: center; }

/* Garages tab */
.gar-count {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: rgba(79, 156, 247, 0.16); color: #4f9cf7;
  font-size: 11px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}
[data-theme='light'] .gar-count { color: #2a5db0; }
.gar-gps {
  width: 28px; height: 28px; border-radius: 8px; flex: 0 0 auto;
  background: var(--bg-tertiary); color: var(--accent-blue);
  display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.gar-gps:active { filter: brightness(1.3); }

/* Impound tab */
.gar-card.imp { border: 1px solid rgba(255, 69, 58, 0.25); }
.gar-fee-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 10px; padding: 9px 11px; border-radius: 10px;
  background: rgba(255, 69, 58, 0.1);
  font-size: 12.5px; color: var(--text-secondary);
}
.gar-fee-row b { font-size: 15px; font-weight: 800; color: var(--accent-red); }