/* ============================================================
   TAREFAS — "De quem é a bola"
   Faixa de Foco + Quadro por bola (Minha vez / Aguardando / Prazo futuro)
   + popover de aguardando + cabeçalho do Panorama.
   Usa os tokens de tarefas-redesign.css (--bg, --text, --positive, etc.)
   ============================================================ */

/* ── FAIXA DE FOCO ─────────────────────────────────────────── */
.foco-band{
  background:var(--bg-elev);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px 16px;
  margin:0 0 16px;
}
.foco-head{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap;}
.foco-badge{
  display:inline-flex;align-items:center;gap:7px;
  font-size:13.5px;font-weight:600;color:var(--text);
}
.foco-badge svg{color:var(--text-2);}
.foco-sub{font-size:12px;color:var(--text-3);}
.foco-rows{display:flex;flex-direction:column;gap:6px;}
.foco-row{
  display:flex;align-items:center;gap:11px;
  padding:9px 12px;border-radius:var(--radius-sm);
  cursor:pointer;transition:background var(--dur-fast) var(--ease-out);
  border:1px solid transparent;
}
.foco-row:hover{background:var(--bg-soft);}
.foco-ic{flex:none;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;}
.foco-main{min-width:0;flex:1;}
.foco-title{font-size:13.5px;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.foco-cli{font-weight:400;color:var(--text-2);}
.foco-kicker{font-size:11.5px;color:var(--text-3);margin-top:1px;}
.foco-row.fatal .foco-ic{background:var(--danger-soft);color:var(--danger);}
.foco-row.fatal .foco-kicker{color:var(--danger);}
.foco-row.cobrar .foco-ic{background:var(--accent-soft);color:var(--accent);}
.foco-row.cobrar .foco-kicker{color:color-mix(in oklab,var(--accent) 80%,var(--text));}
.foco-row.vez .foco-ic{background:var(--positive-soft);color:var(--positive);}

/* ── QUADRO POR BOLA ───────────────────────────────────────── */
.bola-board{margin:0 0 18px;}
.bola-board-head{display:flex;align-items:baseline;gap:10px;margin:0 2px 10px;flex-wrap:wrap;}
.bola-board-title{font-size:13.5px;font-weight:600;color:var(--text);}
.bola-board-sub{font-size:12px;color:var(--text-3);}
.bola-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
@media (max-width:900px){.bola-grid{grid-template-columns:1fr;}}

.bola-col{
  background:var(--bg-soft);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:10px 10px 12px;
  min-height:90px;
}
.bola-col.is-empty{background:transparent;border-style:dashed;}
.bola-col-head{display:flex;align-items:center;gap:7px;padding:2px 4px 10px;flex-wrap:wrap;}
.bola-col-dot{width:8px;height:8px;border-radius:50%;flex:none;}
.bola-col-dot.minha{background:var(--positive);}
.bola-col-dot.aguardando{background:var(--accent);}
.bola-col-dot.futuro{background:var(--text-3);}
.bola-col-label{font-size:12.5px;font-weight:600;color:var(--text);}
.bola-col-count{font-size:11.5px;color:var(--text-3);font-variant-numeric:tabular-nums;}
.bola-col-sub{font-size:11px;color:var(--text-3);width:100%;margin-top:-2px;}
.bola-col-empty{font-size:12px;color:var(--text-3);padding:14px 6px;text-align:center;}
.bola-col-list{display:flex;flex-direction:column;gap:8px;}

/* cards reaproveitam .hjc-row (estilizado em tarefas-redesign/v3); ajustes da bola */
.bola-card{background:var(--bg-elev);}
.bola-card .hjc-dot.minha{background:var(--positive);}
.bola-card .hjc-dot.aguardando{background:var(--accent);}
.bola-card .hjc-dot.futuro{background:var(--text-3);}
.bola-dequem{font-size:11px;color:color-mix(in oklab,var(--accent) 75%,var(--text));font-weight:500;}

/* chips de estado no rodapé do card */
.bola-chip-wrap{display:flex;flex-wrap:wrap;gap:4px;min-width:0;align-items:center;}
.bola-chip{
  display:inline-block;font-size:11px;font-weight:600;
  padding:2px 8px;border-radius:999px;white-space:nowrap;
}
.bola-chip.ok{background:var(--positive-soft);color:var(--positive);}
.bola-chip.danger{background:var(--danger-soft);color:var(--danger);}
.bola-chip.warn{background:var(--orange-soft);color:var(--orange);}
.bola-chip.soft{background:var(--bg-soft);color:var(--text-2);border:1px solid var(--border);}
.bola-col--aguardando .bola-card{border-left:2px solid color-mix(in oklab,var(--accent) 55%,transparent);}

/* tag "aguardando" no panorama (linha .task-row) */
.status-b.aguardando{
  background:var(--accent-soft);
  color:color-mix(in oklab,var(--accent) 80%,var(--text));
}

/* cabeçalho do panorama */
.bola-panorama-head{
  display:flex;align-items:baseline;gap:9px;
  margin:6px 2px 10px;padding-top:4px;
  border-top:1px solid var(--border);
}
.bph-title{font-size:13px;font-weight:600;color:var(--text-2);padding-top:12px;}
.bph-count{font-size:11.5px;color:var(--text-3);padding-top:12px;}

/* ── POPOVER MARCAR AGUARDANDO ─────────────────────────────── */
.bola-aguardando-pop{
  position:absolute;z-index:9999;width:248px;
  background:var(--bg-elev);
  border:1px solid var(--border-strong);
  border-radius:var(--radius);
  box-shadow:0 12px 32px rgba(0,0,0,.16);
  padding:13px 14px;
  font-size:13px;color:var(--text);
}
.bap-title{font-size:13.5px;font-weight:600;margin-bottom:10px;}
.bap-label{font-size:11px;color:var(--text-3);margin-bottom:6px;}
.bap-oque{
  width:100%;font-size:13px;padding:7px 9px;margin-bottom:12px;
  border:1px solid var(--border);border-radius:var(--radius-sm);
  background:var(--bg);color:var(--text);box-sizing:border-box;
}
.bap-oque::placeholder{color:var(--text-3);}
.bap-de{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;}
.bap-chip{
  font-size:12px;padding:4px 10px;border-radius:999px;cursor:pointer;
  background:var(--bg-soft);border:1px solid var(--border);color:var(--text-2);
  transition:all var(--dur-fast) var(--ease-out);
}
.bap-chip:hover{border-color:var(--border-strong);}
.bap-chip.on{background:var(--accent-soft);border-color:var(--accent);color:color-mix(in oklab,var(--accent) 80%,var(--text));font-weight:600;}
.bap-row{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--text-2);margin-bottom:13px;}
.bap-row input.bap-dias{
  width:54px;text-align:center;font-size:13px;padding:5px 6px;
  border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg);color:var(--text);
}
.bap-actions{display:flex;justify-content:flex-end;gap:8px;}
.bap-cancel,.bap-ok{font-size:12.5px;padding:6px 12px;border-radius:var(--radius-sm);cursor:pointer;border:1px solid var(--border);}
.bap-cancel{background:transparent;color:var(--text-2);}
.bap-cancel:hover{background:var(--bg-soft);}
.bap-ok{background:var(--text);color:var(--bg-elev);border-color:var(--text);font-weight:600;}
.bap-ok:hover{opacity:.9;}

/* ── QUADRO DE PRODUÇÃO (5 colunas em UMA linha) ───────────────
   IMPORTANTE: precisa vencer #tasks-root .hjc-grid{1fr 1fr 1fr} (ID em
   tarefas-redesign.css). Por isso uso #tasks-root + !important. */
#tasks-root .prod-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  gap:8px;
  align-items:start;
}
/* sempre 5 numa linha só; em telas estreitas (celular) rola na horizontal, nunca quebra */
@media (max-width:760px){
  #tasks-root .prod-grid{
    grid-template-columns:none !important;
    grid-auto-flow:column;
    grid-auto-columns:minmax(170px,80vw);
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    padding-bottom:4px;
  }
  #tasks-root .prod-grid>.hjc-col{scroll-snap-align:start;}
}

/* rótulos das colunas em sentence case (tom calmo, não CAPS) */
#tasks-root .prod-grid .hjc-col-label{text-transform:none;letter-spacing:0;font-size:12.5px;font-weight:600;}

/* faixa de cor no topo de cada coluna — leitura rápida */
#tasks-root .prod-grid .hjc-col{border-top:2px solid var(--border);}
#tasks-root .prod-grid .hjc-col--atrasadas{border-top-color:var(--danger);}
#tasks-root .prod-grid .hjc-col--hoje{border-top-color:var(--orange);}
#tasks-root .prod-grid .hjc-col--amanha{border-top-color:var(--text-3);}
#tasks-root .prod-grid .hjc-col--aguardando{border-top-color:var(--accent);}
#tasks-root .prod-grid .hjc-col--pronto{border-top-color:var(--positive);}

/* colunas vazias ficam discretas (não roubam atenção nem altura) */
#tasks-root .prod-grid .hjc-col.is-empty{opacity:.6;}
#tasks-root .prod-grid .hjc-col.is-empty .hjc-col-empty{padding:9px 6px;font-size:10.5px;}

/* cards de aguardando dentro do quadro herdam o estilo da bola-card */
#tasks-root .prod-grid .hjc-col--aguardando .bola-chip-wrap{margin-top:2px;}

/* ── CARDS NA COLUNA ESTREITA: caber sem vazar e sem scroll lateral ──────
   Aperta margens, mata overflow-x e faz o rodapé (chip + botões) quebrar
   linha em vez de estourar a largura da coluna. */
#tasks-root .prod-grid .hjc-col{padding:8px 6px;}
#tasks-root .prod-grid .hjc-col-head{padding:2px 4px 8px;gap:6px;}
#tasks-root .prod-grid .hjc-col-list{padding:3px 2px;overflow-x:hidden;}
#tasks-root .prod-grid .hjc-row{padding:9px 9px;min-width:0;}
#tasks-root .prod-grid .hjc-meta{padding-left:14px;}
#tasks-root .prod-grid .hjc-foot{
  padding-left:0;
  margin-top:4px;
  flex-wrap:wrap;
  row-gap:6px;
  justify-content:flex-start;
}
#tasks-root .prod-grid .hjc-prazo,
#tasks-root .prod-grid .bola-chip{max-width:100%;}
#tasks-root .prod-grid .hjc-actions{
  opacity:1;            /* sempre visível no quadro */
  flex-wrap:wrap;
  gap:4px;
  margin-left:auto;     /* empurra os botões pra direita; quebram juntos */
}
#tasks-root .prod-grid .hjc-act{padding:4px 6px;font-size:10.5px;gap:3px;}
#tasks-root .prod-grid .hjc-menu-btn{padding:4px 5px;}

/* ── ARRASTAR ENTRE COLUNAS ─────────────────────────────────── */
#tasks-root .prod-grid [data-bola-drag]{cursor:grab;}
#tasks-root .prod-grid .hjc-row.bola-dragging{opacity:.45;cursor:grabbing;}
#tasks-root .prod-grid .hjc-col.drop-over{
  outline:2px dashed var(--accent);
  outline-offset:-2px;
  background:color-mix(in oklab,var(--accent) 8%,#fafafa);
}
#tasks-root .prod-grid .hjc-col.drop-over .hjc-col-empty{color:var(--accent);}

/* ── FAIXA AGUARDANDO (legado — não usada no layout atual) ──── */
.aguardando-sec{
  background:var(--bg-elev);
  border:1px solid var(--border);
  border-left:3px solid var(--accent);
  border-radius:var(--radius);
  padding:12px 14px 14px;
  margin:0 0 16px;
}
.aguardando-head{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap;}
.aguardando-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none;}
.aguardando-title{font-size:13px;font-weight:600;color:var(--text);}
.aguardando-count{font-size:11.5px;color:var(--text-3);font-variant-numeric:tabular-nums;}
.aguardando-cobrar{
  font-size:11px;font-weight:600;padding:1px 8px;border-radius:999px;
  background:var(--danger-soft);color:var(--danger);
}
.aguardando-sub{font-size:11.5px;color:var(--text-3);margin-left:auto;}
.aguardando-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px;
}
.aguardando-grid .bola-card{background:var(--bg-soft);}

/* quadro vazio */
.bola-board--empty{
  display:flex;align-items:center;gap:12px;
  background:var(--bg-soft);border:1px solid var(--border);
  border-radius:var(--radius);padding:16px 18px;
}
.bola-empty-icon{width:30px;height:30px;border-radius:50%;background:var(--positive-soft);color:var(--positive);display:flex;align-items:center;justify-content:center;flex:none;}
.bola-empty-text{font-size:13px;color:var(--text-2);}
.bola-empty-text strong{color:var(--text);}