/* ========================================== */
/* VARIÁVEIS DE CORES                */
/* ========================================== */

:root {
    /* Modo Claro (Padrão) */
    --bg-color: #f5f5f5;
    --text-color: #333;                /* Cor de texto principal (mais escuro que --rub) */
    --primary-color: #524fa1;          /* Cor primária (era --rub) */
    --heading-color: var(--primary-color); /* Cor dos títulos */
    --link-bg-color: var(--primary-color); /* Fundo de links/botões */
    --link-text-color: white;          /* Texto de links/botões */
    --link-hover-bg-color: rgba(82, 79, 161, .7); /* Hover links/botões (mais opaco) */
    --table-border-color: #aaa;        /* Borda da tabela */
    --table-th-border-color: #888;     /* Borda inferior do TH */
    --table-td-border-color: #ccc;     /* Borda inferior do TD */
    --table-even-row-bg: #f2f2f2;      /* Fundo de linha par */
    --divider-color: #ccc;             /* Cor da linha divisória (direita) */
    --log-bg: #222;                    /* Fundo do Log (padrão escuro) */
    --log-text: #f0f0f0;               /* Texto do Log (padrão claro) */
    --log-border-color: #555;          /* Borda do Log */

    /* Variáveis auxiliares existentes */
    --gray: #808285;
    --row-padding: 8px;
    --log-error: #ff6b6b;
    --log-warning: #fdd835;
    --log-command: #64b5f6;
}

/* Modo Escuro - Overrides */
body.dark-mode {
    --bg-color: #1f1f1f;               /* Fundo principal escuro */
    --text-color: #e0e0e0;             /* Cor de texto principal clara */
    --primary-color: #7a75d1;          /* Cor primária (roxo mais claro para contraste) */
    --heading-color: var(--primary-color); /* Cor dos títulos */
    --link-bg-color: var(--primary-color); /* Fundo de links/botões */
    --link-text-color: #1a1a1a;          /* Texto escuro para botões claros */
    --link-hover-bg-color: #5f5bb3;    /* Hover links/botões (mais escuro que o primário) */
    --table-border-color: #555;
    --table-th-border-color: #666;
    --table-td-border-color: #444;     /* Borda TD mais escura */
    --table-even-row-bg: #2c2c2c;      /* Fundo de linha par escuro */
    --divider-color: #444;             /* Cor da linha divisória */
    --log-bg: #1a1a1a;                 /* Fundo Log um pouco mais escuro */
    --log-text: #f0f0f0;
    --log-border-color: #444;          /* Borda Log */
}

/* ========================================== */
/* ESTILOS GLOBAIS E BASE            */
/* ========================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
   /* Informa ao navegador sobre os modos suportados (afeta scrollbar, etc.) */
   color-scheme: light dark;
}

body {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: medium;
    padding: 20px;
    background: var(--bg-color);       /* Usa a variável */
    color: var(--text-color);          /* Usa a variável */
    transition: background-color 0.3s ease, color 0.3s ease; /* Transição suave */
}

h1 {
    color: var(--heading-color);
    margin-top: 15px;
    margin-bottom: 10px;
    font-weight: bold;
}

/* ========================================== */
/* LAYOUT                      */
/* ========================================== */

.container {
    display: flex;
    flex-direction: row;
    height: calc(100vh - 40px); /* Altura da viewport menos o padding do body */
    gap: 20px; /* Espaçamento entre colunas */
}

.left-column {
    flex: 3; /* Mais espaço para controles e tabela */
    /* padding-right: 20px; Removido em favor do gap no container */
    overflow-y: auto; /* Scroll se necessário */
    display: flex;
    flex-direction: column;
}

.right-column {
    flex: 2; /* Espaço para o log */
    /* width: 400px; /* Removido para usar flex */
    padding-left: 20px; /* Espaçamento antes da borda */
    border-left: 1px solid var(--divider-color); /* Usa a variável */
    display: flex;
    flex-direction: column;
    height: 100%; /* Ocupa altura do container */
}

/* ========================================== */
/* LISTA DE CONTROLES (BOTÕES)      */
/* ========================================== */

#list {
    list-style-type: none;
    padding: 0;
    margin: 0 0 20px 0; /* Margem inferior */
    display: flex; /* Alinha botões em linha */
    flex-wrap: wrap; /* Quebra linha se não couber */
    gap: 10px; /* Espaço entre botões */
}

#list li {
    /* display: inline-block; Removido em favor do flex no pai */
    /* margin: 5px; Removido em favor do gap no pai */
    padding: 0;
}

#list li a {
    text-align: center;
    padding: 10px 18px; /* Ajuste padding */
    margin: 0;
    color: var(--link-text-color);
    background-color: var(--link-bg-color);
    display: inline-block;
    text-decoration: none;
    border-radius: 5px; /* Borda mais arredondada */
    font-weight: 500;
    border: none; /* Garante que não haja borda padrão */
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

#list li a:hover, li:active a {
    background: var(--link-hover-bg-color);
    transform: translateY(-2px);
    box-shadow: 0 5px 10px rgba(0, 0, 0, .15);
}

/* ========================================== */
/* TABELA                      */
/* ========================================== */

table {
    margin-left: 0;
    border-collapse: collapse;
    width: 100%;
    border: 2px solid var(--table-border-color); /* Borda mais sutil */
    margin-bottom: 20px; /* Espaço abaixo da tabela */
}

th, td {
    text-align: left;
    padding: var(--row-padding) 12px; /* Padding horizontal aumentado */
    color: var(--text-color);
    border-bottom: 1px solid var(--table-td-border-color);
    vertical-align: middle; /* Alinha conteúdo verticalmente */
}

th {
    font-weight: bold;
    border-bottom: 2px solid var(--table-th-border-color);
    background-color: var(--table-even-row-bg); /* Cabeçalho com fundo sutil */
}

/* Aplica a cor de fundo alternada nas linhas da tbody */
#tbody tr:nth-child(even) {
    background-color: var(--table-even-row-bg);
}

#tbody tr:hover {
    background-color: rgba(82, 79, 161, .1); /* Leve destaque roxo no hover */
}


/* Remove a última borda inferior */
#tbody tr:last-child td {
    border-bottom: none;
}

td.s, th.s { /* Se ainda usar essa classe para alinhar à direita */
    text-align: right;
}

/* Botão dentro da tabela */
td button {
    padding: 6px 12px; /* Padding do botão */
    background-color: var(--link-bg-color);
    color: var(--link-text-color);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em; /* Tamanho fonte menor */
    transition: background-color 0.2s ease;
}

td button:hover {
     background-color: var(--link-hover-bg-color);
}


/* ========================================== */
/* LOG DE EXECUÇÃO                */
/* ========================================== */

#log-container {
    border: 1px solid var(--log-border-color);
    padding: 15px; /* Mais padding */
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace; /* Fontes monoespaçadas comuns */
    white-space: pre-wrap; /* Mantém quebras de linha e espaços */
    word-wrap: break-word; /* Quebra palavras longas */
    flex-grow: 1; /* Faz o log ocupar o espaço vertical restante */
    overflow-y: scroll; /* Scroll apenas vertical */
    background-color: var(--log-bg);
    color: var(--log-text);
    width: 100%; /* Garante preenchimento horizontal */
    box-sizing: border-box;
    /* Estilização da barra de scroll (para navegadores compatíveis) */
    scrollbar-width: thin;
    scrollbar-color: var(--divider-color) var(--log-bg);
}

/* Estilização da barra de scroll para Webkit (Chrome, Safari, Edge) */
#log-container::-webkit-scrollbar {
    width: 8px;
}
#log-container::-webkit-scrollbar-track {
    background: var(--log-bg);
}
#log-container::-webkit-scrollbar-thumb {
    background-color: var(--divider-color);
    border-radius: 4px;
    border: 2px solid var(--log-bg); /* Espaço entre thumb e track */
}


/* Estilos para as cores do log */
.log-error {
    color: var(--log-error);
    font-weight: bold;
}

.log-warning {
    color: var(--log-warning);
    /* font-weight: bold; (Opcional) */
}

.log-command {
    color: var(--log-command);
    font-style: italic;
}

.log-output { /* Classe para saída padrão, se quiser diferenciar */
    color: var(--log-text);
}

/* ========================================== */
/* BOTÃO DE TOGGLE MODO ESCURO          */
/* ========================================== */
#darkModeToggle {
    padding: 8px 12px;
    cursor: pointer;
    border: 1px solid var(--divider-color);
    background-color: var(--bg-color);
    color: var(--text-color);
    border-radius: 5px;
    font-weight: 500;
    position: absolute; /* Ou fixed, dependendo de onde quer */
    top: 15px;
    right: 20px;
    z-index: 1000; /* Garante que fique por cima */
    transition: background-color 0.3s ease, color 0.3s ease;
}

#darkModeToggle:hover {
    background-color: var(--table-even-row-bg); /* Leve destaque no hover */
}

/* ========================================== */
/* RESPONSIVIDADE (Exemplo)     */
/* ========================================== */
@media (max-width: 768px) {
    .container {
        flex-direction: column;
        height: auto; /* Altura automática em telas menores */
    }

    .left-column, .right-column {
        flex: none; /* Remove flex basis */
        width: 100%; /* Ocupa largura total */
        padding-left: 0; /* Remove padding esquerdo da coluna direita */
        border-left: none; /* Remove borda esquerda da coluna direita */
        border-top: 1px solid var(--divider-color); /* Adiciona borda superior */
        padding-top: 15px; /* Espaçamento superior */
    }

     .right-column {
         height: 400px; /* Altura fixa para o log em telas pequenas */
         min-height: 300px;
     }

    #list {
        justify-content: center; /* Centraliza botões */
    }

     #darkModeToggle {
         position: static; /* Volta ao fluxo normal */
         margin-bottom: 15px;
         display: block;
         width: fit-content; /* Largura baseada no conteúdo */
         margin-left: auto;
         margin-right: auto;
     }
}