/*
 * Auth pages contrast + input legibility (login / forgot / reset / activate / join).
 * Root cause: theme packs restyle .dx-scope-access input backgrounds
 * (e.g. dentixa-premium.css: --dx-soft) while text colour comes from Tailwind
 * dark:text-white or inheritance, so on iOS Safari the field could end up
 * near-white with white text. Every rule below sets background, color,
 * -webkit-text-fill-color, caret, placeholder and autofill as one pair so the
 * two can never diverge again. Targets WCAG AA (>= 4.5:1).
 */

/* ---------- Form pages (forgot / reset / activate / find lab) ---------- */

/* Default (classic, light document): white field, ink text. */
.dx-scope-access:not(.dx-access-premium) .dx-auth-input {
  background: rgb(var(--ui-auth-white) / 1);
  color: rgb(var(--ui-auth-ink) / 1);
  -webkit-text-fill-color: rgb(var(--ui-auth-ink) / 1);
  caret-color: rgb(var(--ui-auth-link) / 1);
  border-color: rgb(var(--ui-auth-field-border) / 1);
  opacity: 1;
}
.dx-scope-access:not(.dx-access-premium) .dx-auth-input::-moz-placeholder {
  color: rgb(var(--ui-auth-placeholder) / 1);
  -webkit-text-fill-color: rgb(var(--ui-auth-placeholder) / 1);
  opacity: 1;
}
.dx-scope-access:not(.dx-access-premium) .dx-auth-input::placeholder {
  color: rgb(var(--ui-auth-placeholder) / 1);
  -webkit-text-fill-color: rgb(var(--ui-auth-placeholder) / 1);
  opacity: 1;
}
.dx-scope-access:not(.dx-access-premium) .dx-auth-input:-webkit-autofill,
.dx-scope-access:not(.dx-access-premium) .dx-auth-input:-webkit-autofill:hover,
.dx-scope-access:not(.dx-access-premium) .dx-auth-input:-webkit-autofill:focus {
  box-shadow: 0 0 0 1000px rgb(var(--ui-auth-white) / 1) inset;
  -webkit-text-fill-color: rgb(var(--ui-auth-ink) / 1);
  caret-color: rgb(var(--ui-auth-link) / 1);
}
.dx-scope-access:not(.dx-access-premium) .dx-auth-sub { color: rgb(var(--ui-auth-sub) / 1); font-weight: 400; }
.dx-scope-access:not(.dx-access-premium) .dx-auth-label { color: rgb(var(--ui-auth-label) / 1); }
.dx-scope-access:not(.dx-access-premium) .dx-auth-link { color: rgb(var(--ui-auth-link) / 1); }

/* Classic dark document: login-style ink field, white text. */
html.dark .dx-scope-access:not(.dx-access-premium) .dx-auth-input {
  background: rgb(var(--ui-auth-field-dark) / 1);
  color: rgb(var(--ui-auth-white) / 1);
  -webkit-text-fill-color: rgb(var(--ui-auth-white) / 1);
  caret-color: rgb(var(--ui-brand-lime-on-dark) / 1);
  border-color: rgb(var(--ui-auth-white) / 0.18);
}
html.dark .dx-scope-access:not(.dx-access-premium) .dx-auth-input::-moz-placeholder {
  color: rgb(var(--ui-auth-placeholder-dark) / 1);
  -webkit-text-fill-color: rgb(var(--ui-auth-placeholder-dark) / 1);
}
html.dark .dx-scope-access:not(.dx-access-premium) .dx-auth-input::placeholder {
  color: rgb(var(--ui-auth-placeholder-dark) / 1);
  -webkit-text-fill-color: rgb(var(--ui-auth-placeholder-dark) / 1);
}
html.dark .dx-scope-access:not(.dx-access-premium) .dx-auth-input:-webkit-autofill,
html.dark .dx-scope-access:not(.dx-access-premium) .dx-auth-input:-webkit-autofill:hover,
html.dark .dx-scope-access:not(.dx-access-premium) .dx-auth-input:-webkit-autofill:focus {
  box-shadow: 0 0 0 1000px rgb(var(--ui-auth-field-dark) / 1) inset;
  -webkit-text-fill-color: rgb(var(--ui-auth-white) / 1);
  caret-color: rgb(var(--ui-brand-lime-on-dark) / 1);
}
html.dark .dx-scope-access:not(.dx-access-premium) .dx-auth-sub { color: rgb(var(--ui-auth-sub-dark) / 1); }
html.dark .dx-scope-access:not(.dx-access-premium) .dx-auth-label { color: rgb(var(--ui-auth-label-dark) / 1); }
html.dark .dx-scope-access:not(.dx-access-premium) .dx-auth-link { color: rgb(var(--ui-brand-lime-on-dark) / 1); }

/* Premium app theme: follow theme tokens, always as a matched pair. */
html[data-app-theme='dentixa-premium'] .dx-scope-access:not(.dx-access-premium) .dx-auth-input {
  background: var(--dx-panel, rgb(var(--ui-auth-panel-fallback) / 1));
  color: var(--dx-text, rgb(var(--ui-auth-text-fallback) / 1));
  -webkit-text-fill-color: var(--dx-text, rgb(var(--ui-auth-text-fallback) / 1));
  caret-color: var(--dx-lime, rgb(var(--ui-brand-lime-on-dark) / 1));
}
html[data-app-theme='dentixa-premium'] .dx-scope-access:not(.dx-access-premium) .dx-auth-input::-moz-placeholder {
  color: color-mix(in srgb, var(--dx-text, rgb(var(--ui-auth-text-fallback) / 1)) 68%, var(--dx-panel, rgb(var(--ui-auth-panel-fallback) / 1)));
  -webkit-text-fill-color: color-mix(in srgb, var(--dx-text, rgb(var(--ui-auth-text-fallback) / 1)) 68%, var(--dx-panel, rgb(var(--ui-auth-panel-fallback) / 1)));
}
html[data-app-theme='dentixa-premium'] .dx-scope-access:not(.dx-access-premium) .dx-auth-input::placeholder {
  color: color-mix(in srgb, var(--dx-text, rgb(var(--ui-auth-text-fallback) / 1)) 68%, var(--dx-panel, rgb(var(--ui-auth-panel-fallback) / 1)));
  -webkit-text-fill-color: color-mix(in srgb, var(--dx-text, rgb(var(--ui-auth-text-fallback) / 1)) 68%, var(--dx-panel, rgb(var(--ui-auth-panel-fallback) / 1)));
}
html[data-app-theme='dentixa-premium'] .dx-scope-access:not(.dx-access-premium) .dx-auth-input:-webkit-autofill,
html[data-app-theme='dentixa-premium'] .dx-scope-access:not(.dx-access-premium) .dx-auth-input:-webkit-autofill:hover,
html[data-app-theme='dentixa-premium'] .dx-scope-access:not(.dx-access-premium) .dx-auth-input:-webkit-autofill:focus {
  box-shadow: 0 0 0 1000px var(--dx-panel, rgb(var(--ui-auth-panel-fallback) / 1)) inset;
  -webkit-text-fill-color: var(--dx-text, rgb(var(--ui-auth-text-fallback) / 1));
}
html[data-app-theme='dentixa-premium'] .dx-scope-access:not(.dx-access-premium) .dx-auth-sub {
  color: color-mix(in srgb, var(--dx-text, rgb(var(--ui-auth-text-fallback) / 1)) 85%, var(--dx-panel, rgb(var(--ui-auth-panel-fallback) / 1)));
}
html[data-app-theme='dentixa-premium'] .dx-scope-access:not(.dx-access-premium) .dx-auth-label {
  color: var(--dx-text, rgb(var(--ui-auth-text-fallback) / 1));
}
html[data-app-theme='dentixa-premium'] .dx-scope-access:not(.dx-access-premium) .dx-auth-link {
  color: var(--dx-text, rgb(var(--ui-auth-text-fallback) / 1));
  text-decoration-color: var(--dx-lime, rgb(var(--ui-brand-lime-on-dark) / 1));
}

/* ---------- Globe login gate (ink card) ---------- */
html .dx-scope-access.dx-access-premium .dx-access-link,
html[data-app-theme] .dx-scope-access.dx-access-premium a.dx-access-link {
  color: rgb(var(--ui-brand-lime-on-dark) / 1); /* ~14:1 on ink */
  font-weight: 600;
  opacity: 1;
}
html .dx-scope-access.dx-access-premium .dx-access-link-muted,
html[data-app-theme] .dx-scope-access.dx-access-premium a.dx-access-link-muted {
  color: rgb(var(--ui-auth-gate-muted) / 1); /* ~13:1 on ink */
  font-size: 0.8125rem;
  text-decoration: underline;
  text-decoration-color: rgb(var(--ui-brand-lime-on-dark) / 0.6);
  text-underline-offset: 3px;
}
html .dx-scope-access.dx-access-premium .dx-access-sub { color: rgb(var(--ui-auth-gate-sub) / 1); }

/* The gate card is dark glass in every mode (see dentixa-access-login.css), so links keep the on-dark lime above; no light-gate override. */
/* ---------- Copyright token (>= 4.5:1 in every theme) ----------
 * light card auth-white: auth-sub = 7.58:1 | dark/ink card auth-field-dark: auth-placeholder-dark = 7.52:1
 * globe gate (always dark glass, also on light field): auth-placeholder-dark ~8.3:1 | premium app: 85% text mix. */
.dx-scope-access { --dx-auth-copyright: rgb(var(--ui-auth-sub) / 1); }
html.dark .dx-scope-access,
.dx-scope-access.dx-access-premium { --dx-auth-copyright: rgb(var(--ui-auth-placeholder-dark) / 1); }
html[data-app-theme='dentixa-premium'] .dx-scope-access:not(.dx-access-premium) {
  --dx-auth-copyright: color-mix(in srgb, var(--dx-text, rgb(var(--ui-auth-text-fallback) / 1)) 85%, var(--dx-panel, rgb(var(--ui-auth-panel-fallback) / 1)));
}
/* The globe gate card (.dx-access-premium) stays dark glass even on the light field
 * (dentixa-access-login.css), so it keeps auth-placeholder-dark in light too; auth-gate-light-text there was ~2:1. */

.dx-scope-access .dx-auth-copyright { color: var(--dx-auth-copyright); }