/* ./public/vanilla_styles/styles-login_dark.css */

body {
    background-color: #000000;
    color: #00FF41;
    font-family: 'Courier New', Courier, monospace;
    display: flex;           /* Ativa o modo de caixa flexível */
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center;     /* Centraliza verticalmente */
    min-height: 100dvh;      /* Usa a altura dinâmica (Dynamic Viewport Height) */
    margin: 0;
    overflow-y: auto;    /* Ativa scroll vertical se o card for maior que a tela */
    overflow-x: auto;    /* Ativa scroll horizontal se a tela for menor que 315px */
}

.login-card {
    border: 3px solid #00FF41;
    padding: 1rem;
    background: #000000;
    box-shadow: 10px 10px 5px #003B00; /*horizontal_px | vertical_px | precisão_px*/
    min-width: 325px;
    max-width: 325px; /* Largura Máxima do Card*/
    width: 95%;       /* Largura total em 95% garante que não perderá efeito sombra ao espremer a janela */
}

header { /* Header para garatir que o h1 ficará cetralizando durante a animação */
    position: relative; /* Define que o botão vai se alinhar em relação ao header */
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center; /* Garante que o H1 inline-block fique no meio lá no .glitch no "Animação h1 CrypChat" */
}

h1 { 
    font-size: xx-large;
    text-align: center;
    padding-bottom: 0.1rem;
    margin-bottom: 1.5rem;
    letter-spacing: 2px;
    border-bottom: 2px solid #00FF41;
}

.field-group, .field-group2 {
    display: flex;
    flex-direction: column; /* Força os filhos (labels) a ficarem em coluna */
    gap: 2px;               /* Cria um espaço entre as opções sem precisar de margin */
    margin-bottom: 1rem; 
    border: 1px solid #003B00; 
    padding: 10px; 
}

.field-group label {
    display: flex;
    align-items: center;      /* Alinha verticalmente no centro */
    justify-content: space-between; /* Empurra a bolinha para o extremo oposto do texto */
    width: 100%;              /* Garante que o label ocupe toda a largura do fieldset */
    cursor: pointer;
    padding: 4px 0;           /* Um respiro entre as opções */
}

input[type="text"], input[type="password"] {
    width: 100%;
    background: transparent;
    border: 1px solid #00FF41;
    color: #00FF41;
    padding: 8px;
    margin-top: 10px;
    box-sizing: border-box;
}

@media (max-width: 768px) { /* Este trecho de código garante que não haverá Zoom em mobile pela fonte ser menor que 16px*/
    input, select, textarea {
        font-size: 16px !important;
    }
}

.auth-fields label {
    display: flex;
    flex-direction: column; /* Coloca o texto em cima e o input embaixo */
    margin-top: 1rem;
    margin-bottom: 0.5rem;  /* Dá espaço entre o campo de usuário e senha */
}

.auth-fields span {
    font-size: 0.9rem;
    letter-spacing: 2px;    /* Espaçamento entre letras para parecer terminal */
}

/*----------↓ Sinal de On-line ↓----------*/
.status-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-left: 8px;   /* Espaço entre o texto e a bolinha */
    vertical-align: middle; /* Alinha com o centro do texto */
}

.online {
    background-color: rgb(16, 186, 16);
    box-shadow: 0 0 8px lightgreen;
}

.offline {
    background-color: #ff0000;
    box-shadow: 0 0 8px #ff0000;
}
/*----------↑ Sinal de On-line ↑----------*/

/*----------↓ Botões ↓----------*/
.theme-btn {
    position: absolute; /* Sai do fluxo normal e flutua */
    right: 0;           /* Alinha na parede da direita */
    top:  0;            /* Alinha com o topo do header */
    
    background: transparent;
    color: #00FF41;
    font-family: 'Courier New', monospace;
    font-size: 1rem; 
    cursor: pointer;
    transition: 0.3s;
}

.theme-btn:hover {
    color: #ff0000;
}

.btn {
    display: flex;
    gap: 15px;
    margin-top: 15px;      
    width: 100%;
}

.btn-register, .btn-connect {
    flex: 1;        /* Faz ambos crescerem igualmente para ocupar a largura */
    padding: 10px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.5s;
    letter-spacing: 2px;
}

.btn-register {
    background: transparent;
    border: 1px solid #00FF41;
    color: #00FF41;
}

.btn-connect {
    background: #00FF41;
    border: 1px solid #00FF41;
    color: #000000;
}

.btn-register:hover {
    color: white;
    box-shadow: 0 0 25px white;
}

.btn-connect:hover { 
    background: white; 
    color: #00FF41;
    box-shadow: 0 0 25px white;
    transform: scale(1.05); /* Aumenta ao passar o mouse */
}

.btn-info {
    display: flex;
    margin-left: auto;
    background: transparent;
    border: none;
    color: #00FF41;
    font-family: 'Courier New', Courier, monospace;
    font-size: 1rem;
    cursor: pointer;
    margin-top: 20px;
}
/*----------↑ Botões ↑----------*/

@media (prefers-reduced-motion: reduce) { /*Opção que desativa as animações e transições Cinetose (Motion Sickness)*/
    * {
        animation: none !important;
        transition: none !important;
    }
}

/*-----↓ Animação h1 CrypChat ↓-----*/
@keyframes flicker {
  21% { opacity: 1;   }
  22% { opacity: 0.1; } /* Apaga */
  23% { opacity: 1;   } /* Acende */
  88% { opacity: 1;   } 
  89% { opacity: 0.1; } 
  90% { opacity: 1;   } 
}

.glitch {
  display: inline-block;
  animation: flicker 10s infinite;
}
/*-----↑ Animação h1 CrypChat ↑-----*/

/*----------↓ Animação Sinal de On-line ↓----------*/
@keyframes online-flicker {
    0% { opacity: 1;    }
    50% { opacity: 0.5; }
    100% { opacity: 1;  }
}

.online {
    animation: online-flicker 2s infinite ease-in-out;
}

@keyframes offline-flicker {
    14% { opacity:   1; }
    15% { opacity: 0.7; }
    25% { opacity: 0.7; }
    26% { opacity:   1; }
    31% { opacity:   1; }
    32% { opacity: 0.2; }
    33% { opacity:   1; }
    35% { opacity: 0.1; }
    36% { opacity:   1; }
    80% { opacity:   1; }
    81% { opacity: 0.5; }
    82% { opacity:   1; }
    84% { opacity:   1; }
    85% { opacity: 0.2; }
    90% { opacity: 0.1; }
    99% { opacity:   1; }
}

.offline {
    animation: offline-flicker 5s infinite ease-in-out;
}
/*----------↑ Animação Sinal de On-line ↑----------*/

/*-----↓ Animação botão Conectar_ ↓-----*/
@keyframes Conectar-pulse {
  0% { box-shadow: 0 0 0px #00FF41;   }
  50% { box-shadow: 0 0 15px #00FF41; }
  100% { box-shadow: 0 0 0px #00FF41; }
}

.btn-connect {
    animation: Conectar-pulse 3s infinite ease-in-out;
}
/*-----↑ Animação botão Conextar_ ↑-----*/