:root {
    /* Warna dari halaman Login (jika ada, saya masukkan sebagai referensi) */
    --primary-blue: #2b5478; /* Background biru tua utama untuk LOGIN */
    --brand-orange: #ff8c00; /* Warna oranye merek dan tombol */
    --hover-orange: #e67e00; /* Warna oranye saat hover */
    --border-gray-login-logo: #ced4da; /* Warna abu-abu border logo login */
    --input-border-color: #d1d5db; /* Warna border input */
    --text-label-gray: #4b5563; /* Warna teks label form */
    --placeholder-text-gray: #9ca3af; /* Warna teks placeholder */

    /* Warna dari halaman Riwayat Pembelian & Detail Pembelian & Form Pembelian */
    --primary-dark-blue: #22425c; /* Warna biru lebih gelap untuk navbar/sidebar */
    --card-bg-white: #ffffff; /* Latar belakang kartu putih */
    --detail-button-orange: #ff8c00; /* Warna oranye untuk tombol Detail */
    --detail-button-hover-orange: #e67e00; /* Warna oranye lebih gelap untuk hover tombol Detail */
    --fab-orange: #ff8c00; /* Warna oranye untuk FAB */
    --fab-hover-orange: #e67e00; /* Warna oranye lebih gelap untuk hover FAB */
    --text-item-dark: #333333; /* Warna teks item nama barang / judul / teks umum gelap */
    --text-date-muted: #6c757d; /* Warna teks tanggal dan breadcrumb */
    --border-card-light: #e0e0e0; /* Warna border ringan untuk kartu */
    --table-header-orange: #ff8c00; /* Warna oranye untuk header tabel detail */
    --table-text-dark: #333333; /* Warna teks gelap untuk tabel detail */
    --table-row-border: #dee2e6; /* Warna border baris tabel */
    --label-color-orange: #ff8c00; /* Warna oranye untuk label "Pilih Bahan" */

    /* Universal Shadows */
    --card-shadow-soft: 0 4px 10px rgba(0, 0, 0, 0.1);
    --fab-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    --navbar-shadow: 0 2px 8px rgba(0,0,0,0.2);

    /* Spacing */
    --spacing-xs: 0.25rem;     /* 4px */
    --spacing-sm: 0.5rem;     /* 8px */
    --spacing-md: 1rem;       /* 16px */
    --spacing-lg: 1.5rem;     /* 24px */
    --spacing-xl: 2rem;       /* 32px */
    --spacing-2xl: 2.5rem;    /* 40px */
    --spacing-3xl: 3rem;      /* 48px */
    --spacing-4xl: 4rem;      /* 64px */
}

body {
    font-family: Arial, sans-serif;
    background-color: #f8f9fa; /* Tetap background ringan */
    padding-top: 56px; /* Adjust for fixed-top navbar (minimal tinggi navbar) */
}

/* --- Navbar Adjustments --- */
.navbar.bg-primary {
    background-color: var(--primary-dark-blue) !important; /* Gunakan primary-dark-blue */
    box-shadow: var(--navbar-shadow); /* Tambahkan shadow navbar */
    height: 56px; /* Pastikan tinggi navbar konsisten */
    z-index: 1030; /* Pastikan navbar di atas offcanvas/sidebar saat dibutuhkan */
}

.navbar-toggler {
    border: none;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 1.25rem;
    line-height: 1;
    background-color: transparent;
    border-radius: 0.25rem;
    transition: box-shadow 0.15s ease-in-out;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* --- Sidebar for Web View --- */
.sidebar {
    position: fixed;
    top: 0; /* Mulai dari atas viewport */
    bottom: 0;
    left: 0;
    z-index: 1000;
    width: 200px; /* Adjust sidebar width as needed */
    background-color: var(--primary-dark-blue) !important; /* Gunakan primary-dark-blue */
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1); /* Bayangan samping */
    padding-top: 0; /* Ubah padding-top ke 0 karena logo header akan mengambil tempat */
    transition: margin-left 0.3s ease; /* Transisi untuk menyembunyikan/menampilkan sidebar */
    overflow-y: auto; /* Aktifkan scroll jika konten sidebar terlalu panjang */
    display: flex;
    flex-direction: column; /* Atur layout flex untuk menempatkan header di atas menu */
}

/* Styling for Logo and Brand Name in Sidebar (Web View) */
.sidebar-header-logo {
    display: flex;
    flex-direction: column; /* Tumpuk logo dan teks brand */
    align-items: center;
    padding: var(--spacing-md) 0 var(--spacing-lg); /* Padding atas, bawah lebih besar */
    border-bottom: 1px solid rgba(255, 255, 255, 0.15); /* Garis bawah pemisah yang lebih jelas */
    margin-bottom: var(--spacing-md); /* Jarak dari item menu pertama */
    padding-top: calc(56px + var(--spacing-md)); /* Tambahkan padding agar tidak tertutup navbar */
}

.sidebar-logo-img {
    height: 60px; /* Ukuran logo lebih besar untuk tampilan desktop */
    width: auto;
    object-fit: contain;
    margin-bottom: var(--spacing-sm); /* Jarak antara logo dan teks brand */
    filter: brightness(0) invert(1); /* Opsional: membuat logo hitam menjadi putih jika perlu */
}

.sidebar-brand-name {
    color: white;
    font-size: 1.25rem; /* Ukuran font lebih besar */
    font-weight: bold;
    margin-bottom: 0;
    text-align: center;
}

.sidebar .nav {
    flex-grow: 1; /* Biarkan menu mengisi sisa ruang */
    padding-bottom: var(--spacing-md); /* Padding di bagian bawah menu */
}

.sidebar .nav-item {
    margin-bottom: 2px; /* Sedikit jarak antar item menu */
}

.sidebar .nav-link {
    font-weight: 500;
    color: #f8f9fa; /* Warna teks terang */
    padding: var(--spacing-sm) var(--spacing-lg); /* Padding kiri/kanan lebih besar */
    display: flex;
    align-items: center;
    border-radius: 0.35rem; /* Sedikit border-radius untuk efek modern */
    margin: 0 var(--spacing-sm); /* Margin horizontal untuk memisahkan dari tepi sidebar */
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.1s ease; /* Transisi halus */
}

.sidebar .nav-link.active {
    color: #ffffff;
    background-color: var(--brand-orange); /* Gunakan warna oranye merek untuk item aktif */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); /* Sedikit bayangan untuk item aktif */
    transform: translateX(5px); /* Sedikit bergeser ke kanan */
}

.sidebar .nav-link:hover {
    background-color: var(--hover-orange); /* Gunakan warna oranye saat hover */
    color: white;
    transform: translateX(3px); /* Sedikit bergeser ke kanan saat hover */
}

.sidebar .nav-item .fas {
    margin-right: var(--spacing-sm);
    font-size: 1rem; /* Ukuran ikon standar */
}

/* --- Offcanvas for Mobile Sidebar --- */
.offcanvas.offcanvas-start {
    width: 250px;
    background-color: var(--primary-dark-blue);
    color: white;
}

.offcanvas-header {
    background-color: var(--primary-dark-blue);
    color: white;
    border-bottom: 1px solid rgba(0, 0, 0, .2);
    display: flex; /* Menggunakan flex untuk aligment */
    align-items: center;
    justify-content: space-between; /* Untuk meletakkan tombol close di kanan */
}

.offcanvas-header .offcanvas-title {
    display: flex;
    align-items: center;
    font-size: 1.1rem; /* Ukuran font judul di offcanvas */
}

.offcanvas-header .sidebar-logo-img {
    height: 30px; /* Ukuran lebih kecil untuk offcanvas header */
    margin-right: var(--spacing-sm);
    filter: brightness(0) invert(1);
}

.offcanvas-body .nav-link {
    color: #f8f9fa;
    padding: var(--spacing-sm) var(--spacing-md);
    transition: background-color 0.2s ease, color 0.2s ease;
    border-radius: 0.25rem; /* Konsisten dengan web sidebar */
    margin: 0 var(--spacing-xs); /* Sedikit margin horizontal */
}

.offcanvas-body .nav-link:hover {
    background-color: var(--hover-orange);
}

.offcanvas-body .nav-link.active {
    background-color: var(--brand-orange);
    color: white;
}

/* --- Content Area and Responsive Adjustments --- */
.content {
    margin-left: 0; /* Default for mobile */
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
    padding-bottom: var(--spacing-lg); /* Lebih banyak padding di bawah konten utama */
}

/* Media query for Web View (md breakpoint and up) */
@media (min-width: 768px) {
    .content {
        margin-left: 200px; /* Space for sidebar */
    }

    /* Sembunyikan elemen-elemen mobile di tampilan web */
    .navbar-toggler { /* Burger icon */
        display: none !important;
    }
    #mobileLogout { /* Icon logout mobile */
        display: none !important;
    }

    /* Penyesuaian umum untuk kerapian di web */
    .breadcrumb-header {
        margin-top: var(--spacing-md); /* Sedikit ruang di atas header breadcrumb */
    }
}


/* --- Breadcrumb Styling (Universal) --- */
.custom-breadcrumb {
    background-color: transparent;
    padding: 0;
    margin-bottom: var(--spacing-md);
    font-size: 0.9rem;
    display: flex; /* Memastikan item breadcrumb sejajar rapi */
    align-items: center;
}

.custom-breadcrumb .breadcrumb-item {
    padding-right: var(--spacing-xs);
}

.custom-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    float: left;
    padding-right: var(--spacing-xs);
    color: var(--brand-orange);
    content: var(--bs-breadcrumb-divider, "/"); /* Default Bootstrap divider */
}

.custom-breadcrumb .breadcrumb-item a {
    color: var(--text-date-muted);
    text-decoration: none;
}

.custom-breadcrumb .breadcrumb-item.active {
    color: var(--brand-orange);
    font-weight: bold;
}

.breadcrumb-header {
    color: var(--text-item-dark);
    margin-bottom: var(--spacing-sm);
    font-weight: bold;
}

/* --- Universal Card Styling (Digunakan di Detail & Form) --- */
.detail-card { /* Digunakan juga sebagai base untuk form-card */
    border: 1px solid var(--border-card-light);
    border-radius: 0.5rem;
    box-shadow: var(--card-shadow-soft);
    background-color: var(--card-bg-white);
    margin-bottom: var(--spacing-lg); /* Jarak bawah kartu dari elemen berikutnya */
}

/* --- Riwayat Pembelian Styles --- */
.purchase-item-card {
    border: 1px solid var(--border-card-light);
    border-radius: 0.5rem;
    box-shadow: var(--card-shadow-soft);
    background-color: var(--card-bg-white);
    min-height: 120px; /* Tinggi minimum agar card seragam */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.purchase-item-card .card-body {
    padding: var(--spacing-md);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.purchase-item-card .card-title {
    font-size: 1rem;
    font-weight: bold;
    color: var(--text-item-dark);
    margin-bottom: var(--spacing-xs);
}

.purchase-item-card .card-text {
    font-size: 0.85rem;
    color: var(--text-date-muted);
    margin-bottom: auto; /* Mendorong tombol ke bawah */
}

.btn-detail-orange {
    background-color: var(--detail-button-orange);
    color: white;
    border: none;
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: 0.25rem;
    font-size: 0.9rem;
    transition: background-color 0.2s ease;
    align-self: flex-end; /* Posisikan tombol di kanan bawah card */
    margin-top: var(--spacing-sm); /* Jarak dari teks di atasnya */
}

.btn-detail-secondary {
    background-color: var(--text-date-muted);
    color: white;
    border: none;
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: 0.25rem;
    font-size: 0.9rem;
    transition: background-color 0.2s ease;
    align-self: flex-end; /* Posisikan tombol di kanan bawah card */
    margin-top: var(--spacing-sm); /* Jarak dari teks di atasnya */
}

.btn-detail-orange:hover {
    background-color: var(--detail-button-hover-orange);
    color: white;
}

/* --- Floating Action Button (FAB) for Riwayat Pembelian --- */
.btn-fab-orange {
    position: fixed;
    bottom: var(--spacing-lg);
    right: var(--spacing-lg);
    background-color: var(--fab-orange);
    color: white;
    border-radius: 50%;
    width: 56px;
    height: 56px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    box-shadow: var(--fab-shadow);
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
    z-index: 1050;
    border: none;
}

.btn-fab-orange:hover {
    background-color: var(--fab-hover-orange);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

/* --- Detail Pembelian Styles --- */
.transaction-header {
    background-color: var(--table-header-orange);
    color: white;
    font-weight: bold;
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--border-card-light);
    border-top-left-radius: calc(0.5rem - 1px);
    border-top-right-radius: calc(0.5rem - 1px);
    font-size: 1.1rem;
}

.detail-table {
    width: 100%;
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
}

.detail-table td {
    padding: var(--spacing-sm) 0;
    border-top: none;
    font-size: 0.95rem;
    color: var(--table-text-dark);
    vertical-align: middle;
}

.detail-table tr:not(:last-child) td {
    border-bottom: 1px solid var(--table-row-border);
}

.detail-table tr td:first-child {
    font-weight: bold;
    width: 40%;
    padding-left: 0;
}

.detail-table tr td:last-child {
    padding-right: 0;
    text-align: right;
}

.photo-header { /* Digunakan juga di form pembelian */
    color: var(--text-item-dark);
    font-weight: bold;
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
}

.image-grid {
    margin-bottom: 0;
}

.image-placeholder {
    border: 1px solid var(--border-card-light);
    background-color: #f0f0f0;
    width: 100%;
    padding-bottom: 100%; /* Creates a square placeholder */
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0.25rem;
    overflow: hidden;
}

/* --- Form Pembelian Styles --- */
.form-card {
    margin-bottom: var(--spacing-md); /* Jarak antara card form dan tombol simpan */
}

.form-section-title {
    color: var(--label-color-orange);
    font-weight: bold;
    margin-bottom: var(--spacing-md);
    font-size: 1rem;
}

.form-label-text {
    color: var(--text-label-gray);
    font-size: 0.9rem;
    margin-bottom: var(--spacing-xs);
}

.form-control {
    border: 1px solid var(--input-border-color);
    border-radius: 0.25rem;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 0.95rem;
    color: var(--table-text-dark);
}

.form-control::placeholder {
    color: var(--placeholder-text-gray);
    opacity: 1;
}

.btn-tambah-photo {
    background-color: var(--brand-orange);
    color: white;
    border: none;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: 0.25rem;
    font-size: 0.9rem;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
}

.btn-tambah-photo:hover {
    background-color: var(--hover-orange);
    color: white;
}

.btn-tambah-photo .fas {
    margin-right: var(--spacing-xs);
}

.photo-list {
    margin-top: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
}

.photo-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-xs) 0;
    border-bottom: 1px solid var(--border-card-light);
    font-size: 0.9rem;
    color: var(--text-item-dark);
}

.photo-item:last-child {
    border-bottom: none;
}

.btn-remove-photo {
    background-color: transparent;
    border: none;
    color: var(--text-date-muted);
    font-weight: bold;
    font-size: 1rem;
    padding: 0 var(--spacing-xs);
    cursor: pointer;
    transition: color 0.2s ease;
}

.btn-remove-photo:hover {
    color: #dc3545;
}

.btn-simpan-bottom {
    width: 100%;
    background-color: var(--brand-orange);
    color: white;
    border: none;
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: 0.5rem;
    font-size: 1.1rem;
    font-weight: bold;
    transition: background-color 0.2s ease;
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-lg); /* Penting untuk mobile agar tidak terlalu mepet bawah */
}

.btn-simpan-bottom:hover {
    background-color: var(--hover-orange);
    color: white;
}

/* --- Login Page Styles --- */
.login-body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* Pastikan mengambil tinggi penuh viewport */
    background-color: var(--primary-blue); /* Background biru tua utama */
    margin: 0; /* Hapus margin default body */
    padding: var(--spacing-md); /* Padding agar card tidak menempel tepi di mobile */
    box-sizing: border-box; /* Pastikan padding tidak membuat elemen melebihi ukuran */
}

.login-container {
    width: 100%;
    max-width: 400px; /* Batasi lebar maksimum card di web */
    margin: auto; /* Pusatkan secara horizontal */
}

.login-card {
    border: none; /* Hapus border default Bootstrap */
    border-radius: 0.75rem; /* Sudut lebih membulat */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); /* Bayangan yang lebih menonjol */
    background-color: var(--card-bg-white);
}

.login-card-body {
    padding: var(--spacing-xl); /* Padding lebih besar di dalam card */
}

.login-logo-section {
    display: flex;
    align-items: center;
    justify-content: center; /* Pusatkan logo dan teks */
    margin-bottom: var(--spacing-xl); /* Jarak antara logo/brand dengan form */
    gap: var(--spacing-md); /* Jarak antara logo dan teks */
}

.login-logo-placeholder {
    width: 50px; /* Ukuran placeholder logo */
    height: 50px; /* Ukuran placeholder logo */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem; /* Ukuran 'x' */
    color: var(--text-date-muted); /* Warna 'x' */
    background-color: #f8f9fa; /* Background ringan */
}

/* Jika Anda menggunakan <img> di dalam login-logo-placeholder, pastikan gambarnya responsif */
.login-logo-placeholder img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Memastikan gambar pas tanpa terpotong */
}

.login-brand-name {
    font-size: 1.25rem; /* Ukuran font teks merek */
    font-weight: bold;
    color: var(--brand-orange); /* Warna oranye untuk nama merek */
    margin-bottom: 0;
}

.login-label {
    font-size: 0.9rem;
    color: var(--text-label-gray); /* Warna teks abu-abu untuk label */
    margin-bottom: var(--spacing-xs);
}

.login-input {
    border: 1px solid var(--input-border-color); /* Warna border input */
    border-radius: 0.25rem;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 1rem;
    color: var(--table-text-dark); /* Warna teks input */
}

.login-input::placeholder {
    color: var(--placeholder-text-gray); /* Warna placeholder */
    opacity: 1;
}

.btn-login-orange {
    width: 100%;
    background-color: var(--brand-orange);
    color: white;
    border: none;
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: 0.25rem;
    font-size: 1.1rem;
    font-weight: bold;
    transition: background-color 0.2s ease;
}

.btn-login-orange:hover {
    background-color: var(--hover-orange);
    color: white;
}

.text-brand {
    color: var(--brand-orange);
}