/* input(220,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(280,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(323,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@media'
input(420,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@media'
input(449,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@media'
input(501,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@media'
input(526,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(554,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(596,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(734,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@media'
input(743,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(775,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(807,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(827,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(907,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@media'
input(928,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@media'
input(963,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(994,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(1005,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(1032,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@media'
input(1057,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(1101,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(1143,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@container'
input(1155,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@media'
input(1235,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@media'
input(1249,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(1271,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(1311,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(1358,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(1427,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@media'
input(1443,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@media'
input(1467,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(1506,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@media'
input(1518,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@media'
input(1531,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@media'
input(1545,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@media'
input(1558,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@container'
input(1582,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@media'
input(1611,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@media'
input(1641,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(1670,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(1682,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(1764,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@media'
input(1778,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@media'
input(1790,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(1805,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@media'
input(1833,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@media'
input(1842,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(1854,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(1893,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@media'
input(1906,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@media'
input(1915,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(1928,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '@media'
input(1952,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&'
input(1977,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '&' */
:root {
    --color-madx-sun: #fbef4d;
    --color-madx-sun-dark2: #928900;
    --color-madx-sun-dark: #b9b24d;
    --color-madx-leaf: #695d15;
    --color-madx-blue: #15444f;
    --color-madx-green: #7abf80;

    --color-madx-raspberry: #ea4b6f;
    --color-error: #ea4b6f;

    --color-madx-night: #111c24;
    --color-madx-shadow: #313b3e;

    --color-madx-stone: #898d8d;
    --color-madx-dust: #d3d3d3;
    --color-madx-lightgrey: #d0d5dd;
    --color-madx-grey: #f2f4f7;

    /* Tailwind's default gray/red palette, used directly by a few views */
    --color-gray-50: #f9fafb;
    --color-gray-100: #f3f4f6;
    --color-gray-200: #e5e7eb;
    --color-gray-300: #d1d5db;
    --color-gray-400: #9ca3af;
    --color-gray-500: #6b7280;
    --color-gray-900: #111827;
    --color-red-500: #ef4444;

    --transition-standard: all 150ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Shared hover fade used by white/neutral buttons (.btn-secondary, .qty-btn) */
    --surface-hover: color-mix(in srgb, var(--color-madx-grey) 80%, transparent);

    /* Brand accent gradient: header underline, order-page divider, gradient card borders */
    --gradient-brand: linear-gradient(to right, var(--color-madx-sun), var(--color-madx-sun-dark2));

    /* Elevation scale (Tailwind's old shadow-sm/md/lg/xl), reused across cards/panels */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

/*
------------------------------------------------
BASE RESET
Tailwind's Preflight used to normalize the browser defaults below (box model,
margins, borders, fonts, form controls, media, lists) for every element on the
page. Now that Tailwind itself is gone, the whole app still relies on that
normalized baseline, so it is reproduced here in plain CSS.
------------------------------------------------
*/
*,
::before,
::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
}

html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: ui-sans-serif,
    system-ui,
    sans-serif,
    'Apple Color Emoji',
    'Segoe UI Emoji',
    'Segoe UI Symbol',
    'Noto Color Emoji';
    -webkit-tap-highlight-color: transparent;
}

body {
    line-height: inherit;
}

hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: inherit;
    font-weight: inherit;
}

a {
    color: inherit;
    text-decoration: inherit;
}

b,
strong {
    font-weight: bolder;
}

table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
}

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
    background-color: transparent;
}

button,
select {
    text-transform: none;
}

button,
[type='button'],
[type='reset'],
[type='submit'] {
    appearance: button;
    background-image: none;
}

::placeholder {
    opacity: 1;
    color: var(--color-gray-400);
}

textarea {
    resize: vertical;
}

button,
[role='button'] {
    cursor: pointer;
}

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
    display: block;
    vertical-align: middle;
}

img,
video {
    max-width: 100%;
    height: auto;
}

ol,
ul,
menu {
    list-style: none;
}

/*
      Breakpoints for responsive design
      -------------------------------------
      25rem       -  400px   (madx-small)
      28.75rem    -  460px   (madx-md)
      64rem       -  1024px  (madx-lg)
      82.8125rem  -  1325px  (madx-2lg)
      100rem      -  1600px  (madx-xl)
      120rem      -  1920px  (madx-2xl)
      156rem      -  2500px  (madx-3xl)
*/

[x-cloak] {
    display: none !important;
}

.hidden,
*[hx-message-for] {
    display: none;
}

.inline-block {
    display: inline-block;
}

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

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

/* CSS for login / registrieren links */
fieldset a {
    color: var(--color-madx-sun);
    text-decoration-line: underline;

    &:hover {
        opacity: 0.8;
    }
}

main p a {
    color: var(--color-madx-leaf);
}

form p a {
    font-weight: 600;
}

/* fieldset fieldset a and main p a focus-visible outline: see TAB NAVIGATION: FOCUS-VISIBLE below */

/*
------------------------------------------------
BUTTONS

.btn-primary
.on-light       (use on light background)
.focus-madx-light (use if placed on dark background)

.btn-secondary
.centered         (centers content on mobile resolutions)
:disabled

LOADING BUTTON (Views/Shared/_LoadingButton.cshtml)
Reuses the data-loading-* attributes button-spinner.js already relies on as JS hooks.
------------------------------------------------
*/

.btn-primary,
.btn-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: var(--transition-standard);
    max-height: 3.5rem;
    border-radius: 0.375rem;
    color: var(--color-madx-night);
    padding-inline: 1.5rem;
}

.btn-primary,
.btn-secondary {
    overflow: hidden;
    white-space: nowrap;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 500;
}

.btn-primary {
    padding-block: 1rem;
    background-color: var(--color-madx-sun);
    box-shadow: 0px 2px 0 0 var(--color-madx-sun-dark);

    &:hover {
        background-color: color-mix(in srgb, var(--color-madx-sun) 80%, white);
    }

    &:focus-visible {
        outline: 2px solid var(--color-madx-sun);
        outline-offset: 4px;
    }

    &.on-light {
        border: 1px solid var(--color-madx-sun-dark);

        &:focus-visible {
            outline-color: var(--color-madx-night);
        }
    }

    &:focus-visible {
        outline-offset: 2px;
    }

    & svg {
        width: 1.25rem;
        height: 1.25rem;
        stroke: currentColor;
        color: var(--color-madx-night);
    }
}

.btn-primary:active,
.btn-secondary:active {
    transform: translateY(2px);
    box-shadow: none;
}

.btn-secondary {
    justify-content: flex-start;
    padding: 1rem;
    background-color: white;
    box-shadow: 0 0 0 1px var(--color-madx-lightgrey),
    0 1px 3px 0 rgba(16, 24, 40, 0.1),
    0 1px 2px -1px rgba(16, 24, 40, 0.1);

    @media (min-width: 640px) {
        justify-content: center;
    }

    &.centered {
        justify-content: center;
    }
}

.btn-secondary:hover {
    background-color: var(--surface-hover);
}

.btn-secondary:focus-visible {
    outline: 2px solid var(--color-madx-night);
    outline-offset: 2px;
}

[data-loading-text] {
    font-weight: 600;
}

[data-loading-spinner] {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-madx-night);
    animation: spin 1s linear infinite;
}

[data-loading-icon] {
    width: 1.5rem;
    height: 1.5rem;
    stroke: currentColor;
    color: var(--color-madx-night);
}

:disabled,
form.htmx-request button[type='submit'] {
    pointer-events: none;
    transform: translateY(0);
    cursor: not-allowed;
    opacity: 0.5;
    box-shadow: none;
}

.btn-primary svg,
.btn-secondary svg,
button svg {
    flex-shrink: 0;
}

/*
------------------------------------------------
LAYOUT (Views/Shared/_Layout.cshtml)
------------------------------------------------
*/
.layout-shell {
    position: relative;
    min-height: 100vh;
    overflow-x: hidden;
}

.layout-grid {
    position: relative;
    display: grid;
    height: 100vh;
    grid-template-columns: 1fr;
    grid-template-rows: 80px auto;
    overflow: hidden;
    background-color: var(--color-madx-grey);
}

.layout-main {
    display: flex;
    min-height: 0;
    width: 100%;
    flex-direction: column;
    justify-content: space-between;
    gap: 4rem;
    overflow: auto;
    overflow-x: hidden;
    overflow-y: auto;
}

/* a centered flex column container */
.page-container {
    container-type: inline-size;
    margin-inline: auto;
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    max-width: 80rem;
    padding: 1rem;

    @media (min-width: 640px) {
        padding-inline: 3rem;
    }
}

.page-container.is-spaced {
    padding: 1rem 0;
    justify-content: space-around;
}

/*
GENERAL STYLES
 */
.header-primary {
    font-size: 1.875rem;
    line-height: 2.25rem;
    font-weight: 700;
}

.title-primary {
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 700;
}

.title-secondary {
    font-size: 0.875rem;
    color: var(--color-gray-500);

    @media (min-width: 1024px) {
        white-space: nowrap;
    }
}

.font-light {
    font-weight: 300;
}

.font-semibold {
    font-weight: 600;
}

.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.text-center {
    text-align: center;
}

.is-disabled {
    pointer-events: none;
    opacity: 0.4;
    filter: grayscale(1);
    cursor: not-allowed;
}

.stacked {
    display: block;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding-block: 0.75rem;
}

.card {
    position: relative;
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    border-radius: 1.5rem;
    padding: 2.5rem 1.5rem;
    color: white;
    background-color: var(--color-madx-night);
    @media (min-width: 640px) {
        margin-inline: 0;
        width: 37.5rem;
        padding: 3.5rem;
    }

    &.is-light {
        background-color: white;
        color: var(--color-madx-night);

        @media (min-width: 640px) {
            width: 100%;
        }
    }
}

.card-texture-wrap {
    pointer-events: none;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 0;
    height: 100%;
    width: 100%;

    & img {
        position: absolute;
        top: 50%;
        left: 50%;
        height: 744px;
        width: 120%;
        max-width: none;
        transform: translate(-50%, -80%);
        object-fit: contain;
        opacity: 0.05;
        filter: grayscale(1);
        @media (min-width: 640px) {
            width: 100%;
            transform: translate(-50%, -70%);
        }
    }
}

.card-header {
    position: relative;
    z-index: 1;
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;

    & img {
        height: 3rem;
        width: auto;
    }

    & svg {
        width: 6rem;
        height: 6rem;
        color: var(--color-madx-sun);
    }
}

.card-body {
    position: relative;
    z-index: 10;
    display: flex;
    height: 100%;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
}

.card-btn-actions {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.form-banner {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    border-radius: 0.375rem;
    padding: 1rem;
    font-size: 1rem;

    & svg {
        width: 1rem;
        height: 1rem;
        flex-shrink: 0;
    }

    &.alert {
        background-color: var(--color-madx-raspberry);
        color: white;
    }

    &.success {
        background-color: var(--color-madx-green);
        color: var(--color-madx-night);
    }
}

.field-error {
    display: none;
    color: var(--color-error);
}

/*
flatpickr
 */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: var(--color-madx-sun) !important;
    border-color: var(--color-madx-sun) !important;
    color: var(--color-madx-night) !important;
}

.flatpickr-day.today {
    border-color: var(--color-madx-sun) !important;
}

.flatpickr-monthDropdown-months option:checked,
.flatpickr-current-month input.cur-year:focus{
    background: var(--color-madx-sun) !important;
}

/*
TAB NAVIGATION: FOCUS-VISIBLE
------------------------------------------------
On primary and secondary buttons, focus-visible is applied by default or with ".on-light".
The rest of elements can be combined with .focus-madx-light (light outline, use on dark background).
------------------------------------------------
*/
.focus-madx-light:focus-visible,
label a:focus-visible {
    outline: 2px solid var(--color-madx-sun) !important;
    outline-offset: 2px;
}

/* Same 2px sun outline, without !important, for plain links/inputs on light backgrounds */
fieldset fieldset a:focus-visible,
main p a:focus-visible,
.nav-link:focus-visible,
.checkbox-input:focus-visible,
.mfa-resend-link:focus-visible {
    outline: 2px solid var(--color-madx-sun);
    outline-offset: 2px;
}

/* Same idea, but as a box-shadow ring for elements that already clear "outline: none" */
.nav-profile-button:focus-visible,
.nav-logout-link:focus-visible,
.otp-input:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-madx-sun);
}

/* CSS for htmx requests: *[hx-message-for] display:none rule lives near .hidden above */

input[type='file']::file-selector-button {
    border: 1px solid var(--color-madx-lightgrey);
    background-color: white;
    color: var(--color-madx-night);
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.1);
    transition: background-color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

input[type='file']::file-selector-button:hover {
    background-color: var(--color-madx-grey);
    box-shadow: 0 2px 6px rgba(16, 24, 40, 0.15);
}

input[type='file']::file-selector-button:focus-visible {
    outline: 2px solid var(--color-madx-sun) !important;
    outline-offset: 2px;
}

/* ----------------------------------------------------- */
/* Preventing page from moving when y-scrollbar comes up */
.stable {
    scrollbar-gutter: stable;
}

/* ----------------------------------------------------- */

/*
------------------------------------------------
SITE HEADER (Views/Shared/Header/_Header.cshtml)
------------------------------------------------
*/
.site-header {
    position: relative;
    z-index: 20;
    grid-column: span 2 / span 2;
    height: 100%;
    width: 100%;
}

.site-header-accent {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 0.25rem;
    width: 100%;
    background-image: var(--gradient-brand);
}

.site-header-nav {
    display: flex;
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding-inline: 1.5rem;
    background-color: var(--color-madx-night);

    @media (min-width: 460px) {
        padding-inline: 2rem;
    }
}

.site-header-logo-link {
    margin: -0.375rem;
    padding: 0.375rem;

    & img {
        height: 2rem;
        width: auto;
    }
}

/*
------------------------------------------------
LANGUAGE MENU (Views/Shared/Header/_LanguageSelector.cshtml)
------------------------------------------------
*/
.language-menu {
    position: relative;
    display: inline-block;
    text-align: left;
}

.language-menu-button {
    display: flex;
    max-height: 2.5rem;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 0.375rem;
    background-color: rgba(255, 255, 255, 0.1);
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: white;
    cursor: pointer;
    transition: var(--transition-standard);

    &:hover {
        background-color: rgba(255, 255, 255, 0.2);
    }

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

    & img {
        width: 1.5rem;
        height: 1.5rem;
    }

    & svg {
        width: 1.5rem;
        height: 1.5rem;
        stroke: currentColor;
    }
}

.language-menu-panel {
    position: absolute;
    right: 0;
    z-index: 30;
    margin-top: 0.5rem;
    width: 14rem;
    transform-origin: top right;
    border-radius: 0.375rem;
    background-color: white;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05),
    var(--shadow-lg);

    &:focus {
        outline: 2px solid transparent;
        outline-offset: 2px;
    }
}

.language-menu-list {
    padding-block: 0.25rem;
}

.language-menu-item {
    display: flex;
    width: 100%;
    cursor: pointer;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    color: var(--color-madx-night);

    &:hover {
        background-color: color-mix(in srgb, var(--color-madx-stone) 20%, transparent);
    }

    &:focus-visible {
        outline: 3px solid var(--color-madx-sun);
        outline-offset: 2px;
    }

    & img {
        height: 1rem;
        width: auto;
    }
}

/* Alpine's x-transition:enter/leave on the language menu panel apply these as
   plain classes during the animation; they used to come from Tailwind. */
.transition {
    transition-property: opacity, transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.ease-out {
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.ease-in {
    transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

.duration-75 {
    transition-duration: 75ms;
}

.duration-100 {
    transition-duration: 100ms;
}

.opacity-0 {
    opacity: 0;
}

.opacity-100 {
    opacity: 1;
}

.scale-95 {
    transform: scale(0.95);
}

.scale-100 {
    transform: scale(1);
}

/*
------------------------------------------------
SITE FOOTER (Views/Shared/_Footer.cshtml)
------------------------------------------------
*/
.site-footer {
    z-index: 1;
    width: 100%;
    padding-block: 1rem;
    text-align: center;
    font-size: 0.875rem;
    line-height: 1.25rem;
    background-color: var(--color-madx-grey);
    color: var(--color-madx-stone);
}

.site-footer-inner {
    margin-inline: auto;
    display: flex;
    max-width: 80rem;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
    padding-inline: 3rem;

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

.site-footer-text {
    text-align: left;
}

/*
------------------------------------------------
NAVIGATION (Views/Shared/_Navigation.cshtml)
------------------------------------------------
*/
.nav-language-toggle {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    padding-block: 0.5rem;

    @media (min-width: 1024px) {
        display: none;
    }
}

.nav-sidebar {
    position: relative;
    display: flex;
    flex: 1 1 0%;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    color: var(--color-madx-dust);
}

.nav-list {
    z-index: 10;
    display: flex;
    flex: 1 1 0%;
    flex-direction: column;
    gap: 0.5rem;
    color: var(--color-madx-dust);
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-radius: 0.375rem;
    padding-block: 0.5rem;
    font-size: 1rem;
    font-weight: 400;
    color: var(--color-madx-dust);
    transition: color 150ms, background-color 150ms;

    &:hover {
        color: var(--color-madx-grey);
    }

    &.is-current {
        color: white;
        font-weight: 500;
    }

    @media (min-width: 640px) {
        background-color: var(--color-madx-night);
    }

    &:hover .nav-link-icon-wrap,
    &.is-current .nav-link-icon-wrap {
        background-color: var(--color-madx-sun);
    }

    &:hover .nav-link-icon-wrap svg,
    &.is-current .nav-link-icon-wrap svg {
        color: var(--color-madx-night);
    }
}

.nav-link-primary {
    padding: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5rem;
    font-weight: 600;
    background-color: var(--color-madx-night);

    &:hover,
    &.is-current {
        background-color: #1f2937;
    }
}

.nav-link-icon-wrap {
    border-radius: 5px;
    padding: 0.25rem;
    transition: background-color 150ms;

    & svg {
        width: 1.5rem;
        height: 1.5rem;
        transition: color 150ms;
    }
}

.nav-container-query {
    container-type: inline-size;
    position: relative;
    z-index: 10;
    width: 100%;
}

.nav-profile-bar {
    display: flex;
    margin-inline: -2rem;
    margin-top: auto;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding: 1.5rem;
    padding-block: 0.75rem;
    background-color: var(--color-madx-night);

    @media (min-width: 640px) {
        background-color: transparent;
    }
    @container (min-width: 16rem) {
        margin-inline: -1.5rem;
        flex-direction: row;
        align-items: center;
    }
}

.nav-profile-button {
    display: flex;
    width: 100%;
    cursor: pointer;
    align-items: center;
    gap: 0.5rem;
    overflow: hidden;
    border-radius: 0.375rem;
    padding: 1rem;
    font-size: 0.875rem;
    line-height: 1.5rem;
    font-weight: 600;
    color: white;
    transition: var(--transition-standard);

    &:hover {
        border-radius: 1rem;
        background-color: #1f2937;
    }

    @container (min-width: 16rem) {
        width: auto;
    }
}

.nav-profile-avatar {
    width: 2.5rem;
    height: 2.5rem;
    margin: 0.125rem 0;
    border-radius: 50%;
    background-color: var(--color-madx-dust);
    color: var(--color-madx-shadow);
    font-size: 1.0625rem;
    line-height: 2.5rem;
    text-align: center;
}

.nav-profile-name {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.nav-profile-email {
    color: var(--color-madx-stone);
    font-size: 0.875rem;
    font-weight: 300;
}

.nav-logout-link {
    display: flex;
    cursor: pointer;
    gap: 1rem;
    border-radius: 0.375rem;
    padding: 0.5rem 1rem;
    color: var(--color-madx-dust);
    transition: color 150ms, background-color 150ms;

    &:hover {
        background-color: var(--color-madx-sun);
        color: var(--color-madx-night);
    }

    @container (min-width: 16rem) {
        padding: 0.5rem;
    }

    & svg {
        width: 1.5rem;
        height: 1.5rem;
    }

    & p {
        font-size: 0.875rem;
        font-weight: 600;

        @container (min-width: 16rem) {
            display: none;
        }
    }
}

/*
------------------------------------------------
DASHBOARD (Views/Home/Index.cshtml)
------------------------------------------------
*/
.page-intro {
    z-index: 1;
    font-weight: 300;
}

.dashboard-layout {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;

    @container (min-width: 800px) {
        flex-direction: row;
    }
}

.dashboard-grid {
    container-type: inline-size;
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 1rem;

    @media (min-width: 400px) {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 1fr 2fr;
    }
}

.dashboard-account-banner {
    position: relative;
    grid-column: span 2 / span 2;
    overflow: hidden;
    border-radius: 1rem;
    padding: 1rem;
    color: white;
    background-image: linear-gradient(to right, var(--color-madx-shadow), var(--color-madx-night));
}

.dashboard-account-banner-row {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.dashboard-account-icon-wrap {
    border-radius: 0.5rem;
    background-color: white;
    padding: 0.5rem;
}

/* Same 2rem icon tinted night as .dashboard-card-icon-wrap svg and .mfa-success-banner svg */
.dashboard-account-icon-wrap svg,
.dashboard-card-icon-wrap svg {
    width: 2rem;
    height: 2rem;
    color: var(--color-madx-night);
}

.dashboard-account-info {
    display: grid;
    flex: 1 1 0%;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 1.5rem;
    padding: 0.5rem 1rem 0.5rem 0;
}

@media (max-width: 640px) {
    .dashboard-account-info {
        grid-template-columns: 1fr;
    }

    .dashboard-account-info .btn-primary {
        justify-self: start; /* Button nur so breit wie nötig */
    }
}

.dashboard-account-label {
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.dashboard-account-banner-texture-wrap {
    pointer-events: none;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 100%;
}

.dashboard-account-banner-texture {
    position: absolute;
    top: 50%;
    right: 0;
    height: auto;
    width: 80%;
    transform: translate(50%, -50%);
    object-fit: contain;
    opacity: 0.4;

    @media (min-width: 640px) {
        width: 40%;
    }
}

.dashboard-card {
    display: block;
    border-radius: 0.5rem;
    background-color: white;
    padding: 1.5rem;
    text-align: left;
    box-shadow: var(--shadow-lg);
    transition: var(--transition-standard);

    &:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-xl);
    }

    &:focus-visible {
        outline: 2px solid var(--color-madx-night);
        outline-offset: 2px;
    }

    &:active {
        transform: translateY(0);
    }
}

.dashboard-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    /* the only direct-child svg is the arrow; the header-row's icon is nested deeper */

    & > svg {
        display: none;
        width: 1.5rem;
        height: 1.5rem;
        color: var(--color-madx-night);

        @container (min-width: 32rem) {
            display: block;
        }
    }
}

.dashboard-card-header-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
}

.dashboard-card-icon-wrap {
    border-radius: 5px;
    background-color: var(--color-madx-sun);
    padding: 0.25rem;
}

.dashboard-card-title {
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 600;
    color: var(--color-madx-night);
}

.dashboard-card-text {
    margin-top: 1.5rem;
    color: color-mix(in srgb, var(--color-madx-night) 80%, transparent);
}

.dashboard-card-actions {
    margin-top: 1.5rem;

    & svg {
        width: 1.5rem;
        height: 1.5rem;
    }
}

/*
------------------------------------------------
AUTH CARD (Login.cshtml, Mfa.cshtml, ConfirmOrder.cshtml)
------------------------------------------------
/* Shared width:100% rule; also used by .order-accordion-list, .delivery-fieldset, .article-table (see their sections) */
.form-full,
.order-accordion-list,
.delivery-fieldset,
.article-table {
    width: 100%;
}

/* Also used by .account-list (ACCOUNTS section): identical flex column layout */
.auth-form-fields,
.account-list {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 1rem;
}

.field-label {
    display: block;
    font-weight: 300;
}

.field-wrap {
    margin-top: 0.5rem;
}

.field-input {
    display: block;
    width: 100%;
    border-radius: 0.375rem;
    background-color: white;
    padding: 1rem 0.75rem;
    font-size: 1rem;
    color: var(--color-gray-900);
    outline: 1px solid var(--color-gray-300);
    outline-offset: -1px;

    &::placeholder {
        color: var(--color-gray-400);
    }

    &:focus {
        outline: 4px solid var(--color-madx-sun);
        outline-offset: -2px;
    }

    &:is(textarea) {
        resize: vertical;
        overflow-y: auto;
    }

    @media (min-width: 640px) {
        font-size: 0.875rem;
        line-height: 1.5rem;
    }
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-block: 1rem;
    font-weight: 300;
}

.checkbox-input {
    height: 1rem;
    width: 1rem;
    border-radius: 0.25rem;
    border: 1px solid var(--color-gray-300);
    accent-color: var(--color-madx-sun);
}

/*
------------------------------------------------
MFA (Views/Login/Mfa.cshtml)
------------------------------------------------
*/
.mfa-fieldset {
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: center;
    gap: 2rem;
}

.otp-group {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 0.5rem;
}

.otp-label {
    display: block;
    text-align: center;
    font-size: 0.875rem;
    color: var(--color-gray-300);
}

.otp-inputs {
    display: flex;
    width: 100%;
    justify-content: center;
    gap: 0.5rem;

    @media (min-width: 640px) {
        justify-content: space-between;
    }
}

.otp-input {
    height: 3.5rem;
    width: 2.25rem;
    border-radius: 0.5rem;
    border: 1px solid var(--color-madx-dust);
    background-color: var(--color-madx-grey);
    text-align: center;
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--color-madx-night);

    @media (min-width: 400px) {
        height: 4rem;
        width: 3rem;
    }
    @media (min-width: 640px) {
        height: 5.5rem;
        width: 4.5rem;
    }
}

.mfa-resend-row {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
}

.mfa-resend-link {
    display: inline-block;
    width: fit-content;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-madx-sun);

    &:hover {
        color: var(--color-madx-dust);
    }
}

/*
------------------------------------------------
GRADIENT CARD BORDER (Accounts/_AccountList.cshtml, Orders section wrappers)
------------------------------------------------
*/
.account-card {
    background-image: var(--gradient-brand);
    color: var(--color-madx-blue);
    border-radius: 0.75rem;
    padding-top: 0.75rem;
    width: 100%;
}

/*
------------------------------------------------
ACCOUNTS (Views/Accounts/Index.cshtml, _AccountList.cshtml)
------------------------------------------------
*/
/* .account-list flex column layout: see .auth-form-fields in AUTH CARD section */
.account-list-items {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.account-card-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border-radius: 0 0 0.75rem 0.75rem;
    background-color: white;
    padding: 1rem;
    box-shadow: var(--shadow-sm);

    @media (min-width: 640px) {
        padding: 1.5rem;
    }
}

.account-card-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;

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

.account-card-name-wrap {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.25rem;

    @media (min-width: 640px) {
        width: 50%;
        gap: 0.5rem;
    }
    @container (min-width: 48rem) {
        width: 33.3333%;
    }
}

.account-card-name {
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 600;

    @media (min-width: 640px) {
        font-size: 1.25rem;
        line-height: 1.75rem;
    }
}

.account-card-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;

    @container (min-width: 48rem) {
        flex-direction: row;
    }
}

/*
------------------------------------------------
ORDERS - shared page chrome (AddOrder.cshtml, OrderOverview.cshtml)
------------------------------------------------
*/
.order-page-header-block {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 1.5rem;
}

.order-page-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    color: var(--color-madx-blue);

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

/* .order-page-title typography: see .mfa-title in MFA section */
.order-page-divider {
    height: 0.375rem;
    width: 100%;
    border-radius: 0.375rem;
    background-image: var(--gradient-brand);
}

.order-alert {
    margin-bottom: 1rem;
}

/* .order-accordion-list width:100% rule: see .form-full in AUTH CARD section */
.order-accordion-list > * + * {
    margin-top: 1rem;
}

.order-actions-row {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 1rem;

    @media (min-width: 640px) {
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }
}

/*
------------------------------------------------
ORDER SECTION (OrderOverview.cshtml + Orders/_*Section.cshtml accordions)
------------------------------------------------
*/
.order-section-card {
    border-radius: 0.5rem;
    background-color: white;
    box-shadow: var(--shadow-md);
}

.order-section-header {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-radius: 0.5rem 0.5rem 0 0;
    padding: 1rem 1.5rem;
    text-align: left;

    /* Accordion trigger variant, e.g. Orders/_InvoiceSection.cshtml */

    &.is-toggle {
        cursor: pointer;
        border: none;
        background: none;
        font: inherit;
        color: inherit;

        & svg {
            width: 1.25rem;
            height: 1rem;
            color: var(--color-madx-night);
            transition: transform 200ms;
        }
    }
}

.order-section-title {
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 600;
    color: var(--color-madx-night);
}

/* Shared panel below an .order-section-header: default padding, or .is-roomy/.is-wide */
.order-panel {
    overflow: hidden;
    border-top: 1px solid var(--color-gray-200);
    padding: 1rem;

    &.is-roomy {
        padding: 1.5rem 2rem;
    }

    &.is-wide {
        padding: 0.75rem 2rem;
    }
}

.detail-value {
    color: var(--color-madx-night);

    &.is-strong {
        font-weight: 500;
    }
}

.detail-empty {
    color: var(--color-gray-500);
}

.order-checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-block: 0.75rem;
    color: var(--color-madx-night);
}

/*
------------------------------------------------
ORDER ACCORDION (Orders/_InvoiceSection.cshtml, _ArticleSection.cshtml,
_AdditionalInformation.cshtml, _DeliverySection.cshtml)
------------------------------------------------
*/
/* .order-section-header.is-toggle base styling: see ORDER SECTION above */
.order-accordion-icon-open {
    transform: rotate(45deg);
}

.order-panel-inner {
    padding-inline: 1rem;
}

.field-input-date {
    margin-bottom: 1rem;
    border-radius: 0.375rem;
    border: 1px solid var(--color-gray-300);
    background-color: white;
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    color: var(--color-gray-900);
}

.field-input-compact {
    margin-bottom: 1rem;
    width: 100%;
    border-radius: 0.375rem;
    border: 1px solid var(--color-gray-300);
    background-color: white;
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    color: var(--color-gray-900);
}

.field-input-compact:focus {
    outline: none;
    border-color: var(--color-madx-sun);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-madx-sun) 30%, transparent);
}

/* .delivery-fieldset width:100% rule: see .form-full in AUTH CARD section */
.delivery-fieldset > * + * {
    margin-top: 1rem;
}

.delivery-checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    color: var(--color-madx-night);
}

.delivery-list > * + * {
    border-top: 1px solid var(--color-gray-200);
}

.delivery-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.25rem;
    padding-block: 0.75rem;

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

.delivery-label {
    font-weight: 500;
    color: var(--color-gray-500);
}

.delivery-value {
    color: var(--color-madx-night);

    @media (min-width: 640px) {
        grid-column: span 2 / span 2;
    }
}

.delivery-input {
    width: 100%;
    border-radius: 0.375rem;
    border: 1px solid;
    padding: 0.5rem 1rem;
    color: var(--color-madx-night);

    &:disabled {
        background-color: var(--color-gray-100);
    }
}

/*
------------------------------------------------
INVOICE ADDRESS (Orders/_InvoiceAddress.cshtml)
------------------------------------------------
*/
.invoice-address-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;

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

.invoice-address-block {
    padding-top: 0.75rem;
}

/*
------------------------------------------------
ARTICLE SELECTION (Orders/_ArticleSelection.cshtml)
------------------------------------------------
*/
/* .article-table width:100% rule: see .form-full in AUTH CARD section */
.article-table-header {
    display: none;
    padding: 1rem;
    background-color: var(--color-gray-50);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    color: var(--color-gray-500);
    border-bottom: 1px solid;
    min-width: 0;
    width: 100%;

    @media (min-width: 1024px) {
        display: grid;
        column-gap: 1.5rem;
    }
}

.article-row {
    border-bottom: 1px solid var(--color-gray-200);

    &:last-child {
        border-bottom: none;
    }
}

.article-row-inner {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    transition: var(--transition-standard);

    &:hover {
        background-color: var(--color-gray-50);
    }

    @media (min-width: 1024px) {
        display: grid;
        align-items: center;
        column-gap: 1.5rem;
        row-gap: 0;
        padding: 0.75rem 1rem;
    }
}

@media (min-width: 1024px) {
    .article-table.has-price.is-overview .article-table-header,
    .article-table.has-price.is-overview .article-row-inner {
        grid-template-columns: minmax(260px, 2fr) minmax(120px, 1fr) minmax(160px, 0.5fr) 220px;
    }

    .article-table.has-price:not(.is-overview) .article-table-header,
    .article-table.has-price:not(.is-overview) .article-row-inner {
        grid-template-columns: minmax(260px, 2fr) minmax(120px, 1fr) minmax(160px, 0.5fr) 180px;
    }

    .article-table:not(.has-price).is-overview .article-table-header,
    .article-table:not(.has-price).is-overview .article-row-inner {
        grid-template-columns: minmax(280px, 2.5fr) minmax(120px, 1fr) 220px;
    }

    .article-table:not(.has-price):not(.is-overview) .article-table-header,
    .article-table:not(.has-price):not(.is-overview) .article-row-inner {
        grid-template-columns: minmax(280px, 2.5fr) minmax(120px, 1fr) 180px;
    }
}

.title-seperator {
    display: flex;
    flex-direction: column;

    @media (min-width: 1024px) {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: baseline;
    }
}

/* .primary-title typography: see .dashboard-account-name in DASHBOARD section */
.separator {
    display: none;
    margin-inline: 0.5rem;
    color: var(--color-gray-500);

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

.article-cell {
    min-width: 0;
    color: var(--color-madx-night);

    &.is-price {
        text-align: right;

        @media (min-width: 1024px) {
            padding-right: 2.5rem;
        }
    }
}

.article-number-label {
    font-size: 0.75rem;
    color: var(--color-gray-500);

    @media (min-width: 1024px) {
        display: none;
    }
}

.qty-component {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap;
    min-width: 0;
}

.qty-btn {
    height: 2.5rem;
    width: 2.5rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    border: 1px solid;
    cursor: pointer;

    &:hover {
        background-color: var(--surface-hover);
    }

    &.qty-btn-remove {
        border-color: var(--color-red-500);
    }

    & svg {
        width: 1.5rem;
        height: 1.5rem;
        color: var(--color-madx-night);
    }
}

.qty-input {
    text-align: center;
    width: 4rem;
    min-width: 0;
    flex-shrink: 1;
    border-radius: 0.375rem;
    border: 1px solid;
    padding: 0.5rem 1rem;
    color: var(--color-madx-night);

    &.qty-zero {
        border-color: var(--color-madx-night);
        color: var(--color-madx-lightgrey);
    }

    &.qty-positive {
        border-color: var(--color-madx-green);
        border-width: 1px;
    }
}

.qty-input:focus {
    outline: none;
    border-color: var(--color-madx-night) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-madx-night) 100%, transparent) !important;
}

*[hx-message-for] {
    display: none;
}
form.htmx-request button[type='submit'] {
    cursor: not-allowed;
    transform: translateY(0);
    opacity: 0.5;
    box-shadow: none;
}
.hx-indicator {
    display: none;
}