:root {
    /* =========================================================
       PARCHMENT THEME (Default Light Mode)
       ========================================================= */
    
    /* Background: Warm Cream */
    --bs-body-bg: #fdfbf7; 
    
    /* Text: Deep Ink */
    --bs-body-color: #2c241b; 

    /* Brand Color: "Lapis Lazuli" / Royal Blue */
    --brand-primary: #154c79;
    --brand-primary-hover: #103a5e;

    /* Bootstrap Overrides */
    --bs-primary: var(--brand-primary);
    --bs-primary-rgb: 21, 76, 121;
    
    --bs-link-color: var(--brand-primary);
    --bs-link-color-rgb: 21, 76, 121;
    --bs-link-hover-color: var(--brand-primary-hover);
    
    /* Cards: Clean white paper sitting on the parchment desk */
    --bs-card-bg: #ffffff;
    --bs-card-border-color: #e5e0d8; /* Soft tan border to match background */
    --bs-border-color: #e5e0d8;      /* Global border color */
}

/* =========================================================
   Typography
   ========================================================= */
body {
    font-family: 'Source Sans 3', sans-serif;
}

h1, h2, h3, h4, h5, h6, .display-1, .display-2, .display-3, .display-4, .navbar-brand {
    font-family: 'Lora', serif;
    font-weight: 600;
    color: #1a1612; /* Slightly darker ink for headers */
}

/* =========================================================
   Component Overrides (Light Mode)
   ========================================================= */

/* Button Primary (Lapis Blue) */
.btn-primary {
    --bs-btn-bg: var(--brand-primary);
    --bs-btn-border-color: var(--brand-primary);
    --bs-btn-hover-bg: var(--brand-primary-hover);
    --bs-btn-hover-border-color: var(--brand-primary-hover);
    --bs-btn-active-bg: var(--brand-primary-hover);
    --bs-btn-active-border-color: var(--brand-primary-hover);
}

.btn-outline-primary {
    --bs-btn-color: var(--brand-primary);
    --bs-btn-border-color: var(--brand-primary);
    --bs-btn-hover-bg: var(--brand-primary);
    --bs-btn-hover-border-color: var(--brand-primary);
}

/* List Group Active State (Genre Sidebar) */
.list-group-item.active {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;
    z-index: 2;
}

/* Navbar: Ensure links stand out against the cream background */
.navbar.bg-body {
    background-color: rgba(253, 251, 247, 0.95) !important; /* Semi-transparent cream */
}

/* =========================================================
   DARK THEME OVERRIDES
   ========================================================= */
[data-bs-theme="dark"] {
    --bs-body-bg: #212529;
    --bs-body-color: #dee2e6;
    --bs-emphasis-color: #fff;

    /* Revert to lighter blue for dark mode readability */
    --bs-link-color: #6ea8fe; 
    --bs-link-color-rgb: 110, 168, 254;
    --bs-link-hover-color: #9ec5fe;
    
    --bs-card-bg: #343a40; 
    --bs-card-border-color: #495057;
    --bs-border-color: #495057;

    /* Global fix for any '.bg-light' elements */
    --bs-light-rgb: 52, 58, 64;

    /* --- FIX: Navbar Background Override --- */
    /* Forces the navbar to be dark grey in dark mode, overriding the light mode !important */
    .navbar.bg-body {
        background-color: rgba(33, 37, 41, 0.95) !important;
    }

    .card.mb-4 .card-body {
        background-color: #2c3034;
    }

    h1, h2, h3, h4, h5, h6, .navbar-brand {
        color: var(--bs-emphasis-color);
    }
    
    .modal-header, .modal-footer {
        border-color: #495057;
    }
    
    .dropdown-menu {
        --bs-dropdown-bg: #343a40;
        --bs-dropdown-link-color: #dee2e6;
        --bs-dropdown-link-hover-bg: #495057;
        --bs-dropdown-border-color: #495057;
    }
    
    /* --- Select2 Dark Theme Overrides --- */
    
    .select2-selection {
        background-color: #212529 !important;
        border-color: #495057 !important;
        color: #dee2e6 !important;
    }
    
    .select2-dropdown {
        background-color: #343a40 !important;
        border-color: #495057 !important;
        color: #dee2e6 !important;
    }
    
    .select2-search__field {
        background-color: #2b3035 !important;
        color: #dee2e6 !important;
        border-color: #495057 !important;
    }

    .select2-results__option {
        background-color: #343a40 !important;
        color: #dee2e6 !important;
    }
    
    .select2-results__option--highlighted {
        background-color: #0d6efd !important; /* Keep Bootstrap Primary Blue for selection visibility */
        color: #fff !important;
    }
    
    .select2-selection__choice {
        background-color: #495057 !important;
        border-color: #6c757d !important;
        color: #fff !important;
    }
    
    .select2-selection__choice__remove {
        color: #dee2e6 !important;
        border-right: 1px solid #6c757d !important;
    }
    
    .select2-selection__choice__remove:hover {
        background-color: #dc3545 !important;
        color: #fff !important;
    }
}

/* ==========================================================================
   Universal Card Styles (Used by _book_card.html)
   ========================================================================== */

/* 2x3 Aspect Ratio Utility (Standard Book Size) */
.ratio-2x3 {
    --bs-aspect-ratio: 150%; /* 3/2 = 1.5 */
}

/* Object Fit Utility */
.object-fit-cover {
    object-fit: cover;
}

/* Multi-line truncation for titles */
.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Hover Lift Effect */
.book-card-hover {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.book-card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
}

/* ==========================================================================
   Book Detail & Dense Card Styles
   ========================================================================== */

/* Makes the left sidebar stick below the navbar */
.sticky-sidebar-offset {
    position: sticky;
    top: 90px; /* Height of navbar + some padding */
    z-index: 10;
}

/* Dense Pack Card Styling */
.pack-card-dense {
    transition: transform 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
}

.pack-card-dense:hover {
    transform: translateY(-2px);
    border-color: var(--bs-primary) !important;
}

/* Ensure links inside the stretched-link container (like Author) still work */
.z-index-raised {
    position: relative;
    z-index: 2;
}

/* Tighter thumbnails for the 2x2 grid */
.pack-card-dense .dense-grid-img {
    height: 55px; /* Creates a nice compact square */
    width: 100%;
    object-fit: cover;
    border-radius: 3px;
    border: 1px solid rgba(0,0,0,0.1);
}

/* Dark mode border adjustment for images */
[data-bs-theme="dark"] .pack-card-dense .dense-grid-img {
    border-color: rgba(255,255,255,0.1);
}

/* ==========================================================================
   Pack Detail Gallery
   ========================================================================== */

/* Constrain the main image */
.pack-main-image {
    max-height: 500px;
    width: 100%;
    object-fit: contain; /* Ensures the whole image is visible without cropping */
    background-color: rgba(0,0,0,0.03); /* Subtle backing for transparent PNGs or aspect ratio diffs */
    border-radius: 0.5rem;
}

/* Thumbnail Strip */
.gallery-thumbnail {
    width: 60px; /* Reduced from 80px to fit more per row */
    height: 60px;
    object-fit: cover;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s ease, border-color 0.2s ease;
    border: 2px solid transparent;
}

.gallery-thumbnail:hover {
    opacity: 1;
}

.gallery-thumbnail.active {
    opacity: 1;
    border-color: var(--bs-primary);
}

/* ==========================================================================
   Mobile Header & Navigation Fixes
   ========================================================================== */

/* GLOBAL NAV FIX: Prevent "Full Books" from wrapping on Desktop */
.navbar-nav .nav-link {
    white-space: nowrap;
}

/* 1. Navbar Container Layout */
/* We MUST allow wrapping so the menu drops to the next line when opened */
.navbar > .container,
.navbar > .container-fluid {
    display: flex;
    flex-wrap: wrap; /* CRITICAL: Ensures menu drops below brand/toggle */
    align-items: center;
    justify-content: space-between;
}

/* 2. Brand Truncation (Mobile Only) */
@media (max-width: 576px) {
    /* Restrict brand width to leave room for the hamburger icon */
    .navbar-brand {
        max-width: 70%; 
        margin-right: 0;
    }
    
    /* Ensure the text cuts off with ... instead of wrapping awkwardly */
    .navbar-brand span.fw-bold {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* Shrink the Beta badge slightly */
    .navbar-brand .badge {
        font-size: 0.6em !important;
        vertical-align: top;
    }
}

/* 3. Mobile Menu Layout (Applied to Base/App View) */
@media (max-width: 991.98px) {
    /* Center alignment for the drawer */
    .navbar-collapse {
        text-align: center;
        padding-top: 1rem;
        padding-bottom: 1rem;
        border-top: 1px solid var(--bs-border-color);
        margin-top: 1rem;
        width: 100%; /* Ensure it takes full width when expanded */
        flex-basis: 100%; /* Force it to be a new row */
    }

    /* Reset Dropdowns to center */
    .dropdown-menu {
        text-align: center;
        background-color: transparent;
        border: none;
        padding: 0;
        margin-bottom: 1rem;
    }
    
    /* Center the Avatar/Profile section if it exists */
    .dropdown-menu[aria-labelledby="navbarDropdown"] {
        margin-bottom: 0;
    }

    /* Stack buttons full width */
    .navbar-nav .btn {
        display: block;
        width: 100%;
        margin-bottom: 0.5rem;
    }
    
    /* Ensure the button container allows full width children */
    .d-grid {
        width: 100%;
    }

    /* Give the search bar proper spacing */
    form[role="search"] {
        margin-bottom: 1.5rem;
        width: 100%;
    }
}