/* Final mobile hotfix: stop horizontal page overflow and make tables/forms usable */
html,
body,
#root {
  max-width: 100%;
  overflow-x: hidden;
}

.settings-extra-card {
  margin-top: 1rem;
}

.settings-extra-subtitle {
  color: #64748b;
  margin: -.35rem 0 1rem;
}

.settings-extra-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .7rem;
  margin-top: .85rem;
}

@media (max-width: 820px) {
  html,
  body,
  #root {
    height: auto !important;
    min-height: 100% !important;
    overflow-y: auto !important;
    position: static !important;
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch;
  }

  body {
    overscroll-behavior-y: auto !important;
  }

  * {
    max-width: 100%;
  }

  .app {
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
  }

  .content,
  main,
  section,
  .grid,
  .panel,
  .metric,
  .signature-card,
  form,
  .field,
  .toolbar,
  .empty {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .content {
    overflow-x: hidden !important;
    overflow-y: visible !important;
    height: auto !important;
    min-height: auto !important;
    padding-bottom: calc(128px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .panel,
  .metric,
  .signature-card {
    overflow: hidden;
  }

  .topbar {
    width: auto !important;
    max-width: none !important;
    overflow: hidden;
  }

  .topbar > div {
    min-width: 0;
    overflow: hidden;
  }

  .topbar h1,
  .topbar p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .topbar .ghost {
    flex: 0 0 auto;
  }

  .form-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  input,
  select,
  textarea,
  button {
    max-width: 100% !important;
  }

  .table-wrap {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  table {
    width: max-content !important;
    min-width: 100% !important;
    max-width: none !important;
    table-layout: auto;
  }

  th,
  td {
    white-space: nowrap;
  }

  td {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .settings-extra-actions {
    grid-template-columns: 1fr;
  }

  .settings-extra-card .field {
    margin-top: .75rem;
  }

  .settings-extra-card button,
  .settings-extra-card select {
    width: 100%;
  }

  .sidebar {
    max-width: 100vw !important;
    touch-action: pan-x !important;
  }

  .sidebar nav,
  nav {
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap;
    touch-action: pan-x !important;
  }

  nav button {
    flex: 0 0 66px !important;
    min-width: 66px !important;
    max-width: 66px !important;
    min-height: 54px !important;
    padding: .35rem .15rem !important;
    font-size: .58rem !important;
  }

  nav button svg {
    width: 17px !important;
    height: 17px !important;
  }

  .nav-active {
    box-shadow: none !important;
  }
}

@media (max-width: 430px) {
  nav button {
    flex-basis: 62px !important;
    min-width: 62px !important;
    max-width: 62px !important;
    font-size: .55rem !important;
  }

  td {
    max-width: 180px;
  }
}