/**
 * Zyron CRM - Login Page
 */

/* Login Screen */
.login-screen {
  position: fixed;
  inset: 0;
  display: flex;
  z-index: var(--z-login);
  transition: opacity 0.4s, transform 0.4s;
}

/* ──── Bootstrap loading overlay (admin async login restore) ──────────────── */
/* html.is-bootstrapping → token bulundu, app henüz mount olmadı.
   Login ekranı (has-session ile) gizli + .app display:none → blank flash olurdu.
   Bu overlay tam o anda görünür; .app.is-active eklendiğinde otomatik kaybolur. */
#boot-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--color-bg, #0b0d11);
  color: var(--color-text-primary, #e6e9ee);
  pointer-events: none;
}
/* Inline style="display:none" override için !important şart */
html.is-bootstrapping #boot-overlay { display: flex !important; }
/* Auth.showApp() is-bootstrapping'i HTML'den kaldırır → overlay gizlenir */

.boot-overlay__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.boot-overlay__brand {
  font-family: 'Poppins', 'Inter', -apple-system, sans-serif;
  font-weight: 600;
  letter-spacing: 6px;
  font-size: 28px;
  opacity: 0.92;
}
.boot-overlay__spinner {
  width: 36px; height: 36px;
  border: 3px solid color-mix(in srgb, currentColor 18%, transparent);
  border-top-color: var(--color-primary, #2563eb);
  border-radius: 50%;
  animation: bootSpin 0.85s linear infinite;
}
.boot-overlay__text {
  font-size: 13px;
  letter-spacing: 0.4px;
  color: var(--color-text-secondary, #94a3b8);
}
@keyframes bootSpin { to { transform: rotate(360deg); } }
/* Light tema fallback */
[data-theme="light"] #boot-overlay { background: #ffffff; color: #0f172a; }

/* Token varken sayfa yüklenirken login flash'ını önle */
.has-session .login-screen {
  opacity: 0;
  pointer-events: none;
}

.login-screen.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-20px);
}

/* Login Left Panel - Branding */
.login-brand {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-surface-1);
  position: relative;
  overflow: hidden;
}

.login-brand::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 70% at 40% 50%, rgba(127, 29, 29, 0.3), transparent);
}

.login-brand__content {
  position: relative;
  z-index: 1;
  text-align: left;
}

.login-brand__company {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-primary);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}

.login-brand__title {
  font-size: var(--text-4xl);
  font-weight: var(--font-light);
  color: var(--color-text-primary);
  line-height: 1.1;
  letter-spacing: -1px;
}

.login-brand__title strong {
  font-weight: var(--font-semibold);
}

.login-brand__subtitle {
  font-size: var(--text-base);
  color: var(--color-text-tertiary);
  margin-top: var(--space-3);
}

/* Login Right Panel - Form */
.login-form-panel {
  width: 400px;
  background-color: var(--color-bg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 52px 44px;
  border-left: 1px solid var(--color-border);
}

@media (max-width: 800px) {
  .login-brand { display: none; }
  .login-form-panel {
    width: 100%;
    padding: 48px 28px;
    border-left: none;
  }
}
@media (max-width: 480px) {
  .login-form-panel { padding: 32px 20px; }
  .login-form__title { font-size: var(--text-xl); }
  .login-form__subtitle { margin-bottom: var(--space-5); }
  .login-hint { font-size: 12px; line-height: 1.6; padding: var(--space-2); }
}

.login-form__title {
  font-size: var(--text-2xl);
  font-weight: var(--font-medium);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}

.login-form__subtitle {
  font-size: var(--text-base);
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-8);
}

.login-hint {
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
  text-align: center;
  background-color: var(--color-surface-2);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  line-height: 1.8;
  margin-top: var(--space-4);
}

.login-hint b {
  color: var(--color-primary);
}