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 เท่านั้น) =====
   จอเล็กยังใช้พฤติกรรมเดิมคือเลื่อนเข้า-ออกจอด้วยปุ่มแฮมเบอร์เกอร์
   ต้องใช้ !important ด้วยเหตุผลเดียวกับด้านบน (Tailwind .w-64 มาทีหลัง) */
@media (min-width: 1024px) {
  #sidebar {
    /* จอคอมโชว์เมนูเสมอ ไม่ว่าสถานะลิ้นชักของจอเล็กจะค้างไว้แบบไหน */
    transform: none !important;
    width: 16rem !important;
    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-footer > 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 .sidebar-footer > div { 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; }
}

@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;
}