/* 1. Ensure the old header image placeholder is completely hidden */
/* This is a safeguard, as we deleted the HTML line above */
.site-header-image {
    display: none !important;
}

/* 2. Apply the new full background image to the entire page */
/* 2. Apply background ONLY to the main site (Not the editor) */
body.custom-background {
    background-image: url('../images/my_site_background.jpg'); 
    background-size: cover;          
    background-attachment: fixed;    
    background-position: center center; 
    background-repeat: no-repeat;
    background-color: #333333; 
}

/* Ensure the HTML tag is dark but has no image */
html {
    background-color: #333333;
    background-image: none;
}

/* --- 1. Apply Translucent Background to the Main Content Area --- */
/* This targets the container holding the 'TRAITS' heading and filters. */
.container-fluid, .container {
    /* We removed the background-color here so the rule at the bottom can work */
    margin-top: 0; 
    padding: 3%; /* Changed to % */
}

.logo-container {
    margin: 0;
    position: relative;
    z-index: 1;
    padding: 0 !important;
    background: transparent !important;
}

.logo-wrapper {
    display: inline-block;
    position: relative;
    margin: 0 auto;
    overflow: visible; /* Changed from hidden to allow glitter to extend */
    padding: 0.5% 6%; /* Wider horizontal padding to prevent clipping */
    background: transparent !important;
}

.site-logo {
    max-width: 40vw;
    height: auto;
    display: block;
    transition: transform 0.15s ease-out;
    transform-origin: center;
    position: relative;
    z-index: 1;
}

/* REMOVED the ::before pseudo-element that was creating the white overlay */

/* Glitter particle styles */
.glitter-particle {
    position: absolute;
    pointer-events: none;
    z-index: 10;
    animation: sparkle 3s ease-out forwards;
}

@keyframes sparkle {
    0% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.2) rotate(180deg);
    }
    100% {
        opacity: 0;
        transform: scale(0.5) rotate(360deg);
    }
}

.glitter-particle {
    position: absolute;
    pointer-events: none;
    z-index: 10;
    animation: sparkle 1s ease-out forwards;
}

/* Different glitter shapes with glow shadows only */
.glitter-star {
    width: 8px;
    height: 8px;
    background: radial-gradient(circle, #fff 0%, #ffd700 50%, transparent 70%) !important;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.8)) 
            drop-shadow(0 0 6px rgba(255, 255, 255, 0.6));
}

.glitter-diamond {
    width: 6px;
    height: 6px;
    background: linear-gradient(135deg, #fff 0%, #ffd700 50%, #fff 100%) !important;
    transform: rotate(45deg);
    filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.8)) 
            drop-shadow(0 0 6px rgba(255, 255, 255, 0.6));
}

.glitter-circle {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0%, #ffb6c1 50%, transparent 70%) !important;
    box-shadow: 0 0 4px rgba(255, 182, 193, 0.8), 
                0 0 8px rgba(255, 255, 255, 0.6);
}

.glitter-sparkle {
    width: 10px;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, #fff 50%, transparent 100%) !important;
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.9)) 
            drop-shadow(0 0 6px rgba(255, 255, 255, 0.6));
}

.glitter-sparkle::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 10px;
    background: linear-gradient(180deg, transparent 0%, #fff 50%, transparent 100%);
    left: 4px;
    top: -4px;
}

/* Purple glitter variants with purple glow shadows */
.glitter-purple-star {
    width: 8px;
    height: 8px;
    background: radial-gradient(circle, #e6d5ff 0%, #b19cd9 50%, transparent 70%) !important;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    filter: drop-shadow(0 0 3px rgba(177, 156, 217, 0.8)) 
            drop-shadow(0 0 6px rgba(230, 213, 255, 0.6));
}

.glitter-purple-diamond {
    width: 6px;
    height: 6px;
    background: linear-gradient(135deg, #e6d5ff 0%, #9b7cb6 50%, #e6d5ff 100%) !important;
    transform: rotate(45deg);
    filter: drop-shadow(0 0 3px rgba(155, 124, 182, 0.8)) 
            drop-shadow(0 0 6px rgba(230, 213, 255, 0.6));
}

.glitter-purple-circle {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: radial-gradient(circle, #d4b5ff 0%, #8b5cf6 50%, transparent 70%) !important;
    box-shadow: 0 0 4px rgba(139, 92, 246, 0.8), 
                0 0 8px rgba(177, 156, 217, 0.6);
}

/* Mobile devices */
@media (max-width: 768px) {
    .site-logo {
        max-width: 70vw;
    }
    
    .logo-wrapper {
        padding: 30px 50px;
    }
}

/* Force remove all backgrounds from logo area BUT NOT glitter */
.logo-container,
.logo-wrapper,
.site-logo {
    background: none !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
}

/* Make sure glitter particles KEEP their backgrounds */
.glitter-particle,
.glitter-star,
.glitter-diamond,
.glitter-circle,
.glitter-sparkle,
.glitter-purple-star,
.glitter-purple-diamond,
.glitter-purple-circle {
    background: revert !important;
    background-color: revert !important;
}

/* Or more specifically, re-apply glitter backgrounds */
.glitter-star {
    background: radial-gradient(circle, #fff 0%, #ffd700 50%, transparent 70%) !important;
}

.glitter-diamond {
    background: linear-gradient(135deg, #fff 0%, #ffd700 50%, #fff 100%) !important;
}

.glitter-circle {
    background: radial-gradient(circle, #fff 0%, #ffb6c1 50%, transparent 70%) !important;
}

.glitter-sparkle {
    background: linear-gradient(90deg, transparent 0%, #fff 50%, transparent 100%) !important;
}

.glitter-purple-star {
    background: radial-gradient(circle, #e6d5ff 0%, #b19cd9 50%, transparent 70%) !important;
}

.glitter-purple-diamond {
    background: linear-gradient(135deg, #e6d5ff 0%, #9b7cb6 50%, #e6d5ff 100%) !important;
}

.glitter-purple-circle {
    background: radial-gradient(circle, #d4b5ff 0%, #8b5cf6 50%, transparent 70%) !important;
}

/* Override Bootstrap classes on logo container */
.logo-container.text-center,
.logo-container.py-3 {
    background: transparent !important;
}

/* --- 2. Apply Translucent Background to the Trait Boxes (Cards) --- */
/* This targets the individual white cards showing the traits (Default (CAP), etc.) */
.card, .card-body {
    /* Use a slightly higher opacity (closer to solid white) for readability on the cards */
    background-color: rgba(255, 255, 255, 0.95) !important; 
    border: none !important; /* Remove borders if you have them */
}

/* --- 3. Keep the body and main app wrapper transparent (as needed) --- */
body.custom-background {
    /* Ensure your background image is set here */
    background-image: url('../images/my_site_background.jpg'); 
    background-size: cover;          
    background-attachment: fixed;    
    background-position: center center; 
    background-repeat: no-repeat;
    background-color: #333333; 
}

#app {
    background-color: transparent !important; 
    padding: 0 !important;
}

/* Ensure nested rows and columns don't override the main container's background */
.row, .col {
    background-color: transparent !important;
}

/* --- CONTAINER SETUP --- */
#gridView .col-md-3.col-6 {
    position: relative;
    z-index: 1;
    overflow: visible; 
    transition: transform 0.4s ease-out;
    padding: 10px; 
}

/* --- HOVER FLOAT --- */
#gridView .col-md-3.col-6:hover {
    transform: translateY(-10px);
    z-index: 100;
}

/* --- IMAGE STYLES & GLOW --- */
#gridView .col-md-3.col-6 img.img-thumbnail {
    transition: all 0.4s ease;
    border-radius: 15px; 
    position: relative;
    z-index: 10; 
    /* Start with transparent border for layout stability */
    border: 3px solid transparent;
    background-color: #fff; 
}

#gridView .col-md-3.col-6:hover img.img-thumbnail {
    /* The Magical Purple Glow */
    box-shadow: 
        0 0 20px rgba(160, 100, 255, 0.8), 
        0 0 40px rgba(160, 100, 255, 0.4);
    
    /* THE RUNNING SPARKLE BORDER (Updated to Dark Purple) */
    border: 3px dashed #5a189a; 
    animation: sparkle-run 4s linear infinite; 
}

/* Sparkle Animation: Pulses between Dark Purple and White */
@keyframes sparkle-run {
    0% { 
        border-color: #5a189a;
        box-shadow: 0 0 10px #5a189a, 0 0 20px rgba(160, 100, 255, 0.8);
    }
    50% {
        border-color: #e6d5ff; /* Flash bright lavender/white */
        box-shadow: 0 0 25px #e6d5ff, 0 0 40px rgba(160, 100, 255, 1);
    }
    100% {
        border-color: #5a189a;
        box-shadow: 0 0 10px #5a189a, 0 0 20px rgba(160, 100, 255, 0.8);
    }
}

/* --- THE MOON (Top Left) --- */
#gridView .col-md-3.col-6::after {
    /* SVG Moon: Stroke changed to Dark Purple (%235a189a) */
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='45' height='45'%3E%3Cpath fill='%23e6d5ff' stroke='%235a189a' stroke-width='1.5' d='M9.8,2.1c0.8,6.8,6.6,12.1,13.5,11.3c-1.8,5.8-7.9,9.2-13.6,7.5S0.5,13,2.2,7.3C3.5,3.3,7.6,0.9,11.7,0C10.7,0.6,9.9,1.3,9.8,2.1z'/%3E%3C/svg%3E");
    position: absolute;
    top: 0; left: 0;
    opacity: 0;
    pointer-events: none;
    z-index: 110; 
    /* Purple Glow on Moon */
    filter: drop-shadow(0 0 15px rgba(160, 100, 255, 1));
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform: scale(0.5) rotate(-45deg) translate(-50%, -50%);
}

#gridView .col-md-3.col-6:hover::after {
    opacity: 1;
    top: 5px; left: 5px;
    transform: scale(1) rotate(0deg) translate(-30%, -30%);
}

/* --- FALLING STARS (Polyrhythmic Randomness) --- */

/* Shared Setup */
#gridView .col-md-3.col-6 > div:first-child::before,
#gridView .col-md-3.col-6 > div:first-child::after,
#gridView .col-md-3.col-6::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='22' height='22'%3E%3Cpath fill='%23ffd700' d='M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z'/%3E%3C/svg%3E");
    position: absolute;
    top: 5%; 
    opacity: 0; 
    pointer-events: none;
    z-index: 20; 
    will-change: transform, top, opacity;
}

/* --- STAR 1 (Left Side) --- */
/* Falls fast and spins quickly */
#gridView .col-md-3.col-6::before {
    left: 12%;
}
#gridView .col-md-3.col-6:hover::before {
    animation: gravity-fall-spin 2.2s ease-in infinite; 
}

/* --- STAR 2 (Right Side) --- */
/* Falls slower, starts later */
#gridView .col-md-3.col-6 > div:first-child::before {
    left: 85%;
}
#gridView .col-md-3.col-6:hover > div:first-child::before {
    animation: gravity-fall-spin 3.1s ease-in infinite; 
    animation-delay: 0.5s;
}

/* --- STAR 3 (The "Wildcard" Middle) --- */
/* Falls medium speed, huge delay, spins backwards */
#gridView .col-md-3.col-6 > div:first-child::after {
    left: 40%;
}
#gridView .col-md-3.col-6:hover > div:first-child::after {
    animation: gravity-fall-spin-reverse 2.7s ease-in infinite; 
    animation-delay: 1.4s;
}

/* --- ANIMATIONS --- */

/* Normal Fall */
@keyframes gravity-fall-spin {
    0% { opacity: 0; transform: translateY(0) rotate(0deg) scale(0.6); }
    15% { opacity: 1; }
    /* REMOVED "top: 120%" and added translateY instead */
    100% { opacity: 0; transform: translateY(150px) rotate(360deg) scale(1); }
}

/* Reverse Spin Fall (Adds variety) */
@keyframes gravity-fall-spin-reverse {
    0% { opacity: 0; transform: translateY(0) rotate(0deg) scale(0.6); }
    15% { opacity: 1; }
    /* REMOVED "top: 120%" and added translateY instead */
    100% { opacity: 0; transform: translateY(150px) rotate(-360deg) scale(1.2); }
}

/* --- Global Falling Stars Container --- */
#global-star-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 102; 
    overflow: hidden;
}

/* --- Individual Star Styling --- */
.global-star {
    /* ADD !important HERE */
    /* This forces the star to stay fixed even if the script tries to make it absolute */
    position: fixed !important; 
    
    /* ADD !important HERE */
    /* This ensures they stay on top of the background */
    z-index: 105 !important;    
    
    pointer-events: none;
    top: -10%;
    
    /* Using rem for drop shadow ensures it scales slightly */
    filter: drop-shadow(0 0 0.3rem rgba(255, 255, 255, 0.4));
    animation-timing-function: linear;
    animation-iteration-count: 1;
}

/* --- Animation 1: Clockwise Spin --- */
@keyframes globalFallSpin {
    from { transform: translateY(0) rotate(0deg); }
    to { transform: translateY(120vh) rotate(360deg); }
}

/* --- Animation 2: Counter-Clockwise (Reverse) Spin --- */
@keyframes globalFallSpinReverse {
    from { transform: translateY(0) rotate(0deg); }
    to { transform: translateY(120vh) rotate(-360deg); }
}

/* =========================================
   GLOBAL DARK MODE & DREAM THEME
   ========================================= */

/* 1. Main Background */
body {
    color: #e6d5ff;
    min-height: 100vh;
}

/* 2. Navbar Customization */
.navbar, .navbar-default {
    background-color: #1a0b2e !important; /* Darker purple for nav */
    border-bottom: 1px solid #5a189a;
}

.navbar-nav > li > a {
    color: #e6d5ff !important;
}

/* 3. Cards & Containers (The white boxes) */
.card, .card-body, .list-group-item, .bg-light {
    background-color: #1a0b2e !important; /* Matches navbar */
    border-color: #5a189a !important; /* Dark purple borders */
    color: #fff;
}

/* 4. Inputs & Dropdowns (Search bars, etc) */
.form-control, .custom-select {
    background-color: #2d1b4e;
    border: 1px solid #5a189a;
    color: #fff;
}

.form-control:focus {
    background-color: #2d1b4e;
    color: #fff;
    box-shadow: 0 0 5px #ffd700; /* Gold glow when typing */
}

/* 5. Links (Making them readable) */
a {
    color: #bfaee3; /* Soft purple link */
    transition: color 0.2s;
}

a:hover {
    color: #ffd700; /* Gold on hover */
    text-decoration: none;
}

/* 6. Breadcrumbs (The navigation trail) */
.breadcrumb {
    background-color: rgba(90, 24, 154, 0.2);
}

/* 7. Headings */
h1, h2, h3, h4, h5, h6 {
    color: #fff;
    text-shadow: 0 0 5px rgba(160, 100, 255, 0.5);
}

/* 8. Table/Grid adjustments */
.table {
    color: #e6d5ff;
}
.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.05);
}

/* 9. Buttons (Optional: Dreamy Buttons) */
.btn-primary {
    background-color: #5a189a;
    border-color: #4a0f85;
}

.btn-primary:hover {
    background-color: #7b2cbf;
    box-shadow: 0 0 10px #7b2cbf;
}

/* =========================================
   DARK MODE OVERRIDES (Add to bottom of file)
   ========================================= */

/* 1. Kill the white background utility class */
.bg-white {
    background-color: #1a0b2e !important;
    color: #e6d5ff !important;
    border-color: #5a189a !important;
}

/* 2. Force main layout containers to be transparent */
/* This fixes the big white box behind everything */
#app > main, 
.main-content, 
.site-content {
    background-color: transparent !important;
}

/* 3. Style MAIN CONTENT (Masterlist, User Profiles, etc) */
/* This targets the column directly since there is no inner container */
.main-content {
    /* The Deep Night Sky Gradient */
    background: linear-gradient(180deg, #0f0c29 0%, #302b63 50%, #24243e 100%) !important;
    
    /* Box Styling */
    border: 1px solid #5a189a;
    border-radius: 1rem;       
    
    /* We keep the p-4 padding from bootstrap, but ensure text is white */
    color: #fff !important;    
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.7); 
}

/* 3.5. Fix Breadcrumb Background */
/* The "Lorekeeper > Character Masterlist" bar often has a grey background. */
/* This makes it transparent so it blends into your gradient. */
.breadcrumb {
    background-color: transparent !important;
    padding-left: 0; 
}
.breadcrumb-item.active {
    color: #bfaee3 !important; /* Light purple for current page text */
}

/* 3.6 Fix Headings */
.main-content h1 {
    color: #fff !important;
    text-shadow: 0 0 5px #5a189a;
}

/* 3.5. SPECIAL FIX FOR MASTERLIST */
/* Sometimes the Masterlist is wrapped in a plain div, this catches it */
.row.justify-content-center {
    background: transparent !important; /* Prevents double backgrounds */
}

/* 4. Navbar Fix */
.navbar, .navbar-default {
    background-color: #1a0b2e !important;
    border-bottom: 1px solid #5a189a;
}
.navbar-nav > li > a {
    color: #e6d5ff !important;
}

/* 5. Inputs & Selects */
.form-control, .custom-select, select.form-control {
    background-color: #2d1b4e !important;
    border: 1px solid #5a189a !important;
    color: #fff !important;
}

/* 6. Character Card Fixes */
.card, .thumbnail, .img-thumbnail {
    background-color: #2d1b4e !important; /* Kept your solid purple preference */
    border: 1px solid #5a189a !important;
    color: #fff; /* Removed !important so Red text can work */
}

/* Fix the text color inside the cards */
.card-body, .caption {
    color: #e6d5ff !important;
}

/* =========================================
   FINAL FIX V3: PIXEL PERFECT MATCH
   ========================================= */

/* --- 1. TEXT COLOR MATCHING --- */
/* The top box uses Lavender (#bfaee3) for the "Select..." text. 
   We now force the bottom box to use that exact same color. */
select.form-control,
select.custom-select {
    color: #bfaee3 !important; /* Lavender (Matches "Select User") */
    opacity: 1 !important;
}

/* Ensure the top box (Selectize) text stays Lavender too */
.selectize-input input::placeholder {
    color: #bfaee3 !important;
    opacity: 1 !important;
}
.selectize-input {
    color: #bfaee3 !important;
}


/* --- 2. BOTTOM BOX (Standard) --- */
select.form-control, 
select.custom-select {
    background-color: #2d1b4e !important;
    border: 1px solid #5a189a !important;
    border-radius: 5px !important;
    min-height: 38px !important;
    box-shadow: none !important;
    font-size: 1rem !important;

    /* THE ARROW FIX */
    /* 1. Exact Dimensions: 10px wide, 5px tall (Matches top box exactly) */
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 5'%3E%3Cpath d='M0 0h10L5 5z' fill='white'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-size: 10px 5px !important; 
    
    /* 2. Position Shift: Moves the arrow further LEFT */
    /* Increased from 12px to 18px to fix the "too far right" issue */
    background-position: right 18px center !important; 
    
    padding-right: 35px !important; /* Adds space so text doesn't hit arrow */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}


/* --- 3. TOP BOX (Selectize) --- */
/* We just clean up the container, leaving the arrow alone */
.selectize-control {
    height: auto !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

.selectize-input {
    background-color: #2d1b4e !important;
    border: 1px solid #5a189a !important;
    border-radius: 5px !important;
    box-shadow: none !important;
    min-height: 38px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0.375rem 0.75rem !important;
}

/* Ensure the top arrow is white */
.selectize-control.single .selectize-input:after {
    border-color: #fff transparent transparent transparent !important;
    border-width: 5px 5px 0 5px !important;
    right: 18px !important; /* Match the bottom one's position */
}


/* --- 4. EXTRAS --- */
.selectize-dropdown {
    background-color: #1a0b2e !important;
    border: 1px solid #5a189a !important;
    color: #e6d5ff !important;
    margin-top: 5px !important;
}
.selectize-dropdown .option.active,
.selectize-dropdown .option:hover {
    background-color: #5a189a !important;
    color: #fff !important;
}
.toggle.btn, .toggle-group, .btn-light.toggle-off {
    border-color: #5a189a !important;
    background-color: #1a0b2e !important;
    color: #e6d5ff !important;
}
.toggle-on.btn { background-color: #5a189a !important; color: #fff !important; }
.toggle-handle.btn { background-color: #e6d5ff !important; border-color: #5a189a !important; }
.fa-question-circle, [data-toggle="tooltip"] { color: #e6d5ff !important; opacity: 1 !important; }

/* =========================================
   TINYMCE EDITOR (Description Box) DARK MODE
   ========================================= */

/* --- 1. The Outer UI (Toolbar, Borders) --- */
.tox-tinymce {
    border: 1px solid #5a189a !important;
    border-radius: 5px !important;
    box-shadow: none !important;
}

/* Toolbar Background */
.tox-editor-header,
.tox-toolbar__primary {
    background: #2d1b4e !important; /* Flat Dark Purple */
    background-color: #2d1b4e !important; 
    border-bottom: 1px solid #5a189a !important;
}

/* Buttons (Icons) */
.tox-tbtn {
    color: #e6d5ff !important;
}
.tox-tbtn svg {
    fill: #e6d5ff !important;
}

/* Button Hover State */
.tox-tbtn:hover,
.tox-tbtn--enabled {
    background-color: #5a189a !important; /* Purple Highlight */
    color: #fff !important;
}
.tox-tbtn:hover svg,
.tox-tbtn--enabled svg {
    fill: #fff !important;
}

/* Status Bar (Bottom) */
.tox-statusbar {
    background-color: #1a0b2e !important;
    border-top: 1px solid #5a189a !important;
    color: #bfaee3 !important;
}
.tox-statusbar__wordcount,
.tox-statusbar__path-item {
    color: #bfaee3 !important;
}

/* --- 2. The Internal Typing Area --- */
body#tinymce {
    background-color: #2d1b4e !important; /* Dark Background */
    background-image: none !important;     /* Kills the stars image */
    color: #fff !important;                /* White Text */
    
    /* THE FIX FOR THE BLACK OUTLINE: */
    /* We change margin (outer space) to padding (inner space) */
    /* This fills the whole box with purple */
    margin: 0 !important;   
    padding: 1rem !important;               
    
    font-family: 'Nunito', sans-serif !important;
}
body#tinymce a {
    color: #ffd700 !important;             /* Gold Links */
    text-decoration: underline;
}
body#tinymce p {
    color: #fff !important;
}


/* =========================================
   BREADCRUMBS COLOR FIX
   ========================================= */

/* 1. Make the links (Lorekeeper, Admin Panel) bright lavender */
.breadcrumb-item a {
    color: #e6d5ff !important; 
    text-shadow: 0 0 5px rgba(160, 100, 255, 0.4); /* Optional: Adds a tiny glow */
}

/* 2. Make the divider symbol (») bright lavender */
.breadcrumb-item + .breadcrumb-item::before {
    color: #e6d5ff !important;
}

/* 3. Make the active page name (Create MYO Slot) match exactly */
.breadcrumb-item.active {
    color: #e6d5ff !important;
}

/* Optional: Hover effect for the links */
.breadcrumb-item a:hover {
    color: #fff !important; /* Turns pure white when you hover */
    text-decoration: none;
}

/* =========================================
   MAIN CONTENT & USER PROFILE FIXES
   ========================================= */

/* --- 1. Main Content Box (The Purple Background) --- */
.main-content {
    background-color: #2d1b4e !important; 
    background-image: none !important;
    border: 1px solid #5a189a;
    border-radius: 1rem;
    color: #fff; /* Default text is white */
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.7);
}

/* --- 2. Card Containers --- */
/* EXCLUDE the inventory/armoury card from this rule */
.card:not(:has(.card-header-tabs)), 
.card-body:not(:has(.tab-content)), 
.list-group-item, 
.bg-light {
    background-color: #2d1b4e !important;
    background-image: none !important;
    border-color: #5a189a !important;
    color: #fff; /* Default text white */
}

/* --- 3. FIX: Titles & Headers (Black -> White -> Gray Hover) --- */
/* Make headers white EXCEPT those with inline color styles */
h1:not([style*="color"]), 
h2:not([style*="color"]), 
h3:not([style*="color"]), 
h4:not([style*="color"]), 
h5:not([style*="color"]), 
h6:not([style*="color"]) {
    color: #fff !important;
}

/* Remove text-shadow from card body headings so inline colors show properly */
.card-body h1,
.card-body h2,
.card-body h3 {
    text-shadow: none !important;
}

/* Makes Clickable Titles White by default, with no underline */
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
.card-title a,
.user-profile-name a,
.display-4 a {
    color: #fff !important;
    text-decoration: none !important;
    transition: color 0.3s ease;
}

/* HOVER EFFECT: Turns Light Gray to show it is clickable */
h1 a:hover, h2 a:hover, h3 a:hover, 
h4 a:hover, h5 a:hover, h6 a:hover,
.card-title a:hover,
.user-profile-name a:hover,
.display-4 a:hover {
    color: #d1d1d1 !important; /* Light Gray */
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
}




/* =========================================
   USER PROFILE AVATAR FIX (Responsive Circle)
   ========================================= */
.profile-avatar {
    /* 1. Sizing using Percentages */
    width: 60% !important;          /* Sets size relative to the container */
    margin: 0 auto !important;      /* Centers it horizontally */
    display: block !important;
    
    /* 2. Forcing the Perfect Circle */
    aspect-ratio: 1 / 1 !important; /* Forces Height to match Width exactly */
    border-radius: 50% !important;  /* Turns the square into a circle */
    
    /* 3. Image Handling */
    object-fit: cover !important;   /* Crops the image so it doesn't squish/stretch */
}

/* Optional: On mobile, make it a bit bigger since the screen is smaller */
@media (max-width: 768px) {
    .profile-avatar {
        width: 50% !important;
    }
}

/* =========================================
   HIDE "NO COMMENTS" ALERT ONLY
   ========================================= */

/* This hides the yellow/white alert box inside the comments section */
.profile-comments-wrapper .alert {
    display: none !important;
}

/* Optional: If the "There are no comments" text is just a paragraph and not an alert */
.profile-comments-wrapper p:contains("There are no comments") {
    display: none !important;
}

/* =========================================
   BIO COLOR FIX - FINAL SOLUTION
   ========================================= */

/* Headings WITH inline colors should use their inline color */
.card-body h1[style*="color"],
.card-body h2[style*="color"],
.card-body h3[style*="color"],
.card-body h4[style*="color"],
.card-body h5[style*="color"],
.card-body h6[style*="color"] {
    /* This empty rule with higher specificity allows inline styles to work */
}

/* =========================================
   INVENTORY & ARMOURY TABS - ONLY ON PROFILE PAGE
   ========================================= */

/* Target ONLY the specific card with inventory/armoury tabs */
/* This is more specific than before to avoid affecting other tabs */

/* Only apply to cards that have BOTH card-header-tabs AND are in profile context */
.profile-page .card.mb-4:has(.card-header-tabs),
body:has(.profile-avatar) .card.mb-4:has(.card-header-tabs) {
    padding: 0 !important;
}

.profile-page .card.mb-4:has(.card-header-tabs) .card-header,
body:has(.profile-avatar) .card.mb-4:has(.card-header-tabs) .card-header {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* The ul container - ONLY for profile inventory tabs */
.profile-page ul.nav.nav-tabs.card-header-tabs,
body:has(.profile-avatar) ul.nav.nav-tabs.card-header-tabs {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    gap: 0 !important;
    flex-wrap: nowrap !important;
}

/* Each tab item - FORCE 50% */
.profile-page ul.nav.nav-tabs.card-header-tabs li.nav-item,
body:has(.profile-avatar) ul.nav.nav-tabs.card-header-tabs li.nav-item {
    flex: 1 1 50% !important;
    max-width: 50% !important;
    min-width: 50% !important;
    width: 50% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* The clickable tab links - FILL PARENT */
.profile-page ul.nav.nav-tabs.card-header-tabs li.nav-item a.nav-link,
body:has(.profile-avatar) ul.nav.nav-tabs.card-header-tabs li.nav-item a.nav-link {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 15px 10px !important;
    margin: 0 !important;
    text-align: center !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    box-sizing: border-box !important;
    
    border: 2px solid #5a189a !important;
    border-radius: 8px !important;
    background-color: rgba(45, 27, 78, 0.3) !important;
    color: #fff !important;
    transition: all 0.3s ease !important;
}

/* Remove connecting borders */
.profile-page ul.nav.nav-tabs.card-header-tabs li.nav-item:first-child a.nav-link,
body:has(.profile-avatar) ul.nav.nav-tabs.card-header-tabs li.nav-item:first-child a.nav-link {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.profile-page ul.nav.nav-tabs.card-header-tabs li.nav-item:last-child a.nav-link,
body:has(.profile-avatar) ul.nav.nav-tabs.card-header-tabs li.nav-item:last-child a.nav-link {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* Hover effect */
.profile-page ul.nav.nav-tabs.card-header-tabs a.nav-link:hover,
body:has(.profile-avatar) ul.nav.nav-tabs.card-header-tabs a.nav-link:hover {
    background-color: rgba(90, 24, 154, 0.5) !important;
    color: #fff !important;
    border-color: #7b2cbf !important;
}

/* Active tab */
.profile-page ul.nav.nav-tabs.card-header-tabs a.nav-link.active,
body:has(.profile-avatar) ul.nav.nav-tabs.card-header-tabs a.nav-link.active {
    background-color: #5a189a !important;
    color: #fff !important;
    border-color: #7b2cbf !important;
    box-shadow: 0 0 15px rgba(90, 24, 154, 0.6) !important;
}

/* Fix the content area */
.profile-page .card:has(.card-header-tabs) .card-body,
body:has(.profile-avatar) .card:has(.card-header-tabs) .card-body {
    background-color: #2d1b4e !important;
}

/* =========================================
   MODAL/OVERLAY DARK MODE
   ========================================= */

/* 1. Main Modal Container */
.modal-content {
    background-color: #2d1b4e !important;
    border: 2px solid #5a189a !important; /* Increased border width */
    color: #fff !important;
    border-radius: 1rem !important;
    overflow: hidden; /* Ensures border corners are clean */
    box-shadow: 0 0 2rem rgba(0, 0, 0, 0.8) !important; /* Added shadow for depth */
}

/* 2. Modal Header */
.modal-header {
    background-color: #1a0b2e !important;
    border-bottom: 2px solid #5a189a !important; /* Increased border width */
    color: #fff !important;
    border-top-left-radius: calc(1rem - 2px) !important; /* Matches parent border */
    border-top-right-radius: calc(1rem - 2px) !important;
}

.modal-title {
    color: #fff !important;
}

/* Close button (X) */
.modal-header .close,
.modal-header .btn-close {
    color: #fff !important;
    opacity: 0.8;
    text-shadow: none !important;
}

.modal-header .close:hover,
.modal-header .btn-close:hover {
    color: #fff !important;
    opacity: 1;
}

/* 3. Modal Body */
.modal-body {
    background-color: #2d1b4e !important;
    color: #fff !important;
}

/* 4. Modal Footer */
.modal-footer {
    background-color: #1a0b2e !important;
    border-top: 2px solid #5a189a !important; /* Increased border width */
    border-bottom-left-radius: calc(1rem - 2px) !important; /* Matches parent border */
    border-bottom-right-radius: calc(1rem - 2px) !important;
}

/* 5. Buttons in Modal */
.modal-footer .btn,
.modal-body .btn {
    background-color: #5a189a !important;
    border-color: #5a189a !important;
    color: #fff !important;
}

.modal-footer .btn:hover,
.modal-body .btn:hover {
    background-color: #7b2cbf !important;
    border-color: #7b2cbf !important;
}

.modal-footer .btn-secondary,
.modal-body .btn-secondary {
    background-color: #2d1b4e !important;
    border-color: #5a189a !important;
}

/* 6. Modal Backdrop (the dark overlay behind the modal) */
.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.8) !important;
}

/* 7. Any text/headings inside modals */
.modal-content h1,
.modal-content h2,
.modal-content h3,
.modal-content h4,
.modal-content h5,
.modal-content h6 {
    color: #fff !important;
}

.modal-content p,
.modal-content span,
.modal-content div {
    color: #e6d5ff !important;
}

/* 8. Form inputs inside modals */
.modal-body .form-control,
.modal-body .custom-select,
.modal-body input,
.modal-body textarea,
.modal-body select {
    background-color: #1a0b2e !important;
    border: 1px solid #5a189a !important;
    color: #fff !important;
}

.modal-body .form-control:focus,
.modal-body input:focus,
.modal-body textarea:focus,
.modal-body select:focus {
    background-color: #1a0b2e !important;
    border-color: #7b2cbf !important;
    color: #fff !important;
    box-shadow: 0 0 5px #ffd700 !important;
}

/* 9. Labels inside modals */
.modal-body label {
    color: #e6d5ff !important;
}

/* 10. Links inside modals */
.modal-body a {
    color: #bfaee3 !important;
}

.modal-body a:hover {
    color: #ffd700 !important;
}

/* 11. Tables inside modals (if any) */
.modal-body .table {
    color: #e6d5ff !important;
    background-color: transparent !important;
}

.modal-body .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* 12. Cards inside modals */
.modal-body .card {
    background-color: #1a0b2e !important;
    border-color: #5a189a !important;
}

/* 13. List groups inside modals */
.modal-body .list-group-item {
    background-color: #1a0b2e !important;
    border-color: #5a189a !important;
    color: #e6d5ff !important;
}

/* 14. Specific fix for trait/character modals with images */
.modal-body img {
    border: 2px solid #5a189a !important;
    border-radius: 8px;
}

/* 15. Any white backgrounds that might appear */
.modal-content .bg-white,
.modal-content .bg-light {
    background-color: #2d1b4e !important;
}

/* 16. Bootstrap alerts inside modals */
.modal-body .alert {
    background-color: rgba(90, 24, 154, 0.2) !important;
    border-color: #5a189a !important;
    color: #e6d5ff !important;
}

/* 17. Search button styling in modal */
.modal-footer .btn-primary,
.modal-body .btn-primary {
    background-color: #5a189a !important;
    border-color: #5a189a !important;
}

.modal-footer .btn-primary:hover,
.modal-body .btn-primary:hover {
    background-color: #7b2cbf !important;
    box-shadow: 0 0 10px #7b2cbf !important;
}

/* 18. Close button specific styling */
button.close {
    color: #fff !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-shadow: none !important;
    opacity: 0.8 !important;
}

button.close:hover {
    opacity: 1 !important;
}

/* 19. Make sure modal scrollbar is styled (webkit browsers) */
.modal-body::-webkit-scrollbar {
    width: 10px;
}

.modal-body::-webkit-scrollbar-track {
    background: #1a0b2e;
}

.modal-body::-webkit-scrollbar-thumb {
    background: #5a189a;
    border-radius: 5px;
}

.modal-body::-webkit-scrollbar-thumb:hover {
    background: #7b2cbf;
}

/* =========================================
   TRAIT INFO TEXT LABEL
   "Click on the images for more info"
   ========================================= */

.trait-info-label {
    display: inline-block;
    background-color: rgba(45, 27, 78, 0.8);
    backdrop-filter: blur(10px);
    color: #e6d5ff;
    padding: 10px 20px;
    border-radius: 8px;
    border: 1px solid #5a189a;
    font-size: 0.95rem;
    font-weight: 500;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    margin-left: 15px;
}

/* Icon styling */
.trait-info-label i {
    margin-right: 8px;
    color: #bfaee3;
}

/* Alternative: Simpler version without box */
.trait-info-label-simple {
    color: #e6d5ff;
    font-size: 0.9rem;
    font-style: italic;
    margin-left: 15px;
    opacity: 0.9;
}

.trait-info-label-simple i {
    margin-right: 5px;
    color: #bfaee3;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .trait-info-label,
    .trait-info-label-simple {
        display: block;
        margin-left: 0;
        margin-top: 10px;
        text-align: center;
    }
}


/* Species card */

/* Species cards dark mode */
.species-card {
    background-color: #2d1b4e !important;
    border: 2px solid #5a189a !important;
    border-radius: 10px !important;
    padding: 3% !important;
    width: 25% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    margin: 1.5% !important;
    box-sizing: border-box !important;
}

/* Image wrapper for PERFECT centering */
.species-image-wrapper {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 5% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Center and size the images - SIMPLE PERFECT CENTERING */
.species-card img {
    filter: brightness(0.9) !important;
    width: 120% !important; /* Your preferred size */
    height: auto !important;
    max-width: none !important;
    display: block !important;
    margin: 0 auto !important; /* Simple centering */
    padding: 0 !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
}

/* Species name styling */
.species-name {
    color: #fff !important;
    font-weight: 600 !important;
    text-align: center !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Hover effect */
.species-card:hover {
    background-color: #2d1b4e !important;
    border-color: #7b2cbf !important;
    transform: translateY(-10px) !important;
    box-shadow: 0 0 20px rgba(90, 24, 154, 0.6) !important;
}

.species-card:hover .species-name {
    color: #fff !important;
}

/* =========================================
   LIGHTBOX IMAGE MODAL FIX
   ========================================= */

/* The outer lightbox container */
#lightbox {
    /* CHANGED: Set to transparent to remove the solid purple block */
    background-color: transparent !important; 
}

/* The lightbox overlay (dark backdrop) */
.lightboxOverlay {
    /* CHANGED: Adjusted opacity. 
       0.0 = Invisible 
       0.5 = Semi-transparent (dimmed)
       0.9 = Very dark (current setting) 
       I suggest 0.6 or 0.7 so the image pops but you can see behind it. */
    background-color: rgba(0, 0, 0, 0.6) !important;
}

/* The container holding the image */
.lb-container {
    background-color: transparent !important;
}

.lb-outerContainer {
    background-color: transparent !important;
}

/* The actual image */
.lb-image {
    background-color: transparent !important;
    border: none !important;
}

/* Optional: Style the navigation and close buttons */
.lb-nav a,
.lb-close {
    background-color: transparent !important;
}

/* Optional: Add purple border around the image */
.lb-outerContainer {
    border: none !important;
    border-radius: 10px !important;
}

/* =========================================
   SMALL SPACE BELOW FOOTER
   ========================================= */

/* Remove all margins and padding from html and body */
html, body {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 100vh !important;
}

/* Remove bottom padding/margin from main container */
main.container-fluid {
    padding-bottom: 4rem !important; /* This adds the space at the very bottom */
    margin-bottom: 0 !important;
}

/* Remove bottom space from row */
.container-fluid > .row {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Allow main content column to have bottom padding */
.main-content {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* Footer spacing */
.site-footer,
#footer {
    margin-top: 4rem !important; /* Space above footer */
    margin-bottom: 0 !important;
    padding-bottom: 2rem !important;
}

/* ============================================
   SIMPLE SUN/MOON CYCLE
   ============================================ */

/* Celestial body container */
.celestial-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

/* Sun styling */
.sun {
    position: absolute;
    width: 80px;
    height: 80px;
    background: #FFD700;
    border-radius: 50%;
    box-shadow: 0 0 40px rgba(255, 215, 0, 0.8),
                0 0 60px rgba(255, 200, 0, 0.5);
    transition: opacity 1s ease;
    opacity: 0;
}

/* Moon styling with phases */
.moon {
    position: absolute;
    width: 70px;
    height: 70px;
    background: #E8E8E8;
    border-radius: 50%;
    box-shadow: 0 0 30px rgba(230, 230, 250, 0.6),
                0 0 50px rgba(200, 200, 230, 0.4);
    transition: opacity 1s ease;
    opacity: 0;
}

/* Moon phase shadow overlay */
.moon::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: transparent;
    box-shadow: inset calc(var(--shadow-x, 0%) - 50%) 0 0 0 rgba(50, 50, 80, 0.7);
    transition: all 0.5s ease;
}

/* Moon craters - subtle details */
.moon::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    background: rgba(100, 100, 120, 0.3);
    border-radius: 50%;
    top: 30%;
    left: 40%;
    box-shadow: 
        15px 10px 0 -2px rgba(100, 100, 120, 0.25),
        -5px 18px 0 -3px rgba(100, 100, 120, 0.2),
        20px -5px 0 -1px rgba(100, 100, 120, 0.22);
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .sun, .moon {
        width: 50px;
        height: 50px;
    }
}