/* =========================================================
   GRZ ERP — Auth (Login)
   Usa tokens do app.css + theme.css
   ========================================================= */

body.grz-auth{
  min-height: 100vh;
  background:
    radial-gradient(900px 600px at 18% 15%, color-mix(in srgb, var(--brand-500) 18%, transparent), transparent 60%),
    radial-gradient(900px 600px at 85% 30%, color-mix(in srgb, var(--brand-600) 14%, transparent), transparent 65%),
    var(--bg-soft);
}

.auth-wrap{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.auth-shell{
  width: 100%;
  max-width: 980px;
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 16px;
  align-items: stretch;
}

.auth-brand{
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: calc(var(--card-radius) + 6px);
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--brand-600) 18%, var(--surface)),
      color-mix(in srgb, var(--brand-500) 10%, var(--surface))
    );
  box-shadow: var(--shadow);
  padding: 20px;
  overflow: hidden;
}

.auth-brand-top{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.auth-logo{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgba(255,255,255,.9);
  padding: 8px;
  box-shadow: 0 8px 18px rgba(2,6,23,.12);
}

.auth-brand-title{
  font-weight: 800;
  letter-spacing: .2px;
  color: var(--text);
}

.auth-brand-sub{
  color: var(--muted);
  font-size: 13px;
}


.auth-brand-art{
  position: absolute;
  right: -22px;
  bottom: -28px;
  font-size: 220px;
  line-height: 1;
  opacity: .10;
  color: var(--text);
  pointer-events: none;
  user-select: none;
}

.auth-brand-footer{
  margin-top: auto;
  padding-top: 12px;
}

.auth-panel{
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-card{
  width: 100%;
  border-radius: calc(var(--card-radius) + 6px);
}

.auth-mini-logo img{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: rgba(255,255,255,.9);
  padding: 6px;
  box-shadow: 0 8px 18px rgba(2,6,23,.12);
}

.auth-credit a{
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px dashed color-mix(in srgb, var(--text) 45%, transparent);
}

.auth-credit a:hover{
  color: var(--brand-600);
  border-bottom-color: color-mix(in srgb, var(--brand-600) 60%, transparent);
}

@media (max-width: 992px){
  .auth-shell{ grid-template-columns: 1fr; max-width: 520px; }
}