/* Default (Desktop) */
.table-container {
  margin-bottom: 40px;
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.table-container table {
  width: 100%;
  border-collapse: collapse;
}


/* 📱 Mobile Devices */
@media (max-width: 768px) {
  
  .table-container {
    overflow-x: auto; /* enable scroll */
    padding: 15px 0px;
    -webkit-overflow-scrolling: touch;
    position: relative;
  }

  .table-container table {
    min-width: 700px; /* force scroll */
  }

  /* Optional: Scroll Hint */
  .table-container::after {
    content: "← Scroll →";
    position: absolute;
    right: 10px;
    bottom: 8px;
    font-size: 11px;
    color: #888;
  }

  /* Optional: smaller text */
  .table-container th,
  .table-container td {
    font-size: 13px;
    padding: 8px;
  }
  
  .table-container::-webkit-scrollbar {
  height: 6px;
}

.table-container::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 10px;
}

}


@media (max-width: 768px) {

  .table-container {
    overflow-x: auto;
    position: relative;
    -webkit-overflow-scrolling: touch;
  }

  .table-container table {
    min-width: 700px;
    border-collapse: collapse;
  }

  /* Sticky first column */
  .table-container th:first-child,
  .table-container td:first-child {
    position: sticky;
    left: 0px;
    background: #f5f7fb;
    z-index: 3;
    box-shadow: 2px 0 5px rgba(0,0,0,0.05);
  }
  
  /* ✅ Top-left cell (most important) */
  .table-container tr:first-child th:first-child {
    z-index: 4;
    background: #ff7a00;
  }

  /* Header should be above */
  .table-container th:first-child {
    z-index: 4;
  }
  .table-container td:not(:first-child),
.table-container th:not(:first-child) {
  z-index: 1;
}

  /* Optional styling */
  .table-container th,
  .table-container td {
    padding: 8px;
    font-size: 13px;
    white-space: nowrap;
  }
}

@media (max-width: 768px) {

  .table-container::after {
    content: "→ Scroll";
    position: absolute;
    right: 10px;
    bottom: 8px;
    font-size: 11px;
    color: #888;
    transition: 0.3s;
  }

  /* Hide class */
  .table-container.scrolled::after {
    opacity: 0;
    visibility: hidden;
  }
}

    table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 15px;
    }

    th, td {
        padding: 10px;
        text-align: center;
        border: 1px solid #ddd;
    }

    th {
        background: #ff7a00;
        color: #fff;
    }

    tr:nth-child(even) {
        background: #f2f2f2;
    }

    tr:hover {
        background: #ffe0c2;
    }