/* CSS Variables untuk tema yang konsisten */
:root {
    --bg-primary: #f1f5f9; /* Warna kartu/widget (tetap putih) */
    --bg-secondary: #f1f5f9; /* Warna latar utama halaman (Slate 100) */
    --bg-tertiary: #f8fafc; /* Warna latar hover (Slate 50) */
    --sidebar-bg: #2c5282; /* Warna Latar Sidebar (Biru Gelap) */
    --sidebar-active-bg: #2c5282; /* Latar item aktif di sidebar */
    --border-color: #e2e8f0; /* Border (Slate 200) */
    --text-primary: #1e293b; /* Teks utama (Slate 800) */
    --text-secondary: #64748b; /* Teks sekunder (Slate 500) */
    --accent-primary: #3b82f6; /* Aksen Biru Terang (Blue 500) */
    --accent-secondary: #60a5fa; /* Aksen Biru Lebih Terang (Blue 400) */
}
.nav-button.active { 
    background-color: #2c5282 !important; 
    color: white !important; 
    font-weight: 600 !important; 
    opacity: 1 !important;
}

body { 
    font-family: 'Inter', sans-serif; 
    color: var(--text-primary); 
    background-color: var(--bg-secondary); /* Latar utama diubah ke abu-abu */
}
/* Animasi */
.animate-fade-in { animation: fadeIn 0.5s ease-in-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
.modal-content { animation: modalIn 0.3s ease-out; }
@keyframes modalIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-tertiary); }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }
/* Styling Form Input */
.invoice-input, .form-input {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    width: 100%;
}
 .invoice-input:focus, .form-input:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--accent-primary);
 }
/* Tombol Navigasi & Tab */
/* DENGAN INI */
.nav-button.active { background-color: var(--sidebar-active-bg); color: white; font-weight: 600; }
/* GAYA BARU DENGAN EFEK "KECUBIT" */
.nav-button.active {
    background-color: var(--sidebar-active-bg);
    color: white;
    font-weight: 600;
    
}

/* GAYA BARU UNTUK KARTU DENGAN EFEK TIMBUL */
.card-raised {
    background: var(--bg-primary); /* Menggunakan warna yang sudah kita samakan */
    border-radius: 0.75rem; /* Membuat sudut lebih membulat (opsional) */
    padding: 1.5rem; /* Padding standar untuk kartu */
    margin-bottom: 1.5rem; /* Jarak antar kartu */
    /* Ini adalah kode untuk efek timbul (outset shadow) */
    box-shadow: 7px 7px 15px #d1d9e6,
                -7px -7px 15px #ffffff;
}

/* Ubah warna ikon default dan teks hover */
.nav-button { color: #000000; } /* Warna teks default (Slate 300) */
/* Efek hover dinonaktifkan sesuai permintaan */
/* .nav-button:hover { background-color: rgba(255, 255, 255, 0.1); color: white; } */
.nav-button i { color: #000000; width: 20px; text-align: center; } /* Warna ikon default (Slate 400) */
/* .nav-button:hover i, .nav-button.active i { color: white; } */
/* Baris di bawah ditambahkan agar ikon pada tombol aktif tetap berwarna putih */
.nav-button.active i { color: white; }
/* Sidebar Styling */
.sidebar { transition: width 0.3s ease; }
.sidebar-collapsed { width: 5rem; }
.sidebar-collapsed .nav-text, .sidebar-collapsed .user-info, .sidebar-collapsed .logo-full { display: none; }
.sidebar-collapsed .logo-icon { display: inline-block; }
.sidebar:not(.sidebar-collapsed) .logo-icon { display: none; }
.sidebar-collapsed .nav-button { justify-content: center; }
/* Transisi Main Content */
#main-content-wrapper { transition: margin-left 0.3s ease; }

/* Menambahkan ini di style.css */
@media (max-width: 767px) {
    .responsive-table thead {
        display: none; /* Sembunyikan header tabel di mobile */
    }
    .responsive-table tr {
        display: block; /* Ubah baris menjadi block/kartu */
        border: 1px solid var(--border-color);
        border-radius: 0.75rem; /* rounded-xl */
        margin-bottom: 1rem; /* mb-4 */
        box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
        background-color: white;
    }
    .responsive-table td {
        display: flex; /* Gunakan flex untuk menata label dan isi */
        justify-content: space-between;
        padding: 0.75rem 1rem; /* p-3 px-4 */
        text-align: right;
        border-bottom: 1px solid var(--border-color);
    }
    .responsive-table td:last-child {
        border-bottom: none;
    }
    .responsive-table td::before {
        content: attr(data-label); /* Ambil teks dari atribut data-label */
        font-weight: 600; /* font-semibold */
        text-align: left;
        margin-right: 0.5rem; /* mr-2 */
        color: var(--text-secondary);
    }
    .product-cell { /* Khusus untuk sel produk agar nama di kiri */
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem; /* gap-1 */
    }
}
/* Tambahkan ini di dalam blok @media (max-width: 767px) { ... } */

.stacked-cell {
    flex-direction: column;
    align-items: flex-start;
    text-align: left !important; /* Memaksa rata kiri */
    gap: 0.25rem; /* Memberi jarak antara label dan isi */
}

.stacked-cell::before {
    margin-right: 0;
    margin-bottom: 0.1rem;
}