/**
 * MaeChai Multi-Color Theme System (Extended & Soft Pastel Shaded Gradients)
 * รองรับการเปลี่ยนธีมสีแบบ Dynamic 10 ธีมสี พร้อมการไล่เฉดสีอ่อนทั่วทั้งระบบ
 * ครอบคลุมทุกหน้า ทุกโมดูล: Dashboard, สมาชิก, ขายยาง, POS, สินเชื่อ, ปันผล, บัญชี, รายงาน, พอร์ทัลสมาชิก
 */

/* ══════════════════════════════════════════════════════════════════
   1. Theme Palette Definitions (10 ธีมสี)
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. เขียวพฤกษา / สวนยาง (Forest Green) - เหมาะกับสหกรณ์และชาวสวนยาง (Default) ── */
:root,
[data-theme="green"] {
  --green-dark:               #064e3b;
  --green-main:               #059669;
  --green-mid:                #10b981;
  --green-light:              #34d399;
  --green-pale:               #ecfdf5;
  --theme-bg-tint:            #f0fdf4;
  --theme-gradient-primary:   linear-gradient(135deg, #065f46 0%, #059669 50%, #10b981 100%);
  --theme-gradient-soft:      linear-gradient(135deg, #ecfdf5 0%, #f7fef9 50%, #ffffff 100%);
  --theme-gradient-card:      linear-gradient(180deg, #ffffff 0%, #f0fcf5 100%);
  --sidebar-bg:               linear-gradient(180deg, #022c22 0%, #065f46 60%, #059669 100%);
  --sidebar-label:            #a7f3d0;
  --th-bg:                    linear-gradient(180deg, #ecfdf5 0%, #f7fef9 100%);
  --th-border:                #a7f3d0;
  --focus-ring:               rgba(5, 150, 105, 0.22);
  --theme-swatch:             #059669;
  --theme-name:               "🌿 เขียวพฤกษา / สวนยาง";
}

/* ── 2. น้ำเงินคลาสสิก (Ocean Blue) - ธีมมาตรฐานเดิม ── */
[data-theme="blue"] {
  --green-dark:               #0a2540;
  --green-main:               #1a56db;
  --green-mid:                #2563eb;
  --green-light:              #3b82f6;
  --green-pale:               #eff6ff;
  --theme-bg-tint:            #f0f5ff;
  --theme-gradient-primary:   linear-gradient(135deg, #1e40af 0%, #1a56db 50%, #2563eb 100%);
  --theme-gradient-soft:      linear-gradient(135deg, #eff6ff 0%, #f8faff 50%, #ffffff 100%);
  --theme-gradient-card:      linear-gradient(180deg, #ffffff 0%, #f4f8ff 100%);
  --sidebar-bg:               linear-gradient(180deg, #0a1e3f 0%, #133e7c 60%, #1a56db 100%);
  --sidebar-label:            #93c5fd;
  --th-bg:                    linear-gradient(180deg, #eff6ff 0%, #f8faff 100%);
  --th-border:                #bfdbfe;
  --focus-ring:               rgba(26, 86, 219, 0.22);
  --theme-swatch:             #1a56db;
  --theme-name:               "🌊 น้ำเงินคลาสสิก";
}

/* ── 3. ม่วงรอยัล (Royal Purple) ── */
[data-theme="purple"] {
  --green-dark:               #2e1065;
  --green-main:               #7c3aed;
  --green-mid:                #8b5cf6;
  --green-light:              #a78bfa;
  --green-pale:               #f5f3ff;
  --theme-bg-tint:            #faf5ff;
  --theme-gradient-primary:   linear-gradient(135deg, #4c1d95 0%, #7c3aed 50%, #8b5cf6 100%);
  --theme-gradient-soft:      linear-gradient(135deg, #f5f3ff 0%, #faf8ff 50%, #ffffff 100%);
  --theme-gradient-card:      linear-gradient(180deg, #ffffff 0%, #f7f4ff 100%);
  --sidebar-bg:               linear-gradient(180deg, #1e1b4b 0%, #4c1d95 60%, #7c3aed 100%);
  --sidebar-label:            #ddd6fe;
  --th-bg:                    linear-gradient(180deg, #f5f3ff 0%, #faf8ff 100%);
  --th-border:                #ddd6fe;
  --focus-ring:               rgba(124, 58, 237, 0.22);
  --theme-swatch:             #7c3aed;
  --theme-name:               "👑 ม่วงรอยัล";
}

/* ── 4. ส้มซันเซ็ต (Sunset Orange) ── */
[data-theme="orange"] {
  --green-dark:               #7c2d12;
  --green-main:               #ea580c;
  --green-mid:                #f97316;
  --green-light:              #fb923c;
  --green-pale:               #fff7ed;
  --theme-bg-tint:            #fffaf5;
  --theme-gradient-primary:   linear-gradient(135deg, #9a3412 0%, #ea580c 50%, #f97316 100%);
  --theme-gradient-soft:      linear-gradient(135deg, #fff7ed 0%, #fffbf7 50%, #ffffff 100%);
  --theme-gradient-card:      linear-gradient(180deg, #ffffff 0%, #fef6ec 100%);
  --sidebar-bg:               linear-gradient(180deg, #271406 0%, #9a3412 60%, #ea580c 100%);
  --sidebar-label:            #fed7aa;
  --th-bg:                    linear-gradient(180deg, #fff7ed 0%, #fffbf7 100%);
  --th-border:                #fed7aa;
  --focus-ring:               rgba(234, 88, 12, 0.22);
  --theme-swatch:             #ea580c;
  --theme-name:               "🌅 ส้มซันเซ็ต";
}

/* ── 5. แดงทับทิม (Ruby Red) ── */
[data-theme="red"] {
  --green-dark:               #7f1d1d;
  --green-main:               #dc2626;
  --green-mid:                #ef4444;
  --green-light:              #f87171;
  --green-pale:               #fef2f2;
  --theme-bg-tint:            #fff5f5;
  --theme-gradient-primary:   linear-gradient(135deg, #991b1b 0%, #dc2626 50%, #ef4444 100%);
  --theme-gradient-soft:      linear-gradient(135deg, #fef2f2 0%, #fff8f8 50%, #ffffff 100%);
  --theme-gradient-card:      linear-gradient(180deg, #ffffff 0%, #fef3f3 100%);
  --sidebar-bg:               linear-gradient(180deg, #300808 0%, #991b1b 60%, #dc2626 100%);
  --sidebar-label:            #fecaca;
  --th-bg:                    linear-gradient(180deg, #fef2f2 0%, #fff8f8 100%);
  --th-border:                #fecaca;
  --focus-ring:               rgba(220, 38, 38, 0.22);
  --theme-swatch:             #dc2626;
  --theme-name:               "💎 แดงทับทิม";
}

/* ── 6. ฟ้ามรกต (Teal Cyan) ── */
[data-theme="teal"] {
  --green-dark:               #134e4a;
  --green-main:               #0d9488;
  --green-mid:                #14b8a6;
  --green-light:              #2dd4bf;
  --green-pale:               #f0fdfa;
  --theme-bg-tint:            #f2fcfb;
  --theme-gradient-primary:   linear-gradient(135deg, #115e59 0%, #0d9488 50%, #14b8a6 100%);
  --theme-gradient-soft:      linear-gradient(135deg, #f0fdfa 0%, #f7fefd 50%, #ffffff 100%);
  --theme-gradient-card:      linear-gradient(180deg, #ffffff 0%, #effcf9 100%);
  --sidebar-bg:               linear-gradient(180deg, #042f2e 0%, #115e59 60%, #0d9488 100%);
  --sidebar-label:            #99f6e4;
  --th-bg:                    linear-gradient(180deg, #f0fdfa 0%, #f7fefd 100%);
  --th-border:                #99f6e4;
  --focus-ring:               rgba(13, 148, 136, 0.22);
  --theme-swatch:             #0d9488;
  --theme-name:               "🌊 ฟ้ามรกต (Teal)";
}

/* ── 7. ทองบุษราคัม (Amber Gold) ── */
[data-theme="gold"] {
  --green-dark:               #78350f;
  --green-main:               #d97706;
  --green-mid:                #f59e0b;
  --green-light:              #fbbf24;
  --green-pale:               #fffbeb;
  --theme-bg-tint:            #fffdf5;
  --theme-gradient-primary:   linear-gradient(135deg, #92400e 0%, #d97706 50%, #f59e0b 100%);
  --theme-gradient-soft:      linear-gradient(135deg, #fffbeb 0%, #fffef8 50%, #ffffff 100%);
  --theme-gradient-card:      linear-gradient(180deg, #ffffff 0%, #fef8e7 100%);
  --sidebar-bg:               linear-gradient(180deg, #261405 0%, #78350f 60%, #d97706 100%);
  --sidebar-label:            #fde68a;
  --th-bg:                    linear-gradient(180deg, #fffbeb 0%, #fffef8 100%);
  --th-border:                #fde68a;
  --focus-ring:               rgba(217, 119, 6, 0.22);
  --theme-swatch:             #d97706;
  --theme-name:               "👑 ทองบุษราคัม";
}

/* ── 8. กุหลาบโรส (Rose Pink) ── */
[data-theme="rose"] {
  --green-dark:               #831843;
  --green-main:               #e11d48;
  --green-mid:                #f43f5e;
  --green-light:              #fb7185;
  --green-pale:               #fff1f2;
  --theme-bg-tint:            #fff5f7;
  --theme-gradient-primary:   linear-gradient(135deg, #9f1239 0%, #e11d48 50%, #f43f5e 100%);
  --theme-gradient-soft:      linear-gradient(135deg, #fff1f2 0%, #fff8f9 50%, #ffffff 100%);
  --theme-gradient-card:      linear-gradient(180deg, #ffffff 0%, #fff0f3 100%);
  --sidebar-bg:               linear-gradient(180deg, #380717 0%, #9f1239 60%, #e11d48 100%);
  --sidebar-label:            #fecdd3;
  --th-bg:                    linear-gradient(180deg, #fff1f2 0%, #fff8f9 100%);
  --th-border:                #fecdd3;
  --focus-ring:               rgba(225, 29, 72, 0.22);
  --theme-swatch:             #e11d48;
  --theme-name:               "🌸 กุหลาบโรส (Rose)";
}

/* ── 9. ครามอินดิโก้ (Deep Indigo) ── */
[data-theme="indigo"] {
  --green-dark:               #1e1b4b;
  --green-main:               #4338ca;
  --green-mid:                #6366f1;
  --green-light:              #818cf8;
  --green-pale:               #eef2ff;
  --theme-bg-tint:            #f5f6ff;
  --theme-gradient-primary:   linear-gradient(135deg, #312e81 0%, #4338ca 50%, #6366f1 100%);
  --theme-gradient-soft:      linear-gradient(135deg, #eef2ff 0%, #f8f9ff 50%, #ffffff 100%);
  --theme-gradient-card:      linear-gradient(180deg, #ffffff 0%, #eff2ff 100%);
  --sidebar-bg:               linear-gradient(180deg, #0f0e26 0%, #312e81 60%, #4338ca 100%);
  --sidebar-label:            #c7d2fe;
  --th-bg:                    linear-gradient(180deg, #eef2ff 0%, #f8f9ff 100%);
  --th-border:                #c7d2fe;
  --focus-ring:               rgba(67, 56, 202, 0.22);
  --theme-swatch:             #4338ca;
  --theme-name:               "🌌 ครามอินดิโก้";
}

/* ── 10. เทามิดไนท์ (Midnight Slate) ── */
[data-theme="slate"] {
  --green-dark:               #0f172a;
  --green-main:               #475569;
  --green-mid:                #64748b;
  --green-light:              #94a3b8;
  --green-pale:               #f1f5f9;
  --theme-bg-tint:            #f8fafc;
  --theme-gradient-primary:   linear-gradient(135deg, #1e293b 0%, #334155 50%, #475569 100%);
  --theme-gradient-soft:      linear-gradient(135deg, #f1f5f9 0%, #f8fafc 50%, #ffffff 100%);
  --theme-gradient-card:      linear-gradient(180deg, #ffffff 0%, #f3f6f9 100%);
  --sidebar-bg:               linear-gradient(180deg, #020617 0%, #1e293b 60%, #334155 100%);
  --sidebar-label:            #cbd5e1;
  --th-bg:                    linear-gradient(180deg, #f1f5f9 0%, #f8fafc 100%);
  --th-border:                #cbd5e1;
  --focus-ring:               rgba(71, 85, 105, 0.22);
  --theme-swatch:             #475569;
  --theme-name:               "🌑 เทามิดไนท์ (Slate)";
}


/* ══════════════════════════════════════════════════════════════════
   2. Universal Page & Layout Styling (มีผลทุกหน้าทุกไฟล์)
   ══════════════════════════════════════════════════════════════════ */

/* การเปลี่ยนผ่านธีมสีอย่างนุ่มนวลทั้งระบบ (Smooth Global Theme Morph) */
body,
#sidebar,
#topbar,
.card,
.card-header,
.btn,
.badge,
.table th,
.input-group-text,
.terminal-card,
.terminal-header,
.weigh-kpi-card,
.action-card,
.user-chip,
.nav-pills .nav-link,
.nav-tabs .nav-link,
.form-control,
.form-select {
  transition: background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* แถบเลื่อน Scrollbar สไตล์โมเดิร์นตามธีมสี (Themed Custom Scrollbar) */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
::-webkit-scrollbar-track {
  background: var(--theme-bg-tint, #f8fafc);
}
::-webkit-scrollbar-thumb {
  background: var(--green-light, #34d399);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--green-main, #059669);
}

/* แถบความคืบหน้าการเลื่อนหน้าเว็บ (Scroll Progress Bar) */
.theme-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: var(--theme-gradient-primary);
  z-index: 99999;
  box-shadow: 0 0 10px var(--focus-ring);
  pointer-events: none;
  transition: width 0.08s ease-out;
}

/* ปุ่มลอยเลื่อนกลับด้านบน (Floating Back to Top) */
.theme-back-to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--theme-gradient-primary);
  color: #ffffff;
  border: 2px solid #ffffff;
  box-shadow: 0 4px 16px var(--focus-ring), 0 2px 6px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  z-index: 1040;
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px) scale(0.9);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.theme-back-to-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
.theme-back-to-top:hover {
  transform: translateY(-4px) scale(1.08);
  box-shadow: 0 8px 24px var(--focus-ring), 0 4px 10px rgba(0, 0, 0, 0.2);
  color: #ffffff;
}

/* ไฟสัญญาณสถานะ Real-time Pulse Glow */
.pulse-dot,
.status-dot-live {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: var(--green-main, #059669);
  box-shadow: 0 0 0 0 var(--focus-ring);
  animation: pulse-glow-ring 2s infinite cubic-bezier(0.45, 0, 0.55, 1);
  vertical-align: middle;
  margin-right: 5px;
}
@keyframes pulse-glow-ring {
  0% {
    box-shadow: 0 0 0 0 var(--green-main);
    transform: scale(0.95);
  }
  70% {
    box-shadow: 0 0 0 8px transparent;
    transform: scale(1.1);
  }
  100% {
    box-shadow: 0 0 0 0 transparent;
    transform: scale(0.95);
  }
}

/* พื้นหลังตัวเว็บแบบไล่เฉดสีอ่อนทั่วทั้งระบบ (Soft Gradient Tint Body) */
body {
  background: linear-gradient(180deg, var(--theme-bg-tint) 0%, #f8fafc 320px, #f1f5f9 100%) !important;
  min-height: 100vh;
}

/* แถบด้านข้าง Sidebar */
#sidebar {
  background: var(--sidebar-bg) !important;
}
#sidebar .brand .logo-icon {
  background: var(--green-light) !important;
}
#sidebar .nav-label-main {
  color: var(--sidebar-label) !important;
}
#sidebar .nav-label-main[aria-expanded="true"] .menu-toggle-icon {
  color: var(--sidebar-label) !important;
}
#sidebar .nav-link.active {
  border-left: 4px solid var(--green-light) !important;
  box-shadow: inset 4px 0 10px rgba(255, 255, 255, 0.12) !important;
}

/* แถบด้านบน Topbar แบบ Glassmorphism */
#topbar {
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid var(--th-border) !important;
}
#liveClock {
  color: var(--green-main) !important;
}
.user-chip {
  background: var(--theme-gradient-soft) !important;
  color: var(--green-main) !important;
  border: 1px solid var(--th-border) !important;
}
.user-chip .avatar {
  background: var(--theme-gradient-primary) !important;
  box-shadow: 0 2px 6px var(--focus-ring);
}


/* ══════════════════════════════════════════════════════════════════
   3. Buttons & Interactive Controls (ปุ่มไล่เฉดสีและ Shimmer Gleam)
   ══════════════════════════════════════════════════════════════════ */
.btn-primary,
.btn-theme-gradient {
  position: relative;
  overflow: hidden;
  background: var(--theme-gradient-primary) !important;
  border: 1px solid var(--green-main) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px var(--focus-ring) !important;
}
.btn-primary::after,
.btn-theme-gradient::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -60%;
  width: 40%;
  height: 200%;
  background: linear-gradient(
    60deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(25deg);
  opacity: 0;
  pointer-events: none;
}
.btn-primary:hover::after,
.btn-theme-gradient:hover::after {
  animation: btn-gleam-sweep 0.75s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes btn-gleam-sweep {
  0% {
    left: -60%;
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  100% {
    left: 140%;
    opacity: 0;
  }
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background: linear-gradient(135deg, var(--green-dark) 0%, var(--green-main) 100%) !important;
  border-color: var(--green-dark) !important;
  box-shadow: 0 6px 18px var(--focus-ring) !important;
  transform: translateY(-2px);
  color: #ffffff !important;
}

.btn-outline-primary {
  color: var(--green-main) !important;
  border-color: var(--green-main) !important;
  background: #ffffff;
}
.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-check:checked + .btn-outline-primary {
  background: var(--theme-gradient-primary) !important;
  border-color: var(--green-main) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px var(--focus-ring) !important;
}


/* ══════════════════════════════════════════════════════════════════
   4. Cards, Headers & Panels (การ์ดและพาเนลพร้อมเอฟเฟกต์ยกตัว)
   ══════════════════════════════════════════════════════════════════ */
.card {
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
  border-radius: 14px !important;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.25s ease !important;
}
.card:hover,
.action-card:hover,
.weigh-kpi-card:hover,
.content-panel:hover {
  box-shadow: 0 8px 22px -3px var(--focus-ring), 0 3px 8px rgba(0, 0, 0, 0.04) !important;
}
.card.card-hover:hover,
.action-card:hover {
  transform: translateY(-3px) !important;
}
.card-header {
  background: var(--theme-gradient-soft) !important;
  border-bottom: 1px solid var(--th-border) !important;
  color: var(--green-dark) !important;
}
.card-header .fs-6,
.card-header h5,
.card-header h6,
.card-header div.fw-bold {
  color: var(--green-dark) !important;
}
.card-header i {
  color: var(--green-main) !important;
}

/* Modal Headers */
.modal-header {
  background: var(--theme-gradient-soft) !important;
  border-bottom: 1px solid var(--th-border) !important;
}
.modal-title {
  color: var(--green-dark) !important;
  font-weight: 700;
}


/* ══════════════════════════════════════════════════════════════════
   5. Tables (หัวตารางไล่เฉดสีอ่อน และ Highlight แถว)
   ══════════════════════════════════════════════════════════════════ */
.table th,
table th,
.table thead th,
table thead th,
.pro-table th {
  background: var(--th-bg) !important;
  color: var(--green-main) !important;
  border-bottom: 2px solid var(--th-border) !important;
}
.table-hover tbody tr {
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.table-hover tbody tr:hover {
  background: var(--theme-bg-tint) !important;
  box-shadow: inset 3.5px 0 0 var(--green-main) !important;
}


/* ══════════════════════════════════════════════════════════════════
   6. Badges, Pills & Status Accents (ป้ายและชิปไล่เฉดสี)
   ══════════════════════════════════════════════════════════════════ */
.badge.bg-primary,
.bg-primary {
  background: var(--theme-gradient-primary) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px var(--focus-ring);
}
.badge.bg-primary-subtle,
.bg-primary-subtle {
  background: var(--theme-gradient-soft) !important;
  color: var(--green-main) !important;
  border: 1px solid var(--th-border) !important;
}
.badge-B {
  background: var(--theme-gradient-soft) !important;
  color: var(--green-dark) !important;
  border: 1px solid var(--th-border) !important;
}
.text-primary,
a.text-primary {
  color: var(--green-main) !important;
}
.border-primary {
  border-color: var(--green-main) !important;
}
.border-primary-subtle {
  border-color: var(--th-border) !important;
}
.alert-primary {
  background: var(--theme-gradient-soft) !important;
  border-color: var(--th-border) !important;
  color: var(--green-dark) !important;
}
.text-primary-emphasis {
  color: var(--green-dark) !important;
}


/* ══════════════════════════════════════════════════════════════════
   7. Form Inputs, Selects & Tabs (ช่องกรอกข้อมูลและแท็บ)
   ══════════════════════════════════════════════════════════════════ */
.form-control:focus,
.form-select:focus {
  border-color: var(--green-light) !important;
  box-shadow: 0 0 0 4px var(--focus-ring) !important;
}
.input-group-text {
  background: var(--theme-gradient-soft) !important;
  border-color: #cbd5e1;
  color: var(--green-dark);
}
.input-group-text.bg-primary {
  background: var(--theme-gradient-primary) !important;
  color: #ffffff !important;
  border-color: var(--green-main) !important;
}
.input-group-text.bg-primary-subtle {
  background: var(--green-pale) !important;
  color: var(--green-main) !important;
  border-color: var(--th-border) !important;
}
.nav-pills .nav-link.active,
.nav-pills-custom .nav-link.active {
  background: var(--theme-gradient-primary) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 10px var(--focus-ring) !important;
}
.nav-tabs .nav-link.active {
  color: var(--green-main) !important;
  border-color: var(--th-border) var(--th-border) #ffffff !important;
  font-weight: 700;
}
.nav-tabs .nav-link:hover {
  color: var(--green-main) !important;
}
.page-item.active .page-link {
  background: var(--theme-gradient-primary) !important;
  border-color: var(--green-main) !important;
}
.breadcrumb-item a {
  color: var(--green-main) !important;
}
.breadcrumb-item a:hover {
  color: var(--green-light) !important;
}


/* ══════════════════════════════════════════════════════════════════
   8. Module Specific Theme Integration (ทุกโมดูลทั่วระบบ)
   ══════════════════════════════════════════════════════════════════ */

/* ── Dashboard: Executive Top Header Banner ── */
.db-header {
  background: var(--sidebar-bg) !important;
  box-shadow: 0 10px 30px -5px var(--focus-ring) !important;
}
.db-header::after {
  background: radial-gradient(circle, var(--green-light) 0%, transparent 70%) !important;
  opacity: 0.25 !important;
}
.db-header .btn-light.text-primary,
.db-header a.text-primary {
  color: var(--green-main) !important;
}

/* ── Dashboard: Quick Actions Palette ── */
.action-card.act-blue {
  background: var(--theme-gradient-soft) !important;
  border-color: var(--th-border) !important;
}
.action-card.act-blue .action-icon-wrap {
  background: var(--green-pale) !important;
  color: var(--green-main) !important;
}
.action-card.act-cyan {
  background: var(--theme-gradient-soft) !important;
  border-color: var(--th-border) !important;
}
.action-card.act-cyan .action-icon-wrap {
  background: var(--green-pale) !important;
  color: var(--green-mid) !important;
}

/* ── Dashboard: KPI Cards ── */
.kpi-pos {
  background: var(--theme-gradient-card) !important;
  border-color: var(--th-border) !important;
}
.kpi-pos::before {
  background: var(--theme-gradient-primary) !important;
}
.kpi-pos .kpi-icon-pill {
  background: var(--green-pale) !important;
  color: var(--green-main) !important;
}
.kpi-pos .kpi-badge {
  background-color: var(--green-pale) !important;
  color: var(--green-main) !important;
}

/* ── Dashboard: Financial Pipeline ── */
.fin-grid .fin-step:first-child {
  background: var(--theme-gradient-soft) !important;
  border-color: var(--th-border) !important;
}
.fin-grid .fin-step:first-child .fin-step-lbl,
.fin-grid .fin-step:first-child .fin-step-val {
  color: var(--green-main) !important;
}

/* ── Dashboard: Content Panels & Charts ── */
.content-panel-link {
  color: var(--green-main) !important;
  background: var(--green-pale) !important;
}
.content-panel-link:hover {
  background: var(--theme-gradient-primary) !important;
  color: #ffffff !important;
}
.content-panel-title .bi-bar-chart-line-fill {
  color: var(--green-main) !important;
}
.btn-group .btn-outline-primary.active,
.btn-group .btn-outline-primary:active {
  background: var(--theme-gradient-primary) !important;
  border-color: var(--green-main) !important;
  color: #ffffff !important;
}

/* ── Members Module Stat Cards ── */
.box-members,
.box-active {
  background: var(--theme-gradient-soft) !important;
  border-color: var(--th-border) !important;
}
.box-members::before,
.box-active::before {
  background: var(--theme-gradient-primary) !important;
}
.box-members .mem-stat-icon,
.box-active .mem-stat-icon {
  background: var(--green-pale) !important;
  color: var(--green-main) !important;
}

/* ── Loans, POS, Rubber, Shares Cards with Colored Left Border ── */
.card.border-start.border-primary,
.card.border-start.border-4.border-primary {
  border-left-color: var(--green-main) !important;
  background: var(--theme-gradient-soft) !important;
}
.bg-gd-green {
  background: var(--theme-gradient-primary) !important;
}


/* ══════════════════════════════════════════════════════════════════
   9. Dropdown Theme Selector UI
   ══════════════════════════════════════════════════════════════════ */
.theme-dropdown-menu {
  width: 330px;
  max-height: 520px;
  overflow-y: auto;
  border-radius: 16px;
  padding: 8px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.16) !important;
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.theme-item-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  text-align: left;
  font-size: 13px;
  color: #334155;
  transition: all 0.2s ease;
  cursor: pointer;
}
.theme-item-btn:hover {
  background: #f1f5f9;
  transform: translateX(3px);
}
.theme-item-btn.active {
  background: var(--theme-gradient-soft) !important;
  border-color: var(--th-border) !important;
  font-weight: 700;
  color: var(--green-dark) !important;
}
.theme-color-preview {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════
   10. Rubber Weighing Station (สถานีชั่งรับซื้อยางพารา) Integration
   ══════════════════════════════════════════════════════════════════ */
.terminal-card {
  border: 2px solid var(--green-main) !important;
  box-shadow: 0 4px 20px var(--focus-ring) !important;
  background: #ffffff !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}
.terminal-header {
  background: var(--sidebar-bg, var(--theme-gradient-primary)) !important;
  color: #ffffff !important;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  padding: 12px 18px;
}
.terminal-header .badge.text-primary {
  color: var(--green-main) !important;
}
.grade-btn-group .btn-check:checked + .btn,
.type-btn-group .btn-check:checked + .btn {
  background: var(--theme-gradient-primary) !important;
  border-color: var(--green-main) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px var(--focus-ring) !important;
}
.gross-weight-input {
  color: var(--green-dark) !important;
  background-color: var(--green-pale) !important;
  border: 2px solid var(--th-border) !important;
}
.gross-weight-input:focus {
  border-color: var(--green-main) !important;
  box-shadow: 0 0 0 0.25rem var(--focus-ring) !important;
  background-color: #ffffff !important;
}
#queueStatusBarCard {
  background: var(--theme-gradient-soft) !important;
  border: 1px solid var(--th-border) !important;
  border-left: 5px solid var(--green-main) !important;
}
#advancePriceAlert {
  background: var(--theme-gradient-soft) !important;
  border-color: var(--th-border) !important;
  color: var(--green-dark) !important;
}
#advancePriceAlert .badge.bg-primary {
  background: var(--theme-gradient-primary) !important;
}
#advancePriceText strong {
  color: var(--green-main) !important;
}
.net-payout-box {
  background: var(--theme-gradient-soft) !important;
  border: 2px dashed var(--green-light, var(--green-main)) !important;
  border-radius: 12px;
  padding: 14px 18px;
}
.calc-display-box {
  background: var(--theme-gradient-soft) !important;
  border: 1px solid var(--th-border) !important;
}
.calc-display-label {
  color: var(--green-mid, #64748b) !important;
}
.calc-display-value {
  color: var(--green-dark) !important;
}
.weigh-kpi-card {
  background: var(--theme-gradient-card, #ffffff) !important;
  border: 1px solid var(--th-border, rgba(0, 0, 0, 0.06)) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
}
.weigh-kpi-card:hover {
  box-shadow: 0 4px 14px var(--focus-ring) !important;
}
.weigh-kpi-label {
  color: var(--green-mid, #64748b) !important;
}
.weigh-kpi-label i.text-primary,
.weigh-kpi-label .text-primary {
  color: var(--green-main) !important;
}
.weigh-kpi-value.text-primary,
.weigh-kpi-value span.text-primary,
.weigh-kpi-value .text-primary {
  color: var(--green-main) !important;
}
#btnSaveWeigh {
  background: var(--theme-gradient-primary) !important;
  border-color: var(--green-main) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px var(--focus-ring) !important;
}
#btnSaveWeigh:hover {
  background: linear-gradient(135deg, var(--green-dark) 0%, var(--green-main) 100%) !important;
  border-color: var(--green-dark) !important;
  transform: translateY(-2px);
}
.table-recent-wrap {
  border: 1px solid var(--th-border) !important;
}
.table-recent th {
  background: var(--th-bg) !important;
  color: var(--green-main) !important;
  border-bottom: 2px solid var(--th-border) !important;
}

/* ══════════════════════════════════════════════════════════════════
   11. Flatpickr & DataTables Theme Integration (จุดเดียวทั้งระบบ)
   ══════════════════════════════════════════════════════════════════ */
/* DataTables */
.dataTables_wrapper .page-item.active .page-link {
  background: var(--theme-gradient-primary) !important;
  border-color: var(--green-main) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px var(--focus-ring) !important;
}
.dataTables_wrapper .dataTables_filter input {
  border-radius: 8px;
  border: 1.5px solid var(--th-border);
  padding: 4px 10px;
  transition: all 0.2s ease;
}
.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--green-main) !important;
  box-shadow: 0 0 0 3px var(--focus-ring) !important;
  outline: none;
}
.dataTables_wrapper .dataTables_length select {
  border-radius: 8px;
  border: 1.5px solid var(--th-border);
}

/* Flatpickr Calendar */
.flatpickr-calendar {
  border-radius: 14px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important;
  border: 1px solid var(--th-border) !important;
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange {
  background: var(--theme-gradient-primary) !important;
  border-color: var(--green-main) !important;
  color: #ffffff !important;
}
.flatpickr-day:hover {
  background: var(--theme-bg-tint) !important;
  border-color: var(--green-light) !important;
}
.flatpickr-day.today {
  border-color: var(--green-main) !important;
  color: var(--green-main) !important;
}
.flatpickr-months .flatpickr-month {
  background: var(--theme-gradient-soft) !important;
  color: var(--green-dark) !important;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
}
.flatpickr-current-month .flatpickr-monthDropdown-months {
  color: var(--green-dark) !important;
  font-weight: 700;
}

/* ══════════════════════════════════════════════════════════════════
   12. Login Page Theme Integration (จุดเดียวทั้งระบบ)
   ══════════════════════════════════════════════════════════════════ */
.login-page-body {
  min-height: 100vh;
  background: var(--sidebar-bg, linear-gradient(135deg, #064e3b 0%, #059669 50%, #10b981 100%)) !important;
}
.login-card {
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
  border-radius: 20px !important;
}
.login-header {
  background: var(--sidebar-bg, var(--theme-gradient-primary)) !important;
}
.btn-login {
  background: var(--theme-gradient-primary) !important;
  border: none !important;
  border-radius: 10px !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px var(--focus-ring) !important;
  transition: all 0.25s ease !important;
}
.btn-login:hover {
  background: linear-gradient(135deg, var(--green-dark) 0%, var(--green-main) 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px var(--focus-ring) !important;
}
.nav-pills-custom .nav-link.active {
  background: #ffffff !important;
  color: var(--green-main) !important;
  font-weight: 700 !important;
}

/* ══════════════════════════════════════════════════════════════════
   13. SweetAlert2 Theme Integration (ป๊อปอัพยืนยันสไตล์โมเดิร์นตามธีม)
   ══════════════════════════════════════════════════════════════════ */
.swal2-container {
  z-index: 100000 !important;
  font-family: 'Sarabun', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

.swal2-popup,
.swal2-popup.theme-swal-popup {
  font-family: 'Sarabun', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  border-radius: 20px !important;
  padding: 26px 22px !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.22) !important;
  background: #ffffff !important;
}

.swal2-title {
  font-family: 'Sarabun', sans-serif !important;
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin: 0 0 10px 0 !important;
}

.swal2-html-container {
  font-family: 'Sarabun', sans-serif !important;
  font-size: 1rem !important;
  color: #475569 !important;
  line-height: 1.65 !important;
  margin: 0 0 16px 0 !important;
}

.swal2-footer {
  font-family: 'Sarabun', sans-serif !important;
  font-size: 0.88rem !important;
}

/* SweetAlert2 Modern Icons */
.swal2-icon {
  margin: 16px auto 14px !important;
}

.swal2-icon.swal2-success {
  border-color: #10b981 !important;
  color: #10b981 !important;
}

.swal2-icon.swal2-success [class^=swal2-success-line] {
  background-color: #10b981 !important;
}

.swal2-icon.swal2-success .swal2-success-ring {
  border-color: rgba(16, 185, 129, 0.3) !important;
}

.swal2-icon.swal2-error {
  border-color: #ef4444 !important;
  color: #ef4444 !important;
}

.swal2-icon.swal2-error [class^=swal2-x-mark-line] {
  background-color: #ef4444 !important;
}

.swal2-icon.swal2-warning {
  border-color: #f59e0b !important;
  color: #f59e0b !important;
}

.swal2-icon.swal2-info {
  border-color: #3b82f6 !important;
  color: #3b82f6 !important;
}

.swal2-icon.swal2-question {
  border-color: var(--green-main, #059669) !important;
  color: var(--green-main, #059669) !important;
}

/* SweetAlert2 Actions & Buttons */
.swal2-actions {
  gap: 12px !important;
  margin-top: 20px !important;
  width: 100% !important;
  justify-content: center !important;
}

.swal2-styled {
  font-family: 'Sarabun', sans-serif !important;
  border-radius: 10px !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  padding: 9px 24px !important;
  transition: all 0.2s ease !important;
}

.swal2-styled.swal2-confirm {
  background: var(--theme-gradient-primary, linear-gradient(135deg, #065f46 0%, #059669 50%, #10b981 100%)) !important;
  box-shadow: 0 4px 12px var(--focus-ring, rgba(5, 150, 105, 0.22)) !important;
}

.swal2-styled.swal2-cancel {
  background-color: #64748b !important;
}

.swal2-actions .btn {
  border-radius: 10px !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  padding: 9px 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.swal2-actions .btn.btn-primary {
  background: var(--theme-gradient-primary, #059669) !important;
  border-color: transparent !important;
  color: #ffffff !important;
}

/* SweetAlert2 Modern Toast Notification */
.swal2-toast {
  font-family: 'Sarabun', sans-serif !important;
  border-radius: 14px !important;
  padding: 12px 18px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  background: #ffffff !important;
  z-index: 100000 !important;
}

.swal2-toast .swal2-title {
  font-size: 14.5px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  margin: 0 !important;
}

.swal2-toast .swal2-html-container {
  font-size: 13.5px !important;
  color: #475569 !important;
  margin: 4px 0 0 !important;
}

/* SweetAlert2 Inputs */
.swal2-input,
.swal2-textarea,
.swal2-select {
  font-family: 'Sarabun', sans-serif !important;
  border-radius: 10px !important;
  border: 1px solid #cbd5e1 !important;
  font-size: 14.5px !important;
}

.swal2-input:focus,
.swal2-textarea:focus,
.swal2-select:focus {
  border-color: var(--green-main, #059669) !important;
  box-shadow: 0 0 0 3px var(--focus-ring, rgba(5, 150, 105, 0.22)) !important;
}