/* Águia — refinamento visual do painel (camada final, só aparência).
   Uma linguagem só para o painel inteiro: faixas de 40 px (logo, barra do canto, abas, cabeçalhos dos painéis e das gavetas),
   mesma paleta, linhas finas em vez de blocos pesados e o laranja da marca só como destaque. */

/* Sem o encolhimento por escala (85%) do agon-compact: tudo é dimensionado de verdade, então as faixas e os textos batem */
:root {
  --agon-ui-zoom: 1;
  --ag-sb: 330px;
  --ag-h: 40px;
  --ag-bg0: #16181c;
  --ag-bg1: #1d2025;
  --ag-bg2: #262a30;
  --ag-line: #2d3238;
  --ag-txt: #e8eaed;
  --ag-mut: #9097a2;
  --ag-acc: #f59e0b;
  --ag-r: 8px;
}

/* ───────── Faixa de cima: logo + nome (largura da barra lateral) e barra do canto ───────── */
#header.folded .navbar .navbar-brand {
  display: flex !important;
  align-items: center !important;
  gap: 10px;
  width: var(--ag-sb) !important;
  max-width: var(--ag-sb) !important;
  height: var(--ag-h) !important;
  min-height: var(--ag-h) !important;
  padding: 0 14px !important;
  background: var(--ag-bg0) !important;
  border-bottom: 1px solid var(--ag-line);
  border-right: 1px solid var(--ag-line);
}
#header.folded .navbar .navbar-brand img { height: 26px !important; width: auto !important; margin: 0 !important; }
#header.folded .navbar .navbar-brand::after {
  content: attr(title) !important;
  display: block !important;
  border: 0 !important;
  position: static !important;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ag-txt);
  white-space: nowrap;
}
#header .navbar-header { height: var(--ag-h) !important; min-height: var(--ag-h) !important; }
#header .navbar-brand { padding-top: 0 !important; padding-bottom: 0 !important; }

#header.folded .navbar-nav.navbar-right,
#header .navbar-nav.navbar-right {
  height: var(--ag-h) !important;
  min-height: var(--ag-h) !important;
  background: var(--ag-bg0) !important;
  border-left: 1px solid var(--ag-line);
  border-bottom: 1px solid var(--ag-line);
  border-radius: 0 !important;
  box-shadow: none !important;
}
#header .navbar-nav > li > a,
#header .navbar-nav > li > .navbar-text {
  height: var(--ag-h) !important;
  line-height: var(--ag-h) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: flex !important;
  align-items: center;
  color: var(--ag-mut) !important;
}
#header .navbar-nav > li > .navbar-text { margin: 0 !important; padding: 0 12px !important; font-size: 12.5px; font-weight: 600; color: var(--ag-txt) !important; }
#header .navbar-nav > li > a:hover,
#header .navbar-nav > li.open > a,
#header .navbar-nav > li > a:focus { color: var(--ag-acc) !important; background: var(--ag-bg2) !important; }

/* ───────── Barra lateral: abas, busca, grupos e lista ───────── */
#sidebar {
  transform: none !important;
  width: var(--ag-sb) !important;
  top: var(--ag-h) !important;
  max-height: calc(100% - var(--ag-h)) !important;
  height: calc(100% - var(--ag-h)) !important;
  background: var(--ag-bg1) !important;
  border-right: 1px solid var(--ag-line);
}
#sidebar.collapsed { width: 0 !important; }
#sidebar .sidebar-content { background: var(--ag-bg1) !important; }
#widgets { zoom: 1 !important; }
@media (min-width: 501px) { #bottombar { padding-left: var(--ag-sb) !important; } }
#sidebar.collapsed ~ #bottombar { padding-left: 0 !important; }

#sidebar .nav-tabs {
  display: flex;
  height: var(--ag-h) !important;
  min-height: var(--ag-h) !important;
  background: var(--ag-bg0) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ag-line) !important;
  margin: 0 !important;
}
#sidebar .nav-tabs > li { flex: 1 1 0; margin: 0 !important; float: none !important; }
#sidebar .nav-tabs > li > a {
  display: flex !important;
  align-items: center;
  justify-content: center;
  height: var(--ag-h) !important;
  padding: 0 6px !important;
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--ag-mut) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: .02em;
}
#sidebar .nav-tabs > li > a:hover { color: var(--ag-txt) !important; background: var(--ag-bg2) !important; }
#sidebar .nav-tabs > li.active > a,
#sidebar .nav-tabs > li.active > a:hover,
#sidebar .nav-tabs > li.active > a:focus {
  color: #fff !important;
  background: transparent !important;
  border-bottom-color: var(--ag-acc) !important;
}
#sidebar .nav-tabs > li.hidden { display: none !important; }

/* campo de busca e botões ao lado */
#sidebar .form-control {
  background: var(--ag-bg0) !important;
  border: 1px solid var(--ag-line) !important;
  border-radius: var(--ag-r) !important;
  color: var(--ag-txt) !important;
  height: 30px !important;
}
#sidebar .form-control:focus { border-color: var(--ag-acc) !important; box-shadow: none !important; }
#sidebar .input-group-btn .btn,
#sidebar .btn-group .btn.btn-default {
  border-radius: var(--ag-r) !important;
  border: 1px solid var(--ag-line) !important;
  background: var(--ag-bg0) !important;
  color: var(--ag-mut) !important;
}

/* grupos e veículos */
#sidebar .group-heading {
  background: var(--ag-bg0) !important;
  border-top: 1px solid var(--ag-line);
  border-bottom: 1px solid var(--ag-line);
  height: 32px !important;
  line-height: 30px;
}
#sidebar .group-title { font-size: 12.5px !important; font-weight: 600; color: var(--ag-txt); }
#sidebar .group .group-body li,
#sidebar li[id^="list-device-"] {
  border-bottom: 1px solid var(--ag-line) !important;
  transition: background .12s;
}
#sidebar li[id^="list-device-"]:hover { background: var(--ag-bg2) !important; }
#sidebar li[id^="list-device-"].active,
#sidebar li[id^="list-device-"].selected { background: var(--ag-bg2) !important; box-shadow: inset 3px 0 0 var(--ag-acc); }
#sidebar .name { color: var(--ag-txt); font-size: 12.5px; }
#sidebar .agon-device-meta { color: var(--ag-mut) !important; }

/* tabelas da barra lateral (eventos): colunas naturais, quebra só quando precisa */
#sidebar .table { width: 100%; }
#sidebar .table th,
#sidebar .table td { overflow-wrap: break-word; padding: 6px 8px !important; vertical-align: top; }
#sidebar .table td:first-child { min-width: 78px; }
#sidebar .table th { color: var(--ag-mut); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--ag-line) !important; white-space: nowrap; }
#sidebar .table td { border-top: 1px solid var(--ag-line) !important; font-size: 12px; }

/* ───────── Painéis de baixo (detalhes do veículo): mesma faixa de 40 px das abas ───────── */
#widgets {
  background: var(--ag-bg1) !important;
  border-top: 1px solid var(--ag-line);
}
#widgets .widget { border-right: 1px solid var(--ag-line); background: transparent !important; }
#widgets .widget:last-child { border-right: 0; }
#widgets .widget-heading {
  display: flex !important;
  align-items: center;
  height: var(--ag-h) !important;
  min-height: var(--ag-h) !important;
  padding: 0 14px !important;
  background: var(--ag-bg0) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ag-line) !important;
}
#widgets .widget-heading .widget-title {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  color: var(--ag-txt) !important;
}
#widgets .widget-heading .icon { color: var(--ag-acc) !important; }
#widgets .widget-body td { color: var(--ag-mut); }

/* ───────── Botões do mapa (lado direito) ───────── */
.btn-group-vertical > .btn,
#map .btn-group-vertical > .btn { border-radius: var(--ag-r) !important; margin-bottom: 4px; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); }

/* ───────── Gavetas (Cobranças e as demais) ───────── */
#agon-cobrancas-drawer {
  top: var(--ag-h) !important;
  background: var(--ag-bg1) !important;
  border-left: 1px solid var(--ag-line);
  box-shadow: -10px 0 30px rgba(0, 0, 0, .35) !important;
}
#agon-cobrancas-drawer .agon-cobrancas-drawer__head {
  height: var(--ag-h) !important;
  background: var(--ag-bg0) !important;
  border-bottom: 1px solid var(--ag-line) !important;
  color: var(--ag-txt);
  font-size: 13px;
}
#agon-cobrancas-drawer .agon-cobrancas-drawer__body { height: calc(100% - var(--ag-h)) !important; background: var(--ag-bg1) !important; }
#agon-cobrancas-drawer .agon-cobrancas-drawer__full {
  margin-left: 12px;
  padding: 3px 10px;
  border: 1px solid var(--ag-line);
  border-radius: 999px;
  color: var(--ag-acc);
  font-size: 11.5px;
}
#agon-cobrancas-drawer .agon-cobrancas-drawer__full:hover { background: var(--ag-bg2); text-decoration: none; }

/* larguras do painel de baixo (sem o zoom antigo): cabem no mesmo espaço de antes */
#widgets .widget-device { width: 330px !important; }
#widgets .widget-sensors .table { width: 150px !important; }
#widgets .widget-streetview { width: 230px !important; }
#widgets .widget-services { width: 260px !important; }
#widgets .widget-heading [data-device="name"] { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
#widgets .widget-heading .widget-title { min-width: 0; }