/* ==========================================================================
   TrainerPlatform - Bootstrap bridge
   --------------------------------------------------------------------------
   The ASP.NET Identity pages ship with Bootstrap markup (form-floating,
   form-control, btn-primary, alert, nav-pills...). Rather than rewrite all 35
   of those pages, this file re-points Bootstrap's CSS custom properties at our
   design tokens.

   The upside over Bootstrap's own data-bs-theme switch is that our tokens
   already resolve light/dark/system, so Bootstrap inherits the correct theme in
   all three cases - including "system", which data-bs-theme cannot express
   without JavaScript.

   Load order matters: this must come after bootstrap.min.css.
   ========================================================================== */

:root {
  /* --- Surfaces and text --- */
  --bs-body-bg: var(--tp-bg-canvas);
  --bs-body-color: var(--tp-text-primary);
  --bs-body-font-family: var(--tp-font-sans);
  --bs-emphasis-color: var(--tp-text-primary);
  --bs-secondary-color: var(--tp-text-secondary);
  --bs-secondary-bg: var(--tp-bg-surface-alt);
  --bs-tertiary-color: var(--tp-text-muted);
  --bs-tertiary-bg: var(--tp-bg-sunken);

  /* --- Borders and radii --- */
  --bs-border-color: var(--tp-border-default);
  --bs-border-color-translucent: var(--tp-border-subtle);
  --bs-border-radius: var(--tp-radius-md);
  --bs-border-radius-sm: var(--tp-radius-sm);
  --bs-border-radius-lg: var(--tp-radius-lg);

  /* --- Brand --- */
  --bs-primary: var(--tp-brand);
  --bs-link-color: var(--tp-text-link);
  --bs-link-hover-color: var(--tp-brand-hover);
  --bs-danger: var(--tp-danger);
  --bs-success: var(--tp-success);
  --bs-warning: var(--tp-warning);
  --bs-info: var(--tp-info);

  --bs-focus-ring-color: var(--tp-focus-ring);
  --bs-focus-ring-width: var(--tp-focus-ring-width);
}

/* --------------------------------------------------------------------------
   Form controls
   -------------------------------------------------------------------------- */
.form-control,
.form-select {
  background-color: var(--tp-bg-surface);
  border-color: var(--tp-border-default);
  color: var(--tp-text-primary);
  border-radius: var(--tp-radius-md);
  min-height: 2.75rem;
}

.form-control:hover,
.form-select:hover { border-color: var(--tp-border-strong); }

.form-control:focus,
.form-select:focus {
  background-color: var(--tp-bg-surface);
  border-color: var(--tp-brand);
  color: var(--tp-text-primary);
  box-shadow: 0 0 0 var(--tp-focus-ring-width) var(--tp-focus-ring);
}

.form-control::placeholder { color: var(--tp-text-muted); }

.form-control:disabled { background-color: var(--tp-bg-sunken); color: var(--tp-text-muted); }

.form-label {
  color: var(--tp-text-primary);
  font-size: var(--tp-text-sm);
  font-weight: var(--tp-weight-medium);
  margin-bottom: var(--tp-space-2);
}

/* Floating labels sit on top of the control, so they need the control's background. */
.form-floating > label { color: var(--tp-text-muted); }
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label { color: var(--tp-text-secondary); }

.form-check-input {
  background-color: var(--tp-bg-surface);
  border-color: var(--tp-border-strong);
}

.form-check-input:checked {
  background-color: var(--tp-brand);
  border-color: var(--tp-brand);
}

.form-check-input:focus {
  border-color: var(--tp-brand);
  box-shadow: 0 0 0 var(--tp-focus-ring-width) var(--tp-focus-ring);
}

.input-group-text {
  background-color: var(--tp-bg-surface-alt);
  border-color: var(--tp-border-default);
  color: var(--tp-text-secondary);
}

/* --------------------------------------------------------------------------
   Buttons - Bootstrap 5.3 drives these from per-variant --bs-btn-* vars
   -------------------------------------------------------------------------- */
.btn {
  --bs-btn-font-weight: var(--tp-weight-semibold);
  --bs-btn-border-radius: var(--tp-radius-md);
  --bs-btn-focus-box-shadow: 0 0 0 var(--tp-focus-ring-width) var(--tp-focus-ring);
}

.btn-primary {
  --bs-btn-bg: var(--tp-brand);
  --bs-btn-border-color: var(--tp-brand);
  --bs-btn-color: var(--tp-text-on-brand);
  --bs-btn-hover-bg: var(--tp-brand-hover);
  --bs-btn-hover-border-color: var(--tp-brand-hover);
  --bs-btn-hover-color: var(--tp-text-on-brand);
  --bs-btn-active-bg: var(--tp-brand-active);
  --bs-btn-active-border-color: var(--tp-brand-active);
  --bs-btn-active-color: var(--tp-text-on-brand);
  --bs-btn-disabled-bg: var(--tp-brand);
  --bs-btn-disabled-border-color: var(--tp-brand);
  --bs-btn-disabled-color: var(--tp-text-on-brand);
}

.btn-danger {
  --bs-btn-bg: var(--tp-danger);
  --bs-btn-border-color: var(--tp-danger);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--tp-danger-700);
  --bs-btn-hover-border-color: var(--tp-danger-700);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--tp-danger-700);
  --bs-btn-active-color: #fff;
}

.btn-link {
  --bs-btn-color: var(--tp-text-link);
  --bs-btn-hover-color: var(--tp-brand-hover);
}

.btn-lg { --bs-btn-border-radius: var(--tp-radius-md); min-height: 3rem; }

/* --------------------------------------------------------------------------
   Alerts
   -------------------------------------------------------------------------- */
.alert {
  --bs-alert-border-radius: var(--tp-radius-md);
  border-width: var(--tp-border-thin);
  font-size: var(--tp-text-sm);
}

.alert-danger {
  --bs-alert-bg: var(--tp-danger-subtle);
  --bs-alert-color: var(--tp-text-primary);
  --bs-alert-border-color: color-mix(in srgb, var(--tp-danger) 35%, transparent);
}

.alert-warning {
  --bs-alert-bg: var(--tp-warning-subtle);
  --bs-alert-color: var(--tp-text-primary);
  --bs-alert-border-color: color-mix(in srgb, var(--tp-warning) 40%, transparent);
}

.alert-info {
  --bs-alert-bg: var(--tp-info-subtle);
  --bs-alert-color: var(--tp-text-primary);
  --bs-alert-border-color: color-mix(in srgb, var(--tp-info) 35%, transparent);
}

.alert-success {
  --bs-alert-bg: var(--tp-success-subtle);
  --bs-alert-color: var(--tp-text-primary);
  --bs-alert-border-color: color-mix(in srgb, var(--tp-success) 35%, transparent);
}

/* --------------------------------------------------------------------------
   Nav pills - the account management side nav
   -------------------------------------------------------------------------- */
.nav-pills {
  --bs-nav-pills-border-radius: var(--tp-radius-md);
  --bs-nav-pills-link-active-bg: var(--tp-brand-subtle);
  --bs-nav-pills-link-active-color: var(--tp-brand-on-subtle);
  gap: var(--tp-space-1);
}

.nav-link {
  --bs-nav-link-color: var(--tp-text-secondary);
  --bs-nav-link-hover-color: var(--tp-text-primary);
  --bs-nav-link-font-size: var(--tp-text-sm);
  font-weight: var(--tp-weight-medium);
}

.nav-pills .nav-link:not(.active):hover { background: var(--tp-bg-hover); }

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--tp-text-primary);
  --bs-table-border-color: var(--tp-border-subtle);
  font-size: var(--tp-text-sm);
}

/* --------------------------------------------------------------------------
   Text utilities Identity pages rely on
   -------------------------------------------------------------------------- */
.text-danger  { color: var(--tp-danger) !important; }
.text-success { color: var(--tp-success) !important; }
.text-info    { color: var(--tp-info) !important; }
.text-secondary { color: var(--tp-text-secondary) !important; }

/* --------------------------------------------------------------------------
   Blazor framework-emitted classes
   -------------------------------------------------------------------------- */

/* Suppress the stock focus outline on the heading FocusOnNavigate targets -
   the move itself is the feedback, and :focus-visible still covers keyboard use. */
h1:focus { outline: none; }

.valid.modified:not([type=checkbox]) { outline: none; border-color: var(--tp-success); }

.invalid { outline: none; border-color: var(--tp-danger) !important; }

.validation-message { color: var(--tp-danger); font-size: var(--tp-text-xs); font-weight: var(--tp-weight-medium); }

.blazor-error-boundary {
  padding: var(--tp-space-4) var(--tp-space-5);
  border-radius: var(--tp-radius-md);
  background: var(--tp-danger-subtle);
  border: var(--tp-border-thin) solid var(--tp-danger);
  color: var(--tp-text-primary);
  font-size: var(--tp-text-sm);
}

.blazor-error-boundary::after { content: "An error has occurred."; }

/* The recovery-code list on the 2FA pages */
.recovery-code {
  font-family: var(--tp-font-mono);
  font-size: var(--tp-text-sm);
}