/* ===========================================================================
   PeerVIP design system — light, colourful, premium.
   Tailwind (Play CDN) handles most utilities; this file owns what Tailwind
   can't do inline: the layered background glow, the data-grid sticky table,
   Excel-like conditional-formatting tints, the animated tab underline,
   the drill-down panel and the print stylesheet.
   =========================================================================== */

:root {
  --brand-1: #6366f1; /* indigo-500  */
  --brand-2: #a855f7; /* purple-500  */
  --brand-3: #ec4899; /* pink-500    */
  --ink: #0f172a;     /* slate-900   */
  --muted: #64748b;   /* slate-500   */
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  background-color: #f8fafc;
  background-image:
    radial-gradient(60rem 60rem at 12% -8%, rgba(99, 102, 241, 0.18), transparent 60%),
    radial-gradient(48rem 48rem at 88% 4%, rgba(236, 72, 153, 0.16), transparent 55%),
    radial-gradient(52rem 52rem at 50% 120%, rgba(14, 165, 233, 0.14), transparent 55%);
  background-attachment: fixed;
  min-height: 100vh;
}

.font-display { font-family: 'Plus Jakarta Sans', 'Inter', ui-sans-serif, sans-serif; }

/* Every numeric cell lines up */
.num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

.brand-gradient { background-image: linear-gradient(135deg, var(--brand-1), var(--brand-2) 55%, var(--brand-3)); }
.brand-text {
  background-image: linear-gradient(135deg, var(--brand-1), var(--brand-2) 55%, var(--brand-3));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Convenience card (mirrors: bg-white rounded-2xl shadow-sm ring-1 ring-slate-100) */
.pv-card {
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
  --tw-ring: inset 0 0 0 1px #f1f5f9;
  box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.05), inset 0 0 0 1px #f1f5f9;
}

/* ---- Focus + buttons ---- */
.pv-focus:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 2px; }
button, [role="button"] { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.55; }

/* ===========================================================================
   Animated tab underline (borrowed design idea from klpdash)
   =========================================================================== */
.pv-tabs { position: relative; }
.pv-tab { position: relative; white-space: nowrap; transition: color 0.18s ease; }
.pv-tab[aria-selected="true"] { color: var(--brand-2); }
.pv-tab-underline {
  position: absolute; bottom: 0; height: 3px; border-radius: 999px;
  background-image: linear-gradient(90deg, var(--brand-1), var(--brand-2), var(--brand-3));
  transition: left 0.28s cubic-bezier(.4,0,.2,1), width 0.28s cubic-bezier(.4,0,.2,1);
}

/* ===========================================================================
   Data-grid table: sticky header row + frozen first column + h-scroll
   =========================================================================== */
.pv-scroll {
  overflow: auto;
  max-height: 74vh;
  border-radius: 0.9rem;
  border: 1px solid #eef2f7;
  background: #fff; /* clean white grid base so untinted (neutral) cells don't show the page gradient */
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 640px) { .pv-scroll { max-height: 68vh; } }

.pv-table { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; font-size: 0.8125rem; }
.pv-table th, .pv-table td { padding: 0.55rem 0.75rem; border-bottom: 1px solid #eef2f7; text-align: right; white-space: nowrap; }
.pv-table thead th {
  position: sticky; top: 0; z-index: 3;
  background: #f8fafc; color: #475569; font-weight: 600; text-align: right;
  vertical-align: bottom; white-space: normal; line-height: 1.2;
  min-width: 5.5rem; max-width: 8.5rem;
  box-shadow: inset 0 -1px 0 #e2e8f0;
}
.pv-table thead th .pv-th-unit { display: block; font-weight: 500; color: #94a3b8; font-size: 0.68rem; }

/* frozen first column (company) */
.pv-col1 {
  position: sticky; left: 0; z-index: 2; background: #fff; text-align: left;
  min-width: 12.5rem; max-width: 15rem; white-space: normal;
  box-shadow: inset -1px 0 0 #e2e8f0;
}
@media (max-width: 640px) { .pv-col1 { min-width: 9rem; max-width: 11rem; } }
.pv-table thead th.pv-col1 { z-index: 4; background: #f8fafc; }
.pv-table tbody tr:hover .pv-col1 { background: #f8fafc; }
.pv-table tbody tr.pv-row { cursor: pointer; }
.pv-table tbody tr.pv-row:hover td { background-color: #f8fafc; }

/* reference rows (Median / Average) */
.pv-ref td { background: #f1f5f9 !important; color: #334155; font-weight: 700; }
.pv-ref .pv-col1 { background: #e2e8f0 !important; color: #1e293b; }

/* ===========================================================================
   Conditional formatting — cross-sectional (Excel red-amber-green scale)
   Applied to <td> data cells. Light tints only.
   =========================================================================== */
.cf-p2 { background-color: #d1fae5; } /* emerald-100 */
.cf-p1 { background-color: #ecfdf5; } /* emerald-50  */
.cf-z  { background-color: #fffbeb; } /* amber-50    */
.cf-n1 { background-color: #fff1f2; } /* rose-50     */
.cf-n2 { background-color: #ffe4e6; } /* rose-100    */

/* best-in-column cell: subtle ring + crown */
.cf-best { box-shadow: inset 0 0 0 2px #10b981; font-weight: 700; position: relative; }
.pv-crown { margin-left: 0.28rem; font-size: 0.72em; color: #059669; }

/* temporal (trend) tints */
.cf-up   { background-color: #ecfdf5; }
.cf-up2  { background-color: #d1fae5; }
.cf-down { background-color: #fff1f2; }
.cf-down2{ background-color: #ffe4e6; }

/* ===========================================================================
   Spinner + progress
   =========================================================================== */
.pv-spinner {
  width: 3rem; height: 3rem; border-radius: 50%;
  border: 4px solid #e9d5ff; border-top-color: #a855f7;
  animation: pv-spin 0.85s linear infinite;
}
@keyframes pv-spin { to { transform: rotate(360deg); } }

.pv-progress-track { background: #eef2ff; border-radius: 999px; overflow: hidden; }
.pv-progress-bar {
  height: 100%; border-radius: 999px;
  background-image: linear-gradient(90deg, var(--brand-1), var(--brand-2), var(--brand-3));
  transition: width 0.6s cubic-bezier(.4,0,.2,1);
}

/* step checklist */
.pv-step { transition: color 0.25s ease, opacity 0.25s ease; }
.pv-step-dot { transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease; }
.pv-step.is-active .pv-step-dot { transform: scale(1.12); }

@keyframes pv-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.pv-fade-in { animation: pv-fade-in 0.35s ease both; }
@media (prefers-reduced-motion: reduce) {
  .pv-fade-in, .pv-spinner, .pv-progress-bar { animation: none !important; transition: none !important; }
}

/* ===========================================================================
   Drill-down side panel
   =========================================================================== */
.pv-dd-backdrop {
  position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45); z-index: 60;
  opacity: 0; transition: opacity 0.25s ease;
}
.pv-dd-panel {
  position: fixed; top: 0; right: 0; height: 100vh; width: min(30rem, 92vw);
  background: #fff; z-index: 61; box-shadow: -12px 0 40px rgba(15, 23, 42, 0.18);
  transform: translateX(100%); transition: transform 0.3s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column; overflow: hidden;
}
.pv-dd-open .pv-dd-backdrop { opacity: 1; }
.pv-dd-open .pv-dd-panel { transform: translateX(0); }

/* mini sparkline row */
.pv-spark svg { display: block; }

/* thin colourful scrollbars */
.pv-scroll::-webkit-scrollbar, .pv-dd-panel *::-webkit-scrollbar { width: 10px; height: 10px; }
.pv-scroll::-webkit-scrollbar-thumb, .pv-dd-panel *::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; border: 2px solid #fff; }
.pv-scroll::-webkit-scrollbar-thumb:hover { background: #a855f7; }

/* fold sections (Trends) */
.pv-fold summary { list-style: none; cursor: pointer; }
.pv-fold summary::-webkit-details-marker { display: none; }
.pv-fold .pv-chev { transition: transform 0.2s ease; }
.pv-fold[open] .pv-chev { transform: rotate(90deg); }

/* chips */
.pv-chip { display: inline-flex; align-items: center; gap: 0.3rem; border-radius: 999px; font-weight: 600; }

/* business-model pills */
.bm-Manufacturer { background: #eef2ff; color: #4338ca; }
.bm-Trader-Distributor { background: #ecfeff; color: #0e7490; }
.bm-Importer-Sourcing { background: #fdf2f8; color: #be185d; }
.bm-Integrated { background: #ecfdf5; color: #047857; }
.bm-default { background: #f1f5f9; color: #475569; }

/* ===========================================================================
   Print stylesheet — the one-pager only
   =========================================================================== */
@media print {
  @page { margin: 14mm; }
  body { background: #fff !important; }
  body * { visibility: hidden !important; }
  #print-region, #print-region * { visibility: visible !important; }
  #print-region { position: absolute; left: 0; top: 0; width: 100%; padding: 0; }
  .no-print { display: none !important; }
  .pv-print-only { display: block !important; }
  #print-region .pv-card { box-shadow: none !important; border: 1px solid #e2e8f0; break-inside: avoid; }
  #print-region .pv-report-section { break-inside: avoid; }
}
.pv-print-only { display: none; }