/* =========================================================
   LordCaisse — responsive.css
   Adaptation mobile / tablette / desktop
   ========================================================= */

/* ============================== */
/* =====  BURGER (mobile)  ====== */
/* ============================== */
.menu-btn{
  display:none;
  border:1px solid var(--border); background:var(--surface); color:var(--navy-text);
  width:38px; height:38px; border-radius:8px; cursor:pointer; flex-shrink:0;
  align-items:center; justify-content:center; box-shadow:var(--shadow-sm);
}
.menu-btn:active{background:var(--navy-pale);}
.menu-btn svg{display:block;}
.menu-backdrop{
  display:none; position:fixed; inset:0; background:rgba(9,22,38,.5); z-index:49;
}
.menu-backdrop.show{display:block;}

/* ============================== */
/* ======  TABLETTES ≤1100  ===== */
/* ============================== */
@media (max-width:1100px){
  .dash-grid{grid-template-columns:1fr;}
}

/* ============================== */
/* =======  TABLETTES ≤900  ===== */
/* ============================== */
@media (max-width:900px){
  .topbar{padding:13px 16px;}
  .content{padding:18px 16px 32px;}

  /* Sidebar off-canvas */
  .sidebar{
    position:fixed; left:0; top:0; bottom:0; z-index:50;
    transform:translateX(-100%); transition:transform .22s ease;
    box-shadow:none; height:100vh; height:100dvh;
  }
  .sidebar.open{transform:translateX(0); box-shadow:var(--shadow-lg);}
  .menu-btn{display:flex;}
  .menu-backdrop.show{display:block;}

  /* Topbar compacte */
  .topbar h1{font-size:17px;}
  .topbar .meta{font-size:11.5px;}
  .user-chip .uc-txt{display:none;}
  .user-chip{padding:5px;}
  .topbar-right{margin-left:auto;}
}

/* ============================== */
/* ========  MOBILE ≤640  ======= */
/* ============================== */
@media (max-width:640px){
  body{font-size:13.5px;}

  /* Topbar sur deux lignes visuelles : burger + titre, puis actions */
  .topbar{padding:11px 13px; gap:10px;}
  .topbar-right{width:100%; justify-content:flex-end; margin-left:0;}

  /* Contenu plus dense */
  .content{padding:14px 12px 28px;}
  .panel{padding:16px 14px; border-radius:9px;}

  /* Dashboard */
  .dash-hero{flex-direction:column; align-items:flex-start; padding:20px 18px; gap:14px;}
  .dash-hero-value{font-size:27px;}
  .dash-hero-actions{width:100%;}
  .dash-hero-actions .btn{flex:1; justify-content:center;}
  .cards{grid-template-columns:repeat(2, 1fr); gap:10px;}
  .stat-card{padding:13px 12px 12px 14px;}
  .stat-card .value{font-size:20px;}
  .stat-card .hint{font-size:10.5px;}

  /* Modales plein écran pratique (le contenu défile dans la fenêtre) */
  .modal-overlay{padding:16px 10px;}
  .modal{padding:20px 16px; border-radius:12px; max-height:calc(100vh - 32px); max-height:calc(100dvh - 32px);}
  .modal .field-row{grid-template-columns:1fr;}

  /* Formulaires empilés */
  .field-row{grid-template-columns:1fr;}
  .btn-row .btn{flex:1; justify-content:center;}

  /* Recherche */
  .search-bar{margin-bottom:12px;}
  .search-bar input{padding:10px 12px; font-size:13px;}

  /* Toast : bandeau haut centre pleine largeur */
  .toast{
    top:66px; left:12px; right:12px; transform:none;
    padding:13px 15px 15px; font-size:13.5px; min-width:0;
  }
  .toast.show{transform:none;}

  /* Tableaux → cartes empilées (plus de scroll horizontal).
     Chaque ligne devient une carte : libellé à gauche, valeur à droite.
     Les libellés viennent de data-label ajouté par renderTable. */
  .table-wrap{margin:0; overflow:visible;}
  .table-wrap table{min-width:0; width:100%; border-collapse:separate; border-spacing:0 8px;}
  .table-wrap thead{display:none;}
  .table-wrap tbody tr{
    display:block;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:10px;
    padding:4px 13px;
    box-shadow:var(--shadow-sm);
  }
  .table-wrap tbody tr:nth-child(even) td{background:transparent;}
  .table-wrap tbody tr:hover td{background:transparent;}
  .table-wrap tbody td{
    display:flex; align-items:center; justify-content:space-between; gap:14px;
    padding:8px 0; border:none; text-align:right;
  }
  .table-wrap tbody td::before{
    content:attr(data-label);
    font-size:10.5px; font-weight:700; color:var(--muted);
    text-transform:uppercase; letter-spacing:.4px;
    text-align:left; flex-shrink:0; max-width:45%;
  }
  .table-wrap tbody td[data-label=""]{justify-content:flex-end;}
  .table-wrap tbody td[data-label=""]::before{content:none;}
  /* Le conteneur défilant (modales) devient statique : les cartes s'empilent */
  .table-scroll{max-height:none; min-height:0; overflow:visible; border:none; border-radius:0;}
  /* Contenus longs (IDs, noms) : jamais de débordement horizontal */
  .table-wrap td, .panel, .modal{overflow-wrap:break-word; word-break:break-word;}

  /* Détail client : header empilé */
  .detail-header{flex-direction:column; align-items:stretch;}

  /* Toolbar clients : filtres empilés sous la recherche */
  .clients-toolbar{flex-direction:column; align-items:stretch;}
  .clients-toolbar .view-toggle{width:100%;}
  .clients-toolbar .vt-btn{flex:1; justify-content:center;}

  /* Graphique dashboard : période sur toute la largeur */
  .dash-chart-tools{width:100%; justify-content:space-between;}
  .dash-chart-tools .view-toggle{width:auto;}

  /* En-têtes de panneau : le titre respire, la barre d'outils passe en dessous
     au lieu d'écraser le texte (ex. « Collecte — 14 derniers jours »). */
  .panel-head{flex-wrap:wrap; gap:8px;}
  .panel-head h2{font-size:13.5px; line-height:1.45; align-items:flex-start; min-width:0;}
  .panel-head h2 svg{margin-top:2px;}

  /* Hero dashboard : boutons pleine largeur */
  .dash-hero-actions .btn{flex:1; justify-content:center;}
}

/* ============================== */
/* ====  TRÈS PETITS ≤400  ====== */
/* ============================== */
@media (max-width:400px){
  .cards{grid-template-columns:1fr;}
  .topbar h1{font-size:15.5px;}
  .dash-hero-value{font-size:24px;}
}

/* ============================== */
/* ======  ÉCRANS LARGES  ======= */
/* ============================== */
@media (min-width:1600px){
  .content{max-width:1480px; margin:0 auto; width:100%;}
}

/* ============================== */
/* ==== TABLEAUX TACTILES ======== */
/* Cible : écrans tactiles étroits — réduit la densité */
/* et augmente les zones de toucher des boutons. */
/* ============================== */
@media (hover:none) and (pointer:coarse){
  td{padding:13px 11px;}
  .btn-sm{padding:9px 13px; font-size:12.5px;}
  th.sortable{padding-right:6px;}
  /* Les actions dans les tableaux restent cliquables sans zoom */
  .table-wrap td .btn{min-height:34px; min-width:34px; justify-content:center;}
}

/* Zone de sécurité : évite que les toasts / menus touchent les bords sur iPhone */
@supports(padding:max(0px)){
  .toast{padding-bottom:max(12px, env(safe-area-inset-bottom));}
}

/* ============================== */
/* ====  HAUTEURS FAIBLES  ====== */
/* ============================== */
@media (max-height:520px){
  .sidebar-brand{padding:14px 20px 10px;}
  .sidebar-status{display:none;}
  .sidebar-foot{display:block !important; font-size:9px; line-height:1.4; padding:8px 16px 10px;}
}