@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
    --bs-primary: #967259;
    --bs-primary-rgb: 150, 114, 89;
    --bs-link-color: #967259;
    --bs-link-hover-color: #7a5c47;
}

/* Tombol Solid (Login, Pinjam, dll) */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #7a5c47;
    --bs-btn-hover-border-color: #7a5c47;
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #7a5c47;
    --bs-btn-active-border-color: #7a5c47;
}

/* * KODE BARU: Tombol Outline (Filter Kategori)
 */
.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
    --bs-btn-disabled-color: var(--bs-primary);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--bs-primary);
}
/* Aturan agar tombol .active jadi solid */
.btn-outline-primary.active {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}


.login-container .bi-book-half,
.login-container .bi-person-plus-fill {
    color: var(--bs-primary) !important;
}

html {
    height: 100%;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: #f4f7f6;
    padding-top: 88px; 
    display: flex;
    flex-direction: column;
    min-height: 100vh; 
}

main {
    flex-grow: 1; 
}

.card, .btn, .form-control, .alert {
    border-radius: 0.5rem;
}

.navbar {
    background-color: #f8f9fa !important; 
    border-bottom: 1px solid #e9ecef; 
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.navbar .navbar-brand,
.navbar .nav-link {
    color: #333 !important;
    font-weight: 500;
}

.navbar .nav-link:hover {
    color: var(--bs-link-hover-color) !important;
}

.navbar .nav-link.active {
    color: var(--bs-primary) !important;
    font-weight: 600;
}

body.login-register {
    background: url('https://images.unsplash.com/photo-1507842217343-583bb7270b66?auto=format&fit=crop&q=80&w=2070') no-repeat center center fixed;
    background-size: cover;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 0; 
}

body.login-register::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1;
}

.login-container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 420px;
}

.login-container .card {
    border: none;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 0.75rem;
}

.card-book {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: none;
    border-radius: 0.75rem;
}

.card-book:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.book-cover-wrapper {
    width: 100%;
    padding-top: 150%;
    position: relative;
    overflow: hidden;
    border-top-left-radius: 0.75rem;
    border-top-right-radius: 0.75rem;
}

.book-cover-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; 
    transition: transform 0.3s ease;
}

.card-book:hover .book-cover-img {
    transform: scale(1.05);
}

.book-cover-placeholder {
    height: 100%; 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #e9ecef;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #aaa;
    font-size: 2rem; 
    border-top-left-radius: 0.75rem;
    border-top-right-radius: 0.75rem;
}

.book-cover-small {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.5rem; 
}

.book-cover-placeholder-small {
    width: 100%;
    height: 100%;
    background-color: #e9ecef;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #aaa;
    font-size: 1.5rem;
    border-radius: 0.5rem;
}

/* 1. Perbaiki Dropdown Menu (Profil & Logout) */
.dropdown-item:active, 
.dropdown-item.active {
    background-color: var(--bs-primary) !important; /* Background Coklat saat diklik */
    color: #fff !important;
}

.dropdown-item:hover, 
.dropdown-item:focus {
    color: var(--bs-primary) !important; /* Teks Coklat saat di-hover */
    background-color: rgba(150, 114, 89, 0.1) !important; /* Background agak coklat pudar */
}

/* 2. Perbaiki Tombol di Notifikasi (SweetAlert2) */
/* Ini memaksa tombol "OK" di popup notifikasi jadi coklat */
div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
}

/* Hilangkan glow biru saat tombol notifikasi ditekan */
div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm:focus {
    box-shadow: 0 0 0 3px rgba(150, 114, 89, 0.5) !important;
}

/* 3. Perbaiki Pagination (Jika nanti ada halaman 1, 2, 3) */
.page-link {
    color: var(--bs-primary);
}
.page-item.active .page-link {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

html {
    background-color: #2b1b11;
    height: 100%;
}

@media (max-width: 768px) {
    
    /* 1. KEMBALIKAN FLEXBOX (Agar Posisi di Tengah Layar) */
    body.login-register {
        display: flex !important;           /* Aktifkan Flexbox lagi */
        justify-content: center !important; /* Tengahkan Vertikal (Atas-Bawah) */
        align-items: center !important;     /* Tengahkan Horizontal (Kiri-Kanan) */
        
        min-height: 100vh !important;       /* Tinggi minimal seukuran layar HP */
        /* Gunakan 100dvh (Dynamic Viewport) agar pas dengan browser HP modern */
        min-height: 100dvh !important;      
        
        padding: 20px !important;           /* Jarak aman di pinggir layar */
        
        /* Fix Background */
        background-attachment: fixed !important; 
        background-position: center center !important;
        background-size: cover !important;
    }

    /* 2. Container Form */
    .login-container {
        width: 100% !important; 
        max-width: 360px !important; /* Batasi lebar agar proporsional */
        margin: 0 !important;        /* Margin dihandle oleh Flexbox body */
    }

    /* 3. Rapikan Kartu */
    .login-container .card {
        padding: 2rem 1.5rem !important; 
        box-shadow: 0 15px 35px rgba(0,0,0,0.3) !important; /* Shadow tebal biar pop-up */
        border-radius: 1rem !important;
        margin-bottom: 0 !important;
    }

    /* 4. Elemen Form (Compact) */
    .login-container h2 {
        font-size: 1.5rem !important;
        margin-top: 0.5rem !important;
    }
    
    .form-label {
        font-size: 0.85rem !important;
        margin-bottom: 0.2rem !important;
    }

    .form-control {
        min-height: 45px !important;
        font-size: 15px !important;
        margin-bottom: 12px !important;
    }
    
    .btn-lg {
        min-height: 45px !important;
        font-size: 16px !important;
        margin-top: 10px !important;
    }

    /* 5. Navbar & Grid Buku (Halaman Utama di HP) */
    .navbar-brand { font-size: 1.2rem !important; }
    
    .row-cols-2 > * {
        flex: 0 0 auto;
        width: 50%;
    }
    
    .card-book .card-title { font-size: 0.9rem; }
}