/* ===== HEADER ===== */
header img {
    height: 90px;
    margin-right: 16px; /* espaço entre a logo e o título */
}

header {
    display: flex; /* coloca logo e título lado a lado */
    align-items: center; /* alinha verticalmente no centro */
    padding: 0 40px; /* espaço nas laterais do header */
}

/* ===== BODY ===== */
body {
    font-family: Arial, sans-serif; /* fonte padrão da página */
    background-color: #E6E6FA; /* fundo lilás claro */
    color: #333; /* cor do texto */
    margin: 0; /* remove margem padrão do navegador */
    padding: 0; /* remove padding padrão do navegador */
    min-height: 100vh; /* body ocupa no mínimo a altura da tela toda */
    display: flex; /* ativa flex no body */
    flex-direction: column; /* empilha header e container um abaixo do outro */
    align-items: center; /* centraliza tudo horizontalmente */
}

/* ===== CONTAINER DOS DOIS CARDS ===== */
.container {
    width: 100%; /* ocupa toda a largura disponível */
    max-width: 1200px; /* mas nunca passa de 1200px */
    margin: 40px auto; /* espaço acima e abaixo, centralizado */
    display: flex; /* coloca os dois cards lado a lado */
    gap: 32px; /* espaço entre os dois cards */
    align-items: flex-start; /* alinha os cards pelo topo */
    justify-content: center; /* centraliza os cards dentro do container */
    padding: 0 20px; /* respiro nas laterais para não colar na borda */
    box-sizing: border-box; /* padding conta dentro do width, não estoura */
}

/* ===== CARDS ===== */
.adiciona-contato,
.lista-contatos {
    width: 420px; /* largura fixa igual para os dois cards */
    min-height: 340px; /* altura mínima igual — card nunca fica menor que isso */
    padding: 20px; /* espaço interno do card */
    border-radius: 10px; /* cantos arredondados */
    border: 1px solid #8A2BE2; /* borda roxa */
    background-color: #fff; /* fundo branco */
    box-shadow: 0 7px 15px rgba(201, 196, 196, 0.8); /* sombra cinza suave */
    box-sizing: border-box; /* padding conta dentro do width */
}

/* ===== BOTÃO CADASTRAR ===== */
form button {
    padding: 10px 20px; /* espaço interno do botão */
    font-size: 16px; /* tamanho do texto */
    font-weight: bold; /* texto em negrito */
    cursor: pointer; /* cursor de mãozinha ao passar o mouse */
    background-color: #8A2BE2; /* fundo roxo */
    color: #fff; /* texto branco */
    box-shadow: 0 7px 15px rgba(138,43,226,0.4); /* sombra roxa */
    border-radius: 10px; /* cantos arredondados */
    border: none; /* remove borda padrão do botão */
    width: 100%; /* ocupa toda a largura do card */
}

/* ===== FORMULÁRIO DE CADASTRO ===== */
#form-adiciona {
    display: flex; /* empilha os campos um abaixo do outro */
    flex-direction: column; /* direção vertical */
    gap: 12px; /* espaço entre cada campo */
    width: 100%; /* ocupa toda a largura do card */
}

/* ===== INPUTS ===== */
input {
    border-radius: 10px; /* cantos arredondados */
    border: 1px solid #8A2BE2; /* borda roxa */
    padding: 10px; /* espaço interno */
    box-shadow: 0 7px 15px rgba(201, 196, 196, 0.8); /* sombra cinza suave */
    max-width: 100%; /* nunca ultrapassa o card */
    box-sizing: border-box; /* padding conta dentro do width */
}

/* ===== TÍTULOS ===== */
h2 {
    color: #8A2BE2; /* roxo */
    margin-bottom: 4px;
}

h3 {
    color: #666269; /* cinza */
    margin-top: 0;
    font-size: 18px;
}

/* ===== LINHA DO TÍTULO + BUSCA ===== */
#form-pesquisa {
    display: flex; /* coloca "Contatos" e o input de busca lado a lado */
    gap: 12px; /* espaço entre eles */
    width: 100%;
    align-items: center; /* alinha verticalmente no centro */
    justify-content: space-between; /* um na esquerda, outro na direita */
}

/* ===== TABELA ===== */
table {
    width: 100%; /* ocupa toda a largura do card */
    margin-top: 12px; /* espaço acima da tabela */
    border-collapse: separate; /* necessário para border-radius funcionar */
    border-spacing: 0; /* remove espaço entre células */
    border-radius: 10px; /* cantos arredondados na tabela */
    overflow: hidden; /* impede conteúdo de vazar fora dos cantos arredondados */
    border: 1px solid #8A2BE2; /* borda roxa */
}

/* ===== CABEÇALHO DA TABELA ===== */
thead th {
    padding: 8px 10px; /* espaço interno das células do cabeçalho */
    background-color: #8A2BE2; /* fundo roxo */
    color: #fff; /* texto branco */
}

thead th:first-child { border-radius: 10px 0 0 0; } /* arredonda canto superior esquerdo */
thead th:last-child  { border-radius: 0 10px 0 0; } /* arredonda canto superior direito */

/* ===== CORPO DA TABELA COM SCROLL ===== */
tbody {
    display: block; /* transforma tbody em bloco para aceitar height e scroll */
    max-height: 180px; /* altura máxima antes de ativar o scroll */
    overflow-y: auto; /* scroll vertical aparece só quando necessário */
}

/* thead precisa ser table para alinhar colunas com o tbody em block */
thead tr {
    display: table;
    width: 100%;
    table-layout: fixed; /* colunas com largura fixa e igual */
}

/* cada linha do tbody também precisa ser table pelo mesmo motivo */
tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

/* ===== CÉLULAS ===== */
td, th {
    width: 50%; /* cada coluna ocupa metade da tabela */
    padding: 8px 10px; /* espaço interno */
    overflow: hidden; /* esconde texto que não cabe */
    text-overflow: ellipsis; /* coloca "..." quando o texto é cortado */
    white-space: nowrap; /* impede o texto de quebrar linha */
}

/* ===== ZEBRADO ===== */
tbody tr:nth-child(even) {
    background-color: #f3eeff; /* linhas pares ficam lilás claro */
}