/* dashboard/css/akte.css — MC v1.1.0, Welle W5 (Strang O)
   ---------------------------------------------------------------------------
   Die AKTE-Spalte (#zone-akte). Nutzt ausschließlich die Farbvariablen aus
   style.css (--color-*, --st-*), damit heller und dunkler Modus ohne zweite
   Palette funktionieren (Plan §5 F-8). Es gibt hier KEINE gesättigte Fläche:
   die Akte ist die ruhigste Spalte der Ansicht, Farbe trägt nur die Frist
   (--st-rot) und die Suchhervorhebung. */

.ak-spalte { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

.ak-card { margin: 0; }
.ak-ico { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 2px; }

/* ── Textlink „leise": ein Knopf, der wie Text aussieht ──────────────────── */
.ak-leise {
    background: none; border: 0; padding: 0;
    font: inherit; font-size: .76rem; color: var(--color-primary);
    cursor: pointer; text-align: left; text-decoration: none;
}
.ak-leise:hover { text-decoration: underline; }
.ak-leise:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 3px; }
.ak-leise[disabled] { color: var(--color-text-lighter); cursor: default; text-decoration: none; }

.ak-hinweis { margin: 4px 0 0; font-size: .76rem; color: var(--color-text-muted); }
.ak-leer { margin: 4px 0; padding: 4px 0; font-size: .78rem; color: var(--color-text-lighter); }
.ak-lade { padding: 8px 0; font-size: .76rem; color: var(--color-text-lighter); }
.ak-lade-fehler { color: var(--st-grau); }

/* ── 1 · Stammdaten ──────────────────────────────────────────────────────── */
.ak-stamm .field { margin-bottom: 6px; }
.ak-regelwerke { color: var(--color-text-muted); }
.ak-frist-rot { color: var(--st-rot); font-weight: 600; }
.ak-frist-rel { font-size: .78rem; color: var(--color-text-muted); }
.ak-fuss {
    margin-top: 8px; padding-top: 7px;
    border-top: 1px solid var(--color-border);
}
.ak-fuss-nr { font-size: .76rem; color: var(--color-text-muted); }

/* ── 2 · Die Anfrage ─────────────────────────────────────────────────────── */
.ak-anfrage > summary {
    list-style: none; cursor: pointer;
    display: flex; flex-direction: column; gap: 3px;
    padding: 2px 0 6px;
}
.ak-anfrage > summary::-webkit-details-marker { display: none; }
.ak-anfrage-titel {
    display: flex; align-items: flex-start; gap: 6px;
    font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600;
    font-size: .92rem; color: var(--color-text);
}
/* Der Titel ist EIN Textblock (Label), damit „Älteste vorliegende Mail vom
   20.07.2026" als Ganzes umbricht und die Jahreszahl nicht allein steht. */
.ak-anfrage-label { flex: 1 1 auto; min-width: 0; }
.ak-anfrage-titel::after {
    content: '▸'; margin-left: auto; align-self: flex-start; padding-top: 3px;
    color: var(--color-text-lighter); font-size: .8rem;
}
.ak-anfrage[open] > summary .ak-anfrage-titel::after { content: '▾'; }
.ak-anfrage-meta {
    display: flex; flex-wrap: wrap; gap: 2px 8px;
    font-size: .76rem; color: var(--color-text-muted);
    padding-left: 21px;
}
.ak-meta-betreff { overflow-wrap: anywhere; }
.ak-meta-rest { color: var(--color-text-lighter); }
.ak-anfrage-auf { padding: 6px 0 2px; border-top: 1px solid var(--color-border); margin-top: 4px; }
.ak-mailkopf .field { margin-bottom: 3px; }
.ak-mailkopf .field .lbl { flex: 0 0 62px; }
.ak-blatt { margin-top: 8px; }
.ak-blatt-frame {
    width: 100%; height: 380px; border: 1px solid var(--color-border);
    border-radius: var(--radius); background: var(--color-card);
}
.ak-anfrage-schranke { margin-top: 6px; }

/* ── Kachelgalerien (Unterlagen + Unsere Dokumente) ──────────────────────── */
.ak-block + .ak-block { margin-top: 12px; }
.ak-block-kopf {
    display: flex; align-items: center; gap: 8px;
    margin: 10px 0 6px;
}
.ak-block-titel {
    display: flex; align-items: center; gap: 6px;
    font-family: 'Montserrat', system-ui, sans-serif; font-weight: 600;
    font-size: .82rem; color: var(--color-text);
}
.ak-block-zahl {
    font-size: .74rem; color: var(--color-text-lighter);
    background: var(--color-bg-light); border-radius: 8px; padding: 0 6px;
}
.ak-block-kopf .btn { margin-left: auto; }

.ak-kacheln {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 8px;
}
.ak-kachel {
    position: relative; display: flex; flex-direction: column; gap: 4px;
    min-width: 0; padding: 0; border: 0; background: none;
}
.ak-kachel.ak-aus { display: none; }
.ak-kachel-flaeche {
    display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer;
}
.ak-kachel-flaeche:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: var(--radius); }
.ak-thumb {
    display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 2px;
    width: 100%; aspect-ratio: 3 / 4; overflow: hidden;
    border: 1px solid var(--color-border); border-radius: var(--radius);
    background: var(--color-bg-light);
}
.ak-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.ak-kachel:hover .ak-thumb { border-color: var(--color-primary); box-shadow: var(--shadow-hover); }
.ak-thumb .dok-typ {
    font-size: .68rem; font-weight: 700; letter-spacing: .04em;
    color: var(--color-text-lighter);
}
.ak-thumb-satz { font-size: .6rem; color: var(--color-text-lighter); text-align: center; padding: 0 4px; }
.ak-kachel-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ak-kachel-name {
    font-size: .7rem; color: var(--color-text); line-height: 1.25;
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
}
.ak-kachel-herkunft { font-size: .66rem; color: var(--color-text-lighter); }
/* 1.1.0 Gesamt-Gate R1, Befund 4: „auch als Word" ist jetzt ein .ak-leise-Knopf (Vorschau/Herunterladen)
   — die Linkfarbe kommt von .ak-leise, hier nur Größe und Schnitt. */
.ak-kachel-word { font-size: .64rem; font-style: italic; }
.ak-loeschen { top: 4px; right: 4px; }
.ak-mehr { margin-top: 8px; display: inline-block; }

/* ── 4 · Aktenlauf ───────────────────────────────────────────────────────── */
.ak-lauf > summary {
    list-style: none; cursor: pointer;
    display: flex; flex-direction: column; gap: 3px; padding: 2px 0;
}
.ak-lauf > summary::-webkit-details-marker { display: none; }
.ak-lauf > summary .ak-block-titel::after {
    content: '▸'; margin-left: auto; color: var(--color-text-lighter); font-size: .8rem;
}
.ak-lauf[open] > summary .ak-block-titel::after { content: '▾'; }
.ak-lauf > summary .ak-block-titel { font-size: .92rem; }
.ak-lauf-zahlen { font-size: .76rem; color: var(--color-text-muted); padding-left: 21px; }
.ak-lauf-null { font-size: .74rem; color: var(--color-text-lighter); padding-left: 21px; }

.ak-lauf-liste { list-style: none; margin: 8px 0 0; padding: 0; }
/* Zweistoeckig: die Akte-Spalte ist nur 320 px breit — drei Textspalten
   nebeneinander ergaeben Zeilen mit sechs Umbruechen. */
.ak-lauf-zeile {
    padding: 6px 0; border-top: 1px solid var(--color-border); font-size: .75rem;
}
.ak-lauf-zeile.ak-aus { display: none; }
/* 1.1.0 Gesamt-Gate R1, Befund 4 (K-6): hinter einem Deckel steht alles im Dokument,
   nur ausgeblendet — `display:flex` der Kachel würde das UA-[hidden] sonst überstimmen. */
.ak-kachel[hidden], .ak-lauf-zeile[hidden] { display: none; }
.ak-lauf-kopf { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; }
.ak-lauf-datum { color: var(--color-text-lighter); white-space: nowrap; }
.ak-lauf-art { color: var(--color-text); font-weight: 600; }
.ak-lauf-wer { font-size: .68rem; color: var(--color-text-lighter); }
.ak-lauf-vorschau { margin-left: auto; }
.ak-lauf-text {
    margin: 2px 0 0; color: var(--color-text-muted); overflow-wrap: anywhere; cursor: pointer;
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
}
.ak-lauf-text.ak-voll { display: block; overflow: visible; }
.ak-lauf-tech { margin-top: 8px; }
.ak-lauf-tech > summary {
    cursor: pointer; font-size: .74rem; color: var(--color-text-muted);
    padding: 4px 0;
}
.ak-lauf-tech > summary:hover { color: var(--color-primary); }

/* ── 5 · Suche ───────────────────────────────────────────────────────────── */
.ak-suche-karte { display: flex; flex-direction: column; gap: 5px; }
.ak-suche-label { font-size: .76rem; font-weight: 600; color: var(--color-primary); }
.ak-suchfeld {
    width: 100%; padding: 6px 9px; font: inherit; font-size: .82rem;
    color: var(--color-text); background: var(--color-card);
    border: 1px solid var(--color-border); border-radius: var(--radius);
}
.ak-suchfeld:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; border-color: var(--color-primary); }
.ak-suche-treffer { font-size: .72rem; color: var(--color-text-lighter); min-height: 1em; }
/* Farbregel F-5/F-6: Orange (--color-accent) bleibt „neu / noch nicht
   gesehen" vorbehalten. Die Suchhervorhebung ist Rückmeldung auf eine Eingabe
   des Bedieners, also Interaktion — und trägt deshalb die Interaktionsfarbe. */
.ak-spalte mark {
    background: color-mix(in srgb, var(--color-primary) 20%, transparent);
    color: inherit; border-radius: 2px; padding: 0 1px;
}

/* ── 6 · Bemerkungen ─────────────────────────────────────────────────────── */
.ak-bem > summary {
    cursor: pointer; font-family: 'Montserrat', system-ui, sans-serif;
    font-weight: 600; font-size: .82rem; color: var(--color-text); padding: 2px 0;
}
.ak-bem-leer { font-family: 'Open Sans', system-ui, sans-serif; font-weight: 400; font-size: .74rem; color: var(--color-text-lighter); }
.ak-bem textarea {
    width: 100%; margin-top: 6px; padding: 7px 9px; font: inherit; font-size: .82rem;
    color: var(--color-text); background: var(--color-card);
    border: 1px solid var(--color-border); border-radius: var(--radius); resize: vertical;
}
.ak-bem-text { margin: 6px 0 0; font-size: .82rem; color: var(--color-text); white-space: pre-wrap; }
.ak-bem-fuss { display: flex; justify-content: flex-end; margin-top: 6px; }

/* ── Dunkler Modus: keine zweite Palette, nur wenige Nachjustierungen ────── */
html.dark .ak-thumb,
html[data-theme="dark"] .ak-thumb { background: var(--color-bg-light); }
html.dark .ak-spalte mark,
html[data-theme="dark"] .ak-spalte mark {
    background: color-mix(in srgb, var(--color-primary) 28%, transparent);
}