/* Sizing rules shared by every screen, including authentication. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-block: 20px; }
body { min-width: 0; }
button, input, select, textarea { min-width: 0; font: inherit; }
input, select, textarea { font-size: 16px; }
.layout, .sidebar, .sidebar nav, .brand > div, .section,
.login-card, .login-card > *, .cards > *, .vehicle-summary > * { min-width: 0; }
h1, h2, .muted, .page-description, .login-error, .sidebar-footer > span { overflow-wrap: anywhere; }
.btn { max-width: 100%; white-space: normal; }
.login-screen {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  padding: max(24px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
.login-card { flex: none; width: 100%; margin: auto; grid-template-columns: minmax(0, 1fr); }
.login-card input { display: block; width: 100%; min-width: 0; font-size: 16px; }
.login-card label { color: var(--text); font-size: 13px; }
.login-card .btn { width: 100%; }
.login-error { line-height: 1.5; }
.calendar-legend { display: none; }
.route-short { display: none; }

@media (max-width: 1024px) {
  .sidebar { min-width: 0; padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right)); }
  .sidebar nav { max-width: 100%; }
  .sidebar-footer > span { min-width: 0; }
  .main { padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right)); padding-bottom: max(32px, env(safe-area-inset-bottom)); }
  .topbar { flex-wrap: wrap; align-items: flex-start; }
  .topbar > div { flex: 1 1 200px; }
  .topbar .btn { flex: 0 1 auto; }
  .accounts-page .topbar > div { flex: 0 1 auto; }
  .panel-header > *, .filters, .vehicle-tabs { max-width: 100%; min-width: 0; }
  .admin-form > input, .admin-form > select { width: 100%; min-width: 0; }
  .vehicle-km-card { min-width: 0; width: 100%; }
  .vehicle-summary { gap: 12px; }
  .vehicle-tabs { flex: 1 1 100%; }
  .vehicle-tab-btn { margin-right: 12px; }
  .vehicle-tab-extra > .btn { text-align: left; }
  .stats-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bar-card-head { align-items: flex-start; }
  .bar-card-head strong { overflow-wrap: anywhere; }
  .mobile-table td { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
  .mobile-table td::before { overflow-wrap: anywhere; }
  .mobile-table .goal-progress { width: 100%; }
  .mobile-table .calendar-access { width: 100%; }
  .mobile-table td > select { width: 100%; }
  .accounts-page .mobile-table td > .btn { width: 100%; }
  .calendar-day { min-height: 68px; }
  .calendar-day .route-badge { font-size: 11px; line-height: 1.3; }
  .calendar-day .route-name { display: none; }
  .calendar-day .route-short { display: inline; }
  .calendar-legend { display: flex; gap: 8px 16px; flex-wrap: wrap; padding: 0 16px 16px; color: var(--muted); font-size: 12px; line-height: 1.5; }
  .calendar-legend span { display: inline-flex; align-items: center; gap: 6px; }
  .calendar-legend i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
  .toast { left: 16px; right: 16px; width: fit-content; margin-inline: auto; overflow-wrap: anywhere; }
}

@media (max-width: 480px) {
  .login-screen { padding-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right)); }
  .login-card { padding: 28px 20px; border-radius: 18px; gap: 10px; }
  .login-card h1 { font-size: 23px; line-height: 1.25; }
  .login-card .muted { line-height: 1.6; }
  .main { padding-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right)); }
  .cards, .stats-cards { grid-template-columns: minmax(0, 1fr); }
  .card small { font-size: 12px; }
  .mobile-table tbody { padding-inline: 8px; }
  .mobile-table tr { padding-inline: 10px; }
  .mobile-table td { gap: 10px; font-size: 13px; }
  .mobile-table td::before { font-size: 12px; }
  .account-toolbar .search-field { min-width: 0; }
}

/* A short viewport includes phones in landscape and the open keyboard. */
@media (max-height: 540px) {
  .login-screen { padding-block: 16px; }
  .login-card { padding-block: 20px; gap: 8px; }
  .login-card .brand-icon { width: 40px; height: 40px; margin-bottom: 0; }
}