/* ========================================================== */
/* ESTILOS GERAIS E LAYOUT (TEMA ESCURO) */
/* ========================================================== */

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Fonte mais moderna */
    background-color: #1a1a2e; /* Fundo principal: Azul escuro bem profundo */
    color: #e0e0e0; /* Cor do texto principal: Cinza claro */
    margin: 0;
    padding: 0;
    line-height: 1.6;
    display: flex; /* Para centralizar o painel verticalmente, se necessário */
    flex-direction: column;
    min-height: 100vh; /* Ocupa a altura total da viewport */
}

.header {
    background-color: #16213e; /* Azul escuro um pouco mais claro que o fundo */
    color: #e0e0e0;
    padding: 15px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Sombra mais pronunciada */
}

.header h1 {
    margin: 0;
    font-size: 26px; /* Aumentado um pouco */
    font-weight: 600;
}

.panel-container {
    max-width: 1300px; /* Um pouco mais largo */
    margin: 30px auto; /* Mais espaçamento */
    padding: 25px; /* Mais padding */
    background-color: #0f3460; /* Fundo do container: Azul escuro médio */
    border-radius: 10px; /* Bordas mais arredondadas */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5); /* Sombra mais escura */
    flex-grow: 1; /* Permite que o container se expanda */
}

/* ========================================================== */
/* ESTILOS DE BOTÕES E LINKS (TEMA ESCURO) */
/* ========================================================== */

.btn {
    text-decoration: none;
    padding: 10px 20px; /* Botões maiores */
    border-radius: 6px; /* Mais arredondado */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Transição suave */
    font-size: 15px; /* Fonte maior */
    text-align: center;
    display: inline-block;
    border: none; /* Remover bordas padrão */
    font-weight: 500;
}

.btn:hover {
    transform: translateY(-2px); /* Efeito de elevação ao passar o mouse */
}

.btn-add-new {
    background-color: #2e8b57; /* Verde marinho para adicionar */
    color: white;
}

.btn-add-new:hover {
    background-color: #3cb371; /* Verde mais claro no hover */
}

.btn-logout {
    background-color: #4a4e69; /* Cinza azulado para sair */
    color: #e0e0e0;
    margin-left: 15px;
}

.btn-logout:hover {
    background-color: #6d6c8b; /* Mais claro no hover */
}

/* Estilos de Ação na Tabela (Ações CRUD por linha) */
.btn-action {
    padding: 6px 12px; /* Botões de ação um pouco maiores */
    font-size: 13px;
    border-radius: 4px;
    text-decoration: none;
    margin: 0 3px;
    cursor: pointer;
    border: none;
    transition: background-color 0.3s ease;
}

.btn-action:hover {
    transform: none; /* Remover o translateY para botões pequenos */
    opacity: 0.9;
}

.btn-edit {
    background-color: #3498db; /* Azul vibrante */
    color: white;
}

.btn-edit:hover {
    background-color: #217dbb;
}

.btn-delete {
    background-color: #e74c3c; /* Vermelho forte */
    color: white;
}

.btn-delete:hover {
    background-color: #c0392b;
}

/* Estilo para o novo botão de exclusão em lote (ADICIONADO DO SEU CÓDIGO) */
.btn-batch-delete {
    background-color: #e74c3c; /* Vermelho igual ao delete individual */
    color: white;
    border: none;
    padding: 10px 20px; /* Harmoniza com outros botões */
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 15px;
    margin-left: 10px;
    cursor: pointer;
    border-radius: 6px;
    transition: background-color 0.3s ease, transform 0.2s ease;
    font-weight: 500;
}

.btn-batch-delete:hover {
    background-color: #c0392b;
    transform: translateY(-2px);
}

/* ========================================================== */
/* ESTILOS DE TABELA (DATA-TABLE - TEMA ESCURO) */
/* ========================================================== */

.table-title {
    font-size: 22px;
    margin-top: 0;
    margin-bottom: 25px;
    color: #bbbbbb; /* Cinza claro para o título */
    border-bottom: 2px solid #0f3460; /* Linha sutil abaixo do título */
    padding-bottom: 10px;
}

.data-table {
    width: 100%;
    border-collapse: separate; /* Permite border-spacing */
    border-spacing: 0 8px; /* Espaço entre as linhas */
    margin-top: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    border-radius: 8px; /* Arredonda a tabela inteira */
    overflow: hidden; /* Garante que o arredondamento funcione */
}

.data-table th, .data-table td {
    padding: 14px 18px; /* Mais padding */
    text-align: left;
    vertical-align: middle;
    background-color: #16213e; /* Fundo das células: Azul escuro */
    color: #e0e0e0;
    border: none; /* Remover bordas internas */
}

.data-table thead th {
    background-color: #0d1e3d; /* Azul mais escuro para o cabeçalho */
    color: #cccccc; /* Texto um pouco mais claro */
    font-weight: 600;
    text-transform: uppercase;
    font-size: 13px;
    position: sticky; /* Cabeçalho fixo ao rolar */
    top: 0;
    z-index: 1;
}

.data-table tbody tr {
    background-color: #16213e; /* Cor padrão da linha */
    transition: background-color 0.2s ease;
    border-radius: 8px; /* Arredonda as linhas */
}

.data-table tbody tr:hover {
    background-color: #2a3d66; /* Azul um pouco mais claro no hover */
}

/* Arredondamento para as bordas da tabela e células */
.data-table tbody tr:first-child td:first-child { border-top-left-radius: 8px; }
.data-table tbody tr:first-child td:last-child { border-top-right-radius: 8px; }
.data-table tbody tr:last-child td:first-child { border-bottom-left-radius: 8px; }
.data-table tbody tr:last-child td:last-child { border-bottom-right-radius: 8px; }

.action-column {
    white-space: nowrap;
    width: 1%; /* Garante que ocupe apenas o espaço necessário */
    text-align: center !important;
}

.data-column-cell {
    max-width: 300px; /* Aumentei um pouco */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Badge de Produto */
.product-badge {
    display: inline-block;
    padding: 5px 10px;
    background-color: #27ae60; /* Verde mais suave */
    color: white;
    border-radius: 15px; /* Mais arredondado */
    font-size: 12px;
    font-weight: bold;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* ========================================================== */
/* ESTILOS DE ALERTA E MENSAGENS (TEMA ESCURO) */
/* ========================================================== */

.alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.alert.success { /* Para mensagens de sucesso */
    color: #d4edda; /* Verde claro */
    background-color: #28a745; /* Verde escuro */
    border-color: #218838;
}

.alert.error { /* Para mensagens de erro */
    color: #f8d7da; /* Vermelho claro */
    background-color: #dc3545; /* Vermelho escuro */
    border-color: #c82333;
}

.alert.no-records {
    background-color: #3a3f5a; /* Um cinza azulado para "sem registros" */
    color: #d0d0d0;
    border-color: #555c7a;
    text-align: center;
    font-weight: bold;
}
.alert.no-records a {
    color: #87ceeb; /* Azul claro para o link */
    text-decoration: underline;
}
.alert.no-records a:hover {
    color: #add8e6;
}

/* ========================================================== */
/* ESTILOS DE BUSCA (SEARCH - TEMA ESCURO) */
/* ========================================================== */

.search-container {
    margin-bottom: 20px;
    padding: 15px; /* Mais padding */
    border: 1px solid #0f3460; /* Borda da cor do fundo do container */
    border-radius: 8px; /* Mais arredondado */
    background-color: #16213e; /* Fundo do campo de busca: Azul escuro */
    display: flex;
    align-items: center;
    gap: 12px; /* Mais espaçamento */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.search-container input[type="text"] {
    padding: 10px 15px; /* Mais padding */
    border: 1px solid #0d1e3d; /* Borda mais escura */
    border-radius: 6px;
    flex-grow: 1;
    font-size: 15px;
    background-color: #0f3460; /* Fundo do input */
    color: #e0e0e0;
    outline: none; /* Remove outline padrão */
    transition: border-color 0.3s ease;
}

.search-container input[type="text"]::placeholder {
    color: #999; /* Cor do placeholder */
}

.search-container input[type="text"]:focus {
    border-color: #3498db; /* Borda azul no foco */
}

.search-container button {
    padding: 10px 20px;
    background-color: #3498db; /* Azul vibrante */
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.search-container button:hover {
    background-color: #217dbb;
    transform: translateY(-2px);
}

/* Estilo para o link "Limpar Busca" dentro do container */
.search-container a.btn {
    background-color: #4a4e69; /* Cinza azulado */
    color: #e0e0e0;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 500;
}
.search-container a.btn:hover {
    background-color: #6d6c8b;
    transform: translateY(-2px);
}

/* Checkbox estilo */
input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: #3498db; /* Destaca a cor do checkbox */
}