/* =============================================================
   Mobile responsive system — Step 1 (box model / overflow / fluid)
   Site-wide: account shell, admin shell, public pages.
   Load via base.css after responsive-scale.css.
   ============================================================= */

:root {
  --mobile-pad-x: var(--spacing-md);
  --mobile-pad-y: var(--spacing-md);
  --mobile-content-max: var(--container-max);
  --mobile-bottom-clearance: calc(var(--spacing-xl) + env(safe-area-inset-bottom, 0px));
}

/* ---------- Overflow containment (prevent horizontal scroll / clip) ---------- */
html.ds-shell-root,
body.ds-body,
.ds-shell,
.ds-main,
.ds-topbar,
main,
.site-main {
  max-width: 100%;
}

@media (max-width: 768px) {
  html,
  body,
  html.ds-shell-root,
  body.ds-body,
  .ds-shell,
  .ds-main {
    overflow-x: clip;
  }

  img,
  video,
  iframe,
  embed,
  object {
    max-width: 100%;
    height: auto;
  }

  /* Interactive surfaces never wider than parent */
  .account-panel,
  .account-kpi,
  .account-kpi-grid,
  .account-card,
  .account-session-card,
  .account-hero-card,
  .account-shortcut,
  .account-verify-gate,
  .account-modal__dialog,
  .admin-panel,
  .admin-kpi,
  .admin-data-panel,
  .admin-spa-form-card,
  .admin-detail-card-surface,
  .ds-card,
  .card,
  .newsroom-card,
  .help-pillar,
  .help-topic-card,
  .coach-card,
  .service-card,
  .glass-form,
  input:not([type='checkbox']):not([type='radio']):not([type='hidden']),
  textarea,
  select,
  .cm-custom-select,
  .cm-select {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
  }

  /* Grids: replace rigid min track widths that blow past narrow viewports */
  .account-kpi-grid,
  .account-shortcuts,
  .account-cards-list,
  .account-split,
  .account-form-grid,
  .admin-form-grid,
  .admin-kpi-row,
  .grid-fluid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .account-kpi-grid--compact {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Public multi-column sections → single column */
  .grid-2,
  .grid-3,
  .features-grid,
  .coach-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* ---------- Fluid page containers ---------- */
@media (max-width: 768px) {
  body:not(.ds-body--admin):not(.ds-body--account) .container,
  body:not(.ds-body--admin):not(.ds-body--account) main > .container {
    width: 100%;
    max-width: var(--mobile-content-max);
    margin-inline: auto;
    padding-inline: max(var(--mobile-pad-x), env(safe-area-inset-left, 0px))
      max(var(--mobile-pad-x), env(safe-area-inset-right, 0px));
    box-sizing: border-box;
  }

  body.ds-body--account .account-content-shell,
  body.ds-body--admin .admin-workspace,
  body.admin-body.ds-body--admin .ds-main > .admin-workspace {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
    box-sizing: border-box;
  }

  /* One horizontal gutter source on mobile shells (avoid ds-main + shell double pad) */
  body.ds-body--account .ds-main,
  body.ds-body--admin .ds-main {
    padding-inline: 0;
    box-sizing: border-box;
  }

  /* Gouttières compte : shell (ds-main a padding-inline: 0 sur mobile) */
  body.ds-body--account .account-content-shell {
    padding-block: 0;
    padding-left: max(var(--mobile-pad-x), env(safe-area-inset-left, 0px));
    padding-right: max(var(--mobile-pad-x), env(safe-area-inset-right, 0px));
  }

  body.ds-body--admin .admin-workspace,
  body.admin-body.ds-body--admin .ds-main > .admin-workspace {
    padding-left: max(var(--mobile-pad-x), env(safe-area-inset-left, 0px));
    padding-right: max(var(--mobile-pad-x), env(safe-area-inset-right, 0px));
    /* Bottom clearance: ds-admin-layout sets .ds-main padding-bottom */
  }
}

/* ---------- Bottom navigation clearance ---------- */
@media (max-width: 768px) {
  body.ds-body--account .ds-main {
    padding-bottom: max(
      var(--mobile-bottom-clearance),
      var(--acct-bottom-nav-h, 3.65rem)
    );
  }

  body.ds-body--admin .ds-main {
    padding-bottom: max(
      var(--mobile-bottom-clearance),
      var(--adm-bottom-nav-h, 3.65rem)
    );
  }

  body.ds-body--account .account-content-shell,
  body.ds-body--account .account-workspace,
  body.ds-body--account .account-views {
    padding-bottom: 0.5rem;
  }
}

/* ---------- Touch-friendly primary actions (Step 3 preview; safe on mobile) ---------- */
@media (max-width: 768px) {
  body.ds-body--account .account-panel-head .btn--primary,
  body.ds-body--account .account-view-header > .btn,
  body.ds-body--account #btn-add-card,
  body.ds-body--admin .admin-view-header .admin-btn--primary,
  body.ds-body--admin .admin-panel-head .admin-btn--primary {
    width: 100%;
    max-width: 100%;
    justify-content: center;
  }

  body.ds-body--account .account-panel-head {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Select / custom dropdown panels stay inside viewport */
@media (max-width: 768px) {
  .cm-select__pop,
  .cm-custom-select__panel {
    max-width: min(100vw - 2 * var(--mobile-pad-x), 24rem);
    box-sizing: border-box;
  }
}

/* =============================================================
   Step 2 — Uniform margins + single-column reflow (admin / compte)
   ============================================================= */
@media (max-width: 768px) {
  /* Admin: grilles multi-colonnes → une colonne */
  body.ds-body--admin .admin-view-body--spa-split,
  body.ds-body--admin .admin-view-body--coach-split,
  body.ds-body--admin .admin-client-sheet__two-col,
  body.ds-body--admin .admin-form-grid,
  body.ds-body--admin .admin-field-row,
  body.ds-body--admin .admin-kpi-row,
  body.ds-body--admin .admin-client-sheet__kpis,
  body.ds-body--admin .admin-detail-actions,
  body.ds-body--admin .admin-table-toolbar {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.ds-body--admin .admin-view-body--spa-split,
  body.ds-body--admin .admin-view-body--coach-split {
    display: flex !important;
    flex-direction: column;
    gap: 0.75rem;
  }

  body.ds-body--admin .admin-spa-list-pane,
  body.ds-body--admin .admin-spa-detail-pane,
  body.ds-body--admin .admin-coaches-list-pane,
  body.ds-body--admin .admin-coaches-detail-pane,
  body.ds-body--admin .admin-data-panel,
  body.ds-body--admin .admin-panel {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  body.ds-body--admin .admin-panel--table .admin-table-scroll {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Compte: vues restantes (séances, rapports, profil, inbox…) */
  body.ds-body--account .account-split,
  body.ds-body--account .account-form-grid,
  body.ds-body--account .account-form-row,
  body.ds-body--account .account-profile-grid,
  body.ds-body--account .account-incident-form .form-row,
  body.ds-body--account .account-next-session-card,
  body.ds-body--account .account-session-card {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.ds-body--account .account-activity-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.65rem;
  }

  body.ds-body--account .account-activity-toolbar__actions {
    justify-content: stretch;
    width: 100%;
  }

  body.ds-body--account .account-activity-toolbar__actions .btn {
    flex: 1 1 auto;
    justify-content: center;
  }

  body.ds-body--account .inbox-pro-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto;
    min-height: 0;
  }

  body.ds-body--account .account-payment-history__table-wrap {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  body.ds-body--account .account-view-header,
  body.ds-body--account .account-panel,
  body.ds-body--account .account-hero-card {
    margin-inline: 0;
    width: 100%;
    max-width: 100%;
  }

  /* Public hero / sections */
  .hero__inner,
  .features-grid,
  .services-grid,
  .coach-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body:not(.ds-body--admin):not(.ds-body--account) .site-header .container.nav {
    padding-inline: max(var(--mobile-pad-x), env(safe-area-inset-left, 0px))
      max(var(--mobile-pad-x), env(safe-area-inset-right, 0px));
  }

  /* En-têtes descriptifs scrollent avec la page (pas sticky / clip) */
  body.ds-body--admin .admin-view-header,
  body.ds-body--admin .admin-panel-head,
  body.ds-body--account .account-view-header,
  body.ds-body--account .account-hero-card,
  body.ds-body--account .account-panel-head {
    position: relative !important;
    top: auto !important;
    height: auto;
    min-height: min-content;
    margin-top: 0;
  }

  /* Gouttière 20px universelle sur wrappers mobiles */
  body.ds-body--account .account-workspace,
  body.ds-body--account .account-views,
  body.ds-body--admin .admin-views,
  body:not(.ds-body--admin):not(.ds-body--account) .booking-page,
  body:not(.ds-body--admin):not(.ds-body--account) section > .container {
    padding-inline: max(var(--mobile-pad-x), env(safe-area-inset-left, 0px))
      max(var(--mobile-pad-x), env(safe-area-inset-right, 0px));
    box-sizing: border-box;
  }

  /* Espace sous la bottom nav */
  body:not(.ds-body--admin):not(.ds-body--account) main,
  body:not(.ds-body--admin):not(.ds-body--account) .site-main {
    padding-bottom: var(--mobile-bottom-clearance);
  }
}