/* QUINCA+ v54 — responsive global smartphone */

@media(max-width:700px){
  html,body{
    width:100%!important;
    max-width:100%!important;
    overflow-x:hidden!important;
  }
  body.mobile-menu-lock-v54{
    overflow:hidden!important;
    touch-action:none;
  }

  .app{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:100vw!important;
    min-height:100dvh!important;
  }
  .main{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:100vw!important;
    margin:0!important;
  }

  /* Vrai menu mobile coulissant */
  .side{
    position:fixed!important;
    inset:0 auto 0 0!important;
    width:min(86vw,310px)!important;
    max-width:310px!important;
    height:100dvh!important;
    min-height:100dvh!important;
    z-index:1002!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:0!important;
    padding:0 10px calc(12px + env(safe-area-inset-bottom))!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    transform:translateX(-105%)!important;
    transition:transform .22s ease!important;
    box-shadow:18px 0 38px rgba(0,0,0,.28)!important;
  }
  .side.mobile-open-v54{
    transform:translateX(0)!important;
  }

  .mobile-menu-overlay-v54{
    position:fixed;
    inset:0;
    z-index:1001;
    background:rgba(3,12,23,.58);
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease;
  }
  .mobile-menu-overlay-v54.open-v54{
    opacity:1;
    pointer-events:auto;
  }

  .mobile-drawer-head-v54{
    min-height:58px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:8px 2px;
    border-bottom:1px solid rgba(255,255,255,.09);
    color:#fff;
    flex:0 0 auto;
  }
  .mobile-drawer-head-v54 strong{
    font-size:16px;
    font-weight:900;
  }
  .mobile-drawer-head-v54 button{
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    border:0;
    border-radius:10px;
    background:rgba(255,255,255,.08);
    color:#fff;
    font-size:25px;
    line-height:1;
  }

  .side-brand-v47,
  .brand-block{
    width:100%!important;
    min-width:0!important;
    padding:12px 4px 8px!important;
    flex:0 0 auto!important;
  }
  .company-mini-v47{
    width:100%!important;
    min-width:0!important;
  }

  .side .nav{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    flex:0 0 auto!important;
    overflow:visible!important;
    padding:8px 0!important;
  }
  .side .nav button{
    display:flex!important;
    width:100%!important;
    min-width:0!important;
    min-height:44px!important;
    margin:2px 0!important;
    padding:10px 12px!important;
    border-radius:10px!important;
    font-size:12px!important;
    text-align:left!important;
    white-space:normal!important;
  }
  .side .nav button:before{
    display:grid!important;
  }

  .side-foot{
    display:block!important;
    position:static!important;
    inset:auto!important;
    margin-top:auto!important;
    padding:12px 6px 8px!important;
    flex:0 0 auto!important;
  }

  .mobile-drawer-actions-v54{
    display:grid;
    grid-template-columns:1fr;
    gap:7px;
    padding:8px 0 0;
    flex:0 0 auto;
  }
  .mobile-drawer-actions-v54 button{
    width:100%;
    min-height:42px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:10px;
    background:rgba(255,255,255,.07);
    color:#eaf3ff;
    font-size:11px;
    font-weight:800;
    text-align:left;
    padding:0 12px;
  }
  .mobile-drawer-actions-v54 #mobileLogoutV54{
    color:#ffd9df;
    border-color:rgba(255,95,115,.24);
    background:rgba(255,72,93,.09);
  }

  /* Barre supérieure mobile */
  .top,
  .top-v47{
    position:sticky!important;
    top:0!important;
    left:0!important;
    right:0!important;
    z-index:900!important;
    display:grid!important;
    grid-template-columns:42px minmax(0,1fr)!important;
    grid-template-areas:
      "menu title"
      "controls controls"!important;
    align-items:center!important;
    width:100%!important;
    max-width:100vw!important;
    min-width:0!important;
    min-height:0!important;
    height:auto!important;
    gap:6px 8px!important;
    padding:7px 8px 8px!important;
    overflow:visible!important;
  }

  .mobile-menu-btn-v54{
    grid-area:menu!important;
    display:grid!important;
    place-content:center!important;
    gap:4px!important;
    width:38px!important;
    height:38px!important;
    margin:0!important;
    padding:0!important;
    border:1px solid var(--line)!important;
    border-radius:10px!important;
    background:var(--panel)!important;
    color:var(--ink)!important;
    box-shadow:none!important;
  }
  .mobile-menu-btn-v54 span{
    display:block;
    width:17px;
    height:2px;
    border-radius:999px;
    background:currentColor;
  }

  #pageTitle{
    grid-area:title!important;
    display:block!important;
    min-width:0!important;
    margin:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:15px!important;
    line-height:1.2!important;
  }

  .top-right{
    grid-area:controls!important;
    display:flex!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:6px!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    padding:0 0 1px!important;
    scrollbar-width:none!important;
  }
  .top-right::-webkit-scrollbar{display:none!important}

  .top-right>.pro-select-sm,
  #viewStore{
    display:block!important;
    flex:1 1 170px!important;
    width:auto!important;
    min-width:150px!important;
    max-width:none!important;
    height:36px!important;
  }
  .top-right>.pro-pill{
    flex:1 1 auto!important;
    min-width:0!important;
    max-width:none!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  #notifBtn{
    display:block!important;
    flex:0 0 auto!important;
    height:36px!important;
    min-width:38px!important;
    max-width:110px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:9.5px!important;
    padding:0 8px!important;
  }
  #syncBtn,
  #logoutBtn{
    display:none!important;
  }
  .session-user-v47{
    display:flex!important;
    flex:0 0 38px!important;
    min-width:38px!important;
    max-width:38px!important;
    width:38px!important;
    height:38px!important;
    padding:2px!important;
    justify-content:center!important;
    border-radius:10px!important;
  }
  .session-user-text-v47,
  .session-user-caret-v47{
    display:none!important;
  }
  .session-avatar-v47,
  .session-avatar-fallback-v47{
    width:31px!important;
    height:31px!important;
    flex:0 0 31px!important;
  }

  /* Tous les contenus doivent rentrer dans le viewport */
  .content,
  body:has(.dashboard-v36) .content{
    box-sizing:border-box!important;
    width:100%!important;
    max-width:100vw!important;
    min-width:0!important;
    margin:0!important;
    padding:10px 8px calc(22px + env(safe-area-inset-bottom))!important;
    overflow:visible!important;
  }
  .content>*,
  .pagehead,
  .card,
  .panel,
  .pro-card,
  .business-premium-card,
  .dashboard-v36,
  .dashboard-v36-panel,
  .pc-wrap,
  .pd-wrap,
  .detail-grid,
  .quote-modal-v49{
    box-sizing:border-box!important;
    max-width:100%!important;
    min-width:0!important;
  }

  .pagehead{
    width:100%!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:8px!important;
  }
  .pagehead>div{
    width:100%!important;
    min-width:0!important;
  }
  .pagehead h1{
    font-size:21px!important;
    line-height:1.2!important;
    overflow-wrap:anywhere!important;
  }
  .pagehead p{
    font-size:11px!important;
    line-height:1.45!important;
  }
  .pagehead .btn,
  .quick-actions .btn{
    min-height:40px!important;
  }
  .quick-actions{
    width:100%!important;
    display:grid!important;
    grid-template-columns:1fr!important;
  }

  /* Grilles, formulaires et fiches */
  .grid,
  .pro-kpis,
  .dashboard-grid,
  .dashboard-v36-kpis,
  .dashboard-v37-extra-kpis,
  .dashboard-v37-insights-grid,
  .dashboard-v36-main-grid,
  .dashboard-v38-period-grid,
  .dashboard-v38-extra-kpis,
  .split,
  .formgrid,
  .pro-form,
  .settings-v47-grid,
  .quote-meta-v49,
  .quote-pos-v49,
  .detail-grid,
  .pd-card,
  .pd-image-tab{
    grid-template-columns:minmax(0,1fr)!important;
  }

  input,
  select,
  textarea,
  button,
  .input,
  .btn{
    box-sizing:border-box!important;
    max-width:100%!important;
  }

  /* Tables : scroll horizontal explicite au lieu d'être coupées */
  .tablewrap,
  .pro-table-wrap,
  .pc-table-scroll,
  .pd-movements,
  .detail-table,
  .trace-table-wrap,
  .all-sales-wrap,
  .dashboard-v36-table-wrap,
  .business-premium-card:has(table),
  .card.panel:has(> table),
  .pro-card:has(> table){
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow-x:auto!important;
    overflow-y:visible!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior-inline:contain!important;
  }

  /* Pages caisse / produits */
  .sale-product-grid{
    grid-template-columns:minmax(0,1fr)!important;
  }
  .sale-product-card{
    min-height:0!important;
  }
  .cash-panel{
    position:static!important;
    top:auto!important;
    width:100%!important;
    max-width:100%!important;
  }
  .cart-row-rich{
    max-width:100%!important;
    min-width:0!important;
  }

  /* Modales */
  .modal{
    box-sizing:border-box!important;
    width:100vw!important;
    max-width:100vw!important;
    padding:6px!important;
  }
  .modal-card,
  .receipt-preview-card,
  .quote-modal-card-v49{
    box-sizing:border-box!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    max-height:94dvh!important;
    overflow:auto!important;
  }

  /* Textes longs */
  td,th,
  .pro-pill,
  .card,
  .panel,
  .pro-card{
    overflow-wrap:anywhere;
  }
}

@media(max-width:390px){
  .top,
  .top-v47{
    grid-template-columns:40px minmax(0,1fr)!important;
    padding-left:6px!important;
    padding-right:6px!important;
  }
  #pageTitle{
    font-size:14px!important;
  }
  .top-right>.pro-select-sm,
  #viewStore{
    min-width:135px!important;
    font-size:10px!important;
  }
  #notifBtn{
    max-width:92px!important;
    font-size:9px!important;
  }
  .content,
  body:has(.dashboard-v36) .content{
    padding-left:6px!important;
    padding-right:6px!important;
  }
}


/* v55-desktop-cleanup */
.mobile-menu-btn-v54,
.mobile-menu-overlay-v54,
.mobile-drawer-head-v54,
.mobile-drawer-actions-v54{
  display:none!important;
}
@media(min-width:701px){
  .side{transform:none!important}
  body.mobile-menu-lock-v54{overflow:auto!important;touch-action:auto!important}
}
@media(max-width:700px){
  .mobile-menu-btn-v54{display:grid!important}
  .mobile-menu-overlay-v54{display:block!important}
  .mobile-drawer-head-v54{display:flex!important}
  .mobile-drawer-actions-v54{display:grid!important}
}