/* ============================================================
   VESPERZONE — AUTH MODAL + ADMIN PANEL STYLES
   Mantém coerência com o design industrial/noir do site.
   ============================================================ */

/* ============ BODY LOCK WHEN MODAL OPEN ============ */
body.modal-open,
body:has(.auth-overlay.active),
body:has(.admin-modal-overlay.active) {
  overflow: hidden !important;
}

/* ============ AUTH MODAL OVERLAY ============ */
.auth-overlay{
  position:fixed;inset:0;z-index:500;
  background:rgba(12,13,13,.92);
  backdrop-filter:blur(12px);
  display:flex;align-items:flex-start;justify-content:center;
  overflow-y:auto;
  padding:2rem 1rem;
  opacity:0;visibility:hidden;
  transition:opacity .4s ease, visibility .4s ease;
}
.auth-overlay.active{
  opacity:1;visibility:visible;
}
.auth-overlay.active .auth-modal{
  transform:translateY(0) scale(1);
  opacity:1;
}

/* ============ AUTH MODAL BOX ============ */
.auth-modal{
  position:relative;
  margin:auto;
  width:min(95vw, 600px);
  max-width:100%;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.015) 0 2px, transparent 2px 5px),
    var(--steel);
  border:3px solid var(--ink);
  outline:1px solid rgba(233,229,214,.12);
  outline-offset:-3px;
  padding:2.8rem 2.4rem 2.2rem;
  transform:translateY(30px) scale(.96);
  opacity:0;
  transition:transform .5s cubic-bezier(.2,.7,.2,1), opacity .5s ease;
}
.auth-modal .bolt{z-index:2;}

.auth-close{
  position:absolute;top:14px;right:14px;
  background:none;border:1px solid var(--line);
  color:var(--bone-dim);cursor:pointer;
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;
  transition:color .25s, border-color .25s, background .25s;
  z-index:3;
}
.auth-close:hover{
  color:var(--signal);border-color:var(--signal-dim);
  background:rgba(220,177,58,.08);
}

.auth-modal-title{
  font-family:'Oswald',sans-serif;
  font-weight:600;text-transform:uppercase;
  font-size:1.6rem;letter-spacing:.02em;
  margin-bottom:.3rem;
}
.auth-modal-title span{color:var(--signal);}

.auth-subtitle{
  font-family:'IBM Plex Mono',monospace;
  font-size:.68rem;letter-spacing:.2em;
  color:var(--signal-dim);text-transform:uppercase;
  margin-bottom:2rem;
}

/* ============ TAB SWITCHER ============ */
.auth-tabs{
  display:flex;gap:0;margin-bottom:1.8rem;
  border:1px solid var(--line);
}
.auth-tab{
  flex:1;padding:.7rem;
  font-family:'IBM Plex Mono',monospace;
  font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--bone-dim);
  background:transparent;border:none;cursor:pointer;
  transition:color .25s, background .25s;
  text-align:center;
}
.auth-tab:first-child{border-right:1px solid var(--line);}
.auth-tab.active{
  color:var(--ink);
  background:var(--signal);
  font-weight:600;
}
.auth-tab:hover:not(.active){
  color:var(--bone);
  background:rgba(233,229,214,.05);
}

/* ============ FORM FIELDS ============ */
.auth-form{display:none;flex-direction:column;gap:1.1rem;}
.auth-form.active{display:flex;}

.form-group{display:flex;flex-direction:column;gap:.4rem;}
.form-group label{
  font-family:'IBM Plex Mono',monospace;
  font-size:.68rem;letter-spacing:.15em;
  color:var(--signal-dim);text-transform:uppercase;
}
.form-group input{
  background:var(--ink-2);
  border:1px solid var(--line);
  color:var(--bone);
  font-family:'Inter',sans-serif;
  font-size:.92rem;
  padding:.75rem 1rem;
  outline:none;
  transition:border-color .3s, box-shadow .3s;
}
.form-group input::placeholder{
  color:var(--bone-dim);opacity:.5;
}
.form-group input:focus{
  border-color:var(--signal-dim);
  box-shadow:0 0 0 2px rgba(220,177,58,.15);
}

.auth-submit{
  margin-top:.6rem;
  font-family:'IBM Plex Mono',monospace;
  font-size:.82rem;letter-spacing:.08em;font-weight:600;
  padding:.9rem 1.6rem;
  background:var(--signal);
  border:1px solid var(--signal);
  color:var(--ink);
  cursor:pointer;
  text-transform:uppercase;
  transition:background .25s, box-shadow .25s;
}
.auth-submit:hover{
  background:#f0c25a;
  box-shadow:0 0 20px rgba(220,177,58,.3);
}
.auth-submit:disabled{
  opacity:.5;cursor:not-allowed;
}

.auth-error{
  font-family:'IBM Plex Mono',monospace;
  font-size:.72rem;
  color:var(--blood);
  background:rgba(122,48,48,.15);
  border:1px solid rgba(122,48,48,.3);
  padding:.6rem .9rem;
  display:none;
  letter-spacing:.04em;
}
.auth-error.visible{display:block;}

.auth-success{
  font-family:'IBM Plex Mono',monospace;
  font-size:.72rem;
  color:var(--teal);
  background:rgba(67,107,103,.15);
  border:1px solid rgba(67,107,103,.3);
  padding:.6rem .9rem;
  display:none;
  letter-spacing:.04em;
}
.auth-success.visible{display:block;}

.forgot-link{
  display:block;
  text-align:center;
  margin-top:.8rem;
  font-family:'IBM Plex Mono',monospace;
  font-size:.7rem;letter-spacing:.06em;
  color:var(--bone-dim);
  text-decoration:none;
  transition:color .25s;
}
.forgot-link:hover{
  color:var(--signal);
}

.forgot-desc{
  font-family:'IBM Plex Mono',monospace;
  font-size:.78rem;
  color:var(--bone-dim);
  line-height:1.7;
  margin-bottom:.4rem;
}

/* ============ NAV AUTH STATE ============ */
.nav-user{
  display:flex;align-items:center;gap:1rem;
}
.nav-username{
  font-family:'IBM Plex Mono',monospace;
  font-size:.72rem;letter-spacing:.08em;
  color:var(--signal);
  text-transform:uppercase;
}
.nav-role-badge{
  font-family:'IBM Plex Mono',monospace;
  font-size:.58rem;letter-spacing:.12em;
  color:var(--ink);
  background:linear-gradient(180deg,#cfb24a,#a4862b);
  padding:.15rem .45rem;
  text-transform:uppercase;
  margin-left:-.5rem;
}
.nav-btn{
  font-family:'IBM Plex Mono',monospace;
  font-size:.72rem;letter-spacing:.06em;
  color:var(--bone-dim);
  background:none;border:1px solid var(--line);
  padding:.4rem .8rem;cursor:pointer;
  text-transform:uppercase;text-decoration:none;
  transition:color .25s, border-color .25s, background .25s;
}
.nav-btn:hover{
  color:var(--signal);border-color:var(--signal-dim);
  background:rgba(220,177,58,.06);
}

/* ============ TOAST NOTIFICATIONS ============ */
.toast-container{
  position:fixed;top:80px;right:20px;z-index:600;
  display:flex;flex-direction:column;gap:.6rem;
  pointer-events:none;
}
.toast{
  pointer-events:auto;
  font-family:'IBM Plex Mono',monospace;
  font-size:.75rem;letter-spacing:.04em;
  padding:.8rem 1.2rem;
  background:var(--steel);
  border:1px solid var(--line);
  color:var(--bone);
  box-shadow:0 4px 20px rgba(0,0,0,.5);
  transform:translateX(120%);
  opacity:0;
  transition:transform .4s cubic-bezier(.2,.7,.2,1), opacity .4s ease;
  max-width:340px;
}
.toast.show{
  transform:translateX(0);opacity:1;
}
.toast.success{border-left:3px solid var(--teal);}
.toast.error{border-left:3px solid var(--blood);}
.toast.info{border-left:3px solid var(--signal);}

/* ============ ADMIN PANEL ============ */
.admin-panel{
  display:none;
  position:relative;
  background:var(--ink);
}
.admin-panel.active{display:block;}

.admin-panel-inner{
  max-width:1100px;
  margin:0 auto;
}

.admin-stats{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:2px;
  margin-bottom:3rem;
  background:var(--ink);
  border:3px solid var(--ink);
  outline:1px solid rgba(233,229,214,.12);
  outline-offset:-3px;
}
.admin-stat-card{
  background:var(--steel);
  padding:1.5rem 1.8rem;
  text-align:center;
}
.admin-stat-card .stat-value{
  font-family:'Oswald',sans-serif;
  font-size:2rem;font-weight:600;
  color:var(--signal);
}
.admin-stat-card .stat-label{
  font-family:'IBM Plex Mono',monospace;
  font-size:.65rem;letter-spacing:.2em;
  color:var(--bone-dim);text-transform:uppercase;
  margin-top:.3rem;
}

/* ============ USERS TABLE ============ */
.admin-table-wrap{
  background:var(--steel);
  border:3px solid var(--ink);
  outline:1px solid rgba(233,229,214,.12);
  outline-offset:-3px;
  position:relative;
  overflow-x:auto;
}
.admin-table{
  width:100%;
  border-collapse:collapse;
  font-size:.88rem;
}
.admin-table thead{
  background:var(--ink-2);
}
.admin-table th{
  font-family:'IBM Plex Mono',monospace;
  font-size:.68rem;letter-spacing:.15em;
  color:var(--signal-dim);text-transform:uppercase;
  padding:1rem 1.2rem;
  text-align:left;
  border-bottom:2px solid var(--ink);
  white-space:nowrap;
}
.admin-table td{
  padding:.9rem 1.2rem;
  border-bottom:1px solid var(--line);
  vertical-align:middle;
}
.admin-table tr:last-child td{border-bottom:none;}
.admin-table tr{
  transition:background .25s;
}
.admin-table tbody tr:hover{
  background:rgba(220,177,58,.04);
}

.role-badge{
  font-family:'IBM Plex Mono',monospace;
  font-size:.65rem;letter-spacing:.1em;
  padding:.2rem .5rem;
  text-transform:uppercase;
  display:inline-block;
}
.role-badge.admin{
  color:var(--ink);
  background:linear-gradient(180deg,#cfb24a,#a4862b);
}
.role-badge.user{
  color:var(--bone-dim);
  border:1px solid var(--line);
}

/* ============ ACTION BUTTONS ============ */
.admin-actions{
  display:flex;gap:.4rem;flex-wrap:wrap;
}
.action-btn{
  font-family:'IBM Plex Mono',monospace;
  font-size:.62rem;letter-spacing:.06em;
  padding:.35rem .6rem;
  background:none;
  border:1px solid var(--line);
  color:var(--bone-dim);
  cursor:pointer;text-transform:uppercase;
  transition:all .25s;
  white-space:nowrap;
}
.action-btn:hover{
  border-color:var(--signal-dim);
  color:var(--signal);
  background:rgba(220,177,58,.06);
}
.action-btn.danger:hover{
  border-color:var(--blood);
  color:#c04040;
  background:rgba(122,48,48,.1);
}
.action-btn.promote:hover{
  border-color:var(--teal);
  color:#5ca09a;
  background:rgba(67,107,103,.1);
}

/* ============ ADMIN MODALS (edit, confirm) ============ */
.admin-modal-overlay{
  position:fixed;inset:0;z-index:550;
  background:rgba(12,13,13,.88);
  backdrop-filter:blur(8px);
  display:flex;align-items:flex-start;justify-content:center;
  overflow-y:auto;
  padding:2rem 1rem;
  opacity:0;visibility:hidden;
  transition:opacity .3s ease, visibility .3s ease;
}
.admin-modal-overlay.active{
  opacity:1;visibility:visible;
}

.admin-modal{
  position:relative;
  margin:auto;
  width:min(95vw, 600px);
  max-width:100%;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.015) 0 2px, transparent 2px 5px),
    var(--steel);
  border:3px solid var(--ink);
  outline:1px solid rgba(233,229,214,.12);
  outline-offset:-3px;
  padding:2.2rem 2rem;
}
.admin-modal h3{
  font-family:'Oswald',sans-serif;
  font-weight:600;text-transform:uppercase;
  font-size:1.2rem;letter-spacing:.02em;
  margin-bottom:1.4rem;
}
.admin-modal h3 span{color:var(--signal);}

.admin-modal .form-group{margin-bottom:1rem;}

.admin-modal-actions{
  display:flex;gap:.8rem;margin-top:1.4rem;
  justify-content:flex-end;
}
.admin-modal-actions .auth-submit{
  padding:.65rem 1.2rem;
  font-size:.75rem;
}
.modal-cancel{
  font-family:'IBM Plex Mono',monospace;
  font-size:.75rem;letter-spacing:.06em;
  padding:.65rem 1.2rem;
  background:none;
  border:1px solid var(--line);
  color:var(--bone-dim);
  cursor:pointer;text-transform:uppercase;
  transition:all .25s;
}
.modal-cancel:hover{
  border-color:var(--bone-dim);
  color:var(--bone);
}

.confirm-text{
  font-size:.9rem;
  color:var(--bone-dim);
  line-height:1.6;
  margin-bottom:.4rem;
}
.confirm-text strong{color:var(--signal);}

/* ============ RESPONSIVE ============ */
@media(max-width:700px){
  .auth-modal{
    padding:2.2rem 1.5rem 1.8rem;
    margin:1.5rem auto;
  }
  .admin-modal{
    padding:1.8rem 1.4rem;
    margin:1.5rem auto;
  }
  .form-group input{
    font-size:16px; /* Impede zoom automático do Safari no iOS */
    padding:0.7rem 0.8rem;
  }
  .admin-table{font-size:.78rem;}
  .admin-table th, .admin-table td{padding:.7rem .8rem;}
  .admin-actions{gap:.3rem;}
  .action-btn{font-size:.58rem;padding:.3rem .45rem;}
}