/* ==========================================================================
   Clandestine Clause - Leather Bound Books / Dim Fire Theme
   ========================================================================== */

/* --- 1. Root Variables for Theme Management --- */
:root {
    /* Background: Neutral Beiges transitioning to subtle warm tones */
    --theme-bg-top: #f5f5f4;
    --theme-bg-mid: #faf0e6;
    --theme-bg-bottom: #fff0db;

    /* Components: Warm Browns & Creams */
    --theme-card-bg: #ffffff;
    --theme-navbar-bg: #ffffff;
    --theme-component-border: #d6d3d1;

    /* Text: Warm & Readable */
    --theme-text-main: #44403c;
    --theme-text-muted: #78716c;
    --theme-text-on-accent: #ffffff;

    /* Accents: Fire, Leather, & Ranks */
    --theme-accent-fire: #c2410c;
    --theme-accent-fire-darker: #9a3412;
    --theme-accent-leather: #78350f;
    --theme-link: var(--theme-text-main);
    --theme-link-hover: #312e2b;

    /* Colors for ranking indicators/buttons */
    --rank-1-color: #f59e0b;
    /* Amber/Gold */
    --rank-2-color: #a16207;
    /* Darker Gold/Bronze */
    --rank-3-color: #78716c;
    /* Muted Stone/Brown */

    /* Scrollbar: Leather accent */
    --theme-scrollbar-thumb: var(--theme-accent-leather);
    --theme-scrollbar-thumb-hover: #572a0a;
}


/* --- 2. Base Body & Navbar Styles --- */
body {
    font-family: 'Merriweather Sans', sans-serif;
    background: linear-gradient(to bottom,
            var(--theme-bg-top) 0%,
            var(--theme-bg-mid) 60%,
            var(--theme-bg-bottom) 100%);
    background-attachment: fixed;
    min-height: 100vh;
    padding-top: 85px;
    /* Space for fixed navbar */
    color: var(--theme-text-main);
}

.navbar {
    background-color: var(--theme-navbar-bg) !important;
    border-color: var(--theme-component-border) !important;
}

.nav-link {
    color: var(--theme-link) !important;
    font-weight: 500;
}

.nav-link:hover,
.nav-link:focus {
    color: var(--theme-link-hover) !important;
}

.nav-link.active {
    color: var(--theme-accent-fire-darker) !important;
}

.navbar .dropdown-toggle::after {
    display: none;
    /* Hide caret when using only an icon */
}

.navbar .dropdown-menu {
    background-color: var(--theme-card-bg);
    border-color: var(--theme-component-border);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}

.navbar .dropdown-header {
    color: var(--theme-text-main);
    font-weight: 700;
    padding: 0.5rem 1rem;
    margin-bottom: 0.25rem;
}

.navbar .dropdown-item {
    color: var(--theme-link);
    padding: 0.5rem 1rem;
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
    color: var(--theme-link-hover);
    background-color: #e7e5e4;
}

.navbar .dropdown-menu .btn.dropdown-item {
    text-align: left;
}

#navbar-logo-img {
    height: 30px;
    width: auto;
}


/* --- 3. Main Content & Form Styles --- */
.card {
    background-color: var(--theme-card-bg);
    border: 1px solid var(--theme-component-border);
}

.card-title {
    color: var(--theme-text-main);
    font-weight: 700;
}

.text-muted {
    color: var(--theme-text-muted) !important;
}

.form-label {
    color: var(--theme-text-main);
    font-weight: 500;
}

.form-control,
.form-control:focus {
    background-color: #ffffff;
    color: var(--theme-text-main);
    border-color: var(--theme-component-border);
    box-shadow: none;
}

.form-control:focus {
    border-color: var(--theme-accent-fire);
    box-shadow: 0 0 0 0.25rem rgba(194, 65, 12, 0.25);
}

.form-text {
    color: var(--theme-text-muted);
}

.form-control::placeholder {
    color: var(--theme-text-muted);
    opacity: 0.7;
}

.btn-submit-cozy {
    background-color: var(--theme-accent-fire);
    border-color: var(--theme-accent-fire);
    color: var(--theme-text-on-accent);
    padding: 0.5rem 1rem;
    font-weight: 500;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.btn-submit-cozy:hover,
.btn-submit-cozy:focus {
    background-color: var(--theme-accent-fire-darker);
    border-color: var(--theme-accent-fire-darker);
    color: var(--theme-text-on-accent);
    box-shadow: 0 0 0 0.25rem rgba(154, 52, 18, 0.5);
}


/* --- 4. Dashboard Styles --- */
/* Section styling for the dashboard */
.dashboard-section {
    margin-bottom: 2rem;
    /* Space between sections */
}

.dashboard-section:last-child {
    margin-bottom: 0;
}

.dashboard-section-title-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--theme-component-border);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}

.dashboard-section-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--theme-text-main);
    margin-bottom: 0;
    /* Remove margin as wrapper handles it */
}

/* --- 5. Wishlist & Ranking Component Styles --- */

/* Container for the set of 1, 2, 3 buttons */
.rank-buttons {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* Base styles shared by interactive labels and static indicators */
.rank-label,
.rank-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    font-weight: 700;
    font-size: 1.2rem;
    flex-shrink: 0;
    transition: all 0.2s ease-in-out;
}

/* Styles specific to the interactive labels on the choosing page */
.rank-label {
    border: 2px solid var(--theme-component-border);
    color: var(--theme-text-muted);
    cursor: pointer;
    background-color: #ffffff;
}

.rank-label:hover {
    border-color: var(--theme-text-main);
    transform: scale(1.05);
}

/* Styles specific to the static indicators on the confirmation page */
.rank-indicator {
    color: #ffffff;
    /* Text color is always white for static indicators */
}

/* Color classes for static indicators */
.rank-indicator.rank-1 {
    background-color: var(--rank-1-color);
}

.rank-indicator.rank-2 {
    background-color: var(--rank-2-color);
}

.rank-indicator.rank-3 {
    background-color: var(--rank-3-color);
}

/* Styling for interactive labels when their corresponding radio is checked */
input[type="radio"].rank-1-radio:checked+.rank-label {
    background-color: var(--rank-1-color);
    border-color: var(--rank-1-color);
    color: #ffffff;
    transform: scale(1.1);
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
}

input[type="radio"].rank-2-radio:checked+.rank-label {
    background-color: var(--rank-2-color);
    border-color: var(--rank-2-color);
    color: #ffffff;
    transform: scale(1.1);
    box-shadow: 0 0 10px rgba(161, 98, 7, 0.5);
}

input[type="radio"].rank-3-radio:checked+.rank-label {
    background-color: var(--rank-3-color);
    border-color: var(--rank-3-color);
    color: #ffffff;
    transform: scale(1.1);
    box-shadow: 0 0 10px rgba(120, 113, 108, 0.5);
}

/* Applied to ranked preferences that were NOT assigned to the user. */
/* This rule fades them into the background. */
.not-assigned {
    opacity: 0.5;
    transition: all 0.3s ease-in-out;
}

/* Applied to the list item that IS the assigned recipient. */
/* This makes it stand out with a background color, shadow, and scaling effect. */
.assigned-recipient {
    border-radius: 0.375rem;
    /* Match bootstrap's radius */
    background-color: #fffaf0;
    /* A very light warm cream */
    transform: scale(1.02);
    /* Slightly larger to pop out */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    z-index: 2;
    position: relative;
}

/* Container for the scrollable list of wishlists */
.wishlist-container {
    max-height: 50vh;
    /* Adjust height as needed */
    overflow-y: auto;
    border: 1px solid var(--theme-component-border);
    border-radius: 0.375rem;
    padding: 0.5rem;
    background-color: var(--theme-bg-top);
}

.wishlist-item-description h6 {
    font-weight: 700;
    color: var(--theme-text-main);
    margin-bottom: 0.25rem;
    font-size: 0.9rem;
}

.wishlist-item-description p {
    font-size: 0.85rem;
    color: var(--theme-text-muted);
    margin-bottom: 0.75rem;
}


/* --- 5. Miscellaneous Styles --- */

/* Flash Message */
.flash {
    position: fixed;
    top: 85px;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    max-width: 90%;
    min-width: 300px;
    padding: 0.75rem 1.25rem;
    background-color: var(--theme-bg-mid);
    color: var(--theme-text-main);
    border: 1px solid var(--theme-component-border);
    border-radius: 0.375rem;
    text-align: center;
    z-index: 1031;
    font-size: 0.9rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Custom Textarea Scrollbar */
textarea::-webkit-scrollbar {
    width: 8px;
}

textarea::-webkit-scrollbar-track {
    background: #e7e5e4;
    border-radius: 10px;
}

textarea::-webkit-scrollbar-thumb {
    background: var(--theme-scrollbar-thumb);
    opacity: 0.7;
    border-radius: 10px;
}

textarea::-webkit-scrollbar-thumb:hover {
    background: var(--theme-scrollbar-thumb-hover);
    opacity: 0.9;
}

/* Exchange info table on passcode page */
.exchange-info-table {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    color: var(--theme-text-muted);
}

.exchange-info-table td {
    padding: 0.125rem 0.5rem;
    vertical-align: top;
}

.exchange-info-label {
    text-align: left;
    font-weight: 500;
    white-space: nowrap;
}

.exchange-info-value {
    text-align: left;
}