:root {
    --logo-yellow: #fffad2;
    --logo-brown: #d5b373;
    --logo-green: #689016;
    --logo-red: #ff5050;
    --logo-yellow-rgb: 255, 250, 210;
    --logo-brown-rgb: 213, 179, 115;
    --logo-green-rgb: 104, 144, 22;
    --logo-red-rgb: 255, 80, 80;

    --validation-error: #b94a48;

    --text-color-black: #1e1e1e;
    --text-color-grey: #777;
    --text-color-grey-rgb: 189, 189, 189;

    --grey-active: #d9d9d9;
    --overlay-white: rgba(255, 255, 255, 0.7);
    --white: #fff;
}

html {
    scroll-behavior: smooth;

    /* Scrollbar for Webkit browsers (Chrome, Safari, Edge) */

    ::-webkit-scrollbar {
        width: 12px; /* Width of the scrollbar */
    }

    ::-webkit-scrollbar-track {
        background: #f1f1f1; /* Background of the scrollbar track */
    }

    ::-webkit-scrollbar-thumb {
        background-color: #888; /* Scrollbar thumb color */
        border-radius: 10px; /* Scrollbar thumb roundness */
        border: 3px solid #f1f1f1; /* Optional padding inside the scrollbar */
    }

    ::-webkit-scrollbar-thumb:hover {
        background-color: #555; /* Change color on hover */
    }

    /* Scrollbar styling for Firefox */
    scrollbar-width: thin; /* Scrollbar width */
    scrollbar-color: #888 #f1f1f1; /* Scrollbar thumb and track color */
}

body {

}

/* Set padding to keep content from hitting the edges */
.body-content {

    color: var(--text-color-black);

    min-height: 70vh;
}

/* Links no underline */
a {
    text-decoration: none;
}

/* status colors in bestelluebersicht und backbplan */
td.geliefert {
    color: darkgreen;
    font-weight: 200;
}

td.zurauslieferung {
    color: darkgreen;
}

td.offen {
    color: darkred;
}

td.storniert {
    color: red;
}

td.inArbeit {
    color: blueviolet;
}

.hint {
    color: gray;
}

.text_warning {
    color: darkred;
    font-weight: bold;
}

.in Auslieferung {
    color: darkviolet;
}

.geliefert {
    color: darkgreen;
}

.teilgeliefert {
    color: darkgreen;
}

.teilabgerechnet {
    color: darkgreen;
}

.abgerechnet {
    color: darkgreen;
    font-weight: bold;
}

.aactive {
    color: darkgreen;
}

.asonder {
    color: orange;
}

.inactive {
    color: darkred;
}

.storniert {
    color: red;
    font-weight: bold;
}

.custom_note {
    color: darkblue;
    font-style: italic;
}

.vertical_text {
    writing-mode: vertical-lr;
    transform: rotate(180deg);
}

.text-black {
    color: black !important;
}

.menu_card {
    background-color: #FFFAD2;
    margin-bottom: 24px;
}

.hint_credit {
    color: darkgreen;
    font-weight: bold;
}

.badge_bodan {
    background-color: burlywood !important;
    color: white !important;
}

.label_wochenangebot {
    color: burlywood;
}

.input_variation {
    font-size: 12px;
}

/* styles for validation helpers */
.field-validation-error {
    color: var(--validation-error);
}

.field-validation-valid {
    display: none;
}

input.input-validation-error {
    border: 1px solid var(--validation-error);
}

input[type="checkbox"].input-validation-error {
    border: 0 none;
}

.validation-summary-errors {
    color: var(--validation-error);
}

.validation-summary-valid {
    display: none;
}

.mt-25 {
    margin-top: 25px;
}

.mt-45 {
    margin-top: 45px;
}

.badge_small {
    font-size: 10px;
}

.table_row_edit {
    vertical-align: bottom;
}

/* Navbar */
#navbar-main {
    color: var(--text-color-black);
    border-bottom: 1px solid var(--grey-active);

    .hover-effect .nav-link {
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); /* Subtle shadow */
        transition: text-shadow 0.3s ease; /* Smooth transition */
    }

    .hover-effect .nav-link:hover {
        text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.8); /* Larger shadow on hover */
    }

    .navbar-brand img {
        max-height: 50px;
    }

    .profile-width {
        min-width: 100px;
    }
}

/* Notifications container */
#notification-container {
    position: fixed;
    top: 0; /* Start off-screen */
    left: 0; /* Start off-screen */
    width: 100vw;
    z-index: 1050;
    pointer-events: none;


    /* Slide in from left */

    .notification-alert {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        transform: translateX(0%) translateY(0%);
        transition: transform 1s ease-out;
        margin-bottom: 10px;
    }

    .top {
        transform: translateY(-200%);
    }

}


/* Footer */

#footer-main {

    color: var(--text-color-black);
    border-top: 1px solid var(--grey-active);


    .footer-logo img {
        max-width: 300px; /* Adjust logo size */
    }

    .footer-links a {
        color: var(--text-color-black); /* Text color from variable */
        text-decoration: none;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); /* Subtle shadow */
        transition: text-shadow 0.3s ease; /* Smooth transition */
    }

    .footer-links a:hover {
        text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.8);
    }

    .footer-links ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .footer-links ul li {
        margin-bottom: 0.5rem;
    }

}


.header-background-image {
    background-size: cover;
    background-position: center;
    position: relative;
    height: 50vh; /* Adjust based on how much height you want */
    max-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;


    .header-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--overlay-white); /* White overlay with opacity */
        z-index: 1;
    }

    .header-content {
        position: relative;
        z-index: 2;

        /* Button custom colors */

        .btn-primary {
            background-color: var(--logo-yellow); /* Custom button color */
            border: none;
            color: var(--text-color-black);
            transition: background-color 0.3s ease, box-shadow 0.3s ease;
            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); /* Add shadow on hover */
        }

        .btn-primary:hover {
            box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.5); /* Add shadow on hover */
        }
    }


}


/* Media query for small devices */
@media (max-width: 768px) {


    #navbar-main {

        .navbar-nav {
            display: grid !important;
            grid-template-columns: repeat(2, 1fr); /* 2 columns on small devices */
            gap: 10px; /* Adjust gap between columns */
        }
    }

    #footer-main {

        color: var(--text-color-black);
        border-top: 1px solid var(--grey-active);

        .container {

            flex-direction: column; /* Change flex direction to column on small devices */
            align-items: center; /* Center items horizontally */

            .footer-logo {

                margin-bottom: 30px; /* Add some space between the two lists */

                img {
                    max-width: 150px; /* Adjust logo size */
                }
            }

            .footer-links ul {
                width: 50%;
                text-align: left; /* Center the text */
            }
        }
    }

}