/**
 * identity-theme.css
 * P-MEX styling for the Identity Razor Pages (Register, ResetPassword, 2FA, Manage, …).
 * These pages cannot use Radzen components because they're MVC Razor Pages —
 * so we paint on top of Bootstrap with the same brand palette as the Blazor app.
 *
 * All design tokens (--pci-*) come from theme-tokens.css — load it BEFORE this file.
 * Do not redefine brand colours here; change them in theme-tokens.css (see DESIGN.md).
 */

body.pci-identity {
    background-color: var(--pci-surface);
    color: var(--pci-text);
    font-family: var(--pci-font-family);
    min-height: 100vh;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

body.pci-identity::before {
    content: '';
    position: fixed;
    inset: 0;
    background: url('/images/login_partial_background.jpg') center/cover no-repeat;
    opacity: 0.22;
    z-index: -1;
}

.pci-identity-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 1rem;
    min-height: 100vh;
}

.pci-identity-header {
    width: 100%;
    max-width: 960px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 1.5rem;
}

.pci-identity-header img {
    height: 52px;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 6px 12px;
    border-radius: var(--pci-radius-sm);
    box-shadow: var(--pci-shadow-sm);
}

.pci-identity-card {
    width: 100%;
    max-width: 400px;
    background-color: var(--pci-card-bg);
    border-radius: var(--pci-radius-lg);
    box-shadow: var(--pci-shadow);
    padding: 2rem 2rem 1.75rem;
    margin-bottom: 1.25rem;
}

/* Wider variant for content-heavy pages (Manage index, Register). */
.pci-identity-card.pci-identity-card-wide {
    max-width: 720px;
}

.pci-identity-card .pci-card-logo {
    display: block;
    width: 70%;
    margin: 0 auto 1.5rem;
}

.pci-identity-card h2,
.pci-identity-card h4 {
    color: var(--pci-primary);
    font-weight: 600;
    margin-bottom: 1.25rem;
    text-align: center;
}

.pci-identity-card h2 {
    font-size: 1.5rem;
}

.pci-identity-card hr {
    border-color: var(--pci-border);
    margin: 0.5rem 0 1.25rem;
}

/* Form fields */
.pci-identity-card .form-floating {
    margin-bottom: 0.75rem;
}

.pci-identity-card .form-control {
    border-radius: var(--pci-radius-sm);
}

.pci-identity-card .form-floating > .form-control:focus,
.pci-identity-card .form-floating > .form-control:not(:placeholder-shown) {
    border-color: var(--pci-primary);
}

.pci-identity-card .form-floating > .form-control:focus {
    box-shadow: 0 0 0 0.2rem rgba(21, 82, 156, 0.15);
}

.pci-identity-card .form-floating > label {
    color: var(--pci-text-muted);
}

/* Buttons — primary becomes P-MEX blue */
.pci-identity-card .btn-primary,
.pci-identity-card button.btn-primary {
    background-color: var(--pci-primary);
    border-color: var(--pci-primary);
    border-radius: var(--pci-radius-sm);
    font-weight: 500;
    padding: 0.65rem 1rem;
    transition: background-color var(--pci-transition), transform var(--pci-transition), box-shadow var(--pci-transition);
}

.pci-identity-card .btn-primary:hover,
.pci-identity-card .btn-primary:focus {
    background-color: var(--pci-primary-dark);
    border-color: var(--pci-primary-dark);
    transform: translateY(-1px);
    box-shadow: var(--pci-shadow-brand);
}

.pci-identity-card .btn-warning {
    background-color: var(--pci-warning);
    border-color: var(--pci-warning);
    color: #333;
    font-weight: 500;
    padding: 0.65rem 1rem;
}

.pci-identity-card .btn-warning:hover {
    background-color: var(--pci-warning-dark);
    border-color: var(--pci-warning-dark);
}

/* Modal header in brand blue */
.modal-header {
    background-color: var(--pci-primary);
    color: #fff;
}

.modal-header .btn-close {
    filter: invert(1);
}

/* Footer */
.pci-identity-footer {
    width: 100%;
    max-width: 960px;
    margin-top: auto;
    padding-top: 1.5rem;
    color: var(--pci-text-muted);
    font-size: 0.9rem;
}

.pci-identity-footer a {
    color: var(--pci-primary);
}

.pci-identity-footer a:hover {
    color: var(--pci-primary-dark);
}

@media (max-width: 480px) {
    .pci-identity-card {
        padding: 1.5rem 1.25rem;
    }
}