/* === Универсальный скин для выпадашек === */

/* Обёртка компонента (нужна для позиционирования меню) */
.ui-select-wrap{
  position: relative;
  display: block;
}


/* Нативный <select> с системной стрелкой */
.ui-select{
  width:100%;
  border-radius:1rem;                /* rounded-2xl */
  border:1px solid #d1d5db;          /* border-gray-300 */
  background:#fff;                   /* light bg */
  color:#111827;                     /* text-gray-900 */
  box-shadow:
    0 4px 6px -1px rgba(0,0,0,.10),
    0 2px 4px -2px rgba(0,0,0,.10);  /* shadow-md */
  padding:.5rem .75rem;              /* py-2 px-3 */
  line-height:1.25rem;
  outline:none;
  transition:.15s ease;
}
.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: чуть менее прозрачный фон и сильнее blur */
.dark .ui-select{
  background:rgba(55,65,81,.32);     /* gray-700/32% */
  color:#f3f4f6;                      /* text-gray-100 */
  border:1px solid #6b7280;           /* gray-500 */
  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{
  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:.15s ease;
}
.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);
}
.ui-select-trigger__caret{
  width:1rem; height:1rem; opacity:.8; margin-left:.5rem;
}

.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);
}

/* Выпадающее меню (кастомный список) */
.ui-menu{
  position:absolute; z-index:50;
  margin-top:.25rem;                 /* отступ вниз по умолчанию */
  border-radius:1rem;
  border:1px solid #e5e7eb;          /* border-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:50vh;                   /* дефолт, JS может переопределить */
}
/* Вариант раскрытия вверх (JS добавляет .drop-up) */
.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;              /* rounded-xl */
  padding:.5rem .75rem;              /* py-2 px-3 */
  font-size:.875rem;                 /* text-sm */
  color:#111827;
  transition:background-color .12s ease, color .12s ease;
}
.ui-menu__item:hover{ background:#f9fafb; }      /* hover:bg-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;            /* bg-blue-50 / text-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 / text-blue-100 */
}

/* === Inline-вариант для селекта в одной строке с кнопками === */

/* НЕэнхансенный (нативный) селект: просто авто-ширина */
.ui-select--inline{
  width:auto;
  min-width:10rem;         /* чтобы не был слишком узким */
  flex:0 0 auto;           /* не растягиваться в flex-строке */
}

/* ЭНХАНСЕННЫЙ селект: на враппер кладём .ui-inline */
.ui-select-wrap.ui-inline{
  width:auto;
  min-width:10rem;
  flex:0 0 auto;
}

.ui-select-wrap.ui-inline .ui-select-trigger{
  width:auto;              /* вместо 100% */
  white-space:nowrap;      /* не переносить одно слово */
}

.ui-select-wrap.ui-inline .ui-menu{
  min-width:100%;          /* меню не уже триггера */
}