/* ============================================================
 * Zioncafe — common stylesheet (โหลดในทุกหน้า)
 * ============================================================
 */

/* ----- CSS variables (theme colors — sync กับ Tailwind config) ----- */
:root {
  --coffee-50:  #FDFAF6;
  --coffee-100: #F5F0EA;
  --coffee-200: #E8DCCB;
  --coffee-700: #854F0B;
  --coffee-900: #4A1B0C;
  --coffee-950: #2C1810;
  --cream-100: #FAEEDA;
  --cream-300: #FAC775;
  --line:      #06C755;
  --line-dark: #04a544;

  /* ===========================================
   * UNIFORM FONT SCALE
   *   1 rem = 20.7px (= 18px × 1.15 — bump 15% จาก base เดิม)
   *   ทุก rem/Tailwind ใช้สเกลเดียวกัน → uniform ทั้งเวบ
   * =========================================== */
  font-size: 20.7px;
}

/* ----- font + base reset ----- */
body {
  font-family: 'Sarabun', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===========================================
 * GLOBAL FONT SCALE — uniform ทั้งเวบ
 *   ใช้ home (index.html) เป็น reference scale
 *   หน้าอื่นที่มี px-based CSS จะถูก override ที่ระดับ class — ระดับ element ใช้ค่านี้
 *   1rem = 20.7px (root) — ทุก rem-based scale ตามนี้
 * =========================================== */
body                                  { font-size: 1rem; }       /* base 20.7px */
body p, body div                      { font-size: inherit; }
body small                            { font-size: 0.78rem; }    /* 16.1px = text-xs */
body label                            { font-size: 0.78rem; }    /* 16.1px = text-xs */

/* form elements — touch-friendly, ขนาด text-sm */
body input, body select, body textarea { font-size: 0.875rem; }   /* 18.1px = text-sm */
body button                           { font-size: 0.875rem; }    /* 18.1px = text-sm */

/* table cells — match expenses tab style */
body th { font-size: 0.7rem; }    /* 14.5px — uppercase faded */
body td { font-size: 0.875rem; }  /* 18.1px = text-sm */

/* Headings — ใช้ rem สเกลตาม root */
body h1 { font-size: 1.6rem; }   /* 33px */
body h2 { font-size: 1.25rem; }  /* 26px */
body h3 { font-size: 1.1rem; }   /* 23px */
body h4 { font-size: 1rem; }     /* 20.7px */

/* ===========================================
 * Override font sizes ที่เล็กเกินจน อ่านยาก — ตั้ง floor ที่ 14px (~0.78rem)
 *   ใช้กับ utility/inline ที่กำหนด px เล็กๆ ตรงๆ
 *   เผื่อ Tailwind text-xs / text-[10px] / text-[11px] / text-[12px] ที่กระจายอยู่
 * =========================================== */
body .text-\[10px\],
body .text-\[11px\] { font-size: 0.7rem !important; }    /* 12.6px */
body .text-\[12px\],
body .text-xs       { font-size: 0.78rem !important; }   /* ~14px */
body .text-\[13px\],
body .text-sm       { font-size: 0.875rem !important; }  /* 15.75px */
body .text-base     { font-size: 1rem !important; }      /* 18px */
body .text-lg       { font-size: 1.125rem !important; }  /* 20.25px */
body .text-xl       { font-size: 1.25rem !important; }   /* 22.5px */
body .text-2xl      { font-size: 1.5rem !important; }    /* 27px */
body .text-3xl      { font-size: 1.875rem !important; }  /* 33.75px */

/* ----- form inputs — touch-friendly ----- */
input, select, textarea, button {
  font-family: inherit;
}

/* ----- ความสูงต่ำสุดของปุ่ม (touch target) ----- */
button { min-height: 36px; }

/* ----- print mode — disable bump ----- */
@media print {
  :root { font-size: 16px; }
}

/* ============================================
 * Navbar — explicit responsive rules
 *   ใช้ data-nav-* selectors แทน Tailwind responsive utilities
 *   เพื่อให้ navbar render เหมือนกันทุกหน้า ไม่ขึ้นกับ Tailwind CDN timing
 * ============================================ */

/* default = mobile (< 640px) */
#zioncafe-nav [data-nav-brand]        { display: none; }                   /* "Zioncafe" text — hidden */
#zioncafe-nav [data-nav-userbox]      { display: none; }                   /* user name + role badge — hidden */
#zioncafe-nav [data-nav-desktop]      { display: none; }                   /* horizontal links — hidden */
#zioncafe-nav [data-nav-toggle]       { display: inline-flex;              /* hamburger — shown */
                                         align-items: center; justify-content: center; }
#zioncafe-nav [data-nav-mobile]       { display: none; }                   /* mobile dropdown — hidden by default */
#zioncafe-nav [data-nav-mobile].open  { display: block; }                  /* dropdown open via JS toggle */

/* sm: ≥ 640px → show brand text + user info column */
@media (min-width: 640px) {
  #zioncafe-nav [data-nav-brand]      { display: inline; }
  #zioncafe-nav [data-nav-userbox]    { display: flex; }
}

/* lg: ≥ 1024px → show desktop links, hide hamburger
 *   mobile + tablet (< 1024px) ใช้ hamburger menu — logout อยู่ใน menu นั้น */
@media (min-width: 1024px) {
  #zioncafe-nav [data-nav-desktop]      { display: flex; }
  #zioncafe-nav [data-nav-toggle]       { display: none; }
  #zioncafe-nav [data-nav-mobile],
  #zioncafe-nav [data-nav-mobile].open  { display: none !important; }
}

/* ===== User dropdown (avatar click → menu with logout) =====
 *   แสดงเฉพาะ desktop (≥1024px) — mobile/tablet logout อยู่ใน hamburger menu แทน */
#zioncafe-nav [data-nav-userdrop]       { position: relative; }
#zioncafe-nav [data-nav-userdrop-menu]  {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 200px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.08);
  z-index: 50;
  overflow: hidden;
  animation: zUserDropIn 0.15s ease-out;
}
@media (min-width: 1024px) {
  #zioncafe-nav [data-nav-userdrop-menu].open { display: block; }
}
/* mobile/tablet: ซ่อน dropdown menu + caret arrow ที่ avatar (logout อยู่ใน hamburger menu) */
@media (max-width: 1023.98px) {
  #zioncafe-nav [data-nav-userdrop-menu] { display: none !important; }
  #zioncafe-nav [data-nav-userdrop] svg  { display: none; }
}
@keyframes zUserDropIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================
 * Toast notifications (window.zToast)
 * ============================================ */
.z-toast-container {
  position: fixed;
  top: 4.5rem;             /* ใต้ navbar */
  right: 1rem;
  z-index: 9998;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
  align-items: flex-end;
  max-width: calc(100vw - 2rem);   /* ไม่ทะลุจอบนมือถือ */
}
.z-toast {
  color: white;
  border-radius: 12px;
  padding: 12px 18px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  width: max-content;
  max-width: min(380px, calc(100vw - 2rem));
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: auto;
  animation: zToastIn 0.25s ease-out;
  background: #2C1810;             /* default — info/no type */
}
.z-toast.success { background: #059669; }   /* เขียว */
.z-toast.error   { background: #DC2626; }   /* แดง */
.z-toast.info    { background: #2563EB; }   /* ฟ้า */
.z-toast.warning { background: #D97706; }   /* ส้ม */
.z-toast .z-icon {
  flex-shrink: 0;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  color: white !important;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: bold;
  line-height: 1;
}
.z-toast .z-msg {
  color: white;
  flex: 1;
  font-size: 0.9rem;
  line-height: 1.35;
  font-weight: 500;
}
.z-toast .z-close {
  cursor: pointer;
  color: rgba(255,255,255,0.7);
  background: none;
  border: none;
  font-size: 20px;
  padding: 0 4px;
  line-height: 1;
}
.z-toast .z-close:hover { color: white; }
.z-toast.fade-out { animation: zToastOut 0.25s ease-in forwards; }
@keyframes zToastIn  { from { transform: translateY(-15px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes zToastOut { to   { transform: translateY(-15px); opacity: 0; } }

/* ============================================
 * Confirm dialog (window.zConfirm)
 * ============================================ */
.z-confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 1rem;
  animation: zConfirmFadeIn 0.18s ease-out;
}
.z-confirm-overlay.fade-out { animation: zConfirmFadeOut 0.18s ease-in forwards; }
.z-confirm-box {
  background: white;
  border-radius: 16px;
  padding: 1.5rem 1.25rem 1.25rem;
  width: 100%;
  max-width: 380px;
  text-align: center;
  box-shadow: 0 16px 40px rgba(0,0,0,0.35);
  animation: zConfirmZoomIn 0.2s cubic-bezier(.34,1.56,.64,1);
}
.z-confirm-icon {
  width: 60px; height: 60px;
  border-radius: 50%;
  font-size: 32px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1rem;
  background: #FAEEDA;
  color: #BA7517;
}
.z-confirm-danger .z-confirm-icon  { background: #FEE2E2; color: #DC2626; }
.z-confirm-warning .z-confirm-icon { background: #FEF3C7; color: #D97706; }
.z-confirm-info .z-confirm-icon    { background: #DBEAFE; color: #2563EB; }
.z-confirm-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #2C1810;
  margin: 0 0 0.5rem;
}
.z-confirm-msg {
  color: #5F5E5A;
  font-size: 0.9rem;
  margin: 0 0 1.25rem;
  line-height: 1.45;
}
.z-confirm-actions {
  display: flex;
  gap: 0.6rem;
}
.z-confirm-actions button {
  flex: 1;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.15s;
  font-family: inherit;
}
.z-btn-cancel  { background: #F5F0EA; color: #2C1810; }
.z-btn-cancel:hover  { background: #E8DCCB; }
.z-btn-confirm { background: #4A1B0C; color: white; }
.z-btn-confirm:hover { background: #2C1810; }
.z-confirm-danger .z-btn-confirm  { background: #DC2626; }
.z-confirm-danger .z-btn-confirm:hover  { background: #B91C1C; }
.z-confirm-warning .z-btn-confirm { background: #D97706; }
.z-confirm-warning .z-btn-confirm:hover { background: #B45309; }
.z-confirm-info .z-btn-confirm    { background: #2563EB; }
.z-confirm-info .z-btn-confirm:hover    { background: #1D4ED8; }
@keyframes zConfirmFadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes zConfirmFadeOut { to   { opacity: 0; } }
@keyframes zConfirmZoomIn  { from { transform: scale(0.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }