@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/11.1.0/sweetalert2.min.css');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css");
@import url("https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap5.min.css");


body {
    background: linear-gradient(135deg, #0c0c0c 0%, #1a1a2e 50%, #16213e 100%);
    min-height: 100vh;
    color: #ffffff;
    font-family: 'Poppins', sans-serif !important;
}

.container {
    max-width: 1140px;
}

.btn-default {
    background-color: #c21b1b;
    color: white;
}

.btn-default:hover {
    background-color: dodgerblue;
    color: whitesmoke;
}

.key-sensi {
    filter: blur(3px);
}

/* DataTables Dark Theme */
#datatable tbody tr {
    background-color: #1a1d23 !important;
    border-color: #2d3748 !important;
    transition: all 0.3s ease;
}

#datatable tbody tr:hover {
    background-color: #2d3748 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

#datatable tbody td {
    border-color: #2d3748 !important;
    color: #e2e8f0 !important;
    padding: 15px 8px;
    vertical-align: middle;
}

/* Custom Buttons */
.btn-outline-danger {
    border-color: #fc8181;
    color: #fc8181;
    transition: all 0.3s ease;
}

.btn-outline-danger:hover {
    background-color: #fc8181;
    border-color: #fc8181;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(252, 129, 129, 0.3);
}

.btn-outline-dark {
    border-color: #a0aec0;
    color: #a0aec0;
    transition: all 0.3s ease;
}

.btn-outline-dark:hover {
    background-color: #a0aec0;
    border-color: #a0aec0;
    color: #1a202c;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(160, 174, 192, 0.3);
}

/* Status badges */
.text-success {
    color: #68d391 !important;
    font-weight: 600;
}

.text-danger {
    color: #fc8181 !important;
    font-weight: 600;
}

.badge {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
    padding: 8px 12px;
    border-radius: 20px;
    font-weight: 500;
}

.badge-expired {
    background: linear-gradient(135deg, #fc8181 0%, #f56565 100%) !important;
    color: white !important;
    padding: 8px 12px;
    border-radius: 20px;
    font-weight: 600;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.7; }
    100% { opacity: 1; }
}

/* DataTables controls */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    color: #e2e8f0 !important;
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    background-color: #2d3748 !important;
    border: 1px solid #4a5568 !important;
    color: #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: #667eea !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
}

.page-link {
    background-color: #2d3748 !important;
    border-color: #4a5568 !important;
    color: #e2e8f0 !important;
}

.page-link:hover {
    background-color: #4a5568 !important;
    border-color: #667eea !important;
    color: white !important;
}

.page-item.active .page-link {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border-color: #667eea !important;
}

/* Tooltip dark theme */
.tooltip-inner {
    background-color: #2d3748 !important;
    color: #e2e8f0 !important;
}

.tooltip .arrow::before {
    border-top-color: #2d3748 !important;
}

/* Smooth animations */
* {
    transition: all 0.3s ease;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #1a1d23;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}



/* Pastikan Font Awesome sudah terhubung di <head> HTML Anda */
/* Contoh: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"> */

.image-data-container {
    /* Latar belakang gradien */
    background: linear-gradient(to bottom right, #7c3aed, #5b21b6);
    padding: 0; /* Padding utama dihilangkan karena akan ada di setiap sel */
    border-radius: 0.75rem;
    /* Bayangan lembut, tidak terlalu mencolok */
    box-shadow: 0 8px 15px -3px rgba(0, 0, 0, 0.15), 0 3px 6px -2px rgba(0, 0, 0, 0.1);
    border: 2px solid #c4b5fd; /* Border utama kontainer */
    display: flex; /* Gunakan flexbox untuk tata letak kolom */
    flex-direction: column; /* Susun item secara vertikal */
    width: fit-content;
    min-width: 280px; /* Minimal lebar sedikit dikurangi */
    max-width: 380px; /* Tambah max-width agar tidak terlalu lebar di layar besar */
    color: #fff; /* Warna teks dasar */
    font-family: 'Inter', sans-serif;
    line-height: 1.1;
    box-sizing: border-box;
    position: relative;
    z-index: 1000;
    overflow: hidden; /* Pastikan tidak ada konten yang meluap */
}

/* Styling untuk judul tabel */
.image-data-container .table-title {
    background-color: rgba(0, 0, 0, 0.2); /* Latar belakang sedikit gelap untuk judul */
    color: #f0f9ff; /* Warna teks judul */
    font-weight: 700; /* Tebal */
    font-size: 1.2rem; /* Ukuran font judul */
    padding: 0.7rem 1rem; /* Padding judul */
    text-align: center; /* Teks di tengah */
    border-bottom: 1px solid rgba(255, 255, 255, 0.5); /* Garis bawah judul */
    border-top-left-radius: 0.6rem; /* Sudut sedikit melengkung di atas kiri */
    border-top-right-radius: 0.6rem; /* Sudut sedikit melengkung di atas kanan */
    /* Pastikan border kiri dan kanan sesuai dengan sel di bawahnya */
    border-left: 1px solid rgba(255, 255, 255, 0.4);
    border-right: 1px solid rgba(255, 255, 255, 0.4);
    /* Untuk menyatukan border dengan container */
    margin-top: -1px; /* Tumpuk border atas dengan border container */

    /* Styling Flexbox untuk centering dan dekorasi */
    display: flex;
    justify-content: center; /* Memastikan konten di tengah secara horizontal */
    align-items: center; /* Memastikan ikon dan teks sejajar secara vertikal */
    gap: 0.5rem; /* Jarak antara ikon dan teks */
}

/* Styling untuk ikon dekorasi di judul */
.image-data-container .table-title .title-icon {
    color: #ffd700; /* Warna kuning emas untuk ikon bintang */
    font-size: 0.9em; /* Ukuran ikon lebih kecil dari teks judul, relatif terhadap teks */
    text-shadow: 0px 0px 5px rgba(255, 215, 0, 0.5); /* Bayangan lembut untuk efek kilauan */
}

/* Styling untuk setiap "sel" tabel */
/* Kelas Tailwind 'flex items-center text-white text-xl md:text-2xl font-semibold' akan tetap berlaku */
.image-data-container .table-cell {
    display: flex;
    align-items: center;
    /* Menimpa atau menyesuaikan padding bawaan Tailwind jika ada konflik */
    padding: 0.8rem 1rem; /* Padding di dalam setiap sel, sesuaikan jika terlalu mepet/renggang */
    border-bottom: 1px solid rgba(255, 255, 255, 0.4); /* Garis bawah */
    border-left: 1px solid rgba(255, 255, 255, 0.4); /* Garis kiri */
    border-right: 1px solid rgba(255, 255, 255, 0.4); /* Garis kanan */
    white-space: nowrap; /* Penting agar teks tidak pecah baris */

    /* Kunci untuk membuat garis menyatu: margin negatif */
    margin-top: -1px; /* Menumpuk border atas sel ini dengan border bawah sel sebelumnya */
}

/* Hilangkan border bawah pada sel terakhir */
.image-data-container .table-cell:last-child {
    border-bottom: none;
    margin-bottom: 0; /* Pastikan tidak ada margin bawah tambahan */
}

/* Pastikan sel pertama (setelah judul) tidak punya border atas ganda */
/* Ini menargetkan div pertama yang memiliki kelas 'table-cell' */
.image-data-container .table-cell:first-of-type {
    border-top: none;
}

/* Styling untuk ikon di dalam sel */
.image-data-container .table-cell i {
    /* Tailwind mengontrol ukuran font ikon (text-2xl, md:text-3xl), jadi kita hanya mengatur margin-right jika perlu */
    margin-right: 0.7rem; /* Jarak ikon ke teks sedikit lebih lebar */
    /* Warna ikon sudah diatur oleh text-purple-300 di HTML */
    flex-shrink: 0; /* Pastikan ikon tidak mengecil saat ruang terbatas */
    text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2); /* Bayangan untuk ikon sel */
}

/* Styling untuk teks utama (misal: "GAME:", "USER:") */
.image-data-container .table-cell span {
    /* Tailwind mengontrol ukuran font span (text-xl, md:text-2xl), jadi kita tidak perlu menimpa font-size */
    overflow: hidden; /* Sembunyikan teks yang meluap */
    text-overflow: ellipsis; /* Tambahkan elipsis (...) jika teks terlalu panjang */
    /* Warna teks sudah diatur oleh text-white dan text-purple-100 di HTML */
    font-weight: 600; /* Konsisten dengan font-semibold Tailwind */
    text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.15); /* Bayangan untuk teks sel */
}

/* Styling untuk nilai data yang bold (misal: "WL", "ContohKey") */
/* Kelas .font-bold sudah ada di HTML */
.image-data-container span .font-bold {
    font-weight: 700; /* Konsisten dengan font-bold Tailwind */
    color: #f0f9ff; /* Warna putih kebiruan untuk teks bold */
    text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.25); /* Bayangan untuk teks bold */
}

/* Styling untuk label "EXPIRED" yang keren */
.expired-label {
    display: inline-block; /* Penting agar padding dan background bekerja */
    background-color: #ef4444; /* Warna merah yang kuat (seperti bg-red-500 Tailwind) */
    color: #fff; /* Teks putih */
    font-weight: 700; /* Tebal */
    padding: 0 0.7rem; /* Hapus padding vertikal di sini, akan diatur oleh height dan line-height */
    height: 1.5em; /* Atur tinggi label secara eksplisit (misal: 1.5 kali ukuran font induknya) */
    line-height: 1.5em; /* Atur line-height sama dengan height untuk pemusatan vertikal teks */
    border-radius: 0.375rem; /* Sudut melengkung (seperti rounded-md Tailwind) */
    text-transform: uppercase; /* Huruf kapital semua */
    font-size: 0.8em; /* Ukuran font sedikit lebih kecil dari teks di sekitarnya */
    letter-spacing: 0.05em; /* Sedikit spasi antar huruf */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Bayangan kecil agar menonjol */
    transition: background-color 0.3s ease; /* Transisi halus saat hover (opsional) */
    vertical-align: middle; /* Membantu memastikan label sejajar secara vertikal */
    box-sizing: border-box; /* Memastikan padding tidak menambah lebar/tinggi elemen */
    text-align: center; /* Memastikan teks di tengah horizontal */
}

/* Optional: Sedikit efek saat di-hover (jika mouse bisa interaksi) */
.expired-label:hover {
    background-color: #dc2626; /* Merah sedikit lebih gelap saat hover */
}

/* Penyesuaian responsif untuk layar lebih besar (breakpoint 'md' di Tailwind: 768px) */
@media (min-width: 768px) {
    .image-data-container {
        min-width: 320px;
        max-width: 420px;
    }
    .image-data-container .table-title {
        font-size: 1.4rem; /* Ukuran font judul di layar besar */
        padding: 0.9rem 1.2rem;
    }
    .image-data-container .table-title .title-icon {
        font-size: 1em; /* Ukuran ikon menyesuaikan teks judul di layar besar */
    }
    .image-data-container .table-cell {
        padding: 1rem 1.2rem; /* Padding sel di layar besar */
    }
    .expired-label {
        font-size: 0.85em; /* Ukuran font label di layar besar */
        height: 1.6em; /* Sesuaikan tinggi di layar besar jika perlu */
        line-height: 1.6em;
        padding: 0 0.8rem; /* Pertahankan padding horizontal */
    }
    /* Ukuran ikon dan teks di dalam sel sudah diatur oleh kelas md:text-xl/2xl/3xl di HTML,
       jadi tidak perlu menimpa di CSS ini kecuali ada kebutuhan spesifik. */
}