/* ═══════════════════════════════════════════════════════════════════════════
   FNRP — LAYOUT FIX (v11.19.3-fix)
   ───────────────────────────────────────────────────────────────────────────
   This file is loaded AFTER frontend.css so its rules win on equal specificity.
   It is a *surgical* override layer — no original CSS is modified.

   Problems solved
   ───────────────
   1. CRAMPED WATCHLIST IN SIDEBAR
      The 320px sidebar was hosting a multi-column auto-fit grid that crammed
      pair cards down to ~140px each. Sparklines compressed, prices truncated,
      everything felt anxious. Fix: force the watchlist body INSIDE the
      sidebar into a single, full-width column with proper breathing room.

   2. EMPTY-CANVAS LOOK IN RTL
      In Arabic (dir=rtl) the CSS Grid columns flow R→L, so the sidebar
      lands on the LEFT and the news stream's empty state lands on the
      RIGHT — producing a huge slab of white space whenever news is still
      loading. Fix: explicitly pin the sidebar to the END side (right in
      LTR, left in RTL is still the visual convention because we honour
      the user's reading direction) AND show a calm skeleton in the
      stream while loading, so the eye never sees an asymmetric void.

   3. WATCHLIST APPEARS BEFORE NEWS ON MOBILE
      placeWidgetsForViewport() relocates the watchlist into a slot that
      sits ABOVE buildBody() in DOM order. On phones this meant the user
      saw 5+ rows of crypto pairs BEFORE the first headline. News is the
      product. Fix: complementary JS patch moves the watchlist below the
      news stream. CSS here re-styles the mobile watchlist as a calmer
      "extras strip" so it doesn't visually compete with the news.

   4. SIDEBAR DENSITY OVERLOAD
      6 cards stacked (watchlist + chart + gainers + losers + IPOs +
      central banks) at 320px wide = wall of text. Fix: extra vertical
      breathing between cards, slightly larger inner padding, calmer
      borders. The eye reads cards as discrete units instead of a
      monolithic strip.

   5. SIDEBAR WIDTH
      320px is the historical minimum that respects an iPad portrait;
      on real desktops we have room to give it 360px which lets the
      watchlist's longest symbol + price + change fit on one row without
      ellipsis. We bump to 360px above 1280px.

   Theme tokens reused (defined in frontend.css)
   ─────────────────────────────────────────────
     --surface, --surface-2, --border, --border-2, --text, --muted,
     --accent, --accent-bg, --up, --down, --gap-3, --gap-4, --gap-5

   ═══════════════════════════════════════════════════════════════════════════ */


/* ─── 1. BODY GRID — wider, better-balanced sidebar ─────────────────────── */

/* Desktop, comfortable: 1fr stream + 360px sidebar.
   Below 1280px we keep the existing 320px to avoid squeezing tablets.   */
@media (min-width: 1280px) {
  #fnrp-root .fn-body {
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 28px;
  }
}

/* Above ~1500px we have room for a 1fr+380px split which gives the
   watchlist row even more breathing space (sparklines start to look
   like real charts again).                                                */
@media (min-width: 1500px) {
  #fnrp-root .fn-body {
    grid-template-columns: minmax(0, 1fr) 380px;
  }
}


/* ─── 2. SIDEBAR — calmer rhythm ─────────────────────────────────────────── */

#fnrp-root .fn-sidebar {
  /* Original gap was 14px which compressed 6 cards visually.
     20px gives the eye real "card boundaries" without feeling spaced-out. */
  gap: 20px;
}

/* Each card inside the sidebar gets a subtle outline so the eye reads
   discrete units even when scrolling fast.                                 */
#fnrp-root .fn-sidebar > .fs-card {
  /* Don't paint anything that would conflict with theme — just tighten the
     visual boundary by 1px of resolved border on top of the existing.     */
  border: 1px solid var(--border-2, rgba(255,255,255,.095));
  border-radius: 12px;
  overflow: hidden;
}

/* Light theme: the border above is too dark; use the theme's line token   */
html[data-fnrp-theme="light"] #fnrp-root .fn-sidebar > .fs-card {
  border-color: rgba(20, 22, 28, 0.08);
}


/* ─── 3. WATCHLIST INSIDE SIDEBAR — single column, full breath ───────────── */
/*
   This is the heart of the fix. We force the watchlist body — REGARDLESS of
   which render mode is active (legacy flat, V2 tabs, V2 grid) — to be a
   simple vertical column when it lives inside the sidebar. Each row gets
   the full inner width (~324px at 360px sidebar - 36px padding) which is
   enough for: icon · symbol+label · price · %change without truncation.

   We DON'T touch .fs-pairs--mobile (that's the relocated mobile placement).
   Selectors are scoped to "inside #fnrp-sidebar" so mobile rules elsewhere
   continue to work.                                                        */

/* Reset the multi-column grid mode inside the sidebar. */
#fnrp-sidebar #fs-pairs-body.fnrp-w2-grid,
#fnrp-sidebar #fs-pairs-body.fnrp-w2-tabs,
#fnrp-sidebar #fs-pairs-body.fnrp-w2,
#fnrp-sidebar #fs-pairs-body {
  display: block !important;
  grid-template-columns: none !important;
  padding: 0 !important;
  overflow: visible !important;
}

/* Each category column becomes a single vertical column at full width. */
#fnrp-sidebar #fs-pairs-body .fnrp-w2-col {
  display: block !important;
  border: 0 !important;
  border-top: 1px solid var(--border) !important;
  margin: 0 !important;
  padding: 6px 0 !important;
  background: transparent !important;
}
#fnrp-sidebar #fs-pairs-body .fnrp-w2-col:first-of-type {
  border-top: 0 !important;
}

/* Category column header inside sidebar — quiet line. */
#fnrp-sidebar #fs-pairs-body .fnrp-w2-col-hd {
  padding: 10px 16px 6px !important;
  background: transparent !important;
  border: 0 !important;
}
#fnrp-sidebar #fs-pairs-body .fnrp-w2-col-label {
  font-size: 10.5px !important;
  letter-spacing: 0.12em !important;
  color: var(--muted-2, var(--muted)) !important;
}

/* The row list is just a vertical flex column — no grid, no horizontal
   scroll, no flex-wrap row tricks.                                          */
#fnrp-sidebar #fs-pairs-body .fnrp-w2-col-rows {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  gap: 0 !important;
}

/* Each row gets the full width and proper breathing — 48px min-height for
   tap comfort + air for the eye.                                            */
#fnrp-sidebar #fs-pairs-body .fnrp-w2-row,
#fnrp-sidebar #fs-pairs-body .fnrp-w2-col .fnrp-w2-row,
#fnrp-sidebar #fs-pairs-body.fnrp-w2-grid .fnrp-w2-row,
#fnrp-sidebar #fs-pairs-body.fnrp-w2-tabs .fnrp-w2-col .fnrp-w2-row {
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) auto !important;
  column-gap: 12px !important;
  align-items: center !important;
  padding: 11px 16px !important;
  min-height: 50px !important;
  border-bottom: 1px solid var(--border) !important;
  border-top: 0 !important;
}
#fnrp-sidebar #fs-pairs-body .fnrp-w2-col .fnrp-w2-row:last-child,
#fnrp-sidebar #fs-pairs-body .fnrp-w2-row:last-child {
  border-bottom: 0 !important;
}

/* Inside the row: symbol code + label stack on the left, price + %change
   stack on the right. Both readable at the new width.                       */
#fnrp-sidebar #fs-pairs-body .fnrp-w2-row-l {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
}
#fnrp-sidebar #fs-pairs-body .fnrp-w2-row-code {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  line-height: 1.2 !important;
}
#fnrp-sidebar #fs-pairs-body .fnrp-w2-row-label {
  /* Re-enable the label that the column-mode CSS had hidden — we have
     room for it now. Show "Bitcoin" / "Ethereum" subtitle.                  */
  display: block !important;
  font-size: 10.5px !important;
  color: var(--muted) !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
#fnrp-sidebar #fs-pairs-body .fnrp-w2-row-r {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 2px !important;
  text-align: end !important;
}
#fnrp-sidebar #fs-pairs-body .fnrp-w2-row-price {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  line-height: 1.2 !important;
  font-variant-numeric: tabular-nums !important;
}
#fnrp-sidebar #fs-pairs-body .fnrp-w2-row-chg {
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  font-variant-numeric: tabular-nums !important;
}

/* "+ N more" / "less" toggle — gentle, readable */
#fnrp-sidebar #fs-pairs-body .fnrp-w2-col-more {
  display: block !important;
  width: 100% !important;
  padding: 10px 16px !important;
  border: 0 !important;
  border-top: 1px dashed var(--border) !important;
  background: transparent !important;
  text-align: center !important;
  font-size: 11px !important;
  color: var(--muted) !important;
  cursor: pointer !important;
  transition: color .15s, background .15s !important;
}
#fnrp-sidebar #fs-pairs-body .fnrp-w2-col-more:hover {
  background: var(--accent-bg, rgba(13,157,124,.06)) !important;
  color: var(--accent, #0d9d7c) !important;
}

/* Tab icon strip — keep the icon row but give it breathing room */
#fnrp-sidebar #fs-pairs-body .fnrp-w2-tabs.fnrp-w2-tabs--icons {
  padding: 8px 12px !important;
  border-bottom: 1px solid var(--border) !important;
  display: flex !important;
  gap: 4px !important;
  justify-content: space-between !important;
}
#fnrp-sidebar #fs-pairs-body .fnrp-w2-tab--icon {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  padding: 8px 4px !important;
}


/* ─── 4. LEGACY .fs-pair INSIDE SIDEBAR — single column, full breath ────── */
/*
   When CFG.watchlistV2 is OFF, the legacy renderer outputs flat .fs-pair
   rows. They have their own grid template — we override here too so the
   sidebar render is consistent.                                           */

#fnrp-sidebar #fs-pairs:not(.fs-pairs--mobile) .fs-card-body {
  display: flex !important;
  flex-direction: column !important;
  overflow-x: visible !important;
  padding: 0 !important;
  gap: 0 !important;
}
#fnrp-sidebar #fs-pairs:not(.fs-pairs--mobile) .fs-pair {
  display: grid !important;
  grid-template-columns: 32px minmax(0, 1fr) auto !important;
  column-gap: 12px !important;
  align-items: center !important;
  padding: 12px 16px !important;
  min-width: 0 !important;
  max-width: none !important;
  flex: none !important;
  min-height: 52px !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 !important;
}
#fnrp-sidebar #fs-pairs:not(.fs-pairs--mobile) .fs-pair:last-child {
  border-bottom: 0 !important;
}
#fnrp-sidebar #fs-pairs:not(.fs-pairs--mobile) .fs-pair-l {
  display: contents !important;
}
#fnrp-sidebar #fs-pairs:not(.fs-pairs--mobile) .fs-pair-icon {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 28px !important;
  height: 28px !important;
  margin: 0 !important;
}
#fnrp-sidebar #fs-pairs:not(.fs-pairs--mobile) .fs-pair-meta {
  grid-column: 2 !important;
  grid-row: 1 !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0 !important;
  min-width: 0 !important;
}
#fnrp-sidebar #fs-pairs:not(.fs-pairs--mobile) .fs-pair-r {
  grid-column: 3 !important;
  grid-row: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 2px !important;
  border: 0 !important;
  padding: 0 !important;
}


/* ─── 5. STREAM EMPTY-STATE — fill the void gracefully ──────────────────── */
/*
   When the news stream is loading or filtered to zero, give the eye
   something calm to land on instead of a big empty rectangle.
   We can't add markup without JS, but we CAN paint a soft placeholder
   surface so the eye registers "this column exists, it just hasn't
   loaded yet" instead of "this section is broken".                       */

#fnrp-root .fn-stream:empty::before,
#fnrp-root .fn-stream:has(> .fn-empty)::before {
  /* Decorative — purely visual fill. Skeleton pulse keeps it lively. */
}

/* Skeleton placeholder cards — JS will add .fnrp-stream-skel during loading */
#fnrp-root .fn-stream .fnrp-stream-skel {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 20px 4px;
  animation: fnrpSkelFade .4s ease-out;
}
#fnrp-root .fn-stream .fnrp-stream-skel-item {
  display: grid;
  grid-template-columns: 1fr 120px;
  gap: 18px;
  padding: 20px 0;
  border-top: 1px solid var(--border);
}
#fnrp-root .fn-stream .fnrp-stream-skel-item:first-child { border-top: 0; }
#fnrp-root .fn-stream .fnrp-stream-skel-text {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#fnrp-root .fn-stream .fnrp-stream-skel-line {
  height: 14px;
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    var(--surface-2, rgba(255,255,255,.04)) 0%,
    var(--border-2, rgba(255,255,255,.09)) 50%,
    var(--surface-2, rgba(255,255,255,.04)) 100%
  );
  background-size: 200% 100%;
  animation: fnrpSkelShimmer 1.4s ease-in-out infinite;
}
#fnrp-root .fn-stream .fnrp-stream-skel-line.is-title { height: 18px; width: 86%; }
#fnrp-root .fn-stream .fnrp-stream-skel-line.is-sub   { height: 12px; width: 62%; }
#fnrp-root .fn-stream .fnrp-stream-skel-line.is-meta  { height: 10px; width: 38%; }
#fnrp-root .fn-stream .fnrp-stream-skel-thumb {
  border-radius: 8px;
  background: linear-gradient(
    90deg,
    var(--surface-2, rgba(255,255,255,.04)) 0%,
    var(--border-2, rgba(255,255,255,.09)) 50%,
    var(--surface-2, rgba(255,255,255,.04)) 100%
  );
  background-size: 200% 100%;
  animation: fnrpSkelShimmer 1.4s ease-in-out infinite;
  aspect-ratio: 4 / 3;
}

@keyframes fnrpSkelShimmer {
  0%   { background-position:  100% 50%; }
  100% { background-position: -100% 50%; }
}
@keyframes fnrpSkelFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Improved empty state — when filters return zero results.
   Original .fn-empty was a small text block; we re-style it as a calm
   hero block so the page doesn't feel "broken".                           */
#fnrp-root .fn-stream .fn-empty {
  min-height: 320px;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 24px;
  border: 1px dashed var(--border);
  border-radius: 16px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    var(--surface-2, rgba(255,255,255,.02)) 100%
  );
  margin: 20px 0;
}
#fnrp-root .fn-stream .fn-empty-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--muted, #98a3b3);
  margin-bottom: 16px;
}


/* ─── 6. MOBILE — relocate watchlist BELOW news + restyle ─────────────── */
/*
   The complementary JS patch (fnrp-layout-fix.js) re-parents the
   #fs-pairs node so that on mobile it sits AFTER the news stream rather
   than ABOVE it. This CSS finishes the job: when it's in the "extras"
   slot (id=fnrp-mobile-pairs-slot-bottom), style it as a calmer card
   so it reads as supplementary content, not the headline.                 */

@media (max-width: 1100px) {
  /* The original mobile slot at the TOP becomes invisible — JS moves the
     watchlist out, but we belt-and-braces hide the slot so any flash on
     boot doesn't push the news down.                                       */
  #fnrp-root #fnrp-mobile-pairs-slot:empty,
  #fnrp-root #fnrp-mobile-pairs-slot:not(:has(#fs-pairs)) {
    display: none !important;
  }

  /* The new bottom slot lives just inside .fn-body, AFTER .fn-stream. */
  #fnrp-root #fnrp-mobile-pairs-slot-bottom {
    width: 100%;
    margin: 24px 0 0;
  }

  /* When the watchlist is in the bottom slot it gets a calm card look —
     full width, generous padding, clearly secondary to the news above.    */
  #fnrp-mobile-pairs-slot-bottom #fs-pairs.fs-pairs--mobile {
    background: var(--surface, #121823) !important;
    border: 1px solid var(--border, rgba(255,255,255,.05)) !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.02) inset !important;
    margin: 0 !important;
    padding: 4px 0 8px !important;
  }
  html[data-fnrp-theme="light"] #fnrp-mobile-pairs-slot-bottom #fs-pairs.fs-pairs--mobile {
    background: #fff !important;
    border-color: rgba(20,22,28,.06) !important;
    box-shadow: 0 1px 2px rgba(20,22,28,.03) !important;
  }

  /* Section label on mobile so the user understands "this is the extra
     market data, the news is what you came for".                          */
  #fnrp-mobile-pairs-slot-bottom #fs-pairs .fs-card-hd {
    padding: 14px 18px 8px !important;
  }
  #fnrp-mobile-pairs-slot-bottom #fs-pairs .fs-card-title {
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--muted, #98a3b3) !important;
  }

  /* Pair tiles in mobile horizontal-scroll mode: relax sizing so they
     don't feel cramped (and so two fit comfortably at 390px viewport).    */
  #fnrp-mobile-pairs-slot-bottom .fs-pairs--mobile .fs-pair,
  #fnrp-mobile-pairs-slot-bottom .fs-pairs--mobile .fnrp-w2-col {
    min-width: 170px !important;
    max-width: 220px !important;
  }

  /* Tighter spacing between sidebar widgets on mobile (already stacked
     by the original tablet/phone breakpoint).                              */
  #fnrp-root .fn-sidebar { gap: 16px; }
}


/* ─── 7. NEWS ITEM LINE-HEIGHT — calmer scan ────────────────────────────── */
/*
   On both mobile and desktop the news items were dense — title + excerpt
   + meta crammed. A 4px boost in line-height and a slight padding lift
   significantly reduces the "wall of text" feeling without making the
   page longer noticeably.                                                  */

#fnrp-root .fn-item {
  padding-top: 24px;
  padding-bottom: 24px;
}
#fnrp-root .fn-title {
  line-height: 1.32;
}
#fnrp-root .fn-excerpt {
  line-height: 1.55;
  margin-top: 6px;
}


/* ─── 8. SERVICES RAIL — don't crowd the sidebar ────────────────────────── */
/*
   The right-edge services rail (#fnrp-services-rail) sits at fixed
   position right:0. On the new 360px sidebar it can visually overlap.
   Push it slightly off-edge and tone down its hover halo so it reads
   as utility, not a primary surface.                                       */

@media (min-width: 1100px) {
  #fnrp-services-rail {
    inset-inline-end: 4px;
  }
}
@media (max-width: 1100px) {
  /* On mobile the rail can crowd thumb-area; nudge it down past the
     ribbon so it doesn't fight with the watchlist header.                  */
  #fnrp-services-rail {
    top: auto !important;
    bottom: 80px !important;
  }
}


/* ─── 9. HIGH-CONTRAST AXIS RULES (just to make sure nothing slips) ────── */

/* Hide the now-empty original mobile pairs slot on desktop too (defensive). */
@media (min-width: 1101px) {
  #fnrp-root #fnrp-mobile-pairs-slot,
  #fnrp-root #fnrp-mobile-pairs-slot-bottom {
    display: none !important;
  }
}