/* Tablet audit corrections 2026-10-02.
   Keep controls in normal flow so the visible control and its hit target agree. */

@media (min-width: 701px) and (max-width: 1180px) {
  /* The shared header becomes two rows below 1040px. It must grow with them. */
  #app .premium-app .topbar,
  #app .premium-app.customer-reference-shell .customer-reference-topbar {
    height: auto !important;
    min-height: 62px !important;
    max-height: none !important;
    align-content: center !important;
  }

  #app .premium-app .topbar-actions {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Customer directory actions wrap instead of overlapping the view switch. */
  #app .customer-directory-header-v8 {
    display: grid !important;
    grid-template-columns: minmax(220px, auto) minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px 18px !important;
  }

  #app .customer-directory-header-v8 > div:first-child {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #app .customer-directory-view-toggle-v8 {
    margin: 0 0 0 auto !important;
  }

  #app .customer-directory-header-actions-v8 {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
  }

  #app .customer-directory-header-actions-v8 > label:first-child {
    width: auto !important;
    min-width: 240px !important;
    flex: 1 1 320px !important;
  }

  /* Customer detail and Messages use the full tablet canvas without a rail collision. */
  #app .customer-workspace-overview-v8,
  #app .customer-activity-workspace-v8,
  #app .customer-messages-workspace-v8 {
    height: auto !important;
    min-height: 100% !important;
    grid-template-columns: minmax(0, 1fr) !important;
    overflow: visible !important;
  }

  #app .customer-workspace-overview-v8 > .customer-workspace-rail-v8 {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    overflow: visible !important;
  }

  #app .customer-activity-workspace-v8 > .customer-workspace-rail-v8,
  #app .customer-messages-workspace-v8 > .customer-workspace-rail-v8 {
    display: none !important;
  }

  #app .customer-activity-main-v8 {
    width: 100% !important;
    min-width: 0 !important;
    border-right: 0 !important;
  }

  #app .customer-overview-metrics-v8 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #app .customer-composer-v8 > footer {
    flex-wrap: wrap !important;
  }

  #app .customer-composer-warning-v8 {
    width: auto !important;
    height: auto !important;
    min-height: 34px !important;
    max-width: min(100%, 420px) !important;
    display: inline-flex !important;
    padding: 7px 10px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
  }

  /* The full customer list follows its content; no empty reserved block. */
  #app .customer-full-list-screen-v9 {
    height: auto !important;
    min-height: 100dvh !important;
    grid-template-rows: auto auto auto auto !important;
    overflow: visible !important;
  }

  #app .customer-list-titlebar-v9 {
    min-height: 0 !important;
    flex-wrap: wrap !important;
  }

  #app .customer-list-title-actions-v9 {
    flex-wrap: wrap !important;
  }

  /* Calendar summary actions are readable tablet cards, not four squeezed columns. */
  #app .premium-app .ironflow-calendar-page .calendar-focus-strip,
  #app .premium-app .ironflow-calendar-page .calendar-focus-grid {
    width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  #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(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

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

  /* Google connection is a compact status row at tablet sizes. */
  #app .ironflow-calendar-page .gcal-sync-card {
    min-height: 52px !important;
    margin: 6px 0 !important;
    padding: 7px 10px !important;
    gap: 9px !important;
  }

  #app .ironflow-calendar-page .gcal-sync-card small {
    line-height: 1.2 !important;
  }

  #app .ironflow-calendar-page .gcal-sync-card > button {
    min-height: 34px !important;
    height: 34px !important;
  }
}

@media (min-width: 701px) and (max-width: 1040px) {
  #app .premium-app:has(.ironflow-calendar-page) .content {
    height: auto !important;
    min-height: calc(100dvh - 62px) !important;
  }
}

@media (max-width: 760px) {
  #app .ironflow-calendar-page .gcal-sync-card {
    min-height: 0 !important;
    padding: 9px 10px !important;
  }

  #app .customer-composer-warning-v8 {
    width: auto !important;
    height: auto !important;
    min-height: 34px !important;
    max-width: 100% !important;
    display: inline-flex !important;
    padding: 7px 9px !important;
    line-height: 1.2 !important;
  }
}