/* ===== SLOTH — Form Inputs, Selects & Checkboxes ===== */

/* ── Input / Label Container ────────────────────────────── */
.input-label-container {
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  text-align: left;
  font-size: var(--text-sm);
  color: var(--text-primary);
  font-family: var(--font-sans);
}

.label-container {
  align-self: stretch;
  position: relative;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}

/* ── Text Input ─────────────────────────────────────────── */
.input-label-wrapper {
  width: 100%;
  align-self: stretch;
  border-radius: var(--radius-surface);
  background-color: var(--bg-input);
  border: 1.5px solid var(--border-input);
  box-shadow: var(--shadow-xs);
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  transition: box-shadow var(--ease-fast), background-color var(--ease-base);
}

/* A dátum/idő mezők kilépnek a fenti flexből: iOS Safari flex gazdán nem méretezi a shadow tree-t (frontend.md). */
.input-label-wrapper[type="date"],
.input-label-wrapper[type="time"],
.input-label-wrapper[type="datetime-local"] {
  display: block;
}

.input-label-wrapper[type="date"]::-webkit-date-and-time-value,
.input-label-wrapper[type="time"]::-webkit-date-and-time-value,
.input-label-wrapper[type="datetime-local"]::-webkit-date-and-time-value {
  text-align: left;
}

.input-label-wrapper:focus {
  outline: none;
  border-color: var(--clr-green);
  box-shadow: var(--shadow-xs);
}

.input-label-wrapper:hover:not(:disabled):not(:focus) {
  border-color: var(--clr-green);
}

.input-label-wrapper:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background-color: var(--bg-surface);
}

.input-label-wrapper::placeholder {
  color: var(--text-muted);
}

/* ── Password Toggle ────────────────────────────────────── */
.password-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.toggle-password {
  position: absolute;
  right: var(--space-3);
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.6;
  transition: opacity var(--ease-fast);
  background: var(--bg-card);
  border-radius: var(--radius-control);
  padding: var(--space-1);
}

.toggle-password:hover {
  opacity: 1;
}

.toggle-password img {
  width: 18px;
  height: 18px;
  display: block;
}

[data-theme="dark"] .toggle-password img {
  filter: brightness(0) invert(1);
}

/* ── Select ─────────────────────────────────────────────── */
.styled-select {
  width: 100%;
  border-radius: var(--radius-surface);
  background-color: var(--bg-input);
  border: 1.5px solid var(--border-input);
  box-shadow: var(--shadow-xs);
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: var(--space-2) 2.25rem var(--space-2) var(--space-3);
  box-sizing: border-box;
  font-size: var(--text-sm);
  color: var(--text-primary);
  font-family: var(--font-sans);
  background-image: url('/storage/icons/dropdown_arrow_green.svg');
  background-repeat: no-repeat;
  background-position: right 0.875rem center;
  background-size: 0.75rem;
  cursor: pointer;
  transition: box-shadow var(--ease-fast), background-color var(--ease-base);
  appearance: none;
  -webkit-appearance: none;
}

.styled-select:focus {
  outline: none;
  border-color: var(--clr-green);
  box-shadow: var(--shadow-xs);
}

.styled-select:hover:not(:disabled) {
  border-color: var(--clr-green);
}

.styled-select:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background-color: var(--bg-surface);
}

.styled-option {
  background-color: var(--bg-card);
  color: var(--text-primary);
  padding: var(--space-2);
}

.styled-option:hover {
  background-color: var(--bg-muted);
}

/* ── Textarea ───────────────────────────────────────────── */
textarea.input-label-wrapper {
  resize: vertical;
  min-height: 6rem;
  line-height: 1.5;
}

/* ── Error Message ──────────────────────────────────────── */
.error-message {
  color: var(--clr-red-dark);
  font-size: var(--text-xs);
  font-weight: 500;
}

/* ── Checkbox Container ─────────────────────────────────── */
.checkbox-label-container {
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  text-align: left;
  font-size: var(--text-sm);
  color: var(--text-primary);
  font-family: var(--font-sans);
}

.checkbox-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.checkbox-container {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.checkbox-label {
  font-size: var(--text-sm);
  color: var(--text-primary);
}

/* ── Input content ──────────────────────────────────────── */
.input-content {
  position: relative;
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
}