/* Akten (Acta Nova) — Dritt-App des Dashboards (Issue #112).

   Eigene Datei nach dem Haus-Muster für neue Module (wie netzwerk.css/todo.css):
   KEIN Eingriff in styles.css, damit Login-Seite und bestehende Apps unangetastet
   bleiben. Alle Farben kommen aus den Design-Tokens (--card, --border, --text2,
   --accent) — keine Rohfarben, sonst brechen Dark- und Lumen-Theme.

   Modulfarbe: --wiki (Akten/Dokumente liegt fachlich bei der Doku/Verwaltung);
   der Wert steht NUR im Token (styles.css), nicht hier — sonst wäre er eine
   zweite Wahrheit.

   Formulare sind SEGMENTE mit Wirkung (Haus-Regel): kein Bedienelement ohne
   Backend-Folge, Details in der eigenen Detailspalte — kein Modal.
*/

.ak-wrap{padding:10px 4px 20px}
#sec-akten .ak-wrap{max-width:1500px}

/* ---------- Kopfzeile ---------- */
.ak-top{display:flex;align-items:center;gap:10px;padding:2px 2px 12px}
.ak-mark{width:32px;height:32px;border-radius:var(--radius);display:flex;align-items:center;
  justify-content:center;flex:0 0 auto;
  background:color-mix(in srgb, var(--wiki) 14%, var(--card));color:var(--wiki)}
.ak-t{font-size:14px;font-weight:700;line-height:1.25}
.ak-s{font-size:11.5px;color:var(--text2);line-height:1.3}
.ak-weg{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:11.5px;
  color:var(--text2);text-decoration:none;border:1px solid var(--border);border-radius:var(--radius);
  padding:4px 9px;background:var(--card);transition:background var(--tr),border-color var(--tr),color var(--tr)}
.ak-weg:hover{color:var(--accent);border-color:var(--accent);background:var(--hover)}

/* ---------- Zweispaltig: Aktenbaum links, Inhalt rechts ---------- */
.ak-split{display:flex;gap:14px;align-items:flex-start}
.ak-baum{flex:0 0 288px;min-width:0}
.ak-main{flex:1 1 auto;min-width:0}

.ak-lbl{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--text2);padding:2px 2px 6px}
.ak-lbl .mc{margin-left:4px}

/* ---------- Handgriffe (die drei häufigen) ---------- */
.ak-griffe{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:10px}
.ak-knopf{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;
  padding:6px 11px;border-radius:var(--radius);border:1px solid var(--border);
  background:var(--card);color:var(--text);cursor:pointer;
  transition:background var(--tr),border-color var(--tr),color var(--tr)}
.ak-knopf:hover{border-color:var(--accent);color:var(--accent)}
.ak-knopf.prim{background:color-mix(in srgb, var(--wiki) 13%, var(--card));
  border-color:var(--wiki);color:var(--wiki)}
.ak-knopf:disabled{opacity:.55;cursor:not-allowed}

/* ---------- Aktenliste (Kachel + volle Ansicht) ---------- */
.ak-zeile{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:var(--radius);
  border:1px solid var(--border);background:var(--card);margin-bottom:6px;cursor:pointer;
  transition:background var(--tr),border-color var(--tr)}
.ak-zeile:hover{background:var(--hover);border-color:var(--accent)}
.ak-zeile.act{border-color:var(--wiki);background:color-mix(in srgb, var(--wiki) 10%, var(--card))}
.ak-zeile-b{flex:1 1 auto;min-width:0}
.ak-zeile-t{font-size:13px;font-weight:600;line-height:1.3;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.ak-zeile-s{font-size:11px;color:var(--text2);line-height:1.35;margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ak-zeile-r{flex:0 0 auto;display:flex;align-items:center;gap:8px}
.ak-nr{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;color:var(--text2);
  background:var(--hover);padding:2px 6px;border-radius:5px;white-space:nowrap}

/* Alter einer Akte: Handlungsbedarf sichtbar machen, nicht nur ein Datum.
   Farbe bleibt Signal (Haus-Regel) — „alt" heißt lange offen. */
.ak-alt{font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:999px;white-space:nowrap}
.ak-alt.frisch{background:color-mix(in srgb, var(--ok) 15%, var(--card));color:var(--ok)}
.ak-alt.mittel{background:color-mix(in srgb, var(--warn) 17%, var(--card));color:var(--warn)}
.ak-alt.alt{background:color-mix(in srgb, var(--danger) 14%, var(--card));color:var(--danger)}

/* ---------- Detailspalte: der Akt ---------- */
.ak-kopf{border:1px solid var(--border);border-radius:var(--radius);background:var(--card);
  padding:12px 13px;margin-bottom:10px}
.ak-kopf-t{font-size:15px;font-weight:700;line-height:1.3}
.ak-kopf-s{font-size:11.5px;color:var(--text2);margin-top:3px;display:flex;gap:10px;flex-wrap:wrap}
.ak-seg{margin-bottom:10px}
.ak-seg-k{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--text2);padding:0 0 5px 4px;border-left:3px solid var(--wiki);padding-left:8px}
.ak-seg-b{display:flex;flex-wrap:wrap;gap:6px}
.ak-paar{flex:0 0 auto;min-width:132px;border:1px solid var(--border);border-radius:var(--radius);
  background:var(--card);padding:6px 9px}
.ak-paar-k{font-size:10px;letter-spacing:.03em;text-transform:uppercase;color:var(--text2)}
.ak-paar-v{font-size:12.5px;font-weight:600;line-height:1.3}

/* ---------- Baum ---------- */
.ak-b{border:1px solid var(--border);border-radius:var(--radius);background:var(--card);overflow:hidden}
.ak-b-kopf{display:flex;align-items:center;gap:7px;padding:8px 10px;border-bottom:1px solid var(--border)}
.ak-b-kopf-t{font-size:12px;font-weight:700;flex:1 1 auto;min-width:0}
.ak-b-in{padding:5px 4px 8px;max-height:none}
.ak-n{display:flex;align-items:center;gap:6px;padding:5px 8px;border-radius:6px;cursor:pointer;
  font-size:12.5px;transition:background var(--tr)}
.ak-n:hover{background:var(--hover)}
.ak-n.act{background:color-mix(in srgb, var(--wiki) 12%, var(--card));font-weight:600}
.ak-n-pfeil{width:13px;height:13px;flex:0 0 auto;color:var(--text2);transition:transform var(--tr)}
.ak-n.auf .ak-n-pfeil{transform:rotate(90deg)}
.ak-n-t{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ak-n-z{font-size:10.5px;color:var(--text2);flex:0 0 auto}
.ak-n-kinder{padding-left:14px}

/* ---------- Formular (Segmente, mit Wirkung) ---------- */
.ak-form{border:1px solid var(--border);border-radius:var(--radius);background:var(--card);
  padding:12px 13px}
.ak-feld{margin-bottom:9px}
.ak-feld-k{font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--text2);padding-bottom:4px;padding-left:8px;border-left:3px solid var(--wiki)}
.ak-feld input,.ak-feld select,.ak-feld textarea{width:100%;font-size:12.5px;padding:7px 9px;
  border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);
  color:var(--text);font-family:inherit}
.ak-feld input:focus,.ak-feld select:focus,.ak-feld textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent)}
.ak-feld-h{font-size:10.5px;color:var(--text2);margin-top:3px;padding-left:2px}
.ak-reihe{display:flex;gap:8px;flex-wrap:wrap}
.ak-reihe>*{flex:1 1 170px;min-width:0}
.ak-fuss{display:flex;gap:8px;justify-content:flex-end;margin-top:11px;
  padding-top:10px;border-top:1px solid var(--border)}

/* Ein Pflichtfeld, das die API nachgefordert hat — sichtbar als Handlungsbedarf,
   nicht als Fehlermeldung ohne Ort. */
.ak-fehlt{border-color:var(--danger)!important;
  box-shadow:0 0 0 2px color-mix(in srgb, var(--danger) 20%, transparent)!important}

/* ---------- Zustände ---------- */
.ak-hinweis{border:1px solid var(--border);border-left:3px solid var(--wiki);border-radius:var(--radius);
  background:var(--card);padding:12px 14px;font-size:12.5px;line-height:1.5}
.ak-hinweis b{display:block;margin-bottom:4px;font-size:13px}
.ak-warn{border:1px solid color-mix(in srgb, var(--warn) 45%, var(--border));
  border-left:3px solid var(--warn);border-radius:var(--radius);background:var(--card);
  padding:10px 12px;font-size:12px;line-height:1.45;margin-bottom:9px}
.ak-err{border:1px solid color-mix(in srgb, var(--danger) 45%, var(--border));
  border-left:3px solid var(--danger);border-radius:var(--radius);background:var(--card);
  padding:10px 12px;font-size:12px;line-height:1.45;margin-bottom:9px}
.ak-ok{border:1px solid color-mix(in srgb, var(--ok) 45%, var(--border));
  border-left:3px solid var(--ok);border-radius:var(--radius);background:var(--card);
  padding:10px 12px;font-size:12px;line-height:1.45;margin-bottom:9px}

/* ---------- Baum: Arbeitsvorrat + Akten (Kap. 423) ----------

   Der Auftrag: „links in einem tree ist der arbeitsvorrat sichtbar". Der Baum hat
   zwei Ebenen: Zweig (Vorrat/Gruppe) -> Blatt (Eintrag). Der Zweig traegt die Zahl
   als Signal; ein leeres Blatt ist gedimmt, keine leere Zeile.

   Aktiv-Zustand ist hier `offen` am Kopf (Dreieck gedreht) — NICHT `primary`
   (Ribbon-Standard: Farbe ist Signal, nicht Dekoration). */
.ak-ast{margin-bottom:2px}
.ak-ast-k{display:flex;align-items:center;gap:7px;width:100%;border:0;background:transparent;
  color:var(--text);font:inherit;font-size:12.5px;padding:7px 8px;border-radius:var(--radius);
  cursor:pointer;text-align:left}
.ak-ast-k:hover{background:color-mix(in srgb, var(--wiki) 10%, transparent)}
.ak-ast-k i{flex:0 0 auto;color:var(--text2);transition:transform .15s}
.ak-ast-k.offen i{transform:rotate(90deg)}
.ak-ast-k.offen{background:color-mix(in srgb, var(--wiki) 12%, transparent)}
.ak-ast-t{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ak-ast-n{flex:0 0 auto;font-size:11px;font-weight:600;color:var(--wiki);
  background:color-mix(in srgb, var(--wiki) 14%, transparent);border-radius:9px;
  padding:1px 7px;min-width:20px;text-align:center}
.ak-ast-n.leer{color:var(--text2);background:color-mix(in srgb, var(--text2) 10%, transparent);
  font-weight:500}
.ak-ast-kinder{padding-left:14px;border-left:1px solid var(--border);margin-left:11px}
.ak-ast-f{font-size:11.5px;color:var(--text2);padding:5px 8px;line-height:1.45}
/* Das Blatt: ein Eintrag im Vorrat (Taetigkeit an einem Objekt). */
.ak-blatt{display:flex;align-items:center;gap:7px;padding:6px 8px;border-radius:var(--radius);
  cursor:pointer;font-size:12px}
.ak-blatt:hover{background:color-mix(in srgb, var(--wiki) 9%, transparent)}
.ak-blatt i{flex:0 0 auto;color:var(--text2)}
.ak-blatt-t{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Kap. 423: Blatt traegt zwei Zeilen — der Akt (oben) und die Taetigkeit daran
   (unten, gedimmt). Ohne die zweite Zeile weiss der Nutzer nicht, was zu tun ist. */
.ak-blatt-i{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}
.ak-blatt-i .ak-blatt-t{display:block}
.ak-blatt-u{font-size:11px;color:var(--text2);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.ak-blatt-z{flex:0 0 auto;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10.5px;
  color:var(--text2)}
/* Ladeplatzhalter im Baum: haelt die Geometrie, damit nichts springt. */
.ak-skel-z{background:color-mix(in srgb, var(--text2) 13%, transparent);
  border-radius:var(--radius);margin:3px 0;animation:ak-puls 1.4s ease-in-out infinite}
@keyframes ak-puls{0%,100%{opacity:.55}50%{opacity:1}}

/* ---------- Karteireiter am Akt (Kap. 423, Auftrag) ----------

   Der Akt ist ein OBJEKT MIT KARTEIREITERN. Aktiv = `on` (Ribbon-Standard). Die
   Leiste ist flach und liegt auf der Trennlinie — kein Kasten, kein Schatten. */
.ak-reiter{display:flex;gap:2px;border-bottom:1px solid var(--border);margin:2px 0 12px}
.ak-reiter-k{display:flex;align-items:center;gap:6px;border:0;background:transparent;
  color:var(--text2);font:inherit;font-size:12.5px;padding:8px 12px;cursor:pointer;
  border-bottom:2px solid transparent;margin-bottom:-1px}
.ak-reiter-k:hover{color:var(--text)}
.ak-reiter-k.on{color:var(--wiki);border-bottom-color:var(--wiki);font-weight:600}
.ak-reiter-k i{width:13px;height:13px}
.ak-reiter-inhalt{min-height:80px}

/* ---------- Upload (Kap. 423) ---------- */
.ak-feld input[type=file]{font-size:12px;color:var(--text2);padding:6px 0;width:100%}
.ak-feld input[type=file]::file-selector-button{border:1px solid var(--border);
  background:var(--card);color:var(--text);border-radius:var(--radius);padding:5px 11px;
  font:inherit;font-size:12px;cursor:pointer;margin-right:9px}
.ak-feld input[type=file]::file-selector-button:hover{
  background:color-mix(in srgb, var(--wiki) 10%, transparent)}

/* ---------- Mobile: Baum oben, dann der Akt ---------- */
@media (max-width:820px){
  .ak-split{flex-direction:column}
  .ak-baum{flex:1 1 auto;width:100%}
  .ak-main{width:100%}
  .ak-weg{margin-left:0}
  .ak-top{flex-wrap:wrap}
}