/* ====== สีอ้างอิง TopUnity (Teal Premium Refined Palette) ====== */
:root {
  /* Brand core */
  --tu-primary-900: #00201d;
  --tu-primary-800: #01312b;
  --tu-primary-700: #014b43;
  --tu-primary-600: #01584f;
  --tu-primary-500: #016b61; /* หลัก */
  --tu-primary-450: #0f8378;
  --tu-primary-400: #1b9a8e; /* hover / accent */
  --tu-primary-350: #3ab1a6;
  --tu-primary-300: #63c4bb; /* medium tone */
  --tu-primary-250: #86d3cb;
  --tu-primary-200: #a9e2db;
  --tu-primary-100: #cdefea;
  --tu-primary-50: #eaf8f6;

  /* RGB helper */
  --tu-primary-500-rgb: 1, 107, 97;
  --tu-primary-400-rgb: 27, 154, 142;
  --tu-primary-300-rgb: 99, 196, 187;
  --tu-primary-200-rgb: 169, 226, 219;

  /* Text & background */
  --tu-text: #0e1f1c;
  --tu-text-secondary: #1b9a8e;
  --tu-text-on-dark: #e9fcfa;
  --tu-bg: #f3fbfa;
  --tu-bg-section: #e6f7f5;
  --tu-bg-dark: #013a34;
  --tu-border: #d3e8e5;

  /* Status */
  --tu-success: #23b37a;
  --tu-warning: #f8a400;
  --tu-danger: #ea5455;

  /* Glow & shadow */
  --tu-glow-outer: 0 12px 28px rgba(var(--tu-primary-500-rgb), 0.25), 0 2px 6px rgba(0, 0, 0, 0.08);
  --tu-glow-soft: 0 8px 22px rgba(var(--tu-primary-300-rgb), 0.3);
  --tu-ring: 0 0 0 4px rgba(var(--tu-primary-300-rgb), 0.32);

  /* Gradients */
  --tu-grad-hero: linear-gradient(135deg, var(--tu-primary-700) 0%, var(--tu-primary-500) 45%, var(--tu-primary-300) 100%);
  --tu-grad-accent: linear-gradient(118deg, var(--tu-primary-450) 0%, var(--tu-primary-600) 100%);
  --tu-grad-soft: linear-gradient(180deg, rgba(var(--tu-primary-200-rgb), 0.28), rgba(var(--tu-primary-300-rgb), 0.25));
}

/* ================= Table ================= */
.tu-table .ant-table {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(var(--tu-primary-500-rgb), 0.08);
  overflow: hidden;
  border: 1px solid var(--tu-border);
}

/* Header */
.tu-table .ant-table-thead > tr > th {
  background: linear-gradient(180deg, #00312c, var(--tu-primary-500));
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  border-bottom: 0;
  padding: 14px 16px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}
.tu-table .ant-table-thead > tr > th:first-child {
  border-top-left-radius: 12px;
}
.tu-table .ant-table-thead > tr > th:last-child {
  border-top-right-radius: 12px;
}

/* Cells */
.tu-table .ant-table-tbody > tr > td {
  padding: 14px 16px;
  color: var(--tu-text);
  border-bottom: 1px dashed #dceae8;
}

/* Zebra */
.tu-table .ant-table-tbody > tr:nth-child(odd) > td {
  background: #ffffff;
}
.tu-table .ant-table-tbody > tr:nth-child(even) > td {
  background: #f8fcfb;
}

/* Hover / Selected */
.tu-table .ant-table-tbody > tr:hover > td {
  background: rgba(var(--tu-primary-200-rgb), 0.3) !important;
}
.tu-table .ant-table-row-selected > td {
  background: rgba(var(--tu-primary-300-rgb), 0.28) !important;
}

/* ================= Pagination ================= */
.tu-table .ant-pagination {
  margin: 20px 12px !important;
  gap: 8px;
}

/* Default page buttons (ตัวเลข) */
.tu-table .ant-pagination-item,
.tu-table .ant-pagination-prev .ant-pagination-item-link,
.tu-table .ant-pagination-next .ant-pagination-item-link {
  height: 36px;
  min-width: 36px;
  padding: 0 10px;
  border-radius: 12px;
  border: 1px solid #b8e0da;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(1, 107, 97, 0.06);
  transition: all 0.25s ease;
}
.tu-table .ant-pagination-item a {
  color: var(--tu-primary-600);
  font-weight: 600;
}

/* Hover */
.tu-table .ant-pagination-item:hover,
.tu-table .ant-pagination-prev:hover .ant-pagination-item-link,
.tu-table .ant-pagination-next:hover .ant-pagination-item-link {
  border-color: var(--tu-primary-400);
  background: color-mix(in srgb, var(--tu-primary-200) 25%, white);
  box-shadow: 0 6px 14px rgba(1, 107, 97, 0.18);
  transform: translateY(-1px);
}
.tu-table .ant-pagination-item:hover a {
  color: var(--tu-primary-500);
}

/* Active number */
.tu-table .ant-pagination-item-active {
  background: var(--tu-primary-500) !important;
  border-color: var(--tu-primary-500) !important;
  box-shadow: 0 10px 20px rgba(1, 107, 97, 0.28);
  transform: translateY(-1px);
}
.tu-table .ant-pagination-item-active a {
  color: #fff !important;
}

/* Focus ring */
.tu-table .ant-pagination-item:focus-visible,
.tu-table .ant-pagination-prev .ant-pagination-item-link:focus-visible,
.tu-table .ant-pagination-next .ant-pagination-item-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(99, 196, 187, 0.45);
}

/* ==== Prev/Next arrow buttons: ทำพื้นเป็น teal + ลูกศรสีขาวชัด ==== */

/* ให้พื้นของ Prev/Next เป็น teal เข้มตั้งแต่เริ่ม (เพื่อคอนทราสต์สูง) */
.tu-table .ant-pagination-prev .ant-pagination-item-link,
.tu-table .ant-pagination-next .ant-pagination-item-link {
  background: linear-gradient(180deg, var(--tu-primary-700), var(--tu-primary-500)) !important;
  border-color: var(--tu-primary-600) !important;
  color: #fff !important; /* บางธีมใช้ color อิงกับ svg */
}

/* ทำไอคอนลูกศรเป็นสีขาวทุกสถานะ (ยกเว้น disabled) */
.tu-table .ant-pagination-prev .ant-pagination-item-link .anticon,
.tu-table .ant-pagination-next .ant-pagination-item-link .anticon,
.tu-table .ant-pagination-prev .ant-pagination-item-link .anticon svg,
.tu-table .ant-pagination-next .ant-pagination-item-link .anticon svg {
  color: #fff !important;
  fill: #fff !important;
  stroke: #fff !important;
}

/* hover/active ของ Prev/Next — สว่างขึ้นเล็กน้อย ยังเป็นขาว */
.tu-table .ant-pagination-prev:hover .ant-pagination-item-link,
.tu-table .ant-pagination-next:hover .ant-pagination-item-link {
  background: linear-gradient(180deg, var(--tu-primary-600), var(--tu-primary-450)) !important;
  border-color: var(--tu-primary-450) !important;
}
.tu-table .ant-pagination-prev:hover .ant-pagination-item-link .anticon,
.tu-table .ant-pagination-next:hover .ant-pagination-item-link .anticon,
.tu-table .ant-pagination-prev:hover .ant-pagination-item-link .anticon svg,
.tu-table .ant-pagination-next:hover .ant-pagination-item-link .anticon svg {
  color: #fff !important;
  fill: #fff !important;
}

/* Disabled (ปรับให้มองเห็นชัดและไม่เป็นสีขาว) */
.tu-table .ant-pagination-disabled .ant-pagination-item-link,
.tu-table .ant-pagination-disabled .ant-pagination-item {
  color: #5e726f !important;
  border-color: #b9d2ce !important;
  background: #eaf3f2 !important;
  box-shadow: none !important;
  transform: none !important;
  cursor: not-allowed;
  opacity: 0.95;
}
:where(.ant-pagination) .ant-pagination-disabled .ant-pagination-item-link,
:where(.ant-pagination) .ant-pagination-disabled:hover .ant-pagination-item-link {
  color: #5e726f !important;
  border-color: #b9d2ce !important;
  background: #eaf3f2 !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  opacity: 0.95;
}
/* ไอคอนลูกศรใน disabled เป็นเทาเขียวเข้มอ่านได้ แต่ชัดว่าใช้ไม่ได้ */
.tu-table .ant-pagination-disabled .ant-pagination-item-link .anticon,
.tu-table .ant-pagination-disabled .ant-pagination-item-link .anticon svg {
  color: #5e726f !important;
  fill: #5e726f !important;
}

/* ================= Chips ================= */
.tu-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-weight: 600;
  font-size: 12px;
  border-radius: 999px;
  border: 1px solid transparent;
}

/* Refined chip tones */
.tu-chip--success {
  color: #135f4a;
  background: #e5f7f2;
  border-color: #b5eadb;
}
.tu-chip--warning {
  color: #7c4f00;
  background: #fff7e0;
  border-color: #ffecb8;
}
.tu-chip--danger {
  color: #7a1f24;
  background: #fdecee;
  border-color: #f5c5c8;
}
.tu-chip--info {
  color: #084d46;
  background: #e7faf8;
  border-color: #c3f2eb;
}

/* ================= Table Action Buttons ================= */
.tu-table .tu-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: var(--tu-primary-500);
  color: #fff;
  box-shadow: 0 10px 20px rgba(var(--tu-primary-500-rgb), 0.18);
  transition: all 0.25s ease;
}
.tu-table .tu-action:hover {
  background: var(--tu-primary-400);
  transform: translateY(-1px);
}
.tu-table .tu-action--ghost {
  background: #01332d;
  color: #fff;
}

/* ================= table-custom (legacy) ================= */
.table-custom tr th {
  text-align: center;
  border-bottom-width: 0 !important;
  background: linear-gradient(180deg, #00312c, var(--tu-primary-500));
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  padding: 14px 16px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}
.table-custom tbody tr:hover td {
  background: rgba(var(--tu-primary-200-rgb), 0.25);
  cursor: pointer;
}

/* Floating button bottom-right */
.fixed-bottom-right {
  position: absolute;
  bottom: 0;
  right: 0;
  margin-right: 30px;
}

:where(.css-dev-only-do-not-override-1m63z2v).ant-pagination .ant-pagination-prev .ant-pagination-item-link,
:where(.css-dev-only-do-not-override-1m63z2v).ant-pagination .ant-pagination-next .ant-pagination-item-link {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  font-size: 12px;
  text-align: center;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  outline: none;
  transition: all 0.2s;
  color: var(--tu-primary-100);
}
/* ==========================================================
   FIXED RIGHT COLUMN (Action Column / Sticky Right Column)
   ========================================================== */

/* ให้ header คอลัมน์ที่ fixed-right เป็นสีเดียวกับหัวตารางหลัก */
.tu-table .ant-table-thead > tr > th.ant-table-cell-fix-right,
.tu-table .ant-table-thead > tr > th.ant-table-cell-fix-right-first {
  background: linear-gradient(180deg, #00312c, var(--tu-primary-500)) !important;
  color: #fff !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}

/* ให้ body cell ของคอลัมน์ fixed-right ใช้ฟิลลิ่งเดียวกับ row */
.tu-table .ant-table-tbody > tr > td.ant-table-cell-fix-right,
.tu-table .ant-table-tbody > tr > td.ant-table-cell-fix-right-first {
  background-color: #ffffff !important;
  backdrop-filter: blur(0px);
  z-index: 9;
}

/* Hover แล้ว background ต้องเหมือนกับที่ตั้งไว้ */
.tu-table .ant-table-tbody > tr:hover > td.ant-table-cell-fix-right,
.tu-table .ant-table-tbody > tr:hover > td.ant-table-cell-fix-right-first {
  background: rgba(var(--tu-primary-200-rgb), 0.3) !important;
}

/* Shadow ขอบขวาเวลา scroll (ping-right) */
.tu-table .ant-table-ping-right .ant-table-cell-fix-right-first::after {
  box-shadow: -12px 0 22px -8px rgba(var(--tu-primary-500-rgb), 0.35) !important;
  background: linear-gradient(to left, rgba(var(--tu-primary-500-rgb), 0.28), rgba(var(--tu-primary-300-rgb), 0.1), transparent) !important;
}

/* ลบเส้นขาวที่บางที AntD สร้างไว้เอง */
.tu-table .ant-table-cell-fix-right::before,
.tu-table .ant-table-cell-fix-right-first::before {
  border-left: none !important;
}

/* ถ้าเป็นปุ่ม action ใน column นี้ */
.tu-table .ant-table-cell-fix-right .tu-action,
.tu-table .ant-table-cell-fix-right-first .tu-action {
  box-shadow: 0 10px 20px rgba(var(--tu-primary-500-rgb), 0.28);
  border-radius: 12px;
}