/*
 * دراپ‌دونِ هماهنگ با تمِ سایت (روشن/تیره + رنگِ اصلیِ برند + هاور).
 *  - دسکتاپ (ماوس): <select> بومی در DOM می‌ماند ولی دکمه + لیستِ سفارشی (public/js/theme-select.js) نمایش داده می‌شود.
 *  - لمسی: انتخابگرِ بومیِ گوشی (UX بهتر) با ظاهرِ بسته‌ی هماهنگ (فلشِ سفارشی) می‌ماند.
 * رنگ‌ها فقط از توکن‌های تم می‌آیند: --accent-rgb / --accent-ink / --field-* / --surface-*.
 */
:root {
    --ts-bg: #ffffff;
    --ts-fg: #1c1917;
    --ts-muted: #71717a;
    --ts-ink: var(--accent-ink, #4c2fb0);
    --ts-border: rgba(var(--accent-rgb, 91, 63, 216), .22);
    --ts-hover: rgba(var(--accent-rgb, 91, 63, 216), .10);
    --ts-active: rgba(var(--accent-rgb, 91, 63, 216), .16);
    --ts-shadow: 0 18px 44px -14px rgba(28, 25, 23, .28), 0 4px 14px -6px rgba(var(--accent-rgb, 91, 63, 216), .25);
    --ts-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%235b3fd8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 8 5 5 5-5'/%3E%3C/svg%3E");
}
html.dark {
    --ts-bg: #17171d;
    --ts-fg: #f5f5f4;
    --ts-muted: #a1a1aa;
    --ts-ink: #c4b5fd;
    --ts-border: rgba(var(--accent-rgb, 91, 63, 216), .38);
    --ts-hover: rgba(var(--accent-rgb, 91, 63, 216), .22);
    --ts-active: rgba(var(--accent-rgb, 91, 63, 216), .32);
    --ts-shadow: 0 22px 50px -14px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .04);
    --ts-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23c4b5fd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 8 5 5 5-5'/%3E%3C/svg%3E");
}

/* ── حالتِ بستهٔ <select> بومی (لمسی/بدونِ JS): بدونِ ظاهرِ سیستم‌عامل، با فلشِ هم‌رنگِ تم ── */
select:not([multiple]):not([size]):not(.ts-native) {
    -webkit-appearance: none;
    appearance: none;
    background-image: var(--ts-chev);
    background-repeat: no-repeat;
    background-size: 1rem 1rem;
    background-position: left .85rem center;
    padding-inline-end: 2.4rem;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, background-color .15s;
}
[dir="ltr"] select:not([multiple]):not([size]):not(.ts-native),
html[lang="en"] select:not([multiple]):not([size]):not(.ts-native) { background-position: right .85rem center; }
select:not([multiple]):not([size]):not(.ts-native):hover:not(:disabled) { border-color: rgba(var(--accent-rgb, 91, 63, 216), .5); }
select option, select optgroup { background-color: var(--ts-bg); color: var(--ts-fg); }
select option:checked { background-color: var(--ts-active); }

/* ── نسخهٔ سفارشیِ دسکتاپ: <select> اصلی پنهانِ بصری ولی در DOM (Livewire/فرم‌ها) ── */
.ts-native {
    position: absolute !important; opacity: 0 !important; pointer-events: none !important;
    width: 1px !important; height: 1px !important; min-width: 0 !important; min-height: 0 !important;
    margin: 0 !important; padding: 0 !important; border: 0 !important; overflow: hidden !important;
}
.ts__btn {
    align-items: center; justify-content: space-between; gap: .5rem;
    text-align: start; cursor: pointer; font: inherit; -webkit-tap-highlight-color: transparent;
    transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.ts__btn:hover:not(:disabled) { border-color: rgba(var(--accent-rgb, 91, 63, 216), .5); background-color: var(--ts-hover); }
.ts__btn:focus-visible, .ts__btn[aria-expanded="true"] {
    outline: none; border-color: rgba(var(--accent-rgb, 91, 63, 216), .9);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb, 91, 63, 216), .18);
}
.ts__btn:disabled { cursor: not-allowed; opacity: .55; }
.ts__val { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts__btn.is-placeholder .ts__val { color: var(--field-placeholder, var(--ts-muted)); }
.ts__chev { flex: none; width: 1rem; height: 1rem; color: var(--ts-ink); transition: transform .18s ease; }
.ts__btn[aria-expanded="true"] .ts__chev { transform: rotate(180deg); }

/* ── لیستِ بازشونده ── */
.ts__list {
    position: fixed; z-index: 2147483000; box-sizing: border-box; margin: 0; padding: 6px; list-style: none;
    overflow-y: auto; overscroll-behavior: contain; max-height: 18rem;
    background: var(--ts-bg); color: var(--ts-fg);
    border: 1px solid var(--ts-border); border-radius: 14px; box-shadow: var(--ts-shadow);
    font-family: inherit; font-size: .9rem; line-height: 1.6; text-align: start;
    animation: tsIn .13s ease-out; transform-origin: top center;
    scrollbar-width: thin; scrollbar-color: rgba(var(--accent-rgb, 91, 63, 216), .35) transparent;
}
.ts__list.is-up { transform-origin: bottom center; }
@keyframes tsIn { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
.ts__grp { padding: 8px 10px 4px; font-size: .74rem; font-weight: 700; color: var(--ts-muted); cursor: default; }
.ts__opt {
    display: flex; align-items: center; justify-content: space-between; gap: .6rem;
    padding: .5rem .75rem; border-radius: 10px; cursor: pointer; user-select: none;
    transition: background-color .1s, color .1s;
}
.ts__opt + .ts__opt { margin-top: 2px; }
.ts__opt:hover, .ts__opt.is-active { background: var(--ts-hover); color: var(--ts-ink); }
.ts__opt[aria-selected="true"] { background: var(--ts-active); color: var(--ts-ink); font-weight: 700; }
.ts__opt[aria-disabled="true"] { opacity: .45; cursor: not-allowed; background: none; color: var(--ts-muted); }
.ts__opt.is-empty { color: var(--ts-muted); }
.ts__tick { flex: none; width: 1rem; height: 1rem; opacity: 0; color: var(--ts-ink); }
.ts__opt[aria-selected="true"] .ts__tick { opacity: 1; }
.ts__txt { min-width: 0; overflow-wrap: anywhere; }

@media (prefers-reduced-motion: reduce) { .ts__list { animation: none; } .ts__chev, .ts__btn { transition: none; } }
@media print { .ts__btn, .ts__list { display: none !important; } }