@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../webfonts/Inter/static/Inter_24pt-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../webfonts/Inter/static/Inter_24pt-SemiBold.ttf') format('truetype');
}

* {
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background-color: var(--pz-surface);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    padding: 20px;
}

.login-container {
    width: 100%;
    max-width: 400px;
    text-align: center;
}

.login-header {
    margin-bottom: 2rem;
}

.logo {
    width: 48px;
    height: 48px;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-favicon {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.login-title {
    color: var(--pz-text);
    font-size: 1.875rem;
    font-weight: var(--pz-weight-semibold);
    margin: 0;
}

/* Make the login display name visually consistent with other modal/section headings */

.form-group {
    margin-bottom: 1.5rem;
    text-align: left;
}

label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--pz-text-secondary);
    font-weight: var(--pz-weight-semibold);
    font-size: 0.875rem;
}

input[type="text"],
input[type="password"] {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 1px solid var(--pz-border-light);
    border-radius: var(--pz-radius-lg);
    font-size: 1rem;
    font-family: inherit;
    transition: all 0.2s ease;
    background: var(--pz-bg);
}

.password-wrapper {
    position: relative;
    width: 100%;
}

.password-wrapper input {
    padding-right: 3rem !important;
}

.password-toggle {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0.5rem;
    margin: 0;
    color: var(--pz-text-subtle);
    cursor: pointer;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    outline: none;
}

.password-toggle:hover,
.password-toggle:focus {
    color: var(--pz-text-secondary);
}

.password-toggle i {
    font-size: 1.1rem;
}

input[type="text"]:focus,
input[type="password"]:focus {
    outline: none;
    border-color: var(--pz-accent-text);
    box-shadow: 0 0 0 3px rgba(var(--pz-accent-rgb), 0.12);
}

input[type="text"]::placeholder,
input[type="password"]::placeholder {
    color: var(--pz-text-subtle);
}

.remember-me-group {
    margin-bottom: 1rem;
}

.remember-me-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-weight: var(--pz-weight-normal);
    color: var(--pz-text-secondary);
    font-size: 0.875rem;
    margin-bottom: 0;
}

.remember-me-label input[type="checkbox"] {
    width: auto;
    margin-right: 0.5rem;
    cursor: pointer;
}

.remember-me-label span {
    user-select: none;
}

.remember-me-unified {
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    text-align: center;
}

.remember-me-unified .remember-me-label {
    justify-content: center;
}

.oidc-divider {
    text-align: center;
    margin: 1.25rem 0;
    position: relative;
}

.oidc-divider::before,
.oidc-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 42%;
    height: 1px;
    background: var(--pz-border-light);
}

.oidc-divider::before {
    left: 0;
}

.oidc-divider::after {
    right: 0;
}

.oidc-divider span {
    color: var(--pz-text-muted);
    font-size: 0.875rem;
    font-weight: var(--pz-weight-medium);
    /* Same fill as body, so the label reads as a gap in the rule, not a chip. */
    background: var(--pz-chrome-bg);
    padding: 0 0.75rem;
    position: relative;
}

.login-button {
    width: 100%;
    padding: 0.875rem 1rem;
    background: var(--pz-accent);
    color: var(--pz-text-inverse);
    /* Transparent rather than none, so the outlined variants below keep the
       same height as the filled ones. */
    border: 1px solid transparent;
    border-radius: var(--pz-radius-lg);
    font-size: 1rem;
    font-weight: var(--pz-weight-normal);
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 0.5rem;
}

.oidc-button {
    display: block;
    text-decoration: none;
    text-align: center;
    background: var(--pz-text);
    margin-top: 0.75rem;
}

/* Doubled class: .login-button:hover further down would otherwise repaint the
   SSO button with the accent colour on hover and while it is pressed. */
.oidc-button.oidc-button:hover {
    background: color-mix(in srgb, var(--pz-text) 85%, rgb(var(--pz-shadow-rgb)));
}

/* Secondary variant shown when a previous SSO account is remembered.
   Doubled class keeps these rules above .login-button:hover below. */
.oidc-other-account-button.oidc-other-account-button {
    background: transparent;
    color: var(--pz-text);
    border: 1px solid var(--pz-border-strong);
}

.oidc-other-account-button.oidc-other-account-button:hover {
    background: rgba(var(--pz-shadow-rgb), 0.06);
    border-color: var(--pz-text-subtle);
}

.oidc-other-account-button[hidden] {
    display: none;
}

/* Tapped SSO button: the provider's page can take a second to show up on a
   phone, so the button says the tap was taken. Armed by the inline script in
   login.php, which runs before the first paint: js/login-page.js can still be
   on its way when the button is tapped right after a release. */
.oidc-button.is-loading::before {
    content: '';
    display: inline-block;
    width: 0.95rem;
    height: 0.95rem;
    margin-right: 0.5rem;
    vertical-align: -0.15rem;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: var(--pz-radius-circle);
    animation: spin 0.8s linear infinite;
}

/* A second tap would restart the flow for nothing (new state and nonce). */
.oidc-button.is-loading {
    pointer-events: none;
}

/* The spin is the whole message, so it is slowed down rather than dropped. */
@media (prefers-reduced-motion: reduce) {
    .oidc-button.is-loading::before {
        animation-duration: 2s;
    }
}

@keyframes spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.login-button:hover {
    background: var(--pz-accent-hover);
}

.login-button:active {
    transform: translateY(1px);
}

.account-select-panel {
    text-align: left;
}

.account-select-intro {
    color: var(--pz-text-secondary);
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0 0 1rem;
    text-align: center;
}

.account-select-error {
    margin: 0 0 1rem;
    text-align: center;
}

.account-select-form {
    margin: 0;
}

.account-select-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.account-option {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--pz-border-light);
    border-radius: var(--pz-radius-lg);
    background: var(--pz-bg);
    color: var(--pz-text);
    font: inherit;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.account-option:hover,
.account-option:focus {
    border-color: var(--pz-accent-text);
    background: var(--pz-surface);
    outline: none;
}

.account-option:active {
    transform: translateY(1px);
}

.account-option-name {
    min-width: 0;
    overflow-wrap: anywhere;
    font-weight: var(--pz-weight-semibold);
}

.account-option-badge {
    flex: 0 0 auto;
    padding: 0.2rem 0.45rem;
    border-radius: var(--pz-radius-sm);
    background: var(--pz-accent-soft);
    color: var(--pz-accent);
    font-size: 0.75rem;
    font-weight: var(--pz-weight-semibold);
}

.account-select-logout {
    display: block;
    margin-top: 1rem;
    color: var(--pz-text-secondary);
    font-size: 0.9rem;
    text-align: center;
    text-decoration: none;
}

.account-select-logout:hover {
    color: var(--pz-accent-strong);
    text-decoration: underline;
}

/* Two-factor step (login.php): one code field, then two quiet links. */
.totp-code-input {
    text-align: center;
    letter-spacing: 0.2em;
    font-variant-numeric: tabular-nums;
}

.totp-code-input::placeholder {
    letter-spacing: normal;
}

.totp-cancel-form {
    margin: 0.5rem 0 0;
    text-align: center;
}

.totp-cancel-button {
    padding: 0;
    border: 0;
    background: none;
    color: var(--pz-text-secondary);
    font: inherit;
    font-size: 0.9rem;
    cursor: pointer;
}

.totp-cancel-button:hover {
    color: var(--pz-accent-strong);
    text-decoration: underline;
}

/* Two-factor setup required by the administrator, then the recovery codes.
   The QR code SVG paints its own white ground and quiet zone, so it stays
   black on white in the dark themes: several authenticator apps refuse an
   inverted code. */
.totp-enroll-panel,
.totp-enrolled-panel {
    text-align: left;
}

.totp-enroll-help {
    margin: 0 0 1rem;
    text-align: center;
    color: var(--pz-text-secondary);
    font-size: 0.875rem;
    line-height: 1.5;
}

.totp-enroll-qr {
    width: 200px;
    max-width: 100%;
    margin: 0 auto 1rem;
    border-radius: var(--pz-radius-lg);
    overflow: hidden;
    line-height: 0;
}

.totp-enroll-qr svg {
    display: block;
    width: 100%;
    height: auto;
}

.totp-enroll-secret-row,
.totp-recovery-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 1.5rem;
}

.totp-enroll-secret {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    white-space: nowrap;
    padding: 0.5rem 0.75rem;
    border-radius: var(--pz-radius-lg);
    background: var(--pz-surface-sunken);
    color: var(--pz-text);
    font-family: monospace;
    font-size: 0.9rem;
    user-select: all;
}

.totp-copy-button {
    flex: 0 0 auto;
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--pz-border-strong);
    border-radius: var(--pz-radius-lg);
    background: transparent;
    color: var(--pz-text);
    font: inherit;
    font-size: 0.875rem;
    cursor: pointer;
}

.totp-copy-button:hover {
    background: rgba(var(--pz-shadow-rgb), 0.06);
}

.totp-recovery-list {
    list-style: none;
    margin: 0 0 0.75rem;
    padding: 0.75rem 1rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem 1rem;
    border: 1px solid var(--pz-border);
    border-radius: var(--pz-radius-lg);
    background: var(--pz-bg);
}

.totp-recovery-list code {
    color: var(--pz-text);
    font-family: monospace;
    font-size: 0.95rem;
    user-select: all;
}

.totp-continue-button {
    display: block;
    text-align: center;
    text-decoration: none;
}

.error {
    color: var(--pz-danger-text);
    margin-top: 0.5rem;
    font-size: 0.875rem;
    font-weight: var(--pz-weight-medium);
    text-align: left;
}

.admin-warning {
    background: var(--pz-surface);
    border: 1px solid var(--pz-danger-soft);
    color: var(--pz-danger-hover);
    padding: 1rem;
    border-radius: var(--pz-radius-lg);
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
    text-align: left;
    line-height: 1.5;
}

.admin-warning code {
    background: var(--pz-danger-soft);
    color: var(--pz-danger-hover);
    padding: 0.125rem 0.25rem;
    border-radius: var(--pz-radius-sm);
    font-weight: var(--pz-weight-semibold);
}

.info {
    margin-top: 2rem;
    padding: 1rem;
    background: var(--pz-surface);
    border: 1px solid var(--pz-border-light);
    border-radius: var(--pz-radius-lg);
    font-size: 0.875rem;
    color: var(--pz-text-secondary);
    line-height: 1.5;
    text-align: left;
}

/* Shown above the form when js/session-guard.js brought the user here */
.session-expired-notice {
    margin-top: 0;
    margin-bottom: 1.5rem;
}

.info a {
    color: var(--pz-accent-text);
    text-decoration: none;
}

.info a:hover {
    text-decoration: underline;
}

.info code {
    background: var(--pz-surface-hover);
    padding: 0.125rem 0.25rem;
    border-radius: var(--pz-radius-sm);
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
    font-size: 0.8125rem;
}

.github-link {
    margin-top: 1rem !important;
    padding-top: 0.75rem;
    /* "Powered by", next to the link, on an instance with its own logo or title */
    color: var(--pz-text-muted);
    /* border-top: 1px solid #e2e8f0; */
}

.github-link a {
    color: var(--pz-accent-text);
    text-decoration: none;
    font-weight: var(--pz-weight-medium);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: color 0.2s ease;
}

.github-link a:hover {
    color: var(--pz-accent-strong);
    text-decoration: underline;
}

.github-link i {
    font-size: 1rem;
}

/* ============================================
   Dark Mode (Login Page)
   ============================================ */

:where(html[data-theme='dark']) body {
    background-color: var(--pz-chrome-bg);
    color: var(--pz-text);
}

:where(html[data-theme='dark']) label,
html[data-theme='dark'] .remember-me-label {
    color: var(--pz-text);
}

:where(html[data-theme='dark']) input[type="text"],
:where(html[data-theme='dark']) input[type="password"] {
    background-color: var(--pz-surface);
    border-color: var(--pz-border);
}

html[data-theme='dark'] .password-toggle:hover {
    color: var(--pz-text-strong);
}

html[data-theme='dark'] input[type="text"]:focus,
html[data-theme='dark'] input[type="password"]:focus {
    border-color: var(--pz-accent-text);
    box-shadow: 0 0 0 3px rgba(var(--pz-accent-text-rgb), 0.18);
}

html[data-theme='dark'] .github-link a {
    color: var(--pz-accent-text);
}

html[data-theme='dark'] .github-link a:hover {
    color: var(--pz-accent-text);
}

html[data-theme='dark'] .admin-warning {
    background: rgba(197, 48, 48, 0.1);
    border-color: var(--pz-danger-text-hover);
    color: var(--pz-danger-text);
}

html[data-theme='dark'] .admin-warning code {
    background: rgba(254, 215, 215, 0.2);
    color: var(--pz-text-inverse);
}

html[data-theme='dark'] .account-select-logout:hover {
    color: var(--pz-accent-text);
}

html[data-theme='dark'] .account-option {
    background: var(--pz-surface);
    border-color: var(--pz-border);
}

html[data-theme='dark'] .account-option:hover,
html[data-theme='dark'] .account-option:focus {
    background: var(--pz-surface-hover);
    border-color: var(--pz-accent-text);
}

html[data-theme='dark'] .account-option-badge {
    background: rgba(var(--pz-accent-text-rgb), 0.16);
    color: var(--pz-accent-text-hover);
}

html[data-theme='dark'] .oidc-divider::before,
html[data-theme='dark'] .oidc-divider::after {
    background: var(--pz-border-strong);
}

html[data-theme='dark'] .oidc-divider span {
    background: var(--pz-chrome-bg);
}

/* The base rule fills the button with --pz-text and labels it --pz-text-inverse.
   Both flip in dark mode, which would put a near-white slab right under the
   accent button. A raised surface keeps the SSO button one visual step below
   the primary action and stays in the theme's own palette. */
html[data-theme='dark'] .oidc-button {
    background: var(--pz-surface-sunken);
    color: var(--pz-text-strong);
    border-color: var(--pz-border-strong);
}

html[data-theme='dark'] .oidc-button:hover {
    background: color-mix(in srgb, var(--pz-surface-sunken) 85%, var(--pz-text-strong));
    border-color: var(--pz-text-subtle);
}

html[data-theme='dark'] .oidc-other-account-button {
    background: transparent;
    color: var(--pz-text-strong);
    border-color: var(--pz-border-strong);
}

html[data-theme='dark'] .oidc-other-account-button:hover {
    background: rgba(var(--pz-highlight-rgb), 0.06);
}

/* Responsive Design */
@media (max-width: 800px) {
    body {
        padding: 16px;
    }

    .login-header {
        margin-bottom: 2rem;
    }

    .logo {
        width: 40px;
        height: 40px;
    }

    .logo-favicon {
        width: 40px;
        height: 40px;
    }

    .login-title {
        font-size: 1.5rem;
    }

    .info {
        font-size: 0.8125rem;
    }

}

/* ===========================================
   UTILITY CLASSES FOR INLINE STYLE EXTRACTION
   =========================================== */

/* OIDC error message */
.oidc-error {
    margin-top: 0.75rem;
    text-align: center;
}