/* Links */
a {
    color: var(--primary);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Botões */
button {
    background-color: var(--primary);
    border: none;
    color: white;
    padding: 10px 20px;
    font-size: 14px;
    cursor: pointer;
    margin: 5px 0;
    border-radius: 4px;
    font-family: 'Hitmarker Medium', 'Oswald', sans-serif;
    letter-spacing: 1px; /* Adiciona espaçamento entre as letras */
}



button:hover {
    background-color: var(--secondary-dark);
}

button.edit {
    background-color: var(--primary);
    border: none;
    color: white;
    padding: 5px 10px; /* Dimensões reduzidas */
    font-size: 14px; /* Tamanho de fonte reduzido */
    cursor: pointer;
    margin: 5px 0;
    border-radius: 4px;
    font-family: 'Hitmarker Medium', 'Oswald', sans-serif;
    letter-spacing: 1px; /* Adiciona espaçamento entre as letras */
}

button.edit:hover {
    background-color: var(--secondary-dark);
}

button.delete {
    background-color: var(--secondary-very-dark);
    border: none;
    color: white;
    padding: 5px 10px; /* Dimensões reduzidas */
    font-size: 12px; /* Tamanho de fonte reduzido */
    cursor: pointer;
    margin: 5px 0;
    border-radius: 4px;
}

button.delete:hover {
    background-color: darkred;
}

/* Ícones */
.icon-button {
    display: inline-block;
    vertical-align: middle;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    margin-left: 5px;
}

.icon-button.edit {
    color: var(--primary); /* Altera a cor do ícone de editar para verde */
}

.icon-button.delete {
    color: var(--secondary-very-dark); /* Altera a cor do ícone de deletar para vermelho */
}

.icon-button svg {
    fill: none;
    stroke: currentColor; /* Os ícones herdam a cor definida pela propriedade 'color' do elemento pai */
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icon-button.edit:hover {
    color: var(--secondary-dark); /* Altera a cor do ícone de editar no estado de hover */
}

.icon-button.delete:hover {
    color: darkred; /* Altera a cor do ícone de deletar no estado de hover */
}

/* List Items (quadrados) */
.list-esquadrao {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.list-item-esquadrao {
    background: linear-gradient(to bottom, #00313c 0%, #001419 100%); /* Dark gradient background */
    border-top: 4px solid #208c8c; /* Top border */
    border-bottom: 10px solid #208c8c; /* Bottom border */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); /* Shadow for 3D effect */
    border-radius: 8px; /* Slight rounding of corners */
    position: relative;
    overflow: hidden;
    padding: 20px;
    text-align: left;
    width: 100%; /* Aumenta a largura dos quadrados */
    max-width: 1000px; /* Define a largura máxima dos quadrados */
    margin: 10px 0;
    font-size: 18px;
}

.list-item-esquadrao h2 {
    font-size: 24px;
    margin-bottom: 10px;
}

.list-item-esquadrao ul {
    list-style: none;
    padding: 0;
}

.list-item-esquadrao li {
    font-size: 18px;
    margin: 5px 0;
}

.container form label {
    display: block;
    margin-top: 10px;
}

.container form input[type="text"],
.container form input[type="password"],
.container form input[type="submit"] {
    width: 100%; /* Campos de formulário com largura de 100% */
    padding: 10px;
    margin-top: 5px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* Garante que o padding e a borda sejam incluídos na largura total */
}

/* Submit Button Styling */
.submit-button {
    background-color: var(--primary);
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    margin-top: 10px;
    border-radius: 4px;
    transition: background-color 0.3s ease;
    font-family: 'Hitmarker Medium', 'Oswald', sans-serif;
    letter-spacing: 1px; /* Adiciona espaçamento entre as letras */
}

.submit-button:hover {
    background-color: var(--secondary-dark);
}


.esquadrao-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.discord-link img {
    width: 4px;
    height: auto;
}



.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.header-container .left {
    flex: 1;
    text-align: left;
}

.header-container .right {
    flex: 1;
    text-align: right;
}

.custom-link {
    color: var(--primary);
    text-decoration: none;
}

.custom-link:hover {
    text-decoration: underline;
}



/* Estilo para o container dos botões */
.button-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

/* Estilo para o botão de Registro Aleatório */
.random-register {
    flex: 1;
    text-align: left;
}

/* Estilo para o botão de Realocar Jogadores */
.realocar-jogadores {
    flex: 1;
    text-align: right;
}

.button-container button {
    background-color: var(--primary);
    border: none;
    color: white;
    padding: 10px 20px;
    font-size: 14px;
    cursor: pointer;
    border-radius: 4px;
    font-family: 'Hitmarker Medium', 'Oswald', sans-serif;
    letter-spacing: 1px;
}

.button-container button:hover {
    background-color: var(--secondary-dark);
}