.form-group{
  display:flex;
  flex-direction:column;
  gap:4px;
}

/* .input-field{
  padding:10px;
  border:1px solid var(--border);
  border-radius:6px;
} */

.input-field{
  width:100%;
  padding:10px;
  border:1px solid #d1d5db;
  border-radius:6px;
}

.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

.form-group.full{
  grid-column:1/-1;
}

/* ===== ERROR INPUT ===== */

.input-error{
  border:1px solid #dc2626 !important;
  background:#fef2f2;
}

.input-error:focus{
  outline:none;
  box-shadow:0 0 0 2px rgba(220,38,38,0.15);
}

/* ERROR MESSAGE */

.error-text{
  color:#dc2626;
  font-size:13px;
  margin-top:4px;
  display:block;
}

/* ============================================================
   Rang De · shared UI polish — form controls, filter bars, buttons.
   Global modern defaults so every dropdown/input/button reads as
   one designed system (fixes the "basic dropdown" look app-wide).
   ============================================================ */
:root {
  --rd-border: #e2e8f0;
  --rd-border-strong: #cbd5e1;
  --rd-primary: #0f766e;
  --rd-primary-ring: rgba(15,118,110,.14);
  --rd-radius: 10px;
  --rd-shadow-sm: 0 1px 2px rgba(15,23,42,.05);
}

/* Native selects: strip the OS look, add a crisp custom chevron */
select:not([multiple]) {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 9px 38px 9px 13px;
  border: 1.5px solid var(--rd-border);
  border-radius: var(--rd-radius);
  font-size: 13.5px;
  line-height: 1.3;
  color: #0f172a;
  background-color: #fff;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM2NDc0OGIiIHN0cm9rZS13aWR0aD0iMi4yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwb2x5bGluZSBwb2ludHM9IjYgOSAxMiAxNSAxOCA5Ii8+PC9zdmc+");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 15px;
  box-shadow: var(--rd-shadow-sm);
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
  font-family: inherit;
}
select:not([multiple]):hover { border-color: var(--rd-border-strong); }
select:not([multiple]):focus {
  outline: none;
  border-color: var(--rd-primary);
  box-shadow: 0 0 0 3px var(--rd-primary-ring);
}
select:disabled { background-color: #f8fafc; color: #94a3b8; cursor: not-allowed; }

.rd-input,
input.input-field, textarea.input-field, select.input-field {
  border: 1.5px solid var(--rd-border);
  border-radius: var(--rd-radius);
  box-shadow: var(--rd-shadow-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.rd-input:focus, .input-field:focus {
  outline: none; border-color: var(--rd-primary); box-shadow: 0 0 0 3px var(--rd-primary-ring);
}

/* Reusable filter / search bar for list screens */
.rd-filterbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--rd-border); border-radius: 14px;
  padding: 12px 14px; margin-bottom: 18px;
  box-shadow: 0 1px 3px rgba(15,23,42,.05), 0 6px 18px rgba(15,23,42,.04);
}
.rd-filterbar .rd-search { position: relative; flex: 1; min-width: 220px; }
.rd-filterbar .rd-search svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: #94a3b8; pointer-events: none; }
.rd-filterbar .rd-search input {
  width: 100%; padding: 9px 14px 9px 38px; border: 1.5px solid var(--rd-border);
  border-radius: var(--rd-radius); font-size: 13.5px; color: #0f172a; box-shadow: var(--rd-shadow-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.rd-filterbar .rd-search input:focus { outline: none; border-color: var(--rd-primary); box-shadow: 0 0 0 3px var(--rd-primary-ring); }
.rd-filterbar label { font-size: 12px; font-weight: 600; color: #64748b; }

/* Buttons that read as designed */
.rd-btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: var(--rd-radius);
  font-size: 13.5px; font-weight: 600; cursor: pointer; border: 1.5px solid transparent; text-decoration: none;
  transition: transform .06s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease; line-height: 1;
}
.rd-btn:active { transform: translateY(1px); }
.rd-btn-primary { background: linear-gradient(135deg,#0f766e,#14b8a6); color:#fff; box-shadow: 0 2px 8px rgba(15,118,110,.28); }
.rd-btn-primary:hover { box-shadow: 0 4px 14px rgba(15,118,110,.36); color:#fff; }
.rd-btn-ghost { background:#fff; color:#334155; border-color: var(--rd-border); box-shadow: var(--rd-shadow-sm); }
.rd-btn-ghost:hover { background:#f8fafc; border-color: var(--rd-border-strong); }