/* Filter-Leiste */
.filter-flex-container {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    padding: 15px;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
    min-width: 200px;
}

.filter-group label {
    font-size: 0.85rem;
    color: var(--light-color);
}

.filter-group input, .filter-group select {
    background: #1e1e24;
    border: 1px solid #333;
    color: #fff;
    padding: 8px 12px;
    border-radius: 4px;
    outline: none;
}

/* Detail-Ansichten der Errungenschaften */
.achievement-detail-card {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
}

.achievement-detail-card:last-child {
    border-bottom: none;
}

/* Info-Texte */
.achievement-detail-info {
    flex: 1;
}

.achievement-detail-info h4 {
    margin: 0 0 5px 0;
    font-size: 1.2rem;
}

.achievement-detail-info p {
    margin: 0 0 15px 0;
    color: var(--light-color);
    font-size: 0.95rem;
    line-height: 1.4;
}

/* Avatare der Gewinner */
.achievement-winners {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.achievement-winners-title {
    font-size: 0.8rem;
    text-transform: uppercase;
    color: #888;
    letter-spacing: 0.5px;
}

.avatar-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.winner-avatar-item {
    max-width: 50px;
    max-height: 50px;
    border-radius: 6px;
    border: 2px solid var(--border-color);
    object-fit: cover;
    transition: transform 0.2s, border-color 0.2s;
}

.winner-avatar-item:hover {
    transform: scale(1.2);
    border-color: var(--primary-color);
    z-index: 10;
}

/* Leere Inhaltsboxen */
.empty-box-state {
	text-align: center; 
	padding: 10px; 
	opacity: 0.6;
}
.empty-box-state i {
	font-size: 3rem; 
	margin-bottom: 10px; 
	color: var(--light-color);
}
.empty-box-state p {
	font-size: 1.1rem; 
	color: var(--light-color);
}


.achievement-item {
    position: relative;
    width: 50px;
    height: 50px;
    background: var(--box-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}

.achievement-item:hover {
    transform: scale(1.1);
    z-index: 10;
}

.achievement-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Der Zähler / Count-Badge */
.achievement-count {
    position: absolute;
    bottom: -5px;
    right: -5px;
    background-color: var(--primary-color); /* Deine Hauptfarbe (z.B. Blau oder Orange) */
    color: var(--text-inverted-main);
    font-size: 0.7rem;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 10px;
    border: 2px solid var(--container-bg); /* Hebt den Badge vom Icon ab */
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    min-width: 12px;
    text-align: center;
}

/* Klasse für noch nicht erreichte Errungenschaften */
.achievement-item.not-earned {
    opacity: 0.5;                /* Macht das gesamte Item blasser */
    filter: grayscale(100%);     /* Entzieht dem Bild alle Farben */
    border-style: dashed;        /* Optional: Gestrichelter Rand für "noch nicht da" */
    background-color: rgba(0,0,0,0.02);
}

.achievement-item.not-earned:hover {
    filter: grayscale(50%);      /* Beim Hover leicht Farbe zeigen */
    opacity: 0.8;
    transform: scale(1.05);
	cursor:help;
}

/* Den Zähler-Badge bei Wert 0 speziell behandeln */
.achievement-item.not-earned .achievement-count {
    background-color: #999;      /* Neutrales Grau statt deiner Primärfarbe */
    display: none;               /* ODER: Ganz ausblenden, wenn der Wert 0 ist */
}

/* Das Award-Icon oben links */
.owner-badge {
    position: absolute;
    top: -6px;
    left: -6px;
    background-color: #34a853; /* Ein schönes "Erfolgs-Grün" */
    color: white;
    font-size: 0.75rem;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: none; /* Standardmäßig unsichtbar */
    align-items: center;
    justify-content: center;
    border: 2px solid var(--container-bg);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    z-index: 5;
}
/* Nur anzeigen, wenn die Klasse .is-earned vorhanden ist */
.achievement-item.is-earned .owner-badge {
    display: flex;
}

/* Optional: Wenn geschafft, kann das Bild auch wieder vollfarbig sein, 
   selbst wenn es global eine leichte Transparenz hätte */
.achievement-item.is-earned {
    opacity: 1 !important;
    filter: none !important;
    border-color: #34a853; /* Grüner Rahmen für geschaffte Dinge */
}
.extra-achievement {
    display: none !important;
}
.achievement-grid.show-all .extra-achievement {
    display: flex !important;
}

.achievement-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-color); /* Oder ein helles Grau #f0f0f0 */
    color: #ccc;                       /* Dezente Farbe für das Icon */
    font-size: 1.5rem;                 /* Größe des Platzhalter-Icons */
    border-radius: 4px;
}

/* Falls das Achievement verdient wurde, färben wir das Platzhalter-Icon dezent ein */
.is-earned .achievement-placeholder {
    color: #ffcc00; /* Gold-Ton für verdiente Achievements */
    background-color: rgba(255, 204, 0, 0.05);
}

/* Falls nicht verdient, bleibt es grau */
.not-earned .achievement-placeholder {
    color: #ddd;
    background-color: #fafafa;
}

.achievement-item.toggle-item {
    background: var(--button-bg-color);
    border: 1px solid var(--primary-color); /* Gestrichelt wirkt wie "hier ist noch was" */
    color: var(--text-main);
    font-size: 1.2rem;
	display:none;
}
.achievement-item.toggle-item span {
	margin-top:-2px;
}
.achievement-item.toggle-item:hover {
    border-style: solid;
    background: var(--button-hover-bg-color);
    box-shadow: var(--button-shadow-color);
	color: var(--text-main);
	transform: none;
	
}

.action-icon-addachiev, .action-icon-editachiev {
	font-size:1.2rem;
}
.action-icon-addachiev {
	margin:16px 0 0 15px;
}

.no-badge-image {
    width:50px; 
	display: inline-flex; 
	align-items: center; 
	justify-content: center; 
	color: var(--light-color); 
	vertical-align: middle;
	min-height:50px;
}
.no-badge-image i {
	font-size:1.2rem;
}


/* Der umschließende Container für jeden einzelnen Avatar */
.avatar-grid .avatar-wrapper {
    position: relative;
    display: inline-block;
    vertical-align: middle;
	width: 50px;
    height: 50px;
}

/* Sicherstellen, dass die Avatare die volle Box ausfüllen */
.avatar-grid .avatar-wrapper .winner-avatar-item {
	width: 100% !important;
    height: 100% !important;
    max-width: 50px !important;
    max-height: 50px !important;
    object-fit: contain; /* <--- HIER GEÄNDERT: Bild wird komplett eingepasst */
    box-sizing: border-box;
}

/* Das Lösch-Icon rechts unten auf dem Avatar positioniert */
.avatar-grid .avatar-wrapper .avatar-delete-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    background: var(--primary-color);
	color: var(--text-inverted-main);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    cursor: pointer;
    border: 1px solid var(--border-color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    transition: transform 0.15s ease, background-color 0.15s ease;
    z-index: 5;
}
.avatar-grid .avatar-wrapper .avatar-delete-badge i {
	margin-top:1px;
}

/* Hover-Effekt direkt auf dem kleinen Löschen-Button */
.avatar-grid .avatar-wrapper .avatar-delete-badge:hover {
    background: var(--stat-bar-low-col); 
	color: #fff;
    transform: scale(1.2);
}

/* Bequemer Hover-Effekt: Wenn man über den Avatar fährt, vergrößert sich das X ganz leicht */
.avatar-grid .avatar-wrapper.is-current-user:hover .avatar-delete-badge {
    transform: scale(1.1);
}


/* Drag & Drop Zone */
.upload-drop-zone {
    border: 2px dashed var(--border-color);
    background: var(--input-bg);
    border-radius: 4px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.upload-drop-zone:hover, 
.upload-drop-zone.dragover {
    border-color: var(--text-main);
    background: rgba(255, 255, 255, 0.04);
}

.drop-icon {
    font-size: 2.2rem;
    color: var(--light-color);
    margin-bottom: 8px;
}

.drop-text {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-main);
}

.drop-text span {
    text-decoration: underline;
    font-weight: 600;
}

/* Info-Badge unter der Drop-Zone */
#file-info-badge {
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 6px 12px;
    margin-top: 8px;
    font-size: 0.85rem;
}

.remove-file-btn {
    float: right;
    font-size: 1rem;
    margin-top: 1px;
}

.notshown-animated {
    display: none;
}



/* Container für das bestehende Icon */
.existing-icon-box {
    display: flex;
    align-items: center;
    gap: 15px;
    background: var(--bg-color);
    border: 1px solid var(--boder-color);
    padding: 12px;
    border-radius: 6px;
    margin-bottom: 12px;
    transition: border-color 0.2s, opacity 0.2s;
}

/* Die Bild-Vorschau (fixiert auf max 50x50 analog zu deinen Vorgaben) */
.existing-icon-preview {
    position: relative;
    width: 50px;
    height: 50px;
    background: var(--bg-color);
    border-radius: 4px;
    border: 1px solid var(--boder-color);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.existing-icon-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: filter 0.2s, opacity 0.2s;
}

/* Info und Button rechts neben dem Bild */
.existing-icon-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.existing-icon-info .icon-status-text {
    font-size: 0.8rem;
    color: var(--light-color);
}



/* --- VISUELLER LÖSCH-STATUS (Wird via JS getoggelt) --- */
.existing-icon-box.marked-for-deletion {
    border: 2px solid var(--stat-bar-low-col);
    background: rgba(211, 47, 47, 0.03);
}

.existing-icon-box.marked-for-deletion .existing-icon-preview img {
    filter: grayscale(100%) blur(1px);
    opacity: 0.3;
}

.eib-selected {
	border:2px solid var(--stat-bar-high-col);
	cursor:default;
	margin:5px;
	display: inline-flex;
	opacity: 1;
}
.eib-notselected {
	border:2px solid var(--border-color);
	cursor:pointer;
	margin:5px;
	display: inline-flex;
	opacity: 0.5;
}