/* Slim Select base styles (v3.x) themed for our UI.
   Based on upstream `dist/slimselect.css` but with our colors + dark mode.
   Plain CSS only (no Tailwind @apply).
*/

:root{
  --ss-primary-color:#7c3aed; /* violet-600 */
  --ss-bg-color:#ffffff;
  --ss-font-color:#0f172a; /* slate-900 */
  --ss-placeholder-color:#94a3b8; /* slate-400 */
  --ss-disabled-color:#f1f5f9; /* slate-100 */
  --ss-border-color:#e2e8f0; /* slate-200 */
  --ss-highlight-color:#fffb8c;
  --ss-focus-color:var(--ss-primary-color);
  --ss-accent-text:#6d28d9; /* violet-700 */
  --ss-accent-bg:rgba(124,58,237,.08); /* lighter violet tint */
  --ss-accent-bg-strong:rgba(124,58,237,.10);
  --ss-success-color:#00b755;
  --ss-error-color:#dc3545;
  --ss-main-height:40px;
  --ss-content-height:300px;
  --ss-search-height:40px;
  --ss-option-height:auto;
  --ss-spacing-l:9px;
  --ss-spacing-m:7px;
  --ss-spacing-s:5px;
  --ss-animation-timing:0.2s;
  --ss-border-radius:10px; /* closer to our rounded-lg */
}

.dark{
  --ss-bg-color:#1e293b; /* slate-800 */
  --ss-font-color:#ffffff;
  --ss-placeholder-color:#64748b; /* slate-500 */
  --ss-disabled-color:#0f172a; /* slate-900 */
  --ss-border-color:#334155; /* slate-700 */
  --ss-accent-text:#c4b5fd; /* violet-300 */
  --ss-accent-bg:rgba(124,58,237,.18);
  --ss-accent-bg-strong:rgba(124,58,237,.22);
}

@keyframes ss-valueIn{0%{transform:scale(0);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes ss-valueOut{0%{transform:scale(1);opacity:1}100%{transform:scale(0);opacity:0}}

.ss-hide{display:none!important}

.ss-main{
  display:flex;
  flex-direction:row;
  position:relative;
  user-select:none;
  color:var(--ss-font-color);
  min-height:var(--ss-main-height);
  width:100%;
  padding:var(--ss-spacing-s);
  cursor:pointer;
  font-size:0.875rem; /* match our DaisyUI select usage (text-sm) */
  font-weight:500; /* match our DaisyUI select usage (font-medium) */
  border:1px solid var(--ss-border-color);
  border-radius:var(--ss-border-radius);
  background-color:var(--ss-bg-color);
  outline:0;
  box-sizing:border-box;
  transition:box-shadow var(--ss-animation-timing),border-color var(--ss-animation-timing),background-color var(--ss-animation-timing);
  overflow:hidden;
}
.ss-main:focus{box-shadow:0 0 0 4px rgba(124,58,237,.10);border-color:var(--ss-focus-color)}
.ss-main.ss-disabled{background-color:var(--ss-disabled-color);cursor:not-allowed;opacity:.7}

.ss-main.ss-dir-above{border-top-left-radius:0;border-top-right-radius:0}
.ss-main.ss-dir-below{border-bottom-left-radius:0;border-bottom-right-radius:0}

.ss-main .ss-values{
  display:inline-flex;
  flex-wrap:wrap;
  gap:var(--ss-spacing-m);
  flex:1 1 100%;
  min-width:0;
  max-width:100%;
  overflow:hidden;
}
.ss-main .ss-values .ss-placeholder{
  display:block;
  width:100%;
  min-width:0;
  padding:var(--ss-spacing-s) var(--ss-spacing-m);
  margin:auto 0;
  line-height:1em;
  color:var(--ss-placeholder-color);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:500;
}
.ss-main .ss-values .ss-single{
  display:block;
  margin:auto 0 auto var(--ss-spacing-s);
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  flex:1 1 auto;
  max-width:calc(100% - 20px);
  font-weight:500;
}
.ss-main .ss-values .ss-max{
  display:flex;
  user-select:none;
  align-items:center;
  width:fit-content;
  font-size:12px;
  color:var(--ss-bg-color);
  line-height:1;
  padding:var(--ss-spacing-s) var(--ss-spacing-m);
  background-color:var(--ss-primary-color);
  border-radius:999px;
}
.ss-main .ss-values .ss-value{
  display:flex;
  user-select:none;
  align-items:center;
  width:fit-content;
  max-width:100%;
  background-color:var(--ss-primary-color);
  border-radius:999px;
  animation:ss-valueIn var(--ss-animation-timing) ease-out both;
}
.ss-main .ss-values .ss-value.ss-value-out{animation:ss-valueOut var(--ss-animation-timing) ease-out}
.ss-main .ss-values .ss-value .ss-value-text{
  flex:1;
  min-width:0;
  font-size:12px;
  line-height:1;
  color:#fff;
  padding:var(--ss-spacing-s) var(--ss-spacing-m);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:600;
}
.ss-main .ss-values .ss-value .ss-value-delete{
  display:flex;
  align-items:center;
  height:var(--ss-spacing-l);
  width:var(--ss-spacing-l);
  padding:var(--ss-spacing-s) var(--ss-spacing-m);
  cursor:pointer;
  border-left:solid 1px rgba(255,255,255,.35);
  box-sizing:content-box;
}
.ss-main .ss-values .ss-value .ss-value-delete svg{height:var(--ss-spacing-l);width:var(--ss-spacing-l)}
.ss-main .ss-values .ss-value .ss-value-delete svg path{fill:none;stroke:#fff;stroke-width:18;stroke-linecap:round;stroke-linejoin:round}

.ss-main .ss-deselect{
  flex:0 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  width:fit-content;
  height:auto;
  padding:0 var(--ss-spacing-m);
}
.ss-main .ss-deselect svg{width:10px;height:10px}
.ss-main .ss-deselect svg path{fill:none;stroke:var(--ss-font-color);stroke-width:20;stroke-linecap:round;stroke-linejoin:round}

.ss-main .ss-arrow{
  flex:0 1 auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  width:12px;
  height:12px;
  margin:auto var(--ss-spacing-m);
}
.ss-main .ss-arrow path{
  fill:none;
  stroke:var(--ss-font-color);
  stroke-width:18;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:var(--ss-animation-timing) ease-out;
}

.ss-content{
  position:absolute;
  display:flex;
  height:auto;
  flex-direction:column;
  width:auto;
  max-height:var(--ss-content-height);
  box-sizing:border-box;
  border:solid 1px var(--ss-border-color);
  background-color:var(--ss-bg-color);
  transition:transform var(--ss-animation-timing),opacity var(--ss-animation-timing);
  opacity:0;
  transform:scaleY(0);
  overflow:hidden;
  z-index:10000;
  border-radius:var(--ss-border-radius);
  box-shadow:0 16px 40px rgba(0,0,0,.18);
}
.ss-content.ss-relative{position:relative;height:100%}
.ss-content.ss-fixed{position:fixed}
.ss-content.ss-dir-above{transform-origin:center bottom;flex-direction:column-reverse}
.ss-content.ss-dir-below{transform-origin:center top}
.ss-content.ss-open{opacity:1;transform:scaleY(1)}

.ss-content .ss-search{flex:0 1 auto;display:flex;flex-direction:row;border-bottom:1px solid var(--ss-border-color)}
.ss-content .ss-search input{
  display:inline-flex;
  font-size:inherit;
  line-height:inherit;
  flex:1 1 auto;
  width:100%;
  min-width:0;
  height:var(--ss-search-height);
  padding:var(--ss-spacing-m) var(--ss-spacing-l);
  margin:0;
  border:none;
  background-color:var(--ss-bg-color);
  outline:0;
  text-align:left;
  box-sizing:border-box;
}
.ss-content .ss-search input::placeholder{color:var(--ss-placeholder-color)}
.ss-content .ss-search input:focus{box-shadow:none}
.ss-content.ss-dir-above .ss-search{border-bottom:none;border-top:1px solid var(--ss-border-color)}

.ss-content .ss-list{flex:1 1 auto;height:auto;overflow-x:hidden;overflow-y:auto}
.ss-content .ss-list .ss-error{color:var(--ss-error-color);padding:var(--ss-spacing-l)}
.ss-content .ss-list .ss-searching{color:var(--ss-placeholder-color);padding:var(--ss-spacing-l)}

.ss-content .ss-list .ss-option{
  display:flex;
  align-items:center;
  min-height:var(--ss-option-height);
  padding:10px var(--ss-spacing-l);
  white-space:normal;
  color:var(--ss-font-color);
  cursor:pointer;
  user-select:none;
  font-weight:500;
  font-size:0.875rem; /* match our DaisyUI select usage (text-sm) */
}
.ss-content .ss-list .ss-option:hover:not(.ss-disabled){
  color:var(--ss-accent-text);
  background-color:var(--ss-accent-bg);
}
.ss-content .ss-list .ss-option.ss-highlighted,
.ss-content .ss-list .ss-option:not(.ss-disabled).ss-selected{
  color:var(--ss-accent-text);
  background-color:var(--ss-accent-bg-strong);
}
.ss-content .ss-list .ss-option.ss-disabled{cursor:not-allowed;background-color:var(--ss-disabled-color)}
.ss-content .ss-list .ss-option.ss-disabled:hover{color:var(--ss-font-color)}
.ss-content .ss-list .ss-option .ss-search-highlight{display:inline-block;background-color:var(--ss-highlight-color)}