/* Shared mobile layer. Desktop layouts, data and business logic stay intact. */
@media screen and (max-width: 768px) {
  html { -webkit-text-size-adjust: 100%; scroll-padding-bottom: 90px; }
  html, body { height: auto !important; min-height: 100%; overflow-y: auto !important; }
  body { margin: 0; max-width: 100%; }
  *, *::before, *::after { box-sizing: border-box; }
  .page { height: auto !important; min-height: 100dvh; overflow: visible !important; }
  main { min-width: 0; max-width: 100%; overflow: visible !important; padding: 12px !important; }
  /* A blurred header otherwise becomes the containing block for fixed nav. */
  .page > header { height: auto !important; min-height: 58px; padding: 10px 12px !important; flex-wrap: wrap; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .page > header .brand { max-width: 100%; min-width: 0; }
  .page > header .brand-text { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
  .page > header > div:not(.brand) { width: auto; }
  .main-layout, .main-layout.oct-rail-collapsed, .av2-shell, .pc-layout, .sales-grid,
  .oct-case-grid, .dash-mid-grid, .dash-bottom-grid, .mkt {
    grid-template-columns: minmax(0, 1fr) !important; height: auto !important;
    min-height: 0; overflow: visible !important; gap: 14px; align-items: start; align-content: start;
  }
  .left-panel, .right-panel, .sales-main, .sales-filters, .results,
  .av2-content, .pc-layout > *, .main-layout > * {
    min-width: 0 !important; max-width: 100%; height: auto !important; overflow: visible !important;
  }
  .shell { width: 100%; max-width: 100%; padding: 12px 8px 24px !important; }
  .pad { padding: 18px 12px !important; }
  .oct-dashboard, .right-panel > .oct-dashboard { padding: 14px !important; min-width: 0; }
  h1, .oct-page-title { font-size: clamp(21px, 6vw, 28px) !important; overflow-wrap: anywhere; }
  .card-header, .oct-page-header, .oct-header-tools, .toolbar, .actions,
  .form-actions, .tm-toolbar, .overview-heading, .oct-batch-toolbar { flex-wrap: wrap; gap: 10px; }
  .card-header { padding: 12px !important; }
  .filter-card-body { max-height: none !important; }
  .filter-grid, .detail-grid, .av2-grid-form, .av2-page-grid, .av2-doc-grid,
  .oct-ir-meta, .oct-task-board, .oct-exec-tools, .pd-grid, .grid2,
  .report-workspace, #report-containers,
  main [style*="grid-template-columns"], .pad [style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea {
    max-width: 100%; min-width: 0; font-size: 16px !important;
  }
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select { min-height: 44px; }
  textarea { width: 100%; }
  button, .btn, .act, .tab, .oct-menu-item { min-height: 44px; touch-action: manipulation; }
  button, .btn { white-space: normal; }
  .oct-data-asof, .pc-banner, .flegal, .av2-user, .user-email { overflow-wrap: anywhere; }
  .oct-batch-search input { min-width: 0; width: 100%; }
  .oct-group-exec .oct-metrics-grid, .oct-metrics-grid, .kpi-grid,
  .sales-main .kpi-grid, .sales-today, .cards, .cards-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .oct-dj-card-body { grid-template-columns: minmax(0, 1fr) !important; }
  .oct-dj-track { grid-template-columns: minmax(0, 1fr) minmax(50px, 1fr) auto; }
  /* Keep full tables, with scrolling inside their panel rather than the page. */
  .table-wrapper, .table-scroll-area, .table-wrap, .table-container, .gridwrap,
  .av2-table-wrap, .oct-table-wrap, .tm-scroll, .mobile-scroll-table {
    max-width: 100%; min-width: 0; overflow-x: auto !important; -webkit-overflow-scrolling: touch;
  }
  .table-wrapper, .table-scroll-area { height: auto !important; max-height: 70dvh; }
  table.mobile-scroll-table { display: block; }
  .tm-scroll { max-height: 65dvh; }
  .tm-table tbody th { min-width: 95px; max-width: 110px; white-space: normal; font-size: 12px; }
  .tm-table .tm-cell { min-height: 44px; }
  .pc-frame { height: 80dvh; min-height: 420px; }
  /* The existing OCT toggle becomes a compact, labelled mobile menu. */
  .oct-rail-collapsed .filter-card .card-title { display: block !important; }
  .oct-rail-collapsed .filter-card .card-header { justify-content: space-between !important; padding: 12px !important; }
  .oct-rail-collapsed .oct-sidebar-body { display: none; }
  .oct-sidebar-body { max-height: 55dvh; overflow-y: auto; }
  .modal-content, .modal-box { position: relative !important; bottom: auto !important; left: auto !important; right: auto !important; width: 100% !important; max-width: 100% !important; max-height: 85dvh !important; overflow: auto; margin: auto !important; }
  .oct-modal, .modal, .oct-batch-draft { max-width: 100%; max-height: 85dvh; overflow-y: auto; }
  .pagination { flex-wrap: wrap; gap: 8px; }
  .tabs { max-width: 100%; overflow-x: auto; }
  .tabs .tab { flex-shrink: 0; }
  .pad > .grid:not(table) { grid-template-columns: minmax(0, 1fr); }
  img, video { max-width: 100%; }
  :focus-visible { outline: 2px solid #1687ac; outline-offset: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
}