/* ============================================================
   LIVE ANIMATED MOCKUPS — LeaseBase Premium Marketing V2
   ============================================================
   Self-contained looping animations that simulate the product
   operating in real-time. EliseAI-inspired "living product" feel.
   ============================================================ */

/* ── Shared mockup foundations ──────────────────────────── */

.lb-live {
  position: relative;
  overflow: hidden;
  border-radius: var(--lb-radius-lg);
  font-family: var(--lb-font);
  -webkit-font-smoothing: antialiased;
}

.lb-live * {
  box-sizing: border-box;
}

/* ── 1. LIVE DASHBOARD — Numbers counting, bars filling ── */

.lb-live-dashboard {
  background: #111827;
  color: #e2e8f0;
  padding: 28px;
  min-height: 380px;
}

.lb-live-dashboard__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.lb-live-dashboard__title {
  font-size: 15px;
  font-weight: 600;
  color: #f1f5f9;
}

.lb-live-dashboard__date {
  font-size: 12px;
  color: #64748b;
}

/* Stats row */
.lb-live-dashboard__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.lb-live-stat {
  background: #1e293b;
  border-radius: 10px;
  padding: 16px;
  position: relative;
  overflow: hidden;
}

.lb-live-stat__label {
  font-size: 11px;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}

.lb-live-stat__value {
  font-size: 24px;
  font-weight: 700;
  color: #f8fafc;
  font-variant-numeric: tabular-nums;
}

.lb-live-stat__trend {
  font-size: 11px;
  color: #22c55e;
  margin-top: 4px;
}

/* Animated occupancy bar */
.lb-live-stat__bar {
  height: 4px;
  background: #334155;
  border-radius: 2px;
  margin-top: 8px;
  overflow: hidden;
}

.lb-live-stat__bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #22c55e, #15803d);
  border-radius: 2px;
  width: 0%;
  animation: lb-bar-fill 1.5s ease-out 0.3s forwards;
}

@keyframes lb-bar-fill {
  to { width: 92%; }
}

/* Revenue chart */
.lb-live-dashboard__chart {
  background: #1e293b;
  border-radius: 10px;
  padding: 16px;
  height: 140px;
  position: relative;
  overflow: hidden;
}

.lb-live-dashboard__chart-title {
  font-size: 11px;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}

.lb-live-chart__bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 90px;
  padding-top: 4px;
}

.lb-live-chart__bar {
  flex: 1;
  border-radius: 3px 3px 0 0;
  min-height: 8px;
  animation: lb-chart-grow 0.8s ease-out forwards;
  opacity: 0;
  transform-origin: bottom;
}

.lb-live-chart__bar--green {
  background: linear-gradient(180deg, #22c55e, #15803d);
}

.lb-live-chart__bar--dim {
  background: #334155;
}

@keyframes lb-chart-grow {
  0% { opacity: 0; transform: scaleY(0); }
  100% { opacity: 1; transform: scaleY(1); }
}

/* Staggered bar delays */
.lb-live-chart__bar:nth-child(1) { animation-delay: 0.1s; height: 45%; }
.lb-live-chart__bar:nth-child(2) { animation-delay: 0.15s; height: 52%; }
.lb-live-chart__bar:nth-child(3) { animation-delay: 0.2s; height: 48%; }
.lb-live-chart__bar:nth-child(4) { animation-delay: 0.25s; height: 61%; }
.lb-live-chart__bar:nth-child(5) { animation-delay: 0.3s; height: 55%; }
.lb-live-chart__bar:nth-child(6) { animation-delay: 0.35s; height: 72%; }
.lb-live-chart__bar:nth-child(7) { animation-delay: 0.4s; height: 68%; }
.lb-live-chart__bar:nth-child(8) { animation-delay: 0.45s; height: 78%; }
.lb-live-chart__bar:nth-child(9) { animation-delay: 0.5s; height: 74%; }
.lb-live-chart__bar:nth-child(10) { animation-delay: 0.55s; height: 85%; }
.lb-live-chart__bar:nth-child(11) { animation-delay: 0.6s; height: 82%; }
.lb-live-chart__bar:nth-child(12) { animation-delay: 0.65s; height: 90%; }

/* Animated notification toast */
.lb-live-dashboard__toast {
  position: absolute;
  bottom: 16px;
  right: 16px;
  background: #1e293b;
  border: 1px solid #334155;
  border-left: 3px solid #22c55e;
  border-radius: 8px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transform: translateY(10px) translateX(10px);
  animation: lb-toast-in 0.4s ease-out 2s forwards, lb-toast-out 0.3s ease-in 5s forwards;
  max-width: 260px;
}

.lb-live-dashboard__toast-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
}

.lb-live-dashboard__toast-text {
  font-size: 12px;
  color: #cbd5e1;
  line-height: 1.3;
}

.lb-live-dashboard__toast-text strong {
  color: #f1f5f9;
}

@keyframes lb-toast-in {
  to { opacity: 1; transform: translateY(0) translateX(0); }
}
@keyframes lb-toast-out {
  to { opacity: 0; transform: translateY(-5px); }
}

/* Second toast — payment received */
.lb-live-dashboard__toast--second {
  animation: lb-toast-in 0.4s ease-out 5.5s forwards, lb-toast-out 0.3s ease-in 8s forwards;
}

/* ── 2. LIVE RENT COLLECTION — Payments arriving ─────── */

.lb-live-rent {
  background: #ffffff;
  color: #1e293b;
  padding: 24px;
  min-height: 340px;
}

.lb-live-rent__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.lb-live-rent__title {
  font-size: 15px;
  font-weight: 600;
  color: #0f172a;
}

.lb-live-rent__summary {
  display: flex;
  gap: 16px;
}

.lb-live-rent__summary-item {
  font-size: 12px;
  color: #64748b;
}

.lb-live-rent__summary-val {
  font-weight: 700;
  color: #0f172a;
}

.lb-live-rent__row {
  display: grid;
  grid-template-columns: 1.5fr 0.7fr 0.8fr 0.7fr 0.7fr;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f1f5f9;
  font-size: 13px;
  opacity: 0;
  transform: translateX(-8px);
  animation: lb-row-in 0.4s ease-out forwards;
}

.lb-live-rent__row:nth-child(2) { animation-delay: 0.1s; }
.lb-live-rent__row:nth-child(3) { animation-delay: 0.2s; }
.lb-live-rent__row:nth-child(4) { animation-delay: 0.3s; }
.lb-live-rent__row:nth-child(5) { animation-delay: 0.4s; }

@keyframes lb-row-in {
  to { opacity: 1; transform: translateX(0); }
}

.lb-live-rent__name {
  font-weight: 600;
  color: #0f172a;
}

.lb-live-rent__email {
  font-size: 11px;
  color: #94a3b8;
}

.lb-live-rent__cell {
  color: #64748b;
}

.lb-live-rent__amount {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #0f172a;
}

/* Status badges */
.lb-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
}

.lb-live-badge--paid {
  background: #dcfce7;
  color: #15803d;
}

.lb-live-badge--pending {
  background: #fef3c7;
  color: #92400e;
}

.lb-live-badge--late {
  background: #fee2e2;
  color: #991b1b;
}

/* "Just now" payment arriving animation */
.lb-live-rent__new-payment {
  animation: lb-row-in 0.3s ease-out 1.5s forwards, lb-new-payment-glow 1.5s ease-in-out 2s 2;
  background: transparent;
}

@keyframes lb-new-payment-glow {
  0%, 100% { background: transparent; }
  50% { background: #f0fdf4; }
}

.lb-live-rent__new-badge {
  opacity: 0;
  animation: lb-badge-flip 0.3s ease-out 1.7s forwards;
}

@keyframes lb-badge-flip {
  0% { opacity: 0; transform: scale(0.5); }
  70% { transform: scale(1.1); }
  100% { opacity: 1; transform: scale(1); }
}

.lb-live-rent__just-now {
  font-size: 10px;
  color: #22c55e;
  font-weight: 500;
  opacity: 0;
  animation: lb-row-in 0.3s ease-out 1.8s forwards;
}

/* ── 3. LIVE MARKET INTELLIGENCE — Insights appearing ── */

.lb-live-intel {
  background: #111827;
  color: #e2e8f0;
  padding: 28px;
  min-height: 360px;
}

.lb-live-intel__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.lb-live-intel__title {
  font-size: 15px;
  font-weight: 600;
  color: #f1f5f9;
}

.lb-live-intel__date {
  font-size: 12px;
  color: #64748b;
}

.lb-live-intel__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #22c55e;
  margin-bottom: 20px;
}

.lb-live-intel__status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  animation: lb-pulse 2s ease-in-out infinite;
}

/* Insight cards that appear one by one */
.lb-live-intel__card {
  background: #1e293b;
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 12px;
  border-left: 3px solid transparent;
  opacity: 0;
  transform: translateY(8px);
}

.lb-live-intel__card:nth-child(1) {
  animation: lb-insight-in 0.5s ease-out 1.5s forwards;
  border-left-color: #22c55e;
}

.lb-live-intel__card:nth-child(2) {
  animation: lb-insight-in 0.5s ease-out 3s forwards;
  border-left-color: #3b82f6;
}

.lb-live-intel__card:nth-child(3) {
  animation: lb-insight-in 0.5s ease-out 4.5s forwards;
  border-left-color: #f59e0b;
}

@keyframes lb-insight-in {
  to { opacity: 1; transform: translateY(0); }
}

.lb-live-intel__card-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b;
  margin-bottom: 6px;
}

.lb-live-intel__card-text {
  font-size: 13px;
  color: #cbd5e1;
  line-height: 1.5;
}

.lb-live-intel__card-text strong {
  color: #f1f5f9;
}

.lb-live-intel__card-metric {
  font-size: 20px;
  font-weight: 700;
  color: #22c55e;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}

/* Recommendation bar */
.lb-live-intel__reco {
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.15);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  animation: lb-insight-in 0.5s ease-out 6s forwards;
}

.lb-live-intel__reco-icon {
  width: 20px;
  height: 20px;
  color: #22c55e;
  flex-shrink: 0;
}

.lb-live-intel__reco-text {
  font-size: 12px;
  color: #94a3b8;
}

.lb-live-intel__reco-text strong {
  color: #22c55e;
}

.lb-live-intel__trust {
  font-size: 11px;
  color: #475569;
  font-style: italic;
  margin-top: 16px;
  opacity: 0;
  animation: lb-insight-in 0.3s ease-out 7s forwards;
}

/* ── 4. LIVE MAINTENANCE — Work order lifecycle ──────── */

.lb-live-maint {
  background: #ffffff;
  color: #1e293b;
  padding: 24px;
  min-height: 320px;
}

.lb-live-maint__header {
  margin-bottom: 20px;
}

.lb-live-maint__title {
  font-size: 15px;
  font-weight: 600;
  color: #0f172a;
}

.lb-live-maint__order {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 12px;
  opacity: 0;
  transform: translateY(6px);
}

.lb-live-maint__order:nth-child(1) { animation: lb-insight-in 0.4s ease-out 0.5s forwards; }
.lb-live-maint__order:nth-child(2) { animation: lb-insight-in 0.4s ease-out 1s forwards; }
.lb-live-maint__order:nth-child(3) { animation: lb-insight-in 0.4s ease-out 1.5s forwards; }

.lb-live-maint__order-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

.lb-live-maint__order-title {
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
}

.lb-live-maint__order-meta {
  font-size: 12px;
  color: #94a3b8;
  margin-top: 2px;
}

.lb-live-maint__order-priority {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: 4px;
}

.lb-live-maint__order-priority--high {
  background: #fee2e2;
  color: #991b1b;
}

.lb-live-maint__order-priority--medium {
  background: #fef3c7;
  color: #92400e;
}

.lb-live-maint__order-priority--low {
  background: #f1f5f9;
  color: #64748b;
}

/* Status timeline within a work order */
.lb-live-maint__timeline {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 12px;
}

.lb-live-maint__step {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #94a3b8;
}

.lb-live-maint__step-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e2e8f0;
  flex-shrink: 0;
}

.lb-live-maint__step-dot--done {
  background: #22c55e;
}

.lb-live-maint__step-dot--active {
  background: #3b82f6;
  animation: lb-pulse 1.5s ease-in-out infinite;
}

.lb-live-maint__step-line {
  width: 24px;
  height: 2px;
  background: #e2e8f0;
  margin: 0 2px;
}

.lb-live-maint__step-line--done {
  background: #22c55e;
}

/* Animated status change — "Submitted" → "Assigned" → "In Progress" */
.lb-live-maint__order--animating .lb-live-maint__step-dot--pending {
  animation: lb-step-activate 0.4s ease-out 4s forwards;
}

.lb-live-maint__order--animating .lb-live-maint__step-line--pending {
  animation: lb-line-fill 0.3s ease-out 3.8s forwards;
}

@keyframes lb-step-activate {
  to { background: #3b82f6; }
}

@keyframes lb-line-fill {
  to { background: #22c55e; }
}

/* Vendor assigned toast */
.lb-live-maint__assign {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  margin-top: 10px;
  font-size: 12px;
  color: #1e40af;
  opacity: 0;
  animation: lb-insight-in 0.4s ease-out 4.5s forwards;
}

.lb-live-maint__assign-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #3b82f6;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}

/* ── Responsive ─────────────────────────────────────────── */

@media (max-width: 767px) {
  .lb-live-dashboard__stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .lb-live-rent__row {
    grid-template-columns: 1fr 1fr;
    gap: 4px;
  }

  .lb-live-rent__cell:nth-child(4) {
    display: none;
  }

  .lb-live-dashboard__toast {
    display: none;
  }
}

/* ── Reduced motion ─────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .lb-live-stat__bar-fill,
  .lb-live-chart__bar,
  .lb-live-rent__row,
  .lb-live-rent__new-payment,
  .lb-live-rent__new-badge,
  .lb-live-rent__just-now,
  .lb-live-intel__card,
  .lb-live-intel__reco,
  .lb-live-intel__trust,
  .lb-live-maint__order,
  .lb-live-maint__assign,
  .lb-live-dashboard__toast,
  .lb-live-dashboard__toast--second {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  .lb-live-stat__bar-fill {
    width: 92% !important;
  }

  .lb-live-chart__bar {
    transform: scaleY(1) !important;
  }
}