/*
|--------------------------------------------------------------------------
| FristenManager
|--------------------------------------------------------------------------
| Adminbereich
|--------------------------------------------------------------------------
*/
/*
|--------------------------------------------------------------------------
| Farben
|--------------------------------------------------------------------------
*/
:root {
    --fm-admin-navy: #082f4f;
    --fm-admin-navy-dark: #05233c;
    --fm-admin-navy-light: #0f4d78;
    --fm-admin-blue: #1565c0;
    --fm-admin-blue-dark: #0e55a5;
    --fm-admin-blue-light: #e8f2fc;
    --fm-admin-green: #2e9b45;
    --fm-admin-green-dark: #237a36;
    --fm-admin-green-light: #eaf7ed;
    --fm-admin-red: #c62828;
    --fm-admin-red-dark: #9f1f1f;
    --fm-admin-red-light: #fdecec;
    --fm-admin-yellow: #a86500;
    --fm-admin-yellow-light: #fff4d6;
    --fm-admin-text: #17212b;
    --fm-admin-muted: #687582;
    --fm-admin-border: #dfe7ed;
    --fm-admin-border-light: #edf1f4;
    --fm-admin-background: #f4f7f9;
    --fm-admin-white: #ffffff;
}
/*
|--------------------------------------------------------------------------
| Allgemein
|--------------------------------------------------------------------------
*/
html {
    min-height: 100%;
}
body {
    min-height: 100vh;
    color:
        var(--fm-admin-text);
    background:
        var(--fm-admin-background);
    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;
    -webkit-font-smoothing:
        antialiased;
}
a {
    color:
        var(--fm-admin-blue);
}
a:hover {
    color:
        var(--fm-admin-blue-dark);
}
/*
|--------------------------------------------------------------------------
| Bootstrap Anpassungen
|--------------------------------------------------------------------------
*/
.text-secondary {
    color:
        var(--fm-admin-muted)
        !important;
}
.bg-light {
    background-color:
        var(--fm-admin-background)
        !important;
}
.btn-primary {
    border-color:
        var(--fm-admin-blue);
    background:
        var(--fm-admin-blue);
    color:
        #ffffff;
    font-weight: 650;
}
.btn-primary:hover,
.btn-primary:focus {
    border-color:
        var(--fm-admin-blue-dark);
    background:
        var(--fm-admin-blue-dark);
    color:
        #ffffff;
}
.btn-outline-primary {
    border-color:
        var(--fm-admin-blue);
    color:
        var(--fm-admin-blue);
    font-weight: 650;
}
.btn-outline-primary:hover {
    border-color:
        var(--fm-admin-blue);
    background:
        var(--fm-admin-blue);
    color:
        #ffffff;
}
/*
|--------------------------------------------------------------------------
| Admin Navigation
|--------------------------------------------------------------------------
*/
.navbar {
    min-height: 68px;
}
.navbar-dark {
    background:
        linear-gradient(
            135deg,
            var(--fm-admin-navy),
            var(--fm-admin-navy-dark)
        )
        !important;
}
.navbar-brand {
    color:
        #ffffff
        !important;
    font-size:
        1.25rem;
    font-weight:
        800
        !important;
    letter-spacing:
        -0.025em;
}
.navbar-dark
.navbar-nav
.nav-link {
    position:
        relative;
    margin:
        0 3px;
    padding:
        9px 13px;
    border-radius:
        8px;
    color:
        rgba(
            255,
            255,
            255,
            0.78
        );
    font-size:
        0.92rem;
    font-weight:
        600;
    transition:
        background-color 0.15s ease,
        color 0.15s ease;
}
.navbar-dark
.navbar-nav
.nav-link:hover {
    background:
        rgba(
            255,
            255,
            255,
            0.08
        );
    color:
        #ffffff;
}
.navbar-dark
.navbar-nav
.nav-link.active {
    background:
        rgba(
            255,
            255,
            255,
            0.13
        );
    color:
        #ffffff;
}
.navbar-dark
.btn-outline-light {
    border-color:
        rgba(
            255,
            255,
            255,
            0.55
        );
    color:
        #ffffff;
    font-weight:
        650;
}
.navbar-dark
.btn-outline-light:hover {
    border-color:
        #ffffff;
    background:
        #ffffff;
    color:
        var(--fm-admin-navy);
}
/*
|--------------------------------------------------------------------------
| Admin Hauptbereich
|--------------------------------------------------------------------------
*/
main {
    color:
        var(--fm-admin-text);
}
main h1,
main h2,
main h3,
main h4,
main h5,
main h6 {
    color:
        var(--fm-admin-navy);
}
main h1 {
    letter-spacing:
        -0.035em;
}
/*
|--------------------------------------------------------------------------
| Cards
|--------------------------------------------------------------------------
*/
.card {
    border:
        1px solid
        var(--fm-admin-border)
        !important;
    border-radius:
        15px;
    background:
        var(--fm-admin-white);
}
.card.shadow-sm {
    box-shadow:
        0 6px 24px
        rgba(
            8,
            47,
            79,
            0.07
        )
        !important;
}
.card-header {
    color:
        var(--fm-admin-text);
}
.card-header.bg-white {
    background:
        #ffffff
        !important;
}
.card-body {
    color:
        var(--fm-admin-text);
}
/*
|--------------------------------------------------------------------------
| Tabellen
|--------------------------------------------------------------------------
*/
.table {
    --bs-table-color:
        var(--fm-admin-text);
    --bs-table-bg:
        #ffffff;
    --bs-table-border-color:
        var(--fm-admin-border);
    margin-bottom:
        0;
    color:
        var(--fm-admin-text);
}
.table > :not(caption) > * > * {
    padding:
        16px 14px;
    border-bottom-color:
        var(--fm-admin-border);
    background-color:
        #ffffff;
    color:
        var(--fm-admin-text);
    vertical-align:
        middle;
}
.table > thead > tr > th {
    padding-top:
        13px;
    padding-bottom:
        13px;
    border-bottom:
        1px solid
        #cbd6df;
    background:
        #f3f6f8;
    color:
        var(--fm-admin-navy);
    font-size:
        0.79rem;
    font-weight:
        800;
    letter-spacing:
        0.01em;
    white-space:
        nowrap;
}
.table > tbody > tr > td {
    color:
        var(--fm-admin-text);
    font-size:
        0.91rem;
}
.table > tbody > tr:hover > * {
    background-color:
        #f8fbfd;
    color:
        var(--fm-admin-text);
}
.table-light {
    --bs-table-color:
        var(--fm-admin-navy);
    --bs-table-bg:
        #f3f6f8;
    --bs-table-border-color:
        #cbd6df;
}
.table-responsive {
    border-radius:
        0 0 15px 15px;
}
/*
|--------------------------------------------------------------------------
| Tabellen - wichtige Inhalte
|--------------------------------------------------------------------------
*/
.table .fw-semibold,
.table strong {
    color:
        var(--fm-admin-navy);
}
.table .text-secondary {
    color:
        #5f6e7a
        !important;
}
/*
|--------------------------------------------------------------------------
| Badges
|--------------------------------------------------------------------------
*/
.badge {
    display:
        inline-flex;
    align-items:
        center;
    justify-content:
        center;
    min-height:
        25px;
    padding:
        5px 9px;
    border-radius:
        100px;
    font-size:
        0.72rem;
    font-weight:
        750;
    line-height:
        1;
}
.badge.text-bg-success {
    border:
        1px solid
        #b9dfc2;
    background:
        var(--fm-admin-green-light)
        !important;
    color:
        var(--fm-admin-green-dark)
        !important;
}
.badge.text-bg-danger {
    border:
        1px solid
        #efc1c1;
    background:
        var(--fm-admin-red-light)
        !important;
    color:
        var(--fm-admin-red-dark)
        !important;
}
.badge.text-bg-secondary {
    border:
        1px solid
        #ccd5dc;
    background:
        #edf1f4
        !important;
    color:
        #43515d
        !important;
}
.badge.text-bg-warning {
    border:
        1px solid
        #ead49a;
    background:
        var(--fm-admin-yellow-light)
        !important;
    color:
        #744900
        !important;
}
.badge.text-bg-primary {
    border:
        1px solid
        #bfd7f2;
    background:
        var(--fm-admin-blue-light)
        !important;
    color:
        var(--fm-admin-blue-dark)
        !important;
}
.badge.text-bg-light {
    border:
        1px solid
        var(--fm-admin-border);
    background:
        #f5f7f9
        !important;
    color:
        #4e5c68
        !important;
}
/*
|--------------------------------------------------------------------------
| Formulare im Adminbereich
|--------------------------------------------------------------------------
*/
.form-control,
.form-select {
    min-height:
        44px;
    border:
        1px solid
        #cbd6df;
    border-radius:
        9px;
    background:
        #ffffff;
    color:
        var(--fm-admin-text);
    box-shadow:
        none;
}
.form-control::placeholder {
    color:
        #8996a1;
}
.form-control:hover,
.form-select:hover {
    border-color:
        #aebdca;
}
.form-control:focus,
.form-select:focus {
    border-color:
        var(--fm-admin-blue);
    color:
        var(--fm-admin-text);
    background:
        #ffffff;
    box-shadow:
        0 0 0 4px
        rgba(
            21,
            101,
            192,
            0.10
        );
}
/*
|--------------------------------------------------------------------------
| Alerts
|--------------------------------------------------------------------------
*/
.alert {
    border-radius:
        11px;
}
.alert-success {
    border:
        1px solid
        #b9dfc2;
    background:
        var(--fm-admin-green-light);
    color:
        #1d652d;
}
.alert-danger {
    border:
        1px solid
        #efc1c1;
    background:
        var(--fm-admin-red-light);
    color:
        #8e2020;
}
.alert-info {
    border:
        1px solid
        #bfd7f2;
    background:
        var(--fm-admin-blue-light);
    color:
        var(--fm-admin-navy);
}
/*
|--------------------------------------------------------------------------
| Login Grundlayout
|--------------------------------------------------------------------------
*/
.fm-admin-login-body {
    margin:
        0;
    min-height:
        100vh;
    background:
        linear-gradient(
            145deg,
            #f8fbfd 0%,
            #eef4f8 50%,
            #f6faf7 100%
        );
    color:
        var(--fm-admin-text);
    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;
    -webkit-font-smoothing:
        antialiased;
}
.fm-login-page {
    position:
        relative;
    min-height:
        100vh;
    overflow:
        hidden;
}
/*
|--------------------------------------------------------------------------
| Login Hintergrund
|--------------------------------------------------------------------------
*/
.fm-login-background {
    position:
        absolute;
    inset:
        0;
    overflow:
        hidden;
    pointer-events:
        none;
}
.fm-login-circle {
    position:
        absolute;
    border-radius:
        50%;
}
.fm-login-circle-one {
    width:
        650px;
    height:
        650px;
    top:
        -350px;
    right:
        -260px;
    background:
        radial-gradient(
            circle,
            rgba(
                46,
                155,
                69,
                0.15
            ) 0%,
            rgba(
                46,
                155,
                69,
                0
            ) 70%
        );
}
.fm-login-circle-two {
    width:
        700px;
    height:
        700px;
    left:
        -380px;
    bottom:
        -400px;
    background:
        radial-gradient(
            circle,
            rgba(
                21,
                101,
                192,
                0.14
            ) 0%,
            rgba(
                21,
                101,
                192,
                0
            ) 70%
        );
}
/*
|--------------------------------------------------------------------------
| Login Logo
|--------------------------------------------------------------------------
*/
.fm-login-brand {
    display:
        flex;
    align-items:
        center;
    justify-content:
        center;
    gap:
        15px;
    margin-bottom:
        28px;
}
.fm-login-logo-link {
    display:
        block;
    flex:
        0 0 auto;
}
.fm-login-logo {
    display:
        block;
    width:
        64px;
    height:
        64px;
    object-fit:
        cover;
    border-radius:
        16px;
    box-shadow:
        0 8px 24px
        rgba(
            8,
            47,
            79,
            0.18
        );
}
.fm-login-brand-name {
    color:
        var(--fm-admin-navy);
    font-size:
        1.55rem;
    line-height:
        1.15;
    font-weight:
        800;
    letter-spacing:
        -0.03em;
}
.fm-login-brand-name span {
    color:
        var(--fm-admin-blue);
}
.fm-login-brand-subtitle {
    margin-top:
        4px;
    color:
        var(--fm-admin-muted);
    font-size:
        0.83rem;
    font-weight:
        600;
    letter-spacing:
        0.02em;
}
/*
|--------------------------------------------------------------------------
| Login Card
|--------------------------------------------------------------------------
*/
.fm-login-card {
    position:
        relative;
    padding:
        38px;
    border:
        1px solid
        rgba(
            8,
            47,
            79,
            0.09
        );
    border-radius:
        24px;
    background:
        rgba(
            255,
            255,
            255,
            0.96
        );
    box-shadow:
        0 25px 70px
        rgba(
            8,
            47,
            79,
            0.13
        );
    backdrop-filter:
        blur(16px);
}
.fm-login-card::before {
    content:
        "";
    position:
        absolute;
    top:
        0;
    left:
        38px;
    right:
        38px;
    height:
        4px;
    border-radius:
        0 0 6px 6px;
    background:
        linear-gradient(
            90deg,
            var(--fm-admin-blue),
            var(--fm-admin-green)
        );
}
/*
|--------------------------------------------------------------------------
| Login Überschrift
|--------------------------------------------------------------------------
*/
.fm-login-card-header {
    margin-bottom:
        30px;
}
.fm-login-card-header h1 {
    margin:
        13px 0 8px;
    color:
        var(--fm-admin-navy);
    font-size:
        clamp(
            1.7rem,
            5vw,
            2.15rem
        );
    font-weight:
        800;
    letter-spacing:
        -0.035em;
}
.fm-login-card-header p {
    margin:
        0;
    color:
        var(--fm-admin-muted);
    font-size:
        0.95rem;
    line-height:
        1.65;
}
.fm-login-badge {
    display:
        inline-flex;
    align-items:
        center;
    gap:
        8px;
    padding:
        6px 11px;
    border:
        1px solid
        #d6eadb;
    border-radius:
        100px;
    background:
        var(--fm-admin-green-light);
    color:
        var(--fm-admin-green-dark);
    font-size:
        0.75rem;
    font-weight:
        750;
}
.fm-login-badge-dot {
    width:
        7px;
    height:
        7px;
    border-radius:
        50%;
    background:
        var(--fm-admin-green);
}
/*
|--------------------------------------------------------------------------
| Login Formular
|--------------------------------------------------------------------------
*/
.fm-form-label {
    margin-bottom:
        8px;
    color:
        var(--fm-admin-navy);
    font-size:
        0.88rem;
    font-weight:
        700;
}
.fm-form-control {
    min-height:
        54px;
    padding:
        13px 15px;
    border:
        1px solid
        var(--fm-admin-border);
    border-radius:
        11px;
    background:
        #fbfcfd;
    color:
        var(--fm-admin-text);
    font-size:
        0.95rem;
    box-shadow:
        none;
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
}
.fm-form-control::placeholder {
    color:
        #8996a1;
}
.fm-form-control:hover {
    border-color:
        #c8d6e0;
}
.fm-form-control:focus {
    border-color:
        var(--fm-admin-blue);
    background:
        #ffffff;
    box-shadow:
        0 0 0 4px
        rgba(
            21,
            101,
            192,
            0.10
        );
}
/*
|--------------------------------------------------------------------------
| Passwort
|--------------------------------------------------------------------------
*/
.fm-password-wrapper {
    position:
        relative;
}
.fm-password-input {
    padding-right:
        100px;
}
.fm-password-toggle {
    position:
        absolute;
    top:
        50%;
    right:
        13px;
    transform:
        translateY(-50%);
    padding:
        6px 8px;
    border:
        0;
    background:
        transparent;
    color:
        var(--fm-admin-blue);
    font-size:
        0.78rem;
    font-weight:
        700;
    cursor:
        pointer;
}
.fm-password-toggle:hover {
    color:
        var(--fm-admin-navy);
}
/*
|--------------------------------------------------------------------------
| Login Sicherheitshinweis
|--------------------------------------------------------------------------
*/
.fm-login-security-note {
    display:
        flex;
    align-items:
        flex-start;
    gap:
        10px;
    margin-top:
        20px;
    padding:
        12px 14px;
    border:
        1px solid
        #dceee0;
    border-radius:
        10px;
    background:
        #f5fbf6;
    color:
        #54705a;
    font-size:
        0.78rem;
    line-height:
        1.55;
}
.fm-security-icon {
    display:
        flex;
    flex:
        0 0 auto;
    align-items:
        center;
    justify-content:
        center;
    width:
        20px;
    height:
        20px;
    margin-top:
        1px;
    border-radius:
        50%;
    background:
        var(--fm-admin-green);
    color:
        #ffffff;
    font-size:
        0.7rem;
    font-weight:
        800;
}
/*
|--------------------------------------------------------------------------
| Login Button
|--------------------------------------------------------------------------
*/
.fm-login-button {
    min-height:
        54px;
    border:
        0;
    border-radius:
        11px;
    background:
        linear-gradient(
            135deg,
            var(--fm-admin-blue),
            var(--fm-admin-blue-dark)
        );
    color:
        #ffffff;
    font-size:
        0.98rem;
    font-weight:
        700;
    box-shadow:
        0 8px 24px
        rgba(
            21,
            101,
            192,
            0.23
        );
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease;
}
.fm-login-button:hover {
    color:
        #ffffff;
    transform:
        translateY(-1px);
    box-shadow:
        0 11px 30px
        rgba(
            21,
            101,
            192,
            0.30
        );
}
.fm-login-button:active {
    transform:
        translateY(0);
}
/*
|--------------------------------------------------------------------------
| Login Card Footer
|--------------------------------------------------------------------------
*/
.fm-login-card-footer {
    display:
        flex;
    align-items:
        center;
    justify-content:
        center;
    gap:
        7px;
    margin-top:
        27px;
    padding-top:
        22px;
    border-top:
        1px solid
        #edf1f4;
    color:
        #6f7c87;
    font-size:
        0.74rem;
}
.fm-lock-symbol {
    color:
        var(--fm-admin-green);
    font-size:
        0.55rem;
}
/*
|--------------------------------------------------------------------------
| Login Footer
|--------------------------------------------------------------------------
*/
.fm-login-footer {
    display:
        flex;
    justify-content:
        space-between;
    align-items:
        center;
    gap:
        20px;
    margin-top:
        22px;
    padding:
        0 5px;
    color:
        var(--fm-admin-muted);
    font-size:
        0.78rem;
}
.fm-login-footer a {
    color:
        var(--fm-admin-blue);
    text-decoration:
        none;
    font-weight:
        650;
}
.fm-login-footer a:hover {
    color:
        var(--fm-admin-navy);
}
/*
|--------------------------------------------------------------------------
| Desktop
|--------------------------------------------------------------------------
*/
@media (
    min-width: 1200px
) {
    main .container-fluid {
        max-width:
            1800px;
        margin:
            0 auto;
    }
}
/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/
@media (
    max-width: 991.98px
) {
    .navbar-dark
    .navbar-nav {
        padding-top:
            12px;
    }
    .navbar-dark
    .navbar-nav
    .nav-link {
        margin:
            2px 0;
    }
}
/*
|--------------------------------------------------------------------------
| Smartphone
|--------------------------------------------------------------------------
*/
@media (
    max-width: 575.98px
) {
    .fm-login-card {
        padding:
            30px 22px;
        border-radius:
            19px;
    }
    .fm-login-card::before {
        left:
            22px;
        right:
            22px;
    }
    .fm-login-brand {
        justify-content:
            flex-start;
    }
    .fm-login-logo {
        width:
            54px;
        height:
            54px;
        border-radius:
            14px;
    }
    .fm-login-brand-name {
        font-size:
            1.35rem;
    }
    .fm-login-footer {
        flex-direction:
            column;
        justify-content:
            center;
        gap:
            8px;
        text-align:
            center;
    }
    main {
        padding-top:
            24px
            !important;
        padding-bottom:
            32px
            !important;
    }
    .card {
        border-radius:
            12px;
    }
    .card-body {
        padding:
            20px
            !important;
    }
    .card-header {
        padding:
            20px
            !important;
    }
    .table > :not(caption) > * > * {
        padding:
            13px 12px;
    }
}