/*
 * Papierkorb-Seite (P.5, 15.08.2026).
 *
 * WARUM DIESE DATEI: Die erste Fassung trug ihr Aussehen als Inline-Styles im JavaScript.
 * Peter beim Hand-Test: „template und kein css im javascript. also so wie der rest ist?"
 * Das Aussehen gehoert hierher, das Markup in `templates/papierkorb/`, und beides zusammen
 * macht die Seite aenderbar, ohne JavaScript zu lesen.
 *
 * KNOPFGROESSEN kommen aus `components/base/buttons.css` (`.btn-sm`) und werden hier NICHT
 * neu erfunden. Peters zweiter Punkt vom 15.08.: „die buttons sind auch zu gross im vergleich
 * zu den buttons der dokumente und anderen geloeschten dinge." Eine eigene Groesse hier waere
 * genau der Weg, auf dem so etwas wieder auseinanderlaeuft.
 */

.papierkorb-seite {
    max-width: 900px;
    margin: 0 auto;
    padding: 24px;
}

.papierkorb-zurueck {
    color: var(--color-text-light);
    text-decoration: none;
    display: inline-block;
    margin-bottom: 12px;
}

/* --- Kopfzeile: Titel und Sammelaktionen in EINER Reihe ------------------- */

.papierkorb-kopf {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.papierkorb-titel {
    margin: 0 0 4px;
}

.papierkorb-frist {
    color: var(--color-text-light);
    margin: 0;
    font-size: 0.9375rem;
}

.papierkorb-sammelaktionen {
    display: flex;
    gap: 8px;
    /* Auf schmalen Fenstern rutschen die Knoepfe unter den Titel statt ihn zu quetschen. */
    flex-wrap: wrap;
}

/* --- Filterleiste --------------------------------------------------------- */

.papierkorb-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

/* --- Liste ---------------------------------------------------------------- */

.papierkorb-liste {
    border: 1px solid var(--color-border);
    border-radius: 6px;
    overflow: hidden;
}

/* Leere Liste und leerer Filter tragen keinen Rahmen — ein Kasten um einen Satz sieht aus
   wie ein Fehler. */
.papierkorb-liste.ist-leer {
    border: 1px dashed var(--color-border);
    padding: 24px;
    text-align: center;
    color: var(--color-text-light);
}

.papierkorb-zeile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
}

.papierkorb-zeile + .papierkorb-zeile {
    border-top: 1px solid var(--color-border);
}

.papierkorb-zeile-text {
    min-width: 0;
    flex: 1;
}

.papierkorb-zeile-titel {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.papierkorb-zeile-meta {
    color: var(--color-text-light);
    font-size: 0.8125rem;
    margin-top: 2px;
}

/* Trennpunkte zwischen den Angaben — als Rand, damit das Markup sie nicht tragen muss. */
.papierkorb-zeile-meta > span + span::before {
    content: " · ";
}

.papierkorb-zeile-frist.ist-dringlich {
    color: var(--color-error);
    font-weight: 600;
}

.papierkorb-zeile-grund {
    color: var(--color-text-light);
    font-size: 0.8125rem;
    margin-top: 4px;
    font-style: italic;
}

/* Leer bleibt leer: kein Abstand fuer eine Zeile, die nichts sagt. */
.papierkorb-zeile-grund:empty {
    display: none;
}

.papierkorb-zeile-aktionen {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* Ein Knopf, der nicht geht, sagt warum — ueber `title`. Er verschwindet nicht, damit die
   Zeile ihre Form behaelt und die Liste nicht ausfranst. */
.papierkorb-zeile-aktionen button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}