body {
    font-family: sans-serif;
    margin: 20px;
    background-color: #f4f4f4;
}

h1, h2 {
    color: #333;
    text-align: center;
}

/* Botões gerais */
button {
    padding: 8px 15px;
    margin: 5px;
    cursor: pointer;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    transition: background-color 0.2s ease; /* Efeito suave */
}

button:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}


#add-lead-btn {
    background-color: #28a745;
    color: white;
    display: block;
    margin: 20px auto;
}
#add-lead-btn:hover:not(:disabled) {
    background-color: #218838;
}


/* Botões de Ação na Tabela */
.action-btn {
    background-color: #007bff;
    color: white;
    margin-right: 5px;
    padding: 5px 10px; /* Menor padding para caber melhor */
    font-size: 13px;
}
.action-btn.delete {
    background-color: #dc3545;
}
.action-btn:hover:not(:disabled) {
    opacity: 0.85;
}


/* Container e Formulário */
#lead-form-container {
    background-color: #fff;
    padding: 25px;
    margin-top: 20px;
    border-radius: 8px; /* Mais arredondado */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    max-width: 600px; /* Um pouco mais largo */
    margin-left: auto;
    margin-right: auto;
}

#lead-form div {
    margin-bottom: 15px;
}

#lead-form label {
    display: block;
    margin-bottom: 6px; /* Mais espaço */
    font-weight: bold;
    color: #555;
    font-size: 14px;
}

#lead-form input[type="text"],
#lead-form input[type="email"],
#lead-form input[type="tel"],
#lead-form input[type="date"], /* Estilo para date */
#lead-form input[type="number"], /* Estilo para number */
#lead-form select,
#lead-form textarea { /* Estilo para textarea */
    width: calc(100% - 24px); /* Ajuste para padding */
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box; /* Garante que padding não aumente a largura total */
}

#lead-form textarea {
    vertical-align: top;
    resize: vertical; /* Permite redimensionar verticalmente */
}

#lead-form button[type="submit"] {
    background-color: #17a2b8; /* Azul Info */
    color: white;
}
#lead-form button[type="submit"]:hover:not(:disabled) {
    background-color: #138496;
}
#lead-form button[type="button"] {
    background-color: #6c757d;
    color: white;
}
#lead-form button[type="button"]:hover:not(:disabled) {
    background-color: #5a6268;
}

/* Mensagens e Loading */
.message {
    padding: 12px 15px; /* Mais padding */
    margin: 15px 0;
    border-radius: 5px;
    text-align: center;
    font-size: 15px;
}
.message.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}
.message.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

#loading {
    text-align: center;
    padding: 25px;
    font-size: 1.3em;
    color: #555;
}


/* Container da Tabela Responsiva */
.table-container {
    width: 100%;
    overflow-x: auto; /* Permite rolagem horizontal */
    margin-top: 20px;
   /* border: 1px solid #ddd; Opcional: borda visual */
    position: relative;
    -webkit-overflow-scrolling: touch; /* Melhora scroll em iOS */
    background-color: #f9f9f9; /* Fundo suave para área de scroll */
     border-radius: 5px;
}

/* Tabela */
table#leads-table {
    width: 100%;
    /* Força uma largura mínima para que a rolagem seja ativada em telas menores */
    /* Ajuste este valor baseado no conteúdo das suas colunas! */
    min-width: 1400px;
    border-collapse: collapse;
    background-color: #fff; /* Fundo da tabela */
}

#leads-table th,
#leads-table td {
    border: 1px solid #ddd;
    padding: 10px 12px;
    text-align: left;
    /* Padrão: Não quebra linha, adiciona '...' se estourar */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle; /* Alinha verticalmente ao centro */
    font-size: 14px;
}

#leads-table th {
    background-color: #e9ecef; /* Header mais suave */
    font-weight: 600; /* Um pouco mais forte */
    position: sticky; /* Mantém header visível ao rolar verticalmente */
    top: 0;
    z-index: 10; /* Acima das células e ações */
}

/* Colunas específicas que PODEM quebrar linha */
/* Ajuste os índices (nth-child) SE a ordem das colunas mudar! */
#leads-table th:nth-child(11), /* Próxima Ação (Texto) */
#leads-table td:nth-child(11),
#leads-table th:nth-child(13), /* Registro Interação */
#leads-table td:nth-child(13) {
    white-space: normal; /* Permite quebra de linha */
    min-width: 250px; /* Dê mais espaço horizontal */
    vertical-align: top; /* Alinha texto no topo para leitura */
    text-overflow: clip; /* Remove ellipsis se quebrar linha */
    overflow: visible; /* Garante visibilidade */
}

/* Coluna de Ações - Sticky */
#leads-table th:last-child,
#leads-table td:last-child {
    min-width: 135px; /* Espaço para 2 botões */
    text-align: center;
    white-space: nowrap; /* Garante que botões não quebrem linha */
    /* Efeito Sticky: Mantém visível ao rolar horizontalmente */
    position: sticky;
    right: 0; /* Ancora à direita */
    /* Fundo para destacar quando outras colunas passam por baixo */
    background-color: #f8f9fa; /* Fundo da célula de ação */
    z-index: 5; /* Acima das células normais */
    /* Sombra para dar separação visual */
     box-shadow: -3px 0 5px -2px rgba(0,0,0,0.1);
}
/* Garante que o header da coluna de ações tenha o mesmo fundo do resto do header */
#leads-table th:last-child {
    background-color: #e9ecef; /* Mesmo fundo do header */
    z-index: 11; /* Acima do z-index do header normal */
}

/* Linhas da tabela com hover */
#leads-tbody tr:hover {
    background-color: #f1f1f1; /* Leve destaque ao passar o mouse */
}
/* Ajuste para que o fundo da ação sticky não mude no hover da linha */
#leads-tbody tr:hover td:last-child {
     background-color: #f8f9fa;
}