/* ═════════════════════════════════════════════════════════════════════════
   topnav.css — Top Navigation reusável da plataforma Solution Makers
   Funciona em conjunto com topnav.js
   Cada tela só precisa importar este CSS e o JS, e chamar TopNav.init({...})
   Tema (cores) configurável via CSS vars do --tn-* (ver TopNav.init({theme:...}))
   ═════════════════════════════════════════════════════════════════════════ */

:root {
  --tn-bg: #1E2761;        /* fundo do topbar — tela pode override */
  --tn-bg2: #14193e;       /* gradient end */
  --tn-text: #ffffff;
  --tn-text-soft: rgba(255,255,255,.78);
  --tn-accent: #F59E0B;    /* cor da aba ativa */
  --tn-accent-text: #1E2761;
  --tn-dd-bg: #ffffff;
  --tn-dd-text: #1a1a1a;
  --tn-dd-hover: #f3f4f6;
  --tn-dd-active: var(--tn-accent);
  --tn-dd-active-text: var(--tn-accent-text);
  --tn-section: #94a3b8;
  --tn-divider: #e5e7eb;
  --tn-shadow: 0 12px 32px rgba(0,0,0,.18);
  --tn-height: 56px;
  --tn-radius: 7px;
}

.tn{
  background: linear-gradient(135deg, var(--tn-bg), var(--tn-bg2));
  color: var(--tn-text);
  padding: 0 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  height: var(--tn-height);
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
  /* Fixo no topo — sempre visível mesmo ao rolar (independe do overflow do pai) */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  font-family: inherit;
}

/* Compensa a altura do topbar fixo — empurra todo o conteúdo da página pra baixo
   Aplicado via classe ::after no body, não invasivo. */
body:has(#topnav){
  padding-top: var(--tn-height);
}
/* Fallback pra browsers sem :has — ajustado via JS no init do TopNav */
.tn-padding-fix{
  padding-top: var(--tn-height);
}
.tn-back{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 13px;border-radius:var(--tn-radius);
  background:#fff;color:#1c1917!important;text-decoration:none;
  font-size:12px;font-weight:700;
  box-shadow:0 1px 3px rgba(0,0,0,.15);
  transition:all .15s;
}
.tn-back:hover{background:#f1f5f9;color:#0f172a!important;transform:translateY(-1px);box-shadow:0 3px 8px rgba(0,0,0,.25)}

.tn-brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:15px;white-space:nowrap}
.tn-brand-icon{font-size:22px;line-height:1}
.tn-badge{
  background:rgba(245,158,11,0.18);color:var(--tn-accent);
  border:1px solid rgba(245,158,11,0.4);
  padding:4px 9px;border-radius:5px;
  font-size:10px;font-weight:700;letter-spacing:1px;
}

.tn-nav{display:flex;gap:4px;flex:1;align-items:center;flex-wrap:nowrap;min-width:0}

.tn-tab{
  padding:8px 13px;font-size:12px;font-weight:600;
  cursor:pointer;border-radius:var(--tn-radius);
  color:var(--tn-text-soft);white-space:nowrap;
  background:transparent;border:0;font-family:inherit;
  display:inline-flex;align-items:center;gap:5px;
  transition: background .15s, color .15s;
}
.tn-tab.on{background:var(--tn-accent);color:var(--tn-accent-text)}
.tn-tab:not(.on):hover{background:rgba(255,255,255,0.10);color:#fff}
.tn-tab .tn-caret{font-size:9px;opacity:.7;margin-left:3px}

/* Group + dropdown */
.tn-group{position:relative}
.tn-group.open > .tn-tab{background:rgba(255,255,255,0.15);color:#fff}
.tn-group.active > .tn-tab{background:var(--tn-accent);color:var(--tn-accent-text)}
.tn-group.active > .tn-tab .tn-caret{color:var(--tn-accent-text)}

.tn-dd{
  display:none;position:absolute;top:calc(100% + 6px);left:0;
  min-width:240px;background:var(--tn-dd-bg);
  border:1px solid var(--tn-divider);border-radius:9px;
  box-shadow:var(--tn-shadow);
  padding:6px;z-index:60;
}
.tn-group.open .tn-dd{display:block}
.tn-dd-item{
  display:flex;align-items:center;gap:8px;
  padding:8px 12px;border-radius:6px;
  font-size:12px;font-weight:500;color:var(--tn-dd-text);
  cursor:pointer;white-space:nowrap;
}
.tn-dd-item:hover{background:var(--tn-dd-hover)}
/* Itens de link (href) também usam a cor escura do dropdown (não herdam o branco do topbar) */
.tn-dd-link{color:var(--tn-dd-text)}
.tn-dd-link:hover{color:var(--tn-dd-text)}
.tn-dd-item.on{background:var(--tn-dd-active);color:var(--tn-dd-active-text)}
.tn-dd-item.on:hover{filter:brightness(.92)}
.tn-dd-item .tn-ico{width:20px;text-align:center;font-size:14px;flex-shrink:0}
.tn-dd-divider{height:1px;background:var(--tn-divider);margin:5px 8px}
.tn-dd-section{
  font-size:9px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--tn-section);font-weight:700;
  padding:8px 12px 4px;
}

.tn-spacer{flex:1}

.tn-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
.tn-user{font-size:11px;color:var(--tn-text-soft);white-space:nowrap;max-width:160px;overflow:hidden;text-overflow:ellipsis}
.tn-user-avatar{
  width:28px;height:28px;border-radius:50%;
  background:rgba(255,255,255,.2);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:#fff;
}

/* Hamburger (mobile only) */
.tn-burger{
  display:none;background:transparent;border:0;color:#fff;
  font-size:22px;cursor:pointer;padding:6px 10px;border-radius:6px;
}
.tn-burger:hover{background:rgba(255,255,255,.1)}

/* ═══ RESPONSIVO ═══ */
@media (max-width: 900px){
  .tn{padding:0 12px;gap:10px}
  .tn-brand{font-size:13px}
  .tn-badge{display:none}

  .tn-nav{
    position:fixed;top:var(--tn-height);left:0;right:0;
    background:var(--tn-bg);
    flex-direction:column;align-items:stretch;
    gap:0;padding:8px;
    display:none;
    border-top:1px solid rgba(255,255,255,.1);
    box-shadow:0 8px 20px rgba(0,0,0,.3);
    max-height:calc(100vh - var(--tn-height));overflow-y:auto;
  }
  .tn-nav.open{display:flex}

  .tn-tab{justify-content:flex-start;padding:11px 14px;border-radius:6px;width:100%}
  .tn-group{width:100%}

  .tn-dd{
    position:static;width:100%;
    background:rgba(255,255,255,.05);
    border:0;box-shadow:none;
    margin:4px 0 8px;padding:4px 0 4px 12px;
    border-left:2px solid var(--tn-accent);border-radius:0;
  }
  .tn-dd-item{color:rgba(255,255,255,.85);padding:9px 12px}
  .tn-dd-item:hover{background:rgba(255,255,255,.1);color:#fff}
  .tn-dd-section{color:rgba(255,255,255,.5)}

  .tn-burger{display:inline-flex}
  .tn-user{display:none}
}

/* Densidade reduzida (telas com muitos itens em desktop médio) */
@media (min-width: 901px) and (max-width: 1280px){
  .tn-tab{padding:7px 10px;font-size:11.5px}
  .tn{padding:0 14px;gap:10px}
}

/* ═══ MODO COMPACTO ═══════════════════════════════════════════════════════
   Quando o nav não cabe full, JS adiciona .tn-compact no .tn. Esconde os
   labels (que viram tooltip via title=) — só ícones permanecem.
   Caret do dropdown também some pra economizar pixels.                   */
.tn.tn-compact .tn-tab .tn-tab-label{display:none}
.tn.tn-compact .tn-tab{padding:8px 10px;min-width:34px;justify-content:center}
.tn.tn-compact .tn-tab .tn-caret{display:none}
.tn.tn-compact .tn-tab .tn-ico-inline{font-size:15px;margin:0}

/* ═══ OVERFLOW MENU "⋯" ═══════════════════════════════════════════════════
   2º nível: items que não cabem nem em modo compacto entram no dropdown ⋯  */
.tn-overflow{position:relative;flex-shrink:0}
.tn-overflow > .tn-tab{font-weight:700;font-size:16px;line-height:1;padding:6px 12px}
.tn-overflow-dd{
  display:none;position:absolute;top:calc(100% + 6px);right:0;
  min-width:220px;background:var(--tn-dd-bg);
  border:1px solid var(--tn-divider);border-radius:9px;
  box-shadow:var(--tn-shadow);
  padding:6px;z-index:60;
}
.tn-overflow.open .tn-overflow-dd{display:block}

/* ═══ Lucide Icons no TopNav ═══════════════════════════════════════════
   Sobrescreve tamanho padrão do SVG do Lucide pra encaixar no nav     */
.tn-tab .tn-lucide,
.tn-brand-icon i[data-lucide]{
  width: 16px; height: 16px;
  display: inline-block; vertical-align: -3px;
  stroke-width: 2;
}
.tn-brand-icon i[data-lucide]{ width:20px; height:20px; vertical-align: -4px }
.tn-dd-item i.tn-ico[data-lucide]{ width:15px; height:15px; vertical-align:-3px }