.touch-pad-container {
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  padding: 1rem;
  border-radius: 8px;
}

.scrollable-touchpad {
  max-height: 65vh;
  overflow-y: auto;
}

.scrollable-touchpad::-webkit-scrollbar {
  width: 6px;
}
.scrollable-touchpad::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

button {
  font-weight: bold;
}

.btn.btn-light {
  background-color: #ffffff !important;
  border: 1px solid #ced4da;
  color: #5d6165;
}

/* ✅ Tablet & Mobile View */
@media (max-width: 800px) {
  .container-fluid {
    padding: 0 1rem;
  }

  .row.align-items-center {
    flex-direction: column !important;
    align-items: center;
    gap: 0.5rem;
  }

  /* Stack and center 3 sections */
  .touch-pad-container .row.gx-2 {
    flex-direction: column;
    align-items: center;
  }

  .touch-pad-container .col-3 {
    width: 90% !important;
    margin-bottom: 1rem;
    order: 1;
  }

  .touch-pad-container .col-3 .row.gx-1 {
    display: flex;
    flex-wrap: wrap;
  }

  .touch-pad-container .col-3 .col-4 {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }

  .touch-pad-container .col-2 {
    width: 90% !important;
    margin-bottom: 1rem;
    order: 2;
  }

  .touch-pad-container .col-2 .row.gx-1 {
    display: flex;
    flex-wrap: wrap;
  }

  .touch-pad-container .col-2 .col-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .touch-pad-container .col-2 .col-4 {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }

  .touch-pad-container .col-7 {
    width: 90% !important;
    margin: 0 auto 1rem auto;
    order: 3;
  }

  .touch-pad-container .col-7 .row.gx-1 {
    display: flex;
    flex-wrap: wrap;
  }

  .touch-pad-container .col-7 .col-2 {
    flex: 0 0 16.6667%;
    max-width: 16.6667%;
  }

  .col-2 .btn,
  .col-3 .btn,
  .col-7 .btn {
    font-size: 1rem;
  }

  .scrollable-touchpad {
    max-height: 40vh;
  }
}
