.form { display: grid; gap: 0.875rem; }
.form-row { display: grid; gap: 0.375rem; }
.form-row label { font-size: var(--font-size-sm); color: var(--color-muted); }
.form-row input, .form-row select, .form-row textarea {
  padding: 0.65rem 0.75rem; border-radius: 10px; border: 1px solid var(--color-border);
  background: var(--color-elev-1); color: var(--color-text); outline: none;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus { border-color: rgba(14,165,233,.5); box-shadow: 0 0 0 3px rgba(14,165,233,.12); }
.form-actions { margin-top: 0.5rem; }

/* Datepicker */
.datepicker { position: relative; user-select: none; display: block; width: 100%; }
.datepicker > input {
  width: 100%; padding-right: 2.5rem; cursor: pointer;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="%238a9cab" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>');
  background-repeat: no-repeat; background-position: right 12px center; background-size: 18px 18px;
}

/* Ensure the icon shows above any background of wrappers */
.datepicker { z-index: 0; }
.datepicker > input { position: relative; z-index: 1; background-origin: content-box; }
.datepicker::after {
  content: ""; position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; pointer-events: none; opacity: 1; z-index: 2; display: block;
  background: center/18px 18px no-repeat url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="%238a9cab" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>');
}
.datepicker > input:hover { border-color: color-mix(in oklab, var(--color-brand-600) 40%, var(--color-border)); box-shadow: 0 0 0 3px rgba(14,165,233,.12); }
.datepicker > input:focus { border-color: rgba(14,165,233,.5); box-shadow: 0 0 0 3px rgba(14,165,233,.12); }

/* Pretty arrow for selects */
.form-row select {
  -webkit-appearance: none; appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%238a9cab" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>');
  background-repeat: no-repeat; background-position: right 12px center; background-size: 14px 14px; padding-right: 2.25rem;
}
.datepicker-pop {
  position: fixed; top: 0; left: 0; z-index: 99999;
  background: var(--color-panel); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: .5rem; width: 280px; display: grid; gap: .25rem;
}
.dp-header { display: flex; align-items: center; justify-content: space-between; padding: .25rem .25rem .5rem; }
.dp-nav { display: inline-flex; gap: .25rem; }
.dp-btn { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--color-border); background: var(--color-elev-1); display: grid; place-items: center; color: var(--color-text); }
.dp-btn svg { display: block; pointer-events: none; }
.dp-month { font-weight: 600; }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .25rem; }
.dp-cell { text-align: center; padding: .4rem 0; border-radius: 8px; color: var(--color-text); }
.dp-cell.is-out { color: var(--color-muted); }
.dp-cell.is-day:hover { background: var(--color-elev-1); cursor: pointer; }
.dp-cell.is-selected { background: linear-gradient(180deg, var(--color-brand-600), var(--color-brand-700)); color: #fff; }
.dp-weekday { font-size: var(--font-size-xs); color: var(--color-muted); padding: .25rem 0; }