/* Garage on a computer (screens of 1024px and wider; base.html loads this file only there).
   app.css holds what both designs share: colours, type and the parts such as buttons, cards and the plate. */

/* the navigation drawer on the left, with your vehicles */
body:has(> .topbar.signed) { padding-left: 280px; }
.topbar.signed { position: fixed; inset: 0 auto 0 0; width: 280px; border: 0; background: var(--bg-2); overflow-y: auto; z-index: 20; }
.topbar.signed .wrap { height: 100%; max-width: none; padding: 12px; display: flex; flex-direction: column; align-items: stretch; gap: 2px; }
.topbar.signed .logo { height: 56px; padding: 0 16px; margin-bottom: 8px; }
.topbar.signed .nav { flex-direction: column; margin: 0; gap: 2px; }
.topbar.signed .nav a { height: 56px; border-radius: 28px; padding: 0 16px; gap: 12px; }
.topbar.signed .nav .pill { background: none !important; }
.drawer-vehicles { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; padding-top: 4px; border-top: 1px solid var(--line); }
.drawer-label { font-size: .875rem; font-weight: 500; color: var(--muted); padding: 12px 16px 8px; }
.drawer-vehicles a { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 16px; border-radius: 24px; color: var(--bar-muted);
  font-weight: 500; transition: background-color .15s, color .15s; }
.drawer-vehicles a:hover { background: var(--bar-hover); color: var(--bar-text); text-decoration: none; }
.drawer-vehicles a.active { background: var(--accent-soft); color: var(--text); }
/* a compact plate, centred on the row; all plates have 8 characters in a mono font, so the names line up */
.drawer-vehicles .plate { align-self: center; font-size: .6875rem; border-radius: 3px; box-shadow: 0 0 0 1px #111; }
.drawer-vehicles .plate::before { padding: 0 3px 2px; }
.drawer-vehicles .plate span { padding: 4px 6px; }
.drawer-vehicles .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .875rem; line-height: 1.2; }
.topbar.signed .account-menu { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
.topbar.signed .account-menu summary { height: 56px; border-radius: 28px; }
.topbar.signed .account-menu .menu { top: auto; bottom: calc(100% + 8px); left: 0; right: auto; }