/* Wspólne pola formularzy (input / select / textarea). */

:root {
  --control-bg: #2e3338;
  --input-bg: var(--control-bg);
}

label.field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: var(--font-size-body, 13px);
  color: var(--muted, #8b9098);
  margin-bottom: 0.75rem;
}

label.field input,
label.field select,
label.field textarea,
.sr-control {
  font: inherit;
  font-size: var(--font-size-body, 13px);
  padding: 0.3rem 0.4rem;
  background-color: var(--control-bg, #2e3338);
  color: var(--text, #e4e2dc);
  border: 1px solid var(--border, #3a4048);
  border-radius: 3px;
  width: 100%;
  box-sizing: border-box;
}

label.field select,
select.sr-control {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  padding-right: 1.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238b9098' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.45rem center;
  background-size: 10px 7px;
}

label.field textarea {
  min-height: 4.5rem;
  resize: vertical;
  line-height: 1.4;
}

/* Hover: select też podświetla tekst akcentem */
label.field input:hover:not(:disabled):not([readonly]),
label.field textarea:hover:not(:disabled):not([readonly]),
.sr-control:hover:not(:disabled):not([readonly]):not(select) {
  border-color: var(--accent-dim, #8a7340);
}

label.field select:hover:not(:disabled),
select.sr-control:hover:not(:disabled) {
  border-color: var(--accent-dim, #8a7340);
  color: var(--accent, #c4a35a);
}

label.field input:focus,
label.field select:focus,
label.field textarea:focus,
.sr-control:focus {
  outline: none;
  border-color: var(--accent-dim, #8a7340);
  color: var(--text, #e4e2dc);
}

/* Pole filtra z wybraną / wpisaną wartością (nie-domyślną) */
label.field input.is-filter-active,
label.field select.is-filter-active,
label.field textarea.is-filter-active {
  background-color: #4f4735;
  border-color: var(--accent-dim, #8a7340);
  color: var(--text, #e4e2dc);
}

label.field select.is-filter-active {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23c4a35a' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.45rem center;
  background-size: 10px 7px;
}

label.field select.is-filter-active:hover:not(:disabled) {
  color: var(--accent, #c4a35a);
  border-color: var(--accent, #c4a35a);
}

label.field input::placeholder {
  color: var(--muted, #8b9098);
  opacity: 0.85;
}

/* Chrome/Safari: domyślny niebieski „X” w type=search */
label.field input[type="search"] {
  -webkit-appearance: none;
  appearance: none;
}

label.field input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

label.field input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  height: 0.85rem;
  width: 0.85rem;
  margin-left: 0.25rem;
  cursor: pointer;
  background-color: #c4a35a;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%23000' d='M2.1 1L1 2.1 4.9 6 1 9.9 2.1 11 6 7.1 9.9 11 11 9.9 7.1 6 11 2.1 9.9 1 6 4.9z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%23000' d='M2.1 1L1 2.1 4.9 6 1 9.9 2.1 11 6 7.1 9.9 11 11 9.9 7.1 6 11 2.1 9.9 1 6 4.9z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

label.field input[readonly],
label.field input:disabled,
label.field select:disabled,
label.field textarea:disabled,
.sr-control:disabled,
.sr-control[readonly] {
  opacity: 0.7;
  cursor: default;
}

label.field select:disabled {
  cursor: default;
}

/* Wyrównanie opcji w niektórych przeglądarkach */
label.field select option,
select.sr-control option {
  background: var(--panel, #24282c);
  color: var(--text, #e4e2dc);
}

.field-hint {
  font-size: 11px;
  line-height: 1.4;
  color: var(--muted, #8b9098);
  margin-top: 0.15rem;
}

.field-hint code {
  color: var(--accent, #c4a35a);
  font-size: inherit;
}