/* ============================================================
   VINCULUM DEFAULT THEME — rlenk-IT
   ============================================================ */

:root {

    /* --------------------------------------------------------
       SEITENHINTERGRUND
       -------------------------------------------------------- */

    --page-bg: #344f69;
    --page-bg-dark: #243c52;
    --page-bg-deep: #172b3d;

    /* --------------------------------------------------------
       PRIMÄRFARBE / FLÄCHEN
       -------------------------------------------------------- */

    --navy: #162b3f;
    --navy-dark: #102334;

    --panel: #193043;
    --panel-dark: #122738;
    --panel-soft: #2c465c;

    /* --------------------------------------------------------
       RGB-VARIANTEN
       -------------------------------------------------------- */

    --theme-primary-rgb: 22, 43, 63;
    --theme-accent-rgb: 71, 158, 232;
    --theme-background-rgb: 52, 79, 105;
    --theme-panel-rgb: 25, 48, 67;
    --theme-panel-dark-rgb: 18, 39, 56;

    /* --------------------------------------------------------
       RAHMEN
       -------------------------------------------------------- */

    --border:
        rgba(
            173,
            206,
            232,
            0.15
        );

    --border-blue:
        rgba(
            var(--theme-accent-rgb),
            0.35
        );

    /* --------------------------------------------------------
       TEXT
       -------------------------------------------------------- */

    --text: #ffffff;
    --text-soft: #e2eaf0;
    --muted: #9fb2c1;
    --muted-dark: #7890a2;

    --theme-panel-text: #ffffff;

    /* --------------------------------------------------------
       AKZENT
       -------------------------------------------------------- */

    --accent: #479ee8;
    --accent-light: #5cb0f3;
    --accent-dark: #2586d6;

    /* --------------------------------------------------------
       STATUS
       -------------------------------------------------------- */

    --online: #5fe08a;
    --offline: #ff6464;
    --error: #ff9b4a;
    --finished: #58aaf0;
    --cancelled: #c39cff;

    /* --------------------------------------------------------
       SONSTIGES
       -------------------------------------------------------- */

    --radius: 18px;
    --radius-small: 10px;

    --shadow:
        0 18px 50px
        rgba(
            2,
            14,
            24,
            0.30
        );

    color-scheme: dark;
}


/* ============================================================
   DYNAMISCHES FIRMEN-BRANDING
   ============================================================ */


/* ------------------------------------------------------------
   DASHBOARD HEADER
   ------------------------------------------------------------ */

.portal-header {
    background:
        rgba(
            var(--theme-panel-dark-rgb),
            0.93
        ) !important;

    border-color:
        rgba(
            var(--theme-accent-rgb),
            0.14
        ) !important;
}


/* ------------------------------------------------------------
   DASHBOARD SUMMARY
   ------------------------------------------------------------ */

.summary-card {
    background:
        linear-gradient(
            145deg,
            rgba(
                var(--theme-panel-rgb),
                0.97
            ),
            rgba(
                var(--theme-panel-dark-rgb),
                0.98
            )
        ) !important;
}

.summary-card::after {
    background:
        radial-gradient(
            circle,
            rgba(
                var(--theme-accent-rgb),
                0.13
            ),
            transparent 70%
        ) !important;
}


/* ------------------------------------------------------------
   DASHBOARD SESSION CARDS
   ------------------------------------------------------------ */

.session-card,
.empty-state {
    background:
        linear-gradient(
            145deg,
            rgba(
                var(--theme-panel-rgb),
                0.98
            ),
            rgba(
                var(--theme-panel-dark-rgb),
                0.99
            )
        ) !important;
}

.session-card::before {
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(
                var(--theme-accent-rgb),
                0.85
            ),
            transparent
        ) !important;
}


/* ------------------------------------------------------------
   ACCOUNT BAR
   ------------------------------------------------------------ */

.rlenk-account-bar {
    background:
        linear-gradient(
            145deg,
            rgba(
                var(--theme-panel-rgb),
                0.94
            ),
            rgba(
                var(--theme-panel-dark-rgb),
                0.96
            )
        ) !important;

    border-color:
        rgba(
            var(--theme-accent-rgb),
            0.24
        ) !important;
}

.account-avatar {
    border-color:
        rgba(
            var(--theme-accent-rgb),
            0.45
        ) !important;

    background:
        linear-gradient(
            145deg,
            rgba(
                var(--theme-accent-rgb),
                0.30
            ),
            rgba(
                var(--theme-accent-rgb),
                0.09
            )
        ) !important;
}

.account-role-super {
    color:
        var(--accent-light)
        !important;
}

.account-button-primary {
    border-color:
        rgba(
            var(--theme-accent-rgb),
            0.48
        ) !important;

    background:
        rgba(
            var(--theme-accent-rgb),
            0.19
        ) !important;
}

.account-button-primary:hover {
    border-color:
        rgba(
            var(--theme-accent-rgb),
            0.78
        ) !important;

    background:
        rgba(
            var(--theme-accent-rgb),
            0.29
        ) !important;
}


/* ------------------------------------------------------------
   VINCULUM BUTTONS
   ------------------------------------------------------------ */

.button-primary {
    background:
        linear-gradient(
            135deg,
            var(--accent),
            var(--accent-dark)
        ) !important;

    box-shadow:
        0 6px 17px
        rgba(
            var(--theme-accent-rgb),
            0.26
        ) !important;
}

.button-primary:hover {
    background:
        linear-gradient(
            135deg,
            var(--accent-light),
            var(--accent)
        ) !important;
}


/* ------------------------------------------------------------
   FIRMENPORTAL HEADER
   ------------------------------------------------------------ */

.portal-admin-header {
    background:
        rgba(
            var(--theme-panel-dark-rgb),
            0.95
        ) !important;

    border-color:
        rgba(
            var(--theme-accent-rgb),
            0.13
        ) !important;
}


/* ------------------------------------------------------------
   FIRMENPORTAL ACCOUNT
   ------------------------------------------------------------ */

.portal-admin-account {
    background:
        rgba(
            var(--theme-panel-rgb),
            0.88
        ) !important;

    border-color:
        rgba(
            var(--theme-accent-rgb),
            0.16
        ) !important;
}

.portal-admin-avatar {
    border-color:
        rgba(
            var(--theme-accent-rgb),
            0.42
        ) !important;

    background:
        rgba(
            var(--theme-accent-rgb),
            0.13
        ) !important;
}


/* ------------------------------------------------------------
   FIRMENPORTAL KARTEN
   ------------------------------------------------------------ */

.portal-admin-summary-card,
.portal-admin-section {
    background:
        linear-gradient(
            145deg,
            rgba(
                var(--theme-panel-rgb),
                0.97
            ),
            rgba(
                var(--theme-panel-dark-rgb),
                0.98
            )
        ) !important;

    border-color:
        rgba(
            var(--theme-accent-rgb),
            0.16
        ) !important;
}

.portal-admin-module,
.portal-admin-feature,
.portal-admin-note {
    background:
        rgba(
            var(--theme-panel-rgb),
            0.48
        ) !important;

    border-color:
        rgba(
            var(--theme-accent-rgb),
            0.13
        ) !important;
}

.portal-admin-module-icon {
    border-color:
        rgba(
            var(--theme-accent-rgb),
            0.35
        ) !important;

    background:
        rgba(
            var(--theme-accent-rgb),
            0.11
        ) !important;

    color:
        var(--accent-light)
        !important;
}

.portal-admin-module-meta span {
    background:
        rgba(
            var(--theme-accent-rgb),
            0.10
        ) !important;

    color:
        var(--accent-light)
        !important;
}

.portal-admin-module-link,
.portal-admin-button {
    border-color:
        rgba(
            var(--theme-accent-rgb),
            0.40
        ) !important;

    background:
        rgba(
            var(--theme-accent-rgb),
            0.17
        ) !important;
}

.portal-admin-module-link:hover,
.portal-admin-button:hover {
    background:
        rgba(
            var(--theme-accent-rgb),
            0.27
        ) !important;
}


/* ------------------------------------------------------------
   FIRMENPORTAL FOOTER
   ------------------------------------------------------------ */

.portal-admin-footer {
    background:
        rgba(
            var(--theme-panel-dark-rgb),
            0.94
        ) !important;
}


/* ------------------------------------------------------------
   SUPER-ADMIN / BRANDING / BENUTZER
   ------------------------------------------------------------ */

.company-admin-header,
.users-admin-header {
    background:
        rgba(
            var(--theme-panel-dark-rgb),
            0.94
        ) !important;
}

.company-admin-card,
.users-admin-card,
.users-admin-summary-card {
    background:
        linear-gradient(
            145deg,
            rgba(
                var(--theme-panel-rgb),
                0.97
            ),
            rgba(
                var(--theme-panel-dark-rgb),
                0.98
            )
        ) !important;

    border-color:
        rgba(
            var(--theme-accent-rgb),
            0.15
        ) !important;
}

.company-admin-button,
.users-admin-button {
    border-color:
        rgba(
            var(--theme-accent-rgb),
            0.40
        ) !important;

    background:
        rgba(
            var(--theme-accent-rgb),
            0.17
        ) !important;
}

.company-admin-button:hover,
.users-admin-button:hover {
    border-color:
        rgba(
            var(--theme-accent-rgb),
            0.70
        ) !important;

    background:
        rgba(
            var(--theme-accent-rgb),
            0.27
        ) !important;
}


/* ============================================================
   TEXT AUF HELLEN THEMES
   ============================================================ */

/*
 * Bei extrem hellen Primärfarben sorgt theme.php automatisch
 * für eine passende Kontrastfarbe.
 *
 * Die Kernflächen verwenden diese Variable.
 */

.portal-admin-summary-card > strong,
.portal-admin-module h3,
.portal-admin-feature strong,
.company-admin-card h2,
.users-admin-card h2 {
    color:
        var(--theme-panel-text);
}


/* ============================================================
   AKZENT-ABHÄNGIGE ELEMENTE
   ============================================================ */

.section-kicker,
.session-day-head::before,
.progress-value,
.footer-accent,
.portal-admin-eyebrow,
.portal-admin-kicker,
.company-admin-eyebrow,
.company-admin-card-kicker,
.users-admin-eyebrow,
.users-admin-kicker {
    color:
        var(--accent-light)
        !important;
}

.progress-fill {
    background:
        linear-gradient(
            90deg,
            var(--accent-dark),
            var(--accent-light)
        ) !important;

    box-shadow:
        0 0 12px
        rgba(
            var(--theme-accent-rgb),
            0.30
        ) !important;
}


/* ============================================================
   BINÄRHINTERGRUND
   ============================================================ */

body::before {
    color:
        rgba(
            var(--theme-accent-rgb),
            0.075
        ) !important;

    text-shadow:
        0 0 18px
        rgba(
            var(--theme-accent-rgb),
            0.08
        ) !important;
}


/* ============================================================
   STATUSFARBEN BLEIBEN ABSICHTLICH FEST
   ============================================================ */

/*
 * Online = Grün
 * Offline = Rot
 * Fehler = Orange
 *
 * Diese Farben werden NICHT vom Firmenbranding überschrieben.
 */