/* =========================================
   FRONT PAGE: RANKINGS (4-ROW FP LIST + SPARKLINE)
========================================= */

.mdm-rankings-card{
  border-radius: 16px;
  border: 1px solid var(--mdm-gray-150);
  overflow: hidden;
  background: var(--mdm-white);
}

.mdm-rankings-head{
  padding: .9rem;
  border-bottom: 1px solid var(--mdm-gray-150);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .75rem;
}

.mdm-rankings-title{
  font-weight: 950;
  letter-spacing: -.02em;
}

.mdm-rankings-body{
  padding: .75rem .9rem;
}

.mdm-rankings-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .7rem;
}

.mdm-rankings-foot{
  padding: .8rem .9rem;
  border-top: 1px solid var(--mdm-gray-150);
  background: var(--mdm-white);
}

/* =========================================
   ITEM WRAPPER (button, whole card clickable)
========================================= */

.mdm-rankings-item{
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Using a <button> as the clickable wrapper */
.mdm-rankings-link--fp{
  display: block;
  width: 100%;
  box-sizing: border-box;

  padding: .75rem .8rem;
  border-radius: 14px;

  background: var(--mdm-gray-100);
  border: 1px solid var(--mdm-gray-150);

  text-align: left;
  color: inherit;
  text-decoration: none;

  cursor: pointer;

  /* remove default button styles */
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--mdm-gray-150);
  font: inherit;
  line-height: inherit;

  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease, border-color 120ms ease;
}

.mdm-rankings-link--fp:hover{
  background: rgba(255,255,255,.60);
  border-color: rgba(18,20,23,.12);
  box-shadow: 0 10px 26px rgba(18,20,23,.08);
  transform: translateY(-1px);
}

.mdm-rankings-link--fp:focus-visible{
  outline: 3px solid rgba(179,25,31,.25);
  outline-offset: 2px;
}

/* =========================================
   Row 1: rank + icon + name
========================================= */

.mdm-rankings-toprow{
  display: grid;
  grid-template-columns: 26px 28px minmax(0, 1fr);
  column-gap: .65rem;
  align-items: center;
  min-width: 0;
}

.mdm-rank{
  width: 26px;
  height: 26px;
  border-radius: 10px;

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

  font-weight: 900;
  font-size: .9rem;
  line-height: 1;

  color: var(--mdm-white);
  background: var(--mdm-red);
}

.mdm-appiconwrap{
  width: 28px;
  height: 28px;

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

.mdm-appicon{
  width: 28px;
  height: 28px;
  border-radius: 8px;
  flex: 0 0 auto;
  box-shadow: 0 8px 18px rgba(18,20,23,.12);
}

.mdm-appname{
  min-width: 0;

  font-weight: 900;
  letter-spacing: -.01em;
  font-size: 1.0rem;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* shared indent under name */
:root{
  --mdm-rankings-indent: calc(26px + 28px + .65rem);
}

.mdm-rankings-dev,
.mdm-rankings-bundle,
.mdm-rankings-deltasrow,
.mdm-rankings-chartcta,
.mdm-rankings-sparkline,
.mdm-rankings-sparkline-loading{
  padding-left: var(--mdm-rankings-indent);
  min-width: 0;
}

/* Row 2/3 */
.mdm-rankings-dev{
  margin-top: .18rem;
  font-size: .80rem;
  font-weight: 700;
  opacity: .65;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mdm-rankings-bundle{
  margin-top: .10rem;
  font-size: .78rem;
  opacity: .52;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Row 4: deltas */
.mdm-rankings-deltasrow{
  margin-top: .40rem;

  display: flex;
  align-items: center;
  gap: .45rem;
  flex-wrap: wrap;
}

.mdm-delta{
  display: inline-flex;
  align-items: baseline;
  gap: .25rem;

  padding: .22rem .46rem;
  border-radius: 999px;

  font-size: .78rem;
  font-weight: 800;
  letter-spacing: -.01em;

  border: 1px solid rgba(18,20,23,.10);
  background: rgba(255,255,255,.62);
}

.mdm-delta-label{
  font-size: .72rem;
  font-weight: 900;
  opacity: .7;
}

.mdm-delta--good{
  color: #0b6b3a;
  border-color: rgba(11,107,58,.22);
  background: rgba(11,107,58,.10);
}

.mdm-delta--bad{
  color: #9b1c1c;
  border-color: rgba(155,28,28,.22);
  background: rgba(155,28,28,.22);
  background: rgba(155,28,28,.10);
}

.mdm-delta--flat{
  color: rgba(18,20,23,.72);
}

.mdm-delta--na{
  color: rgba(18,20,23,.45);
}

/* =========================================
   Row 5: chart CTA + sparkline containers
========================================= */

.mdm-rankings-chartcta{
  margin-top: .35rem;
  padding-top: .25rem;
  border-top: 1px solid rgba(18,20,23,.06);

  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .01em;

  color: rgba(18,20,23,.55);
  opacity: .85;
}

.mdm-rankings-chartcta-text{
  font-style: italic;
}

/* These will be filled by your sparkline fetch */
.mdm-rankings-sparkline{
  margin-top: .55rem;
  padding-top: .15rem;
}

/* Loading row */
.mdm-rankings-sparkline-loading{
  margin-top: .35rem;
  min-height: 22px;

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

.mdm-rankings-loading-text{
  font-size: .82rem;
  opacity: .7;
  font-weight: 700;
}

/* =========================================
   Responsive: drop 7d + 30d on small screens
========================================= */

@media (max-width: 575.98px){
  .mdm-delta--d7,
  .mdm-delta--d30{
    display: none;
  }

  .mdm-rankings-link--fp{
    padding: .72rem .75rem;
  }

  .mdm-rankings-list{
    gap: .65rem;
  }

  .mdm-rankings-toprow{
    column-gap: .6rem;
    grid-template-columns: 26px 28px minmax(0, 1fr);
  }

  :root{
    --mdm-rankings-indent: calc(26px + 28px + .6rem);
  }

  .mdm-rankings-deltasrow{
    gap: .4rem;
  }
}

/* =========================================
   Sparkline should span full card width
========================================= */

.mdm-rankings-sparkline,
.mdm-rankings-sparkline-loading{
  padding-left: 0;
  margin-left: 0;
  width: 100%;
}

.mdm-rankings-sparkline{
  margin-top: .75rem;
  padding-top: .25rem;
}

.mdm-rankings-sparkline svg,
.mdm-rankings-sparkline canvas,
.mdm-rankings-sparkline img{
  width: 100% !important;
  max-width: 100%;
  height: auto;
  display: block;
}