/*
 * Final cross-page tablet pass.
 * Target: Galaxy Tab S10 FE (roughly 1152x720 CSS px landscape) and
 * Galaxy Tab S10+ (up to roughly 1400x876), including portrait orientation.
 * Loaded from the shared footer so page-specific styles cannot undo it.
 */

@media (min-width: 700px) and (max-width: 1440px) {
  :root {
    --tablet-page-gap: 10px;
    --tablet-card-padding: 12px;
    --tablet-control-height: 42px;
    --tablet-scroll-thumb: rgba(111, 157, 195, .62);
    --tablet-scroll-track: rgba(227, 232, 232, .5);
  }

  body#main-body {
    max-width: 100vw;
    overflow-x: clip;
  }

  /* The touch quick-access dock floats above the page and no longer reserves
     a permanent strip of valuable tablet height. */
  body#main-body.has-global-quick-access {
    padding-bottom: 0;
  }

  body#main-body > main,
  body#main-body > .site-wrapper,
  body#main-body > .site-wrapper > main,
  body#main-body > .site-wrapper > .v-align,
  body#main-body > .site-wrapper > .v-align > main {
    max-width: 100%;
    min-width: 0;
  }

  body#main-body :is(
    .page,
    .account-page,
    .settings-page,
    .booking-types-page,
    .device-settings-page,
    .forms-page,
    .submissions-page,
    .booking-admin-page,
    .compliance-page,
    .therapy-page,
    .tasks-page,
    .snippets-page,
    .user-admin-page,
    .calendar-sync-page,
    .representatives-page,
    .session-templates-page
  ) {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
    padding: var(--tablet-page-gap);
  }

  body#main-body :is(
    .card,
    .card-box,
    .account-panel,
    .settings-card,
    .booking-types-card,
    .device-settings-hero,
    .device-list-card,
    .device-pairing-card,
    .forms-card,
    .submissions-card,
    .booking-admin-card,
    .representative-card,
    .therapy-panel,
    .invoice-list-card,
    .tasks-panel,
    .snippets-card,
    .user-panel
  ) {
    max-width: 100%;
    min-width: 0;
  }

  body#main-body :is(
    .card-body,
    .card-box,
    .account-panel,
    .settings-card,
    .booking-types-card,
    .device-settings-hero,
    .device-list-card,
    .device-pairing-card,
    .forms-card,
    .submissions-card,
    .booking-admin-card,
    .representative-card,
    .invoice-list-card,
    .tasks-panel,
    .snippets-card,
    .user-panel
  ) {
    padding: var(--tablet-card-padding);
  }

  body#main-body :is(
    .page-header,
    .settings-page-header,
    .settings-card-header,
    .booking-types-head,
    .device-settings-hero,
    .device-list-head,
    .therapy-header,
    .billing-section-header,
    .tasks-toolbar,
    .forms-header,
    .snippets-header,
    .user-admin-header,
    .calendar-sync-header,
    .representative-page-header,
    .section-title-row
  ) {
    column-gap: 10px;
    max-width: 100%;
    min-width: 0;
  }

  body#main-body :is(
    .account-actions,
    .booking-actions,
    .booking-action-row,
    .device-actions,
    .forms-actions,
    .management-actions,
    .settings-form-actions,
    .tasks-toolbar-actions,
    .invoice-actions,
    .person-actions-row,
    .timeline-filters,
    .calendar-tabs,
    .docu-modebar,
    .shared-docu-toolbar
  ) {
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-color: var(--tablet-scroll-thumb) transparent;
    scrollbar-width: thin;
  }

  body#main-body :is(.table-responsive, .person-invoice-scroll, [class*="-table-wrap"], [class*="-table-scroll"]) {
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-color: var(--tablet-scroll-thumb) var(--tablet-scroll-track);
    scrollbar-gutter: stable;
    scrollbar-width: thin;
  }

  body#main-body :is(.table-responsive, .person-invoice-scroll, [class*="-table-wrap"], [class*="-table-scroll"])::-webkit-scrollbar,
  body#main-body .modal .modal-body::-webkit-scrollbar {
    height: 9px;
    width: 9px;
  }

  body#main-body :is(.table-responsive, .person-invoice-scroll, [class*="-table-wrap"], [class*="-table-scroll"])::-webkit-scrollbar-thumb,
  body#main-body .modal .modal-body::-webkit-scrollbar-thumb {
    background: var(--tablet-scroll-thumb);
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: 999px;
  }

  body#main-body :is(.form-control, .form-select, .btn, button.btn) {
    min-height: var(--tablet-control-height);
  }

  body#main-body textarea.form-control {
    min-height: 68px;
  }

  body#main-body .modal {
    padding-left: 6px;
    padding-right: 6px;
  }

  body#main-body .modal .modal-dialog,
  body#main-body .modal .modal-dialog.modal-sm,
  body#main-body .modal .modal-dialog.modal-lg,
  body#main-body .modal .modal-dialog.modal-xl {
    margin: 6px auto;
    max-width: min(var(--bs-modal-width, 1080px), calc(100vw - 16px));
    width: calc(100% - 4px);
  }

  body#main-body:has(#myNavbar) .modal .modal-dialog,
  body#main-body:has(#myNavbar) .modal .modal-dialog.modal-sm,
  body#main-body:has(#myNavbar) .modal .modal-dialog.modal-lg,
  body#main-body:has(#myNavbar) .modal .modal-dialog.modal-xl {
    margin-bottom: 6px;
    margin-top: calc(var(--app-nav-height, 58px) + 6px);
  }

  body#main-body .modal .modal-content,
  body#main-body .modal .modal-dialog-scrollable .modal-content {
    display: flex;
    flex-direction: column;
    height: auto;
    max-height: calc(100dvh - 12px);
    min-height: 0;
    overflow: hidden;
  }

  body#main-body:has(#myNavbar) .modal .modal-content,
  body#main-body:has(#myNavbar) .modal .modal-dialog-scrollable .modal-content,
  body#main-body:has(#myNavbar) .modal form.modal-content,
  body#main-body:has(#myNavbar) .modal .modal-content > form:not(.modal-content) {
    max-height: calc(100dvh - var(--app-nav-height, 58px) - 12px);
  }

  body#main-body .modal .modal-content > form:not(.modal-content),
  body#main-body .modal form.modal-content {
    display: flex;
    flex-direction: column;
    max-height: calc(100dvh - 12px);
    min-height: 0;
    overflow: hidden;
  }

  body#main-body .modal :is(.modal-header, .modal-footer) {
    flex: 0 0 auto;
    gap: 7px;
    padding: 9px 12px;
  }

  body#main-body .modal .modal-header {
    min-height: 50px;
  }

  body#main-body .modal .modal-body {
    flex: 1 1 auto;
    max-height: none;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 11px 12px;
    scrollbar-color: var(--tablet-scroll-thumb) var(--tablet-scroll-track);
    scrollbar-gutter: stable;
    scrollbar-width: thin;
  }

  body#main-body .modal .modal-footer {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
  }

  body#main-body .modal .modal-footer > * {
    flex: 0 0 auto;
  }

  body#main-body .modal :is(.row.g-2, .row.g-3) {
    --bs-gutter-x: .6rem;
    --bs-gutter-y: .6rem;
  }

  body#main-body :is(
    .upload-content,
    .invoice-content,
    .appointment-modal-content,
    .therapy-modal-content,
    .person-task-modal,
    .hybrid-preview-shell
  ) {
    box-sizing: border-box;
    max-height: calc(100dvh - 16px);
    max-width: calc(100vw - 16px);
    min-height: 0;
    min-width: 0;
  }

  body#main-body :is(.upload-content, .invoice-content, .appointment-modal-content, .therapy-modal-content, .person-task-modal) > :is(.modal-body, .table-responsive, .person-task-list) {
    min-height: 0;
    overflow: auto;
    scrollbar-color: var(--tablet-scroll-thumb) var(--tablet-scroll-track);
    scrollbar-gutter: stable;
  }

  body#main-body .settings-filter-row,
  body#main-body .booking-type-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body#main-body .booking-type-form .booking-submit-cell {
    grid-column: 1 / -1;
  }

  body#main-body .device-settings-page {
    padding: var(--tablet-page-gap);
  }

  body#main-body .device-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* The desktop dashboard tab intentionally peeks in from off-canvas. On a
     touch tablet that hidden hover target cannot be revealed reliably. */
  body#main-body.home-page .home-settings-tab-wrap {
    height: 44px;
    right: 8px;
    transform: none !important;
    width: 44px;
  }

  body#main-body.home-page .home-settings-peek {
    display: none;
  }

  body#main-body.home-page .home-settings-tab {
    border-radius: 10px;
    height: 44px;
    left: 0;
    max-height: 44px;
    max-width: 44px;
    min-height: 44px;
    min-width: 44px;
    width: 44px;
  }

  body#main-body :is(.device-card, .submission-item) {
    padding: 11px;
  }

  body#main-body .dropdown-menu {
    max-height: calc(100dvh - var(--app-nav-height, 58px) - 12px);
    max-width: calc(100vw - 16px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: var(--tablet-scroll-thumb) var(--tablet-scroll-track);
    scrollbar-gutter: stable;
  }
}

/* Landscape density: preserve working height without shrinking touch targets too far. */
@media (min-width: 769px) and (max-width: 1440px) and (max-height: 900px) {
  :root {
    --tablet-page-gap: 7px;
    --tablet-card-padding: 10px;
    --tablet-control-height: 40px;
  }

  body#main-body :is(.page-header, .settings-page-header, .booking-types-head, .therapy-header, .tasks-toolbar) {
    margin-bottom: 7px;
  }

  body#main-body :is(.card, .card-box, .settings-card, .tasks-panel, .invoice-list-card) {
    margin-bottom: 7px;
  }

  body#main-body .modal .modal-title {
    font-size: 1rem;
  }

  body#main-body .modal .modal-body {
    padding: 9px 11px;
  }

  body#main-body .modal textarea.form-control {
    min-height: 62px;
  }
}

/* Portrait tablet: stack only the structures that otherwise become cramped. */
@media (min-width: 700px) and (max-width: 900px) {
  body#main-body :is(
    .page-header,
    .settings-page-header,
    .booking-types-head,
    .device-settings-hero,
    .device-pairing-card,
    .device-list-head,
    .therapy-header,
    .billing-section-header,
    .tasks-toolbar,
    .forms-header,
    .snippets-header,
    .user-admin-header,
    .representative-page-header
  ) {
    align-items: stretch;
    flex-direction: column;
    row-gap: 8px;
  }

  body#main-body :is(.settings-filter-row, .booking-type-form, .device-grid, .quick-task-assignment-grid) {
    grid-template-columns: minmax(0, 1fr);
  }

  body#main-body.tasks-body .tasks-toolbar-actions {
    flex: 0 1 auto;
    width: 100%;
  }

  body#main-body.tasks-body .tasks-search {
    min-width: 0;
  }

  body#main-body .modal .modal-footer {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  body#main-body .modal .modal-footer > .me-auto {
    margin-right: auto;
  }
}

/* Large tablets and laptops also need a directly tappable/clickable dashboard
   settings control; the old off-canvas peek depended on hover. */
@media (min-width: 700px) {
  body#main-body.has-global-quick-access {
    padding-bottom: 0;
  }

  body#main-body .modal .modal-dialog,
  body#main-body .modal .modal-content {
    box-sizing: border-box;
    max-height: calc(100dvh - 16px);
    min-height: 0;
  }

  body#main-body .modal .modal-dialog {
    margin-bottom: 8px;
    margin-top: 8px;
  }

  body#main-body .modal .modal-body {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  body#main-body.home-page .home-settings-tab-wrap {
    height: 44px;
    right: 8px;
    transform: none;
    width: 44px;
  }

  body#main-body.home-page .home-settings-peek {
    display: none;
  }

  body#main-body.home-page .home-settings-tab {
    border-radius: 10px;
    height: 44px;
    left: 0;
    max-height: 44px;
    max-width: 44px;
    min-height: 44px;
    min-width: 44px;
    width: 44px;
  }
}

/* Final modal viewport guard. Page-specific styles are loaded before this file
   in the footer, so no dialog can be pulled underneath the fixed navbar. */
body#main-body:has(#myNavbar) .modal .modal-dialog,
body#main-body:has(#myNavbar) .modal .modal-dialog.modal-sm,
body#main-body:has(#myNavbar) .modal .modal-dialog.modal-lg,
body#main-body:has(#myNavbar) .modal .modal-dialog.modal-xl {
  box-sizing: border-box;
  margin-bottom: 10px;
  margin-top: calc(var(--app-nav-height, 58px) + 10px);
  max-height: calc(100dvh - var(--app-nav-height, 58px) - 20px);
}

body#main-body:has(#myNavbar) .modal .modal-dialog-centered {
  min-height: calc(100dvh - var(--app-nav-height, 58px) - 20px);
}

body#main-body:has(#myNavbar) .modal .modal-content,
body#main-body:has(#myNavbar) .modal .modal-dialog-scrollable .modal-content,
body#main-body:has(#myNavbar) .modal form.modal-content,
body#main-body:has(#myNavbar) .modal .modal-content > form:not(.modal-content) {
  max-height: calc(100dvh - var(--app-nav-height, 58px) - 20px);
  min-height: 0;
}

body#main-body:has(#myNavbar) .modal .modal-body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

body#main-body:has(#myNavbar) :is(.upload-modal-backdrop, .invoice-modal) {
  box-sizing: border-box;
  max-height: 100dvh;
  overflow-y: auto;
  padding-bottom: 10px;
  padding-top: calc(var(--app-nav-height, 58px) + 10px);
  scrollbar-gutter: stable;
}

body#main-body:has(#myNavbar) :is(.upload-modal-backdrop, .invoice-modal) > :is(.upload-content, .invoice-content) {
  max-height: calc(100dvh - var(--app-nav-height, 58px) - 20px);
  min-height: 0;
  overflow-y: auto;
}

@media (max-width: 768px) {
  body#main-body:has(#myNavbar) .modal .modal-dialog.modal-fullscreen-md-down {
    height: calc(100dvh - var(--app-nav-height, 58px) - 20px);
    margin: calc(var(--app-nav-height, 58px) + 10px) auto 10px;
    max-height: calc(100dvh - var(--app-nav-height, 58px) - 20px);
    width: calc(100vw - 20px);
  }

  body#main-body:has(#myNavbar) .modal .modal-dialog.modal-fullscreen-md-down .modal-content {
    height: 100%;
    max-height: 100%;
  }
}

/* In short windows, headers and wrapped action rows can exceed the available
   space by themselves. Let the whole dialog scroll instead of clipping them
   around a zero-height body. This depends on height, not tablet width. */
@media (max-height: 600px) {
  body#main-body:has(#myNavbar) .modal .modal-content {
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  body#main-body:has(#myNavbar) .modal .modal-content > form:not(.modal-content) {
    flex: 0 0 auto;
    max-height: none;
    overflow: visible;
  }

  body#main-body:has(#myNavbar) .modal .modal-body {
    flex: 0 0 auto;
    max-height: none;
    overflow: visible;
  }

  body#main-body:has(#myNavbar) :is(.upload-modal-backdrop, .invoice-modal) {
    align-items: flex-start;
  }

  body#main-body .person-invoice-selection {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    overflow: visible;
  }

  body#main-body .person-invoice-scroll {
    max-height: min(30dvh, 240px);
  }
}

@media (prefers-reduced-motion: reduce) {
  body#main-body *,
  body#main-body *::before,
  body#main-body *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto;
    transition-duration: .01ms !important;
  }
}