/* forms.css */
/* Estilos para formularios y TomSelect */

/* TomSelect Styling to match Tailwind Inputs */
.ts-control {
    border-radius: 0.5rem; /* rounded-lg */
    padding: 0.5rem 1rem;  /* px-4 py-2 */
    border: 1px solid #d1d5db; /* border-gray-300 */
    font-size: 1rem;
    line-height: 1.5;
    min-height: 42px;
    background-color: #fff;
    border-color: #d1d5db; /* Explicit */
    color: #1f2937; /* text-gray-800 */
}

/* Focus State */
.ts-wrapper.focus .ts-control {
    border-color: #3b82f6; /* blue-500 */
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5); /* ring-2 blue-500 */
}

/* Ensure Input doesn't break layout in single mode */
.ts-control input {
    display: inline-block !important;
}

/* Dropdown Z-Index & Styling */
.ts-dropdown {
    z-index: 50;
    border: 1px solid #d1d5db;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border-radius: 0.5rem;
    background-color: #fff;
    color: #1f2937;
}

.ts-dropdown .option {
    padding: 0.5rem 1rem;
    /* Ensure dropdown options wrap appropriately */
    white-space: normal !important;
    word-wrap: break-word;
}

.ts-dropdown .option.active, .ts-dropdown .option:hover {
    background-color: #f3f4f6; /* bg-gray-100 */
    color: #111827; /* text-gray-900 */
}

/* Standardize Placeholders */
input::placeholder, textarea::placeholder {
    color: #9ca3af; /* gray-400 */
    font-size: 1rem;
    font-family: inherit;
    opacity: 1;
}

/* Default Light Mode Inputs */
input, textarea {
    background-color: white;
    color: #1f2937;
}

/* =========================================
   DARK MODE OVERRIDES
   ========================================= */
.dark input, 
.dark textarea {
    background-color: #374151 !important; /* bg-gray-700 */
    color: #f9fafb !important; /* text-gray-50 */
    border-color: #4b5563; /* border-gray-600 */
}

.dark input::placeholder, 
.dark textarea::placeholder {
    color: #9ca3af;
}

/* TomSelect Dark Mode */
.dark .ts-control {
    background-color: #374151; /* bg-gray-700 */
    border-color: #4b5563; /* border-gray-600 */
    color: #f9fafb;
}

.dark .ts-control input {
    color: #f9fafb;
}

.dark .ts-dropdown {
    background-color: #374151;
    border-color: #4b5563;
    color: #f9fafb;
}

.dark .ts-dropdown .option {
    color: #d1d5db; /* text-gray-300 */
}

.dark .ts-dropdown .option.active, 
.dark .ts-dropdown .option:hover {
    background-color: #4b5563; /* bg-gray-600 */
    color: #fff;
}

/* Autofill Fix for Dark Mode */
.dark input:-webkit-autofill,
.dark input:-webkit-autofill:hover, 
.dark input:-webkit-autofill:focus, 
.dark textarea:-webkit-autofill,
.dark textarea:-webkit-autofill:hover,
.dark textarea:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px #374151 inset !important;
    box-shadow: 0 0 0px 1000px #374151 inset !important;
    -webkit-text-fill-color: #f9fafb !important;
}

/* =========================================
   PREMIUM UI ENHANCEMENTS
   ========================================= */

/* 1. Custom Chevron (Arrow) */
:root {
    --arrow-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7' /%3E%3C/svg%3E");
    --arrow-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%239ca3af' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7' /%3E%3C/svg%3E");
}

/* 2. Unified Field Styes (Inputs, Textareas, Selects) */
input:not([type="checkbox"]):not([type="radio"]), textarea, select.multiline-select, .ts-control {
    border-radius: 0.5rem; /* rounded-lg */
    border: 1px solid #d1d5db; /* border-gray-300 */
    padding: 0.5rem 1rem;
    font-size: 1rem;
    line-height: 1.5;
    min-height: 48px; /* Consistent Height for all */
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm (Depth) */
}

/* 3. Micro-Interactions (Hover & Focus) */
input:not([type="checkbox"]):not([type="radio"]):hover:not(:disabled), 
textarea:hover:not(:disabled), 
select.multiline-select:hover:not(:disabled), 
.ts-control:hover {
    border-color: #9ca3af; /* border-gray-400 */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03); /* Slight lift */
}

input:not([type="checkbox"]):not([type="radio"]):focus, 
textarea:focus, 
select.multiline-select:focus,
.ts-wrapper.focus .ts-control {
    border-color: #3b82f6; /* primary-500 */
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* Ring + Shadow */
    outline: none;
}

/* 4. Native Select Custom Arrow */
select.multiline-select {
    appearance: none; /* Hide default arrow */
    background-image: var(--arrow-light) !important;
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1.25rem;
    padding-right: 2.5rem; /* Space for arrow */
}

/* 5. Dark Mode Adaptations */
.dark input:not([type="checkbox"]):not([type="radio"]), 
.dark textarea, 
.dark select.multiline-select, 
.dark .ts-control {
    background-color: #374151 !important; /* bg-gray-700 */
    border-color: #4b5563; /* border-gray-600 */
    color: #f9fafb;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3); /* Darker shadow */
}

.dark input:not([type="checkbox"]):not([type="radio"]):hover:not(:disabled), 
.dark textarea:hover:not(:disabled), 
.dark select.multiline-select:hover:not(:disabled), 
.dark .ts-control:hover {
    border-color: #6b7280; /* border-gray-500 */
}

.dark select.multiline-select {
    background-image: var(--arrow-dark) !important;
}

/* Picker Styling (Chrome 132+) */
select.multiline-select::picker(select) {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    border-radius: 0.75rem;
    padding: 0.5rem;
}

.dark select.multiline-select::picker(select) {
    background-color: #1f2937;
    border-color: #374151;
}

select.multiline-select option {
    padding: 0.75rem 1rem;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: background-color 0.15s;
}

select.multiline-select option:hover,
select.multiline-select option:checked {
    background-color: #f3f4f6;
    color: #111827;
}

.dark select.multiline-select option:hover,
.dark select.multiline-select option:checked {
    background-color: #374151;
    color: #f9fafb;
}

/* Fix Autofill in Dark Mode */
.dark input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px #374151 inset !important;
    -webkit-text-fill-color: #f9fafb !important;
}