.mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* =========================
   IOU row background by status
   ========================= */
#tblIOU tbody tr.row-bg-default > td {
  background-color: #eeeeee !important;
}

#tblIOU tbody tr.row-bg-waiting-payment > td {
  background-color: #ffe9c8 !important; /* ส้มอ่อน */
}

#tblIOU tbody tr.row-bg-paid > td {
  background-color: #f3daff !important; /* ม่วงอ่อน */
}

#tblIOU tbody tr.row-bg-cleared > td {
  background-color: #e0ffdc !important; /* ชมพูอ่อน */
}

/* ให้เส้นแบ่งยังดูชัด */
#tblIOU tbody tr.row-bg-waiting-payment > td,
#tblIOU tbody tr.row-bg-paid > td,
#tblIOU tbody tr.row-bg-cleared > td {
  border-bottom: 1px solid #f3e6ea !important;
}

/* hover แล้วไม่โดน bootstrap กลบ */
#tblIOU.table tbody tr.row-bg-waiting-payment:hover > td {
  background-color: #efc88d !important;
}

#tblIOU.table tbody tr.row-bg-paid:hover > td {
  background-color: #cfade1 !important;
}

#tblIOU.table tbody tr.row-bg-cleared:hover > td {
  background-color: #bce3c2 !important;
}
/* =========================
   Tabs / Page Theme
========================= */
:root{
  --tab-iou:   #ffe4ea;
  --tab-pc:    #fff3bf;
  --tab-pv:    #d3f9d8;
  --tab-clear: #e7f5ff;
  --tab-ca:    #e7f5ff;
}

.docTabs{
  border-bottom: 0;
  gap: .4rem;
}

.docTabs .nav-link{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 999px;
  padding: .45rem .9rem;
  font-weight: 700;
  color: #111827;
  background: #e5e7eb;
  transition: background-color .15s ease, border-color .15s ease, filter .15s ease;
}

.docTabs .nav-link:not(.active)[data-tab="iou"]:hover{
  background: var(--tab-iou);
  border-color: var(--tab-iou);
}
.docTabs .nav-link:not(.active)[data-tab="pc"]:hover{
  background: var(--tab-pc);
  border-color: var(--tab-pc);
}
.docTabs .nav-link:not(.active)[data-tab="pv"]:hover{
  background: var(--tab-pv);
  border-color: var(--tab-pv);
}
.docTabs .nav-link:not(.active)[data-tab="clear"]:hover{
  background: var(--tab-clear);
  border-color: var(--tab-clear);
}
.docTabs .nav-link:not(.active)[data-tab="ca"]:hover{
  background: var(--tab-ca);
  border-color: var(--tab-ca);
}
.docTabs .nav-link:not(.active)[data-tab="ad"]:hover{
  background: #ffe6fe;
  border-color: #f9e6ff;
}

.docTabs .nav-link.active{
  box-shadow: 0 2px 0 rgba(0,0,0,.04);
}
.docTabs .nav-link.active[data-tab="iou"]{
  background: var(--tab-iou);
  border-color: var(--tab-iou);
  color: #111827;
}
.docTabs .nav-link.active[data-tab="pc"]{
  background: var(--tab-pc);
  border-color: var(--tab-pc);
  color: #111827;
}
.docTabs .nav-link.active[data-tab="pv"]{
  background: var(--tab-pv);
  border-color: var(--tab-pv);
  color: #111827;
}
.docTabs .nav-link.active[data-tab="clear"]{
  background: var(--tab-clear);
  border-color: var(--tab-clear);
  color: #111827;
}
.docTabs .nav-link.active[data-tab="ca"]{
  background: var(--tab-ca);
  border-color: var(--tab-ca);
  color: #111827;
}
.docTabs .nav-link.active[data-tab="ad"]{
  background: #ffe6fe;
  border-color: #f9e6ff;
  color: #111827;
}

.docTabs .nav-link.active:hover,
.docTabs .nav-link.active:focus{
  filter: brightness(0.98);
}

.tab-page-bg,
.tab-page-bg > .content{
  background: transparent !important;
}

.tab-page-bg{
  min-height: 100vh;
  transition: background-color .15s ease;
}

.tab-page-bg--iou{ background-color:#fff5fb !important; }
.tab-page-bg--pc{ background-color:#fffdf0 !important; }
.tab-page-bg--pv{ background-color:#f1fff5 !important; }
.tab-page-bg--ad{ background-color:#ffe9ff !important; }
.tab-page-bg--clear{ background-color:#f3f7ff !important; }
.tab-page-bg--ca{ background-color:#f3f7ff !important; }
.tab-page-bg--ci{ background-color:#f3f7ff !important; }

/* =========================
   Pane
========================= */
.type-pane{
  display: flex;
  flex-direction: column;
  background:#ffffff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:14px;
  padding:10px;
}

.type-pane > .table-responsive{
  order: 1;
}

.type-pane > .pane-pagination{
  order: 2;
}

.type-pane--pc{
  background: #fffef8;
  border-color: rgba(234, 179, 8, .18);
}

.type-pane--pc > .table-responsive{
  overflow: visible !important;
}

.type-pane--pc .td-menu{
  background-clip: padding-box;
  overflow: visible !important;
}

.type-pane--pc .dropdown{
  position: static;
}

.type-pane--pc .dropdown-menu{
  z-index: 1055;
}

.type-pane--pv{
  background: #f7fff9;
  border-color: rgba(34, 197, 94, .18);
}

.type-pane--pv > .table-responsive{
  overflow: visible !important;
}

.type-pane--pv .td-menu{
  background-clip: padding-box;
  overflow: visible !important;
}

.type-pane--pv .dropdown{
  position: static;
}

.type-pane--pv .dropdown-menu{
  z-index: 1055;
}

.table-responsive{
  overflow-x: auto;
  overflow-y: visible !important;
  border-radius: 12px;
}

.pane-pagination{
  padding-top: 12px;
}

/* =========================
   Shared Table Style
   กลางทั้งหมด ยกเว้น รายการ + จำนวนเงิน
========================= */
.tbl-eq,
.tbl-eq th,
.tbl-eq td{
  font-size: 18px;
}

.tbl-eq{
  table-layout: fixed;
  width: 100%;
  margin-bottom: 0;
}

.tbl-eq thead th,
.tbl-eq tbody td{
  border: none !important;
  vertical-align: middle !important;
}

.tbl-eq tbody tr{
  border-bottom: 1px solid #f1f1f1;
}

.tbl-eq thead th{
  background: #f8f9fa;
  font-weight: 600;
  white-space: nowrap;
  text-align: center !important;
}

.tbl-eq tbody td{
  text-align: center !important;
}

.tbl-eq thead th.th-items,
.tbl-eq tbody td.td-items{
  text-align: left !important;
}

.tbl-eq thead th.th-amount,
.tbl-eq tbody td.td-amount{
  text-align: right !important;
  white-space: nowrap;
  font-weight: 700;
}

.tbl-eq thead th.th-check,
.tbl-eq tbody td.td-check,
.tbl-eq thead th.th-menu,
.tbl-eq tbody td.td-menu{
  text-align: center !important;
}

.tbl-eq td .text-nowrap{
  white-space: nowrap;
}

.tbl-eq .text-truncate{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.tbl-eq .td-items{
  min-width: 0;
}

.clamp-2{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
  line-height: 1.25;
}

/* =========================
   Row Colors by Status
========================= */
.tbl-eq tbody tr.row-st-draft td{
  background:#e5e7eb !important;
}
.tbl-eq tbody tr.row-st-submitted td{
  background:#c7f0ff !important;
}
.tbl-eq tbody tr.row-st-received td{
  background:#d6ecff !important;
}
.tbl-eq tbody tr.row-st-acc_checked td{
  background:#dcd6ff !important;
}
.tbl-eq tbody tr.row-st-fin_checked td{
  background:#cfe0ff !important;
}
.tbl-eq tbody tr.row-st-reviewed td{
  background:#d7f5ea !important;
}
.tbl-eq tbody tr.row-st-approved td{
  background:#d9f7be !important;
}
.tbl-eq tbody tr.row-st-waiting_payment td{
  background:#ffd8a8 !important;
}
.tbl-eq tbody tr.row-st-paid td{
  background:#f3d1ff !important;
}
.tbl-eq tbody tr.row-st-cleared td{
  background:#ffd6e7 !important;
}

/* =========================
   Badge
========================= */
.badge-draft{
  background: #9ca3af !important;
  color: #111827 !important;
  border: 1px solid #6b7280 !important;
}
.badge-submitted{
  background: #58c4f6 !important;
  color: #083347 !important;
  border: 1px solid #33a9df !important;
}
.badge-received{
  background: #7fc8ff !important;
  color: #09304d !important;
  border: 1px solid #54afea !important;
}
.badge-acc_checked{
  background: #9f8cff !important;
  color: #241650 !important;
  border: 1px solid #826bef !important;
}
.badge-fin_checked{
  background: #7aa2ff !important;
  color: #102a63 !important;
  border: 1px solid #5c86ea !important;
}
.badge-reviewed{
  background: #63d6b0 !important;
  color: #0d3b2d !important;
  border: 1px solid #42bc95 !important;
}
.badge-approved{
  background: #63c174 !important;
  color: #0f3b18 !important;
  border: 1px solid #46a95a !important;
}
.badge-wait,
.badge-waiting_payment{
  background: #ffad33 !important;
  color: #5e3400 !important;
  border: 1px solid #e39211 !important;
}
.badge-paid{
  background: #d68cff !important;
  color: #4d1467 !important;
  border: 1px solid #bb63eb !important;
}
.badge-cleared{
  background: #ff86b7 !important;
  color: #5b1632 !important;
  border: 1px solid #ec619c !important;
}

.badges,
.badge-lg{
  font-size: 16px !important;
  font-weight: 700 !important;
  padding: 10px 14px !important;
  line-height: 1 !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  box-shadow: none !important;
}

/* =========================
   Due Badge
========================= */
.dueBadge{
  display:inline-flex;
  align-items:center;
  padding:.18rem .45rem;
  border-radius:999px;
  font-size:.72rem;
  font-weight:800;
  border:1px solid rgba(0,0,0,.08);
  line-height:1.2;
}
.dueBadge--over{
  background:#ff0000 !important;
  color:#ffffff !important;
}
.dueBadge--soon{
  background:#fffb00;
  color:#000000;
}
.dueBadge--ok{
  background:#f3f4f6;
  color:#374151;
}

/* =========================
   Menu Button
========================= */
.btn-menu-icon-plain{
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: transparent !important;
  box-shadow: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.btn-menu-icon-plain:hover,
.btn-menu-icon-plain:focus,
.btn-menu-icon-plain:active{
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

.td-menu .dropdown{
  display: inline-block;
}

.v-ellipsis{
  font-size: 22px;
  line-height: 1;
  font-weight: 700;
  color: #374151;
}

.dropdown-menu{
  z-index: 9999;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

.tooltip .tooltip-inner{
  color:#fff !important;
}

.pcPayee__sub{
  font-size: 13px;
  line-height: 1.35;
  color: #6b7280 !important;
}

/* =========================
   Mobile
========================= */
@media (max-width: 1199.98px){
  .tbl-eq{
    min-width: 1180px;
  }
}