/*
 * mobile.css — Responsive JDB-Galaxy
 * Fichier purement additif. Ne modifie rien sur desktop (> 900px).
 * Toute la logique mobile est ici, aucun autre fichier n'est touché.
 */

/* ════════════════════════════════════════════════════
   BREAKPOINT INTERMÉDIAIRE — 900px
   Sidebar plus fine, header compact
════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* Sidebar un peu plus fine */
  .app-tabs {
    width: 155px !important;
    min-width: 155px !important;
    max-width: 155px !important;
    padding: 10px 6px !important;
  }
  .app-tab { font-size: 12px !important; padding: 9px 10px !important; }

  /* Header compact */
  .app-header { padding: 12px 16px; }
  .app-title  { font-size: 16px; }
  .app-logo   { height: 32px !important; }

  /* Masquer la recherche et le bouton listes dès 900px */
  .header-controls .search-box,
  #manageListsBtn { display: none !important; }
}

/* ════════════════════════════════════════════════════
   BREAKPOINT TABLETTE / MOBILE — 768px
════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ─── Header ─── */
  .app-header { padding: 10px 14px; }
  .app-title   { font-size: 15px; }
  .app-logo    { height: 28px !important; }

  /* Cacher la recherche globale et le bouton listes sur mobile */
  .header-controls .search-box,
  #manageListsBtn { display: none !important; }

  .header-content { flex-wrap: wrap; gap: 6px; }
  .header-controls { gap: 6px; }

  /* ─── Sidebar : masquée sur mobile (remplacée par barre bas) ─── */
  .app-tabs { display: none !important; }
  .app-body  { flex-direction: column !important; }

  /* ─── Contenu principal — padding bas pour barre nav ─── */
  .app-main { padding: 10px 10px 72px 10px !important; overflow-y: auto !important; }

  /* ─── Footer branding masqué sur mobile ─── */
  .app-footer { display: none !important; }

  /* ─── FAB disquette : au-dessus de la barre nav ─── */
  .data-management { bottom: 72px !important; }

  /* ═══════════════════════════════════════════
     BARRE NAVIGATION BAS (app-style)
  ═══════════════════════════════════════════ */
  .app-bottom-nav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 62px;
    background: rgba(255,255,255,0.97);
    border-top: 1px solid #e1e8ed;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    z-index: 200;
    padding: 0 4px;
  }
  .app-bottom-nav::-webkit-scrollbar { display: none; }

  .app-bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 58px;
    padding: 6px 8px 4px;
    border: none;
    background: transparent;
    color: #95a5a6;
    cursor: pointer;
    transition: color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    position: relative;
  }
  .app-bottom-nav-item.active { color: #3498db; }
  .app-bottom-nav-item:active { opacity: 0.7; }

  .app-bottom-nav-item .bn-icon {
    font-size: 20px;
    line-height: 1;
    display: block;
  }
  .app-bottom-nav-item .bn-label {
    font-size: 9.5px;
    font-weight: 600;
    margin-top: 2px;
    white-space: nowrap;
    letter-spacing: 0.01em;
  }

  /* Badge stock dans la barre bas */
  .app-bottom-nav-item .bn-badge {
    position: absolute;
    top: 4px;
    right: 8px;
    background: #e74c3c;
    color: white;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    font-size: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .app-bottom-nav-item .bn-badge[data-count="0"] { display: none; }
  .module-topbar { padding: 8px 12px !important; margin: 6px 0 10px !important; }
  .module-title  { font-size: 15px !important; }

  /* ─── Formulaires ─── */
  .form-grid { grid-template-columns: 1fr !important; }
  .form-actions { flex-wrap: wrap; gap: 8px; }
  .form-actions .btn { flex: 1; min-width: 120px; }

  /* ─── Modales ─── */
  .modal-content {
    width: 96% !important;
    max-width: 100% !important;
    max-height: 92vh !important;
    overflow-y: auto !important;
    margin: 4vh auto !important;
  }
  .pdv2-modal,
  .dmv2-modal    { width: 96% !important; max-width: 100% !important; }
  .pdv2-modal-overlay,
  .dmv2-modal-overlay { align-items: flex-start !important; padding-top: 4vh; }

  /* ─── Bouton hamburger sidebar (injecté par mobile.js) ─── */
  .jdb-sidebar-toggle {
    display: flex !important;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 9px 14px;
    background: #1e293b;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 8px;
  }

  /* ─── MODULE PROJETS (pdv2) ─── */
  .pdv2-wrap { flex-direction: column !important; }

  .pdv2-sidebar {
    width: 100% !important;
    min-width: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    border-right: none !important;
    border-bottom: none !important;
    padding: 0 10px !important;
    transition: max-height .3s ease, padding .3s ease;
  }
  .pdv2-sidebar.mob-open {
    max-height: 600px !important;
    padding: 14px 10px !important;
    border-bottom: 1px solid #e8edf2 !important;
  }

  .pdv2-main { max-height: none !important; }
  .pdv2-grid { grid-template-columns: 1fr !important; }
  .pdv2-topbar { flex-direction: column; align-items: stretch; }
  .pdv2-add    { justify-content: center; }

  /* ─── MODULE DOCUMENTATION (dmv2) ─── */
  .wiki-container,
  .dmv2-wrap { flex-direction: column !important; }

  /* Ancienne sidebar wiki */
  .wiki-sidebar {
    width: 100% !important;
    min-width: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    border-right: none !important;
    padding: 0 10px !important;
    transition: max-height .3s ease, padding .3s ease;
  }
  .wiki-sidebar.mob-open {
    max-height: 600px !important;
    padding: 14px 10px !important;
    border-bottom: 1px solid #e8edf2 !important;
  }
  .wiki-main { max-height: none !important; }

  /* Nouvelle sidebar dmv2 */
  .dmv2-sidebar {
    width: 100% !important;
    min-width: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    border-right: none !important;
    padding: 0 10px !important;
    transition: max-height .3s ease, padding .3s ease;
  }
  .dmv2-sidebar.mob-open {
    max-height: 600px !important;
    padding: 14px 10px !important;
    border-bottom: 1px solid #e8edf2 !important;
  }
  .dmv2-main { max-height: none !important; }
  .dmv2-grid { grid-template-columns: 1fr !important; }
  .dmv2-topbar { flex-direction: column; align-items: stretch; }
  .dmv2-new-btn { justify-content: center; }
  .dmv2-article-head { flex-direction: column; }
  .dmv2-article-actions { flex-wrap: wrap; gap: 6px; }
  .dmv2-article-nav { flex-direction: column; align-items: stretch; gap: 8px; }
  .dmv2-nav-btn { max-width: 100%; }
  .dmv2-io-menu { bottom: auto; top: calc(100% + 6px); }

  /* ─── MODULE LIENS (lm3) ─── */
  .links-container {
    grid-template-columns: 1fr !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .links-sidebar {
    width: 100% !important;
    max-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    border-right: none !important;
    transition: max-height .3s ease, padding .3s ease;
  }
  .links-sidebar.mob-open {
    max-height: 600px !important;
    padding: 14px !important;
    border-bottom: 1px solid #e8edf2 !important;
  }
  .links-main { width: 100% !important; }
  .lm3-grid   { grid-template-columns: 1fr !important; }
  .links-header { flex-wrap: wrap; gap: 8px; }
  .links-toolbar { flex-wrap: wrap; gap: 6px; width: 100%; }
  .search-box { width: 100%; }
  .search-box input { width: 100%; }

  /* ─── MODULE FICHES TECHNIQUES ─── */
  .fiches-container,
  .fm2-layout { flex-direction: column !important; }
  .materials-library,
  .fm2-sidebar {
    width: 100% !important;
    max-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    border-right: none !important;
    transition: max-height .3s ease, padding .3s ease;
  }
  .materials-library.mob-open,
  .fm2-sidebar.mob-open {
    max-height: 500px !important;
    padding: 12px !important;
    border-bottom: 1px solid #e8edf2 !important;
    overflow-y: auto !important;
  }

  /* ─── MODULE STOCKS — vue cartes sur mobile (remplace tableau scrollable) ─── */
  .stocks-header  { flex-wrap: wrap; gap: 8px; }
  .stocks-actions { flex-wrap: wrap; }

  #stocks .stocks-table-container { padding: 12px !important; }
  #stocks .stocks-container       { overflow-x: visible !important; }
  #stocks .stocks-table           { min-width: 0 !important; box-shadow: none !important; background: transparent !important; }

  /* Masquer l'en-tête du tableau */
  #stocks .stocks-table .table-row.header { display: none !important; }

  /* Chaque ligne → carte 2 colonnes */
  #stocks .stocks-table .table-row {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto auto auto !important;
    padding: 12px 14px !important;
    margin-bottom: 8px !important;
    border-radius: 10px !important;
    border: 1px solid #e1e8ed !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.07) !important;
    background: white !important;
    gap: 4px 8px !important;
  }
  /* Placement des colonnes dans la grille */
  #stocks .col-name     { grid-column: 1; grid-row: 1; font-size: 14px; }
  #stocks .col-status   { grid-column: 2; grid-row: 1; align-self: start; }
  #stocks .col-category { grid-column: 1; grid-row: 2; }
  #stocks .col-stock    { grid-column: 2; grid-row: 2; text-align: right; font-weight: 700; font-size: 15px; align-self: center; }
  #stocks .col-actions  { grid-column: 1 / -1; grid-row: 3; display: flex !important; gap: 6px !important; margin-top: 6px !important; }

  /* Colonnes secondaires masquées */
  #stocks .col-min,
  #stocks .col-last,
  #stocks .col-price { display: none !important; }

  /* Boutons Entrée / Sortie — larges avec label texte */
  #stocks .col-actions .btn:nth-child(1),
  #stocks .col-actions .btn:nth-child(2) {
    flex: 1 !important;
    min-height: 44px !important;
    font-size: 15px !important;
  }
  #stocks .col-actions .btn:nth-child(1)::after { content: " Entrée"; }
  #stocks .col-actions .btn:nth-child(2)::after { content: " Sortie"; }

  /* Boutons secondaires — icônes carrées tactiles */
  #stocks .col-actions .btn:nth-child(3),
  #stocks .col-actions .btn:nth-child(4),
  #stocks .col-actions .btn:nth-child(5) {
    flex: 0 0 44px !important;
    min-height: 44px !important;
    padding: 8px !important;
    font-size: 16px !important;
  }

  /* ─── MODULE RDV / AGENDA ─── */
  .rdv-container,
  .rdv-layout { flex-direction: column !important; }
  .rdv-calendar { width: 100% !important; overflow-x: auto; }
  /* En-tête responsive (filtre + bouton) */
  #rdv .section-header { flex-wrap: wrap !important; gap: 8px !important; }
  #rdv .section-header > div { flex-wrap: wrap; gap: 6px; width: 100%; }
  #rdv #rdvAddBtn { flex: 1; min-width: 130px; }
  #rdv #rdvFilter { flex: 1; min-width: 130px; max-width: none !important; }
  /* Tableau scrollable horizontalement */
  #rdv .stocks-table-container { overflow-x: auto !important; padding: 12px !important; }
  #rdv .stocks-table { min-width: 500px; }

  /* ─── MODULE CALCULS ─── */
  .calculs-grid,
  .calc-grid { grid-template-columns: 1fr !important; }

  /* ─── MODULE PILOTAGE ─── */
  .pilotage-grid,
  .dashboard-grid { grid-template-columns: 1fr !important; }
  .kpi-row { flex-wrap: wrap; gap: 8px; }
  .kpi-card { flex: 1; min-width: 140px; }
  /* Clipping horizontal : pilotage-layout/body ont overflow:visible en desktop, on le recoupe ici */
  #pilotage                   { overflow-x: hidden !important; }
  #pilotage .pilotage-layout  { overflow-x: hidden !important; }
  #pilotage .pilotage-body    { overflow-x: hidden !important; }
  /* Pilotage 2.0 — réduction padding container KPI sur mobile */
  #pilotage .stocks-table-container { padding: 12px !important; }
  /* Réduire la taille min des KPIs pour tenir sur petits écrans */
  #pilotage .p-kpi          { min-width: 0 !important; padding: 7px 8px !important; overflow: hidden !important; }
  #pilotage .p-kpi-teal     { min-width: 0 !important; }
  #pilotage .p-kpi-green-ca { min-width: 0 !important; }
  #pilotage .p-kpi-val      { font-size: 18px !important; }
  #pilotage .p-kpi-val-ca   { font-size: 18px !important; }
  #pilotage .p-kpi-rdv-val  { font-size: 12px !important; max-width: none !important; }

  /* ─── PROJETS — vue compacte (anciennes listes) ─── */
  .projects-view-tabs { flex-wrap: wrap; gap: 4px; }
  .project-view-tab { font-size: 11px !important; padding: 6px 10px !important; }
  .projects-compact-row {
    flex-direction: column !important;
    gap: 4px;
    padding: 10px !important;
  }
  .projects-compact-actions { width: 100%; justify-content: flex-end; }

  /* ─── Listes gestion (modal) ─── */
  .lists-management { grid-template-columns: 1fr !important; }
  .large-modal { width: 96% !important; }

  /* ─── Fiches compactes ─── */
  .fiche-params-grid { grid-template-columns: 1fr !important; }
  .fm2-fields-grid   { grid-template-columns: 1fr !important; }
}

/* ════════════════════════════════════════════════════
   BREAKPOINT TÉLÉPHONE — 480px
════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* Header encore plus compact */
  .app-header  { padding: 10px 12px; }
  .app-title   { font-size: 15px; }
  /* .app-tab masqué sur mobile — pas besoin d'override de taille */

  /* Cartes projets */
  .pdv2-card, .dmv2-card { border-radius: 10px; }
  .pdv2-card-title, .dmv2-card-title { font-size: 13px; }

  /* Boutons d'action dans les cartes */
  .pdv2-cactions button,
  .dmv2-card-actions button { padding: 4px 8px; font-size: 14px; }

  /* Modales plein écran sur petit téléphone */
  .modal-content,
  .pdv2-modal,
  .dmv2-modal {
    width: 100% !important;
    min-height: 100vh !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }
  .pdv2-modal-overlay,
  .dmv2-modal-overlay { padding-top: 0 !important; align-items: flex-start !important; }

  /* Article view */
  .dmv2-article-view { padding: 14px !important; }
  .dmv2-article-title { font-size: 18px !important; }
  .dmv2-article-body  { padding: 14px !important; }

  /* Notification */
  .notification { width: 90% !important; left: 5% !important; right: 5% !important; }

  /* ─── MODULE PILOTAGE — très petit écran ─── */
  #pilotage                   { overflow-x: hidden !important; }
  #pilotage .pilotage-layout  { overflow-x: hidden !important; }
  #pilotage .pilotage-body    { overflow-x: hidden !important; }
  #pilotage .stocks-table-container { padding: 8px !important; }
  /* Override : les cellules KPI doivent pouvoir rétrécir dans la grille 3 colonnes */
  #pilotage .p-kpi         { min-width: 0 !important; padding: 6px 4px !important; overflow: hidden !important; }
  #pilotage .p-kpi-val     { font-size: 16px !important; }
  #pilotage .p-kpi-teal    { min-width: 0 !important; }
  #pilotage .p-kpi-rdv-val { font-size: 11px !important; max-width: none !important; }

  /* ─── MODULE RDV — très petit écran ─── */
  #rdv .stocks-table-container { padding: 8px !important; }
  #rdv .stocks-table { min-width: 440px; }

  /* ─── CA KPI — très petit écran ─── */
  #pilotage .p-kpi-green-ca { min-width: 0 !important; }
  #pilotage .p-kpi-val-ca   { font-size: 16px !important; }
}

/* ════════════════════════════════════════════════════
   CORRECTIONS GLOBALES ERGONOMIE / TOUCH TARGETS
   Appliquées sur toute taille < 900px
════════════════════════════════════════════════════ */
@media (max-width: 900px) {

  /* ── Zones tactiles minimum 44px (standard Apple HIG) ── */
  .btn, button, [role="button"],
  .app-tab, .dv-btn-icon,
  .cai-chip, .cai-bill-btn, .cai-confirm-btn,
  .project-view-tab {
    min-height: 44px;
  }
  /* Boutons icône Devis/Factures */
  .dv-btn-icon { font-size: 18px; padding: 6px 8px; }

  /* ── Pilotage : KPI CA traité comme les autres KPIs ── */
  #pilotage .p-kpi-green-ca { min-width: 100px !important; }
  #pilotage .p-kpi-val-ca   { font-size: 18px !important; }

  /* ── Dévis/Factures : tableau liste scrollable ── */
  .dv-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .dv-table { min-width: 500px; }

  /* ── Caisse : billets et chips tactiles ── */
  .cai-chip      { min-height: 38px; padding: 8px 14px; }
  .cai-bill-btn  { min-height: 48px; }
  .cai-confirm-btn { min-height: 56px; font-size: 17px; }

  /* ── Sidebar séparateurs masqués (sidebar déjà cachée sur mobile) ── */
  .app-tab-separator { display: none; }
}