/* ./src/styles/index.css */

:root{
    --text: #00F444;
    --background: #000000;
    --shadow: #003B00;
    --transparent-background: #00F444b3;
    --online-dot: #10ba10;
    --offline-dot: #ff0000;
    --btn-hover: #ffffff;
}

body.light-theme {
    --text: #044400;
    --background: #cacaca;
    --shadow: #1a4d2e;
    --transparent-background: #044400b3;
}

body {
    background-color: var(--background);
    color: var(--text);
    font-family: 'Courier New', Courier, monospace;
    display: flex;             /* Ativa o modo de caixa flexível */
    min-height: 100vh;         /* Redundância para navegadores bem antigos ex.: Chrome 49 | deixa o card no centro.*/
    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 {
    margin: auto; /* Centraliza horizontalmente e verticalmente sem forçar caso a tela seja menor que o card*/
    border: 3px solid var(--text);
    padding: 0.5rem;
    background: var(--background);
    box-shadow: 10px 10px 5px var(--shadow); /*horizontal_px | vertical_px | precisão_px*/
    min-width: 280px;
    max-width: 360px; /* 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 var(--text);
}

.field-group-connection, .field-group-interface {
    display: flex;
    flex-direction: column;  /* Força os filhos (labels) a ficarem em coluna */
    gap: 10px;               /* Cria um espaço entre as opções sem precisar de margin */
    margin-bottom: 0.5rem; 
    border: 1px solid var(--shadow); 
    padding: 8px;
    font-size: 1.1rem;
    letter-spacing: 1px;
}

.field-group-connection label {
    display: flex;
    align-items: center;    /* Alinha verticalmente no centro */
    width: 100%;            /* Garante que o label ocupe toda a largura do fieldset */
    cursor: pointer;
}

.field-group-interface label{
    cursor: pointer;
}

.text-label {
    flex-grow: 1; /* Empurra a bolinha de status para o final da linha. */
    white-space: nowrap; /* Impede que o texto quebre de linha. */
}

input[type="login"], input[type="password"], input[type="text"], input[type="email"] {
    width: 100%;
    background: transparent;
    border: 1px solid var(--text);
    color: var(--text);
    padding: 8px;
    margin-top: 2px;
    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 */
    font-weight: bold;
}

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

/*----------↓ Modal_register ↓----------*/
dialog::backdrop {
    background: var(--transparent-background);
    backdrop-filter: blur(2px); /* Efeito de vidro embaçado */
}

.modal-estilo{
    margin: auto;
    min-width: 250px;
    max-width: 290px;
    color: var(--text);
}

h2 {
    font-size: larger;
    text-align: center;
    margin-top: 0;
    color: var(--text);
}
/*----------↑ Modal_register ↑----------*/

/*----------↓ 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: var(--online-dot);
    box-shadow: 0 0 8px var(--online-dot);
}

.offline {
    background-color: var(--offline-dot);
    box-shadow: 0 0 8px var(--offline-dot);
}
/*----------↑ 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: var(--text);
    font-family: 'Courier New', monospace;
    font-size: 1rem; 
    cursor: pointer;
    transition: 0.3s;
}

.theme-btn:hover {
    color: var(--offline-dot);
}

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

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

.btn-register, .btn-cancel {
    background: transparent;
    border: 1px solid var(--text);
    color: var(--text);
}

.btn-connect, .btn-request {
    background: var(--text);
    border: 1px solid var(--text);
    color: var(--background);
}

.btn-register:hover, .btn-cancel:hover {
    color: var(--btn-hover);
    box-shadow: 0 0 25px var(--btn-hover);
}

.btn-connect:hover, .btn-request.btn-request:hover { 
    background: var(--btn-hover); 
    color: var(--text);
    box-shadow: 0 0 25px var(--btn-hover);
    transform: scale(1.05); /* Aumenta ao passar o mouse */
}

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

/*----------↓ Estado Travado (Disabled) ↓----------*/
button:disabled {
    cursor: not-allowed !important;         /* Força o cursor de proibido */
    opacity: 0.3 !important;                /* Força transparência (cinza) */
    animation: none !important;             /* PARA de pulsar */
    transform: none !important;             /* Não cresce */
    box-shadow: none !important;            /* Sem brilho */
    background: transparent !important;     /* Tira o preenchimento sólido */
    color: var(--text) !important;          /* Volta a ser apenas contorno */
    border-color: var(--shadow) !important; /* Borda mais apagada */
}

/* Garante que o hover não funcione quando travado */
button:disabled:hover {
    box-shadow: none !important;
    color: var(--text) !important;
    background: transparent !important;
}
/*----------↑ Estado Travado (Disabled) ↑----------*/

@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 var(--text);   }
  50% { box-shadow: 0 0 15px var(--text); }
  100% { box-shadow: 0 0 0px var(--text); }
}

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