/* ===== Leaderboard UI Styles ===== */

/* General button styling */
.lb.btn {
  background: #1d2948;
  color: #e7efff;
  border: 1px solid #2c447e;
  border-radius: 10px;
  padding: 0.5rem 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.lb.btn.primary {
  background: linear-gradient(180deg, #2a3f74, #223566);
}

/* Input field styling */
.lb.input {
  background: #0c1222;
  color: #e7efff;
  border: 1px solid #25365f;
  border-radius: 10px;
  padding: 0.5rem 0.7rem;
}

/* Leaderboard T-100 panel container */
.lb.panel {
  position: absolute;
  top: 72px;
  right: 10px;
  z-index: 1000;
  background: #0f1424;
  color: #e7efff;
  border: 1px solid #223356;
  border-radius: 14px;
  padding: 10px;
  width: min(420px, 92vw);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

/* Header styles inside panel */
.lb.head {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.lb.title {
  margin: 0;
  font-size: 1.05rem;
}

.lb.muted {
  color: #9fb2d8;
  font-size: 0.9rem;
  margin-top: 6px;
}

/* Table styling */
.lb.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 6px;
}

.lb.table thead th {
  text-align: left;
  color: #9fb2d8;
  font-weight: 600;
  padding: 0.35rem 0.6rem;
}

.lb.table tbody td {
  background: #0c1222;
  border: 1px solid #24365f;
  padding: 0.5rem 0.6rem;
}

/* Round table row corners */
.lb.table tbody tr td:first-child {
  border-radius: 10px 0 0 10px;
}

.lb.table tbody tr td:last-child {
  border-radius: 0 10px 10px 0;
}

/* Floating leaderboard toggle button near exam title */
#lbToggle.lb.btn.floating {
  position: absolute;
  top: 72px;
  right: 12px;
  z-index: 999;
}

/* Adjust positioning on larger screens */
@media (min-width: 768px) {
  #lbToggle.lb.btn.floating {
    top: 78px;
  }
  #lbPanel {
    top: 78px;
  }
}

/* Input validation outline styles */
#lbName.lb-ok {
  outline: 2px solid #34d399; /* Green border if available */
}

#lbName.lb-bad {
  outline: 2px solid #f87171; /* Red border if taken */
}

/* ===== Mobile positioning fixes ===== */

/* Ensure page containers act as relative anchors */
body,
.exam-area,
.exam,
.quiz-container {
  position: relative;
}

/* Force absolute positioning on mobile so panel scrolls naturally */
@media (max-width: 768px) {
  #lbToggle.lb.btn.floating {
    position: absolute !important;
    top: 141px !important;   /* Adjust top if needed */
    right: 12px !important;
  }

  #lbPanel {
    position: absolute !important;
    top: 72px !important;
    right: 10px !important;
    width: calc(100vw - 20px);
    max-width: none;
  }
}

/* Override any old fixed positioning fallback */
@media (max-width: 768px) {
  @supports not (selector(:has(*))) {
    #lbToggle.lb.btn.floating,
    #lbPanel {
      position: absolute !important;
    }
  }
}


/* Inline notice under the name input */
.lb.notice { display:block; font-size:.85rem; margin-top:6px; }
.lb.notice--ok  { color:#34d399; } /* green */
.lb.notice--err { color:#f87171; } /* red */


/* === Visibility fix: purple-pink gradient text for title and name-saved notice === */
#lbPanel .lb.title,
#lbPanel .lb.notice {
  background: linear-gradient(90deg, #a855f7, #ec4899); /* purple → pink */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  font-weight: 700;
}