:root {
    --fs-small: 0.75rem;
    --fs-body: 1rem;
    --fs-heading: 1.5rem;

    --space-xs: 0.35rem;
    --space-sm: 0.5rem;
    --space-md: 0.75rem;
    --space: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;

    --sidebar-width: 13rem;

    --radius-sm: 0.35rem;
    --radius: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-pill: 999px;

    --colour-background: #f3f5f7;
    --colour-card: #fff;
    --colour-text: #1f2933;
    --colour-muted: #52606d;
    --colour-border: #a0aec0;
    --colour-border-light: #d9e2ec;
    --colour-sidebar: #1f2933;
    --colour-primary: #0058a3;
    --colour-primary-light: #d9eefa;
    --colour-danger: #b42318;
    --colour-white: #fff;
    --colour-black: #000;

    --locker-empty: #7bd389;
    --locker-loading: #f6c344;
    --locker-pickup-in-progress: #d9eefa;
    --locker-in-use: #cbd5e1;
    --locker-overdue: rgb(235, 30, 34);
    --locker-picked-up: #486581;
    --locker-courier-action: #2b6cb0;
    --locker-not-used: repeating-linear-gradient(45deg,
            #606dbc,
            #606dbc 10px,
            #465298 10px,
            #465298 20px);

    --shadow-card: 0 0.2rem 0.8rem rgb(31 41 51 / 8%);
    --shadow-login: 0 0.5rem 2rem rgb(31 41 51 / 15%);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    min-height: 100vh;
}

body {
    margin: 0;
    background: var(--colour-background);
    color: var(--colour-text);
    font-family: Arial, sans-serif;
    font-size: var(--fs-body);
}

button,
input,
select,
textarea {
    font: inherit;
}

.login-page {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: var(--space);
}

.login-card {
    width: min(100%, 24rem);
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    background: var(--colour-card);
    box-shadow: var(--shadow-login);
}

.login-card h1 {
    margin-top: 0;
}

#login-form {
    display: grid;
    gap: var(--space-md);
}

#login-form input {
    width: 100%;
    padding: 0.65rem;
    border: 1px solid var(--colour-border);
    border-radius: var(--radius-sm);
    background: var(--colour-card);
}

#login-form button {
    padding: 0.7rem 0.9rem;
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
    background: var(--colour-primary);
    color: var(--colour-white);
}

.form-error {
    color: var(--colour-danger);
}

.environment-banner {
    position: fixed;
    z-index: 100;
    top: 0;
    right: 0;
    left: 0;
    display: flex;
    height: 2rem;
    padding: 0 var(--space);
    align-items: center;
    justify-content: center;
    color: var(--colour-text);
    font-size: var(--fs-small);
    font-weight: bold;
    text-align: center;
}

.environment-banner--development {
    background: #f6c344;
}

.environment-banner--production {
    background: var(--colour-danger);
    color: var(--colour-white);
}

@media (max-width: 48rem) {
    .environment-banner {
        position: static;
        height: auto;
        min-height: 2rem;
        padding: var(--space-xs) var(--space-md);
        line-height: 1.2;
    }
}

@media (max-width: 30rem) {
    .login-card {
        padding: var(--space-lg);
    }
}

/* Shared visual system: calm surfaces, clear focus, and touch-friendly controls. */
:root {
    --colour-background: #eef2f6;
    --colour-card: #ffffff;
    --colour-text: #172b4d;
    --colour-muted: #526581;
    --colour-border: #9fb3c8;
    --colour-border-light: #d7e1ec;
    --colour-sidebar: #172b4d;
    --colour-primary: #0065b3;
    --colour-primary-light: #e4f2fc;
    --shadow-card: 0 0.6rem 1.5rem rgb(23 43 77 / 9%);
    --shadow-login: 0 1rem 2.5rem rgb(23 43 77 / 16%);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.45;
}

button,
a,
select,
input,
textarea {
    transition: border-color 120ms ease, box-shadow 120ms ease,
        background-color 120ms ease, transform 120ms ease;
}

:focus-visible {
    outline: 3px solid #80c7f5;
    outline-offset: 2px;
}

#store-selector,
#login-form input {
    min-height: 2.75rem;
}

.action-button,
#login-form button {
    min-height: 2.75rem;
    border-radius: 0.65rem;
    font-weight: 650;
}

.action-button:hover:not(:disabled),
#login-form button:hover {
    background: #004f8e;
    transform: translateY(-1px);
}

.login-card {
    border: 1px solid var(--colour-border-light);
}