/* =========================
   Form Controls
   Extracted from main.css
   ========================= */

/* =========================
   Form controls: <select> (Bootstrap-like)
   Unified styling for all <select> elements in both themes.
   Uses a theme-aware SVG caret. Use .select-plain to opt out.
   ========================= */
:root {
  --select-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23adb5bd'%3E%3Cpath d='M8 11.5a.75.75 0 0 1-.53-.22l-4-4a.75.75 0 1 1 1.06-1.06L8 9.69l3.47-3.47a.75.75 0 0 1 1.06 1.06l-4 4a.75.75 0 0 1-.53.22z'/%3E%3C/svg%3E");
}
select:not(.select-plain) {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: var(--panel);
  color: var(--ink);
  border: 2px solid var(--line);
  border-radius: var(--radius-md);
  padding: 6px 32px 6px 10px;
  line-height: 1.4;
  font-weight: 500;
  background-image: var(--select-caret);
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px 16px;
  transition: border-color var(--transition-fast) ease, box-shadow var(--transition-fast) ease;
  cursor: pointer;
}

select:not(.select-plain):hover {
  border-color: color-mix(in srgb, var(--accent) 60%, var(--line));
}

select:not(.select-plain):focus,
select:not(.select-plain):focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}

select:not(.select-plain):disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Theme the opened option list where browser engines allow it. */
select:not(.select-plain) option {
  background-color: var(--panel);
  color: var(--ink);
}

select:not(.select-plain) option:checked {
  background: linear-gradient(var(--accent), var(--accent));
  color: #ffffff;
}

select:not(.select-plain) option:hover,
select:not(.select-plain) option:focus {
  background-color: color-mix(in srgb, var(--accent) 16%, var(--panel));
  color: var(--ink);
}

select:not(.select-plain) option {
  background: var(--panel);
  color: var(--ink);
}

/* In-table selects: keep compact height, preserve styling */
.banker-table select:not(.select-plain),
.vegas-table select:not(.select-plain),
.skins-table select:not(.select-plain),
.junk-table select:not(.select-plain) {
  padding: 4px 28px 4px 8px;
  background-size: 14px 14px;
  background-position: right 6px center;
  border-radius: var(--radius-sm);
}

/* =========================================================================
   Light theme overrides — moved from light-theme-overrides.css
   ========================================================================= */

:root[data-theme="light"] {
  --select-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%237b8a8b'%3E%3Cpath d='M8 11.5a.75.75 0 0 1-.53-.22l-4-4a.75.75 0 1 1 1.06-1.06L8 9.69l3.47-3.47a.75.75 0 0 1 1.06 1.06l-4 4a.75.75 0 0 1-.53.22z'/%3E%3C/svg%3E");
}

:root[data-theme="light"] .control input[type="text"] {
  background: #ffffff;
  color: #1a1c1f;
  border: 2px solid #bcc7d2;
}

:root[data-theme="light"] input[type="checkbox"] {
  accent-color: #0090e0;
}

:root[data-theme="light"] input[type="number"] {
  background: #ffffff;
  color: #1a1c1f;
  border: 2px solid #bcc7d2;
}

:root[data-theme="light"] input[type="number"]:focus {
  border-color: #0090e0;
  outline: none;
}