/* =========================================================
   VAIBHLY DASHBOARD FINAL FIX
   Fixes white paragraph text + broken rgba values
   ========================================================= */

html,
body{
  background:
    linear-gradient(
      135deg,
      #F3E8FF 0%,
      #EEF2FF 45%,
      #DBEAFE 100%
    ) !important;
  color:#111827 !important;
}

/* blurred circles */
body::before{
  content:"";
  position:fixed;
  top:-190px;
  right:-170px;
  width:560px;
  height:560px;
  background:
    radial-gradient(
      circle,
      rgba(124,58,237,.32) 0%,
      rgba(124,58,237,.18) 38%,
      rgba(124,58,237,0) 72%
    );
  filter:blur(24px);
  border-radius:50%;
  z-index:0;
  pointer-events:none;
}

body::after{
  content:"";
  position:fixed;
  bottom:-210px;
  left:-190px;
  width:600px;
  height:600px;
  background:
    radial-gradient(
      circle,
      rgba(37,99,235,.30) 0%,
      rgba(37,99,235,.16) 40%,
      rgba(37,99,235,0) 72%
    );
  filter:blur(26px);
  border-radius:50%;
  z-index:0;
  pointer-events:none;
}

.app,
.main,
.sidebar,
.top-header,
.hero,
.card,
.dashboard-card,
.analytics-card,
.store-card,
.section,
.post-container,
.leaderboard-box,
.heatmap-card{
  position:relative;
  z-index:1;
}

/* main cards */
.cards .card,
.dashboard-cards .card,
.dashboard-card,
.analytics-card,
.store-card,
.section,
.post-container,
.leaderboard-box,
.heatmap-card{
  background:rgba(255,255,255,.78) !important;
  background-image:none !important;
  color:#111827 !important;
  border:1px solid rgba(255,255,255,.72) !important;
  border-radius:30px !important;
  box-shadow:0 12px 30px rgba(15,23,42,.06) !important;
  backdrop-filter:blur(14px) !important;
}

/* titles */
.cards .card h3,
.dashboard-cards .card h3,
.dashboard-card h3,
.analytics-card h3,
.store-card h4,
.section h2,
.section h3,
.leaderboard-box h3,
.heatmap-title span{
  color:#111827 !important;
  -webkit-text-fill-color:#111827 !important;
  opacity:1 !important;
  visibility:visible !important;
  text-shadow:none !important;
}

/* paragraph / normal text */
.cards .card p,
.dashboard-cards .card p,
.dashboard-card p,
.analytics-card p,
.store-card p,
.section p,
.post-container p,
.leaderboard-box p,
.heatmap-card p,
#studentCourse,
#certificateStatus,
#resumeStatus,
#privacyText,
#totalTime,
#totalLessons{
  color:#4B5563 !important;
  -webkit-text-fill-color:#4B5563 !important;
  opacity:1 !important;
  visibility:visible !important;
  text-shadow:none !important;
}

/* spans inside resume card */
.dashboard-card span,
.resume-stats span,
.resume-stats b{
  color:#4B5563 !important;
  -webkit-text-fill-color:#4B5563 !important;
}

/* remove old gradient effects if any old class still exists */
.gradient-blue,
.gradient-purple,
.gradient-green{
  background:rgba(255,255,255,.78) !important;
  background-image:none !important;
  color:#111827 !important;
}

.gradient-blue *,
.gradient-purple *,
.gradient-green *{
  color:#111827 !important;
  -webkit-text-fill-color:#111827 !important;
}

/* buttons must stay white */
button,
.card button,
.dashboard-card button,
.store-card button,
#viewCertificateBtn,
#shareCertificateBtn,
#post-form button,
.browse-btn{
  background:
    linear-gradient(
      90deg,
      #5B4DFF,
      #6F67FF
    ) !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}

/* green share invite button */
button[style*="background:#16a34a"]{
  background:#16a34a !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}

/* sidebar */
.sidebar{
  background:
    linear-gradient(
      180deg,
      #2A1480 0%,
      #22106B 45%,
      #1A0C56 100%
    ) !important;
}

.sidebar nav a{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}

/* hero should keep white text */
.hero,
.hero *,
.progress-card,
.progress-card *{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}

/* but progress percent can stay dark if your ring uses white center */
#progressPercent{
  color:#111827 !important;
  -webkit-text-fill-color:#111827 !important;
}

/* mobile */
@media(max-width:768px){
  .cards,
  .dashboard-cards,
  .analytics-grid,
  .store-grid{
    grid-template-columns:1fr 1fr !important;
    gap:14px !important;
  }

  .cards .card,
  .dashboard-cards .card,
  .dashboard-card,
  .analytics-card,
  .store-card{
    padding:18px !important;
    border-radius:24px !important;
  }

  .cards .card h3,
  .dashboard-cards .card h3,
  .dashboard-card h3,
  .analytics-card h3,
  .store-card h4{
    font-size:16px !important;
    line-height:1.3 !important;
  }

  .cards .card p,
  .dashboard-cards .card p,
  .dashboard-card p,
  .analytics-card p,
  .store-card p{
    font-size:13px !important;
    line-height:1.5 !important;
  }

  .cards .card button,
  .dashboard-cards .card button,
  .dashboard-card button,
  .store-card button{
    width:100% !important;
    font-size:13px !important;
    padding:11px !important;
  }
}