/* ==================================================================
   3) DASHBOARD PAGE (scoped under .dashboard-page)
   ================================================================== */
.dashboard-page .dashboard-container {
  max-width: 650px;
  margin: 36px auto 0 auto;
  padding: 0 14px 56px 14px;
}
.dashboard-page .dashboard-greeting {
  margin: 2.5rem auto 2.2rem auto;
  text-align: center;
  max-width: 600px;
}
.dashboard-page .dashboard-greeting h1 {
  color: #FFA726;
  font-size: 2.5rem;
  font-weight: 800;
  margin-bottom: 0.7rem;
}
.dashboard-page .dashboard-greeting p {
  color: #5d5d5d;
  font-size: 1.19rem;
  margin-bottom: 2.5rem;
  font-weight: 500;
}
.dashboard-page .dashboard-searchbar-wrap {
  margin: 0 auto 0.8rem auto;
  max-width: 530px;
  background: #fff;
  border-radius: 2.3rem;
  box-shadow: 0 4px 32px rgba(255,167,38,0.10);
  padding: 0.15rem 1.8rem;
  display: flex;
  align-items: center;
}
.dashboard-page .dashboard-search-icon {
  color: #FFA726;
  font-size: 1.35rem;
  margin-right: 0.5rem;
}
.dashboard-page .dashboard-searchbar {
  border: none;
  background: transparent;
  flex: 1 1 auto;
  font-size: 1.21rem;
  padding: 0.9rem 0.9rem 0.9rem 0;
  outline: none;
  color: #444;
}

/* -----------------------------
   3a) STATS CARDS (Dashboard) 
   ----------------------------- */
.dashboard-page .stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem; /* */
  margin-bottom: 1.5rem;
  justify-content: center;
}
.dashboard-page .stat-card {
  background: #fff;
  border-radius: 1.1rem; /* */
  box-shadow: 0 2px 18px rgba(255,167,38,0.13); /* */
  padding: 2.1rem 1.3rem 1.6rem 1.3rem; /* */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: box-shadow 0.16s; /* */
  /* Replaced fixed width with flexible sizing for responsiveness */
  flex: 1 1 calc(50% - 0.75rem); /* 2 cards per row on smaller screens (50% minus half of the gap) */
  max-width: calc(50% - 0.75rem); /* Ensure it doesn't grow beyond 50% */
  min-width: 140px; /* Prevent cards from becoming too small on very narrow screens */
}

/* For desktop (3 cards per row) */
@media (min-width: 768px) {
  .dashboard-page .stat-card {
    flex: 1 1 calc(33.333% - 1rem); /* 3 cards per row on wider screens (33.333% minus a portion of the gap) */
    max-width: calc(33.333% - 1rem);
  }
}

.dashboard-page .stat-card:hover {
  box-shadow: 0 6px 24px rgba(255,167,38,0.20); /* */
}
.dashboard-page .stat-icon {
  font-size: 2.2rem; /* */
  color: #FFA726; /* */
  margin-bottom: 0.25rem; /* */
}
.dashboard-page .stat-value {
  font-size: 2rem; /* */
  font-weight: 700; /* */
  color: #222; /* */
}
.dashboard-page .stat-label {
  font-size: 1.08rem; /* */
  color: #757575; /* */
  margin-top: 0.14rem; /* */
}
.dashboard-page .stat-highlight {
  color: #ff5f36; /* */
}

/* -----------------------------
   3b) CHARTS (Dashboard)
   ----------------------------- */
.dashboard-page .chart-section {
  display: flex;
  flex-direction: column; /* Charts are already one per row */
  gap: 1.5rem; /* */
  margin-bottom: 2.2rem; /* */
  /* Changed align-items to center to allow chart cards to respect max-width and center */
  align-items: center; /* Changed from stretch to center */
}
.dashboard-page .chart-card {
  background: #fff; /* */
  border-radius: 1.1rem; /* */
  box-shadow: 0 2px 16px rgba(255,167,38,0.13); /* */
  padding: 1.6rem 1.1rem 2.0rem 1.1rem; /* */
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: box-shadow 0.16s; /* */
  
  /* Adjusted for full width like "About IntQues" section */
  width: 100%; /* Make it take full available width of its container */
  max-width: 680px; /* Match max-width of the "About IntQues" section */
  /* Removed min-width: 30%; as it's no longer needed with width: 100% and max-width */
}
.dashboard-page .chart-card:hover {
  box-shadow: 0 6px 24px rgba(255,167,38,0.20); /* */
}
.dashboard-page .chart-title {
  font-weight: 600; /* */
  font-size: 1.18rem; /* */
  margin-bottom: 0.8rem; /* */
  color: #252525; /* */
}
.dashboard-page .chart-canvas-wrap {
  width: 180px; /* */
  height: 130px; /* */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.dashboard-page .donut-center-text {
  position: absolute; /* */
  left: 0; /* */
  right: 0; /* */
  top: 50%; /* */
  transform: translateY(-50%); /* */
  text-align: center; /* */
  font-size: 2rem; /* */
  color: #FFA726; /* */
  font-weight: bold; /* */
}
.dashboard-page .correct-label {
  color: #36c449; /* */
  font-weight: 600; /* */
}
.dashboard-page .wrong-label {
  color: #ff4848; /* */
  font-weight: 600; /* */
}

/* -----------------------------
   3c) ABOUT SECTION (Dashboard)
   ----------------------------- */
.dashboard-page .about-section {
  background: white; /* */
  border-radius: 1.1rem; /* */
  margin: 2.5rem auto 1.7rem auto; /* */
  box-shadow: 0 2px 14px rgba(255,167,38,0.08); /* */
  padding: 2rem 1.7rem 1.2rem 1.7rem; /* */
  max-width: 680px; /* */
  text-align: center; /* */
}
.dashboard-page .about-section h3 {
  color: #FFA726; /* */
  font-weight: 700; /* */
  margin-bottom: 0.6rem; /* */
  font-size: 1.32rem; /* */
}
.dashboard-page .about-section p {
  color: #674C22; /* */
  font-size: 1.08rem; /* */
  margin-bottom: 0.4rem; /* */
}


/* -----------------------------
   3d) BENEFITS SECTION (Dashboard)
   ----------------------------- */
.dashboard-page .dashboard-benefits {
  display: flex; /* */
  flex-direction: column; /* */
  gap: 1.5rem; /* */
  margin: 2.5rem auto 0 auto; /* */
  padding: 0 14px 56px 14px; /* */
  max-width: 650px; /* */
}

.dashboard-page .benefit-card {
  background: #fff; /* */
  border-radius: 1.1rem; /* */
  box-shadow: 0 2px 16px rgba(255,167,38,0.13); /* */
  padding: 1.6rem 1.1rem 2.0rem 1.1rem; /* */
  display: flex; /* */
  flex-direction: column; /* */
  align-items: center; /* */
  text-align: center; /* */
  transition: box-shadow 0.16s; /* */
}

.dashboard-page .benefit-card:hover {
  box-shadow: 0 6px 24px rgba(255,167,38,0.20); /* */
}

.dashboard-page .benefit-card i {
  font-size: 2rem; /* */
  color: #FFA726; /* */
  margin-bottom: 0.8rem; /* */
}

.dashboard-page .benefit-card h4 {
  font-size: 1.18rem; /* */
  font-weight: 600; /* */
  color: #252525; /* */
  margin-bottom: 0.6rem; /* */
}

.dashboard-page .benefit-card p {
  font-size: 1.07rem; /* */
  color: #666; /* */
  line-height: 1.5; /* */
  max-width: 90%; /* */
}

.dashboard-page .chart-section,
.dashboard-page .dashboard-benefits {
  padding: 0; /* */
}

.dashboard-page .guest-warning-box {
  background: #fff8e1; /* */
  color: #a65e00; /* */
  border: 1px solid #ffe082; /* */
  padding: 10px 16px; /* */
  border-radius: 10px; /* */
  font-size: 1rem; /* */
  display: inline-block; /* */
}
.dashboard-page .guest-warning-box .btn {
  font-size: 0.875rem; /* */
  padding: 5px 12px; /* */
}

.dashboard-page .dashboard-searchbar::placeholder {
  transition: opacity 0.5s ease; /* */
  color: #999; /* */
}