/* ============================================================
   TEST PILOT GLOBAL THEME V4
   Rot / Weiß = Standard
   Dark = vorhandenes Originaldesign
   ============================================================ */

:root {
    --tp-red: #e30613;
    --tp-red-hover: #bd0010;

    --tp-bg: #f4f5f7;
    --tp-white: #ffffff;

    --tp-text: #202124;
    --tp-muted: #667085;

    --tp-border: #d7dce3;

    --tp-info-bg: #fff7f7;
    --tp-info-border: #efb2b7;

    --tp-shadow:
        0 8px 24px rgba(20, 30, 45, .09);
}


/* ============================================================
   SEITE
   ============================================================ */

html:has(body.tp-theme-light),
body.tp-theme-light {
    background: var(--tp-bg) !important;
    color: var(--tp-text) !important;
}


/* ============================================================
   HAUPTBEREICHE
   ============================================================ */

body.tp-theme-light main,
body.tp-theme-light .main,
body.tp-theme-light .content,
body.tp-theme-light .page,
body.tp-theme-light .page-content,
body.tp-theme-light .workspace {

    background-color: transparent !important;
    color: var(--tp-text) !important;
}


/* ============================================================
   VOM JS ERKANNTE KARTEN / PANELS
   ============================================================ */

body.tp-theme-light .tp-light-surface {

    background:
        var(--tp-white) !important;

    color:
        var(--tp-text) !important;

    border-color:
        var(--tp-border) !important;

    border-left-color:
        var(--tp-border) !important;

    border-right-color:
        var(--tp-border) !important;

    border-top-color:
        var(--tp-border) !important;

    border-bottom-color:
        var(--tp-border) !important;

    box-shadow:
        var(--tp-shadow) !important;
}


/* ============================================================
   INFO / HINWEISLEISTEN
   ============================================================ */

body.tp-theme-light .tp-light-info {

    background:
        var(--tp-info-bg) !important;

    color:
        var(--tp-text) !important;

    border:
        1px solid var(--tp-info-border) !important;

    border-left:
        4px solid var(--tp-red) !important;

    box-shadow:
        none !important;
}


/* ============================================================
   AKTIONSBUTTONS
   ============================================================ */

body.tp-theme-light .tp-light-action {

    background:
        var(--tp-red) !important;

    background-image:
        none !important;

    color:
        #ffffff !important;

    border:
        1px solid var(--tp-red) !important;

    text-shadow:
        none !important;

    box-shadow:
        0 5px 14px rgba(227, 6, 19, .17) !important;
}

body.tp-theme-light .tp-light-action:hover {

    background:
        var(--tp-red-hover) !important;

    color:
        #ffffff !important;
}


/* ============================================================
   NAVIGATION / TABS
   ============================================================ */

body.tp-theme-light .tp-light-nav {

    background:
        #ffffff !important;

    background-image:
        none !important;

    color:
        var(--tp-text) !important;

    border:
        1px solid var(--tp-border) !important;

    box-shadow:
        none !important;
}

body.tp-theme-light .tp-light-nav:hover {

    background:
        #fff5f5 !important;

    color:
        var(--tp-red) !important;

    border-color:
        #ef9ba2 !important;
}


body.tp-theme-light .tp-light-nav-active {

    background:
        var(--tp-red) !important;

    background-image:
        none !important;

    color:
        #ffffff !important;

    border-color:
        var(--tp-red) !important;
}


/* ============================================================
   TEXTE
   ============================================================ */

body.tp-theme-light .tp-light-text {

    color:
        var(--tp-text) !important;

    text-shadow:
        none !important;
}


body.tp-theme-light h1,
body.tp-theme-light h2,
body.tp-theme-light h3,
body.tp-theme-light h4,
body.tp-theme-light h5,
body.tp-theme-light h6 {

    color:
        var(--tp-text);
}


/* ============================================================
   FORMULARE
   ============================================================ */

body.tp-theme-light input:not([type="checkbox"]):not([type="radio"]),
body.tp-theme-light textarea,
body.tp-theme-light select {

    background:
        #ffffff !important;

    color:
        var(--tp-text) !important;

    border:
        1px solid #cfd5dd !important;

    box-shadow:
        none !important;
}


body.tp-theme-light input:focus,
body.tp-theme-light textarea:focus,
body.tp-theme-light select:focus {

    border-color:
        var(--tp-red) !important;

    outline:
        none !important;

    box-shadow:
        0 0 0 3px rgba(227,6,19,.10) !important;
}


body.tp-theme-light input[type="checkbox"],
body.tp-theme-light input[type="radio"] {

    accent-color:
        var(--tp-red);
}


/* ============================================================
   TABELLEN
   ============================================================ */

body.tp-theme-light table {

    background:
        #ffffff !important;

    color:
        var(--tp-text) !important;
}

body.tp-theme-light thead,
body.tp-theme-light th {

    background:
        #fff6f6 !important;

    color:
        var(--tp-text) !important;
}

body.tp-theme-light td {

    background:
        #ffffff;

    color:
        var(--tp-text) !important;

    border-color:
        var(--tp-border) !important;
}


/* ============================================================
   DIALOGE / MODALS
   ============================================================ */

body.tp-theme-light .modal-content,
body.tp-theme-light .dialog,
body.tp-theme-light .popup,
body.tp-theme-light [role="dialog"] {

    background:
        #ffffff !important;

    color:
        var(--tp-text) !important;

    border:
        1px solid var(--tp-border) !important;

    box-shadow:
        0 18px 55px rgba(0,0,0,.17) !important;
}


/* ============================================================
   LOGOUT
   ============================================================ */

body.tp-theme-light a[href*="/logout"],
body.tp-theme-light .logout,
body.tp-theme-light [class*="logout"] {

    background:
        var(--tp-red) !important;

    color:
        #ffffff !important;

    border-color:
        var(--tp-red) !important;
}


/* ============================================================
   THEME SCHALTER
   ============================================================ */

.tp-theme-switch {

    position:
        fixed !important;

    left:
        18px !important;

    bottom:
        18px !important;

    z-index:
        9999999 !important;

    width:
        auto !important;

    height:
        42px !important;

    padding:
        0 17px !important;

    margin:
        0 !important;

    border-radius:
        22px !important;

    font-size:
        13px !important;

    font-weight:
        700 !important;

    font-family:
        Arial, sans-serif !important;

    cursor:
        pointer !important;

    box-shadow:
        0 7px 24px rgba(0,0,0,.18) !important;
}


body.tp-theme-light .tp-theme-switch {

    background:
        #ffffff !important;

    color:
        var(--tp-red) !important;

    border:
        1px solid var(--tp-red) !important;
}


body:not(.tp-theme-light) .tp-theme-switch {

    background:
        var(--tp-red) !important;

    color:
        white !important;

    border:
        1px solid var(--tp-red) !important;
}