/* --- MOBIL-KORREKTUREN (Greift nur auf kleinen Bildschirmen wie Handys) --- */
@media (max-width: 991px) {
    
    /* Beschränkt die Breite der ausgeklappten Navigation auf 295px */
    #sidebar {
        width: 295px !important;
    }

    /* Zwingt den Link in ein Flexbox-Layout (alles in eine Reihe) */
    #sidebar li.wgsDataCst > a {
        display: flex !important;
        align-items: center; /* Zentriert Icon und Text auf derselben Höhe */
        text-align: left !important;
    }

    /* Sorgt für Abstand zwischen dem Icon und dem Text */
    #sidebar li.wgsDataCst > a i {
        margin-right: 15px !important;
        margin-bottom: 0 !important; /* Verhindert, dass das Theme das Icon nach oben drückt */
        display: inline-block !important;
    }

    /* Verhindert, dass der Text selbst in eine neue Zeile rutscht */
    #sidebar li.wgsDataCst > a span {
        display: inline-block !important;
    }

    /* Schiebt unseren selbstgebauten Pfeil ganz an den rechten Rand */
    #sidebar li.wgsDataCst > a::after {
        margin-left: auto !important; 
        float: none !important; /* Deaktiviert das alte float, da Flexbox das jetzt besser regelt */
    }
}



/* Verschiebt das Logo oben links um 20px nach rechts */
header .header-left .logo img {
    margin-left: 10px !important;
}

#sidebar ul.sidebar_items.custom_sidebar_items {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
}

/* Verhindert, dass das Hauptmenü (Sidebar) Inhalte abschneidet */
#sidebar .components {
    overflow-y: visible !important;
}

/* Falls das aufgeklappte Menü länger als der Bildschirm wird, machen wir die Sidebar scrollbar */
#sidebar {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    max-height: 100vh; /* Begrenzt die Höhe auf die Bildschirmgröße */
}



/*  Zeichnet einen echten Pfeil für ALLE Menüpunkte (absolut resistent gegen Theme-Fehler) */
#sidebar li.wgsDataCst > a::after {
    content: "";
    display: inline-block;
    float: right; /* Schiebt den Pfeil nach rechts */
    width: 8px; /* Größe des Pfeils */
    height: 8px;
    border-right: 2px solid #adbeee; /* Übernimmt automatisch die Textfarbe */
    border-bottom: 2px solid #adbeee;
    transform: rotate(-45deg); /* Dreht die Linien so, dass sie nach rechts zeigen ( > ) */
    margin-top: 11px; /* Schiebt den Pfeil auf Texthöhe */
    margin-right: 8px;
    transition: transform 0.2s ease-in-out;
}

/* Dreht den Pfeil nach unten ( v ), wenn das Menü offen ist */
#sidebar li.wgsDataCst > a.is-open::after {
    transform: rotate(45deg);
    margin-top: 4px; /* Optische Korrektur nach der Drehung */
}

/* Hält den Hintergrund schwarz und die Schrift/Icons weiß, wenn das Menü aufgeklappt ist */
#sidebar li.wgsDataCst > a.is-open {
    background-color: #0a325b !important;
}

/* Blendet den Collapse-Button der linken Sidebar komplett aus */
#sidebarCollapse {
    display: none !important;
}

/* Blendet den "Back"-Button auf allen Seiten komplett aus */
.back-button-head-bar {
    display: none !important;
}

/* Blendet das kleine X (Schließen-Icon) in der rechten/linken Sidebar oben aus */
.defaulttitle-close {
    display: none !important;
}

/*Custom Changes */
nav#sidebar {
    background: #1c4e80 url(../images/nav-bg.svg) repeat-y;
}
.clientx.header.wgsheaderfromaddon {
    background: #000000;
}
#sidebar ul li a {
    padding: 15px 14px;
    font-size: 1.1em;
    display: block;
    border-bottom: 0px;
    border-left: 1px solid transparent;
    transition: 1s;
}

.common-table-upper-header {
    background: #0a325b;
}