/* ============================================================
 * DocCompare - Custom Styles (v4)
 * ============================================================ */

/* ─── Scrollbar ───────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ─── Animations ──────────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes confettiFall {
  0% { transform: translateY(-10px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes flashHighlight {
  0% { background-color: rgba(239, 68, 68, 0.25); }
  50% { background-color: rgba(239, 68, 68, 0.45); }
  100% { background-color: rgba(239, 68, 68, 0.08); }
}
@keyframes pulseRing {
  0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.3); }
  70% { box-shadow: 0 0 0 6px rgba(37, 99, 235, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}
@keyframes progressFill {
  from { width: 0%; }
  to { width: 100%; }
}
@keyframes stepSlideIn {
  from { opacity: 0; transform: translateX(-12px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes checkBounce {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}
.animate-scale-in { animation: scaleIn 0.2s ease-out; }
.flash-highlight { animation: flashHighlight 1s ease-out; }
.animate-pulse-ring { animation: pulseRing 1.5s infinite; }
.animate-step-in { animation: stepSlideIn 0.3s ease-out; }
.animate-check { animation: checkBounce 0.3s ease-out; }

/* ─── Processing Steps ─────────────────────────────────── */
.processing-step {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}
.processing-step .step-connector {
  position: absolute;
  left: 15px;
  top: 40px;
  bottom: -20px;
  width: 2px;
  background: #e2e8f0;
  transition: background 0.4s;
}
.processing-step.completed .step-connector { background: #16a34a; }
.processing-step.active .step-connector { background: #93c5fd; }

/* ─── Editable Cells ──────────────────────────────────── */
.editable-cell {
  position: relative;
  transition: all 0.15s;
  border-radius: 4px;
  padding: 2px 4px;
  margin: -2px -4px;
}
.editable-cell:hover {
  background: #eff6ff !important;
}
.editable-cell:focus {
  outline: none;
  background: #fff !important;
  box-shadow: 0 0 0 2px #3b82f6, 0 0 0 4px rgba(59, 130, 246, 0.1);
  border-radius: 4px;
}
.editable-cell[contenteditable="true"] {
  cursor: text;
  background: #fff !important;
}

/* ─── Edit indicator ──────────────────────────────────── */
.edit-indicator {
  opacity: 0;
  transition: opacity 0.15s;
}
tr:hover .edit-indicator,
[data-field]:hover .edit-indicator {
  opacity: 1;
}

/* ─── Diff Cards ──────────────────────────────────────── */
.diff-card {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.diff-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
}
.diff-card[data-severity="high"]::before { background: #dc2626; }
.diff-card[data-severity="medium"]::before { background: #d97706; }
.diff-card[data-severity="low"]::before { background: #16a34a; }
.diff-card:hover {
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  transform: translateY(-1px);
}
.diff-card.resolved {
  opacity: 0.85;
}
.diff-card.resolved::before { background: #16a34a; }
.diff-card .resolve-btn {
  transition: all 0.15s;
}
.diff-card .resolve-btn:hover {
  background: #2563eb !important;
  color: white !important;
  border-color: #2563eb !important;
}

/* ─── Doc Tabs ───────────────────────────────────────── */
.doc-tab {
  transition: all 0.2s;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
}
.doc-tab:hover {
  background: #f8fafc;
}
.doc-tab.active {
  background: #eff6ff;
}
.doc-tab.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: #2563eb;
}

/* ─── Declaration grid ────────────────────────────────── */
.decl-field {
  transition: all 0.15s;
}
.decl-field:hover {
  background: #f8fafc;
}
.decl-field.highlighted {
  background: #fef2f2;
  box-shadow: inset 0 0 0 2px #dc2626;
  border-radius: 4px;
  animation: flashHighlight 1.2s ease-out;
}

/* ─── Item table ──────────────────────────────────────── */
.item-table td {
  transition: background 0.15s;
}
.item-table tr:nth-child(even) td {
  background: #fafbfc;
}

/* ─── Loading shimmer ─────────────────────────────────── */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.shimmer {
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* ─── Confetti pieces ────────────────────────────────── */
.confetti {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
}

/* ─── Animation utilities ─────────────────────────────── */
.animate-fade-in { animation: fadeIn 0.3s ease-out; }
.animate-slide-up { animation: slideUp 0.35s ease-out; }
@keyframes slideUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ─── Mod log ─────────────────────────────────────────── */
.mod-log-entry {
  animation: slideIn 0.2s ease-out;
}
@keyframes slideIn {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ─── Timeline (Mod Log Modal) ────────────────────────── */
.timeline-item {
  position: relative;
  padding-left: 22px;
  padding-bottom: 10px;
}
.timeline-item::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 6px;
  bottom: 0;
  width: 1.5px;
  background: #e2e8f0;
}
.timeline-item:last-child::before {
  display: none;
}
.timeline-dot {
  position: absolute;
  left: 0;
  top: 4px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2.5px solid;
  background: white;
  z-index: 1;
}
.timeline-dot.edit { border-color: #3b82f6; }
.timeline-dot.fix { border-color: #16a34a; }
.timeline-dot.system { border-color: #8b5cf6; }

/* ─── Responsive ──────────────────────────────────────── */
@media (max-width: 1024px) {
  .three-col { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .doc-tab { font-size: 10px; padding: 6px 8px; }
}

/* ─── Risk colors ────────────────────────────────────── */
.risk-high-bg { background: #fef2f2; }
.risk-medium-bg { background: #fffbeb; }
.risk-low-bg { background: #f0fdf4; }
.risk-high-border { border-color: #fecaca; }
.risk-medium-border { border-color: #fde68a; }
.risk-low-border { border-color: #bbf7d0; }
.risk-high-text { color: #dc2626; }
.risk-medium-text { color: #d97706; }
.risk-low-text { color: #16a34a; }