/* ------------------------------------------------------------------ */
/* Obrify Design System — Obras (listagem)                             */
/*                                                                      */
/* Terceira tela migrada (as duas primeiras foram Atividades e          */
/* Cronograma — ver obrify_atividades_theme.css/obrify_gantt_theme.css).*/
/* Escopado por `.obrify-theme-lab` (ver                                */
/* ApplicationHelper#obrify_theme_lab?, que agora cobre também           */
/* projects#index) e consome só tokens --ob-*.                          */
/*                                                                      */
/* Escopo desta rodada: só a LISTAGEM (o grid de cards + toolbar de      */
/* filtros). O formulário de criar/editar e o show ainda são legado —    */
/* não usam nenhuma classe daqui.                                       */
/*                                                                      */
/* Reaproveitamento: o cabeçalho (.ob-page-canvas/.ob-page-title) e a    */
/* toolbar (.ob-table-card/.ob-toolbar/.ob-toolbar-form/                */
/* .ob-toolbar-search/.ob-toolbar-select/.ob-empty-state) já existem em  */
/* obrify_atividades_theme.css e funcionam aqui sem nenhuma regra nova — */
/* só o CARD DE OBRA (.ob-project-*) é componente novo, primeiro         */
/* "card de catálogo" do Design System.                                 */
/*                                                                      */
/* Precisa carregar depois de obrify_atividades_theme.css (mesma regra  */
/* de cascata: depois do core/demo do Vuexy) — ver _head.html.erb.      */
/* ------------------------------------------------------------------ */

/* ---------- Indicadores do cabeçalho ----------------------------------- */
/* Régua "Total / Ativas / Em Andamento / Não Iniciadas / Paralizadas /
   Concluídas" distribuída pelo vão entre o título e o botão "+ Nova
   Obra". Os de status (e o Total) são <button>s que filtram a listagem
   (mesmo estado do select da toolbar — ver project_filter_controller.js);
   "Ativas" é um <div> passivo.

   flex-basis 0 (não auto) de propósito: com wrap no pai (.ob-header-row),
   a decisão de quebra de linha usa o tamanho HIPOTÉTICO (não encolhido)
   de cada item — com basis auto o grupo mediria a régua inteira e
   empurraria o botão para baixo do título antes mesmo de tentar encolher;
   com basis 0 o grupo "nasce" sem largura, sempre cabe na linha, e cresce
   só no espaço que sobrar entre título e botão. */
.obrify-theme-lab .ob-projects-header-indicators {
  flex: 1 1 0%;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-evenly;
  gap: var(--ob-space-4);
}

.obrify-theme-lab .ob-projects-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--ob-space-4) var(--ob-space-12);
  border: none;
  border-radius: var(--ob-radius-sm);
  background: transparent;
  transition: background-color var(--ob-transition-fast);
}

/* Só os indicadores-filtro (<button>) reagem a hover/clique; o passivo
   ("Ativas", <div>) não vira alvo de cursor. */
.obrify-theme-lab button.ob-projects-indicator {
  cursor: pointer;
}

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

.obrify-theme-lab .ob-projects-indicator.is-active {
  background-color: var(--ob-card-inner);
}

.obrify-theme-lab .ob-projects-indicator.is-empty .ob-projects-indicator-value {
  color: var(--ob-text-muted);
}

.obrify-theme-lab .ob-projects-indicator-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ob-text-label);
  white-space: nowrap;
}

/* Número no padrão de valor de KPI do Design System (Barlow Condensed,
   peso alto, tabular) — versão menor que o .ob-kpi-value de 30px dos
   cards de Atividades, por morar numa linha de cabeçalho. */
.obrify-theme-lab .ob-projects-indicator-value {
  font-family: var(--ob-font-display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--ob-text-primary);
  font-variant-numeric: tabular-nums;
}

.obrify-theme-lab .ob-projects-indicator-value.ob-projects-indicator-info    { color: var(--ob-info); }
.obrify-theme-lab .ob-projects-indicator-value.ob-projects-indicator-neutral { color: var(--ob-text-secondary); }
.obrify-theme-lab .ob-projects-indicator-value.ob-projects-indicator-danger  { color: var(--ob-danger); }
.obrify-theme-lab .ob-projects-indicator-value.ob-projects-indicator-success { color: var(--ob-success); }

.obrify-theme-lab .ob-project-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--ob-card);
  border: 1px solid var(--ob-border);
  border-radius: var(--ob-radius);
  box-shadow: var(--ob-shadow);
  overflow: hidden;
  transition: box-shadow var(--ob-transition), border-color var(--ob-transition);
}

/* Obra atualmente selecionada (o "Contexto da Obra" da navbar): antes uma
   borda verde Bootstrap solta (border-success), agora o mesmo anel de
   destaque usado em elementos de foco/seleção no resto do sistema
   (--ob-primary + --ob-primary-soft). O chip "Selecionada" no rodapé (ver
   .ob-project-current-chip) reforça a mesma informação em texto, não só
   em cor. */
.obrify-theme-lab .ob-project-card-current {
  border-color: var(--ob-primary);
  box-shadow: 0 0 0 3px var(--ob-primary-soft);
}

/* Obra inativa (condição comercial/licenciamento, ver Project#inactive? —
   independente do status operacional): o card continua na listagem e
   todo o texto/métricas seguem 100% legíveis. O fundo muda para a
   superfície "rebaixada" (mesma usada em áreas neutras/desabilitadas do
   Design System) e a capa (elemento decorativo) é dessaturada/esmaecida,
   para o usuário reconhecer de imediato que a obra está "fora de
   operação" — sem depender só de um badge no canto para essa leitura. */
.obrify-theme-lab .ob-project-card-inactive {
  background-color: var(--ob-surface-secondary);
  box-shadow: none;
}

.obrify-theme-lab .ob-project-card-inactive .ob-project-cover-img,
.obrify-theme-lab .ob-project-card-inactive .ob-project-cover-placeholder {
  filter: grayscale(85%) opacity(0.5);
}

.obrify-theme-lab .ob-project-card-inactive .ob-project-name {
  color: var(--ob-text-secondary);
}

.obrify-theme-lab .ob-project-cover {
  position: relative;
  height: 150px;
  flex-shrink: 0;
  background-color: var(--ob-surface-secondary);
}

/* Sombreado sutil no topo da capa: reforço para o selo de status nunca
   ficar sem contraste, mesmo sobre fotos muito claras (silo metálico,
   fachada clara etc.) — técnica padrão de selo-sobre-mídia. Não depende
   da cor da foto por baixo, então funciona com qualquer capa. */
.obrify-theme-lab .ob-project-cover::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 64px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0));
  pointer-events: none;
  z-index: 1;
}

.obrify-theme-lab .ob-project-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Substitui o fallback antigo (path de imagem hardcoded
   ../../assets/img/elements/31.png) por um placeholder desenhado com
   tokens — sem depender de um arquivo de imagem específico existir. */
.obrify-theme-lab .ob-project-cover-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ob-text-muted);
  font-size: 40px;
}

.obrify-theme-lab .ob-project-status-badge {
  position: absolute;
  top: var(--ob-space-12);
  left: var(--ob-space-12);
  z-index: 2;
}

/* Preenchimento SÓLIDO + texto branco fixo (--ob-status-solid-*, ver
   obrify_tokens.css) em vez dos badges "soft"/translúcidos usados no
   resto do sistema (.ob-badge-info/-danger/-success/-neutral): aqueles
   têm fundo quase transparente, pensado para ficar sobre um card
   opaco — sobre a foto de capa, isso lia como texto colorido solto,
   sumindo contra fachadas claras ou fundos da mesma cor do texto. O
   gradiente de ::before (acima) garante contraste mesmo assim; o
   preenchimento sólido garante legibilidade por si só. */
.obrify-theme-lab .ob-project-status-badge .badge {
  color: #FFFFFF;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.obrify-theme-lab .ob-project-status-badge .ob-badge-neutral  { background-color: var(--ob-status-solid-neutral); }
.obrify-theme-lab .ob-project-status-badge .ob-badge-info     { background-color: var(--ob-status-solid-info); }
.obrify-theme-lab .ob-project-status-badge .ob-badge-danger   { background-color: var(--ob-status-solid-danger); }
.obrify-theme-lab .ob-project-status-badge .ob-badge-success  { background-color: var(--ob-status-solid-success); }

/* Badge "Inativa": mesmo canto oposto (direita) ao selo de status
   (esquerda, .ob-project-status-badge acima), mesma técnica de
   preenchimento sólido + texto branco para legibilidade sobre foto — mas
   cor própria (--ob-status-solid-inactive), fora da paleta de status, para
   os dois selos não competirem/serem confundidos como "mais um status".
   Um pouco menor/mais leve que o badge de status (font-size/padding
   reduzidos) para ler como "discreto" — informação secundária, não a
   principal do card. */
.obrify-theme-lab .ob-project-inactive-badge {
  position: absolute;
  top: var(--ob-space-12);
  right: var(--ob-space-12);
  z-index: 2;
  font-size: 10.5px;
  padding: 0.24em 0.6em;
  background-color: var(--ob-status-solid-inactive);
  color: #FFFFFF;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.obrify-theme-lab .ob-project-body {
  padding: var(--ob-space-16);
  flex: 1 1 auto;
}

.obrify-theme-lab .ob-project-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--ob-text-primary);
  margin-bottom: var(--ob-space-12);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Substitui .list-group/.list-group-item (Bootstrap) por uma lista
   própria — mesma ideia visual, cores/espaçamento vindos dos tokens. */
.obrify-theme-lab .ob-project-metrics {
  list-style: none;
  margin: 0;
  padding: 0;
}

.obrify-theme-lab .ob-project-metrics li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ob-space-8);
  padding: var(--ob-space-8) 0;
  border-bottom: 1px solid var(--ob-divider);
  font-size: 13px;
  color: var(--ob-text-secondary);
}

.obrify-theme-lab .ob-project-metrics li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.obrify-theme-lab .ob-project-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ob-space-8);
  padding: var(--ob-space-12) var(--ob-space-16);
  border-top: 1px solid var(--ob-border);
}

.obrify-theme-lab .ob-project-current-chip {
  display: inline-flex;
  align-items: center;
}

/* Ação rápida "Ativar novamente": só texto + ícone, sem .btn-icon (que
   desenharia uma caixa/borda quadrada) — deliberadamente leve para não
   competir com o botão principal do rodapé. Reset de botão nativo, já que
   é um <button> (button_to) estilizado como link. */
.obrify-theme-lab .ob-project-reactivate-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--ob-text-secondary);
  cursor: pointer;
}

.obrify-theme-lab .ob-project-reactivate-link i {
  font-size: 14px;
}

.obrify-theme-lab .ob-project-reactivate-link:hover,
.obrify-theme-lab .ob-project-reactivate-link:focus-visible {
  color: var(--ob-primary);
  text-decoration: underline;
}

/* Cursor apontando "clicável" na área livre do card quando o duplo-clique
   de seleção está ativo (ver project_card_controller.js) — só o cursor,
   sem sombra/fundo de hover, para o card não parecer um botão gigante. */
.obrify-theme-lab .ob-project-card-selectable {
  cursor: pointer;
}