.hidden {
  display: none !important;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

button {
  cursor: pointer;
  border: none;
  border-radius: 6px;
  padding: 10px 18px;
  font-size: 0.95rem;
  transition: background 0.2s, transform 0.1s;
}

button:active {
  transform: translateY(1px);
}

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

.btn-primary:hover {
  background: #163b5c;
}

.btn-secondary {
  background: var(--primary-light);
  color: var(--primary);
}

.btn-secondary:hover {
  background: #c2cde6;
}

.btn-ghost {
  background: transparent;
  color: var(--text-light);
  border: 1px solid var(--border);
}

.btn-ghost:hover {
  background: #f0f0f0;
}

.btn-danger {
  background: #fdecea;
  color: #d32f2f;
  padding: 6px 12px;
  font-size: 0.85rem;
}

.btn-danger:hover {
  background: #f9d6d3;
}

.form-row {
  display: flex;
  gap: 16px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.form-group {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 180px;
}

.form-group.wide {
  flex: 100%;
  min-width: 100%;
}

.form-group label {
  font-size: 0.85rem;
  color: var(--text-light);
  margin-bottom: 4px;
}

.form-group input {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.95rem;
}

.form-group input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(31, 78, 120, 0.1);
}

#rates-editor input,
#special-editor input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.9rem;
}

#rates-editor th,
#special-editor th {
  background: var(--primary);
  color: #fff;
}

#rates-editor td,
#special-editor td {
  padding: 8px;
}

.status {
  padding: 12px 16px;
  border-radius: 6px;
  margin-bottom: 16px;
}

.status.success {
  background: #e6f4ea;
  color: #1e7e34;
  border: 1px solid #b7dfb9;
}

.status.error {
  background: #fdecea;
  color: #d32f2f;
  border: 1px solid #f5b7b1;
}

@media (max-width: 640px) {
  .toolbar {
    flex-direction: column;
  }

  button {
    width: 100%;
  }
}