/* ============================================================
   Persoenliches Portalarchiv
   ============================================================
   Gemeinsame Bedienung fuer Mitteilungen, Anfragen, Tickets und
   Zugangsdaten. Die Fachlisten behalten ihre eigene Typografie;
   Umschaltung und Aktion sehen ueberall gleich aus.
   ============================================================ */

.cd-archivnav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  inline-size: min(100%, 28rem);
  margin: 0 0 var(--cd-a5);
  padding: 4px;
  border: 1px solid var(--cd-linie);
  border-radius: var(--cd-r-feld);
  background: var(--cd-weiss);
}

.cd-archivnav__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-block-size: 42px;
  padding: 8px 12px;
  border-radius: calc(var(--cd-r-feld) - 3px);
  color: var(--cd-text-2);
  font-size: var(--cd-gr-klein);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--cd-zeit) ease, background var(--cd-zeit) ease;
}
.cd-archivnav__link:hover {
  color: var(--cd-tinte);
  background: var(--cd-flaeche-2);
}
.cd-archivnav__link--aktiv,
.cd-archivnav__link--aktiv:hover {
  color: var(--cd-weiss);
  background: var(--cd-tinte);
}
.cd-archivnav__zahl {
  display: inline-grid;
  place-items: center;
  min-inline-size: 22px;
  block-size: 22px;
  padding-inline: 6px;
  border-radius: 999px;
  background: var(--cd-flaeche-3);
  color: var(--cd-text-2);
  font-family: var(--cd-schrift-mono);
  font-size: var(--cd-gr-mikro);
  line-height: 1;
}
.cd-archivnav__link--aktiv .cd-archivnav__zahl {
  background: rgb(255 255 255 / 16%);
  color: var(--cd-weiss);
}

.cd-archivaktion-form { margin: 0; }
.cd-archivaktion {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-block-size: 38px;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: var(--cd-r-feld);
  background: transparent;
  color: var(--cd-text-3);
  font: inherit;
  font-size: var(--cd-gr-klein);
  cursor: pointer;
  transition: color var(--cd-zeit) ease, border-color var(--cd-zeit) ease, background var(--cd-zeit) ease;
}
.cd-archivaktion:hover {
  color: var(--cd-tinte);
  border-color: var(--cd-linie);
  background: var(--cd-flaeche-2);
}
.cd-archivaktion .cd-symbol {
  inline-size: 16px;
  block-size: 16px;
  flex: 0 0 16px;
}

.cd-archivfehler {
  margin: 0 0 var(--cd-a4);
  padding: 12px 16px;
  border: 1px solid #F0C9CC;
  border-radius: var(--cd-r-feld);
  background: #FBEBEC;
  color: #9E0C12;
  font-size: var(--cd-gr-klein);
}

/* Link und Formular teilen sich eine Karte. Dadurch bleibt die ganze
   Inhaltsflaeche anklickbar, waehrend der POST-Knopf daneben kein
   ungueltig verschachteltes Formular oder Link-Markup erzeugt. */
.cd-archivzeile {
  display: flex;
  align-items: stretch;
  overflow: hidden;
  background: var(--cd-weiss);
  border: 1px solid var(--cd-linie);
  border-radius: var(--cd-r-karte);
  transition: border-color var(--cd-zeit) ease, box-shadow var(--cd-zeit) ease;
}
.cd-archivzeile:hover,
.cd-archivzeile:focus-within {
  border-color: var(--cd-linie-stark, #c9d4da);
  box-shadow: var(--cd-schatten-karte);
}
.cd-archivzeile.cd-tliste__zeile--neu { border-color: #F0C9CC; }
.cd-archivzeile > :is(.cd-aliste__link, .cd-tliste__link) {
  flex: 1 1 auto;
  min-inline-size: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.cd-archivzeile > :is(.cd-aliste__link, .cd-tliste__link):hover { box-shadow: none; }
.cd-archivzeile > .cd-archivaktion-form {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 8px;
  border-inline-start: 1px solid var(--cd-linie);
}

/* Mitteilungskarten haben keinen separaten Detail-Link. Die beiden
   moeglichen Aktionen stehen deshalb als kompakte Gruppe darunter. */
.cd-mliste__zeile > :is(.cd-mliste__form, .cd-archivaktion-form) {
  display: inline-flex;
  margin-block-start: var(--cd-a3);
  vertical-align: top;
}
.cd-mliste__zeile > .cd-archivaktion-form { margin-inline-start: 6px; }

/* In Detail-Kopfzeilen bleibt der Knopf auf derselben Grundlinie wie
   Status und Datum, darf bei wenig Platz aber sauber umbrechen. */
:is(.cd-anfrage__meta, .cd-tickets__meta) > .cd-archivaktion-form {
  margin-inline-start: auto;
}

@media (max-width: 600px) {
  .cd-archivnav { inline-size: 100%; }
  .cd-archivzeile { flex-direction: column; }
  .cd-archivzeile > .cd-archivaktion-form {
    justify-content: flex-end;
    border-inline-start: 0;
    border-block-start: 1px solid var(--cd-linie);
  }
  .cd-archivzeile > .cd-archivaktion-form .cd-archivaktion { inline-size: 100%; }
  .cd-mliste__zeile > :is(.cd-mliste__form, .cd-archivaktion-form) {
    display: flex;
    inline-size: 100%;
    margin-inline: 0;
  }
  .cd-mliste__zeile > .cd-archivaktion-form .cd-archivaktion { inline-size: 100%; }
  :is(.cd-anfrage__meta, .cd-tickets__meta) > .cd-archivaktion-form {
    inline-size: 100%;
    margin-inline-start: 0;
  }
}