/* ================= CENTRO DE NOTIFICAÇÕES PROATIVAS ================= */
.notification-center-modal {
    position: fixed;
    top: 70px;
    right: 32px;
    width: 350px;
    max-width: 95vw;
    background: var(--cor-card);
    border-radius: var(--raio-borda);
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    border: 1px solid var(--cor-borda);
    z-index: 9999;
    display: none;
    flex-direction: column;
    padding: 0;
    transition: opacity 0.3s, transform 0.3s;
    opacity: 0;
    transform: translateY(-20px);
}
.notification-center-modal.visible {
    display: flex;
    opacity: 1;
    transform: translateY(0);
}
.notification-center-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 10px 20px;
    border-bottom: 1px solid var(--cor-borda);
    background: var(--cor-fundo);
    border-radius: var(--raio-borda) var(--raio-borda) 0 0;
}
.notification-center-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--cor-primaria-escura);
    font-weight: 700;
}
.notification-center-header .btn-icon {
    color: var(--cor-texto-secundario);
    font-size: 1.2rem;
}
#notification-list {
    max-height: 350px;
    overflow-y: auto;
    padding: 16px 20px;
    background: var(--cor-card);
    border-radius: 0 0 var(--raio-borda) var(--raio-borda);
}
.notification-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--cor-borda);
    color: var(--cor-texto-principal);
    font-size: 0.98rem;
}
.notification-item:last-child {
    border-bottom: none;
}
.notification-item i {
    color: var(--cor-perigo);
    width: 20px;
    height: 20px;
}
.notification-item.notification-stock i {
    color: var(--cor-perigo);
}
.notification-item.notification-ocorrencia i {
    color: var(--cor-aviso);
}
.notification-item.notification-parametro i {
    color: var(--cor-perigo);
}
.notification-empty {
    text-align: center;
    color: var(--cor-texto-secundario);
    padding: 30px 0;
    font-size: 1rem;
}
/* =================================================================
   GUIA RÁPIDO DE CUSTOMIZAÇÃO DE CORES
   =================================================================
   Para alterar a aparência do projeto, basta modificar as
   variáveis de cor abaixo. Elas controlam todo o esquema de
   cores da aplicação.
*/

:root {
    /* --- CORES PRINCIPAIS (MODO CLARO) --- */
    --cor-primaria: #0077b6;
    --cor-primaria-escura: #023e8a;
    --cor-secundaria: #00b4d8;
    --cor-fundo: #f8f9fa;
    --cor-sidebar: #ffffff;
    --cor-card: #ffffff;
    --cor-texto-principal: #212529;
    --cor-texto-secundario: #6c757d;
    --cor-borda: #dee2e6;
    --input-bg: #fff;

    /* --- CORES DE STATUS --- */
    --cor-perigo: #dc3545;
    --cor-sucesso: #198754;
    --cor-aviso: #ffc107;

    /* --- CORES DOS CARDS DO DASHBOARD --- */
    --cor-stat-bombeamento-bg: #fce4ec;
    --cor-stat-bombeamento-icon: #d81b60;
    --cor-stat-eventos-bg: #fff4e5;
    --cor-stat-eventos-icon: #f7941d;
    --cor-stat-cloro-bg: #e7f5ff;
    --cor-stat-cloro-icon: #0077b6;
    --cor-stat-turbidez-bg: #e6f8f4;
    --cor-stat-turbidez-icon: #008a7d;
    --cor-stat-ph-bg: #f3e5f5;
    --cor-stat-ph-icon: #8e24aa;
    --cor-stat-cor-bg: #fffde7;
    --cor-stat-cor-icon: #fbc02d;
    --cor-stat-fluor-bg: #e8f5e9;
    --cor-stat-fluor-icon: #388e3c;
    
    /* --- OUTRAS VARIÁVEIS --- */
    --sombra-card: 0 4px 12px rgba(0,0,0,0.05);
    --sombra-card-hover: 0 6px 16px rgba(0,0,0,0.08);
    --raio-borda: 8px;
}

body.dark-mode {
    /* --- CORES PRINCIPAIS (MODO ESCURO) --- */
    --cor-primaria: #00b4d8;
    --cor-primaria-escura: #0077b6;
    --cor-secundaria: #0077b6;
    --cor-fundo: #121212;
    --cor-sidebar: #1e1e1e;
    --cor-card: #1e1e1e;
    --cor-texto-principal: #e0e0e0;
    --cor-texto-secundario: #a0a0a0;
    --cor-borda: #333333;
    --input-bg: #2c2c2c;
    
    /* --- CORES DOS CARDS DO DASHBOARD (MODO ESCURO) --- */
    --cor-stat-bombeamento-bg: rgba(216, 27, 96, 0.2);
    --cor-stat-eventos-bg: rgba(247, 148, 29, 0.2);
    --cor-stat-cloro-bg: rgba(0, 119, 182, 0.2);
    --cor-stat-turbidez-bg: rgba(0, 138, 125, 0.2);
    --cor-stat-ph-bg: rgba(142, 36, 170, 0.2);
    --cor-stat-cor-bg: rgba(251, 192, 45, 0.2);
    --cor-stat-fluor-bg: rgba(56, 142, 60, 0.2);

    /* --- OUTRAS VARIÁVEIS (MODO ESCURO) --- */
    --sombra-card: 0 4px 12px rgba(0,0,0,0.2);
    --sombra-card-hover: 0 6px 16px rgba(0,0,0,0.3);
    --raio-borda: 8px;
}

/* ESTILOS GERAIS */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--cor-fundo);
    color: var(--cor-texto-principal);
    line-height: 1.6;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    transition: background-color 0.3s, color 0.3s;
}

/* --- ESTRUTURA DE ERRO --- */
.error-container {
    padding: 30px;
    margin: 20px;
    background-color: #fff0f1;
    border: 2px solid var(--cor-perigo);
    color: #212529;
    border-radius: var(--raio-borda);
}
.error-container h1 {
    color: var(--cor-perigo);
    margin-top: 0;
}
.error-container pre {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    padding: 15px;
    border-radius: var(--raio-borda);
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: 'Courier New', Courier, monospace;
}

/* --- ESTILOS DE LOGIN --- */
.login-page-wrapper {
    /* Adicione estas linhas para a Imagem de Fundo */
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), urlurl('https://images.unsplash.com/photo-1581093458791-9f302295b81e?q=80&w=1600&auto=format&fit=crop') no-repeat center center fixed;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    flex-grow: 1;
    padding: 20px;
    position: relative;
}
.login-card {
    max-width: 400px;
    width: 100%;
    text-align: center;
    padding: 40px;
}
.login-header {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.login-header img.header-logo {
    max-height: 60px;
    margin-bottom: 24px;
}

/* Para o Objetivo 4: Fonte Times New Roman e visual "Impressionante" */
.login-header h1 {
   font-family: 'Times New Roman', Times, serif; /* Fonte solicitada */
    font-size: 2.5rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    color: #057dec; /* Texto branco para contrastar com o fundo */
    margin-bottom: 10px;
}

.login-header p {
    color: #e0e0e0; /* Texto secundário mais claro */
}

#loginForm {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
#loginForm .form-group { text-align: left; }
#loginForm button {
    margin-top: 8px;
    padding: 12px;
    font-size: 1rem;
}
.login-actions {
    text-align: right;
    font-size: 0.9rem;
}
.login-actions a {
    color: var(--cor-primaria);
    text-decoration: none;
    font-weight: 500;
}
.login-error-message {
    color: var(--cor-perigo);
    min-height: 20px;
    margin-top: 16px;
    font-weight: 500;
}
.password-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}
.password-wrapper input {
    padding-right: 40px;
}
.password-toggle-icon {
    position: absolute;
    right: 12px;
    cursor: pointer;
    color: var(--cor-texto-secundario);
}
.login-version {
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 0.8rem;
    color: var(--cor-texto-secundario);
    background-color: rgba(255, 255, 255, 0.7);
    padding: 2px 6px;
    border-radius: 4px;
}
body.dark-mode .login-version {
    background-color: rgba(0, 0, 0, 0.5);
}

/* INÍCIO DA ALTERAÇÃO: Estilos para o rodapé do login */
#login-view .page-footer .footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.login-developer-logo {
    max-height: 35px;
    margin-bottom: 8px;
}

/* Dica extra: Efeito de vidro no cartão de login para ficar moderno */
.card.login-card {
    background: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.2);
}
/* FIM DA ALTERAÇÃO */


/* --- ESTRUTURA PRINCIPAL COM SIDEBAR --- */
.page-container {
    display: flex;
    flex-grow: 1;
    width: 100%;
}

.sidebar {
    width: 260px;
    background-color: var(--cor-sidebar);
    border-right: 1px solid var(--cor-borda);
    display: flex;
    flex-direction: column;
    padding: 24px;
    box-sizing: border-box;
    transition: background-color 0.3s, border-color 0.3s;
}

/* --- 1. ESTILO DA BARRA LATERAL (Logo em cima do texto) --- */
.sidebar-header {
    display: flex;
    flex-direction: column; /* Empilha logo e texto verticalmente */
    align-items: center;    /* Centraliza tudo */
    text-align: center;
    margin-bottom: 32px;
    gap: 15px; /* Espaço entre a imagem e o texto "Diário de Operação" */
}

.sidebar-logo {
    max-height: 80px; /* Tamanho controlado do logo na lateral */
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}
/* Fim Estilo do título na sidebar*/

.sidebar-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--cor-primaria-escura);
    margin: 0;
}

.sidebar-nav {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.nav-button {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: var(--raio-borda);
    border: none;
    background-color: transparent;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    color: var(--cor-texto-secundario);
    text-align: left;
    width: 100%;
    transition: background-color 0.2s, color 0.2s;
}

.nav-button:hover {
    background-color: var(--cor-fundo);
    color: var(--cor-primaria);
}

.nav-button.active {
    background-color: rgba(0, 119, 182, 0.1);
    color: var(--cor-primaria);
    font-weight: 600;
}
body.dark-mode .nav-button.active {
    background-color: rgba(0, 180, 216, 0.15);
}


.sidebar-footer {
    flex-shrink: 0;
    padding-top: 16px;
    border-top: 1px solid var(--cor-borda);
}

#appVersion {
    display: block;
    margin-bottom: 16px;
    font-size: 0.8rem;
    text-align: center;
}

.btn-logout {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: var(--raio-borda);
    border: 1px solid var(--cor-borda);
    background-color: transparent;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    color: var(--cor-texto-secundario);
    margin-top: 16px;
}

.btn-logout:hover {
    background-color: #fff0f1;
    color: var(--cor-perigo);
    border-color: #f1c2c6;
}
body.dark-mode .btn-logout:hover {
    background-color: rgba(220, 53, 69, 0.2);
    border-color: var(--cor-perigo);
}


.main-content-wrapper {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.main-content {
    padding: 24px 32px;
    flex-grow: 1;
}

.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 32px;
    background-color: var(--cor-sidebar);
    border-bottom: 1px solid var(--cor-borda);
    position: sticky;
    top: 0;
    z-index: 10;
    transition: background-color 0.3s, border-color 0.3s;
}

#welcomeMessage {
    font-size: 1.2rem;
    font-weight: 600;
}

.user-profile-header {
    display: flex;
    align-items: center;
    gap: 16px;
}
.user-profile-header img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--cor-borda);
}

/* ====================================================== */
/* INÍCIO DA ALTERAÇÃO: Estilos para o sino e contador    */
/* ====================================================== */

/* Garante que o botão possa ser um contentor para o contador posicionado absolutamente */
.theme-switcher-btn {
    position: relative;
    background: none;
    border: 1px solid var(--cor-borda);
    color: var(--cor-texto-secundario);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

#notification-count {
    position: absolute;
    top: 0;
    right: 0;
    width: 18px;
    height: 18px;
    background-color: var(--cor-perigo);
    color: white;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--cor-card);
    transform: translate(40%, -40%);
    pointer-events: none; /* Para não interferir com o clique no botão */
}

/* ====================================================== */
/* FIM DA ALTERAÇÃO                                       */
/* ====================================================== */


.theme-switcher-btn:hover {
    background-color: var(--cor-fundo);
    color: var(--cor-primaria);
}
.theme-switcher-btn.active {
    color: var(--cor-primaria);
    border-color: var(--cor-primaria);
}


.company-details-header {
    font-size: 0.9rem;
    color: var(--cor-texto-secundario);
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.company-details-header strong {
    color: var(--cor-texto-principal);
    font-weight: 600;
    display: block;
    font-size: 1.1rem;
}
.company-details-header small {
    font-size: 0.85rem;
}

.view { display: none; }
.view.active { display: block; }

/* --- RODAPÉ PADRONIZADO --- */
.page-footer {
    background-color: var(--cor-sidebar);
    color: var(--cor-texto-secundario);
    text-align: center;
    padding: 15px;
    font-size: 0.9rem;
    flex-shrink: 0;
    border-top: 1px solid var(--cor-borda);
    transition: background-color 0.3s, border-color 0.3s;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.developer-cnpj {
    font-size: 0.85rem;
    color: var(--cor-texto-secundario);
    font-weight: 500;
    margin-left: 8px;
}

.developer-info {
    display: flex;
    align-items: center;
    gap: 10px;
}
.developer-logo {
    max-height: 30px;
    max-width: 120px;
}
.support-info {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}
.support-info a {
    color: var(--cor-texto-secundario);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color 0.2s;
}
.support-info a:hover {
    color: var(--cor-primaria);
}
.copyright-text {
    font-size: 0.85rem;
}
.copyright-text strong {
    font-weight: 600;
    color: var(--cor-texto-principal);
}

/* --- DASHBOARD --- */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}
.dashboard-grid.full-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}


.weather-clock-card {
    grid-column: 1 / -1; 
    background: linear-gradient(135deg, #023e8a, #0077b6);
    color: white;
    border-radius: var(--raio-borda);
    padding: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    box-shadow: var(--sombra-card-hover);
    margin-bottom: 24px;
}
body.dark-mode .weather-clock-card {
    background: linear-gradient(135deg, #1e1e1e, #2c2c2c);
}

.clock-container {
    text-align: left;
}
#clock-display {
    font-size: 3.5rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}
#date-display {
    font-size: 1.1rem;
    font-weight: 500;
    opacity: 0.9;
}
.weather-container {
    display: flex;
    align-items: center;
    gap: 20px;
    text-align: right;
}
#weather-icon {
    width: 80px;
    height: 80px;
}
.weather-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
#weather-temp {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
}
#weather-desc {
    font-size: 1.1rem;
    font-weight: 500;
    text-transform: capitalize;
    opacity: 0.9;
}
#weather-min-max {
    font-size: 0.9rem;
    opacity: 0.8;
}


/* Estilos para transformar os cards do dashboard em botões clicáveis */
.dashboard-card-btn {
    background-color: var(--cor-card);
    border-radius: var(--raio-borda);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    border: 1px solid var(--cor-borda);
    box-shadow: var(--sombra-card);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s, border-color 0.3s;
    width: 100%;
    text-align: left;
    cursor: pointer;
    color: var(--cor-texto-principal);
}

.dashboard-card-btn:hover {
    transform: translateY(-5px);
    box-shadow: var(--sombra-card-hover);
    background-color: var(--cor-fundo);
}

.dashboard-card-btn:active {
    transform: translateY(0);
    box-shadow: var(--sombra-card);
}

.stat-card-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}
.stat-card-icon i {
    width: 24px;
    height: 24px;
}

/* Cores dos ícones do dashboard */
.stat-card-icon.icon-bombeamento { background-color: var(--cor-stat-bombeamento-bg); }
.stat-card-icon.icon-bombeamento i { color: var(--cor-stat-bombeamento-icon); }
.stat-card-icon.icon-eventos { background-color: var(--cor-stat-eventos-bg); }
.stat-card-icon.icon-eventos i { color: var(--cor-stat-eventos-icon); }
.stat-card-icon.icon-cloro { background-color: var(--cor-stat-cloro-bg); }
.stat-card-icon.icon-cloro i { color: var(--cor-stat-cloro-icon); }
.stat-card-icon.icon-turbidez { background-color: var(--cor-stat-turbidez-bg); }
.stat-card-icon.icon-turbidez i { color: var(--cor-stat-turbidez-icon); }
.stat-card-icon.icon-ph { background-color: var(--cor-stat-ph-bg); }
.stat-card-icon.icon-ph i { color: var(--cor-stat-ph-icon); }
.stat-card-icon.icon-cor { background-color: var(--cor-stat-cor-bg); }
.stat-card-icon.icon-cor i { color: var(--cor-stat-cor-icon); }
.stat-card-icon.icon-fluor { background-color: var(--cor-stat-fluor-bg); }
.stat-card-icon.icon-fluor i { color: var(--cor-stat-fluor-icon); }


.stat-card-info {
    display: flex;
    flex-direction: column;
}

.stat-card-title {
    font-size: 0.9rem;
    color: var(--cor-texto-secundario);
    margin-bottom: 4px;
}

.stat-card-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--cor-texto-principal);
}

.stat-card-unit {
    font-size: 0.9rem;
    color: var(--cor-texto-secundario);
}


/* --- GRÁFICOS --- */
.charts-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 24px;
}

.chart-card {
    background-color: var(--cor-card);
    border-radius: var(--raio-borda);
    padding: 20px;
    border: 1px solid var(--cor-borda);
    box-shadow: var(--sombra-card);
    height: 350px; 
}

.chart-card h3 {
    margin-top: 0;
    margin-bottom: 16px;
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    color: var(--cor-texto-secundario);
}

/* --- COMPONENTES GERAIS --- */
.card {
    background-color: var(--cor-card);
    border-radius: var(--raio-borda);
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: var(--sombra-card);
    border: 1px solid var(--cor-borda);
    transition: background-color 0.3s, border-color 0.3s;
}

.card-header {
    border-bottom: 1px solid var(--cor-borda);
    padding-bottom: 16px;
    margin-bottom: 24px;
}
.card-header h2 {
    margin: 0;
    font-size: 1.5rem;
}
.card-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}
.card-header p {
    margin: 4px 0 0;
    color: var(--cor-texto-secundario);
}

.card-footer {
    border-top: 1px solid var(--cor-borda);
    padding-top: 16px;
    margin-top: 24px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

.btn-primary {
    background-color: var(--cor-primaria);
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: var(--raio-borda);
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.2s;
}
.btn-primary:hover {
    background-color: var(--cor-primaria-escura);
}

.btn-ai {
    background: linear-gradient(45deg, #4e54c8, #8f94fb);
    color: white;
}
.btn-ai:hover {
    opacity: 0.9;
}

.btn-secondary {
    background-color: var(--cor-fundo);
    color: var(--cor-texto-principal);
    border: 1px solid var(--cor-borda);
    padding: 12px 20px;
    border-radius: var(--raio-borda);
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    transition: background-color 0.2s, border-color 0.2s;
}
.btn-secondary:hover {
    background-color: #e9ecef;
    border-color: #ced4da;
}
body.dark-mode .btn-secondary:hover {
    background-color: #333;
}

.btn-danger {
    background-color: var(--cor-perigo);
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: var(--raio-borda);
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.2s;
}
.btn-danger:hover {
    background-color: #b02a37;
}

.full-width {
    width: 100%;
}


/* --- ESTILOS PARA FORMULÁRIOS --- */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}
.admin-form-column {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 600px;
}
.form-group {
    display: flex;
    flex-direction: column;
    position: relative;
    padding-bottom: 22px;
}
.form-group.full-width {
    grid-column: 1 / -1;
}
.form-group.half-width {
    grid-column: span 1;
}
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
label {
    margin-bottom: 8px;
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--cor-texto-secundario);
}
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="time"],
select,
textarea {
    width: 100%;
    padding: 10px 12px;
    border-radius: var(--raio-borda);
    border: 1px solid var(--cor-borda);
    background-color: var(--input-bg);
    color: var(--cor-texto-principal);
    font-family: inherit;
    font-size: 1rem;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s, background-color 0.3s;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--cor-primaria);
    box-shadow: 0 0 0 3px rgba(0, 119, 182, 0.2);
}
body.dark-mode input:focus, body.dark-mode select:focus, body.dark-mode textarea:focus {
    box-shadow: 0 0 0 3px rgba(0, 180, 216, 0.2);
}

input.input-invalid,
select.input-invalid,
textarea.input-invalid {
    border-color: var(--cor-perigo) !important;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.2) !important;
}

.validation-message {
    color: var(--cor-perigo);
    font-size: 0.8rem;
    font-weight: 500;
    position: absolute;
    bottom: 0;
    left: 0;
    display: none;
}

textarea {
    resize: vertical;
    min-height: 80px;
}
.image-preview {
    border: 2px solid var(--cor-borda);
    object-fit: cover;
    background-color: var(--cor-fundo);
    margin-bottom: 10px;
}
.image-preview.round {
    width: 80px;
    height: 80px;
    border-radius: 50%;
}
.image-upload-container input[type="file"] {
    display: none;
}
.file-input-label {
    background-color: var(--cor-fundo);
    color: var(--cor-texto-principal);
    border: 1px solid var(--cor-borda);
    padding: 8px 12px;
    border-radius: var(--raio-borda);
    cursor: pointer;
    display: inline-block;
}
.file-input-label:hover {
    background-color: #e9ecef;
}


.lancamento-controls, .report-controls {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: flex-end;
    margin-bottom: 24px;
}

.checkbox-group {
    display: flex;
    gap: 24px;
    align-items: center;
    padding: 10px;
    background-color: var(--cor-fundo);
    border-radius: var(--raio-borda);
}
.checkbox-group label, .checkbox-group-inline label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0; 
    font-weight: 500;
    cursor: pointer;
    font-size: 0.9rem;
}
.checkbox-group input[type="checkbox"], .checkbox-group-inline input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}
.export-excel-group {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--cor-borda);
    padding-left: 10px;
    border-radius: var(--raio-borda);
}
.export-excel-group button {
    border: none;
}


/* --- ESTILOS PARA ABAS DE CONFIGURAÇÕES --- */
.admin-tabs {
    display: flex;
    gap: 8px;
    border-bottom: 1px solid var(--cor-borda);
    margin-bottom: 24px;
    flex-wrap: wrap; 
}
.tab-link {
    padding: 12px 20px;
    border: none;
    background-color: transparent;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    color: var(--cor-texto-secundario);
    border-bottom: 3px solid transparent;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color 0.3s, border-color 0.3s;
}
.tab-link:hover {
    color: var(--cor-primaria);
}
.tab-link.active {
    color: var(--cor-primaria);
    border-bottom-color: var(--cor-primaria);
}
.admin-content {
    padding-top: 16px;
}

/* --- ESTILOS PARA LISTAS DE CONFIGURAÇÕES --- */
.admin-list-container {
    margin-top: 40px;
    border-top: 1px solid var(--cor-borda);
    padding-top: 24px;
}
.admin-list {
    list-style: none;
    padding: 0;
    margin-top: 16px;
}
.admin-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-borda);
    margin-bottom: 8px;
    background-color: var(--cor-fundo);
}
.admin-list .item-info {
    display: flex;
    align-items: center;
    gap: 15px;
}
.admin-list .item-info img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}
.admin-list .actions {
    display: flex;
    gap: 8px;
}
.btn-icon {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--cor-texto-secundario);
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-icon:hover {
    color: var(--cor-perigo);
}
.btn-icon[data-action*="editar"]:hover {
    color: var(--cor-primaria);
}
.btn-icon[disabled] {
    color: var(--cor-borda);
    cursor: not-allowed;
}

/* --- TABELAS --- */
.tabela-container {
    overflow-x: auto;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-borda);
}
.data-table {
    width: 100%;
    border-collapse: collapse;
    white-space: nowrap;
}
.data-table th,
.data-table td {
    border: 1px solid var(--cor-borda);
    padding: 12px 14px;
    text-align: center;
    font-size: 0.95rem;
}
.data-table th {
    background-color: var(--cor-fundo);
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 1;
}
/* Estilo para a primeira coluna de tabelas de dados, geralmente usada para identificadores */
.data-table td:first-child {
    text-align: left;
    font-weight: 500;
    background-color: var(--cor-fundo);
    position: sticky;
    left: 0;
    z-index: 2;
}

/* Estilos específicos para a tabela de grelha diária com duas colunas fixas */
#daily-grid-table td:first-child {
    left: 0;
}
#daily-grid-table td:nth-child(2) {
    left: 120px;
    position: sticky; /* Garante que a segunda coluna também seja fixa */
}

#daily-grid-table input {
    width: 100%;
    border: none;
    text-align: center;
    background-color: transparent;
    padding: 4px;
    box-sizing: border-box;
    color: var(--cor-texto-principal);
    border-radius: 4px;
    font-size: 1rem;
}
#daily-grid-table input:focus {
    outline: 2px solid var(--cor-primaria);
    background-color: var(--input-bg);
}

/* --- ESTATÍSTICAS E RESUMOS --- */
.stats-container, .report-summary-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    padding: 16px;
    background-color: var(--cor-fundo);
    border-radius: var(--raio-borda);
    margin-bottom: 24px;
}
.stat-item h4 {
    margin: 0 0 8px 0;
    font-size: 1rem;
    color: var(--cor-texto-secundario);
    font-weight: 600;
}
.stat-values {
    display: flex;
    justify-content: space-around;
    background-color: var(--cor-card);
    padding: 10px;
    border-radius: var(--raio-borda);
    border: 1px solid var(--cor-borda);
}
.stat-value {
    text-align: center;
}
.stat-value span:first-child {
    font-size: 0.8rem;
    color: var(--cor-texto-secundario);
    display: block;
}
.stat-value span:last-child {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--cor-texto-principal);
}


/* --- ESTILOS PARA ANÁLISE DE IA --- */
#ia-analysis-container {
    margin-top: 24px;
    padding: 20px;
    background-color: rgba(78, 84, 200, 0.1);
    border-left: 5px solid #4e54c8;
    border-radius: var(--raio-borda);
}
#ia-analysis-container h3 {
    margin-top: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #4e54c8;
}
.loader {
    border: 4px solid var(--cor-fundo);
    border-top: 4px solid var(--cor-primaria);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 1s linear infinite;
    margin: 20px auto;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* --- ESTILOS DO CHATBOT --- */
#chat-container {
    display: flex;
    flex-direction: column;
    height: 70vh;
}
#chat-messages {
    flex-grow: 1;
    overflow-y: auto;
    padding: 10px;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-borda);
    margin-bottom: 10px;
    background-color: var(--cor-fundo);
}
.chat-message {
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
}
.chat-message.user {
    align-items: flex-end;
}
.chat-message.model {
    align-items: flex-start;
}
.chat-message .message-bubble {
    max-width: 80%;
    padding: 10px 15px;
    border-radius: 18px;
    line-height: 1.5;
}
.chat-message.user .message-bubble {
    background-color: var(--cor-primaria);
    color: white;
    border-bottom-right-radius: 4px;
}
.chat-message.model .message-bubble {
    background-color: var(--cor-card);
    color: var(--cor-texto-principal);
    border: 1px solid var(--cor-borda);
    border-bottom-left-radius: 4px;
}
#chat-input-area {
    display: flex;
    gap: 10px;
}
#chat-input {
    flex-grow: 1;
}

/* --- ESTILOS ESPECÍFICOS MICROBIOLOGIA --- */
.client-details-box {
    background-color: var(--cor-fundo);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-borda);
    padding: 16px;
    margin-top: 10px;
    font-size: 0.9rem;
}
.client-details-box p {
    margin: 0 0 8px 0;
}
.client-details-box p:last-child {
    margin-bottom: 0;
}

/* --- MODAL DE NOTIFICAÇÃO E RECUPERAÇÃO --- */
.notification-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}
.notification-modal-overlay.visible {
    opacity: 1;
    visibility: visible;
}
.notification-modal {
    background-color: var(--cor-card);
    padding: 30px;
    border-radius: var(--raio-borda);
    box-shadow: 0 5px 25px rgba(0,0,0,0.2);
    width: 90%;
    max-width: 500px;
    text-align: center;
    transform: scale(0.9);
    transition: transform 0.3s, background-color 0.3s;
}
.notification-modal-overlay.visible .notification-modal {
    transform: scale(1);
}
.notification-modal h3 {
    margin-top: 0;
    color: var(--cor-primaria-escura);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.notification-modal h3 .feather {
    color: var(--cor-aviso);
}
.notification-modal p {
    margin-bottom: 25px;
}
.recovery-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}


/* --- INDICADOR DE VOZ --- */
.voice-indicator {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--cor-primaria);
    color: white;
    padding: 10px 20px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
}
.voice-indicator.visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.voice-indicator i {
    animation: pulse 1.5s infinite;
}
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* Estilos para paginação */
.pagination-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
}

.pagination-controls button {
    padding: 8px 15px;
    border-radius: var(--raio-borda);
    font-size: 0.9rem;
}

.pagination-controls span {
    font-weight: 500;
    color: var(--cor-texto-principal);
}

/* --- CORES DOS CARDS DO DASHBOARD --- */
:root {
    --cor-stat-inventario-bg: #e0f7fa;
    --cor-stat-inventario-icon: #0097a7;
    --cor-stat-ocorrencias-bg: #ffe0b2;
    --cor-stat-ocorrencias-icon: #fb8c00;
}

body.dark-mode {
    --cor-stat-inventario-bg: rgba(0, 151, 167, 0.2);
    --cor-stat-ocorrencias-bg: rgba(251, 140, 0, 0.2);
}

/* Estilos para status de ocorrências */
.ocorrencia-status-aberta {
    color: var(--cor-perigo);
    font-weight: 600;
}
.ocorrencia-status-em-analise {
    color: var(--cor-aviso);
    font-weight: 600;
}
.ocorrencia-status-resolvida {
    color: var(--cor-sucesso);
    font-weight: 600;
}
.ocorrencia-status-fechada {
    color: var(--cor-texto-secundario);
    font-weight: 600;
}

/* ====================================================== */
/* NOVOS ESTILOS PARA O INVENTÁRIO REFEITO              */
/* ====================================================== */

.inventory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
    margin-bottom: 24px;
}

.form-vertical {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.btn-danger.full-width {
    background-color: var(--cor-perigo);
}
.btn-danger.full-width:hover {
    background-color: #b02a37;
}

/* ====================================================== */
/* ESTILOS PARA PLACEHOLDERS DE CONTEÚDO                  */
/* ====================================================== */

.placeholder-container {
    text-align: center;
    padding: 60px 40px;
    border: 2px dashed var(--cor-borda);
    border-radius: var(--raio-borda);
    margin-top: 24px;
    background-color: var(--cor-fundo);
    color: var(--cor-texto-secundario);
    transition: background-color 0.3s, border-color 0.3s;
}

.placeholder-container i {
    width: 48px;
    height: 48px;
    margin-bottom: 16px;
    color: var(--cor-primaria);
    opacity: 0.6;
}

.placeholder-container h3 {
    margin: 0 0 8px 0;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--cor-texto-principal);
}

.placeholder-container p {
    margin: 0;
    font-size: 1rem;
}

#visaoGeralStockTable .stock-alert {
    color: var(--cor-perigo);
    font-weight: bold;
}

#visaoGeralStockTable .stock-alert .feather {
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    margin-left: 8px;
}

#movimentacaoHistoryTable .tipo-entrada {
    color: var(--cor-sucesso);
    font-weight: bold;
}

#movimentacaoHistoryTable .tipo-saida {
    color: var(--cor-perigo);
    font-weight: bold;
}

/* ====================================================== */
/* NOVOS ESTILOS PARA VALIDAÇÃO DE INPUTS NA GRELHA       */
/* ====================================================== */

#daily-grid-table input.input-valid:focus {
    outline: 2px solid var(--cor-sucesso);
    background-color: #e8f5e9;
}

#daily-grid-table input.input-invalid:focus {
    outline: 2px solid var(--cor-perigo);
    background-color: #fce4e4;
}

body.dark-mode #daily-grid-table input.input-valid:focus {
    background-color: rgba(25, 135, 84, 0.2);
}

body.dark-mode #daily-grid-table input.input-invalid:focus {
    background-color: rgba(220, 53, 69, 0.2);
}

/* ====================================================== */
/* NOVOS ESTILOS PARA O LAYOUT DE LANÇAMENTOS           */
/* ====================================================== */

.lancamentos-layout {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.lancamentos-col-left {
    width: 320px;
    flex-shrink: 0;
}

.lancamentos-col-right {
    flex-grow: 1;
}

.stats-container-vertical {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.stats-container-vertical .stat-item {
    background-color: var(--cor-fundo);
    padding: 12px;
    border-radius: var(--raio-borda);
    border: 1px solid var(--cor-borda);
}

.stats-container-vertical .stat-item h4 {
    margin-bottom: 12px;
}

.stats-container-vertical .stat-values {
    background-color: transparent;
    border: none;
    padding: 0;
}

/* ====================================================== */
/* ESTILOS PARA FEEDBACK VISUAL INTERATIVO                */
/* ====================================================== */

/* --- Validação de Formulários --- */

/* Adiciona um estilo sutil para campos válidos */
.form-group input.is-valid,
.form-group select.is-valid,
.form-group textarea.is-valid {
    border-color: var(--cor-sucesso);
}

/* Garante que a borda de erro vermelha seja mais proeminente */
.form-group input.is-invalid,
.form-group select.is-invalid,
.form-group textarea.is-invalid {
    border-color: var(--cor-perigo);
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15);
}

/* Estilo para a mensagem de erro que aparecerá abaixo do campo */
.validation-message {
    color: var(--cor-perigo);
    font-size: 0.85rem;
    font-weight: 500;
    margin-top: 6px;
    display: none; /* A mensagem só aparece quando necessário */
    min-height: 1em;
}

.form-group input.is-invalid + .validation-message,
.form-group select.is-invalid + .validation-message,
.form-group textarea.is-invalid + .validation-message {
    display: block; /* Mostra a mensagem se o campo for inválido */
}


/* --- Estado de "A Guardar..." do Botão --- */

.btn.is-saving {
    position: relative;
    cursor: wait;
    color: transparent !important; /* Esconde o texto original */
    pointer-events: none; /* Desativa cliques enquanto está a guardar */
}

.btn.is-saving::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    margin-left: -10px;
    border: 3px solid rgba(255, 255, 255, 0.5);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* ====================================================== */
/* ESTILOS FINAIS PARA A GRELHA DE LANÇAMENTOS (v4)       */
/* ====================================================== */

#daily-grid-container {
    border-radius: var(--raio-borda);
    overflow: hidden;
    border: 1px solid var(--cor-borda);
}

#daily-grid-table {
    width: 100%;
    border-collapse: collapse;
    white-space: nowrap;
    background-color: var(--cor-card); /* Usa variável para o fundo */
}

/* Estilo padrão para o cabeçalho (horas) */
#daily-grid-table thead th {
    background-color: #4CAF50; /* ALTERADO: Cor verde como na imagem */
    color: #ffffff;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 12px 10px;
    text-align: center;
    border: 1px solid var(--cor-borda);
    position: sticky;
    top: 0;
    z-index: 3;
}

/* Estilo específico para as colunas "Grupo", "Análise" e "Média" no cabeçalho */
#daily-grid-table thead th:first-child,
#daily-grid-table thead th:nth-child(2),
#daily-grid-table thead th:last-child {
    background-color: #0000FF; /* ALTERADO: Cor verde como na imagem */
    color: #ffffff;
}

/* Adaptação do cabeçalho especial para o modo noturno */
body.dark-mode #daily-grid-table thead th:first-child,
body.dark-mode #daily-grid-table thead th:nth-child(2),
body.dark-mode #daily-grid-table thead th:last-child {
    background-color: #0000FF; /* Mantém verde no modo escuro também */
}


/* Células do corpo da tabela */
#daily-grid-table tbody td {
    border: 1px solid var(--cor-borda);
    padding: 4px;
    text-align: center;
    font-size: 0.95rem;
    transition: background-color 0.2s;
}

/* Efeito Zebra para o modo claro */
#daily-grid-table tbody tr:nth-child(even) {
    background-color: var(--cor-fundo);
}

/* Remove o efeito zebra no modo escuro para um visual mais limpo */
body.dark-mode #daily-grid-table tbody tr:nth-child(even) {
    background-color: transparent;
}

/* Efeito de hover suave para feedback */
#daily-grid-table tbody tr:hover td {
    background-color: #e9ecef;
}

body.dark-mode #daily-grid-table tbody tr:hover td {
    background-color: rgba(255, 255, 255, 0.08);
}

/* Colunas fixas (Grupo e Análise) */
#daily-grid-table .group-cell,
#daily-grid-table .analysis-cell {
    font-weight: 600;
    text-align: left;
    padding-left: 12px;
    background-color: var(--cor-card); /* Mantido branco para contraste */
    position: sticky;
    z-index: 2;
}

#daily-grid-table .group-cell {
    left: 0;
    width: 120px;
    color: var(--cor-texto-principal);
}

#daily-grid-table .analysis-cell {
    left: 120px;
    width: 150px;
    font-weight: 500;
    color: var(--cor-texto-secundario);
}

/* Coluna de Média */
#daily-grid-table .media-column {
    font-weight: 700;
    background-color: var(--cor-fundo);
    color: var(--cor-texto-principal);
}

/* Inputs dentro da tabela */
#daily-grid-table input.daily-grid-input {
    width: 100%;
    height: 100%;
    border: 1px solid transparent;
    background-color: transparent;
    text-align: center;
    font-size: 0.95rem;
    padding: 8px 4px;
    box-sizing: border-box;
    border-radius: 4px;
    transition: border-color 0.2s, background-color 0.2s;
    color: var(--cor-texto-principal); /* Usa variável */
}

#daily-grid-table input.daily-grid-input:focus {
    outline: none;
    border-color: var(--cor-primaria);
    background-color: var(--cor-card); /* Usa variável */
}
body.dark-mode #daily-grid-table input.daily-grid-input:focus {
    background-color: rgba(255, 255, 255, 0.1); /* Fundo mais escuro no modo noturno */
}

/* Colunas fixas (Grupo e Análise) para modo escuro */
body.dark-mode #daily-grid-table .group-cell,
body.dark-mode #daily-grid-table .analysis-cell {
    background-color: var(--cor-card);
}

body.dark-mode #daily-grid-table .group-cell {
    color: var(--cor-texto-principal);
}

body.dark-mode #daily-grid-table .analysis-cell {
     color: var(--cor-texto-secundario);
}

/* Coluna de Média */
body.dark-mode #daily-grid-table .media-column {
    background-color: #2c2c2c;
    color: var(--cor-texto-principal);
}

/* Inputs dentro da tabela */
body.dark-mode #daily-grid-table input.daily-grid-input:focus {
    background-color: var(--cor-card);
}

/* ====================================================== */
/* INÍCIO DA ALTERAÇÃO: Estilos para a secção de Checklists */
/* ====================================================== */

.checklist-list {
    list-style: none;
    padding: 0;
    margin: 24px 0 0 0;
}

.checklist-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-borda);
    margin-bottom: 12px;
    background-color: var(--cor-card);
    transition: background-color 0.3s, border-color 0.3s;
}

.checklist-item.done {
    background-color: var(--cor-fundo);
    border-color: #c3e6cb; /* Verde claro para sucesso */
}

body.dark-mode .checklist-item.done {
    background-color: rgba(25, 135, 84, 0.15);
    border-color: rgba(25, 135, 84, 0.5);
}

.checklist-item-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-grow: 1;
}

.checklist-item-info i {
    color: var(--cor-primaria);
}

.checklist-item.done .checklist-item-info i {
    color: var(--cor-sucesso);
}

.checklist-task-name {
    font-weight: 500;
    color: var(--cor-texto-principal);
}

.checklist-item.done .checklist-task-name {
    text-decoration: line-through;
    color: var(--cor-texto-secundario);
}

.checklist-task-freq {
    font-size: 0.85rem;
    color: var(--cor-texto-secundario);
    background-color: var(--cor-fundo);
    padding: 2px 8px;
    border-radius: 12px;
    border: 1px solid var(--cor-borda);
}

.checklist-item-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.checklist-item-actions .btn-primary {
    padding: 8px 16px;
    font-size: 0.9rem;
}

.checklist-item-actions .btn-primary:disabled {
    background-color: var(--cor-sucesso);
    cursor: not-allowed;
    opacity: 0.8;
}

/* ====================================================== */
/* ESTILOS COMPLETOS PARA A NOVA TELA DE LANÇAMENTOS (V3) */
/* ====================================================== */

/* Contenedor principal da tela de lançamentos */
.lancamento-card {
    padding: 20px;
    background-color: var(--cor-fundo);
    border: none;
    box-shadow: none;
}

/* Cabeçalho com os checkboxes */
.lancamento-header-controls {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 24px;
    padding: 12px 16px;
    background-color: #f0f0f0; /* Fundo cinza claro para o cabeçalho */
    border: 1px solid #dcdcdc;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
}

.responsible-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.responsible-group label {
    font-weight: 500;
    color: #333;
    cursor: pointer;
    margin: 0;
}

.custom-checkbox {
    appearance: none;
    background-color: #fff;
    margin: 0;
    font: inherit;
    color: currentColor;
    width: 1.15em;
    height: 1.15em;
    border: 0.15em solid #0077b6;
    border-radius: 0.15em;
    transform: translateY(-0.075em);
    display: grid;
    place-content: center;
    cursor: pointer;
}

.custom-checkbox::before {
    content: "";
    width: 0.65em;
    height: 0.65em;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em #0077b6;
    transform-origin: bottom left;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

.custom-checkbox:checked::before {
    transform: scale(1);
}

/* Contenedor da tabela */
.tabela-container-lancamento {
    overflow-x: auto;
    border: 1px solid #dcdcdc;
    border-top: none; /* A borda superior já está no header-controls */
}

/* Tabela de Lançamentos */
#lancamento-grid-table {
    width: 100%;
    border-collapse: collapse;
    white-space: nowrap;
}

/* Células do corpo e cabeçalho */
#lancamento-grid-table th,
#lancamento-grid-table td {
    border: 1px solid #dcdcdc;
    padding: 0; /* O padding será nos inputs */
    text-align: center;
    font-size: 0.9rem;
}

/* Cabeçalho da Tabela (Horas) */
/* MODIFICÁVEL: Para alterar a cor do cabeçalho da grelha (Grupo, Análise, Horas, Média), modifique a linha 'background-color' abaixo. */
#lancamento-grid-table thead th {
    background-color: #023e8a; /* Cor azul para o cabeçalho */
    color: white;
    font-weight: bold;
    padding: 10px 8px;
    position: sticky;
    top: 0;
    z-index: 3;
}

/* Colunas fixas no cabeçalho */
#lancamento-grid-table thead th:first-child,
#lancamento-grid-table thead th:nth-child(2) {
    z-index: 4; /* Acima das outras colunas */
}

/* MODIFICÁVEL: Cor do cabeçalho da coluna "Média" */
#lancamento-grid-table thead th:last-child {
    background-color: #0096c7; /* Azul médio para o cabeçalho da média */
}


/* Célula de Grupo (vertical) */
.group-cell {
    background-color: #eaf4ff; /* MODIFICADO: Cor de fundo azul claro para a coluna Grupo */
    font-weight: bold;
    color: #333;
    padding: 12px;
    text-align: left !important;
    vertical-align: middle; /* Centraliza o texto verticalmente */
    position: sticky;
    left: 0;
    z-index: 2;
    min-width: 120px;
}

/* Célula de Análise */
.analysis-cell {
    background-color: #eaf4ff; /* MODIFICADO: Cor de fundo azul claro para a coluna Análise */
    font-weight: normal;
    color: #555;
    padding: 12px;
    text-align: left !important;
    position: sticky;
    left: 120px; /* Ajuste conforme a largura da célula de grupo */
    z-index: 2;
    min-width: 150px;
}

/* Células Min e Max */
.min-max-header {
    background-color: #6c757d; /* Cinza escuro para o cabeçalho Min/Max */
}
.min-max-cell {
    background-color: #f0f0f0;
    font-weight: 500;
    color: #333;
    padding: 12px 8px;
}

/* Célula de Média */
/* MODIFICÁVEL: Cor de fundo das células da coluna "Média" */
.media-column {
    background-color: #e6f7ff; /* Azul muito claro para as células da média */
    font-weight: bold;
    padding: 12px 8px;
}

/* Inputs dentro da tabela */
.daily-grid-input {
    width: 100%;
    height: 100%;
    border: none;
    background-color: white;
    text-align: center;
    font-size: 0.9rem;
    padding: 12px 8px;
    box-sizing: border-box;
    color: #333;
    transition: background-color 0.2s, box-shadow 0.2s;
}

.daily-grid-input:focus {
    outline: none;
    background-color: #e6f7ff;
    box-shadow: inset 0 0 0 2px #0077b6;
}

/* Ações e Botão Lançar */
.lancamento-actions {
    padding: 16px;
    text-align: right;
    background-color: #f0f0f0;
    border: 1px solid #dcdcdc;
    border-top: none;
    border-radius: 0 0 8px 8px;
}

.btn-lancar {
    background-color: #007bff; /* Azul forte */
    color: white;
    border: none;
    padding: 10px 24px;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-lancar:hover {
    background-color: #0056b3;
}

/* Garante que as células fixas não mudem de cor no hover da linha */
body:not(.dark-mode) #lancamento-grid-table tbody tr:hover .group-cell, 
body:not(.dark-mode) #lancamento-grid-table tbody tr:hover .analysis-cell {
    background-color: #eaf4ff; /* MODIFICADO: Mantém o azul claro no hover */
}
body:not(.dark-mode) #lancamento-grid-table tbody tr:hover .min-max-cell {
    background-color: #f0f0f0;
}
body:not(.dark-mode) #lancamento-grid-table tbody tr:hover .media-column {
    background-color: #e6f7ff; /* Mantém a cor da coluna Média no hover */
}


/* Adaptações para o Modo Escuro */
body.dark-mode .lancamento-header-controls,
body.dark-mode .lancamento-actions {
    background-color: #2c2c2c;
    border-color: #444;
}

body.dark-mode .responsible-group label {
    color: var(--cor-texto-principal);
}

body.dark-mode .custom-checkbox {
    background-color: #3a3a3a;
    border-color: var(--cor-primaria);
}

body.dark-mode #lancamento-grid-table {
    border-color: #444;
}

body.dark-mode #lancamento-grid-table th,
body.dark-mode #lancamento-grid-table td {
    border-color: #444;
}

body.dark-mode .group-cell, 
body.dark-mode .analysis-cell {
    background-color: rgba(0, 180, 216, 0.1); /* MODIFICADO: Cor azul claro para o modo escuro */
    color: var(--cor-texto-principal);
}
/* MODIFICÁVEL: Cor de fundo das células da coluna "Média" no modo escuro */
body.dark-mode .media-column {
    background-color: rgba(0, 150, 199, 0.15); /* Azul transparente para as células da média no modo escuro */
    color: var(--cor-texto-principal);
}
body.dark-mode .min-max-cell {
    background-color: #2c2c2c;
    color: var(--cor-texto-principal);
}

body.dark-mode .daily-grid-input {
    background-color: #3a3a3a;
    color: var(--cor-texto-principal);
}

body.dark-mode .daily-grid-input:focus {
    background-color: #454545;
    box-shadow: inset 0 0 0 2px var(--cor-primaria);
}

body.dark-mode #lancamento-grid-table tbody tr:hover .group-cell, 
body.dark-mode #lancamento-grid-table tbody tr:hover .analysis-cell {
    background-color: rgba(0, 180, 216, 0.1); /* MODIFICADO: Mantém o azul claro no hover (modo escuro) */
}
body.dark-mode #lancamento-grid-table tbody tr:hover .min-max-cell {
    background-color: #2c2c2c;
}
body.dark-mode #lancamento-grid-table tbody tr:hover .media-column {
    background-color: rgba(0, 150, 199, 0.15); /* Mantém a cor da coluna Média no hover (modo escuro) */
}

/* ====================================================== */
/* ESTILOS PARA FEEDBACK DE VALIDAÇÃO E BOTÃO DE SALVAR   */
/* ====================================================== */

/* Feedback de Validação de Range nos Inputs */
.daily-grid-input.input-invalid-range,
.daily-grid-input.input-invalid-range:focus {
    background-color: #fff0f1; /* Fundo vermelho claro */
    color: #b02a37;
    font-weight: bold;
}

.daily-grid-input.input-valid-range,
.daily-grid-input.input-valid-range:focus {
    background-color: #e8f5e9; /* Fundo verde claro */
}

/* Modo Escuro para o feedback de validação */
body.dark-mode .daily-grid-input.input-invalid-range,
body.dark-mode .daily-grid-input.input-invalid-range:focus {
    background-color: rgba(220, 53, 69, 0.25);
    color: #ff8a80;
}
body.dark-mode .daily-grid-input.input-valid-range,
body.dark-mode .daily-grid-input.input-valid-range:focus {
    background-color: rgba(25, 135, 84, 0.2);
}

/* Estado de "A Guardar..." do Botão Lançar */
.btn-lancar.is-saving {
    position: relative;
    cursor: wait;
    color: transparent !important; /* Esconde o texto "LANÇAR" */
    pointer-events: none; /* Previne cliques múltiplos */
}

/* Animação do spinner (loading) */
.btn-lancar.is-saving::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    margin-left: -10px;
    border: 3px solid rgba(255, 255, 255, 0.5);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* ====================================================== */
/* ESTILOS PARA DESTAQUE DE HORA ATUAL E TOOLTIP DE VMP   */
/* ====================================================== */

/* Destaque para o cabeçalho da coluna da hora atual */
#lancamento-grid-table thead .current-time-header {
    background-color: #0096c7; /* Um tom de azul para destaque */
    box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
    position: relative;
}

/* Pequeno triângulo para indicar a coluna atual */
.current-time-header::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid var(--cor-fundo);
}

body.dark-mode .current-time-header::after {
    border-bottom-color: #3a3a3a;
}

/* Destaque para as células da coluna da hora atual */
.current-time-cell {
    background-color: #e6f7ff;
}

body.dark-mode .current-time-cell {
    background-color: rgba(0, 180, 216, 0.1);
}

/* Estilos para a caixa de informação (Tooltip) */
.param-tooltip {
    position: absolute; /* Mudança para absolute para se posicionar relativamente à página */
    background-color: #212529;
    color: white;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    z-index: 1000;
    pointer-events: none;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    white-space: nowrap;
}

.param-tooltip.visible {
    opacity: 1;
    transform: translateY(0);
}

.param-tooltip strong {
    color: #ffc107; /* Amarelo para destacar os valores */
}

/* ====================================================== */
/* ESTILOS FINAIS PARA O CABEÇALHO (HEADER)               */
/* ====================================================== */

.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    width: 100%;
    box-sizing: border-box;
    padding: 16px 32px; /* Garante o padding */
}

/* --- 2. ESTILO DO CABEÇALHO PRINCIPAL (Logo ao lado dos dados) --- */
.header-left-content {
    display: flex;
    align-items: center;
    gap: 20px; /* Espaço entre o logo e o texto */
}

.header-logo-main {
    height: 65px; /* Altura do logo no cabeçalho */
    width: auto;
    object-fit: contain;
    /* Borda opcional para destacar se o logo for branco */
    /* background: white; padding: 2px; border-radius: 4px; */
}

.company-details-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/* Fim Bloco do nome da empresa */

.company-name-block {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

/* Título da Empresa (Nome Fantasia) */
.company-name-block strong {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--cor-primaria-escura);
    line-height: 1.2;
    display: block;
}
/* Fim Titulo Empresa (Nome fantasia) */

/* Subtítulo (Razão Social) */
.company-name-block span {
    font-size: 0.85rem;
    color: var(--cor-texto-secundario);
    margin-bottom: 6px;
    display: block;
}
/* Fim Subtítulo (Razão Socila) */

/* Grelha de Dados (CNPJ, Contato, Endereço) */
.company-details-grid {
    display: grid;
    grid-template-columns: auto auto; /* Duas colunas */
    column-gap: 25px; /* Espaço horizontal entre colunas */
    row-gap: 2px;     /* Espaço vertical entre linhas */
    font-size: 0.85rem;
    color: var(--cor-texto-principal);
    border-left: 2px solid var(--cor-borda); /* Linha vertical decorativa */
    padding-left: 15px;
}
/*Fim Gelria de Dados (CNPJ, Contato, Endereço) */

/* Ajuste para telas pequenas (celular) */
@media (max-width: 768px) {
    .header-logo-main { height: 40px; }
    .company-name-block strong { font-size: 1rem; }
    .company-details-grid { display: none; } /* Esconde detalhes no celular para não quebrar */
}
/*Fim Ajuste para telas pequenas (celular) */

.company-details-grid span strong {
    font-weight: 600;
}

.user-profile-header {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

/* ====================================================== */
/* ESTILO PARA O CARIMBO DO RELATÓRIO (QUEM GEROU)        */
/* ====================================================== */

.report-stamp {
    font-size: 0.9rem;
    color: var(--cor-texto-secundario);
    background-color: var(--cor-fundo);
    border: 1px solid var(--cor-borda);
    padding: 10px 15px;
    border-radius: var(--raio-borda);
    margin-bottom: 20px;
    text-align: center;
}

.report-stamp strong {
    color: var(--cor-texto-principal);
    font-weight: 600;
}

/* Estilos da Seleção de Estação */
.station-list-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
    max-height: 400px;
    overflow-y: auto;
}

.station-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    font-weight: 500;
    color: var(--cor-texto);
}

.station-btn:hover {
    background-color: var(--cor-primaria);
    color: white;
    border-color: var(--cor-primaria);
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.station-btn i {
    margin-left: 10px;
}

/* Aumentei para 1024px para garantir que apanha todos os telemóveis modernos */
@media screen and (max-width: 1024px) {
    
    /* 1. Forçar o Contentor a ficar em Coluna (Vertical) */
    .page-container {
        flex-direction: column !important;
        display: block !important; /* Garante que não tenta alinhar lado a lado */
        overflow-x: hidden;
        position: relative;
    }

    /* 2. Sidebar (Menu Lateral) - Escondida por padrão */
    .sidebar {
        position: fixed !important;
        top: 0;
        left: 0;
        height: 100vh;
        width: 280px !important;
        z-index: 2000 !important; /* Valor muito alto para ficar acima de tudo */
        background-color: var(--cor-sidebar);
        
        /* Lógica de esconder/mostrar */
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
        box-shadow: 4px 0 15px rgba(0,0,0,0.2);
    }

    /* Classe que o JS adiciona para mostrar o menu */
    .sidebar.open {
        transform: translateX(0) !important;
    }

    /* 3. Botão de Menu Flutuante */
    .mobile-menu-btn {
        display: flex !important;
        position: fixed;
        top: 15px;
        left: 15px;
        z-index: 2100 !important; /* Acima até da sidebar aberta */
        background-color: var(--cor-primaria);
        color: white;
        border: none;
        border-radius: 50%;
        width: 45px;
        height: 45px;
        justify-content: center;
        align-items: center;
        box-shadow: 0 4px 10px rgba(0,0,0,0.3);
        cursor: pointer;
    }
    
    .mobile-menu-btn i {
        width: 24px;
        height: 24px;
    }

    /* 4. Conteúdo Principal (Ocupa a largura toda) */
    .main-content-wrapper {
        margin-left: 0 !important;
        width: 100% !important;
        padding-top: 60px; /* Espaço para o topo não ficar escondido */
        position: relative;
        z-index: 1;
    }

    .main-content { 
        padding: 15px !important; 
        width: 100%;
        box-sizing: border-box;
    }

    /* 5. Header Principal */
    .main-header {
        padding: 10px 15px;
        flex-direction: row; /* Mantém linha no topo */
        justify-content: flex-end; /* Empurra tudo para a direita */
    }
    
    /* Esconde o logo e nome da empresa no topo para poupar espaço */
    .header-left-content,
    .company-details-header, 
    .header-logo-main {
        display: none !important; 
    }

    /* 6. CORREÇÃO CRÍTICA DAS TABELAS */
    .tabela-container, 
    .tabela-container-lancamento {
        display: block;
        width: 100%;
        overflow-x: auto; /* Permite rolar a tabela horizontalmente */
        -webkit-overflow-scrolling: touch;
    }

    /* 7. Dashboard em uma coluna */
    .dashboard-grid, 
    .form-grid,
    .lancamentos-layout {
        grid-template-columns: 1fr !important;
        display: grid !important;
        gap: 15px;
    }
    
    .lancamentos-col-left,
    .lancamentos-col-right {
        width: 100% !important;
    }

    /* Esconde a mensagem de boas vindas */
    #welcomeMessage {
        display: none;
    }
    
    /* Ajustes de Texto */
    h1, h2 { font-size: 1.5rem !important; }
    h3 { font-size: 1.2rem !important; }
}

/* --- CORREÇÃO 1: Ocultar botão mobile no Desktop por padrão --- */
.mobile-menu-btn {
    display: none; /* Esconde no PC */
    position: fixed;
    top: 15px;
    left: 15px;
    z-index: 2100;
    background-color: var(--cor-primaria);
    color: white;
    border: none;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    cursor: pointer;
}

/* --- CORREÇÃO 2: Ajuste do Layout para Mobile --- */
@media screen and (max-width: 1024px) {
    /* Mostra o botão APENAS no mobile */
    .mobile-menu-btn {
        display: flex !important; 
    }

    /* Sidebar como "Gaveta" flutuante */
    .sidebar {
        position: fixed !important;
        top: 0;
        left: 0;
        height: 100vh;
        width: 280px !important;
        z-index: 2000 !important;
        background-color: var(--cor-sidebar);
        transform: translateX(-100%); /* Escondida à esquerda */
        transition: transform 0.3s ease-in-out;
        box-shadow: 4px 0 15px rgba(0,0,0,0.2);
        display: flex !important; /* Garante que o flex interno funciona */
    }

    .sidebar.open {
        transform: translateX(0) !important; /* Mostra quando aberta */
    }

    /* Ajuste do conteúdo para não ficar por baixo do header */
    .main-content-wrapper {
        width: 100% !important;
        margin-left: 0 !important;
        padding-top: 60px; /* Espaço para o botão do menu não tapar o título */
    }

    /* --- CORREÇÃO 3: Tabelas Roláveis no Telemóvel --- */
    /* A classe .tabela-container já existe, vamos reforçá-la */
    .tabela-container, 
    .tabela-container-lancamento {
        display: block;
        width: 100%;
        overflow-x: auto; /* Scroll horizontal obrigatório */
        -webkit-overflow-scrolling: touch; /* Scroll suave no iPhone */
        white-space: nowrap; /* Impede quebras de linha feias */
    }
    
    /* Ajuste do input da grelha para ser tocável */
    .daily-grid-input {
        min-width: 60px; /* Tamanho mínimo para o dedo acertar */
    }
}

/* ====================================================== */
/* CORREÇÃO DE ROLAGEM HORIZONTAL (SCROLL) PARA TABELAS   */
/* ====================================================== */

/* 1. Aplica rolagem aos contentores das tabelas */
.tabela-container, 
.tabela-container-lancamento {
    display: block;
    width: 100%;
    /* overflow-x: auto cria a barra de rolagem apenas se necessário */
    overflow-x: auto; 
    /* Suaviza a rolagem em dispositivos móveis (iPhone/Android) */
    -webkit-overflow-scrolling: touch;
    /* Garante que a borda não atrapalhe o scroll */
    border: 1px solid var(--cor-borda); 
}

/* 2. Força as tabelas a manterem a sua largura mínima */
/* Isso impede que a tabela fique "espremida" e força o aparecimento do scroll */
#daily-grid-table,
#lancamento-grid-table,
.data-table {
    width: 100%;
    /* Define uma largura mínima para garantir que todas as colunas apareçam bem */
    /* Se a tela for menor que 1000px, a barra de rolagem vai aparecer */
    min-width: 1000px; 
    border-collapse: collapse;
}

/* 3. Ajuste específico para a tabela de Históricos (que é mais simples) */
/* Pode ter uma largura mínima menor */
#eventHistoryTable,
#bombeamentoHistoryTable,
#ocorrenciasTable,
#movimentacaoHistoryTable {
    min-width: 800px; 
}

/* 4. Melhoria visual da barra de rolagem (Scrollbar) */
/* Funciona em Chrome, Edge e Safari */
.tabela-container::-webkit-scrollbar,
.tabela-container-lancamento::-webkit-scrollbar {
    height: 12px; /* Altura da barra horizontal */
}

.tabela-container::-webkit-scrollbar-track,
.tabela-container-lancamento::-webkit-scrollbar-track {
    background: var(--cor-fundo);
    border-radius: 4px;
}

.tabela-container::-webkit-scrollbar-thumb,
.tabela-container-lancamento::-webkit-scrollbar-thumb {
    background-color: #ccc; /* Cor da barra */
    border-radius: 4px;
    border: 3px solid var(--cor-fundo); /* Cria um espaçamento visual */
}

.tabela-container::-webkit-scrollbar-thumb:hover,
.tabela-container-lancamento::-webkit-scrollbar-thumb:hover {
    background-color: var(--cor-primaria); /* Cor ao passar o rato */
}

/* ================================================================= */
/* SISTEMA DE GRELHA E TABELAS (GLOBAL E RESPONSIVO)                 */
/* ================================================================= */

/* 1. Contentor com Scroll (Aplica-se a TODAS as tabelas do app) */
.tabela-container, 
.tabela-container-lancamento {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important; /* Scroll horizontal */
    -webkit-overflow-scrolling: touch; /* Suavidade no iOS */
    background-color: var(--cor-card);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-borda);
    position: relative; /* Importante para o z-index funcionar */
}

/* 2. Configuração Base das Tabelas */
#lancamento-grid-table, 
#daily-grid-table,
#microbiologiaHistoryTable, /* Adicionado para aplicar ao histórico */
.data-table {
    width: 100%;
    min-width: 1200px !important; /* Força a largura para ativar scroll */
    border-collapse: separate; /* Necessário para sticky headers funcionarem bem */
    border-spacing: 0; /* Remove espaços entre células */
    table-layout: fixed; /* Garante que as larguras fixas sejam respeitadas */
}

/* 3. Definição de Larguras das Colunas (CRUCIAL PARA O ALINHAMENTO) */
/* Coluna 1: Grupo/Data */
#lancamento-grid-table th:first-child,
#lancamento-grid-table td:first-child,
.data-table th:first-child,
.data-table td:first-child {
    width: 110px !important;
    min-width: 110px !important;
    max-width: 110px !important;
    position: sticky;
    left: 0;
    z-index: 10; /* Fica acima do conteúdo normal */
}

/* Coluna 2: Análise/Cliente */
#lancamento-grid-table th:nth-child(2),
#lancamento-grid-table td:nth-child(2),
.data-table th:nth-child(2),
.data-table td:nth-child(2) {
    width: 140px !important;
    min-width: 140px !important;
    max-width: 140px !important;
    position: sticky;
    left: 110px; /* Começa exatamente onde a coluna 1 termina */
    z-index: 10;
    border-right: 2px solid var(--cor-borda); /* Linha divisória visual */
}

/* Cabeçalho (th) precisa de z-index maior para ficar acima das colunas laterais ao rolar verticalmente */
#lancamento-grid-table thead th,
.data-table thead th {
    position: sticky;
    top: 0;
    z-index: 20; /* Acima das células normais */
    background-color: var(--cor-primaria); /* Cor de fundo sólida */
    color: white;
    height: 45px; /* Altura fixa */
}

/* As células de cabeçalho das colunas fixas precisam de z-index AINDA maior (canto superior esquerdo) */
#lancamento-grid-table thead th:first-child,
#lancamento-grid-table thead th:nth-child(2),
.data-table thead th:first-child,
.data-table thead th:nth-child(2) {
    z-index: 30; /* O nível mais alto */
    background-color: var(--cor-primaria-escura); /* Destaque visual */
}

/* 4. Garantir Fundo Sólido (Evita transparência ao rolar) */
#lancamento-grid-table td:first-child,
#lancamento-grid-table td:nth-child(2),
.data-table td:first-child,
.data-table td:nth-child(2) {
    background-color: var(--cor-fundo); /* Cor sólida igual ao fundo */
    border-bottom: 1px solid var(--cor-borda);
    border-right: 1px solid var(--cor-borda);
}

/* Ajuste para Modo Escuro */
body.dark-mode #lancamento-grid-table td:first-child,
body.dark-mode #lancamento-grid-table td:nth-child(2),
body.dark-mode .data-table td:first-child,
body.dark-mode .data-table td:nth-child(2) {
    background-color: #1e1e1e; /* Fundo sólido escuro */
    color: white;
    border-color: #444;
}

/* 5. Estilo da Barra de Rolagem */
.tabela-container::-webkit-scrollbar,
.tabela-container-lancamento::-webkit-scrollbar {
    height: 12px;
    background: #f1f1f1;
}

.tabela-container::-webkit-scrollbar-thumb,
.tabela-container-lancamento::-webkit-scrollbar-thumb {
    background-color: var(--cor-primaria);
    border-radius: 6px;
    border: 2px solid #f1f1f1;
}

/* 6. Ajuste Mobile Específico */
@media screen and (max-width: 768px) {
    /* Reduz um pouco as larguras no celular para sobrar espaço para os dados */
    #lancamento-grid-table th:first-child,
    #lancamento-grid-table td:first-child {
        width: 90px !important;
        min-width: 90px !important;
        font-size: 0.8rem;
    }

    #lancamento-grid-table th:nth-child(2),
    #lancamento-grid-table td:nth-child(2) {
        width: 110px !important;
        min-width: 110px !important;
        left: 90px; /* Ajustado para a nova largura da coluna 1 */
        font-size: 0.8rem;
    }
    
    /* Garante que o resto da tabela tenha espaço */
    #lancamento-grid-table, .data-table {
        min-width: 800px !important;
    }
}

/* Em style.css */
.company-details-grid {
    /* Altera para 3 colunas para caber o email/site ou ajusta a altura */
    grid-template-columns: auto auto auto; 
    column-gap: 15px;
}

/* Para celular, escondemos detalhes menos importantes ou empilhamos */
@media (max-width: 1024px) {
    .company-details-header { display: none !important; } /* Já estava assim, mantém */
}

/* ====================================================== */
/* REGRAS VISUAIS PARA O CARGO OPERACIONAL                */
/* ====================================================== */

/* 1. Esconde o botão "Configurações" na barra lateral */
body.role-operacional .nav-button[data-view="view-configuracoes"] {
    display: none !important;
}

/* 2. Esconde TODOS os botões de ação (Lixo/Editar) nas tabelas */
body.role-operacional .btn-icon[data-action="removerItem"],
body.role-operacional .btn-icon[data-action="editarItem"],
body.role-operacional .btn-icon[data-action="deleteFullOrg"],
body.role-operacional .btn-icon[data-action="toggleStatusOrg"],
body.role-operacional .btn-delete-report,
body.role-operacional .btn-delete-fq,
body.role-operacional .btn-edit-fq,
body.role-operacional .actions button {
    display: none !important;
}

/* 3. Esconde opções de administração nos Checklists */
body.role-operacional #checklist-admin-controls,
body.role-operacional button[data-action="removeTask"] {
    display: none !important;
}

/* --- BADGES DE PRIORIDADE --- */
.badge-prio {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    display: inline-block;
}

.badge-baixa { background-color: #e2e3e5; color: #383d41; border: 1px solid #d6d8db; }
.badge-media { background-color: #cff4fc; color: #055160; border: 1px solid #b6effb; }
.badge-alta { background-color: #fff3cd; color: #664d03; border: 1px solid #ffecb5; }
.badge-critica { background-color: #f8d7da; color: #842029; border: 1px solid #f5c2c7; animation: pulse-red 2s infinite; }

@keyframes pulse-red {
    0% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.4); }
    70% { box-shadow: 0 0 0 6px rgba(220, 53, 69, 0); }
    100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); }
}

/* --- ABAS DA MICROBIOLOGIA --- */
.micro-tabs-container {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--cor-borda);
    padding-bottom: 2px;
}

.micro-tab-btn {
    padding: 10px 20px;
    border: 1px solid transparent;
    background: none;
    cursor: pointer;
    font-weight: 500;
    color: var(--cor-texto-secundario);
    border-radius: 8px 8px 0 0;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
}

.micro-tab-btn:hover {
    background-color: var(--cor-fundo);
    color: var(--cor-primaria);
}

.micro-tab-btn.active {
    background-color: var(--cor-card);
    border: 1px solid var(--cor-borda);
    border-bottom-color: var(--cor-card);
    color: var(--cor-primaria);
    font-weight: 700;
    margin-bottom: -2px; /* Sobrepõe a linha */
}

.micro-tab-content {
    display: none;
    animation: fadeIn 0.3s;
}

.micro-tab-content.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* No final do style.css */
.subgroup-box input[type="text"], 
.subgroup-box input[type="number"] {
    transition: border-color 0.2s, box-shadow 0.2s;
}

.subgroup-box input:focus {
    border-color: var(--cor-primaria) !important;
    box-shadow: 0 0 0 3px rgba(0, 119, 182, 0.1) !important;
    background-color: #fff !important;
}

/* Deixa o input de data do grupo mais visível se não estiver preenchido */
input[id^="date_group_"]:invalid {
    border-color: #f1c40f; 
}

/* --- OTIMIZAÇÃO DE PERFORMANCE (ADICIONAR NO FIM DO ARQUIVO) --- */

/* 1. Faz o navegador ignorar renderização de inputs fora da tela (Grelha) */
.daily-grid-input, .data-table tr {
    content-visibility: auto;
    contain-intrinsic-size: 1px 40px; /* Estima a altura da linha */
}

/* 2. Acelera a rolagem em telemóveis (Usa a placa gráfica) */
.tabela-container, 
.tabela-container-lancamento,
.sidebar-nav,
.main-content-wrapper {
    will-change: scroll-position;
    -webkit-overflow-scrolling: touch;
    backface-visibility: hidden; /* Truque para evitar "piscar" no Android */
}

/* 3. Evita que modais causem re-layout da página inteira */
.notification-modal, .sidebar {
    will-change: transform, opacity;
    contain: layout style; /* Isola o componente do resto da página */
}