/*
 * Admin-only color system.
 *
 * Keep these colors independent from the public website theme so native form
 * controls, autofill, tables, and action states remain readable everywhere.
 */
.admin-body {
  --admin-bg: #eef3f9;
  --admin-surface: #ffffff;
  --admin-surface-soft: #e7eef8;
  --admin-text: #111827;
  --admin-muted: #526175;
  --admin-border: #69778a;
  --admin-divider: #c6d0dc;
  --admin-primary: #0d4c9c;
  --admin-primary-hover: #083477;
  --admin-danger: #a51d2d;
  --admin-danger-hover: #831522;
  --admin-notice: #fff4c2;
  --admin-notice-text: #332500;
  color-scheme: light;
  background: var(--admin-bg);
  color: var(--admin-text);
}

.admin-body .admin-shell {
  color: var(--admin-text);
}

.admin-body .admin-table {
  border-color: var(--admin-divider);
  background: var(--admin-surface);
  color: var(--admin-text);
}

.admin-body .language-panel {
  border-color: var(--admin-divider);
  background: var(--admin-surface);
  color: var(--admin-text);
}

.admin-body .login-card {
  border-color: var(--admin-divider);
  background: var(--admin-surface);
  color: var(--admin-text);
}

.admin-body input {
  border-color: var(--admin-border);
  background: var(--admin-surface);
  color: var(--admin-text);
  caret-color: var(--admin-text);
}

.admin-body select {
  border-color: var(--admin-border);
  background: var(--admin-surface);
  color: var(--admin-text);
}

.admin-body textarea {
  border-color: var(--admin-border);
  background: var(--admin-surface);
  color: var(--admin-text);
  caret-color: var(--admin-text);
}

.admin-body input::placeholder {
  color: var(--admin-muted);
  opacity: 1;
}

.admin-body textarea::placeholder {
  color: var(--admin-muted);
  opacity: 1;
}

.admin-body select option {
  background: var(--admin-surface);
  color: var(--admin-text);
}

.admin-body input:-webkit-autofill {
  background-color: var(--admin-surface);
  color: var(--admin-text);
  -webkit-text-fill-color: var(--admin-text);
  -webkit-box-shadow: 0 0 0 1000px var(--admin-surface) inset;
  caret-color: var(--admin-text);
}

.admin-body .button {
  border-color: var(--admin-border);
  background: var(--admin-surface);
  color: var(--admin-text);
}

.admin-body .button:hover {
  border-color: var(--admin-primary);
  background: var(--admin-surface-soft);
  color: var(--admin-text);
}

.admin-body .button.primary {
  border-color: var(--admin-primary);
  background: var(--admin-primary);
  color: #ffffff;
}

.admin-body .button.primary:hover {
  border-color: var(--admin-primary-hover);
  background: var(--admin-primary-hover);
  color: #ffffff;
}

.admin-body .button.danger {
  border-color: var(--admin-danger);
  background: var(--admin-danger);
  color: #ffffff;
}

.admin-body .button.danger:hover {
  border-color: var(--admin-danger-hover);
  background: var(--admin-danger-hover);
  color: #ffffff;
}

.admin-body .inline-form button {
  background: var(--admin-surface);
  color: var(--admin-danger);
}

.admin-body .inline-form button:hover {
  background: var(--admin-surface-soft);
  color: var(--admin-danger-hover);
}

.admin-body th {
  background: var(--admin-surface-soft);
  color: #172033;
}

.admin-body th,
.admin-body td {
  border-bottom-color: var(--admin-divider);
}

.admin-body td,
.admin-body label,
.admin-body h1,
.admin-body h2,
.admin-body time {
  color: var(--admin-text);
}

.admin-body .eyebrow,
.admin-body .admin-table a:not(.button) {
  color: var(--admin-primary);
}

.admin-body .admin-table a:not(.button):hover {
  color: var(--admin-primary-hover);
  text-decoration: underline;
}

.admin-body .error {
  background: var(--admin-danger);
  color: #ffffff;
}

.admin-body .notice {
  border-color: #8a6507;
  background: var(--admin-notice);
  color: var(--admin-notice-text);
}

.admin-body input:focus,
.admin-body select:focus,
.admin-body textarea:focus {
  border-color: var(--admin-primary);
  box-shadow: 0 0 0 3px rgba(13, 76, 156, 0.2);
}

.admin-body :where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--admin-primary);
  outline-offset: 2px;
}

.admin-body input[type="file"]::file-selector-button {
  margin-inline-end: 10px;
  border: 1px solid var(--admin-border);
  border-radius: 6px;
  background: var(--admin-surface-soft);
  color: var(--admin-text);
  font: inherit;
  font-weight: 700;
}

.admin-body ::selection {
  background: var(--admin-primary);
  color: #ffffff;
}