.admin-wrap {
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px 60px;
  position: relative;
  z-index: 1;
}


/* ================= KEY LOGIN ================= */

.key-gate {
  max-width: 420px;
  width: 100%;
  margin-top: 15vh;
}

.key-gate .content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.key-input {
  background: #05130a;
  border: 1px solid var(--border);
  color: var(--green);
  font-family: var(--font-mono);
  font-size: 14px;
  padding: 10px 12px;
  border-radius: 6px;
  width: 100%;
  box-sizing: border-box;
}

.key-input:focus {
  outline: none;
  border-color: var(--green-dim);
}


.nav-btn.primary {
  background: rgba(51,255,102,0.08);
  color: var(--green);
  border-color: var(--green-dim);
  width: 100%;
  padding: 10px;
}


.key-error {
  color: var(--red);
  font-size: 12px;
}



/* ================= ADMIN HEADER ================= */

.admin-hero {
  text-align: left;
  margin-bottom: 20px;
}

.admin-hero h1 {
  font-size: 22px;
  text-shadow: none;
}



/* ================= TABLE FIX ================= */

/* wajib untuk HP */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}


.admin-table {
  width: 100%;
  min-width: 850px;
  border-collapse: collapse;
  white-space: nowrap;
}


.admin-table th,
.admin-table td {
  padding: 8px 10px;
}


.admin-table th:last-child,
.admin-table td:last-child {
  text-align: right;
}



/* ================= INPUT TP SL ================= */


.status-select,
.nominal-input {

  background: #05130a;
  border: 1px solid var(--border);

  color: var(--green);

  font-family: var(--font-mono);
  font-size: 12px;

  padding: 6px 8px;

  border-radius: 5px;

  height: 32px;

  box-sizing: border-box;

}


.nominal-input {

  width: 85px;

}


.status-select:focus,
.nominal-input:focus {

  outline: none;
  border-color: var(--green-dim);

}



/* ================= BUTTON SAVE ================= */


.save-btn {

  background: transparent;

  border: 1px solid var(--green-dim);

  color: var(--green);

  font-family: var(--font-mono);

  font-size: 11px;

  padding: 6px 12px;

  border-radius: 5px;

  cursor: pointer;

  transition: all 0.15s ease;

}


.save-btn:hover {

  background: rgba(51,255,102,0.08);

}


.save-btn:disabled {

  opacity: .4;

  cursor:not-allowed;

}



.row-controls {

  display:flex;

  align-items:center;

  gap:8px;

  justify-content:flex-end;

  flex-wrap:wrap;

}



/* ================= TOAST ================= */


.toast {

  position:fixed;

  bottom:24px;

  left:50%;

  transform:translateX(-50%);

  background:#0a120a;

  border:1px solid var(--green-dim);

  color:var(--green);

  padding:10px 18px;

  border-radius:6px;

  font-size:13px;

  z-index:200;

}


.toast.error {

  border-color:var(--red);

  color:var(--red);

}



/* ================= MOBILE ================= */


@media(max-width:600px){


.admin-wrap {

  padding:20px 8px 40px;

}



.admin-hero h1 {

  font-size:18px;

}

  



.table-wrap {

  margin-left:0;

  width:100%;

}



.admin-table {

  min-width:760px;

}



.admin-table th,
.admin-table td {

  padding:6px 7px;

  font-size:11px;

}



.nominal-input {

  width:65px;

  height:30px;

  font-size:11px;

  padding:4px;

}



.status-select {

  height:30px;

  font-size:11px;

  padding:4px;

}



.save-btn {

  padding:5px 8px;

  font-size:10px;

}


.row-controls {

  gap:4px;

}


}

/* ================= MOBILE TABLE FIX ================= */

.table-wrap {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}


.admin-table {
    min-width: 950px;
    white-space: nowrap;
}


/* INPUT TP SL */
.admin-table input,
.nominal-input {

    width: 80px;
    height: 32px;

    background:#05130a;

    border:1px solid var(--border);

    color:var(--green);

    font-family:var(--font-mono);

    font-size:12px;

    padding:5px 8px;

    border-radius:5px;

    box-sizing:border-box;

}


.admin-table input:focus {

    outline:none;

    border-color:var(--green-dim);

}



/* HP */

@media(max-width:600px){


.admin-wrap {

    padding:20px 8px 40px;

}


.table-wrap {

    width:100%;

}


.admin-table {

    min-width:900px;

}



.admin-table th,
.admin-table td {

    font-size:11px;

    padding:6px;

}


.admin-table input {

    width:65px;

    font-size:11px;

}


}