/* ---------------------------
   User-Tabelle
---------------------------- */
.container {
    max-width: 1400px;
    /* maximale Breite des Containers beträgt 1400 Pixel */
}

.page-title {
    color: #5ca174;
}

.table-wrapper { /* umschließt Tabelle */
    background: #fff;
    padding: 1.5rem; /* Innenabstand, damit die Tabelle nicht direkt am Rand klebt*/
    border-radius: 1rem; /* abgerundete Ecken*/
    overflow-x: auto; /* horizontale Scrollbar, wenn die Tabelle breiter als der Container ist */
}

.user-table-head th {
    background: #3f6f58; /* dunkles Grün für die Kopfzeile */
    color: #fff; /* weißer text */
}

.table {
    margin-top: 0.5rem;
    /* Abstand über Tabelle, damit sie nicht direkt unter Titel klebt */
}

.table td, .table th { /* Alle Zellen und Kopfzellen der Tabelle. */
    border-color: #e8f1ec; /* nur Farbe der Zellenrahmen, Style kommt von Bootstrap */
}

.table-hover tbody tr:hover {
    background: #eef5f1;
}

.btn-primary { /* überschreibt  Standard-Button von Bootstrap */
    background: #4b8d6b; /* Hintergrundfarbe des Buttons */
    border-color: #4b8d6b; /* Rahmenfarbe passend zur Hintergrundfarbe */
    border-radius: 0.5rem; /* abgerundete Ecken*/
}

.btn-primary:hover {
    background: #3f6f58; /* Ändert die Hintergrundfarbe beim Überfahren (Hover), damit der Button interaktiv wirkt */
}

.btn-danger {
    border-radius: 0.5rem; /*abgerundete ecken */
}

.actions { /*wählt  Zelle mit den Bearbeiten-/Löschen-Buttons aus */
    display: flex; /*ordnet Buttons nebeneinander*/
    justify-content: center; /*zentriert Buttons horizontal in der Zelle */
    gap: 0.5rem; /*Abstand zwischen den Buttons */
}
.hash-cell { /*wählt Passwort-Zelle aus */
    max-width: 12ch; /*egrenzt Breite auf 12 Zeichen */
    overflow: hidden; /*Inhalt, der nicht passt, wird abgeschnitten */
    text-overflow: ellipsis; /*zeigt „…“ an, wenn abgeschnitten */
    white-space: nowrap; /*verhindert Zeilenumbruch*/
}