/* =====================================================
   Banlat Health System — Custom CSS
   ธีม: ครีม / ขาว มินิมอล + สีเน้นเขียวเซจ
   ===================================================== */

/* ---- Google Fonts (Thai) ---- */
@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;500;600;700&display=swap');

/* ---- CSS Variables Override ---- */
:root {
  --tblr-primary:        #7c8f74;
  --tblr-primary-rgb:    124, 143, 116;
  --tblr-link-color:     #5f7257;
  --tblr-body-bg:        #faf8f3;
  --tblr-font-sans-serif: 'Sarabun', system-ui, -apple-system, sans-serif;

  --sage:        #7c8f74;   /* เขียวเซจหลัก */
  --sage-dark:   #5f7257;   /* เซจเข้ม (hover) */
  --sage-light:  #9aac92;   /* เซจอ่อน */
  --sage-pale:   #eef1ea;   /* เซจซีดมาก (พื้น hover) */
  --cream:       #faf8f3;   /* ครีมพื้นหลัง */
  --cream-card:  #ffffff;   /* การ์ดขาว */
  --ink:         #3a3a3a;   /* ตัวอักษรเทาเข้ม */
  --ink-soft:    #6b6b6b;   /* ตัวอักษรรอง */
  --line:        #ece8df;   /* เส้นขอบบาง */

  /* alias เดิม (ใช้ใน inline style หลายหน้า) ให้ชี้มาที่เซจ */
  --brand-green:       #7c8f74;
  --brand-green-light: #9aac92;
  --brand-green-pale:  #eef1ea;
}

body {
  font-family: var(--tblr-font-sans-serif);
  background: var(--cream);
  color: var(--ink);
}

.page-wrapper,
.page-body {
  background: var(--cream);
}

/* ---- Navbar / Sidebar (เซจ มินิมอล) ---- */
.navbar-vertical {
  background: #ffffff !important;
  border-right: 1px solid var(--line);
}

.navbar-vertical .navbar-brand,
.navbar-vertical .navbar-brand span {
  color: var(--sage-dark) !important;
}

.navbar-vertical .nav-link {
  color: var(--ink-soft);
  border-radius: 8px;
  margin: 1px 10px;
  transition: background 0.15s, color 0.15s;
}

.navbar-vertical .nav-link:hover {
  background: var(--sage-pale);
  color: var(--sage-dark);
}

.navbar-vertical .nav-link.active {
  background: var(--sage);
  color: #fff;
  font-weight: 600;
}

.navbar-vertical .nav-link.active .nav-link-icon {
  color: #fff;
}

.navbar-vertical .nav-link-subtitle {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  opacity: 0.6;
  padding: 0.5rem 1rem 0.25rem;
  display: block;
}

/* ปรับ user info ด้านล่าง sidebar ให้เป็นตัวอักษรเข้ม (เดิมเป็นขาว) */
.navbar-vertical .text-white { color: var(--ink) !important; }
.navbar-vertical .border-top { border-color: var(--line) !important; }

/* ---- Buttons ---- */
.btn-primary {
  background-color: var(--sage);
  border-color: var(--sage);
  color: #fff;
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--sage-dark);
  border-color: var(--sage-dark);
  color: #fff;
}
.btn-outline-primary {
  color: var(--sage-dark);
  border-color: var(--sage);
}
.btn-outline-primary:hover {
  background: var(--sage);
  border-color: var(--sage);
  color: #fff;
}
.btn-outline-success {
  color: var(--sage-dark);
  border-color: var(--sage);
}
.btn-outline-success:hover {
  background: var(--sage);
  border-color: var(--sage);
  color: #fff;
}
.btn {
  transition: transform 0.1s, box-shadow 0.15s;
}
.btn:active {
  transform: scale(0.97);
}

/* ---- Cards (ขาว มินิมอล) ---- */
.card {
  border: 1px solid var(--line);
  box-shadow: none;
  border-radius: 12px;
  background: var(--cream-card);
  transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
}
.card:hover {
  box-shadow: 0 4px 18px rgba(124,143,116,0.10);
  border-color: var(--sage-light);
}
.card-stat:hover {
  transform: translateY(-2px);
}
.card-header {
  background: transparent;
  border-bottom: 1px solid var(--line);
}

/* ---- Status Color Badges (คงสีสถานะไว้เพื่อสื่อความหมาย) ---- */
.badge-green  { background: #2fb344; color: #fff; }
.badge-yellow { background: #f59f00; color: #fff; }
.badge-orange { background: #fd7e14; color: #fff; }
.badge-red    { background: #d63939; color: #fff; }

/* ---- Map Container ---- */
#map {
  height: 520px;
  border-radius: 12px;
  z-index: 1;
}
#map-public {
  height: 420px;
  border-radius: 12px;
  z-index: 1;
}

/* ---- Leaflet Popup ---- */
.leaflet-popup-content-wrapper {
  border-radius: 8px;
  font-family: var(--tblr-font-sans-serif);
  font-size: 0.875rem;
}
.popup-color-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 6px;
  vertical-align: middle;
}

/* ---- Spinner Overlay ---- */
#spinner-overlay {
  position: fixed;
  inset: 0;
  background: rgba(58,58,58,0.45);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  backdrop-filter: blur(2px);
}
.spinner-overlay-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  background: #fff;
  padding: 1.75rem 2.25rem;
  border-radius: 14px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.18);
}
.spinner-overlay-inner .spinner-border { color: var(--sage) !important; }
.spinner-overlay-inner .text-white { color: var(--ink) !important; }

/* ---- Hero Section (Landing Page) — ครีมมินิมอล ---- */
.hero-section {
  min-height: 100vh;
  background: linear-gradient(160deg, #faf8f3 0%, #f1efe6 55%, #eaeee4 100%);
  display: flex;
  align-items: center;
  color: var(--ink);
}
.hero-section .hero-title { color: var(--ink); }
.hero-section .hero-subtitle,
.hero-section .lead { color: var(--ink-soft); }
.hero-section .text-white,
.hero-section .opacity-90,
.hero-section .opacity-85 { color: var(--ink) !important; opacity: 1 !important; }

/* ปุ่มใน hero ให้เป็นเซจ */
.hero-section .btn-light {
  background: var(--sage);
  border-color: var(--sage);
  color: #fff;
}
.hero-section .btn-light:hover {
  background: var(--sage-dark);
  border-color: var(--sage-dark);
  color: #fff;
}
.hero-section .btn-outline-light {
  color: var(--sage-dark);
  border-color: var(--sage);
}
.hero-section .btn-outline-light:hover {
  background: var(--sage);
  border-color: var(--sage);
  color: #fff;
}

.hero-logo      { animation: fadeInDown 0.8s ease both; }
.hero-title     { animation: fadeInUp 0.8s ease 0.2s both; }
.hero-subtitle  { animation: fadeInUp 0.8s ease 0.4s both; }
.hero-buttons   { animation: fadeInUp 0.8s ease 0.6s both; }
.hero-stats     { animation: fadeInUp 0.8s ease 0.8s both; }

/* ---- Animations ---- */
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes pulse-ring {
  0%   { transform: scale(0.97); box-shadow: 0 0 0 0 rgba(124,143,116,0.35); }
  70%  { transform: scale(1);    box-shadow: 0 0 0 14px rgba(124,143,116,0); }
  100% { transform: scale(0.97); box-shadow: 0 0 0 0 rgba(124,143,116,0); }
}
.logo-pulse {
  animation: pulse-ring 2.5s ease-in-out infinite;
  border-radius: 50%;
}

/* ---- Stat Cards (Landing Page) — ขาวมินิมอล ---- */
.stat-card-landing {
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid var(--line);
  padding: 1.5rem;
  text-align: center;
  color: var(--ink);
  transition: transform 0.2s, box-shadow 0.2s;
}
.stat-card-landing:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(124,143,116,0.12);
}
.stat-card-landing .stat-number {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--sage-dark);
}
.stat-card-landing .stat-number.text-warning { color: #d98324 !important; }
.stat-card-landing .stat-label {
  font-size: 0.875rem;
  color: var(--ink-soft);
  margin-top: 0.25rem;
}

/* ---- Section: Feature Cards ---- */
.feature-section {
  padding: 5rem 0;
  background: #ffffff;
}
.feature-card {
  text-align: center;
  padding: 2rem 1.5rem;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--cream);
  height: 100%;
  transition: transform 0.2s, box-shadow 0.2s;
}
.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(124,143,116,0.12);
}
.feature-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--sage-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  font-size: 1.5rem;
  color: var(--sage-dark);
}

/* ---- Headings color ---- */
h1, h2, h3, h4, h5 { color: var(--ink); }
.text-primary { color: var(--sage-dark) !important; }

/* ---- Page Header ---- */
.page-header-title {
  font-weight: 600;
  color: var(--sage-dark);
}

/* ---- Table ---- */
.table-hover tbody tr:hover {
  background: var(--sage-pale);
}

/* ---- Form Focus ---- */
.form-control:focus,
.form-select:focus {
  border-color: var(--sage-light);
  box-shadow: 0 0 0 0.2rem rgba(124,143,116,0.18);
}

/* ---- Login / Register Page ---- */
.login-page {
  min-height: 100vh;
  background: linear-gradient(160deg, #faf8f3 0%, #eef1ea 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}
.login-page .text-white { color: var(--ink) !important; }
.login-page .opacity-75 { color: var(--ink-soft) !important; opacity: 1 !important; }
.login-card {
  border-radius: 16px;
  border: 1px solid var(--line);
  box-shadow: 0 16px 48px rgba(124,143,116,0.14);
  background: #fff;
  animation: fadeIn 0.5s ease both;
}

/* ---- Footer ---- */
.footer { background: transparent; }

/* ---- Responsive ---- */
@media (max-width: 768px) {
  .hero-section { padding: 3rem 1rem; }
  .stat-card-landing .stat-number { font-size: 1.8rem; }
}