/* ============================================================
   NEO Orion IoT — estilos globais
   Extraídos dos 3 blocos <style> originais do index.html
   ============================================================ */

/* ----- pequenos ajustes visuais ----- */
::-webkit-scrollbar {
  height: 10px;
  width: 10px
}

::-webkit-scrollbar-thumb {
  background: #e2e8f0;
  border-radius: 999px
}

::-webkit-scrollbar-thumb:hover {
  background: #cbd5e1
}

/* A regra `.neo-topbar` (painel arredondado com faixa laranja no topo) foi
   removida: o padrão NEO 360 assenta o conteúdo direto na página, sem caixa
   envolvendo as seções. Não há mais nenhum uso no HTML nem no JS. */

/* ----- flip card ----- */
.flip-card {
  perspective: 1200px;
  /* Define a min-height large enough for the expanded content */
  min-height: 380px;
}

/* O card de sensor (estilo mockup) tem leitura atual + 2x2 + footer.
   Precisa de mais altura que o card de gateway. */
.flip-card.sensor-card {
  min-height: 380px;
}

.flip-card.sensor-card .miniChart {
  height: 100% !important;
  width: 100% !important;
}

.flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.2, .8, .2, 1)
}

.flip-card.is-flipped .flip-inner {
  transform: rotateY(180deg)
}

.flip-face {
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.flip-face {
  backface-visibility: hidden;
  position: absolute;
  inset: 0;
}

.flip-front {
  /* Front Face (Details) */
  z-index: 2;
  transform: rotateY(0deg);
}

.flip-back {
  /* Back Face (Chart) - starts rotated */
  transform: rotateY(180deg);
}

/* ----- mini chart canvas ----- */
.miniChart {
  height: 110px !important;
}

.modemMiniChart {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* ----- store sidebar collapse ----- */
#storeSidebar {
  transition: width .25s ease
}

#storeSidebar.store-collapsed {
  width: 88px !important;
  padding: 12px
}

#storeSidebar.store-collapsed #storeSidebarContent {
  display: none
}

#storeSidebar.store-collapsed #storeHeaderRow {
  display: none
}

#storeSidebar.store-collapsed #storeMini {
  display: flex
}

#storeMini {
  display: none
}

/* ----- tech badges (rede) ----- */
.tech-badge {
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 12px;
  display: inline-block;
}

.tech-lora {
  background: #e0f2fe;
  color: #0369a1;
}

.tech-ble {
  background: #ede9fe;
  color: #5b21b6;
}

.tech-mixed {
  background: #ecfeff;
  color: #0f766e;
}

.tech-4g {
  background: #fff1f2;
  color: #be123c;
  border-color: #fda4af;
}

/* ----- ordenação de tabelas ----- */
th.sorted-asc::after {
  content: " ▲";
  font-size: 0.75rem;
}

th.sorted-desc::after {
  content: " ▼";
  font-size: 0.75rem;
}

/* ============================================================
   Cards animados da aba Análise (KPIs)
   ============================================================ */
.analise-card {
  --accent: #F58025;
  --accent-soft: rgba(245, 128, 37, .12);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(219, 229, 239, .95);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .99), rgba(255, 255, 255, .88)),
    radial-gradient(circle at 0 0, var(--accent-soft), transparent 42%);
  transform-style: preserve-3d;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.analise-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background:
    radial-gradient(circle at var(--mx, 50%) var(--my, 20%), color-mix(in srgb, var(--accent) 19%, transparent), transparent 34%);
  transition: opacity .28s ease;
}

.analise-card::after {
  content: "";
  position: absolute;
  top: -70%;
  left: -45%;
  width: 32%;
  height: 240%;
  opacity: 0;
  transform: rotate(24deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .72), transparent);
  transition: opacity .2s ease;
  pointer-events: none;
}

.analise-card:hover {
  transform: translateY(-8px) scale(1.012) perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  box-shadow: 0 24px 58px rgba(15, 42, 77, .16);
  border-color: color-mix(in srgb, var(--accent) 38%, #dbe5ef);
}

.analise-card:hover::before {
  opacity: 1;
}

.analise-card:hover::after {
  animation: analise-shine .95s ease forwards;
  opacity: 1;
}

@keyframes analise-shine {
  from { left: -50%; }
  to   { left: 118%; }
}

.analise-icon-box {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), 0 8px 20px rgba(15, 42, 77, .06);
  transition: transform .28s ease, box-shadow .28s ease, background-color .28s ease, color .28s ease;
}

.analise-card:hover .analise-icon-box {
  transform: translateY(-2px) scale(1.08) rotate(-3deg);
  box-shadow: 0 14px 26px color-mix(in srgb, var(--accent) 18%, transparent);
}

.analise-metric {
  letter-spacing: -0.055em;
  color: #102A4C;
  text-shadow: 0 8px 22px rgba(15, 42, 77, .08);
  transition: color .28s ease;
}

.analise-badge-pulse {
  animation: analise-breathe 2.6s ease-in-out infinite;
}

@keyframes analise-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.045); }
}

.analise-progress-fill {
  width: 0;
  transition: width 1s cubic-bezier(.2, .8, .2, 1);
}

.analise-mini-chip {
  transition: transform .24s ease, background-color .24s ease, color .24s ease;
}

.analise-card:hover .analise-mini-chip {
  transform: translateY(-2px);
  background: color-mix(in srgb, var(--accent) 10%, white);
  color: #102A4C;
}

.analise-sparkline path.line {
  stroke-dasharray: 720;
  stroke-dashoffset: 720;
  animation: analise-draw 1.7s ease forwards;
}

.analise-sparkline .dot {
  opacity: 0;
  animation: analise-pop .42s ease forwards;
}

@keyframes analise-draw { to { stroke-dashoffset: 0; } }
@keyframes analise-pop {
  from { transform: scale(.2); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}

.analise-float-dot {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--accent);
  opacity: .14;
  animation: analise-float 4s ease-in-out infinite;
}

@keyframes analise-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

/* ===== Card Baterias (aba Analise) ===== */
.bat-shell {
  width: 52px;
  height: 92px;
  border: 3px solid #cbd5e1;
  border-radius: 13px;
  position: relative;
  padding: 5px;
  background: #f8fafc;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8);
  transition: border-color .3s ease;
}

.bat-shell::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 6px;
  border-radius: 6px 6px 2px 2px;
  background: #cbd5e1;
  transition: background .3s ease;
}

.bat-fill-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
  background: #eef2f7;
}

.bat-fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
  border-radius: 7px 7px 6px 6px;
  /* A altura e animada por JS (requestAnimationFrame) em renderAnaliseBaterias,
     para nao depender de transition CSS (que e anulada por prefers-reduced-motion). */
}

/* Regra de cor: verde 100-70 | amarelo 69-40 | vermelho < 40 */
.bat-green .bat-fill  { background: linear-gradient(180deg, #86efac, #22c55e 52%, #16a34a); }
.bat-green .bat-shell { border-color: #22c55e; }
.bat-green .bat-shell::before { background: #22c55e; }
.bat-green .bat-pct   { color: #16a34a; }

.bat-yellow .bat-fill  { background: linear-gradient(180deg, #fde68a, #facc15 52%, #eab308); }
.bat-yellow .bat-shell { border-color: #f59e0b; }
.bat-yellow .bat-shell::before { background: #f59e0b; }
.bat-yellow .bat-pct   { color: #b45309; }

.bat-red .bat-fill  { background: linear-gradient(180deg, #fca5a5, #ef4444 52%, #dc2626); }
.bat-red .bat-shell { border-color: #ef4444; }
.bat-red .bat-shell::before { background: #ef4444; }
.bat-red .bat-pct   { color: #b91c1c; }

@media (prefers-reduced-motion: reduce) {
  .analise-card,
  .analise-card::before,
  .analise-card::after,
  .analise-icon-box,
  .analise-progress-fill,
  .analise-sparkline path.line,
  .analise-sparkline .dot,
  .analise-mini-chip,
  .analise-float-dot,
  .analise-badge-pulse {
    animation: none !important;
    transition: none !important;
  }
}

/* =====================================================================
   Layout viewer (modal "Layout" do monitoramento) — read-only.
   Reaproveita o modelo do editor (layout.html): area com aspect-ratio
   1000x560, zonas e pins posicionados por fracao 0..1. Aqui tudo e
   somente leitura (sem drag/handles).
   ===================================================================== */
.layout-view-wrap { width: 100%; overflow: auto; }
.layout-view-area {
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  aspect-ratio: 1000 / 560;
  border-radius: 16px;
  border: 2px dashed #cbd5e1;
  overflow: hidden;
  background-color: #f8fafc;
  background-image:
    linear-gradient(45deg, #f1f5f9 25%, transparent 25%),
    linear-gradient(-45deg, #f1f5f9 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #f1f5f9 75%),
    linear-gradient(-45deg, transparent 75%, #f1f5f9 75%);
  background-size: 24px 24px;
  background-position: 0 0, 0 12px, 12px -12px, -12px 0px;
}
.layout-view-area.blank-mode { background: #fff; }

.lv-image {
  width: 100%; height: 100%; object-fit: contain; position: absolute; inset: 0; z-index: 1;
  transform: translate(var(--lv-img-x, 0%), var(--lv-img-y, 0%)) scale(var(--lv-img-scale, 1));
  transform-origin: center center; pointer-events: none;
}

/* Zonas (areas de equipamentos) */
.lv-zone {
  position: absolute; border: 2px solid; border-radius: 10px; box-sizing: border-box;
  z-index: 5; padding: 6px 8px; overflow: hidden;
  display: flex; align-items: flex-start;
}
.lv-zone-badge {
  position: absolute; left: 4px; top: 4px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 999px; background: #F58025; color: #fff; font-size: 11px; font-weight: 900;
  display: flex; align-items: center; justify-content: center; z-index: 6;
  box-shadow: 0 2px 6px rgba(15, 23, 42, .25);
}
.lv-zone-link {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 38px; height: 38px; border-radius: 999px; background: rgba(255, 255, 255, .96);
  border: 2px solid currentColor; display: flex; align-items: center; justify-content: center;
  z-index: 6; font-size: 22px; line-height: 1; box-shadow: 0 4px 12px rgba(15, 23, 42, .18); overflow: hidden;
}
.lv-zone-info {
  position: absolute; left: 6px; right: 6px; bottom: 5px; z-index: 6;
  font-size: 10px; font-weight: 800; line-height: 1.15; text-align: center; color: #0f172a;
  text-shadow: 0 1px 2px rgba(255, 255, 255, .85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Pins (dispositivos posicionados) */
.lv-pin-wrap { position: absolute; transform: translate(-50%, -50%); z-index: 10; }
.lv-pin {
  width: 46px; height: 46px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
  background: #fff; border: 2px solid #cbd5e1; box-shadow: 0 10px 20px rgba(15, 23, 42, .18);
  font-size: 22px; overflow: hidden;
  transform: rotate(var(--lv-rot, 0deg)) scale(var(--lv-scale, 1)); transform-origin: center;
}
.lv-pin--img { width: 58px; height: 58px; border-radius: 16px; padding: 4px; }
.lv-dev-img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; user-select: none; }
.lv-zone-link .lv-dev-img { padding: 3px; }
.lv-pin-badge {
  position: absolute; left: 50%; top: -14px; transform: translateX(-50%);
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: #F58025; color: #fff;
  border: 2px solid #fff; box-shadow: 0 8px 18px rgba(15, 23, 42, .25);
  display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 900; line-height: 1; z-index: 2;
}
.lv-pin-label {
  position: absolute; left: 50%; top: 56px; transform: translateX(-50%);
  width: max-content; max-width: 200px; padding: 6px 9px; border-radius: 10px;
  background: rgba(255, 255, 255, .98); border: 1px solid #e2e8f0; box-shadow: 0 12px 28px rgba(15, 23, 42, .18);
  text-align: center; font-size: 11px; color: #334155; pointer-events: none;
}

/* Abas de ambiente */
.lv-tab {
  padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 600;
  border: 1px solid #e2e8f0; background: #fff; color: #475569; cursor: pointer; transition: all .15s ease;
}
.lv-tab:hover { background: #f8fafc; }
.lv-tab.active { background: #fff7ed; border-color: #fdba74; color: #9a3412; }

/* Switch: foto dos dispositivos x foto da instalação */
.lv-photo-switch {
  display: inline-flex; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 999px; padding: 3px; gap: 2px;
}
.lv-photo-opt {
  padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; color: #64748b;
  background: transparent; border: 0; cursor: pointer; transition: all .15s ease; white-space: nowrap;
}
.lv-photo-opt:hover { color: #0f172a; }
.lv-photo-opt.active { background: #fff; color: #9a3412; box-shadow: 0 1px 3px rgba(15, 23, 42, .12); }

/* Foto da instalação preenchendo o bloco do ambiente (zona) — mantém o badge por cima */
.lv-zone--photo { padding: 0; }   /* sem padding p/ a foto ir de borda a borda dentro da moldura */
.lv-zone-photo-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  z-index: 2; cursor: zoom-in; display: block;
}
/* Foto da instalação dentro do pin */
.lv-pin-photo-img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }

/* Lightbox de visualização da foto (não usa .hidden do Tailwind p/ evitar conflito de cascade) */
.lv-lightbox {
  display: none; position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, .85);
  align-items: center; justify-content: center; padding: 24px;
}
.lv-lightbox.lv-lightbox--open { display: flex; }
.lv-lightbox-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.lv-lightbox-close {
  position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; border-radius: 999px;
  background: rgba(255, 255, 255, .15); color: #fff; font-size: 26px; line-height: 1; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.lv-lightbox-close:hover { background: rgba(255, 255, 255, .28); }

/* ============================================================
   Modo tabela dos dispositivos (assets/js/09-table-view.js)
   Alternativa ao grid de cards: uma linha por equipamento, com as
   mesmas 4 variáveis do card desenhadas como sparkline inline.
   ============================================================ */
.dt-table { border-spacing: 0; }

/* Linhas compactas — a densidade é o ponto do modo tabela. */
.dt-table tbody tr { height: 46px; }

/* Sparkline: canvas com tamanho fixo em CSS; o JS ajusta a resolução
   interna pelo devicePixelRatio para não sair borrado em tela retina. */
.dt-table canvas.dt-spark {
  display: block;
  border-radius: 4px;
  background: #f8fafc;
}

/* Cabeçalho ordenável */
.dt-table thead th[data-col]:hover { color: #334155; }
.dt-table .dt-arrow { display: inline-block; min-width: 8px; }

/* ===========================
   Tooltip CSS simples (padrão "Simple Tooltips with no extra pseudo element",
   freefrontend 2023): um único ::after com attr(data-tooltip), sem elemento
   extra de seta. Usado nas sparklines da tabela e em qualquer elemento que
   receba data-tooltip.
   =========================== */
[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%) scale(0.92);
  transform-origin: bottom center;
  background: #1F3C5D;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  padding: 5px 10px;
  border-radius: 6px;
  text-align: left;
  /* Quebras de linha reais no data-tooltip viram linhas no tooltip
     (um valor abaixo do outro). */
  white-space: pre;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
  z-index: 60;
}

[data-tooltip]:hover::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) scale(1);
}

/* ===========================
   Balão flutuante das sparklines (.dt-tip)
   Vive direto no <body> em position:fixed — o tooltip de ::after era cortado
   pelo overflow-x-auto da tabela na primeira linha. Linhas com respiro
   (line-height folgado + gap) e ícones por linha.
   =========================== */
.dt-tip {
  position: fixed;
  z-index: 90;
  min-width: 148px;
  background: #1F3C5D;
  color: #fff;
  border-radius: 10px;
  padding: 10px 14px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .28);
  font-size: 12px;
  line-height: 1.4;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity .15s ease, transform .15s ease;
}

.dt-tip-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dt-tip-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 800;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding-bottom: 7px;
  margin-bottom: 7px;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}

.dt-tip-title svg {
  width: 15px;
  height: 15px;
  flex: none;
}

.dt-tip-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3.5px 0;
  color: rgba(255, 255, 255, .82);
}

.dt-tip-row svg {
  width: 13px;
  height: 13px;
  flex: none;
  opacity: .75;
}

.dt-tip-row b {
  margin-left: auto;
  padding-left: 14px;
  font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.dt-tip-empty {
  color: rgba(255, 255, 255, .75);
  font-size: 11.5px;
}

/* Aviso de série incompleta no tooltip da sparkline (alguma fatia da janela
   estourou o statement timeout — ver fetchSeries em 03-monitor-charts.js). */
.dt-tip-warn {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(148, 163, 184, .3);
  color: #f59e0b;
  font-size: 11px;
  font-weight: 600;
}