/* ── KYC Banner responsive ─────────────────────────── */
.kyc-banner {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.kyc-banner__inner {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
}
.kyc-banner__text { flex: 1; min-width: 0; }
.kyc-banner__btn {
  align-self: stretch;
  text-align: center;
  white-space: nowrap;
}
@media (min-width: 480px) {
  .kyc-banner { flex-direction: row; align-items: center; }
  .kyc-banner__inner { flex: 1; }
  .kyc-banner__btn { align-self: auto; }
}

/* ── Loan stats grid ────────────────────────────────── */
.loan-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
}
.loan-stat-value {
  font-size: clamp(.72rem, 2.8vw, 1rem);
  word-break: break-word;
  overflow-wrap: break-word;
}

/* Smart Loan Transfer — Supplemental CSS */
*, *::before, *::after { box-sizing: border-box; }

/* ── KPI Grid responsive ───────────────────────────── */
.kpi-grid {
  display: grid;
  gap: 1rem;
  margin-bottom: 1.5rem;
  /* Mobile default: 1 column, wallet full width */
  grid-template-columns: 1fr;
}
/* Wallet hero always spans full width */
.kpi-wallet-hero { grid-column: 1 / -1; }

/* With loans: side-by-side KPI cards on mobile */
.kpi-grid--with-loans {
  grid-template-columns: 1fr 1fr;
}
.kpi-grid--with-loans .kpi-wallet-hero {
  grid-column: 1 / -1; /* spans both cols */
}

/* Desktop: 4-col layout */
@media (min-width: 1024px) {
  .kpi-grid--with-loans {
    grid-template-columns: 2fr 1fr 1fr;
  }
  .kpi-grid--with-loans .kpi-wallet-hero {
    grid-column: 1 / 2;
  }
}

/* KPI amount fluid size */
.kpi-amount {
  font-size: clamp(1.1rem, 4vw, 1.5rem);
}

/* ── Repay disabled notice ─────────────────────────── */
.repay-disabled-notice {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .8rem;
  font-weight: 600;
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: .6rem;
  padding: .5rem .85rem;
}
.repay-disabled-inline {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .72rem;
  font-weight: 600;
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: .4rem;
  padding: .2rem .5rem;
}

/* Ensure modal works on mobile */
@media (max-width: 640px) {
  .fixed.inset-0 { padding: .75rem !important; }
  .fixed.inset-0 > div { max-width: 100% !important; width: 100% !important; }
}

/* Card responsive padding */
@media (max-width: 640px) {
  .card { padding: 1rem !important; }
  main { padding-left: 1rem !important; padding-right: 1rem !important; }
}

/* Tables scroll on mobile */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { min-width: 500px; }

/* Input sizing mobile */
@media (max-width: 480px) {
  .input { font-size: 16px !important; } /* prevent zoom on iOS */
}

/* Fade-up animation */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fadeUp .4s ease-out both; }

/* Skeleton */
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.skeleton {
  background: linear-gradient(90deg,#f1f5f9 25%,#e8ecf5 50%,#f1f5f9 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: 8px;
}