/* LoanCalc Pro — Final UI (Mobile First) */

* {
  box-sizing: border-box;
  font-family: "Bai Jamjuree", sans-serif;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  background: #f7f9fb;
  color: #222;
  font-size: 15px;
}

.topbar {
  background: linear-gradient(135deg, #007bff, #00b4d8);
  color: #fff;
  text-align: center;
  padding: 12px 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
}

.topbar h1 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: .3px;
}

.toolbar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 10px;
}

.search-bar input {
  flex: 1;
  max-width: 480px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 1rem;
  outline: none;
}

.search-bar input:focus {
  border-color: #007bff;
  box-shadow: 0 0 4px rgba(0, 123, 255, .25);
}

.action-bar {
  text-align: center;
}

.primary-big {
  font-size: 18px;
  font-weight: 900;
  padding: 12px 20px;
  border-radius: 12px;
  width: 92%;
  background: linear-gradient(135deg, #01dc38, #00cd3e);
  color: #fcfeff;
border-bottom: 5px solid #00000023;
  cursor: pointer;
}

button {
  border: none;
  border-radius: 10px;
  padding: 8px 14px;
  font-size: .95rem;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease;
}

button:hover {
  transform: scale(1.05);
}

button.info {
  background: #00c31a;
  color: #fff;
}

button.success {
  background: #2ecc71;
  color: #fff;
}

button.warn {
  background: #ffb347;
  color: #ffffff;
}

button.danger {
  background: #e74c3c;
  color: #fff;
}

#customerList {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.customer-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .08);
  overflow: hidden;
  transition: all .25s ease;
}

.customer-card.open {
  border: 2px solid #007bff;
}

.card-main {
  padding: 10px 14px;
  display: flex;
  border-left: 3px solid #3aadff;
  ;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.card-main:hover {
  background: #f0f7ff;
}

.left h3 {
  margin: 0;
  font-size: 1.05rem;
}

.left p {
  margin: 2px 0 0;
  color: #666;
}

.stats {
  text-align: right;
}

.stats div {
  font-size: .92rem;
}

.card-expand {
  background: #f8fafc;
  padding: 10px 14px;
  border-top: 1px solid #e3e8ef;
}

.hidden {
  display: none !important;
}

.cust-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-top: 8px;
}

.loan-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px;
  margin: 8px 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}

.loan-header {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: .9rem;
  margin-bottom: 8px;
}

.badge {
  background: #007bff;
  color: #fff;
  padding: 2px 6px;
  border-radius: 6px;
  font-size: .8rem;
}

.loan-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.mini-table,
.full-history {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}

.mini-table th,
.full-history th {
  background: #007bff;
  color: #fff;
  padding: 6px;
}

.mini-table td,
.full-history td {
  border-bottom: 1px solid #eee;
  text-align: center;
  padding: 6px;
}

.dialog {
  position: fixed;
  inset: 0;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, .45);
  z-index: 1000;
  padding: 10px;
}

.dialog.show {
  display: flex;
}

.dialog-box {
  background: #fff;
  border-radius: 12px;
  width: 92%;
  max-width: 420px;
  padding: 18px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .25);
  animation: pop .25s ease;
}

.dialog-box h3 {
  margin: 0 0 10px;
  color: #007bff;
}

.dialog-box label {
  display: block;
  font-weight: 600;
  margin: 6px 0 3px;
}

.dialog-box input {
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid #ccc;
  margin-bottom: 6px;
}

.dialog-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}

#toastWrap {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 2000;
  pointer-events: none;
}

.toast {
  min-width: 220px;
  text-align: center;
  background: rgba(0, 0, 0, .85);
  color: #fff;
  padding: 10px 16px;
  border-radius: 25px;
  opacity: 0;
  transition: opacity .3s, bottom .3s;
  font-size: .9rem;
}

.toast.show {
  opacity: 1;
}

.toast.info {
  background: linear-gradient(135deg, #3498db, #2980b9);
}

.toast.success {
  background: linear-gradient(135deg, #2ecc71, #27ae60);
}

.toast.warn {
  background: linear-gradient(135deg, #f39c12, #e67e22);
  color: #ffffff;
  font-size: 1.2em;
  font-weight: 900;
}

.toast.error,
.toast.danger {
  background: linear-gradient(135deg, #e74c3c, #c0392b);
   font-size: 1.2em;
  font-weight: 900;
}

@keyframes pop {
  from {
    transform: scale(.95);
    opacity: 0
  }

  to {
    transform: scale(1);
    opacity: 1
  }
}

@media (max-width: 480px) {
  .card-main {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .stats {
    text-align: left;
  }

  .dialog-buttons {
    flex-wrap: wrap;
  }

  .dialog-buttons button {
    flex: 1 1 48%;
  }
}

/* === PATCH: จัดลำดับบิล + เน้นสี (วางท้ายไฟล์) === */

/* บังคับโครง header ของบิล */
.customer-card .loan-card .loan-header {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  align-items: center !important;
}

/* บรรทัดแรก: ชื่อบิล กินทั้งแถว */
.customer-card .loan-card .loan-header .loan-title {
  order: 0 !important;
  flex: 1 1 100% !important;
  font-weight: 800 !important;
  font-size: 1.05rem !important;
  color: #007bff !important;
  margin-bottom: 2px !important;
}

/* บรรทัดถัดไป: วันที่ → เงินต้น → ดอก% → ดอก(ดู) */
.customer-card .loan-card .loan-header .badge.start {
  order: 1 !important;
}

.customer-card .loan-card .loan-header .badge.principal {
  order: 2 !important;
}

.customer-card .loan-card .loan-header .badge.rate {
  order: 3 !important;
}

.customer-card .loan-card .loan-header .badge.interest {
  order: 4 !important;
}

/* สี/น้ำหนักให้อ่านง่าย */
.customer-card .loan-card .loan-header .badge {
  font-size: 0.92rem !important;
  padding: 4px 8px !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  color: #fff !important;
}

.customer-card .loan-card .loan-header .badge.start {
  background: #d5fcff !important;
  color: #2c2c2c !important;
}

/* วันที่ = เทาเข้มอ่านง่าย */
.customer-card .loan-card .loan-header .badge.principal {
  background: #427eff !important;
}

/* ต้น = เขียวเด่น */
.customer-card .loan-card .loan-header .badge.rate {
  background: #3498db !important;
}

/* ดอก% = ฟ้า */
.customer-card .loan-card .loan-header .badge.interest {
  background: #efefef !important;
}

/* ดอก(ดู) = ส้ม */

/* กัน style เก่าไปบีบ badge จนเล็กเกิน */
.customer-card .loan-card .badge {
  line-height: 1.25 !important;
}

/* 🔰 Badge สถานะมุมขวาบน */
.status-badge {
  position: absolute;
  top: 10px !important;
  right: 10px !important;
  font-size: 1.0em !important;
  font-weight: 900;
  padding: 6px 12px;
  border-radius: 12px;
  color: #ffffff;
  /*  box-shadow: 0 2px 4px rgba(0, 0, 0, 0); */
  z-index: 2;
  letter-spacing: 0.5px;
}

.customer-card {
  position: relative;
}

/* status-badge - ถูกกำหนดใน JS ให้ใช้ bg-success, bg-warning, bg-danger */
.status-badge {
  /* ตั้งค่าพื้นฐานเผื่อไว้ */
  color: white;
  font-weight: 700;
}

/* 🟢 JAVASCRIPT: bg-success (สถานะ "จ่ายครบ") */
.status-badge.bg-success {
  background-color: #2ecc71;
  /* สีเขียวที่ดูดี */
  color: white;
}

/* 🟡 JAVASCRIPT: bg-warning (สถานะ "กำลังเดิน" หรือ "ครบงวดวันนี้") */
.status-badge.bg-warning {
  background-color: rgb(227, 227, 227);
  /* ใช้สีเหลือง/ส้มเดิมของ DUE */
  /* ใช้ Animation เดิมของ DUE */
  animation: simple-pulse 0.7s ease-in-out 2 forwards;
}

/* 🔴 JAVASCRIPT: bg-danger (สถานะ "ค้างจ่าย" จาก calcOverdueAmount) */
.status-badge.bg-danger {
  background-color: rgb(235, 0, 0);
  /* ใช้สีแดงเดิมของ OVERDUE2 */
  /* ใช้ Animation เดิมของ OVERDUE2 */
  animation: simple-pulse 0.7s ease-in-out 2 forwards;
}


/* ------------------------------------------------------------------------------------------ */

/* Keyframes สำหรับการเต้นเบาๆ (นำมาจาก CSS เดิมของมึง) */
@keyframes simple-pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.1);
    opacity: 0.9;
  }

  /* ขยายเล็กน้อย */
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.loan-date-box {
  font-weight: 900;
  margin-bottom: 3px;
  color: #0373be !important;
  font-size: 1.0em !important;
  /*font-style: italic;*/
}

/* --- Fix layout card-main ให้เหมือนมือถือทุกจอ --- */
.customer-card .card-main {
  display: flex !important;
  flex-direction: column !important;
  /* เรียงบนลงล่างตลอด */
  align-items: flex-start !important;
  padding-right: 150px;
  /* กันพื้นที่มุมขวาให้ badge/วันที่ */
  position: relative;
}

/* สรุปยอดให้ชิดซ้ายเสมอ */
.customer-card .card-main .stats {
  text-align: left !important;
  margin-top: 6px;
}

/* กันซ้อน: badge + วันที่กู้ อยู่ขวาแต่ไม่บังเนื้อหา */
.status-badge {
  position: absolute !important;
  top: 10px;
  right: 12px;
  z-index: 3;
}

.loan-date-display {
  position: absolute !important;
  right: 12px;
  bottom: 8px;
  z-index: 3;
  font-size: 0.85rem;
  color: #444;
  font-weight: 500;
  pointer-events: none;
}

/* ลด padding ขวาบนจอเล็กได้หน่อย */
@media (max-width: 480px) {
  .customer-card .card-main {
    padding-right: 120px;
  }
}

.custom-dropdown {
  position: relative;
  text-align: center;
  margin: 10px auto;
}

.custom-dropdown button {
  background: linear-gradient(135deg, #0078ff, #0077ff);
  color: white;
  font-size: 1rem;
  padding: 8px 14px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-family: 'Bai Jamjuree', sans-serif;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.dropdown-menu {
  position: absolute;
  top: 110%;
  left: 50%;
  transform: translateX(-50%);
  background: white;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  width: 160px;
  z-index: 10;
}

.dropdown-menu div {
  padding: 10px;
  color: #333;
  cursor: pointer;
  transition: background 0.2s;
}

.dropdown-menu div:hover {
  background: #f0f7ff;
  color: #0078ff;
}

.dropdown-menu.hidden {
  display: none;
}

.loan-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.btn.small {
  padding: 0px 0px !important;
  /* ลดขนาด */
  font-size: 1.1rem !important;
  line-height: 0.9 !important;
  height: auto !important;
  min-height: 26px !important;
}



.btn:active {
  transform: scale(0.96);
  opacity: 0.85;
}

/* สีปุ่ม */
button.primary {
  background-color: #00c31a;
  color: #fff;
}

.btn.secondary {
  background-color: #faa038;
  color: #fff;
}

.btn.danger {
  background-color: #fd7869;
  color: #fff;
}


.loan-actions {
  width: 100%;
}

/* กลุ่มปุ่มบน */
.action-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.action-row .btn {
  flex: 1;
  /* 🔸 เต็มหน้าจอทั้งคู่ */
  padding: 6px 8px;
  /* 🔸 ลดความสูง */
  font-size: 1.9rem;
  min-height: 32px;
  /* 🔸 เตี้ยกว่าปุ่มล่าง */
}

/* ปุ่มล่าง “จ่ายงวด” */
.btn.full {
  display: block;
  width: 100%;
  padding: 6px 14px;
  /* 🔸 ใหญ่กว่าเห็นชัด */
  font-size: 1.2rem;
  font-weight: 700;
  margin-top: 0px;
  /* 🔸 มีช่องว่างเล็ก ๆ ระหว่างบน-ล่าง */
}
/* หมายเหตุ */
.custom-dropdown {
  display: flex;
  justify-content: center; /* ทั้งกลุ่มชิดขวา */
  align-items: center;
  gap: 50px; /* ระยะห่างระหว่างปุ่ม */
  flex-direction: row-reverse; 
}


#dayFilterBtn {
  flex-shrink: 0;
  font-weight: 600;
  padding: 8px 12px;
}

.note-btn {
  background: #e4af02 !important;
  color: #fff;
  border: none;
  margin-right: 4px !important;
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  font-weight: 600;
  font-size: 1rem;
  white-space: nowrap;
}
#notesDialog textarea {
  font-size: 1.05rem;
  line-height: 1.6;
  font-family: 'Bai Jamjuree', sans-serif;
  resize: vertical; /* พิมพ์แล้วขยายได้ */
  padding: 8px;
  border-radius: 6px;
  border: 1px solid #ccc;
  outline: none;
}

.note-btn:hover {
  background: #2980b9;
}
.customer-card .card-expand {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.4s ease, opacity 0.3s ease;
  will-change: max-height, opacity;
}

.customer-card.open .card-expand {
  opacity: 1;
}

/* ปุ่มออกจากระบบ */
#btnLogout {
  background: linear-gradient(135deg, #e74c3c, #c0392b);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 0.65rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(192, 57, 43, 0.3);
  transition: all 0.2s ease;
}

/* Hover effect */
#btnLogout:hover {
  background: linear-gradient(135deg, #4e6eff, #30bcfd);
   color: #ffffff63;
  box-shadow: 0 3px 8px rgba(231, 76, 60, 0.4);
  transform: translateY(-1px);
}

/* คลิกแล้วกดลงนิด ๆ */
#btnLogout:active {
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.274);
}

/* ปุ่มซ่อนก่อนล็อกอิน */
#btnLogout[style*="display: none"] {
  opacity: 0;
  pointer-events: none;
}

.google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background-color: white;
  color: #555;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 12px 20px;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: 0.2s;
}

.google-btn img {
  width: 20px;
  height: 20px;
}

.google-btn:hover {
  background-color: #f8f8f8;
  transform: scale(1.02);
}