/*
 * ============================================================
 * 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);
}