/* AMD Portal - base overrides & additions
   Keep theme.css as the design baseline. Put only additions/overrides here. */

.cardsWrap{
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.cardItem{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  border-radius: 16px;
  padding: 12px;
  overflow: hidden;
}

.cardHead{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.cardTitle{
  font-weight: 700;
  letter-spacing: .2px;
}

.cardBadges{
  display:flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.cardGrid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 10px 0;
}

.cardGrid .lbl{
  font-size: 12px;
  opacity: .7;
}

.cardGrid .val{
  font-weight: 600;
  margin-top: 2px;
  word-break: break-word;
}

.cardActions{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

/* Make long ids readable */
.muted{
  word-break: break-word;
}

/* Inputs */
input[type="month"]{
  min-width: 160px;
}

/* On narrow screens prefer cards, avoid horizontal scroll */
@media (max-width: 860px){
  .tableWrap{
    overflow: visible !important;
  }
  table{
    font-size: 14px;
  }
  .row{
    flex-wrap: wrap;
  }
  .actions{
    gap: 6px;
    flex-wrap: wrap;
  }
}

/* Very small screens */
@media (max-width: 420px){
  .cardGrid{
    grid-template-columns: 1fr;
  }
  input[type="month"]{
    min-width: 140px;
  }
}



/* Admin payout help */
.hint{
  margin-top:10px;
  padding:10px 12px;
  border-radius:14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}
.hint > summary{
  cursor: pointer;
  user-select: none;
  font-weight: 600;
}
.hintBody{
  margin-top:8px;
  font-size: 13px;
  opacity: 0.9;
  line-height: 1.35;
}
/* ===== Admin mobile cards: table -> cards ===== */

/* iPhone/Safari: prevent layout jump from long strings + buttons */
.cardItem, .cardGrid, .cardActions { min-width: 0; }
.cardActions .btn { white-space: nowrap; }
.cardGrid .val { overflow-wrap: anywhere; word-break: break-word; }

@media (max-width: 860px){
  /* Partner view */
  #partnersView .tableWrap{ display:none !important; }
  #partnerCards{ display:grid !important; }

  /* Payouts view (falls du später Cards renderst) */
  #payoutsView .tableWrap{ display:none !important; }
  #payoutCards{ display:grid !important; }
}
@media (max-width: 860px){
  /* Statement modal: avoid wide table on phones */
  #statementCard .tableWrap{ display:none !important; }
  #stCards{ display:grid !important; }
}

/* Admin: always use cards (desktop + mobile) */
#partnersView .tableWrap,
#payoutsView .tableWrap{
  display:none !important;
}

#partnerCards,
#payoutCards{
  display:grid !important;
}

/* hidden must always win */
[hidden]{ display:none !important; }
/* Statement modal: make controls wrap nicely on phones */
@media (max-width: 600px){
  #statementCard .row{
    flex-wrap: wrap;
    gap: 10px;
  }
  #statementCard .row .input,
  #statementCard .row .btn{
    width: 100%;
    max-width: none !important;
  }
}