.form-row,
.field-pair {
  display: flex;
  gap: 20px;        /* space between fields */
  margin-bottom: 12px;  /* space between rows */
}

.form-group {
  flex: 1;
  display: flex;
  flex-direction: column;
}

label {
  font-weight: 600;
  margin-top: 10px;
}

input,
select,
textarea {
  width: 100%;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 14px;
}

textarea {
  height: 40px;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 4px rgba(0,123,255,0.5);
}

button {
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  cursor: pointer;
}

button:hover {
  background: var(--primary-dark);
}

button.secondary {
  background: var(--gray);
}

.action-btn {
  background: var(--success);
  font-size: 12px;
  padding: 6px 10px;
}

#updateBtn {
  width: 100%;
  background: var(--success);
  font-weight: bold;
}

.record-nav{
  display:flex;
  justify-content:space-between;
  margin-top:12px;
}

.record-nav button{
  width:48%;
}

.save-message{
  margin-top:10px;
  margin-bottom:10px;
  padding:8px 12px;
  border-radius:4px;
  font-size:14px;
}

.save-message.success{
  background:#d4edda;
  color:#155724;
  border:1px solid #c3e6cb;
}

.save-message.error{
  background:#f8d7da;
  color:#721c24;
  border:1px solid #f5c6cb;
}