/* ธีมน้องแก้ม (ivory) — แหล่งเดียวของ palette และ primitive ที่ webapp ทุกหน้าใช้ร่วมกัน
 *
 * ทุกหน้าโหลดด้วย <link rel="stylesheet" href="/static/theme.css"> ใน <head> ก่อน <style>
 * ของหน้าเอง (blocking กัน FOUC) แล้วเหลือ <style> ไว้เฉพาะ layout ของหน้านั้นจริง ๆ
 * ห้ามหน้าไหนประกาศ :root หรือใส่ hex ดิบเอง — มีเทสต์ tests/test_webapp_theme.py กันไว้
 *
 * ค่าใน :root ชุดแรกคือ palette ของจริงที่ยกมาจาก app/templates/money_app.html ห้ามแก้ค่า
 * ชุด "ink" (--sky-ink / --caramel-ink / --muted-ink / --danger-deep) คือคู่สีเวอร์ชันเข้มพอ
 * ให้ contrast >= 4.5 บนพื้นอ่อน ใช้เป็น "สีตัวอักษร" คู่กับพื้นสีเดิม
 */

:root {
  /* --- palette หลัก (ยกมาจาก money_app.html ตรง ๆ) --- */
  --ivory: #FFF6E9;          /* พื้นหลังหน้า */
  --card: #FFFFFF;           /* พื้นการ์ด / ช่องกรอก */
  --ink: #5A321F;            /* ตัวอักษรหลัก */
  --muted: #7F6759;          /* ตัวอักษรรอง / คำอธิบาย (เข้มพอให้ผ่าน AA บนทั้ง --card 5.27 และ --ivory 4.92
                                ค่าเดิม #8A7263 ได้ 4.50/4.20 — ตกเกณฑ์บนพื้นหน้า) */
  --sky: #8CC9EA;            /* ฟ้าอ่อน — ใช้เป็น focus ring */
  --sky-deep: #4F9DCE;       /* ฟ้าเน้น — ใช้เป็น "พื้น/เส้น" เท่านั้น ห้ามใช้เป็นสีตัวอักษร
                                (ขาวบนสีนี้ 2.98, สีนี้บนพื้นครีม 2.78 — ตกเกณฑ์ AA ทั้งสองทาง)
                                ปุ่มหลัก/ตัวอักษรฟ้าให้ใช้ --sky-ink */
  --sky-soft: #EAF6FC;       /* พื้นฟ้าจาง */
  --caramel: #D98A32;        /* คาราเมล — ยอดเงิน/เตือน */
  --butter: #F6C963;         /* เหลืองเนย — ไฮไลต์/กราฟ */
  --success: #4F9A72;        /* เขียวสำเร็จ / รายรับ */
  --success-soft: #EAF6EF;   /* พื้นเขียวจาง */
  --danger: #C85D55;         /* แดงเตือน / รายจ่าย */
  --danger-soft: #FBEFEE;    /* พื้นแดงจาง */
  --border: #EFE1CB;         /* เส้นขอบมาตรฐาน */

  /* --- สีตัวอักษรเวอร์ชันเข้ม (ผ่าน WCAG AA บนพื้นอ่อนคู่ของมัน) --- */
  /* คู่ "fill -> ตัวอักษร" ที่ต้องสลับเสมอเมื่อเอา token ไปใช้เป็น color:
     --sky-deep -> --sky-ink · --caramel -> --caramel-ink · --success -> --success-deep
     · --danger -> --danger-deep  (สี่ตัวซ้ายมือไม่ผ่าน 4.5 บนพื้นใดในธีมนี้เลย) */
  --sky-ink: #2C739F;        /* ฟ้าเข้ม — ตัวอักษรบนพื้นขาว/ฟ้าจาง, พื้นปุ่ม .btn-primary */
  --caramel-ink: #9A5A12;    /* คาราเมลเข้ม — ตัวอักษรบน --caramel-soft */
  --muted-ink: #6F5A4C;      /* น้ำตาลเทาเข้ม — ตัวอักษรบน --muted-soft */
  --danger-deep: #B04A42;    /* แดงเข้ม — ตัวอักษรบน --danger-soft, แท่งกราฟรายจ่าย */

  /* --- พื้นผิวเสริม (ย้ายมาจาก hex ที่เคยกระจายอยู่ในเทมเพลต) --- */
  --muted-soft: #EFE7DC;     /* พื้นชิปสีกลาง */
  --caramel-soft: #FBEAD3;   /* พื้นชิปคาราเมล / กล่อง .notice */
  --butter-soft: #FFF3D6;    /* พื้นเหลืองจาง — กล่องเวลาหมดอายุ */
  --track: #F3E9DA;          /* รางแถบความคืบหน้า */
  --border-warm: #F5D9B8;    /* เส้นขอบโทนอุ่น (ช่องกรอกในแบบสอบถาม) */
  --ink-disabled: #CBBBA7;   /* ตัวอักษรของปุ่ม/วันที่ที่กดไม่ได้ */
  --on-accent: #FFFFFF;      /* ตัวอักษรบนพื้นสีเน้น */
  --scrim: rgba(90, 50, 31, .45);  /* ฉากหลังทึบแสงของ modal / bottom sheet (--ink 45%) */

  /* --- สีกราฟ (Chart.js อ่านค่าเหล่านี้ผ่าน getComputedStyle) --- */
  --cocoa: #B08968;          /* น้ำตาลโกโก้ — สีหมวดในกราฟวงกลม */
  --success-light: #6FB98F;  /* หัวไล่เฉดแท่งรายรับ */
  --success-deep: #3E7E5C;   /* ท้ายไล่เฉดแท่งรายรับ */
  --danger-light: #E08A80;   /* หัวไล่เฉดแท่งรายจ่าย */
}

/* --------------------------------------------------------------------------
 * พื้นฐาน
 * -------------------------------------------------------------------------- */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: "Sarabun", -apple-system, sans-serif;
}

h1, h2, h3, .section-title { font-family: "Mitr", "Sarabun", sans-serif; }

/* --------------------------------------------------------------------------
 * โครงหน้า
 * -------------------------------------------------------------------------- */
.app { max-width: 480px; margin: 0 auto; padding: 16px 16px 104px; }

.card {
  background: var(--card);
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 2px 10px rgba(90, 50, 31, .06);
}

.section-title { font-size: 14px; font-weight: 600; margin: 0 0 12px; }
.sub { color: var(--muted); font-size: 13px; margin: 0 0 14px; }
.hint { color: var(--muted); font-size: 12px; margin: 8px 0 0; }
.muted { color: var(--muted); }
.empty { color: var(--muted); font-size: 13px; padding: 6px 2px; }

/* --------------------------------------------------------------------------
 * ชิป (ป้ายสถานะเล็ก ๆ)
 * -------------------------------------------------------------------------- */
.chip { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.chip-muted { background: var(--muted-soft); color: var(--muted-ink); }
.chip-sky { background: var(--sky-soft); color: var(--sky-ink); }
.chip-caramel { background: var(--caramel-soft); color: var(--caramel-ink); }

/* --------------------------------------------------------------------------
 * ปุ่ม
 * -------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  color: var(--ink);
  font-family: "Sarabun", sans-serif;
  font-size: 15px;
  font-weight: 600;
  padding: 11px 14px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.btn:disabled, .btn.off { opacity: .5; cursor: default; }
.btn-primary { background: var(--sky-ink); color: var(--on-accent); border-color: var(--sky-ink); }
.btn-ghost { background: var(--card); color: var(--ink); border-color: var(--border); }
.btn-danger { background: var(--danger-soft); color: var(--danger-deep); border-color: var(--danger-soft); }

.link-btn {
  border: none;
  background: none;
  color: var(--sky-ink);
  font-weight: 600;
  cursor: pointer;
  font-family: "Sarabun", sans-serif;
}

/* --------------------------------------------------------------------------
 * ปุ่ม CTA ใหญ่ (เรียกร้องหลักของหน้า) — เดิม money_app/meeting_app/survey_app นิยามเอง
 * พื้นเป็น --sky-deep (ขาวบนพื้นนี้ contrast 2.98 ไม่ผ่าน AA) ย้ายมารวมที่นี่แล้วเปลี่ยนพื้นเป็น
 * --sky-ink (4.70) ให้เป็นสีปุ่มหลักชุดเดียวกับ .btn-primary ตามกฎ "ธีมเดียวทั้งแอป"
 * หน้าที่ต้องการเต็มความกว้าง/ไม่มี padding แนวนอน (เช่น #createBar ของ meeting_app) ให้ scope
 * ด้วยตัวหุ้มของหน้าเอง อย่านิยาม .cta-big ซ้ำในหน้า
 * -------------------------------------------------------------------------- */
.cta-big {
  display: block;
  background: var(--sky-ink);
  color: var(--on-accent);
  border: none;
  border-radius: 14px;
  padding: 14px 28px;
  font-size: 16px;
  font-weight: 600;
  font-family: "Mitr", "Sarabun", sans-serif;
  text-align: center;
  cursor: pointer;
}
.cta-big:disabled { opacity: .5; cursor: default; }

/* --------------------------------------------------------------------------
 * ชิปกรอง (ปุ่มเลือกตัวกรอง/หมวดแบบชิป) — money_app ใช้ .active, meeting_app ใช้ .picked
 * เดิมสถานะ "เลือกอยู่" ของสองหน้าไม่เหมือนกัน (พื้นทึบ vs พื้นอ่อน+ตัวอักษรฟ้า) รวมให้เป็น
 * fill เดียว (--sky-ink) ตามกฎ "ธีมเดียวทั้งแอป"
 * สถานะไม่ได้เลือก (idle) เดิมใช้ตัวอักษร --muted บน --card ซึ่งพอรวมมาอยู่ในกฎเดียวที่ theme.css
 * แล้ววัดจริงได้ contrast 4.4989 (หวุดหวิดต่ำกว่าเกณฑ์ 4.5 — เดิมรอดเพราะกฎนี้เคยกระจายอยู่ใน
 * <style> ของแต่ละหน้า ไม่ถูกเทสต์คู่สีของ theme.css กวาดถึง) เปลี่ยนเป็น --muted-ink (6.48) แทน
 * -------------------------------------------------------------------------- */
.chip-filter {
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted-ink);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-family: "Sarabun", sans-serif;
}
.chip-filter.active, .chip-filter.picked {
  background: var(--sky-ink);
  color: var(--on-accent);
  border-color: var(--sky-ink);
}

/* --------------------------------------------------------------------------
 * ปุ่มสลับประเภท (เช่น รายจ่าย/รายรับ, สถานที่/นัดออนไลน์) — money_app กับ meeting_app
 * นิยามเหมือนกันทุกตัวอักษรอยู่แล้ว ย้ายมารวมตรง ๆ (idle ใช้ --muted-ink เหตุผลเดียวกับ .chip-filter
 * ด้านบน — --muted บน --card วัดจริงได้ 4.4989 ต่ำกว่าเกณฑ์ 4.5)
 * -------------------------------------------------------------------------- */
.kind-btn {
  flex: 1;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted-ink);
  font-weight: 600;
  font-size: 14px;
  padding: 10px;
  border-radius: 10px;
  cursor: pointer;
  font-family: "Sarabun", sans-serif;
}
.kind-btn.active { background: var(--sky-ink); color: var(--on-accent); border-color: var(--sky-ink); }

/* --------------------------------------------------------------------------
 * ช่องกรอก — :where() ทำให้ specificity เป็น 0 กฎของหน้า (.field-input ฯลฯ) ทับได้ตามปกติ
 * เว้น checkbox/radio ไว้ เพราะ width:100% ทำให้กล่องติ๊กบวมผิดรูป
 * -------------------------------------------------------------------------- */
input:where(:not([type="checkbox"]):not([type="radio"])), select, textarea {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--ink);
  font-family: "Sarabun", sans-serif;
  font-size: 16px;
}
input:where(:not([type="checkbox"]):not([type="radio"])):focus,
select:focus, textarea:focus { outline: 2px solid var(--sky); }

.field-label {
  display: block;
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
  margin: 12px 0 6px;
}
.field-input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  font-family: "Sarabun", sans-serif;
  font-size: 15px;
  color: var(--ink);
  background: var(--card);
}
.field-input:focus { outline: 2px solid var(--sky); }

/* --------------------------------------------------------------------------
 * ข้อความแจ้งผล
 * -------------------------------------------------------------------------- */
.notice {
  background: var(--caramel-soft);
  color: var(--caramel-ink);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  margin-bottom: 10px;
}
.msg { margin-top: 10px; font-size: 14px; min-height: 20px; }
/* ข้อความผลลัพธ์เป็นตัวอักษรล้วนบนพื้นหน้า — ต้องใช้เวอร์ชันเข้ม (--success 3.16 / --danger 3.81
 * บน --ivory ตกเกณฑ์ AA ทั้งคู่) */
.msg.ok { color: var(--success-deep); }
.msg.err { color: var(--danger-deep); }

/* --------------------------------------------------------------------------
 * การ์ดคำพูดของน้องแก้ม
 * -------------------------------------------------------------------------- */
.speech-card {
  display: flex;
  gap: 12px;
  align-items: center;
  border-radius: 16px;
  padding: 14px 16px;
  background: var(--sky-soft);
}
.speech-card p { margin: 0; font-size: 14px; line-height: 1.45; word-break: break-word; }
.speech-card.mood-over { background: var(--danger-soft); }
.speech-card.mood-warn { background: rgba(246, 201, 99, .25); }
.speech-card.mood-good { background: var(--success-soft); }
.speech-card.mood-even, .speech-card.mood-start { background: var(--sky-soft); }

/* ขนาดฐานของ .mascot-sm ต้องอยู่นอก .speech-card เพราะ class นี้ reuse ที่อื่นด้วย
   (เช่น .pie-empty ของ money_app ที่ไม่มี .speech-card เป็นแม่) */
.mascot-sm { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }