/* ==========================================================================
   CORE PLATFORM: CODE MARKET ENGINE v1.0
   STANDARD: CUSTOM TAILWIND UTILITIES & MASTER CSS EFFECTS
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
    --font-main: 'Plus Jakarta Sans', sans-serif;
    /* Theme Palette: Premium Dark Tech & Royal Blue Accents */
    --bg-dark-core: #0b1329;
    --bg-dark-card: #1c2541;
    --accent-blue: #3a86ff;
    --accent-emerald: #10b981;
    --accent-gold: #ffb703;
}

body {
    font-family: var(--font-main);
    background-color: #f8fafc; /* Slate 50 untuk client-side */
    overflow-x: hidden;
}

/* ✨ ULTRA PREMIUM GLASSMORPHISM EFFECT */
.glass-card {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.dark-glass-card {
    background: rgba(28, 37, 65, 0.85);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* 🏎️ HOVER DYNAMIC MICRO-INTERACTIONS */
.premium-card {
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.premium-card:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);
    border-color: rgba(58, 134, 255, 0.3);
}

/* 💎 SHINE GLOW ANIMATION (Bikin Source Code Terlihat Berkilau) */
.shine-effect {
    position: relative;
    overflow: hidden;
}

.shine-effect::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -60%;
    width: 30%;
    height: 200%;
    background: rgba(255, 255, 255, 0.24);
    transform: rotate(30deg);
    transition: none;
}

.premium-card:hover .shine-effect::after {
    left: 120%;
    transition: all 0.8s ease-in-out;
}

/* 📊 CUSTOM ERGONOMIC SCROLLBAR */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 20px;
    border: 2px solid #f1f5f9;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* 🔒 ADMIN BACKEND ONLY STYLE */
.admin-body {
    background-color: #0f172a; /* Slate 900 untuk Backend Admin */
    color: #f8fafc;
}

.sidebar-active {
    background: linear-gradient(90deg, rgba(58, 134, 255, 0.15) 0%, rgba(58, 134, 255, 0) 100%);
    border-left: 4px solid var(--accent-blue);
    color: #ffffff !important;
}

/* 🏷️ BADGE GLOWING STATUS */
.badge-tech {
    background: rgba(58, 134, 255, 0.1);
    color: var(--accent-blue);
    border: 1px solid rgba(58, 134, 255, 0.2);
    font-weight: 600;
}

/* ==========================================================================
   🛠️ INJEKSI SENTRA TAMBAHAN AUDIT VISUAL (POLESAN MIKRO-UX) kawan
   ========================================================================== */

/* Memperhalus tumpukan badge di atas gambar biar tidak kaku menempel kawan */
.card-badge-floating {
    position: absolute;
    top: 14px;
    left: 14px;
    border-radius: 8px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: rgba(37, 99, 235, 0.9) !important; /* Blue 600 Luxury Solid Glossy */
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: all 0.3s ease;
}

/* Berikan efek glow membesar tipis saat card-nya di-hover kawan */
.premium-card:hover .card-badge-floating {
    transform: scale(1.05);
    background: #2563eb !important;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4);
}

.dataTables_wrapper .dataTables_paginate {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    margin-top: 10px !important;
}

/* Memperbaiki tampilan tombol-tombol angka agar berbentuk kotak */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 5px 12px !important;
    margin-left: 2px !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 0.375rem !important;
    background: #ffffff !important;
    color: #334155 !important;
    cursor: pointer;
}

/* Warna saat aktif atau di-hover */
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #0d6efd !important;
    color: #ffffff !important;
    border-color: #0d6efd !important;
}

/* Memastikan teks info di kiri dan pagination di kanan */
.row.mt-3 {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

/* 1. Memaksa container pagination jadi satu baris (Flex) */
.dataTables_wrapper .dataTables_paginate {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* 2. Memperbaiki elemen ul list agar tidak berantakan */
.dataTables_wrapper .dataTables_paginate ul.pagination {
    display: flex !important;
    padding-left: 0;
    list-style: none;
    margin: 0;
}

/* 3. Memberikan jarak antar tombol agar terlihat profesional */
.dataTables_wrapper .dataTables_paginate ul.pagination li.paginate_button {
    margin: 0 2px;
}

/* 4. Mengembalikan fungsi klik tombol ke tampilan normal */
.dataTables_wrapper .dataTables_paginate ul.pagination li.paginate_button a {
    display: block;
    padding: 0.5rem 0.75rem;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    color: #0d6efd;
    text-decoration: none;
    background: #fff;
}