/* ==========================================================================
   Nappay Web — lớp tiện ích bổ sung trên nền Gentelella v4
   Cung cấp các class tiện ích kiểu Bootstrap (spacing, grid col-md-*, text-*)
   mà bộ CSS Gentelella không có, để các trang Jinja cũ hiển thị đúng mà không
   phải viết lại toàn bộ markup. Nạp SAU main-v4.css của Gentelella.
   Dùng các biến màu (--primary, --green...) của Gentelella để tự đồng bộ dark mode.
   ========================================================================== */

/* ---------- Grid kiểu Bootstrap (ghi đè .row grid của Gentelella cho trang app) ---------- */
.row.g-2, .row.g-3 { display: flex; flex-wrap: wrap; margin: 0 -8px 16px; gap: 0; }
.row.g-2 > [class*="col-"], .row.g-3 > [class*="col-"] { padding: 0 8px; margin-bottom: 16px; }

.col-md-3 { flex: 0 0 25%; max-width: 25%; }
.col-md-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
.col-md-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
@media (max-width: 992px) {
  .col-md-3 { flex: 0 0 50%; max-width: 50%; }
}
@media (max-width: 768px) {
  .col-md-3, .col-md-4, .col-md-8 { flex: 0 0 100%; max-width: 100%; }
}

/* ---------- Flex helpers ---------- */
.d-flex { display: flex; }
.align-middle { vertical-align: middle; }
.h-100 { height: 100%; }
.w-100 { width: 100%; }
.ms-auto { margin-left: auto; }
.gap-1 { gap: 4px; }
.gap-2 { gap: 8px; }
.col-auto { flex: 0 0 auto; max-width: none; }
.text-decoration-none, .text-decoration-none:hover { text-decoration: none; }
.shadow-sm { box-shadow: var(--shadow-card); }

/* ---------- Spacing ---------- */
.p-3 { padding: 16px; }
.p-4 { padding: 24px; }
.py-2 { padding-top: 8px; padding-bottom: 8px; }
.py-3 { padding-top: 16px; padding-bottom: 16px; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 16px; }
.mb-4 { margin-bottom: 24px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 16px; }
.me-2 { margin-right: 8px; }

/* ---------- Text ---------- */
.text-center { text-align: center; }
.text-muted, .text-body-secondary { color: var(--text-muted) !important; }
.text-success { color: var(--green) !important; }
.text-danger { color: var(--red) !important; }
.text-warning { color: var(--yellow) !important; }
.small { font-size: 12.5px; }
.fs-4 { font-size: 1.5rem; line-height: 1.2; }
.fs-5 { font-size: 1.15rem; }
.fw-bold { font-weight: 600; }

/* ---------- Bù các biến thể select/button mà Gentelella không có ---------- */
.form-select {
  display: block;
  width: 100%;
  height: 36px;
  padding: 0 32px 0 12px;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  outline: none;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%237e8896' stroke-width='1.5'%3E%3Cpath d='M3 5l3 3 3-3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  transition: border-color 150ms, box-shadow 150ms;
}
.form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-lt); }
.form-select-sm { height: 30px; font-size: 12px; }

.btn-outline-primary { background: transparent; border: 1px solid var(--primary); color: var(--primary); }
.btn-outline-primary:hover { background: var(--primary-lt); }
.btn-outline-danger { background: transparent; border: 1px solid var(--red); color: var(--red); }
.btn-outline-danger:hover { background: var(--red-lt); }
.btn-outline-warning { background: transparent; border: 1px solid var(--yellow); color: #b45309; }
.btn-outline-warning:hover { background: var(--yellow-lt); }
.btn-outline-success { background: transparent; border: 1px solid var(--green); color: var(--green); }
.btn-outline-success:hover { background: var(--green-lt); }
.btn-link { background: none; border: none; color: var(--primary); padding: 0; height: auto; }
.btn-link:hover { text-decoration: underline; }

/* ---------- table-borderless ---------- */
table.table.table-borderless th,
table.table.table-borderless td { border-bottom: none; padding: 6px 8px; }
table.table.table-borderless th { color: var(--text-muted); font-weight: var(--font-weight-medium); width: 200px; }

/* ---------- Trạng thái giao dịch (badge chữ) ---------- */
.status-pending, .status-success, .status-failed,
.status-wrong_value, .status-canceled, .status-approved,
.status-rejected {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  text-transform: capitalize;
}
.status-pending::before, .status-success::before, .status-failed::before,
.status-wrong_value::before, .status-canceled::before, .status-approved::before,
.status-rejected::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  background: currentColor;
}
.status-success, .status-approved { color: var(--green); }
.status-pending { color: #b45309; }
.status-failed, .status-wrong_value, .status-rejected { color: var(--red); }
.status-canceled { color: var(--text-muted); }

/* ---------- Card dịch vụ (link nhanh trên dashboard) ---------- */
.card-service {
  display: block;
  padding: 16px;
  height: 100%;
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.card-service:hover { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.card-service h6 { margin: 0 0 6px; font-size: 14px; font-weight: 600; color: var(--text); }

/* ---------- Khối mã thẻ nhận được ---------- */
.result-card-item {
  border: 1px dashed var(--primary);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 8px;
  background: var(--primary-lt);
  font-size: 13px;
}

/* ---------- Pagination ---------- */
.pagination { display: flex; list-style: none; padding: 0; margin: 0; gap: 4px; }
.pagination .page-item .page-link {
  display: block;
  padding: 6px 12px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--primary);
  background: var(--bg-surface);
  font-size: 13px;
  text-decoration: none;
}
.pagination .page-item .page-link:hover { background: var(--bg-surface-secondary); }
.pagination .page-item.disabled .page-link { color: var(--text-muted); background: var(--bg-surface-secondary); cursor: default; }

/* ---------- Badge nhỏ (inline) ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 4px;
  line-height: 1.6;
}
.badge.bg-primary { background: var(--primary-lt); color: var(--primary); }

/* ---------- Tiện ích nhỏ khác ---------- */
h4 { font-size: 18px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
h5 { font-size: 16px; font-weight: 600; color: var(--text); }
h6 { color: var(--text); }
code {
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 1px 5px;
  background: var(--bg-surface-secondary);
  border: 1px solid var(--border-color-light);
  border-radius: 4px;
}