input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="datetime-local"],
input[type="datetime"],
input[type="tel"],
input[type="number"],
input[type="url"],
input[type="search"],
select,
textarea {
  background: #ffffff;
  color: var(--color-primary);
  border-radius: 12px;
  padding: 10px 16px;
  border: 1px solid rgba(20, 54, 66, 0.16);
  box-shadow: 0 4px 12px rgba(20, 54, 66, 0.06);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  outline: none;
}

input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="password"]::placeholder,
input[type="date"]::placeholder,
input[type="datetime-local"]::placeholder,
input[type="datetime"]::placeholder,
input[type="tel"]::placeholder,
input[type="number"]::placeholder,
input[type="url"]::placeholder,
input[type="search"]::placeholder,
textarea::placeholder {
  color: rgba(81, 98, 115, 0.7);
}

input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="date"]:hover,
input[type="datetime-local"]:hover,
input[type="datetime"]:hover,
input[type="tel"]:hover,
input[type="number"]:hover,
input[type="url"]:hover,
input[type="search"]:hover,
select:hover,
textarea:hover {
  border-color: rgba(27, 127, 189, 0.35);
}

input:focus,
select:focus,
textarea:focus {
  border-color: #1b7fbd;
  box-shadow: 0 0 0 4px rgba(27, 127, 189, 0.16);
  background: #ffffff;
  outline: none;
}

input:disabled,
select:disabled,
textarea:disabled {
  background: #f4f6f8;
  color: rgba(81, 98, 115, 0.7);
  border-color: rgba(20, 54, 66, 0.12);
  box-shadow: none;
  cursor: not-allowed;
}

select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 42px;
  background-image: linear-gradient(45deg, transparent 50%, #1b7fbd 50%),
    linear-gradient(135deg, #1b7fbd 50%, transparent 50%),
    linear-gradient(to right, rgba(20, 54, 66, 0.12), rgba(20, 54, 66, 0.12));
  background-position: right 20px center, right 14px center, right 36px center;
  background-size: 6px 6px, 6px 6px, 1px calc(100% - 16px);
  background-repeat: no-repeat;
}

select[multiple] {
  padding-right: 16px;
  background-image: none;
  min-height: 160px;
}

textarea {
  min-height: 140px;
  resize: vertical;
}

button {
  border: 0;
  background: #e6e6e6;
  color: #4a4a4a;
  border-radius: 10px;
  padding: 8px 15px;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}

button:hover {
  background: var(--color-accent);
  color: #fff;
}

.button-secondary {
  background: #e6e6e6;
  color: #143642;
}

.button-secondary:hover {
  background: #d4dfe4;
  color: #143642;
}

.button-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--color-primary);
  font-weight: 600;
  padding: 8px 14px;
  border: 1px solid rgba(20, 54, 66, 0.30);
}

.button-link:hover {
  background: none;
  color: var(--color-accent);
  border: 1px solid rgba(195, 161, 65, 0.30);
}

.button-primary {
  background: var(--color-primary);
  color: #fff;
}

.button-primary:hover {
  background: var(--color-accent);
  color: var(--color-primary);
}

.button-primary-navy {
  background: var(--color-primary);
  font-size: 13px;
}

.button-primary-navy:hover {
  box-shadow: 0 12px 24px rgba(20, 54, 66, 0.26);
}

.button-danger:hover {
  background: #ff595e;
  color: #fff;
}

.area-search input {
  background: #e6e6e6;
  color: #4a4a4a;
  border-radius: 10px;
  padding: 8px 15px;
  transition: box-shadow 0.1s;
  outline: none;
  border: none;
  box-shadow: inset 0 0 0 2px #e6e6e6;
  flex: 1;
  width: 100%;
}

.area-search input:focus {
  box-shadow: inset 0 0 0 2px var(--color-accent);
  outline: none;
  border: none;
}

.status-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: bold;
}

.status-active {
  background: rgba(83, 200, 138, 0.2);
  color: #228b22;
}

.status-inactive {
  background: rgba(227, 99, 90, 0.2);
  color: #b22222;
}

.status-pending {
  background: rgba(245, 191, 65, 0.2);
  color: #b8860b;
}

.automation-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 160px;
}

.automation-actions form {
  margin: 0;
}

.automation-actions button,
.automation-actions .automation-edit,
.automation-actions .automation-log-link {
  display: inline-block;
  text-decoration: none;
  text-align: left;
  background: #e6e6e6;
  color: #4a4a4a;
  border-radius: 10px;
  padding: 8px 12px;
  border: 0;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}

.automation-actions button:hover,
.automation-actions .automation-edit:hover,
.automation-actions .automation-log-link:hover {
  background: var(--color-accent);
  color: #fff;
}

.automation-actions i {
  margin-right: 6px;
}

.search-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(20, 54, 66, 0.18);
  padding: 8px 0;
  z-index: 50;
  max-height: 320px;
  overflow-y: auto;
}

.search-results__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.search-results__item + .search-results__item {
  border-top: 1px solid rgba(20, 54, 66, 0.08);
}

.search-results__link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 16px;
  color: var(--color-primary);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

.search-results__link:hover,
.search-results__link:focus {
  background: rgba(245, 191, 65, 0.15);
  color: var(--color-primary);
}

.search-results__type {
  font-size: 11px;
  color: rgba(20, 54, 66, 0.6);
  letter-spacing: 0.05em;
}

.search-results__label {
  font-weight: 600;
  font-size: 14px;
}

.search-results__secondary {
  font-size: 12px;
  color: rgba(20, 54, 66, 0.7);
}

.search-results__empty,
.search-results__error {
  margin: 0;
  padding: 12px 16px;
  font-size: 13px;
  color: rgba(20, 54, 66, 0.7);
}

.search-results__error {
  color: #c0392b;
}

.errorlist,
.messages {
  list-style: none;
  margin: 0 0 20px 0;
  padding: 0;
}

.errorlist li {
  background: #dd4242;
  padding: 10px 10px;
  border-radius: 6px;
  color: #fff;
}

.messages li {
  padding: 10px 10px;
  background: #000;
  color: #fff;
  border-radius: 10px;
}

.messages .success {
  background: #8ac926;
}

.messages .error {
  background: #ff595e;
}