/* ============================================================
   262-php-12-document-library — das zentrale Dokumentenverzeichnis

   Diese Datei regelt NUR die Tabelle: Spalten, Linien, Umbruch auf
   dem Telefon. Alles andere kommt aus Bausteinen, die es schon gibt:

       .x-file__type / __name / __meta   assets/css/02-elements.css
       .label .label--outline            assets/css/02-elements.css
       .x262-more                        262-php-08-section.css
       Suchfeld, Knöpfe, Sortierung      262-php-09-listing-toolbar.css

   Deshalb steht hier keine einzige Schriftgrösse und keine einzige
   Farbe für Dateizeile, Etikett oder Link: gäbe es sie hier noch
   einmal, hätte die Website zwei Wahrheiten und die zweite wäre
   irgendwann die falsche.
   ============================================================ */

.x-doclib__table {
    width: 100%;
    border-collapse: collapse;
}

.x-doclib__table thead th {
    text-align: left;
    padding: .5rem .75rem;
    font: var(--w-heading, 500) var(--fs-meta, 1rem)/var(--lh-ui, 1.3) var(--font-body, Roboto, sans-serif);
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.x-doclib__row > td {
    padding: .75rem;
    border-bottom: 1px solid var(--border-soft);
    vertical-align: baseline;
    font-size: var(--fs-small);
    color: var(--text-2);
}
.x-doclib__row:hover { background: var(--surface-2); }

/* Dateizeile: Plakette, Name und Grösse in einer Zeile, mit Umbruch —
   dieselben drei Teile wie in jeder x-filelist auf dieser Website. */
.x-doclib__c-title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5rem .625rem;
    min-width: 0;
}
.x-doclib__c-title .x-file__name { overflow-wrap: anywhere; }

/* Das Schloss lebt jetzt in 262-php-13-micro-attachment: es gehoert zum
   Anhang, nicht zur Tabelle, und wird auch ausserhalb dieser Seite
   gebraucht (Personenkarte, Faktenzeile). Eine zweite Kopie hier waere
   genau die Doppelung, die dieses Verzeichnis abschaffen soll. */

.x-doclib__c-year { white-space: nowrap; font-variant-numeric: tabular-nums; }
.x-doclib__c-open { text-align: right; white-space: nowrap; }

.x-doclib__none { color: var(--text-muted); }

.x-doclib__empty {
    padding: 2rem .75rem;
    text-align: center;
    color: var(--text-muted);
    background: var(--surface-2);
}

/* ---- Telefon: aus jeder Zeile wird eine Karte --------------------------
   Eine Tabelle mit fünf Spalten passt nicht auf 360 Pixel. Statt sie
   seitlich rollen zu lassen (dann sieht man den Titel nicht mehr, sobald
   man das Jahr liest), wird jede Zeile zu einem Block. Die Spaltentitel
   stehen dann VOR dem Wert — sie kommen aus data-th, damit sie nicht ein
   zweites Mal übersetzt werden müssen. */
@media (max-width: 720px) {
    .x-doclib__table thead { display: none; }
    .x-doclib__table,
    .x-doclib__table tbody,
    .x-doclib__row,
    .x-doclib__row > td { display: block; width: 100%; }

    .x-doclib__row {
        padding: .25rem 0 .75rem;
        border-bottom: 1px solid var(--border-soft);
    }
    .x-doclib__row > td {
        border: 0;
        padding: .25rem .75rem;
    }
    .x-doclib__row > td[data-th]:not([data-th=""])::before {
        content: attr(data-th) ": ";
        color: var(--text-muted);
    }
    .x-doclib__c-open { text-align: left; padding-top: .5rem; }
}