/*
 * Password + signature modal (local_quiz_password_verify).
 *
 * The modal is core's own save/cancel modal. theme_aust already skins the surface (.modal-content, header, footer,
 * backdrop, .form-control, .btn, .alert) from the AuST design tokens in light and dark, so this file only adds what
 * is specific to the signature gate: the "who / when / why" block, the field and the error. Every colour is a token
 * (with a fallback for a theme that does not define them), so it follows the light/dark switch with no
 * prefers-color-scheme rules of its own.
 */

.quiz-password-verify-modal .modal-dialog {
    max-width: 30rem;
}

.quiz-password-verify-modal .modal-title {
    white-space: normal;
}

/* The signature record the learner reads before signing. */
.quiz-password-verify-modal .qpv-context {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 0.5rem 1rem;
    margin: 0 0 1.25rem;
    padding: 0.875rem 1rem;
    background-color: var(--color-bg-subtle, rgb(0 0 0 / 4%));
    border: 1px solid var(--color-border-muted, rgb(0 0 0 / 12%));
    border-radius: var(--radius-md, 0.5rem);
    font-size: 0.875rem;
    line-height: 1.4;
}

.quiz-password-verify-modal .qpv-context__label {
    margin: 0;
    color: var(--color-text-muted, #6c757d);
    font-weight: var(--font-weight-medium, 500);
}

.quiz-password-verify-modal .qpv-context__value {
    margin: 0;
    min-width: 0;
    color: var(--color-text-strong, inherit);
    overflow-wrap: anywhere;
}

.quiz-password-verify-modal .qpv-field {
    margin-bottom: 0;
}

.quiz-password-verify-modal .qpv-field__label {
    display: block;
    margin-bottom: 0.375rem;
    color: var(--color-text-strong, inherit);
    font-weight: var(--font-weight-medium, 500);
}

.quiz-password-verify-modal .qpv-field__help {
    display: block;
    margin-top: 0.5rem;
    color: var(--color-text-muted, #6c757d);
    font-size: 0.8125rem;
    line-height: 1.4;
}

/* Core's show/hide toggle wraps the input in an input-group. */
.quiz-password-verify-modal .toggle-sensitive-wrapper .form-control {
    min-width: 0;
}

.quiz-password-verify-modal .toggle-sensitive-btn {
    color: var(--color-text-muted, inherit);
}

.quiz-password-verify-modal .qpv-error {
    margin-bottom: 1rem;
    padding: 0.625rem 0.875rem;
    /* Body text colour on a tinted danger surface: readable in light and dark, whatever the alert tokens do. */
    background-color: color-mix(in srgb, var(--color-danger, #dc3545) 14%, transparent);
    border: 1px solid var(--color-border-danger, var(--color-danger, #dc3545));
    border-inline-start-width: 4px;
    border-radius: var(--radius-md, 0.5rem);
    color: var(--color-text-strong, inherit);
    font-size: 0.875rem;
}

/*
 * Compact mode: short viewports (mobile portrait, keyboard up on a tablet). The card stays content-sized and is only
 * capped to the viewport; verify.js sets the real max-height from visualViewport, the only source that knows how
 * much room the keyboard takes.
 */
/* stylelint-disable declaration-no-important -- needed to override Bootstrap modal positioning when the on-screen keyboard reduces the viewport height */
@media (max-height: 500px) {
    .quiz-password-verify-modal .modal-dialog {
        max-width: 24rem;
        width: 95%;
        margin: 0.5rem auto !important;
    }

    .quiz-password-verify-modal .modal-content {
        font-size: 0.9rem;
        max-height: calc(100vh - 1rem);
        height: auto;
    }

    .quiz-password-verify-modal .modal-header {
        padding: 0.5rem 0.85rem;
    }

    .quiz-password-verify-modal .modal-title {
        font-size: 1.05rem;
        line-height: 1.2;
    }

    .quiz-password-verify-modal .modal-body {
        padding: 0.75rem 0.85rem;
        overflow-y: auto;
    }

    .quiz-password-verify-modal .modal-footer {
        padding: 0.5rem 0.85rem;
    }

    .quiz-password-verify-modal .qpv-context {
        margin-bottom: 0.75rem;
        padding: 0.5rem 0.75rem;
        gap: 0.25rem 0.75rem;
        font-size: 0.8125rem;
    }

    .quiz-password-verify-modal .qpv-field__label {
        margin-bottom: 0.25rem;
        font-size: 0.9rem;
    }

    .quiz-password-verify-modal .form-control {
        padding: 0.5rem 0.6rem;
        height: auto;
        font-size: 1rem;
    }

    .quiz-password-verify-modal .qpv-field__help {
        margin-top: 0.3rem;
        font-size: 0.75rem;
        line-height: 1.25;
    }

    .quiz-password-verify-modal .btn {
        padding: 0.4rem 0.8rem;
        font-size: 0.9rem;
    }
}

/* Phone landscape (ultra-short viewport): narrower card, no help blurb. */
@media (max-height: 380px) {
    .quiz-password-verify-modal .modal-dialog {
        max-width: 22rem;
    }

    .quiz-password-verify-modal .qpv-field__help {
        display: none;
    }
}

/* Narrow phones: stack label above value. */
@media (max-width: 420px) {
    .quiz-password-verify-modal .qpv-context {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .quiz-password-verify-modal .qpv-context__value {
        margin-bottom: 0.5rem;
    }
}

/*
 * Touch devices: anchor the dialog to the top of the viewport so it never ends up behind the on-screen keyboard,
 * and keep the field at 16px so iOS does not zoom the page when it gets focus.
 */
@media (pointer: coarse) {
    .quiz-password-verify-modal .modal-dialog {
        align-items: flex-start !important;
        margin: 0.25rem auto !important;
    }

    .quiz-password-verify-modal #verify-password {
        font-size: 16px;
    }
}
/* stylelint-enable declaration-no-important */

/*
 * styles.css (loaded on every page) keeps fixed dark colours for the previous interface. Here the theme's tokens
 * already follow the light/dark switch, so put the modal back on them.
 */
html[data-bs-theme] body .quiz-password-verify-modal .modal-content,
html:not([data-bs-theme]) body .quiz-password-verify-modal .modal-content {
    background-color: var(--modal-surface-bg);
    color: var(--color-text-default);
    border: 1px solid var(--modal-surface-border);
}

html[data-bs-theme] body .quiz-password-verify-modal .modal-header,
html[data-bs-theme] body .quiz-password-verify-modal .modal-footer,
html:not([data-bs-theme]) body .quiz-password-verify-modal .modal-header,
html:not([data-bs-theme]) body .quiz-password-verify-modal .modal-footer {
    border-color: var(--modal-surface-border);
}

html[data-bs-theme="light"] body .quiz-password-verify-modal .btn-close {
    filter: none;
}