/* Table Card Style */
.table-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 400px;

  border-radius: 1rem !important;
  overflow: hidden;

  /* 1. ? แก้ตรงนี้: กลับมาใช้สี Glass (แทน transparent) ให้เหมือนต้นฉบับ */
  background-color: #ffffff !important;

  border: none !important;
  box-shadow: none !important;
}

/* 2. ? เพิ่มส่วนนี้: ปิด Hover Effect (ไม่ให้เปลี่ยนสี/ไม่ให้เด้ง) เฉพาะการ์ดนี้ */
.table-card:hover {
  background-color: #ffffff !important; /* บังคับสีเดิม */
  transform: none !important; /* ห้ามขยับ */
  box-shadow: none !important; /* ห้ามมีเงาเพิ่ม */
}

/* 2. Header & Button */
.card-header h3 {
  font-size: 1.125rem; /* text-lg */
  font-weight: 600;
  color: #464545; /* text-charcoal */
  margin: 0;
}

.btn-view-all {
  font-size: 0.875rem; /* text-sm */
  color: var(--primary);
  font-weight: 700; /* font-bold */
  background: none;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-view-all:hover {
  text-decoration: underline;
}

/* 3. Table Layout */
.table-responsive {
  overflow-x: auto;
  margin-top: 1rem;
}
.table-responsive::-webkit-scrollbar {
  display: none;
}

.data-table {
  width: 100%;
  border-collapse: collapse; /* ใช้ collapse เพื่อจัดการเส้นคั่นได้ง่าย */
  font-size: 0.875rem; /* text-sm */
}

/* 4. Table Head (สีเทาอ่อน/ตัวหนังสือจาง) */
.data-table thead th {
  background-color: rgba(255, 255, 255, 0.5); /* bg-white/50 */
  color: rgba(70, 69, 69, 0.6); /* text-charcoal/60 */
  font-size: 0.75rem; /* text-xs */
  text-transform: uppercase;
  font-weight: 600;
  padding: 0.75rem 1rem;

  /* ? แก้ไข: ตั้งค่าเริ่มต้นเป็น left แต่ยอมให้ class อื่นทับได้ */
  text-align: left;
  vertical-align: middle; /* จัดกึ่งกลางแนวตั้ง */
  white-space: nowrap;
}

/* ?? เพิ่มส่วนนี้: บังคับให้ Header ยอมชิดขวา/กลาง ตาม Class ที่ใส่ใน HTML */
.data-table thead th.text-right {
  text-align: right !important;
}
.data-table thead th.text-center {
  text-align: center !important;
}

/* มุมโค้งของ Header */
.rounded-l-lg {
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}
.rounded-r-lg {
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}

/* 5. Table Body */
.data-table tbody tr {
  transition: background-color 0.2s;
  border-bottom: 1px solid rgba(220, 220, 220, 0.3); /* divide-silver/30 */
}
.data-table tbody tr:last-child {
  border-bottom: none;
}
.data-table tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.5); /* hover:bg-white/50 */
}

.data-table td {
  padding: 0.75rem 1rem;
  color: #464545; /* text-charcoal */
  vertical-align: middle; /* จัดกึ่งกลางแนวตั้ง */
}

/* 6. Typography Helpers */
.font-sans {
  font-family: "Inter", sans-serif;
}
.font-medium {
  font-weight: 500;
}

/* Utility Classes ทั่วไป */
.text-right {
  text-align: right;
}
.text-center {
  text-align: center;
}

.text-muted {
  color: rgba(70, 69, 69, 0.6);
}
.text-charcoal-40 {
  color: rgba(70, 69, 69, 0.4);
}

/* 7. Components inside Table */
.td-icon {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.td-icon .material-icons-round {
  font-size: 1rem; /* text-base */
}

/* Progress Bar */
.progress-wrapper {
  display: flex;
  align-items: center;
  justify-content: center; /* จัดให้อยู่กลาง ถ้าอยู่ในคอลัมน์กลาง */
  gap: 0.5rem;
}
.progress-track {
  width: 100%;
  min-width: 60px;
  height: 0.375rem; /* h-1.5 */
  background-color: #dcdcdc; /* bg-silver */
  border-radius: 9999px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  border-radius: 9999px;
}
.progress-text {
  font-size: 0.75rem; /* text-xs */
  font-family: "Inter", sans-serif;
  color: #464545;
}
.w-38 {
  width: 38%;
}
.w-78 {
  width: 78%;
}

/* 8. Status Pills */
.status-pill {
  display: inline-block;
  padding: 0.25rem 0.5rem; /* px-2 py-1 */
  border-radius: 0.375rem; /* rounded-md */
  font-size: 0.75rem; /* text-xs */
  font-weight: 700; /* font-bold */
  white-space: nowrap;
}

/* สีเขียวมะนาว (Lime) */
.bg-lime {
  background-color: #d0ff2c !important;
  color: #464545 !important;
}

/* สีเงิน (Silver) */
.bg-silver {
  background-color: #dcdcdc !important;
  color: #464545 !important;
}

/* --- Global Thai Typography + Lucide Guard --- */
html body,
html body * {
  font-family: "Inter", "Anuphan", sans-serif !important;
}

html body pre,
html body code,
html body kbd,
html body samp,
html body .font-mono {
  font-family:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace !important;
}

html body .material-icons-round {
  font-family: "Material Icons Round" !important;
  font-weight: normal !important;
  font-style: normal !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  white-space: nowrap !important;
  word-wrap: normal !important;
  direction: ltr !important;
  -webkit-font-smoothing: antialiased !important;
}

html body .material-symbols-outlined {
  font-family: "Material Symbols Outlined" !important;
  font-weight: normal !important;
  font-style: normal !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  white-space: nowrap !important;
  word-wrap: normal !important;
  direction: ltr !important;
  -webkit-font-smoothing: antialiased !important;
  font-variation-settings:
    "FILL" 0,
    "wght" 400,
    "GRAD" 0,
    "opsz" 24 !important;
}

html body svg.lucide,
html body .lucide,
html body [data-lucide],
html body i[data-lucide] {
  width: 1em;
  height: 1em;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  fill: none !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  flex-shrink: 0;
  vertical-align: middle;
  font-family: inherit !important;
  font-style: normal !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

html body svg.lucide *,
html body .lucide * {
  vector-effect: non-scaling-stroke;
}