/* EduPay V5.8 - payment and billing tables become stacked cards on mobile. */

@media (max-width: 720px){
  .mobile-payment-table{
    width:100%;
    max-width:100%;
    overflow:visible!important;
  }

  .mobile-payment-table .table{
    display:block;
    width:100%!important;
    min-width:0!important;
    border:0!important;
    border-collapse:separate;
    background:transparent!important;
  }

  .mobile-payment-table .table thead{
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    padding:0!important;
    margin:-1px!important;
    overflow:hidden!important;
    clip:rect(0,0,0,0)!important;
    white-space:nowrap!important;
    border:0!important;
  }

  .mobile-payment-table .table tbody{
    display:grid;
    width:100%;
    gap:10px;
  }

  .mobile-payment-table .table tbody tr{
    display:block;
    width:100%;
    margin:0;
    overflow:hidden;
    border:1px solid var(--line,#e5e7eb);
    border-radius:14px;
    background:#fff;
    box-shadow:0 4px 14px rgba(15,23,42,.035);
  }

  .mobile-payment-table .table tbody td{
    display:grid;
    grid-template-columns:minmax(88px,34%) minmax(0,1fr);
    align-items:start;
    gap:10px;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    padding:10px 12px!important;
    border:0!important;
    border-bottom:1px solid #eef2f5!important;
    white-space:normal!important;
    overflow:visible!important;
    overflow-wrap:anywhere;
    word-break:normal;
    text-align:left!important;
    line-height:1.35;
  }

  .mobile-payment-table .table tbody td:last-child{
    border-bottom:0!important;
  }

  .mobile-payment-table .table tbody td::before{
    content:attr(data-label);
    min-width:0;
    color:#788397;
    font-size:9px;
    line-height:1.35;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
  }

  .mobile-payment-table .table tbody td[data-label="Tagihan"] b,
  .mobile-payment-table .table tbody td[data-label="Siswa"] b,
  .mobile-payment-table .table tbody td[data-label="Kwitansi"] b{
    color:#1f2937;
    font-weight:800;
  }

  .mobile-payment-table .table tbody td[data-label="Nominal"],
  .mobile-payment-table .table tbody td[data-label="Total"]{
    font-weight:800;
    color:#172033;
  }

  .mobile-payment-table .table tbody td[data-label="Status"] .badge{
    width:max-content;
    max-width:100%;
    white-space:normal;
  }

  .mobile-payment-table .table tbody td[data-label="Aksi"]{
    align-items:center;
  }

  .mobile-payment-table .table tbody td[data-label="Aksi"] .btn{
    width:100%;
    min-height:38px;
    margin:0 0 6px!important;
    justify-content:center;
    white-space:normal;
  }

  .mobile-payment-table .table tbody td[data-label="Aksi"] .btn:last-child{
    margin-bottom:0!important;
  }

  .mobile-payment-table .table tbody td[data-label="Bukti"]{
    word-break:break-word;
  }

  /* The responsive cards must never force the page wider than the viewport. */
  .main,
  .card,
  .table-card,
  .mobile-payment-table,
  .mobile-payment-table .table,
  .mobile-payment-table .table tbody,
  .mobile-payment-table .table tbody tr{
    box-sizing:border-box;
    max-width:100%;
  }
}

@media (max-width: 380px){
  .mobile-payment-table .table tbody td{
    grid-template-columns:minmax(78px,32%) minmax(0,1fr);
    gap:8px;
    padding:9px 10px!important;
  }

  .mobile-payment-table .table tbody td::before{
    font-size:8px;
  }
}