/**
 * القائمة المنسدلة القابلة للبحث (assets/js/components/select-search.js)
 * الزر يرث شكل الحقول (.tnt-input) والسهم من متغيرات --tnt-select-* في base/tokens.css
 */

.tnt .tnt-ss { position: relative; display: block; min-width: 0; }
.tnt .tnt-toolbar .tnt-ss { display: inline-block; min-width: 200px; flex: 1 1 220px; max-width: 320px; }

/* القائمة الأصلية مخفية بصرياً لكنها باقية في النموذج */
.tnt .tnt-ss__native { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; opacity: 0; pointer-events: none; }

/* الزر */
.tnt .tnt-ss__button {
	display: flex; align-items: center; gap: 8px; width: 100%; text-align: start; cursor: pointer;
	padding-inline-end: 10px;
}
/*
 * عرض الغلاف دائماً (حتى داخل شريط الأدوات حيث .tnt-input عرضه auto، فكان الاسم الطويل يمدّ الزر فوق ما بجانبه)،
 * وحشوة رأسية أقل لأن السهم 28px: الارتفاع 44px مثل باقي الحقول
 */
.tnt .tnt-ss > .tnt-ss__button.tnt-input { width: 100%; padding-block: 7px; }
.tnt .tnt-ss__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tnt .tnt-ss__button.is-placeholder .tnt-ss__label { color: #a5adc3; }
.tnt .tnt-ss__arrow { width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; background: var(--tnt-select-arrow-bg); color: var(--tnt-navy-700); flex-shrink: 0; transition: transform .15s; }
.tnt .tnt-ss__button:hover { border-color: var(--tnt-gold); }
.tnt .tnt-ss__button[aria-expanded="true"] { border-color: var(--tnt-gold-600); box-shadow: var(--tnt-ring); }
.tnt .tnt-ss__button[aria-expanded="true"] .tnt-ss__arrow { transform: rotate(180deg); background: var(--tnt-gold-50); }
.tnt .tnt-ss__button:disabled { cursor: not-allowed; opacity: .6; }

/* نافذة البحث (في الطبقة العليا فلا تقصّها البطاقات أو النوافذ) */
.tnt .tnt-ss__pop {
	position: fixed; inset: auto; margin: 0; z-index: 100100; display: none;
	padding: 8px; border: 1px solid var(--tnt-border); border-radius: var(--tnt-radius);
	background: var(--tnt-surface); box-shadow: var(--tnt-shadow-lg); color: var(--tnt-text); font-family: var(--tnt-font);
}
.tnt .tnt-ss__pop.is-open { display: block; animation: tnt-datepicker-in .14s var(--tnt-ease); }

.tnt .tnt-ss__search { position: relative; margin-bottom: 6px; }
.tnt .tnt-ss__search svg { position: absolute; inset-inline-start: 11px; top: 50%; transform: translateY(-50%); color: var(--tnt-muted); pointer-events: none; }
.tnt .tnt-ss__input {
	width: 100%; min-height: 40px; padding: 8px 12px; padding-inline-start: 36px; border: 1px solid var(--tnt-border-strong);
	border-radius: 9px; font: 500 14px/1.4 var(--tnt-font); color: var(--tnt-text); background: var(--tnt-surface-2); box-shadow: none; margin: 0;
}
/* 16px في أجهزة اللمس: أقل منها يجعل Safari في الآيفون يكبّر الصفحة عند الكتابة فتنقص النافذة عن الشاشة */
@media (pointer: coarse) { .tnt .tnt-ss__input { font-size: 16px; } }
.tnt .tnt-ss__input:focus { outline: none; border-color: var(--tnt-gold-600); background: var(--tnt-surface); box-shadow: var(--tnt-ring); }

.tnt .tnt-ss__list { list-style: none; margin: 0; padding: 0; max-height: 280px; overflow-y: auto; overscroll-behavior: contain; }
.tnt .tnt-ss__option { padding: 9px 12px; border-radius: 8px; cursor: pointer; font-size: 14px; line-height: 1.5; }
.tnt .tnt-ss__option.is-active { background: var(--tnt-gold-50); color: var(--tnt-navy-900); }
.tnt .tnt-ss__option.is-selected { background: var(--tnt-primary-50); color: var(--tnt-navy-900); font-weight: 700; }
.tnt .tnt-ss__option.is-selected.is-active { background: var(--tnt-primary-100); }
.tnt .tnt-ss__option.is-placeholder { color: var(--tnt-muted); }
.tnt .tnt-ss__option.is-disabled { color: #c3c9d8; cursor: not-allowed; }
.tnt .tnt-ss__option mark { background: rgba(var(--tnt-gold-rgb), .35); color: inherit; border-radius: 3px; padding: 0 1px; }
.tnt .tnt-ss__group { padding: 10px 12px 4px; font-size: 11.5px; font-weight: 800; color: var(--tnt-gold-600); position: sticky; top: 0; background: var(--tnt-surface); }
.tnt .tnt-ss__empty { padding: 18px 12px; text-align: center; color: var(--tnt-muted); font-size: 13.5px; }
.tnt .tnt-ss__count { padding: 6px 10px 2px; font-size: 11.5px; color: var(--tnt-muted); border-top: 1px solid var(--tnt-border); margin-top: 6px; }