/* =========================================================
   LAHATECH — MOBILE ONLY
   Ce fichier ne contient QUE des @media pour mobile/tablette
   Le desktop n'est pas affecté
   ========================================================= */

/* ===== TABLETTE (641 - 1024px) ===== */
@media (min-width: 641px) and (max-width: 1024px){
  .sidebar{ width: 220px !important }
  .main{ margin-left: 220px !important }
  .kpi-grid{ grid-template-columns: repeat(3, 1fr) !important }
  .kpi-grid-6{ grid-template-columns: repeat(3, 1fr) !important }
  .grid-2, .grid-sale{ grid-template-columns: 1fr !important }
  .search-global input{ width: 200px !important }
  .product-grid{ grid-template-columns: repeat(3, 1fr) !important }
}

/* ===== MOBILE (max 640px) ===== */
@media (max-width: 640px){

  /* ---------- LAYOUT ---------- */
  html, body{ overflow-x: hidden !important }

  .sidebar{
    transform: translateX(-100%) !important;
    width: 280px !important;
    max-width: 85vw !important;
    z-index: 999 !important;
    box-shadow: 20px 0 60px rgba(0,0,0,.5) !important;
  }
  .sidebar.open{ transform: translateX(0) !important }
  .sidebar-overlay.open{
    display: block !important;
    z-index: 998 !important;
  }

  .main{
    margin-left: 0 !important;
    padding-bottom: 90px !important;
    width: 100% !important;
  }

  /* ---------- TOPBAR ---------- */
  .topbar{
    padding: 10px 12px !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
  }
  .burger{
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
    background: #f1f5f9 !important;
    font-size: 20px !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
  }
  .page-title{
    flex: 1 !important;
    min-width: 0 !important;
  }
  .page-title h2{
    font-size: 15px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .page-title p{ display: none !important }

  .topbar-right{
    gap: 8px !important;
    flex-shrink: 0 !important;
  }
  .search-global{ display: none !important }
  .clock{ display: none !important }

  #la-bell{
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
  }
  #la-bell svg{ width: 18px !important; height: 18px !important }
  #la-count{
    min-width: 18px !important;
    height: 18px !important;
    font-size: 10px !important;
    top: -5px !important;
    right: -5px !important;
    border-width: 2px !important;
  }

  /* ---------- PANEL ---------- */
  .panel{
    padding: 14px 12px !important;
  }

  /* ---------- WELCOME ---------- */
  .welcome{
    padding: 20px 18px !important;
    border-radius: 18px !important;
    margin-bottom: 18px !important;
  }
  .welcome-inner{
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
  }
  .welcome h2{ font-size: 18px !important }
  .welcome p{ font-size: 12px !important }
  .welcome-actions{
    width: 100% !important;
    gap: 8px !important;
  }
  .welcome-btn{
    flex: 1 !important;
    justify-content: center !important;
    padding: 10px 12px !important;
    font-size: 12px !important;
  }

  /* ---------- KPI ---------- */
  .kpi-grid{
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .kpi-grid-6{
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .kpi{
    padding: 14px 12px !important;
    border-radius: 14px !important;
  }
  .kpi-label{ font-size: 9.5px !important }
  .kpi-value{ font-size: 15px !important; letter-spacing: -.3px !important }
  .kpi-sub{ font-size: 10px !important }
  .kpi-icon{
    font-size: 16px !important;
    top: 10px !important;
    right: 10px !important;
  }
  .section-head{
    font-size: 10px !important;
    margin: 20px 0 10px !important;
    letter-spacing: .5px !important;
  }

  /* ---------- CARDS ---------- */
  .card{
    border-radius: 16px !important;
  }
  .card-head{
    padding: 12px 14px !important;
    gap: 8px !important;
  }
  .card-head h3{ font-size: 13.5px !important }
  .card-body{ padding: 14px 12px !important }
  .grid-2, .grid-sale{
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    margin-bottom: 14px !important;
  }
  .mt16{ margin-top: 12px !important }

  /* ---------- HEAD ACTIONS ---------- */
  .head-actions{
    width: 100% !important;
    gap: 6px !important;
  }
  .head-actions input,
  .head-actions select{
    flex: 1 !important;
    min-width: 0 !important;
    font-size: 13px !important;
    padding: 8px 12px !important;
  }
  .head-actions .btn{
    flex-shrink: 0 !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
  }

  /* ---------- BUTTONS ---------- */
  .btn{ font-size: 13px !important; padding: 10px 16px !important }
  .btn-sm{ font-size: 12px !important; padding: 8px 12px !important }
  .btn-lg{ font-size: 14px !important; padding: 14px 20px !important }
  .btn-icon{
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    font-size: 16px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* ---------- TABLES → SCROLL HORIZONTAL PROPRE ---------- */
  .table-wrap{
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin: 0 -12px !important;
    padding: 0 12px !important;
    border-radius: 0 !important;
  }
  .table-wrap table{
    min-width: 640px !important;
    font-size: 12.5px !important;
  }
  .table-wrap th{
    padding: 10px 10px !important;
    font-size: 10px !important;
  }
  .table-wrap td{
    padding: 11px 10px !important;
    font-size: 12.5px !important;
    white-space: nowrap !important;
  }

  /* ---------- STATS ---------- */
  .stat-strip{
    gap: 6px !important;
    margin-bottom: 12px !important;
  }
  .stat-pill{
    flex: 1 1 calc(50% - 3px) !important;
    min-width: 0 !important;
    padding: 10px 12px !important;
    font-size: 10.5px !important;
    border-radius: 12px !important;
  }
  .stat-pill small{ font-size: 9px !important }
  .stat-pill b{ font-size: 15px !important }

  /* ---------- TABS (Stock, Fournisseurs) ---------- */
  .stock-tabs{
    flex-direction: column !important;
    gap: 8px !important;
    margin-bottom: 14px !important;
  }
  .stock-tab{
    width: 100% !important;
    min-width: 0 !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
  }
  .stock-tab .st-icon{ font-size: 20px !important }
  .stock-tab .st-label{ font-size: 12.5px !important }
  .stock-tab .st-count{
    font-size: 12px !important;
    padding: 3px 10px !important;
  }

  /* ---------- FORMS ---------- */
  .field{ margin-bottom: 14px !important }
  .field label{
    font-size: 11px !important;
    margin-bottom: 6px !important;
  }
  .field input,
  .field select,
  .input-sm,
  .input-full{
    font-size: 16px !important; /* empêche zoom iOS */
    padding: 12px 14px !important;
    border-radius: 12px !important;
  }
  .form-grid-2,
  .form-grid-3{
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* ---------- FILTERS ---------- */
  .filters{
    flex-direction: column !important;
    gap: 8px !important;
  }
  .filters input,
  .filters select,
  .filters button{
    width: 100% !important;
    font-size: 14px !important;
  }

  /* ---------- PRODUCTS ---------- */
  .product-grid{
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    max-height: none !important;
  }
  .product-card{
    padding: 10px !important;
    border-radius: 12px !important;
  }
  .pc-name{
    font-size: 12px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .pc-cat{ font-size: 9px !important; padding: 2px 6px !important }
  .pc-actions{ flex-direction: column !important; gap: 6px !important }
  .pc-btn{ padding: 8px 6px !important }
  .pc-btn small{ font-size: 9px !important }
  .pc-btn b{ font-size: 11px !important }
  .pc-stock{ font-size: 10px !important }
  .product-cat-header{
    font-size: 11px !important;
    margin: 12px 0 8px !important;
  }

  /* ---------- CART ---------- */
  .cart-list{ max-height: 260px !important }
  .cart-item{
    padding: 10px 8px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .cart-item .ci-info{
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }
  .cart-item .ci-info b{
    font-size: 12.5px !important;
    display: block !important;
  }
  .cart-item .ci-info small{
    font-size: 10.5px !important;
    display: block !important;
  }
  .cart-item .ci-total{
    font-size: 12.5px !important;
    min-width: 0 !important;
    margin-left: auto !important;
  }
  .cart-item .qty{
    order: 3;
  }
  .cart-item .qty button{
    width: 28px !important;
    height: 28px !important;
  }
  .ct-row{ font-size: 12.5px !important }
  .ct-row b{ font-size: 13px !important }
  .ct-row b.big{ font-size: 19px !important }

  /* ---------- MODALS → BOTTOM SHEET ---------- */
  .modal-overlay{
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .modal{
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: 92vh !important;
    animation: slideUpMobile .3s cubic-bezier(.4,0,.2,1) !important;
  }
  @keyframes slideUpMobile{
    from{ transform: translateY(100%) }
    to{ transform: translateY(0) }
  }
  .modal-head{
    padding: 16px 18px !important;
    position: sticky !important;
    top: 0 !important;
    background: #fff !important;
    z-index: 5 !important;
    border-radius: 20px 20px 0 0 !important;
  }
  .modal-head h3{ font-size: 15px !important }
  .modal-body{ padding: 18px 16px !important }
  .modal-foot{
    flex-direction: column-reverse !important;
    gap: 8px !important;
    padding: 12px 16px !important;
    position: sticky !important;
    bottom: 0 !important;
    background: #fff !important;
    border-radius: 0 0 0 0 !important;
  }
  .modal-foot .btn{
    width: 100% !important;
    padding: 13px !important;
    font-size: 14px !important;
  }

  /* ---------- PAGINATION ---------- */
  .pagination{
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding-top: 12px !important;
  }
  .pg-info{
    text-align: center !important;
    font-size: 11.5px !important;
  }
  .pg-controls{
    justify-content: center !important;
    gap: 4px !important;
  }
  .pg-btn{
    min-width: 32px !important;
    height: 32px !important;
    padding: 0 9px !important;
    font-size: 12px !important;
  }

  /* ---------- LISTS ---------- */
  .bar-label{
    font-size: 12px !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  .bar-track{ height: 7px !important }
  .simple-item{
    padding: 11px 12px !important;
    font-size: 12.5px !important;
  }
  .simple-item b{ font-size: 12.5px !important }

  /* ---------- TOASTS ---------- */
  .toast-root{
    top: auto !important;
    bottom: 90px !important;
    left: 12px !important;
    right: 12px !important;
  }
  .toast{
    min-width: 0 !important;
    width: 100% !important;
    padding: 12px 16px !important;
    font-size: 13px !important;
  }

  /* ---------- SCAN ---------- */
  .scan-inputs{
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .scan-btn{
    min-height: 52px !important;
    font-size: 13.5px !important;
  }
  .scan-viewer{
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    border-radius: 0 !important;
  }
  .scan-viewer-head{
    padding: 14px 16px !important;
  }
  .scan-viewer-head h3{ font-size: 14px !important }

  /* ---------- CAMERA ---------- */
  .cam-controls{
    gap: 20px !important;
    padding: 20px 14px !important;
    padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important;
  }
  .cam-capture{
    width: 72px !important;
    height: 72px !important;
  }
  .cam-btn-side{
    width: 48px !important;
    height: 48px !important;
  }
  .cam-guide-frame{
    width: 85% !important;
  }
  .cam-header{
    padding: 14px 16px !important;
    padding-top: calc(14px + env(safe-area-inset-top)) !important;
  }

  /* ---------- MOBILE NAV (bottom bar) ---------- */
  .mobile-nav{
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: #fff !important;
    border-top: 1px solid #e5e9f2 !important;
    z-index: 90 !important;
    padding: 6px 4px !important;
    padding-bottom: calc(6px + env(safe-area-inset-bottom)) !important;
    box-shadow: 0 -6px 24px rgba(15,23,42,.08) !important;
  }
  .mn-item{
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    padding: 6px 2px !important;
    color: #94a3b8 !important;
    font-size: 9.5px !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }
  .mn-item span{
    font-size: 19px !important;
    line-height: 1 !important;
  }
  .mn-item small{
    font-size: 9.5px !important;
    line-height: 1 !important;
  }
  .mn-item.active{
    color: #6366f1 !important;
    background: #eef2ff !important;
  }

  /* ---------- FIX iOS ---------- */
  input, select, textarea{ font-size: 16px !important }

  /* ---------- SAFE AREAS ---------- */
  @supports(padding: max(0px)){
    .topbar{
      padding-left: calc(12px + env(safe-area-inset-left)) !important;
      padding-right: calc(12px + env(safe-area-inset-right)) !important;
    }
    .panel{
      padding-left: calc(12px + env(safe-area-inset-left)) !important;
      padding-right: calc(12px + env(safe-area-inset-right)) !important;
    }
  }
}

/* ===== TRÈS PETIT (max 360px) ===== */
@media (max-width: 360px){
  .kpi-grid,
  .kpi-grid-6{
    grid-template-columns: 1fr !important;
  }
  .product-grid{
    grid-template-columns: 1fr !important;
  }
  .page-title h2{ font-size: 14px !important }
  .kpi-value{ font-size: 14px !important }
  .mn-item small{ font-size: 9px !important }
  .mn-item span{ font-size: 17px !important }
}

/* ===== LANDSCAPE MOBILE ===== */
@media (max-width: 900px) and (orientation: landscape){
  .mobile-nav{
    padding: 4px 4px !important;
  }
  .mn-item{ padding: 4px 2px !important }
  .mn-item span{ font-size: 16px !important }
  .mn-item small{ font-size: 8.5px !important }
}