/* ==========================================================================
   Artemis — Painel de Monitoramento
   Tema claro, cor primária teal.

   IMPORTANTE: o dash2.js reescreve o atributo class do elemento .pump-status
   a cada 5 segundos (className = "badge pump-status bg-success|bg-secondary").
   Por isso o estado da bomba é estilizado pelo atributo [data-status], que o
   JS preserva — nunca por classes próprias, que seriam apagadas no refresh.
   ========================================================================== */

:root {
    /* Marca */
    --teal-800: #115E59;
    --teal-700: #0F766E;
    --teal-600: #0D9488;
    --teal-500: #14B8A6;
    --teal-100: #CCFBF1;
    --teal-50:  #F0FDFA;

    /* Neutros */
    --ink:      #0F172A;
    --ink-soft: #475569;
    --muted:    #94A3B8;
    --line:     #E2E8F0;
    --surface:  #FFFFFF;
    --canvas:   #F1F5F9;

    /* Estado */
    --off:      #94A3B8;

    --radius:    12px;
    --radius-sm: 8px;
}

body {
    background-color: var(--canvas);
    color: var(--ink);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   Navbar
   -------------------------------------------------------------------------- */

.navbar {
    min-height: 48px;
    padding-block: 0;
    background: var(--teal-700);
}

.navbar > .container {
    min-height: 48px;
}

.navbar-brand {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding-block: 0;
    font-size: .9375rem;
    font-weight: 600;
    letter-spacing: -.01em;
}

.navbar-brand img {
    height: 26px;
}

.navbar .nav-link {
    display: flex;
    align-items: center;
    gap: .375rem;
    padding: .3rem .625rem;
    border-radius: var(--radius-sm);
    font-size: .875rem;
    font-weight: 500;
    color: rgba(255, 255, 255, .85);
    transition: background-color .18s ease, color .18s ease;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus-visible {
    background: rgba(255, 255, 255, .14);
    color: #fff;
}

.navbar .nav-link.active {
    background: rgba(255, 255, 255, .18);
    color: #fff;
}

/* Sino de notificações — injetado em runtime pelo alert-notifications.js */
.notification-badge .nav-link { position: relative; }
.notification-badge .nav-link::after { display: none; }

.notification-badge .badge {
    position: absolute;
    top: 0;
    right: 0;
    background: #F43F5E;
    font-size: .625rem;
    padding: .2em .45em;
    border-radius: 999px;
}

/* --------------------------------------------------------------------------
   Card do dispositivo
   -------------------------------------------------------------------------- */

.device-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 1rem;
}

.device-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .625rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--line);
}

.device-title {
    display: flex;
    align-items: center;
    gap: .625rem;
    min-width: 0;
}

.device-title .icon-badge {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 8px;
    background: var(--teal-50);
    color: var(--teal-600);
    font-size: 1.125rem;
}

.device-title h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.device-title .device-sub {
    display: flex;
    align-items: center;
    gap: .3rem;
    margin-top: .1rem;
    font-size: .8125rem;
    color: var(--muted);
}

/* Chip online/offline — reflete se o reservatório reportou nos últimos 5 min */
.link-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .7rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .02em;
    background: var(--teal-50);
    color: var(--teal-700);
    border: 1px solid var(--teal-100);
}

.link-chip[data-online="0"] {
    background: #F8FAFC;
    color: var(--ink-soft);
    border-color: var(--line);
}

.link-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--teal-500);
    animation: ping 2s ease-out infinite;
}

.link-chip[data-online="0"] .link-dot {
    background: var(--muted);
    animation: none;
}

@keyframes ping {
    0%   { box-shadow: 0 0 0 0 rgba(20, 184, 166, .55); }
    70%  { box-shadow: 0 0 0 6px rgba(20, 184, 166, 0); }
    100% { box-shadow: 0 0 0 0 rgba(20, 184, 166, 0); }
}

/* --------------------------------------------------------------------------
   Corpo: medidor + gráfico + métricas
   -------------------------------------------------------------------------- */

.device-body {
    display: grid;
    grid-template-columns: minmax(200px, 260px) 1fr;
    gap: 1rem;
    padding: 1rem;
}

.gauge {
    height: 200px;
}

.chart-pane {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pane-label {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .25rem;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
}

.chart {
    flex: 1;
    min-height: 240px;
}

/* --------------------------------------------------------------------------
   Bombas — indicador de estado em LED, não em botão
   -------------------------------------------------------------------------- */

.pumps {
    padding: 0 1rem 1rem;
}

.pumps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: .5rem;
}

.pump {
    padding: .625rem .75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: #FCFDFE;
    transition: border-color .25s ease, background-color .25s ease;
}

/* Bomba ligada: o card esquenta em teal. Ancorado no data-status do badge
   interno, o único atributo que o dash2.js preserva ao reescrever a classe. */
.pump:has(.pump-status[data-status="1"]) {
    border-color: var(--teal-100);
    background: var(--teal-50);
}

.pump-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}

/* O LED. Fica cinza por padrão e acende junto com o data-status da bomba. */
.led {
    width: 9px;
    height: 9px;
    flex: none;
    border-radius: 50%;
    background: #CBD5E1;
    transition: background-color .3s ease, box-shadow .3s ease;
}

.pump-head:has(.pump-status[data-status="1"]) .led {
    background: var(--teal-600);
    box-shadow: 0 0 0 3px rgba(13, 148, 136, .18);
    animation: led-blink 2.4s ease-in-out infinite;
}

@keyframes led-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: .45; }
}

.pump-icon {
    flex: none;
    font-size: 1.0625rem;
    color: var(--muted);
}

.pump-head:has(.pump-status[data-status="1"]) .pump-icon {
    color: var(--teal-600);
}

.pump-name {
    flex: 1;
    min-width: 0;
    font-size: .875rem;
    font-weight: 600;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Estado da bomba: texto discreto, sem forma de botão.
   O dash2.js sobrescreve a classe com "badge pump-status bg-success" ou
   "bg-secondary", então neutralizamos as duas variantes do Bootstrap. */
.pump-status,
.pump-status.bg-success,
.pump-status.bg-secondary {
    flex: none;
    padding: 0;
    border-radius: 0;
    background: transparent !important;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--muted);
    transition: color .3s ease;
}

.pump-status[data-status="1"],
.pump-status.bg-success[data-status="1"],
.pump-status.bg-secondary[data-status="1"] {
    color: var(--teal-700);
}

/* Rodapé: limites de acionamento e horas nas últimas 24h */
.pump-meta {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-top: .5rem;
    padding-top: .5rem;
    border-top: 1px solid var(--line);
    font-size: .75rem;
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
}

.pump:has(.pump-status[data-status="1"]) .pump-meta {
    border-top-color: var(--teal-100);
}

.pump-meta span {
    display: flex;
    align-items: center;
    gap: .2rem;
    white-space: nowrap;
}

.pump-meta .meta-end {
    margin-left: auto;
    color: var(--muted);
}

.pump-meta iconify-icon {
    font-size: .9375rem;
    color: var(--muted);
}

/* --------------------------------------------------------------------------
   Estado vazio
   -------------------------------------------------------------------------- */

.empty {
    padding: 4rem 1.5rem;
    text-align: center;
    background: var(--surface);
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    color: var(--ink-soft);
}

.empty iconify-icon {
    font-size: 2.75rem;
    color: var(--muted);
}

.empty h2 {
    margin: .75rem 0 .25rem;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--ink);
}

.empty p {
    margin: 0;
    font-size: .9375rem;
}

/* --------------------------------------------------------------------------
   Responsivo
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
    .device-body {
        grid-template-columns: 1fr;
    }

    .gauge {
        height: 200px;
    }
}

@media (max-width: 575px) {
    .device-head,
    .device-body {
        padding: 1rem;
    }

    .pumps {
        padding: 0 1rem 1rem;
    }

    .stats {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Componentes compartilhados — usados por notify.php, ajustes.php,
   relatorio.php, relatorio_horimetro.php e simulator.php.

   Este bloco retonaliza o Bootstrap (compilado com azul fixo no CDN, então
   sobrescrever só a variável --bs-primary não é suficiente) e define os
   cards de conteúdo dessas páginas no mesmo estilo flat do device-card.
   ========================================================================== */

/* Botões e controles — troca o azul padrão do Bootstrap por teal */
.btn-primary {
    --bs-btn-bg: var(--teal-600);
    --bs-btn-border-color: var(--teal-600);
    --bs-btn-hover-bg: var(--teal-700);
    --bs-btn-hover-border-color: var(--teal-700);
    --bs-btn-active-bg: var(--teal-800);
    --bs-btn-active-border-color: var(--teal-800);
    --bs-btn-disabled-bg: var(--teal-600);
    --bs-btn-disabled-border-color: var(--teal-600);
}

.btn-outline-primary {
    --bs-btn-color: var(--teal-700);
    --bs-btn-border-color: var(--teal-600);
    --bs-btn-hover-bg: var(--teal-600);
    --bs-btn-hover-border-color: var(--teal-600);
    --bs-btn-active-bg: var(--teal-700);
    --bs-btn-active-border-color: var(--teal-700);
}

.form-select:focus,
.form-control:focus {
    border-color: var(--teal-500);
    box-shadow: 0 0 0 .2rem rgba(13, 148, 136, .15);
}

.form-check-input:checked {
    background-color: var(--teal-600);
    border-color: var(--teal-600);
}

.form-range::-webkit-slider-thumb {
    background-color: var(--teal-600);
}

.form-range::-moz-range-thumb {
    background-color: var(--teal-600);
}

a {
    color: var(--teal-700);
}

/* Badges informativas (nível, status "ligada") — teal em vez do azul/verde padrão.
   :not(.pump-status) porque o badge da bomba tem design próprio (texto
   transparente, cor pelo LED) definido mais acima — não pode ser pego aqui. */
.badge.bg-info:not(.pump-status),
.badge.bg-primary:not(.pump-status),
.badge.bg-success:not(.pump-status) {
    background-color: var(--teal-600) !important;
}

/* --------------------------------------------------------------------------
   Cards de conteúdo (formulários, filtros, tabelas)
   -------------------------------------------------------------------------- */

.panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin-bottom: 1rem;
}

.panel-header {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--line);
    font-size: .9375rem;
    font-weight: 600;
    color: var(--ink);
}

.panel-header iconify-icon {
    color: var(--teal-600);
    font-size: 1.125rem;
}

.panel-body {
    padding: 1rem;
}

/* Sobrepõe .card do Bootstrap usado nas páginas ainda não convertidas para
   .panel — mesma aparência flat, sem sombra. */
.card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: none;
}

.card-header {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}

.card-header.bg-primary {
    background: var(--teal-700) !important;
    border-bottom-color: var(--teal-700);
}

/* --------------------------------------------------------------------------
   Tabelas
   -------------------------------------------------------------------------- */

.table {
    --bs-table-hover-bg: var(--teal-50);
    font-size: .875rem;
}

.table thead th {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--muted);
    border-bottom-width: 1px;
}

/* --------------------------------------------------------------------------
   Simulador — indicador de estado (device-status) e controles
   -------------------------------------------------------------------------- */

.control-panel {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1rem 1.125rem;
    box-shadow: none;
    background: var(--surface);
}

.nivel-value {
    color: var(--teal-700);
}

.device-status {
    background-color: var(--muted);
}

.device-status.on {
    background-color: var(--teal-600);
    box-shadow: 0 0 0 3px rgba(13, 148, 136, .18);
}

.device-status.off {
    background-color: var(--muted);
}

/* --------------------------------------------------------------------------
   Login
   -------------------------------------------------------------------------- */

.login-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: var(--canvas);
}

.login-card {
    width: 100%;
    max-width: 360px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 2rem 1.75rem;
}

.login-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .625rem;
    margin-bottom: 1.75rem;
    text-align: center;
}

.login-brand img {
    height: 44px;
}

.login-brand h1 {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--ink);
}

.login-brand p {
    margin: 0;
    font-size: .8125rem;
    color: var(--muted);
}

.login-hint {
    margin-top: 1.25rem;
    text-align: center;
    font-size: .75rem;
    color: var(--muted);
}

/* Acessibilidade: respeita quem desativou animações no sistema */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
    }
}