/* ==========================================================
 * WS Table Kit (Bootstrap 3 friendly)
 * ========================================================== */

/* ---------- Scope wrapper ---------- */
.ws-tbl{ font-size:14px; color:#0f172a; --br:#e5e7eb; --muted:#64748b; --ring:#60a5fa; }
.ws-tbl *{ box-sizing:border-box; }

/* ---------- Table base ---------- */
.ws-tbl .ws-grid{ width:100%; border-collapse:separate; border-spacing:0; background:#fff; }
.ws-tbl .ws-grid thead th{
  background:#f1f5f9; color:#0f172a; font-weight:700;
  border-bottom:1px solid var(--br); padding:10px 12px; white-space:nowrap;
}
.ws-tbl .ws-grid tbody td, .ws-tbl .ws-grid tbody th{
  padding:10px 12px; vertical-align:middle; border-top:1px solid #f6f7fb;
}

/* helpers */
.ws-tbl .ws-right{ text-align:right; }
.ws-tbl .ws-center{ text-align:center; }
.ws-tbl .ws-nowrap{ white-space:nowrap; }
.ws-tbl .ws-ellipsis{ max-width:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ws-tbl .ws-idx{ color:#475569; font-variant-numeric:tabular-nums; }
.ws-tbl .ws-grid a:focus, .ws-tbl .ws-grid button:focus{ outline:3px solid var(--ring); outline-offset:2px; }

/* คอลัมน์ดัชนี/ปุ่ม (ยืดหยุ่น) */
.ws-tbl .col-idx{ width:64px; min-width:56px; }
.ws-tbl .col-actions{ width:124px; min-width:110px; }

/* modifiers */
.ws-tbl .ws-grid.ws-striped tbody tr:nth-child(odd){ background:#fcfdff; }
.ws-tbl .ws-grid.ws-hover   tbody tr:hover{ background:#eef6ff; }
.ws-tbl .ws-grid.ws-compact thead th, .ws-tbl .ws-grid.ws-compact tbody td{ padding:7px 9px; }

/* sticky header */
.ws-tbl .ws-grid.ws-sticky thead th{ position:sticky; top:0; z-index:2; }

/* wrapper options */
.ws-tbl.ws-no-frame{ border:0!important; box-shadow:none!important; border-radius:12px; }
.ws-tbl.ws-rounded-sm{ border-radius:8px;  border:1px solid var(--br); overflow:hidden; box-shadow:0 4px 14px rgba(2,6,23,.05); }
.ws-tbl.ws-rounded-md{ border-radius:12px; border:1px solid var(--br); overflow:hidden; box-shadow:0 6px 18px rgba(2,6,23,.06); }
.ws-tbl.ws-rounded-lg{ border-radius:16px; border:1px solid var(--br); overflow:hidden; box-shadow:0 10px 26px rgba(2,6,23,.08); }

/* ---------- Buttons ---------- */
.ws-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  height:34px; padding:0 12px; border-radius:10px; border:1px solid transparent;
  font-weight:700; line-height:1; text-decoration:none; box-shadow:0 2px 8px rgba(2,6,23,.06);
  transition: background .12s, border-color .12s, transform .06s, box-shadow .12s, color .12s;
}
.ws-btn i{ font-size:16px; }
.ws-btn:focus-visible{ outline:3px solid var(--ring); outline-offset:2px; }
.ws-btn.primary{ background:#e8f1ff; border-color:#c7d8ff; color:#1e3a8a; }
.ws-btn.primary:hover{ background:#dce9ff; transform:translateY(-1px); box-shadow:0 4px 12px rgba(30,58,138,.16); }
.ws-btn.green{ background:#e8fbf7; border-color:#bfeee2; color:#0f766e; }
.ws-btn.green:hover{ background:#d7f6ef; transform:translateY(-1px); box-shadow:0 4px 12px rgba(15,118,110,.16); }
.ws-btn.danger{ background:#fee2e2; border-color:#fca5a5; color:#7f1d1d; }
.ws-btn.danger:hover{ background:#fecaca; transform:translateY(-1px); box-shadow:0 4px 12px rgba(127,29,29,.16); }
.ws-btn.neutral{ background:#f1f5f9; border-color:#e2e8f0; color:#0f172a; }
.ws-btn.neutral:hover{ background:#e8edf3; transform:translateY(-1px); box-shadow:0 4px 12px rgba(2,6,23,.10); }

/* ---------- Skeleton (grid default) ---------- */
.ws-skel{ border:1px solid var(--br); border-radius:12px; overflow:hidden; background:#fff; }
.ws-skel .head{ background:#f1f5f9; height:42px; border-bottom:1px solid var(--br); }
.ws-skel .row{ display:grid; gap:0; }
.ws-skel .cell{ height:40px; border-top:1px solid #f1f5f9; }
.ws-skel .bar{
  width:60%; height:12px; margin:14px 12px; border-radius:6px;
  background:linear-gradient(90deg,#eef2f7 25%, #f6f8fb 37%, #eef2f7 63%);
  background-size:400% 100%; animation:ws-shimmer 1.05s ease-in-out infinite;
}
@keyframes ws-shimmer{ 0%{ background-position:100% 0 } 100%{ background-position:0 0 } }

/* ===== Pagination containers: layout ===== */
.ws-page-top{    display:flex; justify-content:flex-start; margin:6px 0 8px; }
.ws-page-bottom{ display:flex; justify-content:flex-end;   margin:8px 0 6px; }

/* ===== simplePagination.js — WS skin ===== */
.ws-page{ display:inline-block; vertical-align:middle; }
.ws-page ul{ list-style:none; padding:0; margin:0; }
.ws-page ul::after{ content:""; display:block; clear:both; }
.ws-page li{ float:left; margin:0 3px; }

/* ปุ่มเพจจิ้ง (ลดความโค้งและขนาดมาตรฐาน 32px) */
.ws-page a, .ws-page span{
  display:inline-block; min-width:32px; height:32px; line-height:32px;
  padding:0 10px; text-align:center; font-weight:700; font-size:13px;
  border:1px solid #e2e8f0; border-radius:15px;
  color:#0f172a; background:#fff; box-shadow:0 2px 8px rgba(2,6,23,.06);
  transition: background .12s, border-color .12s, color .12s, transform .06s, box-shadow .12s;
}
.ws-page a:hover, .ws-page li:not(.disabled):not(.active) span:hover{
  background:#f1f5f9; border-color:#cbd5e1; transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(2,6,23,.10);
}
.ws-page .current{
  background:#1d4ed8; border-color:#1d4ed8; color:#fff; cursor:default;
  box-shadow:0 4px 12px rgba(29,78,216,.22);
}
.ws-page .disabled a, .ws-page .disabled span{ opacity:.45; cursor:not-allowed; }

/* ปุ่ม “…” ปกติ */
.ws-page .ellipse.clickable{
  border:1px solid #e2e8f0; border-radius:10px; padding:0 10px;
  background:#fff; color:#0f172a; box-shadow:0 2px 8px rgba(2,6,23,.06);
}
.ws-page .ellipse.clickable:hover{ background:#f1f5f9; border-color:#cbd5e1; }

/* โหมดแก้ไข: เมื่อมี input ให้แสดงเป็นกล่องเดี่ยว ไม่ทับปุ่มเดิม */
.ws-page .ellipse.clickable.is-edit{ padding:0; border:none; box-shadow:none; background:transparent; }
/* เผื่อ browser ใหม่ที่ใช้ :has() */
.ws-page .ellipse.clickable:has(input){ padding:0; border:none; box-shadow:none; background:transparent; }

.ws-page .ellipse.clickable input{
  display:block; height:32px; line-height:32px; width:58px;
  padding:0 8px; margin:0;
  border:1px solid #e2e8f0; border-radius:8px;
  font-weight:700; text-align:center; color:#0f172a; background:#fff;
  box-shadow:0 2px 8px rgba(2,6,23,.06);
}
/* ให้สปินเนอร์ชิดขวาของกล่อง */
.ws-page .ellipse.clickable input[type="number"]{ padding-right:2px; }
.ws-page .ellipse.clickable input[type="number"]::-webkit-outer-spin-button,
.ws-page .ellipse.clickable input[type="number"]::-webkit-inner-spin-button{ margin:0; }
@-moz-document url-prefix() {
  .ws-page .ellipse.clickable input[type="number"]{ padding-right:4px; }
}

/* ช่องว่างใต้ table แทน inline style เดิม */
.ws-gap{ margin-bottom:6px; }

/* กล่อง empty/error */
.ws-empty, .ws-error{
  background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:16px;
  display:flex; align-items:center; justify-content:center; gap:10px; min-height:64px;
  color:#334155; font-weight:600; box-shadow:0 4px 14px rgba(2,6,23,.04);
}
.ws-empty .ico, .ws-error .ico{
  width:28px; height:28px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; font-size:16px;
}
.ws-empty .ico{ background:#e6f2ff; color:#1d4ed8; }
.ws-error .ico{ background:#fee2e2; color:#b91c1c; }
.ws-error .msg{ color:#7f1d1d; }
.ws-actions{ margin-left:10px; }
.ws-actions .ws-btn{ height:32px; padding:0 10px; }

/* ---------- Spacing utils ---------- */
.ws-mt-6{ margin-top:6px!important; }  .ws-mt-8{ margin-top:8px!important; } .ws-mt-12{ margin-top:12px!important; }
.ws-mb-6{ margin-bottom:6px!important; } .ws-mb-8{ margin-bottom:8px!important; } .ws-mb-12{ margin-bottom:12px!important; }

/* ---------- THEAD THEMES ---------- */
.ws-tbl .ws-grid.ws-theme-blue    thead th{ background:#e8f1ff; color:#0b4a91; border-bottom:1px solid #c7d8ff; }
.ws-tbl .ws-grid.ws-theme-indigo  thead th{ background:#ece9ff; color:#4338ca; border-bottom:1px solid #d8ccff; }
.ws-tbl .ws-grid.ws-theme-teal    thead th{ background:#e8fbf7; color:#0f766e; border-bottom:1px solid #bfeee2; }
.ws-tbl .ws-grid.ws-theme-emerald thead th{ background:#dcfce7; color:#065f46; border-bottom:1px solid #86efac; }
.ws-tbl .ws-grid.ws-theme-amber   thead th{ background:#fff7ed; color:#7c2d12; border-bottom:1px solid #fdba74; }
.ws-tbl .ws-grid.ws-theme-rose    thead th{ background:#fee2e2; color:#7f1d1d; border-bottom:1px solid #fca5a5; }
.ws-tbl .ws-grid.ws-theme-slate   thead th{ background:#f1f5f9; color:#0f172a; border-bottom:1px solid #e2e8f0; }

/* === WS float helpers (no conflict with Bootstrap) === */
.ws-pull-right { float:right!important; }  .ws-pull-left { float:left!important; }
.ws-float-right{ float:right!important; }
.ws-clearfix::after { content:""; display:block; clear:both; }

/* ---------- Head/Body font size utilities ---------- */
.ws-tbl{ --th-fz:13px; --td-fz:14px; }
.ws-tbl .ws-grid thead th{ font-size:var(--th-fz); }
.ws-tbl .ws-grid tbody td{ font-size:var(--td-fz); }
.ws-th-12{ --th-fz:12px; } .ws-th-13{ --th-fz:13px; } .ws-th-14{ --th-fz:14px; }
.ws-th-15{ --th-fz:15px; } .ws-th-16{ --th-fz:16px; }
.ws-td-12{ --td-fz:12px; } .ws-td-13{ --td-fz:13px; } .ws-td-14{ --td-fz:14px; }
.ws-td-15{ --td-fz:15px; } .ws-td-16{ --td-fz:16px; }

/* ---------- Skeleton: full-row mode ---------- */
.ws-skel .row.fr{ display:block; }
.ws-skel .row.fr .cell{ height:40px; border-top:1px solid #f1f5f9; }
.ws-skel .row.fr .bar.fr{
  display:block; height:12px; margin:14px 12px; border-radius:6px;
  background:linear-gradient(90deg,#eef2f7 25%, #f6f8fb 37%, #eef2f7 63%);
  background-size:400% 100%; animation:ws-shimmer 1.05s ease-in-out infinite;
}

/* ====== Cell content utilities (td/th) ====== */
/* ค่าเดิม: td จะตัดคำตามปกติ ถ้าอยากแสดงเต็มหลายบรรทัด ให้ใส่ .ws-wrap */
.ws-tbl .ws-grid td.ws-wrap,
.ws-tbl .ws-grid th.ws-wrap{
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: break-word;         /* ตัดคำไทย/อังกฤษเมื่อยาว */
}

/* บังคับตัดบรรทัดและคงช่องวรรค/ขึ้นบรรทัดใหม่จากข้อความ */
.ws-tbl .ws-grid td.ws-preline{ white-space: pre-line; word-break: break-word; }
.ws-tbl .ws-grid td.ws-pre{ white-space: pre; overflow:auto; }

/* จัดแนวบน เวลาเนื้อหาหลายบรรทัด */
.ws-tbl .ws-grid td.ws-top{ vertical-align: top !important; }

/* ถ้าต้องการ “จำกัดจำนวนบรรทัด” (ทางเลือก) */
.ws-tbl .ws-grid td.ws-clamp-2, .ws-tbl .ws-grid td.ws-clamp-3{
  display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
}
.ws-tbl .ws-grid td.ws-clamp-2{ -webkit-line-clamp: 2; }
.ws-tbl .ws-grid td.ws-clamp-3{ -webkit-line-clamp: 3; }

/* ถอนการตัด/ellipsis เดิม หากเผลอใส่ .ws-ellipsis ไว้ */
.ws-tbl .ws-grid td.ws-no-ellipsis{
  max-width:none !important; white-space:normal !important;
  overflow:visible !important; text-overflow:clip !important;
}

/* ====== Badges (generic, ใช้ได้ทุกที่) ====== */
.ws-badge{
  --bg:#f1f5f9; --fg:#0f172a; --br:#e2e8f0;
  display:inline-flex; align-items:center; gap:.35rem;
  padding:2px 8px; border-radius:999px; border:1px solid var(--br);
  background:var(--bg); color:var(--fg); font-weight:700; font-size:12px;
  line-height:1.2; white-space:nowrap;
}
.ws-badge i{ font-size:14px; line-height:1; }

/* sizes */
.ws-badge.xs{ padding:1px 6px; font-size:11px; }
.ws-badge.sm{ padding:2px 8px; font-size:12px; }
.ws-badge.md{ padding:4px 10px; font-size:13px; }
.ws-badge.lg{ padding:6px 12px; font-size:14px; }

/* shapes */
.ws-badge.pill{ border-radius:999px; }
.ws-badge.squared{ border-radius:6px; }

/* styles */
.ws-badge.soft{ /* default = soft */ }
.ws-badge.solid{ color:#fff; border-color:transparent; }
.ws-badge.outline{ background:transparent; }

/* color tokens */
.ws-badge.gray   { --bg:#f1f5f9; --fg:#0f172a; --br:#e2e8f0; }
.ws-badge.slate  { --bg:#eef2f7; --fg:#0f172a; --br:#e2e8f0; }
.ws-badge.blue   { --bg:#e8f1ff; --fg:#0b4a91; --br:#c7d8ff; }
.ws-badge.indigo { --bg:#ece9ff; --fg:#4338ca; --br:#d8ccff; }
.ws-badge.purple { --bg:#efe9ff; --fg:#6b21a8; --br:#dcc7ff; }
.ws-badge.pink   { --bg:#ffe4f0; --fg:#9d174d; --br:#f9a8d4; }
.ws-badge.rose   { --bg:#fee2e2; --fg:#7f1d1d; --br:#fca5a5; }
.ws-badge.red    { --bg:#fee2e2; --fg:#b91c1c; --br:#fca5a5; }
.ws-badge.orange { --bg:#ffedd5; --fg:#7c2d12; --br:#fdba74; }
.ws-badge.amber  { --bg:#fff7ed; --fg:#7c2d12; --br:#fdba74; }
.ws-badge.yellow { --bg:#fef9c3; --fg:#854d0e; --br:#fde047; }
.ws-badge.lime   { --bg:#ecfccb; --fg:#3f6212; --br:#bef264; }
.ws-badge.green  { --bg:#dcfce7; --fg:#065f46; --br:#86efac; }
.ws-badge.teal   { --bg:#e8fbf7; --fg:#0f766e; --br:#bfeee2; }
.ws-badge.cyan   { --bg:#cffafe; --fg:#155e75; --br:#a5f3fc; }
.ws-badge.sky    { --bg:#e0f2fe; --fg:#075985; --br:#bae6fd; }

/* solid variants */
.ws-badge.solid.blue   { background:#1d4ed8; }
.ws-badge.solid.indigo { background:#4338ca; }
.ws-badge.solid.purple { background:#6b21a8; }
.ws-badge.solid.pink   { background:#db2777; }
.ws-badge.solid.rose   { background:#e11d48; } /* ✅ rose */
.ws-badge.solid.red    { background:#dc2626; }
.ws-badge.solid.orange { background:#ea580c; }
.ws-badge.solid.amber  { background:#d97706; }
.ws-badge.solid.yellow { background:#ca8a04; }
.ws-badge.solid.lime   { background:#65a30d; }
.ws-badge.solid.green  { background:#16a34a; }
.ws-badge.solid.teal   { background:#0f766e; }
.ws-badge.solid.cyan   { background:#0891b2; }
.ws-badge.solid.sky    { background:#0369a1; }
.ws-badge.solid.gray   { background:#334155; }
.ws-badge.solid.slate  { background:#475569; }

/* outline variants (แค่เส้น/ตัวหนังสือสี) */
.ws-badge.outline.blue   { --fg:#1d4ed8; --br:#93c5fd; }
.ws-badge.outline.indigo { --fg:#4338ca; --br:#c7d2fe; }
.ws-badge.outline.green  { --fg:#16a34a; --br:#86efac; }
.ws-badge.outline.red    { --fg:#dc2626; --br:#fca5a5; }
.ws-badge.outline.amber  { --fg:#d97706; --br:#fcd34d; }
/* (เพิ่มสีอื่นได้ตามต้องการ) */


/* ==========================================================
 * คำขอลบข้อมูลออนไลน์ – Status badge (อ่านง่ายขึ้น)
 * ใช้กับ render: <span class="ws-badge solid {color} pill xs tid-status-badge">...</span>
 * ========================================================== */

/* ขนาด/ช่องไฟ */
.ws-badge.tid-status-badge{
  font-size:12px;                 /* จาก xs 11px -> 12px */
  padding:4px 10px;               /* ให้ pill “อ้วนขึ้น” อ่านง่าย */
  gap:6px;
  min-height:26px;
  line-height:1.15;
  justify-content:center;
  box-shadow:none;                /* ลดความหนาแน่นในคอลัมน์แคบ */
}

/* ไอคอน */
.ws-badge.tid-status-badge .tid-status-badge__icon{
  font-size:14px;
  line-height:1;
}

/* ข้อความ */
.ws-badge.tid-status-badge .tid-status-badge__text{
  font-weight:800;
  letter-spacing:0;
}

/* ----------------------------------------------------------
 * ทำให้ "solid" ของสถานะ เป็นพื้นอ่อน-ตัวเข้ม (อ่านง่ายกว่า)
 * โดย override เฉพาะ .tid-status-badge เท่านั้น (ไม่กระทบที่อื่น)
 * ---------------------------------------------------------- */

/* รอเจ้าหน้าที่ตรวจสอบ (blue) */
.ws-badge.tid-status-badge.solid.blue{
  background:#e8f1ff;
  color:#0b4a91;
  border:1px solid #c7d8ff;
}

/* เสนอศาลพิจารณา (teal) */
.ws-badge.tid-status-badge.solid.teal{
  background:#e8fbf7;
  color:#0f766e;
  border:1px solid #bfeee2;
}

/* ศาลมีคำสั่ง / เสร็จสิ้น (green) */
.ws-badge.tid-status-badge.solid.green{
  background:#dcfce7;
  color:#065f46;
  border:1px solid #86efac;
}

/* ไม่รับ/ตีกลับ (red) */
.ws-badge.tid-status-badge.solid.red{
  background:#fee2e2;
  color:#7f1d1d;
  border:1px solid #fca5a5;
}

/* ค่าอื่น ๆ / ไม่ทราบสถานะ (gray) */
.ws-badge.tid-status-badge.solid.gray,
.ws-badge.tid-status-badge.solid.slate{
  background:#f1f5f9;
  color:#0f172a;
  border:1px solid #e2e8f0;
}

/* มือถือ/คอลัมน์แคบ: ไม่ให้แน่นเกิน */
@media (max-width: 480px){
  .ws-badge.tid-status-badge{
    font-size:11px;
    padding:3px 8px;
    min-height:24px;
  }
}

/* ==========================================================
 * WS Table Kit – Responsive table wrapper
 * ========================================================== */

/* ให้ตัวห่อแบบ responsive เป็นคนถือสกอร์ล */
.table-responsive.ws-scroll{
  overflow-x: auto !important;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

/* คลาสโค้งของ WS อย่าไปซ่อน overflow ถ้าอยู่บน responsive wrapper */
.table-responsive.ws-scroll.ws-rounded-sm,
.table-responsive.ws-scroll.ws-rounded-md,
.table-responsive.ws-scroll.ws-rounded-lg{
  overflow: initial;         /* allow scroll */
}

/* เสริม: ถ้าตารางยาว ให้มี min-width เพื่อบังคับเกิดสกอร์ลบนจอแคบ */
.table-responsive.ws-scroll > table{
  min-width: 960px;          /* ปรับได้ตามจำนวนคอลัมน์ของคุณ */
}

.ws-minw-1200 > table{ min-width:1200px; }
.ws-minw-1000 > table{ min-width:1000px; }
.ws-minw-auto > table{ min-width:auto; }

/* ปรับปุ่มเพจจิ้งให้เล็กลงบนจอแคบ */
@media (max-width: 480px){
  .ws-page a, .ws-page span{
    min-width: 28px; height: 30px; line-height: 30px; padding: 0 8px; border-radius: 12px;
  }
  .ws-page li{ margin: 0 2px; }
}
@media (max-width: 360px){
  .ws-page a, .ws-page span{
    min-width: 26px; height: 28px; line-height: 28px; padding: 0 6px; border-radius: 10px;
    font-size: 12px;
  }
}
/* ให้สเกเลตันกว้างตามคอลัมน์ (ไม่ถูกบีบเท่า wrapper) */
.table-responsive.ws-scroll > .ws-skel{
  width: min-content;      /* สำคัญมาก: ป้องกันการหดจนคอลัมน์เพี้ยน/ดูเหมือนขึ้นบรรทัดใหม่ */
}

/* ไม่ให้ข้อความในปุ่มขึ้นบรรทัด */
.ws-btn{ white-space: nowrap; }

/* คอลัมน์ปุ่ม: ล็อกความกว้างให้เสถียร และจัดปุ่มให้อยู่กึ่งกลาง */
.ws-cell-actions{ width:120px; min-width:110px; text-align:center; }
.ws-cell-actions .ws-btn{
  width:110px;                /* ความกว้างปุ่มคงที่พอเหมาะ */
  justify-content:center;     /* จัดข้อความกลาง */
}

/* ถ้าบางหน้าปุ่มยาวกว่า ให้ใช้คลาสนี้แทนเพื่อ “ยืดได้ถึง” ขีดจำกัด */
.ws-cell-actions .ws-btn.flexfit{
  width:auto; min-width:110px; max-width:140px;
  overflow:hidden; text-overflow:ellipsis;
}

.ws-cell-actions .ws-btn.block { width:100%; }

/* รับคำร้องเรียกไต่สวนวันทำการถัดไป (lime) */
.ws-badge.tid-status-badge.solid.lime{
  background:#ecfccb;  /* ใช้โทนจาก .ws-badge.lime */
  color:#3f6212;
  border:1px solid #bef264;
}

/* ไม่รับ/ตีกลับ (red) — แดงอมส้ม นิด ๆ */
.ws-badge.tid-status-badge.solid.red{
  background:#fee2e2;
  color:#7f1d1d;
  border:1px solid #fca5a5;
}

/* ยกคำร้อง (rose) — แดงอมชมพู นิด ๆ (ต่างจาก red แบบสุภาพ) */
.ws-badge.tid-status-badge.solid.rose{
  background:#ffe4e6;
  color:#9f1239;
  border:1px solid #fda4af;
}

/* รับคำร้องเรียกไต่สวนออนไลน์ (cyan) */
.ws-badge.tid-status-badge.solid.cyan{
  background:#cffafe;
  color:#155e75;
  border:1px solid #a5f3fc;
}

/* ===== FIX: hover แล้วยกขึ้น แต่ไม่โดนตัด/ไม่ถูกขอบทับ ===== */
.ws-page,
.ws-page ul,
.ws-page li{
  overflow: visible !important;
}

/* เพิ่มที่ว่างบน-ล่างให้ตอนยกขึ้นไม่ชน line-box */
.ws-page{ padding:2px 0; }

/* ให้ปุ่มที่ hover ลอยอยู่เหนือเพื่อนข้าง ๆ */
.ws-page li{ position:relative; }
.ws-page li:hover{ z-index:5; }

/* กันกรณีบางหน้า parent ครอบแล้วตัด (พบได้บ่อย) */
.ws-page-top,
.ws-page-bottom{
  overflow: visible;
}

/* ===== Pager bottom: เพิ่ม spacing เฉพาะชุดล่างขวา ===== */
.ws-pager-bottom{
  margin-top: 12px;     /* จากเดิม 8px */
  padding-bottom: 10px; /* เพิ่มระยะด้านล่าง */
}

/* ให้ตัว pagination เองมี padding ซ้าย-ขวานิดนึง (กันชิดขอบ) */
.ws-pager-bottom .pg-result-bottom .ws-page{
  padding: 4px 6px;
}

/* ===== Pagination: make prev/next like pill buttons + center text ===== */

/* กันยกขึ้นแล้วโดนตัด/ขอบทับ (เผื่อมี wrapper overflow hidden) */
.ws-page { overflow: visible; }
.ws-page ul { overflow: visible; }
.ws-page li { overflow: visible; }

/* ปรับปุ่มทั้งหมดให้จัดกลางด้วย flex (แก้เรื่องข้อความไม่กึ่งกลาง) */
.ws-page a,
.ws-page span{
  display: inline-flex;          /* <- สำคัญ */
  align-items: center;           /* กลางแนวตั้ง */
  justify-content: center;       /* กลางแนวนอน */
  line-height: 1;               /* ไม่ใช้ line-height แบบเดิม */
}

/* ปุ่มตัวเลข (คงเดิม แต่ให้เป็นวงกลมชัด) */
.ws-page li:not(.prev):not(.next) a,
.ws-page li:not(.prev):not(.next) span{
  min-width: 32px;
  padding: 0 10px;
  border-radius: 999px;         /* วงกลม/แคปซูลเล็ก */
}

/* ปุ่มก่อนหน้า/ถัดไป ให้เป็น pill กว้างขึ้น */
.ws-page li.prev a,
.ws-page li.next a,
.ws-page li.prev span,
.ws-page li.next span{
  min-width: 92px;              /* ปรับได้ตามชอบ */
  padding: 0 14px;
  border-radius: 999px;
  background: #e8f1ff;
  border-color: #c7d8ff;
  color: #0b4a91;
  box-shadow: 0 2px 8px rgba(2,6,23,.06);
}

/* hover เฉพาะ prev/next */
.ws-page li.prev a:hover,
.ws-page li.next a:hover{
  background: #dce9ff;
  border-color: #b7ccff;
}

/* disabled ของ prev/next ให้ดูเหมือนกดไม่ได้ */
.ws-page li.prev.disabled a,
.ws-page li.next.disabled a,
.ws-page li.prev.disabled span,
.ws-page li.next.disabled span{
  opacity: .55;
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: #64748b;
}

/* current page (เดิม) ให้ยังเด่น */
.ws-page .current{
  display: inline-flex;         /* ให้เข้าชุดกับ flex */
  align-items: center;
  justify-content: center;
}

/* มือถือ: ลดความกว้าง prev/next ไม่ให้กินพื้นที่ */
@media (max-width: 480px){
  .ws-page li.prev a,
  .ws-page li.next a,
  .ws-page li.prev span,
  .ws-page li.next span{
    min-width: 78px;
    padding: 0 12px;
  }
}

/* รับคำร้องเรียกไต่สวนวันทำการถัดไป (mint) — ต่างจาก lime นิดเดียว */
.ws-badge.tid-status-badge.solid.mint{
  background:#e8fbf7;  /* โทน mint/teal อ่อน */
  color:#0f766e;
  border:1px solid #bfeee2;
}

/* เสนอศาลพิจารณา (amber) — เหลืองอ่อน สุภาพ ไม่ชนกับเขียว/ฟ้า */
.ws-badge.tid-status-badge.solid.amber{
  background:#fff7ed;
  color:#7c2d12;
  border:1px solid #fdba74;
}

/* ศาลมีคำสั่ง (emerald) — เขียวเข้มขึ้น แยกจาก lime/green ของนัดไต่สวน */
.ws-badge.tid-status-badge.solid.emerald{
  background:#dcfce7;
  color:#065f46;
  border:1px solid #86efac;
}

/* โมดัล: สีข้อความสถานะ ให้โทนเดียวกับ badge */
.tid-status-text{ font-weight:800; }

.tid-status-text--blue    { color:#0b4a91; }
.tid-status-text--teal    { color:#0f766e; }   /* เผื่อใช้ */
.tid-status-text--amber   { color:#7c2d12; }
.tid-status-text--green   { color:#065f46; }
.tid-status-text--lime    { color:#3f6212; }
.tid-status-text--cyan    { color:#155e75; }
.tid-status-text--red     { color:#7f1d1d; }
.tid-status-text--rose    { color:#9f1239; }
.tid-status-text--emerald { color:#065f46; }
.tid-status-text--slate   { color:#334155; }