/**
 * Public website + authentication / access entry surfaces.
 * Requires static/css/design_tokens.css (and optionally te_palette_surfaces.css) loaded first.
 * No palette hex literals — only var(--...) references.
 */

/* ── Public site shell (marketing + public auth flows) ─────────── */
body.te-public-site {
  background-color: var(--color-bg-main);
  color: var(--color-text-primary);
}

/* Header / navbar */
.te-public-navbar {
  background-color: var(--color-bg-card);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--color-primary-dark) 6%, transparent);
}

.te-public-navbar .navbar-brand {
  color: var(--color-primary-dark);
}

.te-public-navbar .nav-link {
  color: var(--color-primary-dark);
}

.te-public-navbar .nav-link:hover,
.te-public-navbar .nav-link:focus {
  color: var(--color-accent-strong);
}

.te-public-navbar .dropdown-item {
  color: var(--color-primary-dark);
}

.te-public-navbar .dropdown-item:hover {
  background-color: var(--color-accent-soft);
  color: var(--color-primary-dark);
}

/* Bootstrap toggler on light bar */
.te-public-navbar .navbar-toggler {
  border-color: var(--color-border);
}

.te-public-navbar .btn-link.te-public-nav-help {
  color: var(--color-secondary);
  text-decoration: none;
}

.te-public-navbar .btn-link.te-public-nav-help:hover {
  color: var(--color-accent-strong);
}

/* Primary / outline CTAs — override Bootstrap blue on public surface */
body.te-public-site .btn-primary {
  background-color: var(--color-accent-strong);
  border-color: var(--color-accent-strong);
  color: var(--color-text-on-dark);
  border-radius: 10px;
}

body.te-public-site .btn-primary:hover,
body.te-public-site .btn-primary:focus {
  background-color: var(--color-accent-strong-hover);
  border-color: var(--color-accent-strong-hover);
  color: var(--color-text-on-dark);
}

body.te-public-site .btn-outline-primary {
  border-color: var(--color-accent-strong);
  color: var(--color-accent-strong);
  border-radius: 10px;
}

body.te-public-site .btn-outline-primary:hover,
body.te-public-site .btn-outline-primary:focus {
  background-color: var(--color-accent-soft);
  border-color: var(--color-accent-strong);
  color: var(--color-primary-dark);
}

body.te-public-site .btn-outline-secondary {
  border-color: var(--color-secondary);
  color: var(--color-primary-dark);
  border-radius: 10px;
}

body.te-public-site .btn-outline-secondary:hover,
body.te-public-site .btn-outline-secondary:focus {
  background-color: var(--color-accent-soft);
  border-color: var(--color-secondary);
  color: var(--color-primary-dark);
}

body.te-public-site .text-primary {
  color: var(--color-accent-strong) !important;
}

body.te-public-site .link-secondary,
body.te-public-site #public-main a.link-secondary {
  color: var(--color-secondary);
}

body.te-public-site .link-secondary:hover,
body.te-public-site #public-main a.link-secondary:hover {
  color: var(--color-accent-strong);
}

body.te-public-site #public-main .te-public-plans a:not(.btn) {
  color: var(--color-accent-light);
}

body.te-public-site #public-main .te-public-plans a:not(.btn):hover {
  color: var(--color-text-on-dark);
}

body.te-public-site .badge.bg-primary {
  background-color: color-mix(in srgb, var(--color-accent-soft) 55%, var(--color-bg-card)) !important;
}

body.te-public-site .badge.text-primary {
  color: var(--color-accent-strong) !important;
}

/* Marketing hero bands */
.te-public-hero-soft {
  background: linear-gradient(
    160deg,
    var(--color-accent-soft) 0%,
    color-mix(in srgb, var(--color-accent-light) 70%, var(--color-bg-card)) 100%
  );
  border-radius: 12px;
  padding: 2rem 1.5rem;
}

.te-public-hero-light {
  background: var(--color-accent-light);
  border-radius: 12px;
  padding: 2rem 1.5rem;
}

body.te-public-site #public-main .display-5,
body.te-public-site #public-main h1,
body.te-public-site #public-main .h2 {
  color: var(--color-primary-dark);
}

body.te-public-site #public-main article.te-public-prose a {
  color: var(--color-primary-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}

body.te-public-site #public-main article.te-public-prose a:hover {
  color: var(--color-accent-strong);
}

/* Public main: forms */
body.te-public-site #public-main .form-label {
  color: var(--color-primary-dark);
  font-weight: 500;
}

body.te-public-site #public-main .form-control,
body.te-public-site #public-main .form-select {
  border-radius: 10px;
  border: 1px solid var(--color-secondary);
  background-color: var(--color-bg-card);
  color: var(--color-primary-dark);
}

body.te-public-site #public-main .form-control:focus,
body.te-public-site #public-main .form-select:focus {
  border-color: var(--color-accent-strong);
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--color-accent-strong) 25%, transparent);
}

body.te-public-site #public-main .text-muted,
body.te-public-site #public-main .form-text {
  color: var(--color-secondary) !important;
}

/* Alerts — public */
body.te-public-site #public-main .alert-success {
  background-color: var(--color-accent-light);
  border-color: var(--color-accent-strong);
  color: var(--color-primary-dark);
}

body.te-public-site #public-main .alert-info {
  background-color: var(--color-accent-soft);
  border-color: var(--color-secondary);
  color: var(--color-primary-dark);
}

/* Footer */
.te-public-footer {
  background-color: var(--color-primary-dark);
  color: rgba(255, 255, 255, 0.88);
  border-top: none;
}

.te-public-footer strong,
.te-public-footer .text-dark {
  color: var(--color-text-on-dark) !important;
}

.te-public-footer .text-muted {
  color: rgba(255, 255, 255, 0.72) !important;
}

.te-public-footer a:not(.btn) {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
}

.te-public-footer a:not(.btn):hover {
  color: var(--color-accent-light);
}

.te-public-footer .link-secondary {
  color: rgba(255, 255, 255, 0.78) !important;
}

.te-public-footer .link-secondary:hover {
  color: var(--color-accent-strong) !important;
}

/* ── Minimal error pages (404 / 500) ──────────────────────────── */
body.te-public-error-page {
  min-height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-primary-dark);
  color: var(--color-text-on-dark);
}

body.te-public-error-page .te-public-error-inner {
  text-align: center;
  padding: 1.5rem;
}

body.te-public-error-page .text-muted {
  color: rgba(255, 255, 255, 0.7) !important;
}

body.te-public-error-page .btn-outline-light {
  border-color: rgba(255, 255, 255, 0.45);
  color: var(--color-text-on-dark);
  border-radius: 10px;
}

body.te-public-error-page .btn-outline-light:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.55);
  color: var(--color-accent-light);
}

/* ── Auth shell (portal login, tenant login, MFA, password reset) ─ */
body.login-body.te-auth-shell {
  background: var(--color-bg-main);
  color: var(--color-text-primary);
}

body.te-auth-shell .auth-card {
  border-radius: 16px;
  border: 1px solid var(--color-border);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--color-primary-dark) 12%, transparent);
  overflow: hidden;
}

body.te-auth-shell .auth-header {
  border-bottom-color: var(--color-border);
}

body.te-auth-shell .auth-logo h1,
body.te-auth-shell .auth-body h5.te-auth-title,
body.te-auth-shell .auth-body .te-auth-title {
  color: var(--color-primary-dark);
  letter-spacing: -0.025em;
}

body.te-auth-shell .auth-logo p,
body.te-auth-shell .auth-body .te-auth-lead {
  color: var(--color-secondary);
  font-size: 0.875rem;
}

body.te-auth-shell .auth-body .form-label {
  color: var(--color-primary-dark);
}

body.te-auth-shell .auth-body .form-label i {
  color: var(--color-secondary);
}

body.te-auth-shell .auth-body .form-control,
body.te-auth-shell .auth-body .form-select {
  border-radius: 10px;
  border: 1px solid var(--color-secondary);
  background-color: var(--color-bg-card);
  color: var(--color-primary-dark);
}

body.te-auth-shell .auth-body .form-control:focus,
body.te-auth-shell .auth-body .form-select:focus {
  border-color: var(--color-accent-strong);
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--color-accent-strong) 25%, transparent);
}

body.te-auth-shell .btn-primary {
  background-color: var(--color-accent-strong);
  border-color: var(--color-accent-strong);
  color: var(--color-text-on-dark);
  border-radius: 10px;
}

body.te-auth-shell .btn-primary:hover,
body.te-auth-shell .btn-primary:focus {
  background-color: var(--color-accent-strong-hover);
  border-color: var(--color-accent-strong-hover);
  color: var(--color-text-on-dark);
}

body.te-auth-shell .btn-secondary {
  border-radius: 10px;
}

body.te-auth-shell .btn-outline-secondary {
  border-color: var(--color-secondary);
  color: var(--color-primary-dark);
  border-radius: 10px;
}

body.te-auth-shell .btn-outline-secondary:hover {
  background-color: var(--color-accent-soft);
  border-color: var(--color-secondary);
  color: var(--color-primary-dark);
}

body.te-auth-shell .btn-auth-submit {
  border-radius: 10px;
}

body.te-auth-shell .te-auth-btn-inline {
  width: auto;
  padding: 0.65rem 1.5rem;
}

body.te-auth-shell .alert-success {
  background-color: var(--color-accent-light);
  border-color: var(--color-accent-strong);
  color: var(--color-primary-dark);
}

body.te-auth-shell .alert-info {
  background-color: var(--color-accent-soft);
  border-color: var(--color-secondary);
  color: var(--color-primary-dark);
}

/* Invite / lightweight entry pages using Bootstrap only */
body.te-invite-entry {
  background-color: var(--color-bg-main);
  color: var(--color-text-primary);
}

body.te-invite-entry h1,
body.te-invite-entry h2 {
  color: var(--color-primary-dark);
}

body.te-invite-entry .form-control,
body.te-invite-entry .form-select {
  border-radius: 10px;
  border-color: var(--color-secondary);
  color: var(--color-primary-dark);
}

body.te-invite-entry .btn-primary {
  background-color: var(--color-accent-strong);
  border-color: var(--color-accent-strong);
  color: var(--color-text-on-dark);
  border-radius: 10px;
}

body.te-invite-entry .btn-primary:hover {
  background-color: var(--color-accent-strong-hover);
  border-color: var(--color-accent-strong-hover);
  color: var(--color-text-on-dark);
}

body.te-invite-entry .btn-secondary {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--color-text-on-dark);
  border-radius: 10px;
}

body.te-invite-entry .btn-secondary:hover {
  background-color: color-mix(in srgb, var(--color-secondary) 88%, #000000);
  border-color: color-mix(in srgb, var(--color-secondary) 88%, #000000);
  color: var(--color-text-on-dark);
}

body.te-invite-entry .text-muted {
  color: var(--color-secondary) !important;
}