/* Custom styles layered on top of Tailwind (prototype). */

:root {
  --brand: #2563eb;
  --up: #16a34a;
  --down: #dc2626;
}

html {
  scroll-behavior: smooth;
}

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Subtle hero gradient background. */
.hero-gradient {
  background:
    radial-gradient(1200px 400px at 85% -10%, rgba(37, 99, 235, 0.10), transparent 60%),
    radial-gradient(900px 380px at 0% 0%, rgba(59, 130, 246, 0.08), transparent 55%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

/* Thin scrollbars for table overflow areas. */
.scroll-thin::-webkit-scrollbar {
  height: 8px;
  width: 8px;
}
.scroll-thin::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 9999px;
}
.scroll-thin::-webkit-scrollbar-track {
  background: transparent;
}

/* Sortable table header affordance. */
th[data-sort] {
  cursor: pointer;
  user-select: none;
}
th[data-sort] .sort-icon {
  opacity: 0.35;
}
th[data-sort].sort-active .sort-icon {
  opacity: 1;
  color: var(--brand);
}

/* Mobile: turn wide tables into stacked cards where data-stack is set. */
@media (max-width: 640px) {
  table[data-stack] thead {
    display: none;
  }
  table[data-stack] tr,
  table[data-stack] tbody tr {
    display: block;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    margin-bottom: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: #fff;
  }
  table[data-stack] tbody td {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    border: none !important;
    padding: 0.35rem 0 !important;
    text-align: right;
  }
  table[data-stack] tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    color: #64748b;
    text-align: left;
  }
}

/* Fade-in for content sections. */
.fade-in {
  animation: fadeIn 0.4s ease both;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}