/* iPad workspace fit: keep the full desktop capability without squeezing it. */
@media (min-width: 761px) and (max-width: 1366px) {
  #app .premium-app .dashboard-v1,
  #app .premium-app .ironflow-calendar-page {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Dashboard: readable rows first, supporting panels underneath. */
  #app .premium-app .dashboard-v1 .dashboard-reference-command-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #app .premium-app .dashboard-v1 .dashboard-command-side {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: auto !important;
  }

  #app .premium-app .dashboard-v1 .dashboard-command-strip.command-center-final {
    grid-template-columns: minmax(300px, .82fr) minmax(440px, 1.18fr) !important;
    min-height: 0 !important;
  }

  #app .premium-app .dashboard-v1 .dashboard-pipeline-panel {
    grid-template-columns: minmax(190px, 235px) minmax(0, 1fr) !important;
  }

  #app .premium-app .dashboard-v1 .dashboard-pipeline-row {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
  }

  #app .premium-app .dashboard-v1 .dashboard-pipeline-row > * {
    flex: 0 0 132px !important;
    min-width: 132px !important;
    scroll-snap-align: start;
  }

  #app .premium-app .dashboard-v1 .dashboard-priority-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #app .premium-app .dashboard-v1 .dashboard-automation-watch-panel {
    grid-column: 1 / -1 !important;
    height: auto !important;
    max-height: none !important;
    min-height: 330px !important;
  }

  /* Calendar: show the full seven-day month on the iPad canvas. */
  #app .premium-app .ironflow-calendar-page .calendar-focus-grid,
  #app .premium-app .ironflow-calendar-page
    .calendar-focus-grid:has(> .calendar-focus-metric:nth-child(4):last-child) {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  #app .premium-app .ironflow-calendar-page .calendar-focus-metric {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 68px !important;
    padding: 9px 11px !important;
  }

  #app .premium-app .ironflow-calendar-page .calendar-month-availability-v4 {
    grid-template-columns: minmax(215px, auto) minmax(0, 1fr) !important;
    gap: 10px 14px !important;
  }

  #app .premium-app .ironflow-calendar-page .calendar-month-route-v4 {
    grid-column: 2 !important;
    justify-self: end !important;
  }

  #app .premium-app .ironflow-calendar-page .calendar-shell,
  #app .premium-app .ironflow-calendar-page .calendar-shell.calendar-mode-month {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    grid-template-columns: minmax(0, 1fr) !important;
    overflow: visible !important;
  }

  #app .premium-app .ironflow-calendar-page .calendar-board-panel,
  #app .premium-app .ironflow-calendar-page .appointment-detail {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    position: static !important;
    overflow: visible !important;
  }

  #app .premium-app .ironflow-calendar-page .calendar-board-head {
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: start !important;
  }

  #app .premium-app .ironflow-calendar-page .calendar-board-view-controls,
  #app .premium-app .ironflow-calendar-page .calendar-board-head-actions,
  #app .premium-app .ironflow-calendar-page .calendar-filters {
    min-width: 0 !important;
    max-width: 100% !important;
    flex-wrap: wrap !important;
  }

  #app .premium-app .ironflow-calendar-page .calendar-month-panel-v4 > .body {
    overflow: visible !important;
  }

  #app .premium-app .ironflow-calendar-page .calendar-month-scroll-v4 {
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
  }

  #app .premium-app .ironflow-calendar-page .month-calendar-grid-v4 {
    width: 100% !important;
    min-width: 700px !important;
    grid-template-columns: repeat(7, minmax(100px, 1fr)) !important;
  }

  #app .premium-app .ironflow-calendar-page .request-queue-panel .body {
    max-height: 430px !important;
    overflow-y: auto !important;
  }

  /* Keep the save action obvious and reachable above tablet browser chrome. */
  #app .customer-proposal-modal {
    align-items: flex-start !important;
    overflow-y: auto !important;
    padding: 18px 18px 92px !important;
  }

  #app .customer-proposal-dialog {
    width: min(100%, 1095px) !important;
    max-height: none !important;
  }

  #app .customer-proposal-dialog > footer {
    position: sticky !important;
    bottom: 8px !important;
    z-index: 3 !important;
    box-shadow: 0 -12px 28px rgba(0, 7, 14, .72) !important;
  }

  #app .customer-proposal-dialog > footer [data-customer-proposal-continue] {
    min-width: 290px !important;
    min-height: 50px !important;
  }
}

@media (min-width: 761px) and (max-width: 1050px) {
  #app .premium-app .dashboard-v1 .dashboard-command-side,
  #app .premium-app .dashboard-v1 .dashboard-priority-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #app .premium-app .dashboard-v1 .dashboard-command-strip.command-center-final {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #app .premium-app .dashboard-v1 .dashboard-pipeline-panel {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #app .premium-app .ironflow-calendar-page .month-calendar-grid-v4 {
    min-width: 672px !important;
    grid-template-columns: repeat(7, minmax(96px, 1fr)) !important;
  }
}