/* ═══════════════════════════════════════════════════════════════════════════
   admin-mobile-guard-v11.css
   Filet de sécurité global anti scroll-x sur l'admin SPA en mobile (≤1023px).
   Charge APRÈS toutes les feuilles admin-* (sauf admin-email-v10.css qui reste
   scope-locked). Ne touche PAS au tab Email (.email-*).

   Stratégie :
   - Layer 1 : forcer html/body à respecter le viewport, capper les enfants
     d'admin-content, wrapper visuellement les <table> dans un scroll local,
     normaliser images/medias/code/pre.
   - Layer 2 : surcharger les rares min-width / grid fixes restants découverts
     dans l'audit (ne casse pas l'UX, conserve le tap target ≥44px et
     le 16px input min font).

   Branding : rouge Suisse #DC2626. Aucune modification de couleurs ici.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1023px) {

  /* ── 1. Viewport hard-cap ────────────────────────────────────────────── */
  html, body {
    max-width: 100vw;
    overflow-x: hidden;
  }

  /* ── 2. Cap tous les conteneurs admin (hors email scope-locké) ───────── */
  .admin-shell,
  .admin-shell-content,
  .admin-content-card,
  .ec-clients-shell,
  .eclic-shell,
  .act-shell,
  .mon-wrap,
  .tel-wrap,
  .tlm-wrap,
  .aov-wrap,
  .aud-wrap,
  .arl-wrap,
  .adg-wrap,
  .anl-wrap,
  .ast-wrap {
    max-width: 100%;
    min-width: 0;
    overflow-x: clip;
  }

  /* Children direct: empêche les flex/grid de propager une largeur intrinsèque */
  .admin-shell-content > *,
  .admin-content-card > *,
  .ec-clients-shell > *,
  .eclic-shell > *,
  .act-shell > *,
  .mon-wrap > *,
  .tel-wrap > *,
  .tlm-wrap > *,
  .aov-wrap > *,
  .aud-wrap > * {
    max-width: 100%;
    min-width: 0;
  }

  /* ── 3. Tables : auto-scroll horizontal préservant l'accessibilité ──── */
  /* On NE touche pas aux tables dans .email-* ni .compare-table-wrap (landing). */
  .admin-shell table:not(.email-app table),
  .admin-content-card table,
  .ec-clients-shell table,
  .eclic-shell table,
  .act-shell table,
  .mon-wrap table,
  .tel-wrap table,
  .tlm-wrap table,
  .aov-wrap table,
  .aud-wrap table {
    max-width: 100%;
  }

  /* Si le wrapper parent n'a pas overflow auto, on transforme la table elle-même
     en bloc scrollable (band-aid). Les vrais wrappers (.mon-table-wrap,
     .ec-d-table-wrap, .act-table-wrap, .table-wrap) gardent leur comportement
     natif (display: table). */
  .admin-shell table:not(.mon-table-wrap table):not(.ec-d-table-wrap table):not(.act-table-wrap table):not(.table-wrap table):not(.eclic-table-wrap table):not(.ec-clients-table-wrap table):not(.email-app table):not(.compare-table-wrap table):not(.tlm-table-wrap table):not(.overflow-x-auto table) {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Wrappers "table-wrap" génériques inline-rendered (app.js) : forcer overflow */
  .admin-shell .table-wrap,
  .admin-content-card .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  /* ── 4. Drawers : full width sur mobile ──────────────────────────────── */
  .ec-drawer,
  .eclic-drawer,
  .act-detail-drawer,
  .arl-drawer {
    width: 100% !important;
    max-width: 100vw !important;
    border-left: 0 !important;
  }

  /* ── 5. Cap des min-width connus de l'audit ──────────────────────────── */
  /* Activations : table desktop a min-width: 920px ; sur mobile la vue
     bascule en cards (.act-cards) — la table est masquée mais on neutralise
     au cas où le wrapper resterait visible. */
  .act-table { min-width: 0 !important; }

  /* Monitoring timeline : track 720px-wide. Il vit dans un wrapper
     overflow-x:auto, mais on assure que le parent (.mon-card) ne pousse
     pas la largeur de la page. */
  .mon-timeline-wrap,
  .mon-card,
  .mon-grid-2,
  .mon-grid-50 {
    max-width: 100%;
    min-width: 0;
  }

  /* Charts containers : SVG full-width responsive */
  .mon-chart svg,
  .tlm-chart svg,
  .act-timeline svg,
  .aov-chart svg {
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  /* Pie/donut wrappers : empêche débordement à cause flex children */
  .mon-pie-wrap,
  .mon-pie-legend,
  .tlm-donut-wrap {
    flex-wrap: wrap;
    min-width: 0;
  }
  .mon-pie-legend { min-width: 0; }

  /* Toolbar grids : forcer 1fr sur mobile (filtres / recherche / tris) */
  .act-toolbar { grid-template-columns: 1fr !important; }
  .ec-clients-toolbar { grid-template-columns: 1fr !important; }
  .eclic-toolbar { flex-wrap: wrap; }

  /* ── 6. Médias responsifs ────────────────────────────────────────────── */
  .admin-shell img,
  .admin-shell svg:not(.tlm-donut-svg):not(.act-timeline-svg),
  .admin-shell canvas,
  .admin-shell video,
  .admin-shell iframe {
    max-width: 100%;
    height: auto;
  }

  /* ── 7. Code / pre / mono : break long hashes/HWID/SHA256 ────────────── */
  .admin-shell pre,
  .admin-shell code,
  .admin-content-card pre,
  .admin-content-card code,
  .ec-clients-shell .mono,
  .eclic-shell .mono,
  .act-shell .mono,
  .mon-wrap .mono,
  .aov-wrap .mono,
  .aud-wrap .mono {
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  /* ── 8. Inputs : 16px min font (no iOS zoom), ne PAS shrink les btn ──── */
  .admin-shell input[type="text"],
  .admin-shell input[type="email"],
  .admin-shell input[type="search"],
  .admin-shell input[type="tel"],
  .admin-shell input[type="url"],
  .admin-shell input[type="number"],
  .admin-shell input[type="password"],
  .admin-shell select,
  .admin-shell textarea {
    font-size: 16px;
    max-width: 100%;
  }

  /* ── 9. Inline styles app.js : neutraliser les largeurs fixes ───────── */
  /* Cible les `<div style="width:140px">` (barre progression) et autres
     widgets inline qui ne savent pas se rétrécir. */
  .mon-table [style*="width:140px"],
  .mon-table [style*="width: 140px"] {
    width: 100% !important;
    max-width: 140px;
  }

  /* ── 10. Anti-overflow widgets divers ────────────────────────────────── */
  .ec-cell-identity,
  .ec-cell-identity__email,
  .ec-cell-identity__name {
    max-width: 100%;
  }

  /* Drawer body : empêche grids forcés */
  .eclic-kv,
  .ec-drawer__stats {
    grid-template-columns: 1fr !important;
  }
}

/* ── Très petit (≤420px) : ajustements supplémentaires ──────────────────── */
@media (max-width: 420px) {
  .admin-content-card { padding: 12px !important; }
  .mon-pagehead h1,
  .tlm-pagehead h1,
  .aov-pagehead h1 { font-size: 1.3rem !important; }
  .mon-stat-value,
  .tlm-kpi-value,
  .aov-stat__value { font-size: 1.6rem !important; }
}


/* ═════════════════════════════════════════════════════════════════════════
   SAFETY NET — empêche tout scroll-X au niveau page (admin + dashboard)
   Pas de scroll horizontal sur la page entière. Les containers internes
   (tables larges, code blocks) peuvent toujours scroll avec overflow-x:auto
   localement.
   ═════════════════════════════════════════════════════════════════════════ */
html,
body {
    overflow-x: hidden !important;
    max-width: 100vw;
}
#app,
#app > section,
.admin-shell,
.ec-dashboard,
.ec-d-shell,
.ec-d-main {
    max-width: 100%;
    overflow-x: clip;
}
/* Tables : forcer wrap responsive systématiquement */
.ec-clients-table-wrap,
.eclic-table-wrap,
.act-table-wrap,
.arl-table-wrap,
.tlm-table-wrap,
.admin-table-wrap,
.ec-d-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ═══════════════════════════════════════════════════════════════════════════
   scroll-x guard 2026-05-03 (extended layer for dashboard parity)
   Original v11 guard ciblait l'admin shell. On étend à #app + dashboard
   shell pour neutraliser les overflow latents partagés (drawer, modals,
   fixed-width elements générés inline par app.js).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Layer page racine — déjà appliqué via html/body !important plus haut.
   On ajoute le wrap layout grid pour le dashboard SPA. */
.ec-d-shell,
.ec-d-layout,
.ec-d-main,
.ec-d-content,
#dash-content {
    max-width: 100%;
    min-width: 0;
    overflow-x: clip;
}

/* Toolbar / pagination dashboard : flex children libres */
.ec-d-toolbar,
.ec-d-toolbar > *,
.ec-d-pagination > * { min-width: 0; }

/* Tables dashboard rendered inline par app.js sans wrapper natif :
   safety-net analogue à celle des admin tables. */
.ec-d-shell table:not(.ec-d-table-wrap table),
.ec-d-main table:not(.ec-d-table-wrap table),
#dash-content table:not(.ec-d-table-wrap table) {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

/* Cells avec inline `style="white-space:nowrap"` (Expire le, etc.) :
   sur écrans très étroits on autorise le wrap. */
@media (max-width: 480px) {
    .ec-d-table td[style*="nowrap"] {
        white-space: normal !important;
    }
}

/* Code/pre/mono : break long hashes/keys en mobile dashboard. */
@media (max-width: 1023px) {
    .ec-d-shell pre,
    .ec-d-shell code,
    .ec-d-main pre,
    .ec-d-main code,
    #dash-content pre,
    #dash-content code {
        white-space: pre-wrap;
        word-break: break-word;
        overflow-wrap: anywhere;
    }
}

/* Inline width=140px markers (progress bars in app.js inline styles) */
@media (max-width: 1023px) {
    .ec-d-shell [style*="width:140px"],
    .ec-d-shell [style*="width: 140px"],
    .ec-d-shell [style*="min-width:140px"],
    .ec-d-shell [style*="min-width: 140px"] {
        max-width: 100%;
    }
}

/* Layout admin tabs container : si la nav bar tabs est rendue inline */
.admin-tabs,
.admin-tabnav,
.ec-tabs {
    overflow-x: auto;
    scrollbar-width: thin;
    max-width: 100%;
}

/* ── 11. Dashboard mobile sticky tabs : déjà overflow-x:auto natif ──── */
.ec-d-mobile-tabs {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}