/* ===============================
   Historie – Grundlayout

   Tabellenstruktur:
   1. L / Checkbox
   2. Datum
   3. Mitarbeiter
   4. Kategorie
   5. Änderungen

   HTML-Struktur:
   #id_div_rumpfleiste_spalte2_areal2_6
     └─ #id_div_historie_tabellencontainer
          └─ #id_table_historie

   Buttonbar:
   #id_div_rumpfleiste_spalte2_areal3_6
   =============================== */


/* ===============================
   Wrapper
   =============================== */

/*
 * Der Wrapper füllt den Bereich zwischen der oberen Menüleiste
 * und der unteren Buttonleiste.
 *
 * Die endgültige Höhe wird zusätzlich durch
 * resizeHistorieWrapper() in JavaScript gesetzt.
 */

/* ===============================
   Scrollbarer Tabellencontainer
   =============================== */

#id_div_historie_tabellencontainer.div_tabellen_container {
  flex: 1 1 auto;
  min-height: 0;

  overflow: auto;

  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #ffffff;

  padding: 8px;
  box-sizing: border-box;
}


/* ===============================
   Tabelle – Grundformatierung
   =============================== */

#id_table_historie.tabellenklasse {
  width: 100%;

  /*
   * Mindestbreite verhindert, dass die fünf Spalten
   * bei kleinen Fenstern zu stark zusammengedrückt werden.
   * Der Tabellencontainer erhält dann einen horizontalen
   * Scrollbalken.
   */
  min-width: 800px;

  border-collapse: collapse;
  table-layout: fixed;
}


/* Kopfzeile beim Scrollen fixieren */
#id_table_historie .tabheaderzelle {
  position: sticky;
  top: 0;
  z-index: 2;

  background: #f9fafb;

  text-align: left;
  font-weight: 600;
}


/* Gemeinsame Formatierung aller Tabellenzellen */
#id_table_historie th,
#id_table_historie td {
  padding: 6px 8px;

  vertical-align: top;
  border-bottom: 1px solid #dddddd;

  box-sizing: border-box;
}


/* Leichte Hervorhebung der Tabellenzeile */
#id_table_historie tbody tr:hover {
  background: #fafafa;
}


/* ===============================
   Spalte 1 – L / Checkbox
   =============================== */

#id_table_historie th:nth-child(1),
#id_table_historie td:nth-child(1) {
  width: 42px;
  min-width: 42px;
  max-width: 42px;

  padding-left: 4px;
  padding-right: 4px;

  text-align: center;
  vertical-align: middle;
}


/* Checkbox selbst */
#id_table_historie td.hist-loeschen input.hist-chk,
#id_table_historie td:first-child input.hist-chk {
  display: block;

  width: 16px;
  height: 16px;

  margin: 0 auto;
}


/* ===============================
   Spalte 2 – Datum
   =============================== */

#id_table_historie th:nth-child(2),
#id_table_historie td:nth-child(2) {
  width: 145px;
  min-width: 145px;
  max-width: 145px;

  white-space: nowrap;
}


/* Datumszelle */
#id_table_historie td.hist-datum {
  white-space: nowrap;
}


/* Datumseingabefeld */
#id_table_historie td.hist-datum input[type="date"] {
  display: block;

  width: 100%;
  min-width: 0;

  margin: 0;
  padding: 4px 5px;

  box-sizing: border-box;
  font: inherit;
}


/* ===============================
   Spalte 3 – Mitarbeiter
   =============================== */

#id_table_historie th:nth-child(3),
#id_table_historie td:nth-child(3) {
  width: 120px;
  min-width: 120px;
  max-width: 120px;

  white-space: nowrap;
}


/* Mitarbeiterzelle */
#id_table_historie td.hist-mitarb {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}


/* ===============================
   Spalte 4 – Kategorie
   =============================== */

#id_table_historie th:nth-child(4),
#id_table_historie td:nth-child(4) {
  width: 210px;
  min-width: 210px;
  max-width: 210px;
}


/* Kategorie-Auswahl */
#id_table_historie td.hist-kategorie select {
  display: block;

  width: 100%;
  min-width: 0;

  margin: 0;
  padding: 4px 6px;

  box-sizing: border-box;
  font: inherit;
}


/* ===============================
   Spalte 5 – Änderungen
   =============================== */

/*
 * Die fünfte Spalte erhält die gesamte verbleibende Breite.
 */
#id_table_historie th:nth-child(5),
#id_table_historie td:nth-child(5) {
  width: auto;
  min-width: 250px;
}


/* Textzelle */
#id_table_historie td.hist-text {
  padding: 0;
}


/* Textarea füllt die komplette fünfte Spalte */
#id_table_historie td.hist-text textarea {
  display: block;

  width: 100%;
  min-width: 0;
  min-height: 34px;

  margin: 0;
  padding: 6px 8px;

  border: none;
  outline: none;
  background: transparent;

  box-sizing: border-box;

  font: inherit;
  line-height: 1.3;

  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;

  resize: vertical;
  overflow: hidden;
}


/* Hervorhebung beim Bearbeiten */
#id_table_historie td.hist-text textarea:focus {
  overflow-y: auto;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px #cbd5e1;
}


/* ===============================
   Feedback nach dem Speichern
   =============================== */

/*
 * Die Klasse hist-flash-save wird nach dem Speichern
 * durch JavaScript auf die betreffende Tabellenzeile gesetzt.
 */
@keyframes hist-flash-save {
  0% {
    background-color: #d1fae5;
  }

  100% {
    background-color: transparent;
  }
}


#id_table_historie tbody tr.hist-flash-save {
  animation: hist-flash-save 1.4s ease-out;
}


/* ===============================
   Tabellenbody
   =============================== */

/*
 * Verhindert ein Überlaufen der Tabelleninhalte.
 */
#id_tbody_historie {
  contain: content;
}


/* ===============================
   Buttonleiste
   =============================== */

#id_div_rumpfleiste_spalte2_areal3_6 {
  box-sizing: border-box;
}


/* ===============================
   Anzeige nur nach Anmeldung
   =============================== */

/*
 * Solange body nicht die Klasse is-logged-in besitzt,
 * wird der Historienbereich nicht angezeigt.
 */
body:not(.is-logged-in)
#id_div_rumpfleiste_spalte2_areal2_6 {
  display: none !important;
}