/* Main EC app only: product-management pages keep their existing layouts. */
.ec-app .logout-icon { display: none; }
@media (max-width: 768px) {
  .ec-app .app-shell {
    --context-bar-height: 56px;
    grid-template-rows: 52px var(--context-bar-height) minmax(0, 1fr);
  }

  .ec-app .topbar-brand {
    position: static;
    transform: none;
    flex: 1;
    min-width: 0;
  }

  .ec-app .topbar :is(button, .topbar-app-link) {
    min-width: 44px;
    min-height: 44px;
    margin: 0;
    padding: var(--space-1);
    flex-shrink: 0;
  }

  .ec-app .logout-label { display: none; }
  .ec-app .logout-icon { display: inline; font-size: var(--text-lg); }

  .ec-app .context-tabbar {
    min-width: 0;
    justify-content: center;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
    overscroll-behavior-x: contain;
  }

  .ec-app .context-tab-row {
    width: max-content;
    min-width: 100%;
  }

  .ec-app .context-tabbar::-webkit-scrollbar {
    display: block;
    height: 4px;
  }

  .ec-app .context-tabbar :is([role="tab"], .context-external-link) {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .ec-app .nav-sublink {
    min-height: 44px;
  }

  .ec-app .sidebar {
    top: calc(52px + var(--context-bar-height));
    height: auto;
  }

  .ec-app .sidebar-backdrop {
    top: calc(52px + var(--context-bar-height));
  }

  .ec-app .app-main {
    padding: var(--space-2) max(var(--space-1), env(safe-area-inset-right))
      max(var(--space-3), env(safe-area-inset-bottom)) max(var(--space-1), env(safe-area-inset-left));
    scrollbar-gutter: auto;
  }

  .ec-responsive-page {
    padding: var(--space-2) var(--space-1);
    overflow-wrap: anywhere;
    --card-padding: var(--space-2);
    --card-padding-flat: var(--space-2);
  }

  .ec-responsive-page :where(div, section, form, fieldset) {
    min-width: 0;
  }

  .ec-responsive-page :where(.card, .card--flat, .tabs-card, .s-card, .dash-chart-card) {
    max-width: 100%;
  }

  .ec-responsive-page :where(.responsive-detail-grid, .keyword-suggestion-grid) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .ec-responsive-page .responsive-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .ec-responsive-page .responsive-facts-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .ec-responsive-page .responsive-facts-grid b {
    text-align: left !important;
    margin-bottom: var(--space-1);
  }

  .ec-responsive-page .promotion-summary-copy {
    min-width: 0 !important;
  }

  .ec-responsive-page :is(.responsive-toolbar, .row, .analysis-section-head, .analysis-control-row,
    [style*="display:flex"], [style*="display: flex"]):has(> :is(button, .input, select)) {
    flex-wrap: wrap;
    gap: var(--space-1);
  }

  .ec-responsive-page .responsive-toolbar > button {
    flex-shrink: 0;
  }

  .ec-responsive-page :is(button, .btn-primary, .btn-ghost, .btn-danger, .btn-ai, summary) {
    min-height: 44px;
    max-width: 100%;
    white-space: normal;
  }

  /* 1rem keeps text fields at 16px on iOS without changing the desktop type scale. */
  .ec-responsive-page :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
    min-width: 0 !important;
    max-width: 100%;
    min-height: 44px;
    font-size: max(var(--text-md), 1rem) !important;
    box-sizing: border-box;
  }

  .ec-responsive-page :is(img, video, svg) {
    max-width: 100%;
  }

  .ec-responsive-page .ec-kpi-card > div:first-child {
    flex-wrap: wrap;
  }

  .ec-responsive-page .ec-kpi-badge {
    white-space: normal !important;
  }

  .ec-responsive-page :is(.dash-kpi-label, .dash-kpi-delta) {
    font-size: var(--text-xs);
  }

  /* Scroll the table's container, retaining header/cell alignment and every column. */
  .ec-responsive-page :is(.table, .analysis-table-scroll > table, .customer360-directory-table-wrap > table) {
    display: table;
  }

  .ec-responsive-page :is(.card, .card--flat, .tabs-card, .s-card):has(table),
  .ec-responsive-page :is(.dash-table-scroll, .analysis-table-scroll, .daily-table-wrap, .customer360-directory-table-wrap) {
    overflow-x: auto;
    max-width: 100%;
    overscroll-behavior-x: contain;
  }
}

@media (max-width: 360px) {
  .ec-responsive-page .responsive-kpi-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}