/* ─── Unified field styles — design system override ────────────────────────
 *
 * Each field component has its own CSS with hardcoded hex colors.
 * This file loads LAST and normalises all of them to use the design-system
 * tokens (--text-*, --border*, --primary, --bg-*, --sp-*, etc.) so they
 * respond correctly to theme switching.
 *
 * Targets: string, integer, decimal, currency, date, datetime, textarea, select
 * ─────────────────────────────────────────────────────────────────────────── */

/* ── 1. Container: reset legacy margin, unified flex column ─────────────── */
:is(
  .string-field-container,
  .integer-field-container,
  .decimal-field-container,
  .currency-field-container,
  .date-field-container,
  .date-time-field-container,
  .textarea-container,
  .select-container
) {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin: 0;          /* col-* padding provides spacing — no extra margin */
  font-family: inherit;
}

/* ── 2. Label text ──────────────────────────────────────────────────────── */
:is(
  .string-field-label-text,
  .integer-field-label-text,
  .decimal-field-label-text,
  .currency-field-label-text,
  .date-field-label-text,
  .date-time-field-label-text,
  .textarea-label-text,
  .select-label-text
) {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
}

/* ── 3. Required asterisk ───────────────────────────────────────────────── */
:is(
  .string-field-required,
  .integer-field-required,
  .decimal-field-required,
  .currency-field-required,
  .date-field-required,
  .date-time-field-required,
  .select-required
) {
  color: var(--danger, #dc2626);
  margin-left: 2px;
}

/* ── 4. The actual <input> / <textarea> ─────────────────────────────────── */
:is(
  .string-field,
  .integer-field,
  .decimal-field,
  .currency-field,
  .currency_field,
  .date-field,
  .date_field,
  .textarea
) {
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-family: inherit;
  color: var(--text-primary);
  background-color: var(--bg-input, var(--bg-card));
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}

/* currency symbol pushes content right */
.currency-field,
.currency_field {
  padding-left: 1.75rem;
}

/* number inputs: right-align */
.integer-field,
.decimal-field,
.currency-field,
.currency_field {
  text-align: right;
}

/* ── 5. Hover ───────────────────────────────────────────────────────────── */
:is(
  .string-field,
  .integer-field,
  .decimal-field,
  .currency-field,
  .date-field,
  .textarea
):hover:not(:disabled):not(.disabled) {
  border-color: var(--border-hover, color-mix(in srgb, var(--border) 60%, var(--text-muted)));
}

/* ── 6. Focus ───────────────────────────────────────────────────────────── */
:is(
  .string-field,
  .integer-field,
  .decimal-field,
  .currency-field,
  .date-field,
  .textarea
):focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}

/* Focus ring on wrapper (components that track focus on wrapper div) */
:is(
  .string-field-wrapper,
  .integer-field-wrapper,
  .decimal-field-wrapper,
  .currency-field-wrapper,
  .date-field-wrapper
).focused {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
  border-radius: var(--radius-md);
}

/* ── 7. Disabled ────────────────────────────────────────────────────────── */
:is(
  .string-field,
  .integer-field,
  .decimal-field,
  .currency-field,
  .date-field,
  .textarea
):disabled,
:is(
  .string-field,
  .integer-field,
  .decimal-field,
  .currency-field,
  .date-field,
  .textarea
).disabled {
  background-color: var(--bg-disabled, color-mix(in srgb, var(--bg-card) 60%, var(--bg-surface)));
  color: var(--text-muted);
  cursor: not-allowed;
  opacity: 0.7;
}

/* ── 8. Error state ─────────────────────────────────────────────────────── */
:is(
  .string-field,
  .integer-field,
  .decimal-field,
  .currency-field,
  .date-field,
  .textarea
).error {
  border-color: var(--danger, #dc2626);
}

:is(
  .string-field-error,
  .integer-field-error,
  .decimal-field-error,
  .currency-field-error,
  .date-field-error,
  .textarea-error
) {
  font-size: var(--text-xs);
  color: var(--danger, #dc2626);
  min-height: 1rem;
}

/* ── 9. Spinner controls (integer / decimal) ────────────────────────────── */
:is(.integer-field-controls, .decimal-field-controls) {
  position: absolute;
  right: 1px;
  top: 1px;
  bottom: 1px;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--border);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  overflow: hidden;
}

:is(.integer-field-control, .decimal-field-control) {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 50%;
  padding: 0;
  border: none;
  background-color: var(--bg-surface);
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

:is(.integer-field-control, .decimal-field-control):hover:not(:disabled) {
  background-color: var(--bg-hover);
  color: var(--text-primary);
}

:is(.integer-field-control, .decimal-field-control).up {
  border-bottom: 1px solid var(--border);
}

:is(.integer-field-control, .decimal-field-control):disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

/* ── 10. Currency symbol ─────────────────────────────────────────────────── */
.currency-field-symbol {
  position: absolute;
  left: var(--sp-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
  font-size: var(--text-sm);
}