/* Import TeleNeo font */
@font-face {
    font-family: 'TeleNeo';
    src: url('../fonts/tele neo.otf') format('opentype');
}
@font-face {
    font-family: 'TeleNeoMedium';
    src: url('../fonts/tele neo medium.otf') format('opentype');
}

/* Set the default font for the entire site */
body {
    font-family: 'TeleNeo', Arial, sans-serif;
    color: #333333; /* Dark Gray */
    background-color: #F4F4F4; /* Light Gray */
    margin: 0;
    padding: 0;
}


/* Sidebar Icons und Text Styling */
.sidebar .nav-link {
    display: flex;
    align-items: center;
    font-size: 1rem;
    color: #000 !important; /* schwarzer Text */
    padding: 0.5rem 1rem;
    transition: background-color 0.2s ease;
}

    .sidebar .nav-link i {
        color: #E20074; /* Magenta Icons */
        margin-right: 0.5rem;
        font-size: 1.2rem;
    }

    /* Optional: Hover-Effekt */
    .sidebar .nav-link:hover {
        background-color: #f8f9fa;
        text-decoration: none;
    }

    /* Aktiver Link */
    .sidebar .nav-link.active {
        font-weight: bold;
        border-left: 4px solid #E20074;
        background-color: #f9e5f0;
    }

.sidebar select.form-select {
    font-size: 0.85rem;
    padding: 0.25rem 0.5rem;
}

.sidebar label {
    color: #333;
}


/* ========================== */
/* GENERAL STYLES */
/* ========================== */
body {
    font-family: 'TeleNeo', Arial, sans-serif;
    color: #333333; /* Dark Gray */
    background-color: #F4F4F4; /* Light Gray */
    margin: 0;
    padding: 0;
}

/* ========================== */
/* HEADER */
/* ========================== */
.navbar-light {
    background-color: #E20074; /* Telekom Magenta */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Custom Title Styling */
.custom-title {
    font-family: 'TeleNeoMedium';
    color: #ffffff !important;
    
    font-size: 1.5rem;
}

/* Black Square Styling */
.black-square {
    color: #000000; /* Black square */
    font-size: 1rem; /* Adjust size to match text */
    display: inline-block;
    margin-left: 3px; /* Small spacing between text and square */
}

/* ========================== */
/* NAVIGATION MENU */
/* ========================== */

/* Ensure Navbar Links are Dark Gray */
.navbar-dark .navbar-nav .nav-link {
    color: #333333 !important; /* Dark Gray */
    font-weight: 500;
    padding: 10px 15px;
}

    /* Hover Effect */
    .navbar-dark .navbar-nav .nav-link:hover {
        color: #000000 !important; /* Black on hover */
        background-color: rgba(0, 0, 0, 0.05); /* Light hover effect */
    }

/* Ensure Dropdown Spans Full Width */
.full-width {
    width: 100vw !important; /* Full viewport width */
    left: 0 !important;
    right: 0 !important;
    border: none;
    border-top: 2px solid #cccccc;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 0 !important;
    position: absolute;
    top: 100%;
    z-index: 1000;
    background-color: #ffffff !important;
}

    /* Ensure Dropdown Content Stays Centered */
    .full-width .container {
        max-width: 1200px; /* Adjust width to match main content */
        margin: auto;
    }

/* Navbar Link Styling */
.navbar-light .navbar-nav .nav-link {
    color: #333333 !important; /* Dark Gray */
    font-weight: 500;
    padding: 10px 15px;
}

    /* Hover Effect */
    .navbar-light .navbar-nav .nav-link:hover {
        color: #000000 !important; /* Black */
        background-color: rgba(0, 0, 0, 0.05);
    }

/* Dropdown Menu Items */
.navbar-light .dropdown-menu {
    background-color: #ffffff !important; /* White */
    border: none;
    width: 100vw !important; /* Ensure it takes full width */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
}

    /* Dropdown Items Styling */
    .navbar-light .dropdown-menu .dropdown-item {
        padding: 6px 10px;
        color: #333333 !important; /* Dark Gray */
        font-size: 1rem;
        transition: background 0.3s ease;
    }

        /* Dropdown Item Hover Effect */
        .navbar-light .dropdown-menu .dropdown-item:hover {
            background-color: rgba(0, 0, 0, 0.05) !important;
            color: #000000 !important;
        }

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .full-width {
        width: 100% !important; /* Full width on mobile */
    }
}

/* ========================== */
/* MAIN CONTENT */
/* ========================== */
main {
    padding: 20px;
    background-color: #FFFFFF; /* White */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* ========================== */
/* FOOTER */
/* ========================== */
.footer {
    background-color: #F8F9FA; /* Light Gray */
    text-align: center;
    padding: 10px 0;
    font-size: 14px;
}

/* ========================== */
/* LINKS */
/* ========================== */
a {
    color: #E20074; /* Telekom Magenta */
    text-decoration: none;
    transition: color 0.3s ease;
}

    a:hover {
        color: #C10064; /* Darker Magenta */
        text-decoration: underline;
    }

/* ========================== */
/* BUTTON STYLES */
/* ========================== */
.btn-primary {
    background-color: #E20074 !important; /* Telekom Magenta */
    border-color: #E20074 !important;
    color: #ffffff !important;
}

    .btn-primary:hover {
        background-color: #C10064 !important; /* Darker Magenta */
        border-color: #C10064 !important;
    }

.btn-danger{
    background-color: #E20074 !important; /* Telekom Magenta */
    border-color: #E20074 !important;
    color: #ffffff !important;
}

.btn-danger:hover {
    background-color: #C10064 !important; /* Darker Magenta */
    border-color: #C10064 !important;
}

.btn-warning {
    background-color: #E20074 !important; /* Telekom Magenta */
    border-color: #E20074 !important;
    color: #ffffff !important;
}

    .btn-warning:hover {
        background-color: #C10064 !important; /* Darker Magenta */
        border-color: #C10064 !important;
    }

.btn-info {
    background-color: #E20074 !important; /* Telekom Magenta */
    border-color: #E20074 !important;
    color: #ffffff !important;
}

    .btn-info:hover {
        background-color: #C10064 !important; /* Darker Magenta */
        border-color: #C10064 !important;
    }

.btn {
    background-color: #E20074 !important; /* Telekom Magenta */
    border-color: #E20074 !important;
    color: #ffffff !important;
}

    .btn:hover {
        background-color: #C10064 !important; /* Darker Magenta */
        border-color: #C10064 !important;
    }