/*
 * Tahfeezm authentication contracts v1
 * Shared visual language for admin and student login, registration and setup.
 */

:where(body.admin-login-page, body.admin-register-page, body.student-login-page, body.student-register-page, body.student-setup-page) {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--tz-text-soft);
  background: var(--tz-canvas);
  font-family: var(--tz-font-sans);
  letter-spacing: 0;
}

/* Shared authentication surfaces. */
:where(.admin-auth-card, .student-auth-panel, .student-register-shell, .student-register-section, .student-setup-card) {
  color: var(--tz-text);
  background: var(--tz-surface);
  border: 1px solid var(--tz-border);
  border-radius: var(--tz-radius-lg);
  box-shadow: var(--tz-shadow-sm);
}

:where(.admin-auth-card__visual, .student-auth-onboarding, .student-register-head, .student-setup-hero) {
  color: #fff;
  background: var(--tz-brand-900);
  border-color: var(--tz-brand-800);
}

:where(.admin-auth-card__visual, .student-register-head) {
  border-inline-start: 0.3rem solid var(--tz-gold-500);
}

:where(.admin-auth-card__visual, .student-auth-onboarding, .student-register-head, .student-setup-hero) :where(h1, h2, h3, strong) {
  color: #fff;
}

:where(.admin-auth-card__visual, .student-auth-onboarding, .student-register-head, .student-setup-hero) :where(p, small) {
  color: var(--tz-brand-100);
}

/* Shared brand and heading icons. */
:where(.admin-auth-brand__mark, .student-auth-brand > span, .student-register-head > span, .student-auth-header__icon, .admin-auth-form-head__icon, .student-register-section__title > i) {
  display: grid;
  place-items: center;
  color: var(--tz-brand-700);
  background: var(--tz-brand-50);
  border: 1px solid var(--tz-brand-200);
  border-radius: var(--tz-radius-md);
}

.admin-auth-brand__mark {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.18);
}

.student-register-head > span {
  color: var(--tz-brand-900);
  background: #fff;
  border-color: var(--tz-gold-500);
}

:where(.admin-auth-form-head h2, .student-auth-header h1, .student-register-section__title span) {
  color: var(--tz-text);
}

:where(.admin-auth-kicker, .student-auth-header small, .student-auth-eyebrow) {
  color: var(--tz-brand-700);
}

:where(.admin-auth-form-head p, .student-auth-header p, .student-register-section__title small) {
  color: var(--tz-muted);
}

/* Navigation bars. */
:where(.student-auth-nav, .student-register-nav) {
  color: var(--tz-text);
  background: var(--tz-surface);
  border-bottom: 1px solid var(--tz-border);
  box-shadow: var(--tz-shadow-xs);
}

:where(.student-auth-brand, .student-register-brand) {
  color: var(--tz-text);
  text-decoration: none;
}

:where(.student-auth-home, .student-register-login) {
  color: var(--tz-text-soft);
  background: var(--tz-surface);
  border: 1px solid var(--tz-border-strong);
  border-radius: var(--tz-radius-sm);
  text-decoration: none;
}

:where(.student-auth-home, .student-register-login):hover {
  color: var(--tz-brand-700);
  background: var(--tz-brand-50);
  border-color: var(--tz-brand-200);
}

/* Forms and controls. */
:where(.admin-auth-field > label, .student-auth-field > span, .student-register-grid label, .student-register-selection > label, .student-register-fieldset legend, .student-register-selection__label) {
  color: var(--tz-text-soft);
  font-weight: 800;
}

:where(
  .admin-auth-field__control input,
  .student-auth-control input,
  .student-register-grid input,
  .student-register-selection select,
  .student-register-notes textarea,
  .student-setup-page .form-control,
  .student-setup-page .form-select
) {
  color: var(--tz-text);
  background: var(--tz-surface);
  border: 1px solid var(--tz-border-strong);
  border-radius: var(--tz-radius-sm);
  font-family: var(--tz-font-sans);
  box-shadow: none;
}

:where(
  .admin-auth-field__control input,
  .student-auth-control input,
  .student-register-grid input,
  .student-register-selection select,
  .student-register-notes textarea,
  .student-setup-page .form-control,
  .student-setup-page .form-select
):focus {
  outline: 0;
  color: var(--tz-text);
  background: var(--tz-surface);
  border-color: var(--tz-brand-600);
  box-shadow: var(--tz-focus);
}

:where(.admin-auth-field__control > i, .student-auth-control > i) {
  color: var(--tz-muted);
}

:where(.admin-auth-field__control, .student-auth-control):focus-within > i {
  color: var(--tz-brand-700);
}

:where(.ui-password-toggle, .student-auth-control--password button) {
  color: var(--tz-muted);
  background: transparent;
  border: 0;
  border-radius: var(--tz-radius-xs);
}

:where(.ui-password-toggle, .student-auth-control--password button):hover {
  color: var(--tz-brand-700);
  background: var(--tz-brand-50);
}

/* Primary and alternate actions. */
:where(.admin-auth-submit, .student-auth-submit, .student-register-submit) {
  color: #fff;
  background: var(--tz-brand-600);
  border: 1px solid var(--tz-brand-600);
  border-radius: var(--tz-radius-sm);
  box-shadow: none;
  font-family: var(--tz-font-sans);
  font-weight: 800;
}

:where(.admin-auth-submit, .student-auth-submit, .student-register-submit):hover:not(:disabled) {
  color: #fff;
  background: var(--tz-brand-700);
  border-color: var(--tz-brand-700);
}

:where(.admin-auth-submit, .student-auth-submit, .student-register-submit):disabled {
  color: var(--tz-muted);
  background: var(--tz-surface-soft);
  border-color: var(--tz-border);
}

.student-auth-register {
  color: var(--tz-brand-900);
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--tz-radius-sm);
  text-decoration: none;
}

.student-auth-register:hover {
  color: var(--tz-brand-900);
  background: var(--tz-brand-100);
}

.student-auth-groups-link {
  color: var(--tz-brand-100);
}

.student-auth-groups-link:hover {
  color: #fff;
}

.admin-auth-alt {
  color: var(--tz-muted);
  border-top-color: var(--tz-border);
}

.admin-auth-alt a,
.student-auth-admin-link strong {
  color: var(--tz-info);
}

.student-auth-security,
.student-auth-admin-link,
.student-auth-footer,
.student-register-actions small {
  color: var(--tz-muted);
}

.student-auth-security {
  border-top-color: var(--tz-border);
}

.student-auth-security i {
  color: var(--tz-success);
}

/* Alerts and feedback. */
:where(.admin-auth-alert, .student-auth-alert--error, .student-register-alert) {
  color: var(--tz-danger);
  background: var(--tz-danger-soft);
  border: 1px solid color-mix(in srgb, var(--tz-danger) 25%, white);
  border-radius: var(--tz-radius-sm);
}

.student-auth-alert--success,
.student-register-invite {
  color: var(--tz-success);
  background: var(--tz-success-soft);
  border: 1px solid color-mix(in srgb, var(--tz-success) 25%, white);
  border-radius: var(--tz-radius-sm);
}

.student-register-data-alert {
  color: var(--tz-warning);
  background: var(--tz-warning-soft);
  border: 1px solid color-mix(in srgb, var(--tz-warning) 25%, white);
  border-radius: var(--tz-radius-sm);
}

/* Student registration choices. */
:where(.student-register-segments label, .student-register-modes label, .student-register-check-grid label, .student-register-riwayat-group label, .student-register-riwayat-group) {
  color: var(--tz-text-soft);
  background: var(--tz-surface);
  border: 1px solid var(--tz-border);
  border-radius: var(--tz-radius-sm);
}

:where(.student-register-segments label, .student-register-modes label):hover {
  color: var(--tz-brand-700);
  border-color: var(--tz-brand-200);
  background: var(--tz-brand-50);
}

.student-register-segments input:checked + label {
  color: var(--tz-success);
  background: var(--tz-success-soft);
  border-color: color-mix(in srgb, var(--tz-success) 35%, white);
}

.student-register-modes input:checked + label {
  color: var(--tz-info);
  background: var(--tz-info-soft);
  border-color: color-mix(in srgb, var(--tz-info) 35%, white);
}

.student-register-selection {
  color: var(--tz-text-soft);
  background: var(--tz-surface-soft);
  border: 1px solid var(--tz-border);
  border-radius: var(--tz-radius-md);
}

.student-register-riwayat-group strong {
  color: var(--tz-brand-800);
}

.student-register-check-grid input,
.student-register-riwayat-group input {
  accent-color: var(--tz-brand-600);
}

/* Onboarding details. */
.student-auth-onboarding__mark,
.student-auth-steps li > span,
.admin-auth-features i {
  color: var(--tz-gold-100);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--tz-radius-sm);
}

.student-auth-steps small,
.admin-auth-features li,
.admin-auth-brand small,
.admin-auth-card__visual-copy p {
  color: var(--tz-brand-100);
}

.admin-auth-eyebrow {
  color: var(--tz-brand-100);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--tz-radius-pill);
}

/* Setup page compatibility. */
body.student-setup-page .navbar {
  background: var(--tz-brand-900) !important;
}

body.student-setup-page :where(.card-soft, .card-header-custom) {
  color: var(--tz-text);
  background: var(--tz-surface);
  border-color: var(--tz-border);
}

body.student-setup-page .step-circle {
  color: var(--tz-muted);
  background: var(--tz-surface-soft);
  border-color: var(--tz-border-strong);
}

body.student-setup-page :where(.step-done, .step-active) .step-circle {
  color: #fff;
  background: var(--tz-brand-600);
  border-color: var(--tz-brand-600);
}

body.student-setup-page .step-title,
body.student-setup-page .sub-text {
  color: var(--tz-muted);
}