/* ==========================================
   assets/css/dex-filters.css
   High-Performance CSS-Filter für Pokedex (Standard & Costume)
   ========================================== */

/* Nutzt Tilde-Gleich (~=) für Multiple-Choice Filter (Logisches UND) */
#cards-container[data-filter~="missing-dex"] .card:not(.missing-dex) { display: none !important; }
#cards-container[data-filter~="missing-variant"] .card:not(.missing-variant) { display: none !important; }
#cards-container[data-filter~="missing-shiny"] .card:not(.missing-shiny) { display: none !important; }
#cards-container[data-filter~="missing-star_4"] .card:not(.missing-star_4) { display: none !important; }
#cards-container[data-filter~="missing-crypto"] .card:not(.missing-crypto) { display: none !important; }
#cards-container[data-filter~="missing-released"] .card:not(.missing-released) { display: none !important; }
#cards-container[data-filter~="missing-lucky"] .card:not(.missing-lucky) { display: none !important; }
#cards-container[data-filter~="missing-xxs"] .card:not(.missing-xxs) { display: none !important; }
#cards-container[data-filter~="missing-xxl"] .card:not(.missing-xxl) { display: none !important; }
#cards-container[data-filter~="hide-complete"] .card.is-complete { display: none !important; }
#cards-container.hide-unreleased .not-released { display: none !important; }

/* ==========================================
   Spezifische Styles für den Costume-Dex
   ========================================== */
.variant-flags {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--border-light);
}

.costume-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 6px;
    text-align: center;
}

.costume-img-wrapper {
    width: 95px;
    height: 95px;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.costume-img-wrapper img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.15));
    transform: scale(1.15); 
}

.costume-name {
    font-size: 0.75em;
    font-weight: 600;
    line-height: 1.15;
    margin-bottom: 6px;
    min-height: 2.3em;
    display: flex;
    align-items: center;
    justify-content: center;
    word-wrap: break-word;
    width: 100%;
}

.costume-controls {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.costume-controls label {
    margin: 0 !important;
    justify-content: center;
    padding: 4px 0;
    font-size: 0.8em;
}