/* Final responsive layer. Loaded last to avoid conflicts with the desktop theme. */
@media (max-width: 820px) {
  html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  main { width: 100%; max-width: 100%; margin: 0; padding: 18px 12px 34px; }
  main > section, .hero, .stats, .toolbar, .equipment-grid, .detail-card,
  .settings-grid, .users-list, .auth-shell { min-width: 0; max-width: 100%; }

  .topbar {
    display: grid; grid-template-columns: 38px minmax(0, 1fr);
    width: 100%; height: 60px; padding: 0 10px; gap: 7px;
  }
  .brand { width: 38px; min-width: 0; }
  .brand > span { width: 36px; height: 36px; }
  .brand > div { display: none; }
  .account-button {
    grid-column: 2; width: 100%; max-width: 100%; min-width: 0;
    height: 38px; min-height: 38px; margin: 0; padding: 6px 9px;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  }
  .account-button #accountName { display: inline; overflow: hidden; text-overflow: ellipsis; }
  .topbar > #addButton {
    grid-column: 3; width: 40px; min-width: 40px; height: 40px; min-height: 40px;
    margin: 0; padding: 0; overflow: hidden; font-size: 0;
  }
  .topbar > #addButton::after { content: '＋'; font-size: 20px; }
  .account-menu { top: 57px; right: 8px; left: 8px; width: auto; }

  #mainNav:not([hidden]) {
    display: flex;
    position: fixed; z-index: 20; inset: auto 0 0;
    width: 100%; height: calc(66px + env(safe-area-inset-bottom));
    padding: 3px 3px env(safe-area-inset-bottom); gap: 1px;
    background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -8px 25px #173b3510;
  }
  #mainNav button {
    display: block; flex: 1 1 0; width: auto; min-width: 0; height: 59px; min-height: 0;
    padding: 6px 2px; overflow: hidden; white-space: normal;
    font-size: 11px; line-height: 1.15; text-overflow: ellipsis;
  }
  #mainNav button[hidden] { display: none !important; }

  button, input, select, textarea { max-width: 100%; font-size: 16px; }
  input, select, textarea { width: 100%; }

  .auth-shell { display: block; min-height: 0; }
  .auth-intro { margin: 15px 3px 20px; }
  .auth-intro h1 { margin: 8px 0 12px; font-size: clamp(36px, 11vw, 48px); }
  .auth-card { width: 100%; max-width: none; padding: 18px; }
  .auth-tabs { width: 100%; }
  .password-field { width: 100%; }

  .hero { display: block; min-height: 355px; padding: 27px 21px 142px; border-radius: 16px; }
  .hero h1 { max-width: 310px; font-size: clamp(39px, 12vw, 52px); }
  .hero p:not(.eyebrow) { max-width: 100%; font-size: 14px; }
  .scan-button { position: absolute; right: 16px; bottom: 15px; width: 112px; height: 112px; min-height: 112px; }

  .stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 10px 0 28px; }
  .stats article, .stats article:last-child { grid-column: auto; min-width: 0; padding: 14px 5px; }
  .stats b { font-size: 27px; }
  .stats span { font-size: 9px; overflow-wrap: anywhere; }

  .section-head, .page-title { width: 100%; min-width: 0; align-items: center; gap: 8px; }
  .section-head > div, .page-title > div { min-width: 0; }
  .section-head h2 { font-size: 24px; }
  .page-title h1 { font-size: clamp(34px, 10vw, 42px); overflow-wrap: anywhere; }
  .page-title > .primary { flex: 0 0 44px; width: 44px; min-width: 44px; padding: 0; }

  .toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; width: 100%; gap: 8px; }
  .toolbar .search { grid-column: 1 / -1; width: 100%; min-width: 0; }
  .toolbar .search input { width: 100%; min-width: 0; }
  .toolbar select { width: 100%; min-width: 0; }
  .toolbar button { width: auto; min-width: 0; padding: 8px 10px; font-size: 13px; }

  .equipment-grid { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
  .card { width: 100%; min-width: 0; }
  .card-top { gap: 8px; }
  .card h3, .card p, .location { max-width: 100%; overflow-wrap: anywhere; }

  .detail-card { width: 100%; padding: 16px; }
  .detail-top { display: block; }
  .detail-top > div { min-width: 0; }
  .detail-top > div:last-child { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
  .detail-top > div:last-child button { width: 100%; min-width: 0; }
  .meta, .form-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
  .event-form { width: 100%; padding: 14px; }
  .actions { width: 100%; }

  .timeline article { grid-template-columns: 38px minmax(0, 1fr); width: 100%; }
  .timeline article > * { min-width: 0; }
  .timeline time { grid-column: 2; }

  .settings-grid { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
  .settings-card { width: 100%; min-width: 0; padding: 16px; }
  .option-form { display: grid; grid-template-columns: minmax(0, 1fr); }
  .option-list > div { min-width: 0; }
  .option-list span { min-width: 0; overflow-wrap: anywhere; }

  .user-row { display: grid; grid-template-columns: 42px minmax(0, 1fr); width: 100%; min-width: 0; }
  .user-row > div { min-width: 0; }
  .user-row strong, .user-row small { overflow-wrap: anywhere; }
  .user-row > select, .user-actions { grid-column: 1 / -1; width: 100%; }
  .user-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .user-actions button { width: 100%; min-width: 0; }

  dialog { width: calc(100% - 16px); max-width: calc(100% - 16px); max-height: calc(100dvh - 16px); }
  dialog form, dialog label, dialog input, dialog select, dialog textarea { min-width: 0; max-width: 100%; }
  #toast { right: 9px; left: 9px; width: auto; }
}

@media (max-width: 370px) {
  main { padding-right: 8px; padding-left: 8px; }
  .topbar { padding-right: 7px; padding-left: 7px; gap: 5px; }
  .account-button { font-size: 13px; }
  #mainNav button { font-size: 10px; }
  .hero { padding-right: 17px; padding-left: 17px; }
  .hero h1 { font-size: 37px; }
  .stats b { font-size: 23px; }
  .stats span { font-size: 8px; }
  .section-head .link { max-width: 105px; white-space: normal; }
  .user-actions { grid-template-columns: 1fr; }
}

@media (min-width: 821px) and (max-width: 1050px) {
  .topbar { padding-right: 22px; padding-left: 22px; }
  main { padding-right: 22px; padding-left: 22px; }
  .equipment-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .user-row { grid-template-columns: 44px minmax(0, 1fr) 180px; }
  .user-actions { grid-column: 2 / -1; justify-self: end; }
}