/* styles_account.css */

.account-overview {
  display: grid;
  gap: 2rem;
  margin-bottom: 3rem;
}

.profile-card {
  background-color: var(--secondary-dark-color);
  padding: 2rem;
  border-radius: 1rem;
  border: 1px solid #2a2c31;
  max-width: 500px;
}

.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.5rem;
}

.stat-card {
  background-color: var(--dark-color);
  padding: 1.5rem;
  border-radius: 1rem;
  text-align: center;
  border: 1px solid #2a2c31;
}

.stat-card h3 {
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.stat-card p {
  font-size: 1.2rem;
  font-weight: bold;
}

.profit {
  color: var(--primary-color);
}

.section-title {
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
}

.rank-section {
  margin-top: 2rem;
}

.rank-section .plan-details {
  background-color: var(--dark-color);
  padding: 1.5rem;
  border-radius: 1rem;
  border: 1px solid #2a2c31;
  color: var(--gray-color);
}

.referrals table,
.pool-membership table,
.bank-membership table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}

.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1.5rem;
}

.table-wrapper table {
  min-width: 100%;
  table-layout: fixed;
}

.referrals th,
.referrals td,
.pool-membership th,
.pool-membership td,
.bank-membership th,
.bank-membership td {
  text-align: left;
  padding: 1rem;
  border-bottom: 1px solid #2a2c31;
}

.loan-section {
  margin-top: 2rem;
}

.loan-card {
  background-color: var(--dark-color);
  padding: 1.5rem;
  border-radius: 1rem;
  border: 1px solid #2a2c31;
}

/* Responsive Table Wrapper */
.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  margin-bottom: 1.5rem;
  border-radius: 1rem;
  background-color: var(--dark-color);
  padding: 0.5rem;
}

.table-wrapper table {
  min-width: 600px; /* Ensures table scrolls even if screen is smaller */
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

/* Improve readability on small screens */
.table-wrapper th,
.table-wrapper td {
  white-space: nowrap; /* Prevent text wrapping */
  font-size: 0.85rem;
  padding: 0.6rem 1rem;
}

/* Optional: Add subtle shadow effect */
.table-wrapper::-webkit-scrollbar {
  height: 8px;
}

.table-wrapper::-webkit-scrollbar-track {
  background: #1a1c22;
  border-radius: 10px;
}

.table-wrapper::-webkit-scrollbar-thumb {
  background: var(--primary-color);
  border-radius: 10px;
}

@media (max-width: 768px) {
  table tr td:nth-child(4),
  table tr th:nth-child(4) {
    display: none;
  }
}