/* ── Auth page styles ── */

body[data-page="login"]{
  background: var(--bg);
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
}

.authWrap{
  width:100%;
  max-width:420px;
  padding:24px 16px;
}

.authCard{
  background:var(--card);
  border:1px solid var(--bd);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}

.authHeader{
  text-align:center;
  padding:28px 20px 18px;
}
.authLogo{
  margin:0;
  line-height:0;
}
.authLogoImg{
  height:135px;
  width:auto;
}
.authSub{
  margin-top:4px;
  font-size:13px;
  color:var(--muted);
}

/* Tabs */
.authTabs{
  display:flex;
  border-bottom:1px solid var(--bd);
}
.authTab{
  flex:1;
  border:0;
  background:transparent;
  padding:12px 10px;
  cursor:pointer;
  font-weight:800;
  font-size:14px;
  color:var(--muted);
  position:relative;
}
.authTab:hover{
  color:var(--text);
}
.authTab.active{
  color:var(--text);
}
.authTab.active::after{
  content:"";
  position:absolute;
  bottom:-1px;
  left:16px;
  right:16px;
  height:2px;
  background:var(--accent);
  border-radius:2px;
}

/* Form */
.authForm{
  padding:20px;
}
.authField{
  margin-bottom:16px;
}
.authField label{
  display:block;
  font-size:12px;
  font-weight:700;
  color:var(--muted);
  margin-bottom:6px;
}
.authField input{
  width:100%;
  border:1px solid var(--bd);
  border-radius:12px;
  padding:11px 12px;
  font-size:14px;
  background:#fff;
  outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.authField input:focus{
  border-color:rgba(124,58,237,.45);
  box-shadow:0 0 0 3px rgba(124,58,237,.12);
}
.authField select{
  width:100%;
  border:1px solid var(--bd);
  border-radius:12px;
  padding:11px 12px;
  font-size:14px;
  background:#fff;
  outline:none;
  transition:border-color .15s, box-shadow .15s;
  cursor:pointer;
  appearance:auto;
}
.authField select:focus{
  border-color:rgba(124,58,237,.45);
  box-shadow:0 0 0 3px rgba(124,58,237,.12);
}
.authFieldRow{
  display:flex;
  gap:12px;
}

.authCheckboxField{
  margin:8px 0 4px;
}
.authCheckboxLabel{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:12px;
  line-height:1.5;
  color:var(--muted, #888);
  cursor:pointer;
}
.authCheckboxLabel .authSwitch{
  position:relative;
  display:inline-block;
  width:36px;
  height:20px;
  flex-shrink:0;
  margin-top:1px;
}
.authCheckboxLabel .authSwitch input{
  opacity:0;
  width:0;
  height:0;
}
.authCheckboxLabel .authSlider{
  position:absolute;
  cursor:pointer;
  inset:0;
  background:#ccc;
  border-radius:20px;
  transition:.2s;
}
.authCheckboxLabel .authSlider::before{
  content:"";
  position:absolute;
  height:14px;
  width:14px;
  left:3px;
  bottom:3px;
  background:#fff;
  border-radius:50%;
  transition:.2s;
}
.authCheckboxLabel .authSwitch input:checked + .authSlider{
  background:#7c3aed;
}
.authCheckboxLabel .authSwitch input:checked + .authSlider::before{
  transform:translateX(16px);
}
.authCheckboxLabel > span:not(.authSwitch){
  flex:1;
  min-width:0;
}
.authCheckboxLabel a{
  color:#7c3aed;
  text-decoration:underline;
}

.authBtn{
  display:block;
  width:100%;
  padding:12px;
  border:0;
  border-radius:12px;
  background:var(--accent);
  color:#fff;
  font-size:14px;
  font-weight:800;
  cursor:pointer;
  transition:background .15s;
}
.authBtn:hover{
  background:#6d28d9;
}
.authBtn:disabled{
  opacity:.6;
  cursor:not-allowed;
}

/* Error box */
.authError{
  padding:10px 12px;
  margin-bottom:14px;
  border-radius:10px;
  border:1px solid rgba(239,68,68,.35);
  background:rgba(239,68,68,.08);
  color:#dc2626;
  font-size:13px;
  font-weight:600;
}

/* Success box */
.authSuccess{
  padding:10px 12px;
  margin-bottom:14px;
  border-radius:10px;
  border:1px solid rgba(34,197,94,.35);
  background:rgba(34,197,94,.08);
  color:#16a34a;
  font-size:13px;
  font-weight:600;
}

/* Info paragraph in forms */
.authFormInfo{
  font-size:13px;
  color:var(--muted);
  margin:0 0 16px;
  line-height:1.5;
}

/* Forgot password link row */
.authForgotRow{
  text-align:center;
  margin-top:14px;
}
.authForgotLink{
  border:0;
  background:transparent;
  color:var(--muted);
  font-size:13px;
  cursor:pointer;
  padding:0;
  text-decoration:none;
}
.authForgotLink:hover{
  color:var(--accent);
  text-decoration:underline;
}

.authFooter{
  text-align:center;
  margin-top:20px;
}
.authFooter a{
  color:var(--muted);
  font-size:13px;
  text-decoration:none;
}
.authFooter a:hover{
  color:var(--accent);
  text-decoration:underline;
}

/* ── Topbar auth controls (used on admin pages) ── */
.authPill{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border:1px solid var(--bd);
  border-radius:999px;
  background:var(--card);
  box-shadow:var(--shadow);
  font-size:12px;
  color:var(--muted);
}
.authPill .authUser{
  font-weight:800;
  color:var(--text);
  max-width:140px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.authPill .authAvatar{
  display:none;
  width:24px;height:24px;
  border-radius:50%;
  background:var(--accent,#7c3aed);
  color:#fff;
  font-size:10px;
  font-weight:700;
  letter-spacing:0.5px;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  overflow:hidden;
}
.authPill .authAvatar img{
  width:100%;height:100%;border-radius:50%;object-fit:cover;
}
@media (max-width:600px){
  .authPill .authAvatar{display:flex;}
  .authPill .authUser{display:none;}
}
.authPill .authLogout{
  border:0;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  font-size:12px;
  font-weight:700;
  padding:0;
}
.authPill .authAdminLink{
  color:#805ad5;
  text-decoration:none;
  font-weight:700;
  font-size:12px;
  padding:0;
}
.authPill .authAdminLink:hover{
  color:#553c9a;
  text-decoration:underline;
}
.authPill .authLogout:hover{
  color:#dc2626;
}

/* ── Dark-mode overrides ── */
[data-theme="dark"] .authField input { background: var(--card); color: var(--text) }
[data-theme="dark"] .authField select { background: var(--card); color: var(--text) }