/* =====================================
   MODERATOR PAGE – PROFESSIONAL THEME
===================================== */

.moderator-hero {
  background: linear-gradient(
    135deg,
    #eaf1f8 0%,
    #dde7f2 50%,
    #eaf1f8 100%
  );
  padding: 80px 20px;
  text-align: center;
}

.moderator-hero h1 {
  font-size: 36px;
  color: #1e293b;
}

.moderator-hero p {
  color: #475569;
}

/* DASHBOARD GRID */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin: 40px 0;
}

.dashboard-card {
  background: #ffffff;
  padding: 25px;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(30, 41, 59, 0.08);
  border: 1px solid #e2e8f0;
  text-align: center;
}

.dashboard-card h3 {
  font-size: 16px;
  color: #475569;
  margin-bottom: 8px;
}

.dashboard-card p {
  font-size: 28px;
  font-weight: 600;
  color: #2563eb;
}

/* TABLE STYLE */
.table-wrapper {
  overflow-x: auto;
  margin-top: 20px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

table th,
table td {
  padding: 12px;
  border-bottom: 1px solid #e2e8f0;
  font-size: 14px;
  text-align: left;
}

table th {
  background: #f1f5f9;
  font-weight: 600;
  color: #1e293b;
}

.action-btn {
  background: #2563eb;
  color: white;
  border: none;
  padding: 6px 14px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 12px;
  margin-right: 5px;
}

.action-btn.danger {
  background: #dc2626;
}

.action-btn.warn {
  background: #f59e0b;
}

.action-btn:hover {
  opacity: 0.9;
}
/* ===============================
   STATUS COLORS
=============================== */

.dashboard-card.status.accepted {
  border-left: 5px solid #16a34a;
}
.dashboard-card.status.accepted p {
  color: #16a34a;
}

.dashboard-card.status.flagged {
  border-left: 5px solid #f59e0b;
}
.dashboard-card.status.flagged p {
  color: #f59e0b;
}

.dashboard-card.status.rejected {
  border-left: 5px solid #dc2626;
}
.dashboard-card.status.rejected p {
  color: #dc2626;
}

.dashboard-card.status.pending {
  border-left: 5px solid #64748b;
}
.dashboard-card.status.pending p {
  color: #64748b;
}
.action-btn.accept {
  background: #16a34a;
}

tr.status-accepted {
  background: #ecfdf5;
}

tr.status-flagged {
  background: #fffbeb;
}

tr.status-rejected {
  background: #fef2f2;
}