/*
 * ธีม Accify — ภาษาภาพเดียวกับหน้าแรกของเว็บ (ตาม "Accify Design Brief" ข้อ 2–6)
 * ใช้ร่วมกับ public/js/accify-tailwind.js : ตัวนั้นแปลงสี/มุม/เงาของคลาส Tailwind, ไฟล์นี้จัดรูปทรงของ element ที่เหลือ
 *   สี        primary #337AB7 · ink #30323A · muted #555 · surface-alt #EEE · input-bg #ECEEF1 · border #CCC · ทอง #FDE090→#F9B808
 *   รูปทรง    การ์ด/แผง 16px · ปุ่ม/ช่องกรอก/ป้ายสถานะ ทรงแคปซูล · เส้นขอบ 1.25px
 *   ตัวอักษร  Prompt เท่านั้น
 */
:root {
  --primary: #337AB7; --primary-hover: #2A6394; --ink: #30323A; --muted: #555555;
  --alt: #EEEEEE; --input: #ECEEF1; --border: #CCCCCC; --white: #FFFFFF;
  --gold1: #FDE090; --gold2: #F9B808; --gold-text: #B58018; --gold-soft: #FDE090;
  --gold: linear-gradient(90deg, #FDE090, #F9B808);
}

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html, body, button, input, select, textarea, table, .font-mono, .select2-container, .select2-dropdown {
  font-family: 'Prompt', system-ui, sans-serif !important;
}
body { color: var(--ink); font-size: 14px; line-height: 1.6; background-color: var(--alt); }
h1, h2, h3 { text-wrap: pretty; }
.font-mono { font-variant-numeric: tabular-nums; }

/* ── ปุ่ม: ทรงแคปซูล, hover ยกขึ้น 2px (เฉพาะปุ่มหลัก/ปุ่มเข้ม) ─────────────────────────── */
button, [type="button"], [type="submit"], [type="reset"], a.btn, label.btn {
  border-radius: 999px !important;
  transition: background-color .2s, border-color .2s, color .2s, transform .2s, box-shadow .2s;
}
button[class*="bg-blue-6"]:not(:disabled):hover, button[class*="bg-blue-7"]:not(:disabled):hover,
button[class*="bg-[#30323A]"]:not(:disabled):hover, button[class*="bg-ink"]:not(:disabled):hover,
.btn-lift:not(:disabled):hover { transform: translateY(-2px); }
button:disabled { cursor: not-allowed; opacity: .55; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ── ช่องกรอก: แคปซูล พื้น #ECEEF1 ขอบ 1.25px #CCC ───────────────────────────────────── */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="hidden"]), select) {
  border-radius: 999px !important; background-color: var(--input) !important; border-color: var(--border) !important; color: var(--ink);
}
textarea { border-radius: 16px !important; background-color: var(--input) !important; border-color: var(--border) !important; color: var(--ink); }
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="hidden"]), select, textarea):focus {
  outline: none; border-color: var(--primary) !important; box-shadow: 0 0 0 3px rgba(51,122,183,.2);
}
input:disabled, input[readonly], select:disabled, textarea:disabled, textarea[readonly] {
  background-color: var(--alt) !important; color: var(--muted);
}
input::placeholder, textarea::placeholder { color: rgba(85,85,85,.7); }
input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: var(--primary); }
input.border-rose-500, input.border-red-500, input.border-red-300, input.border-rose-300, select.border-rose-500 { border-color: var(--gold-text) !important; }

/* ── การ์ด/แผง: ขาว ขอบ #CCC มุม 16 (ตัวคั่นในตารางยังเป็น surface-alt) ───────────────── */
.bg-white.border.rounded-xl, .bg-white.border.rounded-2xl, .bg-white.border.rounded-lg.shadow-sm,
.bg-white.border.rounded-lg.overflow-hidden, form.bg-white.rounded-2xl { border-color: var(--border); }
.card-hover:hover { transform: translateY(-4px); box-shadow: rgba(51,122,183,.16) 0 12px 30px 0 !important; border-color: var(--primary); }

/* ── ขนาดตัวอักษร: caption/label ไม่ต่ำกว่า 13px, body/แถวตาราง 14px (Brief ข้อ 3) ───────────── */
.text-xs, [class*="text-[10px]"], [class*="text-[11px]"], [class*="text-[12px]"] { font-size: 13px !important; line-height: 1.5 !important; }
tbody td, tbody td [class*="text-xs"]:not([class*="rounded-full"]), tbody td [class*="text-["]:not([class*="rounded-full"]) { font-size: 14px !important; }

/* ── ตาราง: หัวตาราง 13px muted, แถว 14px, เส้นคั่น surface-alt, ไม่ใช้ zebra ──────────── */
table { font-size: 14px; }
@media (min-width: 701px) {   /* ตารางหลายคอลัมน์ยังพอดีกรอบเมื่อตัวอักษรเป็น 14px */
  table th[class*="px-"], table td[class*="px-"] { padding-left: 10px !important; padding-right: 10px !important; }
  table:has(thead th:nth-child(12)) th[class*="px-"], table:has(thead th:nth-child(12)) td[class*="px-"] { padding-left: 8px !important; padding-right: 8px !important; }
}
thead, thead.bg-slate-50 { background-color: #fff !important; }
th { font-size: 13px !important; font-weight: 500; color: var(--muted) !important; }
tbody tr:hover { background-color: #F7F7F7; }

/* ── ป้ายสถานะ (pill 13px แคปซูล padding 4×12) — ใช้ชุดสีของ Badge ใน Brief เท่านั้น ────────────
 *   ปกติ/รอ            : พื้น surface-alt ตัว muted
 *   เสร็จ/ครบ          : พื้น primary ตัวขาว           (คลาสเดิม emerald / green / teal)
 *   ต้องทำ/ต้องการเอกสาร: พื้นทองไล่เฉด ตัว ink         (คลาสเดิม amber / yellow / orange)
 *   เลยกำหนด/ผิดพลาด   : พื้น surface-alt ตัว gold-text (คลาสเดิม rose / red / pink) — Brief ไม่มีสีแดง */
span[class*="px-"][class*="py-"][class*="text-xs"], span.rounded-full[class*="px-"] { border-radius: 999px; }
span[class*="rounded-full"][class*="px-"][class*="py-"] { font-size: 13px !important; padding: 4px 12px !important; line-height: 1.5; font-weight: 500; }
span[class*="rounded-full"][class*="bg-blue-"], span[class*="rounded-full"][class*="bg-indigo-"], span[class*="rounded-full"][class*="bg-sky-"],
span[class*="rounded-full"][class*="bg-purple-"], span[class*="rounded-full"][class*="bg-violet-"], span[class*="rounded-full"][class*="bg-cyan-"],
span[class*="rounded-full"][class*="bg-slate-"], span[class*="rounded-full"][class*="bg-gray-"] { background: var(--alt) !important; color: var(--muted) !important; }
span[class*="rounded-full"][class*="bg-emerald-"], span[class*="rounded-full"][class*="bg-green-"], span[class*="rounded-full"][class*="bg-teal-"] { background: var(--primary) !important; color: #fff !important; }
span[class*="rounded-full"][class*="bg-amber-"], span[class*="rounded-full"][class*="bg-yellow-"], span[class*="rounded-full"][class*="bg-orange-"] { background: var(--gold) !important; color: var(--ink) !important; }
span[class*="rounded-full"][class*="bg-rose-"], span[class*="rounded-full"][class*="bg-red-"], span[class*="rounded-full"][class*="bg-pink-"] { background: var(--alt) !important; color: var(--gold-text) !important; }

/* ── ปุ่มสถานะแบบทึบ: ห้ามแดง/เขียว — ลบ/ยกเลิกใช้ปุ่มเข้ม (ink), ปุ่มทองใช้ตัว ink เสมอ ────────────── */
button[class*="bg-rose-5"], button[class*="bg-rose-6"], button[class*="bg-red-5"], button[class*="bg-red-6"] { background: var(--ink) !important; color: #fff !important; }
button[class*="bg-rose-5"]:hover, button[class*="bg-rose-6"]:hover, button[class*="bg-red-5"]:hover, button[class*="bg-red-6"]:hover { background: #44464f !important; }
button[class*="bg-amber-5"], button[class*="bg-amber-6"], button[class*="bg-yellow-5"], button[class*="bg-orange-5"] { background: var(--gold) !important; color: var(--ink) !important; font-weight: 600; }

/* ── Chip ตัวกรอง/ตัวเลือก: ปกติ = พื้น input-bg ขอบ border ตัว muted · เลือกแล้ว = พื้น+ขอบ primary ตัวขาว (13px, padding 8×16) ── */
.tax-wht-type-tab { padding: 8px 16px !important; font-size: 13px !important; border: 1.25px solid var(--border); background: var(--input); color: var(--muted); }
.tax-wht-type-tab.bg-slate-800 { background: var(--primary) !important; border-color: var(--primary) !important; color: #fff !important; }
.tax-wht-type-tab:not(.bg-slate-800):hover { border-color: var(--primary); }

/* ── ส่วนหัวหน้า: ขาวทึบ 96% + blur 8px, เส้นล่าง surface-alt ──────────────────────────── */
header.bg-white { background-color: rgba(255,255,255,.96); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-color: var(--alt); }

/* ── Sidebar: พื้น ink, รายการ active = ขาว 6% + ตัวสีทองอ่อน ───────────────────────────── */
.sidebar-item { color: rgba(255,255,255,.88); border-radius: 999px !important; transition: background-color .2s, color .2s; }
.sidebar-item:hover { background: rgba(255,255,255,.06) !important; color: #fff; }
.sidebar-item.active { background: rgba(255,255,255,.06) !important; color: var(--gold-soft); }
.sidebar-item.active svg { color: var(--gold-soft); }
.acc-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.acc-logo i {
  width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-style: normal; font-weight: 700; font-size: 17px; line-height: 1; border: 2px solid var(--primary); color: var(--primary); flex: none;
}
.acc-logo b { font-weight: 700; font-size: 20px; letter-spacing: -.3px; color: var(--ink); }
.acc-logo.dark i { background: var(--gold); border: 0; color: var(--ink); }
.acc-logo.dark b { color: #fff; }

/* ── ปุ่มทองเด่น (CTA เดียวต่อพื้นที่) ─────────────────────────────────────────────────── */
.btn-gold { background: var(--gold); color: var(--ink); font-weight: 600; border: 0; }
.badge-todo { background: var(--gold); color: var(--ink); }

/* ── Select2 ให้เข้ากับธีม ─────────────────────────────────────────────────────────────── */
.select2-container--default .select2-selection--single { border: 1.25px solid var(--border) !important; border-radius: 999px !important; background: var(--input) !important; color: var(--ink) !important; }
.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--ink) !important; padding-left: 14px !important; }
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: rgba(85,85,85,.7) !important; }
.select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: var(--muted) transparent transparent transparent !important; }
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { border-color: transparent transparent var(--muted) transparent !important; }
.select2-dropdown { border: 1.25px solid var(--border) !important; border-radius: 16px !important; overflow: hidden; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--primary) !important; }

/* ── มือถือ: พื้นที่สัมผัสอย่างน้อย 44px ──────────────────────────────────────────────── */
@media (max-width: 700px) {
  button, select, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]) { min-height: 44px; }
  .sidebar-item { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) { * { transition-duration: .01ms !important; animation-duration: .01ms !important; } }