/* ═══════════════════════════════════════════════════════════════════════════
   GFB · SIIM — DESIGN SYSTEM (CAMERA VIEWER)
   Tema unificado da marca: padrão NOC (statusbar + topbar + sidebar fixa)
   com alternância dark/light. Carregado DEPOIS do bootstrap/style.css para
   sobrescrever as cores legadas por tokens.

   Padrão default: LIGHT (sem atributo). [data-theme="dark"] aplica o escuro.
   O chrome (statusbar/topbar/sidebar) permanece na cor da marca em ambos os
   temas — apenas a área de conteúdo troca de superfície.
═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────────
   DESIGN TOKENS — LIGHT (default)
─────────────────────────────────────────────────────────────────────────── */
:root {
  /* Brand */
  --gfb-primary:          #00695C;
  --gfb-primary-dark:     #1B5E20;
  --gfb-primary-medium:   #2E7D32;
  --gfb-primary-deep:     #00695C;
  --gfb-amber:            #FFA000;
  --gfb-amber-light:      #FFC107;
  --gfb-amber-dark:       #E65100;
  --gfb-danger:           #C62828;
  --gfb-danger-dark:      #C62828;

  /* Surfaces (conteúdo) */
  --bg:                   #F5F6F8;
  --bg-surface:           #FFFFFF;
  --bg-raised:            #F0F4F8;

  /* Chrome (mantém a marca em ambos os temas) */
  --bg-sidebar:           #0D2B2E;
  --bg-topbar:            #1B5E20;
  --bg-statusbar:         #0A1F22;

  /* Sidebar (hierarquia) — ACOMPANHA o tema (light por padrão) */
  --sidebar-bg:           var(--bg-surface);
  --sidebar-head-bg:      var(--bg-raised);
  --sidebar-text:         var(--text);
  --sidebar-text-dim:     var(--text-muted);
  --sidebar-border:       var(--border);
  --sidebar-hover-bg:     var(--bg-raised);
  --sidebar-active-bg:    var(--status-ok-dim);
  --sidebar-active-text:  var(--gfb-primary);
  --sidebar-input-bg:     var(--bg-raised);
  --sidebar-input-border: var(--border);
  --sidebar-icon:         var(--gfb-amber-dark);

  /* Borders */
  --border:               #E8ECEF;
  --border-dark:          #C8D0D8;

  /* Text */
  --text:                 #1A1A2E;
  --text-secondary:       #455A64;
  --text-muted:           #78909C;
  --text-placeholder:     #A0AEBA;

  /* Status semantic */
  --status-ok:            #00695C;
  --status-ok-dim:        rgba(0,105,92,0.09);
  --status-warn:          #FFA000;
  --status-warn-dim:      rgba(255,160,0,0.10);
  --status-danger:        #C62828;
  --status-danger-dim:    rgba(198,40,40,0.09);
  --status-info:          #1565C0;
  --status-info-dim:      rgba(21,101,192,0.09);

  /* Typography */
  --font:                 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:            'JetBrains Mono', 'Courier New', Courier, monospace;

  /* Spacing */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px;

  /* Radius */
  --r-sm:4px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-full:9999px;

  /* Shadows */
  --shadow-sm: 0 2px 8px  rgba(0,0,0,0.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.12);

  /* Layout */
  --statusbar-h: 30px;
  --topbar-h:    52px;
  --sidebar-w:   260px;

  /* Transitions */
  --t-fast: 120ms ease;
  --t-base: 200ms ease;
}

/* ───────────────────────────────────────────────────────────────────────────
   DESIGN TOKENS — DARK
─────────────────────────────────────────────────────────────────────────── */
[data-theme="dark"] {
  --gfb-primary:          #4DB6AC;
  --gfb-danger:           #EF5350;
  --gfb-danger-dark:      #C62828;

  --bg:                   #0F1923;
  --bg-surface:           #1A2635;
  --bg-raised:            #223040;
  --bg-sidebar:           #0D2B2E;
  --bg-topbar:            #0A1F22;
  --bg-statusbar:         #06181A;

  /* Sidebar — superfície escura da marca, texto claro (alto contraste) */
  --sidebar-bg:           #0D2B2E;
  --sidebar-head-bg:      rgba(255,255,255,0.03);
  --sidebar-text:         rgba(255,255,255,0.88);
  --sidebar-text-dim:     rgba(255,255,255,0.50);
  --sidebar-border:       rgba(255,255,255,0.08);
  --sidebar-hover-bg:     rgba(255,255,255,0.06);
  --sidebar-active-bg:    rgba(77,182,172,0.20);
  --sidebar-active-text:  #ffffff;
  --sidebar-input-bg:     rgba(255,255,255,0.06);
  --sidebar-input-border: rgba(255,255,255,0.12);
  --sidebar-icon:         var(--gfb-amber);

  --border:               #2A3A4A;
  --border-dark:          #3A4E62;

  --text:                 #E8EFF5;
  --text-secondary:       #90A4AE;
  --text-muted:           #607D8B;
  --text-placeholder:     #4A6175;

  --status-ok:            #4DB6AC;
  --status-ok-dim:        rgba(77,182,172,0.12);
  --status-warn:          #FFA000;
  --status-warn-dim:      rgba(255,160,0,0.12);
  --status-danger:        #EF5350;
  --status-danger-dim:    rgba(239,83,80,0.12);
  --status-info:          #64B5F6;
  --status-info-dim:      rgba(100,181,246,0.10);

  --shadow-sm: 0 2px 8px  rgba(0,0,0,0.4);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.5);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.6);
}

/* ───────────────────────────────────────────────────────────────────────────
   BASE
─────────────────────────────────────────────────────────────────────────── */
body {
  font-family: var(--font);
  background: var(--bg) !important;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--t-base), color var(--t-base);
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border-dark); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ═══════════════════════════════════════════════════════════════════════════
   CHROME — STATUSBAR
═══════════════════════════════════════════════════════════════════════════ */
#gfb-statusbar {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--statusbar-h);
  background: var(--bg-statusbar);
  border-bottom: 1px solid rgba(0,0,0,0.4);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--s5);
  z-index: 1200;
  font-family: var(--font-mono);
  font-size: 11px;
}
.sb-brand { font-weight: 700; color: var(--gfb-amber); letter-spacing: 0.06em; font-size: 11px; }
.sb-brand span { color: #fff; }
.sb-pills { display: flex; align-items: center; gap: var(--s3); }
.sb-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: var(--r-full);
  border: 1px solid; font-size: 10px; font-weight: 600; letter-spacing: 0.03em;
}
.sb-pill.ok     { border-color: var(--status-ok);     color: #7fe3da; background: rgba(77,182,172,0.12); }
.sb-pill.danger { border-color: var(--status-danger); color: #ef9a9a; background: rgba(239,83,80,0.12); }
.sb-pill.info   { border-color: var(--status-info);   color: #90caf9; background: rgba(100,181,246,0.12); }
.sb-dot { width: 6px; height: 6px; border-radius: 50%; }
.sb-dot.ok     { background: var(--status-ok);     box-shadow: 0 0 5px var(--status-ok); animation: sb-blink 2s infinite; }
.sb-dot.danger { background: var(--status-danger); box-shadow: 0 0 5px var(--status-danger); animation: sb-blink 2s infinite; }
@keyframes sb-blink { 0%,100%{opacity:1} 50%{opacity:0.35} }
.sb-right { display: flex; align-items: center; gap: var(--s4); color: rgba(255,255,255,0.55); font-size: 10px; }
.sb-clock { color: rgba(255,255,255,0.8); }

/* ═══════════════════════════════════════════════════════════════════════════
   CHROME — TOPBAR
═══════════════════════════════════════════════════════════════════════════ */
#gfb-topbar {
  position: fixed; top: var(--statusbar-h); left: 0; right: 0;
  height: var(--topbar-h);
  background: var(--bg-topbar);
  border-bottom: 2px solid var(--gfb-amber);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4);
  padding: 0 var(--s5);
  z-index: 1190;
  box-shadow: 0 2px 12px rgba(0,0,0,0.35);
}
.tb-left  { display: flex; align-items: center; gap: var(--s4); min-width: 0; }
.tb-right { display: flex; align-items: center; gap: var(--s2); }

.logo-wrap { display: flex; align-items: center; gap: var(--s3); text-decoration: none; }
.logo-icon {
  width: 34px; height: 34px;
  background: var(--gfb-amber);
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: #0A1F22; flex-shrink: 0;
}
.logo-block { display: flex; flex-direction: column; line-height: 1.05; }
.logo-text  { font-size: 15px; font-weight: 800; color: #fff; letter-spacing: -0.02em; white-space: nowrap; }
.logo-text span { color: var(--gfb-amber); }
.logo-sub   { font-size: 9px; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(255,255,255,0.55); margin-top: 1px; }

/* Tabs (mantêm o plugin Bootstrap; só re-estilizadas) */
#gfb-topbar .nav-tabs { border: none; display: flex; gap: 2px; }
#gfb-topbar .nav-tabs .nav-link {
  padding: 6px 14px; border: 1px solid transparent; border-radius: var(--r-md);
  font-size: 12.5px; font-weight: 500; color: rgba(255,255,255,0.7);
  background: transparent; margin: 0; transition: all var(--t-fast);
}
#gfb-topbar .nav-tabs .nav-link:hover { color: #fff; background: rgba(255,255,255,0.08); }
#gfb-topbar .nav-tabs .nav-link.active {
  color: #fff; background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.25); font-weight: 600;
}

/* Botões do topbar */
.tb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; min-width: 32px; padding: 0 10px;
  border-radius: var(--r-md); border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.92);
  font-size: 12px; font-weight: 500; cursor: pointer; font-family: var(--font);
  transition: all var(--t-fast); white-space: nowrap;
}
.tb-btn:hover { background: rgba(255,255,255,0.16); color: #fff; border-color: var(--gfb-amber); }
.tb-btn.icon-only { padding: 0; }
.tb-user {
  display: inline-flex; align-items: center; gap: 7px;
  color: rgba(255,255,255,0.85); font-size: 12px; font-weight: 500;
  padding: 0 8px; max-width: 180px; overflow: hidden;
}
.tb-user i { color: var(--gfb-amber); }
.tb-user span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-toggle { display: none; }

/* Dropdown de colunas dentro do topbar */
#gfb-topbar .dropdown-toggle.tb-btn::after { margin-left: 4px; }

/* ═══════════════════════════════════════════════════════════════════════════
   CHROME — SIDEBAR (hierarquia de câmeras)
═══════════════════════════════════════════════════════════════════════════ */
#gfb-sidebar {
  position: fixed;
  top: calc(var(--statusbar-h) + var(--topbar-h));
  left: 0; bottom: 0;
  width: var(--sidebar-w);
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
  display: flex; flex-direction: column;
  z-index: 1100;
  border-right: 1px solid var(--sidebar-border);
  transition: transform var(--t-base), background-color var(--t-base);
}
.sidebar-head {
  padding: var(--s4) var(--s4) var(--s3);
  background: var(--sidebar-head-bg);
  border-bottom: 1px solid var(--sidebar-border);
}
.sidebar-title {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--sidebar-text-dim);
  display: flex; align-items: center; gap: 7px; margin-bottom: var(--s3);
}
.sidebar-title i { color: var(--sidebar-icon); }

/* Busca da árvore */
.sidebar-search { position: relative; }
.sidebar-search i.search-ic {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  font-size: 11px; color: var(--sidebar-text-dim); pointer-events: none;
}
.sidebar-search input {
  width: 100%; height: 32px; padding: 0 28px 0 28px;
  background: var(--sidebar-input-bg);
  border: 1px solid var(--sidebar-input-border);
  border-radius: var(--r-md); color: var(--sidebar-text); font-size: 12px; font-family: var(--font);
  transition: border-color var(--t-fast), background-color var(--t-fast);
}
.sidebar-search input::placeholder { color: var(--sidebar-text-dim); }
.sidebar-search input:focus { outline: none; border-color: var(--gfb-amber); }
.sidebar-search .clear-btn {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--sidebar-text-dim); cursor: pointer;
  font-size: 12px; padding: 4px;
}
.sidebar-search .clear-btn:hover { color: var(--sidebar-text); }

.sidebar-tree { flex: 1 1 auto; overflow-y: auto; overflow-x: auto; padding: var(--s2) 0; }
.sidebar-foot {
  padding: var(--s3) var(--s4);
  font-size: 9px; color: var(--sidebar-text-dim);
  border-top: 1px solid var(--sidebar-border);
  font-family: var(--font-mono); letter-spacing: 0.04em;
}

/* jsTree dentro da sidebar — herda o tema (anula fundo branco legado) */
.sidebar-tree .jstree-container-ul,
.sidebar-tree .jstree,
.sidebar-tree .jstree-default { background: transparent !important; }
#cameraTree .jstree-anchor,
.sidebar-tree .jstree-anchor { color: var(--sidebar-text); white-space: nowrap; }
.sidebar-tree .jstree-anchor:hover { background: var(--sidebar-hover-bg) !important; color: var(--sidebar-text); border-radius: var(--r-sm); }
.sidebar-tree .jstree-anchor.jstree-clicked,
.sidebar-tree .jstree-anchor.jstree-hovered {
  background: var(--sidebar-active-bg) !important;
  color: var(--sidebar-active-text) !important; border-radius: var(--r-sm); box-shadow: none;
}
.sidebar-tree .jstree-default .jstree-icon { color: var(--sidebar-icon); }
.sidebar-tree .jstree-wholerow-clicked,
.sidebar-tree .jstree-wholerow-hovered { background: var(--sidebar-hover-bg) !important; }
.sidebar-tree .root-summary-node > .jstree-anchor { color: var(--sidebar-icon); font-weight: 600; background: transparent !important; border-left: none !important; }
.sidebar-tree .text-muted { color: var(--sidebar-text-dim) !important; }

/* ───────────────────────────────────────────────────────────────────────────
   SIDEBAR RESIZER — alça de redimensionamento (largura controlada pelo usuário)
─────────────────────────────────────────────────────────────────────────── */
#sidebarResizer {
  position: absolute; top: 0; right: -2px; bottom: 0;
  width: 6px; cursor: col-resize; z-index: 1101;
  background: transparent; touch-action: none;
  transition: background-color var(--t-fast);
}
#sidebarResizer::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 2px; width: 1px;
  background: var(--sidebar-border);
}
#sidebarResizer:hover, #sidebarResizer.dragging { background: var(--gfb-amber); }
#sidebarResizer:hover::after, #sidebarResizer.dragging::after { background: var(--gfb-amber); }
body.sidebar-resizing { cursor: col-resize; user-select: none; -webkit-user-select: none; }
body.sidebar-resizing #gfb-sidebar,
body.sidebar-resizing #gfb-main { transition: none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   MAIN / CONTENT
═══════════════════════════════════════════════════════════════════════════ */
#gfb-main {
  margin-top: calc(var(--statusbar-h) + var(--topbar-h));
  margin-left: var(--sidebar-w);
  min-height: calc(100vh - var(--statusbar-h) - var(--topbar-h));
  padding: var(--s4) var(--s5) var(--s6);
  transition: margin-left var(--t-base);
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENT OVERRIDES — consomem os tokens
═══════════════════════════════════════════════════════════════════════════ */

/* Painéis / cards */
.card {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  color: var(--text);
}
.card-header,
.card-header.bg-light {
  background: var(--bg-raised) !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--text);
}
.card-title { color: var(--text) !important; }

/* Painel do grid ocupa a altura útil sob o chrome */
.camera-grid-panel { min-height: calc(100vh - var(--statusbar-h) - var(--topbar-h) - 90px); }

/* Camera cell */
.camera-cell {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.camera-cell:hover { box-shadow: var(--shadow-md); border-color: var(--border-dark); }
.camera-cell-header {
  background: var(--bg-topbar);
  color: #fff;
}
.camera-status.online  { background-color: var(--status-ok); box-shadow: 0 0 6px var(--status-ok); }
.camera-status.offline { background-color: var(--status-danger); }
.camera-status.unknown { background-color: var(--text-muted); }
.camera-controls { border-top: 1px solid var(--border); }

/* PTZ */
.ptz-btn {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  color: var(--text-secondary);
}
.ptz-btn:hover { background: var(--gfb-primary); color: #fff; border-color: var(--gfb-primary); }

/* Tabs legadas que ainda existam fora do topbar */
.nav-tabs { border-bottom: 2px solid var(--border); }
.nav-tabs .nav-link { color: var(--text-secondary); }
.nav-tabs .nav-link:hover { border-bottom-color: var(--gfb-primary); color: var(--gfb-primary); }
.nav-tabs .nav-link.active { color: var(--gfb-primary); border-bottom-color: var(--gfb-primary); background: transparent; }

/* Botões "white" legados (caso usados) */
.btn-white { background: var(--bg-surface); color: var(--text-secondary); border-color: var(--border); }
.btn-white:hover { background: var(--bg-raised); color: var(--gfb-primary); border-color: var(--gfb-primary); }

/* Dropdown */
.dropdown-menu {
  background: var(--bg-surface); border: 1px solid var(--border); box-shadow: var(--shadow-md);
}
.dropdown-item { color: var(--text); font-size: 13px; }
.dropdown-item:hover { background: var(--bg-raised); color: var(--gfb-primary); }
.dropdown-item.active, .dropdown-item:active { background: var(--gfb-primary); color: #fff; }

/* Form controls */
.form-control, .input-group-text {
  background: var(--bg-surface) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
.form-control::placeholder { color: var(--text-placeholder) !important; }
.form-control:focus { border-color: var(--gfb-primary) !important; box-shadow: 0 0 0 3px var(--status-ok-dim) !important; }

/* System log */
.system-log {
  background: #06181A; color: #cfd8dc; border: 1px solid var(--border-dark);
  font-family: var(--font-mono);
}
.log-entry { border-bottom: 1px solid rgba(255,255,255,0.06); }
.log-entry.log-info    { color: var(--status-info); }
.log-entry.log-error   { color: var(--status-danger); }
.log-entry.log-success { color: var(--status-ok); }
.log-entry.log-warning { color: var(--status-warn); }

/* Map — altura recalculada para o chrome fixo (statusbar+topbar) */
.map-container {
  background: var(--bg-raised);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  height: calc(100vh - var(--statusbar-h) - var(--topbar-h) - 130px);
  min-height: 360px;
}
.map-stats { background: var(--bg-surface); color: var(--text); box-shadow: var(--shadow-md); }
.camera-marker-popup .status-online  { background-color: var(--status-ok); }
.camera-marker-popup .status-offline { background-color: var(--status-danger); }

/* Floating window */
.floating-window { background: var(--bg-surface); box-shadow: var(--shadow-lg); }
.floating-window-header { background: var(--bg-topbar); }
.floating-window-content { background: var(--bg-surface); }
.floating-window-content .camera-info { background: var(--bg-raised); }
.floating-window-content .camera-info-label { color: var(--text-secondary); }
.floating-window-content .camera-info-value { color: var(--text); }
.floating-window-resizer { background: linear-gradient(135deg, transparent 50%, var(--gfb-primary) 50%); }

/* Modal */
.modal-content { background: var(--bg-surface); color: var(--text); border: 1px solid var(--border); }
.modal-header, .modal-header.bg-light { background: var(--bg-raised) !important; border-bottom: 1px solid var(--border); }
.modal-footer { border-top: 1px solid var(--border); }

/* Badges utilitárias do Bootstrap usadas no app */
.badge.bg-info { background: var(--status-info) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   THEME TOGGLE (FAB)
═══════════════════════════════════════════════════════════════════════════ */
#themeToggle {
  position: fixed; bottom: 24px; right: 24px; z-index: 1500;
  width: 46px; height: 46px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--gfb-primary); color: #fff; font-size: 18px;
  box-shadow: var(--shadow-md);
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-base);
}
#themeToggle:hover { transform: scale(1.1); box-shadow: var(--shadow-lg); }

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVO — sidebar vira gaveta abaixo de lg (992px)
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
  .menu-toggle { display: inline-flex !important; }
  #gfb-main { margin-left: 0; }
  #gfb-sidebar {
    width: 86vw; max-width: 340px;
    transform: translateX(-105%);
    box-shadow: var(--shadow-lg);
  }
  body.tree-open #gfb-sidebar { transform: translateX(0); }
  body.tree-open .tree-backdrop { display: block; opacity: 1; }
  .tree-backdrop { z-index: 1095; }
  .tb-user { display: none; }
  /* Largura é gerida pela gaveta no mobile; sem redimensionamento manual */
  #sidebarResizer { display: none; }
}

@media (max-width: 575.98px) {
  #gfb-topbar { padding: 0 var(--s3); gap: var(--s2); }
  .logo-sub { display: none; }
  #gfb-topbar .nav-tabs .nav-link .tab-label { display: none; }
}