/* ===================================================================== */
/* overrides.css — camada de acento + refinos, em ARQUIVO SEPARADO de       */
/* propósito: o auto-sync do repo vinha comendo os blocos anexados no        */
/* <style> do index.html na reconciliação entre sessões. Arquivo novo não    */
/* entra em conflito de merge → sobrevive. Carregado DEPOIS do <style>, então */
/* vence a cascata. Tudo deriva de --cyan (o acento); status e redes ficam   */
/* de fora, de propósito.                                                    */
/* ===================================================================== */

/* ---- estrela (logo) pintada com a cor via máscara ---- */
.logo{display:inline-block;width:46px;height:46px;margin-right:-4px;background:var(--grad);
  -webkit-mask:url(/siriushub-mark.svg) no-repeat center/contain;
  mask:url(/siriushub-mark.svg) no-repeat center/contain}

/* ---- brilhos / gradientes / sombras seguem o acento ---- */
.nav button.on{border-color:var(--cyan);box-shadow:0 0 0 1px color-mix(in srgb,var(--cyan) 22%,transparent),0 0 16px color-mix(in srgb,var(--cyan) 24%,transparent)}
[data-theme="light"] .nav button.on{background:color-mix(in srgb,var(--cyan) 13%,transparent);border-color:var(--cyan);color:#0F1D2E;box-shadow:0 0 0 1px color-mix(in srgb,var(--cyan) 22%,transparent)}
.cal-cell:hover{box-shadow:0 0 0 1px color-mix(in srgb,var(--cyan) 30%,transparent),0 4px 18px rgba(0,0,0,.28)}
.cal-cell.sel{outline-color:var(--cyan);box-shadow:0 0 0 1px color-mix(in srgb,var(--cyan) 45%,transparent),0 0 16px color-mix(in srgb,var(--cyan) 16%,transparent)}
.cal-cell.today .cal-day{color:var(--cyan)}
.cal-add{background:color-mix(in srgb,var(--cyan) 12%,transparent);color:var(--cyan);border-color:color-mix(in srgb,var(--cyan) 30%,transparent)}
.cal-cell:hover .cal-add{background:var(--cyan);color:#06121A;border-color:transparent;box-shadow:0 0 8px color-mix(in srgb,var(--cyan) 40%,transparent)}
.cli-card:hover{border-color:color-mix(in srgb,var(--cyan) 40%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--cyan) 30%,transparent),0 8px 28px color-mix(in srgb,var(--cyan) 12%,transparent)}
.cf-btn.open{border-color:var(--cyan);box-shadow:0 0 12px color-mix(in srgb,var(--cyan) 28%,transparent)}
.drop:hover,.drop.over{border-color:var(--cyan)}
.emoji-btn:hover{border-color:var(--cyan)}
.btn-cyan:hover{border-color:var(--cyan);background:color-mix(in srgb,var(--cyan) 10%,transparent)}
.fab{box-shadow:0 4px 22px color-mix(in srgb,var(--cyan) 40%,transparent)}
.fab:hover{box-shadow:0 6px 30px color-mix(in srgb,var(--cyan) 55%,transparent)}

/* ---- [3] botões que faltaram seguir o acento (claro E escuro) ---- */
/* filtro "Todos os clientes" (era roxo fixo) */
.cf-btn{background:color-mix(in srgb,var(--cyan) 10%,transparent);border-color:color-mix(in srgb,var(--cyan) 35%,transparent);color:var(--cyan)}
.cf-dot,.cf-opt.active .cf-opt-dot{background:var(--cyan)}
.cf-opt.active{color:var(--cyan)}
[data-theme="light"] .cf-btn{background:color-mix(in srgb,var(--cyan) 9%,#fff);border-color:color-mix(in srgb,var(--cyan) 40%,transparent);color:color-mix(in srgb,var(--cyan) 66%,#000)}
[data-theme="light"] .cf-btn.open{border-color:var(--cyan);color:color-mix(in srgb,var(--cyan) 66%,#000)}
[data-theme="light"] .cf-opt.active{background:color-mix(in srgb,var(--cyan) 9%,#fff);color:color-mix(in srgb,var(--cyan) 66%,#000)}
/* + Cliente e Gerenciar */
.btn-manage{border-color:color-mix(in srgb,var(--cyan) 28%,transparent)}
.btn-manage:hover{border-color:var(--cyan);background:color-mix(in srgb,var(--cyan) 8%,transparent);color:var(--white)}
[data-theme="light"] .btn-manage{border-color:color-mix(in srgb,var(--cyan) 30%,transparent);color:#334155}
[data-theme="light"] .btn-manage:hover{border-color:var(--cyan);background:color-mix(in srgb,var(--cyan) 6%,#fff);color:color-mix(in srgb,var(--cyan) 66%,#000);box-shadow:0 0 12px color-mix(in srgb,var(--cyan) 20%,transparent)}
/* botões do modal de contas (Trocar página / Login direto / Conectar) */
.btn-net-action{border-color:color-mix(in srgb,var(--cyan) 45%,transparent);color:var(--cyan)}
.btn-net-action:hover{border-color:var(--cyan);background:color-mix(in srgb,var(--cyan) 8%,transparent)}
[data-theme="light"] .btn-net-action{border-color:color-mix(in srgb,var(--cyan) 45%,transparent);color:color-mix(in srgb,var(--cyan) 66%,#000)}
/* nota informativa do modal (era ciano fixo inline) */
.contas-note{font-size:11px;color:var(--cyan);background:color-mix(in srgb,var(--cyan) 7%,transparent);border:1px solid color-mix(in srgb,var(--cyan) 18%,transparent);border-radius:9px;padding:9px 12px;margin-bottom:12px;line-height:1.5}
[data-theme="light"] .contas-note{color:color-mix(in srgb,var(--cyan) 62%,#000);background:color-mix(in srgb,var(--cyan) 8%,#fff);border-color:color-mix(in srgb,var(--cyan) 22%,transparent)}

/* ---- grade: ícone do cabeçalho + cabeçalho + rodapé/sumário seguem o acento ---- */
.ge-hd > svg{stroke:var(--cyan)}
.ge-gc thead th{background:color-mix(in srgb,var(--cyan) 12%,transparent);color:var(--cyan)}
.ge-ctx-item{background:linear-gradient(135deg,color-mix(in srgb,var(--cyan) 9%,transparent),rgba(255,255,255,.02));border-color:color-mix(in srgb,var(--cyan) 20%,transparent)}
.ge-sum{background:color-mix(in srgb,var(--cyan) 6%,transparent);border-color:color-mix(in srgb,var(--cyan) 18%,transparent)}
.ge-ft{background:color-mix(in srgb,var(--cyan) 5%,transparent)}
[data-theme="light"] .ge-gc thead th{background:color-mix(in srgb,var(--cyan) 12%,#fff);color:color-mix(in srgb,var(--cyan) 60%,#000);border-color:color-mix(in srgb,var(--cyan) 30%,transparent)}
[data-theme="light"] .ge-ctx-item{background:color-mix(in srgb,var(--cyan) 6%,#fff);border-color:color-mix(in srgb,var(--cyan) 22%,transparent)}
[data-theme="light"] .ge-sum{background:color-mix(in srgb,var(--cyan) 7%,#fff);border-color:color-mix(in srgb,var(--cyan) 20%,transparent)}
[data-theme="light"] .ge-ft{background:color-mix(in srgb,var(--cyan) 7%,#fff);border-top-color:color-mix(in srgb,var(--cyan) 20%,transparent)}

/* ---- [2][4] painel lateral do calendário: alinhado com o topo (sábado) + texto legível no claro ---- */
.cal-side{margin-top:0}
.cal-side .it .l{color:var(--white)}
.cal-side .it .m{color:var(--mut)}

/* ---- cabeçalho (nav) fixo ao rolar a página ---- */
/* A barra de navegação (Calendário/Contas/Grade + Configurações) gruda no topo do  */
/* viewport ao rolar, com fundo semi-opaco + blur, pra o conteúdo passar por baixo.  */
.nav{position:sticky;top:0;z-index:60;margin:0 0 22px;padding:12px 4px;
  background:color-mix(in srgb,var(--bg) 86%,transparent);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
/* o painel de Configurações e o overlay ficam acima da nav fixa */
.settings-overlay{z-index:400}
.fab{z-index:50}

/* ---- calendário: mês (‹ Julho ›) + dias da semana ---- */
/* NÃO são mais sticky: quando grudavam, o conteúdo rolava por baixo e vazava (fundo
   translúcido no mês, ZERO fundo nos dias-da-semana com gaps de 6px), dando o efeito de
   "cabeçalho sobrepondo". Agora rolam junto com o calendário. Só o topbar (opaco) fica fixo. */
.cal-nav{position:static;margin-bottom:10px;padding:8px 0}
.cal-wd{position:static}

/* ---- modal "Gerenciar clientes" (criar/renomear/remover) ---- */
.cm-list{display:flex;flex-direction:column;gap:6px}
.cm-row{display:flex;align-items:center;gap:10px;padding:9px 11px;border:1px solid var(--line);border-radius:9px;background:var(--soft)}
.cm-name{flex:1;font-size:13.5px;font-weight:600;color:var(--white);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-actions{display:flex;gap:6px;flex:none}
.cm-actions .btn-net-action{font-size:11px;padding:4px 10px}

/* ---- link "Gerenciar tipos" dentro do modal "+ Adicionar tema" ---- */
.at-tipos-manage{margin-top:6px;text-align:right}
.at-tipos-manage a{font-size:11.5px;color:var(--cyan);text-decoration:none;cursor:pointer}
.at-tipos-manage a:hover{text-decoration:underline}

/* ---- modal "Gerenciar tipos" (criar/editar/remover tipos de conteúdo, por cliente) ---- */
.tp-list{display:flex;flex-direction:column;gap:6px}
.tp-row{display:flex;align-items:center;gap:10px;padding:9px 11px;border:1px solid var(--line);border-radius:9px;background:var(--soft);flex-wrap:wrap}
.tp-swatch{width:14px;height:14px;border-radius:4px;flex:none;border:1px solid rgba(255,255,255,.25)}
.tp-name{flex:1;font-size:13px;font-weight:600;color:var(--white);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tp-code{font-size:10px;color:var(--mut);font-weight:700;letter-spacing:.04em;flex:none}
.tp-actions{display:flex;gap:6px;flex:none}
.tp-actions .btn-net-action{font-size:11px;padding:4px 10px}
.tp-edit-input{flex:1;min-width:120px}
.tp-palette{display:flex;gap:7px;flex-wrap:wrap}
.tp-palette-full{width:100%;margin-top:2px}
.tp-pal-sw{width:22px;height:22px;border-radius:6px;cursor:pointer;border:2px solid transparent;transition:transform .1s,border-color .1s}
.tp-pal-sw:hover{transform:scale(1.12)}
.tp-pal-sw.on{border-color:var(--white)}
[data-theme="light"] .tp-pal-sw.on{border-color:#0E1B2A}

/* ---- barra do topo (logo + nav) FIXA em TODAS as views, inclusive a Grade ---- */
/* A view-grade fica fora do .wrap; por isso a barra tem que ser top-level (fora do  */
/* .wrap) pra cobrir também a Grade. Offsets aproximados da altura da barra — se      */
/* sobrar gap/overlap, ajustar aqui.                                                  */
/* STICKY (não fixed): a barra fica no fluxo do documento e OCUPA a própria altura no topo,
   então .wrap e a Grade já entram naturalmente embaixo dela — sem offset calculado por JS,
   sem chute de pixel, sem corte. Ao rolar, o sticky prende a barra no topo do viewport. */
.topbar{position:sticky;top:0;z-index:60;padding:14px 44px 10px;
  background:var(--bg);
  border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
.topbar .top{margin-bottom:8px}
/* dentro da barra, a nav volta a ser estática (a barra é quem gruda) */
.topbar .nav{position:static;margin:0;padding:0;background:none;border:none;-webkit-backdrop-filter:none;backdrop-filter:none}
/* offsets normais — o fluxo já posiciona o conteúdo abaixo da barra sticky */
.wrap{padding-top:22px}
#view-grade{padding-top:8px!important}
/* Na Grade o .wrap sobra só com o subtítulo (views internas ocultas): escondo o subtítulo
   e colapso o topo do .wrap, pra a Grade encostar logo abaixo da barra. */
.wrap.in-grade{padding-top:0}
.wrap.in-grade .sub{display:none}
/* Só o topbar fica fixo (opaco). Filtro, mês e dias-da-semana rolam junto com o conteúdo,
   então some tudo limpo por baixo do topbar ao rolar, sem corte e sem sobrepor o painel. */
@media(max-width:600px){ .topbar{padding:12px 14px 8px} }

/* ---- Grade: contexto (Campanha/VET/Programas) editável pelo time ---- */
/* JS decide QUEM edita (contenteditable só fora do share-mode); aqui é só a affordance   */
/* visual — um contorno tracejado sutil que vira sólido no hover/focus, cor de acento.     */
.ge-ctx-val[contenteditable="true"]{cursor:text;border-radius:5px;padding:1px 3px;margin:-1px -3px;
  outline:1px dashed transparent;transition:outline-color .15s,background-color .15s}
.ge-ctx-val[contenteditable="true"]:hover{outline-color:color-mix(in srgb,var(--cyan) 45%,transparent)}
.ge-ctx-val[contenteditable="true"]:focus{outline:1px solid var(--cyan);outline-style:solid;
  background:color-mix(in srgb,var(--cyan) 8%,transparent)}

/* ---- Grade: tabela de Stories (Seg a Dom) — cadência de conteúdo, tema curto por dia,  ---- */
/* injetada por JS logo abaixo do Feed. Reusa .ge-gc (borda/fonte da tabela) mas com 8      */
/* colunas apertadas (Semana + 7 dias) e sem badge de tipo, só o texto do tema.             */
.ge-story{margin-top:14px}
.ge-story-h{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);margin-bottom:6px}
/* table-layout:fixed + largura travada por coluna — sem isso, digitar num dia fazia a
   coluna crescer com o texto e empurrar as outras 7, um layout-shift feio a cada tecla. */
.ge-gc-story{table-layout:fixed}
.ge-gc-story th,.ge-gc-story td{font-size:11px;padding:6px 5px;text-align:center;vertical-align:top}
.ge-gc-story th:first-child,.ge-gc-story td:first-child{width:70px}
.ge-gc-story th:not(:first-child),.ge-gc-story td:not(:first-child){width:calc((100% - 70px)/7)}
.ge-gc-story .ge-tw{font-size:11px;font-weight:700;text-align:left;padding-left:8px;vertical-align:middle}
.ge-story-val{min-height:15px;color:var(--white);opacity:.82;line-height:1.35;border-radius:5px;padding:1px 3px;margin:-1px -3px;outline:1px dashed transparent;transition:outline-color .15s,background-color .15s;word-break:break-word;overflow-wrap:anywhere}
.ge-story-val:empty:before{content:'+';color:var(--muted2)}
.ge-story-val[contenteditable="true"]{cursor:text}
.ge-story-val[contenteditable="true"]:hover{outline-color:color-mix(in srgb,var(--cyan) 45%,transparent)}
.ge-story-val[contenteditable="true"]:focus{outline:1px solid var(--cyan);background:color-mix(in srgb,var(--cyan) 8%,transparent)}
/* botão ⧉ no canto — copia o tema pra colar (Ctrl+V) em outro dia. Só aparece em hover
   e só quando a célula tem conteúdo (célula vazia não tem o que copiar). */
.ge-story-cell{position:relative}
.ge-story-copy{position:absolute;top:-3px;right:-3px;width:16px;height:16px;padding:0;
  border:1px solid color-mix(in srgb,var(--cyan) 35%,transparent);border-radius:4px;
  background:color-mix(in srgb,var(--cyan) 14%,var(--card));color:var(--cyan);
  font-size:10px;line-height:14px;cursor:pointer;opacity:0;transition:opacity .15s;z-index:1}
.ge-story-cell:hover .ge-story-copy{opacity:1}
.ge-story-copy:hover{background:color-mix(in srgb,var(--cyan) 24%,var(--card))}
.ge-story-val:empty~.ge-story-copy{display:none}
@media(max-width:820px){ .ge-gc-story th,.ge-gc-story td{font-size:9.5px;padding:5px 2px} }

/* ---- modo COMPARTILHADO (/gradeeditorial/<cliente>): link read-only pro cliente ---- */
/* Esconde toda a navegação e os controles de edição — sobra a marca + a grade +   */
/* Exportar PDF. O nome do cliente continua visível (só perde o dropdown).          */
.share-mode .topbar .nav{display:none}
.share-mode .ge-csel{pointer-events:none}
.share-mode .ge-carr{display:none}
.share-mode .ge-btn-teal,
.share-mode .ge-btn-share,
.share-mode .fab,
.share-mode .fab-tooltip,
.share-mode .settings-overlay{display:none!important}
/* Campanha/VET/Programas: o JS já não marca contenteditable no share-mode; isso é reforço. */
.share-mode .ge-ctx-val{pointer-events:none}
/* sem nav, a marca sozinha fica com um respiro menor embaixo */
.share-mode .topbar .top{margin-bottom:0}
/* Stories: sem edição no link do cliente, sem o "+" fantasma dos dias vazios, sem o botão de copiar */
.share-mode .ge-story-val{pointer-events:none}
.share-mode .ge-story-val:empty{display:none}
.share-mode .ge-story-copy{display:none!important}

/* ---- filtro do calendário: filtro + botão lado a lado, compactos e alinhados ---- */
/* O .btn-manage base é width:100% — dentro do flex ele esticava (linha enorme) e            */
/* espremia o filtro ("Todos os clientes" quebrava em 3 linhas). Aqui trava largura=auto,    */
/* sem crescer/encolher, sem margin-auto: os dois ficam juntinhos à esquerda.                */
.cal-filter{display:flex;align-items:center;gap:10px;flex-wrap:nowrap}
.cal-filter .cf-sel{flex:0 0 auto}
.cal-filter .cf-btn{white-space:nowrap}
/* Compartilhar com o MESMO formato do filtro (pílula, borda/cor de acento) — não um botão à parte */
.cal-share-btn{width:auto!important;flex:0 0 auto;margin:0;display:inline-flex;align-items:center;gap:6px;
  border-radius:20px;padding:5px 14px;font-size:12px;font-weight:600;white-space:nowrap;cursor:pointer;
  background:color-mix(in srgb,var(--cyan) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--cyan) 35%,transparent);
  color:var(--cyan)}
.cal-share-btn:hover{background:color-mix(in srgb,var(--cyan) 17%,transparent);border-color:var(--cyan);color:var(--cyan)}
[data-theme="light"] .cal-share-btn{background:color-mix(in srgb,var(--cyan) 9%,#fff);
  border-color:color-mix(in srgb,var(--cyan) 40%,transparent);color:color-mix(in srgb,var(--cyan) 66%,#000)}
[data-theme="light"] .cal-share-btn:hover{border-color:var(--cyan);background:color-mix(in srgb,var(--cyan) 14%,#fff);color:color-mix(in srgb,var(--cyan) 66%,#000)}

/* ---- modo COMPARTILHADO no CALENDÁRIO (/calendario/<cliente>) ---- */
/* O calendário abre filtrado no cliente e read-only: filtro travado (some), sem criar   */
/* post no dia (+), e o preview do post perde todas as ações (editar/agendar/excluir/     */
/* aprovar/histórico). Cliente vê só os posts programados dele.                           */
.share-mode .cal-filter{display:none}
.share-mode .cal-add{display:none!important}
.share-mode .pv-actions{display:none!important}

/* =====================================================================
   MODO CLARO — correções: componentes que só tinham estilo escuro (fundo
   fixo) viravam PRETO no claro. Hover das linhas, toast e as caixas do
   preview do post agora usam variáveis do tema (adaptam claro/escuro).
   ===================================================================== */

/* hover da lista lateral de posts: no claro, cinza claro em vez de quase-preto */
[data-theme="light"] .it:hover{background:#EEF3F8}

/* toast (notificação de "link copiado"): pílula limpa e elevada, some o preto cru */
.toast{border-radius:12px!important;box-shadow:0 12px 34px rgba(0,0,0,.30)}
[data-theme="light"] .toast{background:#0F1D2E;color:#F3F8FD;
  border-color:color-mix(in srgb,var(--cyan) 45%,transparent);
  box-shadow:0 12px 30px rgba(15,29,46,.22)}

/* ---- caixas de ação do preview do post (Copiar / Aprovação / Revisão / Histórico) ---- */
/* Base neutra usando var(--surface)/var(--line) — theme-aware por definição. Cada variante */
/* recebe um tom da cor (verde/roxo/vermelho) misturado ao surface, então funciona nos dois */
/* temas sem virar preto no claro.                                                          */
.pv-box{margin-top:8px;padding:9px 11px;border-radius:9px;font-size:12px;
  background:var(--surface);border:1px solid var(--line)}
.pv-box-h{font-weight:700;margin-bottom:6px;color:var(--mut);line-height:1.35}
.pv-box .pv-link{flex:1;font-size:11px;background:transparent;border:none;outline:none;padding:0;min-width:0}
.pv-box-note{color:var(--mut);font-size:10.5px;margin-top:6px;line-height:1.4}
/* aprovação — verde */
.pv-box-aprov{background:color-mix(in srgb,#10B981 10%,var(--surface));
  border-color:color-mix(in srgb,#10B981 34%,var(--line))}
.pv-box-aprov .pv-box-h,.pv-box-aprov .pv-link{color:#0EA472}
[data-theme="light"] .pv-box-aprov .pv-box-h,[data-theme="light"] .pv-box-aprov .pv-link{color:#0A7D57}
/* revisão — roxo */
.pv-box-rev{background:color-mix(in srgb,#8B5CF6 10%,var(--surface));
  border-color:color-mix(in srgb,#8B5CF6 34%,var(--line))}
.pv-box-rev .pv-box-h,.pv-box-rev .pv-link{color:#9B7DF0}
[data-theme="light"] .pv-box-rev .pv-box-h,[data-theme="light"] .pv-box-rev .pv-link{color:#6D28D9}
/* histórico de ajustes — vermelho */
.pv-box-hist{background:color-mix(in srgb,#EF4444 8%,var(--surface));
  border-color:color-mix(in srgb,#EF4444 30%,var(--line))}
.pv-box-hist .pv-box-h{color:#F0788B}
[data-theme="light"] .pv-box-hist .pv-box-h{color:#DC2626}

/* ---- thumbnails que não carregam (reel publicado com blob limpo) ou post sem imagem ---- */
/* Placeholder temático com ícone, no lugar do quadrado branco (onerror) ou preto (fallback). */
.thumb-ph{border-radius:6px;flex:none;display:inline-flex;align-items:center;justify-content:center;
  background:var(--surface);border:1px solid var(--line);color:var(--muted2)}
/* enquanto a imagem carrega, o fundo segue o tema (antes era preto fixo, piscava no claro) */
.cal-side .it img,.staged-item img{background:var(--surface)}