/* File: assets/css/components/sfv-auth-shell.css */
/* =========================================================
   SFV » Auth Shell
   Responsabilidade:
   - casca/layout global dos logins do SaaS
   - largura máxima controlada pelo plugin
   - centralização independente do container externo
   - card/painel de autenticação
   - header do bloco (título/subtítulo)
   - área de ações
   - compatibilidade temporária com estrutura legada do Cliente
   ========================================================= */

/* =========================================================
   TOKENS LOCAIS DO AUTH
   ========================================================= */
#sfv-area-prestador,
#sfv-area-cliente,
#sfv-area-admin,
.sfv-scope{
  --sfv-auth-max-w: 500px;
  --sfv-auth-pad-x: clamp(12px, 3vw, 20px);
  --sfv-auth-pad-y: clamp(14px, 3vw, 24px);
  --sfv-auth-card-pad: clamp(18px, 3vw, 28px);
  --sfv-auth-card-radius: 24px;

  --sfv-auth-bg: var(--sfv-panel-bg, var(--sfv-card-bg, var(--sfv-color-surface, #121827)));
  --sfv-auth-border: var(--sfv-panel-border, var(--sfv-card-border, var(--sfv-color-border, rgba(255,255,255,.10))));
  --sfv-auth-shadow: var(--sfv-panel-shadow, var(--sfv-card-shadow, 0 18px 44px rgba(0,0,0,.28)));
  --sfv-auth-title: var(--sfv-color-text, var(--sfv-text, #fff));
  --sfv-auth-muted: var(--sfv-panel-muted, var(--sfv-card-muted, rgba(255,255,255,.74)));
}

/* =========================================================
   AUTH GLOBAL (NOVO PADRÃO)
   ========================================================= */

/* wrapper externo: ocupa toda a largura disponível e se governa sozinho */
#sfv-area-prestador.sfv-prestador-auth,
#sfv-area-cliente.sfv-cliente-auth,
#sfv-area-admin.sfv-admin-auth{
  width: 100%;
  max-width: none;
  margin: 0;
  padding: var(--sfv-auth-pad-y) var(--sfv-auth-pad-x);
  box-sizing: border-box;
}

/* shell interno: independente do Elementor/container externo */
#sfv-area-prestador .sfv-auth-shell,
#sfv-area-cliente .sfv-auth-shell,
#sfv-area-admin .sfv-auth-shell{
  width: min(100%, var(--sfv-auth-max-w));
  margin-inline: auto;
}

/* card/painel do login */
#sfv-area-prestador .sfv-auth-card,
#sfv-area-cliente .sfv-auth-card,
#sfv-area-admin .sfv-auth-card{
  width: 100%;
  display: grid;
  gap: 16px;
  padding: var(--sfv-auth-card-pad);
  background: var(--sfv-auth-bg);
  border: 1px solid var(--sfv-auth-border);
  border-radius: var(--sfv-auth-card-radius);
  box-shadow: var(--sfv-auth-shadow);
  box-sizing: border-box;
}

/* header do auth */
#sfv-area-prestador .sfv-auth-head,
#sfv-area-cliente .sfv-auth-head,
#sfv-area-admin .sfv-auth-head{
  display: grid;
  gap: 8px;
  text-align: center;
  margin-bottom: 2px;
}

#sfv-area-prestador .sfv-auth-title,
#sfv-area-cliente .sfv-auth-title,
#sfv-area-admin .sfv-auth-title{
  margin: 0;
  font-size: clamp(1.55rem, 2.8vw, 2rem);
  line-height: 1.1;
  font-weight: 900;
  color: var(--sfv-auth-title);
}

#sfv-area-prestador .sfv-auth-subtitle,
#sfv-area-cliente .sfv-auth-subtitle,
#sfv-area-admin .sfv-auth-subtitle{
  margin: 0;
  font-size: .96rem;
  line-height: 1.5;
  color: var(--sfv-auth-muted);
}

/* ações */
#sfv-area-prestador .sfv-auth-actions,
#sfv-area-cliente .sfv-auth-actions,
#sfv-area-admin .sfv-auth-actions{
  display: flex;
  align-items: center;
  justify-content: stretch;
  margin-top: 2px;
}

#sfv-area-prestador .sfv-auth-actions .sfv-btn,
#sfv-area-cliente .sfv-auth-actions .sfv-btn,
#sfv-area-admin .sfv-auth-actions .sfv-btn{
  width: 100%;
  justify-content: center;
}

/* =========================================================
   COMPATIBILIDADE TEMPORÁRIA COM ESTRUTURA LEGADA DO CLIENTE
   ========================================================= */

.sfv-scope .sfv-client-wrap{
  position: relative;
  width: min(100%, 860px);
  margin-inline: auto;
  padding: 25px;
  background: var(--sfv-panel-bg, var(--sfv-auth-bg));
  border: 1px solid var(--sfv-panel-border, var(--sfv-auth-border));
  border-radius: var(--sfv-r12, 14px);
  box-shadow: var(--sfv-shadow-2, var(--sfv-auth-shadow));
  box-sizing: border-box;
}

.sfv-scope .sfv-title-center{
  margin: 0 0 25px;
  text-align: center;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--sfv-text-strong, var(--sfv-auth-title));
}

.sfv-scope .sfv-link-logout{
  position: absolute;
  top: 22px;
  right: 25px;
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  font-weight: 700;
  color: var(--sfv-cta-text, #fff);
  background: var(--sfv-cta-bg, var(--sfv-accent, var(--sfv-primary, #111)));
  border: 1px solid rgba(0,0,0,.18);
  border-radius: 10px;
  text-decoration: none;
  transition: filter .15s ease, transform .04s ease;
}

.sfv-scope .sfv-link-logout:hover{
  filter: brightness(1.04);
}

.sfv-scope .sfv-link-logout:active{
  transform: translateY(1px);
}

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width: 640px){
  #sfv-area-prestador.sfv-prestador-auth,
  #sfv-area-cliente.sfv-cliente-auth,
  #sfv-area-admin.sfv-admin-auth{
    padding: 12px;
  }

  #sfv-area-prestador .sfv-auth-card,
  #sfv-area-cliente .sfv-auth-card,
  #sfv-area-admin .sfv-auth-card{
    padding: 18px 16px;
    border-radius: 18px;
    gap: 14px;
  }

  #sfv-area-prestador .sfv-auth-title,
  #sfv-area-cliente .sfv-auth-title,
  #sfv-area-admin .sfv-auth-title{
    font-size: 1.5rem;
  }

  #sfv-area-prestador .sfv-auth-subtitle,
  #sfv-area-cliente .sfv-auth-subtitle,
  #sfv-area-admin .sfv-auth-subtitle{
    font-size: .93rem;
  }

  .sfv-scope .sfv-client-wrap{
    padding: 18px 16px;
  }

  .sfv-scope .sfv-link-logout{
    top: 18px;
    right: 16px;
  }
}