/* HUB4STUDY: ATOM - FORMS (V2.0 - Cleaned) */
/* COMPONENT: Inputs, Labels, and Form Alerts */

/* -------------------------------------------------------------------------- */
/* 1. MASTER INPUT CLASS (The Source of Truth) */
/* -------------------------------------------------------------------------- */
.form-input-master {
    /* RESET: Removes browser-specific styling */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    /* Base Colors (Light Mode) */
    background-color: #f8fafc !important; /* Cool Gray */
    border-color: #cbd5e1 !important;      /* Slate-300 */
    color: #1e293b !important;             /* Slate-800 */
    
    /* Cursor Fix */
    line-height: normal; 
}

.form-input-master::placeholder {
    color: #94a3b8 !important; 
}

/* -------------------------------------------------------------------------- */
/* 2. BROWSER RESET (Native Icon Removal) */
/* -------------------------------------------------------------------------- */
.form-input-master::-ms-reveal,
.form-input-master::-ms-clear {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
}

.form-input-master::-webkit-credentials-auto-fill-button,
.form-input-master::-webkit-contacts-auto-fill-button {
    visibility: hidden !important;
    display: none !important;
    pointer-events: none !important;
    position: absolute !important;
    right: 0 !important;
}

/* -------------------------------------------------------------------------- */
/* 3. FOCUS STATE (Active - Light Mode) */
/* -------------------------------------------------------------------------- */
.form-input-master:focus,
.form-input-master:-webkit-autofill:focus {
    background-color: #ffffff !important;
    border-color: #60a5fa !important; /* Blue-400 */
    
    /* Dual Shadow: White Inset + Blue Glow */
    box-shadow: 
        inset 0 0 0 1000px #ffffff, 
        0 0 0 3px rgba(96, 165, 250, 0.25) !important;
    
    -webkit-text-fill-color: #1e293b !important;
    outline: none !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* -------------------------------------------------------------------------- */
/* 4. ERROR STATES (Light Mode) */
/* -------------------------------------------------------------------------- */
/* A) Passive Error (User NOT typing) */
.form-input-master.has-error:not(:focus) {
    background-color: #fffcfc !important; /* Extremely Light Red */
    border-color: #f87171 !important;     /* Red-400 */
    color: #b91c1c !important;            /* Red-700 */
}

/* B) Active Error (User IS typing) */
.form-input-master.has-error:focus {
    border-color: #f87171 !important;
    box-shadow: 
        inset 0 0 0 1000px #ffffff, 
        0 0 0 3px rgba(248, 113, 113, 0.25) !important;
    -webkit-text-fill-color: #1e293b !important;
}

/* -------------------------------------------------------------------------- */
/* 5. LABEL POSITIONS */
/* -------------------------------------------------------------------------- */

/* A) PASSIVE STATE (Input Empty, Not Focused) */
.peer:placeholder-shown:not(:focus):not(:-webkit-autofill) ~ label {
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.875rem;
    color: #64748b;
    left: 1rem;
    transition: all 0.2s ease-in-out;
}

/* B) ACTIVE STATE (Input Focused OR Filled) */
.peer:focus ~ label,
.peer:not(:placeholder-shown) ~ label,
.peer:-webkit-autofill ~ label {
    top: 5px;
    left: 1rem;
    font-size: 0.75rem;
    font-weight: 400; 
    transform: translateY(0);
}

/* Label Colors */
.peer:focus ~ label { color: #60a5fa; }
.peer.has-error ~ label { color: #f87171 !important; }


/* -------------------------------------------------------------------------- */
/* 6. AUTOFILL FIX (Light Mode Base) */
/* -------------------------------------------------------------------------- */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #f8fafc inset !important;
    -webkit-text-fill-color: #1e293b !important;
    background-image: none !important;
    background-color: transparent !important;
    font-size: 1rem !important;
    font-family: 'Inter', sans-serif !important;
    letter-spacing: normal !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* Active Autofill (White BG - Light Mode) */
input.form-input-master:-webkit-autofill:focus {
    -webkit-box-shadow: 
        inset 0 0 0 1000px #ffffff, 
        0 0 0 3px rgba(96, 165, 250, 0.25) !important;
}

/* -------------------------------------------------------------------------- */
/* 7. COMPONENT: MODERN ALERT BOX */
/* -------------------------------------------------------------------------- */
.alert-modern-error {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    margin-bottom: 1.5rem;
    
    border-radius: 0.75rem;
    border: 1px solid #fecdd3;
    border-left-width: 4px;
    border-left-color: #f43f5e;
    
    background-color: #fff1f2;
    color: #881337;
    
    box-shadow: 0 4px 6px -1px rgba(244, 63, 94, 0.1), 
                0 2px 4px -1px rgba(244, 63, 94, 0.06);
    
    animation: slideInDown 0.4s ease-out forwards;
}

@keyframes slideInDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}


/* ========================================================================== */
/* DARK MODE OVERRIDES */
/* ========================================================================== */

/* -------------------------------------------------------------------------- */
/* 8. DARK MODE: MASTER INPUT & FOCUS */
/* -------------------------------------------------------------------------- */
/* A) MASTER INPUT: Dark Background & Borders */
.dark .form-input-master {
    background-color: #111827 !important; /* gray-900 */
    border-color: #374151 !important;      /* gray-700 */
    color: #f3f4f6 !important;             /* gray-100 (Text Color) */
}

/* B) FOCUS STATE: Glow Adjustment */
.dark .form-input-master:focus {
    background-color: #0f172a !important; /* slate-900 */
    border-color: #60a5fa !important;      /* blue-400 */
    box-shadow: 
        inset 0 0 0 1000px #0f172a, 
        0 0 0 3px rgba(96, 165, 250, 0.25) !important;
}

/* C) PLACEHOLDER COLOR */
.dark .form-input-master::placeholder {
    color: #64748b !important; /* slate-500 */
}

/* -------------------------------------------------------------------------- */
/* 9. DARK MODE: LABELS */
/* -------------------------------------------------------------------------- */
/* Pasif Durum */
.dark .peer:placeholder-shown:not(:focus):not(:-webkit-autofill) ~ label {
    color: #94a3b8; /* gray-400 */
}

/* Aktif Durum */
.dark .peer:focus ~ label,
.dark .peer:not(:placeholder-shown) ~ label,
.dark .peer:-webkit-autofill ~ label {
    color: #60a5fa !important; /* blue-400 */
}

/* Error Durumu (Varsayılan) */
.dark .peer.has-error ~ label {
    color: #f87171 !important; /* red-400 */
}

/* -------------------------------------------------------------------------- */
/* 10. DARK MODE: AUTOFILL FIX */
/* -------------------------------------------------------------------------- */
/* Replaces the duplicate definition in section 6 with this specific override */
.dark input:-webkit-autofill,
.dark input:-webkit-autofill:hover, 
.dark input:-webkit-autofill:focus, 
.dark input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #111827 inset !important;
    -webkit-text-fill-color: #f3f4f6 !important;
    caret-color: #f3f4f6;
}

/* -------------------------------------------------------------------------- */
/* 11. DARK MODE: ERROR STATE REFINEMENT (Hata + Pasif) */
/* -------------------------------------------------------------------------- */
/* A) INPUT: Hata Var ve Pasif (Odaklanılmamış) */
.dark .form-input-master.has-error:not(:focus) {
    background-color: #2f1010 !important; /* Kırmızımsı Siyah */
    border-color: #f87171 !important;      /* Red-500 */
    color: #fca5a5 !important;             /* Red-300 */
}

/* B) LABEL: Hata Var ve Pasif */
.dark .peer.has-error:not(:focus) ~ label {
    color: #f87171 !important; /* Canlı Kırmızı */
}

/* C) INPUT: Hata Var ve Focus (Kullanıcı düzeltiyor) */
.dark .form-input-master.has-error:focus {
    background-color: #1f1212 !important; 
    border-color: #f87171 !important;      
    box-shadow: 
        inset 0 0 0 1000px #1f1212, 
        0 0 0 3px rgba(248, 113, 113, 0.25) !important;
}

/* -------------------------------------------------------------------------- */
/* 13. DARK MODE: ALERT BOX */
/* -------------------------------------------------------------------------- */
.dark .alert-modern-error {
    background-color: #450a0a !important; /* Red-950 */
    border-color: #7f1d1d !important;      /* Red-900 */
    border-left-color: #f43f5e !important;/* Rose-500 */
    color: #fecdd3 !important;             /* Rose-200 */
    
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 
                0 2px 4px -1px rgba(0, 0, 0, 0.3) !important;
}

/* -------------------------------------------------------------------------- */
/* 14. INPUT ADDONS (Left Icon Adjustment) */
/* -------------------------------------------------------------------------- */
/* Ensures the floating label does not overlap with the left icon */
.group.has-icon-left .peer:placeholder-shown:not(:focus):not(:-webkit-autofill) ~ label,
.group.has-icon-left .peer:focus ~ label,
.group.has-icon-left .peer:not(:placeholder-shown) ~ label,
.group.has-icon-left .peer:-webkit-autofill ~ label {
    left: 2.75rem !important; /* Shift label to the right */
}





/* MOLECULE: HEADER SEARCH - FIXED ALIGNMENT & STYLES */

/* 1. Main Container (The Layout Fixer) */
.header-search-molecule {
    display: flex;
    align-items: center;    /* Critical: Vertically centers the input */
    justify-content: center;
    width: 100%;
    height: 100%;
    max-width: 640px;       /* Max width for desktop */
    margin: 0 auto;         /* Horizontally center in the grid cell */
}

/* 2. ATOM OVERRIDE: Wrapper Reset (CRITICAL) */
/* The Atom adds 'mb-5' by default. We MUST remove it here to fix alignment. */
.header-search-molecule .group {

    width: 100%;
    display: flex;          /* Ensures internal elements align */
    align-items: center;
}

#mobileSearchOverlay .group {
   
    width: 100%;
}

/* Mobil input stili masaüstü ile eşitleniyor ama boyu 40px'e (h-10) sabitleniyor */
#mobileSearchOverlay .header-search-input {
    height: 40px !important; 
    padding-left: 2.5rem !important; /* İkon için pay */
    padding-right: 1rem !important;
    font-size: 0.95rem;
}

/* Mobildeki ikonun konumu */
#mobileSearchOverlay .absolute i {
    z-index: 20;
    color: #94a3b8;
}

.header-search-molecule .relative {
    width: 100%;
}

/* 3. INPUT STYLING (The Visuals) */
.header-search-molecule input.form-input-master {
    /* Geometry */
    height: 46px !important;        
    border-radius: 9999px !important; /* Pill Shape */
    padding-left: 3rem !important;    /* Space for Left Icon */
    padding-right: 5rem !important;   /* Space for Right Badge */
    
    /* STATE: PASSIVE (Default) */
    background-color: #f1f5f9 !important; /* Slate-100 (Light Gray) */
    border: 1px solid #e2e8f0 !important; /* Slate-200 (Subtle Border) */
    color: #1e293b !important;            /* Slate-800 */
    box-shadow: none !important;
    
    transition: all 0.2s ease-in-out;
}

/* STATE: HOVER */
.header-search-molecule input.form-input-master:hover {
    border-color: #93c5fd !important; /* Blue-300 (Subtle Blue Hint) */
    background-color: #f8fafc !important; /* Slightly lighter gray */
}

/* STATE: FOCUS (Active) */
.header-search-molecule input.form-input-master:focus {
    background-color: #ffffff !important; /* Pure White */
    border-color: #3b82f6 !important;     /* Blue-500 (Brand Color) */
    
    /* THE GLOW EFFECT */
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15) !important; 
    
    outline: none !important;
}

/* 4. DARK MODE OVERRIDES (FIXED) */
.dark .header-search-molecule input.form-input-master {
    background-color: #1e293b !important; /* Slate-800 (Visible against Dark Header) */
    border-color: #334155 !important;     /* Slate-700 */
    color: #f8fafc !important;            /* Slate-50 (Bright White Text) */
}

/* Fix Placeholder color in Dark Mode */
.dark .header-search-molecule input.form-input-master::placeholder {
    color: #94a3b8 !important; /* Slate-400 (Readable Gray) */
    opacity: 1;
}

.dark .header-search-molecule input.form-input-master:focus {
    background-color: #0f172a !important; /* Slate-900 (Deep contrast on focus) */
    border-color: #3b82f6 !important;     /* Blue-500 */
    color: #ffffff !important;            /* Pure White */
	
	 -webkit-text-fill-color: #ffffff !important; 
    caret-color: #ffffff !important;
    /* Stronger Glow for visibility */
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.25) !important;
}

/* Ensure the icon turns blue in dark mode focus */
.dark .header-search-molecule:focus-within .absolute i {
    color: #60a5fa !important; /* Blue-400 (Lighter blue for dark mode) */
}



/* 5. ICON & BADGE ADJUSTMENTS */

/* Left Icon Color Logic */
.header-search-molecule .absolute i {
    color: #94a3b8; /* Passive Gray */
    transition: color 0.2s;
    font-size: 1.1rem;
}

/* Make icon blue when input is focused */
.header-search-molecule:focus-within .absolute i {
    color: #3b82f6 !important; /* Blue-500 */
}

/* Right Badge Positioning tweak */
/* The atom places it absolutely, we just ensure it looks good */
.header-search-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    opacity: 0.8;
}