/* ------------------------------------------------------------------ */
/* Obrify Design System — Planejamento                                 */
/*                                                                      */
/* Sexta tela migrada (as cinco primeiras foram Atividades, Cronograma, */
/* listagem de Obras, RDO e Medição — ver obrify_atividades_theme.css/  */
/* obrify_gantt_theme.css/obrify_projects_theme.css/                    */
/* obrify_facts_theme.css/obrify_measurements_theme.css). Escopado por  */
/* `.obrify-theme-lab` (ver ApplicationHelper#obrify_theme_lab?, que    */
/* agora cobre planning#tasks/#inputs) e consome só tokens --ob-*.      */
/*                                                                      */
/* Cabeçalho, cards de KPI, toolbar de filtro e badges já são           */
/* re-tematizados pelos arquivos irmãos (em especial                    */
/* obrify_atividades_theme.css: .ob-page-canvas/.ob-header-row/         */
/* .ob-kpi-card/.ob-toolbar*/.ob-table-card/.ob-badge*, incluindo a      */
/* variante .ob-badge-warning adicionada lá para este round). Este      */
/* arquivo cobre só o que é específico de Planejamento: o componente de  */
/* acordeão (mestre-detalhe de atividade/insumo → planejamentos), que    */
/* não existe em nenhuma tela anterior, a mini-tabela financeira dentro  */
/* dos cards de KPI, e a linha de total do grid de planejamentos.        */
/*                                                                      */
/* Precisa carregar depois de obrify_measurements_theme.css (mesma       */
/* regra de cascata: depois do core/demo do Vuexy) — ver _head.html.erb. */
/* ------------------------------------------------------------------ */

/* ---------- Acordeão (mestre: atividade/insumo) -------------------- */
/* O core.css do Vuexy fixa cor/fundo do accordion via CSS vars próprias
   (--bs-accordion-*), não pelas --bs-* já remapeadas em obrify_tokens.css
   — por isso precisa de override dedicado aqui, e não "vem de graça" como
   .card/.btn/.table. */
.obrify-theme-lab .accordion-item {
  background-color: var(--ob-card);
  border-color: var(--ob-border);
  color: var(--ob-text-primary);
}

.obrify-theme-lab .accordion-item:first-of-type,
.obrify-theme-lab .accordion-item:first-of-type .accordion-button {
  border-top-left-radius: var(--ob-radius);
  border-top-right-radius: var(--ob-radius);
}

.obrify-theme-lab .accordion-item:last-of-type {
  border-bottom-left-radius: var(--ob-radius);
  border-bottom-right-radius: var(--ob-radius);
}

.obrify-theme-lab .accordion-button {
  background-color: var(--ob-card);
  color: var(--ob-text-primary);
  font-weight: 500;
}

.obrify-theme-lab .accordion-button:hover {
  background-color: var(--ob-card-hover);
}

/* Nesta tela os itens já nascem expandidos (aria-expanded="true" fixo nos
   parciais _tasks.html.erb/_inputs.html.erb — não é um estado transitório
   de clique) — por isso :not(.collapsed) NÃO pode recolorir o texto para
   --ob-primary como em outros acordeões: isso tingiria de verde a linha
   inteira (código, quantidade, preço) permanentemente em todo item,
   prejudicando a leitura dos valores. Só o fundo muda, para sinalizar
   "conteúdo aberto abaixo" sem competir com os dados. */
.obrify-theme-lab .accordion-button:not(.collapsed) {
  background-color: var(--ob-card-inner);
  color: var(--ob-text-primary);
  box-shadow: inset 0 -1px 0 var(--ob-border);
}

.obrify-theme-lab .accordion-button:focus {
  box-shadow: none;
}

/* Caret: a SVG do Bootstrap traz a cor do traço fixa no data-URI (não dá
   para herdar currentColor), por isso precisa de uma cópia por estado/tema
   — mesmo racional de outros valores "hardcoded por necessidade técnica"
   já documentados no projeto (ex.: fundo branco fixo dos canvases de
   assinatura em obrify_facts_theme.css). Cor neutra = --ob-text-secondary
   de cada tema; cor expandido = --ob-primary (igual em claro e escuro,
   dispensa variante dark própria). */
.obrify-theme-lab .accordion-button::after {
  background-image: url("data:image/svg+xml,%3csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5 7.5L10 12.5L15 7.5' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
}

.obrify-theme-lab .accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5 7.5L10 12.5L15 7.5' stroke='%2358B85A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
}

.obrify-theme-lab[data-obrify-theme="dark"] .accordion-button::after {
  background-image: url("data:image/svg+xml,%3csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5 7.5L10 12.5L15 7.5' stroke='%23CDD2CE' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
}

/* Corpo do acordeão (detalhe: grid de planejamentos + formulário inline):
   tom "elevado dentro do card", mesma superfície de .ob-toolbar. */
.obrify-theme-lab .accordion-body {
  background-color: var(--ob-card-inner);
  color: var(--ob-text-secondary);
}

/* ---------- Linha de total do grid de planejamentos ----------------- */
/* Equivalente ao .ob-table-total-row de Medição, mas para o grid feito
   com row/col do Bootstrap (não uma <table>) — mesmo critério visual. */
.obrify-theme-lab .ob-plan-total-row {
  border-top: 1px solid var(--ob-border);
  padding-top: var(--ob-space-8);
  margin-top: var(--ob-space-4);
  font-weight: 600;
}

/* Formulário inline de novo planejamento: mesma superfície "elevada" dos
   chips de metadado, no lugar do bg-light-subtle fixo do Bootstrap. */
.obrify-theme-lab .ob-plan-inline-form {
  background-color: var(--ob-card);
  border: 1px solid var(--ob-border);
  border-radius: var(--ob-radius-sm);
}

/* Variante de erro (validação do inline form falhou): substitui
   bg-danger-subtle, que não é remapeado pelos tokens --ob-* (é uma
   utility class do Bootstrap resolvida em build-time) e por isso ficava com
   vermelho fixo, sem responder ao dark mode — mesmo tom "soft" de
   --ob-danger já usado em .ob-declaration-box. */
.obrify-theme-lab .ob-plan-inline-form-danger {
  background-color: color-mix(in srgb, var(--ob-danger) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--ob-danger) 30%, transparent);
  border-radius: var(--ob-radius-sm);
}

/* ---------- Mini-tabela financeira dentro do card de KPI ------------- */
/* Usada pelos cards "Financeiro" (Atividades) e "Planejamento por tipo de
   insumo"/"Financeiro" (Insumos/Desembolso) — rótulo + valor, com linha de
   total em destaque. Substitui a tabela branca sobre fundo bg-primary. */
.obrify-theme-lab .ob-kpi-table {
  width: 100%;
  font-size: 13px;
}

.obrify-theme-lab .ob-kpi-table thead th {
  border: none;
  color: var(--ob-text-secondary);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding-bottom: var(--ob-space-8);
}

.obrify-theme-lab .ob-kpi-table tbody td {
  color: var(--ob-text-primary);
  border-color: var(--ob-border);
  padding: var(--ob-space-8) 0;
}

.obrify-theme-lab .ob-kpi-table tfoot td {
  border-top: 1px solid var(--ob-border);
  color: var(--ob-text-primary);
  font-weight: 700;
  padding-top: var(--ob-space-12);
}

/* Linha clicável (drill-down por insumo dentro de um tipo, card
   "Planejamento por tipo de insumo") — mesmo hover de linha de tabela do
   resto do sistema (--ob-table-row-hover), só reaproveitado aqui porque
   .ob-kpi-table não é a tabela principal (.table) que já herda esse hover
   globalmente. */
.obrify-theme-lab .ob-kpi-table-row-clickable {
  cursor: pointer;
}

.obrify-theme-lab .ob-kpi-table-row-clickable:hover td {
  background-color: var(--ob-table-row-hover);
}