/* ==========================================================
   IMPERSOL — Serviços (design system)
   Seletores: .sv-*, .svd-*, .sv-kpi-*, .sv-card-*
   ========================================================== */

/* ── KPI strip ── */
.sv-kpi-strip {
  display: flex;
  gap: var(--imp-space-3);
  padding: var(--imp-space-3) var(--imp-space-4);
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--imp-border);
}
.sv-kpi {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  min-width: 64px;
}
.sv-kpi-val {
  font-size: var(--imp-text-xl);
  font-weight: var(--imp-weight-bold);
  color: var(--imp-text);
  line-height: 1;
}
.sv-kpi-val.brand   { color: var(--imp-brand-400); }
.sv-kpi-val.success { color: var(--imp-success); }
.sv-kpi-val.warn    { color: var(--imp-warn); }
.sv-kpi-val.danger  { color: var(--imp-danger); }
.sv-kpi-lbl {
  font-size: var(--imp-text-xs);
  color: var(--imp-text-muted);
  white-space: nowrap;
}

/* ── Service card ── */
.sv-card {
  background: var(--imp-surface);
  border: 1px solid var(--imp-border);
  border-radius: var(--imp-radius-md);
  padding: var(--imp-space-4);
  margin: 0 var(--imp-space-3) var(--imp-space-2);
  cursor: pointer;
  transition: border-color var(--imp-duration-fast), transform var(--imp-duration-fast), box-shadow var(--imp-duration-fast);
}
.sv-card:hover {
  border-color: var(--imp-brand-border);
  transform: translateY(-1px);
  box-shadow: var(--imp-shadow-sm);
}
.sv-card.urgente { border-left: 3px solid var(--imp-danger); }
.sv-card.alta    { border-left: 3px solid var(--imp-warn); }

/* ── Card top row ── */
.sv-card-top {
  display: flex;
  align-items: flex-start;
  gap: var(--imp-space-2);
  margin-bottom: var(--imp-space-2);
}
.sv-card-id {
  font-size: var(--imp-text-xs);
  color: var(--imp-text-faint);
  font-family: var(--imp-font-mono, monospace);
  flex-shrink: 0;
  padding-top: 2px;
}
.sv-card-nome {
  flex: 1;
  font-size: var(--imp-text-md);
  font-weight: var(--imp-weight-semibold);
  color: var(--imp-text);
  min-width: 0;
}
.sv-card-obra {
  font-size: var(--imp-text-xs);
  color: var(--imp-text-muted);
  margin-bottom: var(--imp-space-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sv-card-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--imp-radius-full);
  font-size: var(--imp-text-xs);
  font-weight: var(--imp-weight-medium);
}
.sv-card-badge.planejado   { background: var(--imp-surface-3);   color: var(--imp-text-muted); }
.sv-card-badge.em_execucao { background: var(--imp-brand-bg);    color: var(--imp-brand-400); }
.sv-card-badge.concluido   { background: var(--imp-success-bg);  color: var(--imp-success-soft); }
.sv-card-badge.atrasado    { background: var(--imp-danger-bg);   color: var(--imp-danger-soft); }

/* ── Metrics row ── */
.sv-card-metrics {
  display: flex;
  gap: var(--imp-space-4);
  margin-top: var(--imp-space-2);
}
.sv-card-metric {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.sv-card-metric .val {
  font-size: var(--imp-text-md);
  font-weight: var(--imp-weight-bold);
  color: var(--imp-text);
}
.sv-card-metric .lbl {
  font-size: var(--imp-text-xs);
  color: var(--imp-text-muted);
}

/* ── Prazo chip ── */
.sv-card-prazo {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--imp-text-xs);
  color: var(--imp-text-muted);
  margin-top: var(--imp-space-2);
}
.sv-prazo-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--imp-success);
  flex-shrink: 0;
}
.sv-prazo-dot.atrasado { background: var(--imp-danger); }
.sv-prazo-dot.proximo  { background: var(--imp-warn); }

/* ── Detail header ── */
.svd-topbar {
  display: flex;
  align-items: center;
  gap: var(--imp-space-3);
  padding: 0 var(--imp-space-4);
  height: var(--imp-header-height);
  background: var(--imp-surface);
  border-bottom: 1px solid var(--imp-border);
  position: sticky;
  top: 0;
  z-index: var(--imp-z-sticky);
}
.svd-page-header {
  padding: var(--imp-space-4);
  border-bottom: 1px solid var(--imp-border);
}
.svd-page-titulo {
  font-size: var(--imp-text-xl);
  font-weight: var(--imp-weight-bold);
  color: var(--imp-text);
  margin-bottom: var(--imp-space-1);
}
.svd-page-obra {
  font-size: var(--imp-text-sm);
  color: var(--imp-brand-400);
}

/* ── Empty state ── */
.sv-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--imp-space-10) var(--imp-space-6);
  gap: var(--imp-space-3);
  color: var(--imp-text-muted);
}
.sv-empty svg { opacity: .35; }
.sv-empty-title {
  font-size: var(--imp-text-md);
  font-weight: var(--imp-weight-semibold);
  color: var(--imp-text-muted);
}
.sv-empty-sub { font-size: var(--imp-text-sm); color: var(--imp-text-faint); }