/* Administrative panels grow with their data; only their viewport scrolls. */
@media screen {
  #modal { padding: 12px; }
  #modal .dialog:not(.receipt-dialog) {
    display: flex;
    flex-direction: column;
    width: min(760px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    overflow: hidden;
  }
  #modal .dialog:not(.receipt-dialog):has(.form > .field:nth-child(n+5), .tablewrap) {
    width: min(1120px, calc(100vw - 24px));
  }
  #modal .dialog:not(.receipt-dialog) > .dialog-head {
    flex: none;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
  }
  #modal .dialog:not(.receipt-dialog) #modalTitle { overflow-wrap: anywhere; }
  #modal .dialog:not(.receipt-dialog) > #modalBody {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scroll-padding-bottom: 76px;
  }
  #modalBody .form {
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: 8px 14px;
    padding: 12px 16px;
    min-width: 0;
  }
  #modalBody .form > .field { min-width: 0; margin: 0; gap: 4px; }
  #modalBody .form > .full,
  #modalBody .form > .form-actions { grid-column: 1 / -1; }
  #modalBody .field > label { font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
  #modalBody .field > input:not([type="checkbox"]):not([type="radio"]),
  #modalBody .field > select,
  #modalBody .field > textarea {
    min-width: 0;
    max-width: 100%;
    min-height: 38px;
    padding: 7px 10px;
  }
  #modalBody .field > textarea {
    min-height: 64px;
    max-height: none;
    field-sizing: content;
    resize: vertical;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
  #modal .dialog:not(.receipt-dialog) .form-actions {
    position: sticky;
    bottom: 0;
    z-index: 1;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    padding: 8px 0;
    border-top: 1px solid var(--line);
    background: #fff;
    box-shadow: 0 -6px 10px #fff;
  }
  #modalBody .form-actions .btn { min-height: 38px; padding: 6px 14px; }
  #modalBody :is(.note, .checkgrid label, .btn) { white-space: normal; overflow-wrap: anywhere; }
  #modalBody .checkgrid { min-width: 0; }
  #modalBody .checkgrid label { min-width: 0; }

  #app :is(.main, .content, .page, .panel, .card, .tablewrap),
  #modalBody :is(.panel, .tablewrap) { min-width: 0; }
  #app .tablewrap, #modalBody .tablewrap { max-width: 100%; overflow: auto; }
  #app .tablewrap td:not(:last-child), #modalBody .tablewrap td {
    white-space: normal;
    overflow-wrap: anywhere;
  }
  #app :is(.toolbar, .actions), #modalBody .actions { flex-wrap: wrap; }
  #app :is(.toolbar, .actions) > * { max-width: 100%; }
  #app .panel { overflow-wrap: anywhere; }
  #app .card .value { overflow-wrap: anywhere; }

  /* These pages previously clipped rows to a fixed laptop-screen height. */
  #app .content:has(#dashboard.active, #rooms.active) {
    height: calc(100vh - 82px);
    height: calc(100dvh - 82px);
    overflow: auto;
    padding-bottom: 24px;
    scrollbar-gutter: stable;
  }
  #app #dashboard.active { height: auto; grid-template-rows: auto auto auto; }
  #app #dashboard > .cards + div { height: auto; }
  #app #dashboard > .cards + div > .panel { overflow: visible; }
  #app #roomGrid .room { height: auto; min-height: 66px; overflow: visible; }
  #app #roomGrid .room :is(small, em) { white-space: normal; overflow-wrap: anywhere; }
  #app #roomGrid .floor-rooms { min-width: 0; }
}

@media screen and (min-width: 721px) {
  /* Keep the account/footer visible when menu items exceed the available height. */
  #app > .side .nav { overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; }
  #app > .side .nav button { flex-shrink: 0; max-height: none; white-space: normal; }
}
@media screen and (max-width: 980px) {
  #app #dashboard > .cards + div { grid-template-columns: minmax(0, 1fr) !important; }
  #app .room-legend { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important; }
}
@media screen and (max-width: 720px) {
  #app .content:has(#dashboard.active, #rooms.active) { height: auto; overflow: visible; }
  #modal .dialog:not(.receipt-dialog) #modalBody .form {
    grid-template-columns: minmax(0, 1fr) !important;
    padding: 10px 12px !important;
  }
  #modal .dialog:not(.receipt-dialog) #modalBody form[onsubmit^="saveUser("] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  #modalBody #creditFields { grid-template-columns: minmax(0, 1fr) !important; }
  #modalBody .form > .full, #modalBody .form > .form-actions { grid-column: 1 / -1 !important; }
}
@media screen and (max-width: 360px) {
  #modal .dialog:not(.receipt-dialog) #modalBody form[onsubmit^="saveUser("] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}