/*
 * Small custom layer on top of Tailwind. Anything that's awkward to do
 * with utility classes lives here.
 */

/* Make tables that scroll horizontally feel less abrupt at the right edge */
.table-fade-right {
  -webkit-mask-image: linear-gradient(to right, black 95%, transparent);
          mask-image: linear-gradient(to right, black 95%, transparent);
}

/* HTMX request indicator: dim the body while a swap is in flight */
.htmx-request .htmx-indicator { opacity: 1; }
.htmx-indicator { opacity: 0; transition: opacity 200ms ease-in; }

/* Sticky first column for the pivot table */
.pivot-table th.sticky-col,
.pivot-table td.sticky-col {
  position: sticky;
  left: 0;
  background-color: var(--bg, white);
  z-index: 1;
}
.dark .pivot-table th.sticky-col,
.dark .pivot-table td.sticky-col {
  background-color: rgb(15 23 42); /* slate-900 */
}

/* Tabular nums make price columns line up like an account ledger */
.tnum { font-variant-numeric: tabular-nums; }

/* Modal backdrop for drill-down */
.modal-backdrop {
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);
}

/* ----------------------------------------------------------------------
 * Anti-copy + forensic watermark, used on pages that expose raw prices
 * to non-admin users. The whole tree inside <body class="locked"> becomes
 * non-selectable, and a full-page SVG watermark is laid over it via a
 * ::before pseudo so printouts and screen-shots still carry the viewer's
 * email + login fingerprint + request nonce. It's not DRM — determined
 * leakers will screenshot — but every leak is traceable to a user/session.
 * ---------------------------------------------------------------------- */

body.locked,
body.locked * {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
}
body.locked input,
body.locked select,
body.locked textarea {
  -webkit-user-select: text !important;
  user-select: text !important;
}

body.locked::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
  background-image: var(--wm-image, none);
  background-repeat: repeat;
  opacity: 0.14;
  mix-blend-mode: multiply;
}
.dark body.locked::before { mix-blend-mode: screen; opacity: 0.18; }

@media print {
  body.locked::before { opacity: 0.35 !important; }
}

/* ── Option A: Visual polish ────────────────────────────────────── */

/* Smooth transitions on interactive elements */
a, button, [role="button"] {
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
tr {
  transition: background-color 0.12s ease;
}

/* Card hover lift */
.card-hover {
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.card-hover:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  border-color: rgb(203 213 225); /* slate-300 */
}
.dark .card-hover:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  border-color: rgb(71 85 105); /* slate-600 */
}

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

/* Best-price cell gradient highlight */
.best-price-cell {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.02) 100%);
}
.dark .best-price-cell {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.04) 100%);
}

/* Latency badge pill */
.latency-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.6875rem;
  line-height: 1;
}