/* Responsive structural fixes for phones and tablets. Loaded after portal.css/admin.css. */

@media (max-width: 850px) {
  html,
  body,
  #portal-app,
  .portal-stage,
  .portal-shell,
  .portal-main-layout,
  .portal-content {
    max-width: 100%;
  }

  body,
  #portal-app,
  .portal-shell,
  .portal-content {
    overflow-x: hidden;
  }

  .portal-content,
  .page-card,
  .dashboard-card,
  .list-card,
  .modal-card,
  .form-grid,
  .form-row,
  .list-head,
  .actions {
    min-width: 0;
  }

  .page-card,
  .dashboard-card {
    max-width: 100%;
  }

  .list-head {
    flex-wrap: wrap;
  }

  .table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  .table-wrap > table {
    width: max-content;
    min-width: 100%;
  }

  th,
  td {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .admin-category-nav {
    scrollbar-width: thin;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  .admin-category-nav .btn {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .modal-backdrop {
    align-items: end;
    padding: .5rem;
  }

  .modal-card {
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh - 1rem);
  }

  .modal-head,
  .modal-body {
    min-width: 0;
  }

  .modal-body {
    overflow-x: hidden;
  }

  .calendar-toolbar,
  .page-head,
  .section-title-bar,
  .home-list-row {
    min-width: 0;
  }

  .board-member-picker-results {
    min-width: 0;
  }

  .board-member-picker-item {
    padding: .8rem;
  }
}

@media (max-width: 640px) {
  .portal-content {
    padding: .85rem .65rem 1.25rem;
  }

  .page-card,
  .dashboard-card {
    padding: .9rem;
  }

  .page-head {
    margin-bottom: 1rem;
  }

  h1 {
    font-size: clamp(1.7rem, 9vw, 2.35rem);
    overflow-wrap: anywhere;
  }

  h2 {
    font-size: 1.22rem;
    overflow-wrap: anywhere;
  }

  .list-head {
    flex-direction: column;
    align-items: stretch;
    gap: .65rem;
  }

  .list-head > div,
  .list-head > .actions,
  .list-head > .btn {
    width: 100%;
  }

  .list-head > .btn,
  .list-head > .actions > .btn {
    justify-content: center;
  }

  .actions,
  .actions-right {
    width: 100%;
    justify-content: stretch;
  }

  .actions > .btn {
    flex: 1 1 100%;
    width: 100%;
  }

  .btn {
    min-height: 46px;
  }

  .btn-small {
    min-height: 42px;
  }

  .admin-category-nav {
    margin-inline: -.65rem;
    padding: .35rem .65rem .85rem;
  }

  .admin-category-nav .btn {
    min-height: 42px;
  }

  .form-row,
  #daily-activity-form > .form-row,
  #daily-activity-form > .form-row .form-row {
    grid-template-columns: 1fr !important;
  }

  input,
  select,
  textarea {
    font-size: 16px;
  }

  .checkbox-row {
    gap: .7rem;
  }

  .checkbox-row input {
    width: 26px;
    height: 26px;
  }

  .table-wrap {
    border-width: 1px;
  }

  .table-wrap > table {
    font-size: .9rem;
  }

  th,
  td {
    padding: .58rem;
  }

  .modal-backdrop {
    padding: 0;
  }

  .modal-card {
    max-height: 96dvh;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    box-shadow: none;
  }

  .modal-head {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: .8rem .85rem;
  }

  .modal-body {
    padding: .85rem;
  }

  .modal-close {
    min-width: 44px;
    min-height: 44px;
  }

  .home-list-row {
    flex-direction: column;
    align-items: stretch;
  }

  .calendar-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .calendar-toolbar .actions,
  .calendar-view-switch {
    width: 100%;
  }

  .calendar-view-switch .btn,
  .calendar-toolbar .btn {
    flex: 1 1 auto;
  }

  .auth-card {
    border-left: 0;
    border-right: 0;
  }

  .auth-head,
  .auth-body {
    padding-inline: .9rem;
  }

  .toast-root {
    left: .5rem;
    right: .5rem;
    bottom: .5rem;
    max-width: none;
  }

  .toast {
    width: 100%;
  }

  .board-member-picker-results {
    gap: .6rem;
  }

  .board-member-picker-item {
    padding: .7rem;
  }

  .board-member-picker-item .list-head {
    gap: .55rem;
  }

  .board-member-picker-item [data-board-select] {
    width: 100%;
  }
}

@media (max-width: 430px) {
  .header-inner {
    gap: .45rem;
  }

  .brand-block {
    gap: .5rem;
  }

  .brand-mark {
    width: 27px;
    height: 27px;
  }

  .brand-name {
    max-width: 43vw;
    font-size: .86rem;
  }

  .mobile-nav-toggle {
    min-height: 38px;
    padding: .45rem .55rem;
    font-size: .68rem;
  }

  .portal-content {
    padding-inline: .5rem;
  }

  .page-card,
  .dashboard-card {
    padding: .75rem;
  }

  .admin-category-nav {
    margin-inline: -.5rem;
    padding-inline: .5rem;
  }
}