/* SPRINT6636873_MOBILE_CSS — mobiele correctielaag, geladen ná alle andere stylesheets.
   Alleen binnen media queries; desktop blijft ongewijzigd. !important waar paginaspecifieke CSS later in de body komt. */

/* 1. Menu (drawer) — de JS zet body.sidebar-open; de v2-CSS verwachtte .av-app.is-nav-open en hield de zijbalk onzichtbaar. */
@media (max-width: 1100px) {
  body.sidebar-open .av-sidebar,
  body.sidebar-open .sidebar { visibility: visible !important; transform: translateX(0) !important; z-index: 80 !important; }
  body.sidebar-open .sidebar-overlay,
  body.sidebar-open .av-scrim { display: block !important; z-index: 79 !important; }
  body.sidebar-open .av-sidebar { box-shadow: 0 0 0 1px rgba(22, 27, 38, .08) !important; overflow-y: auto; -webkit-overflow-scrolling: touch; }
}

@media (max-width: 760px) {
  /* 2. Inhoud nooit breder dan het scherm: kinderen van de inhoudskolom mogen krimpen. */
  html body.app-body .app-content > *, html body.app-body .app-content > *, html body.app-body .app-main > main, html body.app-body .app-content main { min-width: 0 !important; max-width: 100% !important; }
  html body.app-body .app-content img, html body.app-body .app-content video, html body.app-body .app-content svg { max-width: 100%; }
  html body.app-body .app-content pre, html body.app-body .app-content code { white-space: pre-wrap; word-break: break-word; }
  html body.app-body .app-content h1, html body.app-body .app-content h2, html body.app-body .app-content h3 { overflow-wrap: anywhere; }

  /* Tabellen: zelf horizontaal scrollen in plaats van de pagina op te rekken. */
  html body.app-body .app-content .ga-table-wrap, html body.app-body .app-content .table-wrap, html body.app-body .app-content .av-table-wrap, html body.app-body .app-content .ava-table-wrap, html body.app-body .app-content .data-table-wrap, html body.app-body .app-content .table-responsive { max-width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  html body.app-body .app-content .ga-card, html body.app-body .app-content .ga-page { min-width: 0 !important; max-width: 100% !important; }

  /* 3. Instellingen (en pagina's met dezelfde opbouw): menu boven de inhoud, menu horizontaal scrollbaar. */
  html body.app-body .app-content .settings-layout { grid-auto-flow: row !important; grid-template-columns: minmax(0, 1fr) !important; gap: 16px !important; }
  html body.app-body .app-content .settings-nav { min-width: 0 !important; width: auto !important; position: static !important; display: flex !important; flex-direction: row !important; overflow-x: auto !important; max-width: 100% !important; gap: 6px !important; scrollbar-width: none; }
  html body.app-body .app-content .settings-nav::-webkit-scrollbar { display: none; }
  html body.app-body .app-content .settings-nav a { flex: 0 0 auto; white-space: nowrap; }
  html body.app-body .app-content .settings-content, html body.app-body .app-content .settings-card, html body.app-body .app-content .settings-stack, html body.app-body .app-content .account-settings { min-width: 0 !important; max-width: 100% !important; }
  html body.app-body .app-content .settings-layout input, html body.app-body .app-content .settings-layout select, html body.app-body .app-content .settings-layout textarea { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box; }
  html body.app-body .app-content .settings-layout label { min-width: 0; }

  /* 4. Google Analytics: filters onder elkaar, snelle periodes en tabbladen als scrollbare rij. */
  html body.app-body .app-content form.ga-filters { grid-template-columns: minmax(0, 1fr) !important; }
  html body.app-body .app-content form.ga-filters > * { min-width: 0 !important; width: 100% !important; max-width: 100% !important; }
  html body.app-body .app-content .ga-quick-periods { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; }
  html body.app-body .app-content .ga-quick-periods .ga-quick-period { flex: 1 1 64px !important; width: auto !important; min-width: 0 !important; }
  html body.app-body .app-content .ga-tabs, html body.app-body .app-content nav.uds-tabs { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; max-width: 100% !important; scrollbar-width: none; }
  html body.app-body .app-content .ga-tabs::-webkit-scrollbar { display: none; }
  html body.app-body .app-content .ga-actions { flex-wrap: wrap !important; }
  html body.app-body .app-content .ga-actions > * { max-width: 100%; }

  /* 5. Goedkeuringscentrum: één kolom. */
  html body.app-body .app-content .approval-center, html body.app-body .app-content .av-route-approval-center section.content { grid-template-columns: minmax(0, 1fr) !important; min-width: 0 !important; max-width: 100% !important; }
  html body.app-body .app-content .approval-center * { min-width: 0; }
  html body.app-body .app-content .approval-center [class*="grid"], html body.app-body .app-content .approval-center [class*="layout"] { grid-template-columns: minmax(0, 1fr) !important; }

  /* 6. AI Marketing Director. */
  html body.app-body .app-content [class^="md160"], html body.app-body .app-content [class*=" md160"] { min-width: 0 !important; max-width: 100% !important; }
  html body.app-body .app-content .md160n-hero-top, html body.app-body .app-content .md160n-actions { flex-wrap: wrap !important; }
  html body.app-body .app-content [class*="md160"][class*="grid"], html body.app-body .app-content [class*="md160"][class*="layout"] { grid-template-columns: minmax(0, 1fr) !important; }

  /* 7. Kopregels van secties en knoppenrijen mogen afbreken. */
  html body.app-body .app-content .ava-section__head, html body.app-body .app-content .av-section__head, html body.app-body .app-content .av-card__head, html body.app-body .app-content .page-actions, html body.app-body .app-content .av-page-head__actions, html body.app-body .app-content .ava3-head__actions { flex-wrap: wrap !important; }
  html body.app-body .app-content .ava-section__head .av-btn, html body.app-body .app-content .av869-item__ctrl .av-btn { white-space: normal !important; max-width: 100%; }
  html body.app-body .app-content .av869-item__ctrl { flex-wrap: wrap !important; }
  html body.app-body .app-content .advisionr-sortable-table { display: block; max-width: 100%; overflow-x: auto; }

  /* 8. Kleine statistiektegels: twee per rij in plaats van drie of vier. */
  html body.app-body .app-content .sg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  html body.app-body .app-content .sg-form, html body.app-body .app-content .sg-row { grid-template-columns: minmax(0, 1fr) !important; }
  html body.app-body .app-content .guardrail-stats, html body.app-body .app-content .sg-stats, html body.app-body .app-content .spend-guardrail-stats, html body.app-body .app-content .av-grid-3, html body.app-body .app-content .av-grid-4, html body.app-body .app-content .av-grid-5, html body.app-body .app-content .stats-grid, html body.app-body .app-content .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  /* 9. Cookiemelding: de knop "Instellen" was wit op wit. */
  html body .cookie-consent-banner .btn-secondary { background: #FFFFFF !important; color: #161B26 !important; border: 1px solid #D7DCD4 !important; }
  html body .cookie-consent-actions { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; }
  html body .cookie-consent-actions .btn-primary { grid-column: 1 / -1; }
  html body .cookie-consent-actions .btn { white-space: normal !important; }

  /* 10. Formuliervelden nooit breder dan hun vak. */
  html body.app-body .app-content input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), html body.app-body .app-content select, html body.app-body .app-content textarea { max-width: 100%; box-sizing: border-box; }

  /* 11. Tabellen houden hun eigen breedte (scrollen in hun vak) in plaats van kolomkoppen letter voor letter te breken. */
  html body.app-body .app-content .ga-table-wrap > table, html body.app-body .app-content .table-wrap > table, html body.app-body .app-content .ga-table { width: max-content !important; min-width: 100% !important; }
  html body.app-body .app-content .ga-table th, html body.app-body .app-content .table-wrap th { white-space: nowrap !important; }
  html body.app-body .app-content p, html body.app-body .app-content li, html body.app-body .app-content dd { overflow-wrap: anywhere; }
  html body.app-body .app-content [class*="md160"][class*="toolbar"] { flex-wrap: wrap !important; }
  html body.app-body .app-content [class^="md160"] div[style*="grid"], html body.app-body .app-content [class*="md160"] > div { min-width: 0; }
  html body.app-body .app-content .md160r-head { flex-wrap: wrap !important; }
  html body.app-body .app-content .md160r-create-grid, html body.app-body .app-content .md160r-create-grid > div { grid-template-columns: minmax(0, 1fr) !important; }
  html body.app-body .app-content .approval-center div, html body.app-body .app-content .approval-center span { overflow-wrap: anywhere; }
}