/* === Fundo com imagem e efeito blur === */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("../img/fundo.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(8px);
  transform: scale(1.05);
  z-index: -2;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
   background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.55) 100%);
  z-index: -1;
}

:root{--bg:#0b122000;--card:#ffffff11;--text:#eaf2ff;--muted:#000000;--accent:#22c55e;--ok:#20c997;--warn:#ffcc00;--err:#ff6b6b}
*{box-sizing:border-box}
html,body{height:100%;margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,"Helvetica Neue",sans-serif;
  background:var(--bg);color:white;
  /* PERFORMANCE: Melhorar scroll e rendering */
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
}

header{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;background:#001a00;color:#fff;border-bottom:1px solid rgba(255,255,255,.15);justify-content:space-between}
header .title{font-weight:600;letter-spacing:.2px;color:inherit}
/* logo menor para cabeçalhos */
header img{height:34px;filter:none;transition:transform 0.2s ease}
header img:hover{transform:scale(1.05)}

@media (max-width: 768px) {
  header img{height:30px}
  header{padding:.5rem .75rem}
}

@media (max-width: 480px) {
  header img{height:26px}
  header{gap:.5rem}
}

header .meta{display:flex;gap:10px;align-items:center}

button{background:#22c55e;color:#001a00;border:0;border-radius:8px;padding:6px 10px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center}
button[disabled]{opacity:.5;cursor:not-allowed}
button svg{transition:transform 0.3s ease}
button:not([disabled]):hover svg{transform:rotate(180deg)}
button:not([disabled]):active svg{transform:rotate(360deg)}

#btn-refresh{min-width:36px;height:36px;padding:8px}
#btn-mqtt-reset{min-width:36px;height:36px;padding:8px;background:#ff6b6b;display:flex}
#btn-mqtt-reset:hover{background:#ff5252}

#map{width:100%;height:calc(100% - 58px)}
#msg{position:absolute;top:72px;left:12px;z-index:10;background:rgba(255,255,255,.95);border:1px solid rgba(0,0,0,.08);padding:.5rem .75rem;border-radius:.5rem;box-shadow:0 2px 10px rgba(0,0,0,.08);max-width:min(92vw,420px);font-size:.92rem;display:none;color:#111}

.toast{position:fixed;bottom:16px;right:16px;background:#0f1830;border:1px solid #2a3b60;border-radius:10px;padding:10px 12px;box-shadow:0 8px 24px rgba(0,0,0,.35);color:var(--text);z-index:1000}
.toast.ok{border-color:#1d7b5f;background:#0f3830}
.toast.err{border-color:#7b1d1d;background:#3f1010}

.mqtt-status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  background: rgba(255, 255, 255, 0.1);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: default;
}

.mqtt-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  transition: background-color 0.2s ease;
}

.mqtt-dot.online {background-color: #22c55e;}
.mqtt-dot.offline {background-color: #ef4444;}
.mqtt-dot.connecting {background-color: #f59e0b;animation: pulse 1.5s infinite;}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.mqtt-text {color: #9bb3d3;}
.mqtt-sync-time {color: #7a96b8;font-size: 0.7rem;font-family: 'Courier New', monospace;margin-left: 0.25rem;}

.gm-ui-hover-effect{display:none!important}

/* Modal de Confirmação */
.confirmation-modal {
  position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(11, 18, 32, 0.85);
  display: flex;align-items: center;justify-content: center;z-index: 10000;backdrop-filter: blur(8px);
  opacity: 0;visibility: hidden;transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.confirmation-modal.show {opacity: 1;visibility: visible;}

.confirmation-dialog {
  background: var(--card);border: 1px solid rgba(77, 163, 255, 0.2);border-radius: 16px;
  box-shadow: 0 32px 64px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(77, 163, 255, 0.1);
  max-width: 480px;width: 92%;transform: scale(0.85) translateY(40px);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);overflow: hidden;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Helvetica Neue", sans-serif;
}

.confirmation-modal.show .confirmation-dialog {transform: scale(1) translateY(0);}

.confirmation-header {
  background: linear-gradient(135deg, #0b2e5b 0%, #1565c0 50%, var(--accent) 100%);
  color: var(--text);padding: 1.75rem 2rem 1.5rem;text-align: center;position: relative;
  border-bottom: 1px solid rgba(77, 163, 255, 0.2);
}

.confirmation-title {font-size: 1.25rem;font-weight: 600;margin: 0;letter-spacing: 0.5px;
  color: var(--text);text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);}

.confirmation-body {padding: 2rem;background: var(--card);color: var(--text);}

.confirmation-message {font-size: 1.1rem;color: var(--text);margin-bottom: 1rem;
  line-height: 1.6;text-align: center;font-weight: 500;}

.confirmation-actions {display: flex;gap: 1rem;margin-top: 2rem;}

.confirmation-btn {flex: 1;padding: 1rem 1.5rem;border: none;border-radius: 12px;font-size: 1rem;
  font-weight: 600;cursor: pointer;transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;align-items: center;justify-content: center;gap: 0.75rem;font-family: inherit;
  letter-spacing: 0.3px;position: relative;overflow: hidden;}

.confirmation-btn-confirm {background: linear-gradient(135deg, var(--ok) 0%, #16a085 100%);
  color: #fff;box-shadow: 0 4px 16px rgba(32, 201, 151, 0.3);}

.confirmation-btn-confirm:hover {background: linear-gradient(135deg, #16a085 0%, var(--ok) 100%);
  transform: translateY(-2px);box-shadow: 0 8px 25px rgba(32, 201, 151, 0.4);}

.confirmation-btn-cancel {background: linear-gradient(135deg, var(--err) 0%, #e74c3c 100%);
  color: #fff;box-shadow: 0 4px 16px rgba(255, 107, 107, 0.3);}

.confirmation-btn-cancel:hover {background: linear-gradient(135deg, #e74c3c 0%, var(--err) 100%);
  transform: translateY(-2px);box-shadow: 0 8px 25px rgba(255, 107, 107, 0.4);}

@media (max-width: 520px) {
  .confirmation-dialog {width: 95%;margin: 1rem;border-radius: 12px;}
  .confirmation-header {padding: 1.5rem 1.5rem 1.25rem;}
  .confirmation-title {font-size: 1.1rem;}
  .confirmation-body {padding: 1.5rem;}
  .confirmation-message {font-size: 1rem;}
  .confirmation-actions {flex-direction: column;gap: 0.75rem;}
  .confirmation-btn {width: 100%;padding: 0.875rem 1.25rem;}
}

/* Hamburger inline ao lado do logo e side-menu */
.hamburger-inline{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:var(--text);cursor:pointer;padding:6px}
.hamburger-box{display:inline-block;width:22px;height:16px;position:relative}
.hamburger-inner,.hamburger-inner::before,.hamburger-inner::after{background:var(--text);border-radius:2px;height:3px;position:absolute;left:0;right:0;transition:transform .22s ease,opacity .18s ease}
.hamburger-inner{top:50%;transform:translateY(-50%)}
.hamburger-inner::before{content:'';top:-7px}
.hamburger-inner::after{content:'';bottom:-7px}
.hamburger-inline[aria-expanded="true"] .hamburger-inner{transform:rotate(45deg)}
.hamburger-inline[aria-expanded="true"] .hamburger-inner::before{transform:rotate(90deg);top:0}
.hamburger-inline[aria-expanded="true"] .hamburger-inner::after{opacity:0}

.side-menu{position:absolute;left:0;top:56px;height:auto;min-width:180px;max-width:86vw;background:linear-gradient(180deg,#081426 0%, #0b213a 100%);box-shadow:0 8px 32px rgba(2,6,23,.6);transform-origin:top left;transform:translateY(-6px) scale(.98);opacity:0;transition:transform .18s ease,opacity .18s ease;z-index:2200;padding:10px;border-radius:12px;color:var(--text);overflow:visible}
.side-menu.open{transform:translateY(0) scale(1);opacity:1}
.side-menu nav ul{list-style:none;padding:6px;margin:0}
.side-menu nav li{margin:0}
.side-menu nav a{display:block;padding:10px 12px;color:var(--text);text-decoration:none;border-radius:8px;font-weight:600}
.side-menu nav a:hover{background:rgba(77,163,255,0.06);color:var(--accent)}
.side-menu nav a.active{background:linear-gradient(90deg, rgba(77,163,255,0.06), rgba(77,163,255,0.02));border-left:3px solid var(--accent);padding-left:8px;color:var(--accent)}
.menu-backdrop{position:fixed;inset:0;background:rgba(2,6,23,0.55);z-index:1900;opacity:0;transition:opacity .25s ease}
.menu-backdrop.show{opacity:1}

/* Prevent hidden side-menu from intercepting pointer events (fix mobile tap issues) */
.side-menu:not(.open){pointer-events:none}
.menu-backdrop{pointer-events:none}
.menu-backdrop.show{pointer-events:auto}

@media (min-width: 900px){
  /* em telas largas, menu pode ser usado como drawer, mantendo botão inline */
  .side-menu{width:300px}
}

/* Responsive tweaks for small screens (mobile-first adjustments) */
@media (max-width: 520px) {
  /* Empilhar o header: logo em cima, controles (filtros) embaixo em uma linha */
  header{padding:.5rem .75rem;flex-direction:column;align-items:flex-start}
  /* cada grupo do header ocupa 100% da largura para controlar o fluxo */
  header > div{display:flex;align-items:center;width:100%}
  header > div:first-child{gap:.5rem}

  /* filtros: linha única com overflow horizontal (scroll) se necessário */
  .filtros{flex-direction:row;align-items:center;gap:.75rem;width:100%;overflow:auto;padding-bottom:6px}
  .filtros label{white-space:nowrap;flex:0 0 auto}
  .filtros input, .filtros select{width:auto;min-width:90px;box-sizing:border-box}
  /* garantir que o botão buscar não quebre a linha */
  #btn-buscar{width:40px;height:40px;padding:6px;border-radius:8px;flex:0 0 auto}

  /* estilo específico para o campo bomba que agora fica na primeira linha */
  .bomba-inline{margin-left:0.5rem;display:inline-flex;align-items:center}
  .bomba-inline label{display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap}
  .bomba-inline input{width:70px;min-width:60px}

  /* compact meta area (hide text, keep icon optional) */
  .mqtt-text,.mqtt-sync-time{display:none}
  .mqtt-status{padding:.15rem .4rem}
  /* make hamburger larger and more tappable */
  .hamburger-inline{width:44px;height:44px}
  /* side menu becomes full width panel under header */
  .side-menu{position:fixed;left:0;right:0;top:48px;border-radius:0;max-width:100vw;padding:8px 10px}
  .side-menu nav a{padding:12px}
  .menu-backdrop{background:rgba(2,6,23,0.6)}
}

@media (max-width: 360px) {
  header img{height:22px}
  .hamburger-inline{width:40px;height:40px}
  .filtros input, .filtros select{padding:6px}
  .side-menu nav a{font-size:0.95rem;padding:10px}
}

/* Table wrapper to allow horizontal scrolling on small screens */
.table-wrap{width:100%;overflow:auto;-webkit-overflow-scrolling:touch}
.table-wrap table{min-width:600px}

/* Responsive stacked table for small screens: hide the header and show each row as a card */
@media (max-width: 520px) {
  .table-wrap table{min-width:0;width:100%}
  .table-wrap thead{display:none}
  /* transformar tabela em blocos empilhados */
  .table-wrap table, .table-wrap tbody, .table-wrap tr, .table-wrap td{display:block;width:100%}
  .table-wrap tr{margin-bottom:10px;border-radius:8px;padding:6px;background:var(--card);border:1px solid rgba(0, 0, 0, 0.03)}
  /* célula: rótulo (pseudo) + conteúdo; controlar largura do rótulo por coluna */
  .table-wrap td{padding:6px 8px;text-align:left;border-bottom:none;display:flex;gap:8px;align-items:center;font-size:0.95rem}
  .table-wrap td:before{content:attr(data-label);font-weight:600;color:var(--muted);margin-right:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 0 28%;max-width:28%}
  /* tornar o conteúdo da célula flexível para ocupar o restante */
  .table-wrap td > *{flex:1 1 auto}
  .table-wrap td{word-break:break-word}
  /* ajustar larguras por coluna para melhorar leitura: Estado, Data, Hora, Usuário */
  /* novas larguras sugeridas: menor para rótulos e mais espaço para usuário */
  .table-wrap tr td:nth-child(1):before{flex-basis:20%;max-width:20%}
  .table-wrap tr td:nth-child(2):before{flex-basis:20%;max-width:20%}
  .table-wrap tr td:nth-child(3):before{flex-basis:14%;max-width:14%}
  .table-wrap tr td:nth-child(4):before{flex-basis:46%;max-width:46%}
  /* last cell visual tweak */
  .table-wrap td:last-child{border-bottom:none}
}

/* === Glassmorphism parcial aplicado === */
.confirmation-dialog,
.table-wrap tr,
.toast {
  background: var(--card);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.18);
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(77, 163, 255, 0.08);
}

.side-menu {
  background: rgba(11, 19, 33, 0.8);
  backdrop-filter: blur(8px);
}

.confirmation-header {
  background: linear-gradient(135deg, rgba(11, 46, 91, 0.95) 0%, rgba(21, 101, 192, 0.95) 50%, rgba(77, 163, 255, 0.9) 100%);
}

body.historico-page {
  /* fallback for browsers without pseudo-element support */
  background: linear-gradient(180deg, #00031a 0%, #06052a 100%);
  color: var(--text);
}

/* esconder a imagem de fundo que é aplicada por body::before e usar o gradiente desejado */
body.historico-page::before { display: none; }
body.historico-page::after { background: linear-gradient(180deg, #00031a00 0%, #06052a 100%); }