/* Estilos Gerais */
body {
    font-family: sans-serif;
    margin: 20px;
    line-height: 1.5;
    background-color: #f8f9fa; /* Fundo levemente cinza */
    color: #333;
}

h1, h2 {
    color: #0056b3; /* Azul escuro para títulos */
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 5px;
    margin-bottom: 20px;
}

a {
    text-decoration: none;
    color: #007bff; /* Azul padrão para links */
}
a:hover {
    text-decoration: underline;
}

button, .button-link {
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid transparent;
    font-size: 0.95em;
    text-align: center;
    display: inline-block;
    margin: 2px;
}

.button-primary {
    background-color: #007bff;
    border-color: #007bff;
    color: white;
}
.button-primary:hover {
    background-color: #0056b3;
    border-color: #0056b3;
}

.button-success {
    background-color: #28a745;
    border-color: #28a745;
    color: white;
}
.button-success:hover {
    background-color: #1e7e34;
    border-color: #1e7e34;
}

.button-danger {
    background-color: #dc3545;
    border-color: #dc3545;
    color: white;
}
.button-danger:hover {
    background-color: #c82333;
    border-color: #c82333;
}

.button-secondary {
     background-color: #6c757d;
     border-color: #6c757d;
     color: white;
}
.button-secondary:hover {
     background-color: #5a6268;
     border-color: #545b62;
}


/* Estilos de Tabela Padrão (para Militares, Turnos) */
.data-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    background-color: white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.data-table th, .data-table td {
    border: 1px solid #dee2e6;
    padding: 10px 12px; /* Aumentar padding */
    text-align: left;
}
.data-table th {
    background-color: #e9ecef; /* Cinza claro para cabeçalho */
    font-weight: bold;
}
.data-table tbody tr:nth-child(odd) {
    background-color: #f8f9fa; /* Listras */
}
.data-table tbody tr:hover {
    background-color: #e2e6ea;
}
.data-table .actions-cell {
    white-space: nowrap; /* Evitar quebra de linha nos botões */
    width: 1%; /* Tentar manter pequena */
}
.data-table .actions-cell form {
    display: inline;
    margin: 0;
}


/* Estilos de Formulário */
form {
    max-width: 600px;
    background-color: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}
form div {
    margin-bottom: 15px;
}
form label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}
form input[type="text"],
form input[type="number"],
form select {
    width: 100%;
    padding: 10px; /* Aumentar padding */
    border: 1px solid #b8c0c7;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 1em;
}
form input[type="number"] {
    appearance: textfield; /* Propriedade padrão */
    -moz-appearance: textfield; /* Firefox */
}
form input[type="number"]::-webkit-outer-spin-button,
form input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none; /* Safari e Chrome */
    margin: 0;
}
form small {
    color: #6c757d;
    font-size: 0.85em;
    display: block;
    margin-top: 3px;
}
form button[type="submit"] {
    margin-top: 10px;
}


/* Estilos da Tabela de Escala */
.escala-container {
    overflow-x: auto; /* Habilita rolagem horizontal */
    margin-bottom: 20px;
    background-color: white;
    padding: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.escala-table {
    width: 100%;
    min-width: 1200px; /* Largura mínima para evitar compressão excessiva */
    border-collapse: collapse;
    table-layout: fixed;
}
.escala-table th, .escala-table td {
    border: 1px solid #ccc;
    padding: 0;
    text-align: center;
    vertical-align: middle;
    height: 50px; /* Aumentar altura */
}
.escala-table th {
    background-color: #e9ecef;
    font-size: 0.85em; /* Reduzir fonte do header */
    padding: 4px;
    white-space: nowrap; /* Evitar quebra de linha no header */
}
.escala-table td {
    font-size: 0.8em; /* Reduzir fonte das células */
}
.escala-table .col-militar {
    width: 130px; /* Reduzir um pouco */
    text-align: left;
    font-weight: bold;
    background-color: #f8f9fa;
    padding: 5px;
    vertical-align: middle;
    position: sticky; /* Fixar coluna do militar */
    left: 0;
    z-index: 1;
}
.escala-table thead th.col-militar {
     z-index: 2; /* Garantir que fique sobre as outras */
}
.escala-table .col-total-horas {
    width: 70px; /* Reduzir um pouco */
    font-weight: bold;
    background-color: #f8f9fa;
    padding: 5px;
    vertical-align: middle;
    position: sticky; /* Fixar coluna de total */
    right: 0;
    z-index: 1;
}
.escala-table thead th.col-total-horas {
     z-index: 2; /* Garantir que fique sobre as outras */
}
.escala-table .col-dia {
    width: 55px; /* Reduzir um pouco */
}
.escala-table .cell-content {
    display: flex;
    flex-direction: column; /* Empilhar sigla e horas */
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    cursor: pointer;
    padding: 2px; /* Reduzir padding interno */
    box-sizing: border-box;
    line-height: 1.1; /* Ajustar espaçamento */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}
.escala-table .cell-content:hover {
    background-color: #eef;
}
.escala-table .cell-siglas {
    font-weight: bold;
    display: block;
    margin-bottom: 2px;
}
.escala-table .cell-horas {
    font-size: 0.85em;
    color: #555;
    display: block;
}

/* Cores de fundo para tipos de escala (com maior especificidade) */
td.escala-ferias { background-color: #e3e354; } /* Amarelo */
td.escala-plantao { background-color: #d12121; color: white; } /* Vermelho */
/* td.escala-descanso-folga { background-color: #72cc72; } */ /* Verde - Removido */
td.escala-licenca { background-color: #698eb5; color: white; } /* Azul */

.weekend { background-color: #f0f0f0; } /* Fim de semana mais sutil */
.saving { background-color: #fffacd !important; }
.saved { background-color: #e0ffe0 !important; }
.error { background-color: #ffe0e0 !important; }
.validation-error { background-color: #ffdddd !important; border: 1px solid red !important; }
.validation-ok { background-color: #ddffdd; }
tfoot td {
    font-weight: bold;
    font-size: 0.75em; /* Reduzir fonte do rodapé */
    background-color: #e9ecef;
    padding: 4px;
}
.meta-atingida { color: green; }
.meta-abaixo { color: orange; }
.meta-acima { color: red; }


/* Estilos do Modal */
.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4); }
.modal-content { background-color: #fefefe; margin: 10% auto; padding: 20px; border: 1px solid #888; width: 90%; max-width: 450px; border-radius: 5px; box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
.modal-header { padding-bottom: 10px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; }
.modal-header h2 { margin: 0; border: none; padding: 0; font-size: 1.2em; }
.modal-body { padding-top: 15px; max-height: 50vh; overflow-y: auto; }
.modal-footer { padding-top: 15px; border-top: 1px solid #eee; text-align: right; }
.close-button { color: #aaa; font-size: 28px; font-weight: bold; cursor: pointer; background: none; border: none; padding: 0; line-height: 1; }
.close-button:hover, .close-button:focus { color: black; text-decoration: none; }
.modal-body label { display: block; margin-bottom: 10px; cursor: pointer; padding: 5px; border-radius: 3px; }
.modal-body label:hover { background-color: #f0f0f0; }
.modal-body input[type="checkbox"] { margin-right: 10px; vertical-align: middle; }
.modal-footer button { margin-left: 10px; }


/* Menu Superior */
.main-nav {
    background-color: #0056b3; /* Azul escuro */
    padding: 10px 20px;
    margin-bottom: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.main-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 20px; /* Espaçamento entre itens */
}
.main-nav li {
    display: inline;
}
.main-nav a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    padding: 8px 12px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}
.main-nav a:hover, .main-nav a.active { /* Estilo para link ativo (adicionar classe 'active' via JS/EJS se necessário) */
    background-color: #004085; /* Azul um pouco mais escuro */
}


/* Navegação da Escala */
.escala-nav {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: white;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.escala-nav a {
    font-weight: bold;
    padding: 5px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #f8f9fa;
    color: #007bff; /* Definir cor do texto explicitamente */
}
.escala-nav a:hover {
    background-color: #e2e6ea;
    text-decoration: none;
}
.escala-nav span {
    font-weight: bold;
    font-size: 1.1em;
}