/* Shared phone behavior for staff, customers and account registration.
   Keep the saved editor canvas at its design size; its Fit control scales it. */
.ticket-inline-edit-trigger { display: none; }
.field-engineer-mobile-footer { display: none; }
@media screen and (max-width: 760px) {
  .field-engineer-shell :is(a[href="#tickets"], a[href^="#ticket/"], .nav-link[href="#on-site-report"], #global-search-form, .field-engineer-ticket-action, [data-action="new-ticket"], [data-action="new-client-ticket"], [data-action="notifications"]) { display: none !important; }
  .field-engineer-shell .utility-bar { display: none !important; }
  .field-engineer-shell .app-nav :is(.app-name, .connection) { display: none; }
  .field-engineer-shell .app-nav .nav-links { flex: 1 1 auto; }
  .field-engineer-shell .app-nav .nav-link { min-height: 48px; }
  .field-engineer-shell #main { padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important; }
  .field-engineer-shell > .field-engineer-mobile-footer {
    display: flex; position: fixed; z-index: 70; left: 0; right: 0; bottom: 0;
    box-sizing: border-box; background: var(--surface, #fff); border-top: 1px solid var(--line, #d6e1ed);
    padding: 8px max(12px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
  }
  .field-engineer-mobile-footer .button {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 48px; width: 100%; min-width: 0; font-size: 15px;
    line-height: 1.4; white-space: normal; border-radius: 8px;
  }
  .field-engineer-mobile-footer .icon { flex-shrink: 0; }
}
/* Saved object offsets describe the desktop arrangement. Mobile sections flow
   in reading order, so those offsets must not move controls off the screen.
   The editable canvas and explicit desktop preview retain their coordinates. */
@media screen and (max-width: 900px) {
  [data-platform-element-styled]:not(.case-editor-canvas *):not(.case-editor-preview[data-device="desktop"] *) { translate: none !important; }
}
.case-editor-preview[data-device="mobile"] [data-platform-element-styled] { translate: none !important; }
@media screen and (pointer: coarse), screen and (max-width: 760px) {
  .ticket-editable-value:not(.case-editor-canvas *) { min-height: 44px; cursor: pointer; }
  .ticket-editable-value > [data-inline-display] { min-width: 0; overflow-wrap: anywhere; }
  .ticket-inline-edit-trigger:not(.case-editor-canvas *) { display: inline-flex; flex: 0 0 44px; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: var(--blue, #0876d3); border-radius: 5px; background: #edf6ff; }
  .ticket-inline-edit-trigger .icon { width: 16px; height: 16px; }
}
@media screen and (max-width: 760px), screen and (pointer: coarse) {
  body { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  :is(input, select, textarea):not([type="checkbox"], [type="radio"], [type="color"], [type="range"], [type="hidden"]):not(.case-editor-canvas *) {
    font-size: 16px !important;
    max-width: 100%;
  }
  :is(.button, .icon-button, .close-button, .text-link, .app-launcher, .nav-link, .tab, .auth-tab, .utility-button, .logistics-close, .case-format-button, .case-editor-component, .case-editor-tab-choices button, .field-service-tabs button):not(.case-editor-canvas *) {
    min-height: 44px;
    touch-action: manipulation;
  }
  :is(.icon-button, .close-button, .app-launcher, .logistics-close, .case-format-button):not(.case-editor-canvas *) { min-width: 44px; }
  :is(.button, .text-link):not(.case-editor-canvas *) { white-space: normal; overflow-wrap: anywhere; }
  :is(.form-input, .filter-select):not(.case-editor-canvas *) { min-height: 44px; height: auto; }
  :is(.checkbox-label, .report-checkbox, .serial-flag-option, .service-check, .field-service-check, .logistics-checkbox):not(.case-editor-canvas *) { min-height: 44px; }
  :is(input[type="checkbox"], input[type="radio"]):not(.case-editor-canvas *) { width: 20px; height: 20px; flex: 0 0 auto; }
  :is(.heading-actions, .account-form-actions, .modal-footer) { flex-wrap: wrap; }
  :is(.search-input, .service-field, .email-template-field, .logistics-field, .field-service-field) { min-width: 0; max-width: 100%; }
  :is(input[type="file"], img, video):not(.case-editor-canvas *) { max-width: 100%; }
  :is(.table-wrap, .logistics-table-wrap, .field-service-table-wrap, .tabs, .nav-links, .portal-nav, .field-service-tabs) { overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  :is(.account-meta, .detail-fields, .serial-meta, .service-call-meta, .field-service-meta, .logistics-meta) dd { overflow-wrap: anywhere; }
  .platform-designed-login { padding-right: 12px; padding-left: 12px; }
  .case-editor-formatting { padding: 12px; }
  .case-format-controls { gap: 10px; }
  .case-format-field input:not([type="color"]), .case-format-field select { min-height: 44px; }
  .case-editor-formatting .case-format-group { flex-wrap: wrap; }
  .case-editor-element-properties, .case-editor-section-field-properties { min-width: 0; }
  .case-editor-palette { max-height: 360px; overflow-y: auto; }
  .case-editor-stage-toolbar { flex-wrap: wrap; }
  .design-editor-tabs { gap: 6px; padding: 10px; }
  .design-editor-tabs .button, .administration-nav .button { flex: 1 1 130px; }
}

@media screen and (max-width: 600px) {
  .global-header {
    height: auto;
    min-height: 58px;
    flex-wrap: wrap;
    padding: max(10px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) 12px max(12px, env(safe-area-inset-left, 0px));
    gap: 8px;
  }
  .header-tools { margin-left: auto; gap: 6px; min-width: 0; }
  .global-header .language-select { height: 44px; min-width: 92px; max-width: 104px; }
  .global-header .avatar { width: 44px; height: 44px; }
  /* The search input remains directly tappable without a hover/focus gesture. */
  .global-header .global-search,
  .global-header .global-search:focus-within {
    position: relative;
    inset: auto;
    order: 3;
    flex: 1 1 100%;
    width: 100%;
    max-width: none;
    height: 44px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid #d9e3ee;
    background: #fafcfe;
  }
  .global-search input, .global-search:focus-within input { width: 100%; opacity: 1; }
  .app-nav { height: auto; min-height: 48px; padding: 0 max(12px, env(safe-area-inset-right, 0px)) 0 max(12px, env(safe-area-inset-left, 0px)); gap: 8px; }
  .app-name { padding-right: 8px; }
  .nav-links { flex: 1 1 auto; }
  .nav-link { flex: 0 0 auto; min-height: 48px; }
  .workspace { padding-right: max(12px, env(safe-area-inset-right, 0px)); padding-left: max(12px, env(safe-area-inset-left, 0px)); padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .utility-bar { height: calc(48px + env(safe-area-inset-bottom, 0px)); padding: 0 max(12px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(12px, env(safe-area-inset-left, 0px)); }
  .utility-item { font-size: 11px; }
  .toast { bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
  .page-heading, .card-header { min-width: 0; }
  .card-header { flex-wrap: wrap; }
  .heading-actions > .button { flex: 1 1 125px; }
  .filters .filter-select { flex: 1 1 125px; width: auto; }
  .search-input { min-width: 0; min-height: 44px; height: auto; }
  .record-grid .detail-panel .detail-fields,
  .serial-details-grid, .account-meta, .serial-meta,
  .person-details .person-details-fields, .user-profile-fields,
  .service-call-meta, .field-service-meta, .field-service-form-grid, .field-service-filters,
  .field-service-check-result, .logistics-meta, .logistics-form-grid, .logistics-filters { grid-template-columns: minmax(0, 1fr); }
  .saved-report { align-items: flex-start; flex-wrap: wrap; }
  .saved-report .heading-actions { width: auto; }
  .state-summary-item, .field-service-meta > div { min-width: 0; }
  .serial-number-link { display: inline-block; min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
  .serial-flag-controls { gap: 4px 16px; }
  .serial-flag-option { align-items: center; }
  .portal-header-inner, .portal-nav, .portal-main, .portal-footer { width: calc(100% - max(24px, env(safe-area-inset-left, 0px) + env(safe-area-inset-right, 0px))); }
  .portal-header-inner { padding-top: max(12px, env(safe-area-inset-top, 0px)); }
  .portal-tools { flex-wrap: wrap; }
  .portal-tools .language-select { max-width: 110px; min-height: 44px; }
  .portal-user-settings summary { min-height: 44px; }
  .portal-settings-menu { right: 0; }
  .portal-user-settings { max-width: 100%; }
  .portal-nav a { min-height: 48px; }
  .portal-footer { padding-bottom: env(safe-area-inset-bottom, 0px); }
  .ef-access-header { gap: 12px; flex-wrap: wrap; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-top: max(12px, env(safe-area-inset-top, 0px)); }
  .ef-access-header .language-select { min-height: 44px; width: 106px; }
  .ef-access-brand { min-width: 0; flex-wrap: wrap; gap: 8px; }
  .ef-access-brand small { padding-left: 8px; }
  .ef-access-main { padding-bottom: calc(36px + env(safe-area-inset-bottom, 0px)); }
  /* Dialog contents scroll independently; the action row stays reachable when
     the browser toolbar or keyboard reduces the visible viewport. */
  .modal-backdrop, .logistics-modal { padding: max(8px, env(safe-area-inset-top, 0px)) max(8px, env(safe-area-inset-right, 0px)) max(8px, env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px)); }
  .modal, .logistics-dialog { min-width: 0; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); }
  .modal > form, .logistics-dialog > form { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
  .modal-header, .logistics-dialog-heading { min-width: 0; }
  .modal-header > div, .logistics-dialog-heading h2 { min-width: 0; overflow-wrap: anywhere; }
  .modal-body, .logistics-dialog-content { min-height: 0; overflow: auto; overscroll-behavior: contain; }
  .modal-footer, .logistics-dialog-actions { flex-shrink: 0; flex-wrap: wrap; }
  .modal-footer .button, .logistics-dialog-actions .button { flex: 1 1 110px; }
  .logistics-line-item { grid-template-columns: minmax(0, 1fr) 72px 44px; }
  .amazon-connect-panel { right: max(8px, env(safe-area-inset-right, 0px)); bottom: calc(56px + env(safe-area-inset-bottom, 0px)); max-width: calc(100vw - 16px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)); }
  #amazon-connect-ccp { max-height: calc(100dvh - 160px - env(safe-area-inset-bottom, 0px)); }
}