/* assets/style.css */
body { transition: background-color 0.3s ease, color 0.3s ease; }

/* === MODERN DATATABLES INPUT TUNING === */
.dataTables_wrapper .dataTables_filter input { border: 1px solid #cbd5e1; border-radius: 0.5rem; padding: 0.4rem 0.75rem; outline: none; transition: all 0.2s; background-color: transparent; }
.dataTables_wrapper .dataTables_filter input:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2); }
.dataTables_wrapper .dt-buttons { margin-bottom: 1.5rem; }
.dataTables_wrapper .dataTables_length select { border: 1px solid #cbd5e1; border-radius: 0.375rem; padding: 0.2rem 0.5rem; outline: none; background-color: transparent;}
table.dataTable thead th { padding: 12px 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; border-bottom: 2px solid #e2e8f0 !important; }
table.dataTable tbody td { padding: 10px 10px; border-bottom: 1px solid #f1f5f9; }

/* === PERBAIKAN UKURAN FONT NAVIGASI DATATABLES === */
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_paginate { font-size: 12px !important; }

/* === STYLE TOMBOL OPSI KOLOM (COLVIS) === */
.dt-buttons .dt-button { background: linear-gradient(135deg, #3b82f6 0%, #4f46e5 100%) !important; color: #ffffff !important; border: none !important; border-radius: 0.5rem !important; padding: 0.4rem 1rem !important; font-weight: 600 !important; font-size: 12px !important; box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.3) !important; transition: all 0.3s ease !important; }
.dt-buttons .dt-button:hover { transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.4) !important; }

/* === STYLE PAGINATION & LAINNYA === */
.dataTables_wrapper .dataTables_info { padding: 1.5rem 1.5rem !important; }
.dataTables_wrapper .dataTables_paginate { padding: 1.5rem 1.5rem !important; display: flex; justify-content: flex-end; gap: 0.3rem; }
.dataTables_wrapper .dataTables_paginate .paginate_button { border-radius: 0.5rem !important; border: 1px solid #e2e8f0 !important; background: #ffffff !important; color: #475569 !important; font-weight: 600 !important; padding: 0.35rem 0.85rem !important; transition: all 0.2s ease !important; margin: 0 !important; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: #f8fafc !important; border-color: #cbd5e1 !important; color: #2563eb !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background: linear-gradient(135deg, #3b82f6 0%, #4f46e5 100%) !important; color: white !important; border-color: transparent !important; box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.4) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover { background: #f1f5f9 !important; color: #cbd5e1 !important; border-color: #f1f5f9 !important; cursor: not-allowed !important; box-shadow: none !important; }

/* === Custom Scrollbar === */
::-webkit-scrollbar { height: 8px; width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* === DARK MODE OVERRIDES === */
.dark .dataTables_wrapper .dataTables_filter input { border-color: #475569; color: #f8fafc; background-color: #1e293b;}
.dark .dataTables_wrapper .dataTables_length select { border-color: #475569; color: #f8fafc; background-color: #1e293b; }
.dark .dataTables_wrapper .dataTables_length, .dark .dataTables_wrapper .dataTables_filter, .dark .dataTables_wrapper .dataTables_info, .dark .dataTables_wrapper .dataTables_processing { color: #94a3b8; }
.dark table.dataTable thead th { border-bottom-color: #334155 !important; }
.dark table.dataTable tbody td { border-bottom-color: #1e293b; }
.dark ::-webkit-scrollbar-thumb { background: #475569; }
.dark ::-webkit-scrollbar-thumb:hover { background: #64748b; }
.dark .dataTables_wrapper .dataTables_paginate .paginate_button { background: #1e293b !important; border-color: #334155 !important; color: #94a3b8 !important; }
.dark .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: #334155 !important; color: #60a5fa !important; border-color: #475569 !important; }
.dark .dataTables_wrapper .dataTables_paginate .paginate_button.current { background: linear-gradient(135deg, #3b82f6 0%, #4f46e5 100%) !important; color: white !important; border-color: transparent !important; }
.dark .dataTables_wrapper .dataTables_paginate .paginate_button.disabled { background: #0f172a !important; color: #334155 !important; border-color: #0f172a !important; }

/* Skeleton Pulse Effect */
@keyframes customPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.animate-custom-pulse { animation: customPulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

/* Khusus untuk Tabel Mapping Utama */
#debugTable tbody td { font-size: 11px; padding: 6px 10px; }
#debugTable thead th { font-size: 10px; padding: 8px 10px; }

/* === FIX HEADER DATATABLES TIDAK PRESISI === */
.dataTables_scrollHeadInner { width: 100% !important; padding-right: 0px !important; }
.dataTables_scrollHeadInner table.dataTable { width: 100% !important; margin: 0 !important; }
table.dataTable { width: 100% !important; }