/**
 * Floating Labels System for Zakharov CRM
 * Supports: input, textarea, select
 * Triggers: focus, filled value, autofill (NO HOVER FLOAT)
 * Themes: default (light CRM theme), dark theme (.glass-card .floating-field, .floating-field.dark)
 */

/* ==========================================================================
   1. BASE FLOATING CONTAINER (.floating-field)
   ========================================================================== */
.floating-field,
.field-floating,
.qi, .qs {
    position: relative;
    width: 100%;
    display: block;
}

/* Hide native placeholder so the floating label acts as the visual placeholder */
.floating-field input::placeholder,
.floating-field textarea::placeholder,
.field-floating input::placeholder,
.field-floating textarea::placeholder,
.qi input::placeholder,
.qi textarea::placeholder,
.qs select::placeholder {
    color: transparent !important;
    opacity: 0 !important;
}
.floating-field input::-webkit-input-placeholder,
.floating-field textarea::-webkit-input-placeholder,
.qi input::-webkit-input-placeholder,
.qi textarea::-webkit-input-placeholder {
    color: transparent !important;
    opacity: 0 !important;
}
.floating-field input::-moz-placeholder,
.floating-field textarea::-moz-placeholder,
.qi input::-moz-placeholder,
.qi textarea::-moz-placeholder {
    color: transparent !important;
    opacity: 0 !important;
}

/* ==========================================================================
   2. CONTROLS (INPUT, TEXTAREA, SELECT)
   ========================================================================== */
.floating-field input,
.floating-field textarea,
.floating-field select,
.field-floating input,
.field-floating textarea,
.field-floating select,
.qi input,
.qi textarea,
.qs select,
.qi select {
    display: block;
    width: 100%;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

/* Select arrow styling */
.floating-field select,
.field-floating select,
.qs select,
.qi select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 10px 10px;
}

/* ==========================================================================
   3. FLOATING LABEL
   ========================================================================== */
.floating-field label,
.field-floating label,
.qi label,
.qs label {
    display: block;
    position: absolute;
    left: 12px;
    top: 11px;
    margin: 0;
    padding: 0 4px;
    font-size: 13px;
    line-height: 16px;
    pointer-events: none;
    user-select: none;
    z-index: 5;
    white-space: nowrap;
    border-radius: 3px;
    transition: top 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                font-size 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                background-color 0.2s ease,
                transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: left top;
}

/* ==========================================================================
   4. LIGHT THEME (DEFAULT FOR CRM INTERIOR / MODALS / DASHBOARD)
   ========================================================================== */
.floating-field label,
.field-floating label,
.qi label,
.qs label {
    color: #AEAEBB;
    background: transparent;
}

/* Floating UP state (Light Theme) - ON FOCUS & VALUE ONLY (NO HOVER) */
.floating-field:focus-within label,
.floating-field input:focus ~ label,
.floating-field textarea:focus ~ label,
.floating-field select:focus ~ label,
.field-floating:focus-within label,
.qi:focus-within label,
.qi input:focus ~ label,
.qi textarea:focus ~ label,
.qi select:focus ~ label,
.qs:focus-within label,
.qs select:focus ~ label,
.floating-field input:not(:placeholder-shown) ~ label,
.floating-field textarea:not(:placeholder-shown) ~ label,
.floating-field select:has(option:checked:not([value=""])) ~ label,
.field-floating input:not(:placeholder-shown) ~ label,
.field-floating textarea:not(:placeholder-shown) ~ label,
.qi input:not(:placeholder-shown) ~ label,
.qi textarea:not(:placeholder-shown) ~ label,
.qi select:has(option:checked:not([value=""])) ~ label,
.qs select:has(option:checked:not([value=""])) ~ label,
.floating-field.has-value label,
.field-floating.has-value label,
.qi.has-value label,
.qs.has-value label,
.floating-field input:-webkit-autofill ~ label,
.qi input:-webkit-autofill ~ label {
    top: -8px;
    font-size: 11px;
    line-height: 14px;
    color: #64748B; /* Slate 500 */
    background: #FFFFFF;
}

/* Focus accent color (Light Theme) */
.floating-field:focus-within label,
.floating-field input:focus ~ label,
.floating-field textarea:focus ~ label,
.floating-field select:focus ~ label,
.field-floating:focus-within label,
.qi:focus-within label,
.qi input:focus ~ label,
.qi textarea:focus ~ label,
.qi select:focus ~ label,
.qs:focus-within label,
.qs select:focus ~ label {
    color: #0275D8 !important; /* Brand Blue */
}

/* ==========================================================================
   5. DARK THEME (FOR LOGIN GLASS CARD & DARK SURFACES)
   ========================================================================== */
.glass-card .floating-field label,
.glass-card .field-floating label,
.glass-card .qi label,
.glass-card .qs label,
.floating-field.dark label,
.qi.qi-dark label,
.qs.qs-dark label {
    color: rgba(255, 255, 255, 0.45);
    background: transparent;
}

/* Floating UP state (Dark Glass Theme) - ON FOCUS & VALUE ONLY (NO HOVER) */
.glass-card .floating-field:focus-within label,
.glass-card .floating-field input:focus ~ label,
.glass-card .floating-field textarea:focus ~ label,
.glass-card .floating-field select:focus ~ label,
.glass-card .qi:focus-within label,
.glass-card .qi input:focus ~ label,
.glass-card .qi textarea:focus ~ label,
.glass-card .qi select:focus ~ label,
.glass-card .qs:focus-within label,
.glass-card .qs select:focus ~ label,
.glass-card .floating-field input:not(:placeholder-shown) ~ label,
.glass-card .floating-field textarea:not(:placeholder-shown) ~ label,
.glass-card .floating-field select:has(option:checked:not([value=""])) ~ label,
.glass-card .qi input:not(:placeholder-shown) ~ label,
.glass-card .qi textarea:not(:placeholder-shown) ~ label,
.glass-card .qi select:has(option:checked:not([value=""])) ~ label,
.glass-card .qs select:has(option:checked:not([value=""])) ~ label,
.glass-card .floating-field.has-value label,
.glass-card .qi.has-value label,
.glass-card .qs.has-value label,
.glass-card .floating-field input:-webkit-autofill ~ label,
.glass-card .qi input:-webkit-autofill ~ label,
.floating-field.dark:focus-within label,
.floating-field.dark.has-value label,
.floating-field.dark input:not(:placeholder-shown) ~ label,
.qi-dark:focus-within label,
.qi-dark.has-value label,
.qi-dark input:not(:placeholder-shown) ~ label {
    top: -9px;
    font-size: 11px;
    line-height: 14px;
    color: rgba(255, 255, 255, 0.90);
    background: #181b22;
}

/* Focus accent color (Dark Glass Theme) */
.glass-card .floating-field:focus-within label,
.glass-card .floating-field input:focus ~ label,
.glass-card .floating-field textarea:focus ~ label,
.glass-card .floating-field select:focus ~ label,
.glass-card .qi:focus-within label,
.glass-card .qi input:focus ~ label,
.glass-card .qi textarea:focus ~ label,
.glass-card .qi select:focus ~ label,
.glass-card .qs:focus-within label,
.glass-card .qs select:focus ~ label,
.floating-field.dark:focus-within label,
.qi-dark:focus-within label {
    color: #60a5fa !important; /* Light Sky/Blue */
}

/* ==========================================================================
   6. DISABLED STATE
   ========================================================================== */
.floating-field.disabled input,
.floating-field input:disabled,
.floating-field.disabled textarea,
.floating-field textarea:disabled,
.floating-field.disabled select,
.floating-field select:disabled,
.qi.disabled input,
.qi input:disabled,
.qi.disabled textarea,
.qi textarea:disabled,
.qs.disabled select,
.qs select:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}
.floating-field.disabled label,
.qi.disabled label,
.qs.disabled label {
    opacity: 0.6;
}