@import url("https://fonts.googleapis.com/css?family=Barlow+Condensed:100,400,500,700&display=swap");

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus {
    outline: var(--focus-outline-width) solid var(--color-border-focus);
    outline-offset: var(--focus-outline-offset);
}

.form-control:focus, .form-check-input:focus {
    box-shadow: var(--focus-box-shadow-bootstrap);
    outline: none;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ============================================
   CSS Variables & Design Tokens
   ============================================ */

:root {
    /* Colors */
    --color-primary: #E54F00;
    --color-secondary: 6, 48, 72;
    --color-primary-rgb: 229, 79, 0;
    --color-primary-dark: rgb(4, 31, 51);
    --color-dark: #001F3F;
    --color-dark-navy: #0A1929;
    --color-text-primary: #1A1A1A;
    --color-text-secondary: #4A4A4A;
    --color-light: #FFFFFF;
    --color-border: #b3b3b3;
    --color-border-focus: #FF5C00;
    --color-background-card: #F9FAFB;
    --color-background-selected: rgba(var(--color-primary-rgb), 0.08);
    /* Focus styles */
    --focus-outline-width: 3px;
    --focus-outline-offset: 2px;
    --focus-box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.6);
    --focus-box-shadow-bootstrap: 0 0 0 0.15rem white, 0 0 0 0.35rem var(--color-border-focus);
    /* Selected/Checked state */
    --selected-border-width: 2px;
    --selected-border-color: var(--color-primary);
    --selected-box-shadow: var(--focus-box-shadow);
    /* Alerts */
    --color-alert-bg: #FEF3F2;
    --color-alert-border: #F97066;
    --color-alert-border: #B42318;
    --color-alert-text: #B42318;
    --color-info-bg: #EFF8FF;
    --color-info-border: #84CAFF;
    --color-info-text: #175CD3;
    --color-success-bg: #F0FDF4;
    --color-success-border: #22C55E;
    --color-success-text: #16A34A;
    /* Typography */
    --font-family-base: "Barlow Condensed", sans-serif;
    --font-family-heading: "Barlow Condensed", sans-serif;
    --font-size-xs: 0.8rem;
    --font-size-sm: 1rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.7rem;
    --font-size-xl: 2rem;
    --font-size-2xl: 3rem;
    --font-size-3xl: 4rem;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    /* Line heights */
    --line-height-body: 1.5;
    --line-height-heading: 1;
    /* Spacing */
    --space-2xs: 0.25rem; /* 8px */
    --space-xs: 0.5rem; /* 8px */
    --space-sm: 0.75rem; /* 12px */
    --space-md: 1rem; /* 16px */
    --space-lg: 1.5rem; /* 24px */
    --space-xl: 2rem; /* 32px */
    --space-2xl: 3rem; /* 48px */
    --space-3xl: 4rem; /* 64px */
    --space-4xl: 5rem; /* 64px */
    /* Border Radius */
    --radius-sm: 0.25rem; /* 4px */
    --radius-md: 0.5rem; /* 8px */
    --radius-lg: 1rem; /* 16px */
    --radius-xl: 1.5rem; /* 24px */
    /* Shadows */
    --shadow-xs: 0 1px 4px 0 rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
    --shadow-md: 0 6px 14px -2px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 12px 24px -4px rgba(0, 0, 0, 0.3);
    /* Transitions */
    --transition-fast: 150ms ease-in-out;
    --transition-base: 250ms ease-in-out;
    --transition-slow: 500ms ease-in-out;
    /* Breakpoints */
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
}

/* ============================================
   Reset & Base Styles
   ============================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

[hidden] {
    display: none !important;
}

button {
    border: none;
    outline: none;
    background: none;
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: var(--space-xs);
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-heading);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    word-break: break-word;
    hyphens: auto;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    line-height: var(--line-height-body);
    color: var(--color-text-primary);
    background-color: var(--color-light);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

button {
    font-family: inherit;
    cursor: pointer;
}

hr {
    border: none;
    height: 1px;
    background-color: var(--color-border);
    margin-bottom: 1.5rem;
}

/* ============================================
   Layout - Split Screen
   ============================================ */
.layout-split {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

@media (min-width: 768px) {
    .layout-split {
        flex-direction: row;
    }
}

/* ============================================
   Visual Panel - hidden on mobile)
   ============================================ */
.visual-panel {
    display: none;
    position: relative;
    overflow: hidden;
}

@media (min-width: 768px) {
    .visual-panel {
        display: block;
        width: 50%;
        min-height: 100vh;
    }
}

.visual-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("/images/pattern-dots.svg");
    background-repeat: repeat;
    background-size: cover;
    background-position: top right;
    pointer-events: none;
    z-index: 2;
    height: 100%;
    width: 100%;
}

.visual-panel__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

/* ============================================
   Auth Panel
   ============================================ */
.auth-panel {
    background-color: var(--color-primary);
    color: var(--color-light);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    flex: 1;
}

@media (min-width: 1024px) {
    .auth-panel {
        width: 50%;
        min-height: 100vh;
    }
}

.auth-panel__content {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    z-index: 2;
}

.auth-panel__brand {
    padding: var(--space-md);
}

@media (min-width: 768px) {
    .auth-panel__brand {
        padding: var(--space-2xl) var(--space-2xl) var(--space-xl);
    }
}

@media (min-width: 1024px) {
    .auth-panel__brand {
        padding: var(--space-2xl) var(--space-2xl) var(--space-xl);
    }
}

.auth-panel__logo {
    max-width: 16rem;
    width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;

    @media (min-width: 1024px) {
        max-width: 22rem;
    }
}

.auth-panel__container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 1rem;
    margin-right: 1rem;
    margin-bottom: 1.5rem;
}

.auth-panel__card {
    background-color: var(--color-background-card);
    border-radius: var(--radius-xl);
    padding: var(--space-md) var(--space-md);
    box-shadow: var(--shadow-md);
    width: 100%;
    max-width: 600px;
}

@media (min-width: 640px) {
    .auth-panel__card {
        padding: var(--space-lg);
    }
}

@media (min-width: 768px) {
    .auth-panel__card {
        padding: var(--space-2xl) var(--space-3xl);
    }
}

.auth-panel__footer {
    padding: var(--space-md);
    margin-top: auto;
    background-color: rgba(var(--color-text-primary-rgb), 0.1);
}

.auth-panel__nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-sm);
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xs);
}

@media (min-width: 768px) {
    .auth-panel__nav {
        font-size: var(--font-size-sm);
    }
}

.auth-panel__link {
    color: var(--color-light);
    text-decoration: none;
    transition: opacity var(--transition-fast);

    &:hover, &:focus {
        opacity: 0.8;
        text-decoration: underline;
    }

    &:focus-visible {
        outline: var(--focus-outline-width) solid var(--color-border-focus);
        outline-offset: var(--focus-outline-offset);
        border-radius: var(--radius-sm);
    }
}

.auth-panel__nav .auth-panel__link::after {
    content: "|";
    display: inline-block;
    margin: 0 var(--space-xs);
    color: var(--color-light);
    opacity: 0.6;
}

.auth-panel__nav .auth-panel__link:last-of-type::after {
    content: "";
}


.overview-panel__sticky,
.form-panel__sticky {
    position: sticky;
    top: 7rem;
    z-index: 1;
}

.auth-panel__header {
    margin-bottom: var(--space-md);
    text-align: center;
}

.panel__back {
    text-decoration: none;
    text-transform: uppercase;
    color: var(--color-text-primary);
    font-weight: var(--font-weight-semibold);
    margin-bottom: 0.5rem;

    @media (min-width: 768px) {
        margin-bottom: 2rem;
    }

    span {
        display: inline-block;
    }

    &:hover {
        text-decoration: underline;
    }
}

.contact-widget {
    text-align: center;
    margin-bottom: 1.5rem;

    @media (min-width: 768px) {
        text-align: left;
    }
}

.auth-panel__title {
    font-size: var(--font-size-xl);
    color: var(--color-text-primary);
}

@media (min-width: 768px) {
    .auth-panel__title {
        font-size: var(--font-size-2xl);
    }
}

.auth-panel__subtitle {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: var(--line-height-body);
    max-width: 48ch;
    margin: 0 auto;
}

/* ============================================
   Alert Component
   ============================================ */

.validation-summary-errors,
.field-validation-error,
.auth-panel__alert {
    display: flex;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background-color: var(--color-alert-bg);
    border: 1px solid var(--color-alert-border);
    border-radius: var(--radius-md);
    margin-top: var(--space-xs);
    margin-bottom: var(--space-lg);
    color: var(--color-alert-text);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-body);
    font-weight: 500;

    ul {
        margin: 0;
        padding-left: var(--space-md);
        list-style-position: outside;
    }

    li {
        margin-bottom: var(--space-2xs);
    }

    &[hidden] {
        display: none;
    }
}

.auth-panel__alert {
    a {
        text-decoration: underline;
        cursor: pointer;
        color: inherit;
    }
}

.auth-panel__alert-icon {
    flex-shrink: 0;
    color: var(--color-alert-text);
    margin-top: 2px;
}

.auth-panel__alert-content {
    flex: 1;
    font-size: var(--font-size-sm);
}

.auth-panel__alert-title {
    display: block;
    color: var(--color-alert-text);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-xs);
}

.auth-panel__alert-text {
    color: var(--color-alert-text);
    line-height: var(--line-height-body);
}

.auth-panel__success {
    display: flex;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background-color: var(--color-success-bg);
    border: 1px solid var(--color-success-border);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);

    a {
        color: inherit;
        text-decoration: underline;
        cursor: pointer;
    }
}

.auth-panel__success-icon {
    flex-shrink: 0;
    color: var(--color-success-text);
    margin-top: 2px;
}

.auth-panel__success-content {
    flex: 1;
    font-size: var(--font-size-sm);
}

.auth-panel__success-title {
    display: block;
    color: var(--color-success-text);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-xs);
}

    color: var(--color-success-text);
    line-height: var(--line-height-body);
}

.info-panel {
    display: flex;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background-color: var(--color-info-bg);
    border: 1px solid var(--color-info-border);
    border-radius: var(--radius-md);
    margin-top: var(--space-md);
    margin-bottom: var(--space-lg);
    color: var(--color-info-text);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-body);
    font-weight: 500;

    p {
        margin: 0;
    }

    &[hidden] {
        display: none;
    }
}

.loading-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-sm);
    color: var(--color-text-secondary);
}

.spinner {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 2px solid rgba(0, 0, 0, 0.15);
    border-top-color: var(--color-primary);
    animation: spinner-rotate 0.9s linear infinite;
    flex-shrink: 0;
}

@keyframes spinner-rotate {
    to {
        transform: rotate(360deg);
    }
}

/* ============================================
   Global Form Components
   ============================================ */
.form {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);

    @media (max-width: 768px) {
        gap: var(--space-sm);
    }
}

    .form-field {
        display: flex;
        flex-direction: column;
        gap: var(--space-xs);
    }

    .form-label-wrapper {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--space-xs);
        margin-bottom: 0.2rem;
    }

    .form-label {
        position: relative;
    }

    .form-label.required::after {
        content: "*";
        color: #B42318;
        font-weight: var(--font-weight-bold);
        font-size: 1.1em;
        margin-left: 0.25rem;
    }

    .char-counter {
        font-size: var(--font-size-sm);
        color: var(--color-text-secondary);
    }

    .form-helper {
        font-size: var(--font-size-sm);
        color: var(--color-text-secondary);
    }

    .form-error {
        font-size: var(--font-size-sm);
        color: var(--color-alert-text);
        display: none;

        &:not([hidden]) {
            display: block;
            margin-top: auto;
            margin-bottom: auto;
            font-weight: 500;
        }
    }

    .error-messages {
        display: none;
        padding: var(--space-md) var(--space-md);
        background-color: var(--color-alert-bg);
        border: 2px solid var(--color-alert-border);
        border-radius: var(--radius-md);
        margin-top: var(--space-md);
        margin-bottom: var(--space-md);
        color: var(--color-alert-text);
        font-size: var(--font-size-sm);
        font-weight: 500;
        line-height: var(--line-height-body);

        &:not([hidden]) {
            display: block;
        }

        ul {
            margin: 0;
            padding-left: var(--space-md);
            list-style-position: outside;
        }

        li {
            margin-bottom: var(--space-2xs);
        }
    }

    .form-input {
        width: 100%;
        padding: var(--space-md) var(--space-md);
        font-size: var(--font-size-sm);
        font-family: var(--font-family-base);
        color: var(--color-text-primary);
        background-color: var(--color-light);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-sm);
        transition: border-color var(--transition-fast), box-shadow var(--transition-fast);

        @media (max-width: 768px) {
            padding: var(--space-sm) var(--space-sm);
        }

        &::placeholder {
            color: var(--color-text-secondary);
            opacity: 0.7;
        }

        &:hover {
            border-color: var(--color-border-hover);
        }

        &:focus {
            outline: var(--focus-outline-width) solid var(--color-border-focus);
            outline-offset: var(--focus-outline-offset);
        }

        &:invalid:not(:placeholder-shown):focus,
        &.error {
            border-color: var(--color-alert-border);
        }
        /* Number input specific styles */
        &[type="number"] {
            -moz-appearance: textfield;

            &::-webkit-outer-spin-button, &::-webkit-inner-spin-button {
                -webkit-appearance: none;
                margin: 0;
            }
        }
        /* Password input specific styles */
        &[type="password"] {
            letter-spacing: 0.1em;
        }
        /* Disabled input styles */
        &:disabled {
            background-color: var(--color-background-disabled);
            color: var(--color-text-disabled);
            cursor: not-allowed;
            opacity: 0.7;

            &:hover {
                border-color: var(--color-border);
            }
        }
    }
    /* Form page */
    .form-section {
        display: flex;
        flex-direction: column-reverse;
        gap: 2rem;
        width: 100%;
    }

    @media (min-width: 1024px) {
        .form-section {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 3rem;
            margin-bottom: 2rem;
        }
    }

    .form-panel {
        display: flex;
        flex-direction: column;
        gap: var(--space-sm);
    }

    @media (min-width: 1024px) {
        .form-panel {
            gap: var(--space-2xl);
            flex-direction: row;
        }
    }

    .form-panel__header {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        gap: var(--space-sm);
    }

    .form-panel__title {
        font-size: var(--font-size-xl);
        color: var(--color-text-primary);
        align-self: flex-start;

        @media (min-width: 768px) {
            font-size: var(--font-size-2xl);
        }

        br {
            display: none;

            @media (min-width: 768px) {
                display: block;
            }
        }
    }

    @media (min-width: 1024px) {
        .form-panel__title {
            position: sticky;
            top: 7rem;
            z-index: 1;
        }
    }

    .form-panel__container {
        display: flex;
        flex-direction: column;
        flex: 1;
        gap: var(--space-lg);
    }

    .form-panel__content {
        display: flex;
        flex-direction: column;
        flex: 1;
        padding: var(--space-md);
        background-color: var(--color-light);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-sm);

        @media (min-width: 768px) {
            padding: var(--space-xl);
        }

        form > div {
            display: flex;
            flex-direction: column;
            gap: var(--space-lg);
        }

        .form-panel__divider {
            margin-bottom: 0;
        }
    }

    .form-panel__item {
        display: flex;
        flex-direction: column;
        gap: var(--space-2xs);

        &.multiple {
            flex-direction: column;
            gap: var(--space-md);
            align-items: flex-start;

            @media (min-width: 768px) {
                flex-direction: row;
            }

            .form-field {
                display: flex;
                flex-direction: column;
                gap: var(--space-xs);
                flex: 1;
                width: 100%;
            }
        }

        &.radio {
            display: grid;
            grid-template-columns: flex;
            flex-direction: row;
            gap: var(--space-xs);

            .form-input {
                width: auto;
            }

            .radio-item {
                display: flex;
                gap: var(--space-md);
            }

            .option-label {
                cursor: pointer;
                font-size: var(--font-size-sm);

                &:hover {
                    text-decoration: underline;
                }
            }
        }

        &.radio_tile {
            display: flex;
            flex-direction: column;
            gap: var(--space-xs);

            label .form-label {
                text-align: left;
            }

            .form-input {
                width: auto;
            }

            .radio-group {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: var(--space-md);

                @media (min-width: 768px) {
                    grid-template-columns: repeat(3, 1fr);
                }
            }

            .radio-item {
                display: flex;
                flex-direction: column;
                gap: var(--space-md);
                border: solid 1px var(--color-border);
                border-radius: var(--radius-sm);
                background-color: var(--color-light);
                transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, transform 0.2s ease, opacity 0.2s ease;

                &[hidden] {
                    display: none;
                }
                /* Fade out animation for hiding */
                &.fade-out {
                    opacity: 0;
                    transform: scale(0.95);
                    pointer-events: none;
                }

                .tile-label {
                    position: relative;
                    cursor: pointer;
                    width: 100%;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    flex-direction: column;
                    gap: var(--space-xs);
                    text-align: center;
                }

                label {
                    padding: var(--space-sm);
                }

                i {
                    display: block;
                    font-size: 1.5rem;
                }

                .tile-title {
                    font-size: var(--font-size-sm);
                    font-weight: var(--font-weight-semibold);
                    color: var(--color-text-default);
                    text-align: center;
                }

                .tile-description {
                    font-size: var(--font-size-sm);
                    font-weight: var(--font-weight-regular);
                    color: var(--color-text-muted);
                    text-align: center;
                    line-height: 1.2;
                }

                .form-input {
                    position: absolute;
                    inset: 0;
                    opacity: 0;
                    cursor: pointer;
                    pointer-events: auto;
                }

                &:has(.form-input:focus-visible) {
                    outline: var(--focus-outline-width) solid var(--color-border-focus);
                    outline-offset: var(--focus-outline-offset);
                }

                &:hover {
                    border-color: var(--color-border-hover);
                    transform: translateY(-1px);
                    text-decoration: none;
                }

                &:has(.form-input:checked) {
                    border-width: var(--selected-border-width);
                    border-color: var(--selected-border-color);
                    box-shadow: var(--selected-box-shadow);
                    background-color: var(--color-background-selected);
                    transform: scale(1.02);
                }

                &.error {
                    border-color: var(--color-alert-border);
                }

                .tile-label .form-input:checked ~ img,
                .tile-label .form-input:checked ~ span {
                    color: var(--color-text-primary);
                }

                img {
                    width: 3rem;
                }
            }
        }

        &.option_tile {
            &:focus,
            &:focus-visible {
                outline: none;
                border: none;
            }

            .radio-group {
                display: grid;
                grid-template-columns: repeat(1, 1fr);
                gap: 1rem;

                @media (min-width: 768px) {
                    grid-template-columns: repeat(3, 1fr);
                }
            }

            & .form-input {
                position: absolute;
                inset: 0;
                opacity: 0;
                cursor: pointer;
                pointer-events: auto;
            }

            &:has(.form-input:focus-visible) {
                outline: var(--focus-outline-width) solid var(--color-border-focus);
                outline-offset: var(--focus-outline-offset);
            }

            .radio-item {
                > label {
                    display: flex;
                    flex-direction: column;
                    border: solid 1px var(--color-border);
                    border-radius: var(--radius-sm);
                    background-color: var(--color-light);
                    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, transform 0.1s ease;
                    position: relative;
                    cursor: pointer;
                    width: 100%;
                    height: 100%;
                    align-items: center;
                    gap: var(--space-2xs);
                    text-align: center;
                    padding: var(--space-md);
                    color: var(--color-text-primary);

                    &:hover {
                        border-color: var(--color-border-hover);
                        transform: translateY(-1px);
                        text-decoration: none;
                    }

                    &:has(.form-input:checked) {
                        border-width: var(--selected-border-width);
                        border-color: var(--selected-border-color);
                        box-shadow: var(--selected-box-shadow);
                        background-color: var(--color-background-selected);
                        transform: scale(1.02);
                    }

                        &:has(.form-input:checked)::after {
                            content: "✓";
                            position: absolute;
                            top: 50%;
                            right: 0.3rem;
                            transform: translateY(-50%);
                            width: 1rem;
                            height: 1rem;
                            background-color: var(--color-primary);
                            color: white;
                            border-radius: 50%;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            font-size: 0.6rem;
                            font-weight: bold;
                            line-height: 1;
                        }

                        &:has(.form-input:checked) .tile-date,
                        &:has(.form-input:checked) .tile-time {
                            font-weight: var(--font-weight-bold);
                            color: var(--color-text-primary);
                        }

                    &:has(.form-input:focus-visible) {
                        outline: var(--focus-outline-width) solid var(--color-border-focus);
                        outline-offset: var(--focus-outline-offset);
                    }

                    &.error {
                        border-color: var(--color-alert-border);
                    }
                }
            }

            .tile-date {
                font-size: var(--font-size-sm);
                font-weight: var(--font-weight-semibold);
                color: var(--color-text-default);
                text-align: center;
                line-height: 1.2;
            }

            .tile-time {
                font-size: var(--font-size-sm);
                font-weight: var(--font-weight-regular);
                color: var(--color-text-muted);
                text-align: center;
                line-height: 1.2;
            }

            .sustainability-badge {
                display: inline-flex;
                align-items: center;
                gap: 0.25rem;
                padding: 0.25rem 0.5rem;
                background-color: #ECFDF3;
                color: #027A48;
                border-radius: var(--radius-sm);
                font-size: 0.75rem;
                font-weight: 600;
                align-self: center;

                svg {
                    flex-shrink: 0;
                }
            }

            .sustainable-option {
                .tile-label {
                    border-color: #6CE9A6;
                    background-color: #F6FEF9;
                }

                &:hover .tile-label {
                    border-color: #32D583;
                }

                &:has(.form-input:focus-visible) .tile-label {
                    border-color: #027A48;
                    box-shadow: 0 0 0 3px rgba(2, 122, 72, 0.2);
                }

                &:has(.form-input:checked) .tile-label {
                    border-width: var(--selected-border-width);
                    border-color: #027A48;
                    background-color: #ECFDF3;
                    box-shadow: 0 0 0 3px rgba(2, 122, 72, 0.15);
                }

                &:has(.form-input:checked):hover .tile-label {
                    border-color: #027A48;
                }
            }
        }

        &.checkbox {
            display: grid;
            grid-template-columns: flex;
            flex-direction: row;
            gap: var(--space-xs);

            .form-input {
                width: auto;
            }

            .checkbox-item {
                display: flex;
                gap: var(--space-md);

                .option-label {
                    font-size: var(--font-size-sm);
                    cursor: pointer;

                    &:hover {
                        text-decoration: underline;
                    }
                }
            }
        }

        &.select {
            select {
                font-family: var(--font-family-base);
                font-size: 0.9rem;
                width: 100%;
                padding: var(--space-sm) var(--space-md);
                color: var(--color-text-primary);
                background-color: var(--color-light);
                border: 1px solid var(--color-border);
                border-radius: var(--radius-sm);
                transition: border-color var(--transition-fast), box-shadow var(--transition-fast);

                &:focus {
                    outline: var(--focus-outline-width) solid var(--color-border-focus);
                    outline-offset: var(--focus-outline-offset);
                }

                &.error {
                    border-color: var(--color-alert-border);
                }
            }
        }

        &.button {
            display: flex;
            align-self: stretch;
            gap: 1rem;
            margin-top: 1.5rem;
            flex-direction: row;
            align-self: center;

            @media (min-width: 768px) {
                align-self: flex-start;
            }
        }

        &.textarea {
            textarea {
                min-height: 12rem;
            }
        }

        .form-label__wrapper {
            display: flex;
            flex-direction: column;
        }

        .form-label {
            font-size: var(--font-size-sm);
            color: var(--color-text-primary);
            font-weight: var(--font-weight-semibold);
        }

        .form-description {
            font-size: var(--font-size-sm);
            line-height: 1.3;
        }
    }
    /* ============================================
   Tile Reset Link
   ============================================ */
    .tile-reset-link {
        display: inline-block;
        margin-top: var(--space-sm);
        font-size: var(--font-size-sm);
        color: var(--color-primary);
        text-decoration: underline;
        cursor: pointer;
        transition: color var(--transition-fast);
    }

        .tile-reset-link[hidden] {
            display: none;
        }

    .radio-item[hidden] {
        display: none;
    }

    .form-panel__item[hidden] {
        display: none;
    }
    /* Form row wrapper for horizontal layout */
    .form-row {
        display: flex;
        gap: var(--space-md);
        align-items: stretch;

        @media (max-width: 768px) {
            flex-direction: column;
            gap: var(--space-sm);
        }
    }

        .form-row .form-panel__item {
            flex: 1;

            @media (max-width: 768px) {
                flex: none;
            }
        }
    /* Login options styling */
    .login-options {
        display: flex;
        flex-direction: column;
        gap: var(--space-md);
    }

    .login-options__list {
        display: flex;
        flex-direction: column;
        gap: var(--space-sm);
    }

    .login-option-card {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--space-md);
        background: var(--color-light);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        text-decoration: none;
        color: var(--color-text-primary);
        transition: all var(--transition-base);

        &:hover {
            border-color: var(--color-primary);
            box-shadow: var(--shadow-sm);
            transform: translateY(-2px);
        }

        &:focus-visible {
            outline: var(--focus-outline-width) solid var(--color-border-focus);
            outline-offset: var(--focus-outline-offset);
        }
    }

    .login-option-card__content {
        flex: 1;
    }

    .login-option-card__title {
        font-size: var(--font-size-lg);
        font-weight: var(--font-weight-semibold);
        margin: 0 0 var(--space-xs) 0;
        color: var(--color-text-primary);
    }

    .login-option-card__description {
        font-size: var(--font-size-sm);
        color: var(--color-text-secondary);
        margin: 0;
    }

    .login-option-card__arrow {
        color: var(--color-primary);
        transition: transform var(--transition-base);

        .login-option-card:hover & {
            transform: translateX(4px);
        }
    }
    /* Email sent message styling */
    .email-sent-message {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: var(--space-md);
    }

    .email-sent-message__icon {
        color: var(--color-primary);
        width: 100%;
        height: 100%;
        max-width: 6rem;
        max-height: 6rem;

        svg {
            width: 100%;
            height: 100%;
        }
    }

    .email-sent-message__text {
        font-size: var(--font-size-base);
        color: var(--color-text-primary);
        line-height: var(--line-height-body);
        margin: 0;
    }
    /* Tabs component */
    .tabs-wrapper {
        width: 100%;
    }

    .tabs {
        display: flex;
        gap: var(--space-xs);
        margin-bottom: var(--space-lg);
        border-bottom: 1px solid var(--color-border);
    }

    .tabs__item {
        padding: var(--space-sm) var(--space-md);
        font-size: var(--font-size-base);
        font-weight: var(--font-weight-medium);
        color: var(--color-text-secondary);
        text-decoration: none;
        border-bottom: 2px solid transparent;
        margin-bottom: -1px;
        transition: all var(--transition-base);

        &:hover {
            color: var(--color-primary);
        }
    }

    .tabs__item--active {
        color: var(--color-primary);
        font-weight: var(--font-weight-bold);
        border-bottom-color: var(--color-primary);
    }
    /* Secondary panel slide/fade animation */
    .form-panel__item.radio_tile {
        opacity: 1;
        transform: translateY(0);
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

        .form-panel__item.radio_tile.fade-in {
            animation: fadeSlideIn 0.3s ease forwards;
        }

    @keyframes fadeSlideIn {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .tile-reset-link:hover {
        color: var(--color-primary-dark);
    }
    /* ============================================
   Custom File Upload Component
   ============================================ */
    .file-upload {
        display: flex;
        flex-direction: column;
    }

    .file-upload__container {
        display: flex;
        flex-direction: column;
        gap: var(--space-xs);
        width: 100%;
        margin-bottom: 0.5rem;
    }

    .file-upload__wrapper {
        display: flex;
        gap: var(--space-xs);
        align-items: stretch;
        flex-direction: column;

        @media (min-width: 768px) {
            align-items: center;
            flex-direction: row;
        }
    }

    .file-upload__display {
        flex: 1;
        padding: var(--space-sm) var(--space-md);
        font-size: var(--font-size-sm);
        font-family: var(--font-family-base);
        color: var(--color-text-primary);
        background-color: var(--color-light);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-sm);
        cursor: default;

        &::placeholder {
            color: var(--color-text-secondary);
            opacity: 0.7;
        }
    }

    .file-upload__button {
        white-space: nowrap;
    }

    .file-upload__input {
        display: none;
    }

    .file-upload__list {
        display: flex;
        flex-direction: column;
        gap: var(--space-xs);
        margin-top: var(--space-sm);
    }

    .file-upload__item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--space-xs) var(--space-sm);
        background-color: var(--color-background-card);
        border-radius: var(--radius-sm);
        font-size: var(--font-size-sm);
    }

    .file-upload__item-name {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-word;
        padding-right: var(--space-sm);
    }

    .file-upload__item-size {
        color: var(--color-text-secondary);
        font-size: 0.85em;
        margin: 0 var(--space-sm);
        white-space: nowrap;
    }

    .file-upload__delete {
        background: none;
        border: none;
        color: var(--color-text-secondary);
        cursor: pointer;
        padding: var(--space-xs);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background-color var(--transition-fast), color var(--transition-fast);
        border: solid 1px var(--color-border);
        border-radius: var(--radius-sm);
    }

        .file-upload__delete:hover {
            background-color: var(--color-background-light-hover);
            color: var(--color-alert-text);
        }

        .file-upload__delete svg {
            width: 16px;
            height: 16px;
            display: block;
        }

    .file-upload__help {
        display: block;
        font-size: var(--font-size-sm);
        color: var(--color-text-secondary);
        text-align: right;
    }
    /* ============================================
   Global Form Notification Component
   ============================================ */
    .form-notification {
        display: flex;
        gap: var(--space-md);
        padding: var(--space-sm);
        background-color: var(--color-light);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        margin-bottom: var(--space-md);

        &[hidden] {
            display: none;
        }

        &--error {
            border-color: var(--color-alert-border);
            background-color: var(--color-alert-bg);
        }

        &--warning {
            border-color: var(--color-warning-border);
            background-color: var(--color-warning-bg);
        }

        &--success {
            border-color: var(--color-success-border);
            background-color: var(--color-success-bg);
        }

        &--info {
            border-color: var(--color-info-border);
            background-color: var(--color-info-bg);
        }
    }

    .form-notification__icon {
        flex-shrink: 0;
        margin-top: 2px;
        width: 2rem;
        height: 2rem;

        .form-notification--error & {
            color: var(--color-alert-text);
        }

        .form-notification--warning & {
            color: var(--color-warning-text, #D97706);
        }

        .form-notification--success & {
            color: var(--color-success-text, #16A34A);
        }

        .form-notification--info & {
            color: var(--color-info-text, #2563EB);
        }
    }

    .form-notification__content {
        flex: 1;
        font-size: var(--font-size-sm);
        gap: 0.5rem;
    }

    .form-notification__title {
        display: block;
        font-weight: var(--font-weight-semibold);
        color: var(--color-text-primary);
    }

    .form-notification__text {
        line-height: var(--line-height-body);
        color: var(--color-text-primary);
    }

    .field-validation-error {
        &:empty {
            display: none;
        }

        &.field-validation-valid {
            display: none;
        }
    }
    /* ============================================
   Auth Form Specific
   ============================================ */
    .auth-form {
        /* Auth-specific styles can go here if needed */
    }
    /* ============================================
   Button Components
   ============================================ */
    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: var(--space-md) var(--space-md);
        font-size: var(--font-size-base);
        font-weight: var(--font-weight-medium);
        font-family: inherit;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        text-decoration: none;
        border: none;
        cursor: pointer;
        transition: background-color var(--transition-fast), transform var(--transition-fast), color var(--transition-fast);

        &:focus-visible {
            outline: var(--focus-outline-width) solid var(--color-border-focus);
            outline-offset: var(--focus-outline-offset);
        }

        &:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }

        &.uppercase {
            text-transform: uppercase;
        }

        &.thin {
            padding: var(--space-sm) var(--space-md);
            font-size: var(--font-size-sm);
        }

        &.tiny {
            padding: var(--space-xs) var(--space-md);
            font-size: var(--font-size-xs);
        }
    }

    @media (min-width: 768px) {
        .btn {
            padding: var(--space-md) var(--space-lg);
            font-size: var(--font-size-sm);
        }
    }

    .btn_primary {
        background-color: rgba(var(--color-secondary), 1);
        color: var(--color-light);

        &:hover:not(:disabled) {
            background-color: var(--color-dark);
        }

        &:active:not(:disabled) {
            transform: translateY(1px);
        }
    }

    .btn_secondary {
        background-color: var(--color-primary);
        color: var(--color-light);

        &:hover:not(:disabled) {
            background-color: var(--color-primary);
            opacity: 0.9;
        }

        &:active:not(:disabled) {
            transform: translateY(1px);
        }
    }

    .btn_tertiary {
        background-color: transparent;
        color: var(--color-dark);
        border: none;

        &:hover:not(:disabled) {
            background-color: rgba(var(--color-text-primary-rgb), 0.05);
        }

        &:active:not(:disabled) {
            transform: translateY(1px);
        }
    }

    .btn_outline {
        background-color: transparent;
        color: var(--color-dark);
        border: 2px solid var(--color-dark);

        &:hover:not(:disabled) {
            background-color: var(--color-dark);
            color: var(--color-light);
        }

        &:active:not(:disabled) {
            transform: translateY(1px);
        }

        &.white {
            color: var(--color-light);
            background-color: transparent;
            border-color: var(--color-light);

            &:hover:not(:disabled) {
                background-color: var(--color-light);
                color: var(--color-primary);
                border-color: var(--color-light);
            }

            &:active:not(:disabled) {
                transform: translateY(1px);
                opacity: 0.8;
                outline-offset: 2px;
                outline: solid 2px var(--color-alert-outline);
            }
        }
    }

    .btn_block {
        width: 100%;
    }

    .btn_lg {
        padding: var(--space-lg) var(--space-xl);
        font-size: var(--font-size-lg);
    }

    .btn_sm {
        padding: var(--space-sm) var(--space-md);
        font-size: var(--font-size-sm);
    }

    .btn_xs {
        padding: var(--space-xs) var(--space-sm);
        font-size: var(--font-size-xs);
    }
    /* ============================================
   Focus Management & Accessibility
   ============================================ */
    :focus-visible,
    :focus {
        outline: var(--focus-outline-width) solid var(--color-border-focus);
        outline-offset: var(--focus-outline-offset);
    }
    /* Skip to main content link (for screen readers) */
    .skip-to-main {
        position: absolute;
        top: -100px;
        left: 0;
        background: var(--color-dark);
        color: var(--color-light);
        padding: var(--space-sm) var(--space-md);
        text-decoration: none;
        z-index: 9999;

        &:focus {
            top: 0;
        }
    }
    /* ============================================
   Welcome Page Layout
   ============================================ */
    /* Sticky / Fixed Navigation Bar over hero */
    .navbar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        padding: 0;
        z-index: 100;
        box-shadow: var(--shadow-sm);
        backdrop-filter: blur(5px);
        background-color: transparent;
        transition: background-color var(--transition-medium), color var(--transition-medium), backdrop-filter var(--transition-medium);

        &.navbar--scrolled {
            background-color: rgba(var(--color-primary-rgb), 0.9);
            color: var(--color-light);
        }
    }

    .navbar__container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: var(--space-md) var(--space-xs);
        margin: 0 auto;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .navbar__brand {
        display: flex;
        align-items: center;
        gap: var(--space-md);
    }

    .navbar__tagline {
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-medium);
        display: none;
    }

    @media (min-width: 640px) {
        .navbar__tagline {
            display: block;
        }
    }

    .navbar__logo {
        height: 2.5rem;
        width: auto;
    }

    @media (min-width: 768px) {
        .navbar__logo {
            height: 3rem;
        }
    }

    .navbar__logout {
        font-size: var(--font-size-sm);
        padding: var(--space-sm) var(--space-md);
        min-width: 0;
    }

    @media (min-width: 768px) {
        .navbar__logout {
            min-width: 10rem;
        }
    }
    /* Notification on welcome screen */
    .notification-bar {
        margin-bottom: 2rem;
        background-color: white;
        padding: 1rem;
        width: 100%;
        text-align: center;
        box-shadow: var(--shadow-sm);
        border-radius: var(--radius-md);

        h2 {
            font-size: 1rem;
            font-weight: 400;
            text-transform: none;
            line-height: 1.3;
            margin-bottom: 0;
        }

        a {
            color: inherit;
        }
    }
    /* Hero Section */
    .hero {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--color-primary);
        background-image: url('/images/welcome-hero.jpg');
        background-size: cover;
        background-position: center;
        overflow: hidden;
        /* compensate for fixed navbar height so content is not hidden */
        padding-top: 4.5rem;

        &::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(var(--color-primary-rgb), 0.95);
            mix-blend-mode: multiply;
            z-index: 1;
        }
    }

    @media (min-width: 768px) {
        .hero {
            min-height: 18rem;
            padding-top: 7rem; /* taller navbar + logo on larger screens */
        }
    }

    .hero__content {
        position: relative;
        z-index: 2;
        background-color: rgba(var(--color-secondary), 0.9);
        color: var(--color-light);
        padding: var(--space-sm) var(--space-sm);
        text-align: center;
        margin: 0 var(--space-md);
        margin-top: 1rem;
        margin-bottom: 1rem;

        @media (min-width: 768px) {
            padding: var(--space-lg) var(--space-xl);
            margin: 0;
        }
    }

    .hero__title {
        font-size: var(--font-size-xl);
        margin-bottom: 0;
    }

    @media (min-width: 768px) {
        .hero__title {
            font-size: var(--font-size-2xl);
        }
    }

    @media (min-width: 1024px) {
        .hero__title {
            font-size: var(--font-size-2xl);
        }
    }

    .hero__subtitle {
        font-size: var(--font-size-sm);
        opacity: 0.95;
    }

    @media (min-width: 768px) {
        .hero__subtitle {
            font-size: var(--font-size-md);
        }
    }

    .action-title {
        display: flex;
        flex-direction: column;
        width: 100%;
        align-items: center;
        margin-bottom: var(--space-lg);

        h2 {
            font-size: var(--font-size-2xl);
            font-weight: var(--font-weight-semibold);
            color: var(--color-text-primary);
            text-transform: uppercase;

            @media (min-width: 768px) {
                font-size: var(--font-size-3xl);
            }
        }
    }
    /* Main Container */
    .main-container {
        background-color: var(--color-background-card);
        padding: var(--space-sm);
        padding-top: 0;
        padding-bottom: 0;
        flex: 1;

        @media (min-width: 768px) {
            padding-left: var(--space-md);
            padding-right: var(--space-md);
        }

        @media (min-width: 1024px) {
            padding-left: var(--space-xl);
            padding-right: var(--space-xl);
        }

        @media (min-width: 1240px) {
            padding-left: var(--space-2xl);
            padding-right: var(--space-2xl);
        }
    }

    .content-wrapper {
        max-width: 1400px;
        margin: 0 auto;
        margin-bottom: var(--space-xl);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: var(--color-background-card);
        box-shadow: var(--shadow-md);
        padding: var(--space-sm);
        border-bottom-left-radius: var(--radius-md);
        border-bottom-right-radius: var(--radius-md);

        @media (min-width: 768px) {
            padding: var(--space-xl);
        }

        @media (min-width: 1024px) {
            padding: var(--space-2xl);
        }
    }
    /* Notice block */
    .notice-block {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-bottom: 3rem;
        background-color: var(--color-light);
        padding: var(--space-xl) var(--space-lg);
        box-shadow: var(--shadow-sm);
        width: fit-content;

        h2 {
            font-size: var(--font-size-xl);
            font-weight: var(--font-weight-semibold);
            color: var(--color-text-primary);
            line-height: var(--line-height-body);
        }
    }
    /* Action Cards Grid */
    .action-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        gap: var(--space-sm);
        margin-bottom: var(--space-xl);

        @media (min-width: 420px) {
            gap: var(--space-md);
        }

        @media (min-width: 768px) {
            gap: var(--space-lg);
            margin-bottom: var(--space-3xl);
        }
    }

    .action-card {
        background-color: var(--color-light);
        text-align: center;
        display: flex;
        flex-wrap: nowrap;
        flex-direction: column;
        align-items: center;
        gap: var(--space-sm);
        box-shadow: var(--shadow-sm);
        transition: transform var(--transition-fast), box-shadow var(--transition-fast);
        border-radius: var(--radius-md);
        gap: 1.5rem;
        width: 100%;

        @media (min-width: 420px) {
            flex: 0 1 calc(50% - var(--gap) / 2);
            width: calc(100% / 2 - 1.5rem);
        }

        @media (min-width: 1024px) {
            max-width: 20rem;
        }

        &:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-lg);
        }
    }

    .action-card__link {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
        padding: var(--space-md) var(--space-md);
        gap: var(--space-sm);
        width: 100%;
        height: 100%;
        text-decoration: none;
        color: inherit;
        border-radius: var(--radius-md);

        @media (min-width: 1400px) {
            gap: var(--space-lg);
        }
    }

    .action-card__icon {
        color: var(--color-dark);
        display: flex;
        align-items: center;
        justify-content: center;
        width: 5rem;
        height: 5rem;

        @media (min-width: 768px) {
            width: 7rem;
            height: 7rem;
        }
    }

        .action-card__icon svg {
            width: 100%;
            height: 100%;
        }

    .action-card__title {
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-semibold);
        color: var(--color-text-primary);
        line-height: var(--line-height-body);
        word-break: auto-phrase;
    }

    .action-card__button {
        margin-top: auto;
        width: 100%;
        font-size: var(--font-size-xs);
        font-weight: var(--font-weight-medium);

        @media (min-width: 768px) {
            font-size: var(--font-size-sm);
        }
    }
    /* When any card is hovered or focused, dim the others */
    .action-grid:has(.action-card__link:hover),
    .action-grid:has(.action-card__link:focus-visible) {
        .action-card {
            opacity: 0.5;
            transition: opacity var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
        }

            .action-card:has(.action-card__link:hover),
            .action-card:has(.action-card__link:focus-visible) {
                opacity: 1;
            }
    }
    /* Compact Action Section for Admin/Beheerder (side-by-side like other blocks) */
    .action-section-compact {
        display: flex;
        flex-direction: column;
        gap: var(--space-lg);
        margin-bottom: var(--space-xl);
        width: 100%;

        @media (min-width: 768px) {
            flex-direction: row;
            font-size: var(--font-size-sm);
        }
    }

    .action-section-compact__title {
        font-size: var(--font-size-xl);
        white-space: nowrap;
        letter-spacing: -0.02em;
        align-self: flex-start;
        min-width: 6rem;

        @media (min-width: 768px) {
            font-size: var(--font-size-2xl);
        }
    }

    .action-section-compact__content {
        flex: 1;
        display: flex;
        justify-content: flex-start;
        flex-direction: column;
        gap: 1.5rem;

        @media (min-width: 768px) {
            flex-direction: row;
        }
    }

    .action-section-compact .action-card {
        flex: 1;
        width: 100%;
        max-width: none;
        align-self: flex-start;
        flex-direction: column;

        @media (min-width: 768px) {
            flex-direction: row;
            flex-basis: 30%;
        }
    }

    .action-section-compact .action-card__link {
        display: flex;
        flex-direction: column;
        padding: var(--space-sm) var(--space-sm);
        gap: var(--space-md);

        @media (min-width: 768px) {
            flex-direction: row;
        }
    }

    .action-section-compact .action-card__icon {
        width: 2.5rem;
        height: 2.5rem;
    }

    .action-section-compact .action-card__title {
        font-size: var(--font-size-xs);
        flex: 1;
        margin-bottom: 0;
    }

    .action-section-compact .action-card__button {
        font-size: var(--font-size-xs);
        margin-top: 0;

        @media (min-width: 768px) {
            max-width: 10rem;
        }
    }
    /* Updates Section */
    .updates-section {
        display: grid;
        grid-template-columns: 1fr;
        gap: 4rem;
        margin-bottom: 2rem;
        width: 100%;

        @media (min-width: 1024px) {
            grid-template-columns: 2fr 1fr;
        }

        .address-panel {
            align-self: stretch;
        }

        .address-panel__content {
            align-self: stretch;
        }
    }

    .update-panel {
        display: flex;
        gap: var(--space-md);
        flex-direction: column;

        @media (min-width: 768px) {
            flex-direction: row;
            gap: var(--space-2xl);
        }
    }


    .update-panel__title {
        font-size: var(--font-size-xl);
        letter-spacing: -0.02em;
        flex: 1;

        @media (min-width: 768px) {
            flex: initial;
            font-size: var(--font-size-2xl);
        }

        br {
            display: none;

            @media (min-width: 768px) {
                display: inline-block;
            }
        }
    }

    .update-panel__content {
        display: flex;
        flex-direction: column;
        flex: 2;
        gap: 1rem;
    }

    .update-item {
        display: flex;
        flex: 1;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
        max-height: none;
        gap: var(--space-md);
        border-radius: var(--radius-sm);
        background: var(--color-light);
        padding-left: 1rem;
        padding-right: 1rem;
        padding-top: 0.4rem;
        padding-bottom: 0.4rem;
        border-radius: var(--radius-md);
        text-decoration: none;
        box-shadow: var(--shadow-sm);
        transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;

        @media (min-width: 768px) {
            max-height: 50%;
            padding-left: 2rem;
            padding-right: 2rem;
            gap: var(--space-lg);
            flex-direction: row;
        }

        &:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow-lg);
        }

        .update-item__label {
            font-size: var(--font-size-xs);
            font-weight: var(--font-weight-bold);
            color: var(--color-text-primary);
            border-radius: var(--radius-sm);
            text-transform: uppercase;
            display: flex;
            align-self: center;
        }

        .update-item__text {
            font-size: var(--font-size-sm);
            line-height: 1.3;
            color: var(--color-text-primary);
            flex: 1;
            min-width: 0;
            align-self: stretch;
            text-align: left;
            display: flex;
            flex-direction: column;
            gap: 0.15rem;
        }

        .update-item__description {
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            word-break: break-word;
        }

        .update-item__aside {
            display: grid;
            flex-basis: initial;
            gap: 0.3rem;
            max-width: 8rem;

            @media (min-width: 768px) {
                flex-basis: 8rem;
            }
        }

        .update-item__status {
            font-size: var(--font-size-xs);
            text-align: center;
            padding: 0.2rem;
            background-color: rgba(var(--color-secondary), 1);
            color: var(--color-light);
            border-radius: var(--radius-md);
            align-self: flex-start;

            &.state__completed {
                background-color: green;
            }

            &.outdated {
                background-color: transparent;
                border: solid 1px rgba(var(--color-secondary), 0.8);
                color: rgba(var(--color-secondary), 0.8);
            }
        }


        .update-item__date {
            font-size: var(--font-size-xs);
            text-align: center;
            color: var(--color-text-primary);
            line-height: 1;
        }

        .update-item__time {
            font-size: var(--font-size-xs);
        }

        .overview-item__meta {
            white-space: nowrap;
            text-overflow: ellipsis;
            text-align: center;
            overflow: hidden;
            font-size: var(--font-size-xs);
            color: var(--color-primary-dark);
        }

        .update-item__icon {
            font-size: var(--font-size-xl);
            display: flex;
            align-self: center;
            flex-shrink: 0;

            img {
                width: 1.5rem;

                @media (min-width: 768px) {
                    width: 2rem;
                }
            }
        }
    }
    /* Choice step */
    .choice-step {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;

        .button-bar {
            display: flex;
            flex-direction: column;
            gap: 2rem;

            @media (min-width: 768px) {
                flex-direction: row;
            }
        }
    }
    /* Address Panel */
    .side-panel__wrapper {
        .sticky__wrapper {
            display: flex;
            flex-direction: column;
            gap: 2rem;

            @media (min-width: 768px) {
                position: sticky;
                top: 7rem;
                z-index: 1;
            }

            a {
                color: inherit;

                &:hover {
                    text-decoration: none;
                }
            }
        }
    }

    .address-panel {
        display: flex;
        gap: var(--space-sm);
        flex-direction: column;
        align-self: stretch;
        width: 100%;
        justify-content: space-around;

        @media (min-width: 768px) {
            justify-content: space-between;
            gap: var(--space-xl);
            flex-direction: row;
            align-self: flex-start;
        }
    }

    .address-panel__title {
        font-size: var(--font-size-xl);
        white-space: nowrap;
        letter-spacing: -0.02em;
        align-self: flex-start;
        flex: 1;
        width: 40%;

        @media (min-width: 768px) {
            position: sticky;
            top: 7rem;
            z-index: 1;
            flex: initial;
            font-size: var(--font-size-2xl);
        }

        br {
            display: none;

            @media (min-width: 768px) {
                display: inline-block;
            }
        }
    }

    .address-panel__content {
        flex: 1;
        display: flex;
        align-items: center;
        align-self: stretch;
        flex-direction: column;
        gap: 1.5rem;
        min-width: 12rem;
        position: sticky;
        top: 1rem;

        @media (min-width: 768px) {
            align-self: flex-start;
        }

        .filter-panel__wrapper {
            position: sticky;
            top: 7rem;
            gap: 1rem;
            display: grid;
            gap: 1.5rem;
            width: 100%;

            @media (min-width: 768px) {
                align-self: flex-start;
            }
        }

        .form-panel__item {
            width: 100%;
        }
    }

    .address-panel__item {
        display: flex;
        flex-direction: column;
        background: var(--color-light);
        box-shadow: var(--shadow-sm);
        border-radius: var(--radius-md);
        padding: var(--space-md) var(--space-lg);
        flex: 1;
        align-self: stretch;
        width: 100%;

        @media (min-width: 768px) {
            position: sticky;
            top: 7rem;
            z-index: 1;
            align-self: flex-start;
        }
    }

    .address-panel__label {
        font-size: var(--font-size-xs);
        font-weight: var(--font-weight-bold);
        color: var(--color-text-secondary);
        text-transform: uppercase;
    }

    .address-panel__text {
        font-size: var(--font-size-sm);
        line-height: var(--line-height-body);
        color: var(--color-text-primary);
        margin-bottom: 0.5rem;
    }
    /* Filter Form within Address Panel */
    .filter-form {
        display: flex;
        flex-direction: column;
        gap: var(--space-md);
        width: 100%;

        .address-panel {
            height: 100%;
            align-self: stretch;
            position: relative;
        }

        .address-panel__content {
            top: 7rem;
        }
    }


        .filter-form .form-panel__item {
            margin-bottom: 0;
        }

        .filter-form .radio-group {
            display: flex;
            flex-direction: column;
            gap: var(--space-xs);
        }

        .filter-form .radio-label {
            display: flex;
            align-items: center;
            gap: var(--space-xs);
            cursor: pointer;
            font-size: var(--font-size-sm);
        }

            .filter-form .radio-label input[type="radio"] {
                accent-color: var(--color-primary);
            }

        .filter-form .checkbox-group {
            display: flex;
            flex-direction: column;
            gap: var(--space-xs);
        }

        .filter-form .checkbox-label {
            display: flex;
            align-items: center;
            gap: var(--space-xs);
            cursor: pointer;
            font-size: var(--font-size-sm);
        }

            .filter-form .checkbox-label input[type="checkbox"] {
                accent-color: var(--color-primary);
            }

        .filter-form .filter-collapsible {
            width: 100%;
        }

        .filter-form .filter-collapsible__summary {
            list-style: none;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--space-sm);
            cursor: pointer;
        }

            .filter-form .filter-collapsible__summary::-webkit-details-marker {
                display: none;
            }

            .filter-form .filter-collapsible__summary::after {
                content: "▾";
                font-size: var(--font-size-lg);
                line-height: 1;
                transition: transform 0.15s ease-in-out;
            }

        .filter-form .filter-collapsible[open] > .filter-collapsible__summary::after {
            transform: rotate(180deg);
        }

        .filter-form .filter-collapsible .checkbox-group {
            margin-top: var(--space-xs);
        }
    /* Footer Bar */
    .footer-bar {
        background-color: var(--color-background-card);
        padding: var(--space-lg) var(--space-md);
    }

    .footer-bar__nav {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-xs) var(--space-sm);
        align-items: center;
        justify-content: center;
        font-size: var(--font-size-xs);
        max-width: 1200px;
        margin: 0 auto;

        @media (min-width: 768px) {
            font-size: var(--font-size-sm);
        }
    }

    .footer-bar__link {
        color: var(--color-text-secondary);
        text-decoration: none;
        transition: color var(--transition-fast);

        &:last-of-type {
            &::after {
                display: none;
            }
        }
    }

        .footer-bar__link:hover,
        .footer-bar__link:focus {
            color: var(--color-primary);
            text-decoration: underline;
        }

        .footer-bar__link:focus-visible {
            outline: var(--focus-outline-width) solid var(--color-border-focus);
            outline-offset: var(--focus-outline-offset);
            border-radius: var(--radius-sm);
        }

    .footer-bar__nav .footer-bar__link::after {
        content: "|";
        display: inline-block;
        margin-left: var(--space-xs);
        margin-right: 0;
        color: var(--color-text-secondary);
        opacity: 0.5;
    }

    .footer-bar__nav .footer-bar__link:last-of-type::after {
        display: none;
    }
    /* Overview panel */
    .overview-section {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        width: 100%;
    }

    @media (min-width: 1024px) {
        .overview-section {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 4rem;
            margin-bottom: 2rem;
        }
    }

    .overview-panel {
        display: flex;
        flex-direction: column;
        gap: var(--space-sm);

        @media (min-width: 1024px) {
            gap: var(--space-xl);
            flex-direction: row;
        }
    }

    .overview-panel__header {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        gap: var(--space-sm);
        min-width: none;
        max-width: 100%;

        @media (min-width: 768px) {
            min-width: 11rem;
            max-width: 11rem;
        }

        @media (min-width: 1024px) {
            min-width: 14rem;
            max-width: 14rem;
        }
    }

    .overview-panel__title {
        font-size: var(--font-size-xl);
        color: var(--color-text-primary);
        align-self: flex-start;

        @media (min-width: 1024px) {
            position: sticky;
            top: 7rem;
            z-index: 1;
            font-size: var(--font-size-2xl);
        }

        br {
            display: none;

            @media (min-width: 768px) {
                display: inline-block;
            }
        }
    }

    .overview-panel__container {
        display: flex;
        flex-direction: column;
        flex: 1;
        gap: var(--space-lg);
    }

    .overview-panel__content {
        display: flex;
        flex-direction: column;
        flex: 1;
        gap: var(--space-xl);
    }
    /* Overview list */
    .overview-list {
        display: grid;
        gap: 1rem;
        list-style: none;
        padding: 0;
        margin: 0;

        &.details {
            .overview-list__item {
                &.latest {
                    padding-bottom: 2rem;
                    border-bottom: solid 1px var(--color-border);

                    .overview-item {
                        background-color: rgba(var(--color-secondary), 1);
                        color: var(--color-light);
                    }

                    .overview-item__info {
                        color: inherit;
                    }

                    h3 {
                        color: inherit;
                    }

                    .overview-item__status {
                        background: var(--color-light);
                        color: var(--color-text-secondary);
                        border-color: rgba(var(--color-secondary), 1);
                    }
                }
            }
        }
    }
    /* Overview item */
    .overview-item {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 1rem;
        padding-top: 0.7rem;
        padding-bottom: 0.7rem;
        gap: var(--space-md);
        background-color: var(--color-light);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-sm);
        text-decoration: none;
        color: rgba(var(--color-secondary), 1);
        transition: 0.15s background-color ease-in-out, 0.15s transform ease-in-out, 0.15s box-shadow ease-in-out;

        .overview-item__info {
            display: flex;
            gap: 1rem;
            flex: 1;
                    flex-direction: column;
        flex-wrap: wrap;
        }

        .overview-item__aside {
            display: grid;
            flex-basis: initial;
            gap: 0.1rem;

            @media (min-width: 768px) {
                flex-basis: 8rem;
            }
        }

        .overview-item__id {
            font-size: var(--font-size-xs);
            font-weight: var(--font-weight-bold);
            color: var(--color-text-primary);
            text-transform: none;
        }

        .overview-item__date {
            font-size: var(--font-size-xs);
            font-weight: var(--font-weight-bold);
            color: var(--color-text-primary);
            text-transform: none;
            width: max-content;
        }

        .overview-item__title {
            font-size: var(--font-size-sm);
            font-weight: var(--font-weight-normal);
            line-height: var(--line-height-heading);
            color: var(--color-text-primary);
            text-transform: none;
            margin-bottom: 0;
        }

        .overview-item__status {
            font-size: var(--font-size-xs);
            text-align: center;
            padding: 0.2rem;
            background-color: rgba(var(--color-secondary), 1);
            color: var(--color-light);
            border-radius: var(--radius-md);
            align-self: flex-start;

            &.state__completed {
                background-color: green;
            }

            &.outdated {
                background-color: transparent;
                border: solid 1px rgba(var(--color-secondary), 0.8);
                color: rgba(var(--color-secondary), 0.8);
            }
        }

        .overview-item__address {
            font-size: var(--font-size-xs);
            text-align: center;
            color: inherit;
        }

        .overview-item__meta {
            white-space: nowrap;
            text-overflow: ellipsis;
            text-align: center;
            overflow: hidden;
            font-size: var(--font-size-xs);
        }
    }

    @media (min-width: 768px) {
        .overview-item__status {
            align-self: center;
        }
    }

    @media (min-width: 768px) {
        .overview-item {
            flex-direction: row;
        }
    }


    a.overview-item {
        &:hover {
            background-color: var(--color-background-light-hover);
            transform: translateY(-3px);
            box-shadow: var(--shadow-lg);
        }
    }
    /* Paging */
    .paging-dots__container {
        display: flex;
        justify-content: center;
    }

    .paging-dots {
        display: flex;
        gap: var(--space-xs);
        list-style: none;
        margin: 0;
        padding: 0.3rem;
        border: solid 1px var(--color-border);
        border-radius: 20rem;
        box-shadow: var(--shadow-xs);
        align-items: center;
    }

    .paging-dots__item {
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .paging-dots__item a {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0.2rem;
            border-radius: 999px;
            border: 1px solid var(--color-border);
            aspect-ratio: 1 / 1;
            width: 2rem;
            height: 2rem;
            background-color: var(--color-background-card);
            color: var(--color-text-primary);
            font-size: var(--font-size-sm);
            text-decoration: none;
            transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
        }

            .paging-dots__item a:hover {
                background-color: rgba(var(--color-secondary), 1);
                border-color: rgba(var(--color-secondary), 1);
                color: var(--color-light);
            }

    .paging-dots__item_active a {
        background-color: rgba(var(--color-secondary), 1);
        border-color: rgba(var(--color-secondary), 1);
        color: var(--color-light);
        font-weight: var(--font-weight-semibold);
    }

    .paging-dots__item_previous a,
    .paging-dots__item_next a {
        aspect-ratio: auto;
        width: auto;
        padding-inline: 0.8rem;
        border-radius: 999px;
    }
    /* Project-details */
    .project-details-wrapper {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        background-color: var(--color-light);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-sm);
        padding: var(--space-md) var(--space-lg);
        width: 100%;
    }

    .project-details {
        .project-details__status {
            font-size: var(--font-size-sm);
            text-align: center;
            padding: 0.2rem;
            padding-left: 0.5rem;
            padding-right: 0.5rem;
            background-color: rgba(var(--color-secondary), 1);
            color: var(--color-light);
            border-radius: var(--radius-md);
            align-self: flex-start;

            &.state__completed {
                background-color: green;
            }

            &.outdated {
                background-color: transparent;
                border: solid 1px rgba(var(--color-secondary), 0.8);
                color: rgba(var(--color-secondary), 0.8);
            }
        }
    }

    .project-description {
        margin-bottom: 1rem;
    }

    .project-details__id {
        margin-bottom: 0.5rem;
    }

    .project-statuses {
        table {
            width: 100%;
            border-collapse: collapse;
        }

        th {
            text-align: left;
            text-transform: uppercase;
            padding: 8px;
            border-bottom: 2px solid #e0e0e0;
        }

        td {
            padding: 8px;
            border-bottom: 1px solid #f0f0f0;
        }

        tbody tr:nth-child(odd) {
            background-color: #f8f9fa;
        }

        tbody tr:nth-child(even) {
            background-color: #ffffff;
        }

        tbody tr:hover {
            background-color: #f1f3f5;
        }
    }
    /* First Login Huurder */
    #firstlogin {
        margin-bottom: 1rem;
        color: black;

        .row {
            display: flex;
            padding-bottom: 5px;
        }

        .label {
            font-weight: var(--font-weight-semibold);
        }

        .description {
            margin-top: 0.5rem;
            font-style: italic;
        }

        .column {
            flex: 50%;
        }
    }
    /* Login token screen */
    .login-token {
        margin-top: 1rem;
    }

    .appointment-list {
        margin-bottom: 1.5rem;
    }

    .proposed-dates:not([hidden]) + #custom-date-picker {
        border-top: 1px solid var(--color-border);
        padding-top: 1.5rem;
    }

    .custom-date-picker-wrapper {
        display: flex;
        flex-direction: column;
        gap: var(--space-2xs);
        margin-bottom: var(--space-lg);

        .custom-date-label {
            margin-bottom: 0.5rem;
        }

        .custom-date-wrapper {
            display: flex;
            flex-direction: column;
            gap: 0.3rem;

            .invalid {
                border: 2px solid var(--color-alert-border);
                color: var(--color-alert-text);
                font-weight: 500;
                background-color: var(--color-alert-bg);
            }
        }

        .radio-item > label:has(.form-input:checked)::after {
            content: "✓";
            position: absolute;
            top: 50%;
            right: 0.5rem;
            transform: translateY(-50%);
            width: 1.25rem;
            height: 1.25rem;
            background-color: var(--color-primary);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.875rem;
            font-weight: bold;
            line-height: 1;
        }

        input[type=date] {
            margin-bottom: 1.5rem;
            width: 100%;
            align-self: flex-start;
            padding: var(--space-sm) var(--space-md);
            font-size: var(--font-size-sm);
            font-family: var(--font-family-base);
            color: var(--color-text-primary);
            background-color: var(--color-light);
            border: 1px solid var(--color-border);
            border-radius: var(--radius-sm);

            @media (min-width: 768px) {
                width: auto;
            }

            &:focus {
                outline: var(--focus-outline-width) solid var(--color-border-focus);
                outline-offset: var(--focus-outline-offset);
            }

            &.error {
                border-color: var(--color-alert-border);
            }
        }
    }

    .show-more-appointments-panel {
        margin-top: 0;
    }
    /* Create confirm */
    .create_confirm__text {
        a {
            color: inherit;
        }
    }

    /* Emergency number form */
    .finder-container {
        display: flex;
        flex-direction: column;
        color: black;

        &.desktop {
            display: none;

            @media (min-width: 768px) {
                border: solid 2px white;
                border-radius: var(--radius-md);
                display: flex;
                background-color: rgba(255, 255, 255, 0.9);
                backdrop-filter: blur(10px);
                padding: 0.8rem;
                position: absolute;
                bottom: 2rem;
                right: 2rem;
                z-index: 10;
            }
        }

        &.mobile {
            display: none;

            @media (max-width: 768px) {
                padding-top: 1.5rem;
                border-top: solid 1px gray;
                border-radius: 0;
                display: flex;
                margin-top: 1.5rem;
            }
        }

        h2 {
            font-size: 1.3rem;
            text-align: left;

            @media (max-width: 768px) {
                text-align: center;
            }
        }

        form {
            display: flex;
            flex-direction: column;
            font-size: 1rem;
            gap: 0;
        }

        .form-row {
            margin-bottom: 0.7rem;
        }

        label {
            font-weight: 600;

            @media (min-width: 768px) {
                font-size: 0.9rem;
            }
        }

        input {
            @media (min-width: 768px) {
                padding-top: 0.4rem;
                padding-bottom: 0.4rem;
                padding-left: 0.7rem;
                padding-right: 0.7rem;
                font-family: inherit;
                font-size: inherit;
            }
        }

        .btn {
            align-self: center;

            @media (min-width: 768px) {
                padding-top: 0.5rem;
                padding-bottom: 0.5rem;
                align-self: flex-start;
                font-size: 0.9rem;
            }
        }

        .form-result {
            display: flex;
            gap: 0.3rem;
        }

        .error-message {
            display: none;
            margin-bottom: 0.7rem;
            font-weight: 500;
        }
    }