/* ============================================================
   theme.css — JAMARA / JastipKu
   Dark Mode Fix + Classy UI — v2.0 (Final)
   
   CARA PASANG:
   Taruh file ini di folder project (sejajar server.js)
   Tambahkan di index.html sebelum </head>, SETELAH semua
   stylesheet lain:
   <link rel="stylesheet" href="theme.css">
   ============================================================ */

/* ============================================================
   1. CSS VARIABLES — Token warna utama (light + dark)
   ============================================================ */
:root {
  --bg-base:        #f5f0eb;
  --bg-surface:     #ffffff;
  --bg-surface-2:   #f4f2ef;
  --bg-surface-3:   #ece9e4;
  --border-color:   #e4ddd6;
  --text-primary:   #1a1a1a;
  --text-secondary: #4b5563;
  --text-muted:     #9ca3af;
  --accent-coral:   #d4553a;
  --accent-forest:  #2d5c45;
  --shadow-sm:      0 1px 4px rgba(0,0,0,0.06);
  --shadow-md:      0 3px 12px rgba(0,0,0,0.10);
  --modal-overlay:  rgba(0,0,0,0.42);
}

body.dark {
  --bg-base:        #0f1117;
  --bg-surface:     #1a1d27;
  --bg-surface-2:   #222638;
  --bg-surface-3:   #292d3e;
  --border-color:   #2e3347;
  --text-primary:   #e4e6f0;
  --text-secondary: #9ca3bf;
  --text-muted:     #5a607a;
  --accent-coral:   #e06b52;
  --accent-forest:  #4a8c6a;
  --shadow-sm:      0 1px 6px rgba(0,0,0,0.4);
  --shadow-md:      0 4px 18px rgba(0,0,0,0.5);
  --modal-overlay:  rgba(0,0,0,0.75);
}

/* ============================================================
   2. BASE RESET
   ============================================================ */
body {
  background-color: var(--bg-base);
  color: var(--text-primary);
  transition: background-color 0.22s ease, color 0.22s ease;
}

/* Scrollbar */
body.dark ::-webkit-scrollbar { width: 5px; height: 5px; }
body.dark ::-webkit-scrollbar-track { background: transparent; }
body.dark ::-webkit-scrollbar-thumb { background: #363b52; border-radius: 4px; }

/* ============================================================
   3. CARD
   ============================================================ */
.card {
  background-color: var(--bg-surface);
  border-radius: 1rem;
  box-shadow: var(--shadow-sm);
}
body.dark .card {
  background-color: var(--bg-surface);
  border-color: var(--border-color);
  box-shadow: var(--shadow-sm);
}

/* ============================================================
   4. INPUT / SELECT / TEXTAREA
   ============================================================ */
.input-field {
  background-color: var(--bg-surface-2);
  border: 1.5px solid var(--border-color);
  color: var(--text-primary);
  border-radius: 0.75rem;
  transition: border-color 0.15s, background-color 0.15s;
}
.input-field:focus {
  outline: none;
  border-color: var(--accent-coral);
  background-color: var(--bg-surface);
}
body.dark .input-field {
  background-color: var(--bg-surface-2) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}
body.dark .input-field:focus {
  border-color: var(--accent-coral) !important;
  background-color: var(--bg-surface-3) !important;
}
body.dark .input-field::placeholder { color: var(--text-muted); }
body.dark select.input-field,
body.dark select.bg-gray-50 {
  background-color: var(--bg-surface-2) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}
body.dark select option {
  background-color: var(--bg-surface) !important;
  color: var(--text-primary) !important;
}

/* ============================================================
   5. NAVIGATION BAR
   ============================================================ */
.bottom-nav {
  background-color: var(--bg-surface);
  border-top: 1px solid var(--border-color);
}
body.dark .bottom-nav {
  background-color: var(--bg-surface) !important;
  border-top: 1px solid var(--border-color) !important;
  box-shadow: 0 -2px 14px rgba(0,0,0,0.45);
}
/* Nav bg-white hardcoded */
body.dark nav.fixed.bottom-0 { background-color: var(--bg-surface) !important; }

/* ============================================================
   6. MODAL
   ============================================================ */
body.dark #modal-overlay,
body.dark .modal-overlay {
  background-color: var(--modal-overlay);
}
body.dark #modal-box,
body.dark .modal-box {
  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border-color);
  color: var(--text-primary);
}

/* ============================================================
   7. BUTTONS
   ============================================================ */
.btn-coral, button.btn-coral {
  background-color: var(--accent-coral);
  color: #fff;
  border: none;
  border-radius: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.15s, transform 0.1s;
}
.btn-coral:hover, button.btn-coral:hover { background-color: #b83e25; }
.btn-coral:active { transform: scale(0.97); }

.btn-primary {
  background-color: var(--accent-forest);
  color: #fff;
  border: none;
  border-radius: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.15s, transform 0.1s;
}
.btn-primary:hover { background-color: #234a35; }
.btn-primary:active { transform: scale(0.97); }
.btn-sm { padding: 0.45rem 1rem; font-size: 0.8125rem; }

.btn-outline {
  background-color: transparent;
  border: 1.5px solid var(--border-color);
  color: var(--text-secondary);
  border-radius: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}
body.dark .btn-outline {
  border-color: var(--border-color);
  color: var(--text-secondary);
}
body.dark .btn-outline:hover {
  background-color: var(--bg-surface-2);
  border-color: var(--accent-coral);
}

/* ============================================================
   8. BADGE
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: 9999px;
  border-width: 1px;
  border-style: solid;
}
body.dark .badge { filter: brightness(0.85) saturate(0.8); }

/* ============================================================
   9. BACKGROUNDS
   ============================================================ */
.bg-cream, .min-h-screen.bg-cream { background-color: var(--bg-base); }

/* -- Semua bg-white -- */
body.dark .bg-white { background-color: var(--bg-surface) !important; }

/* -- bg-gray-* biasa -- */
body.dark .bg-gray-50  { background-color: var(--bg-surface-2) !important; }
body.dark .bg-gray-100 { background-color: var(--bg-surface-3) !important; }
body.dark .bg-gray-200 { background-color: #353a50 !important; }

/* -- bg-gray-50/80 dan bg-gray-50/50 dll (Tailwind opacity modifier) --
   Tailwind compile ke class .bg-gray-50\/80 dengan backslash.
   Di dark mode ini jadi background terang → override ke gelap. */
body.dark [class*="bg-gray-50\/"],
body.dark [class*="bg-gray-100\/"],
body.dark [class*="bg-white\/"] {
  background-color: var(--bg-surface-2) !important;
}

/* -- bg-cream -- */
body.dark .bg-cream { background-color: var(--bg-base) !important; }

/* ============================================================
   10. TEKS
   ============================================================ */
body.dark .text-gray-800 { color: var(--text-primary) !important; }
body.dark .text-gray-700 { color: #c6cade !important; }
body.dark .text-gray-600 { color: var(--text-secondary) !important; }
body.dark .text-gray-500 { color: #878ea8 !important; }
body.dark .text-gray-400 { color: var(--text-muted) !important; }

/* Teks yang line-through (item kosong/canceled) harus tetap terbaca */
body.dark .line-through { color: #546070 !important; opacity: 0.75; }
body.dark .line-through.text-gray-400 { color: #506070 !important; }

/* ============================================================
   11. BORDER
   ============================================================ */
body.dark .border-gray-100  { border-color: var(--border-color) !important; }
body.dark .border-gray-150  { border-color: var(--border-color) !important; }
body.dark .border-gray-200  { border-color: #3a3f56 !important; }
body.dark .border-gray-300  { border-color: #454b64 !important; }
body.dark [class*="border-gray-100\/"] { border-color: var(--border-color) !important; }
body.dark [class*="border-gray-200\/"] { border-color: #3a3f56 !important; }

/* ============================================================
   12. HOVER BG
   ============================================================ */
body.dark .hover\:bg-gray-50:hover  { background-color: var(--bg-surface-2) !important; }
body.dark .hover\:bg-gray-100:hover { background-color: var(--bg-surface-3) !important; }
body.dark .shadow-inner { box-shadow: inset 0 2px 6px rgba(0,0,0,0.45) !important; }

/* ============================================================
   13. HALAMAN PESANAN MASUK — row per user
   Masalah: .bg-gray-50/80 jadi terang di dark mode
   Solusi: target container spesifiknya
   ============================================================ */

/* Container list item user di pageAdminOrders */
body.dark [class*="bg-gray-50"] {
  background-color: var(--bg-surface-2) !important;
  color: var(--text-primary) !important;
}

/* Row "Belum Finalisasi" / "Ditambah" badges */
body.dark .bg-gray-100.text-gray-500 {
  background-color: var(--bg-surface-3) !important;
  color: var(--text-muted) !important;
  border-color: var(--border-color) !important;
}

/* ============================================================
   14. HALAMAN REKAP PER USER — item breakdown box
   Masalah: .bg-gray-50/80 px-3 py-2 rounded-xl (line 898 admin.js)
   ============================================================ */

/* Box "rincian item" per user di rekap */
body.dark .max-h-28.overflow-y-auto,
body.dark .max-h-28 {
  background-color: var(--bg-surface-3) !important;
  border-color: var(--border-color) !important;
}

/* Row item di dalam box rekap */
body.dark [class*="border-gray-100\/50"] {
  border-color: var(--border-color) !important;
}

/* Teks "Kosong" yang line-through di rekap */
body.dark .opacity-50 {
  opacity: 0.4 !important;
}
body.dark .opacity-60 {
  opacity: 0.45 !important;
}

/* ============================================================
   15. LABEL & FORM TEXT
   ============================================================ */
body.dark label { color: var(--text-secondary) !important; }
body.dark .text-xs.font-bold.text-gray-400 { color: #636a84 !important; }
body.dark .text-xs.font-bold.text-gray-500 { color: var(--text-muted) !important; }
body.dark .text-sm.font-semibold.text-gray-600 { color: var(--text-secondary) !important; }

/* ============================================================
   16. WARNA AKSEN (coral & forest) di dark mode
   ============================================================ */
body.dark .text-coral-500 { color: #e06b52 !important; }
body.dark .text-coral-700 { color: #f08870 !important; }
body.dark .text-forest-700 { color: #6aac8a !important; }
body.dark .text-forest-600 { color: #5a9c7a !important; }
body.dark .text-forest-500 { color: #4a8c6a !important; }

body.dark .bg-coral-50      { background-color: rgba(212,85,58,0.12) !important; }
body.dark .bg-coral-100     { background-color: rgba(212,85,58,0.18) !important; }
body.dark .bg-forest-50     { background-color: rgba(74,140,106,0.12) !important; }
body.dark .bg-forest-100    { background-color: rgba(74,140,106,0.18) !important; }
body.dark .bg-forest-500    { background-color: #2d5c45 !important; }

body.dark .border-coral-100 { border-color: rgba(212,85,58,0.25) !important; }
body.dark .border-coral-200 { border-color: rgba(212,85,58,0.35) !important; }
body.dark .border-coral-300 { border-color: rgba(212,85,58,0.5)  !important; }
body.dark .border-forest-100{ border-color: rgba(74,140,106,0.22) !important; }
body.dark .border-forest-150{ border-color: rgba(74,140,106,0.28) !important; }
body.dark .border-forest-200{ border-color: rgba(74,140,106,0.35) !important; }

/* ============================================================
   17. BANNER (amber / sky / red / forest info boxes)
   ============================================================ */
body.dark .bg-amber-50       { background-color: #251e0e !important; }
body.dark .bg-sky-50         { background-color: #0c1a26 !important; }
body.dark .bg-red-50         { background-color: #260f10 !important; }
body.dark .bg-emerald-50     { background-color: #0d1e15 !important; }

body.dark .border-amber-200  { border-color: #5a3d0c !important; }
body.dark .border-sky-100    { border-color: #163040 !important; }
body.dark .border-red-200    { border-color: #56141a !important; }
body.dark .border-red-300    { border-color: #6e1a22 !important; }

body.dark .text-amber-800    { color: #e0b060 !important; }
body.dark .text-amber-700    { color: #d09848 !important; }
body.dark .text-amber-600    { color: #c08838 !important; }
body.dark .text-sky-700      { color: #7ec4ec !important; }
body.dark .text-red-700      { color: #f08080 !important; }
body.dark .text-red-800      { color: #eda8a8 !important; }
body.dark .text-red-600      { color: #e07070 !important; }
body.dark .text-green-700    { color: #6bbf90 !important; }
body.dark .bg-green-100      { background-color: rgba(74,160,106,0.15) !important; }
body.dark .border-green-200  { border-color: rgba(74,160,106,0.3) !important; }

/* ============================================================
   18. STICKY HEADER di modal (bg-white z-10)
   ============================================================ */
body.dark .sticky.bg-white,
body.dark .sticky.top-0.bg-white {
  background-color: var(--bg-surface) !important;
}

/* Scroll list di dalam modal */
body.dark .max-h-64.overflow-y-auto,
body.dark [class*="max-h-\[60vh\]"].overflow-y-auto {
  background-color: var(--bg-surface-2) !important;
  border-color: var(--border-color) !important;
}

/* ============================================================
   19. NAV ITEMS
   ============================================================ */
.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px 6px;
  background: none;
  border: none;
  cursor: pointer;
}
.nav-icon {
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  transition: background-color 0.15s;
}
body.dark .nav-icon.bg-coral-50   { background-color: rgba(212,85,58,0.18) !important; }
body.dark .nav-icon.bg-forest-50  { background-color: rgba(74,140,106,0.18) !important; }
body.dark .nav-icon.text-slate-400 { color: #636a84 !important; }
body.dark .nav-item span.text-slate-400 { color: #636a84 !important; }
/* Notif dot border */
body.dark .border-white.rounded-full { border-color: var(--bg-surface) !important; }

/* ============================================================
   20. TOAST
   ============================================================ */
body.dark #toast, body.dark .toast {
  background-color: var(--bg-surface-2);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-md);
}

/* ============================================================
   21. PAGE TRANSITION
   ============================================================ */
.page-enter { animation: fadeSlideIn 0.2s ease both; }
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   22. THEME TOGGLE BUTTON
   ============================================================ */
.theme-btn {
  background: none;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  transition: background-color 0.15s;
}
.theme-btn:hover { background-color: rgba(255,255,255,0.12); }
.theme-btn .icon-hover  { display: none; }
.theme-btn:hover .icon-current { display: none; }
.theme-btn:hover .icon-hover   { display: inline; }

/* ============================================================
   23. HEADER
   ============================================================ */
body.dark header { box-shadow: 0 2px 12px rgba(0,0,0,0.55); }

/* ============================================================
   24. DIVIDER & DASHED
   ============================================================ */
body.dark .border-dashed { border-color: var(--border-color) !important; }
body.dark [class*="border-dashed"] { border-color: var(--border-color) !important; }

/* ============================================================
   25. REKAP INCOME — summary box
   ============================================================ */
body.dark .bg-amber-50\/60 { background-color: rgba(37,30,14,0.9) !important; }
body.dark [class*="bg-amber-50\/"] { background-color: #251e0e !important; }
/* Kotak putih di dalam card amber (bg-white p-3 rounded-xl) */
body.dark .bg-amber-50 .bg-white {
  background-color: var(--bg-surface-2) !important;
}

/* ============================================================
   26. SUMMARY TOTAL box di payment & order detail
   ============================================================ */
body.dark .bg-gray-50.p-3 { background-color: var(--bg-surface-2) !important; }
body.dark .bg-gray-50.p-3.rounded-xl { background-color: var(--bg-surface-2) !important; }
body.dark .bg-gray-50.p-4 { background-color: var(--bg-surface-2) !important; }

/* ============================================================
   27. DISABLED BUTTON
   ============================================================ */
body.dark .bg-gray-200.text-gray-400 {
  background-color: #2e3347 !important;
  color: #5a607a !important;
  border-color: var(--border-color) !important;
}

/* ============================================================
   28. SESSION CARD — bg-gradient header
   ============================================================ */
body.dark .bg-gradient-to-r.from-forest-700 {
  background: linear-gradient(to right, #1a3d2a, #234d38) !important;
}

/* ============================================================
   29. PRODUCT ICON CONTAINER
   ============================================================ */
body.dark .bg-forest-50.rounded-xl { background-color: rgba(74,140,106,0.12) !important; }
body.dark .bg-coral-50.rounded-xl  { background-color: rgba(212,85,58,0.10) !important; }
body.dark [class*="bg-coral-50\/"]  { background-color: rgba(212,85,58,0.10) !important; }
body.dark [class*="bg-forest-50\/"] { background-color: rgba(74,140,106,0.12) !important; }

/* ============================================================
   30. LAPANGAN — icon box bg-white border
   ============================================================ */
body.dark .w-10.h-10.rounded-xl.bg-white.border {
  background-color: var(--bg-surface-2) !important;
  border-color: var(--border-color) !important;
}

/* ============================================================
   31. CHECKBOX / RADIO
   ============================================================ */
body.dark input[type="checkbox"],
body.dark input[type="radio"] { accent-color: var(--accent-coral); }

/* ============================================================
   32. IMAGE ZOOM OVERLAY
   ============================================================ */
body.dark #image-zoom-overlay { background-color: rgba(0,0,0,0.9) !important; }

/* ============================================================
   33. MATIKAN BLINK — hanya biarkan notif dot kecil yang blink
   ============================================================ */
body.dark .animate-pulse:not(.w-2\.5):not(.w-2\.5):not([class~="rounded-full"]) {
  animation: none !important;
}
body.dark .animate-pulse-slow { animation: none !important; }

/* ============================================================
   DONE — JAMARA Dark Theme v2.0
   ============================================================ */