/* dist/css/quadro.css — sub-aba Quadro da Visão geral (2.16.0) e a linha do tempo na gaveta de conversa, quando aberta
   pelo Quadro. As cores das etapas são as do Quadro da extensão. */

.qd-topo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem 1rem; margin-bottom: .75rem; }
.qd-resumo { font-size: calc(.875rem * var(--aia-text-scale, 1)); color: var(--shell-muted); }
.qd-resumo b { color: var(--tblr-body-color); }
.qd-sem { color: var(--tblr-danger); font-weight: 600; }
.qd-acoes { display: flex; align-items: center; gap: .5rem; }
.qd-erro { margin-bottom: .5rem; font-size: calc(.8125rem * var(--aia-text-scale, 1)); color: var(--tblr-danger); }
.qd-aviso { margin-bottom: .5rem; padding: .4rem .65rem; font-size: calc(.8125rem * var(--aia-text-scale, 1)); border-radius: 6px; color: var(--tblr-body-color); background: var(--tblr-warning-lt, rgba(247, 103, 7, .1)); }
.qd-vazio-tela { padding: 1rem 0; color: var(--shell-muted); }

.qd-colunas { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(190px, 1fr); gap: .65rem; overflow-x: auto; padding-bottom: .5rem; }
.qd-col { display: flex; flex-direction: column; min-width: 0; max-height: calc(100vh - 260px); background: var(--tblr-bg-surface-secondary, rgba(var(--tblr-body-color-rgb), .03)); border: 1px solid var(--shell-border); border-top: 3px solid var(--etapa); border-radius: 8px; }
.qd-cab { display: flex; align-items: center; gap: .4rem; padding: .5rem .65rem; font-size: calc(.8125rem * var(--aia-text-scale, 1)); font-weight: 600; }
.qd-ponto { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--etapa); }
.qd-rot { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qd-n { color: var(--shell-muted); font-variant-numeric: tabular-nums; }
/* minmax(0, 1fr): nome comprido ganha reticências em vez de alargar a coluna (e abrir rolagem para o lado) */
.qd-itens { overflow-y: auto; padding: 0 .5rem .5rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: .375rem; align-content: start; }
.qd-card { display: flex; align-items: center; gap: .5rem; width: 100%; min-width: 0; padding: .4rem .5rem; text-align: left; color: inherit; background: var(--tblr-bg-surface); border: 1px solid var(--shell-border); border-radius: 6px; cursor: pointer; }
.qd-card:hover { border-color: var(--etapa); }
.qd-card:hover .qd-nome { color: var(--tblr-primary); }
.qd-av { position: relative; flex: none; display: grid; place-items: center; width: 28px; height: 28px; overflow: hidden; border-radius: 50%; background: var(--tblr-primary-lt); }
.qd-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.qd-ini { font-size: calc(.6875rem * var(--aia-text-scale, 1)); font-weight: 600; color: var(--tblr-primary); }
.qd-txt { min-width: 0; display: flex; flex-direction: column; }
.qd-nome { font-size: calc(.8125rem * var(--aia-text-scale, 1)); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qd-det { font-size: calc(.75rem * var(--aia-text-scale, 1)); color: var(--shell-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qd-sem-linha { font-size: calc(.6875rem * var(--aia-text-scale, 1)); font-weight: 600; color: var(--tblr-danger); }
/* retorno combinado ("me lembra" da extensão, 2.17.0): o roxo da extensão */
.qd-retorno { font-size: calc(.6875rem * var(--aia-text-scale, 1)); font-weight: 600; color: #7048e8; }
[data-bs-theme="dark"] .qd-retorno { color: #b197fc; }
.qd-espera { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: var(--tblr-danger); vertical-align: middle; }
.qd-vazio, .qd-mais { padding: .25rem 0; font-size: calc(.75rem * var(--aia-text-scale, 1)); color: var(--shell-muted); text-align: center; }
.qd-nota { margin: .5rem 0 0; font-size: calc(.75rem * var(--aia-text-scale, 1)); color: var(--shell-muted); max-width: 70rem; }

/* etapas: as mesmas cores do Quadro da extensão */
.qd-sem_resposta { --etapa: var(--tblr-gray-500, #868e96); }
.qd-conversando { --etapa: var(--tblr-azure, #4299e1); }
.qd-interessado { --etapa: var(--tblr-blue, #206bc4); }
.qd-agendado { --etapa: var(--tblr-green, #2fb344); }
.qd-veio { --etapa: var(--tblr-teal, #0ca678); }
.qd-faltou { --etapa: var(--tblr-red, #d63939); }
.qd-esfriando { --etapa: var(--tblr-orange, #f76707); }
.qd-aluno { --etapa: var(--tblr-purple, #ae3ec9); }

/* barras de rolagem discretas, como no Quadro da extensão (Chrome e Edge). O Tabler põe scrollbar-color no painel e
   ela é herdada; com ela, o Chrome ignora ::-webkit-scrollbar. Aqui volta a auto. */
.qd-colunas, .qd-itens, .cd-jornada { scrollbar-color: auto; scrollbar-width: auto; }
.qd-colunas::-webkit-scrollbar { height: 6px; }
.qd-itens::-webkit-scrollbar, .cd-jornada::-webkit-scrollbar { width: 4px; }
.qd-colunas::-webkit-scrollbar-track, .qd-itens::-webkit-scrollbar-track, .cd-jornada::-webkit-scrollbar-track { background: transparent; }
.qd-colunas::-webkit-scrollbar-thumb, .qd-itens::-webkit-scrollbar-thumb, .cd-jornada::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--shell-muted) 35%, var(--shell-border)); border-radius: 999px; }
.qd-colunas:hover::-webkit-scrollbar-thumb, .qd-itens:hover::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--shell-muted) 75%, var(--shell-border)); }

/* linha do tempo na gaveta de conversa (aberta pelo Quadro) */
.cd-jornada { padding: .65rem 1rem; border-bottom: 1px solid var(--shell-border); max-height: 34vh; overflow-y: auto; }
.cd-jornada-cab { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .4rem; }
.qd-etapa { color: var(--etapa); background: color-mix(in srgb, var(--etapa) 14%, transparent); font-weight: 600; }
.cd-jornada-lista { list-style: none; margin: 0 0 0 .25rem; padding: 0 0 0 .9rem; border-left: 2px solid var(--shell-border); font-size: calc(.8125rem * var(--aia-text-scale, 1)); }
.cd-ev { position: relative; display: flex; gap: .5rem; padding: .125rem 0; }
.cd-ev::before { content: ""; position: absolute; left: calc(-.9rem - 6px); top: .45rem; width: 10px; height: 10px; border-radius: 50%; background: var(--shell-border); border: 2px solid var(--tblr-bg-surface); }
.cd-ev-aula.sit-compareceu::before, .cd-ev-aluno::before { background: var(--tblr-green, #2fb344); }
.cd-ev-aula.sit-faltou::before, .cd-ev-aula.sit-remarcou::before { background: var(--tblr-red, #d63939); }
.cd-ev-aula.sit-marcada::before { background: var(--tblr-blue, #206bc4); }
.cd-ev-retorno::before { background: #7048e8; }
.cd-ev-pendente::before { background: var(--tblr-bg-surface); border-color: var(--tblr-orange, #f76707); }
.cd-ev-pendente .cd-ev-txt { color: var(--tblr-orange, #f76707); font-weight: 600; }
.cd-ev-data { flex: none; width: 2.6rem; color: var(--shell-muted); font-variant-numeric: tabular-nums; }
.cd-ev-txt { min-width: 0; overflow-wrap: anywhere; }
/* painel v3: "parou depois do preço" no cartão Esfriando / Sem resposta (lead_parada das 03:00) */
.qd-retorno.qd-parou { display: block; color: var(--tblr-orange); font-weight: 500; }