/*
 * OPLEX — billing sync status widget styles.
 * Companion to frontend/shared/js/billingSyncStatus.js.
 */

.bss-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 13px;
  color: #d1d5db;
  margin-bottom: 14px;
}

.bss-row.is-ok      { border-color: rgba(34, 197, 94, 0.30); background: rgba(34, 197, 94, 0.04); }
.bss-row.is-error   { border-color: rgba(239, 68, 68, 0.35); background: rgba(239, 68, 68, 0.05); }
.bss-row.is-running { border-color: rgba(59, 130, 246, 0.35); background: rgba(59, 130, 246, 0.05); }

.bss-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.bss-icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

.bss-row.is-ok      .bss-icon { color: #22c55e; }
.bss-row.is-error   .bss-icon { color: #ef4444; }
.bss-row.is-running .bss-icon { color: #60a5fa; }
.bss-row.is-idle    .bss-icon { color: #9ca3af; }

.bss-status {
  font-weight: 600;
  color: #f3f4f6;
}

.bss-row.is-error .bss-status { color: #fca5a5; }

.bss-absolute,
.bss-count {
  font-size: 11.5px;
  color: #9ca3af;
  font-variant-numeric: tabular-nums;
}

.bss-absolute::before { content: '· '; color: #6b7280; }
.bss-count::before    { content: '· '; color: #6b7280; }

.bss-spacer { flex: 1; }

.bss-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid rgba(59, 130, 246, 0.30);
  background: rgba(59, 130, 246, 0.12);
  color: #93c5fd;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms, border-color 120ms, color 120ms;
  font-family: inherit;
}

.bss-btn:hover:not(:disabled) {
  background: rgba(59, 130, 246, 0.22);
  border-color: rgba(59, 130, 246, 0.50);
  color: #bfdbfe;
}

.bss-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.bss-btn svg {
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

.bss-next {
  width: 100%;
  font-size: 11px;
  color: #6b7280;
  letter-spacing: 0.02em;
  margin-top: -2px;
}

.bss-error {
  margin-top: 6px;
  padding: 6px 10px;
  font-size: 12px;
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.08);
  border-radius: 6px;
  border: 1px solid rgba(239, 68, 68, 0.20);
}

.bss-spin {
  animation: bss-spin-anim 0.8s linear infinite;
}

@keyframes bss-spin-anim {
  to { transform: rotate(360deg); }
}