/*
 * Kontrolki formularzy w stylu klienta Margonem: pola tekstowe i wyszukiwarki, listy rozwijane (select),
 * checkboxy i radio, chipy modyfikatorów, zakładki, przyciski w stanie disabled, cele dotyku na telefonie.
 * Plik ładowany na końcu (po stylach modułów), więc przy równej specyfikacji jego reguły wygrywają.
 * Bazowe reguły elementów są w :where(), żeby reguły komponentów (np. .guess-search input) mogły je nadpisać.
 */

:root {
  --ctl-h: 40px;
  --field-bg: #151316;
  --field-line: rgba(200, 60, 60, 0.5);
  --check-ok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.5l4.5 4.5 4.5-4.5' fill='none' stroke='%23d5bf74' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --clear-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 2l8 8M10 2l-8 8' stroke='%23d5bf74' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ---------- Pola tekstowe, wyszukiwarki, listy rozwijane ---------- */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) {
  min-height: var(--ctl-h);
  padding: 8px 12px;
  font: inherit;
  font-size: 0.95rem;
  color: var(--title);
  background-color: var(--field-bg);
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), transparent 45%);
  border: 1px solid #000;
  border-image: none;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px var(--field-line), inset 0 2px 5px rgba(0, 0, 0, 0.5);
  transition: box-shadow 0.15s, background-color 0.15s;
}
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea):hover:not(:disabled) {
  box-shadow: inset 0 0 0 1px var(--gold-3), inset 0 2px 5px rgba(0, 0, 0, 0.5);
}
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea):focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 0;
  box-shadow: inset 0 0 0 1px var(--gold-2), inset 0 2px 5px rgba(0, 0, 0, 0.5), 0 0 12px rgba(237, 219, 94, 0.3);
}
:where(input, select, textarea):disabled { opacity: 0.45; cursor: not-allowed; }
input::placeholder { color: #8f8a80; opacity: 1; }
input:-webkit-autofill, input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--title);
  box-shadow: inset 0 0 0 50px var(--field-bg), inset 0 0 0 1px var(--gold-3);
  caret-color: var(--title);
}

/* Lista rozwijana: własna strzałka, bez natywnego wyglądu */
select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  cursor: pointer;
  text-overflow: ellipsis;
  background-image: var(--chevron), linear-gradient(rgba(0, 0, 0, 0.5), transparent 45%);
  background-repeat: no-repeat, no-repeat;
  background-position: right 12px center, 0 0;
  background-size: 12px 8px, 100% 100%;
  color-scheme: dark;
}
select:focus-visible, select:hover:not(:disabled) { background-image: var(--chevron), linear-gradient(rgba(0, 0, 0, 0.5), transparent 45%); }
select option, select optgroup { background: #1c1a1e; color: var(--title); font-weight: 400; }
select option:checked { background: #4a1717; color: var(--gold); }
select option:disabled { color: var(--muted); }
/* Mała lista (np. wybór rankingu w karcie Trasa) */
.route-top-head select, select.sm {
  min-height: 32px; padding: 3px 28px 3px 10px; font-size: 0.82rem; font-weight: 700; letter-spacing: 0; text-transform: none;
  background-position: right 9px center, 0 0;
  background-size: 10px 7px, 100% 100%;
}

/* Wyszukiwarka (type=search): własny krzyżyk czyszczenia */
input[type="search"] { -webkit-appearance: none; appearance: none; }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin-left: 6px; cursor: pointer; opacity: 0.75;
  background: var(--clear-x) center / 11px no-repeat;
}
input[type="search"]::-webkit-search-cancel-button:hover { opacity: 1; }

/* ---------- Checkbox i radio ---------- */
:where(input[type="checkbox"], input[type="radio"]) {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  display: inline-grid;
  place-content: center;
  width: 22px;
  height: 22px;
  min-height: 0;
  margin: 0;
  padding: 0;
  vertical-align: middle;
  cursor: pointer;
  background: linear-gradient(#0c0d0d, #1c1a1e);
  border: 1px solid #000;
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px #6b6868, inset 0 0 0 2px #0c0d0d;
  transition: box-shadow 0.15s, background 0.15s;
}
:where(input[type="radio"]) { border-radius: 50%; }
:where(input[type="checkbox"], input[type="radio"]):hover:not(:disabled) { box-shadow: inset 0 0 0 1px var(--gold-2), inset 0 0 0 2px #0c0d0d; }
:where(input[type="checkbox"]):checked {
  background: var(--check-ok) center / 14px no-repeat, linear-gradient(rgba(255, 255, 255, 0.16), transparent 50%), linear-gradient(to top, #12210d, #396b29);
  box-shadow: inset 0 0 0 1px var(--gold-2), inset 0 0 0 2px #0c0d0d;
}
:where(input[type="radio"]):checked {
  background: radial-gradient(circle, #fff2a6 0 3px, #d5bf74 4px, #9a7a1f 6px, transparent 7px), linear-gradient(#0c0d0d, #1c1a1e);
  box-shadow: inset 0 0 0 1px var(--gold-2), inset 0 0 0 2px #0c0d0d;
}
:where(input[type="checkbox"], input[type="radio"]):focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Wiersz z checkboxem: cały podpis jest celem dotyku */
.field-check, .lobby-settings .field-check {
  display: flex; align-items: center; gap: 10px; min-height: var(--ctl-h); cursor: pointer; font-size: 0.88rem; line-height: 1.35;
  color: var(--text-2); user-select: none;
}
.field-check:hover { color: var(--title); }
.field-check:has(input:checked) { color: var(--title); }

/* ---------- Chipy modyfikatorów (przełączniki) z polem wyboru ---------- */
.mod-chip { min-height: 36px; gap: 8px; transition: filter 0.15s, box-shadow 0.15s, color 0.15s; }
.mod-chip::before {
  content: ""; flex: none; width: 16px; height: 16px; border-radius: 4px;
  background: linear-gradient(#0c0d0d, #1c1a1e); box-shadow: inset 0 0 0 1px #6b6868;
}
.mod-chip.on::before {
  background: var(--check-ok) center / 11px no-repeat, linear-gradient(to top, #12210d, #396b29);
  box-shadow: inset 0 0 0 1px var(--gold-2);
}

/* ---------- Zakładki (ranking: okres, statystyki: statystyki/atlas) ---------- */
.lb-tab, .stats-tab, .info-tab {
  min-height: 38px; padding: 7px 16px; font: inherit; font-weight: 700; font-size: 0.88rem; letter-spacing: 0.02em;
  color: var(--text-2); cursor: pointer; border: 0; border-radius: 8px;
  background: linear-gradient(#0c0d0d, #1c1a1e); box-shadow: var(--plate-shadow);
  transition: color 0.15s, box-shadow 0.15s, filter 0.15s;
}
.lb-tab:hover, .stats-tab:hover, .info-tab:hover { color: #fff; box-shadow: inset 0 0 0 1px var(--gold-2), inset 0 0 0 3px #0c0d0d; }
.lb-tab.active, .stats-tab.active, .info-tab.active {
  color: #1b1405; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  background: linear-gradient(#fff2a6, #d5bf74 60%, #9a7a1f); box-shadow: 0 0 0 1px #000, inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.lb-tab:focus-visible, .stats-tab:focus-visible, .info-tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.lb-tabs { gap: 8px; }

/* ---------- Przyciski ---------- */
.btn { min-height: var(--ctl-h); }
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.6; cursor: not-allowed; color: var(--muted); transform: none; text-shadow: none;
  filter: grayscale(0.9) brightness(0.8);
  box-shadow: inset 0 0 0 1px #4a4546, inset 0 0 0 3px #0c0d0d;
}
.emote-btn:focus-visible, .mode-card:focus-visible, .atlas-pool:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---------- Telefon: cele dotyku min. 40 px ---------- */
@media (max-width: 640px) {
  :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) { font-size: 1rem; } /* bez powiększania strony przy fokusie w iOS */
  .btn { min-height: 44px; }
  .btn-ghost#expandBtn, #expandBtn { min-width: 44px; }
  .mod-chip { min-height: 40px; }
  .route-top-head select, select.sm { min-height: 40px; font-size: 0.9rem; }
  .lb-tab, .stats-tab, .info-tab { min-height: 42px; padding: 8px 12px; }
  .emote-bar { gap: 5px; }
  .emote-btn { min-width: 40px; min-height: 42px; padding: 6px 7px; }
  .suggestions li, .hint-menu button { min-height: 40px; align-items: center; }
  :where(input[type="checkbox"], input[type="radio"]) { width: 24px; height: 24px; }
  .atlas-pool { min-height: 44px; }

}