/* ---------------------------------------------------------------- */
/* VARIÁVEIS DE COR (Para facilitar a mudança de tema) */
/* ---------------------------------------------------------------- */
:root {
    --bg-dark: #121212;
    --bg-medium: #1e1e1e;
    --bg-light: #2c2c2c;
    --border-color: #444;
    --text-light: #fff;
    --text-muted: #bbb;
    --primary-color: #0066cc; /* Azul para botões principais */
    --danger-color: #f44336; /* Vermelho para deletar */
    --success-color: #4CAF50; /* Verde para sucesso/concluído */
    --hover-color: #0077e6;
    --card-bg-color: #2c2c2c;
    --table-header-bg: #3c3c3c;
    --table-row-hover: #262626;
    --input-bg: #333;
}

/* Reset básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    transition: background-color 0.3s, box-shadow 0.3s, color 0.3s; /* Transição suave para interações */
}

/* CORREÇÃO DO FOOTER: Usando flex-direction: column e min-height */
body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-dark);
    color: var(--text-light);
    min-height: 100vh; /* Garante que o corpo ocupe toda a altura */
    margin: 0;
    display: flex; 
    flex-direction: column; /* Organiza itens em coluna */
}

/* Layout Principal */
.main-content {
    flex-grow: 1; /* Permite que o conteúdo principal ocupe todo o espaço disponível */
    padding: 20px;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

/* Header */
header {
    text-align: center;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 20px;
}

header h1 {
    color: var(--text-light);
    font-size: 2.2em;
    font-weight: 700;
}

/* Seção de Nova Pendência */
.new-task-section {
    display: grid;
    grid-template-columns: 2fr 1fr 1.5fr 1fr 1fr; /* Colunas ajustadas para melhor visualização */
    gap: 15px;
    padding: 20px;
    margin-bottom: 30px;
    background-color: var(--bg-medium);
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    align-items: center;
}

.new-task-section input[type="text"],
.new-task-section select,
.new-task-section input[type="file"] {
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    background-color: var(--input-bg);
    color: var(--text-light);
    width: 100%;
    /* Garante que o input de arquivo não fique muito alto */
    height: 40px; 
    line-height: 20px;
}

.new-task-section button {
    background-color: var(--primary-color);
    color: var(--text-light);
    border: none;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.2s;
}

.new-task-section button:hover {
    background-color: var(--hover-color);
}

/* Cards de Contagem */
.cards {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 30px;
}

.card {
    background-color: var(--card-bg-color);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    flex: 1;
    text-align: center;
    border-left: 5px solid var(--primary-color);
}

#pending-count {
    border-left-color: var(--danger-color);
}
#completed-count {
    border-left-color: var(--success-color);
}

.card h2 {
    font-size: 2.5em;
    margin-bottom: 5px;
    font-weight: 600;
}

.card p {
    color: var(--text-muted);
    font-size: 0.9em;
}

/* Tabela de Pendências */
table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--bg-medium);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    margin-bottom: 20px;
}

th, td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    /* Garante que o texto longo quebre */
    word-wrap: break-word; 
    max-width: 300px;
}

th {
    background-color: var(--table-header-bg);
    color: var(--text-light);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9em;
}

tbody tr:hover {
    background-color: var(--table-row-hover);
}

/* Coluna de Ação e Botões */
td:last-child {
    text-align: center;
    white-space: nowrap; /* Impede que os botões quebrem linha */
    max-width: 150px;
}

td button {
    padding: 8px 12px;
    margin: 0 3px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.2s;
    font-size: 0.9em;
}

.complete-btn {
    background-color: var(--success-color);
    color: white;
}
.complete-btn:hover {
    background-color: #5cb85c;
}

.delete-btn {
    background-color: var(--danger-color);
    color: white;
}
.delete-btn:hover {
    background-color: #d9534f;
}

.attach-btn {
    background-color: var(--primary-color);
    color: white;
}
.attach-btn:hover {
    background-color: var(--hover-color);
}

/* Coluna de Informações Detalhadas */
.info-col {
    font-size: 0.85em;
    color: var(--text-muted);
}
.info-col div:first-child {
    margin-bottom: 5px;
    color: var(--text-light); /* Data/Hora em destaque */
}

/* Footer (Fixo no final da página) */
footer {
    text-align: center;
    padding: 20px;
    border-top: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 0.9em;
    margin-top: 20px;
    /* GARANTE QUE NÃO ENCOLHA */
    flex-shrink: 0; 
}
.footer-links a {
    color: var(--primary-color);
    text-decoration: none;
    margin: 0 10px;
}
.footer-links a:hover {
    text-decoration: underline;
}

/* ---------------------------------------------------- */
/* Estilos Comuns de Modal (para attachModal, viewModal e confirmModal) */
/* ---------------------------------------------------- */

.modal {
    /* Garante que o modal cubra tudo e fique no centro */
    display: none; 
    position: fixed;
    z-index: 1000; /* Acima de todo o resto */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.8); /* Fundo escuro */
    justify-content: center;
    align-items: center;
}

.modal-content {
    background-color: var(--card-bg-color);
    margin: auto;
    padding: 20px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 600px;
    position: relative;
    color: var(--text-light);
}

/* Botão de Fechar */
.close-button {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    position: absolute;
    right: 15px;
    top: 5px;
    cursor: pointer;
    transition: color 0.3s;
}

.close-button:hover,
.close-button:focus {
    color: var(--danger-color);
    text-decoration: none;
    cursor: pointer;
}

/* Estilo do modal de anexo (attachModal) */
#attachModal button {
    background-color: var(--success-color);
    margin-top: 15px;
    width: 100%;
    padding: 10px;
    font-size: 1.1em;
}
#attachModal button:hover {
    background-color: #5cb85c; /* Hover do success */
}

/* Status do upload */
#uploadStatus {
    margin-top: 15px;
    font-size: 0.9em;
    text-align: center;
    font-weight: bold;
}

/* ---------------------------------------------------- */
/* ESTILOS: Modal de Visualização (viewModal) */
/* ---------------------------------------------------- */

.file-viewer-content {
    max-width: 95vw;
    width: 90%; 
    max-height: 95vh;
    height: 90vh; 
    display: flex;
    flex-direction: column; /* Importante para organizar o espaço (h3, iframe/img, actions) */
    align-items: center; /* Centraliza a imagem/iframe horizontalmente */
}

.file-viewer-content h3 {
    margin-top: 0;
    margin-bottom: 15px;
    color: var(--primary-color);
    font-size: 1.2em;
    text-align: center;
    flex-shrink: 0;
}

/* Ajustes para o iframe (usado para PDF, vídeos) */
#fileViewerFrame {
    flex-grow: 1; 
    background-color: #222; 
    border: 1px solid #444 !important;
    margin-bottom: 15px;
    width: 100%; 
    height: 100%;
}

/* ESTILO: Estilo para a Imagem de Visualização (Redimensionamento) */
.viewer-image {
    max-width: 100%; /* Garante que nunca ultrapasse a largura do modal */
    /* 100% da altura restante menos o cabeçalho e ações */
    max-height: calc(100% - 70px); 
    height: auto;
    width: auto;
    object-fit: contain; /* Redimensiona para caber sem cortar, mantendo proporção */
    margin: auto;
    display: block;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    /* Ocupa o espaço onde o iframe estaria, com flex-grow */
    flex-grow: 1; 
}


.modal-actions {
    display: flex;
    justify-content: center;
    padding-top: 10px;
    /* Impede que o botão seja espremido */
    flex-shrink: 0; 
}

.download-btn {
    background-color: var(--success-color);
    color: #ffffff;
    border: none;
    padding: 12px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s;
}

.download-btn:hover {
    background-color: #5cb85c;
}


/* ---------------------------------------------------- */
/* NOVOS ESTILOS: Modal de Confirmação */
/* ---------------------------------------------------- */

.confirmation-content {
    /* Diminui a largura para a confirmação */
    max-width: 450px; 
    text-align: center;
}

.confirmation-content h3 {
    color: var(--text-light);
    margin-bottom: 10px;
    font-size: 1.5em;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 10px;
}

.confirmation-content p {
    color: var(--text-muted);
    font-size: 1.1em;
    margin-bottom: 25px;
    line-height: 1.4;
    /* Permite que negrito e itálico funcionem em HTML, se usados no JS */
    white-space: pre-wrap; 
}

.confirm-actions {
    display: flex;
    justify-content: space-around;
    gap: 15px;
}

.confirm-btn, .cancel-btn {
    padding: 12px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    flex: 1; /* Ocupa metade do espaço */
    transition: background-color 0.2s, transform 0.1s;
}

.confirm-btn:hover, .cancel-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.cancel-btn {
    background-color: var(--bg-medium);
    color: var(--text-muted);
    border: 1px solid var(--border-color);
}
.cancel-btn:hover {
    background-color: var(--bg-light);
    color: var(--text-light);
}

/* Estilos dinâmicos para o botão de Confirmação */
.confirm-btn.complete-action {
    background-color: var(--success-color);
    color: white;
}
.confirm-btn.complete-action:hover {
    background-color: #5cb85c;
}

.confirm-btn.delete-action {
    background-color: var(--danger-color);
    color: white;
}
.confirm-btn.delete-action:hover {
    background-color: #d9534f;
}


/* ---------------------------------------------------- */
/* Responsividade (Mobile First) */
/* ---------------------------------------------------- */

@media (max-width: 768px) {
    /* Cards se empilham em telas menores */
    .cards {
        flex-direction: column;
        gap: 15px;
    }

    .card {
        padding: 15px;
        flex: none; 
        width: 100%;
    }

    .main-content {
        padding: 15px 10px; 
        height: auto;
    }

    /* Layout da Nova Pendência em colunas simples */
    .new-task-section {
        grid-template-columns: 1fr;
    }
    
    /* Tabela: Reduzir fontes e padding */
    th, td {
        padding: 8px;
        font-size: 0.9em;
        max-width: none; 
    }
    
    /* Força a quebra de linha em colunas críticas no mobile */
    td {
        white-space: normal;
    }
    
    /* Botões lado a lado */
    td:last-child {
        display: flex;
        justify-content: space-around;
        gap: 5px;
        max-width: 100%;
    }
    
    td button {
        padding: 6px 8px;
        font-size: 0.8em;
        flex: 1;
        margin: 0;
    }

    /* Modais menores para caber na tela */
    .modal-content {
        width: 95%;
        padding: 15px;
    }
    .file-viewer-content {
        width: 95%;
        height: 95vh;
    }
    
    /* Ações de Confirmação em coluna no mobile */
    .confirm-actions {
        flex-direction: column;
        gap: 10px;
    }
}