/* ════════════════════════════════════════════════════════════════
   theme-apple-controls.css — Zadanie 3: przyciski / pola / przełączniki
   Realne klasy (z styles.css): .btn, .btn.primary/.btn-primary,
   .btn.danger, .btn.ghost, .btn-sm, .input/input/select/textarea,
   .field, .mes-tabs/.mes-tab (taby = segmented), .pill.
   !important używane wyłącznie tam, gdzie bije istniejące !important.
   ════════════════════════════════════════════════════════════════ */

/* ── Przyciski: płaskie, miękkie, Apple ── */
.btn {
  border-radius: var(--r) !important;
  font-weight: 590;
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--text);
  box-shadow: var(--shadow-xs);
  letter-spacing: -.01em;
}
.btn:hover { background: var(--surface-hover); border-color: var(--border-2); box-shadow: var(--shadow-sm); }
.btn:active { transform: scale(.98); }

/* Primary: solidny Apple blue (zamiast generycznego gradientu z !important) */
.btn.primary,
.btn-primary {
  background: var(--accent) !important;
  border: 1px solid transparent !important;
  color: #fff !important;
  box-shadow: var(--shadow-sm) !important;
}
.btn.primary:hover,
.btn-primary:hover {
  background: var(--accent-2) !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow) !important;
}
.btn.primary:active,
.btn-primary:active { transform: scale(.98); }

/* Danger / ghost spójne z tokenami */
.btn.danger {
  background: var(--bg-2);
  border-color: var(--red);
  color: var(--red);
}
.btn.danger:hover { background: var(--red-soft); border-color: var(--red); color: var(--red); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--text-2); box-shadow: none; }
.btn.ghost:hover { background: var(--accent-soft); color: var(--accent); }

.btn.btn-sm, .btn-sm { border-radius: var(--r-sm) !important; }

/* ── Pola formularzy ── */
.input, input[type="text"], input[type="number"], input[type="search"],
input[type="email"], input[type="password"], input[type="date"],
input[type="month"], input[type="time"], select, textarea {
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--text);
  box-shadow: none;
}
.input:hover, input:hover, select:hover, textarea:hover { border-color: var(--border-2); }
.input:focus, input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
  background: var(--bg-2);
}
::placeholder { color: var(--muted-2); }

.field > span:first-child { color: var(--text-2); }
.field .hint { color: var(--muted); }

/* ── Checkbox / radio: akcent Apple ── */
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }

/* iOS-style switch dla elementów oznaczonych jako przełącznik */
.switch input[type="checkbox"],
input.toggle[type="checkbox"],
input[type="checkbox"][role="switch"] {
  appearance: none; -webkit-appearance: none;
  position: relative;
  width: 44px; height: 26px;
  border-radius: var(--r-full);
  background: var(--border-2);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease);
  flex: 0 0 auto;
}
.switch input[type="checkbox"]::after,
input.toggle[type="checkbox"]::after,
input[type="checkbox"][role="switch"]::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 22px; height: 22px; border-radius: var(--r-full);
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3);
  transition: transform var(--dur) var(--ease);
}
.switch input[type="checkbox"]:checked,
input.toggle[type="checkbox"]:checked,
input[type="checkbox"][role="switch"]:checked { background: var(--green); }
.switch input[type="checkbox"]:checked::after,
input.toggle[type="checkbox"]:checked::after,
input[type="checkbox"][role="switch"]:checked::after { transform: translateX(18px); }

/* ── Taby jako segmented control feel ── */
.mes-tab { color: var(--text-2); border-radius: var(--r-sm) var(--r-sm) 0 0; }
.mes-tab:hover { color: var(--text); background: var(--accent-soft); }
.mes-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

/* Pill / chip / tag */
.pill { border-radius: var(--r-full); }