/* QUINCA+ v52 — optimisation du tableau de bord sur téléphone */

@media (max-width:700px){
  body:has(.dashboard-v36) .content{
    padding:12px 10px calc(22px + env(safe-area-inset-bottom))!important;
    overflow:visible!important;
  }

  .dashboard-v36,
  .dashboard-v37,
  .dashboard-v38,
  .dashboard-v37-insights-grid,
  .dashboard-v36-main-grid{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }

  .dashboard-v37-insights-grid,
  .dashboard-v36-main-grid{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:10px!important;
  }

  .dashboard-v36-panel,
  .dashboard-v37-category-panel,
  .dashboard-v36-chart-panel,
  .dashboard-v36-sales-panel{
    width:100%!important;
    min-width:0!important;
    min-height:0!important;
    height:auto!important;
    align-self:start!important;
  }

  .dashboard-v36-panel-head{
    min-height:0!important;
    padding:13px 13px 9px!important;
    gap:8px!important;
    align-items:flex-start!important;
  }
  .dashboard-v36-panel-head h3{
    font-size:15px!important;
    line-height:1.25!important;
  }
  .dashboard-v36-panel-head h3 span{
    display:block;
    margin-top:2px;
    font-size:10px!important;
  }
  .dashboard-v37-panel-total{
    font-size:13px!important;
  }

  /* Répartition par catégorie : supprime le grand espace vide mobile. */
  .dashboard-v37-category-body{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:14px!important;
    min-height:0!important;
    height:auto!important;
    padding:6px 13px 15px!important;
  }
  .dashboard-v37-donut{
    display:block!important;
    width:118px!important;
    height:118px!important;
    min-width:118px!important;
    min-height:118px!important;
    margin:2px auto 0!important;
    flex:0 0 118px!important;
  }
  .dashboard-v37-donut:after{
    inset:25px!important;
  }
  .dashboard-v37-category-legend{
    width:100%!important;
    gap:7px!important;
  }
  .dashboard-v37-category-row{
    grid-template-columns:9px minmax(0,1fr) auto!important;
    gap:8px!important;
    min-height:24px;
  }
  .dashboard-v37-category-name,
  .dashboard-v37-category-row strong{
    font-size:10px!important;
  }

  /* Graphique 30 jours : taille réellement adaptée à l'écran. */
  .dashboard-v36-chart{
    width:100%!important;
    min-width:0!important;
    min-height:0!important;
    padding:2px 6px 10px!important;
    overflow:hidden!important;
  }
  .dashboard-v36-chart-svg{
    display:block!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:210px!important;
    aspect-ratio:760 / 280;
  }

  /* Dernières ventes : le tableau desktop devient une suite de cartes lisibles. */
  .dashboard-v36-table-wrap{
    width:100%!important;
    max-width:100%!important;
    overflow:visible!important;
    padding:0 11px 12px!important;
  }
  .dashboard-v36-table{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
  .dashboard-v36-table thead{
    display:none!important;
  }
  .dashboard-v36-table tbody{
    display:grid!important;
    width:100%!important;
    gap:9px!important;
  }
  .dashboard-v36-table tbody tr{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    width:100%!important;
    min-width:0!important;
    border:1px solid #dfe8f2;
    border-radius:10px;
    overflow:hidden;
    background:#fff;
  }
  .dashboard-v36-table td{
    display:block!important;
    min-width:0!important;
    padding:8px 10px!important;
    border:0!important;
    border-bottom:1px solid #edf2f7!important;
    background:#fff!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    font-size:10.5px!important;
    line-height:1.35!important;
  }
  .dashboard-v36-table td:nth-child(odd){
    border-right:1px solid #edf2f7!important;
  }
  .dashboard-v36-table td:first-child{
    grid-column:1/-1!important;
    border-right:0!important;
    background:#f6f9fd!important;
    font-weight:850!important;
  }
  .dashboard-v36-table td:last-child,
  .dashboard-v36-table td:nth-last-child(2){
    border-bottom:0!important;
  }
  .dashboard-v36-table td::before{
    display:block;
    margin-bottom:3px;
    color:#8293a8;
    font-size:7.5px;
    line-height:1;
    font-weight:850;
    text-transform:uppercase;
    letter-spacing:.05em;
  }
  .dashboard-v36-table td:nth-child(1)::before{content:"N°";}
  .dashboard-v36-table td:nth-child(2)::before{content:"Date";}
  .dashboard-v36-table td:nth-child(3)::before{content:"Client";}
  .dashboard-v36-table td:nth-child(4)::before{content:"Magasin";}
  .dashboard-v36-table td:nth-child(5)::before{content:"Saisi par";}
  .dashboard-v36-table td:nth-child(6)::before{content:"Paiement";}
  .dashboard-v36-table td:nth-child(7)::before{content:"Total";}
  .dashboard-v36-table td:nth-child(8)::before{content:"Statut";}

  .dashboard-v36-status{
    min-width:0!important;
    padding:4px 7px!important;
    font-size:8.5px!important;
  }
  .dashboard-v36-link{
    font-size:9px!important;
  }

  body.dark-ui .dashboard-v36-table tbody tr{
    border-color:#294057;
    background:#101d2f;
  }
  body.dark-ui .dashboard-v36-table td{
    background:#101d2f!important;
    border-bottom-color:#263950!important;
    color:#b9cadc!important;
  }
  body.dark-ui .dashboard-v36-table td:nth-child(odd){
    border-right-color:#263950!important;
  }
  body.dark-ui .dashboard-v36-table td:first-child{
    background:#15253a!important;
    color:#eef5ff!important;
  }
  body.dark-ui .dashboard-v36-table td::before{
    color:#8196ac;
  }
}

@media (max-width:430px){
  .dashboard-v36-heading h1{
    font-size:21px!important;
  }
  .dashboard-v36-kpis,
  .dashboard-v37-extra-kpis,
  .dashboard-v38-period-grid,
  .dashboard-v38-extra-kpis,
  .dashboard-v37-payments-grid{
    grid-template-columns:minmax(0,1fr)!important;
  }
  .dashboard-v36-kpi{
    min-height:92px!important;
    grid-template-columns:48px minmax(0,1fr)!important;
    gap:11px!important;
    padding:12px!important;
  }
  .dashboard-v36-kpi-icon{
    width:44px!important;
    height:44px!important;
  }
  .dashboard-v36-kpi-icon svg{
    width:24px!important;
    height:24px!important;
  }
  .dashboard-v37-payment-check{
    margin:0 11px 12px!important;
  }
  .dashboard-v36-chart-svg{
    max-height:170px!important;
  }
  .dashboard-v36-table td{
    padding:8px!important;
  }
}