* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', sans-serif; }

    body {
      background: #0f172a;
      color: #e5e7eb;
      display: flex;
      min-height: 100vh;
      overflow-x: hidden;
    }

    /* ================= SIDEBAR ================= */
    .sidebar {
      width: 260px;
      background: #020617;
      padding: 20px;
      position: fixed;
      height: 100vh;
      left: 0;
      top: 0;
      transition: transform .3s ease;
      z-index: 1000;
    }

    .sidebar h2 {
      color: #38bdf8;
      margin-bottom: 30px;
      font-size: 22px;
      text-align: center;
    }

    .sidebar ul { list-style: none; }

    .sidebar ul li a {
      display: block;
      padding: 12px 14px;
      border-radius: 10px;
      color: #e5e7eb;
      text-decoration: none;
      margin-bottom: 8px;
      transition: background .2s;
    }

    .sidebar ul li a:hover {
      background: #1e293b;
    }

    .sidebar .logout {
      margin-top: 30px;
      color: #f87171;
    }

    /* ================= MAIN ================= */
    .main {
      margin-left: 260px;
      width: 100%;
      padding: 20px;
      transition: margin-left .3s ease;
    }

    /* ================= HEADER ================= */
    header {
      background: #020617;
      padding: 14px 20px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
    }

    .menu-btn {
      font-size: 24px;
      cursor: pointer;
      display: none;
    }

    .user {
      font-weight: 600;
    }

    /* ================= CARDS ================= */
    .cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 16px;
      margin-bottom: 24px;
    }

    .card {
      background: #020617;
      padding: 20px;
      border-radius: 16px;
      box-shadow: 0 0 0 1px rgba(255,255,255,.04);
    }

    .card h3 {
      font-size: 14px;
      color: #94a3b8;
      margin-bottom: 10px;
    }

    .card span {
      font-size: 28px;
      font-weight: bold;
      color: #38bdf8;
    }

    /* ================= TABLE ================= */
    .table-box {
      background: #020617;
      padding: 20px;
      border-radius: 16px;
      overflow-x: auto;
    }

    .table-box h3 {
      margin-bottom: 16px;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      min-width: 500px;
    }

    th, td {
      padding: 12px;
      border-bottom: 1px solid #1e293b;
      text-align: left;
    }

    th { color: #94a3b8; }

    /* ================= MOBILE ================= */
    @media (max-width: 768px) {
      .sidebar {
        transform: translateX(-100%);
      }

      .sidebar.active {
        transform: translateX(0);
      }

      .main {
        margin-left: 0;
      }

      .menu-btn {
        display: block;
      }
    }

    /* overlay */
    .overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,.5);
      z-index: 999;
      display: none;
    }

    .overlay.active {
      display: block;
    }
	
	/* BASE BUTTON */
	.btn {
	  display: inline-flex;
	  align-items: center;
	  justify-content: center;
	  gap: 6px;
	  padding: 10px 16px;
	  border-radius: 10px;
	  font-size: 14px;
	  font-weight: 600;
	  cursor: pointer;
	  border: none;
	  transition: all 0.25s ease;
	  text-decoration: none;
	  user-select: none;
	}

	/* PRIMARY */
	.btn-primary {
	  background: linear-gradient(135deg, #3b82f6, #2563eb);
	  color: #ffffff;
	}

	.btn-primary:hover {
	  background: linear-gradient(135deg, #2563eb, #1d4ed8);
	  transform: translateY(-1px);
	}

	/* SUCCESS */
	.btn-success {
	  background: linear-gradient(135deg, #22c55e, #16a34a);
	  color: #ffffff;
	}

	.btn-success:hover {
	  background: linear-gradient(135deg, #16a34a, #15803d);
	}

	/* WARNING */
	.btn-warning {
	  background: linear-gradient(135deg, #f59e0b, #d97706);
	  color: #1f2937;
	}

	/* DANGER */
	.btn-danger {
	  background: linear-gradient(135deg, #ef4444, #dc2626);
	  color: #ffffff;
	}

	/* OUTLINE */
	.btn-outline {
	  background: transparent;
	  border: 1px solid #475569;
	  color: #e5e7eb;
	}

	.btn-outline:hover {
	  background: #334155;
	}

	/* DISABLED */
	.btn:disabled {
	  opacity: 0.6;
	  cursor: not-allowed;
	}

	/* MOBILE FULL WIDTH */
	.btn-block {
	  width: 100%;
	}

	/* SMALL & LARGE */
	.btn-sm {
	  padding: 6px 12px;
	  font-size: 13px;
	}

	.btn-lg {
	  padding: 14px 20px;
	  font-size: 15px;
	}
	
.table-box {
  background: #273449;
  padding: 16px;
  border-radius: 14px;
}

/* HEADER TETAP */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  gap: 10px;
  flex-wrap: wrap;
}

.header-left h3 {
  margin: 0;
  font-size: 16px;
  color: #e5e7eb;
}

.section-subtitle {
  font-size: 13px;
  color: #94a3b8;
}

.header-right {
  display: flex;
  align-items: center;
}

/* SCROLL HANYA TABEL */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* TABLE */
table {
  width: 100%;
  min-width: 500px; /* biar bisa geser */
  border-collapse: collapse;
}

th, td {
  padding: 12px;
  color: #e5e7eb;
  border-bottom: 1px solid #334155;
  white-space: nowrap;
}

thead {
  background: #1e293b;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}

.modal-overlay.show {
  opacity: 1;
  display: flex;
  visibility: visible;
}

.modal {
  width: 90%;
  max-width: 420px;
  max-height: 85vh;
  background: #1e293b;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,.4);
  
  transform: translateY(20px) scale(0.95);
  opacity: 0;
  transition: all .3s ease;
}

.modal.show {
  display: flex;
}

.modal-overlay.show .modal {
  transform: translateY(0) scale(1);
  opacity: 1;
  animation: modalPop .35s ease;
}

.modal-content {
  background: #273449;
  width: 100%;
  max-width: 420px;
  max-height: 90vh; /* tinggi maksimal modal */
  border-radius: 14px;
  padding: 16px;
  overflow-y: auto; /* scroll tetap aktif */
  -ms-overflow-style: none;  /* IE & Edge */
  scrollbar-width: none;      /* Firefox */
  animation: fadeUp 0.25s ease;
}

/* HIDE SCROLLBAR CHROME, SAFARI, OPERA */
.modal-content::-webkit-scrollbar {
  display: none;
}

@keyframes modalPop {
  0% { transform: scale(.9); }
  60% { transform: scale(1.02); }
  100% { transform: scale(1); }
}

@keyframes fadeUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.modal-header {
  position: sticky;
  top: 0;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 10;
  border-bottom: 1px solid #3b3d5c;
}

.modal-body::-webkit-scrollbar {
  width: 0;                    /* Chrome */
}

.modal-body {
  padding: 16px;
  overflow-y: auto;
  scrollbar-width: none;       /* Firefox */
}

.modal-header h3 {
  font-size: 1rem;
  font-weight: 600;
}

.close-btn {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
}

.form-group {
  margin-bottom: 12px;
}

.form-group label {
  display: block;
  font-size: 13px;
  margin-bottom: 4px;
  color: #cbd5f5;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid #475569;
  background: #1e293b;
  color: #e5e7eb;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}

/* ===============================
   OVERLAY BACKDROP
================================ */
.toast-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 9998;
}

/* ===============================
   TOAST
================================ */
.toast {
  position: fixed;
  top: 20px;
  right: 20px;
  min-width: 280px;
  max-width: 360px;
  padding: 14px 18px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.25);
  z-index: 9999;
  animation: slideIn 0.4s ease;
}

.toast-success { background: linear-gradient(135deg, #2ecc71, #27ae60); }
.toast-error   { background: linear-gradient(135deg, #e74c3c, #c0392b); }
.toast-warning { background: linear-gradient(135deg, #f1c40f, #f39c12); }
.toast-info    { background: linear-gradient(135deg, #3498db, #2980b9); }

.toast .close {
  margin-left: auto;
  cursor: pointer;
  font-size: 18px;
  opacity: 0.85;
}
.toast .close:hover { opacity: 1; }

/* Animations */
@keyframes slideIn {
  from { transform: translateX(120%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

@keyframes fadeOut {
  to { transform: translateX(120%); opacity: 0; }
}