/* =========================================================
   Darkpool Chart Explorer — App Rankings (MDM-3.0 adaptation)
   File: darkpool-app-rankings.css
   ========================================================= */

:root{
  --dp-text: #121417;
  --dp-muted: rgba(18, 20, 23, .55);
  --dp-muted-2: rgba(18, 20, 23, .45);
  --dp-border: rgba(18, 20, 23, .12);

  --dp-pill-label-bg: rgba(170, 35, 45, .10);
  --dp-pill-radius: 999px;

  --dp-good: #138a3d;
  --dp-bad:  #b42318;
  --dp-flat: rgba(18, 20, 23, .55);

  --dp-good-bg: rgba(19, 138, 61, .12);
  --dp-bad-bg:  rgba(180, 35, 24, .12);
  --dp-flat-bg: rgba(18, 20, 23, .08);

  /* Grid sizing */
  --rrank-index-col: 34px;
  --rrank-icon-col: 86px;
  --rrank-gutter: 10px;
  --rrank-row-gap: 4px;
}

/* ---------- Page/container alignment ---------- */
#rrank_carousel.ROC.container-fluid{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#rrank_carousel > .container-fluid{
  max-width: 1180px;
  margin: 0 auto;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

#rrank_carousel .container-fluid{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

@media (max-width: 576px){
  #rrank_carousel > .container-fluid{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ---------- Utility ---------- */
.no_margin{ margin: 0 !important; }
.no-padding{ padding: 0 !important; }

#rrank_list{
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* =========================================================
   ROW styling (memo) — compact rows + dotted separator
   ========================================================= */
.memo.rrank_memo{
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  margin: 0 !important;
  padding: 6px 0 !important;

  border-bottom: 1px dotted var(--dp-border) !important;
}

.memo-block,
.hero-container{
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* JS injects inline padding-left/right on rows; override */
.memo.rrank_memo > .row{
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.memo.rrank_memo .row{
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.memo.rrank_memo .row > [class*="col-"]{
  padding-left: 6px !important;
  padding-right: 6px !important;
}

@media (min-width: 992px){
  .memo.rrank_memo .row > [class*="col-"]{
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}

/* =========================================================
   CSS-only layout: grid per memo
   Flatten ONLY first two rows so inline display:none still works
   ========================================================= */
#rrank_list .rrank_memo{
  display: grid;
  grid-template-columns: var(--rrank-index-col) var(--rrank-icon-col) 1fr;
  grid-auto-rows: auto;
  column-gap: var(--rrank-gutter);
  row-gap: var(--rrank-row-gap);
}

#rrank_list .rrank_memo > .row:nth-of-type(1),
#rrank_list .rrank_memo > .row:nth-of-type(2){
  display: contents !important;
}

/* =========================================================
   IMPORTANT: Bootstrap col-* widths still apply even as grid items.
   This is what causes the meta delta block (col-6) to only take 50%
   and wrap despite extra space. Force those meta columns to size
   from the grid, not from Bootstrap’s flex/grid column widths.
   ========================================================= */
#rrank_list .rrank_memo > .row:nth-of-type(2) > .col-1,
#rrank_list .rrank_memo > .row:nth-of-type(2) > .col-3,
#rrank_list .rrank_memo > .row:nth-of-type(2) > .col-6,
#rrank_list .rrank_memo > .row:nth-of-type(2) > .col-md-8{
  width: auto !important;
  max-width: none !important;
  flex: initial !important;
}

/* Row 1 placement */
#rrank_list .rrank_memo > .row:nth-of-type(1) > .col-1{
  grid-column: 1;
  grid-row: 1;
  align-self: start;
}

#rrank_list .rrank_memo > .row:nth-of-type(1) > .rrank-icon-container{
  grid-column: 2;
  grid-row: 1;
  align-self: start;

  width: var(--rrank-icon-col);
  display: flex;
  flex-direction: column;

  align-items: flex-start;
  justify-content: flex-start;
}

#rrank_list .rrank_memo > .row:nth-of-type(1) > .col-7,
#rrank_list .rrank_memo > .row:nth-of-type(1) > .col-md-8{
  grid-column: 3;
  grid-row: 1;
  align-self: start;
}

/* Row 2 placement */
#rrank_list .rrank_memo > .row:nth-of-type(2) > .col-1{
  grid-column: 1;
  grid-row: 2;
}

#rrank_list .rrank_memo > .row:nth-of-type(2) > .col-3{
  grid-column: 2;
  grid-row: 2;

  display: flex;
  justify-content: flex-start;
}

#rrank_list .rrank_memo > .row:nth-of-type(2) > .col-6,
#rrank_list .rrank_memo > .row:nth-of-type(2) > .col-md-8{
  grid-column: 3;
  grid-row: 2;

  /* ensure this block actually consumes the full remaining width */
  width: 100% !important;
  justify-self: stretch;
}

/* click row spans full width */
#rrank_list .rrank_memo > .row:nth-of-type(3){
  grid-column: 1 / -1;
  grid-row: 3;
}

/* sparkline rows span full width */
#rrank_list .rrank_memo > .row[id^="sparkline_"]{
  grid-column: 1 / -1;
}

/* =========================================================
   Left rank number
   ========================================================= */
.memo.rrank_memo .number{
  font-weight: 800;
  color: var(--dp-text);
  font-size: 0.95rem;
  display: inline-block;
  min-width: 1.25rem;
}

/* =========================================================
   Icon sizing
   ========================================================= */
.rrank-icon-container img{
  width: 76px !important;
  height: 76px !important;
  max-width: none !important;

  border-radius: 16px;
  object-fit: cover;
  background: rgba(18, 20, 23, .04);
  box-shadow: 0 8px 18px rgba(18, 20, 23, .12);
  flex-shrink: 0;
  display: block;
}

@media (max-width: 576px){
  .rrank-icon-container img{
    width: 64px !important;
    height: 64px !important;
    border-radius: 14px;
  }
}

/* =========================================================
   Title + developer block
   ========================================================= */
.memo.rrank_memo > .row:first-of-type .col-7.col-md-8{
  padding-left: 2px !important;
}

p.title{
  margin: 0 !important;
  font-size: 1.22rem;
  line-height: 1.15;
  font-weight: 850;
  color: var(--dp-text);

  display: inline-block;
  padding: 4px 12px;

  /* thinner underline */
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

@media (max-width: 576px){
  p.title{
    font-size: 1.08rem;
    padding: 3px 10px;
  }
}

p.rrank_meta{
  margin: 4px 0 0 0 !important;
  font-size: 0.74rem;
  line-height: 1.15;
  color: var(--dp-muted);
  font-style: italic;
  padding-left: 12px;
}

@media (max-width: 576px){
  p.rrank_meta{
    font-size: 0.72rem;
    padding-left: 10px;
  }
}

/* In meta/click rows, no developer-style padding/italic */
.memo.rrank_memo .row:nth-of-type(2) p.rrank_meta,
.memo.rrank_memo .row:nth-of-type(3) p.rrank_meta{
  padding-left: 0 !important;
  font-style: normal !important;
}

/* =========================================================
   Rank: X under icon (more muted + lighter weight)
   Now targets the explicit class: .app-rank-label
   ========================================================= */
.memo.rrank_memo .app-rank-label{
  width: 100%;
  text-align: left;
  margin: 0 !important;

  /* CHANGE: smaller weight + more muted */
  font-weight: 450;
  font-size: 0.82rem;
  color: var(--dp-muted-2);
}

/* =========================================================
   Delta styling
   - Keep all visible delta pills on ONE line (no wrap)
   - Let the delta container actually use the full width available
   ========================================================= */

/* The inner delta row (inside the meta col) should NOT wrap */
.memo.rrank_memo .row:nth-of-type(2) .col-6.col-md-8 > .row{
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 8px 12px;
  margin-left: 0 !important;
  margin-right: 0 !important;

  width: 100% !important;
  justify-content: flex-start;
}

/* Each delta cell becomes “content-sized” */
.memo.rrank_memo .row:nth-of-type(2) .col-6.col-md-8 > .row > [class*="col-"]{
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* The delta paragraph itself: hide original label text, keep group nowrap */
.memo.rrank_memo .row:nth-of-type(2) .col-6.col-md-8 p.rrank_meta{
  margin: 0 !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;

  font-size: 0 !important;
  line-height: 1.1;

  white-space: nowrap !important;
  max-width: none !important;
}

/* Label text by column position (still safe if you keep the existing markup) */
.memo.rrank_memo .row:nth-of-type(2) .col-6.col-md-8 .row > div:nth-child(1) p.rrank_meta::before{ content: "1-Day:"; }
.memo.rrank_memo .row:nth-of-type(2) .col-6.col-md-8 .row > div:nth-child(2) p.rrank_meta::before{ content: "7-Day:"; }
.memo.rrank_memo .row:nth-of-type(2) .col-6.col-md-8 .row > div:nth-child(3) p.rrank_meta::before{ content: "30-Day:"; }

.memo.rrank_memo .row:nth-of-type(2) .col-6.col-md-8 p.rrank_meta::before{
  font-size: 0.78rem;
  font-weight: 850;
  color: rgba(18, 20, 23, .78);
  background: var(--dp-pill-label-bg);
  padding: 2px 10px;
  border-radius: var(--dp-pill-radius);
  display: inline-block;
  letter-spacing: .1px;

  white-space: nowrap !important;
}

/* Value pill (covers normal output spans) */
.memo.rrank_memo .row:nth-of-type(2) .col-6.col-md-8 p.rrank_meta span{
  font-size: 0.78rem !important;
  font-weight: 900;
  padding: 2px 9px;
  border-radius: var(--dp-pill-radius);

  display: inline-flex;
  align-items: center;
  gap: 4px;

  background: var(--dp-flat-bg);
  color: var(--dp-flat);

  white-space: nowrap !important;
  width: auto !important;
  max-width: none !important;
}

/* If span exists but empty, show "--" (legacy case) */
.memo.rrank_memo .row:nth-of-type(2) .col-6.col-md-8 p.rrank_meta span:empty::before{
  content: "--";
  color: currentColor;
}

/* Explicit no-data span should still render as a pill */
.memo.rrank_memo .row:nth-of-type(2) .col-6.col-md-8 p.rrank_meta .rank_no_data{
  font-size: 0.78rem !important;
  font-weight: 800;
  padding: 2px 9px;
  border-radius: var(--dp-pill-radius);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: var(--dp-flat-bg);
  color: var(--dp-flat);

  white-space: nowrap !important;
}

/* Color-code based on arrow icon */
.memo.rrank_memo .row:nth-of-type(2) .col-6.col-md-8 p.rrank_meta span:has(i.fa-arrow-up),
.memo.rrank_memo .row:nth-of-type(2) .col-6.col-md-8 p.rrank_meta span:has(i.fa-arrow-up-long),
.memo.rrank_memo .row:nth-of-type(2) .col-6.col-md-8 p.rrank_meta span:has(i.fa-caret-up){
  background: var(--dp-bad-bg);
  color: var(--dp-bad);
}

.memo.rrank_memo .row:nth-of-type(2) .col-6.col-md-8 p.rrank_meta span:has(i.fa-arrow-down),
.memo.rrank_memo .row:nth-of-type(2) .col-6.col-md-8 p.rrank_meta span:has(i.fa-arrow-down-long),
.memo.rrank_memo .row:nth-of-type(2) .col-6.col-md-8 p.rrank_meta span:has(i.fa-caret-down){
  background: var(--dp-good-bg);
  color: var(--dp-good);
}

.memo.rrank_memo .row:nth-of-type(2) .col-6.col-md-8 p.rrank_meta span i{
  color: currentColor !important;
  font-size: 0.8rem;
  line-height: 1;
}

/* =========================================================
   Click to show/hide chart
   Now targets the explicit wrapper: .click_to_show_chart
   ========================================================= */
.memo.rrank_memo .row:nth-of-type(3){
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}

/* CHANGE: add top margin via the wrapper span (safe, doesn't fight the <p>) */
.memo.rrank_memo .click_to_show_chart{
  display: inline-block;
  margin-top: 12px;
}

.memo.rrank_memo .row:nth-of-type(3) p.rrank_meta{
  width: 100%;
  text-align: center;

  font-size: 0.80rem !important;
  font-weight: 600;
  color: var(--dp-muted);
  font-style: italic;
  margin: 0 !important; /* wrapper controls spacing now */
}

.memo.rrank_memo .row:nth-of-type(3) i.fa-chart-line{
  color: var(--dp-muted-2);
}

/* =========================================================
   Sparkline / chart sizing
   ========================================================= */
.memo.rrank_memo [id^="sparkline_"]{
  width: 100% !important;
}

.memo.rrank_memo .row[id^="sparkline_"]:not([id$="_loading"]){
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.memo.rrank_memo .row[id^="sparkline_"] svg,
.memo.rrank_memo .row[id^="sparkline_"] canvas{
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  display: block;
}

/* =========================================================
   Loading row (remains hidden by JS)
   ========================================================= */
.memo.rrank_memo .row[id$="_loading"]{
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;

  margin-left: 0 !important;
  margin-right: 0 !important;

  min-height: 84px;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.memo.rrank_memo .row[id$="_loading"] span,
.memo.rrank_memo .row[id$="_loading"] p{
  width: 100%;
  text-align: center;
}

.memo.rrank_memo .row[id$="_loading"] p.rrank_meta{
  margin: 0 !important;

  font-size: 0.92rem !important;
  font-weight: 750;
  color: rgba(18, 20, 23, .70);

  background: rgba(18, 20, 23, .06);
  padding: 6px 12px;
  border-radius: var(--dp-pill-radius);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  white-space: nowrap;
}

/* =========================================================
   Mobile tweaks
   ========================================================= */
@media (max-width: 768px){
  .memo.rrank_memo{
    padding: 8px 0 !important;
  }

  .memo.rrank_memo .row > [class*="col-"]{
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  .memo.rrank_memo .row:nth-of-type(2) .col-6.col-md-8 p.rrank_meta::before{
    font-size: 0.76rem;
  }

  .memo.rrank_memo .row:nth-of-type(2) .col-6.col-md-8 p.rrank_meta span,
  .memo.rrank_memo .row:nth-of-type(2) .col-6.col-md-8 p.rrank_meta .rank_no_data{
    font-size: 0.76rem !important;
  }

  /* slightly tighter gaps on smaller widths */
  .memo.rrank_memo .row:nth-of-type(2) .col-6.col-md-8 > .row{
    gap: 6px 10px;
  }

  /* keep click label spacing reasonable on mobile */
  .memo.rrank_memo .click_to_show_chart{
    margin-top: 10px;
  }
}