/**
 * Modern styling for select dropdowns and form controls in Unfold admin.
 * Makes native <select> and boolean choice widgets look consistent with the theme.
 */

/* Scope to admin content so we don't affect login or other pages */
#content-main select,
main form select,
[data-main] form select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 1.25rem 1.25rem;
  padding: 0.5rem 2rem 0.5rem 0.75rem;
  border-radius: 0.375rem;
  border: 1px solid rgb(209 213 219);
  font-size: 0.875rem;
  line-height: 1.25rem;
  min-height: 2.25rem;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#content-main select:hover,
main form select:hover,
[data-main] form select:hover {
  border-color: rgb(156 163 175);
}

#content-main select:focus,
main form select:focus,
[data-main] form select:focus {
  outline: none;
  border-color: rgb(59 130 246);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

/* Dark theme (Unfold .dark) */
.dark #content-main select,
.dark main form select,
.dark [data-main] form select,
html.dark #content-main select,
html.dark main form select,
html.dark [data-main] form select {
  background-color: rgb(55 65 81);
  border-color: rgb(75 85 99);
  color: rgb(243 244 246);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%239ca3af'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
}

.dark #content-main select:hover,
.dark main form select:hover,
.dark [data-main] form select:hover,
html.dark #content-main select:hover,
html.dark main form select:hover,
html.dark [data-main] form select:hover {
  border-color: rgb(107 114 128);
}

.dark #content-main select:focus,
.dark main form select:focus,
.dark [data-main] form select:focus,
html.dark #content-main select:focus,
html.dark main form select:focus,
html.dark [data-main] form select:focus {
  border-color: rgb(96 165 250);
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.25);
}

.dark #content-main select option,
.dark main form select option,
.dark [data-main] form select option,
html.dark #content-main select option,
html.dark main form select option,
html.dark [data-main] form select option {
  background-color: rgb(31 41 55);
  color: rgb(243 244 246);
}