/*
 * Seiten des Admins: Bild bearbeiten und Kategorien (Angebot 2.4b), Rahmen mit der Klasse hs-admin,
 * dazu weiter unten der Adminbereich im Menü links und der Link „Bild bearbeiten“ in der Galerie.
 * Das Grau des Themes erreicht auf Weiß 2,6:1 (Knöpfe und Textlinks, #888 bei Deckkraft 0,8), 2,8:1
 * (Tabellenkopf, #9A9A9A) und 1,3:1 (Feldrand, #E3E3E3), gemessen im Browser. Nötig sind 4,5:1 für
 * Text und 3:1 für Ränder (UX-12). #555 erreicht 7,5:1, #8A8A8A 3,4:1. Die übrigen Seiten behalten
 * das Grau des Altstands. Steht vor hs-delete.css, damit Löschknöpfe rot bleiben.
 */
.hs-admin .btn,
.hs-admin .btn:hover,
.hs-admin .btn:focus {
    color: #555555;
    border-color: #555555;
    opacity: 1;
}

/* Lange Kategorienamen im Knopf brechen um, statt über die Karte hinauszulaufen (390 px Breite). */
.hs-admin .btn {
    white-space: normal;
}

.hs-admin .btn-link,
.hs-admin .btn-link:hover,
.hs-admin .btn-link:focus,
.hs-admin .btn-link.hs-delete,
.hs-admin .btn-link.hs-delete:hover,
.hs-admin .btn-link.hs-delete:focus {
    border-color: transparent;
}

/*
 * Das Theme setzt Spaltenköpfe mit !important linksbündig und die letzte Spalte auf inline-flex, die
 * Zeilenlinien enden dann vor ihr. Zahlen und Aktionen stehen samt Kopf rechtsbündig (FMT-11).
 */
.hs-admin .table > thead > tr > th.text-right {
    text-align: right !important;
}

.hs-admin .table tbody td:last-child,
.hs-admin .table thead th:last-child {
    display: table-cell;
}

/* Am Handy ragte die Tabelle mit den Abständen des Themes (8 und 15 px je Seite) 19 px über die Karte. */
@media (max-width: 575.98px) {
    .hs-admin .table > thead > tr > th,
    .hs-admin .table > tbody > tr > td,
    .hs-admin .table tbody td:first-child,
    .hs-admin .table thead th:first-child,
    .hs-admin .table tbody td:last-child,
    .hs-admin .table thead th:last-child {
        padding-left: 4px;
        padding-right: 4px;
    }
}

.hs-admin .form-control {
    border-color: #8A8A8A;
}

/* Erfolgsmeldung im Grün des Themes, Schrift dunkel statt weiß: 1,5:1 gegen 11:1. */
.hs-admin .alert-success,
.hs-admin .alert-success .close {
    color: #1E1E1E;
}

/* Liste der Eingabefehler über dem Formular, je Eintrag ein Link auf das Feld (UX-05). */
.hs-admin .hs-error-summary {
    border: 2px solid #D6202B;
    border-radius: 4px;
    padding: 10px 15px;
    margin-bottom: 15px;
}

.hs-admin .hs-error-summary ul {
    margin-bottom: 0;
}

.hs-admin .hs-error-summary a {
    color: #D6202B;
    text-decoration: underline;
}

/* Der Kopf der Kategorien bleibt beim Scrollen sichtbar (UX-15). */
.hs-admin .table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    color: #555555;
    background-color: #FFFFFF;
}

/*
 * Menü links: Der Adminbereich steht unter „Kontakt“ in einem dunkleren Kasten mit Überschrift. Weiß auf
 * dem Lila des Themes erreicht auf Höhe des Kastens 4,4:1, im Kasten 6,9:1, nötig sind für 12 px 4,5:1
 * (UX-12, gemessen im Browser).
 * Überschrift und Symbole stehen auf derselben Linie wie im übrigen Menü (15 px Rand, 15 px Innenabstand).
 */
.sidebar .nav li.hs-nav-admin {
    margin: 25px 15px 0;
    padding: 12px 0 5px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.25);
}

.sidebar .nav .hs-nav-heading {
    margin: 0;
    padding: 0 15px 3px;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.sidebar .nav .hs-nav-admin .nav {
    margin-top: 0;
}

.sidebar .nav .hs-nav-admin .nav-link {
    margin: 5px 0;
}

/* Gewählter Eintrag etwas weniger hell als im Theme (0,23), sonst fiele die Schrift unter 4,5:1. */
.sidebar .nav .hs-nav-admin li.active .nav-link {
    background: rgba(255, 255, 255, 0.12);
}

/*
 * „Bild bearbeiten“ in der Bildunterschrift ist ein Link und sieht aus wie die Knöpfe daneben
 * (thumbnail-gallery.css färbt nur button), 7,2:1.
 */
.tz-gallery .caption a.btn {
    border-style: none;
    color: #0000F0;
}