/*
 * ============================================================
 * DEKA TABLE — DESIGN SYSTEM v2
 * ทิศทาง: Corporate ราชการ — น้ำเงินเข้ม / ทองโบราณ / กระดาษไอวอรี่
 * ลายเซ็นดีไซน์: ตราประทับ (stamp) สำหรับสถานะ "อนุมัติแล้ว"
 * ============================================================
 */

@import url('https://fonts.googleapis.com/css2?family=Trirong:wght@400;500;600;700&family=Sarabun:wght@300;400;500;600;700;800&display=swap');

:root {
    /* — สีหลัก (5 โทน) — */
    --gv-navy:        #0b2545;   /* น้ำเงินเข้ม — โครงสร้างหลัก */
    --gv-navy-mid:    #14395e;   /* น้ำเงินรอง — hover / panel */
    --gv-gold:        #b8912f;   /* ทองโบราณ — เส้นขอบ, accent, ตราประทับ */
    --gv-gold-soft:   #e4d6ab;   /* ทองอ่อน — เส้นบางๆ, หัวตาราง */
    --gv-paper:       #faf6ec;   /* กระดาษไอวอรี่ — พื้นหลังหลัก */
    --gv-paper-alt:   #f3ecd8;   /* กระดาษเข้มขึ้นเล็กน้อย — แถวสลับ */
    --gv-ink:         #23303f;   /* ตัวอักษรเนื้อหา */
    --gv-muted:       #6b7280;   /* ตัวอักษรรอง */
    --gv-forest:      #2f6b3a;   /* เขียวเข้ม — ยอดขอรับ/สำเร็จ */
    --gv-brick:       #8a2c2c;   /* แดงอิฐ — หักส่ง/รออนุมัติ */
    --gv-radius:      4px;
    --gv-shadow:      0 6px 28px rgba(11,37,69,0.14);
}

.gv-root, .gv-root * {
    box-sizing: border-box;
}
.gv-root {
    font-family: 'Sarabun', sans-serif;
    background: var(--gv-paper);
    color: var(--gv-ink);
    padding: 32px 24px 48px;
}

/* ============================================================
   LETTERHEAD HEADER — เหมือนหัวเอกสารราชการ
============================================================ */
.gv-card {
    background: var(--gv-paper);
    border: 1px solid var(--gv-gold-soft);
    border-radius: var(--gv-radius);
    box-shadow: var(--gv-shadow);
    overflow: hidden;
    width: 85%;
    margin: 0 auto;
}

.gv-letterhead {
    position: relative;
    background: linear-gradient(155deg, var(--gv-navy) 0%, var(--gv-navy-mid) 100%);
    padding: 26px 32px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    border-bottom: 3px double var(--gv-gold);
    overflow: hidden;
}

/* ลายพื้นบางๆ แบบ guilloché ให้ความรู้สึกเอกสารราชการ/ธนบัตร */
.gv-letterhead::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.07;
    background-image:
        repeating-radial-gradient(circle at 0% 50%, transparent 0, transparent 6px, var(--gv-gold) 7px, transparent 8px),
        repeating-radial-gradient(circle at 100% 50%, transparent 0, transparent 6px, var(--gv-gold) 7px, transparent 8px);
    background-size: 60px 60px;
    pointer-events: none;
}

.gv-letterhead-left {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.gv-emblem {
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    border-radius: 50%;
    border: 2px solid var(--gv-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(184,145,47,0.12);
}
.gv-emblem svg { width: 24px; height: 24px; }

.gv-letterhead-title {
    font-family: 'Trirong', serif;
    font-weight: 700;
    font-size: 1.5rem;
    color: #ffffff;
    margin: 0;
    letter-spacing: .3px;
}
.gv-letterhead-sub {
    font-family: 'Sarabun', sans-serif;
    font-size: .82rem;
    color: var(--gv-gold-soft);
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin-top: 3px;
}

.gv-count-chip {
    position: relative;
    z-index: 1;
    border: 1.5px solid var(--gv-gold);
    color: var(--gv-gold-soft);
    font-family: 'Sarabun', sans-serif;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .5px;
    padding: 7px 18px;
    border-radius: 50px;
    background: rgba(255,255,255,0.03);
    white-space: nowrap;
}
.gv-count-chip b { color: #fff; font-size: .95rem; margin-right: 4px; }

/* ============================================================
   TOOLBAR — ค้นหา / ตัวกรอง
============================================================ */
.gv-toolbar {
    background: var(--gv-paper);
    padding: 16px 32px;
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
    align-items: flex-end;
    border-bottom: 1px solid var(--gv-gold-soft);
}
.gv-field { display: flex; flex-direction: column; gap: 5px; }
.gv-field label {
    font-size: .7rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--gv-muted);
    font-weight: 600;
}
.gv-field input, .gv-field select {
    font-family: 'Sarabun', sans-serif;
    font-size: .9rem;
    border: none;
    border-bottom: 1.5px solid var(--gv-gold-soft);
    background: transparent;
    padding: 6px 4px;
    min-width: 150px;
    color: var(--gv-ink);
    outline: none;
    transition: border-color .15s;
}
.gv-field input:focus, .gv-field select:focus {
    border-bottom-color: var(--gv-gold);
}
.gv-field-search { flex: 1; min-width: 220px; }
.gv-field-search input { width: 100%; }

/* ============================================================
   TABLE
============================================================ */
.gv-table-wrap { overflow-x: auto; }
.gv-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
}
.gv-table thead th {
    background: var(--gv-gold-soft);
    color: var(--gv-navy);
    font-family: 'Sarabun', sans-serif;
    font-weight: 700;
    font-size: .72rem;
    letter-spacing: .6px;
    text-transform: uppercase;
    padding: 13px 14px;
    text-align: left;
    white-space: nowrap;
    border-bottom: 2px solid var(--gv-gold);
}
.gv-table thead th.right { text-align: right; }
.gv-table thead th.center { text-align: center; }

.gv-table tbody tr {
    border-bottom: 1px solid var(--gv-gold-soft);
    transition: background .12s;
}
.gv-table tbody tr:nth-child(even) { background: var(--gv-paper-alt); }
.gv-table tbody tr:hover { background: rgba(184,145,47,0.12); }
.gv-table tbody td {
    padding: 11px 14px;
    vertical-align: middle;
    color: var(--gv-ink);
}
.gv-table td.right { text-align: right; }
.gv-table td.center { text-align: center; }

.gv-doc-id {
    display: inline-block;
    font-family: 'Sarabun', sans-serif;
    font-weight: 700;
    color: var(--gv-navy);
    background: var(--gv-paper);
    border: 1px solid var(--gv-gold);
    border-radius: 3px;
    padding: 2px 8px;
    font-size: .78rem;
}

.gv-money { font-variant-numeric: tabular-nums; font-weight: 600; }
.gv-money.base   { color: var(--gv-navy); }
.gv-money.deduc  { color: var(--gv-brick); }
.gv-money.spend  { color: var(--gv-forest); font-weight: 700; }

.gv-person {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .82rem;
    color: var(--gv-ink);
}
.gv-person .dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--gv-gold); flex: 0 0 auto;
}

/* ============================================================
   SIGNATURE ELEMENT — ตราประทับอนุมัติ
============================================================ */
.gv-stamp {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: 50px;
    border: 2px solid var(--gv-gold);
    box-shadow: inset 0 0 0 2px rgba(184,145,47,0.35);
    color: var(--gv-brick);
    font-family: 'Trirong', serif;
    font-weight: 700;
    font-size: .76rem;
    letter-spacing: .3px;
    background: rgba(138,44,44,0.04);
    user-select: none;
    white-space: nowrap;
}
.gv-stamp svg { width: 12px; height: 12px; flex: 0 0 auto; }

.gv-pending {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .8rem;
    color: var(--gv-muted);
    font-style: italic;
}

.gv-ref-chip {
    display: inline-block;
    background: var(--gv-paper-alt);
    border: 1px solid var(--gv-gold-soft);
    color: var(--gv-navy-mid);
    padding: 3px 10px;
    border-radius: 3px;
    font-size: .78rem;
    font-weight: 600;
}
.gv-ref-add {
    display: inline-block;
    color: var(--gv-navy-mid);
    border-bottom: 1px dashed var(--gv-gold);
    font-size: .8rem;
    text-decoration: none;
    padding-bottom: 1px;
}
.gv-ref-add:hover { color: var(--gv-navy); }

.gv-btn-approve {
    font-family: 'Sarabun', sans-serif;
    font-weight: 600;
    font-size: .78rem;
    color: #fff;
    background: var(--gv-navy);
    border: 1px solid var(--gv-navy);
    padding: 6px 14px;
    border-radius: 3px;
    cursor: pointer;
    letter-spacing: .3px;
    transition: background .15s;
}
.gv-btn-approve:hover { background: var(--gv-navy-mid); }

/* ============================================================
   FOOTER TOTALS — เส้นปิดบัญชีแบบสมุดบัญชีทางการ
============================================================ */
.gv-table tfoot td {
    background: var(--gv-navy);
    color: #fff;
    font-weight: 700;
    font-family: 'Sarabun', sans-serif;
    padding: 13px 14px;
    border-top: 3px double var(--gv-gold);
}
.gv-table tfoot .label {
    text-align: right;
    color: var(--gv-gold-soft);
    font-size: .72rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 600;
}
.gv-table tfoot .right { text-align: right; }
.gv-table tfoot .base  { color: #fff; }
.gv-table tfoot .deduc { color: #e8a3a3; }
.gv-table tfoot .spend { color: #9fd6ac; }

/* ============================================================
   PAGINATION
============================================================ */
.gv-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px 32px;
    background: var(--gv-paper);
    border-top: 1px solid var(--gv-gold-soft);
}
.gv-pagination .gv-page-info {
    font-size: .8rem;
    color: var(--gv-muted);
}
.gv-pagination .gv-page-info b { color: var(--gv-navy); }
.gv-pages { display: flex; gap: 5px; }
.gv-pg-btn {
    min-width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--gv-gold-soft);
    background: transparent;
    color: var(--gv-navy-mid);
    border-radius: 3px;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
}
.gv-pg-btn:hover { border-color: var(--gv-gold); background: var(--gv-paper-alt); }
.gv-pg-btn.active {
    background: var(--gv-navy);
    border-color: var(--gv-navy);
    color: #fff;
}
.gv-pg-btn:disabled { opacity: .35; cursor: default; }

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 768px) {
    .gv-root { padding: 16px 12px 32px; }
    .gv-card { width: 94%; }
    .gv-letterhead { padding: 20px; }
    .gv-letterhead-title { font-size: 1.2rem; }
    .gv-toolbar { padding: 14px 18px; }
    .gv-pagination { padding: 14px 18px; flex-direction: column; align-items: flex-start; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .gv-table tbody tr, .gv-btn-approve, .gv-pg-btn { transition: none; }
}