/* =========================================================
   IMPERSOL — Feature: Obras (estilos via design system)
   Reescreve topbar, stats, filtros, grid, cards e estados
   usando tokens --imp-*. Mantém os mesmos seletores legados
   (.obra-card, .obras-filter-btn, etc) para não tocar no JS.

   Carregar DEPOIS de styles.css para sobrescrever.
   ========================================================= */

/* ---------- Topbar da view ---------- */
#view-obras .obras-topbar {
  padding: var(--imp-space-4) var(--imp-space-5);
  background: rgba(8, 12, 24, .92);
  border-bottom: 1px solid var(--imp-border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

#view-obras .obras-topbar-title {
  font-size: var(--imp-text-2xl);
  font-weight: var(--imp-weight-bold);
  color: var(--imp-text);
  letter-spacing: -.01em;
}

#view-obras .btn-refresh-obras {
  width: 36px;
  height: 36px;
  border-radius: var(--imp-radius-md);
  background: var(--imp-surface);
  border: 1px solid var(--imp-border);
  color: var(--imp-text-muted);
  transition: color var(--imp-duration-fast), background var(--imp-duration-fast), border-color var(--imp-duration-fast);
}

#view-obras .btn-refresh-obras:hover {
  color: var(--imp-brand-400);
  background: rgba(74, 127, 212, .12);
  border-color: rgba(74, 127, 212, .35);
}

/* ---------- Stats strip ---------- */
#view-obras .obras-stats {
  padding: 0 var(--imp-space-5);
  border-bottom: 1px solid var(--imp-border);
  gap: var(--imp-space-1);
}

#view-obras .obras-stat {
  padding: var(--imp-space-3) var(--imp-space-4);
  min-width: 76px;
  gap: var(--imp-space-1);
  border-radius: var(--imp-radius-md);
  transition: background var(--imp-duration-fast);
}

#view-obras .obras-stat:hover {
  background: rgba(74, 127, 212, .05);
}

#view-obras .obras-stat-val {
  font-size: var(--imp-text-3xl);
  font-weight: var(--imp-weight-bold);
  color: var(--imp-text);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

#view-obras .obras-stat-lbl {
  font-size: var(--imp-text-xs);
  font-weight: var(--imp-weight-semibold);
  color: var(--imp-text-dim);
  text-transform: uppercase;
  letter-spacing: .05em;
}

#view-obras .obras-stat.s-realizando .obras-stat-val { color: var(--imp-brand-400); }
#view-obras .obras-stat.s-parado     .obras-stat-val { color: var(--imp-warn); }
#view-obras .obras-stat.s-comecar    .obras-stat-val { color: var(--imp-success); }
#view-obras .obras-stat.s-valor      .obras-stat-val { color: var(--imp-success-soft); }

/* ---------- Filtros (segmented style) ---------- */
#view-obras .obras-filters {
  padding: var(--imp-space-3) var(--imp-space-5);
  border-bottom: 1px solid var(--imp-border);
  gap: var(--imp-space-2);
}

#view-obras .obras-filter-btn {
  padding: 6px 14px;
  min-height: 30px;
  border-radius: var(--imp-radius-full);
  border: 1px solid var(--imp-border);
  background: transparent;
  color: var(--imp-text-muted);
  font-size: var(--imp-text-sm);
  font-weight: var(--imp-weight-medium);
  font-family: var(--imp-font-sans);
  cursor: pointer;
  transition: color var(--imp-duration-fast), background var(--imp-duration-fast), border-color var(--imp-duration-fast);
}

#view-obras .obras-filter-btn:hover {
  color: var(--imp-text);
  border-color: var(--imp-brand-300);
  background: rgba(74, 127, 212, .06);
}

#view-obras .obras-filter-btn.active {
  background: linear-gradient(180deg, #3560ad 0%, #1f3f7e 100%);
  border-color: var(--imp-brand-500);
  color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}

/* ---------- Grid container ---------- */
#view-obras .obras-body {
  padding: var(--imp-space-5);
}

#view-obras .obras-grid {
  gap: var(--imp-space-4);
}

/* ---------- Empty state ---------- */
#view-obras .obras-empty {
  color: var(--imp-text-dim);
  font-size: var(--imp-text-md);
  padding: var(--imp-space-10) var(--imp-space-5);
}

/* ---------- Card base ---------- */
#view-obras .obra-card {
  background: var(--imp-surface);
  border: 1px solid var(--imp-border);
  border-radius: var(--imp-radius-lg);
  padding: var(--imp-space-4) var(--imp-space-4) var(--imp-space-3);
  gap: var(--imp-space-2);
  box-shadow: var(--imp-shadow-xs);
  transition:
    transform var(--imp-duration-normal) var(--imp-ease-out),
    box-shadow var(--imp-duration-normal) var(--imp-ease-out),
    border-color var(--imp-duration-normal) var(--imp-ease-out);
}

#view-obras .obra-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--imp-shadow-md);
  border-color: var(--imp-brand-400);
}

#view-obras .obra-card.oc-parado:hover {
  transform: none;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, .35);
  border-color: var(--imp-warn);
}

#view-obras .obra-card.oc-cancelado:hover {
  transform: none;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, .35);
  border-color: var(--imp-danger);
  opacity: .85;
}

/* Accent bar (barra lateral de fase) */
#view-obras .obra-card::before {
  width: 3px;
  border-radius: var(--imp-radius-lg) 0 0 var(--imp-radius-lg);
}

#view-obras .obra-card.oc-realizando::before { background: var(--imp-brand-400); }
#view-obras .obra-card.oc-parado::before     { background: var(--imp-warn); }
#view-obras .obra-card.oc-comecar::before    { background: var(--imp-success); }
#view-obras .obra-card.oc-pronto::before     { background: var(--imp-text-faint); }
#view-obras .obra-card.oc-cancelado::before  { background: var(--imp-danger); }

/* ---------- Card header (nome + badge) ---------- */
#view-obras .obra-card-header {
  align-items: flex-start;
  gap: var(--imp-space-2);
}

#view-obras .obra-nome {
  font-size: var(--imp-text-lg);
  font-weight: var(--imp-weight-bold);
  color: var(--imp-text);
  line-height: 1.3;
  letter-spacing: -.005em;
}

#view-obras .obra-cliente-sub {
  font-size: var(--imp-text-xs);
  color: var(--imp-text-dim);
  margin-top: 2px;
}

/* ---------- Fase badge (visual semântico) ---------- */
#view-obras .obra-fase-badge {
  font-size: 10px;
  font-weight: var(--imp-weight-bold);
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 3px 8px;
  border-radius: var(--imp-radius-full);
  white-space: nowrap;
  flex-shrink: 0;
  border: 1px solid transparent;
}

#view-obras .obra-fase-badge.fb-realizando {
  background: rgba(74, 127, 212, .15);
  color: var(--imp-brand-400);
  border-color: rgba(74, 127, 212, .35);
}

#view-obras .obra-fase-badge.fb-parado {
  background: var(--imp-warn-bg);
  color: var(--imp-warn-soft);
  border-color: rgba(245, 158, 11, .35);
}

#view-obras .obra-fase-badge.fb-comecar {
  background: var(--imp-success-bg);
  color: var(--imp-success-soft);
  border-color: rgba(34, 197, 94, .35);
}

#view-obras .obra-fase-badge.fb-pronto {
  background: rgba(107, 114, 128, .15);
  color: var(--imp-text-muted);
  border-color: rgba(107, 114, 128, .35);
}

#view-obras .obra-fase-badge.fb-cancelado {
  background: var(--imp-danger-bg);
  color: var(--imp-danger-soft);
  border-color: rgba(239, 68, 68, .35);
}

/* ---------- Responsável ---------- */
#view-obras .obra-responsavel {
  font-size: var(--imp-text-xs);
  color: var(--imp-text-dim);
  gap: var(--imp-space-1);
}

#view-obras .obra-responsavel svg {
  opacity: .55;
}

/* ---------- Chips compactos ---------- */
#view-obras .obra-chip {
  font-size: 10.5px;
  font-weight: var(--imp-weight-medium);
  color: var(--imp-text-muted);
  background: var(--imp-surface-3);
  border: 1px solid var(--imp-border-soft);
  border-radius: var(--imp-radius-sm);
  padding: 3px 7px;
  gap: var(--imp-space-1);
}

#view-obras .obra-chip svg {
  opacity: .7;
}

/* ---------- Barra de progresso ---------- */
#view-obras .card-progress-track {
  height: 4px;
  background: rgba(255, 255, 255, .05);
  border-radius: var(--imp-radius-full);
  overflow: hidden;
}

#view-obras .card-progress-fill {
  height: 100%;
  border-radius: var(--imp-radius-full);
  transition: width var(--imp-duration-slow) var(--imp-ease-out);
}

#view-obras .obra-card.oc-realizando .card-progress-fill { background: var(--imp-brand-400); }
#view-obras .obra-card.oc-parado     .card-progress-fill { background: var(--imp-warn); }
#view-obras .obra-card.oc-comecar    .card-progress-fill { background: var(--imp-success); }
#view-obras .obra-card.oc-pronto     .card-progress-fill { background: var(--imp-text-faint); }
#view-obras .obra-card.oc-cancelado  .card-progress-fill { background: var(--imp-danger); }

/* ---------- Progresso m² ---------- */
#view-obras .obra-m2-row {
  font-size: 10.5px;
  color: var(--imp-text-dim);
  gap: var(--imp-space-2);
}

#view-obras .obra-m2-label {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

#view-obras .obra-m2-pct {
  font-weight: var(--imp-weight-bold);
  color: var(--imp-text-muted);
  min-width: 30px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ---------- Footer (valor + prazo) ---------- */
#view-obras .obra-footer {
  margin-top: var(--imp-space-1);
}

#view-obras .obra-valor {
  font-size: var(--imp-text-md);
  font-weight: var(--imp-weight-bold);
  color: var(--imp-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.005em;
}

#view-obras .obra-dias-rest {
  font-size: var(--imp-text-xs);
  color: var(--imp-text-dim);
  font-variant-numeric: tabular-nums;
}

#view-obras .obra-dias-alert {
  color: var(--imp-warn) !important;
  font-weight: var(--imp-weight-semibold) !important;
}

#view-obras .obra-data-inicio {
  font-size: var(--imp-text-xs);
  color: var(--imp-text-dim);
  font-variant-numeric: tabular-nums;
}

#view-obras .obra-footer-icon {
  opacity: .55;
}

/* ---------- Banner modo demo ---------- */
#view-obras #demo-data-banner {
  background: var(--imp-warn-bg);
  border-bottom: 1px solid rgba(245, 158, 11, .3);
  color: var(--imp-warn-soft);
  font-size: var(--imp-text-sm);
  font-weight: var(--imp-weight-medium);
  padding: var(--imp-space-2) var(--imp-space-4);
}

#view-obras #demo-data-banner button {
  background: rgba(245, 158, 11, .18);
  border: 1px solid rgba(245, 158, 11, .4);
  border-radius: var(--imp-radius-sm);
  color: var(--imp-warn-soft);
  font-family: var(--imp-font-sans);
  font-size: var(--imp-text-xs);
  padding: 4px 10px;
  transition: background var(--imp-duration-fast);
}

#view-obras #demo-data-banner button:hover {
  background: rgba(245, 158, 11, .28);
}

/* ---------- Responsivo ---------- */
@media (max-width: 640px) {
  #view-obras .obras-topbar,
  #view-obras .obras-stats,
  #view-obras .obras-filters,
  #view-obras .obras-body {
    padding-left: var(--imp-space-4);
    padding-right: var(--imp-space-4);
  }
  #view-obras .obras-stat {
    padding: var(--imp-space-3) var(--imp-space-3);
    min-width: 64px;
  }
  #view-obras .obras-stat-val {
    font-size: var(--imp-text-2xl);
  }
}