/*
  SHIFT LEGIS - Tema App (Bootstrap 5)
  - Paleta moderna
  - Navbar/Offcanvas
  - Cards e tabelas
*/

/* TEMA TRANSFORMERS REMOVIDO EM FAVOR DO PREMIUM DESIGN SYSTEM */
/* As classes .bg-transformers e .btn-gradient agora são tratadas via premium-design.css com compatibilidade */

:root {
  /* Paleta principal (moderna e profissional) */
  --sgi-primary: #4f46e5; /* Indigo 600 */
  --sgi-primary-darker: #4338ca; /* Indigo 700 */
  --sgi-accent: #06b6d4; /* Cyan 500 */
  --sgi-bg: #f7f9fc; /* leve e neutro */
  --sgi-text: #111827; /* slate-900 */
  --sgi-muted: #667085; /* texto secundário */
  --sgi-sidebar-width: 260px;

  /* Integração com Bootstrap 5 (propaga cores em bg-primary, btn-primary, etc.) */
  --bs-primary: #4f46e5;
  --bs-primary-rgb: 79, 70, 229;
  --bs-secondary: #64748b; /* slate 500 */
  --bs-secondary-rgb: 100, 116, 139;
  --bs-success: #22c55e; /* emerald 500 */
  --bs-success-rgb: 34, 197, 94;
  --bs-warning: #f59e0b; /* amber 500 */
  --bs-warning-rgb: 245, 158, 11;
  --bs-danger: #ef4444; /* red 500 */
  --bs-danger-rgb: 239, 68, 68;
  --bs-info: #0ea5e9; /* sky 500 */
  --bs-info-rgb: 14, 165, 233;

  /* Espaçamento padrão entre a faixa de título (dashboard-hero) e o conteúdo (dashboard-body) */
  --dashboard-gap: 1rem;
}

html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  color: var(--sgi-text);
  background: var(--sgi-bg);
  /* Removido o espaçamento extra no topo (navbar não está fixa) */
  padding-top: 0;
}

/* Navbar topo */
.navbar-dark.bg-primary { box-shadow: 0 2px 10px rgba(0,0,0,.08); }

/* Offcanvas (sidebar) */
.offcanvas.text-bg-primary { background-color: var(--sgi-primary-darker) !important; }
.offcanvas .list-group-item { background: transparent; border: 0; }
.offcanvas .list-group-item .small a:hover { text-decoration: underline; }
/* Navegação moderna na offcanvas e sidebar */
.sgi-nav { display: flex; flex-direction: column; gap: .25rem; padding: .5rem; }
.sgi-nav .sidebar-section { color: #cbd5e1; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; padding: .5rem .75rem; }
.sgi-nav .nav-link { color: #fff; border-radius: 10px; padding: .6rem .75rem; display: flex; align-items: center; gap: .5rem; }
.sgi-nav .nav-link .icon { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: rgba(255,255,255,.12); }
.sgi-nav .nav-link:hover { background: rgba(255,255,255,.08); text-decoration: none; }
.sgi-nav .nav-link.active { background: #fff; color: var(--sgi-primary-darker); box-shadow: 0 2px 10px rgba(0,0,0,.1); }

/* Sidebar fixa (desktop) */
.sgi-sidebar {
  position: fixed;
  top: 64px; /* altura da navbar */
  left: 0;
  bottom: 0;
  width: var(--sgi-sidebar-width);
  background: var(--sgi-primary-darker);
  color: #fff;
  overflow-y: auto;
  box-shadow: 2px 0 10px rgba(0,0,0,.08);
}
/* estilo anterior substituído pelo sgi-nav */
.sgi-sidebar a { color: #fff; }

/* Removido: margem lateral de #page-wrapper do tema antigo (sb-admin-2).
   No template atual (Onedash), o deslocamento é controlado por .page-content. */

/* Cards */
.card { border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,.04); border: 0; transition: all 0.3s ease-in-out; }
.card:hover { box-shadow: 0 8px 18px rgba(0,0,0,.08); transform: translateY(-1px); }
.card-header { background: #fff; border-bottom: 1px solid rgba(0,0,0,.06); }
/* Cabeçalho com acento lateral para destaque leve */
.card-header.accent { border-left: 4px solid var(--bs-primary); }
.card-header .bi { font-size: 1.05rem; }

/* Destaque visual da página ativa na sidebar */
#menu > li > a.active {
  border-left: 4px solid #0066FF;
}

/* Tabelas (header sutil e hover consistente) */
.table thead th, .table thead td {
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,.08) !important;
  color: var(--sgi-text);
}
/* Visual mais clean (remover listras e suavizar hover) */
.table-hover tbody tr:hover { background: #f8fafc; }
.table-striped tbody tr:nth-of-type(odd) { background-color: transparent !important; }
.table td, .table th { border-color: rgba(0,0,0,.06) !important; }

/* Botões leves */
/* Botões soft mais discretos */
.btn-soft-primary { background: rgba(79,70,229,.08); color: var(--bs-primary); border: 0; }
.btn-soft-primary:hover { background: rgba(79,70,229,.12); color: #4338ca; }
.btn-soft-accent { background: rgba(6,182,212,.08); color: var(--sgi-accent); border: 0; }
.btn-soft-accent:hover { background: rgba(6,182,212,.12); color: #0891b2; }

/* Tabelas */
/* já ajustado acima */

/* Rodapé */
/* Rodapé mais moderno e discreto */
.footer-fixed { position: static; left:auto; right:auto; bottom:auto; background: transparent; color: var(--sgi-muted); box-shadow: none; border-top: 1px solid rgba(0,0,0,.08); padding: .75rem 0; }
.footer-fixed .navbar-text { color: var(--sgi-muted); }

/* Ajustes de marca e título (pedido: diminuir fonte de SHIFT LEGIS e reduzir espaço acima do título) */
.sidebar-header .logo-text {
  font-size: 0.95rem; /* menor que o padrão do h4 */
  letter-spacing: .02em;
  margin: 0; /* remove margens extras */
  line-height: 1.2;
}
.page-content {
  padding-top: 8px; /* aproximar conteúdo do topo */
}
.page-content h1.display-6 {
  margin-top: 0; /* título encostado ao topo do conteúdo */
}

/* Ajustes específicos de páginas legadas dentro do template Onedash */
/* 1) Remover faixa colorida vazia: ocultar o container de alertas quando estiver sem conteúdo */
#mensagem:empty { display: none !important; }

/* 2) Expandir o wrapper #site para ocupar toda a largura disponível do conteúdo (evita sobras laterais) */
.page-content #site { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
  .page-content #content { width: 100% !important; padding: 0 !important; margin: 0 !important; background: transparent; }
/* 3) Visualizar no mapa: usar o padrão global de layout sem margens/paddings extras no container */
/* Visualizar Munícipes pelo mapa: aplicar margens/padding padrão do layout */
#map_page { max-width: 100% !important; box-sizing: border-box; padding-left: var(--bs-gutter-x, 1rem); padding-right: var(--bs-gutter-x, 1rem); overflow-x: hidden; }
#map_page .card { margin-left: 0 !important; margin-right: 0 !important; width: 100%; max-width: none; }
#map_page #map { border-radius: 6px; overflow: hidden; width: 100%; height: clamp(360px, 56vh, 640px) !important; }

/* Mini mapa no dashboard: garantir que não "estoure" as bordas do card */
#bairrosMiniMap { border-radius: 6px; overflow: hidden; }

/* Sidebar: comportamento desejado no desktop
   - Com o wrapper em estado 'toggled' (colapsado), ao passar o mouse sobre a sidebar ela expande para 260px
   - Os títulos dos menus voltam a aparecer, assim o usuário enxerga o menu completo quando precisa
*/
/* Removidos overrides globais de .page-content que causavam regressão no layout da dashboard.
   Mantemos os ajustes apenas escopados para #map_page abaixo. */

/* Munícipes: remover “faixa” lateral e alinhar com o dashboard */
#municipe_area .card { margin-left: 0 !important; margin-right: 0 !important; }
/* Mesmo espaçamento dos cards do dashboard */
#municipe_area .card-body { padding-left: 1.5rem; padding-right: 1.5rem; }
/* Zerar gutters horizontais das linhas do formulário para evitar sobras nas laterais */
/* Restaurar gutters horizontais para manter o mesmo “respiro” do dashboard */
#municipe_area .row.g-3 { --bs-gutter-x: 1rem; }

/* Compactação em telas menores */
@media (max-width: 576px) {
  .top-header .navbar { padding: .25rem .5rem; }
  .page-content { padding-top: 4px; }
  .card-header { padding: .5rem .75rem; }
  .kpi-value { font-size: 1.125rem; }
  .kpi-icon { width: 36px; height: 36px; }
}

/* Integração visual leve com DataTables */
/* Removido o estilo do campo de busca (.dataTables_filter input) pois a funcionalidade foi desativada */

/* Espaçamento para info/paginação dentro dos cards (evita texto colado na borda) */
.card .dataTables_wrapper { padding-bottom: .5rem; }
.card .dataTables_wrapper .dataTables_info { padding-left: .75rem; }
.card .dataTables_wrapper .dataTables_paginate { padding-right: .75rem; }

@media (max-width: 576px) {
  .card .dataTables_wrapper .dataTables_info,
  .card .dataTables_wrapper .dataTables_paginate { padding-left: .5rem; padding-right: .5rem; }
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,.06);
  background: transparent;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: rgba(79,70,229,.10);
  color: var(--bs-primary) !important;
  border-color: rgba(79,70,229,.14);
}

.card .table {
  font-size: .92rem;
}

.card .table thead th {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
}

.card .table tbody td {
  font-size: .9rem;
  padding-top: .72rem;
  padding-bottom: .72rem;
  vertical-align: middle;
}

.card .table .btn-xs {
  min-width: 34px;
  min-height: 34px;
  padding: .28rem .42rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.card .table .btn-xs i {
  font-size: .92rem;
  line-height: 1;
}

.table-actions-nowrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: nowrap;
  white-space: nowrap;
}

/* Loader global do sistema */
.shiftlegis-global-loading {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(248, 250, 252, 0.68);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .22s ease, visibility .22s ease;
  z-index: 3000;
}

.shiftlegis-global-loading.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.shiftlegis-global-loading-card {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  min-width: min(92vw, 560px);
  max-width: min(92vw, 560px);
  padding: 26px 34px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(186, 215, 255, 0.95);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.10);
}

.shiftlegis-global-loading-spinner {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 6px solid rgba(7, 36, 55, 0.12);
  border-top-color: #0f4660;
  border-right-color: #0f4660;
  animation: shiftlegis-loader-spin 0.9s linear infinite;
  flex: 0 0 auto;
}

.shiftlegis-global-loading-text {
  color: #243b53;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

@keyframes shiftlegis-loader-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Grid de usuarios/parceiros: evita overflow horizontal em colunas longas */
#tableOutros,
#tableLideres {
  width: 100% !important;
  table-layout: fixed;
}

#tableOutros th,
#tableOutros td,
#tableLideres th,
#tableLideres td {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

#tableOutros th:nth-child(1),
#tableOutros td:nth-child(1),
#tableLideres th:nth-child(1),
#tableLideres td:nth-child(1) {
  width: 72px;
}

#tableOutros th:nth-child(4),
#tableOutros td:nth-child(4),
#tableLideres th:nth-child(4),
#tableLideres td:nth-child(4) {
  width: 140px;
}

#tableOutros th:nth-child(5),
#tableOutros td:nth-child(5),
#tableLideres th:nth-child(5),
#tableLideres td:nth-child(5) {
  width: 210px;
}

#tableOutros th:nth-child(6),
#tableOutros td:nth-child(6),
#tableLideres th:nth-child(6),
#tableLideres td:nth-child(6) {
  width: 90px;
}

#tableOutros th:nth-child(7),
#tableOutros td:nth-child(7),
#tableLideres th:nth-child(7),
#tableLideres td:nth-child(7) {
  width: 120px !important;
}

#tableOutros td:last-child,
#tableLideres td:last-child {
  text-align: center;
  white-space: nowrap;
}

#tableOutros td:last-child .btn,
#tableLideres td:last-child .btn {
  margin: 0;
}

#tableOutros td,
#tableLideres td {
  padding-top: .65rem;
  padding-bottom: .65rem;
  font-size: .9rem;
}

#tableOutros th,
#tableLideres th {
  font-size: .79rem;
}

#tableOutros th:nth-child(7),
#tableOutros td:nth-child(7),
#tableLideres th:nth-child(7),
#tableLideres td:nth-child(7) {
  width: 132px !important;
  min-width: 132px;
}

#tableOutros td:nth-child(5),
#tableLideres td:nth-child(5) {
  font-size: .84rem;
  line-height: 1.2;
}

@media (max-width: 1200px) {
  #tableOutros th:nth-child(5),
  #tableOutros td:nth-child(5),
  #tableLideres th:nth-child(5),
  #tableLideres td:nth-child(5) {
    width: 180px;
  }
}

/* Login */
.login-hero { background: linear-gradient(135deg, var(--sgi-primary) 0%, var(--sgi-accent) 100%); min-height: 24vh; }
.login-card { margin-top: -40px; border-radius: 16px; }
.login-title { font-weight: 800; letter-spacing: .02em; }
.login-card .card-body { padding: 1.25rem 1.5rem; }
.login-card .form-floating > label { color: var(--sgi-muted); }
.login-card .btn-primary { border-radius: 10px; padding: .8rem; font-weight: 600; }

/* Dashboard */
/* Faixa superior em gradiente (mesma linguagem visual do login) */
.dashboard-hero {
  background: linear-gradient(135deg, var(--sgi-primary) 0%, var(--sgi-accent) 100%);
  min-height: 12vh; /* faixa mais estreita */
}
/* Espaçamento consistente abaixo da faixa para conteúdo em cards */
.dashboard-body { margin-top: var(--dashboard-gap); }
/* Título mais forte e compacto */
.dashboard-title { font-weight: 700; letter-spacing: .02em; }
/* Título dentro da faixa em branco, com leve sombra para legibilidade */
.dashboard-hero .dashboard-title { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.2); }
  .dashboard-hero .container-fluid { padding-top: 1rem; padding-bottom: 1rem; padding-left: var(--bs-gutter-x, 1rem); padding-right: var(--bs-gutter-x, 1rem); }
  /* Pequenos ajustes de cards da Home */
  .dashboard-card .card-header { border-left: 4px solid var(--bs-primary); }

/* Pesquisa de Munícipes (tema Transformers dentro do padrão do projeto)
   - Usa a paleta principal (indigo/cyan) já definida em :root
   - Botões de tipo com estados ativos mais evidentes
   - Campo de texto com foco destacado
   - Botão de busca com leve gradiente da identidade visual
*/
/* Indicador de carregamento embutido no campo select */
.select-loading { position: absolute; right: 10px; bottom: 10px; z-index: 2; pointer-events: none; }
.select-loading .spinner-border { width: 1rem; height: 1rem; }
.search-module .tipo-option {
  margin: 2px;
  border-radius: 8px;
  color: var(--bs-primary);
  background: rgba(var(--bs-primary-rgb), .06);
  border: 1px solid rgba(var(--bs-primary-rgb), .25);
}
.search-module .tipo-option:hover {
  background: rgba(var(--bs-primary-rgb), .12);
}
.search-module .tipo-option.active {
  color: #fff;
  background: var(--bs-primary);
  border-color: var(--bs-primary);
  box-shadow: 0 2px 6px rgba(var(--bs-primary-rgb), .28);
}
.search-module .input-group .form-control {
  border-color: rgba(var(--bs-primary-rgb), .30);
}
.search-module .input-group .form-control:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .25);
}
.search-module .input-group .btn-primary {
  border: 0;
  font-weight: 600;
  background: linear-gradient(135deg, var(--bs-primary) 0%, var(--sgi-accent) 100%);
}
.search-module .form-text { color: var(--sgi-muted); }

/* KPI cards */
.kpi-card { border: 0; }

/* Tabelas padronizadas (fontes e cores consistentes) */
.table-standard {
  font-size: 0.875rem; /* pequeno, consistente com dashboard */
}
.table-standard thead {
  background-color: var(--sgi-bg);
}
.table-standard thead th {
  color: var(--sgi-text);
  font-weight: 600;
  border-bottom-color: rgba(0,0,0,.06);
}
.table-standard tbody td {
  color: var(--sgi-text);
}
.table-standard a {
  color: var(--bs-primary);
  text-decoration: none;
  font-weight: 500;
}
.table-standard a:hover { text-decoration: underline; }
.kpi-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-right: .75rem;
  border-radius: 6px;
  font-size: 18px;
}
.kpi-value { font-weight: 700; font-size: 1.25rem; line-height: 1.2; }
.kpi-label { color: var(--sgi-muted); font-size: .875rem; }

/* Subtle background helpers (fallback when Bootstrap < 5.3) */
.bg-primary-subtle { background-color: rgba(79,70,229,.12) !important; }
.bg-success-subtle { background-color: rgba(25,135,84,.12) !important; }
.bg-warning-subtle { background-color: rgba(255,193,7,.18) !important; }
.bg-danger-subtle  { background-color: rgba(239,68,68,.12) !important; }
.bg-info-subtle    { background-color: rgba(13,202,240,.12) !important; }
.bg-secondary-subtle { background-color: rgba(108,117,125,.12) !important; }

/* Badges de status (para tabelas e listagens) */
.badge-soft { display: inline-block; padding: .15rem .5rem; border-radius: .5rem; font-weight: 600; line-height: 1; }
.badge-soft.success { background: rgba(var(--bs-success-rgb), .12); color: var(--bs-success); }
.badge-soft.warning { background: rgba(var(--bs-warning-rgb), .18); color: var(--bs-warning); }
.badge-soft.danger  { background: rgba(var(--bs-danger-rgb), .12); color: var(--bs-danger); }
.badge-soft.info    { background: rgba(var(--bs-info-rgb), .12); color: var(--bs-info); }
.badge-soft.secondary { background: rgba(var(--bs-secondary-rgb), .12); color: var(--bs-secondary); }
.badge-soft.primary { background: rgba(var(--bs-primary-rgb), .12); color: var(--bs-primary); }

/* Sidebar mantém o estilo padrão anterior (sem degradê customizado) */

/* Modo escuro pronto (ativar com [data-theme="dark"]) */
[data-theme="dark"] {
  --sgi-bg: #0b1021;
  --sgi-text: #e5e7eb;
  --sgi-muted: #9ca3af;
  --bs-primary: #818cf8; /* indigo 400 */
  --bs-primary-rgb: 129, 140, 248;
  --bs-secondary: #94a3b8;
  --bs-secondary-rgb: 148, 163, 184;
  --bs-success: #34d399;
  --bs-success-rgb: 52, 211, 153;
  --bs-warning: #fbbf24;
  --bs-warning-rgb: 251, 191, 36;
  --bs-danger: #f87171;
  --bs-danger-rgb: 248, 113, 113;
  --bs-info: #38bdf8;
  --bs-info-rgb: 56, 189, 248;
}