/* Dashboard modern form theme */
:root{
  --bg: #f8fafc;
  --card: #ffffff;
  --muted: #64748b;
  --ring: #6366f1; /* indigo */
  --ring-amber: #f59e0b;
  --border: #e5e7eb;
  --shadow: 0 6px 24px rgba(15, 23, 42, 0.06);
}

/* Page polish */
body:not(.payment) { background: var(--bg); }

/***** Form *****/
.ui-form {
  backdrop-filter: saturate(1.2);
}

/* Inputs, selects, textareas */
.ui-form input[type="text"],
.ui-form input[type="number"],
.ui-form input[type="email"],
.ui-form input[type="url"],
.ui-form input[type="password"],
.ui-form textarea,
.ui-form select {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  padding: 10px 12px;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02) inset;
  transition: box-shadow .2s ease, border-color .2s ease, transform .06s ease;
}
.ui-form input:focus,
.ui-form textarea:focus,
.ui-form select:focus {
  outline: none;
  border-color: color-mix(in oklab, var(--ring) 60%, white);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--ring) 12%, transparent);
}
.ui-form input:focus-visible,
.ui-form textarea:focus-visible,
.ui-form select:focus-visible { transform: translateY(-1px); }

/* Invalid states */
.ui-form input:invalid,
.ui-form textarea:invalid,
.ui-form select:invalid { border-color: #fecaca; }
.ui-form input:invalid:focus,
.ui-form textarea:invalid:focus,
.ui-form select:invalid:focus { box-shadow: 0 0 0 4px rgba(248, 113, 113, .15); }

/* Subtle placeholder color */
.ui-form ::placeholder{ color: #94a3b8; }

/***** Cards *****/
.ui-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  transition: box-shadow .2s ease, transform .1s ease;
}
.ui-card:hover { box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08); }

/* Subtle error surface for sections */
.ui-card.ui-error {
  border-color: #fecaca; /* rose-200 */
  box-shadow: 0 0 0 4px rgba(248, 113, 113, .08), var(--shadow); /* soft glow + keep depth */
  background: color-mix(in oklab, #fee2e2 25%, var(--card));
}

/* Field-level error helper */
.ui-form .field-error { color: #dc2626; /* rose-600 */ font-size: 12px; margin-top: 6px; }
.ui-form .input-error { border-color: #fca5a5 !important; box-shadow: 0 0 0 4px rgba(248, 113, 113, .08) !important; }

/* Section headers with icon badge remain from Tailwind; nudge spacing */
.ui-card .ui-section-title { margin-bottom: .25rem; }

/* Drag and drop areas */
.ui-form .dropzone { border: 2px dashed #c7d2fe; border-radius: 12px; }
.ui-form .dropzone:hover { border-color: #a5b4fc; background: #eef2ff; }

/***** Buttons *****/
.ui-btn-primary {
  appearance: none;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(180deg, #6366f1, #4f46e5);
  color: white;
  font-weight: 600;
  padding: 10px 14px;
  box-shadow: 0 8px 20px rgba(79, 70, 229, .25);
  transition: transform .06s ease, box-shadow .2s ease, filter .15s ease;
}
.ui-btn-primary:hover { filter: brightness(1.05); box-shadow: 0 10px 24px rgba(79, 70, 229, .3); }
.ui-btn-primary:active { transform: translateY(1px); box-shadow: 0 6px 16px rgba(79, 70, 229, .25); }
.ui-btn-amber {
  background: linear-gradient(180deg, #f59e0b, #d97706);
  box-shadow: 0 8px 20px rgba(217, 119, 6, .25);
}

/* Small chips/badges */
.ui-chip { display:inline-flex; align-items:center; gap:.35rem; padding:.15rem .45rem; border-radius:9999px; font-size:.7rem; border:1px solid var(--border); background:#f8fafc; color:#475569; }

/* Smooth form appearance */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(6px);} to { opacity:1; transform: translateY(0);} }
.ui-form { animation: fadeInUp .2s ease-out; }