:root {
  --control-bg: var(--input-bg);
  --control-border: var(--input-border);
  --control-radius: var(--input-radius);
  --control-padding-y: var(--input-padding-y);
  --control-padding-x: var(--input-padding-x);
  --control-focus-shadow: var(--input-focus-shadow);
  --control-disabled-bg: var(--input-disabled-bg);
  --control-disabled-text: var(--input-disabled-text);
}

.app-content input[type="text"],
.app-content input[type="email"],
.app-content input[type="password"],
.app-content input[type="number"],
.app-content input[type="date"],
.app-content input[type="datetime-local"],
.app-content input[type="search"],
.app-content select,
.app-content textarea {
  border: 1px solid var(--control-border);
  border-radius: var(--control-radius);
  padding: var(--control-padding-y) var(--control-padding-x);
  background: var(--control-bg);
  color: var(--color-text);
  font: inherit;
}

.app-content textarea {
  resize: vertical;
}

.app-content input[type="text"]:focus,
.app-content input[type="email"]:focus,
.app-content input[type="password"]:focus,
.app-content input[type="number"]:focus,
.app-content input[type="date"]:focus,
.app-content input[type="datetime-local"]:focus,
.app-content input[type="search"]:focus,
.app-content select:focus,
.app-content textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--control-focus-shadow);
}

.app-content input[data-iban-field].is-invalid {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

.iban-field-message {
  color: var(--text-danger);
  font-size: var(--text-sm9);
  line-height: 1.35;
  margin-top: -2px;
}

.app-content input[type="text"][readonly],
.app-content input[type="email"][readonly],
.app-content input[type="password"][readonly],
.app-content input[type="number"][readonly],
.app-content input[type="date"][readonly],
.app-content input[type="datetime-local"][readonly],
.app-content input[type="search"][readonly],
.app-content select[readonly],
.app-content textarea[readonly] {
  background: var(--control-bg);
  color: var(--color-text-muted);
  cursor: default;
}

.app-content input[type="text"]:disabled,
.app-content input[type="email"]:disabled,
.app-content input[type="password"]:disabled,
.app-content input[type="number"]:disabled,
.app-content input[type="date"]:disabled,
.app-content input[type="datetime-local"]:disabled,
.app-content input[type="search"]:disabled,
.app-content select:disabled,
.app-content textarea:disabled {
  background: var(--control-disabled-bg);
  color: var(--control-disabled-text);
  cursor: not-allowed;
}

.filter-chip {
  border: 1px solid var(--control-border);
  background: var(--control-bg);
  padding: 10px 14px;
  border-radius: var(--control-radius);
  color: var(--color-gray-800);
  cursor: pointer;
}

.filter-chip:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--control-focus-shadow);
}
