/* The KeyManagement Identity login uses the same calm QBM workstation surface as QSalesView. */
html,
body {
    min-height: 100%;
    margin: 0;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    background: #edf3f8;
}

/* The full-viewport page centers the login card and keeps the background quiet. */
.qbm-login-page {
    width: 100vw;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 48px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #f5f8fc 0%, #edf3f8 100%);
    color: #101827;
}

/* A single-column shell keeps the sign-in card centered after the intro copy was removed. */
.qbm-login-shell {
    width: min(100%, 460px);
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    align-items: start;
    justify-items: stretch;
}

/* The login card uses restrained borders and shadow for a professional admin surface. */
.qbm-login-card {
    width: 100%;
    border: 1px solid #d5deea;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 24px 60px rgba(16, 24, 39, 0.12);
    padding: 28px;
}

/* The card header copies the QSalesView welcome/login hierarchy. */
.qbm-login-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

/* The eyebrow stays muted and uppercase so it does not compete with the title. */
.qbm-login-card-header p {
    margin: 0 0 6px;
    color: #6b7788;
    font-size: 0.86rem;
    font-weight: 700;
    text-transform: uppercase;
}

/* The form title is sized for a card, not the page headline. */
.qbm-login-card-header h2 {
    margin: 0;
    color: #101827;
    font-size: 1.75rem;
    line-height: 1.15;
    font-weight: 820;
}

/* The form grid keeps field spacing stable across validation states. */
.qbm-login-form {
    display: grid;
    gap: 18px;
}

/* Each field keeps its label, control, and validation message together. */
.qbm-field {
    display: grid;
    gap: 7px;
}

/* Labels use a strong but compact weight for workstation scanning. */
.qbm-field label {
    color: #263447;
    font-size: 0.92rem;
    font-weight: 750;
}

/* Inputs match the QSalesView control shape and focus treatment. */
.qbm-input {
    width: 100%;
    min-height: 46px;
    border: 1px solid #ccd6e3;
    border-radius: 8px;
    padding: 0.78rem 0.9rem;
    background: #ffffff;
    color: #101827;
    font: inherit;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Hover feedback is subtle so typing remains the main interaction. */
.qbm-input:hover {
    border-color: #9fb1c7;
}

/* The focus ring uses the QSalesView teal family for consistent visual language. */
.qbm-input:focus {
    border-color: #0f766e;
    box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.14);
}

/* Password guidance reinforces that QBM database passwords are not stored centrally. */
.qbm-password-note {
    color: #6b7788;
    font-size: 0.82rem;
    line-height: 1.45;
}

/* Validation summaries are styled like QSalesView inline login errors. */
.qbm-validation-summary {
    margin: 0;
    border: 1px solid #f3bfbd;
    border-radius: 8px;
    padding: 12px 14px;
    background: #fff3f2;
    color: #9f1f1b;
    font-size: 0.9rem;
    line-height: 1.45;
}

/* Empty validation summaries collapse so the card does not reserve error space. */
.qbm-validation-summary:empty {
    display: none;
}

/* Successful registration and verification messages use a quiet green status panel. */
.qbm-login-success {
    margin-bottom: 18px;
    border: 1px solid #bbdec8;
    border-radius: 8px;
    padding: 12px 14px;
    background: #f0fdf4;
    color: #14532d;
    font-size: 0.9rem;
    line-height: 1.45;
}

/* Development codes are separated from normal text so local testers can find them quickly. */
.qbm-login-success strong {
    display: block;
    margin-top: 6px;
}

/* Field validation text uses the same compact danger color as the shared QBM login. */
.validation-message {
    color: #b42318;
    font-size: 0.82rem;
}

/* The submit button keeps stable dimensions and the QSalesView blue accent. */
.qbm-login-submit {
    width: 100%;
    min-height: 46px;
    border: 1px solid #0f5d7e;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    background: #0f5d7e;
    color: #ffffff;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 14px 28px rgba(15, 93, 126, 0.18);
}

/* Hover and keyboard focus share one stronger blue state. */
.qbm-login-submit:hover,
.qbm-login-submit:focus-visible {
    background: #0b4862;
    outline: none;
}

/* Secondary login links keep account creation and verification close without looking like primary actions. */
.qbm-login-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    color: #425164;
    font-size: 0.9rem;
}

/* Link styling follows the same blue accent while staying lighter than the submit button. */
.qbm-login-links a {
    color: #0f5d7e;
    font-weight: 700;
    text-decoration: none;
}

/* Hover and focus states make secondary links discoverable for mouse and keyboard users. */
.qbm-login-links a:hover,
.qbm-login-links a:focus-visible {
    color: #0b4862;
    text-decoration: underline;
}

@media (max-width: 860px) {
    /* Mobile keeps the centered card reachable without introducing unnecessary width. */
    .qbm-login-page {
        align-items: center;
        padding: 28px 16px;
    }

    /* The shell remains a single column on tablets and phones. */
    .qbm-login-shell {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

@media (max-width: 480px) {
    /* Small screens reduce outer padding so inputs retain comfortable width. */
    .qbm-login-page {
        padding: 18px 14px;
    }

    /* The card uses less padding on phones while keeping the 8px radius standard. */
    .qbm-login-card {
        padding: 22px;
    }
}