/**
 * CONECTA ANGOLA - Portal Administrativo
 * Folha de Estilos Institucional (Fase 2.1 - Visual Skin)
 *
 * Princípio Fundamental:
 * CUBA = estrutura, dimensões, geometria, espaçamentos e comportamento
 * CONECTA ANGOLA = marca, cores (#0077C0, #F58220, #231F20, #FFFFFF) e logotipos
 */

:root {
  /* Paleta Oficial CONECTA ANGOLA */
  --conecta-blue: #0077C0;
  --conecta-orange: #F58220;
  --conecta-black: #231F20;
  --conecta-white: #FFFFFF;

  /* Derivados Sutis para Hover, Bordas e Fundos */
  --conecta-blue-hover: #00609c;
  --conecta-blue-dark: #004d7c;
  --conecta-blue-light: rgba(0, 119, 192, 0.08);
  --conecta-blue-border: rgba(0, 119, 192, 0.22);

  --conecta-orange-hover: #d96e14;
  --conecta-orange-dark: #bd5c0a;
  --conecta-orange-light: rgba(245, 130, 32, 0.12);
  --conecta-orange-border: rgba(245, 130, 32, 0.28);

  --conecta-text: #231F20;
  --conecta-text-muted: #64748b;
  --conecta-border: #e2e8f0;

  /* Sobrescrita das variáveis do Template Cuba */
  --theme-default: var(--conecta-blue) !important;
  --theme-secondary: var(--conecta-orange) !important;
  --primary-color: var(--conecta-blue) !important;
  --secondary-color: var(--conecta-orange) !important;
}

/* ==========================================================================
   TIPOGRAFIA & CORES BÁSICAS
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
  color: var(--conecta-black);
}

a {
  color: var(--conecta-blue);
  transition: color 0.2s ease;
}

a:hover {
  color: var(--conecta-blue-hover);
}

/* ==========================================================================
   LOGOTIPOS INSTITUCIONAIS NO HEADER & SIDEBAR
   (Preserva integralmente a geometria, padding e posicionamento nativo do Cuba)
   ========================================================================== */
.sidebar-wrapper .logo-wrapper img {
  max-height: 30px;
  width: auto;
  object-fit: contain;
}

.page-header .header-logo-wrapper .logo-wrapper img {
  max-height: 26px;
  width: auto;
  object-fit: contain;
}

.sidebar-wrapper .logo-icon-wrapper img,
.sidebar-wrapper .sidebar-links .back-btn img {
  max-height: 30px;
  width: auto;
  object-fit: contain;
}

/* ==========================================================================
   MENU LATERAL (SIDEBAR) & NAVEGAÇÃO
   (Preserva dimensões, larguras, paddings, margins, fontes e submenus do Cuba)
   ========================================================================== */

/* Fundo sutil do item ativo no menu (substitui o roxo do Cuba pelo azul Conecta suave) */
.page-wrapper.compact-wrapper .page-body-wrapper div.sidebar-wrapper .sidebar-main .sidebar-links .simplebar-wrapper .simplebar-mask .simplebar-content-wrapper .simplebar-content > li .sidebar-link.active {
  background-color: #e8f3fa;
}

/* ==========================================================================
   BOTÕES CORPORATIVOS
   ========================================================================== */
.btn-primary {
  background-color: var(--conecta-blue) !important;
  border-color: var(--conecta-blue) !important;
  color: var(--conecta-white) !important;
  box-shadow: 0 2px 6px rgba(0, 119, 192, 0.25) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--conecta-blue-hover) !important;
  border-color: var(--conecta-blue-hover) !important;
  color: var(--conecta-white) !important;
  box-shadow: 0 4px 10px rgba(0, 119, 192, 0.35) !important;
}

.btn-secondary {
  background-color: var(--conecta-orange) !important;
  border-color: var(--conecta-orange) !important;
  color: var(--conecta-white) !important;
  box-shadow: 0 2px 6px rgba(245, 130, 32, 0.25) !important;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
  background-color: var(--conecta-orange-hover) !important;
  border-color: var(--conecta-orange-hover) !important;
  color: var(--conecta-white) !important;
  box-shadow: 0 4px 10px rgba(245, 130, 32, 0.35) !important;
}

.btn-outline-primary {
  color: var(--conecta-blue) !important;
  border-color: var(--conecta-blue) !important;
}

.btn-outline-primary:hover {
  background-color: var(--conecta-blue) !important;
  color: var(--conecta-white) !important;
}

.btn-outline-secondary {
  color: var(--conecta-orange) !important;
  border-color: var(--conecta-orange) !important;
}

.btn-outline-secondary:hover {
  background-color: var(--conecta-orange) !important;
  color: var(--conecta-white) !important;
}

/* ==========================================================================
   BADGES & INDICADORES
   ========================================================================== */
.badge-primary,
.badge-light-primary {
  background-color: var(--conecta-blue-light) !important;
  color: var(--conecta-blue) !important;
  border: 1px solid var(--conecta-blue-border);
}

.badge-secondary,
.badge-light-secondary {
  background-color: var(--conecta-orange-light) !important;
  color: var(--conecta-orange-dark) !important;
  border: 1px solid var(--conecta-orange-border);
}

/* ==========================================================================
   BREADCRUMBS
   ========================================================================== */
.breadcrumb-item a:hover {
  color: var(--conecta-blue) !important;
}

.breadcrumb-item.active {
  color: var(--conecta-blue) !important;
}

/* ==========================================================================
   FASE 2.7 — SITES | MAPA OPERACIONAL DE ÁFRICA & ANGOLA
   ========================================================================== */
.sites-map-container {
  position: relative;
  width: 100%;
  height: 660px;
  background-color: #f8fafc;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.04);
}

.sites-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.sites-map-toolbar {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 10;
  display: flex;
  gap: 8px;
  background: rgba(255, 255, 255, 0.94);
  padding: 6px;
  border-radius: 30px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(226, 232, 240, 0.85);
}

.sites-map-zoom-controls {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(255, 255, 255, 0.94);
  padding: 6px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(226, 232, 240, 0.85);
}

.sites-map-zoom-controls .btn {
  width: 34px;
  height: 34px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  border-radius: 6px;
}

.site-marker-interactive {
  cursor: pointer;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.site-marker-interactive:hover,
.site-marker-interactive.active-highlight {
  filter: drop-shadow(0 0 10px rgba(0, 119, 192, 0.85)) brightness(1.15) !important;
}

.site-marker-interactive.selected-focus circle:nth-child(2) {
  stroke: #ffb703 !important;
  stroke-width: 3.5px !important;
}

.marker-floating-tag {
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* Tooltip customizado flutuante */
.sites-custom-tooltip {
  position: absolute;
  z-index: 9999;
  max-width: 290px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(12px);
  pointer-events: none;
  font-family: 'Rubik', sans-serif;
  overflow: hidden;
}

.sites-custom-tooltip .tooltip-card {
  border-left: 4px solid var(--conecta-blue);
}

/* Tabelas da Legenda */
.legend-scroll-box {
  max-height: 245px;
  overflow-y: auto;
  border: 1px solid #edf2f7;
  border-radius: 8px;
}

.legend-table {
  font-size: 12px;
  margin-bottom: 0;
}

.legend-table thead th {
  position: sticky;
  top: 0;
  background: #f1f5f9;
  color: #334155;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 2;
  border-bottom: 1px solid #cbd5e1;
}

.legend-row-item {
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.legend-row-item:hover,
.legend-row-item.table-active-highlight {
  background-color: #e0f2fe !important;
}

.legend-row-item.table-selected-focus {
  background-color: #bae6fd !important;
  font-weight: 600;
}

.official-legend-card {
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 14px;
}

/* Modo Escuro (Dark Mode) */
body.dark-only .sites-map-container {
  background-color: #0b1329;
  border-color: #1e293b;
}

body.dark-only .ocean-bg {
  fill: #081022 !important;
}

body.dark-only .neighbor-country {
  fill: #131d35 !important;
  stroke: #1e293b !important;
}

body.dark-only .neighbor-country + text,
body.dark-only text[letter-spacing="1"],
body.dark-only text[letter-spacing="2"] {
  fill: #475569 !important;
}

body.dark-only .sites-map-toolbar,
body.dark-only .sites-map-zoom-controls {
  background: rgba(15, 23, 42, 0.92);
  border-color: #334155;
}

body.dark-only .sites-custom-tooltip {
  background: rgba(15, 23, 42, 0.96);
  border-color: #334155;
  color: #f8fafc;
}

body.dark-only .sites-custom-tooltip h6,
body.dark-only .sites-custom-tooltip .text-dark {
  color: #f8fafc !important;
}

body.dark-only .sites-custom-tooltip .border-bottom {
  border-color: #334155 !important;
}

body.dark-only .legend-scroll-box {
  border-color: #1e293b;
}

body.dark-only .legend-table thead th {
  background: #1e293b;
  color: #cbd5e1;
  border-color: #334155;
}

body.dark-only .legend-row-item {
  color: #cbd5e1;
}

body.dark-only .legend-row-item:hover,
body.dark-only .legend-row-item.table-active-highlight {
  background-color: rgba(0, 119, 192, 0.25) !important;
}

body.dark-only .official-legend-card {
  background-color: #0f172a;
  border-color: #1e293b;
}

/* ==========================================================================
   FASE 2.8.5: REMOÇÃO GLOBAL DOS CONTROLES FLUTUANTES DO CUSTOMIZER CUBA
   ========================================================================== */
.sidebar-panel-main,
.layout-sidebar,
.setting-sidebar,
#grip-click,
#cog-click,
.floated-customizer-panel,
.customizer-contain,
.customizer-links,
.loader-wrapper {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}