* {
    padding:0;
    margin:0;
}
body {
    margin: 0;
    font-family: 'Roboto', Arial, sans-serif;
    background: #fff;
    color: #222;
    height: 100%;
}
.navbar {
    background: #c8102e;
    padding: 0 40px;
    position: fixed;
    width: 100%;
    top: 0;
    display: flex;
    align-items: center;
    height: 64px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.03);
}

p {
    text-align: center;
    width: 100%;
    margin-top: 4px;
}
.navbar .button {
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    font-size: 1.05em;
    margin-right: clamp(20px, 5%, 60px);
    padding: 8px;
    border-bottom: 2px solid transparent;
    transition: border-color 0.2s, color 0.2s;
}
.logout{
    margin-right: clamp(40px, 5%, 60px);
}
.navbar .button:hover {
    color: #ffe5e5;
}
.navbar .navbar-title {
    font-size: 1.5em;
    font-weight: 700;
    margin-right: auto;
}
.title {
    text-align: center;
    margin: 76px 0 24px 0;
    font-size: 2.2em;
    font-weight: 700;
    color: #c8102e;
    letter-spacing: 1px;
}
.wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.main {
    .content {
        margin-top: -64px;
        padding: 0 40px;
        align-self: flex-start;
    }
    margin-top: 64px;
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    flex-direction: row;
}
.footer {
    background: #fff;
    border-top: 1px solid #e5e5e5;
    text-align: center;
    padding: 18px 0;
    font-size: 1em;
    color: #c8102e;
    position: relative;
    width: 100%;
    bottom: 0;
    box-shadow: 0 -2px 4px rgba(0,0,0,0.03);
}
div.container {
    background: #fff;
    border: 1px solid #e5e5e5;
    box-shadow: 0 2px 8px rgba(200,16,46,0.07);
    border-radius: 8px;
    max-width: 400px;
    margin: 110px auto 0 auto;
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: flex-start;
    font-family: 'Roboto', Arial, sans-serif;
    color: #222;
}
#form-label {
    align-self: flex-start;
    margin-bottom: 8px;
    font-size: 1.05em;
    font-weight: 500;
}

#form-input {
    align-self: flex-end;
    width: 100%;
    padding: 4px 2px;
    border: 1px solid #c8102e;
    border-radius: 4px;
    font-size: 1em;
    margin-bottom: 6px;
    box-sizing: border-box;
}
.loading-throbber {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
}

.loading-throbber > div {
    width: 24px;
    height: 24px;
    border: 4px solid #ccc;
    border-top: 4px solid #333;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-right: 12px;
}

@keyframes spin {
    0% { transform: rotate(0deg);}
    100% { transform: rotate(360deg);}
}

.loading-text {
    font-size: 1.1em;
    color: #333;
}
aside.container {
    h2 {
        margin-top: 0;
        margin-bottom: 10px;
        font-size: 1.5em;
        font-weight: 700;
        color: #c8102e;
        letter-spacing: 1px;
        text-align: center;
    }
    p {
        margin-top: 0;
        font-size: 1em;
        text-align: center;
    }
    input#csvFileInput {
        display: none;
    }
    label.Drivers {
        cursor: pointer;
        display: flex;
        justify-content: space-around;
        align-items: center;
        background: #c8102e;
        color: #fff;
        padding: 10px 15px;
        border-radius: 4px;
        font-size: 1em;
        font-weight: 500;
        margin-top: 10px;
        transition: background-color 0.2s, box-shadow 0.2s;
    }
    label.missingItems {
        cursor: pointer;
        display: flex;
        justify-content: space-around;
        align-items: center;
        background: #c8102e;
        color: #fff;
        padding: 10px 15px;
        border-radius: 4px;
        font-size: 1em;
        font-weight: 500;
        margin-top: 10px;
        transition: background-color 0.2s, box-shadow 0.2s;
    }
    label:hover {
        background: #a50b23;
        box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    }
    div#optionsMenus{
        margin-top: 15px;
        border-top: #222 1px solid;
        label{
            user-select: none;
            cursor: pointer;
            display: flex;
            justify-content: space-around;
            align-items: center;
            background: #424242;
            color: #fff;
            padding: 10px 15px;
            border-radius: 4px;
            font-size: 1em;
            font-weight: 500;
            margin-top: 5px;
            width: 100%;
            transition: background-color 0.2s, box-shadow 0.2s;
        }
        h3{
            padding-top: 10px;
            text-align: center;
            font-size: 1.1em;
            font-weight: 600;
            color: #222;
        }
        label:hover {
            background: #616161;
            box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        }
        input{
            display: none;
        }
        input[type="checkbox"]:checked + label {
            cursor: pointer;
            display: flex;
            justify-content: space-around;
            align-items: center;
            background: #c8102e;
            color: #fff;
            padding: 10px 15px;
            border-radius: 4px;
            font-size: 1em;
            font-weight: 500;
            margin-top: 5px;
            transition: background-color 0.2s, box-shadow 0.2s;
        }   
        input[type="checkbox"]:checked + label:hover {
            background: #a50b23;
            box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        }
        padding-bottom: 20px;
        border-bottom: #222 1px solid;
    }
    div.option-container {
        display: flex;
        align-items: center;
    }
    p.print-button {
        font-size: 0.9em;
        font-style: italic;
        color: #555;
        text-align: center;
        width: 100%;
        margin-top: 5px;
    }
    button.print-button {
        cursor: pointer;
        margin-top: 20px;
        padding: 10px 15px;
        border-radius: 4px;
        font-size: 1em;
        font-weight: 500;
        background: #c8102e;
        color: #fff;
        border: none;
        transition: background-color 0.2s, box-shadow 0.2s;
    }
    button.print-button:hover {
        background: #a50b23;
        box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    }
    .tooltip {
        position: relative;
        display: inline-block;
        cursor: default;
    }

    .tooltip .tooltiptext {
        visibility: hidden;
        padding: 0.25em 0.5em;
        background-color: black;
        color: #fff;
        text-align: center;
        border-radius: 0.25em;
        white-space: nowrap;
    
        /* Position the tooltip */
        position: absolute;
        z-index: 1;
        top: 100%;
        left: 0;
        transition-property: visibility;
        transition-delay: 0s;
    }

    .tooltip:hover .tooltiptext {
        visibility: visible;
        transition-delay: 0.8s;
    }
    box-shadow: 10px 10px 10px rgba(200,16,46,0.07);
    border:#eeeeee 1px solid;  
    display: flex;
    flex-direction: column;
    background-color: #dcdcdc;
    border-radius: 10px;
    width: 316px;
    min-width: 316px;
    text-wrap: nowrap;
    padding: 20px 15px;
    margin-left: 20px;
    position: sticky;
    left: 20px;
    top: 100px;
    align-self: flex-start;
}
.routeContainer {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: left;
}

.innerRoute {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    border-bottom: #222 1px solid;
}
.outerRoute {
    box-shadow: #222 0px 1px 3px 0px;
    align-self: flex-start;
    margin: 20px 10px 10px 30px;
    padding: 20px 20px 20px 20px;
    min-height: 50px;
    width: 75%;
}
.driverRoute {
    font-weight: 600;
    width: 50%;
    color: blue;
    white-space: nowrap;
    flex: 1;
}
.driverName {
    font-weight: 600;
    width: 100%;
    color: blue;
    white-space: nowrap;
    flex: 2 0 100%;
}
.routeTime {
    font-style: italic;
    color: blue;
    text-align: right;
    width: 50%;
    text-wrap: nowrap;
    margin-right: 0;
    flex: 1;
}
.ordersList {
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.ordersList span {
    border: #cfcfcf 1px solid;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.outputFooter {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}
.currentDate {
    font-size: 0.9em;
    font-style: italic;
    color: #555;
    text-align: right;
    width: 50%;
    margin-top: 5px;
}
.currentStore {
    font-size: 0.9em;
    font-style: italic;
    color: #555;
    text-align: left;
    width: 50%;
    margin-top: 5px;
}
.strikethrough{
    background: linear-gradient(transparent 0%, 
                              transparent calc(50% - 1px), /* Transparent up to just before center */
                              black calc(50% - 1px),      /* Start of black line */
                              black calc(50% + 1px),      /* End of black line */
                              transparent calc(50% + 1px), /* Transparent from just after center */
                              transparent 100%);
    color: #555;
    font-style: italic;
}
.missingItemsContainer{
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: flex-start flex-start;
    margin-top: 20px;
    .itemsGrid {
        display: grid;
        grid-template-columns: clamp(300px, fit-content(100%), 100%);
        grid-auto-rows: fit-content(100%);
        gap: 0px 16px;
        width: fit-content;
        align-items: start;
    }
    .itemsGrid .Annet {
        grid-column: 1;
        grid-row: 1;
        border: 2px solid #888;
        box-shadow: 0 2px 8px rgba(128,128,128,0.15);
        background: #f2f2f2;
        padding: 16px;
        margin-bottom: 16px;
    }

    .itemsGrid .Bakeri {
        grid-column: 2;
        grid-row: 1;
        border: 2px solid #ffd600;
        box-shadow: 0 2px 8px rgba(255,214,0,0.15);
        background: #fffde7;
        padding: 16px;
        margin-bottom: 16px;
    }

    .itemsGrid .Frukt {
        grid-column: 1;
        grid-row: 2;
        border: 2px solid #43a047;
        box-shadow: 0 2px 8px rgba(67,160,71,0.15);
        background: #e8f5e9;
        padding: 16px;
        margin-bottom: 16px;
    }

    .itemsGrid .Ferskvare {
        grid-column: 2;
        grid-row: 2;
        border: 2px solid #ec407a;
        box-shadow: 0 2px 8px rgba(236,64,122,0.15);
        background: #fce4ec;
        padding: 16px;
        margin-bottom: 16px;
    }
    .windowTime {
        font-style: italic;
        color: blue;
        text-align: left;
        width: 50%;
        text-wrap: nowrap;
        margin-right: 0;
        padding-bottom: 10px;
        flex: 1;
        text-decoration: underline;
    }
    .itemsList {
        border: #cfcfcf 1px solid;
        overflow-y: auto;
        display: flex;
        flex-direction: row;
        align-items: auto;
    }
    .itemsList span.quantity {
        display: flex;
        font-weight: 600;
        margin-right: 6px;
        align-self: flex-start;
    }
    .itemsList span.actualItem {
        margin-right: 6px;
        width: 400px;
        flex: 1;
        white-space: nowrap;
        text-wrap: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .itemsList span.gtin {
        color: #555;
        font-size: 0.9em;
        font-style: bold;
        align-self: flex-end;
    }
    .outerMissingItems {
        align-self: flex-start;
        margin: 10px 10px 10px 10px;
        padding: 20px 20px 20px 20px;
        min-height: 50px;
        width: auto;
    }
}
#output {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    width: 100%;
}
#outputBox {
    width: calc(100% - 350px);
    display: flex;
    flex-direction: row;
    align-self: flex-start;
}
@media print{
    @page {
        /* Set the desired page size and orientation */
        size: A4 portrait; /* Example: A4 paper in portrait orientation */
        /* Set the desired margins for the entire page */
        
    }

    /* Optionally, remove default browser margins on html and body */
    html, body {
        margin: 0;
        padding: 0;
    }
    .outerRoute{
        break-inside: avoid;
        width: clamp(300px, 50%, 600px);
        box-decoration-break: clone;
    }
    .routeContainer {
        display: flex;
        flex-direction: row;
        width: 100%;
    }
    .currentDate {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .currentStore {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .missingItemsContainer {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        page-break-after: always;
        break-inside: avoid;
        overflow-wrap: break-word;
        /* Remove !important to allow print styles to override */
    }
    .itemsGrid .Annet, .itemsGrid .Bakeri, .itemsGrid .Frukt, .itemsGrid .Ferskvare {
        margin-top: 5px;
        break-inside: avoid;
    }
    .missingItemsContainer .outerMissingItems {
        align-self: flex-start;
        margin: 0px 0px 0px 0px;
        padding: 0px 0px 0px 0px;
        min-height: 50px;
        width: auto;
    }

}

.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown.active .dropbtn {
    border-bottom: 2px solid #fff;
    background-color: #a50b22c1;
}
.dropbtn {
    color: #fff;
    cursor: pointer;
    text-decoration: none;
    font-weight: 500;
    font-size: 1.05em;
    margin-right: clamp(20px, 5%, 60px);
    padding: 8px 16px;
    border: none;
    background: transparent;
    border-radius: 8px;
    transition: background 0.2s, box-shadow 0.2s;
}
.dropdown-content {
    display: none;
    position: absolute;
    min-width: 160px;
    background-color: #fff;
    box-shadow: 0 4px 12px rgba(200,16,46,0.15);
    border-radius: 8px;
    margin-top: 8px;
    z-index: 10;
    padding: 8px 0;
    right: 0;
}
.dropdown-content li {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.dropdown-content a {
    display: block;
    color: #222;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 1em;
    transition: background 0.2s, color 0.2s;
}
.dropdown-content a:hover {
    background-color: #c8102e;
    color: #fff;
}
.dropdown:hover .dropdown-content {
    display: block;
}
.dropdown:hover .dropbtn {
    background-color: #89091c;
    box-shadow: 0 2px 8px rgba(200,16,46,0.15);
    border-radius: 8px;
}