/* Guest layout */

/* Large screens scale the whole page: 100% at a 1440px wide viewport, growing to 125% at about 2400px */
@media (min-width: 1440px) and (min-height: 800px) {
    html:has(> .auth-body) {
        font-size: clamp(100%, calc(100% + 0.42vw - 0.378rem), 125%);
    }
}

.auth-body {
    font-family: var(--font-sans);
    color: var(--secondary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.auth-page {
    --auth-page-pad: var(--space-5);
    display: flex;
    justify-content: center;
    min-height: 100vh;
    padding: var(--auth-page-pad) var(--space-4);
    background-color: var(--surface-muted);
}

@media (min-width: 768px) {
    .auth-page {
        align-items: center;
    }
}

@media (max-height: 700px) {
    .auth-page {
        --auth-page-pad: var(--space-3);
    }
}

.auth-card {
    padding: var(--space-5);
    border-radius: var(--radius-xl);
    background-color: var(--emphasis);
    box-shadow: var(--elevation-2);
}

.auth-card.narrow {
    width: 100%;
    max-width: 24rem;
}

@media (min-width: 1440px) {
    .auth-card.wide {
        width: 75%;
    }
}

.auth-logo {
    display: block;
    width: fit-content;
    margin: auto;
}

.auth-logo img {
    display: block;
    height: 5rem;
}

/* Shared auth page parts */

.auth-nav {
    display: flex;
    justify-content: space-between;
    margin: var(--space-5) 0;
    font-size: var(--text-lg);
    font-weight: 600;
}

/* The page heading for screen readers on pages whose nav already shows it; px because some of them skip a box without size */
.auth-nav-title {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.auth-nav [aria-current="page"] {
    padding-bottom: var(--space-1);
    border-bottom: var(--border-w-strong) solid var(--primary);
}

.auth-nav a {
    color: var(--text-muted);
    text-decoration: none;
}

.auth-title {
    margin: var(--space-4) 0;
    font-size: var(--text-lg);
    font-weight: 600;
}

.auth-text {
    margin: var(--space-4) 0;
}

.auth-text.muted {
    font-size: var(--text-sm);
    color: var(--text-muted);
}

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

.auth-error.small {
    font-size: var(--text-sm);
}

/* A field's message sits just below its control; x-auth-errors stacks its messages without a gap */
:not(.auth-error) + .auth-error.small {
    margin-top: var(--space-1);
}

:is(.auth-input, .auth-password, .auth-error) + .auth-label {
    margin-top: var(--space-4);
}

.auth-success {
    margin: var(--space-4) 0;
    font-size: var(--text-sm);
    color: var(--done);
}

.auth-errors,
.auth-messages:not(:empty) {
    margin-bottom: var(--space-4);
}

.auth-label {
    display: block;
    margin-bottom: var(--space-1);
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.auth-input {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: var(--btn-h);
    padding: 0 var(--space-3);
    border: var(--border-w) solid var(--primary);
    border-radius: var(--radius-md);
    background-color: var(--emphasis);
    font: inherit;
    font-size: var(--text-md);
    color: var(--secondary);
}

/* Cancels the @tailwindcss/forms focus ring; the :focus-visible outline below replaces it */
.auth-input:focus {
    box-shadow: none;
}

/* Room for the @tailwindcss/forms chevron, which the plugin draws on the right in either direction */
select.auth-input {
    padding-right: var(--btn-h);
}

.auth-input[aria-invalid="true"],
.auth-input[aria-invalid="true"]:focus {
    border-color: var(--danger);
}

.auth-page :is(a, button, input, select, textarea):focus-visible {
    outline: var(--border-w-strong) solid var(--primary);
    outline-offset: var(--border-w-strong);
}

.auth-page :is(input, select, textarea):focus-visible {
    outline-offset: calc(-1 * var(--border-w));
}

.auth-page :is(input, select, textarea)[aria-invalid="true"]:focus-visible {
    outline-color: var(--danger);
}

.auth-button {
    --button: var(--primary);
    --button-border: var(--button);
    --button-text: var(--emphasis);
    --button-hover: var(--primary-tint);
    --button-hover-text: var(--secondary);
    --button-active: var(--primary-tint-hover);
    box-sizing: border-box;
    appearance: none;
    width: 100%;
    height: var(--btn-h);
    padding: 0 var(--btn-pad-x);
    border: var(--border-w) solid var(--button-border);
    border-radius: var(--radius-md);
    background-color: var(--button);
    font: inherit;
    font-size: var(--text-md);
    font-weight: 600;
    line-height: var(--leading-none);
    text-align: center;
    color: var(--button-text);
    cursor: pointer;
    transition-property: background-color, border-color, color;
    transition-duration: var(--duration);
    transition-timing-function: var(--ease);
}

.auth-button:hover:not(:disabled) {
    border-color: var(--button-hover);
    background-color: var(--button-hover);
    color: var(--button-hover-text);
}

.auth-button:active:not(:disabled) {
    border-color: var(--button-active);
    background-color: var(--button-active);
}

.auth-button.secondary {
    --button: var(--emphasis);
    --button-border: var(--border);
    --button-text: var(--secondary);
    --button-hover: var(--surface-muted);
    --button-hover-text: var(--secondary);
    --button-active: var(--surface-muted);
}

.auth-button.accent {
    --button: var(--accent);
    --button-hover: var(--accent-hover);
    --button-hover-text: var(--emphasis);
    --button-active: var(--accent-active);
}

.auth-password {
    position: relative;
}

.auth-password .auth-input {
    padding-inline-end: var(--btn-h);
}

.auth-password-toggle {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--btn-h);
    padding: 0;
    border: 0;
    border-radius: var(--radius-md);
    background: none;
    color: var(--text-muted);
    cursor: pointer;
}

.auth-password-toggle:hover {
    color: var(--secondary);
}

.auth-password-toggle svg {
    width: var(--icon-size);
    height: var(--icon-size);
}

.auth-password-toggle .auth-eye-off,
.auth-password-toggle[aria-pressed="true"] .auth-eye {
    display: none;
}

.auth-password-toggle[aria-pressed="true"] .auth-eye-off {
    display: block;
}

.auth-actions {
    display: flex;
    align-items: center;
    margin-top: var(--space-4);
}

/* A link beside the button gets more room above */
.auth-actions:has(> .auth-link) {
    margin-top: var(--space-5);
}

.auth-actions > :is(.auth-link, .auth-button) {
    flex: 1;
}

.auth-link {
    font-size: var(--text-sm);
    color: var(--primary);
}

.auth-link:hover {
    text-decoration: underline;
}

:is(.auth-button, .auth-link):disabled {
    opacity: var(--opacity-disabled);
    cursor: not-allowed;
}

/* The setup pages mark a required field by its control; the registration form by the label's class */
label.required::after,
.account-setup .auth-label:has(+ [required], + .auth-password > [required])::after {
    content: " *";
    color: var(--danger);
}

.naviflow .terms-link {
    color: var(--primary);
}

.mecatera .terms-link {
    color: var(--accent);
}

.mecatera .terms-link:hover {
    color: var(--accent-hover);
}

/* Login */

.login-page {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
    width: 100%;
    max-width: 72rem;
}

.login-side-form {
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-side-box {
    width: 28rem;
    max-width: 100%;
}

.mecatera .login-submit {
    --button: var(--brand);
    --button-hover: var(--brand-hover);
    --button-hover-text: var(--emphasis);
    --button-active: var(--brand-active);
}

.login-terms-link {
    display: block;
    margin-top: var(--space-4);
    font-size: var(--text-sm);
    text-align: center;
    color: var(--text-muted);
}

.login-terms-link a:hover {
    text-decoration: underline;
}

.login-side-image-box {
    display: none;
    justify-content: center;
    align-items: center;
}

.login-side-image {
    max-width: 100%;
    /* The viewport less the page and the card padding */
    max-height: calc(100vh - 2 * var(--auth-page-pad) - 2 * var(--space-5));
    height: auto;
    object-fit: contain;
}

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

    .login-side-image-box {
        display: flex;
    }
}

@media (max-height: 700px) {
    .login-side-box .auth-logo img {
        height: 3.5rem;
    }

    .login-side-box .auth-nav {
        margin: var(--space-4) 0;
    }

    .login-side-box .auth-actions {
        margin-top: var(--space-4);
    }
}

/* Registration */

.register-nav a {
    text-decoration: underline;
}

.register-container {
    display: flex;
    gap: var(--space-8);
}

.register-form,
.image-container {
    flex: 1;
}

.register-form {
    --register-indent: 9rem;
    --register-label: 35%;
}

.image-container {
    aspect-ratio: 1;
}

.registration-image {
    object-fit: cover;
    width: 100%;
    height: 100%;
    border-radius: var(--radius-md);
}

.register-nav,
.tabs-container,
.registration-top-header,
.registration-sub-header,
.register-row {
    margin-inline-start: var(--register-indent);
}

.tabs-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4) var(--space-6);
    margin-bottom: var(--space-8);
}

.register-tab {
    padding-bottom: var(--space-4);
    font-size: var(--text-md);
    color: var(--text-muted);
}

.register-tab.active-tab {
    border-bottom: var(--border-w-strong) solid var(--accent);
    color: var(--accent);
    font-weight: 600;
}

.hidden-block {
    display: none;
}

.registration-top-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border-radius: var(--radius-xl);
    border: var(--border-w) solid var(--accent);
    padding: var(--space-5);
    margin-bottom: var(--space-8);
}

.registration-top-header p {
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.registration-top-header.plain {
    margin-inline-start: 0;
}

.registration-top-header.plain p {
    font-size: var(--text-md);
    color: var(--secondary);
}

.registration-top-header img {
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
}

.registration-header-content {
    display: flex;
    align-items: center;
    column-gap: var(--space-4);
}

.registration-header-content-text {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--space-2);
}

.registration-sub-header {
    color: var(--accent);
    font-size: var(--text-lg);
    font-weight: 600;
    line-height: var(--leading-tight);
    margin-top: var(--space-6);
    margin-bottom: var(--space-6);
}

.company-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

.register-row {
    display: flex;
    align-items: center;
    column-gap: var(--space-6);
    margin-top: var(--space-4);
}

.register-row > div:first-child {
    min-width: var(--register-label);
}

.register-row > div:nth-child(2) {
    flex: 1;
}

.register-row label {
    white-space: nowrap;
    font-size: var(--text-sm);
    color: var(--secondary);
}

.register-row label.required {
    font-weight: 600;
}

.register-row .auth-input {
    border-color: var(--accent);
}

.register-row ::placeholder {
    font-size: var(--text-md);
}

.form-next .auth-button {
    margin-inline-start: calc(var(--register-label) + var(--space-6));
}

.radio-container-wrapper {
    column-gap: var(--space-5);
}

.company-position-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    max-width: 23rem;
}

.radio-option {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.radio-option input {
    width: 1rem;
    height: 1rem;
    border-color: var(--border);
    color: var(--primary);
}

.radio-option label {
    font-size: var(--text-sm);
    color: var(--secondary);
}

.company-position-wrapper .field-error {
    grid-row: 2;
    grid-column: 1 / span 2;
    margin-inline-start: var(--space-1);
}

.material-table {
    width: 100%;
}

.material-info thead th {
    text-align: start;
}

.material-info select {
    border: none;
    border-bottom: var(--border-w) solid var(--accent);
    width: 100%;
}

.delete-row .delete {
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
}

.delete-row .delete img {
    width: var(--icon-size-lg);
    height: var(--icon-size-lg);
}

.add-row-button,
.terms-and-conditions,
.registration-button-container {
    margin-top: var(--space-4);
}

.terms-and-conditions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-bottom: var(--space-4);
}

.terms-and-conditions > div {
    display: flex;
    align-items: center;
    column-gap: var(--space-2);
}

.registration-button-container {
    display: flex;
    justify-content: flex-end;
}

.submit-button {
    width: 20rem;
    max-width: 100%;
}

@media (min-width: 1024px) {
    .company-container > div:nth-child(2) .register-row {
        margin-inline-start: var(--space-8);
    }

    .company-info {
        padding-inline-end: var(--space-8);
    }
}

@media (max-width: 1439px) {
    .register-form {
        --register-indent: 0;
    }

    .image-container {
        display: none;
    }

    .registration-top-header {
        width: 100%;
    }
}

@media (min-width: 1440px) {
    .register-container {
        max-width: 122.5rem;
    }

    .material-info {
        padding-inline: var(--register-indent) var(--space-10);
    }
}

/* Registration complete */

.registration-complete {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: var(--border-w) solid var(--accent);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin: var(--space-10) var(--space-10) var(--space-8);
}

.registration-complete-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    margin-top: var(--space-6);
    margin-bottom: var(--space-6);
    color: var(--accent);
    font-size: var(--text-md);
    font-weight: 700;
}

.registration-email {
    color: var(--info);
}

.registration-complete p {
    text-align: start;
    width: 100%;
    padding: var(--space-4);
    color: var(--text-muted);
}

.registration-complete-subtitle p:last-of-type {
    white-space: nowrap;
}

.registration-complete-subtitle p:last-of-type span {
    display: block;
}

@media (max-width: 767px) {
    .company-container {
        display: flex;
        flex-direction: column;
    }

    .delete-row {
        width: var(--icon-size-lg);
    }

    .register-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .register-row > div {
        width: 100%;
    }

    .form-next .auth-button {
        margin-inline-start: 0;
    }

    .registration-complete {
        margin: var(--space-5) 0;
    }
}

/* Account setup (invitation and password set-up) */

.account-setup {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-6);
}

.account-setup .setup-box {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    width: 100%;
}

.account-setup form {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.account-setup .setup-columns {
    display: flex;
    align-items: flex-start;
    gap: var(--space-10);
}

.account-setup .setup-fields {
    width: 20rem;
    max-width: 100%;
}

/* [readonly], not :read-only, which every select matches */
.account-setup .auth-input:is([readonly], :disabled) {
    border-color: var(--border);
    background-color: var(--surface-muted);
    color: var(--text-muted);
    cursor: not-allowed;
}

.account-setup .password-validations {
    font-size: var(--text-sm);
}

.account-setup .setup-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    justify-content: flex-end;
}

.account-setup .setup-actions .auth-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    padding: 0 var(--space-8);
    text-decoration: none;
}

/* Set-up links are often opened on a phone: one column, fields full width */
@media (max-width: 767px) {
    .account-setup {
        width: 100%;
    }

    .account-setup .setup-columns {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-5);
    }
}