body {
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    font-weight: bold;
    padding: 10px; /* Adiciona um pequeno padding ao body para não colar nas bordas */
}

table {
    width: 100%;
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid black;
}

th, td {
    padding: 10px;
    text-align: left;
}

thead {
    background-color: #999;
    color: #fff;
    font-weight: bold;
    /* cursor: pointer; */
}

td.center {
    text-align: center;
}

th.center {
    text-align: center;
}

.search-container {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    vertical-align: middle;
    flex-wrap: wrap; /* Permite que os itens quebrem linha em telas pequenas */
}

#searchInput {
    margin-right: 10px;
    padding: 8px;
    font-size: 22px;
    flex-grow: 1;
    vertical-align: middle;
    min-width: 150px; /* Garante uma largura mínima para o input */
}

#refreshButton {
    padding: 8px 15px;
    font-size: 16px;
    cursor: pointer;
}

/* Estilos para as cores */
.red {
    color: red;
}

.blue {
    color: blue;
}

/* --- Estilos para Responsividade --- */

/* Container para tornar a tabela scrollável em telas pequenas */
.table-container {
    overflow-x: auto; /* Adiciona scroll horizontal se o conteúdo for muito largo */
    -webkit-overflow-scrolling: touch; /* Melhora o scroll em dispositivos iOS */
}

/* Media Query para telas menores (ex: largura máxima de 600px) */
@media (max-width: 600px) {
    body {
        font-size: 12px; /* Reduz o tamanho da fonte no body */
    }

    .search-container {
        flex-direction: column; /* Empilha o input e o botão verticalmente */
        align-items: stretch; /* Estica os itens para preencher a largura do container */
    }

    #searchInput {
        margin-right: 0; /* Remove a margem direita quando empilhado */
        margin-bottom: 10px; /* Adiciona margem abaixo do input */
        width: 100%; /* Faz o input ocupar 100% da largura do container */
        box-sizing: border-box;
    }

    #refreshButton {
        width: 100%; /* Faz o botão ocupar 100% da largura do container */
        box-sizing: border-box;
    }

    th, td {
        padding: 8px; /* Reduz o padding das células da tabela */
    }

    /* Opcional: Ajustar larguras mínimas das colunas se necessário */
    /* th:nth-child(2), td:nth-child(2) { min-width: 150px; } /* URL Column */
    /* th:nth-child(3), td:nth-child(3) { min-width: 120px; } /* Data Column */
    /* th:nth-child(4), td:nth-child(4) { min-width: 80px; } /* Dias Restantes Column */

}

/* Media Query para telas um pouco maiores que celulares, mas menores que desktops (ex: entre 601px e 992px) */
@media (min-width: 601px) and (max-width: 992px) {
    body {
         font-size: 13px; /* Ajusta o tamanho da fonte */
    }

    #searchInput {
         width: 250px; /* Ajusta a largura do input em tablets */
    }
    /* A tabela ainda pode precisar de scroll horizontal dependendo do conteúdo */
}