/* ============================================
   Radar Common — estilos compartilhados
   ============================================ */

/* ---- Workspace ---- */
.radar-workspace {
  background-color: var(--dark-bg);
  min-height: calc(100vh - 60px);
  padding-bottom: 2rem;
  color-scheme: light;
}

/* ---- Breadcrumb ---- */
.radar-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.9rem 0 0.6rem;
  font-size: 0.82rem;
}

.radar-breadcrumb a {
  text-decoration: none;
  font-weight: 600;
}

.radar-breadcrumb a:hover {
  text-decoration: underline;
}

.radar-breadcrumb .sep {
  color: var(--text-muted);
}

.radar-breadcrumb .current {
  color: var(--text-secondary);
}

.radar-breadcrumb-date {
  color: var(--text-muted);
  font-size: 0.78rem;
}

/* ---- Filtros ---- */


.radar-select {
  width: 100%;
  height: 48px;
  background-color: var(--dark-card);
  border: 1px solid var(--dark-border);
  border-radius: 10px;
  color: var(--text-primary);
  font-size: 0.88rem;
  padding: 0 0.9rem;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' viewBox='0 0 24 24' stroke='%2364748b' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
}

.radar-select option,
.radar-select optgroup {
  background-color: var(--dark-card);
  color: var(--text-primary);
}

/* ---- Painel: lista + mapa ---- */
.radar-panel {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  align-items: stretch;
  min-height: 600px;
  width: 100%;
}

.radar-panel-list {
  flex: 0 0 20%;
  width: 20%;
  max-width: 20%;
  height: calc(100vh - 220px);
  overflow: hidden;
  background: var(--dark-card);
  border: 1px solid var(--dark-border);
  border-radius: 16px;
  isolation: isolate;
  contain: paint;
  transition: all 0.3s ease;
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
}

.radar-panel-list-inner {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* ---- Overlay para esmaecer fundo ---- */
.radar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(2px);
  z-index: 5;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.radar-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* ---- Estados de maximização ---- */

/* Tabela maximizada - 90% centralizado */
.radar-panel--table-max {
  justify-content: center;
}

.radar-panel.radar-panel--table-max .radar-panel-list,
.radar-panel--50-50.radar-panel--table-max .radar-panel-list {
  flex: 0 0 90% !important;
  width: 90% !important;
  max-width: 90% !important;
  z-index: 20;
}

.radar-panel--table-max .radar-panel-map,
.radar-panel--50-50.radar-panel--table-max .radar-panel-map {
  display: none !important;
}

/* Mapa maximizado - 95% centralizado */
.radar-panel--map-max {
  justify-content: center;
}

.radar-panel--map-max .radar-panel-list,
.radar-panel--50-50.radar-panel--map-max .radar-panel-list {
  display: none !important;
}

/* ---- Mapa Maximizado Universal (Modo Fixo) ---- */
.radar-panel.radar-panel--map-max .radar-panel-map,
.radar-panel--50-50.radar-panel--map-max .radar-panel-map {
  /* Arranca o elemento do fluxo da página e o trava na janela */
  position: fixed !important;
  
  /* Cola o painel no topo, mas dá 80px de folga para o Menu Principal (Navbar laranja) não ser coberto */
  top: 100px !important; 
  left: 50% !important;
  transform: translateX(-50%) !important; /* Centraliza perfeitamente no eixo X */
  
  /* Ocupa 98% da tela, ignorando o contêiner original */
  width: 98vw !important; 
  max-width: 1920px !important; /* Limite de segurança para monitores ultrawide */
  
  /* Altura total da tela menos o menu laranja e um respiro no rodapé */
  height: calc(100vh - 100px) !important; 
  
  /* Remove margens antigas que causariam colisão com o top/left */
  margin: 0 !important; 
  
  z-index: 1050 !important; /* Força sobreposição máxima estilo Modal do Bootstrap */
}

/* ---- Botões de maximizar ---- */
.btn-maximize {
  background: transparent;
  border: 1px solid var(--dark-border);
  color: var(--text-secondary);
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.85rem;
}

.btn-maximize:hover {
  background: var(--dark-border);
  color: var(--text-primary);
  border-color: var(--text-muted);
}


/* ---- Modo 50/50: tabela final (quando org_id existe) ---- */
.radar-panel--50-50 .radar-panel-list {
  flex: 0 0 50%;
  width: 50%;
  max-width: 50%;
}

.radar-panel--50-50 .radar-panel-map {
  flex: 0 0 50%;
  width: 50%;
}

/* ---- Header da lista ---- */
.radar-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.3rem 1rem;
  border-bottom: 1px solid var(--dark-border);
  flex-shrink: 0;
  background: var(--radar-primary);
  color: #fff;
  z-index: 2;
}

.radar-list-title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0;
}

.radar-list-header .radar-list-title {
  color: #fff;
}

.radar-list-header .btn-maximize,
.radar-list-header .btn-export-table {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
}

.radar-list-header .btn-maximize:hover,
.radar-list-header .btn-export-table:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}

/* ---- Container de ações do header ---- */
.radar-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

/* ---- Contexto de navegação ---- */
.radar-nav-context {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.4;
  border-bottom: 1px solid var(--dark-border);
}

.radar-nav-context span {
  color: var(--text-secondary);
}

.radar-nav-context .sep {
  color: var(--text-muted);
  font-weight: 400;
}

/* ---- Tabela ---- */
.radar-table {
  color: var(--text-secondary);
  font-size: 0.83rem;
  margin: 0;
}

.radar-table thead th {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.5rem 0.75rem;
}

.radar-table thead th a {
  text-decoration: none;
}

.radar-table thead th a:hover {
  text-decoration: underline;
}

.radar-table th,
.radar-table td {
  border-color: var(--dark-border);
  background: transparent !important;
  color: var(--text-secondary);
  vertical-align: middle;
}

.radar-table a {
  transition: color 0.2s ease;
  text-decoration: none;
}

/* Handle tables without thead - add padding to tbody when it's the first child */
.radar-table tbody:first-child {
  padding-top: 0.5rem;
}

.radar-table tbody:first-child tr:first-child td,
.radar-table tbody:first-child tr:first-child th {
  padding-top: 0.75rem;
}

.radar-table .btn-link {
  font-size: 0.83rem;
}

/* ---- Mapa Bokeh ---- */
.radar-panel-map {
  flex: 0 0 80%;
  width: 80%;
  min-width: 0;
  height: calc(100vh - 220px);
  border-radius: 16px;
  border: 1px solid var(--dark-border);
  display: flex;
  flex-direction: column;
  position: relative;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

/* ---- Header banner "Painel" ---- */
.radar-map-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--radar-primary);
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 16px 16px 0 0;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  flex-shrink: 0;
}

.radar-map-header .btn-map-maximize {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.85rem;
}

.radar-map-header .btn-map-maximize:hover {
  background: rgba(0, 0, 0, 0.4);
}

/* ---- Conteúdo do mapa ---- */
.radar-map-content {
  flex: 1;
  min-width: 0;
  min-height: 0;
  position: relative;
  border-radius: 0 0 16px 16px;
  overflow: hidden;
}

.radar-map-content .bk-CanvasPanel.bk-above,
.radar-map-content .bk-CanvasPanel.bk-below,
.radar-map-content .bk-CanvasPanel.bk-left,
.radar-map-content .bk-CanvasPanel.bk-right {
  background-color: var(--dark-secondary) !important;
}

/* ---- Paginação ---- */
.radar-pagination {
  border-top: 1px solid var(--dark-border);
  padding: 0.7rem 0.7rem 0.75rem 0.7rem;
  background: var(--dark-card);
  flex-shrink: 0;
  font-size: 0.82rem;
}

.radar-pagination .current {
  color: var(--text-secondary);
  font-size: 0.82rem;
}

.radar-pagination a {
  text-decoration: none;
}

/* ---- Footer compacto ---- */
.radar-footer-compact {
  background: var(--dark-secondary);
  border-top: 1px solid var(--dark-border);
  padding: 0.85rem 0;
}

.radar-footer-text {
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* ---- Contagem de registros ---- */
.radar-count {
  font-size: 0.8rem;
  color: var(--text-muted);
  padding: 0.3rem 0.75rem;
  border-bottom: 1px solid var(--dark-border);
}

/* ---- Aviso: sem resultados para a região filtrada ---- */
.radar-feedback-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  margin: 0.6rem 0.5rem 0.75rem;
  padding: 0.85rem 1rem 0.85rem 1.1rem;
  background: rgba(120, 53, 15, 0.08);
  border: 1px solid rgba(255, 128, 0, 0.3);
  border-radius: 8px;
  overflow: hidden;
}

.radar-feedback-card__bar {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 4px;
  background: #ff8000;
}

.radar-feedback-card__icon {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: #facc15;
  color: #1a1300;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  margin-top: 0.1rem;
}

.radar-feedback-card__body {
  flex: 1 1 auto;
  min-width: 0;
}

.radar-feedback-card__tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #b45309;
  margin-bottom: 0.25rem;
}

.radar-feedback-card__title {
  margin: 0 0 0.25rem;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
}

.radar-feedback-card__text {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.45;
}

/* ---- Responsivo: mobile (largura ≤768px) ---- */
@media (max-width: 768px) {
  .radar-panel,
  .radar-panel--50-50 {
    flex-direction: column;
    min-height: auto;
    gap: 0.5rem;
  }

  .radar-panel-list,
  .radar-panel--50-50 .radar-panel-list {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  .radar-panel-list-inner {
    height: 400px;
    flex: none;
  }

  .radar-panel-map,
  .radar-panel--50-50 .radar-panel-map {
    flex: 0 0 100% !important;
    width: 100% !important;
    height: 500px;
  }

  /* Maximização mantida */
  .radar-panel--table-max .radar-panel-list {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 90vh;
  }

  .radar-panel--map-max .radar-panel-map {
    flex: 0 0 98% !important;
    width: 98% !important;
    height: 90vh !important;
  }

  .radar-overlay {
    display: none;
  }

  /* Breadcrumb */
  .radar-breadcrumb {
    flex-wrap: wrap;
    font-size: 0.75rem;
    gap: 0.25rem;
    padding: 0.6rem 0 0.4rem;
  }

  /* Filtros */
  .radar-filters .row > [class*="col-"] {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }

  .radar-select {
    height: 42px;
    font-size: 0.82rem;
  }

  /* Headers */
  .radar-list-header {
    padding: 0.4rem 0.75rem;
  }

  .radar-list-title {
    font-size: 0.72rem;
  }

  .radar-map-header {
    font-size: 0.78rem;
    padding: 0.4rem 0.75rem;
  }

  /* Botões */
  .btn-maximize,
  .radar-map-header .btn-map-maximize {
    width: 24px;
    height: 24px;
    font-size: 0.7rem;
  }

  /* Tabela com scroll horizontal */
  .radar-table {
    font-size: 0.75rem;
  }

  .radar-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Paginação */
  .radar-pagination {
    font-size: 0.75rem;
    padding: 0.5rem;
  }

  .radar-overlay {
    display: none;
  }
}