/* =========================================================================
   UI KIT — bộ giao diện dùng chung, đồng bộ với hệ thống hoadonvat
   (thẻ số liệu nền màu, bảng hiện đại, pill trạng thái, thanh lọc)
   ========================================================================= */

:root {
  /* Navbar là fixed-top nên tiêu đề bảng phải dính DƯỚI navbar, không thì bị che.
     Trùng với padding-top của body trong navbar.css. */
  --app-sticky-top: 58px;
}
@media (max-width: 991.98px) {
  :root { --app-sticky-top: 54px; }
}

/* ===== Thẻ số liệu nền màu đầy ===== */
.stat-row { display: flex; flex-wrap: wrap; gap: .6rem; }
.stat-card {
  flex: 1 1 190px;
  min-width: 170px;
  display: block;
  padding: .7rem .9rem;
  border: 0;
  border-radius: 12px;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 4px 12px -6px rgba(15, 23, 42, .45);
  transition: box-shadow .14s, transform .14s, filter .14s;
}
a.stat-card:hover {
  color: #fff;
  filter: brightness(1.06);
  box-shadow: 0 10px 22px -8px rgba(15, 23, 42, .5);
  transform: translateY(-2px);
}
.stat-card .stat-label {
  display: block;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .85);
  margin-bottom: .1rem;
}
.stat-card .stat-value {
  display: block;
  font-size: 1.35rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}
.stat-card .stat-value small,
.stat-card .stat-sub {
  color: rgba(255, 255, 255, .85) !important;
  font-weight: 400;
}
.stat-card .stat-sub {
  display: block;
  font-size: .76rem;
  font-variant-numeric: tabular-nums;
  margin-top: .1rem;
}
.stat-card .stat-icon {
  float: right;
  font-size: 1.35rem;
  opacity: .35;
  margin-top: .1rem;
}
.stat-card.is-alert {
  animation: statPulse 1.6s ease-in-out infinite;
}
@keyframes statPulse {
  0%, 100% { box-shadow: 0 4px 12px -6px rgba(15, 23, 42, .45); }
  50%      { box-shadow: 0 0 0 4px rgba(239, 68, 68, .35), 0 4px 12px -6px rgba(15, 23, 42, .45); }
}

/* Bảng màu — dùng chung tên với hoadonvat */
.stat-slate   { background: linear-gradient(135deg, #475569, #1e293b); }
.stat-blue    { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.stat-green   { background: linear-gradient(135deg, #22c55e, #16a34a); }
.stat-amber   { background: linear-gradient(135deg, #f59e0b, #d97706); }
.stat-red     { background: linear-gradient(135deg, #ef4444, #dc2626); }
.stat-cyan    { background: linear-gradient(135deg, #06b6d4, #0891b2); }
.stat-violet  { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.stat-pink    { background: linear-gradient(135deg, #ec4899, #db2777); }

/* ===== Khung + bảng dữ liệu hiện đại ===== */
.data-card {
  border: 1px solid #e7ecf3;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.data-card > .data-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
  padding: .7rem .9rem;
  border-bottom: 1px solid #eef2f7;
  background: #fff;
}
.data-card > .data-card-header h5,
.data-card > .data-card-header .title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
}
.data-card > .table-responsive { border-radius: 0 0 12px 12px; }

.data-table {
  margin-bottom: 0;
  border-collapse: separate;
  border-spacing: 0;
  font-size: .9rem;
}
.data-table > thead th {
  background: #f8fafc;
  border: 0;
  border-bottom: 1px solid #e2e8f0 !important;
  padding: .7rem .75rem;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #64748b;
  white-space: nowrap;
}

/* Tiêu đề dính: CHỈ dùng cho bảng dài phải cuộn nhiều.
   Bảng ngắn mà bật cái này thì tiêu đề bị ghim dưới navbar và đè lên
   chính mấy dòng dữ liệu của nó. */
.data-table.table-sticky > thead th {
  position: sticky;
  top: var(--app-sticky-top, 0);
  z-index: 2;
  box-shadow: 0 1px 0 #e2e8f0;
}
.data-table > tbody td {
  border: 0;
  border-bottom: 1px solid #f1f5f9;
  padding: .6rem .75rem;
  vertical-align: middle;
  color: #1e293b;
}
.data-table > tbody tr:last-child td { border-bottom: 0; }
.data-table > tbody tr { transition: background .12s ease; }
.data-table > tbody tr:hover { background: #f8fbff; }
.data-table > tbody tr.is-selected { background: #eef4ff; }
/* Dòng phân nhóm giữa bảng (vd gộp theo ngày) */
.data-table > tbody tr.row-group > td {
  background: #eef2f7;
  border-top: 1px solid #dbe3ec;
  border-bottom: 1px solid #dbe3ec;
  color: #334155;
  font-size: .85rem;
}
.data-table > tbody tr.row-group:hover > td { background: #eef2f7; }

.data-table > tbody tr.row-alert > td { background: #fff5f5; }
.data-table > tbody tr.row-alert:hover > td { background: #ffecec; }
.data-table > tbody tr.row-total {
  background: #f8fafc;
  border-top: 2px solid #e2e8f0;
}
.data-table > tbody tr.row-total:hover { background: #f8fafc; }

/* Dòng tổng ở chân bảng */
.data-table > tfoot td {
  border: 0;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
  padding: .55rem .75rem;
  font-weight: 700;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
}

/* Bảng nhiều cột, cần gọn hơn */
.data-table.table-compact > thead th { padding: .5rem .5rem; }
.data-table.table-compact > tbody td { padding: .45rem .5rem; }

.data-table .cell-money,
.data-table .cell-num {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: #0f172a;
  white-space: nowrap;
}
.data-table .cell-idx { color: #94a3b8; font-size: .82rem; }
.data-table .cell-muted { color: #94a3b8; }
.data-table .cell-empty::after { content: "—"; color: #cbd5e1; }
.data-table a.link-quiet {
  color: #1d4ed8;
  text-decoration: none;
  font-weight: 600;
}
.data-table a.link-quiet:hover { text-decoration: underline; }

/* ===== Pill trạng thái ===== */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .22rem .6rem;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  border: 1px solid transparent;
}
.status-pill::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}
.pill-red    { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.pill-blue   { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.pill-amber  { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.pill-green  { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }
.pill-slate  { background: #f8fafc; color: #64748b; border-color: #e2e8f0; }

/* ===== Thanh lọc: ô nhập & nút cùng chiều cao ===== */
.filter-bar {
  border: 1px solid #e7ecf3;
  border-radius: 12px;
  background: #f8fafc;
  padding: .7rem .8rem;
}
.filter-bar .form-control,
.filter-bar .form-select,
.filter-bar .btn {
  font-size: .88rem;
  height: 38px;
  border-radius: 8px;
}
.filter-bar .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  padding: 0 .9rem;
  font-weight: 600;
  white-space: nowrap;
}
.filter-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

/* Trên mobile app.css ép min-height 48px cho input/btn — tôn trọng điều đó */
@media (max-width: 991.98px) {
  .filter-bar .form-control,
  .filter-bar .form-select,
  .filter-bar .btn { height: auto; }
  .filter-actions .btn { flex: 1 1 auto; }
}
@media (max-width: 767.98px) {
  .stat-card { flex: 1 1 100%; }
  .data-table { font-size: .85rem; }
}