/* =========================================================
   WimoCP Tema · NOVA — Tom Select görünümü (sıfırdan; kütüphanenin teması kullanılmaz)
   Giriş alanları paneldeki diğer input'larla aynı: 14px köşe, ince çerçeve, mavi odak halkası.
   Açılır menü: çift çerçeveli kart, yaylı açılış, ikonlu/açıklamalı seçenekler.
   ========================================================= */
.ts-hidden-accessible { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; }

.ts-wrapper { position: relative; }
.ts-control {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem;
  min-height: 3rem; padding: .45rem 2.5rem .45rem .95rem; border-radius: 14px; cursor: pointer;
  font-size: 14.5px; color: var(--text); background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border-strong, var(--border));
  transition: box-shadow .3s var(--ui-spring, ease);
}
.ts-wrapper:hover .ts-control { box-shadow: inset 0 0 0 1px var(--text-faint, var(--border-strong)); }
.ts-wrapper.focus .ts-control, .ts-wrapper.dropdown-active .ts-control { box-shadow: inset 0 0 0 1.5px var(--hl), 0 0 0 4px rgb(12 90 130 / .12); }
[data-theme="dark"] .ts-wrapper.focus .ts-control, [data-theme="dark"] .ts-wrapper.dropdown-active .ts-control { box-shadow: inset 0 0 0 1.5px var(--hl), 0 0 0 4px rgb(92 184 230 / .15); }
.mf-field.is-invalid .ts-control { box-shadow: inset 0 0 0 1.5px var(--danger, #dc2626), 0 0 0 4px rgb(220 38 38 / .08); }
.ts-wrapper.disabled .ts-control { opacity: .55; cursor: not-allowed; }

/* Ok işareti (tek seçim) — açılınca yaylı döner */
.ts-wrapper.single .ts-control::after { content: ""; position: absolute; right: 1.05rem; top: 50%; width: .45rem; height: .45rem; margin-top: -.35rem; border: solid var(--text-muted); border-width: 0 1.75px 1.75px 0; transform: rotate(45deg); transition: transform .45s var(--ui-spring, ease), margin .45s var(--ui-spring, ease); }
.ts-wrapper.single.dropdown-active .ts-control::after { transform: rotate(-135deg); margin-top: -.05rem; border-color: var(--hl); }
.ts-wrapper.multi .ts-control { padding-right: .55rem; cursor: text; }

.ts-control > input { flex: 1 1 4rem; min-width: 4rem; height: 1.9rem; padding: 0; border: 0 !important; outline: 0 !important; box-shadow: none !important; background: transparent !important; font: inherit; color: var(--text); }
.ts-control > input::placeholder { color: var(--text-faint, var(--text-muted)); }
.ts-wrapper.single.has-items .ts-control > input { position: absolute; left: -9999px; opacity: 0; }
.ts-wrapper.single .ts-control .item { min-width: 0; max-width: 100%; }

/* Seçilmiş öğe (tek seçim): ikon + metin */
.ts-row { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.ts-txt { min-width: 0; }
.ts-txt b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: var(--text); }
.ts-txt small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: .05rem; font-size: 12px; color: var(--text-muted); }
.ts-ico { width: 1.85rem; height: 1.85rem; flex-shrink: 0; display: grid; place-items: center; border-radius: 9px; color: var(--hl); background: rgb(12 90 130 / .08); transition: background-color .25s, color .25s, transform .4s var(--ui-spring, ease); }
[data-theme="dark"] .ts-ico { background: rgb(92 184 230 / .12); }
.ts-ico svg { width: .95rem; height: .95rem; }
.ts-control .ts-ico { width: 1.6rem; height: 1.6rem; border-radius: 8px; }
.ts-control .ts-ico svg { width: .85rem; height: .85rem; }

/* Çok seçim: etiketler */
.ts-wrapper.multi .ts-control > .item { display: inline-flex; align-items: center; gap: .15rem; height: 1.9rem; padding: 0 .25rem 0 .65rem; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--navy-900); background: rgb(12 90 130 / .08); box-shadow: inset 0 0 0 1px rgb(12 90 130 / .14); animation: ts-tag .35s var(--ui-spring, ease); }
[data-theme="dark"] .ts-wrapper.multi .ts-control > .item { color: var(--hl); background: rgb(92 184 230 / .12); box-shadow: inset 0 0 0 1px rgb(92 184 230 / .2); }
.ts-wrapper.multi .ts-control > .item.active { color: #fff; background: var(--navy-900); }
@keyframes ts-tag { from { opacity: 0; transform: scale(.85); } }
.ts-wrapper .item .remove { width: 1.4rem; height: 1.4rem; display: grid; place-items: center; margin-left: .15rem; border-radius: 50%; font-size: 15px; line-height: 1; color: inherit; text-decoration: none; opacity: .65; transition: opacity .2s, background-color .2s; }
.ts-wrapper .item .remove:hover { opacity: 1; background: rgb(12 90 130 / .14); }
.ts-wrapper.is-reject { animation: ts-reject .4s var(--ui-spring, ease); }
@keyframes ts-reject { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* ---------- Açılır menü ---------- */
.ts-dropdown {
  position: absolute; z-index: 500; margin-top: .45rem; overflow: hidden;
  border-radius: 16px; background: var(--surface);
  box-shadow: 0 0 0 1px var(--border), 0 0 0 6px var(--shell, rgb(12 90 130 / .03)), 0 24px 50px -20px rgb(8 40 60 / .4);
  transform-origin: top center;
}
[data-theme="dark"] .ts-dropdown { box-shadow: 0 0 0 1px var(--border-strong, var(--border)), 0 0 0 6px rgb(255 255 255 / .03), 0 24px 50px -16px rgb(0 0 0 / .75); }
.ts-dropdown.is-open { animation: ts-open .32s var(--ui-spring, ease) both; }
@keyframes ts-open { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
.ts-dropdown-content { max-height: 17rem; overflow-y: auto; overscroll-behavior: contain; padding: .35rem; scrollbar-width: thin; scroll-behavior: smooth; }
.ts-dropdown .option, .ts-dropdown .create, .ts-dropdown .no-results { padding: .55rem .65rem; border-radius: 11px; font-size: 14px; color: var(--text); cursor: pointer; transition: background-color .15s; }
.ts-dropdown .option.active { background: rgb(12 90 130 / .07); }
[data-theme="dark"] .ts-dropdown .option.active { background: rgb(92 184 230 / .1); }
.ts-dropdown .option.active .ts-ico { color: #fff; background: var(--navy-900); transform: scale(1.05); }
[data-theme="dark"] .ts-dropdown .option.active .ts-ico { color: #061b28; background: var(--hl); }
.ts-dropdown .option.selected { position: relative; }
.ts-dropdown .option.selected::after { content: ""; position: absolute; right: .95rem; top: 50%; width: .35rem; height: .65rem; margin-top: -.42rem; border: solid var(--hl); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ts-dropdown .option.selected .ts-st { margin-right: 1.4rem; }
.ts-dropdown .option .ts-row { width: 100%; }
.ts-dropdown .option .ts-txt { flex: 1; }
.ts-dropdown .option .ts-txt b { font-weight: 600; }
.ts-dropdown .optgroup + .optgroup { margin-top: .25rem; padding-top: .25rem; border-top: 1px solid var(--border); }
.ts-dropdown .optgroup-header { padding: .5rem .65rem .3rem; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); cursor: default; }
.ts-dropdown .highlight { border-radius: 3px; background: rgb(245 158 11 / .28); }
.ts-dropdown .create { display: flex; align-items: center; gap: .5rem; color: var(--text-soft); }
.ts-dropdown .create svg { width: 1rem; height: 1rem; color: var(--hl); }
.ts-dropdown .create.active { background: rgb(12 90 130 / .07); }
.ts-dropdown .no-results { display: flex; align-items: center; gap: .5rem; color: var(--text-muted); cursor: default; }
.ts-dropdown .no-results svg { width: 1rem; height: 1rem; }

/* Durum noktası */
.ts-st { width: .5rem; height: .5rem; flex-shrink: 0; border-radius: 50%; }
.ts-st.is-ok { background: #10b981; box-shadow: 0 0 0 3px rgb(16 185 129 / .16); }
.ts-st.is-warn { background: #f59e0b; box-shadow: 0 0 0 3px rgb(245 158 11 / .16); }
.ts-st.is-wait { background: #8b5cf6; box-shadow: 0 0 0 3px rgb(139 92 246 / .16); }

/* Açılır menü içi arama (dropdown_input eklentisi) */
.ts-dropdown .dropdown-input-wrap { position: relative; padding: .45rem .45rem .2rem; }
.ts-dropdown .dropdown-input-wrap::before { content: ""; position: absolute; left: 1.25rem; top: 50%; width: .6rem; height: .6rem; margin-top: -.3rem; border: 1.75px solid var(--text-muted); border-radius: 50%; pointer-events: none; }
.ts-dropdown .dropdown-input-wrap::after { content: ""; position: absolute; left: 1.83rem; top: calc(50% + .27rem); width: .3rem; height: 1.75px; background: var(--text-muted); transform: rotate(45deg); pointer-events: none; }
.ts-dropdown .dropdown-input { width: 100%; height: 2.5rem; padding: 0 .85rem 0 2.2rem; border: 0; border-radius: 11px; outline: 0; font: inherit; font-size: 14px; color: var(--text); background: var(--pn-bg, var(--hover)); box-shadow: inset 0 0 0 1px var(--border); transition: box-shadow .25s; }
.ts-dropdown .dropdown-input:focus { box-shadow: inset 0 0 0 1.5px var(--hl); }

@media (prefers-reduced-motion: reduce) {
  .ts-dropdown.is-open, .ts-wrapper.multi .ts-control > .item, .ts-wrapper.is-reject { animation: none; }
  .ts-wrapper.single .ts-control::after { transition: none; }
}

/* Arama kutusu olmayan tek seçimde yer tutucu */
.ts-wrapper.single:not(.has-items) .ts-control::before { content: attr(data-placeholder); color: var(--text-faint, var(--text-muted)); font-size: 14.5px; }
