/* 🌌 GLOBAL */
body{

    margin:0;
    font-family:'Digital','Segoe UI',Arial,sans-serif;
    background:#0f172a;
    color:#e2e8f0;
}

/* 🔥 Headlines */
h1,h2,h3,.title,#statusText{

    font-family:'Digital',sans-serif;
}

/* 🌟 Seitenüberschrift */
.pageHeader{
    text-align:center;
    margin-bottom:30px;
}

.pageTitle{
    font-size:52px;
    margin:0 0 14px 0;
    font-family:'Digital', sans-serif;
    color:white;
}

.pageSubtitle{
    font-size:20px;
    opacity:0.75;
    margin:0;
}

/* 📚 SIDEBAR */
.sidebar{

    width:220px;
    height:100vh;
    background:#020617;
    position:fixed;
    padding:20px;
    box-sizing:border-box;
}

/* 🔗 LINKS */
.sidebar a{

    display:block;
    padding:10px;
    color:#94a3b8;
    text-decoration:none;
    border-radius:8px;
    margin-bottom:5px;
    transition:0.2s;
}

.sidebar a:hover{

    background:#1e293b;
    color:white;
}

.sidebarSection{
    margin-bottom:20px;
}

/* 📄 MAIN */
.main{

    margin-left:240px;
    padding:20px;
}

/* 📦 CARDS */
.card{

    background:#020617;
    padding:30px;
    border-radius:22px;
    margin-bottom:20px;
    box-shadow:
    0 0 20px rgba(0,0,0,0.25);
}

/* 🌍 Globaler Seitencontainer */
.pageContainer{
    width:100%;
    max-width:1200px;
    margin:0 auto;
}

/* 🔘 BUTTONS */
button{

    padding:10px 15px;
    border:none;
    border-radius:8px;
    cursor:pointer;
    margin:5px;
}

/* 🟢 */
.btn-green{

    background:#22c55e;
    color:white;
}

/* 🔴 */
.btn-red{

    background:#ef4444;
    color:white;
}

/* 🔵 */
.btn-blue{

    background:#3b82f6;
    color:white;
}

/* 🟡 */
.btn-yellow{

    background:#f59e0b;
    color:black;
}

/* 📝 INPUTS */
input,
select{

    padding:8px;
    border:none;
    border-radius:6px;
    margin:5px;
}

/* 👤 USERBOX */
.userBox{

    display:flex;
    align-items:center;
    gap:16px;
}

/* 👤 AVATAR */
.avatar{

    width:80px;
    height:80px;
    border-radius:50%;
}

/* 📱 MOBILE */
@media(max-width:900px){

    .sidebar{

        width:100%;
        height:auto;
        position:relative;
    }

    .main{

        margin-left:0;
    }
}

/* LOGIN */
.loginHighlight{
    background:#7c3aed !important;
    color:white !important;
    font-weight:bold;
}

.loginHighlight:hover{
    background:#8b5cf6 !important;
}