@import url('./icons.css');

html, body {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    margin: 0;
}

/* Page titles: no browser default top margin, the layout's top bar already provides spacing. */
h1 {
    margin-top: 0;
}

.w-100 {
    width: 100% !important;
}

.h-100 {
    height: 100% !important;
}

.h-auto {
    height: auto !important;
}

.overflow-hidden {
    overflow: hidden !important;
}

.text-danger {
    color: var(--dxds-color-content-danger-default-rest);
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--dxds-color-border-success-default-rest);
}

.invalid {
    outline: 1px solid var(--dxds-color-border-danger-default-rest);
}

.validation-message {
    color: var(--dxds-color-content-danger-default-rest);
}

.button-link {
    text-decoration: unset;
}

.title {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem 0;
}

.title.title-secondary {
    padding: 0.313rem 0 0;
    color: var(--dxds-color-content-secondary-default-rest);
}

.title-header-text {
    font-size: var(--dxds-font-size-headline-lg);
    font-weight: var(--dxds-font-weight-headline-default);
    letter-spacing: var(--dxds-letter-spacing-headline-lg);
    line-height: var(--dxds-line-height-headline-lg);
}

.title-content-text {
    font-size: var(--dxds-font-size-base-lg);
    font-weight: var(--dxds-font-weight-base-default);
    letter-spacing: var(--dxds-letter-spacing-base-lg);
    line-height: var(--dxds-line-height-base-lg);
}

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

/* The few Bootstrap-style utilities the components use (there is no Bootstrap in this project). */
.d-flex { display: flex; }
.justify-content-end { justify-content: flex-end; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1rem; }

/* Login, register and password pages (the popups render outside the component tree, so no scoped css). */
.login-error,
.login-status {
    border-radius: 0.25rem;
    margin-bottom: 1rem;
    padding: 0.625rem 0.75rem;
}

.login-error {
    /* The theme's danger surface is a solid red, so the text must be white to stay readable. */
    background-color: var(--dxds-color-surface-danger-default-rest, #dc3545);
    color: #fff;
}

.login-status {
    /* The theme's success surface is a solid green, so the text must be white to stay readable. */
    background-color: var(--dxds-color-surface-success-default-rest, #198754);
    color: #fff;
}

.login-actions {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-top: 1rem;
}

.login-actions-main {
    display: flex;
    gap: 0.5rem;
}

.login-divider {
    align-items: center;
    color: var(--dxds-color-content-secondary-default-rest);
    display: flex;
    gap: 0.75rem;
    margin: 1.25rem 0;
}

.login-divider::before,
.login-divider::after {
    border-top: 1px solid var(--dxds-color-border-secondary-default-rest, #ddd);
    content: "";
    flex: 1;
}

.login-hint {
    color: var(--dxds-color-content-secondary-default-rest);
    font-size: var(--dxds-font-size-base-sm);
    margin-top: 0.5rem;
    text-align: center;
}

/* The buttons under the digit boxes of the verification code step (VerificationCode). */
.verification-actions {
    margin-top: 1.5rem;
}

/* The two-step verification page is a short form on a wide page; do not let it stretch across it. */
.two-factor-form {
    max-width: 420px;
}

/* Roles tab of the user dialog: keeps the list inside the popup, like the role grid of an application. */
.user-roles-listbox {
    max-height: 50vh;
}

/* A neutral notice, e.g. that a record comes from AFAS and is read-only. */
.info-note {
    border: 1px solid #c9d8e8;
    border-radius: 0.25rem;
    background-color: #eef3f8;
    color: #1f4e79;
    margin-bottom: 1rem;
    padding: 0.625rem 0.75rem;
}