/* Dark mode overrides for Tailwind utility classes */

.dark body {
    background-color: #0f172a;
    color: #f1f5f9;
}

.dark .min-h-screen.bg-gradient-to-b {
    background-image: linear-gradient(to bottom, #0f172a, #0f172a, #020617) !important;
}

.dark .sticky.top-0.bg-gradient-to-b {
    background-image: linear-gradient(to bottom, rgba(15, 23, 42, 0.96), rgba(15, 23, 42, 0.78), transparent) !important;
}

.dark .bg-white\/95 {
    background-color: rgba(30, 41, 59, 0.95) !important;
}

.dark [class*="-50/40"],
.dark [class*="-50/50"],
.dark [class*="-50/60"],
.dark [class*="-50/30"] {
    background-color: rgba(30, 41, 59, 0.88) !important;
}

.dark .bg-white { background-color: #1e293b !important; }
.dark .bg-gray-50 { background-color: #0f172a !important; }
.dark .bg-gray-100 { background-color: #334155 !important; }
.dark .bg-gray-200 { background-color: #475569 !important; }

.dark .text-gray-900 { color: #f1f5f9 !important; }
.dark .text-gray-800 { color: #e2e8f0 !important; }
.dark .text-gray-700 { color: #cbd5e1 !important; }
.dark .text-gray-600 { color: #94a3b8 !important; }
.dark .text-gray-500 { color: #94a3b8 !important; }
.dark .text-gray-400 { color: #64748b !important; }

.dark .border-gray-100 { border-color: #334155 !important; }
.dark .border-gray-200 { border-color: #334155 !important; }
.dark .border-gray-300 { border-color: #475569 !important; }

.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
    border-color: #334155 !important;
}

.dark .hover\:bg-gray-50:hover { background-color: #334155 !important; }
.dark .hover\:bg-gray-100:hover { background-color: #475569 !important; }
.dark .hover\:text-gray-800:hover { color: #f1f5f9 !important; }
.dark .hover\:text-gray-900:hover { color: #f8fafc !important; }

.dark .bg-indigo-50 { background-color: rgba(220, 38, 38, 0.15) !important; }
.dark .bg-indigo-100 { background-color: rgba(220, 38, 38, 0.25) !important; }
.dark .text-indigo-700 { color: #fca5a5 !important; }
.dark .text-indigo-900 { color: #fecaca !important; }
.dark .bg-blue-50 { background-color: rgba(220, 38, 38, 0.12) !important; }
.dark .text-blue-800 { color: #fca5a5 !important; }
.dark .from-indigo-50 { --tw-gradient-from: rgb(69 10 10 / 0.4) var(--tw-gradient-from-position); }
.dark .to-blue-50 { --tw-gradient-to: rgb(15 23 42 / 0.9) var(--tw-gradient-to-position); }
.dark .hover\:text-indigo-600:hover { color: #fca5a5 !important; }
.dark .hover\:border-indigo-200:hover { border-color: rgba(220, 38, 38, 0.4) !important; }
.dark .hover\:bg-indigo-50:hover { background-color: rgba(220, 38, 38, 0.2) !important; }

.dark .bg-emerald-50:not(.sample-option-selected) { background-color: rgba(16, 185, 129, 0.12); }
.dark .text-emerald-800 { color: #6ee7b7 !important; }
.dark .text-emerald-900 { color: #d1fae5 !important; }

.dark .sample-option-selected {
    background-color: rgba(15, 23, 42, 0.95) !important;
}

/* DISC form — preserve P/K column tints in dark mode */
.dark .bg-yellow-50\/60,
.dark .bg-yellow-100 { background-color: rgba(113, 63, 18, 0.35) !important; }
.dark .bg-green-50\/60,
.dark .bg-green-100 { background-color: rgba(6, 78, 59, 0.35) !important; }
.dark .bg-yellow-300 { background-color: #ca8a04 !important; }
.dark .bg-green-400 { background-color: #16a34a !important; }
.dark .hover\:bg-gray-50\/80:hover { background-color: rgba(51, 65, 85, 0.45) !important; }

/* Holland — opsi Ya / Tidak terpilih */
.dark button.border-green-600.bg-green-50,
.dark button.border-green-500.bg-green-50 {
    background-color: rgba(6, 78, 59, 0.45) !important;
    border-color: #22c55e !important;
}
.dark button.border-red-500.bg-red-50,
.dark button.border-red-400.bg-red-50 {
    background-color: rgba(127, 29, 29, 0.45) !important;
    border-color: #f87171 !important;
}
.dark .text-green-100 { color: #dcfce7 !important; }
.dark .text-red-100 { color: #fecaca !important; }

/* Sample test drawing canvas — dark surface */
.dark .baum-canvas-wrap,
.dark .dap-canvas-wrap,
.dark .wartegg-canvas-wrap {
    background-color: #1e293b !important;
}
.dark .baum-canvas-wrap canvas,
.dark .dap-canvas-wrap canvas,
.dark .wartegg-canvas-wrap canvas {
    background-color: #1e293b !important;
}
.dark .baum-canvas-wrap .bg-white\/80,
.dark .dap-canvas-wrap .bg-white\/80,
.dark .dap-canvas-wrap .bg-white\/90,
.dark .wartegg-canvas-wrap .bg-white\/80 {
    background-color: rgba(30, 41, 59, 0.92) !important;
}

.dark .text-red-900 { color: #fecaca !important; }
.dark .text-violet-900 { color: #ede9fe !important; }
.dark .text-blue-900 { color: #dbeafe !important; }
.dark .text-orange-900 { color: #ffedd5 !important; }
.dark .text-cyan-900 { color: #cffafe !important; }
.dark .text-rose-900 { color: #ffe4e6 !important; }
.dark .text-amber-900 { color: #fef3c7 !important; }
.dark .text-lime-900 { color: #ecfccb !important; }
.dark .text-green-900 { color: #dcfce7 !important; }
.dark .text-pink-900 { color: #fce7f3 !important; }
.dark .text-slate-900 { color: #f1f5f9 !important; }
.dark .text-indigo-900 { color: #e0e7ff !important; }
.dark .text-teal-900 { color: #ccfbf1 !important; }

.dark .bg-red-50 { background-color: rgba(239, 68, 68, 0.12) !important; }
.dark .text-red-600 { color: #fca5a5 !important; }
.dark .text-red-700 { color: #fca5a5 !important; }
.dark .text-red-800 { color: #fecaca !important; }
.dark .hover\:bg-red-50:hover { background-color: rgba(239, 68, 68, 0.15) !important; }
.dark .hover\:text-red-800:hover { color: #fecaca !important; }

.dark .bg-amber-50 { background-color: rgba(245, 158, 11, 0.12) !important; }
.dark .text-amber-800 { color: #fcd34d !important; }

.dark .shadow-sm,
.dark .shadow,
.dark .shadow-lg,
.dark .shadow-xl {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

.dark .ring-black { --tw-ring-color: rgba(255, 255, 255, 0.1) !important; }

.dark input,
.dark select,
.dark textarea {
    background-color: #1e293b !important;
    border-color: #475569 !important;
    color: #f1f5f9 !important;
}

.dark input::placeholder,
.dark textarea::placeholder {
    color: #64748b !important;
}

.dark input:focus,
.dark select:focus,
.dark textarea:focus {
    border-color: #dc2626 !important;
}

.dark .dataTables_wrapper { color: #cbd5e1; }
.dark .dataTables_wrapper .dataTables_length label,
.dark .dataTables_wrapper .dataTables_filter label,
.dark .dataTables_wrapper .dataTables_info {
    color: #94a3b8;
}
.dark .dataTables_wrapper .dataTables_filter input,
.dark .dataTables_wrapper .dataTables_length select {
    background-color: #1e293b !important;
    border-color: #475569 !important;
    color: #f1f5f9 !important;
}
.dark table.dataTable thead th {
    background: #1e293b !important;
    color: #94a3b8 !important;
    border-bottom-color: #334155 !important;
}
.dark table.dataTable tbody td {
    color: #cbd5e1 !important;
    border-bottom-color: #334155 !important;
}
.dark table.dataTable tbody tr:hover td {
    background-color: #334155 !important;
}
.dark .dataTables_wrapper .dataTables_paginate .paginate_button {
    background: #1e293b !important;
    border-color: #475569 !important;
    color: #cbd5e1 !important;
}
.dark .dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.disabled):not(.current) {
    background: #334155 !important;
    border-color: #64748b !important;
    color: #f1f5f9 !important;
}
.dark .dataTables_wrapper .dataTables_processing {
    background: rgba(30, 41, 59, 0.95) !important;
    border-color: #475569 !important;
    color: #fca5a5 !important;
}