/*
 * Mobile layout contract
 *
 * Keep the phone layout in one late-loaded layer so module styles share the
 * same spacing, control sizing and overflow rules. Component styles still own
 * their visual language; this file only resolves the narrow viewport layout.
 */

@media (max-width: 767px) {
  /* Keep the installed iOS web app anchored when a form field opens the keyboard.
     Wide tables retain their own horizontal scroll areas. */
  html,
  body,
  #app {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overflow-x: clip;
    overscroll-behavior-x: none;
    -webkit-text-size-adjust: 100%;
  }

  .app,
  .main,
  .modal-bg,
  .standalone-modal-bg,
  .app-modal-bg {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .modal-bg,
  .standalone-modal-bg,
  .app-modal-bg {
    overflow-x: clip;
  }

  .modal-bg > .modal,
  .modal-bg .modal-body {
    min-width: 0;
    max-width: 100% !important;
  }

  /* A full-screen editor must not inherit the padded bottom-sheet frame. */
  .modal-bg:has(.wr-global-modal) {
    align-items: stretch !important;
    padding: 0 !important;
  }

  .modal-bg .wr-global-modal {
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0;
    max-width: 100% !important;
    height: 100dvh;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }

  /* Safari zooms the visual viewport when a smaller form control gets focus. */
  input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    box-sizing: border-box;
    max-width: 100%;
    font-size: 16px !important;
  }

  [contenteditable="true"] {
    font-size: 16px !important;
  }

  .wr-line-actions {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .wr-line-actions > select {
    min-width: 0;
    flex: 1 1 auto;
  }

  .modal-bg .tt-lines-head {
    align-items: stretch;
    flex-direction: column;
  }

  .tt-lines-head > div:last-child,
  .tt-lines-head select {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100% !important;
  }

  .modal-bg .tt-billing-line {
    grid-template-columns: minmax(0, 1fr);
  }

  .main,
  .content,
  .content > *,
  .ops-dashboard,
  .cwr-page,
  .cwr-hero,
  .cc-filter-bar,
  .cc-client-group {
    min-width: 0;
  }

  .content {
    padding-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right)) !important;
    padding-bottom: calc(24px + env(safe-area-inset-bottom)) !important;
  }

  /* Shared filters: one full-width control per row, with a stable label rail. */
  .cc-filter-bar {
    align-items: stretch;
    gap: 10px;
    padding: 12px;
  }

  .cc-filter-bar .cc-search {
    box-sizing: border-box;
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    min-height: 46px;
  }

  .cc-filter-bar .cc-search input {
    box-sizing: border-box;
    min-width: 0;
    border: 0 !important;
    outline: 0;
    box-shadow: none !important;
  }

  .cc-filter-bar .cc-select {
    display: grid;
    grid-template-columns: minmax(74px, max-content) minmax(0, 1fr);
    align-items: center;
    width: 100%;
    min-width: 0;
    gap: 10px;
  }

  .cc-filter-bar .cc-select > span {
    min-width: 0;
    line-height: 1.2;
  }

  .cc-filter-bar .cc-select > :is(select, input) {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: none;
    height: 44px;
  }

  /* The report list is intentionally allowed to grow vertically on phones. */
  .cc-filter-bar + .cc-accordion,
  .cc-table-scroll {
    min-width: 0;
  }

  /* Prevent unsupported icon ligatures from painting outside their tile. */
  .gp-detail-icon {
    flex: 0 0 auto;
    overflow: hidden;
    text-align: center;
  }

  .gp-detail-copy {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .gp-detail-copy h3,
  .gp-detail-copy p,
  .gp-detail-copy > small {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .gp-detail-copy p {
    line-height: 1.5;
  }

  .gp-detail-cta,
  .ops-hero-actions .btn,
  .ops-section-head .btn {
    min-width: 0;
  }

  .ops-onboarding-step,
  .ops-kpi,
  .ops-module,
  .ops-priority,
  .ops-action {
    min-width: 0;
  }

  .ops-onboarding-step strong,
  .ops-onboarding-step small,
  .ops-module span,
  .ops-priority-copy strong,
  .ops-priority-copy small {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .wr-global-modal,
  .wr-dialog,
  .cwr-dialog {
    max-width: 100vw;
  }
}

@media (max-width: 640px) {
  .wr-line-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .wr-line-actions > select,
  .wr-line-actions > .btn {
    width: 100%;
  }
}

@media (min-width: 768px) and (max-width: 1024px) and (max-height: 600px) {
  input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    max-width: 100%;
    font-size: 16px !important;
  }

  .modal-bg .tt-lines-head,
  .wr-line-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .tt-lines-head > div:last-child,
  .tt-lines-head select,
  .wr-line-actions > select,
  .wr-line-actions > .btn {
    width: 100%;
    min-width: 0;
    max-width: 100% !important;
  }

  .modal-bg .tt-billing-line {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 430px) {
  .cc-filter-bar .cc-select {
    grid-template-columns: 70px minmax(0, 1fr);
  }

  .cc-filter-bar .cc-select > span {
    font-size: 8px;
  }

  .gp-onboarding-detail {
    gap: 10px;
  }
}