/* ── Variables ────────────────────────────────────────────────────────────── */
:root {
  --bg:           #0d0f12;
  --card:         #131619;
  --card-2:       #0f1114;
  --line:         #222830;
  --line-soft:    #1a1f26;
  --text:         #eef0f3;
  --muted:        #7a8494;
  --accent:       #2272a8;
  --accent-h:     #2d8fd4;
  --accent-soft:  rgba(34, 114, 168, 0.1);
  --accent-glow:  rgba(34, 114, 168, 0.22);
  --danger:       #7a2e22;
  --r:            8px;
  --r-sm:         6px;
  --r-lg:         12px;
}

/* ── Reset ────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-base, "Segoe UI", Tahoma, sans-serif);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  background-image:
    radial-gradient(ellipse 75% 50% at 100% 0%,   rgba(34,114,168,0.07) 0%, transparent 55%),
    radial-gradient(ellipse 55% 40% at 0%   100%,  rgba(20, 60,100,0.05) 0%, transparent 50%);
  min-height: 100vh;
}

/* Scrollbar */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: #121518; }
::-webkit-scrollbar-thumb { background: #252d38; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ── Layout ───────────────────────────────────────────────────────────────── */
.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px 18px 40px;
}

body.live-focus .container {
  max-width: none;
  width: 100vw;
  margin: 0;
  padding: 4px 6px;
}
body.live-focus .panel#panel-live {
  padding: 6px;
  border: none;
  border-radius: 0;
  background: transparent;
}
body.live-focus .hero,
body.live-focus .tabs { display: none; }
body.live-focus .controls { margin-bottom: 6px; }

/* ── Modo Foco ────────────────────────────────────────────────────────────── */
body.is-focus-mode { background: #000; }
body.is-focus-mode .container {
  max-width: none;
  padding: 6px 10px 0;
}
/* Em modo foco, o topbar é recolocado dentro da barra de controls (JS move
   os nós). Escondemos o original pra não duplicar nem gastar altura. */
body.is-focus-mode .topbar { display: none; }
body.is-focus-mode .tabs       { display: none !important; }
body.is-focus-mode .live-meta  { display: none !important; }
body.is-focus-mode #playerStatus { display: none !important; }
body.is-focus-mode .live-grid {
  height: calc(100vh - 70px);
}

/* Agrupamento injetado no final da .controls em modo foco: logo + usuario + sair,
   visualmente integrado e empurrado pra direita (margin-left:auto) */
body.is-focus-mode .controls .focus-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  padding-left: 12px;
  border-left: 1px solid var(--line);
}
body.is-focus-mode .controls .focus-brand h1 {
  margin: 0;
  font-size: 14px;
  letter-spacing: 1.5px;
  color: var(--accent-h);
}
body.is-focus-mode .controls .focus-brand .btn-logout { margin-left: 0; }
/* Em modo foco, a .controls é uma linha só, sem wrap, pra economizar altura */
body.is-focus-mode .controls {
  flex-wrap: nowrap;
  padding: 6px 10px;
  margin-bottom: 4px;
}
body.is-focus-mode .controls select,
body.is-focus-mode .controls input { min-width: 0; }
body.is-focus-mode .controls #liveLayoutSelect { min-width: 90px; }

/* ── Topbar ───────────────────────────────────────────────────────────────── */
.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 0;
  border-bottom: 1px solid var(--line-soft);
}

/* brand-title override — azul no GUARDIAO */
.brand-title,
[data-brand-title="true"],
.login-brand-title {
  color: var(--accent-h) !important;
  text-shadow: 0 0 28px rgba(45,143,212,0.2);
}

.topbar h1 {
  margin: 0;
  font-size: 20px;
  letter-spacing: 2px;
  color: var(--accent-h);
  text-shadow: 0 0 28px rgba(45,143,212,0.2);
}

.operator-badge {
  font-size: 12px;
  font-weight: 600;
  color: #80b8d8;
  background: rgba(34,114,168,0.12);
  border: 1px solid rgba(34,114,168,0.28);
  border-radius: 999px;
  padding: 3px 11px;
  letter-spacing: 0.2px;
}

.btn-logout {
  background: transparent;
  border: 1px solid #252d38;
  border-radius: var(--r-sm);
  color: var(--muted);
  font-size: 12px;
  padding: 4px 10px;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
  margin-left: auto;
}
.btn-logout:hover {
  background: rgba(34,114,168,0.1);
  border-color: rgba(34,114,168,0.45);
  color: #a8ccdf;
}

/* ── Tabs ─────────────────────────────────────────────────────────────────── */
.tabs {
  display: flex;
  gap: 2px;
  margin: 0 0 16px;
  border-bottom: 1px solid var(--line-soft);
  padding-top: 4px;
}

.tab {
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  padding: 9px 18px 10px;
  border-radius: 0;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.3px;
  transition: color 0.18s, border-color 0.18s;
  margin-bottom: -1px;
}
.tab:hover { color: var(--text); background: transparent; }
.tab.active {
  color: var(--accent-h);
  border-bottom-color: var(--accent-h);
  font-weight: 600;
  background: transparent;
}

/* ── Panel ────────────────────────────────────────────────────────────────── */
.panel {
  display: none;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}
.panel.active { display: block; }

/* ── Controls bar ─────────────────────────────────────────────────────────── */
.controls {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 14px;
  padding: 10px 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
}

.controls label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #48566a;
}

/* ── Inputs & Selects ─────────────────────────────────────────────────────── */
input {
  border: 1px solid #222d38;
  border-radius: var(--r-sm);
  padding: 8px 10px;
  min-width: 180px;
  background: #0c0f13;
  color: var(--text);
  font-size: 13px;
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s;
}
input:focus {
  border-color: rgba(34,114,168,0.6);
  box-shadow: 0 0 0 2px rgba(34,114,168,0.1);
}
input::placeholder { color: #303844; }

select {
  border: 1px solid #222d38;
  border-radius: var(--r-sm);
  padding: 8px 10px;
  min-width: 200px;
  background: #0c0f13;
  color: var(--text);
  font-size: 13px;
  outline: none;
  cursor: pointer;
  transition: border-color 0.18s;
}
select:focus { border-color: rgba(34,114,168,0.6); }

input[readonly] {
  background: #0a0d10;
  color: var(--muted);
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
button {
  border: 1px solid rgba(34,114,168,0.6);
  background: linear-gradient(135deg, #1d6a9e 0%, #165580 100%);
  color: #ddeef8;
  border-radius: var(--r-sm);
  padding: 8px 13px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2px;
  transition: background 0.18s, box-shadow 0.18s, transform 0.1s;
  white-space: nowrap;
}
button:hover {
  background: linear-gradient(135deg, #2d8fd4 0%, #1d6a9e 100%);
  box-shadow: 0 2px 10px rgba(34,114,168,0.28);
}
button:active { transform: translateY(1px); }
button:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ── Video ────────────────────────────────────────────────────────────────── */
video {
  width: 100%;
  max-height: 540px;
  border-radius: var(--r-sm);
  background: #000;
  display: block;
}

/* ── Live grid ────────────────────────────────────────────────────────────── */
/* No modo padrão, ocupa a altura do viewport menos o chrome. Sem isso,
   grid-auto-rows: 1fr não tem referência e os cards ficam com altura
   só do conteúdo (header + p), sobrando buraco embaixo do vídeo.
   Em telas baixas, deixamos o grid fluir pelo conteúdo em vez de forçar. */
.live-grid {
  min-height: min(calc(100vh - 220px), 720px);
  display: grid;
  grid-template-columns: repeat(var(--live-cols, 2), minmax(0, 1fr));
  grid-auto-rows: 1fr;            /* todas as linhas com a mesma altura */
  gap: 8px;
  align-items: stretch;           /* cards esticam para preencher a linha */
}

/* ── Estado de espera (sem ocorrência ativa) ─────────────────────────────── */
/* Painel orientado a ocorrência: sem atendimento/evento MONI o grid mostra
   só esta mensagem, ocupando todas as colunas do layout escolhido. */
.waiting-occurrence {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: var(--r-lg);
  background: var(--card-2);
}
.waiting-occurrence p {
  margin: 0;
  font-size: 20px;
  letter-spacing: 0.06em;
  color: var(--text);
  animation: waiting-pulse 2.4s ease-in-out infinite;
}
.waiting-occurrence .muted { font-size: 13px; }
@keyframes waiting-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

.live-card {
  border: 1px solid #1a2030;
  border-radius: var(--r);
  padding: 8px;
  background: #0a0d12;
  display: flex;
  flex-direction: column;
  min-width: 0;                   /* permite encolher dentro do grid */
  min-height: 0;                  /* idem, sem isso o video não respeita o pai */
  transition: border-color 0.2s;
}
.live-card:hover { border-color: #252f40; }

.live-card strong {
  font-size: 12.5px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #c8d4e0;
  flex: 0 0 auto;
}

.live-card .muted {
  margin: 3px 0 5px;
  font-size: 10.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #3a4a5e;
  flex: 0 0 auto;
}

.live-card-active {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 1px rgba(34,114,168,0.15) inset, 0 0 14px rgba(34,114,168,0.12);
}

/* video wrapper implícito: ocupa o resto do card e força o video a preencher
   o que sobrar do flex column, sem depender de aspect-ratio fixo (que quebra
   em telas pequenas com N colunas e gera cards de altura desigual). */
.live-card .video-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  background: #000;
  border-radius: var(--r-sm);
  overflow: hidden;
}

/* Placeholder de attendance: estado de loading quando o MONI avisou que o
   cliente vai precisar de câmera mas o puller P2P ainda não subiu. Sem chrome
   de card — só um spinner simples centralizado no slot do grid. Cor em hex
   literal (não var(--accent)): brand-theme.css carrega depois e trocaria a
   cor do spinner. */
.live-card.live-card-loading {
  align-items: center;
  justify-content: center;
  border-color: transparent;
  background: transparent;
}
.live-card.live-card-loading:hover { border-color: transparent; }
.live-card-loading .loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(255, 255, 255, 0.08);
  border-top-color: #2272a8;
  border-radius: 50%;
  animation: live-spin 0.9s linear infinite;
}
@keyframes live-spin {
  to { transform: rotate(360deg); }
}

/* Card offline: a câmera existe no cadastro do bot, mas o SRS não tem o
   stream agora (DVR fora, puller P2P ainda não subiu). Mesmo chrome do card
   normal, esmaecido; o slot vira vídeo quando o publish chega. */
.live-card.live-card-offline { opacity: 0.55; }
.live-card.live-card-offline:hover { border-color: #1a2030; }
.video-wrap-offline {
  display: flex;
  align-items: center;
  justify-content: center;
}
.offline-label {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #3a4a5e;
}

/* Overlay de estado sobre o vídeo (conectando/reconectando/sem sinal): scrim
   translúcido — na reconexão o último frame continua visível por baixo, então
   o operador vê que a imagem congelou de propósito, não um painel travado. */
.video-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
.video-overlay-label {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8fa3bb;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.live-card video,
.live-card img[data-live-rtsp] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--r-sm);
  background: #000;
  /* Estica em vez de cortar (24/09/2026): o cover dava zoom e roubava borda da
     cena. Medido no SRS: 57 de 73 streams são 16:9 e nove chegam anamórficos
     (960x1080, 1280x1440, meia largura) — esses só ficam certos esticados;
     com contain sairiam espremidos numa faixa estreita. */
  object-fit: fill;
  display: block;
}

/* Layouts densos */
.live-grid[data-layout='4x4'] .live-card,
.live-grid[data-layout='5x5'] .live-card,
.live-grid[data-layout='6x6'] .live-card {
  padding: 3px;
  border-radius: 5px;
  gap: 2px;
}
.live-grid[data-layout='4x4'] .live-card strong,
.live-grid[data-layout='5x5'] .live-card strong,
.live-grid[data-layout='6x6'] .live-card strong { font-size: 10px; }
.live-grid[data-layout='4x4'] .live-card .muted,
.live-grid[data-layout='5x5'] .live-card .muted,
.live-grid[data-layout='6x6'] .live-card .muted { display: none; }
.live-grid[data-layout='5x5'] .live-card strong,
.live-grid[data-layout='6x6'] .live-card strong { font-size: 9px; }

/* ── Live meta info ───────────────────────────────────────────────────────── */
.muted { color: var(--muted); }
.status { font-size: 13px; color: var(--muted); margin: 8px 0 0; }
.live-meta { display: none; }
#playerStatus { font-size: 12px; }

/* ── Logs panel ───────────────────────────────────────────────────────────── */
.events {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.event {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 14px 16px;
  background: var(--card);
  transition: border-color 0.2s;
}
.event:hover { border-color: #252f3e; }

.event strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.1px;
}

.event > .muted {
  font-size: 12px;
  margin-top: 4px;
  display: block;
}

.integration-box { margin-bottom: 14px; }

.cam-badge {
  display: inline-block;
  background: #111820;
  border: 1px solid #222d3a;
  border-radius: 4px;
  padding: 1px 7px;
  font-size: 11.5px;
  color: #7090a8;
  margin: 2px 3px 2px 0;
  font-family: Consolas, Monaco, monospace;
  letter-spacing: 0.3px;
}

.event img {
  width: 240px;
  max-width: 100%;
  border-radius: var(--r-sm);
  margin-top: 10px;
  border: 1px solid var(--line);
}

.event pre {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-soft);
  background: #080b0f;
  overflow: auto;
  font-size: 12px;
  color: #8099b0;
}

.fetch-output {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-soft);
  background: #080b0f;
  overflow: auto;
  min-height: 72px;
  font-size: 12px;
  white-space: pre-wrap;
  color: #8099b0;
  line-height: 1.6;
}

/* ── Section label ────────────────────────────────────────────────────────── */
.section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #3a4a5e;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-soft);
  margin: 0 0 12px;
}

/* ── Login Screen ─────────────────────────────────────────────────────────── */
.login-screen {
  position: fixed;
  inset: 0;
  background: #080b0f;
  background-image:
    radial-gradient(ellipse 80% 60% at 100% 0%,  rgba(34,114,168,0.09) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 0%   100%, rgba(15, 50, 90,0.06) 0%, transparent 50%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.login-box {
  background: #0f1318;
  border: 1px solid #1e2530;
  border-radius: var(--r-lg);
  padding: 38px 40px 32px;
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 24px 64px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.02);
}

.login-subtitle {
  color: #5a6a7e;
  font-size: 13px;
  margin: 4px 0 20px;
  text-align: center;
  letter-spacing: 0.2px;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.login-form input {
  background: #090c10;
  border: 1px solid #1e2a38;
  border-radius: var(--r-sm);
  padding: 11px 13px;
  color: var(--text);
  font-size: 14px;
  width: 100%;
  min-width: 0;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.login-form input:focus {
  border-color: rgba(34,114,168,0.65);
  box-shadow: 0 0 0 2px rgba(34,114,168,0.1);
}
.login-form input::placeholder { color: #2a3545; }

.login-form button {
  background: linear-gradient(135deg, #1d6a9e 0%, #165580 100%);
  border: 1px solid rgba(34,114,168,0.6);
  border-radius: var(--r-sm);
  padding: 11px;
  color: #ddeef8;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s, box-shadow 0.18s;
  letter-spacing: 0.3px;
  margin-top: 4px;
}
.login-form button:hover {
  background: linear-gradient(135deg, #2d8fd4 0%, #1d6a9e 100%);
  box-shadow: 0 2px 14px rgba(34,114,168,0.3);
}
.login-form button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

.login-form .btn-secondary {
  background: #141820;
  border-color: #222d38;
  color: var(--muted);
}
.login-form .btn-secondary:hover {
  background: #1a2030;
  border-color: #2e3d52;
  box-shadow: none;
}

.login-form .link-btn {
  background: transparent;
  border: none;
  padding: 6px 0 0;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  text-align: center;
  cursor: pointer;
  box-shadow: none;
}
.login-form .link-btn:hover {
  color: var(--accent-h);
  background: transparent;
  box-shadow: none;
}

.login-error {
  color: #c05555;
  font-size: 12.5px;
  margin-top: 10px;
  text-align: center;
  min-height: 18px;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .container { padding: 12px 10px 32px; }
  input { min-width: 100%; }
  select { min-width: 100%; }
  .live-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .live-grid[data-layout='1x1'] { grid-template-columns: 1fr; }
  .controls { gap: 6px; padding: 8px 10px; }
  .login-box { padding: 28px 22px 24px; margin: 0 12px; }
  .tabs { flex-wrap: wrap; }
  button { padding: 7px 11px; font-size: 12px; }
}

/* ── Layout / presets: pinos, drag, botões ────────────────────────────── */
.live-card-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}
.live-card-head strong {
  flex: 1 1 auto;
  min-width: 0;
  /* nome real pode ser longo: linha única com reticências, sem empurrar
     o layout do card (tooltip mostra o nome completo) */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.control-sep {
  display: inline-block;
  width: 1px;
  height: 22px;
  background: #1a2030;
  margin: 0 6px;
  vertical-align: middle;
}
.btn-danger-soft {
  border-color: #3a1e26 !important;
  color: #b06878 !important;
}
.btn-danger-soft:hover {
  background: #1a0d12 !important;
  border-color: #5a2a36 !important;
}