/* =========================
   GLOBAL
========================= */
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter,Segoe UI,Arial;
  background:#0e1116;
  color:#eaeaea;
  height:100vh;
  overflow:hidden;
}
a{color:#ff9f1a;text-decoration:none}

/* =========================
   HEADER
========================= */
header{
  height:48px;
  background:#0b0e13;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 16px;
  border-bottom:1px solid #222;
  box-shadow:0 4px 12px rgba(0,0,0,.6);
}
header span{font-weight:600;color:#ff9f1a}

#statusWrap{font-size:12px;text-align:right}
#statusStats span{
  background:#1b2230;
  padding:2px 8px;
  border-radius:6px;
}

/* =========================
   STATUS BAR
========================= */
.status-bar{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
}

.status-pill{
  display:flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  background:#1b2230;
  box-shadow:inset 0 0 0 1px #2a3242;
  font-weight:600;
  white-space:nowrap;
}

/* Variants */
.status-pill.idle{
  color:#5dade2;
}
.status-pill.total{
  color:#f1c40f;
}
.status-pill.danger{
  color:#ff6b6b;
}
.status-pill.success{
  color:#2ecc71;
}

/* Smooth update feel */
.status-pill b{
  font-weight:700;
}

.status-pill.idle{
  animation:pulse 1.6s infinite;
}
@keyframes pulse{
  0%{opacity:.6}
  50%{opacity:1}
  100%{opacity:.6}
}


/* =========================
   LAYOUT
========================= */
.main{
  display:flex;
  height:calc(100vh - 48px);
  padding:16px;
  gap:16px;
}
.panel{
  background:
    radial-gradient(1200px 300px at top, rgba(255,159,26,.06), transparent),
    linear-gradient(180deg,#141923,#0f131a);
  border-radius:16px;
  padding:16px;
  box-shadow:
    0 10px 30px rgba(0,0,0,.6),
    inset 0 0 0 1px #1f2633;
}

/* =========================
   LEFT PANEL
========================= */
.left{
  width:320px;
  display:flex;
  flex-direction:column;
  gap:16px;

  max-height:100%;
  overflow-y:auto;
  padding-right:4px; /* biar scrollbar tidak nabrak */
}

.left-scroll{
  flex:1;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:16px;
}


/* Upload */
.drop{
  border:2px dashed #2a3242;
  border-radius:12px;
  padding:24px;
  text-align:center;
  cursor:pointer;
  background:
    radial-gradient(600px 200px at top, rgba(255,159,26,.08), transparent),
    linear-gradient(180deg,#121826,#0d1118);
}
.drop:hover{border-color:#ff9f1a}

/* Progress */
.progress{
  height:6px;
  background:#222;
  border-radius:4px;
  overflow:hidden;
}
.progress div{
  height:100%;
  width:0%;
  background:#ff9f1a;
  transition:.2s;
}

/* Filter */
.filter-group{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.filter-group label{
  font-size:11px;
  color:#9aa4b2;
}
.filter-group input{
  padding:12px 14px;
  border-radius:10px;
  background:#0d1118;
  border:1px solid #232b3b;
  color:#fff;
}
.filter-group input:focus{
  outline:none;
  border-color:#ff9f1a;
  box-shadow:0 0 0 2px rgba(255,159,26,.2);
}

#bankProdukGroup{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap:8px 12px;
  padding:6px 0;
}

#bankProdukGroup label{
  display:flex;
  align-items:center;
  gap:6px;

  border:1px solid #2a2a2a;
  border-radius:6px;
  padding:6px 8px;

  cursor:pointer;
  transition:background .15s,border .15s;
}

#bankProdukGroup label:hover{
  background:#252525;
  border-color:#3a3a3a;
}

#bankProdukGroup input{
  margin:0;
}

#bankProdukGroup input:checked{
  color:#9ee7ff;
}


/* Preset */
.preset-row{
  display:flex;
  gap:8px;
}
.preset-row button{
  width:44px;
  background:#1b2230;
  border-radius:10px;
}
.preset-row select{
  flex:1;
  background:#0d1118;
  border:1px solid #232b3b;
  color:#fff;
  border-radius:10px;
}

/* Buttons */
.action-buttons{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
button{
  padding:10px;
  border:none;
  border-radius:10px;
  font-weight:600;
  cursor:pointer;
  transition:.15s;
}
button:hover{transform:translateY(-1px)}
.btn-main{
  grid-column:1/3;
  background:#ff9f1a;
  color:#000;
}
.btn-danger{
  background:#441515;
  color:#ff8a8a;
}
.btn-secondary{
  grid-column:1/3;
  background:#1b2230;
  color:#ddd;
}

.export-menu{
  display:none;
  position:absolute;
  background:#1b2230;
  border:1px solid #2a3242;
  border-radius:10px;
  overflow:hidden;
  margin-top:6px;
  width:160px;
  box-shadow:0 8px 20px rgba(0,0,0,.6);
  z-index:50;
}

.export-menu div{
  padding:10px 14px;
  cursor:pointer;
  font-size:13px;
}

.export-menu div:hover{
  background:#ff9f1a;
  color:#000;
}

/* =========================
   TABLE
========================= */
.right{flex:1;overflow:auto}
table{
  width:100%;
  border-collapse:collapse;
}
th,td{
  padding:10px;
  border-bottom:1px solid #1f2633;
}
th{
  cursor:pointer;
  color:#ffb347;
  position:sticky;
  top:0;
  background:#0b0e13;
}
td:nth-child(n+3){
  text-align:right;
  font-variant-numeric:tabular-nums;
}
th:nth-child(2),
td:nth-child(2){
  max-width:320px;   /* atur sesuai selera */
  width:320px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
tbody tr:not(.will-delete):nth-child(even){
  background:rgba(255,255,255,.015);
}
tbody tr:hover{
  background:#1b2230;
}
tr.will-delete{
  background:linear-gradient(
    90deg,
    rgba(255,80,80,.25),
    rgba(255,80,80,.08)
  );
  box-shadow:inset 4px 0 0 #ff5555;
}

/* Scrollbar */
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-thumb{
  background:#2a3242;
  border-radius:4px;
}

.render-info{
  margin-top:8px;
  font-size:11px;
  color:#7f8a99;
  text-align:right;
  opacity:.85;
}