/* Member flow refinement v1 — dashboard progress + mobile payout cards. */

.member-progress-title{
  align-items:center!important;
  margin-bottom:4px!important;
}
.member-progress-percent{
  position:static!important;
  right:auto!important;
  top:auto!important;
  transform:none!important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:58px;
  min-height:34px;
  padding:0 10px;
  border:1px solid rgba(5,185,242,.20);
  border-radius:999px;
  background:rgba(5,185,242,.055);
  color:var(--bw-ink,#102238)!important;
  font-family:var(--bw-display,"Oswald",sans-serif);
  font-size:1.02rem!important;
  font-weight:700!important;
  line-height:1;
  letter-spacing:-.01em;
  mix-blend-mode:normal!important;
}
.member-progress-subtitle{
  margin:0 0 6px;
  color:var(--bw-muted,#617083);
  font-size:.78rem;
  line-height:1.45;
}
html[data-design="future"] .member-progress-percent{
  border-color:rgba(119,205,239,.16);
  background:rgba(5,185,242,.07);
  color:#dff7ff!important;
}

@media(max-width:700px){
  .member-payout-page .member-payout-panel{padding:0!important;overflow:visible!important}
  .member-payout-page .transaktionsliste-container{overflow:visible!important;padding:0!important}
  .member-payout-page .trans-table{display:block;width:100%;min-width:0!important;border-collapse:separate;border-spacing:0}
  .member-payout-page .trans-table thead{display:none!important}
  .member-payout-page .trans-table tbody{display:grid;width:100%;gap:10px;padding:12px}
  .member-payout-page .trans-table tbody tr{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:7px 14px;
    width:100%;
    padding:14px 15px;
    border:1px solid var(--bw-border,#dfe7ed);
    border-radius:15px;
    background:var(--bw-surface,#fff);
    box-shadow:0 8px 24px rgba(16,34,56,.025);
  }
  html[data-design="future"] .member-payout-page .trans-table tbody tr{
    background:rgba(9,21,34,.94);
    border-color:rgba(119,205,239,.12);
  }
  .member-payout-page .trans-table tbody td{
    display:block;
    min-width:0;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    overflow-wrap:anywhere;
  }
  .member-payout-page .trans-table tbody td:nth-child(1){
    grid-column:1;
    grid-row:1;
    align-self:center;
    color:var(--bw-muted,#617083)!important;
    font-size:.78rem;
    font-weight:700;
  }
  .member-payout-page .trans-table tbody td:nth-child(2){
    grid-column:2;
    grid-row:1;
    align-self:center;
    text-align:right;
    font-family:var(--bw-display,"Oswald",sans-serif);
    font-size:1.2rem;
    font-weight:700;
  }
  .member-payout-page .trans-table tbody td:nth-child(3){
    grid-column:1/-1;
    grid-row:2;
    padding-top:7px!important;
    border-top:1px solid var(--bw-border,#dfe7ed)!important;
    color:var(--bw-ink,#102238)!important;
    font-size:.9rem;
    line-height:1.45;
  }
  .member-payout-page .trans-table tbody td:nth-child(3)::before{
    content:"Beschreibung";
    display:block;
    margin-bottom:3px;
    color:var(--bw-muted,#617083);
    font-size:.64rem;
    font-weight:800;
    letter-spacing:.06em;
    text-transform:uppercase;
  }
  .member-payout-page .trans-table tbody td:nth-child(4){
    grid-column:1/-1;
    grid-row:3;
    justify-self:start;
    margin-top:2px;
    padding:5px 8px!important;
    border-radius:999px!important;
    background:rgba(5,185,242,.06)!important;
    color:var(--bw-muted,#617083)!important;
    font-size:.7rem;
    font-weight:800;
  }
  .member-payout-page .trans-table tbody td.status-abgeschlossen{background:rgba(185,219,27,.10)!important;color:var(--bw-readable-positive,#7d9500)!important}
  .member-payout-page .trans-table tbody td.status-bearbeitung,
  .member-payout-page .trans-table tbody td.status-offen{background:rgba(5,185,242,.08)!important;color:var(--bw-readable-accent,var(--bw-blue,#05B9F2))!important}
  .member-payout-page .trans-table tbody td.status-abgelehnt{background:rgba(199,85,85,.09)!important;color:#b64a4a!important}
  .member-payout-page .trans-table tbody td[colspan]{
    grid-column:1/-1!important;
    grid-row:auto!important;
    padding:4px 0!important;
    border:0!important;
    background:transparent!important;
    color:var(--bw-muted,#617083)!important;
    text-align:left!important;
  }
  .member-payout-page #pagination{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:6px;
    max-width:100%;
    overflow:visible;
  }
  .member-payout-page #pagination .page-info{flex-basis:100%;text-align:center;margin-top:4px}
}