/* ===== POPUP CORE ===== */
.popover.chr-popover {
  border: 0;
  border-radius: 16px;
  box-shadow:
    0 10px 24px rgba(2, 6, 23, 0.14),
    0 3px 8px rgba(2, 6, 23, 0.10);
  max-width: 360px;
  padding: 0;
  background: #ffffff;
  z-index: 10600;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

.popover.chr-popover .arrow { display: block !important; }
.popover.chr-popover .popover-body { padding: 0; }

/* ===== HEADER ===== */
.chr-pop-header {
  padding: 12px 14px 8px 14px;
  border-bottom: 1px solid #eef2f7;
}
.chr-pop-title {
  font-weight: 700;
  font-size: 14px;
  color: #111827;
  display:flex; align-items:center; gap:8px;
}
.chr-pop-close {
  margin-left:auto; cursor:pointer; border:0; background:transparent;
  font-size:18px; line-height:1; color:#64748b;
}
.chr-pop-close:hover { color:#111827; }

/* ===== BODY WRAPPER ===== */
.chr-pop-content {
  padding: 12px 14px 14px 14px;
}

/* ===== PROGRESS ===== */
.chr-progress {
  background:#eef2f7;
  height:6px; border-radius:999px; overflow:hidden; margin-top:8px;
}
.chr-progress > span {
  display:block; height:100%;
  background: linear-gradient(90deg, #22c55e, #16a34a);
  width:0%;
  transition:width .3s ease;
}
.chr-progress-info {
  font-size:11px; color:#6b7280; margin-top:6px;
}

/* ===== STEPS LIST ===== */
.chr-steps { display:flex; flex-direction:column; gap:8px; margin-top:10px; }

/* Card base */
.chr-step {
  border:1px solid #eef2f7;
  border-radius:12px;
  padding:10px 12px;
  background:#fff;
}

/* Estados */
.chr-step.is-done {
  border-color:#e8f7ef; background:#f6fdf8;
}
.chr-step.is-active {
  border-color:#fff3cd; background:#fff9e6;
}
.chr-step.is-pending {
  opacity:.85;
}

/* Título + estado à direita */
.chr-step-head {
  display:flex; justify-content:space-between; align-items:center; gap:8px;
}

/* Esquerda: ícone + label */
.chr-step-left { display:flex; align-items:center; gap:8px; }
.chr-step-ico {
  width:22px; height:22px; border-radius:999px; display:grid; place-items:center;
  font-size:12px; flex:0 0 22px;
}
.is-done .chr-step-ico { background:#dcfce7; color:#16a34a; }
.is-active .chr-step-ico { background:#fef3c7; color:#d97706; }
.is-pending .chr-step-ico { background:#f1f5f9; color:#64748b; }

.chr-step-title { font-weight:600; color:#111827; font-size:13px; }

/* Badge de status (direita) */
.chr-badge {
  font-size:10px; padding:2px 8px; border-radius:999px; font-weight:600;
}
.chr-badge.active { background:#f59e0b; color:#fff; }
.chr-badge.wait   { background:#e5e7eb; color:#374151; }

/* Linha de detalhe (nome + datas) */
.chr-step-desc {
  margin-top:6px; padding-left:30px;
  color:#6b7280; font-size:12px;
}
.chr-step-desc .muted { color:#94a3b8; font-size:11px; }

/* ===== RODAPÉ (opcional) ===== */
.chr-pop-footer { padding: 10px 14px; border-top: 1px solid #eef2f7; }

/* ===== Force right ===== */
body .popover { max-width: 90vw; }

/* ===== DARK MODE (opcional) =====
@media (prefers-color-scheme: dark) {
  .popover.chr-popover { background:#0b1220; color:#e5e7eb; }
  .chr-pop-title { color:#e5e7eb; }
  .chr-pop-header { border-bottom-color:#172133; }
  .chr-pop-content { color:#cbd5e1; }
  .chr-step { background:#0f172a; border-color:#172133; }
  .chr-step.is-done { background:#0f1f16; border-color:#12321f; }
  .chr-step.is-active { background:#1f1a0a; border-color:#3a2c00; }
  .chr-badge.wait { background:#334155; color:#e5e7eb; }
} */


/* Adicione ao final do CSS existente */
.popover.chr-popover[x-placement^='top']    { margin-bottom: 12px; }
.popover.chr-popover[x-placement^='bottom'] { margin-top: 12px; }
.popover.chr-popover[x-placement^='left']   { margin-right: 12px; }
.popover.chr-popover[x-placement^='right']  { margin-left: 12px; }

/* Forçar reposicionamento quando colidir com bordas */
/* NOVO POSICIONAMENTO RELATIVO */
.chr-popover-container {
    position: relative;
    display: inline-block;
}

.chr-popover-workflow + .popover {
  pointer-events: none; /* Impede que o mouse interrompa o hover */
}

.chr-popover-workflow:hover + .popover,
.popover:hover {
  opacity: 1 !important;
  transition: opacity 0.2s ease !important;
}

.popover.chr-popover {
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin-top: 10px;
}


.chr-steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 10px;
}


/* ===== GRADE ===== */
.chr-grid-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 10px;
}

.chr-grid-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.chr-grid-item {
    border: 1px solid #eef2f7;
    border-radius: 8px;
    padding: 10px;
    background: #fff;
    text-align: center;
}

.chr-grid-title {
    font-weight: 700;
    font-size: 12px;
    color: #111827;
    margin-bottom: 4px;
}

.chr-grid-value {
    font-size: 11px;
    color: #4b5563;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chr-grid-date {
    font-size: 10px;
    color: #6b7280;
    font-style: italic;
}

/* ===== OTIMIZAÇÕES ===== */
.chr-popover-container {
    position: relative;
    display: inline-block;
}

.popover.chr-popover {
    max-width: 600px !important;
}

.chr-pop-content {
    padding: 12px;
}