/*
 * Administrate CSS with ScoresFooty Design System
 *
 * This file imports our design system components so they work in admin pages.
 * Administrate loads this file automatically for admin routes.
 */

/* Import design system */
@import "../theme.css";
@import "../components.css";

/* Administrate-specific overrides */
/* Ensure our form components take precedence over Administrate defaults */
.input,
.textarea,
.select,
.checkbox,
.radio,
.toggle {
  /* Force our styles in admin context */
  all: revert;
}

/* Re-apply our form styles with higher specificity */
.field-unit .input,
.field-unit .textarea,
.field-unit .select,
input.input,
textarea.textarea,
select.select {
  width: 100%;
  padding: 10px 12px;
  font-size: var(--font-size-sm);
  color: var(--color-slate-900);
  background: white;
  border: 1px solid var(--color-slate-200);
  border-radius: var(--radius-sm);
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.field-unit .input:focus,
.field-unit .textarea:focus,
.field-unit .select:focus,
input.input:focus,
textarea.textarea:focus,
select.select:focus {
  outline: none;
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

input.checkbox,
input.radio,
input.toggle {
  width: 18px;
  height: 18px;
  all: revert;
  border: 2px solid var(--color-slate-200);
  cursor: pointer;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  appearance: none;
  margin: 0;
}

input.checkbox {
  border-radius: 4px;
}

input.checkbox:checked {
  background: var(--color-primary-500);
  border-color: var(--color-primary-500);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
}

/* Select dropdown arrow */
select.select {
  padding-right: 32px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%23475569' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
  background-position: right 8px center;
  background-repeat: no-repeat;
  background-size: 20px 20px;
}

/* Labels */
label.label,
.label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-slate-900);
  margin-bottom: 6px;
}

/* Help text */
.help-text {
  font-size: var(--font-size-xs);
  color: var(--color-slate-600);
  margin-top: 4px;
  display: block;
}

/* Error messages */
.error-message {
  font-size: var(--font-size-xs);
  color: var(--color-danger-600);
  margin-top: 4px;
  display: block;
}