/* dattago-progress.css — Banner de progresso de importação Dattago
   (full + corner) + log de importação.
   Extraído de components.css na Fase C da modularização. */

/* ════════════════════════════════════
   DATTAGO PROGRESS BANNER
════════════════════════════════════ */

.cprog-wrap {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}

.cprog-wrap--visible {
  opacity: 1;
  pointer-events: all;
}

.cprog-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.cprog-modal {
  position: relative;
  width: 100%;
  max-width: 680px;
  max-height: 90vh;
  background: var(--surface, #fff);
  border-radius: 16px;
  border: 1px solid var(--border, #e2e8f0);
  box-shadow: 0 32px 80px rgba(0,0,0,.28), 0 8px 24px rgba(0,0,0,.16);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(24px) scale(.97);
  transition: transform .38s cubic-bezier(.22,1,.36,1);
}

.cprog-wrap--visible .cprog-modal {
  transform: translateY(0) scale(1);
}

/* ── Modo corner: banner de canto não-blocante (carregamentos suplementares) ── */
.cprog-wrap--corner {
  inset: auto;                        /* cancela inset:0 do modo full */
  bottom: 20px;
  right: 20px;
  width: 390px;
  max-height: calc(100vh - 40px);
  display: block;
  padding: 0;
  overflow: hidden;
  overflow-y: auto;
  opacity: 1;                         /* cancela fade-in herdado do modo full */
  /* Desliza da direita em vez de aparecer centralizado */
  transform: translateX(calc(100% + 24px));
  transition: transform .35s cubic-bezier(.4,0,.2,1), width .25s ease;
}
.cprog-wrap--corner.cprog-wrap--visible {
  transform: translateX(0);
}
.cprog-wrap--corner .cprog-modal {
  max-width: none;
  max-height: none;
  background: #fff;                   /* fundo completamente opaco */
  transform: none !important;         /* cancela animação de scale do modo full */
  box-shadow: 0 8px 32px rgba(0,0,0,.22), 0 2px 8px rgba(0,0,0,.1);
}
/* Estado minimizado: esconde modal, mostra pill */
.cprog-wrap--corner.cprog-minimized {
  width: auto;
  overflow: visible;
}
.cprog-wrap--corner.cprog-minimized .cprog-modal { display: none; }

/* ── Pill FAB — botão flutuante quando o banner está minimizado ── */
.cprog-pill {
  display: none;              /* padrão: oculto (banner expandido) */
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%);
  border: none;
  border-radius: 28px;
  color: #fff;
  cursor: pointer;
  font-size: .85rem;
  font-weight: 600;
  box-shadow: 0 4px 20px rgba(0,0,0,.32);
  white-space: nowrap;
  transition: transform .15s, box-shadow .15s;
  min-width: 0;
}
.cprog-pill:hover {
  transform: scale(1.03);
  box-shadow: 0 6px 24px rgba(0,0,0,.38);
}
.cprog-wrap--corner.cprog-minimized .cprog-pill { display: flex; }

.cprog-pill-icon { width: 16px; height: 16px; flex-shrink: 0; }
.cprog-pill-icon svg {
  width: 16px; height: 16px;
  animation: cprog-icon-pulse 1.4s ease-in-out infinite;
}
.cprog-pill--done .cprog-pill-icon svg { animation: none; }

/* Badge de erros dentro do pill — fundo sólido para ser visível sobre o gradiente azul */
.cprog-pill-err {
  display: none;
  background: #ef4444;
  color: #fff;
  border-radius: 99px;
  padding: 2px 8px;
  font-size: .72rem;
  font-weight: 700;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.cprog-pill-err.cprog-pill-err--visible { display: inline-block; }

.cprog-pill-chevron { font-size: .7rem; opacity: .7; margin-left: 2px; }

/* Botão minimizar/expandir do banner de canto */
.cprog-header-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.cprog-minimize-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,.7);
  cursor: pointer;
  font-size: .8rem;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 4px;
  transition: color .15s, background .15s;
  flex-shrink: 0;
}
.cprog-minimize-btn:hover { color: #fff; background: rgba(255,255,255,.15); }
/* Limita altura dos painéis de log no banner de canto */
.cprog-wrap--corner .cprog-log { max-height: 200px; }

/* ── Header ── */
.cprog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%);
  gap: 12px;
  flex-shrink: 0;
}

.cprog-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.cprog-icon {
  width: 40px; height: 40px;
  background: rgba(255,255,255,.15);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
  transition: background .3s;
}

.cprog-icon svg {
  width: 20px; height: 20px;
  animation: cprog-icon-pulse 1.4s ease-in-out infinite;
}

.cprog-icon--done { background: rgba(52,211,153,.25); }
.cprog-icon--done svg { animation: none; }
.cprog-icon--warn { background: rgba(251,191,36,.22); }
.cprog-icon--warn svg { animation: none; stroke: #fbbf24; }

@keyframes cprog-icon-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .45; }
}

.cprog-title {
  font-size: .92rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
  line-height: 1.2;
}

.cprog-subtitle {
  font-size: .68rem;
  color: rgba(255,255,255,.68);
  margin: 3px 0 0;
}

/* ── Badge ── */
.cprog-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 99px;
  font-size: .7rem;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

.cprog-badge--running {
  background: rgba(255,255,255,.14);
  color: #fff;
  border: 1px solid rgba(255,255,255,.22);
}

.cprog-badge--done {
  background: rgba(52,211,153,.18);
  color: #6ee7b7;
  border: 1px solid rgba(52,211,153,.32);
}

.cprog-badge--warn {
  background: rgba(251,191,36,.18);
  color: #fbbf24;
  border: 1px solid rgba(251,191,36,.32);
}

.cprog-badge-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.cprog-badge--running .cprog-badge-dot {
  animation: cprog-dot-pulse 1s ease-in-out infinite;
}

@keyframes cprog-dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .35; transform: scale(.65); }
}

/* ── Status box ── */
.cprog-status-box {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-dim, #f1f5f9);
  flex-shrink: 0;
}

.cprog-box-label {
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .09em;
  color: var(--text-muted, #94a3b8);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.cprog-status-text {
  font-size: .8rem;
  font-weight: 600;
  color: var(--text, #1e293b);
  margin-bottom: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cprog-bar-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .68rem;
  color: var(--text-muted, #94a3b8);
  margin-bottom: 7px;
  font-variant-numeric: tabular-nums;
}

.cprog-bar-track {
  height: 8px;
  background: var(--border-dim, #f1f5f9);
  border-radius: 99px;
  overflow: hidden;
}

.cprog-bar-fill {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #3b82f6 0%, #6366f1 100%);
  min-width: 0;
  transition: width .55s cubic-bezier(.4,0,.2,1);
  position: relative;
  overflow: hidden;
}

.cprog-bar-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,.42) 45%,
    rgba(255,255,255,.42) 55%,
    transparent 100%);
  transform: translateX(-100%);
  animation: cprog-shimmer 1.7s linear infinite;
}

.cprog-bar-fill--done {
  background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
}
.cprog-bar-fill--done::after { display: none; }

@keyframes cprog-shimmer {
  to { transform: translateX(200%); }
}

/* ── Stats ── */
.cprog-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--border-dim, #f1f5f9);
  gap: 1px;
  border-bottom: 1px solid var(--border-dim, #f1f5f9);
  flex-shrink: 0;
}

.cprog-stat {
  padding: 10px 14px;
  background: var(--surface, #fff);
  text-align: center;
}

.cprog-stat-val {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text, #1e293b);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  transition: color .2s;
}

.cprog-stat-key {
  font-size: .55rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted, #94a3b8);
  margin-top: 3px;
}

.cprog-stat--err .cprog-stat-val   { color: var(--text-muted, #94a3b8); }
.cprog-stat--has-err .cprog-stat-val { color: #ef4444; }

/* ── Log panel ── */
.cprog-log {
  display: none;
  overflow-y: auto;
  background: #0f172a;
  border-radius: 0 0 8px 8px;
  padding: 10px 12px;
  font-family: 'SF Mono', 'Fira Code', 'Roboto Mono', 'Courier New', monospace;
  font-size: .67rem;
  line-height: 1.65;
  scrollbar-width: thin;
  scrollbar-color: #334155 transparent;
  flex: 1;
  min-height: 0;
}

.cprog-log.active {
  display: block;
}

.cprog-log::-webkit-scrollbar       { width: 5px; }
.cprog-log::-webkit-scrollbar-track { background: transparent; }
.cprog-log::-webkit-scrollbar-thumb { background: #334155; border-radius: 99px; }

.cprog-line { margin-bottom: 1px; }
.cprog-line--info    { color: #94a3b8; }
.cprog-line--success { color: #4ade80; }
.cprog-line--muted   { color: #4b5563; }
.cprog-line--error   { color: #f87171; }
.cprog-line--done    { color: #34d399; font-weight: 600; }
.cprog-line--fixed   { color: #34d399; font-weight: 600; }

/* ── Barra de abas do log ── */
.cprog-log-tabs-bar {
  display: flex;
  align-items: center;
  gap: 2px;
  background: #0f172a;
  border-radius: 8px 8px 0 0;
  padding: 5px 6px 0;
  flex-shrink: 0;
  border-bottom: 1px solid #1e293b;
  flex-wrap: wrap;
}

.cprog-log-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px 5px;
  font-size: .62rem;
  font-weight: 600;
  font-family: var(--font, sans-serif);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #64748b;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  border-radius: 4px 4px 0 0;
  transition: color .15s, border-color .15s, background .15s;
  white-space: nowrap;
}

.cprog-log-tab:hover {
  color: #94a3b8;
  background: rgba(255,255,255,.04);
}

.cprog-log-tab.active {
  color: #e2e8f0;
  border-bottom-color: #4361ee;
  background: rgba(67,97,238,.08);
}

.cprog-log-tab-badge {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 99px;
  background: #ef4444;
  color: #fff;
  font-size: .55rem;
  font-weight: 700;
  line-height: 1;
}

.cprog-log-tab-badge:not(:empty) { display: inline-flex; }

/* ── Botões de download dentro do log ── */
.cprog-log-dl-group {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding-bottom: 4px;
  flex-shrink: 0;
}

.cprog-log-dl-btn {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 99px;
  font-size: .6rem;
  font-weight: 600;
  font-family: var(--font, sans-serif);
  cursor: pointer;
  background: transparent;
  border: 1px solid #334155;
  color: #64748b;
  transition: color .15s, border-color .15s, background .15s;
  white-space: nowrap;
}

.cprog-log-dl-btn:hover {
  border-color: #4361ee;
  color: #93c5fd;
  background: rgba(67,97,238,.08);
}

.cprog-log-dl-btn--warn {
  border-color: #451a1a;
  color: #f87171;
}

.cprog-log-dl-btn--warn:hover {
  border-color: #ef4444;
  color: #fca5a5;
  background: rgba(239,68,68,.08);
}

/* ── Sumários de falhas/ajustes ao final ── */
.cprog-log-summary-sep {
  border: none;
  border-top: 1px solid #1e293b;
  margin: 8px 0;
}

.cprog-log-summary-hdr {
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 0 2px;
  margin-bottom: 2px;
  user-select: none;
}

.cprog-log-summary-hdr--err { color: #f87171; }
.cprog-log-summary-hdr--fix { color: #34d399; }

/* ── Footer ── */
.cprog-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--border-dim, #f1f5f9);
  flex-shrink: 0;
}

.cprog-btn {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 16px;
  border-radius: 99px;
  font-size: .74rem;
  font-weight: 600;
  font-family: var(--font, sans-serif);
  cursor: pointer;
  border: 1px solid transparent;
  transition: opacity .15s, background .15s, color .15s, border-color .15s;
}

.cprog-btn--close {
  background: var(--color-primary, #4361ee);
  border-color: var(--color-primary, #4361ee);
  color: #fff;
}
.cprog-btn--close:hover:not(:disabled) { opacity: .88; }
.cprog-btn--close:disabled {
  background: var(--border, #e2e8f0);
  border-color: var(--border, #e2e8f0);
  color: var(--text-muted, #94a3b8);
  cursor: not-allowed;
}

/* ════════════════════════════════════
   LOG DE IMPORTAÇÃO — aba Log
════════════════════════════════════ */

.ilog-mono { font-family: monospace; font-size: .78rem; }
.ilog-num  { text-align: right; font-variant-numeric: tabular-nums; }

/* Linhas coloridas por status */
tr.ilog-ok   { background: rgba(34,197,94,.06); }
tr.ilog-warn { background: rgba(234,179,8,.08); }
tr.ilog-err  { background: rgba(239,68,68,.07); }

/* Badge de status */
.ilog-status { display: inline-block; padding: 2px 7px; border-radius: 20px;
  font-size: .7rem; font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
.ilog-status--completo  { background: rgba(34,197,94,.15);  color: #15803d; }
.ilog-status--parcial   { background: rgba(234,179,8,.18);  color: #b45309; }
.ilog-status--falhou    { background: rgba(239,68,68,.14);  color: #b91c1c; }
.ilog-status--importando { background: rgba(99,102,241,.12); color: #4338ca; }

/* Box de inconsistências */
.ilog-incon-box { margin: 12px 0 4px; padding: 10px 14px;
  background: rgba(234,179,8,.1); border: 1px solid rgba(234,179,8,.35);
  border-radius: 8px; }
.ilog-incon-title { font-size: .78rem; font-weight: 700; color: #92400e; margin-bottom: 6px; }
.ilog-incon-list  { margin: 0; padding-left: 18px; font-size: .76rem;
  color: #78350f; line-height: 1.7; }
.ilog-recovered-box { margin: 12px 0 4px; padding: 10px 14px;
  background: rgba(34,197,94,.08); border: 1px solid rgba(34,197,94,.3);
  border-radius: 8px; }
.ilog-recovered-title { font-size: .78rem; font-weight: 700; color: #166534; margin-bottom: 6px; }
.ilog-recovered-nums  { font-size: .74rem; color: #166534; line-height: 1.7;
  max-height: 140px; overflow-y: auto; font-family: monospace; word-break: break-word; }
.rd-field:last-child,
.rd-field:nth-last-child(2):nth-child(odd) { grid-column: span 1; }

/* Dark mode — backgrounds sólidos (sem transparência) */
[data-theme="dark"] .rd {
  background: #1a2540;
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 24px 80px rgba(0,0,0,.5);
}
[data-theme="dark"] .rd-title  { color: #f1f5f9; }
[data-theme="dark"] .rd-value  { color: #e2e8f0; }
[data-theme="dark"] .rd-header { border-bottom-color: rgba(255,255,255,.07); }
[data-theme="dark"] .rd-close  { color: #94a3b8; }
[data-theme="dark"] .rd-close:hover { background: rgba(255,255,255,.08); color: #f1f5f9; }
[data-theme="dark"] .rd-body   { scrollbar-color: #334155 transparent; }
[data-theme="dark"] .rd-body::-webkit-scrollbar-thumb { background: #334155; }

/* Phantom scrollbar horizontal — fixo no bottom do viewport para tabelas largas */
.phantom-hscroll {
  position: fixed;
  bottom: 0;
  height: 15px;
  overflow-x: auto;
  overflow-y: hidden;
  z-index: 60;
  display: none;
  background: var(--surface);
  border-top: 1px solid var(--border);
}
.phantom-hscroll-inner { height: 1px; min-width: 100%; }

@media (max-width: 540px) {
  .rd-body { grid-template-columns: 1fr; }
}

/* ── Indicador por API (componentes do catálogo: Spinner / Icon) ── */
.cprog-api-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.cprog-api-indicator .cmp-spinner { width: 12px !important; height: 12px !important; }
.cprog-api-indicator .cmp-icon    { display: block; }

/* ════════════════════════════════════════════════════════════════
   ── API LIST (5 linhas: Empenhos / Liquidações / Pagamentos / Orçamento / Contratos)
   Cada linha: indicador (spinner|check) · nome · barra · X/Y ops · N reg
   Markup gerado por buildHtml() em dattago-progress.js.
════════════════════════════════════════════════════════════════ */

.cprog-api-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-dim, #f1f5f9);
  flex-shrink: 0;
}

.cprog-api-row {
  display: grid;
  grid-template-columns: 16px 92px 1fr 56px 76px;
  align-items: center;
  gap: 10px;
  font-size: .72rem;
  color: var(--text, #1e293b);
  font-variant-numeric: tabular-nums;
}

.cprog-api-name {
  font-weight: 600;
  color: var(--text, #1e293b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cprog-api-bar-track {
  height: 6px;
  background: var(--border-dim, #f1f5f9);
  border-radius: 99px;
  overflow: hidden;
  min-width: 60px;
}

.cprog-api-bar-fill {
  height: 100%;
  width: 0%;
  border-radius: 99px;
  background: linear-gradient(90deg, #3b82f6 0%, #6366f1 100%);
  transition: width .35s cubic-bezier(.4,0,.2,1), background .2s;
}

.cprog-api-bar-fill--done {
  background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
}

.cprog-api-ops {
  text-align: right;
  color: var(--text-muted, #94a3b8);
  font-size: .68rem;
}

.cprog-api-recs {
  text-align: right;
  color: var(--text, #1e293b);
  font-weight: 600;
  font-size: .7rem;
}

/* Rodapé "Falhas" no final da lista */
.cprog-api-err-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px dashed var(--border-dim, #f1f5f9);
  font-size: .7rem;
}
.cprog-api-err-label {
  color: var(--text-muted, #94a3b8);
  font-weight: 600;
}
.cprog-api-err-val {
  color: var(--text-muted, #94a3b8);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.cprog-stat--has-err .cprog-api-err-val { color: #ef4444; }

/* Dark mode: tracks ficam mais discretos */
[data-theme="dark"] .cprog-api-bar-track,
[data-theme="dark"] .cprog-bar-track {
  background: rgba(148,163,184,.18);
}
[data-theme="dark"] .cprog-api-err-row {
  border-top-color: rgba(148,163,184,.18);
}

/* ════════════════════════════════════════════════════════════════
   ── DETAILS / LOG TOGGLE
   Botões "Ver detalhes" e "Ver registro de execução"
════════════════════════════════════════════════════════════════ */

.cprog-details-toggle-row,
.cprog-log-toggle-row {
  padding: 8px 20px;
  border-bottom: 1px solid var(--border-dim, #f1f5f9);
  flex-shrink: 0;
}

.cprog-details-toggle,
.cprog-log-toggle {
  background: none;
  border: none;
  color: var(--text-muted, #64748b);
  font-size: .72rem;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 0;
  font-family: var(--font, sans-serif);
  transition: color .15s;
}
.cprog-details-toggle:hover,
.cprog-log-toggle:hover {
  color: var(--color-accent, #4361ee);
}

/* Log wrap toggleable */
.cprog-log-wrap {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.cprog-log-wrap.cprog-log-wrap--hidden {
  display: none;
}

/* Detalhes escondidos por padrão no modo full (atributo hidden no HTML) */
#cprogDetails[hidden] { display: none; }