.level-bars {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}


/* 🔷 RESET & BASE STYLES */
* {
  box-sizing: border-box;
}


main.app {
  flex: 1;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  font-family: 'Segoe UI', sans-serif;
  background-size: cover;
  overflow: auto;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: white !important;
  min-height: 100vh;
}



/* 🔷 BACKGROUND IMAGE */
.background-image {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}



/* 🔷 APP LAYOUT & CONTAINERS */
.app {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}



/* 🔷 LOGO */
.logo {
  margin-top: -40px;
  margin-bottom: -30px; /* Adjust spacing as needed */
  max-width: 150px;
  height: auto;
  display: block;
}

.logo-container {
  text-align: center;
  margin-bottom: 10px;
}


/* 🔷 Base Button Styles */
.nav-button,
.highlight-button {
  display: flex;
    flex-direction: row; /* this is correct */
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 0.75rem 1rem;
  border: none;
  border-radius: 1.25rem;
  font-size: 1.25rem;
  font-weight: bold;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: transform 0.2s ease;
  text-align: left;
  color: white;
}



/* 🔷 Unique Navigation Buttons */
.nav-button.log {
  background-color: #157dab;
  width: 140px;
  height: 100px;
}



.highlight-button.leaderboard {
  background-color: #fcb738;
  width: 200px;
  height: 100px;
  justify-content: center;
  color: white;
}


.nav-button.review {
  display: flex;
  align-items: center;       /* Vertical centering */
  justify-content: center;   /* Horizontal centering */
  gap: 10px;
  flex-direction: row;
  text-align: left;
  background-color: #2bb8d6;
  width: 170px;
  height: 90px;
  padding: 10px;
}

.nav-button .icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex-shrink: 0;
}

.nav-button span,
.nav-button .button-text {
  display: inline-block;
  white-space: normal;
  word-break: break-word;
  line-height: 1.2;
  flex: 1; /* this allows text to fill the remaining space */
}


.nav-button.review .icon {
  width: 50px;
  height: auto;
  flex-shrink: 0;
}



.nav-button.review span {
  display: inline-block;
  max-width: 100px;
  white-space: normal;     /* Allows wrapping */
  line-height: 1.2;
}


.nav-button.points {
  background-color: #2bb8d6;
  width: 170px;
  height: 90px;
}



.nav-button.settings {
  background-color: #38b9f0;
  width: 160px;
  height: 90px;
}



.nav-button.faq {
  background-color: #21a4ff;
  width: 150px;
  height: 75px;
}



/* 🔷 HOME PAGE */
.header h2 {
  font-size: 1.5rem;
  margin-top: 10px;
  margin-bottom: 10px;
  color: #00477d;
}



#reviewLogsBtn .icon {
  width: 55px;
  height: 55px;
  object-fit: contain;
  margin-bottom: 2px; /* nudges icon to match text baseline */
}



.avatar-badge {
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}



/* Only apply this floating style to leaderboard avatars */
body.leaderboard-page .avatar-track .avatar {
  position: absolute;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  transform: translateY(-50%);
  top: 0;
  z-index: 5;
}

/* Restore normal avatar style for home/settings/etc */
.avatar {
  width: 160px;
  height: auto;
  border-radius: 1rem;
  object-fit: cover;
  display: block;
  background: transparent;
}



.badge {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  display: block;
}



.progress-card {
  width: 90%;
  background-color: #3bb4c7;
  border: 5px solid #238cb8;
  border-radius: 30px;
  padding: 0rem 0.5rem;
  position: relative;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
}



.progress-label {
  font-size: 25px; /* increase size */
  font-weight: bold;
  margin-bottom: 10px;
  text-align: center;
}



.progress-container {
  background-color: white;
  border: 2px solid #00477d;
  border-radius: 10px;
  max-width: 80%;
  overflow: hidden;
  height: 20px;
  margin: 0 auto -5px auto; /* top: 0, bottom: -5px, auto left/right to center */
}


.progress-bar {
  height: 100%;
  background-color: #c8f983; /* or your light green */
  transition: width 0.3s ease-in-out;
}



.percent-text {
  text-align: center;
  font-size: 20px;
  margin-top: 3px;
  color: white;
  font-weight: bold;
}


/* 🔷 NAV BUTTONS */
.button-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-top: 1rem;
}



.button-area {
  width: 100%;
  max-width: 360px;
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}



.button-row {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}



.button-row.center {
  margin-top: 10px;
  justify-content: center;
}



.icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex-shrink: 0;
}


/* 🔷 MY POINTS PAGE */
.my-points-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}


.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 10px 20px;
  box-sizing: border-box;
}


.my-points-header img.level-badge {
  height: 60px;
  width: 60px;
  object-fit: contain;
}



.log-row div:nth-child(4) {
  white-space: normal;
  word-break: break-word;
}



/* 🔷 CATEGORY SUMMARY */
#categorySummary {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  padding: 0 10px 10px;
}



.category-summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 80px;
  padding: 6px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  text-align: center;
  font-size: 13px;
  color: #00477d;
}



.category-summary img.category-icon {
  width: 40px;
  height: 40px;
  margin-bottom: 4px;
}



.category-summary img.category-icon.large {
  width: 60px;
  height: 60px;
}


/* 🔷 LOG POINTS PAGE */
#logPointsPage {
  background-color: white;
  color: #00477d;
  min-height: 100vh;
  width: 100%;
  padding: 20px;
}



/* 🔷 Header */
.log-points-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}



/* 🔷 Form Container */
.log-form {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: 0 10px;
}



/* 🔷 Form Grid */
.log-points-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 20px;
  align-items: start;
  max-width: 500px;
  margin: 0 auto;
}


#loginEmail,
#loginPassword,
#logPoints,
#logStudent,
#logCategory,
#logNotes,
#logDate {
  width: 100%;
  height: 42px; /* taller for better fit */
  padding: 8px 10px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 6px;
}

.login-form input,
.login-form select {
  width: 100%;
  padding: 12px;
  margin: 8px 0;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 16px;
  box-sizing: border-box;
}

.login-form select {
  background-color: white;
}

#logNotes {
  height: 50px;
  resize: vertical;
}

#logDate {
  margin-top: 20px;
  grid-column: 2 / 3;
}

.log-points-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px 20px;
  align-items: start;
}


#logNotes {
  height: 60px;
  resize: vertical;
}



#logDate {
  margin-top: 10px;
  grid-column: 2 / 3;
}



/* 🔷 Category Preview Image */
.category-preview-wrapper {
  display: flex;
  justify-content: center;
  margin: 10px 0;
}



/* 🔷 Submit / Cancel Buttons */
.log-points-buttons {
  grid-column: span 2;
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
}



/* 🔷 Blue Button (Shared Style) */
.blue-button {
  background-color: #3eb7f8;
  color: white;
  padding: 10px 20px;
  font-size: 14px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  font-weight: bold;
  transition: background 0.3s;
  margin: 0;
  text-align: center;
}

td button.blue-button {
  white-space: nowrap;        /* Prevent text from wrapping */
  overflow: hidden;           /* Hide overflow */
  text-overflow: ellipsis;    /* Add "..." if too long */
  max-width: 140px;           /* Or any max width you prefer */
  display: inline-block;
  font-size: 0.85em;          /* Shrink text slightly */
}


.blue-button:hover {
  background-color: #199ee0;
}


/* 🔷 SETTINGS PAGE STYLES */
#settingsPage {
  background-color: white;
  min-height: 100vh;
  padding: 20px;
  color: #00477d;
  display: flex;
  flex-direction: column;
  align-items: center;
}



.settings-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 220px;
  margin: 0 auto 20px;
}



.settings-form input,
.credentials-section input {
  width: 100%;
  height: 42px;
  padding: 10px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 6px;
}




/* 🔷 FAQ / Point Categories Page Styles */
#faqPage {
  background-color: white;
  min-height: 100vh;
  padding: 20px;
  color: #00477d;
}

.faq-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 0 20px;
  max-width: 800px;
  margin: 0 auto;
  width: 100%;
}
.faq-section {
  position: relative; /* ✅ Required for pill positioning */
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  border-radius: 20px;
  padding: 40px 16px 16px;
  border: 6px solid;
  background-color: white;
  color: inherit;
}


/* 🔷 Top Left Home Button */
.top-left-button {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 10;
}



/* 🔷 Base Category Box Style */
.category-box {
  background-color: white;
  border-radius: 20px;
  padding: 40px 20px 20px;
  margin: 20px auto;
  width: 90%;
  position: relative;
  border: 4px solid;
  font-family: 'Segoe UI', sans-serif;
}



/* 🔷 Floating Label Pill */
.category-label {
  position: absolute;
  top: 0;
  left: 20px;
  transform: translateY(-50%);
  padding: 5px 12px;
  border-radius: 30px;
  font-weight: bold;
  font-size: 16px;
  border: 4px solid;
  color: white;
}



/* 🔷 Category Styles */
.category-box.practice {
  color: #407f34;
  border-color: #c8f983;
}



#faqPage .app {
  position: relative; /* Anchor for absolute home button */
  padding-top: 60px;  /* Space for top button */
}


/* 🔷 LEADERBOARD PAGE STYLES */

.level-row {
  display: flex;
  align-items: flex-start;
  margin: 2px 0; /* Shrink vertical spacing between rows */
  height: 48px;  /* Enforce row height (tweak as needed) */
  position: relative;
}


.level-track {
  flex: 1;
  height: 65px;
  background-color: #ddd;
  border-radius: 18px;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  position: relative;
  overflow: visible; /* Let avatars spill above */
}


.avatar-track {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.avatar-track img {
  height: 50px;
  width: 50px;
  object-fit: contain;
  position: absolute;
  transform: translateY(-50%);
  border: none;                    /* ❌ Remove white border */
  background: transparent;         /* ✅ Transparent background */
  z-index: 10;                     /* ✅ Always on top */
}

#leaderboardContainer {
  height: 100vh;         /* Fill entire window vertically */
  width: 200vw;          /* Double the window width */
  transform-origin: top left;
  transform: scale(calc(100vw / 200vw));
}


.level-label {
  display: flex;
  align-items: center;
  margin-right: 8px;
}



.app {
  width: 100%;
  margin: 0 auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: white;
  text-align: center;
}



body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
}



.avatar-wrapper {
  height: 140px;  /* or whatever fits your layout */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: fit-content;
  margin: 0 auto 20px;
}

.avatar-overlay {
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  color: white;
  font-size: 12px;
  text-align: center;
  padding: 4px 0;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}


#loginTitle,
#welcomeTitle {
  color: #00477d;
  font-size: 35px;
}


.form-row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}



.form-group {
  flex: 1;
  min-width: 45%;
}


.category-summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 80px;
  padding: 6px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  text-align: center;
  font-size: 13px;
  color: #00477d;
}



.log-feed {
  overflow-x: auto;
  width: 100%;
  overflow-y: visible;
  max-height: none;
}



.log-feed table {
  width: 100%; /* or higher if needed to prevent squeezing */
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 12px;
  overflow: hidden;
  table-layout: fixed; /* optional: prevents column squishing */
}

/* Optional: Add corner rounding to individual cells if needed */
.log-feed tr:first-child th:first-child {
  border-top-left-radius: 12px;
}

.log-feed tr:first-child th:last-child {
  border-top-right-radius: 12px;
}

.log-feed tr:last-child td:first-child {
  border-bottom-left-radius: 12px;
}

.log-feed tr:last-child td:last-child {
  border-bottom-right-radius: 12px;
}


table th, table td {
  padding: 10px;
  text-align: center;
  font-size: 16px;
}


.category-summary-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin: 1rem;
}



.category-summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 80px;
  padding: 6px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  text-align: center;
  font-size: 13px;
  color: #00477d;
}



.category-summary img {
  width: 100%;
  border-radius: 10px;
}



.log-feed {
  width: 100%;
  margin: 30px 0;
  padding: 0 20px;
  box-sizing: border-box;
}



.log-feed th,
.log-feed td {
  text-align: center;
  padding: 12px;
  border-bottom: 1px solid #ddd;
  color: #00477d;
  font-size: 16px;
  word-wrap: break-word;
}



.log-feed th {
  background-color: #f8f8f8;
  font-weight: bold;
}



.log-feed tr:last-child td {
  border-bottom: none;
}



.log-feed img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}






th, td {
  text-align: center;
  padding: 8px;
  border: 1px solid #ddd;
}



.table-category-image {
  width: 100%;
  max-width: 100px;   /* Maximum size, increase if needed */
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}



.log-feed {
  overflow-x: auto;
  width: 100%;
}



.log-feed table {
  width: 100%;
  min-width: 700px; /* Optional: prevents squishing */
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 12px;
  overflow: hidden;
  table-layout: auto;
}



.log-feed td:first-child {
  width: 100px; /* or more if needed */
}




.log-feed th,
.log-feed td {
  text-align: center;
  padding: 8px;
  border-bottom: 1px solid #ddd;
}



.log-feed th {
  background-color: #f8f8f8;
  font-weight: bold;
}



.log-feed tr:last-child td {
  border-bottom: none;
}



.log-feed tr:nth-child(even) td {
  background-color: #f4f4f4; /* Light blue */
}

.log-feed tr:nth-child(odd) td {
  background-color: #ffffff; /* White */
}


/* Leaderboard header layout */
.leaderboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 1rem;
}


.leaderboard-title {
  color: #00477d;
  font-size: 26px;
  margin: 0;
  padding-right: 1rem;
}



/* Make the date column wide enough to prevent wrapping */
.log-feed td:nth-child(4),
.log-feed th:nth-child(4) {
  min-width: 120px;
}


body.leaderboard-page .app {
  max-width: none;
  width: 100%;
  padding: 1rem 2rem;
}


/* 🟦 Full-width override for leaderboard layout */
.leaderboard-page .app,
.leaderboard-page main,
.leaderboard-page .level-row,
.leaderboard-page .level-track {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 1rem;
  box-sizing: border-box;
  position: relative;

}




.scroll-wrapper::-webkit-scrollbar {
  display: none;
}




/* 🔹 Level bars are twice the screen width */
.level-bars {
  width: 200%;  /* 👈 Double the screen width */
  display: flex;
  flex-direction: column;
  gap: 10px;
}




/* Optional: make the badge stick with the track */
.level-row {
  display: flex;
  align-items: center;
  margin: 6px 0;
}




.avatar-track {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
}

/* Only apply this avatar style on the leaderboard */
.leaderboard-page .avatar-track .avatar {
  position: absolute;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  transform: translateY(-50%);
  top: 0;
  z-index: 5;
}

.avatar-track img:not(.avatar) {
  position: absolute;
  height: 50px;
  width: 50px;
  object-fit: contain;
  transform: translateX(-50%);
  background: transparent;
  border: none;
  z-index: 10;
}


/* Badge to the right */

.level-label img.level-badge-icon {
  height: 65px !important;
  width: 65px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}


.form-row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}


.form-group {
  flex: 1;
  min-width: 45%;
}


/* ✅ Apply consistent column widths and padding */
.review-logs-table th,
.review-logs-table td {
  padding: 10px 12px;
  font-size: 14px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}



/* Wider columns for clarity */
.review-logs-table th:nth-child(1),
.review-logs-table td:nth-child(1) { /* User */
  min-width: 120px;
}



.review-logs-table th:nth-child(2),
.review-logs-table td:nth-child(2) { /* Category */
  min-width: 100px;
}



.review-logs-table th:nth-child(3),
.review-logs-table td:nth-child(3) { /* Points */
  min-width: 70px;
}



.review-logs-table th:nth-child(4),
.review-logs-table td:nth-child(4) { /* Note */
  min-width: 200px;
}



.review-logs-table th:nth-child(5),
.review-logs-table td:nth-child(5) { /* Date */
  min-width: 110px;
}



.review-logs-table th:nth-child(6),
.review-logs-table td:nth-child(6) { /* Status */
  min-width: 130px;
}


/* Expand status column for longer values */
.log-feed td:nth-child(6),
.log-feed th:nth-child(6) {
  min-width: 140px;
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}



/* Optional: also expand user or note column for clarity */
.log-feed td:nth-child(1),
.log-feed th:nth-child(1) {
  min-width: 120px;
}



.log-feed td:nth-child(4),
.log-feed th:nth-child(4) {
  min-width: 180px;
}


body.settings-page,
body.info-page,
body.log-points-page {
  background-color: white;
}


/* ✅ Only apply the background image to specific pages */
body.home-page,
body.leaderboard-page,
body.review-page {
  background-image: url("images\background\tallbackground.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}



/* ✅ Force white background for all others */
body.settings-page,
body.log-points-page,
body.my-points-page,
body.faq-page {
  background: white !important;
}


/* ✅ Background image for tall pages */
body.tall-background {
  background-image: url("images/background/tallbackground.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}



/* ✅ Plain white background for other pages */
body.white-background {
  background-color: white;
  background-image: none !important;
}



body.white-background main.app {
  background: white;
}


.form-row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}



.form-group {
  flex: 1;
  min-width: 45%;
}



.full-width {
  width: 100%;
}



.image-group img {
  width: 100px;
  height: auto;
  display: block;
  margin: auto;
}



textarea#logNotes {
  min-height: 42px;
  height: 100%;
}



.log-points-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
}


.form-group {
  flex: 1;
  min-width: 45%;
}


/* Reduce spacing between date and points rows */
.form-row {
  margin-bottom: 20px; /* or lower */
}



.form-row + .form-row {
  margin-top: 0;
}



.form-group.half {
  margin: 0;
  padding: 0;
}



.settings-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 220px;
  margin: 0 auto;
  margin-top:0;
}

.settings-title {
  text-align: center;
  color: #3399e8;
  margin-bottom: 10px; /* reduced from default */
  font-size: 24px;
}


.settings-form img.avatar {
  display: block;
  width: 120px;
  height: auto;
  border-radius: 20px;
  margin: 10px auto 10px;
  cursor: pointer;
}


/* 🔹 Manage Users Page Layout */
.manage-users-page main.app {
  padding: 1rem 2rem;
  max-width: 1200px;
  margin: auto;
  background-color: white;
}



.manage-users-page .top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}



.manage-users-page .leaderboard-title {
  color: #00477d;
  font-size: 26px;
  margin: 0;
}



.manage-users-page .blue-button {
  padding: 8px 16px;
  font-size: 14px;
}



/* 🔹 Table Styling */
.manage-users-page .log-feed {
  background-color: white;
  width: 100%;
  border-radius: 8px;
  overflow-x: auto;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  margin-top: 20px;
}



.manage-users-page .log-feed table {
  width: 100%;
  border-collapse: collapse;
  font-family: Arial, sans-serif;
  font-size: 15px;
}



.manage-users-page th, 
.manage-users-page td {
  text-align: center;
  padding: 10px;
  border: 1px solid #ddd;
}



.manage-users-page th {
  color: white;
  cursor: pointer;
}



.manage-users-page tr:nth-child(even) {
  background-color: #f9f9f9;
}



.manage-users-page tr:last-child td {
  border-bottom: none;
}



.manage-users-page select,
.manage-users-page input[type="text"],
.manage-users-page input[type="email"],
.manage-users-page input[type="password"] {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
}




.scroll-wrapper table {
  margin-bottom: 0;
}


th {
  background-color: #f0f0f0;
  color: white;
  padding: 8px;
  text-align: left;
  cursor: pointer;
  position: sticky;
  top: 0;
  z-index: 20; /* Increased from 5 or 10 */
}


table thead th {
  color: white;               /* Light text for contrast */
  padding: 10px;
  text-align: left;
  font-weight: bold;
  border-bottom: 2px solid #ccc;
  position: sticky;
   top: 0;
  z-index: 10;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05);
}


th span {
  font-size: 0.85em;
  margin-left: 4px;
  color: #555;
}
#myPointsBtn,
#reviewLogsBtn,
#manageUsersBtn {
  display: none;
}

/* Show only for students */
body.student-mode #myPointsBtn {
  width: 170px;
  height: 90px;
  padding: 10px;
  background-color: #2bb8d6;
  border-radius: 1.25rem;
  color: white;
  border: none;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

#myPointsBtn .btn-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

#myPointsBtn .btn-icon img {
  width: 50px;
  height: 50px;
  display: block;
}

#myPointsBtn .btn-text {
  font-size: 1.1rem;
  font-weight: bold;
  text-align: left;
  line-height: 1.2;
  max-width: 100px;
  word-break: break-word;
}
.table-scroll-wrapper {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  overflow-x: auto;
  background-color: white; /* match your page */
  z-index: 100;
  border-top: 1px solid #ccc;
  padding-bottom: 4px;
}

.scroll-container {
  min-width: 1000px; /* or however wide your table needs */
}
.horizontal-scroll-sticky {
  overflow-x: auto;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 200px; /* optional: just to cap the visual space */
  background: white;
  padding-bottom: 10px;
  z-index: 100;
  border-top: 1px solid #ccc;
}

main.app {
  padding-bottom: 80px; /* create space above the fixed scroll area */
}

.scroll-wrapper {
  overflow-x: auto;
  overflow-y: visible;
  width: 100%;
  max-height: none;
  padding: 10px;
  padding-bottom: 20px;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable both-edges;
  
}

body.review-page {
  overflow-y: auto;
}

/* 🔹 Layout helpers */
.manage-users {
  margin: 0;
  padding-bottom: 80px;
  font-family: Arial, sans-serif;
}

.page-title {
  text-align: center;
  color: #00477d;
  margin-top: 0;
}

.button-center {
  text-align: center;
  margin-bottom: 10px;
}

/* 🔹 Table styling */
.table-wrapper {
  overflow-y: auto;
  max-height: calc(100vh - 120px);
  padding: 20px;
}

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 900px;
}

th, td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}

th {
  cursor: pointer;
  position: sticky;
  top: 0;
  z-index: 10;
}

/* 🔹 Form inputs */
input,
select {
  width: 100%;
  box-sizing: border-box;
}

/* 🔹 Save button floating */
tr {
  position: relative;
}

th.save-column,
td.save-column {
  display: none;
}
/* Hide save cell borders and spacing unless button is shown */
td.save-cell {
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
  height: 0;
  position: relative;
}

/* Style for the button that shows when needed */
.save-button {
  background-color: #3eb7f8;
  border: none;
  color: white;
  font-weight: bold;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  display: none; /* Default hidden */
}

/* Manage Users Page Styles */


body.manage-users {
  font-family: sans-serif;
  background-color: #f0faff;
  padding: 20px;
}

.page-title {
  text-align: center;
  color: #3399e8;
  margin-top: 20px;
}

#userTable {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

#userTable th,
#userTable td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #e0e0e0;
  font-size: 14px;
}

#userTable th {
  font-weight: bold;
  user-select: none;
  color: #00477d !important;
  border: none;
}

#userTable th:first-child {
  border-top-left-radius: 12px;
}

#userTable th:last-child {
  border-top-right-radius: 12px;
}

#userTable tr:last-child td:first-child {
  border-bottom-left-radius: 12px;
}

#userTable tr:last-child td:last-child {
  border-bottom-right-radius: 12px;
}

#userTable tbody tr:nth-child(even) {
  background-color: #f7fafd; /* Light blue/gray tone */
}

#userTable tbody tr:hover {
  background-color: #e2f0fb; /* Subtle blue on hover */
}


#userTable input,
#userTable select {
  width: 100%;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid #ccc;
  font-size: 14px;
}

.top-left-button {
  position: absolute;
  top: 10px;
  left: 10px;
}

tr.editing .save-button {
  display: inline-block;
}
#userTable th[data-column="firstName"],
#userTable td:nth-child(1) {
  min-width: 120px;
}

#userTable th[data-column="lastName"],
#userTable td:nth-child(2) {
  min-width: 120px;
}

#userTable th[data-column="id"],
#userTable td:nth-child(3) {
  min-width: 140px;
}

#userTable th[data-column="email"],
#userTable td:nth-child(4) {
  min-width: 200px;
}

#userTable th:nth-child(5), /* Password */
#userTable td:nth-child(5) {
  min-width: 120px;
}

#userTable th:nth-child(6), /* Avatar */
#userTable td:nth-child(6) {
  min-width: 100px;
}

#userTable th[data-column="role"],
#userTable td:nth-child(7) {
  min-width: 140px;
}

#userTable th[data-column="teacher"],
#userTable td:nth-child(8) {
  min-width: 160px;
}

#userTable th[data-column="instrument"],
#userTable td:nth-child(9) {
  min-width: 120px;
}
.settings-grid {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  max-width: 900px;
}

.left-side {
  flex: 0 0 auto;
}

.right-side {
  flex: 1;
  min-width: 250px;
}