.transaksi *{
  box-sizing:border-box;
  font-family:'Poppins',sans-serif;
}

/* TOTAL CARD */
.total-card{
  background:linear-gradient(145deg,#2b2b2b,#111);
  border-radius:16px;
  padding:14px;
  text-align:center;
  box-shadow:0 8px 25px rgba(0,0,0,.6);
}
.total-card span{
  font-size:12px;
  color:#aaa;
}
.total-card strong{
  display:block;
  font-size:16px;
  margin-top:4px;
  color:#f5c16c;
}

/* TAB */
.casino-tab .nav-link{
  background:#1b1b1b;
  color:#aaa;
  border:none;
  border-radius:12px 12px 0 0;
  margin-right:6px;
}
.casino-tab .nav-link.active{
  background:linear-gradient(135deg,#f5c16c,#cfa14a);
  color:#111;
}

/* TABLE */
.casino-table{
  width:100%;
  border-collapse:collapse;
  background:#141414;
  border-radius:14px;
  overflow:hidden;
  
}
.casino-table th{
  background:#1f1f1f;
  color:#f5c16c;
  padding:10px;
  font-size:12px;
}
.casino-table td{
  padding:10px;
  font-size:12px;
  color:#ddd;
  border-top:1px solid #222;
}
.casino-table tr:hover{
  background:#1c1c1c;
}

/* STATUS */
.status{
  padding:4px 10px;
  border-radius:20px;
  font-size:11px;
  font-weight:600;
  
}
.status.sukses{background:#1f7a46;color:#b9ffd9;}
.status.ditolak{background:#7a1f1f;color:#ffb3b3;}
.status.pending{background:#7a5a1f;color:#ffe0a3;}
.status.approved{background:#1f7a46;color:#b9ffd9;}
.status.rejected{background:#7a1f1f;color:#ffb3b3;}
.status.gagal,
.status.failed{background:#7a1f1f;color:#ffb3b3;}
/* ================= SELECT CUSTOM ================= */
.filter-box select{
  width:100%;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;

  background:
    linear-gradient(145deg,#2b2b2b,#111) padding-box,
    linear-gradient(135deg,#2b2b2b,#111) border-box;

  border:1px solid transparent;
  border-radius:14px;
  padding:14px 44px 14px 14px;

  color:#f5c16c;
  font-size:14px;
  font-weight:500;
  border: 1px dashed #333;
  box-shadow:0 10px 40px rgba(0,0,0,.6);
  cursor:pointer;
}

/* ICON PANAH */
.filter-box{
  position:relative;
}
.filter-box::after{
  content:"▼";
  position:absolute;
  right:16px;
  top:18px;
  font-size:12px;
  color:#f5c16c;
  pointer-events:none;
}

/* SELECT KECIL (FILTER BAWAH) */
.filter-box .row select{
  padding:12px 36px 12px 12px;
  font-size:13px;
  color:#ddd;
}

/* HOVER & FOCUS */
.filter-box select:hover{
  box-shadow:0 8px 25px rgba(245,193,108,.25);
}
.filter-box select:focus{
  outline:none;
  box-shadow:0 0 0 2px rgba(245,193,108,.35);
}

/* OPTION */
.filter-box option{
  background:#1b1b1b;
  color:#eee;
}

/* HEADER */
.riawyat-header{
  position: sticky;
  top: 0;
  z-index: 999;

  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 14px; /* dipersempit */
  background: #1a1a1a;

  font-weight: 600;
  font-size: 14px;
  color: #eee;

  border-bottom: 1px solid #222;
}

.riawyat-header .left {
  cursor: pointer;
}

/* RAPATKAN JARAK KE HEADER */
.main-content.transaksi {
  padding-top: 8px !important;
}

.main-content.transaksi .container {
  margin-top: 0 !important;
  padding-top: 6px !important;
}

/* FILTER BOX LEBIH RAPAT */
.filter-box {
  margin-top: 4px;
  margin-bottom: 8px !important;
}

.icon-btn {
  background: #2a2a2a;
  padding: 6px 10px;
  border-radius: 8px;
  color: #fff;
  font-size: 12px;
  
}
/* MOBILE */
@media(max-width:600px){
  .casino-table th,
  .casino-table td{
    font-size:11px;
  }
}