/* Scrollable container */
.table-wrapper {
  max-height: 320px;              /* adjust height as needed */
  overflow-y: auto;               /* vertical scroll only */
  border: 1.5px solid #dcdedf;
  border-radius: 0.75rem;
  margin-top: 1.1rem;
  padding: 0rem 2rem 0rem 2rem; /* top padding for spacing */

}

/* ===== Custom Scrollbar Styling (adapted from sidebar-scroll) ===== */
.table-wrapper::-webkit-scrollbar {
  width: 8px; /* thin scrollbar */
}

.table-wrapper::-webkit-scrollbar-button {
  display: none;
  height: 0;
}

.table-wrapper::-webkit-scrollbar-track {
  background: transparent; /* optional: could also be #f5f6f7 for light bg */
}

.table-wrapper::-webkit-scrollbar-thumb {
  background-color: #9ca3af; /* light gray thumb */
  border-radius: 4px;
}

.table-wrapper::-webkit-scrollbar-thumb:hover {
  background-color: #6b7280; /* darker hover */
}




/* Table style */
.table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Montserrat', sans-serif;
  min-width: 600px; /* optional to maintain layout */
  
}

.table th,
.table td {
  padding: 18px 23px;
  border-bottom: 1px solid #dcdedf;
  text-align: left;
  font-size: 0.95rem;
}

/* Sticky header styling */
.table thead th {
  position: sticky;
  top: 0;
  background: #3b82f6;
  color: #fff;
  font-weight: 600;
  z-index: 2;
}

/* Alternate row shading for readability */
.table tbody tr:nth-child(even) {
  background-color: #f5f6f7;
}

/* Hover effect for rows */
.table tbody tr:hover {
  background-color: #e9ecef;
}

/* =========================
   RESPONSIVE TABLE STYLES
========================= */

/* Tablets (768px and down) */
@media (max-width: 768px) {
  .table-wrapper {
    padding: 0 1rem;
    margin-top: 1rem;
    overflow-x: auto;
    max-height: 280px;
  }
  
  .table {
    min-width: 500px;
  }
  
  .table th,
  .table td {
    padding: 12px 15px;
    font-size: 0.9rem;
  }
  
  .table th {
    white-space: nowrap;
  }
}

/* Mobile phones (480px and down) */
@media (max-width: 480px) {
  .table-wrapper {
    padding: 0 0.5rem;
    max-height: 300px;
    border-radius: 0.5rem;
  }
  
  .table {
    min-width: 450px;
  }
  
  .table th,
  .table td {
    padding: 10px 8px;
    font-size: 0.85rem;
  }
  
  /* Make table more compact on mobile */
  .table th {
    font-size: 0.97rem;
    padding: 10px 8px;
  }
}

/* Extra small phones (360px and down) */
@media (max-width: 360px) {
  .table-wrapper {
    padding: 0 0.25rem;
    max-height: 220px;
  }
  
  .table {
    min-width: 400px;
  }
  
  .table th,
  .table td {
    padding: 8px 5px;
    font-size: 0.8rem;
  }
  
  .table th {
    font-size: 0.75rem;
  }
}