/* Animated select boxes: the list is drawn by js/ui-select.js (used by the system, home page and login page) */
select:not([multiple]):not([size]) {
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 20 20' fill='%2364748b'%3E%3Cpath d='M5.3 7.3a1 1 0 0 1 1.4 0L10 10.6l3.3-3.3a1 1 0 1 1 1.4 1.4l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 0 1 0-1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .6rem center; background-size: 12px;
  padding-right: 2rem !important;
  transition: border-color .2s, box-shadow .2s, transform .15s, background-color .2s;
  cursor: pointer;
}
select:not([multiple]):not([size]):hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 12px -6px rgba(30,58,138,.35); }
select:not([multiple]):not([size]):focus { outline: none; box-shadow: 0 0 0 3px rgba(59,130,246,.25); }
select.sel-open {
  box-shadow: 0 0 0 3px rgba(59,130,246,.3) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 20 20' fill='%232563eb'%3E%3Cpath d='M14.7 12.7a1 1 0 0 1-1.4 0L10 9.4l-3.3 3.3a1 1 0 1 1-1.4-1.4l4-4a1 1 0 0 1 1.4 0l4 4a1 1 0 0 1 0 1.4z'/%3E%3C/svg%3E");
}
select:disabled { cursor: not-allowed; }
@keyframes selFlash { 0% { box-shadow: 0 0 0 0 rgba(16,185,129,.55); } 100% { box-shadow: 0 0 0 8px rgba(16,185,129,0); } }
select.sel-changed { animation: selFlash .6s ease-out; }

.sel-panel {
  position: fixed; z-index: 80; background: #fff; border: 1px solid #e2e8f0; border-radius: .75rem;
  box-shadow: 0 18px 40px -12px rgba(15,23,42,.35), 0 4px 10px -4px rgba(15,23,42,.15);
  padding: .3rem; font-size: .8125rem; color: #1e293b;
  transform-origin: top center; animation: selIn .18s cubic-bezier(.2,.9,.3,1.2);
}
.sel-panel.sel-up { transform-origin: bottom center; animation-name: selInUp; }
.sel-panel.sel-closing { animation: selOut .12s ease-in forwards; }
@keyframes selIn { from { opacity: 0; transform: translateY(-8px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes selInUp { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes selOut { to { opacity: 0; transform: translateY(-4px) scale(.98); } }
.sel-list { max-height: 280px; overflow-y: auto; overscroll-behavior: contain; }
.sel-search { width: 100%; border: 1px solid #e2e8f0; border-radius: .5rem; padding: .35rem .6rem; margin-bottom: .3rem; outline: none; font-size: .8125rem; }
.sel-search:focus { border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,.2); }
.sel-item { padding: .45rem .7rem .45rem 1.7rem; border-radius: .5rem; cursor: pointer; position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background-color .12s, padding-left .12s; }
.sel-item.is-active { background: #eff6ff; color: #1d4ed8; padding-left: 1.9rem; }
.sel-item.is-selected { font-weight: 700; color: #1e3a8a; }
.sel-item.is-selected::before { content: "✔"; position: absolute; left: .55rem; color: #10b981; font-size: .75rem; }
.sel-item.is-disabled { color: #94a3b8; cursor: not-allowed; }
.sel-item[hidden] { display: none; }