/* --- CSS GLOBAL RESET --- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0; 
    padding: 0; 
}

@font-face {
    font-family: 'Race Sport';
    src: url('Race Sport.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap; 
}

/* ⭐️ WARNA FINAL: Deep Dark Gray/Blue Tone */
:root {
    --color-background: #1C1C22; /* Background gelap */
    --color-card: #282A36; /* Warna panel/card */
    --color-text-light: #E0E0E0; /* Teks utama */
    --color-text-dark: #A9ABB6; /* Teks sekunder/label */
    --color-primary: #50FA7B; /* Hijau Terang (Aksen Utama & Success) */
    --color-upload-accent: #FFD369; /* Kuning/Gold untuk Tombol Upload */
    --color-danger: #FF5555; /* Merah */
    --color-success: #50FA7B; 
    --color-hover: #3C3E4F; /* Warna hover/border/latar belakang sub-judul */
    --border-radius: 8px;
}

/* Gaya Dasar */
body {
    background-color: var(--color-background);
    color: var(--color-text-dark);
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

.container {
    max-width: 1200px; 
    margin: 30px auto;
    padding: 0 20px;
}

/* Header */
.header {
    background-color: var(--color-card);
    color: var(--color-primary);
    padding: 20px 0;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.header h1 {
    margin: 0;
    font-size: 1.8rem;
    color: var(--color-text-light);
}

/* --- Layout dan FIX SCALING CANVAS --- */
.main-layout {
    display: flex;
    gap: 30px;
    align-items: flex-start; 
}

.canvas-col {
    /* Standardisasi Ukuran Canvas */
    max-width: 450px; 
    flex: none; 
    width: 100%;
    margin: 0 auto; 
}

#canvasContainer {
    overflow: hidden; 
    border-radius: 10px;
}

.controls-col {
    flex: 3; 
    display: flex;
    flex-direction: column;
    gap: 20px;
}


/* Card Styling */
.card {
    background-color: var(--color-card);
    padding: 20px;
    border-radius: var(--border-radius);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    border: 1px solid var(--color-hover); 
}

/* Latar Belakang Judul Card Modern */
.card-title {
    color: var(--color-text-light);
    font-size: 1.3rem;
    background-color: rgba(0, 0, 0, 0.2); 
    padding: 10px 20px; 
    margin: -20px -20px 15px -20px; 
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
    border-bottom: 1px dashed var(--color-hover);
}

/* CARD FOOTER GELAP */
.card-footer {
    background-color: var(--color-card); 
    color: var(--color-text-light); 
    padding: 15px 0 0 0; 
    margin-top: 15px;
    margin-bottom: 0;
    border-top: 1px solid var(--color-hover); 
    border-radius: 0; 
    box-shadow: none; 
    text-align: center;
}

/* Form Elements */
.form-group {
    margin-bottom: 15px;
}

.form-group-inline {
    display: flex;
    gap: 15px;
}

.form-group-inline .form-group {
    flex: 1;
}

label {
    display: block;
    margin-bottom: 5px;
    color: var(--color-text-light);
    font-size: 0.9rem;
    font-weight: bold;
}

/* Input Background (Kontras) */
input[type="text"],
input[type="number"],
select,
input[type="file"] {
    width: 100%;
    padding: 12px; 
    margin-top: 5px;
    border-radius: 5px;
    border: 1px solid var(--color-hover);
    background-color: #3e3e3e; /* Latar Belakang Input yang lebih kontras */
    color: var(--color-text-light);
    box-sizing: border-box;
    transition: border-color 0.2s;
    font-size: 1rem;
}

input[type="text"]:focus,
input[type="number"]:focus,
select:focus {
    border-color: var(--color-primary);
    outline: none;
    box-shadow: 0 0 5px rgba(80, 250, 123, 0.3);
}

input[type="file"] {
    cursor: pointer;
    border: 1px dashed #777;
    background-color: #353535;
}


/* Latar Belakang Sub-judul Modern */
.subsection-title-main {
    color: var(--color-text-light);
    font-size: 1.15rem;
    font-weight: bold;
    background-color: var(--color-hover); 
    padding: 8px 10px;
    border-radius: 4px;
    margin-top: 15px;
    margin-bottom: 15px;
}

.subsection-title {
    color: var(--color-primary);
    font-size: 1.1rem;
    margin-top: 15px;
    margin-bottom: 10px;
    font-weight: bold;
}

.subsection-title-small {
    color: var(--color-text-light);
    font-size: 1.0rem;
    margin-top: 5px;
    margin-bottom: 10px;
}


/* TOMBOL UMUM */
.btn {
    padding: 12px 18px; 
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    font-size: 1rem; 
    transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3); 
}

.btn:hover {
    transform: translateY(-2px); 
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5); 
}

.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-background);
}

.btn-primary:hover {
    background-color: #70ff9c; 
}

.btn-primary-full {
    background-color: var(--color-primary);
    color: var(--color-background);
    width: 100%;
    margin-top: 10px;
    padding: 14px 20px;
    font-size: 1.1rem;
}

.btn-success {
    background-color: var(--color-primary); 
    color: var(--color-background);
    padding: 14px 25px;
    font-size: 1.1rem;
}

.btn-success:hover {
    background-color: #70ff9c;
}

.btn-danger-outline {
    background: none;
    color: var(--color-danger);
    border: 2px solid var(--color-danger); 
    box-shadow: none; 
}

.btn-danger-outline:hover {
    background-color: rgba(255, 85, 85, 0.1);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(255, 85, 85, 0.2);
}

.action-group {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.action-group button {
    flex: 1;
}

.text-center-or {
    text-align: center;
    color: #888;
    margin: 15px 0;
    font-style: italic;
    font-size: 0.9rem;
}

/* GAYA TOMBOL UPLOAD MODERN (Link ke upload.html) */
.btn-upload-modern {
    display: block;
    width: 100%;
    padding: 12px;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    border-radius: var(--border-radius);
    
    background-color: var(--color-card); 
    color: var(--color-upload-accent); 
    border: 1px solid var(--color-upload-accent); 
    
    transition: all 0.3s ease-in-out;
    box-shadow: 0 0 5px rgba(255, 211, 105, 0.5); 
}

.btn-upload-modern:hover {
    background-color: var(--color-upload-accent); 
    color: var(--color-background); 
    box-shadow: 0 0 10px rgba(255, 211, 105, 0.8);
    transform: translateY(-1px);
}

/* GAYA TOMBOL KEMBALI DENGAN IKON (Untuk upload.html) */
.btn-back-dashboard {
    background-color: var(--color-hover);
    color: var(--color-primary); 
    padding: 10px 15px;
    border-radius: var(--border-radius);
    text-decoration: none;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--color-hover);
    transition: background-color 0.2s, transform 0.1s, color 0.2s;
}

.btn-back-dashboard:hover {
    background-color: var(--color-card);
    color: var(--color-text-light); 
    transform: translateY(-1px);
    border-color: var(--color-primary);
}


/* GAYA LIST DATABASE (Interaktif & Smooth) */

.database-list-container {
    height: 250px; 
    overflow-y: auto;
    border: 1px solid var(--color-hover); 
    border-radius: var(--border-radius);
    background-color: var(--color-background); 
    padding: 10px; 
    margin-top: 5px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3); 
}

.db-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    padding: 10px 15px; 
    margin-bottom: 8px; 
    border-radius: 6px; 
    cursor: pointer;
    
    background-color: var(--color-card); 
    color: var(--color-text-light);
    
    transition: all 0.3s ease-in-out; 
    
    border: 1px solid var(--color-hover);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.db-list-item:hover {
    background-color: var(--color-hover);
    transform: translateY(-2px); 
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5); 
}

.db-list-item.selected {
    background-color: var(--color-hover);
    color: var(--color-primary); 
    font-weight: bold;
    transform: none; 
    
    border: 1px solid var(--color-primary); 
    box-shadow: 0 0 15px rgba(80, 250, 123, 0.4), 
                -5px 0 0 0 var(--color-primary) inset;
}

.delete-btn {
    background-color: var(--color-danger);
    color: white;
    border: none;
    border-radius: 4px;
    padding: 5px 8px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: background-color 0.2s;
    line-height: 1; 
    white-space: nowrap;
}

.delete-btn:hover {
    background-color: #c0392b; 
}


/* --- ⭐️ REVISI GAYA MODAL SUKSES ⭐️ --- */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Background lebih gelap */
    display: none; 
    z-index: 1000; 
    align-items: center; 
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.modal-overlay.active {
    display: flex;
    opacity: 1;
}

.modal-content {
    background-color: var(--color-card);
    padding: 30px;
    border-radius: var(--border-radius);
    width: 90%;
    max-width: 400px; 
    text-align: center;
    
    /* Tambahkan glow sukses */
    box-shadow: 0 0 20px rgba(80, 250, 123, 0.5); 
    transform: translateY(-20px); 
    animation: modal-pop 0.3s forwards;
    border: 2px solid var(--color-success); 
}

.success-icon {
    font-size: 4rem; /* Ikon lebih besar */
    color: var(--color-success);
    margin-bottom: 15px;
    /* Tambahkan bayangan ke ikon */
    text-shadow: 0 0 10px rgba(80, 250, 123, 0.8);
}

.modal-title {
    color: var(--color-primary); /* Judul menggunakan warna aksen */
    margin-bottom: 10px;
    font-size: 1.8rem;
}

.modal-message {
    color: var(--color-text-light);
    margin-bottom: 20px;
}

.close-modal-btn {
    margin-top: 20px !important;
    width: auto !important;
    /* Menggunakan gaya btn-primary yang sudah ada */
    background-color: var(--color-primary); 
    color: var(--color-background); 
}

@keyframes modal-pop {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* --- RESPONSIVENESS --- */

@media (max-width: 900px) {
    .main-layout {
        flex-direction: column;
    }

    .canvas-col,
    .controls-col {
        flex: none;
        width: 100%;
        min-width: unset;
    }
}
/* --- CSS UNTUK STATUS TERPAKAI (USED) --- */
.db-list-item.used {
    background-color: #2c2c2c; /* Warna lebih gelap */
    opacity: 0.6;
    cursor: not-allowed; /* Kursor tanda larang */
    pointer-events: none; /* Mencegah klik */
    border: 1px solid #444;
}

.db-list-item.used .db-list-item-name {
    color: #888;
    text-decoration: line-through;
}

.badge-used {
    background-color: #555;
    color: #fff;
    font-size: 0.75rem;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 8px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
/* --- SIMPLE MODERN MODAL STYLES --- */

/* 1. Overlay Minimalis */
.simple-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Gelap transparan */
    backdrop-filter: blur(4px); /* Blur halus */
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.simple-overlay.active {
    display: flex;
    opacity: 1;
}

/* 2. Kartu Modal Bersih */
.simple-modal {
    background-color: var(--color-card); /* Mengikuti tema gelap */
    padding: 30px;
    border-radius: 16px; /* Sudut membulat modern */
    width: 90%;
    max-width: 320px;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transform: scale(0.95);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.simple-overlay.active .simple-modal {
    transform: scale(1);
}

/* 3. Ikon Centang Modern */
.simple-icon-wrapper {
    width: 60px;
    height: 60px;
    background-color: rgba(80, 250, 123, 0.15); /* Hijau transparan */
    color: var(--color-success);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px auto;
    font-size: 1.5rem;
}

/* 4. Tipografi */
.simple-title {
    color: var(--color-text-light);
    font-size: 1.25rem;
    margin-bottom: 8px;
    font-weight: 600;
}

.simple-desc {
    color: var(--color-text-dark);
    font-size: 0.95rem;
    margin-bottom: 25px;
    line-height: 1.5;
}

/* 5. Tombol Minimalis */
.btn-simple-primary {
    width: 100%;
    background-color: var(--color-primary);
    color: #1C1C22; /* Teks gelap agar kontras */
    border: none;
    padding: 12px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
}

.btn-simple-primary:hover {
    background-color: #45e06f; /* Sedikit lebih gelap saat hover */
    transform: translateY(-1px);
}
/* --- VISUAL DUPLIKAT / WARNING --- */

/* Warna Peringatan */
.simple-icon-wrapper.warning {
    background-color: rgba(255, 193, 7, 0.15); /* Kuning Transparan */
    color: #FFC107; /* Warna Kuning Emas */
}

.btn-simple-primary.warning {
    background-color: #FFC107;
    color: #000;
}

.btn-simple-primary.warning:hover {
    background-color: #ffca2c;
}

/* List item di dalam modal jika duplikat banyak */
.duplicate-list {
    text-align: left;
    background: rgba(255, 255, 255, 0.05);
    padding: 10px;
    border-radius: 6px;
    margin-bottom: 15px;
    font-size: 0.85rem;
    color: #FFC107;
    max-height: 100px;
    overflow-y: auto;
    border: 1px dashed #FFC107;
}

.duplicate-list ul {
    margin: 0;
    padding-left: 20px;
}
/* --- FLOATING DROPDOWN SEARCH --- */

/* Wadah utama harus relative agar dropdown posisinya akurat */
.search-wrapper {
    position: relative;
}

/* Input Styles */
#dbSearchInput {
    border: 1px solid var(--color-hover);
    background-color: #2a2a35;
    transition: all 0.3s;
}

#dbSearchInput:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 10px rgba(80, 250, 123, 0.2);
}

/* ⭐️ DROPDOWN MELAYANG (Kunci agar tidak geser layout) ⭐️ */
.dropdown-results {
    position: absolute;
    top: 100%; /* Muncul tepat di bawah input */
    left: 0;
    width: 100%;
    max-height: 250px; /* Tinggi maksimal sebelum scroll */
    overflow-y: auto; /* Scroll jika hasil banyak */
    
    background-color: #212129; /* Warna background gelap solid */
    border: 1px solid var(--color-primary);
    border-top: none;
    border-radius: 0 0 8px 8px;
    
    z-index: 9999; /* Lapisan paling atas */
    display: none; /* Sembunyi default */
    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
}

/* Saat aktif (muncul) */
.dropdown-results.show {
    display: block;
}

/* Item di dalam dropdown */
.dropdown-item {
    padding: 10px 15px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.2s;
    color: var(--color-text-light);
}

.dropdown-item:hover {
    background-color: var(--color-hover);
    color: var(--color-primary);
}

/* Item Terpakai (Used) */
.dropdown-item.used {
    background-color: rgba(30, 30, 30, 0.8);
    color: #777;
}

.dropdown-item.no-result {
    padding: 15px;
    text-align: center;
    color: #777;
    font-style: italic;
    cursor: default;
}

/* Scrollbar cantik untuk dropdown */
.dropdown-results::-webkit-scrollbar {
    width: 6px;
}
.dropdown-results::-webkit-scrollbar-track {
    background: #1C1C22;
}
.dropdown-results::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 3px;
}
/* --- LAYOUT REVISI: 3 KOLOM SIMPEL MODERN --- */

.main-layout {
    display: flex;
    /* Memberi jarak yang lebih merata antar kolom */
    gap: 20px; 
    align-items: flex-start; 
}

.canvas-col {
    /* Canvas: Tetap lebar kecil/medium, misal 35% */
    max-width: 400px; 
    flex: 0 0 35%; 
    width: 100%;
    margin: 0;
    padding: 0; 
    background: none; 
    box-shadow: none; 
    border: none; 
}

/* Mengatur ulang card-footer di canvas-col */
.canvas-col .card-footer {
    background-color: var(--color-card); 
    border-radius: var(--border-radius);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    border: 1px solid var(--color-hover); 
    padding: 15px;
    margin: 10px 0 0 0;
}

/* Kolom Kontrol Tengah & Kanan */
.mid-controls-col {
    flex: 1; 
    min-width: 250px;
    display: flex;
    flex-direction: column;
    gap: 20px; /* Jarak antar Card di kolom tengah */
}

.db-col {
    flex: 1; /* Sama besar dengan kolom tengah */
    min-width: 250px;
}

/* --- REVISI GAYA LIST DATABASE (Simple & Modern) --- */

.database-list-container {
    height: 300px; /* Tinggi statis agar tidak mengubah layout */
    overflow-y: auto;
    border: 1px solid var(--color-hover); 
    border-radius: var(--border-radius);
    background-color: var(--color-background); 
    padding: 10px; 
    margin-top: 10px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3); 
}

/* Gaya Item List */
.db-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px; 
    margin-bottom: 5px; 
    border-radius: 4px; 
    cursor: pointer;
    background-color: #313340; 
    color: var(--color-text-light);
    transition: all 0.2s; 
    border: 1px solid transparent; 
    box-shadow: none;
}

.db-list-item:hover {
    background-color: var(--color-hover);
    transform: translateY(-1px); 
}

.db-list-item.selected {
    background-color: var(--color-hover);
    color: var(--color-primary); 
    font-weight: bold;
    border: 1px solid var(--color-primary); 
    box-shadow: 0 0 10px rgba(80, 250, 123, 0.3);
}

/* Badge USED (Simple) */
.badge-used {
    background-color: #444; 
    color: #A9ABB6;
    font-size: 0.7em;
    padding: 2px 5px;
    border-radius: 3px;
    margin-left: 8px;
    text-transform: uppercase;
    font-weight: normal;
}

/* Media Query untuk Mobile (Kembalikan ke satu kolom) */
@media (max-width: 1000px) { 
    .main-layout {
        flex-direction: column;
        gap: 20px;
    }

    .canvas-col,
    .mid-controls-col,
    .db-col {
        flex: none;
        width: 100%;
        max-width: 100%;
        min-width: unset;
    }
    
    .canvas-col {
        padding: 20px;
        background-color: var(--color-card);
    }
}
/* --- LAYOUT KHUSUS UPLOAD.HTML --- */
.upload-layout {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

.upload-card {
    flex: 1;
    max-width: 600px; /* Batasan lebar form upload */
    min-width: 300px;
}

.database-card {
    flex: 1;
    min-width: 300px;
}

/* Menggunakan gaya list dari dashboard, tapi menyesuaikan tingginya */
.database-list-container.upload-view {
    height: 450px; /* Lebih tinggi agar bisa menampilkan banyak data */
    overflow-y: auto;
    border: 1px solid var(--color-hover); 
    border-radius: var(--border-radius);
    background-color: var(--color-background); 
    padding: 10px; 
    margin-top: 15px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3); 
}

/* Responsiveness for upload.html */
@media (max-width: 900px) {
    .upload-layout {
        flex-direction: column;
    }
    .upload-card,
    .database-card {
        max-width: 100%;
        min-width: unset;
    }
    
    /* Perbaikan button delete all */
    .database-card .card-footer button {
        margin-top: 10px;
        float: none !important;
        width: 100%;
    }
}

/* Status Duplikat/Warning (Mengambil dari revisi sebelumnya) */
.file-status-warning {
    color: #FFC107 !important; /* Kuning Peringatan */
}

.file-status-error {
    color: #FF5555 !important; /* Merah Error */
}
/* --- ⭐️ SIMPLE MODERN MODAL STYLES (Dipakai oleh upload.js) ⭐️ --- */

/* 1. Overlay (Latar Belakang Blur) */
.simple-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6); 
    backdrop-filter: blur(4px); 
    display: none; 
    justify-content: center; 
    align-items: center; 
    z-index: 9999;
    opacity: 0; 
    transition: opacity 0.3s ease;
}

.simple-overlay.active { 
    display: flex; 
    opacity: 1; 
}

/* 2. Kartu Modal (Pusat Pop-up) */
.simple-modal {
    background-color: var(--color-card); 
    padding: 30px; 
    border-radius: 16px; 
    width: 90%; 
    max-width: 380px; 
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4); 
    border: 1px solid rgba(255, 255, 255, 0.05);
    transform: scale(0.95); 
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.simple-overlay.active .simple-modal { 
    transform: scale(1); 
}

/* 3. Icon Wrapper (Indikator Status) */
.simple-icon-wrapper {
    width: 60px; height: 60px; 
    background-color: rgba(80, 250, 123, 0.15); /* Hijau transparan */
    color: var(--color-success);
    border-radius: 50%; 
    display: flex;
    align-items: center; justify-content: center; 
    margin: 0 auto 20px auto;
    font-size: 1.5rem;
}

/* Gaya Ikon untuk Warning (Duplikat/Sebagian Berhasil) */
.simple-icon-wrapper.warning {
    background-color: rgba(255, 193, 7, 0.15); 
    color: #FFC107; /* Kuning Emas */
}

/* 4. Tipografi dan Konten */
.simple-title { 
    color: var(--color-text-light); 
    font-size: 1.25rem; 
    margin-bottom: 8px; 
    font-weight: 600; 
}
.simple-desc { 
    color: var(--color-text-dark); 
    font-size: 0.95rem; 
    margin-bottom: 25px; 
    line-height: 1.5; 
}

/* 5. Tombol Aksi */
.btn-simple-primary {
    width: 100%; 
    background-color: var(--color-primary); 
    color: #1C1C22; 
    border: none; 
    padding: 12px; 
    border-radius: 8px; 
    font-size: 1rem;
    font-weight: bold; 
    cursor: pointer; 
    transition: all 0.2s;
}

/* Gaya Tombol untuk Warning */
.btn-simple-primary.warning {
    background-color: #FFC107; 
    color: #000;
}

.btn-simple-primary:hover { 
    transform: translateY(-1px); 
}
/* --- TOAST NOTIFICATION STYLES (Untuk Hapus & Error Cepat) --- */

/* Wadah toast harus berada di lapisan atas dan tidak mengganggu klik */
#toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    pointer-events: none; /* Awalnya tidak dapat diklik */
}

.toast {
    background-color: var(--color-card);
    color: var(--color-text-light);
    padding: 15px 20px;
    border-radius: var(--border-radius);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    margin-bottom: 10px;
    opacity: 0;
    transform: translateX(100%); /* Sembunyi ke kanan */
    transition: all 0.4s ease-out;
    display: flex;
    align-items: center;
    border-left: 5px solid;
    pointer-events: auto; /* Aktifkan klik saat Toast muncul */
}

.toast.show {
    opacity: 1;
    transform: translateX(0); /* Muncul */
}

.toast i {
    font-size: 1.5rem;
    margin-right: 15px;
}

.toast-content {
    display: flex;
    flex-direction: column;
}

.toast-title {
    font-weight: bold;
    margin-bottom: 2px;
}

/* Tipe Toast */
.toast-success {
    border-left-color: var(--color-primary);
    background-color: #283a3d; /* Background yang sedikit berbeda */
}

.toast-danger {
    border-left-color: var(--color-danger);
    background-color: #3d2828;
}

.toast-warning {
    border-left-color: #FFC107;
    background-color: #3d3b28;
}
/* --- Tambahan Gaya untuk Modal Konfirmasi Hapus (Danger) --- */

/* Gaya Ikon untuk Konfirmasi Danger (Hapus) */
.simple-icon-wrapper.danger-confirm {
    background-color: rgba(255, 85, 85, 0.15); /* Merah transparan */
    color: var(--color-danger); /* Merah */
}

/* Gaya Teks Danger */
.danger-text {
    color: var(--color-danger) !important;
}

/* Gaya Tombol Danger (Latar Belakang Merah) */
.btn-simple-primary.danger-bg {
    background-color: var(--color-danger) !important;
    color: var(--color-text-light) !important;
}
/* --- ACCORDION / FOLDER STYLES (Untuk upload.js) --- */

.database-list-container.upload-view {
    height: 450px; 
    overflow-y: auto;
    border: 1px solid var(--color-hover); 
    border-radius: var(--border-radius);
    background-color: var(--color-background); 
    padding: 0; 
    margin-top: 15px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3); 
}

/* Header Folder (Tombol Accordion) */
.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    cursor: pointer;
    background-color: var(--color-card);
    border-bottom: 1px solid #3c3e4f;
    user-select: none;
    transition: background-color 0.2s;
    font-weight: bold;
    color: var(--color-text-light);
}

.accordion-header:hover {
    background-color: var(--color-hover);
}

.accordion-header.active {
    background-color: #3c3e4f;
    color: var(--color-primary);
}

.folder-name {
    display: flex;
    align-items: center;
    gap: 10px;
}

.folder-count {
    font-size: 0.8rem;
    color: var(--color-text-dark);
}

.accordion-icon {
    transition: transform 0.3s;
}

.accordion-header.active .accordion-icon {
    transform: rotate(180deg);
}

/* Body Accordion (Konten Skin) */
.accordion-body {
    display: none; /* Default sembunyi */
    padding: 5px 0;
    background-color: #212129; /* Warna sedikit lebih gelap dari header */
}

.accordion-body.active {
    display: block; /* Tampilkan saat aktif */
}

/* Item di dalam folder */
.accordion-body .db-list-item {
    padding: 8px 15px;
    margin: 0;
    border-radius: 0;
    background-color: transparent;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.05);
}

.accordion-body .db-list-item:hover {
    background-color: rgba(80, 250, 123, 0.05); /* Hijau transparan */
    transform: none;
}
/* style.css (Tambahkan di bagian akhir) */

/* --- ⭐️ GAYA PREVIEW SKIN BARU ⭐️ --- */

.skin-preview-container {
    height: 150px; /* Tinggi tetap untuk preview */
    margin-bottom: 15px;
    border: 1px solid var(--color-hover);
    border-radius: var(--border-radius);
    background-color: #1C1C22; /* Warna latar belakang gelap */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}

.skin-preview-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Memastikan gambar pas tanpa terpotong */
    border-radius: 6px;
}

/* Mengatur ulang tinggi list container agar tidak terdorong oleh preview */
.database-list-container {
    /* Mengurangi tinggi karena ada preview di atasnya */
    max-height: 150px !important; 
    height: 150px;
}