/**
 * @file style.css
 * @author Pedro Fragueiro
 * @description Estilos visuais RADAR Lamego.
 * @version 7.0.0 (Com Mobile Cards & Stale Data)
 */

/* VARIÁVEIS DE TEMA */
body {
    --cor-fundo: #f0f2f5; --cor-cartao: #ffffff; --cor-borda: #dcdcdc;
    --cor-texto: #1a1a1a; --cor-texto-sec: #555555; --cor-alerta: #ffc107;
    --cor-alarme: #dc3545; --cor-verde: #28a745; --cor-azul: #007bff;
    transition: background-color 0.2s ease, color 0.2s ease;
}
body[data-theme="dark"] {
    --cor-fundo: #1a1a1a; --cor-cartao: #2a2a2a; --cor-borda: #444;
    --cor-texto: #e0e0e0; --cor-texto-sec: #999;
}

/* GERAL */
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background-color: var(--cor-fundo); color: var(--cor-texto); margin: 0; padding: 0; }
.card { background-color: var(--cor-cartao); border-radius: 8px; border: 1px solid var(--cor-borda); padding: 20px; transition: background-color 0.2s ease; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.6; } 100% { opacity: 1; } }

/* HEADER */
header { display: flex; align-items: center; padding: 10px 20px; border-bottom: 1px solid var(--cor-borda); background-color: var(--cor-cartao); }
#logo-header { height: 50px; width: auto; margin-right: 15px; }
header h2 { margin: 0; color: var(--cor-texto); font-size: 1.25em; font-weight: 600; }
.header-title-short { display: none; }
#loading-indicator { display: none; margin-left: 15px; }
#loading-indicator .spinner { font-size: 1.5em; color: var(--cor-azul); display: inline-block; animation: spin 1.2s linear infinite; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

#theme-toggle { margin-left: auto; margin-right: 15px; padding: 5px 8px; font-size: 1.2em; background-color: transparent; border: 1px solid var(--cor-borda); border-radius: 5px; cursor: pointer; color: var(--cor-texto); }
#theme-toggle:hover { background-color: var(--cor-fundo); }
#silenciar-alarme { padding: 8px 15px; font-size: 0.9em; font-weight: bold; color: #fff; background-color: #dc3545; border: none; border-radius: 5px; cursor: pointer; display: none; }
#silenciar-alarme:hover { background-color: #c82333; }

/* DASHBOARD GRID */
.dashboard { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-areas: "avisos-titulo avisos-titulo avisos-titulo avisos-titulo" "avisos-wrapper avisos-wrapper avisos-wrapper avisos-wrapper" "hidro-titulo hidro-titulo hidro-titulo hidro-titulo" "hidro-status hidro-status hidro-status hidro-status" "kpi1 kpi2 kpi3 kpi4" "mapa mapa tabela tabela" "grafico-linha grafico-linha tabela tabela" "grafico-barras grafico-barras tabela tabela"; gap: 20px; padding: 20px; }
#avisos-titulo { grid-area: avisos-titulo; } .avisos-wrapper-dinamico { grid-area: avisos-wrapper; }
#hidro-titulo { grid-area: hidro-titulo; } #hidro-all-clear-banner { grid-area: hidro-status; }
#kpi-cota-lmg { grid-area: kpi1; } #kpi-baixo-sabor { grid-area: kpi2; } #kpi-saucelle { grid-area: kpi3; } #kpi-miranda { grid-area: kpi4; } 
.map-container { grid-area: mapa; } .table-container { grid-area: tabela; } #evolucao-container { grid-area: grafico-linha; } #caudais-container { grid-area: grafico-barras; }

#avisos-titulo, #hidro-titulo { padding: 15px 20px; text-align: center; border: none; background-color: var(--cor-fundo); border-bottom: 2px solid var(--cor-borda); color: var(--cor-texto); }
#avisos-titulo h2, #hidro-titulo h2 { margin: 0; font-size: 1.5em; }
#hidro-all-clear-banner { display: none; flex-direction: column; justify-content: center; align-items: center; padding: 15px; border: 2px dashed var(--cor-verde); }

/* KPIs */
.kpi { text-align: center; padding: 5px 10px; display: flex; flex-direction: column; justify-content: center; cursor: pointer; transition: background-color 0.2s ease; }
.kpi:hover { background-color: var(--cor-fundo); }
#kpi-cota-lmg { background-color: var(--cor-fundo); border: 1px solid var(--cor-azul); }
.kpi h3 { margin: 0; font-size: 0.7em; color: var(--cor-texto-sec); display: flex; align-items: center; justify-content: center; }
.kpi .valor { font-size: 1.5em; font-weight: bold; color: var(--cor-azul); margin: 2px 0; transition: opacity 0.3s ease-in-out; }
.kpi .valor.fade-out { opacity: 0; }
.kpi .data { font-size: 0.6em; color: var(--cor-texto-sec); }
.kpi .tendencia { font-size: 0.85em; font-weight: bold; margin-top: 5px; color: var(--cor-texto-sec); }
.kpi .tendencia.subida-rapida, .kpi .tendencia.subida { color: var(--cor-alarme); }
.kpi .tendencia.subida-lenta { color: var(--cor-alerta); }
.kpi .tendencia.descida { color: var(--cor-verde); }
.kpi .tendencia.sem-dados { color: var(--cor-texto-sec); opacity: 0.8; font-weight: normal; }
.card.status-alerta { border-color: var(--cor-alerta); } .card.status-alarme { border-color: var(--cor-alarme); }
.card.status-alerta .valor { color: var(--cor-alerta); animation: pulse 1.5s infinite; } .card.status-alarme .valor { color: var(--cor-alarme); animation: pulse 1s infinite; }
.card.kpi.status-falha { border-color: var(--cor-texto-sec); background-color: var(--cor-fundo); cursor: default; }
.card.kpi.status-falha .valor, .card.kpi.status-falha .data { color: var(--cor-alarme); animation: none; }
.kpi .valor.sem-dados { color: var(--cor-texto-sec); opacity: 0.6; font-size: 1.5em; } .kpi .data.sem-dados { color: var(--cor-texto-sec); opacity: 0.8; }

/* MAPA & GRÁFICOS */
#map { height: 100%; min-height: 400px; border-radius: 8px; background-color: #333; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--cor-cartao); color: var(--cor-texto); }
.leaflet-control-layers { background: var(--cor-cartao); color: var(--cor-texto); border: 1px solid var(--cor-borda); }
.chart-wrapper { flex-grow: 1; position: relative; min-height: 300px; }
.map-marker { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #ffffff; box-shadow: 0 0 10px rgba(255, 255, 255, 0.8); text-align: center; line-height: 20px; font-size: 16px; font-weight: bold; color: #ffffff; }
.map-marker.trend-stable { background-color: var(--cor-azul); } .map-marker.trend-up { background-color: var(--cor-alarme); animation: pulse 1.5s infinite; }
.map-marker.trend-down { background-color: var(--cor-verde); } .map-marker.trend-sideways { background-color: var(--cor-alerta); }

/* TABELA */
.table-container { overflow-x: auto; }
#tabela-estacoes { width: 100%; border-collapse: collapse; }
#tabela-estacoes th, #tabela-estacoes td { padding: 12px; text-align: left; border-bottom: 1px solid var(--cor-borda); }
#tabela-estacoes th { font-size: 0.9em; color: var(--cor-texto-sec); }
#tabela-estacoes tbody tr { cursor: pointer; transition: background-color 0.2s ease; }
#tabela-estacoes tbody tr:hover { background-color: var(--cor-borda) !important; }
#tabela-estacoes tr.trend-up-row { background-color: rgba(220, 53, 69, 0.15); border-left: 5px solid var(--cor-alarme); }
#tabela-estacoes tr.trend-sideways-row { background-color: rgba(255, 193, 7, 0.1); border-left: 5px solid var(--cor-alerta); }
#tabela-estacoes td.taxa-variacao { font-weight: bold; text-align: right; }
#tabela-estacoes td.taxa-variacao.subida { color: var(--cor-alarme); } #tabela-estacoes td.taxa-variacao.descida { color: var(--cor-verde); }
#tabela-estacoes td.taxa-variacao.sem-dados { color: var(--cor-texto-sec); opacity: 0.8; font-weight: normal; text-align: center; }
.table-section-header { background-color: var(--cor-fundo); color: var(--cor-azul); font-weight: bold; font-size: 0.95em; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 2px solid var(--cor-azul); }
.table-section-header td { padding-top: 20px; padding-bottom: 8px; } .section-icon { margin-right: 8px; font-size: 1.2em; vertical-align: middle; }

/* ESTADO: DADOS ANTIGOS (STALE DATA) */
.dados-antigos {
    opacity: 0.6;
    filter: grayscale(100%);
    position: relative;
}
.dados-antigos td {
    color: var(--cor-texto-sec) !important;
}

/* AVISOS METEO */
.avisos-wrapper-dinamico { grid-area: avisos-wrapper; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; min-height: 120px; }
.aviso-agrupado { padding: 15px; border-left: 5px solid; min-height: 120px; }
.aviso-agrupado .aviso-meteo-header { display: flex; justify-content: space-between; font-weight: bold; font-size: 1.0em; margin-bottom: 5px; }
.aviso-agrupado .nivel { font-weight: bold; text-transform: uppercase; }
.aviso-agrupado .periodo { font-size: 0.8em; color: var(--cor-texto-sec); margin-bottom: 8px; }
.aviso-agrupado.nivel-green { border-left-color: var(--cor-verde); } .aviso-agrupado.nivel-green .nivel { color: var(--cor-verde); }
.aviso-agrupado.nivel-yellow { border-left-color: var(--cor-alerta); animation: pulse 2s infinite; } .aviso-agrupado.nivel-yellow .nivel { color: var(--cor-alerta); }
.aviso-agrupado.nivel-orange { border-left-color: #fd7e14; animation: pulse 1.5s infinite; } .aviso-agrupado.nivel-orange .nivel { color: #fd7e14; }
.aviso-agrupado.nivel-red { border-left-color: var(--cor-alarme); animation: pulse 1s infinite; } .aviso-agrupado.nivel-red .nivel { color: var(--cor-alarme); }

/* MODAL */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.75); z-index: 1000; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; padding: 20px; box-sizing: border-box; }
.modal-content { position: relative; width: 100%; max-width: 1000px; max-height: 90vh; padding: 20px; z-index: 1001; display: flex; flex-direction: column; transform: scale(0.9); transition: transform 0.3s ease; }
.modal-overlay.modal-open { opacity: 1; } .modal-overlay.modal-open .modal-content { transform: scale(1); }
.modal-close { position: absolute; top: 10px; right: 15px; font-size: 2.5em; color: var(--cor-texto-sec); background: none; border: none; cursor: pointer; line-height: 1; } .modal-close:hover { color: var(--cor-alarme); }
.modal-body { display: flex; gap: 20px; height: 100%; min-height: 400px; } .modal-chart-wrapper { flex-grow: 1; flex-basis: 60%; position: relative; min-height: 400px; }
#modal-map-wrapper { flex-grow: 1; flex-basis: 40%; min-height: 400px; } #modal-map { height: 100%; width: 100%; border-radius: 8px; background-color: #ccc; }

/* RODAPÉ E BOTÃO UPDATE */
footer { text-align: center; padding: 20px; border-top: 1px solid var(--cor-borda); color: var(--cor-texto-sec); font-size: 0.9em; }
#btn-update { margin-top: 10px; padding: 6px 12px; font-size: 0.85em; background-color: var(--cor-cartao); color: var(--cor-texto); border: 1px solid var(--cor-texto-sec); border-radius: 4px; cursor: pointer; opacity: 0.7; transition: opacity 0.2s; }
#btn-update:hover { opacity: 1; background-color: var(--cor-borda); }

@media (max-width: 1200px) { .dashboard { grid-template-columns: 1fr 1fr; grid-template-areas: "avisos-titulo avisos-titulo" "avisos-wrapper avisos-wrapper" "hidro-titulo hidro-titulo" "hidro-status hidro-status" "kpi1 kpi2" "kpi3 kpi4" "mapa mapa" "tabela tabela" "grafico-linha grafico-linha" "grafico-barras grafico-barras"; } }
@media (max-width: 768px) { .dashboard { grid-template-columns: 1fr; grid-template-areas: "avisos-titulo" "avisos-wrapper" "hidro-titulo" "hidro-status" "kpi1" "kpi2" "kpi3" "kpi4" "mapa" "tabela" "grafico-linha" "grafico-barras"; } header .header-title-full { display: none; } header .header-title-short { display: block; font-size: 1.1em; margin-right: 5px; } .kpi .valor, .kpi .valor.sem-dados { font-size: 1.5em; } .modal-body { flex-direction: column; } }

/* --- MOBILE CARDS (Transformação da Tabela) --- */
@media (max-width: 768px) {
    /* Esconder cabeçalho da tabela */
    #tabela-estacoes thead { display: none; }

    /* Transformar linhas em cartões */
    #tabela-estacoes tbody tr {
        display: flex;
        flex-wrap: wrap;
        background-color: var(--cor-cartao);
        margin-bottom: 15px;
        border: 1px solid var(--cor-borda);
        border-radius: 8px;
        padding: 15px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }
    
    /* Remover comportamentos de tabela padrão */
    #tabela-estacoes td {
        border: none;
        padding: 5px 0;
        width: 100%; /* Ocupa a largura toda por defeito */
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /* Destaque para o Nome da Estação (Topo do cartão) */
    #tabela-estacoes td:nth-child(1) {
        font-size: 1.2em;
        font-weight: bold;
        color: var(--cor-texto);
        border-bottom: 1px solid var(--cor-borda);
        padding-bottom: 10px;
        margin-bottom: 10px;
    }

    /* Esconder Colunas Menos Críticas em Mobile */
    #tabela-estacoes td:nth-child(2), 
    #tabela-estacoes td:nth-child(5) { 
        display: none; 
    }

    /* Reorganizar Valor (col 3) e Variação (col 4) */
    #tabela-estacoes td:nth-child(3) { order: 2; font-size: 1.4em; font-weight: bold; } /* Valor Grande */
    #tabela-estacoes td:nth-child(4) { order: 3; justify-content: flex-end; } /* Sparkline */
    #tabela-estacoes td:nth-child(6) { order: 4; color: var(--cor-texto-sec); font-size: 0.9em; } /* Efluente */

    /* Adicionar Labels via CSS */
    #tabela-estacoes td:nth-child(6)::before { content: "Saída (Efluente): "; font-weight: normal; }
}