/* ==========================================================================
   Универсальный скин для выпадающих компонентов
   Поддержка:
   - <select class="ui-select" data-enhance="1"> → .ui-select-trigger + .ui-menu
   - <input list> / <input data-enhance="autolist"> → .ui-select-wrap + .ui-caret-btn
   ========================================================================== */

/* Настройка размеров кареток (можешь подправить под вкус) */
:root{
  --ui-caret-size-select: 1rem;      /* стрелка в кастомном select-триггере */
  --ui-caret-size-input:  1.15rem;   /* стрелка-кнопка у input[list] */
}

/* Базовая обёртка */
.ui-select-wrap{ position:relative; display:block; }

/* ── Нативный <select> до апгрейда ──────────────────────────────────────── */
.ui-select{
  width:100%;
  border-radius:1rem;
  border:1px solid #d1d5db;          /* gray-300 */
  background:#fff;
  color:#111827;                      /* gray-900 */
  box-shadow:0 4px 6px -1px rgba(0,0,0,.10), 0 2px 4px -2px rgba(0,0,0,.10);
  padding:.5rem .75rem;
  line-height:1.25rem;
  outline:none;
  transition: box-shadow .15s, border-color .15s, background-color .15s;
}
.ui-select:focus{
  border-color:#60a5fa;              /* blue-400 */
  box-shadow:0 0 0 2px rgba(96,165,250,.60), 0 4px 6px -1px rgba(0,0,0,.10), 0 2px 4px -2px rgba(0,0,0,.10);
}
.ui-select--sm{ font-size:.875rem; padding:.375rem .625rem; }
.ui-select--lg{ font-size:1rem;   padding:.625rem .875rem; }

.dark .ui-select{
  background:rgba(55,65,81,.32);
  color:#f3f4f6;
  border:1px solid #6b7280;
  backdrop-filter:blur(4px);
  box-shadow:0 4px 6px -1px rgba(0,0,0,.25), 0 2px 4px -2px rgba(0,0,0,.25);
}
.dark .ui-select:focus{
  border-color:#60a5fa;
  box-shadow:0 0 0 2px rgba(96,165,250,.50), 0 4px 6px -1px rgba(0,0,0,.25), 0 2px 4px -2px rgba(0,0,0,.25);
}

/* ── Кастомный select-триггер ──────────────────────────────────────────── */
.ui-select-trigger{
  position:relative;                  /* чтобы круг ховера/каретка были над содержимым */
  display:inline-flex; align-items:center; justify-content:space-between;
  width:100%;
  border-radius:1rem;
  border:1px solid #d1d5db;
  background:#fff;
  color:#111827;
  box-shadow:0 4px 6px -1px rgba(0,0,0,.10), 0 2px 4px -2px rgba(0,0,0,.10);
  padding:.5rem .75rem;
  line-height:1.25rem;
  outline:none;
  transition: box-shadow .15s, border-color .15s, background-color .15s;
}
.ui-select-trigger:focus{
  border-color:#60a5fa;
  box-shadow:0 0 0 2px rgba(96,165,250,.60), 0 4px 6px -1px rgba(0,0,0,.10), 0 2px 4px -2px rgba(0,0,0,.10);
}
.dark .ui-select-trigger{
  background:rgba(55,65,81,.32);
  color:#f3f4f6;
  border:1px solid #6b7280;
  backdrop-filter:blur(4px);
  box-shadow:0 4px 6px -1px rgba(0,0,0,.25), 0 2px 4px -2px rgba(0,0,0,.25);
}
.dark .ui-select-trigger:focus{
  border-color:#60a5fa;
  box-shadow:0 0 0 2px rgba(96,165,250,.50), 0 4px 6px -1px rgba(0,0,0,.25), 0 2px 4px -2px rgba(0,0,0,.25);
}

/* Подсветка фокуса обёртки (JS кидает .is-focus). Цвета инпутов не трогаем */
.ui-select-wrap.is-focus .ui-select-trigger,
.ui-select-wrap.is-focus > .ui-input{
  box-shadow:0 0 0 2px rgba(96,165,250,.50), 0 4px 6px -1px rgba(0,0,0,.10), 0 2px 4px -2px rgba(0,0,0,.10);
}

/* ── Выпадающее меню ────────────────────────────────────────────────────── */
.ui-menu{
  position:absolute; z-index:50;
  margin-top:.25rem;
  border-radius:1rem;
  border:1px solid #e5e7eb;          /* gray-200 */
  background:#fff;
  box-shadow:0 4px 6px -1px rgba(0,0,0,.10), 0 2px 4px -2px rgba(0,0,0,.10);
  padding:.25rem;
  overflow:auto;
  max-height:33vh;
}
.ui-menu.drop-up{ margin-top:0; margin-bottom:.25rem; }

.dark .ui-menu{
  background:rgba(55,65,81,.42);
  border:1px solid #6b7280;
  backdrop-filter:blur(6px);
  box-shadow:0 4px 6px -1px rgba(0,0,0,.25), 0 2px 4px -2px rgba(0,0,0,.25);
}

/* Пункты меню */
.ui-menu__item{
  cursor:pointer; user-select:none;
  border-radius:.75rem;
  padding:.5rem .75rem;
  font-size:.875rem;                  /* text-sm */
  color:#111827;
  transition:background-color .12s ease, color .12s ease;
}
.ui-menu__item:hover{ background:#f9fafb; }                 /* gray-50 */
.dark .ui-menu__item{ color:#f3f4f6; }
.dark .ui-menu__item:hover{ background:rgba(55,65,81,.40); } /* gray-700/40 */
.ui-menu__item[aria-selected="true"],
.ui-menu__item[data-active="true"]{
  background:#eff6ff; color:#1e3a8a;  /* blue-50 / blue-900 */
}
.dark .ui-menu__item[aria-selected="true"],
.dark .ui-menu__item[data-active="true"]{
  background:rgba(37,99,235,.20); color:#dbeafe; /* blue-600/20 / blue-100 */
}

/* ── Inline-вариант ─────────────────────────────────────────────────────── */
.ui-select--inline{ width:auto; min-width:10rem; flex:0 0 auto; }
.ui-select-wrap.ui-inline{ width:auto; min-width:10rem; flex:0 0 auto; }
.ui-select-wrap.ui-inline .ui-select-trigger{ width:auto; white-space:nowrap; }
.ui-select-wrap.ui-inline .ui-menu{ min-width:100%; }

/* ── Общие правила для обёртки input[list]/select ───────────────────────── */
.ui-select-wrap > input[list],
.ui-select-wrap > input[type="text"],
.ui-select-wrap > .ui-input,
.ui-select-wrap > select{
  padding-right:2.75rem;             /* место под каретку */
}

/* Кнопка-каретка у input[list] — кликабельный кружок справа */
.ui-select-wrap .ui-caret-btn{
  position:absolute; right:.5rem; top:50%; transform:translateY(-50%);
  width:2rem; height:2rem;
  border:0; background:transparent; cursor:pointer;
  color:inherit; border-radius:9999px;
  display:flex; align-items:center; justify-content:center;
  opacity:.95; z-index:2;
  transition: background-color .12s ease, opacity .12s ease;
}
.ui-select-wrap .ui-caret-btn:hover{ background:rgba(17,24,39,.06); opacity:1; }
.dark .ui-select-wrap .ui-caret-btn:hover{ background:rgba(243,244,246,.08); }

/* ── ЕДИНЫЕ правила стрелок (select-триггер и input[list]) ─────────────── */
/* Стрелка в кастомном селект-триггере */
.ui-select-trigger .ui-select-trigger__caret,
.ui-select-trigger svg.ui-select-trigger__caret{ /* ↑ повышаем специфичность */
  width:var(--ui-caret-size-select);
  height:var(--ui-caret-size-select);
  margin-left:.5rem;
  display:inline-block;
  opacity:.95;
  transform:rotate(-90deg);           /* вправо по умолчанию */
  transform-origin:50% 50%;
  transition:transform .16s ease;
  pointer-events:none;
  color:inherit;
}
.ui-select-trigger .ui-select-trigger__caret path{ stroke-linecap:round; stroke-linejoin:round; }

/* Стрелка внутри кнопки-каретки у input[list] */
.ui-select-wrap .ui-caret-btn > svg{
  width:var(--ui-caret-size-input);
  height:var(--ui-caret-size-input);
  opacity:.95;
  transform:rotate(-90deg);
  transform-origin:50% 50%;
  transition:transform .16s ease;
  color:inherit;
  display:block;
}
.ui-select-wrap .ui-caret-btn > svg path{ stroke-linecap:round; stroke-linejoin:round; }

/* При открытии меню стрелки смотрят вниз */
.ui-select-wrap.is-open .ui-select-trigger .ui-select-trigger__caret,
.ui-select-wrap.is-open .ui-caret-btn > svg{
  transform:rotate(0deg);
}

/* Скрываем нативные индикаторы у input[list] */
.ui-select-wrap > input[list]{
  appearance:none; -webkit-appearance:none; background-image:none;
}
.ui-select-wrap > input[list]::-webkit-calendar-picker-indicator{ display:none !important; opacity:0 !important; -webkit-appearance:none !important; }
.ui-select-wrap > input[list]::-webkit-list-button{ display:none !important; }
.ui-select-wrap > input[list]::-ms-clear{ display:none; }

/* Универсальная .ui-input — без жёстких цветов/бордеров (не перебиваем темы) */
.ui-input{
  width:100%;
  border-radius:1rem;
  padding:.5rem .75rem;
  line-height:1.25rem;
  outline:none;
  transition: box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
}
.ui-input:focus{ box-shadow:0 0 0 2px rgba(96,165,250,.60); }
.dark .ui-input:focus{ box-shadow:0 0 0 2px rgba(96,165,250,.50); }


/* === Micro-align для кареток (стрелок) ================================ */
:root{
  /* слегка приподнять стрелку в select (визуально была чуть ниже центра) */
  --ui-caret-nudge-y-select: -0.5px;      /* можно -1px..0px */
  /* тонкая подстройка вертикали у инпутов (обычно 0 или -0.5px) */
  --ui-caret-nudge-y-input:  -0.5px;
  /* пододвинуть кнопку-стрелку у input[list] ближе к правому краю */
  --ui-caret-right-input: .25rem;         /* было .5rem */
}

/* чтобы svg внутри триггера центрировался по высоте пиксель-в-пиксель */
.ui-select-trigger .ui-caret-spot{
  display:flex; align-items:center; line-height:0;
}

/* селект: базовое положение — чуть приподнять и смотреть вправо */
.ui-select-trigger .ui-select-trigger__caret,
.ui-select-trigger svg.ui-select-trigger__caret{
  transform: translateY(var(--ui-caret-nudge-y-select)) rotate(-90deg);
}

/* селект: при открытии меню — тот же nudge, но вниз */
.ui-select-wrap.is-open .ui-select-trigger .ui-select-trigger__caret{
  transform: translateY(var(--ui-caret-nudge-y-select)) rotate(0deg);
}

/* инпуты: кнопку сдвинуть ближе к правому краю */
.ui-select-wrap .ui-caret-btn{
  right: var(--ui-caret-right-input, .5rem);
}

/* инпуты: тоже поддерживаем лёгкий вертикальный nudge */
.ui-select-wrap .ui-caret-btn > svg{
  transform: translateY(var(--ui-caret-nudge-y-input)) rotate(-90deg);
}
.ui-select-wrap.is-open .ui-caret-btn > svg{
  transform: translateY(var(--ui-caret-nudge-y-input)) rotate(0deg);
}