/* ==========================================================
   TarardProp - BASE - tokens, theme, reset, core layout
   Edit here first: colors, fonts, theme switch
   ========================================================== */

/* ==========================================================
   TarardProp — สไตล์หลัก (รองรับธีมสว่าง/มืด)
   ========================================================== */
:root {
  /* โทเคนหลัก — เขียวมรกตแบบเดียวกับระบบหลัก */
  --brand: #059669;  --brand-dark: #047857;  --brand-light: #ecfdf5;
  --ink: #0f172a;    --muted: #64748b;      --line: #e2e8f0;

  /* โทเคนพื้นผิว (สลับตามธีม) */
  --bg: #f8fafc;        /* พื้นหลังหน้า */
  --surface: #ffffff;   /* การ์ด / แผง */
  --surface-2: #f1f5f9; /* พื้นรอง (hover, track) */
  --field: #ffffff;     /* ช่องกรอกข้อมูล */
  --on-brand: #ffffff;  /* ข้อความบนพื้นสีแบรนด์ */
  --shadow: 0 1px 3px rgba(0,0,0,.08);

  /* ตัวอักษร */
  --font: 'Kanit', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-num: 'Inter', 'Kanit', system-ui, sans-serif;
  /* สีแบรนด์สำหรับข้อความเล็ก — เข้มกว่า --brand เพื่อผ่านเกณฑ์ AA (4.5:1) */
  --brand-text: #047857;

  /* นามแซ่อนำสี: ให้สไตล์เดิมที่อ้างถึง --card / --text
     ยังทำงานได้ และเปลี่ยนตามธีมอัตโนมัติ เพราะแทนค่าตอนใช้งาน */
  --card: var(--surface);
  --text: var(--ink);
}

/* ---------- ธีมมืด ---------- */
[data-theme="dark"] {
  --brand: #34d399;  --brand-dark: #10b981;  --brand-light: #064e3b;
  --ink: #e2e8f0;    --muted: #94a3b8;      --line: #1e2d4a;

  --bg: #0b1220;
  --surface: #111c31;
  --surface-2: #16233c;
  --field: #0b1524;
  --on-brand: #04231c;
  --brand-text: #34d399;
  --shadow: 0 1px 3px rgba(0,0,0,.5);
}

* { box-sizing: border-box; }
body { font-family: var(--font);
       color: var(--ink); background: var(--bg); margin: 0; line-height: 1.6;
       transition: background .2s, color .2s; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }

/* ตัวเลข/อักษรละตินให้ใช้ Inter (อ่านตัวเลขไทย-อารบิกได้ชัด) */
.kpi-val, .stat b, .bar-val, .table td.num, .hero-search .btn {
  font-family: var(--font-num); font-variant-numeric: tabular-nums; }

/* ปุ่มสลับธีม */
.theme-toggle { width: 2.2rem; height: 2.2rem; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--muted); display: inline-grid; place-items: center;
  cursor: pointer; transition: .15s; flex-shrink: 0; }
.theme-toggle:hover { background: var(--surface-2); color: var(--ink); }
.theme-toggle .fa-sun  { display: none; }
.theme-toggle .fa-moon { display: inline-block; }
[data-theme="dark"] .theme-toggle .fa-sun  { display: inline-block; }
[data-theme="dark"] .theme-toggle .fa-moon { display: none; }


.wrap { max-width: 1280px; margin: 0 auto; padding: 0 1rem; }
/* .section { margin: 2.5rem 0; } — ปิดไว้ตามที่ระบุ */
/* หัวข้อส่วน: หัวเรื่องอยู่กลาง, ลิงก์/ปุ่มด้านขวายังชิดขวาเหมือนเดิม */
.section-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
                gap: 1rem; margin-bottom: 1.25rem; }
.section-head h2 { grid-column: 2; justify-self: center; text-align: center;
                   font-size: 1.35rem; font-weight: 600; margin: 0;
                   display: flex; align-items: center; justify-content: center; gap: .5rem; }
.section-head > a, .section-head > form, .section-head > div { grid-column: 3; justify-self: end; }
/* หน้าจอเล็ก: หัวเรื่องและลิงก์ซ้อนกันเป็นบรรทัดเดียว */
@media (max-width: 640px) {
  .section-head { grid-template-columns: 1fr; gap: .5rem; }
  .section-head h2, .section-head > a, .section-head > form, .section-head > div { grid-column: 1; justify-self: center; }
  .section-head h2 { font-size: 1.15rem; }
}

/* หัวข้อแบบซ้ายชิดขอบ (ใช้เฉพาะหน้าแรก) */
.section-head.align-left { display: flex; align-items: center; justify-content: space-between;
                            gap: 1rem; flex-wrap: wrap; }
.section-head.align-left h2 { justify-content: flex-start; text-align: left; }

.section-head a { color: var(--brand-text); font-size: .9rem; }
.section-head a:hover { text-decoration: underline; }


/* ---------- page background pattern ---------- */
body {
  background-image:
    radial-gradient(circle at 1px 1px, var(--line) 1px, transparent 0);
  background-size: 22px 22px;
  background-attachment: fixed;
}
[data-theme="dark"] body {
  background-image:
    radial-gradient(circle at 1px 1px, rgba(148,163,184,.16) 1px, transparent 0);
}