/* QUINCA+ v21 — responsive global : desktop, tablette, mobile */

html,body{
  max-width:100%;
  overflow-x:hidden;
}
.app,.main,.content{
  min-width:0;
}
img,svg,video,canvas{
  max-width:100%;
}
button,.btn,.input,select,textarea{
  max-width:100%;
}
.pro-table-wrap,
.pc-table-scroll,
.pd-movements,
.detail-table,
.trace-table-wrap,
.all-sales-wrap{
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}

/* ---------- grands écrans / petits laptops ---------- */
@media(max-width:1280px){
  .content{padding-left:16px;padding-right:16px}
  .pro-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
  .dashboard-grid{grid-template-columns:1fr}
  .daily-ca-card{grid-column:span 2}
  .sale-product-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
  .pc-wrap,.pd-wrap{max-width:none}
}

/* ---------- tablette paysage ---------- */
@media(max-width:1024px){
  .app{grid-template-columns:1fr}

  .side{
    position:sticky;
    top:0;
    z-index:40;
    height:auto;
    min-height:52px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:7px 10px;
    overflow:visible;
  }
  .brand-block{
    min-width:148px;
    padding:0;
  }
  .brand-mark{
    width:34px;
    height:34px;
    flex-basis:34px;
  }
  .brand-copy small{display:none}
  .nav{
    display:flex;
    flex:1;
    gap:4px;
    overflow-x:auto;
    overflow-y:hidden;
    padding:0 2px 2px;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
  }
  .nav::-webkit-scrollbar{display:none}
  .nav button{
    flex:0 0 auto;
    width:auto;
    margin:0;
    padding:8px 10px;
    white-space:nowrap;
    scroll-snap-align:start;
  }
  .nav button:before{display:none}
  .side-foot{display:none}

  .top{
    top:49px;
    min-height:62px;
    height:auto;
    padding:8px 12px;
    gap:10px;
    align-items:center;
  }
  .top-left{min-width:0}
  .global-search-wrap{max-width:320px}
  .top-right{
    min-width:0;
    flex-wrap:wrap;
    justify-content:flex-end;
  }
  .top .pro-select-sm{
    max-width:180px;
  }

  .content{padding:14px}
  .pagehead{
    flex-wrap:wrap;
    align-items:flex-start;
  }
  .pagehead>div:first-child{min-width:0}
  .pagehead .pro-actions,
  .pagehead .quick-actions{
    flex-wrap:wrap;
  }

  .pro-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dashboard-grid{grid-template-columns:1fr}
  .daily-ca-card{grid-column:1/-1}

  .pos-v11{
    grid-template-columns:1fr;
  }
  .cash-v11{
    position:static;
    width:100%;
  }
  .sale-product-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .pd-card{grid-template-columns:190px minmax(0,1fr)}
  .pd-photo{width:150px;height:180px}

  .business-premium-card,
  .pc-table-card{
    overflow:hidden;
  }
}

/* ---------- tablette portrait / grand mobile ---------- */
@media(max-width:820px){
  .top{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:start;
  }
  .top-left{
    display:block;
    min-width:0;
  }
  .page-title-wrap{
    min-width:0;
    margin-bottom:6px;
  }
  .global-search-wrap{
    max-width:none;
    width:100%;
  }
  .top-right{
    max-width:320px;
    gap:6px;
  }
  .user-meta{display:none}

  .content{
    padding:12px;
  }
  .pagehead{
    gap:10px;
    margin-bottom:12px;
  }
  .pagehead h1{font-size:20px}
  .pagehead p{font-size:10px;line-height:1.45}

  .pro-two,.pro-three,
  .pd-info-layout,
  .pd-price-grid,
  .trace-head{
    grid-template-columns:1fr;
  }

  .pro-form,.formgrid{
    grid-template-columns:1fr;
  }
  .pro-span2{
    grid-column:auto;
  }

  .sale-product-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .pc-topline{
    align-items:flex-start;
  }
  .pc-title-group{
    flex:1 1 100%;
    flex-wrap:wrap;
  }
  .pc-searchbox{
    flex:1 1 280px;
    max-width:none;
  }
  .pc-filterbar{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    padding-bottom:3px;
  }
  .pc-filter{
    flex:0 0 130px;
  }

  .pd-card{
    grid-template-columns:1fr;
  }
  .pd-media{
    border-right:0;
    border-bottom:1px solid var(--line);
  }
  .pd-photo{
    width:170px;
    height:205px;
  }

  .pd-tabs{
    overflow-x:auto;
    scrollbar-width:none;
  }
  .pd-tabs::-webkit-scrollbar{display:none}

  .business-table-toolbar,
  .pro-titleline{
    flex-wrap:wrap;
    align-items:flex-start;
  }

  .receipt-preview-card{
    width:min(680px,100%);
  }
}

/* ---------- mobiles ---------- */
@media(max-width:640px){
  body{
    font-size:14px;
  }

  .side{
    min-height:46px;
    padding:6px 8px;
    gap:8px;
  }
  .brand-block{
    min-width:auto;
    flex:0 0 auto;
  }
  .brand-mark{
    width:30px;
    height:30px;
    flex-basis:30px;
    border-radius:8px;
  }
  .brand-copy strong{font-size:13px}
  .nav button{
    min-height:34px;
    padding:7px 9px;
    font-size:10px;
    border-radius:7px;
  }

  .top{
    top:42px;
    grid-template-columns:1fr;
    padding:7px 9px 8px;
    gap:7px;
  }
  .top-left{
    width:100%;
  }
  .page-title-wrap{
    display:none;
  }
  .global-search{
    height:36px;
    font-size:11px;
  }
  .top-right{
    width:100%;
    max-width:none;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto auto;
    justify-content:stretch;
    align-items:center;
  }
  .top .pro-select-sm{
    width:100%;
    max-width:none;
    min-width:0;
  }
  .theme-btn{
    display:inline-flex!important;
    align-items:center;
    justify-content:center;
  }
  #logoutBtn{
    display:inline-flex!important;
    align-items:center;
    justify-content:center;
    white-space:nowrap;
  }
  #syncBtn,#notifBtn,.user-chip{
    display:none!important;
  }

  .content{
    padding:10px 8px 18px;
  }

  .pagehead{
    display:block;
  }
  .pagehead>div:last-child,
  .pagehead>.pro-actions,
  .pagehead>.quick-actions{
    margin-top:9px;
    width:100%;
  }
  .pagehead .btn,
  .quick-actions .btn,
  .pro-actions .btn{
    min-height:38px;
  }

  .pro-kpis{
    grid-template-columns:1fr 1fr;
    gap:8px;
  }
  .pro-card,
  .card{
    border-radius:10px;
  }
  .pro-metric,
  .metric-card{
    padding:11px;
    min-width:0;
  }
  .metric-value,
  .pro-metric strong{
    font-size:17px;
    overflow-wrap:anywhere;
  }

  .daily-ca-card{
    grid-column:1/-1;
    padding:13px;
  }
  .daily-ca-value{
    font-size:23px!important;
  }
  .daily-ca-summary{
    grid-template-columns:1fr;
  }
  .daily-pay-grid{
    grid-template-columns:1fr;
  }
  .daily-ca-check{
    grid-template-columns:1fr auto;
  }
  .daily-ca-ok{
    grid-column:1/-1;
    justify-self:start;
  }

  .dashboard-grid{
    gap:8px;
  }
  .chart-card{
    padding:11px;
    overflow:hidden;
  }
  .bar-chart{
    min-width:560px;
  }
  .chart-card:has(.bar-chart){
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .donut-layout{
    grid-template-columns:1fr;
  }
  .legend{
    width:100%;
  }

  .pro-table-wrap,
  .pc-table-scroll,
  .pd-movements,
  .detail-table,
  .trace-table-wrap,
  .all-sales-wrap{
    width:100%;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
  }
  .pro-table,
  .all-sales-table,
  .action-table,
  .business-premium-table{
    min-width:760px;
  }
  .dashboard-sort-head{
    min-height:32px;
    padding:0 8px;
  }

  .business-table-toolbar{
    padding:10px;
  }
  .business-table-toolbar>div{
    min-width:0;
  }
  .business-table-toolbar .pro-pill{
    margin-left:auto;
  }

  .row-actions,
  .sale-row-actions{
    gap:5px;
  }
  .row-actions .btn,
  .sale-row-actions .btn{
    min-height:32px;
    white-space:nowrap;
  }

  .pc-wrap{
    width:100%;
  }
  .pc-topline{
    display:block;
  }
  .pc-title-group{
    display:block;
  }
  .pc-title-group h1{
    margin-bottom:3px;
  }
  .product-sort-caption{
    margin-bottom:8px;
  }
  .pc-searchbox{
    width:100%;
    max-width:none;
    margin-top:8px;
  }
  .pc-new-btn{
    width:100%;
    margin-top:8px;
  }
  .pc-filterbar{
    display:grid;
    grid-template-columns:1fr 1fr;
    overflow:visible;
    gap:6px;
  }
  .pc-filter{
    width:100%;
    min-width:0;
    flex:none;
  }
  .pc-filter:last-child{
    grid-column:1/-1;
  }
  .pc-table{
    min-width:760px;
  }
  .pc-footer{
    flex-direction:column;
    align-items:flex-start;
  }
  .pc-pagination{
    width:100%;
    overflow-x:auto;
  }

  .pos-filter-bar{
    grid-template-columns:1fr;
  }
  .sale-product-grid{
    grid-template-columns:1fr 1fr;
    gap:8px;
  }
  .sale-product-card{
    min-height:260px;
  }
  .sale-product-image{
    height:110px;
  }
  .sale-add-row{
    grid-template-columns:1fr 58px;
    gap:6px;
  }
  .sale-add-row label{
    display:none;
  }
  .sale-add-row .product-add-btn{
    grid-column:1/-1;
  }

  .cash-v11{
    padding:11px;
  }
  .cash-cart{
    max-height:none;
  }
  .cart-row-rich{
    grid-template-columns:minmax(0,1fr) 62px auto 34px;
    gap:5px;
  }
  .cart-product-image{
    width:36px;
    height:36px;
    flex-basis:36px;
  }
  .cart-product-main strong{
    max-width:110px;
  }
  .payment-grid{
    grid-template-columns:1fr 1fr;
  }

  .pd-header{
    align-items:flex-start;
    flex-direction:column;
  }
  .pd-header-actions{
    width:100%;
  }
  .pd-header-actions .btn{
    flex:1 1 auto;
  }
  .pd-main{
    width:100%;
  }
  .pd-tab-content{
    padding:10px;
  }
  .pd-info-row{
    grid-template-columns:105px minmax(0,1fr);
  }
  .pd-image-tab{
    grid-template-columns:1fr;
  }
  .pd-image-large{
    width:100%;
    max-width:300px;
    margin:auto;
  }

  .detail-grid{
    grid-template-columns:1fr;
  }

  .modal{
    padding:8px;
    align-items:end;
  }
  .modal-card{
    width:100%;
    max-width:none;
    max-height:92dvh;
    border-radius:14px 14px 0 0;
    padding:14px 12px calc(14px + env(safe-area-inset-bottom));
  }
  .modal-card h2{
    font-size:18px;
  }
  .modal-actions{
    position:sticky;
    bottom:0;
    margin-left:-12px;
    margin-right:-12px;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    background:var(--panel);
    border-top:1px solid var(--line);
    z-index:4;
  }
  .modal-actions .btn{
    flex:1 1 0;
    min-height:40px;
  }

  .receipt-overlay{
    padding:0;
    align-items:end;
  }
  .receipt-preview-card{
    width:100%;
    max-height:96dvh;
    border-radius:14px 14px 0 0;
  }
  .receipt-preview-body{
    padding:8px;
  }
  .receipt-sheet{
    min-height:0;
    padding:18px 14px;
  }
  .receipt-actions{
    padding-bottom:calc(12px + env(safe-area-inset-bottom));
  }

  .quote-sheet{
    padding:14px;
    overflow-x:auto;
  }
}

/* ---------- petits mobiles ---------- */
@media(max-width:430px){
  .pro-kpis{
    grid-template-columns:1fr;
  }
  .metric-card,
  .pro-metric{
    min-height:auto;
  }

  .sale-product-grid{
    grid-template-columns:1fr;
  }
  .sale-product-card{
    min-height:0;
  }
  .sale-product-image{
    height:150px;
  }

  .payment-grid{
    grid-template-columns:1fr;
  }
  .pay-method[data-payment="Crédit"]{
    grid-column:auto;
  }

  .cart-row-rich{
    grid-template-columns:minmax(0,1fr) 58px 34px;
  }
  .cart-line-total{
    grid-column:1/-1;
    text-align:left;
    padding-left:45px;
  }

  .pc-filterbar{
    grid-template-columns:1fr;
  }
  .pc-filter:last-child{
    grid-column:auto;
  }

  .pd-photo{
    width:145px;
    height:175px;
  }
  .pd-info-row{
    grid-template-columns:1fr;
  }
  .pd-info-row span{
    min-height:auto;
    border-bottom:1px solid var(--line);
  }
  .pd-stock-card{
    align-items:flex-start;
    flex-direction:column;
  }
  .pd-stock-values{
    width:100%;
    text-align:left;
  }

  .receipt-head{
    flex-direction:column;
  }
  .receipt-totals{
    width:100%;
  }
  .receipt-actions{
    grid-template-columns:1fr!important;
  }
  .receipt-actions .primary{
    grid-column:auto!important;
  }

  .top-right{
    grid-template-columns:minmax(0,1fr) auto;
  }
  #logoutBtn{
    grid-column:2;
  }
  .theme-btn{
    grid-column:2;
    grid-row:2;
  }
  .top .pro-select-sm{
    grid-row:1 / span 2;
  }
}

/* ---------- très petit écran ---------- */
@media(max-width:360px){
  .brand-copy{display:none}
  .nav button{
    font-size:9.5px;
    padding:7px 8px;
  }
  .content{
    padding-left:6px;
    padding-right:6px;
  }
  .btn{
    padding-left:10px;
    padding-right:10px;
  }
  .daily-ca-check{
    grid-template-columns:1fr;
  }
  .daily-ca-check strong,
  .daily-ca-ok{
    justify-self:start;
  }
}

/* amélioration tactile */
@media(pointer:coarse){
  .btn,
  .nav button,
  .dashboard-sort-head,
  .pc-page-btn,
  .pay-method,
  .pd-tabs button{
    min-height:40px;
  }
  input,select,textarea{
    font-size:16px;
  }
}