/* --- Styling Khusus untuk Form Admin dan Publik (form.css) --- */
/* Container Utama Form */
.admin-panel-container, .submit-product-container {
    max-width: 800px; /* Lebar maksimal form */
    margin: 30px auto;
    padding: 30px;
    background-color: #F8F5EE; /* Krem Lebih Gelap */
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    /* text-align: center; */ /* Hapus atau override jika tidak ingin konten form di tengah */
}

.admin-panel-container h2, .submit-product-container h2 {
    color: #4A312A; /* Cokelat Tua */
    margin-bottom: 25px;
    font-size: 2em;
    text-align: center;
}

.admin-panel-container h3 { /* Judul bagian dalam admin panel */
    color: #4A312A; /* Cokelat Tua */
    margin-top: 40px;
    margin-bottom: 20px;
    border-bottom: 2px solid #8B4513; /* Cokelat Sedang */
    padding-bottom: 5px;
    display: inline-block;
}

/* Tombol Kembali ke Dashboard */
.admin-panel-container .back-to-dashboard-btn {
    background-color: #795548; /* Cokelat Gelap */
    float: left; /* Biarkan float, atau gunakan flexbox di parent */
    margin-top: -50px; /* Sesuaikan agar sejajar judul */
    padding: 8px 15px;
    border-radius: 8px;
    text-decoration: none;
    color: white;
    font-weight: bold;
    font-size: 0.9em;
    transition: background-color 0.3s ease;
}

.admin-panel-container .back-to-dashboard-btn:hover {
    background-color: #5D4037; /* Cokelat Lebih Gelap */
}

/* Pesan Sukses/Error */
.message {
    margin-top: 20px;
    padding: 10px;
    border-radius: 8px;
    font-weight: bold;
    text-align: center;
}

.success {
    background-color: #d4edda; /* Tetap hijau muda */
    color: #155724; /* Tetap hijau gelap */
    border: 1px solid #c3e6cb;
}

.error {
    background-color: #f8d7da; /* Tetap merah muda */
    color: #721c24; /* Tetap merah gelap */
    border: 1px solid #f5c6cb;
}

/* Form Group Layout */
form {
    display: grid;
    grid-template-columns: 1fr; /* Default 1 kolom untuk form */
    gap: 20px; /* Jarak antar grup form */
}

.form-group {
    margin-bottom: 0; /* Jarak sudah diatur oleh grid gap */
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    color: #5D4037; /* Cokelat Medium Gelap */
    font-weight: 600;
    text-align: left;
}

/* Perubahan di SINI: Atur tinggi eksplisit untuk input dan select */
.form-group input[type="text"],
.form-group input[type="number"],
.form-group select { /* Select2 akan menimpa ini, tapi ini untuk native select */
    width: 100%; /* Lebar penuh dalam form-group */
    padding: 12px 10px !important; /* Ditambahkan !important */
    border: 1px solid #D2B48C; /* Cokelat Pasir */
    border-radius: 8px;
    font-size: 1em;
    box-sizing: border-box; /* Pastikan padding masuk dalam lebar */
    height: 45px !important; /* Ditambahkan !important */
}

.form-group textarea {
    resize: vertical; /* Hanya bisa resize vertikal */
    min-height: 120px;
    width: 100%; /* Pastikan lebar penuh */
    padding: 10px !important; /* Ditambahkan !important */
    border: 1px solid #D2B48C; /* Cokelat Pasir */
    border-radius: 8px;
    font-size: 1em;
    box-sizing: border-box;
}

.form-group small {
    display: block;
    margin-top: 5px;
    color: #8D6E63; /* Cokelat terang */
    font-size: 0.85em;
    text-align: left;
}

/* Tombol Submit */
.submit-button {
    padding: 12px 25px;
    background-color: #8B4513; /* Cokelat Sedang */
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    width: auto;
    justify-self: stretch; /* Agar tombol memenuhi lebar kolom */
    text-align: center; /* Teks di tengah tombol */
}

.submit-button:hover {
    background-color: #6F360F; /* Cokelat Lebih Gelap */
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* --- Styling untuk Upload Gambar (Box Shopee Style) --- */
.upload-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px dashed #A08362; /* Cokelat Medium */
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    min-height: 120px;
    background-color: #FFF8E1; /* Krem Lebih Terang */
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.upload-zone:hover {
    background-color: #F8F5EE; /* Krem lebih gelap */
    border-color: #8B4513; /* Cokelat Sedang */
}

.upload-zone.dragover { /* Gaya saat drag file di atas area */
    background-color: #EFEBE9; /* Cokelat Sangat Terang */
    border-color: #8B4513; /* Cokelat Sedang */
}

.upload-zone i { /* Icon kamera */
    color: #4A312A; /* Cokelat Tua */
    margin-bottom: 10px;
}

.upload-zone p { /* Teks instruksi */
    margin: 0;
    color: #5D4037; /* Cokelat Medium Gelap */
}

.upload-zone .file-limit-text {
    font-size: 0.8em;
    color: #795548; /* Cokelat Gelap */
}

/* Container untuk preview gambar */
.image-preview-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 15px;
    border: 1px dashed #D2B48C; /* Cokelat Pasir */
    padding: 10px;
    border-radius: 8px;
    min-height: 100px;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    background-color: #fcfcfc;
}

.image-preview-container.empty-placeholder {
    justify-content: center;
}

.image-preview-container.empty-placeholder::before {
    content: 'Tidak ada gambar yang dipilih.';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #8D6E63; /* Cokelat Terang */
    font-style: italic;
    white-space: nowrap;
    font-size: 0.9em;
}

/* Setiap item preview gambar */
.image-preview-item {
    position: relative;
    width: 100px;
    height: 100px;
    border: 1px solid #8D6E63; /* Cokelat Terang */
    border-radius: 5px;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.image-preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.image-preview-item .remove-image {
    position: absolute;
    top: 2px;
    right: 2px;
    background-color: rgba(255, 0, 0, 0.7); /* Merah tetap */
    color: white;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 0.8em;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
    padding: 0;
    z-index: 2;
    transition: background-color 0.2s ease;
}

.image-preview-item .remove-image:hover {
    background-color: red;
}

/* Progress Bar untuk upload */
.upload-progress-container {
    width: 100%; /* Mengisi lebar penuh */
    background-color: #E0E0E0;
    border-radius: 5px;
    overflow: hidden;
    margin-top: 10px;
    height: 25px;
    position: relative;
}

.upload-progress-bar {
    height: 100%;
    background-color: #8B4513; /* Cokelat Sedang */
    width: 0%;
    text-align: center;
    line-height: 25px;
    color: white;
    transition: width 0.3s ease;
}

.upload-progress-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
    line-height: 25px;
    color: #3E2723; /* Cokelat Sangat Gelap */
    font-weight: bold;
}

/* --- Responsive Adjustments untuk Form --- */
@media (min-width: 600px) {
    form {
        grid-template-columns: 1fr 1fr; /* 2 kolom di layar lebar */
    }
    .form-group.full-width {
        grid-column: 1 / -1; /* Elemen ini memenuhi 2 kolom */
    }
    .submit-button {
        grid-column: 1 / -1; /* Tombol submit memenuhi 2 kolom */
        justify-self: center; /* Tengahkan tombol submit */
    }
    .upload-progress-container {
        width: 100%; /* Pastikan tetap 100% di dalam full-width grid */
    }
}

/* Admin Dashboard, List Tayang, List Verifikasi styles adjusted to new palette */
.admin-login-container {
    max-width: 400px;
    margin: 80px auto;
    padding: 30px;
    background-color: #F8F5EE; /* Krem Lebih Gelap */
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    text-align: center;
}
.admin-login-container h2 {
    color: #4A312A; /* Cokelat Tua */
    margin-bottom: 25px;
}
.admin-login-container label {
    display: block;
    text-align: left;
    margin-bottom: 8px;
    color: #5D4037; /* Cokelat Medium Gelap */
    font-weight: 600;
}
.admin-login-container input[type="text"],
.admin-login-container input[type="password"] {
    width: calc(100% - 24px); /* Kurangi padding */
    padding: 12px;
    margin-bottom: 20px;
    border: 1px solid #D2B48C; /* Cokelat Pasir */
    border-radius: 8px;
    font-size: 1em;
}
.admin-login-container button {
    width: 100%;
    padding: 12px;
    background-color: #8B4513; /* Cokelat Sedang */
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.admin-login-container button:hover {
    background-color: #6F360F; /* Cokelat Lebih Gelap */
}
.admin-login-container .error-message {
    color: #dc3545; /* Tetap merah */
    margin-top: 15px;
}

/* Admin Dashboard */
.admin-dashboard-container {
    max-width: 800px;
    margin: 50px auto;
    padding: 30px;
    background-color: #F8F5EE; /* Krem Lebih Gelap */
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    text-align: center;
}
.admin-dashboard-container h2 {
    color: #4A312A; /* Cokelat Tua */
    margin-bottom: 30px;
    font-size: 2.2em;
}
.admin-dashboard-container .logout-btn {
    background-color: #dc3545; /* Tetap merah */
    float: right;
    margin-top: -60px;
    padding: 8px 15px;
    border-radius: 8px;
    text-decoration: none;
    color: white;
    font-weight: bold;
    transition: background-color 0.3s ease;
}
.admin-dashboard-container .logout-btn:hover {
    background-color: #c82333;
}
.admin-menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 25px;
    margin-top: 40px;
}
.admin-menu-item {
    background-color: #EFEBE9; /* Cokelat Sangat Terang */
    border-radius: 15px;
    padding: 25px 15px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative; /* Untuk badge */
}
.admin-menu-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
.admin-menu-item a {
    text-decoration: none;
    color: #4A312A; /* Cokelat Tua */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}
.admin-menu-item .menu-icon {
    font-size: 3.5em;
    margin-bottom: 15px;
    color: #8B4513; /* Cokelat Sedang */
}
.admin-menu-item .menu-text {
    font-size: 1.2em;
    font-weight: 600;
    line-height: 1.3;
}
.admin-menu-item .notification-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #dc3545; /* Merah (tetap) */
    color: white;
    border-radius: 50%;
    padding: 5px 10px;
    font-size: 0.8em;
    font-weight: bold;
    min-width: 25px; /* Pastikan badge cukup lebar */
    height: 25px; /* Pastikan badge cukup tinggi */
    display: flex; /* Gunakan flexbox untuk menengahkan angka */
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    /* Pastikan angka di tengah badge */
    line-height: 1; /* Hapus atau atur ke 1 */
    box-sizing: border-box; /* Hitung padding dalam width/height */
}

/* Admin List Product Panel */
.admin-panel-container {
    max-width: 1000px;
    margin: 30px auto;
    padding: 30px;
    background-color: #F8F5EE; /* Krem Lebih Gelap */
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.admin-panel-container h2 {
    color: #4A312A; /* Cokelat Tua */
    margin-bottom: 25px;
    text-align: center;
}
.admin-panel-container h3 {
    color: #4A312A; /* Cokelat Tua */
    margin-top: 40px;
    margin-bottom: 20px;
    border-bottom: 2px solid #8B4513; /* Cokelat Sedang */
    padding-bottom: 5px;
    display: inline-block;
}
.admin-panel-container .back-to-dashboard-btn {
    background-color: #795548; /* Cokelat Gelap */
    float: left;
    margin-top: -50px;
    padding: 8px 10px;
    border-radius: 8px;
    text-decoration: none;
    color: white;
    font-weight: bold;
    font-size: 0.9em;
    transition: background-color 0.3s ease;
}
.admin-panel-container .back-to-dashboard-btn:hover {
    background-color: #5D4037; /* Cokelat Lebih Gelap */
}

/* Styling untuk product card di admin panel */
.admin-product-grid {
    display: grid;
    grid-template-columns: 1fr; /* Default 1 kolom untuk tampilan horizontal */
    gap: 15px;
    padding: 20px 0;
}
.admin-product-item {
    background-color: #FFFFFF;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    flex-direction: column;
    height: auto;
}
@media (min-width: 500px) {
    .admin-product-item {
        flex-direction: row;
    }
}
.admin-product-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.15);
}
.admin-product-item img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    flex-shrink: 0;
    border-radius: 10px 0 0 10px;
    margin-right: 15px;
}
@media (max-width: 499px) {
    .admin-product-item img {
        width: 100%;
        height: 180px;
        border-radius: 10px 10px 0 0;
        margin-right: 0;
        margin-bottom: 10px;
    }
}
.admin-product-item .product-content {
    flex-grow: 1;
    padding: 15px;
    display: flex;
    flex-direction: column;
    text-align: left;
    margin-bottom: 0;
}
.admin-product-item .product-name {
    font-size: 1.1em;
    margin: 0 0 5px 0;
    font-weight: 700;
    color: #3E2723; /* Cokelat Sangat Gelap */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.admin-product-item .product-price {
    font-size: 1.25em;
    color: #8B4513; /* Cokelat Sedang */
    font-weight: 800;
    margin: 5px 0;
}
.admin-product-item .product-location {
    font-size: 0.85em;
    color: #795548; /* Cokelat Gelap */
    margin: 0;
}
.admin-product-item .product-meta {
    font-size: 0.85em;
    color: #5D4037; /* Cokelat Medium Gelap */
    margin: 2px 0;
}
.admin-product-item .product-meta i {
    margin-right: 5px;
}
.admin-product-item .actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    border-top: 1px solid #eee;
    background-color: #fcfcfc;
    flex-wrap: wrap;
    flex-shrink: 0;
    position: relative;
    z-index: 15;
    width: 100%;
    box-sizing: border-box;
    margin-top: auto;
}
.admin-product-item .actions a, .admin-product-item .actions button {
    flex-grow: 1;
    padding: 6px 10px;
    font-size: 0.8em;
    font-weight: 600;
    border-radius: 6px;
    text-decoration: none;
    text-align: center;
    transition: background-color 0.3s ease;
    border: none;
    cursor: pointer;
    white-space: nowrap;
}
.admin-product-item .actions .preview-btn {
    background-color: #795548; /* Cokelat Gelap */
    color: white;
}
.admin-product-item .actions .preview-btn:hover {
    background-color: #5D4037; /* Cokelat Lebih Gelap */
}
.admin-product-item .actions .edit-btn {
    background-color: #8B4513; /* Cokelat Sedang */
    color: white;
}
.admin-product-item .actions .edit-btn:hover {
    background-color: #6F360F; /* Cokelat Lebih Gelap */
}
.admin-product-item .actions .delete-btn {
    background-color: #dc3545; /* Merah (tetap) */
    color: white;
}
.admin-product-item .actions .delete-btn:hover {
    background-color: #c82333;
}
.admin-product-item .actions .toggle-sold-btn {
    background-color: #28a745; /* Hijau (tetap) */
    color: white;
}
.admin-product-item .actions .toggle-sold-btn.is-sold-out {
    background-color: #ffc107; /* Kuning (tetap) */
    color: #333;
}
.admin-product-item .actions .toggle-sold-btn:hover {
    opacity: 0.9;
}
/* Tombol khusus Verifikasi/Tolak */
.admin-product-item .actions .verify-btn {
    background-color: #28a745; /* Hijau (tetap) */
    color: white;
}
.admin-product-item .actions .verify-btn:hover {
    background-color: #218838;
}
.admin-product-item .actions .reject-btn {
    background-color: #dc3545; /* Merah (tetap) */
    color: white;
}
.admin-product-item .actions .reject-btn:hover {
    background-color: #c82333;
}

/* Sold Out overlay untuk admin card */
.admin-product-item.sold-out-card {
    opacity: 0.7;
    filter: grayscale(50%);
}
.sold-out-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 120px; /* Lebar overlay sama dengan gambar */
    height: 120px; /* Tinggi overlay sama dengan gambar */
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    opacity: 1;
    transition: opacity 0.3s ease;
    border-radius: 10px 0 0 10px;
}
@media (max-width: 499px) {
    .sold-out-overlay {
        width: 100%;
        height: 180px;
        border-radius: 10px 10px 0 0;
    }
}
.admin-product-item.sold-out-card:hover .sold-out-overlay {
    opacity: 0.8;
}
.sold-out-text {
    color: white;
    font-size: 1.5em;
    font-weight: bold;
    text-transform: uppercase;
    border: 2px solid white;
    padding: 8px 15px;
    transform: rotate(-15deg);
    white-space: nowrap;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

/* --- Admin Search Form --- */
.admin-search-form {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.admin-search-form input[type="text"] {
    flex-grow: 1;
    padding: 8px 12px;
    border: 1px solid #D2B48C; /* Cokelat Pasir */
    border-radius: 8px;
    max-width: 300px;
}
.admin-search-form button {
    padding: 8px 15px;
    background-color: #8B4513; /* Cokelat Sedang */
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    flex-shrink: 0;
}
.admin-search-form button:hover {
    background-color: #6F360F; /* Cokelat Lebih Gelap */
}
.admin-search-form .button.clear-search-btn {
    background-color: #795548; /* Cokelat Gelap */
    color: white;
    padding: 8px 15px;
    border-radius: 8px;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.admin-search-form .button.clear-search-btn:hover {
    background-color: #5D4037; /* Cokelat Lebih Gelap */
}

/* --- Pagination Styling --- */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    gap: 5px;
    flex-wrap: wrap;
}
.pagination a, .pagination span {
    display: inline-block;
    padding: 8px 12px;
    border: 1px solid #D2B48C; /* Cokelat Pasir */
    border-radius: 5px;
    text-decoration: none;
    color: #4A312A; /* Cokelat Tua */
    background-color: #fff;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.pagination a:hover {
    background-color: #EFEBE9; /* Krem Terang */
}
.pagination span.current-page {
    background-color: #4A312A; /* Cokelat Tua */
    color: white;
    border-color: #4A312A; /* Cokelat Tua */
    font-weight: bold;
}
.pagination span.disabled {
    color: #A08360; /* Cokelat Medium */
    cursor: not-allowed;
    background-color: #FFF8E1; /* Krem Lebih Terang */
}

/* --- Bottom Navigation Bar Admin --- */
.bottom-nav-admin {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #4A312A; /* Cokelat Tua */
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 8px 0;
    box-shadow: 0 -3px 10px rgba(0,0,0,0.1);
    z-index: 1000;
}
.bottom-nav-admin .nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #D2B48C; /* Cokelat Pasir */
    font-size: 0.8em;
    font-weight: 600;
    transition: color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
    flex: 1; /* Agar item membagi ruang secara merata */
    padding: 5px 0;
    border-radius: 8px;
    position: relative; /* Untuk badge */
}
.bottom-nav-admin .nav-item i {
    font-size: 1.6em; /* Ukuran ikon */
    margin-bottom: 4px;
}
.bottom-nav-admin .nav-item span {
    white-space: nowrap;
}
.bottom-nav-admin .nav-item.active {
    color: white;
    background-color: #8B4513; /* Cokelat Sedang */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.bottom-nav-admin .nav-item:hover:not(.active) {
    color: #FFFFFF;
    background-color: rgba(255, 255, 255, 0.1);
}
.bottom-nav-admin .notification-badge {
    position: absolute;
    top: 0px;
    right: 15px;
    background-color: #B03A2E; /* Merah Kecokelatan */
    color: white;
    border-radius: 50%;
    padding: 3px 7px;
    font-size: 0.7em;
    font-weight: bold;
    min-width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* Responsiveness for smaller screens */
@media (max-width: 450px) {
    .bottom-nav-admin {
        padding: 6px 0;
    }
    .bottom-nav-admin .nav-item {
        font-size: 0.75em;
    }
    .bottom-nav-admin .nav-item i {
        font-size: 1.4em;
    }
    .bottom-nav-admin .notification-badge {
        top: 0px;
        right: 5px;
        padding: 2px 6px;
        font-size: 0.6em;
        min-width: 18px;
        height: 18px;
    }
}

/* --- Category Management Specific Styles --- */
.category-list-admin {
    margin-top: 30px;
}

.category-list-admin table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    background-color: #FFFFFF;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.category-list-admin th, .category-list-admin td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #EFEBE9; /* Light brown separator */
}
.category-list-admin th {
    background-color: #4A312A; /* Dark brown header */
    color: white;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9em;
}
.category-list-admin tr:nth-child(even) {
    background-color: #FFF8E1; /* Lighter krem for even rows */
}
.category-list-admin td {
    color: #3E2723; /* Dark text */
}
.category-list-admin td i {
    margin-right: 5px;
    color: #8B4513; /* Accent color for icons */
}

.admin-panel-container .add-new-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    background-color: #28a745; /* Green for add */
    color: white;
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease;
}
.admin-panel-container .add-new-btn:hover {
    background-color: #218838;
}
.admin-panel-container .add-new-btn i {
    margin-right: 8px;
}

/* Modal Styles for Icon Selection */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 10001; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    padding-top: 60px;
}

.modal-content {
    background-color: #fefefe;
    margin: 5% auto;
    padding: 20px;
    border: 1px solid #888;
    border-radius: 10px;
    width: 90%;
    max-width: 700px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    position: relative;
}

.close-button {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close-button:hover,
.close-button:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.modal-content h3 {
    text-align: center;
    color: #4A312A;
    margin-bottom: 20px;
}

#iconSearchInput {
    width: calc(100% - 20px);
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #D2B48C;
    border-radius: 5px;
    font-size: 1em;
}

.icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 10px;
    max-height: 400px; /* Limit height for scrollability */
    overflow-y: auto;
    padding-right: 5px; /* For scrollbar */
}

.icon-item {
    text-align: center;
    padding: 10px;
    border: 1px solid #EFEBE9;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
    color: #5D4037;
}

.icon-item:hover {
    background-color: #D2B48C;
    transform: translateY(-2px);
}

.icon-item i {
    font-size: 1.8em;
    margin-bottom: 5px;
}

.icon-selector-wrapper {
    display: flex;
    gap: 10px;
    align-items: center;
}

#icon_class_display {
    flex-grow: 1;
    background-color: #f0f0f0; /* Make it look like a display field */
    cursor: pointer; /* Indicate it's clickable */
}

/* Responsive adjustments for category tables */
@media (max-width: 600px) {
    .category-list-admin table, .category-list-admin thead, .category-list-admin tbody, .category-list-admin th, .category-list-admin td, .category-list-admin tr {
        display: block;
    }

    .category-list-admin thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    .category-list-admin tr {
        border: 1px solid #EFEBE9;
        margin-bottom: 15px;
        border-radius: 8px;
        overflow: hidden;
    }

    .category-list-admin td {
        border: none;
        border-bottom: 1px solid #EFEBE9;
        position: relative;
        padding-left: 50%;
        text-align: right;
    }

    .category-list-admin td:last-child {
        border-bottom: 0;
    }

    .category-list-admin td:before {
        position: absolute;
        top: 6px;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        text-align: left;
        font-weight: bold;
        color: #4A312A;
    }

    .category-list-admin td:nth-of-type(1):before { content: "ID"; }
    .category-list-admin td:nth-of-type(2):before { content: "Nama"; }
    .category-list-admin td:nth-of-type(3):before { content: "Icon"; }
    .category-list-admin td:nth-of-type(4):before { content: "Aksi"; }

    .category-list-admin td .edit-btn, .category-list-admin td .delete-btn {
        width: calc(50% - 10px);
        box-sizing: border-box;
        margin-top: 5px;
    }
}

.edit-btn {
    background-color: #8B4513; /* Cokelat Sedang */
    color: white;
    /* Tambahan properti umum agar konsisten di berbagai tempat */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    font-size: 0.9em;
    font-weight: 600;
    border-radius: 6px;
    text-decoration: none;
    text-align: center;
    transition: background-color 0.3s ease, transform 0.2s ease;
    border: none;
    cursor: pointer;
    white-space: nowrap;
}

.edit-btn:hover {
    background-color: #6F360F; /* Cokelat Gelap */
    transform: translateY(-1px);
}

.delete-btn {
    background-color: #B03A2E; /* Merah Kecokelatan */
    color: white;
    /* Tambahan properti umum agar konsisten di berbagai tempat */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    font-size: 0.9em;
    font-weight: 600;
    border-radius: 6px;
    text-decoration: none;
    text-align: center;
    transition: background-color 0.3s ease, transform 0.2s ease;
    border: none;
    cursor: pointer;
    white-space: nowrap;
}

.delete-btn:hover {
    background-color: #942F26; /* Merah Kecokelatan Gelap */
    transform: translateY(-1px);
}

/* Jika Anda menggunakan ikon di dalamnya */
.edit-btn i, .delete-btn i {
    margin-right: 5px;
}


/* --- Bagian Responsive adjustments for category tables --- */
@media (max-width: 600px) {
    /* Gaya ini sudah ada, hanya memastikan konsistensi */
    .category-list-admin td .edit-btn,
    .category-list-admin td .delete-btn {
        width: calc(50% - 10px); /* Adjust width to fit two buttons side-by-side */
        box-sizing: border-box;
        margin-top: 5px;
        /* Hapus margin-left atau sesuaikan jika perlu spasi antar tombol */
        margin-left: 0;
    }
    .category-list-admin td .edit-btn + .delete-btn {
        margin-left: 5px; /* Tambahkan spasi antar tombol jika bersebelahan */
    }
}

/* START: STYLES UNTUK PRODUK TERPOPULER DI ADMIN DASHBOARD */
/* Ini adalah bagian yang akan memastikan grid 2 kolom di semua ukuran layar */

/* Kontainer untuk bagian produk terpopuler, membuatnya lebih lebar */
.admin-panel-container.popular-products {
    max-width: 1000px; /* Lebar maksimal yang diinginkan untuk bagian ini */
    margin: 30px auto; /* Pusat horizontal */
    padding: 20px; /* Padding yang lebih sesuai untuk grid */
}

/* Override untuk grid produk terpopuler */
.admin-panel-container.popular-products .admin-product-grid {
    display: grid;
    /* Langsung terapkan 2 kolom di sini, tanpa media query untuk 1 kolom */
    grid-template-columns: repeat(2, 1fr); /* JAMINAN 2 KOLOM di semua ukuran layar */
    gap: 20px; /* Jarak antar item grid */
    padding: 0; /* Menghapus padding agar tidak tumpang tindih dengan padding container */
    background-color: transparent; /* Tidak perlu latar belakang di sini, sudah ada di container */
    box-shadow: none; /* Tidak perlu bayangan di sini */
}

/* Media Query untuk layar yang sangat kecil (misal, ponsel sangat sempit) */
/* Kita bisa tambahkan ini JIKA 2 kolom di ponsel terlalu sempit. */
/* Jika tidak, biarkan kode ini di komentar atau hapus. */
/* @media (max-width: 450px) {
    .admin-panel-container.popular-products .admin-product-grid {
        grid-template-columns: 1fr;
    }
} */


/* Gaya untuk setiap item produk dalam grid populer */
.admin-panel-container.popular-products .admin-product-item {
    background-color: #ffffff; /* Latar belakang putih untuk setiap item */
    border: 1px solid #e0e0e0; /* Border tipis */
    border-radius: 8px; /* Sudut membulat */
    overflow: hidden; /* Memastikan konten tidak keluar dari border radius */
    box-shadow: 0 1px 3px rgba(0,0,0,0.08); /* Bayangan ringan */
    display: flex;
    flex-direction: column; /* Konten di dalam item selalu tertumpuk secara vertikal */
    align-items: center; /* Pusatkan konten horizontal */
    text-align: center; /* Pusatkan teks */
    padding-bottom: 15px; /* Padding bawah */
    height: auto; /* Memastikan tinggi fleksibel */
}

.admin-panel-container.popular-products .admin-product-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.15);
}

.admin-panel-container.popular-products .admin-product-item img {
    width: 100%; /* Gambar mengisi lebar item */
    height: 180px; /* Tinggi tetap untuk gambar */
    object-fit: cover; /* Memastikan gambar mengisi area tanpa terdistorsi */
    border-bottom: 1px solid #eee; /* Garis bawah pada gambar */
    margin-bottom: 10px; /* Jarak antara gambar dan teks */
    border-radius: 8px 8px 0 0; /* Sudut membulat hanya di atas */
    margin-right: 0;
}

.admin-panel-container.popular-products .admin-product-item .product-content {
    padding: 0 15px; /* Padding horizontal untuk konten teks */
    width: 100%; /* Mengisi lebar parent */
    flex-grow: 1; /* Memungkinkan konten untuk tumbuh */
    justify-content: center; /* Pusatkan konten vertikal jika ada ruang */
}

.admin-panel-container.popular-products .admin-product-item .product-name {
    font-size: 1.1em; /* Ukuran font judul produk */
    margin: 0 0 5px 0; /* Sesuaikan margin */
    font-weight: 700;
    color: #3E2723; /* Warna teks judul */
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Batasi 2 baris */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center; /* Pastikan nama produk di tengah */
}

.admin-panel-container.popular-products .admin-product-item .product-meta {
    font-size: 0.9em; /* Ukuran font meta info */
    color: #666; /* Warna teks meta info */
    margin: 2px 0;
    text-align: center; /* Pastikan meta info di tengah */
}

/* Hapus atau sembunyikan .actions karena tidak diperlukan untuk item populer */
.admin-panel-container.popular-products .admin-product-item .actions {
    display: none;
}

/* Pastikan judul "Produk Terpopuler" tetap di tengah */
.admin-panel-container h3 {
    text-align: center;
    margin-top: 40px;
    margin-bottom: 20px;
    border-bottom: 2px solid #8B4513;
    padding-bottom: 5px;
    display: inline-block;
    width: fit-content; /* Sesuaikan lebar border bawah dengan teks */
}

/* END: STYLES UNTUK PRODUK TERPOPULER DI ADMIN DASHBOARD */

/* --- Select2 Styling Adjustments --- */

/* Pastikan Select2 mengambil lebar penuh di dalam form-group */
.form-group .select2-container {
    width: 100% !important; /* Penting untuk memaksa lebar penuh */
    box-sizing: border-box;
}

/* Gaya untuk kontrol Select2 (area yang terlihat seperti input) */
.select2-container .select2-selection--single {
    height: 45px !important; /* Ditambahkan !important untuk memastikan gaya diterapkan */
    border: 1px solid #D2B48C; /* Border cokelat pasir, sama seperti input/select lain */
    border-radius: 8px; /* Border radius seragam */
    font-size: 1em; /* Kembali ke font size standar */
    background-color: #FFFFFF; /* Latar belakang putih, sama seperti input lain */
    display: flex; /* Untuk menengahkan teks dan panah */
    align-items: center; /* Pusatkan secara vertikal */
    box-sizing: border-box; /* Pastikan padding masuk dalam lebar */
}

/* Gaya untuk teks yang dipilih di Select2 */
.select2-container .select2-selection__rendered {
    line-height: 43px !important; /* Ditambahkan !important, sesuaikan line-height agar teks pas di tengah tinggi baru */
    padding-left: 10px !important; /* Ditambahkan !important, kembali ke padding standar */
    font-size: 1em !important; /* Ditambahkan !important, pastikan font-size konsisten */
    color: #4A312A; /* Warna teks gelap */
    flex-grow: 1; /* Biarkan teks mengisi ruang */
}

/* Gaya untuk ikon panah dropdown Select2 */
.select2-container .select2-selection__arrow {
    height: 43px !important; /* Ditambahkan !important, sesuaikan tinggi panah agar konsisten */
    width: 30px; /* Lebar standar */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Gaya saat Select2 fokus (klik atau tab) */
.select2-container--open .select2-selection--single,
.select2-container--focus .select2-selection--single {
    border-color: #8B4513; /* Warna border saat fokus, bisa disamakan dengan input lain */
    box-shadow: 0 0 0 0.2rem rgba(139, 69, 19, 0.25); /* Efek fokus ringan */
}

/* Gaya untuk kotak hasil pencarian (dropdown yang muncul) */
.select2-container--open .select2-dropdown {
    border: 1px solid #D2B48C; /* Border hasil */
    border-radius: 8px; /* Border radius hasil */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    background-color: #FFFFFF; /* Latar belakang putih untuk dropdown */
}

/* Gaya untuk setiap item hasil di dropdown */
.select2-results__option {
    padding: 10px; /* Kembali ke padding standar */
    font-size: 1em; /* Kembali ke font size standar */
    color: #4A312A; /* Warna teks item */
}

/* Gaya untuk item hasil yang di-hover */
.select2-results__option--highlighted {
    background-color: #EFEBE9 !important; /* Warna hover cokelat sangat terang */
    color: #4A312A !important; /* Pastikan teks tetap terbaca */
}

/* Gaya untuk item hasil yang dipilih */
.select2-results__option--selected {
    background-color: #D2B48C !important; /* Warna latar belakang item terpilih */
    color: #4A312A !important;
}

/* Gaya untuk input pencarian di dalam dropdown Select2 */
.select2-search--dropdown .select2-search__field {
    border: 1px solid #D2B48C;
    border-radius: 5px;
    padding: 8px; /* Kembali ke padding standar */
    margin: 5px;
    width: calc(100% - 10px); /* Sesuaikan lebar dengan margin */
    box-sizing: border-box;
    font-size: 1em; /* Kembali ke font size standar */
    color: #4A312A;
}

/* PERUBAHAN UNTUK POSISI TOMBOL 'X' DI SELECT2 */
.select2-selection__clear {
    margin-right: 10px !important; /* Pastikan jarak dari kanan tetap konsisten */
    font-size: 1.1em !important; /* Sedikit perbesar ukuran 'X' agar lebih terlihat */
    color: #8D6E63;
    cursor: pointer;
    /* Ini penting untuk pemosisian vertikal dalam flex container parent */
    height: 100% !important; /* Agar tombol 'X' memenuhi tinggi parent (flex item) */
    display: flex !important; /* Jadikan flex container */
    align-items: center !important; /* Pusatkan konten ('X') secara vertikal */
    padding: 0 5px !important; /* Tambahkan sedikit padding horizontal untuk area klik */
}
.select2-selection__clear:hover {
    color: #dc3545; /* Merah saat hover */
}