/* style.css */

/* Importação de Fontes do Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700&family=Roboto:wght@300;400;500;700&display=swap');

/* Variáveis de Cor (Paleta Dracula/Neon) e Configurações Globais */
:root {
    /* Cores de Fundo */
    --bg-gradient-start: #1a1a2e; /* Início do gradiente de fundo do corpo */
    --bg-gradient-end: #16213e;   /* Fim do gradiente de fundo do corpo */
    --bg-container: #282a36;      /* Cor de fundo principal para containers (Dracula) */
    --bg-input: #21222c;          /* Cor de fundo para campos de input, um pouco mais escura */
    --bg-input-rgb: 33, 34, 44;   /* Versão RGB de --bg-input para uso com rgba */

    /* Cores de Texto */
    --text-default: #e0e0ff;        /* Cor de texto padrão (claro) */
    --text-secondary: #bd93f9a0;    /* Cor de texto secundário (roxo claro com transparência) */
    --text-placeholder: #6272a4;   /* Cor para placeholders em inputs */
    
    /* Cores de Destaque (Accent Colors) */
    --accent-green: #50fa7b;       /* Verde neon para destaques e sucesso */
    --accent-pink: #ff79c6;        /* Rosa neon para alertas e destaques */
    --accent-purple: #bd93f9;      /* Roxo para elementos de interface e legendas */
    --accent-yellow: #f1fa8c;      /* Amarelo para números de linha e highlights */
    --accent-cyan: #8be9fd;        /* Ciano para labels e caminhos de arquivo */
    --accent-orange: #ffb86c;      /* Laranja para outros destaques (não usado ativamente no exemplo) */

    /* Cores de Borda e Foco */
    --border-color: #44475a;         /* Cinza escuro Dracula para bordas gerais */
    --border-focus: var(--accent-purple); /* Cor da borda ao focar em um input (roxo) */
    --border-focus-shadow: #bd93f933;  /* Cor da sombra para inputs focados (roxo com transparência) */

    /* Cores de Highlight */
    --highlight-bg: var(--accent-yellow); /* Fundo para texto destacado nos resultados */
    --highlight-text: #282a36;         /* Texto escuro para contraste no highlight amarelo */

    /* Cores de Botões Primários */
    --button-primary-bg: var(--accent-purple); /* Fundo do botão primário */
    --button-primary-text: #f8f8f2;         /* Texto do botão primário */
    --button-primary-hover-bg: #ab7af4;     /* Fundo do botão primário ao passar o mouse */

    /* Cores de Botões Secundários (Nota: variáveis não usadas no CSS fornecido, mas definidas para futura expansão) */
    --button-secondary-bg: var(--medium-gray); /* Fundo do botão secundário */
    --button-secondary-text: #f8f8f2;        /* Texto do botão secundário */
    --button-secondary-hover-bg: #7a8ccc;    /* Fundo do botão secundário ao passar o mouse */
    
    /* Cores de Feedback */
    --error-color: var(--accent-pink);    /* Cor para mensagens de erro */
    --success-color: var(--accent-green); /* Cor para mensagens de sucesso */

    /* Cores para o Spinner de Carregamento */
    --spinner-color1: var(--accent-pink);
    --spinner-color2: var(--accent-purple);
    --spinner-color3: var(--accent-green);

    /* Tipografia */
    --font-primary: 'Roboto', sans-serif;  /* Fonte principal para texto geral */
    --font-display: 'Orbitron', sans-serif;/* Fonte de display para títulos e legendas */

    /* Sombras e Bordas Arredondadas */
    --shadow-light: 0 2px 8px rgba(0,0,0,0.2);   /* Sombra leve */
    --shadow-medium: 0 4px 12px rgba(0,0,0,0.3); /* Sombra média */
    --border-radius-small: 4px;                /* Raio de borda pequeno */
    --border-radius-medium: 8px;               /* Raio de borda médio */

    /* Cores Cinzas Adicionais (para consistência) */
    --medium-gray: #6272a4; /* Cinza azulado médio Dracula (usado em fundos secundários, etc.) */
    --dark-gray: #44475a;   /* Cinza escuro Dracula (para bordas, fundos de elementos desabilitados) */
}

/* Reset Básico e Configuração do Box Model */
* {
    box-sizing: border-box; /* Garante que padding e border não aumentem a largura/altura final do elemento */
    margin: 0;              /* Remove margens padrão */
    padding: 0;             /* Remove paddings padrão */
}

/* Estilos Base para o HTML */
html {
    font-size: 16px; /* Define a base para unidades 'rem', facilitando a responsividade */
    scroll-behavior: smooth; /* Habilita rolagem suave para âncoras */
}

/* Estilos Base para o Corpo da Página */
body {
    font-family: var(--font-primary); /* Define a fonte principal */
    color: var(--text-default);       /* Define a cor do texto padrão */
    background: linear-gradient(135deg, var(--bg-gradient-start), var(--bg-gradient-end)); /* Fundo gradiente */
    min-height: 100vh;                /* Garante que o corpo ocupe pelo menos toda a altura da viewport */
    display: flex;                    /* Habilita flexbox para o layout do corpo */
    flex-direction: column;           /* Organiza os filhos diretos do body em coluna */
    line-height: 1.6;                 /* Define a altura da linha padrão para melhor legibilidade */
    padding: 1rem;                    /* Espaçamento interno para não colar nas bordas em telas pequenas */
}

/* Layout Principal: Container do Conteúdo Central */
.main-content {
    flex: 1 0 auto; /* Faz o main-content crescer para ocupar espaço disponível, mas não encolher menos que seu conteúdo */
    display: flex;
    justify-content: center;    /* Centraliza o container principal horizontalmente */
    align-items: flex-start;    /* Alinha o container no topo para permitir scroll interno se necessário */
    width: 100%;
    padding: 2rem 0;            /* Espaçamento vertical */
}

/* Container Principal da Aplicação */
.container {
    background-color: var(--bg-container); /* Cor de fundo do container */
    padding: 25px 30px;                    /* Espaçamento interno */
    border-radius: var(--border-radius-medium); /* Bordas arredondadas */
    box-shadow: var(--shadow-medium);         /* Sombra para dar profundidade */
    width: 100%;
    max-width: 1000px;                      /* Largura máxima do container */
    border: 1px solid var(--border-color);  /* Borda sutil */
}

/* Cabeçalho da Página */
header {
    text-align: center;     /* Centraliza o texto do cabeçalho */
    margin-bottom: 2.5rem;  /* Espaçamento inferior */
}

header h1 {
    font-family: var(--font-display); /* Fonte especial para o título principal */
    font-size: 2.8rem;
    margin-bottom: 0.5rem;
    color: var(--text-default);
}

header h1 .geek { /* Estilo para a parte "Geek" do título */
    color: var(--accent-green);
}

header h1 .code { /* Estilo para a parte "Code" do título */
    color: var(--accent-pink);
}

header p { /* Estilo para o subtítulo/descrição */
    font-size: 1.1rem;
    color: var(--text-secondary);
}

/* Estilização de Fieldsets e Legendas */
fieldset {
    border: 1px solid var(--border-color); /* Borda do fieldset */
    border-radius: var(--border-radius-medium); /* Bordas arredondadas */
    padding: 1.5rem 2rem;                   /* Espaçamento interno */
    margin-bottom: 2rem;                    /* Espaçamento inferior */
    background-color: rgba(0,0,0,0.1);      /* Leve escurecimento interno para destaque */
}

fieldset legend {
    font-size: 1.3rem;
    font-weight: 500;
    padding: 0 0.8rem;                  /* Espaçamento horizontal na legenda */
    color: var(--accent-purple);        /* Cor de destaque para a legenda */
    font-family: var(--font-display);   /* Fonte de display para a legenda */
}

/* Controles de Formulário (Agrupamento Geral) */
.controls {
    display: flex;
    flex-direction: column; /* Organiza os grupos de controle verticalmente */
    gap: 1.5rem;            /* Espaçamento entre os grupos de controle */
}

/* Grupo de Controle Individual (Label + Input) */
.control-group {
    display: flex;
    flex-direction: column; /* Organiza label e input verticalmente */
    gap: 0.5rem;            /* Espaçamento entre label e input */
}

/* Labels e Textos Relacionados a Opções */
label, .options-label, #fileLoadProgressContainer label {
    font-weight: 500;
    color: var(--accent-cyan); /* Cor de destaque para labels */
    font-size: 0.95rem;
}

/* Estilização de Inputs de Texto, Arquivo e Textarea */
input[type="text"],
input[type="file"],
textarea {
    background-color: var(--bg-input);    /* Fundo do input */
    color: var(--text-default);           /* Cor do texto no input */
    border: 1px solid var(--border-color); /* Borda do input */
    border-radius: var(--border-radius-small); /* Bordas arredondadas */
    padding: 0.75rem 1rem;                /* Espaçamento interno */
    font-family: var(--font-primary);
    font-size: 1rem;
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; /* Transição suave para foco */
    width: 100%; /* Garante que ocupem a largura disponível */
}

/* Estilo para garantir dimensões consistentes para alguns campos específicos */
#extensionFilter,
#ignoreListInput {
    height: auto; /* Altura automática para textarea, mas consistente para input */
}
#extensionFilter {
    height: 3rem; /* Altura específica para o input de extensões */
}
textarea#ignoreListInput {
    min-height: 60px; /* Altura mínima para o textarea de ignorar */
    resize: vertical; /* Permite redimensionar o textarea verticalmente */
}


/* Estilização de Placeholders */
input[type="text"]::placeholder,
textarea::placeholder {
    color: var(--text-placeholder); /* Cor do texto do placeholder */
    opacity: 0.8;
}

/* Estilização de Inputs em Foco */
input[type="text"]:focus,
textarea:focus {
    outline: none; /* Remove o outline padrão do navegador */
    border-color: var(--border-focus); /* Muda a cor da borda ao focar */
    box-shadow: 0 0 0 2px var(--border-focus-shadow); /* Adiciona uma sombra de foco */
}

/* Textos de Ajuda Pequenos (tag <small>) */
small {
    font-size: 0.85rem;
    color: var(--text-secondary);
    display: block; /* Para ocupar a linha inteira e alinhar corretamente */
    margin-top: 0.25rem;
}

/* Botão Customizado para Upload de Arquivo/Pasta */
.custom-file-upload {
    display: inline-flex;   /* Alinha ícone e texto na mesma linha */
    align-items: center;    /* Centraliza verticalmente ícone e texto */
    gap: 0.5rem;            /* Espaço entre ícone e texto */
    padding: 0.75rem 1.2rem;
    background-color: var(--medium-gray); /* Usa a variável --medium-gray definida no :root */
    color: var(--text-default);
    border-radius: var(--border-radius-small);
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
    border: none;
    font-weight: 500;
}

.custom-file-upload:hover {
    background-color: var(--accent-purple); /* Destaque roxo ao passar o mouse */
    transform: translateY(-2px);            /* Pequena elevação */
}

.custom-file-upload .icon { /* Ícone dentro do botão de upload */
    width: 18px;
    height: 18px;
}

/* Classe para Esconder Elementos Visualmente, Mantendo Acessibilidade */
.visually-hidden { 
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Display do Nome da Pasta Selecionada */
#selectedFolderName {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-top: 0.5rem;
    padding: 0.5rem;
    background-color: var(--bg-input);
    border-radius: var(--border-radius-small);
    border: 1px dashed var(--border-color); /* Borda tracejada por padrão */
    word-break: break-all;
}
#selectedFolderName.has-content { /* Quando uma pasta é selecionada */
    color: var(--accent-green);
    border-style: solid;
}
#selectedFolderName.has-error { /* Em caso de erro ao carregar */
    color: var(--error-color);
    border-color: var(--error-color);
    border-style: solid;
}

/* Estilização de Checkboxes Customizados */
.options .option-item { /* Container de um item de opção (checkbox + label) */
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.3rem 0;
}

.options .option-item input[type="checkbox"] {
    appearance: none; /* Remove a aparência padrão do checkbox */
    -webkit-appearance: none; /* Para Safari */
    width: 1.3em;
    height: 1.3em;
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-small);
    cursor: pointer;
    position: relative;
    top: 2px; /* Ajuste fino de alinhamento vertical */
    transition: background-color 0.2s ease, border-color 0.2s ease;
    flex-shrink: 0; /* Evita que o checkbox encolha */
}

.options .option-item input[type="checkbox"]:checked {
    background-color: var(--accent-purple); /* Cor de fundo quando marcado */
    border-color: var(--accent-purple);     /* Cor da borda quando marcado */
}

.options .option-item input[type="checkbox"]:checked::before { /* Adiciona o "check" */
    content: '✔';
    font-size: 0.9em;
    color: var(--bg-container); /* Cor do "check" (contraste com o fundo roxo) */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: bold;
}

.options .option-item label { /* Label associado ao checkbox */
    color: var(--text-default);
    cursor: pointer;
    user-select: none;      /* Impede seleção de texto no label */
    font-weight: normal;    /* Peso normal para labels de checkbox */
}

/* Botões de Ação Principais (Procurar, Substituir Tudo) */
#searchButton,
#replaceAllButton {
    padding: 0.8rem 1.5rem;
    font-size: 1rem;
    font-weight: 500;
    border: none;
    border-radius: var(--border-radius-small);
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
    display: inline-flex; /* Para alinhar ícone e texto */
    align-items: center;
    gap: 0.6rem;
    margin-right: 0.5rem; /* Espaço entre botões, se estiverem na mesma linha */
}

#searchButton { /* Botão "Procurar" */
    background-color: var(--button-primary-bg);
    color: var(--button-primary-text);
}
#searchButton:hover:not(:disabled) {
    background-color: var(--button-primary-hover-bg);
    transform: translateY(-2px);
}

#replaceAllButton { /* Botão "Substituir Tudo" */
    background-color: var(--accent-green); /* Fundo verde */
    color: var(--bg-container);             /* Texto escuro para contraste com o verde */
}
#replaceAllButton:hover:not(:disabled) {
    background-color: #3ddc62; /* Verde um pouco mais claro no hover */
    transform: translateY(-2px);
}

/* Estilo para Botões Desabilitados */
#searchButton:disabled,
#replaceAllButton:disabled {
    background-color: var(--dark-gray); /* Usa a variável --dark-gray definida no :root */
    color: #888;
    cursor: not-allowed;
    transform: none; /* Remove qualquer transformação de hover */
}

#searchButton .icon,
#replaceAllButton .icon { /* Ícones dentro dos botões de ação */
    width: 18px;
    height: 18px;
}

/* Barra de Progresso de Carregamento de Arquivos */
#fileLoadProgressContainer {
    margin-top: 1rem;
}
.progress-bar-wrapper { /* Container externo da barra de progresso */
    background-color: var(--bg-input);
    border-radius: var(--border-radius-small);
    padding: 3px; /* Pequeno padding para o efeito de borda interna */
    border: 1px solid var(--border-color);
}
#fileLoadProgressBar { /* Barra de progresso interna */
    background-color: var(--accent-green);
    color: var(--bg-container); /* Texto escuro para contraste com o verde */
    text-align: center;
    font-weight: bold;
    font-size: 0.85rem;
    line-height: 1.5rem; /* Altura da barra */
    border-radius: calc(var(--border-radius-small) - 2px); /* Raio interno */
    transition: width 0.3s ease-out; /* Transição suave da largura */
    height: 1.5rem; /* Altura da barra */
    width: 0%; /* Inicia com 0% de largura */
}

/* Área de Status e Spinner de Carregamento */
#statusArea {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1rem;
    border-radius: var(--border-radius-small);
    margin-top: 1.5rem;
    background-color: rgba(0,0,0,0.15); /* Fundo sutil para a área de status */
}
#statusMessage {
    font-size: 1rem;
    font-weight: 500;
    /* A cor é definida dinamicamente via JavaScript usando variáveis CSS (ex: var(--error-color)) */
}

/* Animação do Spinner */
.spinner {
    width: 50px;
    height: 20px;
    text-align: center;
    font-size: 10px; /* Não usado diretamente, mas define um contexto */
    flex-shrink: 0; /* Evita que o spinner seja esmagado */
}
.spinner > div { /* Barras individuais do spinner */
    background-color: var(--accent-purple); /* Cor padrão, sobrescrita pelas classes bounce */
    height: 100%;
    width: 8px; /* Largura de cada barra */
    display: inline-block;
    margin: 0 2px; /* Espaçamento entre as barras */
    border-radius: 2px;
    animation: sk-stretchdelay 1.2s infinite ease-in-out; /* Aplica a animação */
}
.spinner .bounce1 {
    background-color: var(--spinner-color1); /* Rosa */
    animation-delay: -0.32s; /* Delay para criar o efeito escalonado */
}
.spinner .bounce2 {
    background-color: var(--spinner-color2); /* Roxo */
    animation-delay: -0.16s;
}
.spinner .bounce3 {
    background-color: var(--spinner-color3); /* Verde */
    /* Sem delay, é a última a iniciar na sequência visual */
}

@keyframes sk-stretchdelay { /* Animação de "esticar" para as barras do spinner */
    0%, 40%, 100% { transform: scaleY(0.4); } /* Encolhida */
    20% { transform: scaleY(1.0); }          /* Esticada */
}

/* Seção de Resultados da Busca */
.results-output {
    margin-top: 2rem; /* Espaçamento acima da seção de resultados */
}

#resultsArea {
    margin-top: 1rem; /* Espaçamento interno antes dos grupos de resultado */
}

/* Grupo de Resultados por Arquivo */
.result-group {
    background-color: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-medium);
    margin-bottom: 1.5rem; /* Espaço entre grupos de arquivos */
    overflow: hidden; /* Garante que o border-radius seja aplicado aos cantos dos filhos */
}

.result-group-header { /* Cabeçalho de cada grupo de resultado (nome do arquivo, contagem) */
    background-color: var(--medium-gray); /* Usa a variável --medium-gray definida no :root */
    padding: 0.8rem 1.2rem;
    display: flex;
    justify-content: space-between; /* Alinha nome do arquivo à esquerda, contagem à direita */
    align-items: center;
    /* border-bottom: 1px solid var(--border-color); Linha separadora, opcional se houver .result-group-file-actions abaixo */
}

.file-path-display { /* Nome/Caminho do arquivo no cabeçalho do grupo */
    font-weight: 500;
    color: var(--accent-cyan);
    word-break: break-all; /* Quebra palavras longas (caminhos de arquivo) */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: calc(100% - 120px); /* Ajuste para caber o contador de matches */
}

.match-count { /* Contagem de ocorrências no arquivo */
    font-size: 0.9rem;
    background-color: var(--accent-pink); /* Destaque rosa */
    color: var(--bg-container);           /* Texto escuro para contraste */
    padding: 0.2rem 0.5rem;
    border-radius: var(--border-radius-small);
    font-weight: bold;
    flex-shrink: 0;
}

/* Ações no Nível do Arquivo (dentro do .result-group, como o botão de Download Modificado) */
.result-group-file-actions {
    padding: 0.8rem 1.2rem;
    background-color: rgba(var(--bg-input-rgb), 0.7); /* Um pouco diferente do fundo do item */
    border-top: 1px solid var(--border-color); 
    display: flex;
    gap: 0.8rem;
    align-items: center;
}

.result-group-file-actions:empty {
    display: none; /* Não ocupa espaço se não houver botões */
}

.result-group-file-actions .action-btn {
    padding: 0.6rem 1rem; /* Ligeiramente menor que os botões principais */
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: none;
    border-radius: var(--border-radius-small);
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.result-group-file-actions .action-btn.download-file-btn {
    background-color: var(--accent-green);
    color: var(--bg-container);
}
.result-group-file-actions .action-btn.download-file-btn:hover {
    background-color: #3ddc62;
    transform: translateY(-1px);
}

.result-group-file-actions .action-btn .icon {
    width: 16px;
    height: 16px;
    /* margin-right: 0.4rem; (já coberto pelo gap no pai) */
}


/* Lista de Ocorrências dentro de um Grupo */
.result-match-list {
    list-style: none; /* Remove marcadores de lista padrão */
    padding: 0;
    /* Se .result-group-file-actions estiver presente, a lista não precisa de borda superior */
    /* Caso contrário, pode precisar de uma borda superior se vier direto após o header */
}
.result-group-header + .result-match-list,
.result-group-file-actions + .result-match-list {
    border-top: 1px solid var(--border-color);
}


.result-list-item { /* Item individual da lista de ocorrências */
    border-bottom: 1px solid var(--border-color); /* Linha separadora entre ocorrências */
}
.result-list-item:last-child { /* Remove a borda do último item */
    border-bottom: none;
}

.result-content { /* Conteúdo de uma ocorrência (número da linha, texto da linha) */
    padding: 0.8rem 1.2rem;
    cursor: default; /* Alterado de pointer, pois as ações de ocorrência foram removidas/ocultas */
    display: flex;
    gap: 0.5rem;
    align-items: flex-start; /* Alinha número da linha e conteúdo no topo */
    transition: background-color 0.2s ease;
}
.result-content:hover, .result-list-item.active-item .result-content { /* Destaque ao passar o mouse ou quando ativo */
    background-color: #3a3c4e; /* Um pouco mais claro que o bg-input */
}

.line-number-display { /* Número da linha da ocorrência */
    color: var(--accent-yellow);
    font-weight: bold;
    min-width: 40px; /* Espaço reservado para números de linha */
    text-align: right;
    font-family: monospace; /* Fonte monoespaçada para alinhamento */
    flex-shrink: 0;
}

.match-line-display { /* Texto da linha onde a ocorrência foi encontrada */
    font-family: monospace;    /* Fonte monoespaçada para código/texto */
    white-space: pre-wrap;     /* Mantém espaços e quebra linhas */
    word-break: break-all;     /* Quebra palavras longas se necessário */
    flex-grow: 1;              /* Ocupa o espaço restante na linha */
    overflow-x: auto;          /* Permite scroll horizontal para linhas muito longas */
}

.match-line-display .highlight { /* Destaque do termo encontrado na linha */
    background-color: var(--highlight-bg);
    color: var(--highlight-text);
    padding: 0.1rem 0.2rem;
    border-radius: var(--border-radius-small);
    font-weight: bold;
}

/* Ações para um Resultado Individual (ex: Copiar Linha, etc.) - Escondido por padrão */
.result-actions {
    padding: 0.5rem 1.2rem 0.8rem;
    background-color: #3a3c4e; /* Mesmo fundo do hover do result-content */
    display: none; /* Escondido por padrão, controlado por JavaScript se houver ações */
    gap: 0.5rem;
    border-top: 1px dashed var(--border-color); /* Linha sutil para separar das informações da ocorrência */
}
/* Se você adicionar botões aqui, use a classe .action-btn definida em .result-group-file-actions */


/* Controles de Paginação para os Resultados */
#paginationControls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem; /* Espaço entre os botões e informações da página */
    margin-top: 1.5rem;
    padding: 1rem;
    background-color: var(--bg-input);
    border-radius: var(--border-radius-medium);
    border: 1px solid var(--border-color);
}

.pagination-button { /* Estilo para os botões de "Anterior" e "Próxima" */
    padding: 0.6rem 1.2rem;
    background-color: var(--button-primary-bg);
    color: var(--button-primary-text);
    border: none;
    border-radius: var(--border-radius-small);
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.pagination-button:hover:not(:disabled) {
    background-color: var(--button-primary-hover-bg);
    transform: translateY(-2px);
}

.pagination-button:disabled { /* Botões de paginação desabilitados */
    background-color: var(--dark-gray); /* Usa a variável --dark-gray definida no :root */
    color: #888;
    cursor: not-allowed;
    transform: none;
}

#pageInfo { /* Informação da página atual (Ex: Página 1 de 5) */
    font-weight: 500;
    color: var(--text-default);
}

/* Mensagem Exibida Quando Não Há Resultados */
.no-results-message {
    text-align: center;
    font-style: italic;
    color: var(--text-secondary);
    padding: 2rem;
    background-color: var(--bg-input);
    border: 1px dashed var(--border-color);
    border-radius: var(--border-radius-medium);
}

/* Rodapé da Página */
footer {
    flex-shrink: 0; /* Garante que o rodapé não encolha e fique no final */
    text-align: center;
    padding: 2rem 1rem 1.5rem; /* Espaçamento interno do rodapé */
    margin-top: auto; /* Empurra o rodapé para o final se o conteúdo principal for pequeno */
    font-size: 0.9rem;
    color: var(--text-secondary);
    border-top: 1px solid var(--border-color); /* Linha superior para separar do conteúdo */
    background-color: var(--bg-container);    /* Mesmo fundo do container principal */
    
    position: relative; 
    left: calc(-1 * var(--body-padding, 1rem)); /* Compensa o padding do body */
    width: calc(100% + 2 * var(--body-padding, 1rem)); /* Compensa o padding do body */
    box-sizing: content-box;  
}
/* Definir a variável --body-padding se não estiver já no :root, ou usar diretamente o valor */
body {
    --body-padding: 1rem; /* Usado pelo footer para compensar */
    padding: var(--body-padding);
}


.footer-links a { /* Links no rodapé */
    color: var(--accent-purple);
    text-decoration: none;
    margin: 0 0.5rem;
    transition: color 0.2s ease, text-shadow 0.2s ease;
}

.footer-links a:hover {
    color: var(--accent-pink); /* Muda a cor e adiciona sombra ao passar o mouse */
    text-shadow: 0 0 5px var(--accent-pink);
}

.footer-links span { /* Separador entre os links do rodapé */
    color: var(--border-color);
}


/* Media Queries para Responsividade */

/* Telas Médias (Tablets) */
@media (max-width: 768px) {
    html {
        font-size: 15px; /* Reduz o tamanho da fonte base */
    }
    .container {
        padding: 20px 25px; /* Reduz o padding do container principal */
    }
    header h1 {
        font-size: 2.4rem; /* Reduz o tamanho do título principal */
    }
    header p {
        font-size: 1rem; /* Reduz o tamanho do subtítulo */
    }
    fieldset {
        padding: 1.2rem 1.5rem; /* Reduz o padding dos fieldsets */
    }
    fieldset legend {
        font-size: 1.15rem; /* Reduz o tamanho da legenda dos fieldsets */
    }
    
    .control-group.options .filter-group { 
        /* Não precisa mais empilhar, pois os inputs já são width 100% */
    }

    /* Botões de ação (Procurar, Substituir) ocupam 100% da largura e empilham */
    #searchButton, #replaceAllButton {
        width: 100%;
        margin-bottom: 0.5rem; /* Espaço entre eles quando empilhados */
        margin-right: 0; /* Remove margem direita pois estão empilhados */
    }
     #searchButton + #replaceAllButton { /* Seletor para o segundo botão se vier após o primeiro */
        margin-left: 0; 
    }

    .result-content {
        /* A flex-direction column já não é mais necessária com o scroll horizontal no match-line-display */
    }
    .line-number-display {
       /* text-align: left;
        min-width: auto;  
        margin-bottom: 0.2rem; */
        /* Mantém o estilo original para consistência, o scroll horizontal no texto resolve o espaço */
    }

    .file-path-display {
        max-width: calc(100% - 100px); /* Ajuste menor para tablets */
    }
}

/* Telas Pequenas (Smartphones) */
@media (max-width: 480px) {
    html {
        font-size: 14px; /* Reduz ainda mais a fonte base */
    }
    body {
        --body-padding: 0.5rem; /* Atualiza a variável para o footer */
        padding: var(--body-padding); 
    }
    .main-content {
        padding: 1rem 0; /* Reduz o padding vertical do conteúdo principal */
    }
    .container {
        padding: 15px 20px; /* Padding menor no container principal */
        border-radius: var(--border-radius-small); /* Bordas menos arredondadas */
    }
    header h1 {
        font-size: 2rem; /* Título principal menor */
    }
    fieldset {
        padding: 1rem; /* Padding menor nos fieldsets */
    }
    fieldset legend {
        font-size: 1.1rem; /* Legendas menores */
    }
    
    .custom-file-upload {
        width: 100%;
        justify-content: center; /* Centraliza o conteúdo do botão */
    }

    #paginationControls {
        flex-direction: column;
        gap: 0.8rem;
    }

    footer {
        padding: 1.5rem var(--body-padding) 1rem;
        /* O cálculo de left e width no footer já usa a variável --body-padding */
    }
    .footer-links a { 
        margin: 0 0.3rem;
        display: block; 
        margin-bottom: 0.5rem;
    }
    .footer-links span { 
        display: none;
    }

    .file-path-display {
        max-width: calc(100% - 80px); /* Ajuste menor para mobile */
    }
}