/* =============================================================================
   SIMKETH LIQUID GLASS — GLOBAL INPUT SYSTEM
   Ensures visible text color in ALL input fields across the platform.
   Provides design tokens, .glass-input utility class, focus glow states,
   autofill overrides, and select/option theming.
   ============================================================================= */

/* =============================================================================
   DESIGN TOKENS
   Scoped to :root (light) and .dark/.light classes
   ============================================================================= */

:root {
    --glass-bg:          rgba(255, 255, 255, 0.45);
    --glass-bg-strong:   rgba(255, 255, 255, 0.80);
    --glass-border:      rgba(168, 85, 247, 0.25);
    --glass-shadow:      0 8px 32px rgba(0, 0, 0, 0.10);
    --glass-blur:        20px;
    --text-primary:      #1e293b;
    --text-secondary:    #64748b;
    --input-bg:          rgba(255, 255, 255, 0.70);
    --input-border:      rgba(168, 85, 247, 0.30);
    --input-focus-glow:  rgba(168, 85, 247, 0.40);
    --placeholder-color: #64748b;
}

html.dark {
    --glass-bg:          rgba(15, 23, 42, 0.50);
    --glass-bg-strong:   rgba(15, 23, 42, 0.80);
    --glass-border:      rgba(168, 85, 247, 0.25);
    --glass-shadow:      0 8px 32px rgba(0, 0, 0, 0.40);
    --glass-blur:        20px;
    --text-primary:      #f1f5f9;
    --text-secondary:    #94a3b8;
    --input-bg:          rgba(15, 23, 42, 0.70);
    --input-border:      rgba(168, 85, 247, 0.30);
    --input-focus-glow:  rgba(168, 85, 247, 0.40);
    --placeholder-color: #94a3b8;
}

html.light {
    --glass-bg:          rgba(255, 255, 255, 0.45);
    --glass-bg-strong:   rgba(255, 255, 255, 0.80);
    --glass-border:      rgba(168, 85, 247, 0.25);
    --glass-shadow:      0 8px 32px rgba(0, 0, 0, 0.10);
    --glass-blur:        20px;
    --text-primary:      #1e293b;
    --text-secondary:    #64748b;
    --input-bg:          rgba(255, 255, 255, 0.85);
    --input-border:      rgba(168, 85, 247, 0.30);
    --input-focus-glow:  rgba(168, 85, 247, 0.40);
    --placeholder-color: #64748b;
}

/* =============================================================================
   BASE INPUT RESET — Ensure inheritance works across all browsers
   ============================================================================= */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="search"],
input[type="file"],
textarea,
select {
    -webkit-text-fill-color: inherit !important;
    text-fill-color: inherit !important;
    caret-color: inherit !important;
}

/* =============================================================================
   LIGHT MODE TEXT COLORS (html without .dark, or with :root defaults)
   ============================================================================= */

html:not(.dark):not(.dark-mode) input[type="text"],
html:not(.dark):not(.dark-mode) input[type="email"],
html:not(.dark):not(.dark-mode) input[type="password"],
html:not(.dark):not(.dark-mode) input[type="tel"],
html:not(.dark):not(.dark-mode) input[type="url"],
html:not(.dark):not(.dark-mode) input[type="number"],
html:not(.dark):not(.dark-mode) input[type="date"],
html:not(.dark):not(.dark-mode) input[type="time"],
html:not(.dark):not(.dark-mode) input[type="datetime-local"],
html:not(.dark):not(.dark-mode) input[type="search"],
html:not(.dark):not(.dark-mode) textarea,
html:not(.dark):not(.dark-mode) select {
    color: #1e293b !important;
    -webkit-text-fill-color: #1e293b !important;
    background-color: rgba(255, 255, 255, 0.70) !important;
}

html:not(.dark):not(.dark-mode) input::placeholder,
html:not(.dark):not(.dark-mode) textarea::placeholder {
    color: #64748b !important;
    -webkit-text-fill-color: #64748b !important;
    opacity: 1 !important;
}

/* =============================================================================
   DARK MODE TEXT COLORS
   ============================================================================= */

html.dark input[type="text"],
html.dark input[type="email"],
html.dark input[type="password"],
html.dark input[type="tel"],
html.dark input[type="url"],
html.dark input[type="number"],
html.dark input[type="date"],
html.dark input[type="time"],
html.dark input[type="datetime-local"],
html.dark input[type="search"],
html.dark textarea,
html.dark select {
    color: #f1f5f9 !important;
    -webkit-text-fill-color: #f1f5f9 !important;
    background-color: rgba(15, 23, 42, 0.70) !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
    color: #94a3b8 !important;
    -webkit-text-fill-color: #94a3b8 !important;
    opacity: 1 !important;
}

/* =============================================================================
   LIGHT CLASS (pages that set html.light explicitly)
   ============================================================================= */

html.light input[type="text"],
html.light input[type="email"],
html.light input[type="password"],
html.light input[type="tel"],
html.light input[type="url"],
html.light input[type="number"],
html.light input[type="date"],
html.light input[type="time"],
html.light input[type="datetime-local"],
html.light input[type="search"],
html.light textarea,
html.light select {
    color: #1e293b !important;
    -webkit-text-fill-color: #1e293b !important;
    background-color: rgba(255, 255, 255, 0.85) !important;
}

html.light input::placeholder,
html.light textarea::placeholder {
    color: #64748b !important;
    -webkit-text-fill-color: #64748b !important;
    opacity: 1 !important;
}

/* =============================================================================
   AUTOFILL OVERRIDE — Prevent Chrome's yellow autofill background
   ============================================================================= */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-text-fill-color: inherit !important;
    text-fill-color: inherit !important;
    transition: background-color 9999s ease-in-out 0s !important;
    caret-color: inherit !important;
}

html:not(.dark):not(.dark-mode) input:-webkit-autofill,
html.light input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 100px rgba(255, 255, 255, 0.95) inset !important;
    -webkit-text-fill-color: #1e293b !important;
}

html.dark input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 100px rgba(15, 23, 42, 0.95) inset !important;
    -webkit-text-fill-color: #f1f5f9 !important;
}

/* =============================================================================
   SELECT DROPDOWN OPTIONS
   ============================================================================= */

select option {
    background-color: inherit !important;
    color: inherit !important;
}

html:not(.dark):not(.dark-mode) select option,
html.light select option {
    background-color: #f8fafc !important;
    color: #1e293b !important;
}

html.dark select option {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
}

/* =============================================================================
   CONTENTEDITABLE FIX
   ============================================================================= */

[contenteditable="true"],
[contenteditable="true"] * {
    -webkit-text-fill-color: inherit !important;
    text-fill-color: inherit !important;
}

html:not(.dark):not(.dark-mode) [contenteditable="true"],
html.light [contenteditable="true"] {
    color: #1e293b !important;
}

html.dark [contenteditable="true"] {
    color: #f1f5f9 !important;
}

/* =============================================================================
   .glass-input — Utility class for liquid glass styled inputs
   Apply alongside your existing input elements for glassmorphic aesthetics.
   ============================================================================= */

.glass-input,
input.glass-input,
textarea.glass-input,
select.glass-input {
    background: var(--input-bg) !important;
    border: 1px solid var(--input-border) !important;
    border-radius: 12px;
    padding: 12px 16px;
    font-family: inherit;
    font-size: 15px;
    color: var(--text-primary) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    text-fill-color: var(--text-primary) !important;
    caret-color: #a855f7;
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, transform 0.2s ease;
    outline: none;
    width: 100%;
}

.glass-input::placeholder,
input.glass-input::placeholder,
textarea.glass-input::placeholder {
    color: var(--placeholder-color) !important;
    -webkit-text-fill-color: var(--placeholder-color) !important;
    opacity: 1 !important;
}

/* Focus state — amethyst glow ring */
.glass-input:focus,
input.glass-input:focus,
textarea.glass-input:focus,
select.glass-input:focus {
    border-color: rgba(168, 85, 247, 0.65) !important;
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.25), 0 0 20px rgba(168, 85, 247, 0.15) !important;
    background: var(--glass-bg-strong) !important;
    transform: translateY(-1px);
}

/* Generic focus glow for any input on focus — lighter version */
input:focus:not([class*="glass"]):not([type="file"]):not([type="radio"]):not([type="checkbox"]),
textarea:focus:not([class*="glass"]),
select:focus:not([class*="glass"]) {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.22) !important;
    border-color: rgba(168, 85, 247, 0.50) !important;
}

/* =============================================================================
   DARK MODE GLASS INPUT OVERRIDES
   ============================================================================= */

html.dark .glass-input,
html.dark input.glass-input,
html.dark textarea.glass-input,
html.dark select.glass-input {
    color: #f1f5f9 !important;
    -webkit-text-fill-color: #f1f5f9 !important;
}

html.dark .glass-input::placeholder,
html.dark input.glass-input::placeholder,
html.dark textarea.glass-input::placeholder {
    color: #94a3b8 !important;
    -webkit-text-fill-color: #94a3b8 !important;
}

html.light .glass-input,
html.light input.glass-input,
html.light textarea.glass-input,
html.light select.glass-input {
    color: #1e293b !important;
    -webkit-text-fill-color: #1e293b !important;
}

html.light .glass-input::placeholder,
html.light input.glass-input::placeholder,
html.light textarea.glass-input::placeholder {
    color: #64748b !important;
    -webkit-text-fill-color: #64748b !important;
}