/*
 * ============================================================
 * GPD PRERENDER ADMIN – ZENTRALES STYLESHEET
 * ============================================================
 *
 * Zweck:
 *
 * Alle Views der Admin-Anwendung verwenden dieselben zentralen
 * Designvariablen.
 *
 * Dadurch werden Farben und grundlegende UI-Konventionen nicht
 * in einzelnen Templates dupliziert.
 *
 * ============================================================
 */

:root {
    /*
     * Verbindliche Hauptfarbe der GPD-Admin-Oberfläche.
     */
    --gpd-primary: #93233a;

    /*
     * Verbindliche Standardschriftfarbe.
     */
    --gpd-text: #292020;
}


/*
 * ------------------------------------------------------------
 * Grundlayout
 * ------------------------------------------------------------
 */

html {
    color: var(--gpd-text);
}


body {
    margin: 0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    color: var(--gpd-text);

    background: #ffffff;
}


/*
 * ------------------------------------------------------------
 * Überschriften
 * ------------------------------------------------------------
 */

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--gpd-text);
}


/*
 * ------------------------------------------------------------
 * Links
 * ------------------------------------------------------------
 */

a {
    color: var(--gpd-primary);
}


/*
 * ------------------------------------------------------------
 * Standardbuttons
 * ------------------------------------------------------------
 */

button,
.button {
    color: #ffffff;

    background: var(--gpd-primary);

    border: 1px solid var(--gpd-primary);

    cursor: pointer;
}


/*
 * ------------------------------------------------------------
 * Zentrale Layoutvariablen
 * ------------------------------------------------------------
 *
 * Diese Werte bilden die neutrale Oberfläche rund um die
 * verbindlichen GPD-Farben.
 *
 * Auch diese Werte werden ausschließlich zentral definiert,
 * damit einzelne Views keine eigenen abweichenden Layoutfarben
 * erhalten.
 */

:root {
    --gpd-background: #f6f4f4;
    --gpd-surface: #ffffff;
    --gpd-border: #ded8d8;
    --gpd-text-muted: #6d6464;

    --gpd-radius: 8px;

    --gpd-content-width: 1280px;
}


/*
 * ------------------------------------------------------------
 * Admin-Seitenlayout
 * ------------------------------------------------------------
 *
 * .admin-page:
 * Gesamte geschützte Verwaltungsoberfläche.
 *
 * .admin-content:
 * Zentriert den eigentlichen Seiteninhalt und verhindert,
 * dass dieser auf sehr großen Bildschirmen unnötig breit wird.
 */

.admin-page {
    min-height: 100vh;

    background: var(--gpd-background);
}


.admin-content {
    width: calc(100% - 48px);
    max-width: var(--gpd-content-width);

    margin: 0 auto;
    padding: 32px 0;
}


/*
 * ------------------------------------------------------------
 * Standardkarte
 * ------------------------------------------------------------
 *
 * Diese Klasse kann später für Statusinformationen,
 * Einstellungen, Benutzerverwaltung und weitere
 * Dashboard-Bereiche wiederverwendet werden.
 */

.admin-card {
    padding: 24px;

    background: var(--gpd-surface);

    border: 1px solid var(--gpd-border);
    border-radius: var(--gpd-radius);
}


/*
 * ------------------------------------------------------------
 * Bootstrap – GPD Branding
 * ------------------------------------------------------------
 *
 * Bootstrap selbst bleibt unverändert.
 *
 * Alle GPD-spezifischen Anpassungen werden ausschließlich hier
 * vorgenommen. Dadurch können Bootstrap-Versionen später
 * aktualisiert werden, ohne Vendor-Dateien verändern zu müssen.
 *
 * Hauptfarbe:
 *
 *     #93233a
 *
 * Standardschrift:
 *
 *     #292020
 *
 * ------------------------------------------------------------
 */

:root {
    /*
     * RGB-Wert der GPD-Hauptfarbe.
     *
     * Bootstrap benötigt an verschiedenen Stellen zusätzlich
     * die getrennte RGB-Darstellung.
     */
    --gpd-primary-rgb: 147, 35, 58;

    /*
     * Etwas dunklere Variante für Hover- und Active-Zustände.
     */
    --gpd-primary-hover: #7d1e31;

    /*
     * Bootstrap-Basisvariablen an das GPD-Branding anbinden.
     */
    --bs-primary: var(--gpd-primary);
    --bs-primary-rgb: var(--gpd-primary-rgb);

    --bs-body-color: var(--gpd-text);
}


/*
 * ------------------------------------------------------------
 * Bootstrap Primary Button
 * ------------------------------------------------------------
 *
 * Bootstrap definiert für .btn-primary eigene Komponenten-
 * variablen. Diese müssen deshalb zusätzlich überschrieben
 * werden.
 */

.btn-primary {
    --bs-btn-color: #ffffff;

    --bs-btn-bg: var(--gpd-primary);
    --bs-btn-border-color: var(--gpd-primary);

    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: var(--gpd-primary-hover);
    --bs-btn-hover-border-color: var(--gpd-primary-hover);

    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: var(--gpd-primary-hover);
    --bs-btn-active-border-color: var(--gpd-primary-hover);

    --bs-btn-disabled-color: #ffffff;
    --bs-btn-disabled-bg: var(--gpd-primary);
    --bs-btn-disabled-border-color: var(--gpd-primary);
}


/*
 * ------------------------------------------------------------
 * Bootstrap Formular-Fokus
 * ------------------------------------------------------------
 *
 * Eingabefelder verwenden beim Fokus ebenfalls die
 * GPD-Hauptfarbe anstelle des Bootstrap-Standardblaus.
 */

.form-control:focus,
.form-select:focus {
    border-color: var(--gpd-primary);

    box-shadow:
        0 0 0 0.25rem
        rgba(var(--gpd-primary-rgb), 0.25);
}


/*
 * ============================================================
 * GPD ADMIN – SIDEBAR LAYOUT
 * ============================================================
 *
 * Gilt ausschließlich für die neue Admin-Layoutklasse.
 * Login und bisherige Verwaltungsseiten werden nicht verändert.
 */

:root {
    --gpd-sidebar-width: 252px;
    --gpd-sidebar-background: #ffffff;
    --gpd-sidebar-hover: #f5e9ec;
}

.gpd-admin-layout {
    display: flex;
    min-height: 100vh;
}

.gpd-sidebar {
    display: flex;
    flex-direction: column;
    flex: 0 0 var(--gpd-sidebar-width);
    width: var(--gpd-sidebar-width);
    min-width: 0;
    background: var(--gpd-sidebar-background);
    border-right: 1px solid var(--gpd-border);
}

.gpd-sidebar-brand {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 25px 22px;
    border-bottom: 1px solid var(--gpd-border);
}

.gpd-sidebar-brand strong {
    color: var(--gpd-primary);
    font-size: 1.55rem;
    line-height: 1.2;
}

.gpd-sidebar-brand span {
    color: var(--gpd-text-muted);
    font-size: .85rem;
}

.gpd-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 20px 12px;
}

.gpd-nav-link {
    display: block;
    padding: 11px 14px;
    border-radius: var(--gpd-radius);
    color: var(--gpd-text);
    text-decoration: none;
    font-size: .94rem;
}

a.gpd-nav-link:hover,
a.gpd-nav-link:focus-visible {
    color: var(--gpd-primary);
    background: var(--gpd-sidebar-hover);
}

.gpd-nav-link.active {
    color: #ffffff;
    background: var(--gpd-primary);
    font-weight: 600;
}

.gpd-nav-link.active:hover {
    color: #ffffff;
    background: var(--gpd-primary-hover);
}

.gpd-nav-disabled {
    opacity: .48;
    cursor: default;
}

.gpd-nav-heading {
    padding: 20px 14px 6px;
    color: var(--gpd-text-muted);
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.gpd-sidebar-footer {
    margin-top: auto;
    padding: 20px 22px;
    border-top: 1px solid var(--gpd-border);
}

.gpd-sidebar-user {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.gpd-sidebar-role {
    color: var(--gpd-text-muted);
    font-size: .8rem;
}

.gpd-admin-workspace {
    flex: 1 1 auto;
    min-width: 0;
}

.gpd-admin-main {
    max-width: 1600px;
    margin-inline: auto;
    padding-inline: 28px;
}

@media (max-width: 991.98px) {
    .gpd-admin-layout {
        flex-direction: column;
    }

    .gpd-sidebar {
        width: 100%;
        flex-basis: auto;
        border-right: 0;
        border-bottom: 1px solid var(--gpd-border);
    }

    .gpd-sidebar-nav {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px;
    }

    .gpd-nav-heading {
        width: 100%;
    }

    .gpd-sidebar-footer {
        display: none;
    }

    .gpd-admin-main {
        padding-inline: 16px;
    }
}


/*
 * ============================================================
 * GPD – GEMEINSAMER SEITENKOPF
 * ============================================================
 *
 * Die Farben kommen aus den bestehenden GPD-Variablen.
 * Die vorhandenen Bootstrap-Komponenten werden verwendet.
 */

.gpd-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    padding: 18px 28px;
    background: var(--gpd-surface);
    border-bottom: 1px solid var(--gpd-border);
}

.gpd-topbar-title {
    display: flex;
    flex-direction: column;
    min-width: 140px;
}

.gpd-topbar-title strong {
    color: var(--gpd-primary);
    font-size: 1.1rem;
}

.gpd-topbar-title span {
    color: var(--gpd-text-muted);
    font-size: .8rem;
}

.gpd-topbar-selectors {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: end;
}

.gpd-context-form {
    width: 260px;
    max-width: 100%;
}

.gpd-context-form .form-label {
    margin-bottom: 5px;
    font-size: .8rem;
    color: var(--gpd-text-muted);
}

.gpd-context-form .form-select {
    min-width: 0;
}

@media (max-width: 767.98px) {
    .gpd-topbar {
        padding: 16px;
        align-items: stretch;
    }

    .gpd-topbar-selectors {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .gpd-context-form {
        width: 100%;
    }
}


/*
 * ============================================================
 * GPD GUI V5 – BENUTZERBEREICH
 * ============================================================
 *
 * Der gemeinsame Benutzerbereich gehört zum zentralen
 * Seitenkopf und wird auf allen geschützten Views verwendet.
 */

.gpd-topbar-account {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    min-width: 0;
}

.gpd-topbar-user {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 0;
}

.gpd-topbar-user strong {
    color: var(--gpd-text);
    font-size: .85rem;
    overflow-wrap: anywhere;
}

.gpd-topbar-user span {
    color: var(--gpd-text-muted);
    font-size: .75rem;
}

.gpd-topbar-account .btn {
    white-space: nowrap;
}

/*
 * Bei geringer verfügbarer Breite dürfen die
 * drei Bereiche des Seitenkopfs umbrechen.
 */

@media (max-width: 1199.98px) {
    .gpd-topbar-account {
        margin-left: auto;
    }
}

@media (max-width: 767.98px) {
    .gpd-topbar-account {
        justify-content: space-between;
        width: 100%;
        margin-left: 0;
    }

    .gpd-topbar-user {
        align-items: flex-start;
    }
}