/* CSS Variables for Input Component */
:root {
    /* Primary colors */
    --primary-gradient-start: #2575fc;
    --primary-gradient-end: #6a11cb;

    /* Background colors */
    --input-bg: white;
    --floating-label-bg: white;

    /* Text colors */
    --text-primary: #333;
    --text-secondary: #666;
    --text-muted: #888;

    /* Border and shadow colors */
    --border-color: #e0e0e0;
    --focus-shadow: rgba(37, 117, 252, 0.1);

    /* Status colors */
    --error-color: #dc3545;
    --error-bg: rgba(220, 53, 69, 0.1);
    --error-border: rgba(220, 53, 69, 0.2);
    --success-color: #28a745;
    --success-bg: rgba(40, 167, 69, 0.1);
    --success-border: rgba(40, 167, 69, 0.2);
    --disabled-color: #6c757d;
    --disabled-bg: #f8f9fa;

    /* Additional colors for input indicator variants */
    --info-color: #3b82f6;
    --info-bg: rgba(59, 130, 246, 0.1);
    --info-border: rgba(59, 130, 246, 0.2);
    --warning-color: #f59e0b;
    --warning-bg: rgba(245, 158, 11, 0.1);
    --warning-border: rgba(245, 158, 11, 0.2);
    --warning-text: #b45309;
}

/* Dark mode theme */
@media (prefers-color-scheme: dark) {
    :root {
        --primary-gradient-start: #3585ff;
        --input-bg: #2a2a3e;
        --floating-label-bg: #2a2a3e;
        --text-primary: #e0e0e0;
        --text-secondary: #b0b0b0;
        --text-muted: #808080;
        --border-color: #404050;
        --focus-shadow: rgba(53, 133, 255, 0.2);
        --error-color: #ff6b7a;
        --error-bg: rgba(255, 107, 122, 0.1);
        --error-border: rgba(255, 107, 122, 0.2);
        --success-color: #4ade80;
        --success-bg: rgba(74, 222, 128, 0.1);
        --success-border: rgba(74, 222, 128, 0.2);
        --disabled-color: #6c757d;
        --disabled-bg: #374151;

        /* Dark mode variants for input indicator */
        --info-color: #60a5fa;
        --info-bg: rgba(96, 165, 250, 0.1);
        --info-border: rgba(96, 165, 250, 0.2);
        --warning-color: #fbbf24;
        --warning-bg: rgba(251, 191, 36, 0.1);
        --warning-border: rgba(251, 191, 36, 0.2);
        --warning-text: #d97706;
    }
}

/* Input field container */
.input-field {
    position: relative;
    width: 100%;
}

/* Input Element */
.inputElement {
    width: 100%;
    padding: 16px;
    border: 2px solid var(--border-color);
    border-radius: 10px;
    font-size: 16px;
    transition: all 0.3s ease;
    background: var(--input-bg);
    color: var(--text-primary);
    font-family: inherit;
    padding-right: 45px; /* Space for toggle button */
}

/* Input with left icon - adjust padding */
.input-field.has-left-icon .inputElement {
    padding-left: 45px;
}

.inputElement:focus {
    border-color: var(--primary-gradient-start);
    outline: none;
    box-shadow: 0 0 0 3px var(--focus-shadow);
}

/* Disabled state */
.inputElement:disabled {
    background-color: var(--disabled-bg);
    border-color: var(--disabled-color);
    color: var(--disabled-color);
    cursor: not-allowed;
    opacity: 1;
}

/* Error state */
.inputElement.is-invalid {
    border-color: var(--error-color) !important;
    box-shadow: 0 0 0 3px var(--error-bg) !important;
}

/* Valid state */
.inputElement.is-valid {
    border-color: var(--success-color) !important;
    box-shadow: 0 0 0 3px var(--success-bg) !important;
}

/* Floating Label */
.floating-label {
    position: absolute;
    left: 16px;
    top: 16px;
    color: var(--text-muted);
    font-size: 16px;
    transition: all 0.25s ease;
    pointer-events: none;
    background-color: var(--floating-label-bg);
    padding: 0 5px;
    font-weight: 400;
    z-index: 1;
}

/* Floating label with left icon - adjust position */
.input-field.has-left-icon .floating-label {
    left: 45px;
}

/* Floating behavior - when input has content */
.inputElement:not(:placeholder-shown) + .floating-label {
    top: -10px;
    left: 15px;
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 600;
}

/* Floating behavior - when input is focused */
.inputElement:focus + .floating-label {
    top: -10px;
    left: 15px;
    font-size: 12px;
    color: var(--primary-gradient-start);
    font-weight: 600;
}

/* Floating label when floating up (with left icon) */
.input-field.has-left-icon .inputElement:not(:disabled):not(:placeholder-shown) + .floating-label,
.input-field.has-left-icon .inputElement:not(:disabled):focus + .floating-label,
.input-field.has-left-icon .inputElement:not(:disabled).label-floating + .floating-label {
    left: 44px;
}

/* JavaScript-controlled floating */
.inputElement.label-floating + .floating-label {
    top: -10px;
    left: 15px;
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 600;
}

/* Blue color when focused AND floating */
.inputElement.label-floating:focus + .floating-label {
    color: var(--primary-gradient-start);
}

/* Error label state - takes priority */
.floating-label.invalid {
    color: var(--error-color) !important;
}

/* Valid label state */
.floating-label.valid {
    color: var(--success-color) !important;
}

/* DISABLED LABEL - ALWAYS PLACEHOLDER BEHAVIOR - ALL COMBINATIONS */
.inputElement:disabled + .floating-label,
.inputElement:disabled:focus + .floating-label,
.inputElement:disabled:not(:placeholder-shown) + .floating-label,
.inputElement:disabled.label-floating + .floating-label,
.inputElement:disabled:hover + .floating-label,
.inputElement:disabled:active + .floating-label {
    top: 16px !important;
    left: 16px !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: var(--disabled-color) !important;
    background-color: var(--disabled-bg) !important;
    padding: 0 4px !important;
}

/* Disabled floating label with left icon */
.input-field.has-left-icon .inputElement:disabled + .floating-label,
.input-field.has-left-icon .inputElement:disabled:not(:placeholder-shown) + .floating-label,
.input-field.has-left-icon .inputElement:disabled:focus + .floating-label,
.input-field.has-left-icon .inputElement:disabled.label-floating + .floating-label,
.input-field.has-left-icon .inputElement:disabled:hover + .floating-label,
.input-field.has-left-icon .inputElement:disabled:active + .floating-label {
    left: 45px !important;
}

/* Left Icon positioning */
.input-left-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 16px;
    z-index: 2;
    transition: color 0.3s ease;
    pointer-events: none;
}

/* Left icon when input is focused */
.input-field:focus-within .input-left-icon {
    color: var(--primary-gradient-start);
}

/* Left icon when input is disabled */
.input-field .inputElement:disabled ~ .input-left-icon {
    color: var(--disabled-color);
}

/* Toggle button */
.toggle-button {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 16px;
    transition: color 0.3s ease;
    z-index: 2;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toggle-button:hover {
    color: var(--primary-gradient-start);
}

.toggle-button:disabled {
    color: var(--disabled-color);
    cursor: not-allowed;
}

/* Form Group */
.input-form-group {
    margin-bottom: 24px;
    position: relative;
}

/* Input Indicator - modern message under input */
.input-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    padding: 8px 12px;
    background-color: var(--success-bg);
    border: 1px solid var(--success-border);
    border-radius: 6px;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.4;
}

.input-indicator i {
    color: var(--primary-gradient-start);
    font-size: 12px;
    flex-shrink: 0;
}

.input-indicator span {
    flex: 1;
}

/* Input indicator variants */
.input-indicator.info {
    background-color: var(--info-bg);
    border-color: var(--info-border);
    color: var(--info-color);
}

.input-indicator.warning {
    background-color: var(--warning-bg);
    border-color: var(--warning-border);
    color: var(--warning-text);
}

.input-indicator.error {
    background-color: var(--error-bg);
    border-color: var(--error-border);
    color: var(--error-color);
}

/* Input requirements */
.input-requirements {
    margin-top: 8px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.requirement {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    font-size: 12px;
    transition: color 0.3s ease;
    opacity: 0.8;
}

.requirement i {
    font-size: 8px;
    transition: color 0.3s ease;
}

.requirement.met {
    color: var(--success-color);
    opacity: 1;
}

.requirement.met i {
    color: var(--success-color);
}

/* Input match indicator */
.input-match-indicator {
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    display: none;
    transition: all 0.3s ease;
}

.input-match-indicator.match {
    background-color: var(--success-bg);
    color: var(--success-color);
    border: 1px solid var(--success-border);
    display: block;
}

.input-match-indicator.no-match {
    background-color: var(--error-bg);
    color: var(--error-color);
    border: 1px solid var(--error-border);
    display: block;
}

/* Responsive Design */
@media (max-width: 480px) {
    .inputElement {
        font-size: 14px;
        padding: 14px;
    }

    .input-field .inputElement {
        padding-right: 40px;
    }

    .input-field.has-left-icon .inputElement {
        padding-left: 40px;
    }

    .floating-label {
        font-size: 14px;
    }

    .input-field.has-left-icon .floating-label {
        left: 40px;
    }

    .inputElement:not(:placeholder-shown) + .floating-label,
    .inputElement:focus + .floating-label,
    .inputElement.label-floating + .floating-label,
    .floating-label.invalid,
    .floating-label.valid {
        font-size: 12px;
    }

    .input-field.has-left-icon .inputElement:not(:disabled):not(:placeholder-shown) + .floating-label,
    .input-field.has-left-icon .inputElement:not(:disabled):focus + .floating-label,
    .input-field.has-left-icon .inputElement:not(:disabled).label-floating + .floating-label {
        left: 39px;
    }

    .input-field.has-left-icon .inputElement:disabled + .floating-label,
    .input-field.has-left-icon .inputElement:disabled:not(:placeholder-shown) + .floating-label,
    .input-field.has-left-icon .inputElement:disabled:focus + .floating-label,
    .input-field.has-left-icon .inputElement:disabled.label-floating + .floating-label,
    .input-field.has-left-icon .inputElement:disabled:hover + .floating-label,
    .input-field.has-left-icon .inputElement:disabled:active + .floating-label {
        left: 40px !important;
    }

    .left-icon {
        left: 14px;
        font-size: 14px;
    }

    .toggle-button {
        right: 14px;
        width: 18px;
        height: 18px;
        font-size: 14px;
    }

    .input-requirements {
        grid-template-columns: 1fr;
    }

    .input-indicator {
        font-size: 12px;
        padding: 6px 10px;
    }
}

/*######################################*/
/* Shake animation for errors - ADD ONLY THIS */
.shake-error {
    animation: shake 0.6s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-20px); }
    20%, 40%, 60%, 80% { transform: translateX(20px); }
}

/* Optional: Error highlight for form groups */
.error-highlight {
    background-color: rgba(220, 53, 69, 0.05);
    border-radius: 8px;
    padding: 10px;
    transition: background-color 0.3s ease;
}