/* ============================================================
   PS Market — User Panel Uniform Styling
   Shared CSS for all user-panel tabs:
   Dashboard, Profile, Referral, Income, Payouts, Benefits, etc.
   Font: Google Fonts Poppins (400, 600, 700)
   Icons: Font Awesome Free 6.x
   Responsive: 375px / 768px / 1024px / 1280px
   ============================================================ */

/* --- 1. Base & Typography --- */
.user-dashboard,
.user-dashboard *:not(.fas):not(.far):not(.fab):not(.fa):not(.fa-solid):not(.fa-regular):not(.fa-brands) {
  font-family: 'Poppins', sans-serif !important;
}

/* Ensure Font Awesome icons use their own font — never override with Poppins */
.user-dashboard .fas,
.user-dashboard .far,
.user-dashboard .fab,
.user-dashboard .fa,
.user-dashboard .fa-solid,
.user-dashboard .fa-regular,
.user-dashboard .fa-brands,
.user-dashboard [class*="fa-"] {
  font-family: 'Font Awesome 6 Free', 'Font Awesome 6 Brands', 'Font Awesome 5 Free', 'Font Awesome 5 Brands', 'FontAwesome' !important;
}

/* Ensure stat card icon images render at correct size */
.user-statics .single-statics .part-icon img {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  display: block !important;
}

.user-dashboard h1 {
  font-size: 28px !important;
  font-weight: 700 !important;
  color: #2c3e50 !important;
  margin-bottom: 20px !important;
}

.user-dashboard h2 {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #2c3e50 !important;
  margin-bottom: 16px !important;
}

.user-dashboard h3 {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #2c3e50 !important;
  margin-bottom: 14px !important;
}

.user-dashboard h4 {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #34495e !important;
  margin-bottom: 12px !important;
}

.user-dashboard h5 {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #34495e !important;
  margin-bottom: 10px !important;
}

.user-dashboard p,
.user-dashboard label,
.user-dashboard span:not(.badge):not(.notif-count-badge),
.user-dashboard td,
.user-dashboard th,
.user-dashboard li {
  font-size: 14px !important;
  line-height: 1.7 !important;
  color: #555 !important;
}

/* Fix breadcrumb white text */
.db-breadcrumb h1,
.db-breadcrumb h2,
.db-breadcrumb h3,
.db-breadcrumb p,
.db-breadcrumb span,
.db-breadcrumb a,
.db-breadcrumb .breadcrumb-item,
.db-breadcrumb .breadcrumb-item a {
  color: #fff !important;
}

/* Override inline styles on table header th */
.user-dashboard table thead th {
  color: #fff !important;
}

/* Override text colors for ANY element with inline gradient background */
.user-dashboard [style*="background: linear-gradient"] h1,
.user-dashboard [style*="background: linear-gradient"] h2,
.user-dashboard [style*="background: linear-gradient"] h3,
.user-dashboard [style*="background: linear-gradient"] h4,
.user-dashboard [style*="background: linear-gradient"] h5,
.user-dashboard [style*="background: linear-gradient"] p,
.user-dashboard [style*="background: linear-gradient"] span,
.user-dashboard [style*="background: linear-gradient"] strong,
.user-dashboard [style*="background: linear-gradient"] small,
.user-dashboard [style*="background: linear-gradient"] label,
.user-dashboard [style*="background: linear-gradient"] td,
.user-dashboard [style*="background: linear-gradient"] th {
  color: white !important;
}

/* Ensure stat card text inside gradient cards stays white */
.user-dashboard .card[style*="background: linear-gradient"] *,
.user-dashboard .stat-card[style*="background: linear-gradient"] *,
.user-dashboard div[style*="background: linear-gradient"] * {
  color: white !important;
}

/* But NOT nav link icons/text inside dashboard menu gradient buttons */
.dashboard-menu .nav-link *,
.dashboard-menu .nav-link {
  /* These already have their own color rules */
}

/* Section card titles - consistent everywhere */
.user-dashboard .section-card .section-title,
.user-dashboard .section-header .section-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #2c3e50 !important;
}

.user-dashboard .section-card .section-title i,
.user-dashboard .section-header .section-title i {
  color: #667eea !important;
  margin-right: 8px !important;
}

/* Account info cards */
.user-dashboard .section-card {
  background: #fff !important;
  border: 1px solid #e9ecef !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
  padding: 0 !important;
  margin-bottom: 20px !important;
  overflow: hidden !important;
}

.user-dashboard .section-header {
  padding: 15px 20px !important;
  border-bottom: 1px solid #e9ecef !important;
  background: #f8f9fa !important;
}

/* --- 2. Breadcrumb / Page Header --- */
.db-breadcrumb {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  padding: 120px 0 30px 0 !important;
  margin-bottom: 30px !important;
}

.db-breadcrumb h1 {
  color: #fff !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  margin-bottom: 5px !important;
}

.db-breadcrumb .db-user-profile .part-data .name {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #fff !important;
}

.db-breadcrumb .db-user-profile .part-data .text {
  font-size: 13px !important;
  color: rgba(255,255,255,0.85) !important;
}

.db-breadcrumb .db-user-profile .part-data .number {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #fff !important;
}

/* --- Profile Layout: db-user-profile --- */
.db-user-profile {
  display: flex !important;
  align-items: center !important;
  gap: 15px !important;
  width: 100% !important;
}

.db-user-profile .part-data {
  flex: 1 !important;
  min-width: 0 !important;
}

.db-user-profile .part-img {
  width: 70px !important;
  height: 70px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  border: 3px solid rgba(255, 255, 255, 0.4) !important;
  flex-shrink: 0 !important;
  background: rgba(255, 255, 255, 0.15) !important;
  display: block !important;
}

.db-user-profile .part-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* --- Name Row with referral & notification buttons --- */
.db-user-profile .name-row {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-bottom: 6px !important;
}

.db-user-profile .name-row .name {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #fff !important;
  display: inline-block !important;
}

/* Referral Links button */
.referral-shortcut-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: rgba(255, 255, 255, 0.2) !important;
  color: #fff !important;
  padding: 5px 14px !important;
  border-radius: 20px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  backdrop-filter: blur(5px) !important;
}

.referral-shortcut-btn:hover {
  background: rgba(255, 255, 255, 0.35) !important;
  color: #fff !important;
  text-decoration: none !important;
  transform: translateY(-1px) !important;
}

.referral-shortcut-btn i {
  font-size: 12px !important;
}

/* Notification button */
.notif-shortcut-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: rgba(255, 255, 255, 0.2) !important;
  color: #fff !important;
  padding: 5px 14px !important;
  border-radius: 20px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  backdrop-filter: blur(5px) !important;
  position: relative !important;
}

.notif-shortcut-btn:hover {
  background: rgba(255, 255, 255, 0.35) !important;
  color: #fff !important;
  text-decoration: none !important;
  transform: translateY(-1px) !important;
}

.notif-shortcut-btn i {
  font-size: 13px !important;
}

/* Notification count badge */
.notif-count-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #dc3545 !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  min-width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  padding: 0 4px !important;
  margin-left: 3px !important;
}

/* User ID and data list */
.db-user-profile .part-data ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 15px !important;
}

.db-user-profile .part-data ul li {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 13px !important;
}

/* --- 3. Dashboard Navigation Menu --- */
.dashboard-menu {
  background: transparent !important;
  border-bottom: 2px solid #e9ecef !important;
  padding: 20px 0 15px 0 !important;
  margin-bottom: 25px !important;
}

.dashboard-menu .nav-link {
  font-family: 'Poppins', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-radius: 12px !important;
  padding: 16px 10px !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
}

.dashboard-menu .nav-link i {
  font-size: 24px !important;
  margin-bottom: 8px !important;
}

.dashboard-menu .nav-link:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2) !important;
}

/* --- 4. Cards / Panels --- */
/* Base card styling — NO background override so inline gradients are preserved */
.user-dashboard .card,
.user-dashboard .up-card,
.user-dashboard .panel-box,
.user-dashboard .stat-card,
.user-dashboard .info-card {
  border-radius: 12px !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
  padding: 20px !important;
  margin-bottom: 20px !important;
  transition: box-shadow 0.3s ease !important;
}

/* White bg ONLY for cards WITHOUT inline background styles */
.user-dashboard .card:not([style*="background"]),
.user-dashboard .up-card:not([style*="background"]),
.user-dashboard .panel-box:not([style*="background"]),
.user-dashboard .stat-card:not([style*="background"]),
.user-dashboard .info-card:not([style*="background"]) {
  background: #fff !important;
  border: 1px solid #e9ecef !important;
}

/* Cards WITH inline gradient — no border, preserve their bg */
.user-dashboard .card[style*="background"],
.user-dashboard .stat-card[style*="background"] {
  border: none !important;
}

.user-dashboard .card:hover,
.user-dashboard .up-card:hover,
.user-dashboard .panel-box:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important;
}

.user-dashboard .card-header,
.user-dashboard .card .card-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  padding: 14px 20px !important;
  border-radius: 12px 12px 0 0 !important;
  border-bottom: none !important;
}

.user-dashboard .card-header * {
  color: #fff !important;
}

.user-dashboard .card-body {
  padding: 20px !important;
}

/* Cards with border-info or other colored borders */
.user-dashboard .card.border-info {
  border-color: #667eea !important;
}

/* Stat / Info cards with icons */
.user-dashboard .stat-box,
.user-dashboard .summary-card {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  border: 1px solid #e9ecef;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  text-align: center;
  margin-bottom: 20px;
}

.user-dashboard .stat-box h3,
.user-dashboard .summary-card h3 {
  font-size: 28px;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 5px;
}

.user-dashboard .stat-box p,
.user-dashboard .summary-card p {
  font-size: 13px;
  color: #888;
  margin-bottom: 0;
}

/* --- 5. Tables --- */
.user-dashboard table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 13px !important;
  margin-bottom: 20px !important;
}

.user-dashboard table thead th {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 12px 15px !important;
  text-align: left !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  white-space: nowrap !important;
}

.user-dashboard table thead th:first-child {
  border-radius: 8px 0 0 0 !important;
}

.user-dashboard table thead th:last-child {
  border-radius: 0 8px 0 0 !important;
}

.user-dashboard table tbody td {
  padding: 12px 15px !important;
  border-bottom: 1px solid #f0f0f0 !important;
  vertical-align: middle !important;
  font-size: 13px !important;
  color: #555 !important;
}

.user-dashboard table tbody tr:nth-child(even) {
  background-color: #f8f9fc !important;
}

.user-dashboard table tbody tr:hover {
  background-color: #eef2ff !important;
}

/* Override inline table styles from views */
.user-dashboard table tbody td[style],
.user-dashboard table thead th[style] {
  font-family: 'Poppins', sans-serif !important;
}

/* Table footer row styling */
.user-dashboard table tfoot tr {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important;
}

.user-dashboard table tfoot th,
.user-dashboard table tfoot td {
  color: #fff !important;
  font-weight: 700 !important;
  padding: 12px 15px !important;
}

/* DataTables integration */
.user-dashboard .dataTables_wrapper .dataTables_length,
.user-dashboard .dataTables_wrapper .dataTables_filter,
.user-dashboard .dataTables_wrapper .dataTables_info,
.user-dashboard .dataTables_wrapper .dataTables_paginate {
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  padding: 10px 0;
}

.user-dashboard .dataTables_wrapper .dataTables_filter input {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 13px;
}

.user-dashboard .dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: 6px !important;
  margin: 0 2px !important;
  font-size: 13px !important;
}

.user-dashboard .dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  color: #fff !important;
  border: none !important;
}

/* --- 6. Buttons --- */
.user-dashboard .btn {
  font-family: 'Poppins', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 10px 22px !important;
  border-radius: 8px !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.user-dashboard .btn-primary,
.user-dashboard .btn-info {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
}

.user-dashboard .btn-primary:hover,
.user-dashboard .btn-info:hover {
  background: linear-gradient(135deg, #5a72d4 0%, #6a4196 100%);
  box-shadow: 0 4px 15px rgba(102,126,234,0.4);
  transform: translateY(-1px);
}

.user-dashboard .btn-success {
  background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
  color: #fff;
}

.user-dashboard .btn-success:hover {
  box-shadow: 0 4px 15px rgba(17,153,142,0.4);
  transform: translateY(-1px);
}

.user-dashboard .btn-warning {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  color: #fff;
}

.user-dashboard .btn-warning:hover {
  box-shadow: 0 4px 15px rgba(245,87,108,0.4);
  transform: translateY(-1px);
}

.user-dashboard .btn-danger {
  background: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%);
  color: #fff;
}

.user-dashboard .btn-sm {
  font-size: 12px;
  padding: 6px 14px;
  border-radius: 6px;
}

/* Export buttons (Copy, CSV, Excel, PDF, Print) */
.user-dashboard .dt-buttons .btn,
.user-dashboard .buttons-copy,
.user-dashboard .buttons-csv,
.user-dashboard .buttons-excel,
.user-dashboard .buttons-pdf,
.user-dashboard .buttons-print {
  font-size: 12px !important;
  padding: 6px 14px !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  margin-right: 4px !important;
  margin-bottom: 8px !important;
}

/* --- 7. Forms / Inputs --- */
.user-dashboard .form-control {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px 14px;
  color: #333;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.user-dashboard .form-control:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102,126,234,0.15);
  outline: none;
}

.user-dashboard .form-group label,
.user-dashboard label {
  font-weight: 600;
  font-size: 13px;
  color: #444;
  margin-bottom: 6px;
}

.user-dashboard select.form-control {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23666' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

/* --- 8. Badges & Status Labels --- */
.user-dashboard .badge {
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  letter-spacing: 0.3px;
}

.user-dashboard .badge-success,
.user-dashboard .badge.bg-success {
  background: #28a745 !important;
  color: #fff;
}

.user-dashboard .badge-warning,
.user-dashboard .badge.bg-warning {
  background: #ffc107 !important;
  color: #333;
}

.user-dashboard .badge-danger,
.user-dashboard .badge.bg-danger {
  background: #dc3545 !important;
  color: #fff;
}

.user-dashboard .badge-info,
.user-dashboard .badge.bg-info {
  background: #17a2b8 !important;
  color: #fff;
}

/* --- 9. Tabs / Nav Pills --- */
.user-dashboard .nav-tabs,
.user-dashboard .nav-pills {
  border-bottom: 2px solid #e9ecef;
  margin-bottom: 20px;
  gap: 4px;
}

.user-dashboard .nav-tabs .nav-link,
.user-dashboard .nav-pills .nav-link {
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #666;
  padding: 10px 18px;
  border-radius: 8px 8px 0 0;
  border: none;
  transition: all 0.3s ease;
}

.user-dashboard .nav-tabs .nav-link.active,
.user-dashboard .nav-pills .nav-link.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  border: none;
}

.user-dashboard .nav-tabs .nav-link:hover,
.user-dashboard .nav-pills .nav-link:hover {
  background: #f0f0f0;
  color: #333;
}

.user-dashboard .tab-content {
  padding: 20px 0;
}

/* --- 10. Alerts --- */
.user-dashboard .alert {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  border-radius: 10px;
  padding: 14px 20px;
  border: none;
  margin-bottom: 20px;
}

.user-dashboard .alert-success {
  background: #d4edda;
  color: #155724;
}

.user-dashboard .alert-warning {
  background: #fff3cd;
  color: #856404;
}

.user-dashboard .alert-danger {
  background: #f8d7da;
  color: #721c24;
}

.user-dashboard .alert-info {
  background: #d1ecf1;
  color: #0c5460;
}

/* --- 11. Section Spacing --- */
.user-dashboard .container {
  padding-left: 15px;
  padding-right: 15px;
}

.user-dashboard .section-gap {
  margin-bottom: 30px;
}

.user-dashboard .row {
  margin-bottom: 0;
}

.user-dashboard .row > [class*="col-"] {
  margin-bottom: 20px;
}

/* --- 12. Referral Link Box --- */
.user-dashboard .referral-link-box {
  background: #f8f9fc;
  border: 2px dashed #667eea;
  border-radius: 10px;
  padding: 15px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.user-dashboard .referral-link-box input {
  flex: 1;
  background: transparent;
  border: none;
  font-size: 13px;
  color: #667eea;
  font-weight: 600;
}

.user-dashboard .referral-link-box .btn-copy {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

/* --- 13. Profile Section --- */
.user-dashboard .profile-section {
  text-align: center;
}

.user-dashboard .profile-section img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #667eea;
  margin-bottom: 15px;
}

/* --- 14. Chart Container --- */
.user-dashboard .chart-container {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  border: 1px solid #e9ecef;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  margin-bottom: 20px;
}

/* --- 15. Tree / Network View --- */
.user-dashboard .tree-view {
  overflow-x: auto;
  padding: 20px;
}

/* --- 16. Modal Overrides --- */
.user-dashboard .modal-content {
  border-radius: 12px;
  border: none;
  box-shadow: 0 10px 40px rgba(0,0,0,0.15);
}

.user-dashboard .modal-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
  border-radius: 12px 12px 0 0;
  padding: 16px 20px;
}

.user-dashboard .modal-header .modal-title {
  font-weight: 600;
  font-size: 16px;
}

.user-dashboard .modal-header .close {
  color: #fff;
  opacity: 0.8;
}

.user-dashboard .modal-body {
  padding: 24px;
}

.user-dashboard .modal-footer {
  padding: 14px 20px;
  border-top: 1px solid #eee;
}

/* --- 17. Scrollbar --- */
.user-dashboard ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.user-dashboard ::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.user-dashboard ::-webkit-scrollbar-thumb {
  background: #bbb;
  border-radius: 4px;
}

.user-dashboard ::-webkit-scrollbar-thumb:hover {
  background: #999;
}

/* --- 18. Nav Menu Enhancements --- */
/* Ensure nav menu buttons have consistent sizing and layout */
.user-dashboard nav ul.nav {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  justify-content: center !important;
  padding: 0 !important;
  list-style: none !important;
}

.user-dashboard nav ul.nav > li {
  flex: 0 1 calc(14.28% - 12px) !important;
  min-width: 130px !important;
}

/* Member Benefits and Profile — slightly muted gradient, ensure readability */
.user-dashboard nav ul.nav > li .nav-link {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  min-height: 90px !important;
  justify-content: center !important;
}

/* Stat grid — consistent layout */
.user-dashboard .stats-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap: 20px !important;
  margin-bottom: 30px !important;
}

.user-dashboard .stats-grid .stat-card {
  background: #fff !important;
  border: 1px solid #e9ecef !important;
  border-radius: 12px !important;
  padding: 20px !important;
  text-align: center !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
}

.user-dashboard .stats-grid .stat-card .stat-value {
  font-size: 28px !important;
  font-weight: 700 !important;
  color: #2c3e50 !important;
}

.user-dashboard .stats-grid .stat-card .stat-label {
  font-size: 13px !important;
  color: #888 !important;
  margin-top: 5px !important;
}

.user-dashboard .stats-grid .stat-card .stat-icon {
  font-size: 24px !important;
  color: #667eea !important;
  margin-bottom: 10px !important;
}

/* Profile sidebar nav links */
.user-dashboard .nav-link.active[id*="-tab"] {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  color: #fff !important;
  border-radius: 8px !important;
}

/* Profile info table consistent styling */
.user-dashboard .table-borderless td {
  padding: 10px 15px !important;
  border-bottom: 1px solid #f0f0f0 !important;
  color: #555 !important;
}

.user-dashboard .table-borderless td:first-child {
  font-weight: 600 !important;
  color: #333 !important;
}

/* Overview page & Income page: stat cards (single-statics) */
.user-dashboard .single-statics {
  border-radius: 12px !important;
  padding: 20px !important;
  margin-bottom: 20px !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
}

/* White bg only for single-statics WITHOUT inline bg */
.user-dashboard .single-statics:not([style*="background"]) {
  background: #fff !important;
  border: 1px solid #e9ecef !important;
}

/* No border on gradient stat cards */
.user-dashboard .single-statics[style*="background"] {
  border: none !important;
}

/* White text inside gradient stat cards */
.user-dashboard .single-statics[style*="background: linear-gradient"] *,
.user-dashboard .single-statics[style*="background: linear-gradient"] {
  color: white !important;
}

/* Dashboard section-card with transparent bg — don't force white */
.user-dashboard .section-card[style*="background: transparent"] {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
}

/* Dashboard Account Information / Membership gradient divs */
.user-dashboard .section-card div[style*="background: linear-gradient"] {
  border-radius: 15px !important;
}

.user-dashboard .section-card div[style*="background: linear-gradient"] * {
  color: white !important;
}

.user-dashboard .user-statics {
  margin-bottom: 30px !important;
}

/* Account settings section */
.user-dashboard .account-settings .table th {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  color: #fff !important;
}

/* Referral stat cards */
.user-dashboard .referral-stats .card {
  text-align: center !important;
}

/* Notification list styling */
.user-dashboard .notification-item,
.user-dashboard .list-group-item {
  border: none !important;
  border-bottom: 1px solid #f0f0f0 !important;
  padding: 15px 20px !important;
  transition: background 0.2s ease !important;
}

.user-dashboard .notification-item:hover,
.user-dashboard .list-group-item:hover {
  background: #f8f9fc !important;
}

/* Payout warning card */
.user-dashboard .payout-warning,
.user-dashboard [style*="background:#58d68d"],
.user-dashboard [style*="background: #58d68d"] {
  border-radius: 12px !important;
}

/* Update Now button */
.user-dashboard .btn-outline-primary {
  background: transparent !important;
  border: 2px solid #667eea !important;
  color: #667eea !important;
  padding: 10px 30px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
}

.user-dashboard .btn-outline-primary:hover {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  color: #fff !important;
  border-color: transparent !important;
}

/* --- 19. Utility --- */
.user-dashboard .text-gradient {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.user-dashboard .shadow-card {
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.user-dashboard .no-data {
  text-align: center;
  padding: 40px 20px;
  color: #999;
  font-size: 14px;
}

.user-dashboard .no-data i {
  font-size: 48px;
  margin-bottom: 15px;
  display: block;
  color: #ddd;
}

/* ============================================================
   RESPONSIVE — Mobile (max-width: 767px)
   ============================================================ */
@media (max-width: 767px) {
  /* Breadcrumb */
  .db-breadcrumb {
    padding: 20px 0 !important;
  }

  .db-breadcrumb h1 {
    font-size: 20px !important;
  }

  .db-breadcrumb .db-user-profile .part-data .name {
    font-size: 15px !important;
  }

  .db-breadcrumb .db-user-profile {
    flex-direction: column !important;
    text-align: center !important;
  }

  .db-breadcrumb .part-img {
    margin-bottom: 10px !important;
  }

  .db-user-profile .name-row {
    justify-content: center !important;
  }

  .db-user-profile .part-data ul {
    justify-content: center !important;
  }

  .referral-shortcut-btn,
  .notif-shortcut-btn {
    font-size: 11px !important;
    padding: 4px 10px !important;
  }

  /* Typography */
  .user-dashboard h1 { font-size: 22px !important; }
  .user-dashboard h2 { font-size: 18px !important; }
  .user-dashboard h3 { font-size: 16px !important; }

  /* Dashboard menu — 3 cols on mobile */
  .dashboard-menu nav ul,
  .user-dashboard nav ul.nav {
    gap: 8px !important;
  }

  .dashboard-menu nav ul li,
  .user-dashboard nav ul.nav > li {
    flex: 0 1 calc(33.33% - 8px) !important;
    min-width: 90px !important;
  }

  .dashboard-menu .nav-link,
  .user-dashboard nav ul.nav > li .nav-link {
    padding: 12px 8px !important;
    font-size: 11px !important;
    min-height: 70px !important;
  }

  .dashboard-menu .nav-link i,
  .user-dashboard nav ul.nav > li .nav-link i {
    font-size: 18px !important;
    margin-bottom: 5px !important;
  }

  /* Stats grid — 2 cols on mobile */
  .user-dashboard .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* Cards */
  .user-dashboard .card,
  .user-dashboard .up-card,
  .user-dashboard .panel-box,
  .user-dashboard .stat-card,
  .user-dashboard .section-card {
    padding: 15px !important;
    margin-bottom: 15px !important;
    border-radius: 10px !important;
  }

  .user-dashboard .card-header {
    padding: 12px 15px !important;
    font-size: 14px !important;
  }

  /* Tables — horizontal scroll */
  .user-dashboard .table-responsive,
  .user-dashboard .dataTables_wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .user-dashboard table {
    min-width: 500px !important;
    font-size: 12px !important;
  }

  .user-dashboard table thead th,
  .user-dashboard table tbody td {
    padding: 8px 10px !important;
    font-size: 12px !important;
  }

  /* Buttons */
  .user-dashboard .btn {
    font-size: 13px !important;
    padding: 8px 16px !important;
  }

  /* Forms */
  .user-dashboard .form-control {
    font-size: 14px !important;
    padding: 8px 12px !important;
  }

  /* Tabs */
  .user-dashboard .nav-tabs .nav-link,
  .user-dashboard .nav-pills .nav-link {
    font-size: 12px !important;
    padding: 8px 12px !important;
  }

  /* Container no overflow */
  .user-dashboard .container {
    overflow-x: hidden !important;
  }

  /* Stat boxes stack */
  .user-dashboard .stat-box,
  .user-dashboard .summary-card {
    margin-bottom: 15px !important;
  }

  /* Referral link box */
  .user-dashboard .referral-link-box {
    flex-direction: column !important;
    text-align: center !important;
  }

  .user-dashboard .referral-link-box input {
    width: 100% !important;
    text-align: center !important;
    margin-bottom: 8px !important;
  }

  /* Profile sidebar — stack vertically on mobile */
  .user-dashboard .col-xl-3.col-lg-3 {
    margin-bottom: 15px !important;
  }

  /* Income stat cards — 2 cols on mobile */
  .user-dashboard .col-xl-3.col-lg-3.col-md-6 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }

  /* Single statics — stack on mobile */
  .user-dashboard .single-statics {
    margin-bottom: 15px !important;
  }
}

/* ============================================================
   RESPONSIVE — Tablet (768px – 1023px)
   ============================================================ */
@media (min-width: 768px) and (max-width: 1023px) {
  .db-breadcrumb h1 {
    font-size: 22px !important;
  }

  .dashboard-menu nav ul li,
  .user-dashboard nav ul.nav > li {
    flex: 0 1 calc(25% - 12px) !important;
    min-width: 110px !important;
  }

  .dashboard-menu .nav-link,
  .user-dashboard nav ul.nav > li .nav-link {
    padding: 14px 8px !important;
    font-size: 12px !important;
  }

  .user-dashboard h1 { font-size: 24px !important; }
  .user-dashboard h2 { font-size: 20px !important; }

  .user-dashboard table {
    font-size: 13px !important;
  }

  /* Stats grid — 2 cols on tablet */
  .user-dashboard .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ============================================================
   RESPONSIVE — Small Desktop (1024px – 1279px)
   ============================================================ */
@media (min-width: 1024px) and (max-width: 1279px) {
  .dashboard-menu nav ul li {
    min-width: 120px !important;
  }
}

/* ============================================================
   RESPONSIVE — Large Desktop (1280px+)
   ============================================================ */
@media (min-width: 1280px) {
  .user-dashboard .container {
    max-width: 1200px;
    margin: 0 auto;
  }
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
  .dashboard-menu,
  .db-breadcrumb .referral-shortcut-btn,
  .db-breadcrumb .notif-shortcut-btn,
  .btn-copy,
  .dt-buttons {
    display: none !important;
  }

  .user-dashboard table thead th {
    background: #667eea !important;
    color: #fff !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .user-dashboard table tbody tr:nth-child(even) {
    background: #f8f9fc !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* ============================================================
   NO HORIZONTAL SCROLL — Global Safety Net
   ============================================================ */
html, body {
  overflow-x: hidden;
}

.user-dashboard {
  overflow-x: hidden;
  max-width: 100vw;
}