/* ═══════════════════════════════════════════════════════════════
   PETROLOGGER — Tema Visual v2  ·  "Dark Navy"
   Fundos neutros navy escuro, acentos verde/ciano Carvtech
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Fundos — navy neutro escuro */
  --bg-base:     #0b0f18;   /* fundo global */
  --bg-raised:   #111827;   /* header, footer */
  --bg-card:     #1a2236;   /* cards dos canais */
  --bg-hover:    #1e2a40;   /* hover */

  /* Bordas */
  --border:      #2d3f5a;   /* azul-cinza escuro */
  --border-lit:  #3d5578;   /* azul-cinza médio */

  /* Identidade */
  --logo:        #00e676;   /* verde néon — Carvtech */
  --logo-dim:    #00c853;

  /* Canais */
  --ana:         #00e676;   /* verde néon — analógicos */
  --ana-dim:     #00c853;
  --vir:         #22d3ee;   /* ciano — virtuais */
  --vir-dim:     #0891b2;

  /* Texto — branco */
  --text:        #f0f0f0;   /* branco suave */
  --text-bright: #ffffff;   /* branco puro */
  --text-dim:    #b0b0b0;   /* cinza claro para rótulos secundários */

  /* Estado */
  --green:       #00e676;
  --green-bg:    rgba(0,120,50,0.35);
  --red:         #ff5252;
  --red-bg:      rgba(120,0,0,0.4);
  --amber:       #fbbf24;
  --amber-bg:    rgba(90,55,0,0.4);
}

/* ── Reset ──────────────────────────────────────────────────── */
html, body {
  height: 100%;
  margin: 0; padding: 0;
  overflow: hidden;
  background: var(--bg-base) !important;
  font-family: saira, system-ui, -apple-system, sans-serif;
  color: var(--text);
}

/* Scan-line CRT muito sutil */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.04) 2px,
    rgba(0,0,0,0.04) 4px
  );
}

@keyframes blinker { 50% { opacity: 0.15; } }

/* ── Scrollbar ─────────────────────────────────────────────── */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-lit) var(--bg-raised);
}
::-webkit-scrollbar              { width: 6px; height: 6px; }
::-webkit-scrollbar-track        { background: var(--bg-raised); border-radius: 6px; }
::-webkit-scrollbar-thumb        { background: var(--border-lit); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover  { background: var(--accent2); }
::-webkit-scrollbar-thumb:active { background: var(--accent2); opacity: .8; }
::-webkit-scrollbar-corner       { background: var(--bg-base); }

.cabecalho { display: none !important; }

/* ═══════════════════════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════════════════════ */
#pl-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 56px;
  background: var(--bg-raised);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: stretch;
  z-index: 200;
  box-shadow: 0 1px 8px rgba(0,0,0,0.6);
}

.pl-hblock {
  display: flex;
  align-items: center;
  padding: 0 20px;
  border-right: 1px solid var(--border);
  flex-shrink: 0;
}
.pl-hblock:last-child { border-right: none; }

/* Logo */
.pl-logo-icon {
  width: 30px; height: 30px;
  background: linear-gradient(135deg, #00e676, #00c853);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 14px; color: #060d08;
  margin-right: 10px;
  flex-shrink: 0;
  box-shadow: 0 0 14px rgba(0,230,118,0.45);
}

.pl-brand-name {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2.5px;
  color: var(--logo);
  line-height: 1;
}

.pl-brand-sub {
  font-size: 8px;
  letter-spacing: 2px;
  color: #ffffff;
  margin-top: 3px;
  line-height: 1;
  text-transform: uppercase;
}

/* Dados do poço */
.pl-well-group {
  display: flex;
  align-items: center;
  gap: 28px;
  flex: 1;
  padding: 0 24px;
  border-right: 1px solid var(--border);
  overflow: hidden;
}

.pl-field { display: flex; flex-direction: column; min-width: 0; }

.pl-field-label {
  font-size: 8px;
  letter-spacing: 2px;
  color: #ffffff;
  margin-bottom: 3px;
  text-transform: uppercase;
}

.pl-field-val {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-bright);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pl-field-val.mono {
  font-family: 'Courier New', monospace;
  color: #ffffff;
  letter-spacing: 0.5px;
}

/* Data/hora */
#datahora {
  font-family: 'Courier New', monospace;
  font-size: 12px;
  color: var(--text);
  letter-spacing: 1px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════
   ÁREA PRINCIPAL
   ═══════════════════════════════════════════════════════════════ */
.pl-main {
  position: fixed;
  top: 56px;
  bottom: 52px;
  left: 0; right: 0;
  overflow: hidden;
  padding: 4px;
}

/* ── Tabela ── */
.maintable {
  background: transparent !important;
  height: 100% !important;
  border-spacing: 4px !important;
}

/* ── Cards dos canais (th) ── */
.table1 thead th {
  background: linear-gradient(160deg, #1a2236 0%, #111827 100%) !important;
  border: 1px solid var(--border) !important;
  border-top: 2px solid var(--border-lit) !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.55),
              0 2px 4px -2px rgba(0,0,0,0.35) !important;
  text-shadow: none !important;
  padding: 10px 12px 8px !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  vertical-align: top !important;
}

.table1 thead th:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 14px -2px rgba(0,0,0,0.6),
              0 4px 6px -3px rgba(0,0,0,0.4) !important;
}

/* Borda superior colorida por tipo */
td:not([width]) .table1 thead th {
  border-top: 2px solid var(--ana) !important;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.55),
              inset 0 1px 0 rgba(0,230,118,0.12) !important;
}

td[width="11%"]:not([align]) .table1 thead th {
  border-top: 2px solid var(--vir) !important;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.55),
              inset 0 1px 0 rgba(34,211,238,0.12) !important;
}

/* Nome do canal */
.thtextotop {
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.4px;
  color: var(--text) !important;
  text-align: left !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 0 0 5px !important;
  margin-bottom: 0 !important;
  line-height: 1.3;
  text-shadow: none !important;
}

.thtextotop a {
  color: var(--text) !important;
  text-decoration: none !important;
  transition: color 0.15s;
}
.thtextotop a:hover { color: var(--ana) !important; }

/* Valor numérico grande */
.thtextogrande {
  font-family: 'Courier New', monospace !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  color: var(--text-bright) !important;
  letter-spacing: -1px;
  padding: 10px 0 4px !important;
  text-align: center !important;
  line-height: 1 !important;
  text-shadow: 0 0 24px rgba(0,230,118,0.2) !important;
}

/* Alarme ativo */
.alerta_num {
  font-family: 'Courier New', monospace !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  color: var(--red) !important;
  text-shadow: 0 0 16px rgba(255,82,82,0.55) !important;
  animation: blinker 0.9s linear infinite;
}

/* Unidade */
.thtextopeq {
  font-family: 'Courier New', monospace !important;
  font-size: 10px !important;
  color: #ffffff !important;
  text-align: right !important;
  padding: 0 !important;
  letter-spacing: 0.3px;
}

/* Células dos gráficos */
td.bordastd {
  background: linear-gradient(160deg, #111827 0%, #0b0f18 100%) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.5),
              inset 0 0 30px rgba(0,0,0,0.35) !important;
}

/* Coluna lateral — botões de navegação */
td[width="11%"][align] {
  background: transparent !important;
  padding: 4px 4px 0 !important;
  vertical-align: top !important;
}

.btnlateral {
  background: linear-gradient(160deg, #1a2236 0%, #111827 100%) !important;
  border: 1px solid var(--border) !important;
  border-top: 2px solid var(--logo) !important;
  border-radius: 10px !important;
  color: var(--text) !important;
  text-shadow: none !important;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.45) !important;
  font-size: 11px !important;
  font-weight: 600;
  letter-spacing: 0.5px;
  transition: all 0.15s;
  cursor: pointer;
}

.btnlateral:hover {
  background: linear-gradient(160deg, #1e2a40 0%, #1a2236 100%) !important;
  color: var(--logo) !important;
  box-shadow: 0 6px 12px -2px rgba(0,230,118,0.15),
              0 0 0 1px rgba(0,230,118,0.15) !important;
  transform: translateY(-1px);
}

td[width="11%"][align] img {
  opacity: 0.80;
  margin-bottom: 6px;
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════ */
footer {
  position: fixed !important;
  bottom: 0 !important; left: 0 !important; right: 0 !important;
  height: 52px !important;
  background: var(--bg-raised) !important;
  border-top: 1px solid var(--border) !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 12px !important;
  gap: 6px !important;
  z-index: 200;
  background-image: none !important;
  box-shadow: 0 -1px 6px rgba(0,0,0,0.5) !important;
}

/* Status */
#status {
  float: none !important;
  margin: 0 !important;
  height: 36px !important;
  min-width: 130px;
  padding: 0 14px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 8px !important;
  border: 1px solid var(--border) !important;
  font-size: 11px !important;
  font-weight: 600;
  text-shadow: none !important;
  background: #111827 !important;
  color: #ffffff !important;
  line-height: 1.3 !important;
  text-align: center !important;
  transition: all 0.3s;
}

#status.conectado {
  border-color: rgba(0,230,118,0.4) !important;
  background: var(--green-bg) !important;
  color: #6effa8 !important;
}

#status.desconectado {
  border-color: rgba(255,82,82,0.4) !important;
  background: var(--red-bg) !important;
  color: #ff8a8a !important;
}

#status.estagnado {
  border-color: rgba(255,171,0,0.4) !important;
  background: rgba(255,171,0,0.07) !important;
  color: #ffd040 !important;
}

.dotAmber {
  background-color: #ffd040 !important;
  width: 7px !important; height: 7px !important;
  border-radius: 50% !important;
  display: inline-block !important;
  box-shadow: 0 0 6px #ffd040;
}

.dotBlack {
  background-color: var(--green) !important;
  width: 7px !important; height: 7px !important;
  border-radius: 50% !important;
  display: inline-block !important;
  box-shadow: 0 0 6px var(--green);
}

/* Alarme */
#alarme {
  float: none !important;
  margin: 0 !important;
  height: 36px !important;
  display: flex !important;
  align-items: center;
  padding: 0 14px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(251,191,36,0.3) !important;
  background: var(--amber-bg) !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 600;
  text-shadow: none !important;
  transition: all 0.3s;
}

#alarme.alarmes_alerta {
  border-color: rgba(255,82,82,0.45) !important;
  background: var(--red-bg) !important;
  color: #ff8a8a !important;
  animation: blinker 0.8s linear infinite;
}

.dot {
  height: 8px !important; width: 8px !important;
  background-color: var(--amber) !important;
  border-radius: 50% !important;
  display: inline-block !important;
}

.alarmeText {
  padding-top: 0 !important;
  display: flex;
  align-items: center;
  gap: 7px;
}

/* ── Toolbar ── */
.pl-toolbar {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  margin-right: 72px;
  flex-shrink: 0;
}

.pl-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 42px;
  min-width: 58px;
  padding: 0 16px;
  border-radius: 8px;
  border: none;
  background: linear-gradient(135deg, #4ade80, #22d3ee);
  color: #050810;
  text-decoration: none !important;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: saira, system-ui, sans-serif;
  font-size: 0;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}

.pl-btn:hover {
  background: linear-gradient(135deg, #6ee89a, #38e0f7);
  box-shadow: 0 4px 16px rgba(34,211,238,0.35), 0 2px 8px rgba(0,0,0,0.3);
  transform: translateY(-2px);
  color: #050810 !important;
}

.pl-btn:active { transform: translateY(0); }

.pl-btn img {
  display: block;
  width: 18px; height: 18px;
  object-fit: contain;
  filter: brightness(0.1) saturate(0);
  transition: filter 0.15s;
}

.pl-btn:hover img { filter: brightness(0.1) saturate(0); }

.pl-btn svg {
  display: block;
  color: #050810;
}
.pl-btn:hover svg { color: #050810; }

.pl-btn .pl-btn-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #050810;
  display: block;
  line-height: 1;
}

.pl-btn:hover .pl-btn-label { color: #050810; }

#reset[style*="pointer-events: none"] { opacity: 0.3 !important; }

/* Menu dropdown */
.pl-menu-wrap { position: relative; }

.pl-menu-popup {
  display: none;
  position: absolute;
  bottom: calc(100% + 10px);
  right: 0;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 10px;
  min-width: 180px;
  overflow: hidden;
  z-index: 300;
  box-shadow: 0 -8px 30px rgba(0,0,0,0.65), 0 0 0 1px rgba(61,85,120,0.4);
}

.pl-menu-popup.open { display: block; }

.pl-menu-popup a {
  display: flex !important;
  align-items: center;
  padding: 11px 16px !important;
  font-size: 12px !important;
  font-weight: 500;
  color: #ffffff !important;
  text-decoration: none !important;
  border-bottom: 1px solid var(--border);
  transition: background 0.1s, color 0.1s;
  gap: 8px;
}

.pl-menu-popup a:last-child { border-bottom: none !important; }

.pl-menu-popup a:hover {
  background: #1e2a40 !important;
  color: var(--ana) !important;
}

/* Logo Carvtech — header */
.pl-carvtech-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 20px;
  text-decoration: none;
  flex-shrink: 0;
  opacity: .9;
  transition: opacity .2s;
}
.pl-carvtech-brand:hover { opacity: 1; }

.pl-carv-img-wrap {
  height: 30px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.pl-carv-img-wrap img {
  height: 30px;
  width: auto;
  display: block;
  object-fit: contain;
}

.pl-carv-text {
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.pl-carv-name {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #ffffff;
  white-space: nowrap;
}

.pl-carv-sub {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 1.8px;
  color: rgba(255,255,255,.42);
  white-space: nowrap;
}

/* Remove footer logo */
.pl-footer-logo { display: none !important; }

/* Oculta itens do footer antigo */
.carvtech, .opcoes, .itensrodape { display: none !important; }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVO
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .pl-well-group        { gap: 16px; padding: 0 14px; }
  .pl-field-val         { font-size: 11px; }
  .pl-btn .pl-btn-label { display: none; }
  .pl-btn               { min-width: 38px; }
  #pl-header            { height: 50px; }
  .pl-main              { top: 50px; }
}