/* Shared mobile layout. Keep document previews and drawing coordinates intact. */
.brand, .brand__text, .site-shell > main, .field, .register-form,
.app-page, .app-modal__header > div { min-width: 0; }
.brand__mark { flex-shrink: 0; }
.brand__text, .app-page-header, .helper-copy, .validation-summary {
  overflow-wrap: anywhere;
}
.cta > :is(span, strong) { min-width: 0; }
.cta > :is(svg, img) { flex-shrink: 0; }
.property-plan-canvas { touch-action: none; }
.form-tabs__tab, .screen-help__button { text-align: center; white-space: normal; }

/* The fragment wrapper must participate in the full-height editor layout. */
.body--property-plans #page-async-fragment {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
  min-width: 0;
}

.responsive-scroll-hint {
  margin: .4rem 0;
  color: var(--ink-600);
  font-size: .85rem;
}
.responsive-scroll-hint[hidden] { display: none; }

@media screen {
  .body--app .report-table-scroll { min-width: 0; max-width: 100%; overflow-x: auto; }
  .body--app :is(.customers-report-page, .customers-report-card) { min-width: 0; }
}

@media screen and (max-width: 1100px) {
  .body--app .qcf-with-scale { grid-template-columns: minmax(0, 1fr); }
  .body--app .qcf-field { min-width: 0; }
}

/* Touch keyboards also need readable controls on tablets and in landscape. */
@media screen and (max-width: 760px), screen and (pointer: coarse) {
  /* 16px prevents focus zoom on iOS while preserving user-controlled zoom. */
  body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
    min-width: 0;
    max-width: 100%;
    font-size: 16px !important;
  }
  body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]), select) { min-height: 2.75rem; }
  .body--app :is(.qc-icon-btn, .pool-plan-icon-btn) { min-width: 2.75rem; min-height: 2.75rem; }
  .body--app .property-plan-header__actions .cta { min-height: 2.75rem; }
}

@media screen and (min-width: 761px) and (max-width: 1100px) {
  .site-header__actions { position: relative; }
  .site-nav__item { position: static; }
  .site-nav__menu {
    top: 100%;
    left: 0;
    right: 0;
    min-width: 0;
    width: 100%;
  }
}

@media screen and (max-width: 760px) {
  .body--app { --control-height: 2.75rem; --control-height-sm: 2.75rem; }
  .site-shell, .site-shell--wide { width: calc(100% - 1.25rem); }
  .site-header { padding: .65rem; }
  .brand { max-width: 100%; }
  .site-header .site-nav { gap: .35rem; }
  .site-header .site-nav > :is(a, details) { flex: 1 1 auto; }
  .site-header .site-nav :is(a, .site-nav__trigger) {
    min-height: 2.75rem;
    justify-content: center;
    text-align: center;
    white-space: normal;
  }
  .site-header .site-nav .site-nav__menu a { justify-content: flex-start; text-align: left; }
  .site-header__user { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
  .site-footer { padding-inline: .65rem; overflow-wrap: anywhere; }

  .cta { min-height: 2.75rem; max-width: 100%; padding-block: .55rem; line-height: 1.3; }
  .body--app .cta:not(.cta--icon):not(.property-plan-tool-button) { height: auto; }
  .body--app :is(.app-hero, .app-card, .app-module) { padding: .9rem; }
  .body--app :is(h1, h2, h3, h4, label, legend) { overflow-wrap: anywhere; }
  .body--app code { overflow-wrap: anywhere; }
  .body--app .app-page-header__headline { align-items: flex-start; }
  .body--app .app-page-header__headline h1 { font-size: clamp(1.4rem, 6vw, 1.9rem); }
  .body--app :is(.app-toolbar__actions, .app-modal__header-actions, .card-inline-toolbar,
    .customer-property-toolbar, .submit-row, .inline-search, .inline-search__actions) {
    min-width: 0;
    max-width: 100%;
    flex-wrap: wrap;
    gap: .5rem;
  }
  .body--app :is(.app-toolbar__actions, .submit-row, .inline-search__actions) > .cta:not(.cta--icon) {
    flex: 1 1 10rem;
  }
  .body--app .field--inline { flex-wrap: wrap; }
  .body--app .field--inline label { white-space: normal; }
  .body--app .task-board-filter-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: .5rem;
  }
  .body--app .task-board-filter-form > :not(.task-board-filter-field--date) {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
  }
  .body--app .task-board-filter-field--date { width: 100%; min-width: 0; }
  .body--app .task-board-filter-field--date input[type="date"] {
    appearance: none;
    padding-inline: .3rem;
    min-width: 0;
    max-width: 100%;
  }
  .body--app .task-board-filter-field--date input::-webkit-datetime-edit { padding: 0; }
  .body--app .task-board-filter-field--date input::-webkit-date-and-time-value { min-width: 0; text-align: left; }
  .body--app :is(.app-toolbar, .card-inline-toolbar, .customer-property-toolbar) > * { min-width: 0; max-width: 100%; }

  .field :is(input, select, textarea) { width: 100%; }
  .field { max-width: 100%; }
  .field :is(input[type="checkbox"], input[type="radio"]) { width: auto; }
  textarea { resize: vertical; }
  .body--app .form-tabs__nav { gap: .4rem; }
  .body--app .form-tabs__tab { flex: 1 1 8rem; min-width: 0; }

  .body--app :is(.record-table-shell, .task-board-table-shell, .qcf-repeat, .climate-monthly-grid) {
    min-width: 0;
    max-width: 100%;
    overscroll-behavior-x: contain;
  }
  .body--app .customers-report-table { min-width: 48rem; }
  .body--app .grass-help-card { min-width: 0; }
  .body--app .customers-report-card { padding: .9rem; overflow-wrap: anywhere; }
  .body--app .grass-help-grid { grid-template-columns: minmax(0, 1fr); }
  .body--app .grass-help-formula { overflow-wrap: anywhere; }
  .body--app .record-table-shell { max-height: min(32rem, 65dvh); }
  .body--app .task-board-detail .record-table-shell { max-height: none; }
  .body--app :is(.task-board-table, .task-board-detail-table) td { overflow-wrap: anywhere; }
  .body--app .record-table-pagination { padding-inline: 0; }
  .body--app .record-table-pagination__summary { min-width: 0; }
  .body--app .record-table-pagination__controls { gap: .5rem; }

  .body--app .app-modal {
    width: calc(100% - 1rem);
    max-width: calc(100% - 1rem);
    max-height: calc(100dvh - 1rem);
  }
  .body--app .app-modal__panel {
    padding: .85rem;
    gap: .75rem;
    max-height: calc(100dvh - 1rem);
  }
  .body--app .app-modal__header { gap: .5rem; flex-wrap: wrap; }
  .body--app .app-modal__header > .cta { flex-shrink: 0; }
  .body--app .app-modal__body { min-width: 0; scroll-padding-block: .75rem; }
  #albaran-dialog .albaran__header {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }
  #albaran-dialog .albaran__header > div { width: 100%; min-width: 0; }
  #albaran-dialog :is(.albaran__customer, .albaran__customer-name) { text-align: left; }
  .body--app .app-modal--camera .app-modal__panel--camera { height: calc(100dvh - 1rem); }
  .body--app .task-camera__actions > .cta:not(.cta--icon) { flex: 1 1 0; padding-inline: .4rem; }
  .body--app .app-modal--material .register-form .submit-row { position: static; }
  .body--app :is(.property-plan-dialog, .qc-bands-modal) {
    max-width: calc(100% - 1rem);
    max-height: calc(100dvh - 1rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* Catalogs use page scrolling so their editors remain reachable below the tree. */
  .body--materials { display: block; height: auto; overflow: visible; }
  .body--materials:has(dialog[open]) { overflow: hidden; }
  .body--materials .site-shell, .body--materials .site-shell > main { display: block; height: auto; }
  .body--materials :is(.app-page--materials, .materials-catalog-layout, .materials-tree-card, .materials-list-card) {
    height: auto;
    overflow: visible;
    min-width: 0;
    grid-template-rows: none;
  }
  .body--materials .materials-catalog-layout { grid-template-columns: minmax(0, 1fr); }
  .body--materials .material-tree { height: auto; max-height: 40dvh; min-height: 8rem; }
  .body--materials .materials-table-shell { overflow: auto; }

  .body--app :is(.customer-property-form-grid, .budget-metadata-grid, .budget-modal-grid,
    .budget-material-picker__filters, .budget-modal-advanced-grid, .budget-plan-picker__list,
    .budget-preview-plans, .invoice-detail-fiscal-grid, .invoice-guide-grid, .invoice-help-grid,
    .invoice-compliance-status-grid, .vf-declaration__data, .vf-declaration__signature,
    .pool-plan-meta-grid, .climate-editor-grid, .qc-meta-grid, .qc-section__cols--2) {
    grid-template-columns: minmax(0, 1fr);
  }
  .body--app :is(.qcf-add-select, .pool-plan-day__op) { min-width: 0; width: 100%; }
  .body--app :is(.pool-plan-day__time, .pool-plan-inline-form, .qcf-control__head,
    .qc-list-card__head, .qc-section__head, .qc-bands-modal__head) { flex-wrap: wrap; }
  .body--app :is(.qc-section__title, .qcf-control__title, .qcf-field, .qc-props, .qc-editor) { min-width: 0; overflow-wrap: anywhere; }
  .body--app :is(.qc-icon-btn, .pool-plan-icon-btn) { min-width: 2.75rem; min-height: 2.75rem; text-align: center; }
  .body--app :is(.qcf-options label, .pool-plan-work__check) { min-height: 2.75rem; white-space: normal; }
  .body--app .qcf-location { grid-template-columns: minmax(0, 1fr); }
  .body--app .qcf-repeat :is(input, select) { min-width: 8rem; }
  .body--app .qc-band-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .body--app .qc-band-row > :first-child { grid-column: 1 / -1; }
  .body--app .qc-option-row { grid-template-columns: minmax(0, 1fr) 2.75rem auto; }
  .body--app .qc-bands-modal__row { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-block: .5rem; border-bottom: 1px solid #d4e0d0; }
  .body--app .climate-monthly-grid { grid-template-columns: 7rem repeat(12, 4.5rem); padding-bottom: .5rem; }

  .body--app .template-html-dialog { height: calc(100dvh - 1rem); max-height: calc(100dvh - 1rem); }
  .body--app .template-html-dialog__header { flex-wrap: wrap; gap: .5rem; }
  .body--app .template-html-dialog__body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(12rem, 1fr) minmax(12rem, 1fr); overflow: auto; }
  .body--app :is(.template-html-dialog__code, .template-html-dialog__preview) { min-width: 0; min-height: 0; }
  .body--app .template-html-dialog__preview iframe { width: 100%; min-width: 0; }
  .body--app .vf-declaration__document { width: 100%; max-width: 100%; }

  /* Allow vertical scrolling through drawing tools without collapsing the canvas. */
  .body--app .property-plan-header__meta { flex-wrap: wrap; }
  .body--app .property-plan-header__summary { white-space: normal; line-height: 1.35; }
  .body--app .property-plan-header__actions { justify-content: flex-start; gap: .4rem; }
  .body--app .property-plan-header__actions .cta { min-height: 2.75rem; }
  .body--app :is(.property-plan-tool-button, .property-plan-ortho-toggle) { width: 2.75rem; min-width: 2.75rem; height: 2.75rem; min-height: 2.75rem; }
  .body--app .property-plan-toolbar { padding: .4rem; }
  .body--property-plans .property-plan-editor-card--full {
    overflow-y: auto;
    grid-template-rows: auto minmax(26rem, 1fr);
    padding: .25rem;
  }
  .body--property-plans .property-plan-editor-fieldset { grid-template-rows: auto minmax(18rem, 1fr) auto; height: auto; min-height: 100%; }
  .body--property-plans .property-plan-form--editor { height: auto; }
  .body--app .property-plan-tool-dropdown__menu { min-width: 0; width: min(15rem, calc(100vw - 2rem)); }
  .body--app .property-plan-tool-dropdown__item { min-height: 2.75rem; font-size: .9rem; }
  .body--app .property-plan-symbol-browser { grid-template-columns: minmax(0, 1fr); }
  .body--app .property-plan-symbol-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .body--app :is(.property-plan-dialog__header, .property-plan-dialog__footer, .symbol-designer__header, .symbol-designer__footer) { flex-wrap: wrap; gap: .5rem; }
  .body--app .property-plan-dialog__body > * { min-width: 0; max-width: 100%; }
  .body--app .property-plan-dialog__header > div { display: flex; flex-wrap: wrap; min-width: 0; gap: .4rem; }
  .body--app .property-plan-irrigation-panel { right: .5rem; max-width: calc(100% - 1rem); max-height: 60dvh; }
  .body--app .symbol-designer { padding: .75rem; }
  .body--app .symbol-designer__toolbar button { min-height: 2.75rem; }
}

@media screen and (max-width: 400px) {
  .register-intro, .register-shell, .status-card { padding: 1rem; }
  .body--app .symbol-designer__settings,
  .body--app .symbol-designer__properties { grid-template-columns: minmax(0, 1fr); }
}

@media print {
  .responsive-scroll-hint { display: none; }
}