/* =============================================
   DARK MODE — CV. SAM Brangkal
   Lapisan: page (#0f172a) → panel (#1e293b) → surface (#334155)
   ============================================= */

html.dark {
  color-scheme: dark;
  background-color: #0f172a !important;
}

html.dark body,
html.dark body.bg-gray-100,
html.dark body.bg-gray-50,
html.dark body.bg-slate-100,
html.dark body.bg-slate-50 {
  background-color: #0f172a !important;
  color: #e2e8f0 !important;
}

/* --- Layer 2: panel / kartu utama --- */
html.dark .bg-white,
html.dark .bg-gray-50,
html.dark .bg-gray-100,
html.dark .bg-slate-50,
html.dark .bg-slate-100 {
  background-color: #1e293b !important;
}

html.dark .bg-gray-200,
html.dark .bg-slate-200 {
  background-color: #334155 !important;
}

/* Tab panels */
html.dark .tab-content {
  background-color: transparent !important;
}
html.dark .tab-content > div.bg-white,
html.dark .tab-content > .bg-white,
html.dark .tab-content > div > .bg-white.rounded-lg,
html.dark .tab-content .shadow-md.bg-white {
  background-color: #1e293b !important;
  border-color: #334155 !important;
}

/* Grid kasir: kartu produk = layer 3 (lebih terang dari panel) */
html.dark #productGrid .kasir-product-card,
html.dark #productGrid > div {
  background-color: #1e293b !important;
  border-color: #475569 !important;
  color: #f1f5f9 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
html.dark #productGrid .kasir-product-card:hover,
html.dark #productGrid > div:hover {
  border-color: #64748b !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
html.dark #productGrid .kasir-product-card h3,
html.dark #productGrid > div h3,
html.dark #productGrid .kasir-product-card .font-semibold,
html.dark #productGrid > div .font-semibold {
  color: #f8fafc !important;
}
html.dark #productGrid .kasir-product-card .text-gray-600,
html.dark #productGrid .kasir-product-card .text-gray-500,
html.dark #productGrid .kasir-product-card .text-gray-400,
html.dark #productGrid > div .text-gray-600,
html.dark #productGrid > div .text-gray-500,
html.dark #productGrid > div .text-gray-400 {
  color: #94a3b8 !important;
}
/* Harga / stok: kontras jelas di kartu gelap */
html.dark #productGrid .kasir-product-card .text-blue-600,
html.dark #productGrid .kasir-product-card .text-blue-800,
html.dark #productGrid > div .text-blue-600,
html.dark #productGrid > div .text-blue-800 {
  color: #93c5fd !important;
}
html.dark #productGrid .kasir-product-card .text-green-600,
html.dark #productGrid > div .text-green-600 {
  color: #6ee7b7 !important;
}
html.dark #productGrid .kasir-product-card .text-red-600,
html.dark #productGrid > div .text-red-600 {
  color: #fca5a5 !important;
}
html.dark #productGrid .kasir-product-card .text-purple-700,
html.dark #productGrid > div .text-purple-700 {
  color: #d8b4fe !important;
}
html.dark #productGrid .kasir-product-card select,
html.dark #productGrid > div select {
  background-color: #0f172a !important;
  border-color: #475569 !important;
  color: #f1f5f9 !important;
}

/* Bingkai foto produk: abu netral (bukan putih menyala) */
html.dark .kasir-product-thumb {
  background-color: #334155 !important;
  border-bottom: 1px solid #475569;
}
html.dark .kasir-product-thumb img {
  background-color: #f8fafc !important;
  border-radius: 0.25rem;
}

/* Keranjang item */
html.dark #cartItems .bg-slate-50,
html.dark #cartItems .bg-white,
html.dark #cartItems > div {
  background-color: #334155 !important;
  border-color: #475569 !important;
}

html.dark #paymentMethodHint {
  color: #94a3b8 !important;
}
html.dark #quickPayButtons button {
  background-color: #334155 !important;
  border-color: #475569 !important;
  color: #e2e8f0 !important;
}
html.dark #quickPayButtons button:first-child {
  background-color: rgba(6, 78, 59, 0.45) !important;
  border-color: #059669 !important;
  color: #a7f3d0 !important;
}

/* Tint soft (bukan putih) */
html.dark .bg-blue-50 { background-color: rgba(30, 58, 138, 0.35) !important; }
html.dark .bg-green-50,
html.dark .bg-emerald-50 { background-color: rgba(6, 78, 59, 0.35) !important; }
html.dark .bg-teal-50 { background-color: rgba(19, 78, 74, 0.35) !important; }
html.dark .bg-red-50 { background-color: rgba(127, 29, 29, 0.35) !important; }
html.dark .bg-yellow-50,
html.dark .bg-amber-50 { background-color: rgba(120, 53, 15, 0.35) !important; }
html.dark .bg-purple-50,
html.dark .bg-violet-50 { background-color: rgba(76, 29, 149, 0.35) !important; }
html.dark .bg-orange-50 { background-color: rgba(124, 45, 18, 0.35) !important; }
html.dark .bg-cyan-50 { background-color: rgba(22, 78, 99, 0.35) !important; }
html.dark .bg-indigo-50 { background-color: rgba(49, 46, 129, 0.35) !important; }

/* Teks */
html.dark .text-gray-900,
html.dark .text-slate-900 { color: #f8fafc !important; }
html.dark .text-gray-800,
html.dark .text-slate-800 { color: #f1f5f9 !important; }
html.dark .text-gray-700,
html.dark .text-slate-700 { color: #e2e8f0 !important; }
html.dark .text-gray-600,
html.dark .text-slate-600 { color: #cbd5e1 !important; }
html.dark .text-gray-500,
html.dark .text-slate-500,
html.dark .text-gray-400,
html.dark .text-slate-400 { color: #94a3b8 !important; }
html.dark .text-black { color: #f8fafc !important; }

/* Border */
html.dark .border-gray-100,
html.dark .border-slate-100 { border-color: rgba(71, 85, 105, 0.6) !important; }
html.dark .border-gray-200,
html.dark .border-slate-200 { border-color: #334155 !important; }
html.dark .border-gray-300,
html.dark .border-slate-300 { border-color: #475569 !important; }

/* Form */
html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
html.dark select,
html.dark textarea {
  background-color: #0f172a !important;
  border-color: #475569 !important;
  color: #f1f5f9 !important;
}
html.dark input::placeholder,
html.dark textarea::placeholder {
  color: #64748b !important;
}

/* Tabel */
html.dark table {
  background-color: #1e293b !important;
}
html.dark table thead,
html.dark table thead tr,
html.dark table thead th {
  background-color: #0f172a !important;
  color: #e2e8f0 !important;
  border-color: #334155 !important;
}
html.dark table tbody tr {
  background-color: #1e293b !important;
  border-color: #334155 !important;
}
html.dark table tbody tr:nth-child(even) {
  background-color: #1a2436 !important;
}
html.dark table tbody tr:hover {
  background-color: #334155 !important;
}
html.dark table td {
  border-color: #334155 !important;
  color: #e2e8f0 !important;
}

/* Header user card — jangan dipaksa putih */
html.dark #userLoginCard {
  background-color: rgba(15, 23, 42, 0.75) !important;
  border-color: rgba(148, 163, 184, 0.25) !important;
}
html.dark #onlineUsersDisplay > div {
  background-color: rgba(30, 41, 59, 0.9) !important;
  border-color: rgba(148, 163, 184, 0.2) !important;
  color: #e2e8f0 !important;
}

/* Modal update */
html.dark .sum-card {
  background-color: #1e293b !important;
}
html.dark .sum-body { color: #e2e8f0 !important; }
html.dark .sum-time {
  background-color: rgba(15, 23, 42, 0.6) !important;
  border-color: #334155 !important;
  color: #cbd5e1 !important;
}

html.dark hr { border-color: #334155 !important; }

html.dark ::-webkit-scrollbar-track { background: #0f172a; }
html.dark ::-webkit-scrollbar-thumb { background: #475569; border-radius: 999px; }
html.dark ::-webkit-scrollbar-thumb:hover { background: #64748b; }

/* Nav tabs strip */
html.dark .tab-button {
  color: #cbd5e1 !important;
}
html.dark #mainApp > .bg-white,
html.dark nav.bg-white {
  background-color: #1e293b !important;
  border-color: #334155 !important;
}

/* Jangan padamkan tombol aksi berwarna */
html.dark .bg-green-600,
html.dark .bg-blue-600,
html.dark .bg-red-600,
html.dark .bg-indigo-600,
html.dark .bg-emerald-600,
html.dark .bg-orange-600,
html.dark button.bg-green-600,
html.dark button.bg-blue-600,
html.dark button.bg-red-600 {
  color: #fff !important;
}