/**
 * CSS Modules — Forms
 * Inputs, Selects, Checkboxes, Switches, Textareas
 * Check Pro v12.44.782 — Minimalista Premium
 */

/* ═══ FORM GROUP ═══ */
.form-group { margin-bottom: var(--space-4); }
.form-label {
  display: block; font-size: var(--text-sm); font-weight: 500;
  color: var(--text-secondary); margin-bottom: var(--space-2);
}
.form-label-required::after { content: ' *'; color: var(--error); }
.form-help { font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--space-1); }
.form-error { font-size: var(--text-xs); color: var(--error); margin-top: var(--space-1); }

/* ═══ INPUTS ═══ */
.input {
  width: 100%; padding: 8px 12px;
  font-size: var(--text-sm); color: var(--text-primary);
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: all var(--duration-fast) var(--ease);
}
.input::placeholder { color: var(--text-muted); }
.input:hover { border-color: var(--border-hover); }
.input:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--accent-light); outline: none; }
.input:disabled { opacity: 0.5; cursor: not-allowed; }

/* Error state */
.input-error { border-color: var(--error); }
.input-error:focus { box-shadow: 0 0 0 3px var(--error-bg); }

/* Sizes */
.input-sm { padding: 4px 8px; font-size: var(--text-xs); min-height: 28px; }
.input-lg { padding: 10px 16px; font-size: var(--text-base); min-height: 44px; }

/* ═══ TEXTAREA ═══ */
.textarea {
  width: 100%; min-height: 80px; padding: 8px 12px; resize: vertical;
  font-size: var(--text-sm); color: var(--text-primary);
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--radius-md); line-height: var(--leading-normal);
  transition: border-color var(--duration-fast) var(--ease);
}
.textarea::placeholder { color: var(--text-muted); }
.textarea:hover { border-color: var(--border-hover); }
.textarea:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--accent-light); outline: none; }

/* ═══ SELECT ═══ */
.select {
  width: 100%; padding: 8px 32px 8px 12px;
  font-size: var(--text-sm); color: var(--text-primary);
  background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--radius-md); appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
  cursor: pointer; transition: all var(--duration-fast) var(--ease);
}
.select:hover { border-color: var(--border-hover); }
.select:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--accent-light); outline: none; }

/* ═══ CHECKBOX ═══ */
.checkbox-wrapper {
  display: flex; align-items: center; gap: var(--space-2); cursor: pointer;
}
.checkbox {
  width: 18px; height: 18px; border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); background: var(--bg-input);
  display: flex; align-items: center; justify-content: center;
  transition: all var(--duration-fast) var(--ease); flex-shrink: 0;
}
.checkbox::after {
  content: ''; width: 10px; height: 10px;
  border-radius: var(--radius-xs); background: var(--text-inverse);
  opacity: 0; transform: scale(0.5);
  transition: all var(--duration-fast) var(--ease-spring);
}
.checkbox-wrapper input:checked + .checkbox {
  background: var(--accent); border-color: var(--accent);
}
.checkbox-wrapper input:checked + .checkbox::after { opacity: 1; transform: scale(1); }
.checkbox-wrapper input { display: none; }
.checkbox-label { font-size: var(--text-sm); color: var(--text-primary); }

/* ═══ RADIO ═══ */
.radio-wrapper {
  display: flex; align-items: center; gap: var(--space-2); cursor: pointer;
}
.radio {
  width: 18px; height: 18px; border: 1.5px solid var(--border);
  border-radius: 50%; background: var(--bg-input);
  display: flex; align-items: center; justify-content: center;
  transition: all var(--duration-fast) var(--ease); flex-shrink: 0;
}
.radio::after {
  content: ''; width: 8px; height: 8px;
  border-radius: 50%; background: var(--text-inverse);
  opacity: 0; transform: scale(0.5);
  transition: all var(--duration-fast) var(--ease-spring);
}
.radio-wrapper input:checked + .radio {
  background: var(--accent); border-color: var(--accent);
}
.radio-wrapper input:checked + .radio::after { opacity: 1; transform: scale(1); }
.radio-wrapper input { display: none; }

/* ═══ SWITCH ═══ */
.switch-wrapper {
  display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer;
}
.switch {
  width: 40px; height: 22px; border-radius: var(--radius-full);
  background: var(--border); position: relative;
  transition: background var(--duration-normal) var(--ease); flex-shrink: 0;
}
.switch::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--text-primary); box-shadow: var(--shadow-xs);
  transition: transform var(--duration-normal) var(--ease-spring);
}
.switch-wrapper input:checked + .switch { background: var(--accent); }
.switch-wrapper input:checked + .switch::after { transform: translateX(18px); background: #fff; }
.switch-wrapper input { display: none; }

/* ═══ FILE INPUT ═══ */
.file-input {
  width: 100%; padding: var(--space-8) var(--space-4);
  border: 2px dashed var(--border); border-radius: var(--radius-lg);
  text-align: center; cursor: pointer;
  transition: all var(--duration-fast) var(--ease);
}
.file-input:hover { border-color: var(--accent); background: var(--accent-subtle); }
.file-input input { display: none; }
.file-input-label { font-size: var(--text-sm); color: var(--text-muted); }
.file-input-label strong { color: var(--accent); }

/* ═══ INPUT WITH ICON ═══ */
.input-icon-wrapper {
  position: relative; display: flex; align-items: center;
}
.input-icon-wrapper .input { padding-left: 36px; }
.input-icon {
  position: absolute; left: 12px; color: var(--text-muted);
  font-size: 18px; pointer-events: none;
}
.input-icon-right {
  position: absolute; right: 12px; color: var(--text-muted);
  font-size: 18px; cursor: pointer;
}
.input-icon-right:hover { color: var(--text-primary); }

/* ═══ SEARCH INPUT ═══ */
.search-input {
  position: relative; display: flex; align-items: center;
}
.search-input .input { padding-left: 36px; }
.search-input .material-symbols-outlined {
  position: absolute; left: 12px; font-size: 18px; color: var(--text-muted);
  pointer-events: none;
}

/* ═══ FORM ROW ═══ */
.form-row { display: flex; gap: var(--space-4); }
.form-row > .form-group { flex: 1; }

/* ═══ FORM ACTIONS ═══ */
.form-actions {
  display: flex; align-items: center; justify-content: flex-end;
  gap: var(--space-3); padding-top: var(--space-4);
  border-top: 1px solid var(--border); margin-top: var(--space-6);
}

/* ═══ RESPONSIVE ═══ */
@media (max-width: 640px) {
  .form-row { flex-direction: column; gap: 0; }
}

/* ═══ LEGACY COMPAT (v12.44.782) ═══ */
.input-field { composes: input; }
.table-th { font-size: var(--text-xs); font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); text-align: left; }
.table-td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); font-size: var(--text-sm); }
.text-slate-500 { color: var(--text-muted); }
.text-slate-400 { color: var(--text-secondary); }
.text-slate-300 { color: var(--text-secondary); }
.text-white { color: var(--text-primary); }
.text-black { color: var(--text-inverse); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }
.rounded { border-radius: var(--radius-md); }
.tracking-wider { letter-spacing: 0.05em; }
.space-y-4 > * + * { margin-top: var(--space-4); }
.space-y-3 > * + * { margin-top: var(--space-3); }
.space-y-2 > * + * { margin-top: var(--space-2); }
.space-x-2 > * + * { margin-left: var(--space-2); }
.space-x-3 > * + * { margin-left: var(--space-3); }
.border-b { border-bottom: 1px solid var(--border); }
.border-t { border-top: 1px solid var(--border); }
.border { border: 1px solid var(--border); }
.bg-slate-900\/50 { background: var(--bg-card); }
.bg-slate-800 { background: var(--bg-elevated); }
.bg-slate-700 { background: var(--bg-card-hover); }
.border-white\/5 { border-color: var(--border); }
.text-violet-400 { color: var(--accent); }
.text-emerald-400 { color: var(--accent); }
.text-emerald-500 { color: var(--accent); }
.opacity-50 { opacity: 0.5; }
.opacity-70 { opacity: 0.7; }
.pointer-events-none { pointer-events: none; }
.select-none { user-select: none; }
.z-50 { z-index: var(--z-dropdown); }
.z-\[9999\] { z-index: var(--z-toast); }
.z-\[99999\] { z-index: var(--z-toast); }
.z-\[999999\] { z-index: var(--z-toast); }
.z-\[9999999\] { z-index: var(--z-toast); }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }
.inset-0 { inset: 0; }
.top-0 { top: 0; }
.left-0 { left: 0; }
.right-0 { right: 0; }
.bottom-0 { bottom: 0; }
.w-screen { width: 100vw; }
.h-screen { height: 100vh; }
.min-h-screen { min-height: 100vh; }
.max-w-2xl { max-width: 672px; }
.max-w-4xl { max-width: 896px; }
.mx-auto { margin-left: auto; margin-right: auto; }
.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }
.font-light { font-weight: 300; }
.leading-tight { line-height: 1.2; }
.leading-relaxed { line-height: 1.65; }
.no-underline { text-decoration: none; }
.whitespace-nowrap { white-space: nowrap; }
.break-all { word-break: break-all; }
.object-cover { object-fit: cover; }