/* Ninja Neumorph - Form Inputs */

.form-control,
.form-text,
.form-email,
.form-url,
.form-search,
.form-number,
.form-tel,
.form-date,
.form-time,
.form-file,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="time"] {
  width: 100%;
  padding: 10px 16px;
  font-family: var(--nm-font-body);
  font-size: 14px;
  color: var(--nm-text);
  background: var(--nm-surface-inset);
  border: 1px solid transparent;
  border-radius: var(--nm-radius-sm);
  box-shadow: var(--nm-shadow-inset-sm);
  transition: all var(--nm-transition-fast);
  outline: none;
  line-height: 1.5;
}

.form-control:focus,
.form-text:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="number"]:focus {
  border-color: var(--nm-accent);
  box-shadow: var(--nm-shadow-inset-sm), 0 0 0 2px var(--nm-accent-muted);
  color: var(--nm-text);
}

.form-control::placeholder,
input::placeholder {
  color: var(--nm-text-muted);
  opacity: 1;
}

/* Select */
.form-select,
select {
  width: 100%;
  padding: 10px 36px 10px 16px;
  font-family: var(--nm-font-body);
  font-size: 14px;
  color: var(--nm-text);
  background-color: var(--nm-surface-inset);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a0a0b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px 10px;
  border: 1px solid transparent;
  border-radius: var(--nm-radius-sm);
  box-shadow: var(--nm-shadow-inset-sm);
  appearance: none;
  cursor: pointer;
  transition: all var(--nm-transition-fast);
}

.form-select:focus,
select:focus {
  border-color: var(--nm-accent);
  box-shadow: var(--nm-shadow-inset-sm), 0 0 0 2px var(--nm-accent-muted);
  outline: none;
}

/* Textarea */
textarea,
.form-textarea {
  width: 100%;
  padding: 10px 16px;
  font-family: var(--nm-font-body);
  font-size: 14px;
  color: var(--nm-text);
  background: var(--nm-surface-inset);
  border: 1px solid transparent;
  border-radius: var(--nm-radius-sm);
  box-shadow: var(--nm-shadow-inset-sm);
  resize: vertical;
  min-height: 80px;
  transition: all var(--nm-transition-fast);
}

textarea:focus,
.form-textarea:focus {
  border-color: var(--nm-accent);
  box-shadow: var(--nm-shadow-inset-sm), 0 0 0 2px var(--nm-accent-muted);
  outline: none;
}

/* Checkbox & Radio */
input[type="checkbox"],
input[type="radio"],
.form-checkbox,
.form-radio {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--nm-accent);
  cursor: pointer;
}

/* Form item */
.form-item {
  margin-bottom: var(--nm-space-md);
}

.form-item__label {
  display: block;
  margin-bottom: var(--nm-space-xs);
  font-weight: 500;
  font-size: 13px;
  color: var(--nm-text);
}

.form-item__description,
.description {
  font-size: 12px;
  color: var(--nm-text-muted);
  margin-top: var(--nm-space-xxs);
}

.form-item--error input,
.form-item--error select,
.form-item--error textarea {
  border-color: var(--nm-danger);
}

.form-item__error-message {
  color: var(--nm-danger);
  font-size: 12px;
  margin-top: var(--nm-space-xxs);
}

/* Required marker */
.form-required::after {
  content: ' *';
  color: var(--nm-danger);
}

/* File upload */
input[type="file"] {
  padding: 8px;
  background: var(--nm-surface-inset);
  border-radius: var(--nm-radius-sm);
  box-shadow: var(--nm-shadow-inset-sm);
  color: var(--nm-text);
}

/* Disabled state */
input:disabled,
select:disabled,
textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* CKEditor integration */
.ck.ck-editor__editable_inline {
  color: var(--nm-text);
  background: var(--nm-surface-inset);
  border-radius: var(--nm-radius-sm);
  min-height: 200px;
}

/* Details/fieldset */
details {
  background: var(--nm-surface);
  border-radius: var(--nm-radius-sm);
  box-shadow: var(--nm-shadow-raised-sm);
  padding: 0;
  margin-bottom: var(--nm-space-md);
  border: none;
}

details > summary {
  padding: var(--nm-space-sm) var(--nm-space-md);
  font-weight: 600;
  cursor: pointer;
  border-radius: var(--nm-radius-sm);
  color: var(--nm-text);
  transition: background var(--nm-transition-fast);
}

details > summary:hover {
  background: var(--nm-accent-muted);
}

details[open] > summary {
  border-bottom: 1px solid var(--nm-border);
  border-radius: var(--nm-radius-sm) var(--nm-radius-sm) 0 0;
}

details > .details-wrapper {
  padding: var(--nm-space-md);
}

/* Admin form items compactness */
.ninja-admin-route .form-item {
  margin-bottom: var(--nm-space-sm);
}

.ninja-admin-route .form-control,
.ninja-admin-route input[type="text"],
.ninja-admin-route input[type="email"],
.ninja-admin-route input[type="password"],
.ninja-admin-route select,
.ninja-admin-route textarea {
  padding: 6px 12px;
  font-size: 13px;
}

/* Bootstrap custom toggles/switches aligned with reference */
.custom-control-input,
.form-check-input {
  appearance: none;
  -webkit-appearance: none;
}

.custom-switch .custom-control-label,
.form-switch .form-check-label {
  position: relative;
  padding-left: 2.9rem;
  min-height: 1.75rem;
  display: inline-flex;
  align-items: center;
}

.custom-switch .custom-control-label::before,
.form-switch .form-check-input {
  width: 2.7rem;
  height: 1.55rem;
  border-radius: 999px;
  border: 0;
  background: linear-gradient(145deg, var(--nm-surface-inset), var(--nm-surface));
  box-shadow: var(--nm-shadow-inset-sm);
  transition: all var(--nm-transition-fast);
}

.custom-switch .custom-control-label::after {
  width: 1.2rem;
  height: 1.2rem;
  top: calc(0.175rem + 1px);
  left: calc(-2.4rem + 2px);
  border-radius: 50%;
  background: linear-gradient(145deg, var(--nm-surface), var(--nm-surface-raised));
  box-shadow: var(--nm-shadow-raised-sm);
  transition: all var(--nm-transition-fast);
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::before,
.form-switch .form-check-input:checked {
  background: var(--nm-gradient-primary);
  box-shadow: var(--nm-shadow-inset-sm);
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
  transform: translateX(1.1rem);
  background: linear-gradient(145deg, #fff, #f3f4f6);
}

/* Non-native controls from reference (role-based). */
[role="switch"] {
  position: relative;
  width: 3rem;
  height: 1.75rem;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(145deg, var(--nm-surface-inset), var(--nm-surface));
  box-shadow: var(--nm-shadow-inset-sm);
}

[role="switch"] > span {
  position: absolute;
  top: 0.25rem;
  left: 0.25rem;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--nm-surface), var(--nm-surface-raised));
  box-shadow: var(--nm-shadow-raised-sm);
  transition: transform var(--nm-transition-fast);
}

[role="switch"].is-checked,
[role="switch"][aria-checked="true"] {
  background: var(--nm-gradient-primary);
}

[role="switch"].is-checked > span,
[role="switch"][aria-checked="true"] > span {
  transform: translateX(1.2rem);
}

[role="checkbox"] {
  border: 0;
  border-radius: 0.45rem;
  background: linear-gradient(145deg, var(--nm-surface-inset), var(--nm-surface));
  box-shadow: var(--nm-shadow-inset-sm);
}

[role="checkbox"].is-checked,
[role="checkbox"][aria-checked="true"] {
  background: var(--nm-gradient-primary);
}

[role="checkbox"] .iconify,
[role="checkbox"] [class*="icon"] {
  opacity: 0;
}

[role="checkbox"].is-checked .iconify,
[role="checkbox"][aria-checked="true"] .iconify,
[role="checkbox"].is-checked [class*="icon"],
[role="checkbox"][aria-checked="true"] [class*="icon"] {
  opacity: 1;
}

[role="radio"] {
  border: 0;
  border-radius: 999px;
  background: linear-gradient(145deg, var(--nm-surface-inset), var(--nm-surface));
  box-shadow: var(--nm-shadow-inset-sm);
}

[role="radio"] .radio-dot {
  opacity: 0;
}

[role="radio"].is-checked .radio-dot,
[role="radio"][aria-checked="true"] .radio-dot {
  opacity: 1;
}

/* Strong overrides for native check/radio in Drupal forms. */
input[type="checkbox"],
input[type="radio"],
.form-check-input,
.form-checkbox,
.form-radio {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 1.1rem !important;
  height: 1.1rem !important;
  border: 0 !important;
  border-radius: 0.3rem !important;
  background: linear-gradient(145deg, var(--nm-surface-inset), var(--nm-surface)) !important;
  box-shadow: var(--nm-shadow-inset-sm) !important;
  position: relative;
  cursor: pointer;
}

input[type="radio"],
.form-radio {
  border-radius: 50% !important;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked,
.form-check-input:checked,
.form-checkbox:checked,
.form-radio:checked {
  background: var(--nm-gradient-primary) !important;
}

input[type="checkbox"]:checked::after,
.form-checkbox:checked::after {
  content: "" !important;
  position: absolute;
  left: 0.34rem;
  top: 0.14rem;
  width: 0.3rem;
  height: 0.55rem;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

input[type="radio"]:checked::after,
.form-radio:checked::after {
  content: "" !important;
  position: absolute;
  width: 0.46rem;
  height: 0.46rem;
  border-radius: 50%;
  background: #fff;
  left: 0.32rem;
  top: 0.32rem;
}

/* Bootstrap custom-control fallback (removes default #007bff). */
.custom-control-input ~ .custom-control-label::before {
  border: 0 !important;
  box-shadow: var(--nm-shadow-inset-sm) !important;
  background: linear-gradient(145deg, var(--nm-surface-inset), var(--nm-surface)) !important;
}

.custom-control-input:checked ~ .custom-control-label::before,
.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
  background: var(--nm-gradient-primary) !important;
  border-color: var(--nm-border-strong) !important;
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after,
.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
  filter: brightness(0) invert(1);
}

.custom-switch .custom-control-label::before {
  border-radius: 999px !important;
}