body { box-sizing: border-box; font-family: 'Kanit', sans-serif; }
* { font-family: 'Kanit', sans-serif; }

/* ===== ลิ้นชักเลื่อนเข้า-ออกจอ (เฉพาะจอเล็ก < lg) =====
   !important เพราะ Tailwind CDN แทรก <style> ของตัวเองเข้ามาทีหลัง app.css เสมอ
   ทำให้ utility class .transform (ที่ค่าเริ่มต้น --tw-translate-x/y เป็น 0) แย่ง cascade
   ชนะกฎด้านล่างนี้ ผลคือ sidebar ไม่เลื่อนออกจอบนมือถือเลย

   ต้องครอบด้วย media query ไม่ให้เลยไปถึงจอใหญ่ด้วย มิฉะนั้น .sidebar-closed
   (ซึ่งติดมากับ markup ตั้งแต่แรก) จะดัน sidebar ออกนอกจอบนจอคอมไปด้วย
   — Tailwind สร้าง utility ให้เฉพาะคลาสของตัวเอง จึงไม่มีคลาส .lg\:sidebar-open
   มาทับให้ และ .lg\:translate-x-0 ก็ไม่มี !important เลยสู้กฎนี้ไม่ได้ */
@media (max-width: 1023.98px) {
  .sidebar-open { transform: translateX(0) !important; }
  .sidebar-closed { transform: translateX(-100%) !important; }
}

/* ===== ยุบ/ขยาย sidebar เป็นแถบไอคอน — ใช้ได้ทุกขนาดจอ (เดิมจำกัดไว้แค่จอ >= lg)
   มือถือก็ย่อลิ้นชักให้เหลือแถบไอคอนได้เหมือนกันแล้ว (ผู้ใช้ต้องกดเองเสมอ ไม่ย่อให้อัตโนมัติ
   บนจอเล็ก — ดู autoWantsCollapse() ใน app.js) ต้องใช้ !important เพราะ Tailwind CDN
   แทรก <style> ของตัวเองเข้ามาทีหลัง app.css เสมอ (.w-64 ของ Tailwind จะชนะถ้าไม่ !important) */
#sidebar { transition: width 0.3s ease, transform 0.3s ease; }

/* ตอนโหลดหน้าต้องไม่มีอนิเมชัน ไม่งั้นจอที่ต้องย่ออัตโนมัติ (เช่น โน้ตบุ๊กจอแคบ) จะเห็นเมนูรูด
   จาก 16rem เหลือ 5rem ทุกครั้งที่เปิดหน้า — สคริปต์จะถอดคลาสนี้ออกหลังเฟรมแรก */
#sidebar.sidebar-booting { transition: none !important; }

#sidebar.is-collapsed { width: 5rem !important; }

/* ซ่อนข้อความทั้งหมด เหลือแต่ไอคอน */
#sidebar.is-collapsed .sidebar-label { display: none !important; }

/* จัดไอคอนให้อยู่กึ่งกลางและลด padding ให้พอดีความกว้าง 5rem */
#sidebar.is-collapsed .sidebar-brand { padding-left: 1rem; padding-right: 1rem; }
#sidebar.is-collapsed .sidebar-brand > div,
#sidebar.is-collapsed .sidebar-collapse-row { justify-content: center; }

/* กว้างแค่ 5rem ใส่สองปุ่มเรียงกันไม่พอ — ลด padding แล้วให้ตกบรรทัดได้ */
#sidebar.is-collapsed .sidebar-collapse-row {
  flex-wrap: wrap;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
#sidebar.is-collapsed .nav-item {
  justify-content: center;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

/* หมุนลูกศรให้ชี้ออกเมื่อยุบอยู่ */
#sidebar.is-collapsed #sidebar-collapse-icon { transform: rotate(180deg); }

/* ปุ่ม "อัตโนมัติ": โชว์ข้อความตอนเมนูกว้าง เหลือไอคอนตอนเมนูย่อ */
.sidebar-auto-icon { display: none; }
#sidebar.is-collapsed .sidebar-auto-icon { display: inline; font-size: 0.95rem; }

/* ===== จอ >= lg เท่านั้น: บังคับให้ sidebar เป็นคอลัมน์นิ่งเสมอ ไม่ใช่ลิ้นชัก =====
   (ความกว้างตอนย่อ/ขยายใช้กฎ #sidebar.is-collapsed ที่ประกาศไว้แบบไม่มี media query ด้านบนแล้ว) */
@media (min-width: 1024px) {
  #sidebar {
    /* จอคอมโชว์เมนูเสมอ ไม่ว่าสถานะลิ้นชักของจอเล็กจะค้างไว้แบบไหน */
    transform: none !important;
    width: 16rem !important;
  }
}

@keyframes slideIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.animate-slide-in { animation: slideIn 0.3s ease-out; }
.animate-fade-in { animation: fadeIn 0.3s ease-out; }
.animate-pulse-custom { animation: pulse 1.5s infinite; }
.animate-spin { animation: spin 1s linear infinite; }

/* ===== ช่องเลือกไฟล์ที่ซ่อนอยู่ =====
   ห้ามใช้ display:none กับ <input type="file"> เด็ดขาด — เดสก์ท็อปยอมให้สั่ง .click()
   ด้วย JS เปิดหน้าต่างเลือกไฟล์ได้ แต่ Safari บน iOS และเบราว์เซอร์ในแอป (LINE,
   Facebook, ฯลฯ) จะไม่เปิดให้ เพราะ input ไม่ได้ถูก render อยู่จริง ผลคือกดปุ่มแล้วเงียบ
   วิธีนี้ซ่อนจากสายตาแต่ยังอยู่ใน layout จึงกดผ่าน <label for="..."> ได้ทุกเบราว์เซอร์ */
.file-input-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.modal-backdrop {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

.income-gradient { background: linear-gradient(135deg, #AED581 0%, #81C784 100%); }
.expense-gradient { background: linear-gradient(135deg, #FF8A65 0%, #EF5350 100%); }
.balance-gradient { background: linear-gradient(135deg, #26A69A 0%, #0288D1 100%); }

.table-container::-webkit-scrollbar { height: 8px; }
.table-container::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; }
.table-container::-webkit-scrollbar-thumb { background: #26A69A; border-radius: 4px; }

.btn-primary {
  background: linear-gradient(135deg, #26A69A 0%, #00897B 100%);
  transition: all 0.3s ease;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(38, 166, 154, 0.4); }
.btn-primary:disabled { opacity: 0.6; transform: none; cursor: not-allowed; }

.btn-danger { background: linear-gradient(135deg, #EF5350 0%, #D32F2F 100%); }
.btn-danger:disabled { opacity: 0.6; cursor: not-allowed; }

.sweet-alert { animation: slideIn 0.3s ease-out; }

.page-section { display: none; }
.page-section.active { display: block; animation: fadeIn 0.3s ease-out; }

.nav-item { transition: all 0.2s ease; }
.nav-item.active { background: rgba(38, 166, 154, 0.2); color: #26A69A; }
.nav-item:hover:not(.active) { background: rgba(100, 116, 139, 0.3); }

.category-card { transition: all 0.2s ease; }
.category-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }

.toggle-switch {
  position: relative; width: 48px; height: 24px;
  background: #cbd5e1; border-radius: 12px;
  cursor: pointer; transition: background 0.3s;
}
.toggle-switch.active { background: #26A69A; }
.toggle-switch::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px; background: white;
  border-radius: 50%; transition: transform 0.3s;
}
.toggle-switch.active::after { transform: translateX(24px); }

.loading-overlay {
  position: fixed; inset: 0;
  background: rgba(255,255,255,0.95);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  z-index: 9999;
}
.loading-overlay.hidden { display: none; }

.error-box {
  background: #FEE2E2; border: 1px solid #FECACA;
  color: #DC2626; padding: 1rem; border-radius: 0.75rem;
  margin: 1rem; text-align: center;
}

/* ============================================================
   พื้นหลังตามสภาพอากาศ

   ทาไว้บนเลเยอร์ fixed ที่อยู่หลังทุกอย่าง แทนที่จะไปแก้ background ของ body
   เพราะ body ถูก Tailwind ทาสีไว้แล้ว และการซ้อนเลเยอร์ทำให้เปลี่ยนธีมแบบ
   ค่อยๆ จางเข้าหากันได้ ไม่กระตุกตอนผลพยากรณ์มาถึงหลังหน้าโหลดเสร็จ

   ตัวสีเลือกให้จางพอที่ตัวหนังสือสีเข้มบนการ์ดสีขาวยังอ่านออกเท่าเดิม —
   พื้นหลังไม่ใช่ตัวสื่อข้อมูล ชิปสภาพอากาศต่างหากที่บอกว่าฝนตกหรือแดดออก
   ============================================================ */
#weather-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(160deg, #F0FDFA 0%, #ECFDF5 50%, #ECFEFF 100%);
  transition: opacity 0.8s ease, background 0.8s ease;
}
#weather-bg.is-on { opacity: 1; }

body[data-weather] { background: transparent; }

/* กลางวัน */
body[data-weather="clear-day"]   #weather-bg { background: linear-gradient(160deg, #E0F2FE 0%, #BAE6FD 45%, #FEF3C7 100%); }
body[data-weather="cloudy-day"]  #weather-bg { background: linear-gradient(160deg, #E2E8F0 0%, #CBD5E1 55%, #E0F2FE 100%); }
body[data-weather="fog-day"]     #weather-bg { background: linear-gradient(160deg, #E5E7EB 0%, #D1D5DB 55%, #E5E7EB 100%); }
body[data-weather="drizzle-day"] #weather-bg { background: linear-gradient(160deg, #DBEAFE 0%, #BFDBFE 55%, #CBD5E1 100%); }
body[data-weather="rain-day"]    #weather-bg { background: linear-gradient(160deg, #E2E8F0 0%, #B4C2D3 55%, #DBEAFE 100%); }
body[data-weather="storm-day"]   #weather-bg { background: linear-gradient(160deg, #CBD5E1 0%, #94A3B8 50%, #C7D2FE 100%); }
body[data-weather="snow-day"]    #weather-bg { background: linear-gradient(160deg, #F8FAFC 0%, #E2E8F0 55%, #DBEAFE 100%); }

/* กลางคืน — สลับเป็นโทนเข้ม แต่ยังไล่ระดับตามสภาพอากาศเดียวกัน */
body[data-weather="clear-night"]   #weather-bg { background: linear-gradient(160deg, #0F172A 0%, #1E293B 55%, #312E81 100%); }
body[data-weather="cloudy-night"]  #weather-bg { background: linear-gradient(160deg, #1E293B 0%, #334155 55%, #1E293B 100%); }
body[data-weather="fog-night"]     #weather-bg { background: linear-gradient(160deg, #334155 0%, #475569 55%, #334155 100%); }
body[data-weather="drizzle-night"] #weather-bg { background: linear-gradient(160deg, #1E293B 0%, #1E3A8A 60%, #334155 100%); }
body[data-weather="rain-night"]    #weather-bg { background: linear-gradient(160deg, #0F172A 0%, #1E3A8A 60%, #334155 100%); }
body[data-weather="storm-night"]   #weather-bg { background: linear-gradient(160deg, #020617 0%, #1E1B4B 55%, #312E81 100%); }
body[data-weather="snow-night"]    #weather-bg { background: linear-gradient(160deg, #1E293B 0%, #334155 55%, #475569 100%); }

/* เม็ดฝน/เกล็ดหิมะ — เส้นเฉียงจางๆ เลื่อนลงเรื่อยๆ วาดด้วย gradient ซ้ำ ไม่มี DOM เพิ่ม */
#weather-fx {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.8s ease;
}
body[data-weather^="rain"] #weather-fx,
body[data-weather^="drizzle"] #weather-fx,
body[data-weather^="storm"] #weather-fx {
  opacity: 0.28;
  background-image: repeating-linear-gradient(
    104deg,
    rgba(255, 255, 255, 0) 0 12px,
    rgba(255, 255, 255, 0.55) 12px 13px
  );
  background-size: 120px 120px;
  animation: weather-fall 0.7s linear infinite;
}
body[data-weather^="snow"] #weather-fx {
  opacity: 0.5;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.9) 1.5px, transparent 2px),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,0.8) 1.5px, transparent 2px),
    radial-gradient(circle at 45% 85%, rgba(255,255,255,0.7) 1.5px, transparent 2px);
  background-size: 90px 90px;
  animation: weather-fall 5s linear infinite;
}
body[data-weather^="fog"] #weather-fx {
  opacity: 0.45;
  background-image: linear-gradient(0deg, rgba(255,255,255,0.75), rgba(255,255,255,0) 60%);
}

@keyframes weather-fall {
  from { background-position: 0 0; }
  to   { background-position: 0 120px; }
}

/* เคารพการตั้งค่าของเครื่อง — ฝนที่ตกตลอดเวลาทำให้บางคนเวียนหัว */
@media (prefers-reduced-motion: reduce) {
  #weather-fx { animation: none !important; }
}

/* ชิปสภาพอากาศบนแถบหัวเรื่อง */
.weather-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  border: 1px solid #E2E8F0;
  background: #FFFFFF;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.weather-chip:hover { border-color: #5EEAD4; box-shadow: 0 1px 6px rgba(15, 118, 110, 0.15); }