/* Phone layout (≤640px). Loaded last; desktop and tablet layouts are untouched.
   Logical properties keep the Arabic (RTL) layout mirrored correctly. */
@media (max-width: 640px) {
  /* Nothing may push the page sideways; wide content scrolls inside its own card. */
  html, body { overflow-x: hidden; }
  main { padding: 18px 14px 96px; }
  .card, .charts-row > *, .stacked-section > *, .settings-grid > *, .report-grid > * { min-width: 0; }
  .charts-row, .stacked-section { grid-template-columns: minmax(0, 1fr); }

  /* Heading: both actions visible, side by side, full width. */
  .page-heading { flex-direction: column; align-items: stretch; gap: 14px; margin-bottom: 18px; }
  .page-heading h1 { font-size: 24px; line-height: 1.15; }
  .page-heading p { font-size: 12px; }
  .heading-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
  .heading-buttons .button,
  .heading-buttons .button:not(.button-primary) { display: inline-flex; justify-content: center; min-height: 44px; padding: 10px 12px; font-size: 12px; }
  .heading-buttons .button span, .heading-buttons .button-primary span { display: inline; }

  /* Filters: a tidy two-column grid instead of an overflowing row. */
  .filter-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 18px; }
  .filter-bar .filter-group, .filter-bar .filter-group:last-child { display: contents; margin: 0; }
  .filter-bar .button { width: 100%; min-width: 0; min-height: 44px; justify-content: flex-start; gap: 8px; font-size: 12px; padding: 10px 12px; overflow: hidden; white-space: nowrap; }
  .filter-bar .button > .lucide { flex-shrink: 0; }
  .filter-bar .button > .lucide:last-child { margin-inline-start: auto; }
  .filter-bar .date-range-button, .filter-bar [data-action="attribution-menu"] { grid-column: 1 / -1; }
  .filter-description { grid-column: 1 / -1; order: -1; display: flex; align-items: center; gap: 8px; font-size: 11px; }
  .filter-description .mode-pill { font-size: 10px; }

  /* Store and platform tabs: one swipeable row each instead of 1½ screens of tiles. */
  .store-tabs-section, .platform-sales-section { margin-bottom: 18px; }
  .store-tabs-heading p, .platform-sales-section .section-heading p, .platform-sales-note, .platform-attribution-note { display: none; }
  .store-tabs, .platform-tabs {
    display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; overscroll-behavior-x: contain;
    margin-inline: -14px; padding: 2px 14px 6px; scrollbar-width: none;
  }
  .store-tabs::-webkit-scrollbar, .platform-tabs::-webkit-scrollbar { display: none; }
  .store-tab { flex: 0 0 auto; min-height: 44px; padding: 8px 12px; scroll-snap-align: start; }
  .store-tab-icon { width: 26px; height: 26px; }
  .store-tab-title { font-size: 12px; flex-wrap: nowrap; white-space: nowrap; }
  .platform-tab { flex: 0 0 auto; width: 150px; min-height: 0; padding: 11px 12px; scroll-snap-align: start; }
  .platform-tab strong { font-size: 15px; }
  .platform-tab small { font-size: 11px; }

  /* KPIs */
  .kpi-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kpi-card { padding: 14px; }
  .kpi-value { font-size: 22px; }
  .kpi-title, .kpi-bottom { font-size: 11px; }
  .kpi-strip, .metric-strip { grid-template-columns: 1fr 1fr; gap: 10px; }
  .metric-strip small { font-size: 11px; }
  .metric-strip strong { font-size: 17px; }

  /* Chart: metric tabs scroll sideways instead of wrapping into a block. */
  .chart-card .card-header { flex-direction: column; align-items: stretch; gap: 10px; }
  .chart-controls { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; margin-inline: -4px; padding-inline: 4px; }
  .chart-controls::-webkit-scrollbar { display: none; }
  .chart-tab { flex: 0 0 auto; min-height: 36px; padding: 8px 12px; font-size: 12px; }
  .chart-meta { flex-wrap: wrap; gap: 8px; }

  /* Campaign and creative tables become cards: name on top, metrics in a 2-column grid. */
  .table-card .card-header { flex-direction: column; align-items: stretch; gap: 10px; }
  .table-actions { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
  .table-actions .search-field { grid-column: 1 / -1; min-height: 44px; }
  .table-actions .campaign-filter { max-width: none; width: 100%; height: 44px; font-size: 16px; }
  .table-actions .button { min-height: 44px; }
  .campaign-table thead { display: none; }
  .campaign-table, .campaign-table tbody, .campaign-table tfoot { display: block; }
  .campaign-table tr {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; position: relative;
    padding: 14px; border-bottom: 1px solid var(--line);
  }
  .campaign-table td { display: flex; flex-direction: column; gap: 2px; padding: 0; border: 0; font-size: 13px; white-space: normal; }
  .campaign-table td[data-label]::before { content: attr(data-label); font-size: 10.5px; color: var(--text-muted); font-weight: 500; }
  .campaign-table td:nth-child(2), .campaign-table .cell-total { grid-column: 1 / -1; padding-inline-end: 64px; }
  .campaign-table .cell-select { position: absolute; inset-inline-end: 46px; top: 16px; }
  .campaign-table .cell-select input { width: 20px; height: 20px; }
  .campaign-table .cell-more { position: absolute; inset-inline-end: 8px; top: 8px; }
  .campaign-table .cell-empty, .campaign-table .totals-row .cell-select { display: none; }
  .campaign-table .campaign-name strong { font-size: 13px; }
  .campaign-table .campaign-name small { font-size: 11px; white-space: normal; }
  .campaign-table td[colspan] { grid-column: 1 / -1; }
  .table-footer { flex-direction: column; gap: 10px; align-items: center; font-size: 12px; }
  .pagination { flex-wrap: wrap; justify-content: center; }
  .pagination button { min-width: 40px; min-height: 40px; }

  /* Selection totals stay reachable while scrolling a long list. */
  .selection-bar { position: sticky; bottom: 10px; z-index: 5; font-size: 12px; box-shadow: 0 10px 30px #17302420; }

  /* Other tables keep their columns and scroll inside the card. */
  .table-scroll { -webkit-overflow-scrolling: touch; }
  .compact-table { font-size: 12px; }
  .compact-table th { font-size: 11px; }

  /* Best performers, channels, platform cards */
  .best-row strong { font-size: 13px; }
  .best-row span, .best-row small { font-size: 11px; }
  .best-row { padding: 11px 12px; }
  .channel-card { min-height: 64px; }
  .channel-card p, .card-header p, .section-heading p { font-size: 11.5px; }
  .platform-card-details, .platform-card-spend, .platform-card-foot, .platform-sales-label { font-size: 11px; }
  .platform-card-split { font-size: 11px; }

  /* Dialogs open as bottom sheets with thumb-sized controls. */
  .overlay-backdrop { align-items: flex-end; padding: 0; }
  .modal, .modal.wide {
    width: 100%; max-width: none; max-height: 92vh; overflow-y: auto; margin: 0;
    border-radius: 18px 18px 0 0; padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
  }
  .modal h2 { font-size: 18px; }
  .modal p { font-size: 12.5px; }
  .modal .form-field input, .modal .form-field select { min-height: 46px; font-size: 16px; }
  .modal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .modal-actions .button { min-height: 46px; justify-content: center; }
  .date-presets { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .date-presets button { min-height: 42px; font-size: 12.5px; }
  .dropdown { min-width: 220px; max-width: calc(100vw - 28px); }
  .dropdown button { min-height: 44px; font-size: 13px; }
  .drawer { width: 100%; max-width: none; }

  /* Menu: dim the page behind the open sidebar; a tap outside closes it (app.js). */
  body.menu-open::after { content: ""; position: fixed; inset: 0; background: #10201880; z-index: 40; }
  body.menu-open .sidebar { z-index: 50; }

  /* Comfortable touch targets and readable text everywhere else. */
  .icon-button { min-width: 40px; min-height: 40px; }
  select, input[type="search"], input[type="text"], input[type="number"], input[type="date"], input[type="month"] { font-size: 16px; } /* stops iOS zooming in */
  .disclosure-toggle { min-height: 52px; font-size: 13px; }
  .warning-banner, .error-banner { font-size: 12px; }
  .term-card p { font-size: 12.5px; }
  .term-card small, .live-platform-values span { font-size: 11px; }
  .glossary-toolbar { flex-wrap: wrap; gap: 8px; }
  .glossary-toolbar .search-field { flex: 1 1 100%; min-height: 44px; }
  #glossary-category { max-width: none; flex: 1; height: 44px; }
  .admin-tile .button, .admin-file { min-height: 44px; }
  .activity-row { font-size: 11.5px; }
}

/* Top bar on phones: menu, page name, Refresh, language, search, alerts and profile all fit. */
@media (max-width: 640px) {
  .topbar { padding-inline: 10px; gap: 6px; }
  .breadcrumbs { min-width: 0; gap: 6px; }
  .breadcrumbs > span, .breadcrumbs > .lucide-chevron-right, .breadcrumbs > i[data-lucide="chevron-right"] { display: none; }
  #breadcrumb-page { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
  .topbar-actions { gap: 4px; flex-shrink: 0; }
  .topbar-actions .language-switch { padding: 6px 8px; min-height: 40px; }
  .global-search { min-width: 40px; min-height: 40px; justify-content: center; padding: 0; }
}

/* Both heading actions use the same readable size on phones. */
@media (max-width: 640px) {
  body .heading-buttons .button, body .heading-buttons .button span, body .heading-buttons .button-primary span { font-size: 14px; }
}