@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;
}

.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;
}