/* style.css */
body { margin: 0; }

/* Custom Scrollbar Nhỏ Gọn */
.custom-scrollbar::-webkit-scrollbar, ::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
/* Scrollbar cho Dark Mode */
.dark ::-webkit-scrollbar-thumb { background: #475569; }
.dark ::-webkit-scrollbar-thumb:hover { background: #64748b; }

/* Hiệu ứng Dropzone */
.dropzone { transition: all 0.2s ease; border: 1px dashed #cbd5e1; background: #f8fafc; }
.dropzone.dragover { background-color: #eff6ff; border-color: #3b82f6; }
/* Dropzone Dark Mode */
.dark .dropzone { border-color: #334155; background: #1e293b; color: #cbd5e1; }
.dark .dropzone.dragover { background-color: #334155 !important; border-color: #60a5fa !important; }

/* CSS Component MultiSelect & Auto Overrides */
.multiselect { position: relative; width: 100%; }
.multiselect-btn {
    width: 100%; padding: 0.45rem 0.75rem; font-size: 0.875rem; text-align: left; 
    background-color: #f8fafc; border: 1px solid #e2e8f0; border-radius: 0.5rem; 
    cursor: pointer; transition: all 0.2s;
}
.multiselect-btn:focus { border-color: #facc15; outline: none; box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.2); }
.multiselect-options {
    position: absolute; top: 100%; left: 0; right: 0; margin-top: 0.25rem;
    background: white; border: 1px solid #e2e8f0; border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); z-index: 50; display: none; max-height: 250px; overflow-y: auto;
}
.multiselect-options label { display: flex; align-items: center; padding: 0.4rem 0.75rem; font-size: 0.875rem; cursor: pointer;}
.multiselect-options label:hover { background-color: #f1f5f9; }
.multiselect-search { width: 100%; padding: 0.4rem 0.5rem; border: 1px solid #e2e8f0; border-radius: 0.375rem; margin-bottom: 0.25rem; font-size: 0.875rem; outline: none; }

/* MultiSelect Dark Mode */
.dark .multiselect-btn { background-color: #1e293b; border-color: #334155; color: #f8fafc; }
.dark .multiselect-options { background-color: #1e293b; border-color: #334155; color: #cbd5e1;}
.dark .multiselect-options label:hover { background-color: #334155 !important; color: #fff;}
.dark .multiselect-search { background-color: #0f172a; border-color: #334155; color: #f8fafc; }

/* BẢNG DỮ LIỆU PRO */
.overflow-x-auto { max-height: calc(100vh - 250px); overflow-y: auto; }
.pro-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.pro-table thead th {
    position: sticky; top: 0; z-index: 10;
    background-color: #f8fafc !important; color: #64748b; 
    font-size: 11px !important; text-transform: uppercase; font-weight: 700;
    padding: 12px 16px !important; border-bottom: 1px solid #e2e8f0; box-shadow: inset 0 -1px 0 #e2e8f0;
}
.pro-table tbody td { padding: 10px 16px !important; border-bottom: 1px solid #f1f5f9; transition: all 0.15s; vertical-align: middle; }
.pro-table tbody tr:last-child td { border-bottom: none; }
.pro-table.zebra tbody tr:nth-child(even) { background-color: #fafaf9; }
.pro-table.zebra tbody tr:nth-child(odd) { background-color: #ffffff; }
.pro-table tbody tr:hover { background-color: #f0f9ff !important; box-shadow: inset 3px 0 0 0 #3b82f6; z-index: 5; position: relative;}
.pro-table tbody tr:hover td { color: #0f172a !important; border-bottom-color: transparent; }

/* ================= DARK MODE OVERRIDES AUTO ================= */
.dark .bg-white { background-color: #1e293b !important; border-color: #334155 !important; color: #f8fafc;}
.dark .bg-slate-50, .dark .bg-slate-100 { background-color: #0f172a !important; border-color: #334155 !important;}
.dark .border-slate-100, .dark .border-slate-200 { border-color: #334155 !important; }
.dark .text-slate-800, .dark .text-slate-700 { color: #f8fafc !important; }
.dark .text-slate-600, .dark .text-slate-500, .dark .text-slate-400 { color: #94a3b8 !important; }

/* Fix Hover Dark Mode */
.dark .hover\:bg-slate-50:hover, .dark .hover\:bg-slate-100:hover { background-color: #334155 !important; }

.dark .text-blue-700 { color: #60a5fa !important; }
.dark .text-blue-600 { color: #3b82f6 !important; }
.dark .bg-blue-50\/40, .dark .bg-blue-50\/30, .dark .bg-blue-50\/20, .dark .bg-blue-50\/10, .dark .bg-blue-50 { background-color: rgba(59, 130, 246, 0.15) !important; }
.dark .bg-red-50 { background-color: rgba(239, 68, 68, 0.1) !important; border-color: rgba(239, 68, 68, 0.2) !important;}
.dark .text-red-600, .dark .text-red-500 { color: #f87171 !important; }
.dark .text-emerald-500 { color: #34d399 !important; }

/* Pro Table Dark Mode */
.dark .pro-table thead th { background-color: #1e293b !important; color: #cbd5e1; border-bottom-color: #334155; box-shadow: inset 0 -1px 0 #334155; }
.dark .pro-table tbody td { border-bottom-color: #1e293b; }
.dark .pro-table.zebra tbody tr:nth-child(even) { background-color: #1e293b; }
.dark .pro-table.zebra tbody tr:nth-child(odd) { background-color: #0f172a; }
.dark .pro-table tbody tr:hover { background-color: #334155 !important; box-shadow: inset 3px 0 0 0 #facc15; }
.dark .pro-table tbody tr:hover td { color: #ffffff !important; }

/* Hiệu ứng Tab */
.tab-pane { animation: fadeIn 0.25s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }