/* MBOKA Freedom T2.R22 - Evolution financiere */

.mp-r22-section {
  color: #ebfff4;
}

.mp-r22-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 15px;
}

.mp-r22-kicker {
  color: #89e8b4;
  letter-spacing: .1em;
  font-size: 10px;
  font-weight: 800;
}

.mp-r22-head h3 {
  margin: 6px 0;
  color: #effff5;
}

.mp-r22-head p {
  margin: 0;
  color: #accfbb;
  font-size: 11px;
  line-height: 1.5;
}

.mp-r22-switch {
  display: flex;
  gap: 5px;
  background: #0c241a;
  padding: 4px;
  border-radius: 11px;
}

.mp-r22-switch button,
.mp-r22-footer button {
  color: #cce6d7;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  min-height: 34px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.mp-r22-switch button[aria-pressed="true"] {
  background: #246b4e;
  border-color: #55a87e;
  color: #ffffff;
}

.mp-r22-chart {
  display: grid;
  gap: 10px;
}

.mp-r22-row {
  padding: 13px;
  border-radius: 12px;
  background: #153428;
  border: 1px solid rgba(127,214,169,.13);
}

.mp-r22-row-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.mp-r22-row-head strong {
  color: #eafff2;
  font-size: 12px;
  text-transform: capitalize;
}

.mp-r22-row-head small {
  font-size: 11px;
  font-weight: 700;
}

.mp-r22-positive {
  color: #82e4ae;
}

.mp-r22-negative {
  color: #ffb5a9;
}

.mp-r22-bars {
  display: grid;
  gap: 8px;
}

.mp-r22-line {
  display: grid;
  grid-template-columns: 52px minmax(0,1fr) minmax(75px,auto);
  align-items: center;
  gap: 10px;
}

.mp-r22-label {
  font-size: 10px;
  color: #afcebc;
}

.mp-r22-track {
  height: 10px;
  background: #0a2419;
  border-radius: 30px;
  overflow: hidden;
}

.mp-r22-fill {
  height: 100%;
  border-radius: 30px;
}

.mp-r22-fill.income {
  background: #55d79c;
}

.mp-r22-fill.expense {
  background: #db8c68;
}

.mp-r22-value {
  font-size: 11px;
  color: #deffee;
  font-variant-numeric: tabular-nums;
  text-align: right;
  overflow-wrap: anywhere;
}

.mp-r22-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
  color: #b1d6c0;
  font-size: 11px;
}

.mp-r22-footer button {
  background: #195b40;
  border-color: #387a58;
}

.mp-r22-note {
  margin: 11px 0 0;
  font-size: 10px;
  line-height: 1.6;
  color: #a3c6b1;
}

.mp-r22-empty {
  text-align: center;
  padding: 20px;
  color: #b5d4bf;
}

@media (max-width: 440px) {
  .mp-r22-row {
    padding: 10px;
  }

  .mp-r22-line {
    grid-template-columns: 42px minmax(0,1fr) minmax(66px,auto);
    gap: 6px;
  }

  .mp-r22-value {
    font-size: 10px;
  }
}


/* Freedom T2.R23 — Six-month financial summary */

.mp-r23-summary {
  padding: 14px;
  margin-bottom: 15px;
  border: 1px solid rgba(111, 212, 161, .22);
  border-radius: 14px;
  background: #0b2a1d;
  color: #eafff2;
}

.mp-r23-summary-title {
  color: #a0f0c4;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 12px;
}

.mp-r23-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.mp-r23-metric {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 12px;
  background: #153b2a;
  border: 1px solid rgba(120, 210, 165, .14);
  border-radius: 11px;
  min-width: 0;
}

.mp-r23-metric span {
  color: #b8d9c7;
  font-size: 11px;
  line-height: 1.4;
}

.mp-r23-metric strong {
  color: #effff6;
  font-size: clamp(15px, 2vw, 20px);
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

.mp-r23-metric strong.income,
.mp-r23-metric strong.positive {
  color: #85eeb7;
}

.mp-r23-metric strong.expense,
.mp-r23-metric strong.negative {
  color: #ffb4a4;
}

.mp-r23-explanation {
  margin: 11px 0 0;
  font-size: 10px;
  color: #b2d4c0;
  line-height: 1.6;
}

@media (max-width: 620px) {
  .mp-r23-summary-grid {
    grid-template-columns: 1fr;
  }

  .mp-r23-metric {
    padding: 11px 12px;
  }

  .mp-r23-metric strong {
    font-size: 17px;
  }
}