/* app/static/css/forms.css */

/* --- CORE GRADIENTS & BUTTONS --- */
/* .btn-gradient-primary { 
    background: linear-gradient(135deg, var(--app-gradient-start) 0%, var(--app-gradient-end) 100%) !important; 
    border: none !important; 
    color: #fff !important; 
    box-shadow: 0 4px 12px rgba(var(--bs-primary-rgb), 0.3) !important; 
    transition: all 0.2s ease-in-out; 
}
.btn-gradient-primary:hover { 
    box-shadow: 0 6px 16px rgba(var(--bs-primary-rgb), 0.5) !important; 
    transform: translateY(-2px); 
}
.text-gradient-primary { 
    background: linear-gradient(135deg, var(--app-gradient-start) 0%, var(--app-gradient-end) 100%); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
    background-clip: text; 
    color: transparent; 
} */


/* --- CORE GRADIENTS & BUTTONS --- */
.bg-gradient-primary { 
    background: linear-gradient(135deg, var(--app-gradient-start) 0%, var(--app-gradient-end) 100%) !important; 
}

.btn-gradient-primary { 
    background: linear-gradient(135deg, var(--app-gradient-start) 0%, var(--app-gradient-end) 100%) !important; 
    border: none !important; 
    color: #fff !important; 
    box-shadow: 0 4px 12px rgba(var(--bs-primary-rgb), 0.3) !important; 
    transition: all 0.2s ease-in-out; 
}
.btn-gradient-primary:hover { 
    box-shadow: 0 6px 16px rgba(var(--bs-primary-rgb), 0.5) !important; 
    transform: translateY(-2px); 
}






/* Custom Focus Outline */
.custom-focus:focus { 
    border-color: var(--app-gradient-end) !important; 
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.2) !important; 
}

/* Toggle Switch Gradient */
.custom-switch:checked { 
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e"), linear-gradient(135deg, var(--app-gradient-start) 0%, var(--app-gradient-end) 100%) !important; 
    background-color: transparent !important; 
    border-color: transparent !important; 
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25) !important; 
}

/* --- THEME-BASED SELECTION & HIGHLIGHTS --- */
::selection { 
    background-color: rgba(var(--bs-primary-rgb), 0.3) !important; 
    color: inherit; 
}

/* --- THEME-AWARE SELECT2 STYLING --- */
.select2-container--default .select2-selection--multiple, 
.select2-container--default .select2-selection--single { 
    background-color: var(--bs-body-bg) !important; 
    border: 1px solid var(--bs-border-color) !important; 
    border-radius: 0.5rem !important; 
    min-height: 42px; 
    transition: all 0.2s; 
}
.select2-container--default.select2-container--focus .select2-selection--multiple, 
.select2-container--default.select2-container--focus .select2-selection--single, 
.select2-container--default.select2-container--open .select2-selection--single { 
    border-color: var(--app-gradient-end) !important; 
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.2) !important; 
}
.select2-container--default .select2-selection--single { 
    display: flex; 
    align-items: center; 
    padding-left: 4px; 
}
.select2-container--default .select2-selection--single .select2-selection__rendered { 
    color: var(--bs-body-color) !important; 
    font-size: 1rem; 
}
.select2-container--default .select2-selection--single .select2-selection__arrow { 
    height: 100% !important; 
    right: 10px !important; 
    top: 50% !important; 
    transform: translateY(-50%) !important; 
}

.select2-container--default .select2-selection--multiple { 
    padding: 2px 8px; 
}
.select2-container--default .select2-selection--multiple .select2-selection__choice { 
    background: linear-gradient(135deg, var(--app-gradient-start) 0%, var(--app-gradient-end) 100%) !important; 
    border: none !important; 
    color: #fff !important; 
    border-radius: 0.3rem; 
    padding: 3px 10px; 
    margin-top: 6px; 
    font-weight: 500; 
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove { 
    color: rgba(255,255,255,0.7) !important; 
    border-right: 1px solid rgba(255,255,255,0.2) !important; 
    margin-right: 6px; 
    padding-right: 6px; 
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover { 
    color: #fff !important; 
    background-color: transparent !important; 
}

.custom-select2-dropdown { 
    background-color: var(--bs-body-bg) !important; 
    border: 1px solid var(--bs-border-color) !important; 
    border-radius: 0.5rem !important; 
    box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important; 
    margin-top: 4px; 
    z-index: 9999; 
}
.select2-results__option { 
    color: var(--bs-body-color); 
    padding: 8px 12px; 
}
.select2-results__group { 
    color: var(--bs-secondary-color); 
    font-weight: 700; 
    font-size: 0.75rem; 
    text-transform: uppercase; 
    letter-spacing: 0.05em; 
    border-bottom: 1px solid var(--bs-border-color); 
    padding: 10px 12px 6px; 
}

/* ========================================================
   Dark Mode Specific Tweaks (Select2 Overrides)
   ======================================================== */
[data-bs-theme="dark"] .theme-card { 
    background-color: #1e1e24 !important; 
}

/* Base inputs and select boxes */
[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple, 
[data-bs-theme="dark"] .select2-container--default .select2-selection--single, 
[data-bs-theme="dark"] .form-control, 
[data-bs-theme="dark"] .form-select { 
    background-color: rgba(255, 255, 255, 0.03) !important; 
    border-color: rgba(255, 255, 255, 0.1) !important; 
    color: #fff !important; 
}

/* Dropdown Container */
[data-bs-theme="dark"] .custom-select2-dropdown { 
    background-color: #27272f !important; 
    border-color: rgba(255, 255, 255, 0.1) !important; 
    box-shadow: 0 10px 25px rgba(0,0,0,0.5) !important; 
}

/* Default Dropdown Options */
[data-bs-theme="dark"] .select2-container--default .select2-results__option {
    background-color: transparent !important;
    color: #a1a1aa !important;
}

/* The Currently "Selected" Option */
[data-bs-theme="dark"] .select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #a1a1aa !important;
}

/* The Hovered/Highlighted Option */
[data-bs-theme="dark"] .select2-container--default .select2-results__option--highlighted,
[data-bs-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected="true"] { 
    background: linear-gradient(135deg, var(--app-gradient-start) 0%, var(--app-gradient-end) 100%) !important; 
    color: #fff !important; 
}

/* Input Group Addons (Icons) */
[data-bs-theme="dark"] .input-group-text { 
    background-color: rgba(0, 0, 0, 0.2) !important; 
    border-color: rgba(255, 255, 255, 0.1) !important; 
    color: #a1a1aa; 
}

/* Rendered Text */
[data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered { 
    color: #fff !important; 
}

/* ========================================================
   DataTables & Standard Filter Styling (Light & Dark Mode)
   ======================================================== */

/* 🟢 THE FIX: Restored independent padding to fix overlap */
div.dataTables_wrapper div.dataTables_length select,
div.dataTables_wrapper div.dataTables_filter input {
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    color: var(--bs-body-color);
    border-radius: 0.5rem;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

div.dataTables_wrapper div.dataTables_filter input {
    padding: 0.4rem 0.8rem;
}

div.dataTables_wrapper div.dataTables_length select {
    padding: 0.4rem 2.25rem 0.4rem 0.8rem; 
}

/* Add custom focus gradient ring to DataTables inputs */
div.dataTables_wrapper div.dataTables_length select:focus,
div.dataTables_wrapper div.dataTables_filter input:focus {
    border-color: var(--app-gradient-end) !important;
    outline: none;
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.2) !important;
}

/* Ensure standard Form Selects (like your Role/Status filters) match */
.form-select, .form-control {
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    color: var(--bs-body-color);
    border-radius: 0.5rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    transition: all 0.2s ease-in-out;
}

.form-select:focus, .form-control:focus {
    border-color: var(--app-gradient-end);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.2);
}

/* --- Dark Mode Specifics for DataTables & Filters --- */
[data-bs-theme="dark"] div.dataTables_wrapper div.dataTables_length select,
[data-bs-theme="dark"] div.dataTables_wrapper div.dataTables_filter input,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .form-control {
    background-color: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}

/* Fix dropdown option colors in Dark Mode for standard selects */
[data-bs-theme="dark"] div.dataTables_wrapper div.dataTables_length select option,
[data-bs-theme="dark"] .form-select option {
    background-color: #1e1e24 !important;
    color: #fff !important;
}


/* ... rest of forms.css stays exactly the same ... */