/* ===== GLOBAL COLORS ===== */
body {
  background: linear-gradient(135deg, #eef2f7, #dbe7f3);
  font-family: "Segoe UI", Tahoma, sans-serif;
}

/* ===== TOP INPUT AREA ===== */
.row.g-3.p-3 {
  background: linear-gradient(135deg, #1e3c72, #2a5298);
  border-radius: 10px;
  margin: 10px;
  color: #fff;
}

.row.g-3.p-3 input,
.row.g-3.p-3 select {
  border-radius: 8px;
  border: none;
}

.row.g-3.p-3 input:focus,
.row.g-3.p-3 select:focus {
  box-shadow: 0 0 0 2px rgba(255,255,255,0.4);
}

/* My Button */
#mybtn {
  background: linear-gradient(135deg, #ff9800, #ff5722);
  border: none;
  font-weight: bold;
}

#mybtn:hover {
  background: linear-gradient(135deg, #ff5722, #e64a19);
}

/* Ask Qty checkbox */
#askQty {
  transform: scale(1.2);
  margin-right: 5px;
}

/* ===== TABLE SECTION ===== */
.table-section {
  background: #ffffff;
  border-radius: 12px;
  margin: 10px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

/* Table Header */
.table thead {
  background: linear-gradient(135deg, #2c3e50, #34495e);
  color: #fff;
}

/* Table Rows */
.table tbody tr {
  transition: all 0.2s ease-in-out;
}

.table tbody tr:hover {
  background: #f1f6ff;
}

/* Qty & Discount buttons */
.qty-cell button,
.discount-cell button {
  background: #3498db;
  border: none;
  color: #fff;
  border-radius: 6px;
}

.qty-cell button:hover,
.discount-cell button:hover {
  background: #1d6fa5;
}

/* ===== TABLE FOOTER ===== */
tfoot {
  background: #f8f9fa;
  font-weight: bold;
}

/* ===== BOTTOM TOTAL SECTION ===== */
.row.g-3.p-3.bg-light.border-top {
  background: linear-gradient(135deg, #ffffff, #f1f5fb);
  border-radius: 12px;
  margin: 10px;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.05);
}

.row.g-3.p-3.bg-light.border-top input {
  border-radius: 8px;
  border: 1px solid #d0d7e2;
  font-weight: bold;
}

/* NET TOTAL */
#ntotal {
  background: #2ecc71;
  color: #fff;
  font-size: 18px;
}

/* Balance */
#balance {
  background: #f39c12;
  color: #fff;
}

/* ===== MODAL ===== */
.modal-content {
  background: linear-gradient(135deg, #ffffff, #f4f7fb);
  box-shadow: 0 15px 40px rgba(0,0,0,0.3);
}

.modal-title {
  color: #2c3e50;
}

/* Modal Buttons */
#qtyConfirm {
  background: #27ae60;
  color: #fff;
  border: none;
  border-radius: 6px;
}

#qtyCancel {
  background: #e74c3c;
  color: #fff;
  border: none;
  border-radius: 6px;
}

#qtyConfirm:hover {
  background: #1e8449;
}

#qtyCancel:hover {
  background: #c0392b;
}