/* Varial — Dashboard page styles */

/* The dashboard's dark hero banner now uses the shared `page-hero` component
   (css/components/page-hero.css); the bespoke `.dashboard-hero*` rules it
   replaced were removed in 3C.7 follow-up (zero template users after the
   Batch 2/3B button + hero folds). */

/* ── Section heading + manage link row ────────────────────────── */
.dashboard-section-link {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--varial-primary, #2563EB);
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: color 0.15s;
}

.dashboard-section-link:hover {
  color: var(--varial-primary-dark, #1D4ED8);
  text-decoration: none;
}

/* ── Featured product layout: VAR feature (left half) + stacked trio (right) ── */
.product-card-feature {
  display: flex;
  flex-direction: column;
}

.product-card-feature .product-card-visual {
  flex: 1 1 auto;
  min-height: 240px;
  font-size: 4rem;
}

/* Inline SVG motif that fills the VAR feature visual (position tornado). */
.product-card-viz {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.product-card-viz text {
  font-family: var(--varial-font-heading, ui-sans-serif, system-ui, sans-serif);
}

.product-card-title-lg {
  font-size: 1.5rem;
}

.product-card-desc-lg {
  font-size: 0.9375rem;
}

/* The stacked trio fills the same height as the feature card, split three ways. */
.product-stack {
  display: flex;
  flex-direction: column;
  gap: var(--varial-space-md, 1rem);
}

.product-card-row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  flex: 1 1 0;
  min-height: 0;
}

.product-card-row .product-card-visual {
  height: auto;
  width: 104px;
  flex-shrink: 0;
  font-size: 1.75rem;
}

.product-card-row .card-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Docs-style "Go to X" affordance at the foot of each product card. */
.product-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--varial-primary, #2563EB);
}

.product-card-cta i {
  transition: transform 150ms ease;
}

.product-card:hover .product-card-cta i {
  transform: translateX(3px);
}

/* ── Product card base ───────────────────────────────────────── */
.product-card {
  background: linear-gradient(165deg, var(--varial-white, #ffffff) 0%, rgba(0, 0, 0, 0.02) 100%);
  border: 1px solid var(--varial-border, #E7E0CC);
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: var(--varial-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.06));
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
  cursor: pointer;
}

.product-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--varial-shadow-md, 0 6px 16px rgba(0, 0, 0, 0.10));
  border-color: var(--varial-primary, #2563EB);
}

/* Dark mode — the base card background is a near-white gradient
   (var(--varial-white)), which does not flip with the theme, so the trio
   glared white on the navy page. Repaint it on the dark card surface, mirroring
   the .report-card dark override below. Text tokens (gray-800/-500) already flip. */
[data-bs-theme="dark"] .product-card {
  background: linear-gradient(165deg, var(--varial-card-bg, #1E293B) 0%, rgba(0, 0, 0, 0.20) 100%);
  border-color: var(--varial-border, #334155);
}

/* ── Visual panel (coloured image area at card top) ─────────── */
.product-card-visual {
  height: 160px;
  color: var(--varial-white, #ffffff);
  font-size: 2.5rem;
  position: relative;
  overflow: hidden;
}

/* Dot-grid texture overlay */
.product-card-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
}

.product-card-visual-price {
  background: linear-gradient(135deg, var(--varial-primary, #2563EB) 0%, var(--varial-primary-light, #60A5FA) 100%);
}

.product-card-visual-positions {
  background: linear-gradient(135deg, var(--varial-amber-dark, #D97706) 0%, var(--varial-amber, #F59E0B) 100%);
}

.product-card-visual-var {
  background: linear-gradient(135deg, var(--varial-secondary, #16A34A) 0%, var(--varial-secondary-light, #4ADE80) 100%);
}

.product-card-visual-market {
  background: linear-gradient(135deg, var(--varial-primary-dark, #1D4ED8) 0%, var(--varial-primary, #2563EB) 100%);
}

/* ── Product card text ───────────────────────────────────────── */
.product-card-title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--varial-gray-800, #1C1917);
}

.product-card-desc {
  font-size: 0.8125rem;
  color: var(--varial-gray-500, #6B6763);
  line-height: 1.55;
}

/* ── Product icons — glass on dark ──────────────────────────── */
.product-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--varial-radius-sm, 0.25rem);
}

.product-icon i {
  font-size: 1rem;
}

.product-icon-lg {
  width: 52px;
  height: 52px;
}

.product-icon-lg i {
  font-size: 1.4rem;
}

.product-icon-sm {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.product-icon-sm i {
  font-size: 0.75rem;
}

/* Icon containers set color directly so the <i> inherits from the nearest
   parent rather than from the outer <a> link — this reliably beats Bootstrap's
   link colour regardless of cascade order. */

/* Spot — primary */
.product-icon-spot {
  background: rgba(37, 99, 235, 0.1);
  color: var(--varial-primary, #2563EB);
}

/* Positions — amber */
.product-icon-positions {
  background: rgba(245, 158, 11, 0.12);
  color: var(--varial-amber, #F59E0B);
}

/* VAR — amber-dark */
.product-icon-var {
  background: rgba(217, 119, 6, 0.12);
  color: var(--varial-amber-dark, #D97706);
}

/* Revert — primary blue */
.product-icon-market {
  background: rgba(37, 99, 235, 0.1);
  color: var(--varial-primary, #2563EB);
}

/* ── Section headings ─────────────────────────────────────────────── */
.dashboard-section-heading {
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--varial-gray-500, #6B6763);
  margin: 0;
}

/* ── Teams table ─────────────────────────────────────────────── */
.dashboard-teams-table th {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--varial-gray-500, #6B6763);
  padding: 0.85rem 0.75rem;
  border-bottom-width: 1px;
}

.dashboard-teams-table td {
  padding: 0.75rem;
  vertical-align: middle;
  font-size: 0.875rem;
}

/* ── Wiki editorial feed ─────────────────────────────────────── */
.wiki-feed {
}

.wiki-feed-item {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid rgba(231, 224, 204, 0.55);
  color: var(--varial-gray-700, #38352F);
  transition: background 0.1s;
}

.wiki-feed-item:last-child {
  border-bottom: none;
}

.wiki-feed-item:hover {
  color: var(--varial-gray-700, #38352F);
  text-decoration: none;
}

.wiki-feed-item:hover .wiki-feed-title {
  color: var(--varial-primary, #2563EB);
}

.wiki-feed-item:hover .wiki-feed-arrow {
  color: var(--varial-primary, #2563EB);
}

.wiki-feed-left {
  flex: 0 0 116px;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.wiki-feed-date {
  font-size: 0.75rem;
  color: var(--varial-gray-400, #9A9690);
  white-space: nowrap;
}

.wiki-feed-cat {
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--varial-primary, #2563EB);
}

.wiki-feed-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.wiki-feed-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--varial-gray-700, #38352F);
  transition: color 0.15s;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wiki-feed-summary {
  font-size: 0.8125rem;
  color: var(--varial-gray-500, #6B6763);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wiki-feed-arrow {
  flex-shrink: 0;
  color: var(--varial-gray-300, #CCC9C3);
  font-size: 0.75rem;
  transition: color 0.15s;
}

/* ── Support bar — minimal inline link row ───────────────────── */
.support-bar {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0.75rem 1.25rem;
  background: var(--varial-white, #ffffff);
  border: 1px solid var(--varial-border, #E7E0CC);
  border-radius: var(--varial-radius, 0.375rem);
  flex-wrap: wrap;
}

.support-bar-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--varial-gray-500, #6B6763);
}

.support-bar-links {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.support-bar-link {
  display: inline-flex;
  align-items: center;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--varial-primary, #2563EB);
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: color 0.15s;
}

.support-bar-link:hover {
  color: var(--varial-primary-dark, #1D4ED8);
  text-decoration: none;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1199.98px) {
  /* Below lg the two halves stack (Bootstrap col), so the VAR feature sits above
     the trio. Cap the feature visual so it doesn't dominate the fold, and let the
     trio take natural height (the h-100 stack no longer has a sibling to match, so
     the flex:1 rows would otherwise collapse and hide the products). */
  .product-card-feature .product-card-visual {
    min-height: 160px;
  }

  .product-card-row {
    flex: 0 0 auto;
  }

  .wiki-feed-left {
    flex: 0 0 96px;
  }
}

@media (max-width: 767.98px) {
  /* On a phone, compact the hero (drop its subtitle) and tighten the cards:
     a shorter VAR feature visual and narrower trio icons, descriptions hidden
     on the stacked rows so the trio stays tight. */
  .page-hero-sub {
    display: none;
  }

  .product-card .card-body {
    padding: 0.6rem 0.75rem;
  }

  .product-card-feature .product-card-visual {
    min-height: 120px;
    font-size: 2.5rem;
  }

  .product-card-row .product-card-visual {
    width: 72px;
    font-size: 1.4rem;
  }

  .product-card-title {
    font-size: 0.9375rem;
  }

  .product-card-row .product-card-desc {
    display: none;
  }

  .wiki-feed-item {
    gap: 0.875rem;
  }

  .wiki-feed-left {
    flex: 0 0 80px;
  }
}

/* ── Report-an-issue CTA card (sits beside the wiki feed) ────── */
.report-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--varial-white, #ffffff) 0%, rgba(245, 158, 11, 0.06) 100%);
  border: 1px solid var(--varial-border, #E7E0CC);
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}

.report-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--varial-shadow-md, 0 6px 16px rgba(0, 0, 0, 0.10));
  border-color: var(--varial-amber, #F59E0B);
}

[data-bs-theme="dark"] .report-card {
  background: linear-gradient(160deg, var(--varial-card-bg, #1E293B) 0%, rgba(245, 158, 11, 0.12) 100%);
  border-color: rgba(245, 158, 11, 0.35);
}

.report-card-badge {
  align-self: flex-start;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--varial-amber-dark, #D97706);
  background: rgba(245, 158, 11, 0.14);
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  margin-bottom: 0.85rem;
}

.report-card-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--varial-radius, 0.375rem);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(245, 158, 11, 0.12);
  color: var(--varial-amber, #F59E0B);
  font-size: 1.35rem;
  margin-bottom: 0.85rem;
}

.report-card-title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--varial-gray-800, #1C1917);
  margin-bottom: 0.4rem;
}

.report-card-desc {
  font-size: 0.8125rem;
  color: var(--varial-gray-500, #6B6763);
  line-height: 1.55;
  margin-bottom: 1rem;
}

.report-card-cta {
  display: inline-flex;
  align-items: center;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--varial-amber-dark, #D97706);
  transition: color 0.15s;
}

.report-card:hover .report-card-cta {
  color: var(--varial-amber, #F59E0B);
}

/* ── Dashboard footer — styles live in css/components/page-hero.css ── */