/* ── sidebar-wide.css — Sidebar larga estilo Shopify ──
   Sobrepõe o trilho estreito (sidebar.css) para o layout
   largo com ícone + rótulo. Tema-consciente:
   branca no modo claro, escura no modo escuro. */

/* ─── TOKENS DA SIDEBAR — paleta Shopify ─── */
body {
  --sb-bg:           #FFFFFF;   /* painel branco flutuante */
  --sb-border:       #E4E4E4;
  --sb-item-hover:   #F4F4F4;   /* hover = cinza bem leve */
  --sb-item-active:  #F0F0F0;   /* selecionado = pílula cinza clara */
  --sb-icon:         #222222;
  --sb-icon-hover:   #0A0A0A;
  --sb-icon-active:  #0A0A0A;
  --sb-label:        #222222;
  --sb-label-hover:  #0A0A0A;
  --sb-label-active: #0A0A0A;
  --sb-indicator:    #0A0A0A;
}

/* Remover seletor de área de trabalho do menu lateral */
.ws-switcher { display: none; }

/* ─── CONTAINER ─── */
.sidebar {
  align-items: stretch;   /* era center */
  padding: 0;
}

/* ─── WORKSPACE SWITCHER (largo, com nome) ─── */
.ws-switcher {
  padding: 10px 10px 8px;
  justify-content: flex-start;
}
.ws-btn, .ws-btn--mini {
  width: 100%;
  justify-content: flex-start;
  gap: 9px;
  padding: 5px 7px;
  border-radius: 8px;
}
.ws-switcher .ws-mark {
  width: 26px; height: 26px; border-radius: 7px;
  font-size: 10.5px;
}
.ws-name-wide {
  color: var(--sb-label-active);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  text-align: left;
}
.ws-caret-wide { color: var(--sb-label); flex-shrink: 0; }

/* ─── NAV ─── */
.sb-nav {
  align-items: stretch;
  padding: 10px 8px 4px;   /* margem de cima no menu */
  gap: 1px;
}
.sb-group-body {
  align-items: stretch;
  gap: 1px;
  width: 100%;
}
.sb-group-sep { display: none; }   /* substituído por rótulos de grupo */

/* Rótulo de categoria — compacto */
.sb-nav-group-label {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--sb-label);
  opacity: .55;
  padding: 11px 9px 3px;
}
.sb-nav-group-label:first-child { padding-top: 6px; }

/* ─── ITEM (horizontal, compacto) ─── */
.sb-item {
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 5px 9px;
  border-radius: 7px;
  margin: 0;
}
.sb-item svg { width: 17px; height: 17px; flex-shrink: 0; }
.sb-item .sb-item-label {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 450;          /* leve, mais elegante */
  color: var(--sb-label);
  line-height: 1.2;
  text-align: left;          /* era center */
  max-width: none;           /* remove o limite de 56px que cortava o texto */
  overflow: visible;
  letter-spacing: 0;
}
.sb-item:hover  { background: var(--sb-item-hover); }
/* Texto mantém a cor original em todos os estados (sem escurecer) */
.sb-item:hover .sb-item-label  { color: var(--sb-label); }
/* Selecionado = pílula clara #FAFAFA com leve sombra no final */
.sb-item.active {
  background: var(--sb-item-active);
  box-shadow: 0 1px 2px -1px rgba(10,10,10,0.18);
}
.sb-item.active .sb-item-label { color: var(--sb-label); font-weight: 450; }
.sb-item.active::before { display: none; }   /* sem barra lateral */

.sb-item-badge {
  position: static;          /* era absolute (desalinhava) */
  top: auto; right: auto;
  margin-left: auto;
  min-width: 0; height: auto;
  border: none;
  font-size: 10px;
  font-weight: 600;
  background: var(--brand, #ef4444);
  color: #fff;
  border-radius: 10px;
  padding: 1px 6px;
}

/* ─── ITEM EXPANSÍVEL (CRM → Funil / Contatos) ─── */
.sb-item-wrap { display: flex; flex-direction: column; width: 100%; }
/* Sem seta indicadora de expansão */
.sb-caret { display: none !important; }

.sb-subitems { display: none; flex-direction: column; gap: 1px; margin: 1px 0 3px; }
.sb-item-wrap.open .sb-subitems { display: flex; }
.sb-subitem {
  padding: 5px 9px 5px 38px;        /* alinhado sob o rótulo do pai */
  border-radius: 7px; cursor: pointer;
  font-size: 12.5px; font-weight: 450; color: #8A8A8A;   /* texto cinza */
  transition: background .12s, color .12s;
}
.sb-subitem:hover { background: var(--sb-item-hover); color: #5A5A5A; }
.sb-subitem.active {
  background: var(--sb-item-active);
  color: #5A5A5A; font-weight: 450;   /* cinza, sem negrito */
  box-shadow: 0 1px 2px -1px rgba(10,10,10,0.18);
}

/* Item ativo não fica em negrito */
.sb-item.active .sb-item-label,
.sb-item--parent.active .sb-item-label { font-weight: 450 !important; }

/* tooltips desnecessárias (rótulos já visíveis) */
.sb-tooltip { display: none !important; }

/* ─── BOTTOM (Config + Perfil) ─── */
.sb-bottom {
  padding: 6px 8px 10px;
  gap: 1px;
  border-top: none;            /* sem linha separatória */
  width: 100%;
  align-items: stretch;        /* era center */
}
.sb-user--mini {
  width: auto; height: auto;   /* era 36x36 fixo */
  margin: 0;
  justify-content: flex-start;
  gap: 10px;
  padding: 5px 9px; border-radius: 7px; cursor: pointer;
  transition: background .12s;
}
.sb-user--mini:hover { background: var(--sb-item-hover); }
.sb-user--mini::after {
  content: 'Perfil';
  font-size: 12.5px; font-weight: 500;
  color: var(--sb-label);
}

/* ─── MASTER ─── */
.sb-item--master {
  flex-direction: row;
  justify-content: flex-start;
  gap: 10px;
  width: auto;
  padding: 5px 9px;
  margin: 0 8px 4px;
  border-radius: 7px;
}
.sb-item--master .sb-item-label { text-align: left; max-width: none; }

/* ─── DESATIVAR SUBPAINEL DESLIZANTE ─── */
.sub-panel { display: none !important; }
body.sp-open .main {
  margin-left: var(--sw) !important;
  width: calc(100vw - var(--sw)) !important;
}

/* ─── CONTEÚDO CENTRALIZADO (respiro Shopify) ─── */
.content {
  padding: 28px 44px 48px;
}
.content .view {
  max-width: 1000px;
  margin-inline: auto;
}
/* Views que precisam de largura cheia (kanban, chat, tabelas) */
#view-projects,
#view-crm,
#view-comunicacao,
#view-contatos,
#view-akino-master {
  max-width: none;
}

/* ─── TOPBAR — barra preta full-width (Shopify) ─── */
:root { --topbar-h: 56px; }

.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  width: 100%;
  height: 56px;
  z-index: 200;                 /* acima da sidebar (110) */
  background: #0A0A0A;          /* paleta Shopify */
  border-bottom: none;          /* transição feita pelo inset arredondado */
  padding: 0 16px;
  gap: 12px;
}

/* Conteúdo começa abaixo da topbar fixa (todos os tamanhos) */
.main { padding-top: 56px; }
/* Sidebar começa abaixo da topbar apenas no desktop */
@media (min-width: 861px) {
  /* Menu = painel flutuante arredondado sobre o canvas (Shopify).
     Por flutuar, não há mais linha separatória vertical. */
  .sidebar {
    top: 68px;                          /* respiro abaixo da topbar */
    left: 12px;
    width: calc(var(--sw) - 24px);      /* 216px */
    height: calc(100vh - 80px);         /* 12px de respiro embaixo */
    background: #FFFFFF;
    border: 1px solid #E4E4E4;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(10,10,10,0.06);
    overflow: hidden;
  }
  /* Seção ocupa TODA a largura do layout; fundo preto atrás (igual à
     topbar). Os cantos arredondados ficam nas EXTREMIDADES (esquerda e
     direita) do site. O menu apenas flutua por cima — não desloca nem
     limita o início da borda. */
  .main {
    background: #0A0A0A;
    margin-left: 0;
    width: 100vw;
    height: 100vh;            /* altura definida → conteúdo rola por dentro */
  }
  /* Conteúdo = painel cinza full-width com cantos superiores arredondados
     nas bordas externas. Rola por DENTRO (overflow-y: auto + flex:1 do
     shell.css), então a borda arredondada fica fixa no topo durante o scroll. */
  .content {
    background: #F1F1F1;
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
    min-height: 0;           /* permite o flex encolher e rolar internamente */
    /* recuo à esquerda para o conteúdo não passar sob o menu flutuante */
    padding-left: 244px;
    padding-right: 44px;
  }
}

/* Marca à esquerda (logo do cliente ou nome) */
.topbar .tp-breadcrumb { gap: 0; }
.topbar .tp-bc-root,
.topbar #tp-brand-text {
  color: #fff; font-weight: 600; font-size: 15px;
}
.topbar .tp-bc-root:hover { color: rgba(255,255,255,.8); }

/* Poucos elementos — esconder widget de membros */
.topbar .tp-members { display: none; }

/* Ícones da sidebar — filled, cor #4A4A4A fixa em todos os estados */
.sb-item svg, .sb-item--master svg,
.sb-item:hover svg, .sb-item--master:hover svg,
.sb-item.active svg, .sb-item--master.active svg { color: #4A4A4A; }

/* Lado direito — transparente sobre o fundo preto (não pode ter fundo branco) */
.topbar .tp-divider { background: rgba(255,255,255,.14); }
.topbar #notif-btn {
  background: transparent;
  border-color: transparent;        /* sem traçado */
  color: rgba(255,255,255,.75);
}
.topbar #notif-btn:hover {
  background: rgba(255,255,255,.1);
  border-color: transparent;        /* hover sem borda */
  color: #fff;
}
.topbar .tp-profile {
  background: transparent;
  border-color: transparent;        /* sem traçado */
  color: #fff;
  border-radius: 8px;
}
.topbar .tp-profile:hover {
  background: rgba(255,255,255,.1);
  border-color: transparent;        /* hover sem borda */
}

/* Logo Akino padrão à esquerda (branco sobre a barra preta).
   Substitui o texto "Akino"; branding.js esconde quando o
   cliente tem logo próprio (white-label). */
.topbar .tp-brand-logo-default {
  height: 17px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: .92;
  display: block;
}
.topbar #tp-brand-text { cursor: pointer; display: inline-flex; align-items: center; }
.topbar #tp-brand-text:hover .tp-brand-logo-default { opacity: 1; }
.topbar .tp-uname { color: #fff; }
.topbar .tp-profile svg { color: rgba(255,255,255,.5) !important; }
.topbar .tp-hamburger span { background: #fff; }

/* Dropdown do workspace abre abaixo da topbar */
.ws-dropdown { top: 64px; }

/* Dark mode desativado por enquanto — esconder o toggle */
.theme-row { display: none !important; }
.theme-row + .dd-sep { display: none; }

/* ─── DASHBOARD — simplificação hierárquica ─── */

/* Cabeçalho do dashboard — título à esquerda, controles à direita */
.dash-welcome {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

/* Remover aba única "Resumo" (sem função com só 1 aba) */
.dash-tabs { display: none !important; }

/* KPI cards: remover sparklines, badges delta, footer
   Fica só: label + número + subtext (formato Shopify) */
.kpi2-footer  { display: none !important; }
.kpi2-badge   { display: none !important; }
.kpi2-unit    { font-size: 11px; color: var(--muted); font-weight: 400; margin-top: 3px; }
.kpi2-value   { font-size: 30px; font-weight: 700; letter-spacing: -1px; line-height: 1; }
.kpi2-label   { font-size: 12px; color: var(--muted); font-weight: 500; }
.kpi2-body    { padding: 14px 0 4px; }

/* KPI grid: colunas IGUAIS + mais respiro (era 2fr 1fr 1fr, desigual) */
.kpi-grid-new {
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  margin-bottom: 28px;
}
/* Cards mais altos e arejados */
.kpi-grid-new .kpi2-card { padding: 18px 20px 18px; }

/* ── Mais espaço branco entre as seções do dashboard ── */
.dash-grid-65 { gap: 20px !important; margin-bottom: 24px !important; }
/* Linha de baixo (atividades + projetos/funil) */
#tab-resumo > div[style*="grid-template-columns"] { gap: 20px !important; }
#tab-resumo > div[style*="flex-direction:column"],
#tab-resumo div[style*="flex-direction:column"] { gap: 20px !important; }

/* Cards internos do dashboard com um pouco mais de padding */
#tab-resumo .card-body { padding: 16px 18px; }

/* Funil CRM — remover subtítulo duplicado */
#dash-funnel-card .card-title::after { content: ''; }

/* ─── CARDS — sombra focada no final, sem hover (estilo Shopify) ─── */
.card,
.kpi2-card,
.sum-card {
  box-shadow: var(--card-raised-shadow);
}
/* Hover não altera o card — mesma sombra, sem transform nem mudança de cor */
.card:hover,
.kpi2-card:hover,
.sum-card:hover,
.card--raised:hover,
.kpi2-card--raised:hover {
  box-shadow: var(--card-raised-shadow);
  border-color: var(--border);
  transform: none;
}

/* ─── MOBILE ─── */
@media (max-width: 860px) {
  .content .view { max-width: none; }
  .content { padding: 20px 18px 40px; }
}

/* ─── BUSCA GLOBAL — barra central na topbar (estilo Shopify) ─── */
.topbar .tp-search {
  display: none;                 /* mostrado via launchApp quando habilitado */
  align-items: center;
  gap: 11px;
  /* Centralizada de verdade no meio da barra (não no espaço livre) */
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(700px, calc(100vw - 600px));   /* larga, com folga p/ logo e perfil */
  height: 40px;
  padding: 0 16px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 9px;
  background: rgba(255,255,255,.055);
  font-family: inherit;
  cursor: pointer;
  transition: background .13s, border-color .13s;
}
.topbar .tp-search:hover {
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.17);
}
/* Reset das regras antigas do shell.css (ícone/kbd eram absolute + caixa branca) */
.topbar .tp-search .tp-search-icon {
  position: static; left: auto;
  display: block;                 /* remove o gap de baseline do inline-SVG */
  width: 18px; height: 18px;
  flex-shrink: 0; color: rgba(255,255,255,.6);
}
.topbar .tp-search .tp-search-ph {
  flex: 1; text-align: left; font-size: 13.5px; color: rgba(255,255,255,.55);
}
.topbar .tp-search .tp-search-kbd {  /* texto puro, sem caixa — como o Shopify */
  position: static; right: auto;
  flex-shrink: 0;
  background: none; border: none; padding: 0; border-radius: 0;
  font-size: 12.5px;
  color: rgba(255,255,255,.4);
  letter-spacing: .3px;
}
@media (max-width: 980px) { .topbar .tp-search { display: none !important; } }

/* ─── PALETTE (modal de busca) ─── */
.gs-overlay {
  position: fixed; inset: 0;
  background: rgba(10,10,10,.4);
  backdrop-filter: blur(2px);
  z-index: 950;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
}
.gs-overlay.open { display: flex; }
.gs-panel {
  width: 560px; max-width: calc(100vw - 32px);
  background: var(--s1);
  border: 1px solid var(--border2);
  border-radius: 14px;
  box-shadow: 0 24px 70px rgba(10,10,10,.28);
  overflow: hidden;
  animation: fadeUp .16s cubic-bezier(.16,1,.3,1) both;
}
.gs-input-row {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
}
.gs-input-row input {
  flex: 1; border: none; background: none; outline: none;
  font-size: 14.5px; color: var(--text); font-family: inherit;
}
.gs-input-row input::placeholder { color: var(--dim); }
.gs-esc {
  font-size: 11px; padding: 2px 7px;
  border: 1px solid var(--border2); border-radius: 5px; color: var(--dim);
}
.gs-results { max-height: 380px; overflow-y: auto; padding: 8px; }
.gs-group-label {
  font-size: 11px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase;
  color: var(--dim); padding: 8px 10px 4px;
}
.gs-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 10px; border-radius: 9px; cursor: pointer;
}
.gs-item.sel { background: var(--s2); }
.gs-item-ico {
  width: 28px; height: 28px; border-radius: 7px; flex-shrink: 0;
  background: var(--s3); color: var(--muted);
  display: flex; align-items: center; justify-content: center;
}
.gs-item.sel .gs-item-ico { background: var(--ink); color: var(--bg); }
.gs-item-label { font-size: 13.5px; font-weight: 500; color: var(--text); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-item-sub { font-size: 11.5px; color: var(--dim); flex-shrink: 0; max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-empty { padding: 28px 16px; text-align: center; font-size: 13px; color: var(--muted); }