/* =================================================== CUSTOM SELECT DROPDOWN — Shared Component (v2) Turns stays in the DOM (hidden) so form submission, validation, and CSRF keep working. Panel is portalled to (fixed) to avoid overflow / z-index clipping from parent containers. =================================================== */ /* ---------- Wrap ---------- */ .cs-wrap { position: relative; display: block; width: 100%; } /* ---------- Toggle Button ---------- */ .cs-toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; /* Match admin .form-control exactly */ background-color: #f9fafb; border: 1px solid #e2e8f0; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.04); color: var(--text-main, #1e293b); padding: 0.65rem 1rem; font-size: 0.95rem; font-weight: 500; border-radius: var(--radius-sm, 8px); font-family: inherit; line-height: 1.5; text-align: left; cursor: pointer; transition: all 0.2s ease-in-out; -webkit-appearance: none; appearance: none; outline: none; } .cs-toggle:hover { border-color: #cbd5e1; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02); } .cs-toggle:focus-visible { outline: none; background-color: #ffffff; border-color: #cbd5e1; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02), 0 0 0 3px rgba(67, 97, 238, 0.08); } /* Open / Focused state */ .cs-wrap.open .cs-toggle, .cs-wrap.is-focused .cs-toggle { background-color: #ffffff; border-color: #cbd5e1; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02), 0 0 0 3px rgba(67, 97, 238, 0.08); } /* Invalid state */ .cs-toggle.is-invalid, .cs-wrap.is-invalid .cs-toggle { border-color: var(--danger, #ef4444) !important; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12) !important; } /* Disabled state */ .cs-wrap.is-disabled .cs-toggle { background-color: #f1f5f9; color: var(--text-muted, #64748b); cursor: not-allowed; opacity: 0.65; pointer-events: none; } /* ---------- Value Text ---------- */ .cs-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; min-width: 0; } .cs-value.placeholder { color: #94a3b8; font-weight: 400; } /* ---------- Caret Icon ---------- */ .cs-caret { flex-shrink: 0; width: 16px; height: 16px; color: #94a3b8; transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), color 0.18s ease; pointer-events: none; } .cs-wrap.open .cs-caret { transform: rotate(180deg); color: var(--primary, #4361ee); } /* ---------- Dropdown Panel ---------- */ .cs-panel { position: fixed; z-index: 9999; background: #ffffff; border: 1.5px solid #e8edf4; border-radius: var(--radius-md, 12px); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04), 0 12px 32px rgba(0, 0, 0, 0.1); padding: 5px; max-height: 290px; overflow-y: auto; overflow-x: hidden; /* Entry animation */ opacity: 0; visibility: hidden; transform: translateY(-6px) scale(0.98); transform-origin: top center; transition: opacity 0.18s ease, transform 0.2s cubic-bezier(0.34, 1.2, 0.64, 1), visibility 0.18s; scrollbar-width: thin; scrollbar-color: #e2e8f0 transparent; } /* Open state (set via JS on the panel element itself) */ .cs-panel.is-open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } /* Panel opening upward */ .cs-panel.opens-up { transform-origin: bottom center; transform: translateY(6px) scale(0.98); } .cs-panel.opens-up.is-open { transform: translateY(0) scale(1); } .cs-panel::-webkit-scrollbar { width: 4px; } .cs-panel::-webkit-scrollbar-track { background: transparent; } .cs-panel::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; } /* ---------- Search Input ---------- */ .cs-search-wrap { padding: 4px 4px 3px; position: sticky; top: 0; background: #ffffff; z-index: 1; } .cs-search-container { position: relative; } .cs-search { display: block; width: 100%; padding: 7px 30px 7px 10px; border: 1.5px solid #e2e8f0; border-radius: 6px; background: #f8fafc; font-family: inherit; font-size: 0.84rem; color: var(--text-main, #1e293b); outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; box-sizing: border-box; } .cs-search::placeholder { color: #94a3b8; } .cs-search:focus { border-color: var(--primary, #4361ee); background: #ffffff; box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1); } .cs-search-icon { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: #94a3b8; pointer-events: none; font-size: 11px; } .cs-search-divider { height: 1px; background: #f1f5f9; margin: 3px 0 4px; } /* ---------- Option Item ---------- */ .cs-option { display: flex; align-items: center; gap: 9px; padding: 9px 12px; font-size: 0.875rem; font-weight: 500; color: var(--text-main, var(--text, #1e293b)); border-radius: 7px; cursor: pointer; transition: background 0.12s ease, color 0.12s ease; user-select: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cs-option:hover { background: rgba(67, 97, 238, 0.07); color: var(--primary, #4361ee); } /* Keyboard-highlighted via ArrowUp/Down */ .cs-option.active { background: rgba(67, 97, 238, 0.1); color: var(--primary, #4361ee); } /* Currently selected value */ .cs-option.selected { background: rgba(67, 97, 238, 0.09); color: var(--primary, #4361ee); font-weight: 600; } /* Check icon container (visible only on .selected) */ .cs-check { display: none; align-items: center; justify-content: center; margin-left: auto; flex-shrink: 0; color: var(--primary, #4361ee); font-size: 10px; } .cs-option.selected .cs-check { display: inline-flex; } /* Optgroup child indentation */ .cs-option.optgroup-child { padding-left: 22px; } /* Disabled option */ .cs-option.disabled { color: var(--text-muted, #94a3b8); opacity: 0.5; cursor: not-allowed; pointer-events: none; } /* ---------- Option Group Label ---------- */ .cs-optgroup { padding: 10px 12px 4px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted, #94a3b8); pointer-events: none; user-select: none; } /* ---------- Empty State ---------- */ .cs-empty { display: flex; flex-direction: column; align-items: center; padding: 20px 12px; gap: 6px; text-align: center; color: var(--text-muted, #94a3b8); font-size: 0.82rem; user-select: none; } .cs-empty i { font-size: 18px; opacity: 0.5; } /* ---------- Size Variants ---------- */ /* Add data-cs-size="sm" or "lg" on