body[data-theme='dark']{
    box-shadow: none !important;
}
body {
    box-shadow: none;
}

body:has(.devbar:not(.hide)) {
    --devbar-height: 2rem;
}

    body:has(.navbar.collapsed) {
        --navbar-width: 4rem;
    }

hr {
    background: var(--card-border);
    border: none;
    min-height: 0.1rem;
    width: calc(100% - 2rem);
    margin: 3.5rem 1rem;
}
 

h2.title {
    margin-left: 1rem;
    margin-bottom: 0;
    font-size: 1.15rem;
    font-weight: 900;
}
.m1 {
    margin: .5rem;
}

.shadow-inset {
    box-shadow: rgb(0 0 0 / 12%) 0px -2px 3px inset, rgb(255 255 255 / 19%) 0px 2px 5px inset;
} 

    .card::-webkit-scrollbar-track {
        margin: .5rem;
    }

.content:has(div.container404) {
    display: flex;
}

.display-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 10vmin;
    justify-content: center;
}

.unauthorized-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.unauthorized {
    --c2: var(--bg-darker);
    --c1: var(--bg);
    position: relative;
    background-color: var(--bg);
    opacity: 0.8;
    background: repeating-linear-gradient( 45deg, var(--c1), var(--c1) 20px, var(--c2) 20px, var(--c2) 100px );
    background-size: 100%;
    padding: 1rem 3rem;
    border-radius: 1rem;
}

    .unauthorized svg {
        fill: var(--bg-dark2);
        position: absolute;
        height: 200px;
        width: 200px;
        transform: translate(-50%, -75%) rotate(9deg);
        left: 100%;
        z-index: -1;
    }

.unauthorized-container .unauthorized .hurtig_button {
    position: absolute;
    bottom: calc(100% + 1rem);
    left: 0;
    background: var(--c2);
}

.unauthorized-container h2 {
    font-size: 2rem;
    max-width: 25rem;
    text-align: center;
    font-weight: 900;
    z-index: 15;
}

.container404 {
    position: relative;
    display: flex;
    flex-direction: column;
    margin: auto;
    background: var(--card-bg);
    border-radius: 3rem;
    padding: 2rem 5rem;
}

    .container404 div {
        height: 8rem;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
    }

        .container404 div:last-of-type {
            height: 4rem
        }

    .container404 lottie-player {
        height: 20rem;
        position: absolute;
        bottom: 0;
    }

    .container404 h1 {
        color: var(--primary);
        font-weight: 800;
        font-style: italic;
    }

    .container404 h2 {
        color: var(--text-dark-accent);
        font-weight: 700;
        margin-top: 0;
        margin-bottom: 3rem;
    }

/* List css styling used by FreeShiftsPage, ColleaugesPage, EmployeePage and ShiftsPage */
.list {
    width: auto;
    flex: 1;
    margin: 0 var(--page-side-margin);
}

.tabel {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.tabel-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 1rem;
    font-family: var(--font-header);
    color: var(--text-dark);
}

    .tabel-header p {
        color: var(--text-dark);
        opacity: .6;
        font-weight: 800;
        font-size: 0.9rem;
    }

    .tabel-header > div {
        display: flex;
        align-items: center;
        overflow: hidden;
    }

        .tabel-header > div > span {
            font-weight: 900;
            color: var(--text-dark);
            opacity: .6;
            font-size: 1rem;
        }

.item {
    display: flex;
    flex-direction: row;
    outline: .0rem solid var(--primary);
    transition: outline ease .1s;
    cursor: pointer;
    padding: .5rem 1rem .5rem 1rem;
    border-radius: .5rem;
    margin: .15rem 0;
    background: var(--card-bg);
    font-family: var(--font-body);
    font-weight: 400;
    align-items: center;
    border: .1rem solid var(--card-border);
    color: var(--text-dark);
    transition: ease border .2s, ease background .2s;
}

    .item.selected {
        background: var(--bg-darker);
        border: .1rem solid var(--bg-darker);
    }

    .item:hover {
        border: .1rem solid var(--bg-darker);
    }

    .item:focus {
        background: var(--bg-darker);
    }

    .item p {
        margin: 0;
        overflow: hidden;
    }

.position, .color-td {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    transition: cubic-bezier(0.44, -0.07, 0.15, 0.9) .2s flex;
}

    .color-td div {
        width: 1rem;
        height: 1rem;
        min-width: 1rem;
        min-height: 1rem;
        max-width: 1rem;
        max-height: 1rem;
        position: relative;
        border-radius: .5rem;
        box-sizing: border-box;
        border: solid .3rem black;
        border-radius: 50%;
        z-index: 1;
        margin-right: .4rem;
        transition: background .2s cubic-bezier(0.44, -0.07, 0.15, 0.9);
    }

.result-count {
    margin: 0.2rem 1rem;
    color: var(--text-dark-accent);
    font-family: var(--font-body);
    font-size: 12px;
} 

.x-bg, .empty-label-container {
    --x-bg: var(--bg-darker);
    --x-color: var(--bg);
    background: radial-gradient(circle, transparent 25%, var(--x-bg) 26%),linear-gradient(45deg, transparent 46%, var(--x-color) 47%, var(--x-color) 52%, transparent 53%), linear-gradient(135deg, transparent 46%, var(--x-color) 47%, var(--x-color) 52%, transparent 53%);
    background-size: 2em 2em;
    background-position: top left;
    background-color: var(--x-bg);
}

.empty-label-container {
    --x-bg: var(--bg);
    --x-color: var(--bg-darker);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 13rem;
}

    .empty-label-container label {
        font-family: var(--font-header);
        color: var(--input-text);
        font-weight: 700;
        padding: .8rem 1.25rem;
        margin-top: .5rem;
        background: var(--card-bg);
        border-radius: .75rem;
        width: auto;
        max-width: min(15rem, calc(100% - 2rem));
        align-self: center;
        text-align: center;
    }

        .empty-label-container label a {
            font-size: 12px;
            color: var(--text-dark-mute);
        }

.walkthrough-dialog {
    background: var(--card-bg);
    border-radius: 1.2rem;
    border: 0.1rem solid var(--card-border);
    --shadow-color: 222deg 22% 34%;
    box-shadow: 0px 1px 1px hsl(var(--shadow-color) / 0.32), 0px 2.4px 2.7px -0.7px hsl(var(--shadow-color) / 0.32), -1px 14.8px 16.7px -2.1px hsl(var(--shadow-color) / 0.32), -1px 21.8px 24.5px -2.5px hsl(var(--shadow-color) / 0.32);
}

    .walkthrough-dialog:has(.wide) {
        max-width: min(49rem, 80%) !important;
    }

    .walkthrough-dialog .shepherd-arrow:before {
        background: transparent;
        border-radius: 4px;
    }

    .walkthrough-dialog .shepherd-arrow {
        display: none;
    }

        .walkthrough-dialog .shepherd-arrow:before {
            background: transparent !important;
            border-radius: 4px;
        }

[data-theme='dark'] .walkthrough-dialog {
    --shadow-color: 222deg 0% 0%;
    box-shadow: 0px 1px 1px hsl(var(--shadow-color) / 0.32), 0px 2.4px 2.7px -0.7px hsl(var(--shadow-color) / 0.32), -1px 14.8px 16.7px -2.1px hsl(var(--shadow-color) / 0.32), -1px 21.8px 24.5px -2.5px hsl(var(--shadow-color) / 0.32);
}

.walkthrough-dialog .shepherd-content {
    border-radius: .8rem;
}

    .walkthrough-dialog .shepherd-content:not(:has(.shepherd-header)) {
        margin-top: 1rem;
    }

    .walkthrough-dialog .shepherd-content .shepherd-header {
        margin: .4rem;
        border-radius: .8rem;
        background: var(--card-bg-top);
        justify-content: center;
    }

        .walkthrough-dialog .shepherd-content .shepherd-header h3 {
            font-weight: 900;
            color: var(--text-dark);
            font-size: 1.3rem;
            text-align: center;
            flex: unset;
        }

.walkthrough-dialog .shepherd-text {
    color: var(--text-dark);
    margin: 0 1rem;
}

    .walkthrough-dialog .shepherd-text:has(.wide) {
        margin: 0 1rem 0 0;
        padding-top: 0;
    }

.walkthrough-dialog b {
    font-weight: 900;
    font-family: var(--font-header);
}

.walkthrough-dialog kbd {
    font-family: var(--font-body);
    font-size: 0.8rem;
    padding: 2px 5px;
    border-radius: 4px;
    background: var(--bg-darker);
}

.walkthrough-dialog .shepherd-button {
    display: flex;
    align-items: center;
    border: none;
    font-size: 1rem;
    padding: .6rem 1.1rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    border-radius: .65rem;
    transition: color .2s cubic-bezier(0.35, 0.07, 0.2, 1), box-shadow .2s cubic-bezier(0.35, 0.07, 0.2, 1), background .2s cubic-bezier(0.35, 0.07, 0.2, 1), outline .2s cubic-bezier(0.35, 0.07, 0.2, 1);
    cursor: pointer;
    width: fit-content;
    height: fit-content;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-bottom: 3px solid var(--primary-variable);
    background: var(--primary);
    color: var(--text-light);
    box-shadow: 0px 1px 18px 0px var(--primary50), inset 0 0 16px -4px var(--card-bg-top);
}

.walkthrough-dialog .welcome-animation {
    height: 10rem;
    aspect-ratio: 1 / 1;
    background: var(--bg-dark);
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

[data-theme='dark'] .walkthrough-dialog .shepherd-button {
    box-shadow: 0px 1px 24px 0px var(--primary50), inset 0 0 20px -6px var(--card-bg-top);
}

.walkthrough-dialog .shepherd-button:hover {
    background: var(--primary-hover);
    color: var(--text-light);
}

.walkthrough-dialog .shepherd-button.shepherd-button-secondary {
    border: none;
    background: var(--bg);
    color: var(--text-dark);
    box-shadow: none;
}

    .walkthrough-dialog .shepherd-button.shepherd-button-secondary:hover {
        background: var(--bg-dark);
        border-color: var(--bg-dark);
        color: var(--primary);
    }

.walkthrough-dialog a {
    font-weight: 900;
    text-decoration: none;
}

    .walkthrough-dialog a:hover {
        text-decoration: auto;
    }

.shepherd-modal-overlay-container path {
    animation: backdrop-in-onboarding .5s ease 1 forwards;
}

[data-theme='dark'] .shepherd-modal-overlay-container.shepherd-modal-is-visible {
    opacity: 1;
}

[data-theme='dark'] .shepherd-modal-overlay-container path {
    animation: backdrop-in-onboarding-dark .5s ease 1 forwards;
}

@keyframes backdrop-in-onboarding {
    0% {
        backdrop-filter: blur(0px);
        fill: transparent;
    }

    100% {
        backdrop-filter: blur(4px);
        fill: var(--bg-dark3);
    }
}

@keyframes backdrop-in-onboarding-dark {
    0% {
        backdrop-filter: blur(0px);
        fill: transparent;
    }

    100% {
        backdrop-filter: blur(4px);
        fill: #000000aa;
    }
}

.walkthrough-highlight,
.walkthrough-highlight-second {
    --c: var(--primary50);
    position: relative;
    transition: all 0.3s ease;
    animation: pulsate 2s infinite;
    z-index: 50;
}

.walkthrough-highlight-second {
    --c: var(--secondary50);
}


    /* Highlight class with pseudo-element for pulsating animation */
    .walkthrough-highlight::after,
    .walkthrough-highlight-second ::after {
        content: '';
        position: absolute;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        border-radius: inherit; /* Inherit border-radius from the parent element */
        pointer-events: none; /* Ensure the pseudo-element doesn't block interactions */
        /* Animation properties */
        animation: pulsate 2s infinite;
        animation-delay: 0.2s;
    }


/* Define the pulsate animation */
@keyframes pulsate {
    0% {
        box-shadow: 0 0 0 0 var(--c);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }
}


.ql-container {
    height: unset !important;
}

.menu-back {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 5;
}

.info-box {
    white-space: unset;
    font-size: 12px;
    background: var(--card-bg50);
    padding: 1rem;
    border-radius: 1rem;
    color: var(--input-text); 
    white-space: unset !important;
    line-height: 1.5;
    margin-top: .5rem;
}

    .info-box span {
        font-size: 16px;
        margin-right: 4px;
        vertical-align: middle;
        color: inherit;
    }

.info-box.error{
    background: var(--card-bg-warning);
    color: var(--warning);
}

/* Mobile Navigation Styles */
.mobile-menu-toggle {
    display: none; 
    top: 1rem;
    left: 1rem;
    z-index: 101;
    background: var(--card-bg);
    border: 0.1rem solid var(--card-border);
    border-radius: 0.75rem;
    padding: 0.75rem;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease;
    box-shadow: var(--shadow-medium);
}

    .mobile-menu-toggle:hover {
        background: var(--bg-dark);
        transform: scale(1.05);
    }

    .mobile-menu-toggle span {
        font-size: 1.5rem;
        color: var(--text-dark);
    }

.mobile-nav-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 99;
    opacity: 0;
    transition: opacity 0.3s ease;
}

    .mobile-nav-overlay.active {
        display: block;
        opacity: 1;
    }

/* Mobile Breakpoints */
@media (max-width: 768px) {
    /* Hide desktop nav and show mobile toggle */
    .navbar {
        position: fixed !important;
        left: -100% !important;
        top: 0 !important;
        height: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        width: min(80%, 20rem) !important;
        z-index: 100;
        transition: left 0.3s ease !important;
    }

        .navbar.mobile-open {
            left: 0 !important;
        }

    .mobile-menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .navbar .nav-elm {
        margin: 0.1rem .5rem !important;
        width: calc(100% - 1rem) !important;
        box-sizing: border-box;
    }
        .navbar .nav-elm span:not(.material-icons) {
            flex: 1;
            max-width: unset !important;
        }

    .navbar .nested-nav-link {
        width: 100%;
    }

    .navbar .tooltip-container {
        width: 100%;
    }

    /* Adjust main content */
    main {
        margin-left: 0 !important;
        padding: 0 !important;
        max-width: calc(100% - 0rem) !important;
    }

    /* Header adjustments */
    .header {
        align-items: flex-start !important;
        gap: 0.5rem !important;
        padding: 0 0.5rem;
        box-sizing: border-box;
        margin-top: 8px;
    }

        .header > div:not(.crumbs) {
            justify-content: space-between;
            margin-top: 0 !important;
        }

        .header .work {
            display: none !important; /* Hide work timer on mobile */
        }

    article.content {
        width: calc(100% - 1rem) !important;
        padding: 0 !important;
    }

    nav .nav-footer{
        width: 100%
    }

    /* Dashboard mobile layout */
    .dashboard-content {
        padding: 0.5rem;
        height: auto;
        gap: 0.75rem;
    }

        .dashboard-content .row {
            gap: 0.75rem;
        }
        .dashboard-content .row.first {
            flex-direction: column !important;
        }

            .dashboard-content .row .card {
                min-width: unset !important;
                width: 100% !important;
                height: auto !important;
                max-height: none !important;
                box-sizing: border-box;
            }

        .dashboard-content .actions {
            flex-wrap: wrap;
            padding: 0.75rem;
            gap: 0.5rem;
            margin: 0 !important;
        }

            .dashboard-content .actions .action {
                min-width: calc(50% - 0.25rem);
                flex: 1 1 calc(50% - 0.25rem);
            }

                .dashboard-content .actions .action p {
                    font-size: 0.75rem;
                }

        .dashboard-content .card.freed {
            min-width: unset !important;
        }

            .dashboard-content .card.freed .collumns {
                flex-direction: column;
            }

        .dashboard-content .next-shift-small {
            max-height: none;
            flex-direction: column;
        }

    .newsfeed {
        padding: 1rem !important;
        margin: 0 !important;
        width: 100% !important;
    }

    /* Dialog mobile optimization */
    .dialog {
        width: calc(100% - 2rem) !important;
        max-width: 90% !important;
        padding: 2rem 1.5rem !important;
        margin: 0 1rem;
    }

    .dialog-title {
        font-size: 1.25rem !important;
    }

    .dialog-description {
        font-size: 0.9rem !important;
    }

    .action-container {
        flex-direction: column;
        gap: 0.5rem;
    }

        .action-container button {
            width: 100%;
        }

    /* Alert mobile optimization */
    .alert-container {
        width: calc(100% - 2rem) !important;
        padding: 1rem !important;
        max-width: 100%;
    }

    /* Improve touch targets */
    .nav-elm, 
    .clickable {
        min-height: 30px;
        min-width: 44px;
    }

    /* Hide less important elements on mobile */
    .weather-component {
        display: none;
    }

    .highly-important {
        padding: 1rem !important;
        margin: 0.5rem !important;
    }

        .highly-important h2 {
            font-size: 1.1rem !important;
        }

    /* Table/list improvements */
    .tabel {
        font-size: 0.9rem;
    }

    .item {
        padding: 0.75rem 0.5rem;
    }

    /* Form inputs */
    input,
    select,
    textarea {
        font-size: 16px !important; /* Prevents zoom on iOS */
    }
}

/* Small mobile devices */
@media (max-width: 480px) {
    .dashboard-content .actions .action {
        min-width: 100%;
        flex: 1 1 100%;
    }

        .dashboard-content .actions .action p {
            font-size: 0.9rem;
        }

    .header .crumbs {
        font-size: 0.8rem;
        padding: 0.25rem;
    }

    .missed-shifts {
        min-width: unset !important;
        padding: 0.75rem !important;
    }

        .missed-shifts .shifts {
            flex-wrap: wrap;
        }
}

/* Landscape mode adjustments */
@media (max-width: 768px) and (orientation: landscape) {
    .settings .nav {
        position: sticky;
        top: 0;
        z-index: 10;
        background: var(--card-bg);
    }

    main {
        margin-top: 3rem;
    }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    /* Remove hover effects that don't work on touch */
    .nav-elm:hover,
    .action:hover,
    button:hover {
        transform: none !important;
    }

    /* Increase tap targets */
    .nav-elm,
    .action,
    button {
        padding: 0.875rem !important;
    }

    /* Improve scrolling */
    * {
        -webkit-overflow-scrolling: touch;
    }

    /* Disable hover-dependent features */
    .tooltip-container:hover .tooltip {
        display: none !important;
    }
}

/* Fix for iOS safe areas */
@supports (padding: env(safe-area-inset-left)) {
    .navbar.mobile-open {
        padding-left: env(safe-area-inset-left);
    }

    .settings {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }

    .mobile-menu-toggle {
        left: max(1rem, env(safe-area-inset-left));
        top: max(1rem, env(safe-area-inset-top));
    }
}