/*
 * cassiellOS — Shell V2. Sidebar, topbar e Dashboard.
 *
 * Carregado DEPOIS de `app.css` e `brand.css`, e é essa a razão de existir como arquivo separado:
 * `app.css` tem 60 KB de regras acumuladas e um refactor delas agora quebraria TaskFlow, MediaFlow
 * e Clientes — telas que esta rodada não deve tocar. Aqui só entram as superfícies do shell e do
 * Dashboard, sobre os tokens oficiais que `brand.css` já define.
 *
 * A DIREÇÃO
 * ---------
 * Software operacional, não dashboard de template. Densidade alta sem poluição: menos caixa dentro
 * de caixa, uma superfície só por bloco, hierarquia feita por tipografia e espaço em vez de borda.
 *
 * Signal Red é o acento e aparece POUCO — no item ativo, na ação primária, no que exige atenção. Um
 * vermelho que aparece em tudo deixa de significar alguma coisa, e é essa a função dele aqui.
 *
 * Sem glassmorphism, sem glow, sem gradiente de fundo, sem sombra pesada. Elevação é feita por
 * luminosidade da superfície e uma borda de 1px.
 */

/* ============================================================ escala e superfícies */

:root{
  /*
   * Superfícies em três degraus a partir do Navy. `--sf-1` é o canvas; `--sf-2` é o card, um passo
   * acima; `--sf-3` é o que está dentro do card. Três é o suficiente — o quarto degrau ninguém
   * distingue, e vira caixa dentro de caixa.
   */
  --sf-0:#050C17;
  --sf-1:var(--cassiellos-navy,#07101F);
  --sf-2:#0C182B;
  --sf-3:#122036;
  --hair:rgba(220,227,238,.09);
  --hair-forte:rgba(220,227,238,.16);

  --txt:var(--cassiellos-paper,#F6F8FF);
  --txt-2:#9DABC2;
  --txt-3:#6D7C93;

  /* Espaçamento em múltiplos de 4. Números fora desta escala são o que faz um layout parecer
     desalinhado sem que ninguém saiba dizer por quê. */
  --e-1:4px;--e-2:8px;--e-3:12px;--e-4:16px;--e-5:20px;--e-6:24px;--e-8:32px;--e-10:40px;
  --r-sm:10px;--r-md:14px;--r-lg:18px;
}

body{background:var(--sf-1)}

/* ============================================================ SIDEBAR */

.sidebar{
  /* A LARGURA NAO E MEXIDA AQUI. A sidebar e `position:fixed` e existe um offset pareado no
     `main` (215px) espalhado por app.css; alterar so um lado dos dois faz a coluna cobrir o
     conteudo — medido em 730px, com 31px do titulo por baixo dela. Densidade a 215px esta boa;
     casar os dois lados e trabalho para quando app.css for refatorado. */
  background:var(--sf-0);border-right:1px solid var(--hair);
  padding:var(--e-6) var(--e-3) var(--e-4);
}
/*
 * A MARCA NAO E REDESENHADA AQUI. O SVG oficial esta inline no `index.html`; a folha so decide o
 * TAMANHO, e por uma dimensao so: `width` fixo e `height:auto`, para o `viewBox` original
 * (995.82 x 261.32) manter a proporcao. Escalar os dois lados a mao distorce o logotipo, e
 * logotipo distorcido e pior do que logotipo ausente.
 *
 * Sidebar e navegacao, nao banner: 132px de largura, e o espaco abaixo e do menu.
 */
.sidebar .brand{padding:0 var(--e-3) var(--e-6);display:block}
.sidebar .brand-logo{width:132px;height:auto;display:block}
/* O "cassiell" e um `<text>`; a cor Paper e a familia vem do asset oficial. */
.brand-logo-texto{
  fill:var(--cassiellos-paper,#F6F8FF);
  font-family:'Inter Tight',InterTight-Bold,Inter,Arial,sans-serif;
  font-size:220.87px;font-weight:700;letter-spacing:-.03em;
}

.sidebar nav{gap:1px}

/*
 * O CABEÇALHO DE GRUPO é o que transforma uma lista de botões em navegação de sistema. Ele carrega
 * a hierarquia inteira — sem ele, "Clientes" e "TaskFlow" parecem a mesma categoria de coisa.
 */
.sidebar .nav-group{
  margin:var(--e-6) 0 var(--e-2);padding:0 var(--e-3);
  font-size:9.5px;font-weight:700;letter-spacing:1.6px;color:var(--txt-3);
}
.sidebar .nav-group:first-child{margin-top:0}

.sidebar nav button{
  position:relative;display:flex;align-items:center;gap:var(--e-3);
  padding:9px var(--e-3);border-radius:var(--r-sm);
  font-size:13.5px;font-weight:500;color:var(--txt-2);
  transition:background .12s ease,color .12s ease;
}
/*
 * `!important` aqui NAO e preguica de especificidade — e a unica saida sem refatorar `app.css`.
 *
 * `app.css` declara `.sidebar button span` com `!important` (heranca de um patch antigo de
 * cascata), pintando um ladrilho de 40px com gradiente. Minha regra e mais especifica e perde
 * assim mesmo. Mexer naquele arquivo agora quebraria TaskFlow, MediaFlow e Clientes, que esta
 * rodada nao deve tocar.
 *
 * O icone volta a ser um glifo: 40px de ladrilho colorido por item e o oposto de densidade alta —
 * come a coluna inteira e compete com o texto, que e o que a pessoa le.
 */
.sidebar nav button span{
  width:18px!important;height:auto!important;min-width:0!important;
  background:none!important;border:0!important;border-radius:0!important;
  box-shadow:none!important;
  text-align:center;font-size:13px!important;line-height:1.4!important;
  color:var(--txt-3)!important;flex:0 0 18px!important;display:inline-block!important;padding:0!important;margin:0!important;
}
.sidebar nav button{padding:9px var(--e-3)!important;margin:0!important}
.sidebar nav button small{display:block;font-size:10.5px;color:var(--txt-3);font-weight:400;margin-top:1px}
.sidebar nav button:hover:not(:disabled){background:rgba(220,227,238,.05);color:var(--txt)}
.sidebar nav button:hover:not(:disabled) span{color:var(--txt-2)}

/*
 * O ITEM ATIVO. Superfície discreta, texto em Paper, e uma barra Signal Red de 2px na borda —
 * evidente de relance e sem virar um bloco vermelho ocupando a coluna. `box-shadow:inset` em vez
 * de `border-left` porque borda mudaria a largura e deslocaria o texto de todos os outros itens.
 */
.sidebar nav button.active{
  background:var(--sf-2)!important;color:var(--txt)!important;font-weight:600;
  box-shadow:inset 2px 0 0 var(--cassiellos-signal-red,#F13C4B)!important;
}
.sidebar nav button.active span{color:var(--cassiellos-signal-red,#F13C4B)!important;background:none!important}

/* Módulo ainda não liberado: presente, legível, e claramente fora de alcance. O tachado saiu — ele
   sugere "removido", e estes vêm depois. */
.sidebar nav button.unavailable{opacity:.42;cursor:default}
.sidebar nav button.unavailable s{text-decoration:none}
.sidebar nav button.unavailable:hover{background:none}

.sidebar-profile{
  margin-top:auto;display:flex;align-items:center;gap:var(--e-3);
  padding:var(--e-3);border-top:1px solid var(--hair);border-radius:0;
}
.sidebar-profile .profile-avatar{
  width:32px;height:32px;border-radius:9px;display:grid;place-items:center;flex:none;
  background:var(--sf-3);color:var(--txt-2);font-size:11.5px;font-weight:700;
}
.sidebar-profile b{font-size:12.5px;color:var(--txt);display:block}
.sidebar-profile small{font-size:10.5px;color:var(--txt-3)}
.sidebar-profile .profile-logout{margin-left:auto;font-size:11px;color:var(--txt-3);background:none;border:0;cursor:pointer;padding:4px}
.sidebar-profile .profile-logout:hover{color:var(--cassiellos-signal-red,#F13C4B)}

/* ============================================================ TOPBAR */

main{padding:var(--e-5) var(--e-8) var(--e-6);gap:0}

.topbar{
  display:grid;grid-template-columns:minmax(220px,auto) 1fr auto;
  align-items:center;gap:var(--e-6);
  margin:0 0 var(--e-4);padding:0 0 var(--e-3);
  border-bottom:1px solid var(--hair);
}
.topbar-eyebrow{
  margin:0 0 var(--e-1);font-size:10px;font-weight:700;letter-spacing:1.5px;color:var(--txt-3);
}
.topbar-sep{margin:0 6px;color:var(--hair-forte)}
.topbar h1{margin:0;font-size:19px;font-weight:700;letter-spacing:-.03em;color:var(--txt)}

.topbar-center{display:flex;justify-content:center}
.global-search{
  display:flex;align-items:center;gap:var(--e-2);width:min(420px,100%);
  background:var(--sf-2);border:1px solid var(--hair);border-radius:var(--r-sm);
  padding:0 var(--e-3);height:36px;
}
.global-search span{color:var(--txt-3);font-size:13px}
.global-search input{
  flex:1;background:none;border:0;outline:none;color:var(--txt);
  font-size:12.5px;font-family:inherit;
}
.global-search input::placeholder{color:var(--txt-3)}

.topbar-actions{display:flex;align-items:center;gap:var(--e-2)}

/*
 * A BADGE DE AMBIENTE. Escondida por padrão; `app.js` a revela quando o host começa com `dev.`.
 * Sem ela, DEV e Production são visualmente idênticos — e "achei que estava no DEV" é o começo de
 * um estrago em dado real.
 */
.env-badge{
  font-size:9.5px;font-weight:800;letter-spacing:1.2px;
  color:var(--cassiellos-flow-cyan,#22C7F2);
  border:1px solid rgba(34,199,242,.32);background:rgba(34,199,242,.08);
  padding:4px 8px;border-radius:6px;
}
.env-badge.hidden{display:none}

.conn-dot{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--txt-3);padding-right:var(--e-2)}
.conn-dot i{width:6px;height:6px;border-radius:50%;background:var(--txt-3)}
.conn-dot.ok i{background:#3FCF8E}
.conn-dot.off i{background:var(--cassiellos-signal-red,#F13C4B)}

.icon-button{
  width:34px;height:34px;display:grid;place-items:center;
  background:var(--sf-2);border:1px solid var(--hair);border-radius:var(--r-sm);
  color:var(--txt-2);font-size:13px;cursor:pointer;transition:border-color .12s ease,color .12s ease;
}
.icon-button:hover:not(:disabled){border-color:var(--hair-forte);color:var(--txt)}
.icon-button:disabled{opacity:.45;cursor:not-allowed}

/* ============================================================ CARD PADRÃO */

/*
 * UMA superfície por bloco. `.dash-card` é o card do sistema: fundo um passo acima do canvas, borda
 * de 1px, radius consistente, sem sombra. O que estiver dentro dele NÃO ganha outra borda — é aí
 * que nasce a caixa dentro de caixa.
 */
.dash-card,.card{
  background:var(--sf-2);border:1px solid var(--hair);border-radius:var(--r-lg);
  padding:var(--e-6);box-shadow:none;
}
#dashboardPage .dash-card{margin-bottom:var(--e-4);padding:var(--e-4)}
#dashboardPage .dash-card:hover{border-color:var(--hair-forte)}
.dash-card,.card{transition:border-color .14s ease}

/* Cabeçalho de seção: eyebrow, título, apoio — nesta ordem, e com pesos diferentes. */
.dash-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--e-4);
  margin:0 0 var(--e-5);
}
.dash-head h2,.dash-card h2{
  margin:0;font-size:15.5px;font-weight:650;letter-spacing:-.02em;color:var(--txt);
}
.dash-head p,.dash-head span,.dash-card>div>p{margin:var(--e-1) 0 0;font-size:12px;color:var(--txt-3);font-weight:400}
.eyebrow{
  margin:0 0 var(--e-2);font-size:9.5px;font-weight:700;letter-spacing:1.5px;
  color:var(--txt-3);
}

/* ============================================================ V3 — DENSIDADE */

/*
 * A revisao do Rafael reprovou a ARQUITETURA DE INFORMACAO, nao o acabamento: cards enormes quase
 * vazios, estados vazios ocupando um terco da tela, sete cards para o que cabe numa tabela.
 *
 * O que muda aqui e o custo em pixels de cada informacao. A regra e uma so: espaco proporcional
 * ao que a coisa tem a dizer. Um "nenhuma entrega hoje" custa uma linha; uma producao com sete
 * clientes custa sete linhas.
 */

/* ------------------------------------------------------- faixa de indicadores */

/*
 * Quatro numeros numa faixa de ~62px, no lugar de quatro cards de 100px. Sem icone: ele nao dizia
 * nada que o rotulo ja nao dissesse e comia a largura que o numero merecia.
 */
.kpi-strip{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--hair);border:1px solid var(--hair);border-radius:var(--r-md);
  overflow:hidden;margin:0 0 var(--e-4);
}
.kpi-strip .kpi-card{
  display:flex;flex-direction:column;justify-content:center;gap:1px;
  background:var(--sf-2);border:0;border-radius:0;padding:var(--e-3) var(--e-4);min-height:62px;
}
.kpi-strip .kpi-card strong{
  font-size:21px;font-weight:700;letter-spacing:-.03em;color:var(--txt);line-height:1.1;
}
.kpi-strip .kpi-card span{
  font-size:10px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:var(--txt-2);
}
.kpi-strip .kpi-card small{font-size:10.5px;color:var(--txt-3)}
/* Abaixo de 900px quatro colunas espremem o numero contra o rotulo; duas por linha mantem a
   leitura sem virar quatro caixas empilhadas. */
@media(max-width:900px){.kpi-strip{grid-template-columns:repeat(2,1fr)}}

/* Cor com funcao, decidida pelo VALOR em `app.js` — nunca pela posicao do card. */
.kpi-strip .kpi-card.atencao strong{color:var(--cassiellos-signal-red,#F13C4B)}
.kpi-strip .kpi-card.info strong{color:var(--cassiellos-flow-cyan,#22C7F2)}

/* ------------------------------------------------------------------- blocos */

/*
 * `.bloco` substitui `.dash-card` no fluxo operacional: mesma superficie, metade do padding, e um
 * cabecalho de UMA linha em vez de tres (eyebrow + titulo + subtitulo empilhados custavam 70px
 * por secao, e havia cinco secoes).
 */
.bloco{
  background:var(--sf-2);border:1px solid var(--hair);border-radius:var(--r-md);
  padding:var(--e-4);margin:0 0 var(--e-4);
}
.bloco-head{
  display:flex;align-items:center;gap:var(--e-3);
  margin:0 0 var(--e-3);
}
.bloco-head h2{margin:0;font-size:13px;font-weight:650;letter-spacing:-.01em;color:var(--txt)}
.bloco-meta{font-size:11.5px;color:var(--txt-3);margin-left:auto}
.bloco-head .input-mini{
  background:var(--sf-3);border:1px solid var(--hair);border-radius:8px;
  color:var(--txt-2);font-size:11px;font-family:inherit;padding:4px 8px;
}
.btn-mini{
  margin-left:auto;width:24px;height:24px;display:grid;place-items:center;
  background:var(--sf-3);border:1px solid var(--hair);border-radius:7px;
  color:var(--txt-2);font-size:12px;cursor:pointer;
}
.btn-mini:hover{border-color:var(--hair-forte);color:var(--txt)}

/*
 * ESTADO VAZIO = UMA LINHA. Nunca uma caixa.
 *
 * A caixa de 90px dizendo "Nenhuma entrega prevista para hoje" gritava a ausencia de informacao no
 * mesmo volume que a presenca dela. Uma linha diz a mesma coisa e devolve a tela para o que
 * existe.
 */
.linha-vazia{
  margin:0;padding:2px 0;font-size:12px;color:var(--txt-3);background:none;border:0;
}
.linha-ok{color:#3FCF8E}

/* Sem alerta, a secao inteira encolhe — cabecalho junto. */
.bloco-atencao.vazia{padding:var(--e-3) var(--e-4)}
.bloco-atencao.vazia .bloco-head{margin-bottom:2px}

.bloco-hoje .today-summary-list{display:flex;flex-direction:column;gap:1px}
.today-item{
  display:flex;align-items:baseline;gap:var(--e-3);
  padding:5px 0;font-size:12.5px;color:var(--txt);border-bottom:1px solid var(--hair);
}
.today-item:last-child{border-bottom:0}
.today-item span{margin-left:auto;font-size:11px;color:var(--txt-3)}
.today-item.done b{text-decoration:line-through;color:var(--txt-3)}
.link-btn{background:none;border:0;color:var(--cassiellos-system-blue,#246BFF);font-size:11.5px;cursor:pointer;padding:0}

/* ------------------------------------------------------ producao em linhas */

/*
 * Uma linha por cliente. As colunas sao fixas para que nome, status e tarefa alinhem verticalmente
 * — e o alinhamento e o que permite ler sete clientes de relance, que era o objetivo.
 */
.producao-tabela{display:flex;flex-direction:column}
.prod-linha{
  display:grid;grid-template-columns:minmax(120px,1.1fr) 96px minmax(120px,1.4fr) minmax(90px,.8fr) 16px 24px;
  align-items:center;gap:var(--e-3);
  padding:6px 0;border-bottom:1px solid var(--hair);font-size:12.5px;
}
.prod-linha:last-child{border-bottom:0}
.prod-cliente{color:var(--txt);font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prod-tarefa{color:var(--txt-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prod-quem{color:var(--txt-3);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prod-alerta{color:var(--cassiellos-signal-red,#F13C4B);font-size:12px;text-align:center}
.prod-acao{
  width:24px;height:24px;display:grid;place-items:center;
  background:none;border:1px solid transparent;border-radius:6px;
  color:var(--txt-3);font-size:12px;cursor:pointer;
}
button.prod-acao:hover{border-color:var(--hair-forte);color:var(--txt)}

/* Badge de status: pequena, e a cor diz o estado — nao a posicao. */
.badge{
  display:inline-block;text-align:center;font-size:10px;font-weight:600;letter-spacing:.3px;
  padding:2px 7px;border-radius:5px;white-space:nowrap;
  border:1px solid var(--hair);background:var(--sf-3);color:var(--txt-2);
}
.badge-ok{color:#3FCF8E;border-color:rgba(63,207,142,.28);background:rgba(63,207,142,.08)}
.badge-alerta{color:var(--cassiellos-signal-red,#F13C4B);border-color:rgba(241,60,75,.3);background:rgba(241,60,75,.08)}
.badge-neutro{color:var(--txt-3)}

/* ============================================================ WORKSPACE */

.dashboard-workspace{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--e-5);align-items:start}
.dashboard-rail{display:flex;flex-direction:column;gap:var(--e-5)}
.dashboard-rail .dash-card{margin-bottom:0}
.dashboard-main-column .dash-card{margin-bottom:0}

.integration-list{display:flex;flex-direction:column;gap:var(--e-3)}
.integration-list>div{
  display:flex;align-items:center;gap:var(--e-3);
  font-size:12.5px;color:var(--txt-2);
  padding:var(--e-2) 0;border-bottom:1px solid var(--hair);
}
.integration-list>div:last-child{border-bottom:0;padding-bottom:0}
.integration-list>div>span{width:18px;color:var(--txt-3);text-align:center}
.integration-list b{margin-left:auto;font-size:11px;font-weight:600}

.new-project{
  display:flex;align-items:center;gap:var(--e-3);text-align:left;
  padding:var(--e-4) var(--e-5);border-radius:var(--r-md);
  font-size:13px;font-weight:600;
}
.new-project small{display:block;font-size:10.5px;font-weight:400;opacity:.8;margin-top:2px}
.new-project b{margin-left:auto;font-weight:400;opacity:.8}

.update-card{display:flex;flex-direction:column;gap:var(--e-4)}
.update-actions{display:flex;align-items:center;gap:var(--e-3);flex-wrap:wrap}
.version-badge{
  font-size:10.5px;font-weight:600;color:var(--txt-2);
  background:var(--sf-3);border:1px solid var(--hair);border-radius:6px;padding:4px 9px;
}

/* ============================================================ botões e estados */

button.secondary,.secondary{
  background:var(--sf-3);border:1px solid var(--hair);color:var(--txt-2);
  border-radius:var(--r-sm);padding:8px 14px;font-size:12px;font-weight:600;cursor:pointer;
  transition:border-color .12s ease,color .12s ease;
}
button.secondary:hover,.secondary:hover{border-color:var(--hair-forte);color:var(--txt)}

.text-button{background:none;border:0;color:var(--txt-3);font-size:11.5px;font-weight:600;cursor:pointer}
.text-button:hover:not(:disabled){color:var(--txt-2)}

/* Vazio é um estado do sistema, não um erro. Discreto, centrado, e dizendo o que aconteceu. */
.planning-empty{
  padding:var(--e-6);text-align:center;color:var(--txt-3);font-size:12.5px;
  background:var(--sf-3);border-radius:var(--r-md);
}

/* ============================================================ tipografia geral */

#dashboardPage{font-size:13px}
#dashboardPage h1,#dashboardPage h2,#dashboardPage h3{font-family:var(--cassiellos-font-display,'Inter Tight',Inter,Arial,sans-serif)}

/* ============================================================ responsivo */

/*
 * Desktop é a prioridade desta rodada. O que segue existe para NÃO piorar o mobile: a sidebar
 * continua com o comportamento de gaveta que já existia em `app.css`, e o que muda aqui é só o que
 * quebraria — colunas fixas que não cabem.
 */
@media(max-width:1180px){
  .dashboard-kpis{grid-template-columns:repeat(2,1fr)}
  .dashboard-workspace{grid-template-columns:minmax(0,1fr)}
  main{padding:var(--e-6) var(--e-6) var(--e-8)}
}
@media(max-width:900px){
  .topbar{grid-template-columns:1fr auto;row-gap:var(--e-4)}
  .topbar-center{grid-column:1/-1;justify-content:flex-start}
  .global-search{width:100%}
}
@media(max-width:680px){
  .dashboard-kpis{grid-template-columns:1fr}
  .topbar h1{font-size:20px}
  main{padding:var(--e-5) var(--e-4) var(--e-6)}
}

/* ------------------------------------------------------------------ ruido */

/*
 * O rodape institucional (copyright, "Desenvolvido por", link tecnico do n8n) ficava fixo na
 * altura da operacao, disputando espaco com a producao do dia. Ele nao some — desce para o fim do
 * fluxo, discreto. Informacao institucional nao concorre com o trabalho.
 */
body>footer,main>footer,#dashboardPage>footer{
  margin-top:var(--e-6);padding-top:var(--e-3);border-top:1px solid var(--hair);
  font-size:10.5px;color:var(--txt-3);opacity:.65;
}
body>footer:hover,main>footer:hover,#dashboardPage>footer:hover{opacity:1}

/* A tela de login mostra a marca em tamanho de apresentacao; a proporcao continua vindo do
   `viewBox`, so a largura muda. */
.auth-brand .brand-logo{width:min(260px,54vw);height:auto;display:block;margin:0 auto}