/* mob-menu-wrap: hidden desktop, visible mobile */
.mob-menu-wrap { display: none; }
@media (max-width: 768px) {
  .mob-menu-wrap { display: block; }
}

/* ═══════════════════════════════════════════
   EcoTole — Responsive mobile
   Breakpoint : ≤ 768px
═══════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Keep nav visible, make it scrollable horizontally */
  #appHeader { padding: 0 12px; flex-wrap: nowrap; }
  #appHeader nav {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    gap: 2px;
    scrollbar-width: none;
  }
  #appHeader nav::-webkit-scrollbar { display: none; }
  #appHeader nav a {
    flex-shrink: 0;
    font-size: 12px;
    padding: 6px 10px;
    white-space: nowrap;
  }
  .logo-sub { display: none; }
  .logo-main { font-size: 14px; flex-shrink: 0; }
  .logo-main span[style*="13px"] { display: none; }

  /* ── Metrics ── */
  /* metricsBar is normally position:fixed; on mobile make it static so it
     flows naturally below the fixed header, removing any overlap risk. */
  #appHeader { position: fixed !important; }
  #metricsBar {
    position: static !important;
    margin-top: var(--header-h);
    z-index: auto !important;
  }
  body { padding-top: 0 !important; }
  #dashContent { padding-top: 0 !important; }

  .metrics {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    padding: 0 !important;
  }
  #metricsBar { padding: 6px 10px !important; }
  .mc { padding: 5px 8px !important; border-radius: 8px !important; }
  .mv { font-size: 13px !important; line-height:1.1 !important; }
  .ml { font-size: 8px !important; margin-bottom:1px !important; }
  .ms { font-size: 8px !important; margin-top:0 !important; }
  #statut1BarWrap { margin:3px 0 2px !important; }
  #statut1BarWrap > div:first-child { font-size:8px !important; margin-bottom:2px !important; }
  #statut1BarWrap > div:last-child { height:6px !important; }

  /* ── Dashboard content ── */
  #dashContent { padding: 0 10px 40px !important; padding-top: 12px !important; }
  .table-block { margin-top: 0 !important; }
  #accueilPage { padding-left: 12px !important; padding-right: 12px !important; }
  #page { grid-template-columns: 1fr !important; padding: calc(var(--header-h) + 14px) 12px 40px !important; }
  .side-nav { position: static !important; }

  /* ── Toolbar ── */
  .toolbar {
    height: auto !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    padding: 10px 0 6px !important;
  }
  .toolbar-right { width: 100%; flex-wrap: wrap; gap: 6px; }
  .search-box { flex: 1; min-width: 0; }
  .search-box input { width: 100% !important; }
  .table-title-main { font-size: 13px !important; }

  /* ── TABLE → toutes les colonnes visibles, scroll horizontal ── */
  .table-outer { overflow: hidden; }
  .table-scroll {
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100vw;
  }
  .tbody-wrap {
    overflow-y: auto !important;
    overflow-x: auto !important;
    height: calc(8 * 46px) !important;
    max-height: calc(8 * 46px) !important;
    -webkit-overflow-scrolling: touch;
  }
  .tbody-wrap::-webkit-scrollbar:horizontal { height: 0; }
  .thead-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .thead-wrap::-webkit-scrollbar { display: none; height: 0; }

  table.main th, table.main td {
    padding: 0 8px !important; font-size: 12px !important;
    overflow: hidden !important; text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .cb-cell { width: 32px !important; min-width: 32px !important; }

  /* table-layout:fixed garantit l'alignement parfait thead/tbody.
     Les largeurs de colonnes définies dans COL_DEFS (via <col>) sont conservées. */
  #theadTable1, #tbodyTable1, #theadTable2, #tbodyTable2 {
    table-layout: fixed !important;
    width: max-content !important;
  }

  /* ── Action bar ── */
  .action-bar {
    width: calc(100% - 20px) !important;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 12px !important;
    bottom: 16px !important;
  }
  .abtn span { display: none; }

  /* ── Modals full screen ── */
  .contact-box {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 95vh !important;
    border-radius: 18px 18px 0 0 !important;
    margin: auto 0 0 !important;
  }
  .contact-modal {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .contact-body {
    grid-template-columns: 1fr !important;
  }
  .contact-col:first-child { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,.07); }
  .contact-footer {
    flex-direction: column !important;
    gap: 10px;
  }
  .contact-dest { flex-wrap: wrap; gap: 6px; }

  /* ── Fiche modal ── */
  .fiche-modal .fiche-box {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 95vh !important;
    border-radius: 18px 18px 0 0 !important;
    margin: auto 0 0 !important;
  }
  .fiche-modal { align-items: flex-end !important; padding: 0 !important; }
  .fiche-cols { grid-template-columns: 1fr !important; }

  /* ── Calendar ── */
  #calendarPop { width: 92vw !important; left: 4vw !important; }

  /* ── Overview accueil ── */
  .overview-grid { grid-template-columns: 1fr 1fr !important; }
  .shortcuts { grid-template-columns: 1fr 1fr !important; }
  .bottom-grid { grid-template-columns: 1fr !important; }
  .hero { flex-direction: column !important; gap: 14px; }
  .hero-nav { flex-direction: row; flex-wrap: wrap; }

  /* ── Paramètres ── */
  #page { gap: 14px !important; }
  .s-row { flex-direction: column; align-items: flex-start !important; gap: 10px; }
  .s-input, .s-select { width: 100% !important; }

  /* ── Header défilant sur mobile (Clients uniquement) : libère de l'espace pour la liste ── */
  #clientsBodyPage #appHeader {
    position: static !important;
    box-shadow: none !important;
  }
  #clientsPage { padding-top: 14px !important; }
  #clientsBar { position: static !important; top: auto !important; }

  /* ── Clients ── */
  .client-grid { grid-template-columns: 1fr !important; }
  .ctabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Tableau Clients : scroll horizontal sur mobile */
  .client-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .client-table-wrap table {
    width: max-content !important;
    min-width: 100%;
  }
  .client-table-wrap thead th,
  .client-table-wrap tbody td {
    font-size: 12px !important;
    padding: 10px 12px !important;
  }
  .client-table-wrap th:nth-child(2), .client-table-wrap td:nth-child(2) { min-width: 150px; } /* Nom & Prénom */
  .client-table-wrap th:nth-child(3), .client-table-wrap td:nth-child(3) { min-width: 110px; } /* Localisation */
  .client-table-wrap th:nth-child(4), .client-table-wrap td:nth-child(4) { min-width: 90px; }  /* Ville */
  .client-table-wrap th:nth-child(5), .client-table-wrap td:nth-child(5) { min-width: 110px; } /* Téléphone */
  .client-table-wrap th:nth-child(6), .client-table-wrap td:nth-child(6) { min-width: 150px; } /* Adresse mail */
  .client-table-wrap th:nth-child(7), .client-table-wrap td:nth-child(7) { min-width: 100px; } /* Fichiers */
  .client-table-wrap th:nth-child(8), .client-table-wrap td:nth-child(8) { min-width: 100px; } /* Devis */
  .client-table-wrap th:nth-child(9), .client-table-wrap td:nth-child(9) { min-width: 150px; } /* Actions */

  /* ── Coupe table ── */
  .table-scroll.coupe { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }

  /* ── Confirm modals ── */
  .confirm-box { width: 94vw !important; margin: 0 3vw; }
}

@media (max-width: 480px) {
  .overview-grid { grid-template-columns: 1fr !important; }
  .shortcuts { grid-template-columns: 1fr !important; }
  .metrics { grid-template-columns: 1fr 1fr !important; }
  .mv { font-size: 16px !important; }
  .hero-logo, .logo-hero { font-size: 22px !important; }
}

@media (max-width: 768px) {
  .prospect-list-btn { display: flex !important; }
  #prospectDrawer { width: 88vw; right: -90vw; }
}