/* ============================================
   Wolf HR - Shared Auth / Login Styles
   Extracted from hr-ready-core.css
   ============================================ */

:root {
  --auth-bg: var(--neutral-bg);
  --auth-surface: var(--neutral-surface);
  --auth-border: var(--neutral-border);
  --auth-border-strong: var(--neutral-border-hover);
  --auth-border-light: var(--neutral-bg);
  --auth-border-mid: #d0d7e3;
  --auth-text: var(--text-primary);
  --auth-muted: var(--text-muted);
  --auth-primary: var(--brand-primary);
  --auth-primary-soft: var(--brand-primary-light);
  --auth-shadow: var(--shadow-lg);
}

/* Bootstrap / Splash Screen */
.auth-bootstrap-screen {
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, #f3f6fb 0%, #edf2f8 100%);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.auth-bootstrap-screen.hidden {
  display: none !important;
}

.splash-card {
  text-align: center;
  animation: fadeInUp 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.splash-logo {
  width: 72px;
  height: 72px;
  object-fit: contain;
  margin-bottom: 20px;
  background-color: transparent !important;
  color-scheme: light;
}

.splash-brand {
  font-size: 22px;
  font-weight: 700;
  color: var(--auth-text, #102033);
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}

.splash-brand span {
  color: var(--auth-primary, #1f5fa6);
}

.splash-sub {
  font-size: 13px;
  color: var(--auth-muted, #66778f);
  margin-bottom: 28px;
}

.splash-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.splash-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--auth-primary, #1f5fa6);
  opacity: 0.3;
  animation: dotPulse 1.4s ease-in-out infinite both;
}

.splash-dot:nth-child(1) {
  animation-delay: 0s;
}

.splash-dot:nth-child(2) {
  animation-delay: 0.2s;
}

.splash-dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes dotPulse {
  0%, 80%, 100% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  40% {
    opacity: 1;
    transform: scale(1.2);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Auth page wrapper */
#auth-container.auth-page,
#view-login.app.auth-page{
  max-width:none;min-height:100vh;padding:28px 20px 24px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
}
.auth-layout{
  width:min(1120px,100%);
  display:grid;grid-template-columns:minmax(0,1.12fr) minmax(360px,430px);
  gap:20px;align-items:stretch;
}

/* Hero panel */
.auth-hero{
  position:relative;display:grid;grid-template-rows:auto 1fr auto;align-items:start;gap:14px;
  padding:30px;min-height:470px;border-radius:28px;
  border:1px solid rgba(223,232,243,.95);
  background:
    radial-gradient(circle at top left, rgba(31,95,166,.16), transparent 34%),
    radial-gradient(circle at bottom right, rgba(42,161,154,.10), transparent 28%),
    linear-gradient(180deg,var(--auth-surface, #fff) 0%,#f6faff 100%);
  box-shadow:0 28px 70px rgba(17,34,68,.08);
  overflow:hidden;
}
.auth-hero::after{
  content:"";position:absolute;inset:auto -10% -18% auto;
  width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle, rgba(31,95,166,.16), transparent 68%);
  pointer-events:none;
}
.auth-hero-badge{
  display:inline-flex;align-items:center;gap:10px;width:fit-content;
  padding:10px 14px;border-radius:999px;
  background:#f5f9ff;border:1px solid #dde8f6;
  color:#1f3d66;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
}
.auth-hero-mark{width:28px;height:28px;object-fit:contain}
.auth-hero-wordmark{
  width:min(300px,100%);height:auto;justify-self:center;align-self:center;object-fit:contain;
  filter:drop-shadow(0 10px 18px rgba(17,34,68,.08));
}
.auth-hero h1{
  position:relative;z-index:1;margin:0;
  font-size:clamp(2rem, 3vw, 3.2rem);line-height:1.02;letter-spacing:-0.04em;
  color:#12263f;max-width:11ch;
}
.auth-hero p{
  position:relative;z-index:1;margin:0;max-width:34ch;
  font-size:14px;line-height:1.6;color:#5c6c83;
}

/* Login card */
.login-container{max-width:none;margin:0 auto}
.login-card{
  position:relative;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(247,250,255,.92));
  border-radius:28px;padding:24px;min-height:470px;
  box-shadow:var(--auth-shadow, 0 22px 48px rgba(19,34,56,.12));
  border:1px solid rgba(255,255,255,.55);
  backdrop-filter:blur(8px)
}
.auth-shell{display:flex;flex-direction:column;gap:18px}
.auth-shell-top{display:flex;align-items:center;gap:14px}
.auth-shell-logo{
  width:54px;height:54px;border-radius:16px;
  background:#f5f9ff;border:1px solid #dde7f3;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 20px rgba(17,34,68,.06);flex:none;
}
.auth-shell-logo img{width:34px;height:34px;object-fit:contain}
.auth-shell-copy h2{margin:0;text-align:left;letter-spacing:-0.02em;font-size:22px}
.auth-shell-copy p{margin:5px 0 0;color:#62738b;font-size:13px}
.auth-eyebrow{display:inline-block;margin-bottom:4px;color:#2b6bc0;text-transform:uppercase;letter-spacing:.08em;font-size:11px;font-weight:800}

/* Status messages */
.auth-status{
  padding:12px 14px;border-radius:14px;border:1px solid transparent;
  font-size:13px;line-height:1.5;
}
.auth-status.state-panel{box-shadow:none;display:block}
.auth-status.is-success{background:#edf8ef;border-color:#c9e7ce;color:#20703a}
.auth-status.is-error{background:#fff5f5;border-color:#f0cccc;color:#b42318}
.auth-status.is-info{background:#f5f9ff;border-color:#d9e5f4;color:#1f4d85}

/* Form */
.form-group label{display:block;font-size:12px;font-weight:700;color:var(--auth-text, #102033);margin-bottom:6px;letter-spacing:.02em;text-transform:uppercase}
.auth-password-group{margin-bottom:14px}
.auth-input-with-toggle{display:flex;align-items:stretch;gap:8px}
.auth-input-with-toggle input{flex:1 1 auto;min-width:0;width:100%;padding:9px 12px;border:1px solid var(--auth-border-mid, #d0d7e3);border-radius:10px;font-size:13px;background:var(--auth-surface, #fff);color:var(--auth-text, #102033)}
.auth-input-with-toggle input:focus{outline:none;border-color:var(--auth-primary, #1f5fa6);box-shadow:0 0 0 3px rgba(31,95,166,.12)}
.auth-input-with-toggle input::placeholder{color:var(--auth-muted, #66778f)}
.auth-toggle{
  min-width:74px;padding:0 14px;
  border:1px solid var(--auth-border-mid, #d0d7e3);border-radius:10px;
  background:#f8fbff;color:#2a4d78;
  font-size:12px;font-weight:700;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
#btn-toggle-pw{min-width:44px;padding:0 10px;background:transparent;border-color:transparent}
#btn-toggle-pw:hover{background:#f1f5f9;border-color:var(--auth-border-light, #e5ebf3)}
.auth-tools{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:2px 0 6px}
.auth-tools-note{justify-content:flex-start;margin-top:-2px}
.auth-check{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:#30445f;font-weight:600}
.auth-check input{accent-color:var(--auth-primary, #1f5fa6)}
.auth-link{border:0;background:transparent;padding:0;color:var(--auth-primary, #1f5fa6);font-size:13px;font-weight:700;cursor:pointer}
.auth-helper{font-size:12px;color:#72829a}
.auth-actions{justify-content:flex-end;margin-top:10px}
.auth-submit{min-width:150px}
.login-card form{margin:0}
.login-card .form-group{margin-bottom:16px}

/* Login status (supervisor compatibility) */
.login-status{
  padding:12px 14px;border-radius:14px;border:1px solid transparent;
  font-size:13px;line-height:1.5;margin-bottom:16px;
}
.login-status.is-success{background:#edf8ef;border-color:#c9e7ce;color:#20703a}
.login-status.is-error{background:#fff5f5;border-color:#f0cccc;color:#b42318}
.login-status.is-info{background:#f5f9ff;border-color:#d9e5f4;color:#1f4d85}

/* Footer */
.auth-footer{
  width:min(1120px,100%);margin:16px auto 0;
  display:flex;justify-content:center;gap:14px;flex-wrap:wrap;
  color:var(--auth-muted, #66778f);font-size:12px;letter-spacing:.01em;
}
.auth-footer span{padding:0 6px}

/* Responsive auth */
@media (max-width: 900px){
  #auth-container.auth-page,
  #view-login.app.auth-page{padding:20px 12px 18px}
  .auth-layout{grid-template-columns:1fr;gap:14px}
  .auth-hero{padding:24px;min-height:auto}
  .login-card{min-height:auto}
  .auth-hero-wordmark{width:min(260px,100%)}
}
@media (max-width: 560px){
  #auth-container.auth-page,
  #view-login.app.auth-page{padding:18px 12px 16px}
  .auth-hero{padding:22px;border-radius:22px}
  .auth-hero h1{font-size:clamp(1.7rem, 8vw, 2.3rem);max-width:none}
  .auth-hero-wordmark{width:min(240px,100%)}
  .login-card{padding:22px;border-radius:22px;min-height:auto}
  .auth-tools{flex-direction:column;align-items:flex-start}
  .auth-tools-note{margin-top:4px}
  .auth-actions{justify-content:stretch}
  .auth-submit{width:100%}
  .auth-footer{flex-direction:column;align-items:center;gap:6px;text-align:center}
}
.auth-link:focus-visible,.auth-toggle-pwd:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(31,95,166,.18)}