/* --- Step 2 of the DATEV month-end close (#634) --- */

/* One card per bank account. The state of the confirmation is the card's left
   edge, so a list of six accounts reads at a glance before any line is read. */
.dks-karte {
  display: grid;
  gap: 0.9rem;
  min-width: 0;
  border-left: 3px solid var(--line);
}

.dks-karte--offen {
  border-left-color: var(--line-strong);
}

.dks-karte--bestaetigt {
  border-left-color: var(--pos);
}

.dks-karte--wieder-offen {
  border-left-color: var(--neg);
}

.dks-karte__kopf {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.25rem 1rem;
  min-width: 0;
}

.dks-karte__name {
  min-width: 0;
}

.dks-karte__iban,
.dks-karte__finanzkonto {
  font-size: 0.8rem;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* Four checks and the bank's figure, each a line of label, sentence and state. */
.dks-pruefungen {
  display: grid;
  min-width: 0;
  border-top: 1px solid var(--line);
}

.dks-zeile {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.75rem;
  padding-block: 0.55rem;
  border-bottom: 1px solid var(--line);
  min-width: 0;
}

.dks-zeile--warnung .dks-zeile__label {
  color: var(--neg);
}

.dks-zeile__label {
  font-weight: 600;
  min-width: 0;
}

.dks-zeile__text {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}

.dks-zeile__still {
  min-width: 0;
}

.dks-satz {
  min-width: 0;
  overflow-wrap: anywhere;
}

.dks-luecke {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.dks-luecke .dks-satz + .dks-satz {
  font-size: 0.8rem;
  color: var(--text-dim);
}

.dks-bank {
  display: grid;
  grid-template-columns: minmax(0, 16rem) auto minmax(0, 1fr);
  align-items: end;
  gap: 0.75rem;
  min-width: 0;
}

.dks-bank__meldung,
.dks-bestaetigung__meldung {
  min-width: 0;
}

.dks-bestaetigung {
  display: grid;
  gap: 0.6rem;
  min-width: 0;
}

.dks-bestaetigung__wer {
  margin: 0;
  color: var(--text-dim);
}

.dks-quittung {
  align-items: flex-start;
  color: var(--neg);
  min-width: 0;
}

.dks-bestaetigung__fuss {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

@media (max-width: 430px) {
  .dks-zeile {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .dks-zeile > .dks-satz,
  .dks-zeile > .dks-zeile__text {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .dks-bank {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .dks-bank__meldung {
    grid-column: 1 / -1;
  }
}