/* Shared PWA/mobile polish for the ISU Library System. */
:root {
  --pwa-safe-bottom: env(safe-area-inset-bottom, 0px);
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-width: 0;
  overflow-x: hidden;
}

img,
svg,
video,
canvas {
  max-width: 100%;
  height: auto;
}

input,
select,
textarea,
button {
  font: inherit;
}

table {
  max-width: 100%;
}

.table-wrap,
.table-shell,
.responsive-table,
.records-table,
.panel:has(table) {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.app-shell,
.dashboard-shell,
.content,
.main,
.panel-grid,
.stats-grid,
.cards-grid,
.catalog-grid,
.book-grid,
.role-grid,
.login-shell,
.hero,
.topbar {
  min-width: 0;
}

@media (display-mode: standalone) {
  body {
    padding-bottom: var(--pwa-safe-bottom);
  }
}

@media (max-width: 900px) {
  .topbar,
  .nav,
  .toolbar,
  .filters,
  .form-row,
  .actions,
  .hero,
  .login-shell,
  .dashboard-shell {
    flex-wrap: wrap;
  }

  .sidebar {
    width: 100%;
  }

  .content,
  .main,
  main {
    width: 100%;
  }

  .panel,
  .card,
  .modal,
  .dialog {
    max-width: 100%;
  }
}

@media (max-width: 640px) {
  body {
    font-size: 15px;
  }

  .topbar,
  header.topbar {
    gap: .75rem;
    padding-inline: 1rem;
  }

  .brand {
    min-width: 0;
  }

  .brand strong,
  .brand span {
    overflow-wrap: anywhere;
  }

  .hero,
  .login-shell,
  .dashboard-shell,
  .panel,
  .card {
    border-radius: 1rem;
  }

  .hero,
  .panel,
  .card,
  .login-card,
  .intro-card {
    padding: 1rem;
  }

  .stats-grid,
  .panel-grid,
  .cards-grid,
  .catalog-grid,
  .book-grid,
  .role-grid {
    grid-template-columns: 1fr !important;
  }

  .modal,
  .dialog {
    width: calc(100vw - 1.5rem);
    max-height: calc(100vh - 1.5rem);
    overflow: auto;
  }

  input,
  select,
  textarea {
    width: 100%;
  }

  .btn,
  button,
  [role="button"] {
    max-width: 100%;
  }
}