/* ============================================================
   Controle do Ninho — Frontend (shortcode [controle_ninho])
   Ajustes específicos para exibir o plugin fora do wp-admin.
   Depende de cdn-admin.css (cores, botões, tabelas, etc.).
   ============================================================ */

/* wp-admin já define .screen-reader-text globalmente, mas no frontend
   isso depende do tema — garante que o texto do botão de menu (só pra
   leitor de tela) fique realmente escondido em qualquer contexto. */
.cdn-frontend .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* No frontend não há a barra lateral do wp-admin, então o wrap
   fica centralizado com respiro dos dois lados em vez de colado
   à direita como fica dentro do wp-admin. */
.cdn-frontend.cdn-wrap {
  max-width: 1100px;
  margin: 20px auto;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(30, 52, 93, .08);
  /* .cdn-wrap (base) usa overflow:hidden pra arredondar cantos — mas isso
     transforma este wrap num limite de scroll e quebra o "position: sticky"
     da nav abaixo. Como o header interno já perde o border-radius no
     frontend (ver regra .cdn-frontend .cdn-header), não há mais nada pra
     recortar aqui, então é seguro liberar o overflow. */
  overflow: visible;
}

.cdn-frontend-body {
  padding: 0;
}

/* ── Menu de navegação do app ──────────────────────────────── */
/* Sticky no topo do wrap — em qualquer tamanho de tela, trocar de módulo
   não exige rolar a página inteira de volta pro topo. Funciona sem
   ressalvas porque a barra de admin do WP é escondida nesta página
   (ver CDN_Frontend::maybe_hide_admin_bar()), então não há nada fixo
   competindo com este topo. */
.cdn-frontend-nav {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  background: var(--cdn-azul);
  padding: 0 8px;
  position: sticky;
  top: 0;
  z-index: 20;
  scrollbar-width: none;
}
.cdn-frontend-nav::-webkit-scrollbar {
  display: none;
}

.cdn-frontend-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex: 0 0 auto;
  padding: 10px 14px;
  font-family: 'Poppins', sans-serif;
  font-size: .74rem;
  font-weight: 500;
  color: rgba(255, 255, 255, .7);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  /* dá folga na hora do scrollIntoView (JS) pra aba ativa não ficar
     colada na borda quando a nav rolar até ela */
  scroll-margin-inline: 24px;
  transition: color .15s, border-color .2s;
}

.cdn-frontend-nav-item .cdn-icon {
  font-size: 1.15rem;
  width: 1.15rem;
  height: 1.15rem;
  line-height: 1;
}

.cdn-frontend-nav-label {
  line-height: 1;
}

.cdn-frontend-nav-item:hover {
  color: #fff;
}

.cdn-frontend-nav-item:active {
  background: rgba(255, 255, 255, .08);
}

.cdn-frontend-nav-item.is-active {
  color: #fff;
  border-bottom-color: var(--cdn-laranja);
}

/* O conteúdo de cada módulo já vem com seu próprio .cdn-header/.cdn-body
   (mesmos templates do wp-admin) — remove a repetição de borda/fundo do
   wrapper externo para não duplicar visualmente. */
.cdn-frontend .cdn-wrap {
  margin: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

/* O header de cada módulo tinha cantos arredondados pensados pra ficar
   no topo do wrap; aqui ele fica logo abaixo da nav (que também é
   quadrada), então os cantos soltos ficam estranhos — zera. */
.cdn-frontend .cdn-header {
  border-radius: 0;
}

/* ── Nav "app" — barra superior com dropdown + barra inferior fixa ──
   Só existem/aparecem no mobile (ver media query abaixo); no desktop a
   nav de abas horizontais (.cdn-frontend-nav, acima) continua sendo usada. */
.cdn-frontend-topbar,
.cdn-frontend-dropdown,
.cdn-frontend-bottombar {
  display: none;
}

@media (max-width: 782px) {
  .cdn-frontend.cdn-wrap {
    margin: 0;
    border-radius: 0;
  }

  /* No mobile a nav de abas horizontais dá lugar à barra superior +
     dropdown + barra inferior fixa, no estilo de um app nativo. */
  .cdn-frontend-nav {
    display: none;
  }

  /* ── Barra superior ────────────────────────────────────────── */
  .cdn-frontend-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--cdn-azul);
    padding: 10px 14px;
    position: sticky;
    top: 0;
    z-index: 30;
  }
  .cdn-frontend-topbar-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Poppins', sans-serif;
    font-size: .92rem;
    font-weight: 600;
    color: #fff;
  }
  .cdn-frontend-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    border-radius: 50%;
    transition: background .12s, transform .1s;
  }
  .cdn-frontend-menu-btn:active {
    background: rgba(255, 255, 255, .15);
    transform: scale(.92);
  }
  .cdn-frontend-menu-btn .cdn-icon {
    font-size: 1.5rem;
    width: 1.5rem;
    height: 1.5rem;
  }

  /* ── Dropdown completo (todos os módulos) ─────────────────────────
     Abre/fecha com um leve deslizar + esmaecer em vez de aparecer/sumir
     seco — dá uma sensação de "gaveta" abrindo, como em apps nativos.
     display:flex fica sempre ligado no mobile (sobrescrevendo o
     display:none padrão fora daqui); a visibilidade de fato é controlada
     por max-height/opacity/visibility, que são propriedades animáveis
     (display não é). O JS (cdn-admin.js) continua só alternando a classe
     .is-open — nada muda no lado do JS. */
  .cdn-frontend-dropdown {
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 48px;
    z-index: 29;
    background: var(--cdn-branco);
    border-bottom: 1px solid var(--cdn-borda);
    box-shadow: 0 10px 20px rgba(30, 52, 93, .15);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: max-height .22s ease, opacity .18s ease, transform .18s ease, visibility 0s .22s;
  }
  .cdn-frontend-dropdown.is-open {
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: max-height .22s ease, opacity .18s ease, transform .18s ease, visibility 0s 0s;
  }
  .cdn-frontend-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    font-family: 'Poppins', sans-serif;
    font-size: .88rem;
    font-weight: 500;
    color: var(--cdn-azul);
    text-decoration: none;
    border-bottom: 1px solid var(--cdn-borda);
    min-height: 48px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background .1s;
  }
  .cdn-frontend-dropdown-item:active {
    background: var(--cdn-areia);
  }
  .cdn-frontend-dropdown-item:last-child {
    border-bottom: none;
  }
  .cdn-frontend-dropdown-item .cdn-icon {
    font-size: 1.2rem;
    width: 1.2rem;
    height: 1.2rem;
    color: var(--cdn-cinza);
  }
  .cdn-frontend-dropdown-item.is-active {
    background: var(--cdn-areia);
    font-weight: 700;
  }
  .cdn-frontend-dropdown-item.is-active .cdn-icon {
    color: var(--cdn-laranja);
  }

  /* ── Barra inferior fixa — só ícones, atalhos do dia a dia ────── */
  .cdn-frontend-bottombar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    background: var(--cdn-branco);
    border-top: 1px solid var(--cdn-borda);
    box-shadow: 0 -2px 10px rgba(30, 52, 93, .1);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .cdn-frontend-bottombar-item {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    color: var(--cdn-cinza);
    text-decoration: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: color .12s;
  }
  .cdn-frontend-bottombar-item:active .cdn-icon {
    transform: scale(1.15);
  }
  .cdn-frontend-bottombar-item .cdn-icon {
    transition: transform .12s;
    font-size: 1.55rem;
    width: 1.55rem;
    height: 1.55rem;
  }
  .cdn-frontend-bottombar-item.is-active {
    color: var(--cdn-laranja);
  }

  /* Largura total (sem margem no wrap, ver .cdn-frontend.cdn-wrap acima)
     mas com respiro nas laterais do conteúdo — 10% de cada lado, senão
     campos de formulário e tabelas ficam colados na borda da tela.
     Barra superior/dropdown/inferior continuam de ponta a ponta (não
     entram nesse padding) pra manter a cara de barra de app nativo. */
  .cdn-frontend-body {
    padding-left: 10%;
    padding-right: 10%;
    padding-bottom: calc(60px + env(safe-area-inset-bottom));
  }

  /* ── Botão de salvar fixo embaixo (formulários principais) ─────────────
     Em vez de deixar "Salvar" só no fim do formulário (exigindo rolar até
     lá), a barra de ações vira fixa no rodapé — sempre alcançável com o
     polegar, acima da barra de navegação inferior. Usa uma classe própria
     (.cdn-form-actions-fixed), em vez do .cdn-form-actions genérico, porque
     essa classe também é reaproveitada em mini-formulários dentro de
     seções recolhíveis (<details> em customer-view.php/project-view.php)
     que devem continuar inline, não virar barra fixa. Como o app usa POST
     tradicional (sem JS de rota), isso é só posicionamento CSS: o próprio
     <form> ganha respiro embaixo pra nada ficar escondido atrás da barra
     fixa (via :has(), com fallback aceitável em navegadores sem suporte —
     nesse caso a barra só sobrepõe um pouco o último campo). */
  .cdn-frontend-body .cdn-form-actions-fixed {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(60px + env(safe-area-inset-bottom));
    z-index: 25;
    margin: 0 !important;
    background: var(--cdn-branco);
    padding: 12px 10%;
    box-shadow: 0 -3px 12px rgba(30, 52, 93, .12);
    border-top: 1px solid var(--cdn-borda);
  }
  .cdn-frontend-body form:has(.cdn-form-actions-fixed) {
    padding-bottom: 92px;
  }
}

/* ══ Widgets Elementor (includes/elementor/) ═══════════════════════════════
   Regras usadas só pelos widgets — o shortcode não adiciona essas classes. */

/* Opção "Exibir cabeçalho do módulo" desligada: esconde a faixa de título
   (nome do módulo + marca) que cada view imprime em .cdn-header. */
.cdn-sem-header .cdn-header {
  display: none !important;
}

/* ── Widget "Ninho: Menu" — variantes de layout ───────────────────────────
   O padrão é a nav de abas horizontais (.cdn-frontend-nav, acima). As
   classes abaixo são adicionadas pelo controle "Layout" do widget. */

/* Pílulas: itens soltos com cantos arredondados, sem a faixa azul cheia */
.cdn-nav-pills.cdn-frontend-nav {
  background: transparent;
  padding: 0;
  gap: 8px;
  position: static;
}
.cdn-nav-pills .cdn-frontend-nav-item {
  flex-direction: row;
  gap: 8px;
  background: var(--cdn-azul);
  border-radius: 999px;
  padding: 9px 16px;
  border-bottom: none;
}
.cdn-nav-pills .cdn-frontend-nav-item.is-active {
  background: var(--cdn-laranja);
  color: #fff;
}

/* Vertical: menu lateral empilhado (bom em coluna do Elementor) */
.cdn-nav-vertical.cdn-frontend-nav {
  flex-direction: column;
  overflow-x: visible;
  padding: 8px;
  border-radius: 8px;
  position: static;
}
.cdn-nav-vertical .cdn-frontend-nav-item {
  flex-direction: row;
  gap: 10px;
  width: 100%;
  justify-content: flex-start;
  border-bottom: none;
  border-left: 3px solid transparent;
  border-radius: 6px;
}
.cdn-nav-vertical .cdn-frontend-nav-item.is-active {
  border-left-color: var(--cdn-laranja);
  background: rgba(255, 255, 255, .08);
}

/* Widget de menu com a "versão mobile (barras de app)" DESLIGADA: o menu
   escolhido (abas/pílulas/vertical) continua visível no mobile, no lugar
   das barras. A classe é adicionada só pelo widget de menu — o shortcode
   e o widget completo (que sempre têm as barras) não são afetados. */
@media (max-width: 782px) {
  .cdn-menu-sem-mobile .cdn-frontend-nav {
    display: flex;
  }
}

/* ── Widget "Ninho: Menu Lateral" — sidebar recolhível ────────────────────
   Recolhido (.is-collapsed) mostra só os ícones; expandido mostra ícone +
   nome. Larguras via variáveis (--cdn-sb-exp / --cdn-sb-col), setadas pelos
   controles do widget; sem configurar, 220px / 56px. Com .cdn-sidebar-hover,
   o menu recolhido expande temporariamente ao passar o mouse. */
.cdn-sidebar {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: var(--cdn-sb-exp, 220px);
  background: var(--cdn-azul);
  border-radius: 8px;
  padding: 8px;
  overflow: hidden;
  transition: width .2s ease;
}
.cdn-sidebar.is-collapsed {
  width: var(--cdn-sb-col, 56px);
}
.cdn-sidebar-hover.is-collapsed:hover {
  width: var(--cdn-sb-exp, 220px);
}

.cdn-sidebar-toggle {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255, 255, 255, .85);
  padding: 10px 12px;
  border-radius: 6px;
}
.cdn-sidebar-toggle:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.cdn-sidebar-toggle .cdn-icon { font-size: 1.15rem; width: 1.15rem; height: 1.15rem; }
.cdn-sidebar.is-collapsed .cdn-sidebar-toggle { justify-content: center; }

.cdn-sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 6px;
  border-left: 3px solid transparent;
  color: rgba(255, 255, 255, .75);
  text-decoration: none;
  white-space: nowrap;
  font-family: 'Poppins', sans-serif;
  font-size: .85rem;
}
.cdn-sidebar-item:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.cdn-sidebar-item.is-active {
  color: #fff;
  border-left-color: var(--cdn-laranja);
  background: rgba(255, 255, 255, .08);
}
.cdn-sidebar-item .cdn-icon {
  font-size: 1.15rem;
  width: 1.15rem;
  height: 1.15rem;
  line-height: 1;
  flex: 0 0 auto;
}

/* Rótulo some no recolhido (e volta no hover-expand) */
.cdn-sidebar-label { opacity: 1; transition: opacity .15s ease .05s; }
.cdn-sidebar.is-collapsed .cdn-sidebar-label { opacity: 0; width: 0; overflow: hidden; }
.cdn-sidebar-hover.is-collapsed:hover .cdn-sidebar-label { opacity: 1; width: auto; }

/* ══ Telas que ainda usam classes nativas do wp-admin (Plantas) ════════════
   As views de Plantas (planta-list.php / planta-editor.php) são compartilhadas
   com o wp-admin e usam .wrap, .page-title-action, .button, .notice, .widefat —
   classes que NÃO têm estilo fora do wp-admin. Em vez de editar o PHP (o que
   afetaria o wp-admin), damos a essas classes o visual do plugin SÓ dentro do
   frontend, via escopo .cdn-frontend. O wp-admin continua com o estilo nativo. */

/* Cabeçalho da página (h1 + botão de ação) */
.cdn-frontend .wrap { margin: 0; padding: 0; max-width: 100%; }
.cdn-frontend .wp-heading-inline {
  display: inline-block;
  vertical-align: middle;
  margin: 0 8px 0 0;
  font-family: 'Poppins', sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--cdn-azul, #1E345D);
}
.cdn-frontend .wp-header-end { display: none; }

/* Botões (.button / .page-title-action) → visual secundário do plugin */
.cdn-frontend .button,
.cdn-frontend .button-secondary,
.cdn-frontend .page-title-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--cdn-branco, #fff);
  color: var(--cdn-azul, #1E345D);
  border: 1px solid var(--cdn-borda, #d8dee9);
  border-radius: 8px;
  padding: 7px 14px;
  font-family: 'Poppins', sans-serif;
  font-size: .85rem;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  cursor: pointer;
  transition: background .12s, border-color .12s, transform .05s;
}
.cdn-frontend .button:hover,
.cdn-frontend .button-secondary:hover,
.cdn-frontend .page-title-action:hover {
  border-color: var(--cdn-azul, #1E345D);
  background: var(--cdn-areia, #F6F4EF);
}
.cdn-frontend .button:active,
.cdn-frontend .page-title-action:active { transform: scale(.97); }
.cdn-frontend .button-small { padding: 4px 10px; font-size: .78rem; border-radius: 6px; }

/* Variante primária (azul cheio) — mais específica pra vencer a base */
.cdn-frontend .button-primary,
.cdn-frontend .page-title-action.cdn-btn-primary,
.cdn-frontend .button.cdn-btn-primary {
  background: var(--cdn-azul, #1E345D);
  color: #fff;
  border-color: var(--cdn-azul, #1E345D);
}
.cdn-frontend .button-primary:hover,
.cdn-frontend .page-title-action.cdn-btn-primary:hover,
.cdn-frontend .button.cdn-btn-primary:hover { background: #16294a; border-color: #16294a; }

/* Variante de exclusão (vermelho discreto) */
.cdn-frontend .button.cdn-btn-danger,
.cdn-frontend .cdn-btn-danger {
  color: #b3261e;
  border-color: #e6c9c6;
  background: var(--cdn-branco, #fff);
}
.cdn-frontend .button.cdn-btn-danger:hover,
.cdn-frontend .cdn-btn-danger:hover { background: #fbeceb; border-color: #b3261e; }

/* Avisos (.notice) → cartão com barra colorida à esquerda */
.cdn-frontend .notice {
  background: var(--cdn-branco, #fff);
  border: 1px solid var(--cdn-borda, #e5e9f0);
  border-left: 4px solid var(--cdn-cinza, #6B7280);
  border-radius: 8px;
  padding: 10px 14px;
  margin: 12px 0;
  box-shadow: 0 1px 3px rgba(30, 52, 93, .08);
}
.cdn-frontend .notice p { margin: .3em 0; }
.cdn-frontend .notice-success { border-left-color: var(--cdn-sucesso, #1f9d55); }
.cdn-frontend .notice-error   { border-left-color: #b3261e; }
.cdn-frontend .notice-warning { border-left-color: var(--cdn-laranja, #B05F2A); }

/* Tabelas .widefat sem a classe .cdn-table (ex.: no editor) — fallback leve,
   sem sobrescrever o visual já bom das tabelas que têm .cdn-table. */
.cdn-frontend .widefat:not(.cdn-table) {
  width: 100%;
  border-collapse: collapse;
  background: var(--cdn-branco, #fff);
  border: 1px solid var(--cdn-borda, #e5e9f0);
  border-radius: 8px;
  overflow: hidden;
}
.cdn-frontend .widefat:not(.cdn-table) th,
.cdn-frontend .widefat:not(.cdn-table) td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--cdn-borda, #e5e9f0);
}
.cdn-frontend .widefat:not(.cdn-table) th {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--cdn-cinza, #6B7280);
}