/* ========================================
   PASSWORD RESET PAGES STYLES
   SPARK Enterprise Design System
   
   Design Principles:
   - Flat design, no gradients (except primary actions)
   - 2px border-radius maximum
   - 1px solid borders
   - Professional color palette
   - No decorative elements
   ======================================== */

/* Color Variables - SPARK Enterprise Palette */
:root {
    --color-primary: #0078d4;
    --color-primary-hover: #106ebe;
    --color-success: #107c10;
    --color-danger: #d13438;
    --color-warning: #ffb900;
    --color-bg: #fafafa;
    --color-surface: #ffffff;
    --color-border: #e0e0e0;
    --color-text: #323130;
    --color-text-secondary: #605e5c;
    --color-text-light: #8a8886;
}

/* Input wrapper with icon */
.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.input-wrapper input {
    width: 100%;
    height: 36px;
    padding: 0 0.75rem;
    /* Override login.css generic !important padding for icon-leading inputs */
    padding-left: 2.5rem !important;
    padding-right: 2.75rem !important;
    border: 1px solid var(--color-border);
    border-radius: 2px;
    font-size: 0.875rem;
    color: var(--color-text);
    background: var(--color-surface);
    transition: border-color 0.15s ease;
}

.input-wrapper input:focus {
    outline: none;
    border-color: var(--color-primary);
}

.input-wrapper input::placeholder {
    color: var(--color-text-light);
}

.input-icon {
    position: absolute;
    left: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    z-index: 1;
    pointer-events: none;
}

.input-wrapper .password-toggle-btn {
    position: absolute;
    right: 0.5rem;
    background: transparent;
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    padding: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease;
    font-size: 0.875rem;
}

.input-wrapper .password-toggle-btn:hover {
    color: var(--color-primary);
}

/* Back to login link */
.back-to-login {
    text-align: center;
    margin-top: 1.25rem;
}

.back-to-login a {
    color: var(--color-primary);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    transition: color 0.15s ease;
}

.back-to-login a:hover {
    color: var(--color-primary-hover);
}

.back-to-login a i {
    font-size: 0.75rem;
}

/* Success message box - SPARK Flat Design */
.success-message {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-success);
    border-radius: 2px;
    padding: var(--spacing-6);
    text-align: center;
    margin: 1.25rem 0;
}

.success-icon {
    width: 48px;
    height: 48px;
    background: rgba(16, 124, 16, 0.1);
    border: 1px solid var(--color-success);
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem auto;
}

.success-icon i {
    font-size: 1.25rem;
    color: var(--color-success);
}

.success-text {
    color: var(--color-text);
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
    margin: 0 0 0.5rem 0;
    line-height: 1.5;
}

.success-hint {
    color: var(--color-text-secondary);
    font-size: 0.8125rem;
    margin: 0;
    line-height: 1.4;
}

/* Error message box - SPARK Flat Design */
.error-box {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-danger);
    border-radius: 2px;
    padding: var(--spacing-6);
    text-align: center;
    margin: 1.25rem 0;
}

.error-icon {
    width: 48px;
    height: 48px;
    background: rgba(209, 52, 56, 0.1);
    border: 1px solid var(--color-danger);
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem auto;
}

.error-icon i {
    font-size: 1.25rem;
    color: var(--color-danger);
}

.error-text {
    color: var(--color-text);
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
    margin: 0 0 0.5rem 0;
    line-height: 1.5;
}

.error-hint {
    color: var(--color-text-secondary);
    font-size: 0.8125rem;
    margin: 0;
    line-height: 1.4;
}

/* Info box - SPARK Flat Design */
.info-box {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-primary);
    border-radius: 2px;
    padding: 0.875rem 1rem;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin: 1rem 0;
}

.info-box i {
    color: var(--color-primary);
    font-size: 0.875rem;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.info-box span {
    color: var(--color-text-secondary);
    font-size: 0.8125rem;
    line-height: 1.4;
}

/* Password requirements - SPARK Flat Design */
.password-requirements {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 2px;
    padding: 0.875rem 1rem;
    margin-bottom: 1.25rem;
}

.requirements-title {
    color: var(--color-text);
    font-size: 0.75rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 0.625rem 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.requirements-title i {
    color: var(--color-primary);
    font-size: 0.75rem;
}

.requirements-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.requirements-list li {
    color: var(--color-text-secondary);
    font-size: 0.8125rem;
    padding: 0.25rem 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    transition: color 0.15s ease;
}

.requirements-list li i {
    font-size: 0.375rem;
    color: var(--color-border);
    transition: color 0.15s ease;
}

.requirements-list li.valid {
    color: var(--color-success);
}

.requirements-list li.valid i {
    color: var(--color-success);
}

/* Primary Action Button - SPARK Style */
.btn-spark-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    height: 36px;
    padding: 0 1.25rem;
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
    color: #ffffff;
    background: var(--color-primary);
    border: none;
    border-radius: 2px;
    cursor: pointer;
    transition: background 0.15s ease;
    text-decoration: none;
}

.btn-spark-primary:hover {
    background: var(--color-primary-hover);
    color: #ffffff;
}

/* Override login.css button styles for password reset pages */
#reset-btn,
.password-reset-btn {
    height: 36px;
    border-radius: 2px !important;
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
    background: var(--color-primary) !important;
}

#reset-btn:hover,
.password-reset-btn:hover {
    background: var(--color-primary-hover) !important;
}

/* Page-specific overrides */
.login-form-container .header h1 {
    font-size: 1.25rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin-bottom: 0.5rem;
}

.login-form-container .description {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

/* Footer adjustments */
.login-form-container .footer {
    font-size: 0.75rem;
    color: var(--color-text-light);
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}

/* Mobile responsive adjustments */
@media screen and (max-width: 767px) {

    .success-message,
    .error-box {
        padding: 1.25rem 1rem;
    }

    .success-icon,
    .error-icon {
        width: 44px;
        height: 44px;
    }

    .success-icon i,
    .error-icon i {
        font-size: 1.125rem;
    }

    .password-requirements {
        padding: 0.75rem;
    }

    .info-box {
        padding: 0.75rem;
    }

    .input-wrapper input {
        height: 40px;
        /* Larger touch targets */
    }
}