/* Metallux v6.4 — affichage tablette et smartphone.
   Tablette (≤ 1100 px) : grilles resserrées, menus compacts.
   Téléphone (≤ 768 px) : barre d'onglets en bas, menu plein écran, une colonne partout, modales plein écran. */

/* L'en-tête a une hauteur variable : la zone de contenu prend le reste de l'écran */
.sections-wrapper { height: auto !important; flex: 1 1 auto; min-height: 0; }
.main-content { min-height: 0; }

/* ─── Tablette ─── */
@media (max-width: 1100px) {
  .sections-wrapper { padding: 18px !important; }
  .configurator-layout, .contacts-layout, .dashboard-details-grid { grid-template-columns: 1fr !important; }
  .config-sidebar { width: auto !important; }
  .app-section > [style*="grid-template-columns: 2fr 1fr"], .app-section [style*="grid-template-columns: 2.5fr 1fr"],
  .app-section [style*="grid-template-columns: 1fr 2fr"], .app-section [style*="grid-template-columns: 1.5fr 1fr"] { grid-template-columns: 1fr !important; }
  .table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  dialog.app-modal, dialog.doc-modal { max-width: 94vw !important; width: 94vw !important; }
  .menu-submenu { max-width: 92vw; }
}

/* ─── Téléphone ─── */
@media (max-width: 768px) {
  :root { --header-height: 56px; }
  html, body { overscroll-behavior-y: none; }
  input, select, textarea { font-size: 16px !important; }      /* évite le zoom automatique sur iOS */

  /* En-tête : logo, barre IA, alertes, profil ; le menu horizontal est remplacé par la barre du bas */
  .app-header { padding: 6px 12px !important; min-height: 56px; gap: 8px; }
  .app-header > .horizontal-menu { display: none !important; }
  .app-header .header-brand .brand-logo { width: 36px !important; height: 36px !important; }
  .app-header > div:not(.header-brand):not(.horizontal-menu) { order: 2; margin-left: auto; gap: 8px !important; flex: 1 1 auto; min-width: 0; flex-wrap: wrap; justify-content: flex-end; }
  .app-header .header-search { display: flex !important; order: 10; flex-basis: 100%; min-width: 0 !important; width: 100%; height: 34px; margin-top: 2px; }
  .app-header .header-profile { gap: 8px !important; }
  .app-header .profile-info { display: none !important; }
  .app-header #network-status-badge { display: none !important; }
  .dropdown-trigger.open .dropdown-menu { display: flex; }
  .dropdown-menu { right: 0; min-width: 200px; }
  #top-alerts-popover { width: min(300px, 86vw) !important; }

  /* Contenu : une seule colonne, titres plus petits, marges réduites, place pour la barre du bas */
  .sections-wrapper { padding: 14px 12px calc(84px + env(safe-area-inset-bottom)) !important; }
  .section-header, .section-header-actions { flex-direction: column; align-items: flex-start !important; gap: 10px; }
  .section-header h2, .section-header-actions h2 { font-size: 22px !important; }
  .section-header p, .section-header-actions p { font-size: 13px; }
  .section-header-actions > div, .section-header-actions .actions { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
  .app-section [style*="grid-template-columns"]:not(.calendar-grid):not(.calendar-days-header) { grid-template-columns: 1fr !important; }
  .metrics-grid, .charts-grid, .form-grid, .inv-totals-grid, .stats-grid { grid-template-columns: 1fr !important; }
  .calendar-grid { gap: 3px !important; } .calendar-day-cell { min-height: 54px; padding: 3px; font-size: 10px; }
  .card { padding: 14px !important; border-radius: 14px !important; }
  .pipeline-container { overflow-x: auto; }
  .preview-viewport { min-height: 240px; height: 260px !important; }
  .btn { padding: 10px 14px; font-size: 13px; }
  .btn-block, .section-header .btn { width: auto; }
  table { font-size: 12px; } th, td { padding: 8px 6px !important; white-space: nowrap; }
  .kanban-board { gap: 10px; } .kanban-column { min-width: 82vw; }
  h1 { font-size: 24px; } h3 { font-size: 15px; }

  /* Modales : plein écran avec marge, défilement interne */
  dialog.app-modal, dialog.doc-modal, dialog.card {
    width: 100vw !important; max-width: 100vw !important; max-height: 100dvh !important; height: auto;
    top: 0 !important; left: 0 !important; transform: none !important; border-radius: 0 !important; margin: 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
  dialog.app-modal[open] { transform: none !important; }
  .modal-body, .modal-body-layout { grid-template-columns: 1fr !important; }
  .modal-footer { flex-wrap: wrap; gap: 8px; } .modal-footer .btn { flex: 1 1 45%; }

  /* Barre d'onglets du bas */
  #mobile-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    display: flex; justify-content: space-around; align-items: stretch;
    height: calc(62px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    background: rgba(8, 9, 24, 0.92); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
    border-top: 1px solid var(--border-color);
  }
  #mobile-tabbar button {
    flex: 1; background: none; border: none; color: var(--text-secondary); font: inherit; font-size: 10px; font-weight: 600;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; padding: 6px 2px;
    -webkit-tap-highlight-color: transparent;
  }
  #mobile-tabbar button i, #mobile-tabbar button svg { width: 22px; height: 22px; font-size: 22px; }
  #mobile-tabbar button.active { color: #fff; }
  #mobile-tabbar button.active i, #mobile-tabbar button.active svg { color: var(--accent-color); filter: drop-shadow(0 0 8px rgba(227,0,15,.6)); }

  /* Menu plein écran */
  #mobile-menu { position: fixed; inset: 0; z-index: 950; background: rgba(5, 6, 14, 0.97); backdrop-filter: blur(24px); display: none; flex-direction: column; }
  #mobile-menu.open { display: flex; animation: mmIn .25s ease; }
  @keyframes mmIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
  #mobile-menu .mm-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border-color); }
  #mobile-menu .mm-head b { font-family: var(--font-title); font-size: 18px; letter-spacing: .1em; }
  #mobile-menu .mm-close { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border-color); background: rgba(255,255,255,.04); color: #fff; font-size: 22px; }
  #mobile-menu .mm-body { overflow-y: auto; padding: 10px 12px calc(20px + env(safe-area-inset-bottom)); }
  #mobile-menu .mm-group { font-size: 10px; letter-spacing: .25em; text-transform: uppercase; color: var(--text-muted); font-weight: 700; margin: 14px 8px 6px; }
  #mobile-menu .mm-item { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 12px; border-radius: 12px; border: 1px solid transparent; background: none; color: var(--text-primary); text-align: left; font: inherit; }
  #mobile-menu .mm-item:active, #mobile-menu .mm-item.active { background: rgba(227,0,15,.12); border-color: rgba(227,0,15,.35); }
  #mobile-menu .mm-item i { width: 34px; height: 34px; border-radius: 10px; background: rgba(48,51,141,.35); display: grid; place-items: center; font-size: 18px; color: #c7c9ff; flex-shrink: 0; }
  #mobile-menu .mm-item b { display: block; font-size: 14px; } #mobile-menu .mm-item small { color: var(--text-secondary); font-size: 11px; }
  #mobile-menu .mm-item.danger { color: #ff6b6b; } #mobile-menu .mm-item.danger i { background: rgba(227,0,15,.18); color: #ff6b6b; }
}
@media (min-width: 769px) { #mobile-tabbar, #mobile-menu { display: none !important; } }