:root {
  --af-input-bg:           #ffffff;
  --af-input-bg-disabled:  #f8fafc;
  --af-input-bg-file:      #f8fafc;
  --af-input-fg:           #0f172a;
  --af-input-fg-disabled:  #64748b;
  --af-input-border:       #cbd5e1;
  --af-input-border-hover: #94a3b8;
  --af-input-border-soft:  #e2e8f0;
  --af-input-focus:        #6366f1;
  --af-input-focus-ring:   rgba(99, 102, 241, 0.22);
  --af-accent:             #4f46e5;
}
html.dark {
  --af-input-bg:           #0f172a;
  --af-input-bg-disabled:  #1e293b;
  --af-input-bg-file:      #1e293b;
  --af-input-fg:           #e2e8f0;
  --af-input-fg-disabled:  #94a3b8;
  --af-input-border:       #334155;
  --af-input-border-hover: #475569;
  --af-input-border-soft:  #1e293b;
  --af-input-focus:        #818cf8;
  --af-input-focus-ring:   rgba(129, 140, 248, 0.28);
  --af-accent:             #818cf8;
}

body input[type="text"],
body input[type="email"],
body input[type="tel"],
body input[type="url"],
body input[type="number"],
body input[type="password"],
body input[type="search"],
body input[type="date"],
body input[type="time"],
body input[type="datetime-local"],
body input[type="month"],
body input[type="week"],
body input[type="color"],
body input:not([type]),
body select,
body textarea,
body .vTextField,
body .vIntegerField,
body .vBigIntegerField,
body .vFloatField,
body .vEmailField,
body .vURLField,
body .vDateField,
body .vTimeField,
body .vDateTimeField,
body .vForeignKeyRawIdAdminField,
body .vUUIDField,
body .vSlugField {
  border: 1px solid var(--af-input-border) !important;
  border-radius: 8px !important;
  background: var(--af-input-bg) !important;
  color: var(--af-input-fg) !important;
  padding: 6px 10px !important;
  transition: border-color .12s, box-shadow .12s, background-color .12s;
  box-shadow: none;
}

body textarea {
  min-height: 80px !important;
  line-height: 1.5;
  resize: vertical;
}

body input[type="text"]:hover,
body input[type="email"]:hover,
body input[type="tel"]:hover,
body input[type="url"]:hover,
body input[type="number"]:hover,
body input[type="password"]:hover,
body input[type="search"]:hover,
body input[type="date"]:hover,
body input[type="time"]:hover,
body input[type="datetime-local"]:hover,
body input:not([type]):hover,
body select:hover,
body textarea:hover {
  border-color: var(--af-input-border-hover) !important;
}

body input[type="text"]:focus,
body input[type="email"]:focus,
body input[type="tel"]:focus,
body input[type="url"]:focus,
body input[type="number"]:focus,
body input[type="password"]:focus,
body input[type="search"]:focus,
body input[type="date"]:focus,
body input[type="time"]:focus,
body input[type="datetime-local"]:focus,
body input:not([type]):focus,
body select:focus,
body textarea:focus {
  outline: none !important;
  border-color: var(--af-input-focus) !important;
  box-shadow: 0 0 0 3px var(--af-input-focus-ring) !important;
}

body input:disabled,
body input[readonly],
body select:disabled,
body textarea:disabled,
body textarea[readonly] {
  background: var(--af-input-bg-disabled) !important;
  color: var(--af-input-fg-disabled) !important;
  border-color: var(--af-input-border-soft) !important;
}

body input[type="checkbox"],
body input[type="radio"] {
  width: 16px !important;
  height: 16px !important;
  accent-color: var(--af-accent) !important;
}

body input[type="file"] {
  border: 1px dashed var(--af-input-border) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  background: var(--af-input-bg-file) !important;
  color: var(--af-input-fg) !important;
}

body .select2-selection,
body .select2-container--default .select2-selection--single,
body .select2-container--default .select2-selection--multiple,
body .select2-container--admin-autocomplete .select2-selection--single,
body .select2-container--admin-autocomplete .select2-selection--multiple {
  border: 1px solid var(--af-input-border) !important;
  border-radius: 8px !important;
  min-height: 36px !important;
  background: var(--af-input-bg) !important;
  color: var(--af-input-fg) !important;
}
body .select2-selection:hover { border-color: var(--af-input-border-hover) !important; }
body .select2-container--focus .select2-selection,
body .select2-container--open .select2-selection {
  border-color: var(--af-input-focus) !important;
  box-shadow: 0 0 0 3px var(--af-input-focus-ring) !important;
}
html.dark body .select2-dropdown,
html.dark body .select2-results__option {
  background: var(--af-input-bg) !important;
  color: var(--af-input-fg) !important;
  border-color: var(--af-input-border) !important;
}
html.dark body .select2-results__option--highlighted {
  background: var(--af-accent) !important;
  color: #ffffff !important;
}

body .selector-available, body .selector-chosen {
  border: 1px solid var(--af-input-border) !important;
  border-radius: 8px !important;
}
body .selector select {
  border: none !important;
  border-radius: 0 !important;
}

body .tagify, body .tagify__input {
  border: 1px solid var(--af-input-border) !important;
  border-radius: 8px !important;
  background: var(--af-input-bg) !important;
  color: var(--af-input-fg) !important;
}

body table input[type="text"],
body table input[type="email"],
body table input[type="tel"],
body table input[type="url"],
body table input[type="number"],
body table input[type="password"],
body table select,
body table textarea {
  min-width: 120px;
}

body .noUi-target {
  border: 1px solid var(--af-input-border) !important;
  border-radius: 8px !important;
}

body .tox.tox-tinymce,
body trix-editor,
body .ProseMirror {
  border: 1px solid var(--af-input-border) !important;
  border-radius: 8px !important;
  background: var(--af-input-bg) !important;
  color: var(--af-input-fg) !important;
}
body .tox.tox-tinymce:focus-within,
body trix-editor:focus,
body .ProseMirror:focus {
  border-color: var(--af-input-focus) !important;
  box-shadow: 0 0 0 3px var(--af-input-focus-ring) !important;
}