/**
 * File: /assets\css\group-trash.css
 *
 * Purpose:
 * - Papierkorb-Section Styling (collapsible trash area in group members)
 * - Trash item cards with restore/delete actions
 * - Timer styling (days remaining)
 *
 * Dependencies:
 * - app.css (Variablen)
 * - Bootstrap 5.3
 * Load:     index.php
 *
 * Load: auto-discovered via group- prefix on group.php
 * Version:  1.0.0
 */

/* =========================
   Trash Toggle Button
   ========================= */
.trash-toggle-icon {
    transition: transform 0.25s ease;
    font-size: 0.7em;
}

[aria-expanded="true"] .trash-toggle-icon {
    transform: rotate(180deg);
}

/* =========================
   Trash Info Banner
   ========================= */
.trash-info {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    background: rgba(108, 117, 125, 0.08);
    border-left: 3px solid rgba(108, 117, 125, 0.3);
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.5;
}

.trash-info i {
    margin-top: 0.15rem;
    opacity: 0.6;
}

[data-bs-theme="light"] .trash-info {
    color: rgba(0, 0, 0, 0.55);
    background: rgba(108, 117, 125, 0.06);
}

/* =========================
   Trash Item Card
   ========================= */
.trash-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(108, 117, 125, 0.15);
    background: rgba(108, 117, 125, 0.04);
    transition: background 0.15s ease;
}

.trash-item:hover {
    background: rgba(108, 117, 125, 0.08);
}

.trash-item:last-child {
    margin-bottom: 0;
}

/* --- Info section (image + text) --- */
.trash-item__info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    flex: 1;
}

.trash-item__img {
    width: 48px;
    height: 48px;
    border-radius: 0.5rem;
    object-fit: cover;
    opacity: 0.5;
    filter: grayscale(60%);
    flex-shrink: 0;
}

.trash-item__meta {
    min-width: 0;
}

.trash-item__name {
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0.7;
}

.trash-item__details {
    font-size: 0.78rem;
    opacity: 0.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.trash-item__timer {
    font-size: 0.75rem;
    opacity: 0.5;
    margin-top: 0.15rem;
}

.trash-item__timer i {
    margin-right: 0.2rem;
}

/* --- Action buttons --- */
.trash-item__actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* =========================
   Responsive
   ========================= */
@media (max-width: 576px) {
    .trash-item {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .trash-item__actions {
        justify-content: flex-end;
    }

    .trash-item__img {
        width: 40px;
        height: 40px;
    }
}