/* KTS v1.5.8 — mobile viewport & spacing hardening
   Loaded last on every page. This layer only fixes mobile containment,
   safe-area spacing, touch geometry and overlay/drawer overflow. */

@media (max-width: 720px) {
  html {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
  }

  body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    overflow-x: clip !important;
  }

  /* Never let a desktop child force the page wider than the phone. */
  body *, body *::before, body *::after { box-sizing: border-box; }
  body :where(main, section, article, aside, header, footer, nav, form, fieldset, div, label, details, summary) {
    min-width: 0;
    max-width: 100%;
  }
  body :where(img, video, canvas, svg) {
    max-width: 100%;
    height: auto;
  }
  body :where(h1, h2, h3, h4, p, li, label, small, strong, span, em, b, a, button, code) {
    overflow-wrap: anywhere;
    word-break: keep-all;
  }
  body :where(pre, code) { max-width: 100%; }
  body pre {
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
  }
  body table { max-width: 100%; }
  body :where(.table-wrap, .record-table-wrap, .policy-table-wrap) {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* iOS zooms controls below 16px and can leave the viewport visually shifted. */
  body :where(input, select, textarea) {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    font-size: 16px !important;
  }
  body :where(button, .btn, a.btn, summary) {
    max-width: 100%;
    min-width: 0;
  }

  /* Shared phone edge rhythm: text should never sit against the glass edge. */
  body :where(.plain-main, .page-shell, .security-shell, .app-shell) {
    max-width: 100% !important;
  }
  body.plain-page .plain-main,
  body.policy-page main,
  body.security-page .security-shell,
  body.app-page:not(.workflow-dashboard) .app-shell {
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: max(12px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(12px, env(safe-area-inset-right, 0px)) !important;
  }

  /* Cards/panels use a predictable inner gutter. */
  body :where(.panel, .hero-panel, .tool-card, .offer-card, .policy-card, .security-card,
    .security-panel, .policy-status-panel, .policy-summary-card, .policy-update-card,
    .record-list-panel, .workflow-detail-panel, .booking-command-bar, .booking-inbox-panel,
    .booking-detail-panel, .booking-calendar-panel, .today-task-section) {
    min-width: 0 !important;
  }

  /* Common rows that frequently inherit desktop horizontal layouts. */
  body :where(.copy-row, .link-actions, .tool-actions, .support-actions, .actions,
    .save-actions-inline, .policy-links-v150) {
    max-width: 100%;
  }
  body .copy-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body .copy-row :where(code, input, .btn, button) { width: 100% !important; }
  body .link-box code {
    display: block;
    width: 100%;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  /* Fixed feedback should not disappear behind the installed-app bottom nav. */
  body .toast {
    left: max(12px, env(safe-area-inset-left, 0px)) !important;
    right: max(12px, env(safe-area-inset-right, 0px)) !important;
    width: auto !important;
    max-width: none !important;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  }
  body.dashboard-v110.pwa-pro-mode .toast {
    bottom: calc(86px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Booking popovers/drawers: desktop absolute menus are a major phone overflow source. */
  body.dashboard-v110 :where(.booking-more-popover, .booking-action-menu > div) {
    right: 0 !important;
    left: auto !important;
    width: min(260px, calc(100vw - 32px)) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 32px) !important;
  }
  body.dashboard-v110 .booking-filter-more .booking-filter-grid {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  body.dashboard-v110 .booking-drawer-backdrop {
    width: 100dvw !important;
    height: 100dvh !important;
    max-width: none !important;
  }
  body.dashboard-v110 .booking-drawer {
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100dvw !important;
    max-width: 100dvw !important;
    height: 100dvh !important;
    min-height: 0 !important;
    padding: calc(16px + env(safe-area-inset-top, 0px)) max(14px, env(safe-area-inset-right, 0px)) calc(20px + env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px)) !important;
    border-left: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  body.dashboard-v110 .booking-drawer-head {
    position: sticky;
    z-index: 2;
    top: calc(-16px - env(safe-area-inset-top, 0px));
    margin: 0 -2px 12px !important;
    padding: 12px 2px 10px !important;
    background: #fffdf8;
  }
  body.dashboard-v110 :where(.booking-main-link-row, .booking-link-item) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body.dashboard-v110 :where(.booking-main-link-row, .booking-link-item) :where(button, .btn) {
    width: 100% !important;
  }

  /* Dashboard app shell: use padding instead of calc widths that can fight safe areas. */
  body.dashboard-v110.pwa-pro-mode .app-header {
    width: 100% !important;
    max-width: 100% !important;
    padding-top: calc(8px + env(safe-area-inset-top, 0px)) !important;
    padding-left: max(12px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(12px, env(safe-area-inset-right, 0px)) !important;
  }
  body.dashboard-v110.pwa-pro-mode .test-mode-strip {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: max(12px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(12px, env(safe-area-inset-right, 0px)) !important;
  }
  body.dashboard-v110.pwa-pro-mode .app-shell {
    width: 100% !important;
    max-width: 100% !important;
    margin: 8px auto 20px !important;
    padding-left: max(10px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(10px, env(safe-area-inset-right, 0px)) !important;
  }
  body.dashboard-v110.pwa-pro-mode .app-shell > * {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  body.dashboard-v110.pwa-pro-mode :where(.workflow-hero-copy, .workflow-actions-card,
    .today-task-section, .record-list-panel, .workflow-detail-panel, .booking-command-bar,
    .booking-inbox-panel, .booking-detail-panel, .booking-calendar-panel, #settingsSection) {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  body.dashboard-v110.pwa-pro-mode :where(.workflow-toolbar, .workflow-detail-toolbar,
    .booking-command-title, .booking-panel-head, .panel-heading, .today-task-heading) > * {
    min-width: 0;
    max-width: 100%;
  }
  body.dashboard-v110.pwa-pro-mode :where(.workflow-toolbar h2, .workflow-detail-toolbar h2,
    .booking-command-title h2, .booking-panel-head h2, .panel-heading h2) {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  /* Tabs may scroll by design; the page itself may not. */
  body.dashboard-v110.pwa-pro-mode :where(.workflow-tabbar, .kts-detail-tabs,
    .booking-view-tabs, .booking-detail-tabs, .booking-quick-filters) {
    width: 100% !important;
    max-width: 100% !important;
    overscroll-behavior-inline: contain;
  }

  /* Five fixed navigation cells must always fit even on 320px phones. */
  body.dashboard-v110.pwa-pro-mode .mobile-app-nav {
    left: max(8px, env(safe-area-inset-left, 0px)) !important;
    right: max(8px, env(safe-area-inset-right, 0px)) !important;
    bottom: max(8px, env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    max-width: none !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    overflow: visible !important;
  }
  body.dashboard-v110.pwa-pro-mode .mobile-app-nav button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 4px 2px !important;
    overflow: hidden;
  }
  body.dashboard-v110.pwa-pro-mode .mobile-app-nav button b {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
    font-size: clamp(7.5px, 2.35vw, 9px) !important;
    line-height: 1.15 !important;
    letter-spacing: -.03em;
  }
  body.dashboard-v110.pwa-pro-mode .mobile-app-nav [data-v110-nav="procedure"] {
    transform: translateY(-5px) !important;
  }

  /* More = true bottom sheet. 100% is relative to the padded overlay, not the viewport. */
  body.dashboard-v110.pwa-pro-mode .pro-more-backdrop[aria-hidden="false"] {
    inset: 0 !important;
    width: 100dvw !important;
    height: var(--kts-visual-vh, 100dvh) !important;
    max-width: none !important;
    max-height: none !important;
    padding-top: max(12px, env(safe-area-inset-top, 0px)) !important;
    padding-right: max(12px, env(safe-area-inset-right, 0px)) !important;
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important;
    padding-left: max(12px, env(safe-area-inset-left, 0px)) !important;
    overflow: hidden !important;
  }
  body.dashboard-v110.pwa-pro-mode .pro-more-sheet {
    width: 100% !important;
    max-width: 480px !important;
    max-height: calc(var(--kts-visual-vh, 100dvh) - max(24px, env(safe-area-inset-top, 0px)) - max(24px, env(safe-area-inset-bottom, 0px))) !important;
    margin: 0 auto !important;
    padding: 0 14px 14px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }
  body.dashboard-v110.pwa-pro-mode .pro-more-head {
    position: sticky;
    z-index: 3;
    top: 0;
    margin: 0 -2px 8px !important;
    padding: 14px 2px 10px !important;
    background: #18130d;
  }
  body.dashboard-v110.pwa-pro-mode .pro-more-head strong {
    min-width: 0;
    line-height: 1.25;
  }
  body.dashboard-v110.pwa-pro-mode .pro-more-close {
    flex: 0 0 40px;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
  }
  body.dashboard-v110.pwa-pro-mode .pro-more-grid {
    grid-template-columns: 1fr !important;
    width: 100%;
    gap: 7px !important;
  }
  body.dashboard-v110.pwa-pro-mode .pro-more-grid :is(button, a) {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 46px !important;
    padding: 11px 12px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
  }
  body.dashboard-v110.pwa-pro-mode.pro-more-open {
    overflow: hidden !important;
    overscroll-behavior: none;
  }

  /* Public and admin pages: long status/tool rows should stack instead of clipping. */
  body :where(.policy-admin-detail-head, .security-head, .offer-card-head) {
    min-width: 0;
  }
  body :where(.admin-status-label, .lead-score) {
    max-width: 100%;
  }

  /* Footer rows are allowed to wrap rather than push beyond the phone. */
  body .site-footer {
    padding-left: max(14px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(14px, env(safe-area-inset-right, 0px)) !important;
  }
}

@media (max-width: 390px) {
  body.dashboard-v110.pwa-pro-mode .app-shell {
    padding-left: max(8px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(8px, env(safe-area-inset-right, 0px)) !important;
  }
  body.dashboard-v110.pwa-pro-mode :where(.workflow-hero-copy, .workflow-actions-card,
    .today-task-section, .record-list-panel, .workflow-detail-panel, .booking-command-bar,
    .booking-inbox-panel, .booking-detail-panel, .booking-calendar-panel, #settingsSection) {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  body.dashboard-v110.pwa-pro-mode .summary-grid.workflow-summary,
  body.dashboard-v110.pwa-pro-mode #bookingWorkspace .booking-summary-grid {
    gap: 6px !important;
  }
}

@media (max-width: 340px) {
  body.dashboard-v110.pwa-pro-mode .summary-grid.workflow-summary,
  body.dashboard-v110.pwa-pro-mode #bookingWorkspace .booking-summary-grid {
    grid-template-columns: 1fr !important;
  }
  body.dashboard-v110.pwa-pro-mode .mobile-app-nav button b {
    font-size: 7.5px !important;
  }
}