/*
	Theme Name: Hello Ninho
	Theme URI: https://amoderna.com.br
	Description: Tema filho do Hello Elementor para o Controle do Ninho — layout de largura total com menu lateral recolhível (só ícones ↔ ícones + nomes) no desktop e barras de app (superior + inferior fixa) no mobile. Todas as funções são plugáveis (if !function_exists), os valores passam por filtros hello_ninho_* e as opções ficam em Aparência → Personalizar → Ninho.
	Author: Amoderna Consultoria Projetos Execução
	Template: hello-elementor
	Version: 1.0.0
	Requires at least: 6.0
	Requires PHP: 7.4
	License: GNU General Public License v3 or later.
	License URI: https://www.gnu.org/licenses/gpl-3.0.html
	Text Domain: hello-ninho
*/

/* ══ Variáveis — sobrescritas pelo Personalizar (ver functions.php) ══════ */
:root {
  --ninho-primaria:      #1E345D;
  --ninho-destaque:      #B05F2A;
  --ninho-fundo:         #EEF1F7;   /* fundo claro azulado, estilo dashboard */
  --ninho-sb-exp:        230px;
  --ninho-sb-col:        60px;
  --ninho-mobile-bar:    56px;
  --ninho-raio:          16px;      /* cantos dos cards/painéis */
  --ninho-raio-item:     9px;       /* cantos de itens de menu/botões */
  --ninho-sombra:        0 6px 24px rgba(30, 52, 93, .07);
  --ninho-sombra-suave:  0 2px 8px rgba(30, 52, 93, .05);
}

/* ══ Largura total ═══════════════════════════════════════════════════════
   O conteúdo ocupa toda a largura da janela — sem max-width de container.
   A largura interna das seções continua controlável pelo próprio Elementor
   (Configurações do Site → Layout), então nada aqui limita o builder. */
body.ninho-body {
  background: var(--ninho-fundo);
}
.ninho-layout {
  display: flex;
  align-items: flex-start;
  gap: var(--ninho-espaco, 12px);
  width: 100%;
  max-width: 100%;
  padding: var(--ninho-espaco, 12px);
  box-sizing: border-box;
}
.ninho-content {
  flex: 1 1 auto;
  min-width: 0; /* impede overflow de tabelas/kanban de esticar o layout */
}
/* Página sem sidebar (opção desligada ou usuário sem acesso): layout normal */
.ninho-layout.ninho-sem-sidebar { padding: 0; gap: 0; }

/* ══ Menu lateral (desktop) ══════════════════════════════════════════════
   Mesmo comportamento do widget "Ninho: Menu Lateral" do plugin: recolhido
   só ícones (tooltip no hover), expandido ícone + nome; classes próprias do
   tema pra funcionar em QUALQUER página, sem depender do CSS do plugin. */
.ninho-sidebar {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 0 0 auto;
  position: sticky;
  top: var(--ninho-espaco, 12px);
  width: var(--ninho-sb-exp);
  background: var(--ninho-sidebar-bg, var(--ninho-primaria));
  border-radius: var(--ninho-raio);
  padding: 14px 10px;
  overflow: hidden;
  transition: width .2s ease;
  z-index: 30;
  box-shadow: var(--ninho-sombra);
}
.ninho-sidebar.is-collapsed { width: var(--ninho-sb-col); }
.ninho-sidebar-hover.is-collapsed:hover { width: var(--ninho-sb-exp); }

/* Marca no topo da sidebar (logo/ícone do site + nome) */
.ninho-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px 16px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  white-space: nowrap;
}
.ninho-sidebar-brand img {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  flex: 0 0 auto;
  object-fit: cover;
}
.ninho-sidebar-brand-name {
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .01em;
}
.ninho-sidebar.is-collapsed .ninho-sidebar-brand { justify-content: center; padding-left: 0; padding-right: 0; }
.ninho-sidebar.is-collapsed .ninho-sidebar-brand-name { display: none; }
.ninho-sidebar-hover.is-collapsed:hover .ninho-sidebar-brand-name { display: inline; }

/* !important no fundo/borda: temas-pai/kits do Elementor estilizam <button>
   globalmente (foi o que deixou o botão rosa) — aqui ele é só um ícone. */
.ninho-sidebar-toggle {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: auto;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer;
  color: var(--ninho-menu-texto, rgba(255, 255, 255, .85)) !important;
  padding: 10px 12px !important;
  border-radius: var(--ninho-raio-item) !important;
  font-size: 1.15rem;
  line-height: 1;
}
.ninho-sidebar-toggle:hover { color: #fff !important; background: rgba(255, 255, 255, .06) !important; }
.ninho-sidebar.is-collapsed .ninho-sidebar-toggle { justify-content: center; }

/* Item vira "pílula": ativo com fundo sólido na cor de destaque */
.ninho-sidebar-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: var(--ninho-raio-item);
  color: var(--ninho-menu-texto, rgba(255, 255, 255, .72));
  text-decoration: none;
  white-space: nowrap;
  font-family: 'Poppins', sans-serif;
  font-size: .85rem;
  transition: background .12s ease, color .12s ease;
}
.ninho-sidebar-item:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.ninho-sidebar-item.is-active {
  color: #fff;
  background: var(--ninho-pilula, var(--ninho-destaque));
  box-shadow: var(--ninho-sombra-suave);
}
.ninho-sidebar-item .cdn-icon,
.ninho-sidebar-item .ninho-icon {
  font-size: 1.15rem;
  width: 1.15rem;
  height: 1.15rem;
  line-height: 1;
  flex: 0 0 auto;
  text-align: center;
}
.ninho-sidebar-label { opacity: 1; transition: opacity .15s ease .05s; }
.ninho-sidebar.is-collapsed .ninho-sidebar-label { opacity: 0; width: 0; overflow: hidden; }
.ninho-sidebar-hover.is-collapsed:hover .ninho-sidebar-label { opacity: 1; width: auto; }

/* ══ Barras de app (mobile) ══════════════════════════════════════════════
   Escondidas no desktop; ≤782px substituem o menu lateral: barra superior
   com dropdown de todos os módulos + barra inferior fixa com atalhos. */
.ninho-topbar,
.ninho-dropdown,
.ninho-bottombar { display: none; }

.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
  height: 1px; width: 1px; overflow: hidden;
}

@media (max-width: 782px) {
  .ninho-layout { flex-direction: column; padding: 12px; gap: 12px; }
  .ninho-sidebar { display: none; }
  body.ninho-tem-barras .ninho-layout { padding-bottom: calc(var(--ninho-mobile-bar) + env(safe-area-inset-bottom) + 12px); }

  .ninho-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--ninho-primaria);
    color: #fff;
    padding: 10px 14px;
    position: sticky;
    top: 0;
    z-index: 40;
  }
  .ninho-topbar-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: .95rem;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .ninho-menu-btn {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #fff !important;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    padding: 4px 6px !important;
    width: auto;
  }

  .ninho-dropdown {
    display: none;
    flex-direction: column;
    background: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    box-shadow: 0 8px 20px rgba(30, 52, 93, .15);
    position: sticky;
    top: 46px;
    z-index: 39;
  }
  .ninho-dropdown.is-open { display: flex; }
  .ninho-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: var(--ninho-primaria);
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    font-size: .9rem;
    border-bottom: 1px solid rgba(0, 0, 0, .04);
  }
  .ninho-dropdown-item .cdn-icon,
  .ninho-dropdown-item .ninho-icon { color: #6B7280; width: 1.2rem; text-align: center; }
  .ninho-dropdown-item.is-active { font-weight: 700; }
  .ninho-dropdown-item.is-active .cdn-icon,
  .ninho-dropdown-item.is-active .ninho-icon { color: var(--ninho-destaque); }

  .ninho-bottombar {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: calc(var(--ninho-mobile-bar) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--ninho-primaria);
    z-index: 40;
  }
  .ninho-bottombar-item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 100%;
    color: rgba(255, 255, 255, .7);
    font-size: 1.45rem;
    text-decoration: none;
    transition: transform .12s;
  }
  .ninho-bottombar-item:active { transform: scale(1.15); }
  .ninho-bottombar-item.is-active { color: var(--ninho-destaque); }
}

/* ══ Boas-vindas (topo do conteúdo) ══════════════════════════════════════
   "Bem-vindo de volta, Nome 👋" + subtítulo à esquerda; ações (filtro
   hello_ninho_welcome_acoes) e avatar à direita. */
.ninho-welcome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 4px 4px 20px;
  flex-wrap: wrap;
}
.ninho-welcome-title {
  font-family: 'Poppins', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--ninho-primaria);
  margin: 0;
  line-height: 1.3;
}
.ninho-welcome-title strong { color: var(--ninho-destaque); font-weight: 700; }
.ninho-welcome-sub {
  margin: 2px 0 0;
  font-size: .85rem;
  color: #6B7280;
}
.ninho-welcome-right { display: flex; align-items: center; gap: 12px; }
.ninho-welcome-right .avatar {
  border-radius: 50%;
  width: 42px;
  height: 42px;
  box-shadow: var(--ninho-sombra-suave);
}

/* ══ Skin "dashboard" pros componentes do plugin (só no frontend) ════════
   Arredonda e suaviza os componentes .cdn-* do Controle do Ninho pra
   casar com o visual do tema — cards soltos sobre o fundo claro, sombras
   suaves, badges em pílula. Nada disso afeta o wp-admin. */
.ninho-body .cdn-frontend .cdn-wrap { background: transparent; box-shadow: none; }

.ninho-body .cdn-header {
  border-radius: var(--ninho-raio);
  box-shadow: var(--ninho-sombra-suave);
  margin-bottom: 16px;
}

.ninho-body .cdn-card {
  border-radius: var(--ninho-raio) !important;
  box-shadow: var(--ninho-sombra);
  border-color: transparent;
}
.ninho-body .cdn-card:hover { box-shadow: 0 10px 30px rgba(30, 52, 93, .10); }

.ninho-body .cdn-table {
  background: #fff;
  border-radius: var(--ninho-raio);
  overflow: hidden;
  box-shadow: var(--ninho-sombra);
  border: none;
}
.ninho-body .cdn-table th {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #6B7280;
}

.ninho-body .cdn-notice { border-radius: var(--ninho-raio-item); }

.ninho-body .cdn-btn { border-radius: var(--ninho-raio-item) !important; }

.ninho-body [class*="cdn-badge"] {
  border-radius: 999px;
  padding: 3px 12px;
  font-weight: 600;
}

.ninho-body .cdn-kanban-col {
  border-radius: var(--ninho-raio);
  box-shadow: var(--ninho-sombra-suave);
}
.ninho-body .cdn-kanban-card { border-radius: var(--ninho-raio-item); }