/* 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). */

/* ── Split layout: Price-it / Value-it stacked (left 1/3) + NEM map (right 2/3) ── */
.product-split-left {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
}

/* Content-led cards — name, problem statement, description — rather than a
   big decorative icon-on-colour banner. Colour is the icon badge + the CTA
   button; the card itself stays a plain white surface (matching the
   sidebar/page-hero hairline border + radius) so it stands out against the
   page's sage background instead of blending into it. */
.product-split-card {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  background: var(--varial-white, #fff);
  border: 1px solid rgba(4, 43, 29, 0.08);
  border-radius: var(--varial-radius-lg, 0.75rem);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.product-split-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -16px rgba(20, 20, 10, 0.30);
}
.product-split-card > .card-body {
  flex: 1 1 auto;
  min-height: 0;
  justify-content: center;
}

.product-split-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
  font-size: 1rem;
  color: var(--varial-white, #fff);
  margin-bottom: 0.875rem;
}
.product-split-card--blue .product-split-card-icon { background: var(--varial-primary, #2563EB); }
.product-split-card--green .product-split-card-icon { background: var(--varial-secondary, #16A34A); }

.product-split-card-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--varial-gray-900, #131210);
  margin-bottom: 0.375rem;
}
.product-split-card-desc {
  font-size: 0.875rem;
  color: var(--varial-gray-500, #6B6763);
  line-height: 1.5;
  margin-bottom: 1rem;
}
.product-split-card-capabilities {
  display: grid;
  gap: 0.4rem;
  margin: 0.25rem 0 0;
  padding: 0;
  list-style: none;
  color: var(--varial-gray-700, #44403C);
  font-size: 0.8125rem;
}
.product-split-card-capabilities li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.product-split-card-capabilities i {
  color: var(--varial-success, #16A34A);
  font-size: 0.6875rem;
}
.product-split-card-cta {
  margin-top: 1.5rem;
  align-self: flex-start;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--varial-white, #fff);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1.1rem;
  border-radius: 0.5rem;
  transition: background 150ms ease, transform 150ms ease;
}
.product-split-card--blue .product-split-card-cta { background: var(--varial-primary, #2563EB); }
.product-split-card--green .product-split-card-cta { background: var(--varial-secondary, #16A34A); }
.product-split-card--blue:hover .product-split-card-cta { background: var(--varial-primary-dark, #1D4ED8); }
.product-split-card--green:hover .product-split-card-cta { background: var(--varial-secondary-dark, #15803D); }
.product-split-card-cta i { transition: transform 150ms ease; }
.product-split-card:hover .product-split-card-cta i { transform: translateX(3px); }

/* Map + cards are the dominant block on the page, but should not claim an
   entire laptop viewport and turn the product cards into mostly empty space.
   Desktop
   only: below lg the map and product columns stack instead of sitting
   side by side, so forcing 82% of the viewport on the row inflated the
   required height and squeezed the (still height:100%-driven) product
   column shorter than its own cards' content — the cards' "Get started"
   buttons rendered pushed below their own card box, into the next card. */
@media (min-width: 992px) {
  .product-featured-row {
    min-height: clamp(38rem, 62vh, 44rem);
  }
}
.product-split-right {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  height: 100%;
}
/* Map card/legend visuals, including the "What is the NEM" top pane, live in
   css/components/nem-map.css (.nem-map-card, .nem-map-info, .nem-map-legend*)
   — shared with the marketing home page. */
.product-split-right .nem-map-card {
  min-height: 18rem;
  /* .nem-map-card doesn't set its own border, so it fell back to the
     generic .card border (--varial-border, a visible warm tan) while
     .product-split-card next to it overrides to this same subtle
     dark-tinted hairline — the two card groups read as inconsistent. */
  border-color: rgba(4, 43, 29, 0.08);
}

@media (max-width: 991.98px) {
  .product-split-left { flex-direction: row; margin-bottom: 1rem; height: auto; }
  /* .product-split-card is flex:1 1 0 with min-height:0 — at desktop that's
     an equal three-way(ish) split of .product-split-left's definite
     height:100% (matching the map). With height:auto here instead, there's
     no available space for flex-grow to distribute, and flex-basis:0 +
     min-height:0 give the card no content-based floor either — it
     collapsed to ~0 height with its own content (icon, title, button)
     overflowing below it into the next card. Size to content instead. */
  .product-split-card { flex: 0 0 auto; }
  .product-split-right { height: auto; }
  .product-split-right .nem-map-card { min-height: 22rem; }
}
@media (max-width: 575.98px) {
  .product-split-left { flex-direction: column; }
  /* At phone width the info pane's paragraphs wrap onto many lines, tall
     enough on their own to consume the map card's entire min-height — the
     actual .nem-map (flex:1 1 auto, min-height:0) then had nothing left
     and rendered at 0 height. Floor it so the map is always visible; the
     card just grows taller to fit, which is fine, it's no longer capped. */
  .product-split-right .nem-map { min-height: 14rem; }
}

/* Prototyping a light sage page background (matching the marketing home
   page) instead of the site's warm cream — scoped to this page via
   body_class so it doesn't change anything else yet. */
.dashboard-page {
  background-color: #F3F5F1;
}

/* Faint dot texture under the cards, so the page below the header isn't
   an empty void. Scoped to the dashboard page via body_class. */
.dashboard-page .content {
  background-image: radial-gradient(rgba(4, 43, 29, 0.05) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* Bootstrap's py-3 (1rem, !important) still leaves the page content 0.25rem
   lower than the floating sidebar's 0.75rem (--vrl-sidebar-gap) top gap (the
   empty app-nav wrapper above it no longer adds its own margin — see
   .app-nav in layout.css) — pull whichever block renders first (guest CTA or
   the product/map row) up by that difference to line up the two top edges. */
@media (min-width: 1200px) {
  .dashboard-page .content > .container-fluid.py-3 > *:first-child {
    margin-top: calc(var(--vrl-sidebar-gap, 0.75rem) - 1rem);
  }
}

/* ── 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;
}

.product-card-tagline {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--varial-gray-900, #131210);
  line-height: 1.3;
}

/* 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: var(--varial-white, #ffffff);
  border: none;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(20, 20, 10, 0.05), 0 14px 32px -16px rgba(20, 20, 10, 0.22);
  transition: transform 220ms ease, box-shadow 220ms ease;
  cursor: pointer;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 8px rgba(20, 20, 10, 0.06), 0 24px 44px -16px rgba(20, 20, 10, 0.30);
}

/* Colour-matched glow on hover, echoing the marketing hero's CTA glow. */
.product-card-accent-blue:hover {
  box-shadow: 0 4px 8px rgba(20, 20, 10, 0.06), 0 24px 44px -14px rgba(37, 99, 235, 0.35);
}
.product-card-accent-green:hover {
  box-shadow: 0 4px 8px rgba(20, 20, 10, 0.06), 0 24px 44px -14px rgba(22, 163, 74, 0.35);
}

/* 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 ── */