@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* =================================================================== */
/* ==== 1. VARIÁVEIS DE TEMA ==== */
/* =================================================================== */

/* #region --- TEMA ESCURO (PADRÃO) --- */
:root {
    /* Cores de Fundo */
    --bg-primary: #0a0f1c;
    --bg-secondary: #1a1f2e;
    --bg-card: rgba(255, 255, 255, 0.03);
    --bg-header: rgba(26, 31, 58, 0.8);
    --form-bg: rgba(255, 255, 255, 0.05);

    /* Cores de Texto */
    --text-primary: #ffffff;
    --text-secondary: #b0b8c4;
    --text-accent: #00d4ff;

    /* Cores de Destaque (Accent) */
    --accent-blue: #00d4ff;
    --accent-green: #00ff88;
    --accent-orange: #ff9500;
    --accent-red: #ff5555;
    --accent-purple: #ab6eff;

    /* Cores de Borda e Sombra */
    --border-color: rgba(255, 255, 255, 0.1);
    --shadow-color-light: rgba(0, 212, 255, 0.1);
    --shadow-color-heavy: rgba(0, 0, 0, 0.4);

    /* Componentes Específicos */
    --toast-bg: rgba(26, 31, 58, 0.98);
    --modal-bg: #29325c;
    --modal-header-bg: #21294a;
    --btn-close-filter: none;
    --placeholder-color: rgba(255, 255, 255, 0.6);

    /* Variáveis para Chart.js */
    --bs-border-color-translucent: rgba(255, 255, 255, 0.1);
    --bs-body-color: #b0b8c4;
}
/* #endregion */

/* #region --- TEMA CLARO --- */
body.light-theme {
    /* Cores de Fundo */
    --bg-primary: #f0f4f8;
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    --bg-header: rgba(255, 255, 255, 0.8);
    --form-bg: #f8f9fa;

    /* Cores de Texto */
    --text-primary: #1a202c;
    --text-secondary: #4a5568;
    --text-accent: #007bff;

    /* Cores de Destaque (Accent) */
    --accent-blue: #007bff;
    --accent-green: #28a745;
    --accent-orange: #fd7e14;
    --accent-red: #dc3545;
    --accent-purple: #6f42c1;

    /* Cores de Borda e Sombra */
    --border-color: #dee2e6;
    --shadow-color-light: rgba(0, 123, 255, 0.1);
    --shadow-color-heavy: rgba(0, 0, 0, 0.1);

    /* Componentes Específicos */
    --toast-bg: rgba(255, 255, 255, 0.98);
    --modal-bg: #ffffff;
    --modal-header-bg: #f8f9fa;
    --btn-close-filter: invert(1);
    --placeholder-color: #6c757d;

    /* Variáveis para Chart.js no Tema Claro */
    --bs-border-color-translucent: rgba(0, 0, 0, 0.1);
    --bs-body-color: #4a5568;
}
/* #endregion */


/* =================================================================== */
/* ==== 2. ESTILOS GLOBAIS E OVERLAYS ==== */
/* =================================================================== */

* { margin: 0; padding: 0; box-sizing: border-box; }

body { background-color: var(--bg-primary); font-family: 'Inter', sans-serif; color: var(--text-primary); min-height: 100vh; overflow-x: hidden; transition: background-color 0.3s ease, color 0.3s ease; }

#loading-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--bg-primary); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 9999; backdrop-filter: blur(8px); transition: opacity 0.5s ease-out; }
#loading-overlay.hidden { opacity: 0; pointer-events: none; }
#loading-overlay .spinner-border { width: 4rem; height: 4rem; border-width: .35em; color: var(--accent-blue); }
#loading-overlay p { color: var(--text-primary); }

.offline-banner { position: fixed; bottom: 20px; right: 20px; background: rgba(220, 53, 69, 0.95); color: white; padding: 12px 24px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.3); z-index: 1050; animation: slideInRight 0.3s ease; }
.alert-banner { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, var(--accent-red), var(--accent-orange)); color: white; padding: 1rem 1.5rem; border-radius: 1rem; box-shadow: var(--shadow-heavy); z-index: 1080; display: none; align-items: center; gap: 0.75rem; font-weight: 600; }
.alert-banner.show { display: flex; animation: slideDown 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); }

/* =================================================================== */
/* ==== 3. CABEÇALHO (HEADER) ==== */
/* =================================================================== */

.header { background: var(--bg-header); backdrop-filter: blur(20px); border-bottom: 1px solid var(--border-color); padding: 0.75rem 0; margin-bottom: 2rem; position: sticky; top: 0; z-index: 1020; }
.logo-container { display: flex; align-items: center; gap: 0.75rem; }
.header-logo-img { height: 45px; width: auto; }
.logo-text { display: flex; flex-direction: column; line-height: 1.2; font-weight: 600; }
.logo-text span:first-child { font-size: 1rem; color: var(--text-primary); }
.logo-text span:last-child { font-size: 0.8rem; color: var(--text-secondary); }
.clock-container { display: flex; justify-content: center; align-items: center; gap: 1.5rem; }
.clock-time { font-size: 2.5rem; font-weight: 700; color: var(--text-accent); text-shadow: 0 0 15px var(--shadow-color-light); letter-spacing: 1px; }
.date-card-simple { width: 60px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 0.6rem; overflow: hidden; text-align: center; }
.date-card-month { background: linear-gradient(135deg, var(--accent-blue), var(--accent-green)); color: #0a0f1c; padding: 2px 0; font-size: 0.6rem; font-weight: 700; text-transform: uppercase; }
.date-card-day { font-size: 1.8rem; font-weight: 700; color: var(--text-primary); line-height: 1; }
.date-card-year { font-size: 0.7rem; color: var(--text-secondary); padding-bottom: 3px; }
.status-icons { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; row-gap: 6px; justify-content: flex-end; }
.status-icon, .btn-config, .btn-logout { height: 42px; border-radius: 0.6rem; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; }
.status-icon { width: 42px; font-size: 1.25rem; background: var(--form-bg); border: 1px solid var(--border-color); color: var(--text-secondary); }
.status-icon:hover { color: var(--text-primary); border-color: var(--accent-blue); }
.status-icon.connected { color: var(--accent-green); box-shadow: 0 0 10px rgba(0, 255, 136, 0.3); }
.status-icon.reconnecting i { color: var(--accent-orange); animation: fade 2s infinite linear; }
.btn-config { background: linear-gradient(135deg, var(--accent-blue), var(--accent-green)); color: #0a0f1c; border: none; padding: 0 1rem; box-shadow: 0 4px 15px rgba(0, 212, 255, 0.2); font-weight: 600; font-size: 0.9rem; gap: 0.5rem; }
.btn-config:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 212, 255, 0.3); }
.btn-logout { background: linear-gradient(135deg, var(--accent-orange), var(--accent-red)); color: #fff; border: none; width: 42px; font-size: 1.1rem; box-shadow: 0 4px 15px rgba(255, 149, 0, 0.2); }
.btn-logout:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255, 149, 0, 0.3); }
/* Dropdowns do cabeçalho (menu ☰ mobile + seletor de aquário) no tema escuro */
.status-icons .dropdown-menu, #aqua-switcher-menu { background: var(--modal-bg); border: 1px solid var(--border-color); box-shadow: var(--shadow-medium); }
.status-icons .dropdown-item, #aqua-switcher-menu .dropdown-item { color: var(--text-secondary); }
.status-icons .dropdown-item:hover, .status-icons .dropdown-item:focus,
#aqua-switcher-menu .dropdown-item:hover, #aqua-switcher-menu .dropdown-item:focus { background: rgba(0, 212, 255, 0.12); color: var(--text-primary); }
.status-icons .dropdown-item.active, #aqua-switcher-menu .dropdown-item.active { background: rgba(0, 212, 255, 0.18); color: var(--text-primary); }
.status-icons .dropdown-divider, #aqua-switcher-menu .dropdown-divider { border-color: var(--border-color); }
#mobile-menu-btn i { font-size: 1.4rem; }
/* Menu suspenso de recursos no cabeçalho (botão chamativo + itens coloridos) */
.header-menu-btn { display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 16px; border-radius:0.6rem;
    background:linear-gradient(135deg, var(--accent-blue), var(--accent-green)); color:#06121f; font-weight:700;
    border:none; box-shadow:0 4px 15px rgba(0,212,255,.28); cursor:pointer; transition:transform .2s, box-shadow .2s; font-size:0.9rem; }
.header-menu-btn:hover { transform:translateY(-2px); box-shadow:0 6px 22px rgba(0,212,255,.42); }
.header-menu { padding:8px !important; min-width:218px; border-radius:12px !important; }
.header-menu .dropdown-item { display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:9px; color:var(--text-primary); font-weight:500; }
.header-menu .dropdown-item:hover { background:rgba(255,255,255,.07); color:var(--text-primary); }
.header-menu .hm-ico { width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0; }
.header-menu .dropdown-divider { margin:6px 4px; border-color:var(--border-color); }
@media (max-width:575.98px){ .header-menu-btn { height:36px; padding:0 12px; } }
/* Ponto pulsando na aba Manutenção quando há tarefas pendentes */
.maint-dot { display:none; width:8px; height:8px; border-radius:50%; background:#f85149; margin-left:7px; vertical-align:middle;
    box-shadow:0 0 0 0 rgba(248,81,73,.6); animation:maintPulse 1.6s infinite; }
.maint-dot.on { display:inline-block; }
@keyframes maintPulse { 0%{box-shadow:0 0 0 0 rgba(248,81,73,.6)} 70%{box-shadow:0 0 0 7px rgba(248,81,73,0)} 100%{box-shadow:0 0 0 0 rgba(248,81,73,0)} }

/* =================================================================== */
/* ==== 4. CONTEÚDO PRINCIPAL (CARDS, GAUGES, SWITCHES) ==== */
/* =================================================================== */

.temp-card, .ph-card, .device-card, .chart-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 1.5rem; box-shadow: 0 8px 32px var(--shadow-color-heavy); transition: all 0.3s ease; height: 100%; }
.light-theme .temp-card, .light-theme .ph-card, .light-theme .device-card, .light-theme .chart-card { box-shadow: 0 4px 12px var(--shadow-color-heavy); }
.temp-card, .ph-card { padding: 2rem 1.5rem; text-align: center; }
.temp-label { font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 0.75rem; }
.gauge-container { display: flex; flex-direction: column; align-items: center; padding: 10px 0; }
.gauge-svg { width: 100%; max-width: 180px; height: auto; filter: drop-shadow(0 0 15px var(--shadow-color-light)); }
.gauge-value { font-size: 36px; font-weight: 700; fill: var(--text-primary); }
.gauge-unit { font-size: 16px; font-weight: 500; fill: var(--text-secondary); }
.gauge-labels { display: flex; justify-content: space-between; width: 100%; max-width: 200px; margin-top: 8px; font-size: 13px; color: var(--text-secondary); }
#temp-progress, #ph-progress { transition: stroke-dashoffset 1s cubic-bezier(0.4, 0, 0.2, 1); }
.next-event-bar { display: flex; justify-content: space-between; align-items: center; margin-top: 1.5rem; padding: 0.75rem 1rem; background: rgba(0, 0, 0, 0.1); border-radius: 0.75rem; border-top: 1px solid var(--border-color); }
.light-theme .next-event-bar { background: rgba(0, 0, 0, 0.03); }
.next-event-bar-label { display: flex; align-items: center; font-size: 0.9rem; color: var(--text-secondary); }
.next-event-bar-time { font-weight: 700; color: var(--text-accent); background: rgba(0, 212, 255, 0.1); padding: 0.25rem 0.75rem; border-radius: 0.5rem; cursor: pointer; transition: all 0.3s ease; }
.light-theme .next-event-bar-time { background: rgba(0, 123, 255, 0.08); }
.next-event-bar-time:hover { color: white; background-color: var(--accent-blue); }
.schedule-overview-card { margin-top: 1rem; padding: 1rem; background: rgba(0, 0, 0, 0.1); border-radius: 0.9rem; border: 1px solid var(--border-color); text-align: left; }
.light-theme .schedule-overview-card { background: rgba(0, 0, 0, 0.03); }
.schedule-overview-header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.75rem; }
.schedule-overview-title { display: flex; align-items: center; font-size: 0.9rem; font-weight: 600; color: var(--text-secondary); }
.schedule-overview-count { min-width: 2rem; padding: 0.2rem 0.6rem; border-radius: 999px; background: rgba(0, 212, 255, 0.12); color: var(--text-accent); font-weight: 700; text-align: center; }
.light-theme .schedule-overview-count { background: rgba(0, 123, 255, 0.08); }
.schedule-overview-list { display: flex; flex-direction: column; gap: 0.55rem; }
.schedule-overview-item { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.65rem 0.8rem; border-radius: 0.8rem; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.05); }
.light-theme .schedule-overview-item { background: rgba(0, 0, 0, 0.025); border-color: rgba(0, 0, 0, 0.05); }
.schedule-overview-time { font-weight: 700; color: var(--text-accent); white-space: nowrap; }
.schedule-overview-action { flex: 1; font-size: 0.92rem; color: var(--text-primary); }
.schedule-overview-empty { color: var(--text-secondary); font-size: 0.92rem; padding: 0.25rem 0; }
.device-card { padding: 1.5rem; text-align: center; }
.device-card:hover { transform: translateY(-5px); border-color: var(--accent-blue); }
.device-card.active { border-color: var(--accent-blue); background: linear-gradient(135deg, rgba(0, 212, 255, 0.08), rgba(0, 255, 136, 0.04)); box-shadow: 0 0 20px var(--shadow-color-light); }
.light-theme .device-card.active { background: linear-gradient(135deg, rgba(0, 123, 255, 0.05), rgba(40, 167, 69, 0.05)); }
.device-icon { font-size: 2.5rem; margin-bottom: 1rem; transition: color 0.3s ease; color: var(--text-secondary); }
.device-card.active .device-icon { color: var(--accent-blue); filter: drop-shadow(0 0 15px var(--accent-blue)); animation: glow 2s ease-in-out infinite alternate; }
.device-name { font-size: 1.1rem; font-weight: 600; margin-bottom: 0.75rem; color: var(--text-primary); }
.device-status { font-size: 0.9rem; padding: 0.5rem 1rem; border-radius: 2rem; font-weight: 500; display: inline-block; margin-bottom: 1rem; min-width: 120px; }
.device-status.on { background: rgba(0, 255, 136, 0.1); color: var(--accent-green); }
.light-theme .device-status.on { background: rgba(40, 167, 69, 0.15); color: #1e7e34; }
.device-status.off { background: rgba(128, 128, 128, 0.1); color: var(--text-secondary); }
.light-theme .device-status.off { background: rgba(0, 0, 0, 0.05); }
.device-status.auto { background: rgba(255, 149, 0, 0.1); color: var(--accent-orange); }
.light-theme .device-status.auto { background: rgba(253, 126, 20, 0.15); color: #dc6500; }
.device-status.manual-override { background: rgba(171, 110, 255, 0.1); color: var(--accent-purple); }
.light-theme .device-status.manual-override { background: rgba(111, 66, 193, 0.15); color: #59339d; }

/* Toggle Switch */
.toggle-switch { position: relative; width: 70px; height: 34px; background-color: var(--form-bg); border-radius: 17px; border: 1px solid var(--border-color); cursor: pointer; transition: all 0.3s ease; margin: 0 auto; }
.toggle-slider { position: absolute; top: 2px; left: 2px; width: 28px; height: 28px; background-color: var(--bg-secondary); border-radius: 50%; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); display: flex; align-items: center; justify-content: center; }
.light-theme .toggle-slider { background-color: #fff; }
.toggle-switch.on .toggle-slider { transform: translateX(36px); }
.toggle-slider::before { font-family: "bootstrap-icons" !important; font-style: normal; font-weight: normal !important; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 16px; transition: all 0.3s ease; }
.toggle-switch:not(.is-auto-mode):not(.on) .toggle-slider::before { content: "\F4C8"; color: var(--text-secondary); }
.toggle-switch.on:not(.is-auto-mode) { background-color: var(--accent-green); border-color: var(--accent-green); }
.toggle-switch.on:not(.is-auto-mode) .toggle-slider::before { content: "\F26A"; color: var(--accent-green); font-weight: bold !important; }
.toggle-switch.is-auto-mode { background-color: var(--accent-orange); border-color: var(--accent-orange); }
.toggle-switch.is-auto-mode .toggle-slider { background-color: var(--bg-primary); }
.light-theme .toggle-switch.is-auto-mode .toggle-slider { background-color: #fff; }
.toggle-switch.is-auto-mode .toggle-slider::before { content: "\F5D2"; color: var(--accent-orange); }

/* =================================================================== */
/* ==== 5. ABAS E GRÁFICOS ==== */
/* =================================================================== */

.right-tabs .nav-tabs { border-bottom: 1px solid var(--border-color); background: var(--bg-card); border-radius: 1rem 1rem 0 0; padding: 0.5rem; margin-bottom: 0; }
.right-tabs .nav-link { color: var(--text-secondary); border: none; padding: 0.75rem 1.5rem; font-weight: 500; border-radius: 0.75rem; transition: all 0.3s ease; background: transparent; }
.right-tabs .nav-link.active, .right-tabs .nav-link:hover { color: var(--text-accent); background: rgba(0, 212, 255, 0.1); }
.light-theme .right-tabs .nav-link.active, .light-theme .right-tabs .nav-link:hover { background: rgba(0, 123, 255, 0.1); }
.right-tabs .tab-pane { background: var(--bg-card); border: 1px solid var(--border-color); border-top: none; border-radius: 0 0 1rem 1rem; padding: 1.5rem; }
.chart-header { padding: 1.5rem; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }
.chart-title { font-size: 1.2rem; font-weight: 600; color: var(--text-primary); margin: 0; }
.chart-controls { display: flex; gap: 0.5rem; }
.chart-btn { padding: 0.5rem 1rem; border: 1px solid var(--border-color); background: transparent; color: var(--text-secondary); border-radius: 0.75rem; font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: all 0.3s ease; }
.chart-btn.active, .chart-btn:hover { background: var(--accent-blue); border-color: var(--accent-blue); color: #fff; box-shadow: 0 0 15px var(--shadow-color-light); }
.chart-body { padding: 1.5rem; min-height: 350px; position: relative; }
.chart-body canvas { transition: opacity 0.3s ease-in-out; }
.chart-loading { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; display: none; align-items: center; justify-content: center; }

/* =================================================================== */
/* ==== 6. MODAIS E FORMULÁRIOS ==== */
/* =================================================================== */

.modal-content { background: var(--modal-bg); border: 1px solid var(--border-color); border-radius: 1.5rem; }
.modal-header { border-bottom: 1px solid var(--border-color); background: var(--modal-header-bg); padding: 1.5rem; }
.modal-header .btn-close { filter: var(--btn-close-filter); }
.modal-title { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); }
.modal-body { padding: 1.5rem; color: var(--text-secondary); }
.modal-body h1, .modal-body h2, .modal-body h3, .modal-body h4, .modal-body h5, .modal-body h6 { color: var(--text-primary); }
.modal-body .card { background-color: var(--form-bg); border-color: var(--border-color); box-shadow: none; }
.modal-body .card .card-text { color: var(--text-secondary); }
.modal-body .card .fw-bold { color: var(--text-primary); }
.modal-body hr { border-top: 1px solid var(--border-color); }
.nav-tabs .nav-link { color: var(--text-secondary); border: none; font-weight: 500; transition: all 0.3s ease; }
.nav-tabs .nav-link.active, .nav-tabs .nav-link:hover { color: var(--text-accent); background-color: rgba(128, 128, 128, 0.1); }
.light-theme .nav-tabs .nav-link.active, .light-theme .nav-tabs .nav-link:hover { background-color: rgba(0, 123, 255, 0.1); }
#settingsModal .nav-tabs .nav-link.active, #settingsModal .nav-tabs .nav-link:hover { border-bottom: 2px solid var(--accent-blue); }
.form-control, .form-select { background: var(--form-bg); border: 1px solid var(--border-color); border-radius: 0.75rem; color: var(--text-primary); padding: 0.75rem; font-size: 0.95rem; transition: all 0.3s ease; }
.form-control:focus, .form-select:focus { background: var(--form-bg); border-color: var(--accent-blue); box-shadow: 0 0 0 0.2rem rgba(0, 212, 255, 0.2); outline: none; }
.light-theme .form-control:focus, .light-theme .form-select:focus { box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.15); }
.form-control::placeholder { color: var(--placeholder-color); opacity: 1; }
.cfg-info-panel { display: flex; flex-direction: column; gap: 0.7rem; }
.cfg-info-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem 1rem; border-radius: 0.9rem; background: rgba(0, 0, 0, 0.12); border: 1px solid var(--border-color); }
.light-theme .cfg-info-row { background: rgba(0, 0, 0, 0.03); }
.cfg-info-label { font-size: 0.92rem; font-weight: 600; color: var(--text-secondary); }
.cfg-info-value { font-size: 0.95rem; font-weight: 700; color: var(--text-primary); text-align: right; word-break: break-word; }
.cfg-info-note { margin-top: 0.85rem; padding: 0.9rem 1rem; border-radius: 0.9rem; background: rgba(0, 212, 255, 0.08); border: 1px solid rgba(0, 212, 255, 0.16); color: var(--text-primary); line-height: 1.45; }
.light-theme .cfg-info-note { background: rgba(0, 123, 255, 0.08); border-color: rgba(0, 123, 255, 0.12); }
@media (max-width: 575.98px) {
  .cfg-info-row { align-items: flex-start; flex-direction: column; }
  .cfg-info-value { text-align: left; }
}

/* Bootstrap Select Plugin */
.bootstrap-select .dropdown-toggle { background: var(--form-bg) !important; border-color: var(--border-color) !important; color: var(--text-primary) !important; }
.bootstrap-select .dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(0, 212, 255, 0.2) !important; border-color: var(--accent-blue) !important; }
.light-theme .bootstrap-select .dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.15) !important; }
.bootstrap-select .dropdown-menu { background: var(--modal-bg); border-color: var(--border-color); }
.bootstrap-select .dropdown-item { color: var(--text-secondary); }
.bootstrap-select .dropdown-item.active, .bootstrap-select .dropdown-item:hover { background: rgba(0, 212, 255, 0.1); color: var(--text-accent); }
.light-theme .bootstrap-select .dropdown-item.active, .light-theme .bootstrap-select .dropdown-item:hover { background: rgba(0, 123, 255, 0.1); }

/* =================================================================== */
/* ==== 7. NOTIFICAÇÕES (TOAST, POPOVER) ==== */
/* =================================================================== */

.toast-container { position: fixed; top: 20px; right: 20px; z-index: 1090; }
.custom-toast { background-color: var(--toast-bg); border: 1px solid var(--border-color); border-radius: 0.75rem; box-shadow: var(--shadow-heavy); min-width: 300px; color: var(--text-primary); }
.custom-toast .toast-header { background-color: transparent; color: var(--text-primary); border-bottom: 1px solid var(--border-color); }
.popover { background-color: var(--modal-bg); border-color: var(--border-color); box-shadow: var(--shadow-medium); }
.popover .popover-header { background-color: var(--bg-secondary); color: var(--text-primary); border-bottom-color: var(--border-color); }
.popover .popover-body { background-color: var(--modal-bg); color: var(--text-primary); padding: 0.5rem !important; }
.popover .popover-arrow::before { border-top-color: var(--border-color) !important; }
.popover .popover-arrow::after { border-top-color: var(--modal-bg) !important; }
#notification-bell { color: var(--text-secondary); cursor: pointer; transition: color 0.2s; }
#notification-bell:hover { color: var(--text-primary); }
.btn-reset { background: none; border: none; padding: 0; margin: 0; color: inherit; font: inherit; line-height: 1; cursor: pointer; }
.btn-reset:focus, .btn-reset:focus-visible { outline: none; box-shadow: 0 0 0 0.2rem rgba(0, 212, 255, 0.25); border-radius: 50%; }
.light-theme .btn-reset:focus, .light-theme .btn-reset:focus-visible { box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); }
.popover-body .notification-item { display: flex !important; align-items: center; text-align: left !important; text-decoration: none !important; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-color); color: var(--text-secondary); transition: background-color 0.2s, color 0.2s; white-space: nowrap; }
.popover-body .notification-item:last-child { border-bottom: none; }
.popover-body .notification-item:hover { background-color: rgba(128, 128, 128, 0.1); color: var(--text-primary); }
.light-theme .popover-body .notification-item:hover { background-color: rgba(0, 0, 0, 0.05); }

/* =================================================================== */
/* ==== 8. CORREÇÃO GLOBAL PARA TEMA CLARO ==== */
/* =================================================================== */

.light-theme .text-light, .light-theme .text-white { color: var(--text-primary) !important; }
.light-theme .text-secondary { color: var(--text-secondary) !important; }
.light-theme strong, .light-theme b { color: var(--text-primary) !important; }
.light-theme .list-group-item { background-color: transparent !important; color: var(--text-primary) !important; border-color: var(--border-color) !important; }
.light-theme .list-group-item .text-info { color: var(--accent-blue) !important; }
.light-theme #settingsModal .card.bg-dark { background-color: var(--bg-card) !important; border-color: var(--border-color); }

/* =================================================================== */
/* ==== 9. RESPONSIVIDADE ==== */
/* =================================================================== */

@media (max-width: 992px) {
    .header .row > div { display: flex; }
    .header .row > div:first-child { justify-content: flex-start; }
    .header .row > div:last-child { justify-content: flex-end; }
    .chart-header { flex-direction: column; align-items: flex-start; }
    .chart-controls { width: 100%; justify-content: center; }
}
@media (max-width: 767px) {
    .right-tabs .tab-pane, .chart-body, .temp-card, .ph-card { padding: 1rem; }
}
/* Cabeçalho compacto no celular (evita ícones amontoados/estourando) */
@media (max-width: 575.98px) {
    .status-icons { gap: 0.35rem; flex-wrap: wrap; row-gap: 0.4rem; }
    .status-icon, .btn-config, .btn-logout { height: 36px; }
    .status-icon, .btn-logout { width: 36px; font-size: 1.05rem; }
    .btn-config { padding: 0 0.55rem; font-size: 0.85rem; }
    .header-logo-img { height: 36px; }
    #aqua-switcher-btn { max-width: 150px !important; font-size: 0.78rem !important; }
}


/* =================================================================== */
/* ==== 10. WIDGET DE STATUS (NÍVEL DA ÁGUA / ATO) - VERSÃO FINAL ==== */
/* =================================================================== */

.ato-final-card {
    display: flex;
    align-items: center;
    background-color: var(--bg-card);
    padding: 1rem 1.5rem;
    border-radius: 1.5rem;
    border: 1px solid var(--border-color);
    box-shadow: 0 8px 32px var(--shadow-color-heavy);
    transition: all 0.3s ease;
    height: 100%;
}

.ato-final-icon {
    font-size: 3rem;
    margin-right: 1.5rem;
    color: var(--text-secondary);
    transition: color 0.3s ease;
}

.ato-final-content {
    flex-grow: 1;
}

.ato-final-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

.ato-final-status-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.ato-final-status-line .label {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.ato-final-status-line .value {
    font-weight: 700;
    font-size: 1rem;
}

/* --- Estados e Animações --- */

/* Cor dos textos de status (usa classes do Bootstrap) */
.text-success { color: var(--accent-green) !important; }
.text-warning { color: var(--accent-orange) !important; }
.text-info { color: var(--accent-blue) !important; }
.text-secondary { color: var(--text-secondary) !important; }

/* Animação para NÍVEL BAIXO */
.ato-final-card.status-low {
    animation: pulse-warning-custom 2s infinite;
}

/* Animação para REPONDO ÁGUA */
.ato-final-card.status-pumping {
    animation: pulse-info-custom 2s infinite;
}
.ato-final-card.status-pumping .ato-final-icon i {
    animation: spin 2s linear infinite;
}

/* Definições das animações */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@keyframes pulse-warning-custom {
    0% { box-shadow: 0 0 0 0 rgba(255, 149, 0, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(255, 149, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 149, 0, 0); }
}
@keyframes pulse-info-custom {
    0% { box-shadow: 0 0 0 0 rgba(0, 212, 255, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(0, 212, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 212, 255, 0); }
}
/* Adaptação das animações para tema claro */
.light-theme .ato-final-card.status-low { animation-name: pulse-warning-custom-light; }
.light-theme .ato-final-card.status-pumping { animation-name: pulse-info-custom-light; }

@keyframes pulse-warning-custom-light {
    0% { box-shadow: 0 0 0 0 rgba(253, 126, 20, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(253, 126, 20, 0); }
    100% { box-shadow: 0 0 0 0 rgba(253, 126, 20, 0); }
}
@keyframes pulse-info-custom-light {
    0% { box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(0, 123, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 123, 255, 0); }
}

/* Estado pendente para comandos cloud (feedback imediato no clique) */
.toggle-switch.pending {
    opacity: 0.75;
    pointer-events: none;
}

.toggle-switch.pending .toggle-slider {
    animation: cloud-toggle-pulse 0.9s ease-in-out infinite;
}

@keyframes cloud-toggle-pulse {
    0% { box-shadow: 0 0 0 0 rgba(0, 212, 255, 0.35); }
    70% { box-shadow: 0 0 0 8px rgba(0, 212, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 212, 255, 0); }
}

/* =================================================================== */
/* ==== 11. CORREÇÕES GLOBAIS DE TEMA E COMPONENTES BOOTSTRAP ======== */
/* =================================================================== */

/* --- Variáveis de sombra ausentes ---------------------------------- */
:root {
    --shadow-heavy:  0 8px 32px rgba(0, 0, 0, 0.50);
    --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.35);
}
body.light-theme {
    --shadow-heavy:  0 4px 16px rgba(0, 0, 0, 0.15);
    --shadow-medium: 0 2px  8px rgba(0, 0, 0, 0.10);
}

/* --- Color-scheme: ajuda controles nativos (select, input, scroll) - */
:root         { color-scheme: dark;  }
body.light-theme { color-scheme: light; }

/* --- text-white-75 (não existe no Bootstrap) ----------------------- */
.text-white-75 { color: rgba(255, 255, 255, 0.75) !important; }

/* --- Overrides de classes white/muted para tema claro --------------- */
.light-theme .text-white    { color: var(--text-primary)   !important; }
.light-theme .text-white-50 { color: var(--text-secondary) !important; }
.light-theme .text-white-75 { color: var(--text-primary)   !important; }
.light-theme .text-muted    { color: var(--text-secondary) !important; }

/* --- list-group-item: Bootstrap define fundo branco por padrão ----- */
.list-group-item {
    background-color: transparent;
    border-color: var(--border-color);
    color: var(--text-primary);
}

/* --- progress: fundo cinza claro do Bootstrap some no escuro ------- */
.progress { background-color: rgba(128, 128, 128, 0.20); }
.light-theme .progress { background-color: rgba(0, 0, 0, 0.10); }

/* --- card e card-header dentro de modais --------------------------- */
.modal-body .card {
    background-color: var(--form-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}
.modal-body .card-header {
    background-color: rgba(0, 0, 0, 0.12);
    border-color: var(--border-color);
    color: var(--text-primary);
}
.light-theme .modal-body .card-header { background-color: rgba(0, 0, 0, 0.04); }

/* --- form-label e textos de ajuda ---------------------------------- */
.form-label       { color: var(--text-primary);                }
.form-check-label { color: var(--text-secondary);              }
.form-text        { color: var(--text-secondary) !important;   }
.input-group-text {
    background-color: var(--form-bg);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

/* --- select options (melhora no Chrome/Edge) ----------------------- */
.form-select option {
    background-color: var(--modal-bg);
    color: var(--text-primary);
}

/* --- inputs desabilitados ------------------------------------------ */
.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
    background-color: rgba(128, 128, 128, 0.15);
    color: var(--text-secondary);
    border-color: var(--border-color);
    opacity: 1;
}
.light-theme .form-control:disabled,
.light-theme .form-control[readonly],
.light-theme .form-select:disabled {
    background-color: #e9ecef;
    color: #6c757d;
}

/* --- modal footer --------------------------------------------------- */
.modal-footer {
    border-top-color: var(--border-color);
    background-color: var(--modal-header-bg);
}

/* --- badge de texto legível no escuro (bg-secondary) --------------- */
.badge.bg-secondary { background-color: rgba(128,128,128,0.4) !important; color: var(--text-primary) !important; }
.light-theme .badge.bg-secondary { background-color: #6c757d !important; color: #fff !important; }

/* --- alert readability no tema claro ------------------------------- */
.light-theme .alert-info    { color: #0a58ca; }
.light-theme .alert-warning { color: #664d03; }
.light-theme .alert-danger  { color: #842029; }
.light-theme .alert-success { color: #0f5132; }

/* =================================================================== */
/* ==== 11b. COMPONENTES BOOTSTRAP ADICIONAIS (mesclado do modo local) */
/*      accordion, table, card e dropdown gerais com variáveis --bs-*  */
/* =================================================================== */

/* Dropdown menus (geral) — temas via variáveis do Bootstrap */
.dropdown-menu {
    background-color: var(--modal-bg);
    border-color: var(--border-color);
    --bs-dropdown-bg: var(--modal-bg);
    --bs-dropdown-border-color: var(--border-color);
    --bs-dropdown-color: var(--text-secondary);
    --bs-dropdown-link-color: var(--text-secondary);
    --bs-dropdown-link-hover-color: var(--text-primary);
    --bs-dropdown-link-hover-bg: rgba(255, 255, 255, 0.08);
    --bs-dropdown-divider-bg: var(--border-color);
}

/* Tabelas */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text-primary);
    --bs-table-border-color: var(--border-color);
    --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
    --bs-table-striped-color: var(--text-primary);
    --bs-table-hover-bg: rgba(255, 255, 255, 0.05);
    --bs-table-hover-color: var(--text-primary);
}
.light-theme .table {
    --bs-table-striped-bg: rgba(0, 0, 0, 0.03);
    --bs-table-hover-bg: rgba(0, 0, 0, 0.04);
}

/* Accordion */
.accordion-item {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
}
.accordion-button {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}
.accordion-button:not(.collapsed) {
    background-color: rgba(0, 212, 255, 0.08);
    color: var(--text-accent);
    box-shadow: inset 0 -1px 0 var(--border-color);
}
.accordion-button::after { filter: invert(1) brightness(0.8); }
.light-theme .accordion-button::after { filter: none; }

/* Card Bootstrap padrão (fora de modais) */
.card {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
}
.card-header, .card-footer {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-secondary);
}
.light-theme .card { background-color: var(--bg-card); border-color: var(--border-color); }

/* Badge escura */
.badge.bg-dark { background-color: var(--bg-secondary) !important; color: var(--text-primary) !important; }

/* Input group addon no tema claro */
.light-theme .input-group-text { background-color: #e9ecef; border-color: #dee2e6; color: #495057; }