body {
      font-family: 'Cairo', sans-serif;
      background: #f9fafb;
      padding: 5px;
    }

    .footer-totaux {
      background: #ffffff;
      border: 1px solid #e5e7eb;
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
      max-width: 500px;
      margin: auto;
      display: flex;
      flex-direction: column;
      gap: 15px;
    }

    /* Total section */
    .total-row {
      text-align: center;
      font-size: 1.2rem;
      font-weight: 700;
      color: #2563eb;
      padding-bottom: 10px;
      border-bottom: 1px solid #e5e7eb;
    }

    /* Règlement row */
    .reglement-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .reglement-row label {
      font-weight: 600;
      color: #374151;
    }

    .reglement-row input {
      width: 120px;
      padding: 8px;
      border: 1px solid #d1d5db;
      border-radius: 6px;
      text-align: right;
      font-size: 0.95rem;
      outline: none;
      transition: border-color 0.2s, box-shadow 0.2s;
    }

    .reglement-row input:focus {
      border-color: #2563eb;
      box-shadow: 0 0 0 2px rgba(37,99,235,0.2);
    }

   .checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  color: #374151;
}

.checkbox-row input {
  transform: scale(1.1);   /* ✅ أكبر شوية */
  margin: 0;               /* ✅ بدون مسافة غريبة */
  accent-color: #2563eb;   /* لون جميل */
}

    /* État row */
    .etat-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: 600;
    }

    .etat-row span {
      padding: 4px 10px;
      border-radius: 8px;
      font-size: 0.9rem;
    }

    .etat-ouvert {
      background: #fee2e2;
      color: #b91c1c;
    }

    .etat-ferme {
      background: #dcfce7;
      color: #166534;
    }
div.dt-buttons .btn {
  border-radius: 6px;
  margin-right: 4px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: 0.2s;
}
div.dt-buttons .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

    /* 📱 Responsive */
    @media (max-width: 600px) {
      .footer-totaux {
        padding: 15px;
        gap: 12px;
      }

      .reglement-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
      }

      .reglement-row input {
        width: 100%;
      }

      .etat-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
      }
    }
    #receipt58, 
#receipt80 {
  display: none;  /* مخفي */
  position: absolute;
 background: #fff;
}
/* Modal */
.modal {
 /* display: none;*/
  position: fixed;
  z-index: 9999;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.5);
  justify-content: center;
  align-items: center;
}
.modal-content {
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  max-width: 400px;
  width: 95%;
  box-shadow: 0 5px 20px rgba(0,0,0,0.3);
}
.close {
  float: right;
  font-size: 1.5rem;
  cursor: pointer;
}
#qr-reader {
  width: 100%;
  max-width: 350px;
  margin: auto;
  border: 2px solid #2563eb;
  border-radius: 8px;
}
.search-box {
  width: 100%;
  max-width: 280px;   /* أصغر شوية */
  margin: 8px auto 15px;
  position: relative;
}

.search-box input {
  width: 70%;
  padding: 8px 12px 8px 32px; /* أصغر من قبل */
  border: 1px solid #ccc;
  border-radius: 20px;
  font-size: 14px;
  transition: all 0.3s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  height: 34px;   /* نحدد الطول باش يكون أصغر */
}

.search-box input:focus {
  border-color: #256a3a;
  box-shadow: 0 2px 8px rgba(37,106,58,0.2);
  outline: none;
}

.search-box::before {
  
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: #888;
}
div.dt-buttons .btn {
  border-radius: 6px;
  margin-right: 4px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: 0.2s;
}
div.dt-buttons .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* Responsive */
@media (max-width: 600px) {
  .search-box {
    max-width: 100%;
    padding: 0 8px;
  }
  .search-box input {
    font-size: 13px;
    padding: 7px 10px 7px 30px;
    height: 32px;
  }
}
.spinner {
      border: 4px solid #f3f3f3;
      border-top: 4px solid #3498db;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      animation: spin 1s linear infinite;
      margin: auto;
    }
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    #bt-progress {
      text-align: center;
      padding: 10px;
      display: none; /* Masqué par défaut */
    }
/* 🟢 État fermé */
.etat-ferme {
  background-color: #dcfce7 !important;
}

/* 🔴 État ouvert */
.etat-ouvert {
  background-color: #fee2e2 !important;
}

/* Totaux DataTable */
#bonsTable tfoot td {
  font-weight: 700;
  background: #f9fafb;
  color: #1e3a8a;
  border-top: 2px solid #2563eb;
}
.badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
}

.badge-facture {
  background: #bbf7d0; /* Vert pâle */
  color: #166534;
}

.badge-nonfacture {
  background: #fef9c3; /* Jaune clair */
  color: #92400e;
}

#printFormatModal {
  position:fixed;top:0;left:0;width:100%;height:100%;
  background:rgba(0,0,0,0.4);display:flex;align-items:center;justify-content:center;z-index:9999;
}
#printFormatModal .btn-format {
  display:block;margin:5px 0;padding:10px 15px;border:none;
  background:#2563eb;color:white;border-radius:6px;cursor:pointer;
}
#printFormatModal .btn-format:hover {background:#1e3a8a;}

@media print {
  body.format-A5 { width:148mm;height:210mm; }
  body.format-ticket { width:80mm; }
}

/* 💻 PC (≥1200px) */
@media (min-width: 1200px) {
  #bonModal .modal-content {
    max-width: 900px;  /* très large للـ Bon */
  }
  #clientModal .modal-content,
  #produitModal .modal-content {
    max-width: 800px;  /* large للـ clients/produits */
  }
}
/* Par défaut (fallback si ماكانش media query) */
.table-lignes td input.qte-input { width: 50px; text-align: center; }
.table-lignes td input.unite-input { width: 50px; text-align: center; }
.table-lignes td input.prix-input { width: 120px; text-align: center; }

/* 🔹 شاشات كبيرة (PC / Desktop) */
@media (min-width: 1200px) {
  .table-lignes td input.qte-input { width: 50px; }
  .table-lignes td input.unite-input { width: 50px; }
  .table-lignes td input.prix-input { width: 150px; }
}

/* 🔹 شاشات متوسطة (Tablette) */
@media (min-width: 768px) and (max-width: 1199px) {
  .table-lignes td input.qte-input { width: 50px; }
  .table-lignes td input.unite-input { width: 50px; }
  .table-lignes td input.prix-input { width: 100px; }
}

/* 🔹 شاشات صغيرة (Téléphone portable) */
@media (max-width: 767px) {
  .table-lignes td input.qte-input { width: 20px; font-size: 14px; }
  .table-lignes td input.unite-input { width: 20px; font-size: 12px; }
  .table-lignes td input.prix-input { width: 45px; font-size: 12px; }
}


/* HEADER 2026 */
/* --- GLOBAL HEADER --- */
.bl-header {
    background: linear-gradient(90deg, #1d4ed8, #2563eb);
    padding: 22px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    color: #fff;
}

/* --- TITLE --- */
.bl-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 24px;
    font-weight: 700;
}

.bl-title i {
    font-size: 26px;
}


/* --- ACTIONS (Right Side) --- */
.bl-actions {
    display: flex;
    align-items: center;
    gap: 18px;
}


/* --- PC SWITCH --- */
.switch {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 24px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0;
    right: 0; bottom: 0;
    background-color: #93c5fd;
    border-radius: 34px;
    transition: 0.4s;
}

.slider:before {
    position: absolute;
    content: "";
    width: 18px; height: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    border-radius: 50%;
    transition: 0.4s;
}

.switch input:checked + .slider {
    background-color: #22c55e;
}

.switch input:checked + .slider:before {
    transform: translateX(22px);
}

.toggle-text {
    color: #e0e7ff;
    font-size: 14px;
    font-weight: 600;
}


/* --- ADD BUTTON --- */
.btn-add-bl {
    width: 45px;
    height: 45px;
    background: #22c55e;
    color: #fff;
    border: none;
    border-radius: 50%;
    font-size: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    transition: 0.2s;
}

.btn-add-bl:hover {
    background: #16a34a;
    transform: scale(1.07);
}
/* --- MOBILE FIX: Add button goes to next line --- */
/* ============================
   FIX HEADER RESPONSIVE (MOBILE)
   ============================ */
@media (max-width: 680px) {

    .bl-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding-bottom: 10px;
    }

    .bl-actions {
        width: 100%;
        display: flex;
        justify-content: space-between;
        gap: 10px;
    }

    /* Bouton Ajouter descend seul en bas */
    .btn-add-bl {
        order: 3;
        margin-top: 10px;
        align-self: flex-start; 
        /* يمكنك وضع center أو flex-end حسب رغبتك */
    }

    /* Mode PC toggle يكون في الأعلى */
    .switch {
        order: 1;
    }
    .toggle-text {
        order: 2;
    }
}
.submit-btn.is-loading {
  opacity: 0.75;
  cursor: not-allowed;
  pointer-events: none;
}