/* Cross-page tablet density and touch ergonomics. */

@media (hover: none), (pointer: coarse) {
  html {
    -webkit-tap-highlight-color: rgba(111, 157, 195, .18);
    touch-action: manipulation;
  }

  body#main-body :is(
    .btn,
    button:not([data-task-inline]):not(.task-state-pill):not(.task-meta-chip):not(.waitlist-status-btn):not(.task-compact-more):not(.open-invoice-action):not(.waitlist-action),
    [role="button"]:not([data-task-inline]):not(.task-title-open),
    .nav-link,
    .dropdown-item,
    .list-group-item,
    .toolbar-control,
    .ui-icon-btn,
    .icon-btn,
    .btn-close,
    .modal-close-btn,
    .home-icon-btn,
    .home-simple-action,
    .home-header-icon-btn,
    .booking-icon-btn,
    .calendar-icon-btn,
    .calendar-sync-icon-btn,
    .settings-icon-btn,
    .forms-icon-btn,
    .snippet-action-btn,
    .user-action-btn,
    .task-widget-action,
    .service-action-btn,
    .section-icon-btn,
    .therapy-icon-btn,
    .termin-action,
    .termin-add-btn,
    .open-service-billing-btn,
    .overview-action,
    .overview-task-action,
    .day-close-action,
    .therapy-status-icon,
    .timeline-icon-action,
    .person-action-icon-btn:not(.has-badges):not(.person-therapy-count-btn),
    .person-task-toggle-btn,
    .person-task-action-btn,
    .person-task-done-btn
  ) {
    min-height: 44px;
  }

  body#main-body :is(
    .ui-icon-btn,
    .icon-btn,
    .btn-close,
    .modal-close-btn,
    .home-icon-btn,
    .home-simple-action,
    .home-header-icon-btn,
    .booking-icon-btn,
    .calendar-icon-btn,
    .calendar-sync-icon-btn,
    .settings-icon-btn,
    .forms-icon-btn,
    .snippet-action-btn,
    .user-action-btn,
    .task-widget-action,
    .service-action-btn,
    .section-icon-btn,
    .therapy-icon-btn,
    .termin-action,
    .termin-add-btn,
    .open-service-billing-btn,
    .overview-action,
    .overview-task-action,
    .day-close-action,
    .therapy-status-icon,
    .timeline-icon-action,
    .person-action-icon-btn:not(.has-badges):not(.person-therapy-count-btn),
    .person-task-toggle-btn,
    .person-task-action-btn,
    .person-task-done-btn
  ) {
    height: 44px;
    max-height: 44px;
    max-width: 44px;
    min-width: 44px;
    padding: 0;
    width: 44px;
  }

  body#main-body.home-page :is(
    .termin-person a,
    .open-service-person,
    .home-modal-link
  ) {
    align-items: center;
    display: inline-flex;
    min-height: 44px;
    padding-block: 6px;
  }

  body#main-body.home-page .task-priority-control {
    min-width: 44px;
  }

  body#main-body :is(.form-control, .form-select, input, select:not(.waitlist-status-select), textarea),
  :is(.booking-public, .public-form-body) :is(.form-control, .form-select, input, select, textarea) {
    font-size: 16px;
    min-height: 44px;
  }

  body#main-body input[type="checkbox"],
  body#main-body input[type="radio"],
  :is(.booking-public, .public-form-body) input[type="checkbox"],
  :is(.booking-public, .public-form-body) input[type="radio"] {
    min-height: 22px;
    min-width: 22px;
  }

  body#main-body :is(a, button, input, select, textarea, [role="button"]):focus-visible {
    outline: 3px solid rgba(111, 157, 195, .32);
    outline-offset: 2px;
  }

  body#main-body :is(.table-responsive, .nav-tabs, .nav-pills, [class*="-tabs"], [class*="-toolbar"]) {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
  }
}

@media (min-width: 769px) and (max-width: 1440px),
       (hover: none) and (pointer: coarse) and (min-width: 769px) and (max-height: 1024px) {
  :root {
    --app-content-gap: 6px;
    --app-type-body: 15px;
    --app-type-ui: 14px;
    --app-type-table: 13.5px;
    --app-type-small: 12.5px;
    --app-type-caption: 12px;
    --app-type-widget: 14px;
    --app-type-widget-title: 15px;
    --app-type-modal: 14.5px;
    --app-type-modal-title: 19px;
    --app-type-page-title: 22px;
    --app-type-section-title: 17px;
    --app-type-card-title: 15.5px;
    --app-line-body: 1.38;
    --app-line-ui: 1.22;
  }

  body#main-body > #content-wrapper,
  body#main-body #app.container-fluid,
  body#main-body .site-wrapper > main:not(.home-shell),
  body#main-body > main:not(.home-shell) {
    padding-left: 12px;
    padding-right: 12px;
  }

  body#main-body :is(.page, .therapy-page, .account-page, .settings-page, .forms-page, .snippets-page, .user-admin-page) {
    padding-bottom: 12px;
    padding-top: 10px;
  }

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

  body#main-body .row.g-2:has(.app-floating-field) {
    --bs-gutter-y: .85rem;
  }

  body#main-body .row.g-3:has(.app-floating-field) {
    --bs-gutter-y: 1rem;
  }

  body#main-body :is(
    .card,
    .card-box,
    .account-panel,
    .settings-card,
    .forms-card,
    .submissions-card,
    .booking-admin-card,
    .representative-card,
    .user-panel,
    .therapy-panel,
    .invoice-list-card,
    .tasks-panel,
    .person-info-box,
    .person-therapy-panel
  ) {
    margin-bottom: 10px;
  }

  body#main-body :is(
    .card-body,
    .card-box,
    .account-panel,
    .settings-card,
    .forms-card,
    .submissions-card,
    .booking-admin-card,
    .representative-card,
    .user-panel,
    .invoice-list-card,
    .tasks-panel
  ) {
    padding: 12px;
  }

  body#main-body :is(
    .card-header,
    .panel-header,
    .section-title-row,
    .settings-card-header,
    .home-panel-header,
    .billing-section-header,
    .billing-create-panel-header,
    .person-notes-header,
    .docu-side-header
  ) {
    gap: 8px;
    padding: 9px 12px;
  }

  body#main-body :is(h1, h2, h3, h4, p) {
    margin-top: 0;
  }

  body#main-body :is(h1, .page-title, .settings-title) {
    margin-bottom: 8px;
  }

  body#main-body :is(h2, .section-title, .panel-title) {
    margin-bottom: 6px;
  }

  body#main-body :is(.form-label, label:not(.form-check-label)) {
    line-height: 1.2;
    margin-bottom: 3px;
  }

  body#main-body .app-floating-field {
    margin-block: .3rem .22rem;
  }

  body#main-body .app-floating-field > :is(input, select, textarea) {
    min-height: 48px;
    padding: .68rem .75rem .48rem;
  }

  body#main-body .app-floating-field > textarea {
    min-height: 92px;
    padding-top: .78rem;
  }

  body#main-body .app-floating-field.app-floating-field-sm > :is(input, select, textarea) {
    min-height: 44px;
    padding: .6rem .55rem .4rem;
  }

  body#main-body :is(.form-control, .form-select, .input-group-text) {
    min-height: 44px;
    padding-bottom: .42rem;
    padding-top: .42rem;
  }

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

  body#main-body :is(.btn, button.btn) {
    min-height: 44px;
    padding: 7px 10px;
  }

  body#main-body .btn-sm,
  body#main-body .btn.btn-sm {
    min-height: 40px;
    padding: 6px 9px;
  }

  body#main-body :is(
    .account-actions,
    .booking-actions,
    .forms-actions,
    .management-actions,
    .settings-form-actions,
    .home-simple-actions,
    .person-actions-row,
    .person-contract-actions,
    .person-compliance-actions,
    .person-task-actions,
    .docu-empty-actions,
    .docu-compliance-actions,
    .snippet-side-actions,
    .tasks-toolbar-actions,
    .invoice-actions,
    .calendar-tabs,
    .timeline-filters,
    .shared-docu-toolbar
  ) {
    flex-wrap: nowrap;
    gap: 6px;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 2px;
    scrollbar-width: thin;
  }

  body#main-body :is(
    .account-actions,
    .booking-actions,
    .forms-actions,
    .management-actions,
    .settings-form-actions,
    .home-simple-actions,
    .person-actions-row,
    .person-contract-actions,
    .person-compliance-actions,
    .person-task-actions,
    .docu-empty-actions,
    .docu-compliance-actions,
    .snippet-side-actions,
    .tasks-toolbar-actions,
    .invoice-actions,
    .calendar-tabs,
    .timeline-filters,
    .shared-docu-toolbar
  ) > * {
    flex: 0 0 auto;
  }

  body#main-body :is(.table-responsive, .person-invoice-scroll) {
    border-radius: 10px;
    overflow-x: auto;
    scrollbar-gutter: auto;
  }

  body#main-body main :is(.row, [class*="grid"], [class*="layout"], [class*="toolbar"], [class*="header"]) > * {
    min-width: 0;
  }

  body#main-body :is(img, video, canvas, iframe) {
    max-width: 100%;
  }

  body#main-body :is(.alert, .toast-body, .list-group-item) {
    padding: 9px 11px;
  }

  body#main-body .table {
    margin-bottom: 0;
  }

  body#main-body .table :is(th, td) {
    padding: 8px 9px;
  }

  body#main-body .table thead th {
    line-height: 1.2;
    white-space: nowrap;
  }

  body#main-body .table :is(.btn, button, [role="button"]) {
    min-height: 40px;
  }

  body#main-body :is(.nav-tabs, .nav-pills, [class*="-tabs"]):not(.dropdown-menu) {
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
  }

  body#main-body :is(.nav-tabs, .nav-pills, [class*="-tabs"]):not(.dropdown-menu) > * {
    flex: 0 0 auto;
  }

  body#main-body .modal .modal-dialog {
    margin: 8px auto;
    max-width: min(var(--bs-modal-width, 94vw), calc(100vw - 20px));
  }

  body#main-body .modal .modal-content {
    max-height: calc(100dvh - 16px);
  }

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

  body#main-body .modal .modal-body {
    padding: 12px;
    scrollbar-gutter: auto;
  }

  body#main-body .modal .modal-footer {
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  body#main-body .modal .modal-footer .btn {
    flex: 0 0 auto;
    min-width: max-content;
  }

  body#main-body :is(.dropdown-menu, .global-search-results) {
    max-height: calc(100dvh - var(--app-nav-height, 58px) - 24px);
    overflow-y: auto;
  }

  :is(.booking-public, .public-form-body) :is(.booking-card, .public-form-card) {
    margin: 12px auto;
    padding: 16px;
  }

  :is(.booking-public, .public-form-body) :is(.booking-shell, .public-form-shell) {
    width: calc(100% - 24px);
  }

  :is(.booking-public, .public-form-body) :is(.form-control, .form-select, .btn, button) {
    min-height: 44px;
  }

  :is(.booking-public, .public-form-body) .row.g-3 {
    --bs-gutter-x: .65rem;
    --bs-gutter-y: .65rem;
  }
}

@media (min-width: 769px) and (max-width: 1440px) and (max-height: 900px) {
  :root {
    --app-content-gap: 4px;
    --app-line-body: 1.32;
  }

  body#main-body :is(
    .card-body,
    .card-box,
    .account-panel,
    .settings-card,
    .forms-card,
    .submissions-card,
    .booking-admin-card,
    .representative-card,
    .user-panel,
    .invoice-list-card,
    .tasks-panel
  ) {
    padding-bottom: 10px;
    padding-top: 10px;
  }

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

  body#main-body .modal .modal-content {
    max-height: calc(100dvh - 12px);
  }
}

@media (max-width: 768px) and (hover: none), (max-width: 768px) and (pointer: coarse) {
  body#main-body :is(.table-responsive, .nav-tabs, .nav-pills, [class*="-tabs"], [class*="-toolbar"]) {
    max-width: 100%;
    overflow-x: auto;
  }

  body#main-body .modal .modal-footer {
    gap: 6px;
  }
}