/* Main Dashboard Container - The overarching wrapper for the entire dashboard */
.user-dashboard-container {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  padding: 2rem;
  background-color: #f0f2f5;
  color: #333;
}

/* Main Layout Grid */
.dashboard-main-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem; /* Consistent spacing between columns */
}

/* Header & Profile Image Section - The top banner of the dashboard */
.dashboard-header-section {
  flex: 1 1 100%; /* Takes up the full width */
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

/* Main Content Area - This contains the stats and info links */
.dashboard-content-area {
  flex: 2 1 60%; /* Takes up more space than the sidebar */
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

/* Sidebar for Upload Links - Placed to the side of the main content */
.dashboard-sidebar {
  flex: 1 1 30%; /* Takes up a smaller portion of the width */
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

/* Responsive Rules for a Single-Column Layout on Mobile */
@media (max-width: 768px) {
  .dashboard-content-area,
  .dashboard-sidebar {
    flex-basis: 100%; /* Stacks columns vertically on smaller screens */
  }
}

/* Individual Card Headers - Titles for sections within the layout */
.dashboard-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  font-size: 1.25rem;
  font-weight: 600;
  border-bottom: 2px solid #e9ecef;
  padding-bottom: 0.75rem;
}

/* All Links and List Items */
.dashboard-link-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0.5rem 0;
  border-bottom: 1px solid #e9ecef;
}

.dashboard-link-item a {
  text-decoration: none;
  color: #007bff;
  font-weight: 500;
  transition: color 0.2s ease;
}

.dashboard-link-item a:hover {
  color: #0056b3;
  text-decoration: underline;
}

/* Styling for specific elements */
.dashboard-balance {
  font-size: 1.2rem;
  font-weight: bold;
}

.dashboard-stat-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: 1rem;
}

.dashboard-stat-entry {
  font-size: 1rem;
}

.dashboard-stat-entry strong {
  color: #000;
  font-size: 1.1em;
}

.dashboard-icon {
  width: 22px;
  height: 22px;
}

.dashboard-count {
  background-color: #dc3545;
  color: #fff;
  border-radius: 50%;
  min-width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
}