/* =========================================================
BGG LOFT — COMPONENTS
Reusable UI Components & Interactive Elements
========================================================= */

/* =========================================================
GLOBAL PANEL
========================================================= */

.panel {

background: var(--surface-primary);

border: 1px solid var(--surface-border);

border-radius: var(--radius-lg);

backdrop-filter: var(--surface-blur);

box-shadow: var(--shadow-soft);

}

/* =========================================================
CONTROL BUTTONS
========================================================= */

.control-btn {

width: 42px;
height: 42px;

display: inline-flex;
align-items: center;
justify-content: center;

padding: 0;

border: 1px solid var(--surface-border-soft);
border-bottom: 1px solid var(--surface-border-active);
border-radius: var(--radius-md);

background: var(--surface-primary);

color: var(--text-primary);

cursor: pointer;

transition: 0.25s ease;

}

.control-btn.active {
    border-bottom: 1px solid transparent;
    border-top: 1px solid var(--theme-primary);
    box-shadow: 0 0 10px var(--theme-glow);
}

.control-btn:hover {

background: var(--surface-hover);
border: 1px solid var(--theme-primary);
box-shadow:
    0 0 12px var(--theme-glow);

}

/* =========================================================
CONTROL ICONS
========================================================= */

.control-icon {
width: 30px;
height: 30px;

stroke: var(--theme-muted);
fill: var(--theme-muted);

transition: 0.25s ease;
}
.control-btn:hover .control-icon {
stroke: var(--theme-primary);
fill: var(--theme-primary);
}
.control-btn.active .control-icon {
stroke: var(--theme-primary);
fill: var(--theme-primary);
}

.music-btn .control-icon {

width: 36px;
height: 36px;

}

.sort-direction-btn .sort-up,
.sort-direction-btn .sort-down {
    transition: 0.25s ease;
    opacity: 0.35;
}

.sort-direction-btn.asc .sort-up {
    opacity: 1;
}

.sort-direction-btn.desc .sort-down {
    opacity: 1;
}


/* =========================================================
META ICONS
========================================================= */

.meta-icon {

width: 24px;
height: 24px;

stroke: var(--text-primary);
fill: var(--text-primary);

}


/* =========================================================
PRIMARY BUTTONS
========================================================= */

.enter-btn {

display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
min-height: 46px;

padding-inline: var(--space-lg);

border: 1px solid var(--theme-primary);
border-radius: var(--radius-md);

background:
    linear-gradient(
        135deg,
        var(--theme-button-start),
        var(--theme-button-end)
    );

color: white;

font-family: var(--font-primary);
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.08em;

text-transform: uppercase;

cursor: pointer;

transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast),
    opacity var(--transition-fast);

}

.enter-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transition: 0.5s;
}

.enter-btn:hover::before {
    left: 150%;
}

.enter-btn:active {

    

}

/* =========================================================
SELECTS & INPUTS
========================================================= */

select,
input {

min-height: 42px;

padding-inline: var(--space-md);

border: 1px solid var(--surface-border);
border-radius: var(--radius-md);

background: var(--surface-primary);

color: var(--text-primary);

font-family: var(--font-primary);

outline: none;

}

textarea {
    padding: var(--space-md);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-md);
    background: var(--surface-primary);
    color: var(--text-primary);
    font-family: var(--font-primary);
    outline: none;
}

select:hover,
input:hover {

border-color: var(--theme-primary);

}

select:focus,
input:focus {

border-color: var(--theme-primary);

box-shadow:
    0 0 10px var(--theme-glow);

}

/* =========================================================
CHIPS & TAGS
========================================================= */

.chip {

display: inline-flex;
align-items: center;
gap: var(--space-2xs);

min-height: 28px;

padding-inline: var(--space-sm);

border: 1px solid var(--surface-border);
border-radius: var(--radius-pill);

background: rgba(0, 0, 0, 0.3);

font-size: 0.78rem;
font-weight: 700;

color: var(--text-secondary);

}

/* YELLOW CHIP */
.favorite-chip {
    color: var(--theme-favorite);
    border-color: var(--theme-favorite-border);
    background: var(--theme-favorite-bg);
}

.favorite-icon {
width: 9px;
height: 9px;

fill: var(--theme-favorite);
stroke: var(--theme-favorite);

stroke-width: 2;
}

/* =========================================================
STATUS PILLS
========================================================= */

.status {

display: inline-flex;
align-items: center;
justify-content: center;

min-height: 30px;

padding-inline: var(--space-md);

border: 1px solid transparent;
border-radius: var(--radius-pill);

font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.08em;

text-transform: uppercase;

}

.status.completed {

background: rgba(0, 214, 143, 0.12);
color: var(--color-success);

}

.status.in-progress {

background: rgba(255, 211, 0, 0.12);
color: var(--color-warning);

}

.status.abandoned {

background: rgba(255, 42, 42, 0.12);
color: var(--color-danger);

}

/* GREEN STATUS */
.status.owned {
    background: rgba(0, 214, 143, 0.12);
    border: 1px solid rgba(0, 214, 143, 0.25);
    color: var(--color-success);
}

/* BLUE STATUS */
.status.upcoming {
    background: rgba(0, 217, 255, 0.12);
    border: 1px solid rgba(0, 217, 255, 0.25);
    color: var(--color-info);
}

/* BLUE PURPLE STATUS */
.status.borrowed {
    background: rgba(139, 44, 255, 0.12);
    border: 1px solid rgba(139, 44, 255, 0.25);
    color: var(--color-purple);
}

/* YELLOW STATUS */
.status.wishlist {
    background: rgba(255, 211, 0, 0.12);
    border: 1px solid rgba(255, 211, 0, 0.25);
    color: var(--color-warning);
}

/* RED STATUS */
.status.sold {
    background: rgba(255, 42, 42, 0.12);
    border: 1px solid rgba(255, 42, 42, 0.25);
    color: var(--color-danger);
}

/* =========================================================
RATING DISPLAY
========================================================= */

.rating {

display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-xs);

/* background:
    radial-gradient(
        circle,
        rgba(255,255,255,0.08),
        rgba(255,255,255,0.02)
    );
border-radius: 50%;
border: 1px solid var(--surface-border);  */

font-family: var(--font-primary);
font-size: 1.75rem;
font-weight: 800;

color: var(--theme-primary);

text-shadow:
    0 0 10px var(--theme-glow);

}

.rating-icon {

width: 22px;
height: 22px;

fill: var(--theme-primary);
stroke: var(--theme-primary);

stroke-width: 2;

}

/* =========================================================
DASHBOARD CARDS
========================================================= */

.dashboard-card {

display: flex;
flex-direction: column;

gap: var(--space-xs);

padding: var(--space-lg);

border: 1px solid var(--surface-border);
border-radius: var(--radius-lg);

background: var(--surface-primary);

backdrop-filter: var(--surface-blur);

box-shadow: var(--shadow-soft);

}

.dashboard-label {

color: var(--text-secondary);

font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.08em;

text-transform: uppercase;

}

.dashboard-card strong {

font-family: var(--font-primary);

font-size: 2rem;
font-weight: 800;

}


/* =========================================================
FOOTER THEME BUTTONS
========================================================= */

.footer-control {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;

    border-radius: var(--radius-md);

    border: 1px solid currentColor;

    cursor: pointer;
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
    transition: 0.25s ease;

    background: var(--surface-primary);
    color: var(--text-primary);
}

.footer-control:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 4px var(--surface-border);
}

.footer-control.active {
    box-shadow:
        0 0 6px var(--theme-primary),
        0 0 12px var(--theme-primary);
}

.theme-icon {
    width: 30px;
    height: 30px;
    transition: 0.25s ease;
}

.footer-tagline {

    color: var(--text-secondary);

    font-size: 0.9rem;
    font-weight: 800;

    letter-spacing: 0.25em;

    text-transform: uppercase;

}

.footer-meta {

    color: var(--text-muted);

    font-size: 0.9rem;
    font-weight: 700;

}

.footer-meta span {

    color: var(--theme-primary);

}


/* =========================================================
THEME COLORS
========================================================= */

.footer-pink {
    color: #ff007f;
    border-color: rgba(255, 0, 127, 0.28);
    background: rgba(255, 0, 127, 0.08);
} 
.footer-pink .theme-icon {
    fill: rgba(255, 0, 127, 0.28);
    stroke: rgba(255, 0, 127, 0.28);
} 
.footer-pink.active {
    box-shadow: 0 0 8px rgba(255, 0, 127, 1);
    border-color: rgba(255, 0, 127, 1);
    background: rgba(255, 0, 127, 0);
}
.footer-pink:hover .theme-icon,
.footer-pink.active .theme-icon {
    fill: rgba(255, 0, 127, 1);
    stroke: rgba(255, 0, 127, 1);
}

.footer-red {
    color: #ff2a2a;
    border-color: rgba(255, 42, 42, 0.28);
    background: rgba(255, 42, 42, 0.08);
}
.footer-red .theme-icon {
    fill: rgba(255, 42, 42, 0.28);
    stroke: rgba(255, 42, 42, 0.28);
}
.footer-red.active {
    box-shadow: 0 0 8px rgba(255, 42, 42, 1);
    border-color: rgba(255, 42, 42, 1);
    background: rgba(255, 42, 42, 0);
}
.footer-red:hover .theme-icon,
.footer-red.active .theme-icon {
    fill: rgba(255, 42, 42, 1);
    stroke: rgba(255, 42, 42, 1);
} 

.footer-yellow {
    color: #FFD300;
    border-color: rgba(255, 211, 0, 0.28);
    background: rgba(255, 211, 0, 0.08);
}
.footer-yellow .theme-icon {
    fill: rgba(255, 211, 0, 0.28);
    stroke: rgba(255, 211, 0, 0.28);
}
.footer-yellow.active {
    box-shadow: 0 0 8px rgba(255, 211, 0, 1);
    border-color: rgba(255, 211, 0, 1);
    background: rgba(255, 211, 0, 0);
}
.footer-yellow:hover .theme-icon,
.footer-yellow.active .theme-icon {
    fill: rgba(255, 211, 0, 1);
    stroke: rgba(255, 211, 0, 1);
} 

.footer-green {
    color: #00ff88;
    border-color: rgba(0, 255, 136, 0.28);
    background: rgba(0, 255, 136, 0.08);
}
.footer-green .theme-icon {
    fill: rgba(0, 255, 136, 0.28);
    stroke: rgba(0, 255, 136, 0.28);
}
.footer-green.active {
    box-shadow: 0 0 8px rgba(0, 255, 136, 1);
    border-color: rgba(0, 255, 136, 1);
    background: rgba(0, 255, 136, 0);
}
.footer-green:hover .theme-icon,
.footer-green.active .theme-icon {
    fill: rgba(0, 255, 136, 1);
    stroke: rgba(0, 255, 136, 1);
} 

.footer-blue {
    color: #00d9ff;
    border-color: rgba(0, 217, 255, 0.28);
    background: rgba(0, 217, 255, 0.08);
}
.footer-blue .theme-icon {
    fill: rgba(0, 217, 255, 0.28);
    stroke: rgba(0, 217, 255, 0.28);
}
.footer-blue.active {
    box-shadow: 0 0 8px rgba(0, 217, 255, 1);
    border-color: rgba(0, 217, 255, 1);
    background: rgba(0, 217, 255, 0);
}
.footer-blue:hover .theme-icon,
.footer-blue.active .theme-icon {
    fill: rgba(0, 217, 255, 1);
    stroke: rgba(0, 217, 255, 1);
} 

.footer-gold {
    color: #b08d57;
    border-color: rgba(176, 141, 87, 0.28);
    background: rgba(176, 141, 87, 0.08);
}
.footer-gold .theme-icon {
    fill: rgba(176, 141, 87, 0.28);
    stroke: rgba(176, 141, 87, 0.28);
}
.footer-gold.active {
    box-shadow: 0 0 8px rgba(176, 141, 87, 1);
    border-color: rgba(176, 141, 87, 1);
    background: rgba(176, 141, 87, 0);
}
.footer-gold:hover .theme-icon,
.footer-gold.active .theme-icon {
    fill: rgba(176, 141, 87, 1);
    stroke: rgba(176, 141, 87, 1);
}