/* ============================================================================
   SKILLPLAN AUTH — APP LAYER
   auth.css
   ----------------------------------------------------------------------------
   App-specific styles on top of the Blueprint design system
   (blueprint-tokens.css + blueprint-components.css). Keep this file small:
   only icon-font wiring and app glue live here. Reusable UI belongs in the
   shared Blueprint library (products/templates).
   ============================================================================ */

/* ------------------------------------------------------------------ *
 * MATERIAL SYMBOLS (self-hosted icon font)                            *
 *   Blueprint sizes icon slots for SVGs (width/height); font glyphs   *
 *   are sized via font-size below.                                    *
 * ------------------------------------------------------------------ */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100 700;
  font-display: block;
  src: url(/static/material-symbols.woff2) format('woff2');
}

.bp-root i {
  font-family: 'Material Symbols Outlined' !important;
  font-weight: normal !important;
  font-style: normal !important;
  font-size: 20px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  vertical-align: middle;
  flex: none;
}

/* icon sizes inside Blueprint components */
.bp-btn i          { font-size: 16px; }
.bp-btn--sm i      { font-size: 14px; }
.bp-btn--lg i      { font-size: 18px; }
.bp-rail__item i,
.bp-tabbar__item i { font-size: 22px; }
.bp-alert i,
.bp-toast i        { font-size: 18px; margin-top: 1px; }
.bp-menu__item i   { font-size: 16px; margin-right: var(--bp-space-1); }
.bp-empty i        { font-size: 44px; color: var(--bp-ink-faint); margin-bottom: var(--bp-space-3); }
.bp-stat__meta i   { font-size: 14px; }

/* ============================================================================
   AUTH SCENE — branded sign-in screens (public layout)
   ----------------------------------------------------------------------------
   Full-bleed background image (or theme gradient) with a centered glass card.
   Colors come from --auth-* custom properties emitted by the server from the
   configured branding theme (internal/webui/branding.go), so everything below
   must reference those variables, never hard-coded colors.
   ============================================================================ */

.auth-scene { background: #000; }

.auth-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.auth-bg--theme { background: var(--auth-fallback-bg); }

.auth-scene__wrap {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.auth-scene__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--bp-space-6, 24px);
}

.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--auth-card-bg);
  border: 1px solid var(--auth-card-border);
  border-radius: 16px;
  padding: 28px;
  color: var(--auth-text);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.auth-card__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--auth-text-dim);
  margin-bottom: 20px;
}
.auth-card__logo {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex: none;
  background: radial-gradient(circle at 35% 30%, #ffffff 0%, var(--auth-accent) 35%, color-mix(in srgb, var(--auth-accent) 45%, #000) 100%);
}

.auth-heading {
  margin: 0 0 6px;
  font-size: 1.55rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--auth-text);
}
.auth-sub {
  margin: 0 0 22px;
  font-size: 0.9rem;
  color: var(--auth-text-dim);
}

/* Signed-in user chip with "Not you?" escape hatch */
.auth-user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--auth-input-bg);
  border: 1px solid var(--auth-input-border);
  margin-bottom: 18px;
}
.auth-user__avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #d63daf 0%, #8b2fc9 100%);
}
.auth-user__name {
  flex: 1;
  font-weight: 600;
  color: var(--auth-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.auth-user__notyou {
  color: var(--auth-accent);
  font-size: 0.9rem;
  text-decoration: none;
  flex: none;
}
.auth-user__notyou:hover { color: var(--auth-accent-hover); text-decoration: underline; }

/* Authentication method selection */
.auth-methods__label {
  font-size: 0.85rem;
  color: var(--auth-text-dim);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--auth-card-border);
  margin: 0 0 14px;
}
.auth-method {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  padding: 14px;
  border-radius: 12px;
  background: var(--auth-input-bg);
  border: 1px solid var(--auth-input-border);
  color: var(--auth-text);
  cursor: pointer;
  font: inherit;
  margin-bottom: 12px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.auth-method:hover {
  border-color: var(--auth-accent);
  background: color-mix(in srgb, var(--auth-input-bg) 80%, var(--auth-accent) 20%);
}
.auth-method__icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--auth-accent) 18%, transparent);
}
.auth-scene .auth-method__icon i { font-size: 20px; color: var(--auth-accent); }
.auth-method__title { font-weight: 600; margin: 0 0 2px; }
.auth-method__desc { font-size: 0.82rem; color: var(--auth-text-dim); margin: 0; }

/* Spinner + "Authenticating..." state */
.auth-wait {
  display: none;
  text-align: center;
  padding: 34px 0 8px;
}
.auth-wait.is-active { display: block; }
.auth-wait__spinner {
  width: 34px;
  height: 34px;
  margin: 0 auto 46px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: var(--auth-accent);
  animation: auth-spin 0.9s linear infinite;
}
@keyframes auth-spin { to { transform: rotate(360deg); } }
.auth-wait__text { color: var(--auth-text-dim); font-size: 0.92rem; margin: 0 0 34px; }

/* Wide secondary action ("Select another authentication method") */
.auth-alt {
  display: block;
  width: 100%;
  text-align: center;
  padding: 13px 16px;
  border-radius: 12px;
  background: var(--auth-input-bg);
  border: 1px solid var(--auth-input-border);
  color: var(--auth-text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.auth-alt:hover { border-color: var(--auth-accent); }

.auth-powered {
  margin-top: 26px;
  font-size: 0.85rem;
  color: var(--auth-text-dim);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}

/* ---- Re-skin Blueprint components inside the auth scene ---------------- */

/* Page content sits directly in the glass card: neutralize nested panels. */
.auth-scene .bp-panel {
  background: transparent;
  border: none;
  box-shadow: none;
}
.auth-scene .bp-panel__body { padding: 0; }

.auth-scene .bp-h1,
.auth-scene .bp-h2,
.auth-scene .bp-h3 { color: var(--auth-text); }
.auth-scene .bp-text-dim,
.auth-scene .bp-small,
.auth-scene .bp-label { color: var(--auth-text-dim); }
.auth-scene p { color: var(--auth-text-dim); }

.auth-scene .bp-input {
  background: var(--auth-input-bg);
  border-color: var(--auth-input-border);
  color: var(--auth-text);
  border-radius: 10px;
}
.auth-scene .bp-input:focus {
  border-color: var(--auth-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--auth-accent) 25%, transparent);
}

.auth-scene .bp-btn--primary {
  background: var(--auth-accent);
  border-color: var(--auth-accent);
  color: #fff;
  border-radius: 10px;
}
.auth-scene .bp-btn--primary:hover {
  background: var(--auth-accent-hover);
  border-color: var(--auth-accent-hover);
}
.auth-scene .bp-btn--ghost {
  color: var(--auth-text);
  border-color: var(--auth-input-border);
  border-radius: 10px;
}
.auth-scene .bp-link { color: var(--auth-accent); }
.auth-scene .bp-link:hover { color: var(--auth-accent-hover); }

@media (max-width: 480px) {
  .auth-card { padding: 20px; border-radius: 14px; }
}