/* Login Page Styles */

.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(135deg, var(--rz-primary-lighter) 0%, var(--rz-base-background-color) 60%, var(--rz-primary-lighter) 100%);
    padding: var(--crm-space-6);
}

.login-card {
    width: 100%;
    max-width: 28rem;
    background: var(--rz-base-background-color);
    border: 1px solid var(--rz-border-light);
    border-radius: var(--crm-border-radius-lg);
    box-shadow: var(--crm-shadow-xl);
    overflow: hidden;
}

.login-header {
    background: linear-gradient(135deg, var(--rz-primary-darker) 0%, var(--rz-primary) 100%);
    color: var(--rz-primary-contrast);
    padding: var(--crm-space-8) var(--crm-space-6);
    text-align: center;
}

.login-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: var(--crm-space-3);
    border: 1px solid color-mix(in srgb, var(--rz-primary-contrast) 50%, transparent);
    border-radius: 50%;
}

.login-eyebrow {
    display: block;
    margin-bottom: var(--crm-space-2);
    color: color-mix(in srgb, var(--rz-primary-contrast) 80%, transparent);
    font-size: var(--crm-font-size-xs);
    font-weight: var(--crm-font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

    .login-header h1 {
        margin: 0 0 var(--crm-space-2);
        font-size: var(--crm-font-size-2xl);
        font-weight: var(--crm-font-weight-bold);
    }

.login-subtitle {
    margin: 0;
    color: color-mix(in srgb, var(--rz-primary-contrast) 85%, transparent);
    font-size: var(--crm-font-size-sm);
}

.login-form-card {
    padding: var(--crm-space-6);
    border: none !important;
    box-shadow: none !important;
}

.form-group {
    margin-bottom: var(--crm-space-5);
}

    .form-group .rz-textbox,
    .form-group .rz-password {
        width: 100% !important;
        border-color: var(--rz-border) !important;
        border-radius: var(--crm-border-radius-md) !important;
        font-size: var(--crm-font-size-sm);
    }

        .form-group .rz-textbox:focus,
        .form-group .rz-password:focus {
            border-color: var(--rz-primary) !important;
            outline: none !important;
            box-shadow: 0 0 0 3px var(--rz-primary-lighter) !important;
        }

.btn-login {
    padding: var(--crm-space-3) var(--crm-space-5) !important;
    font-size: var(--crm-font-size-md) !important;
    font-weight: var(--crm-font-weight-semibold) !important;
    background: var(--rz-primary) !important;
    color: var(--rz-primary-contrast) !important;
    border: none !important;
    border-radius: var(--crm-border-radius-md) !important;
}

    .btn-login:hover:not(:disabled) {
        transform: translateY(-2px);
        box-shadow: var(--crm-shadow-md);
    }

.login-credentials {
    border-top: 1px solid var(--rz-border-light);
    padding-top: var(--crm-space-5);
    margin-top: var(--crm-space-5);
}

.credentials-list {
    background: var(--rz-primary-lighter);
    border: 1px solid var(--rz-border-light);
    border-radius: var(--crm-border-radius-md);
    padding: var(--crm-space-3);
}

.credential-item {
    color: var(--rz-text-color);
    font-size: var(--crm-font-size-xs);
    line-height: 1.6;
    margin-bottom: 8px;
    color: #333;
}

    .credential-item:last-child {
        margin-bottom: 0;
    }

.login-footer {
    text-align: center;
    padding: var(--crm-space-5);
    border-top: 1px solid var(--rz-border-light);
}

.w-100 {
    width: 100% !important;
}

.text-muted {
    color: var(--rz-text-color-muted);
}

.small {
    font-size: 0.875rem;
}