/* =======================================
   Map Container & Image
   ======================================= */

html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* no horizontal scroll */
    overflow-y: auto;   /* vertical scroll allowed */
    font-family: Arial, sans-serif;
}

/* Map container */
#map-container {
    position: absolute !important;
    width: 100%; /* Changed from 100vw */
    max-width: 100%; /* Ensure it doesn't exceed viewport */
    height: auto;
    min-height: 100vh; /* Ensure it has height */
    margin: 0 auto; /* Center it */
}

/* Map image */
#map-image {
    width: 100%;
    height: auto;
    display: block;
   max-width: 100%;
}

/* Hotspots */
.hotspot {
    position: absolute !important;
    transform: translate(-50%, -50%) !important;
    cursor: pointer !important;
    width: 4% !important;
    height: auto !important; /* Let it be determined by min-height */
    min-height: 10px !important; /* Set a visible minimum height */
    aspect-ratio: 12 / 1 !important; /* Width:Height = 12:1 ratio (4% width ÷ 0.33% height) */
}
/* Hotspot Gallery with text */
.gallery-hotspot {
    position: absolute !important;
    transform: translate(-50%, -50%) !important;
    cursor: pointer !important;
    width: 6% !important; /* Slightly wider to accommodate text */
    height: auto !important;
    min-height: 25px !important; /* Taller for text */
    aspect-ratio: 8 / 1 !important;
    
    /* Single box-shadow declaration */
    box-shadow: 0 0 20px rgba(247, 255, 4, 0.9),
                0 0 40px rgba(189, 245, 4, 0.7),
                0 0 60px rgb(1, 73, 255);
    
    border-radius: 20%;
    animation: galleryGlow 1s infinite alternate;
    
    /* Make it a flex container to center the text */
    display: flex;
    align-items: center !important;
    justify-content: center !important;
    
    /* Text styling */
    color: white !important;
    font-size: 0.8vw !important; /* Responsive font size */
    font-weight: bold !important;
    text-shadow: 1px 1px 2px black !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

.gallery-hotspot::after {
    content: "Gallery";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: inherit;
    font-weight: inherit;
    text-shadow: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    white-space: nowrap;
}

@keyframes galleryGlow {
    from {
        box-shadow: 0 0 10px rgba(247, 255, 4, 0.5),
                    0 0 20px rgba(189, 245, 4, 0.3),
                    0 0 30px rgb(1, 73, 255);
    }
    to {
        box-shadow: 0 0 30px rgba(247, 255, 4, 1),
                    0 0 60px rgba(189, 245, 4, 0.9),
                    0 0 90px rgb(1, 73, 255);
    }
}
/* Floating Gallery Button - matches Achievements button style */
.floating-nav-item {
    padding: 14px 18px;
    font-size: 16px;
    border-radius: 12px;
    background: rgba(0, 30, 180, 0.37);
    color: white;
    cursor: pointer;
    text-align: center;
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 1000;
}
/* Pathfinder Hotspot with text */
.pathfinder-hotspot {
    position: absolute !important;
    transform: translate(-50%, -50%) !important;
    cursor: pointer !important;
    width: 7% !important; /* Slightly wider for longer text */
    height: auto !important;
    min-height: 25px !important;
    aspect-ratio: 8 / 1 !important;
    
    /* Different color scheme for Pathfinder */
    box-shadow: 0 0 20px rgba(153, 105, 255, 0.9),  /* Hot pink */
                0 0 40px rgba(43, 101, 226, 0.7),  /* Blue violet */
                0 0 60px rgba(161, 20, 255, 0.5);  /* Deep pink */
    
    border-radius: 20%;
    animation: pathfinderGlow 1.5s infinite alternate;
    
    /* Flex container to center the text */
    display: flex;
    align-items: center !important;
    justify-content: center !important;
    
    /* Text styling */
    color: white !important;
    font-size: 0.8vw !important;
    font-weight: bold !important;
    text-shadow: 1px 1px 2px black !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    white-space: nowrap;
}

.pathfinder-hotspot::after {
    content: "Pathfinder";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: inherit;
    font-weight: inherit;
    text-shadow: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    white-space: nowrap;
}

@keyframes pathfinderGlow {
    from {
        box-shadow: 0 0 10px rgba(133, 105, 255, 0.5),
                    0 0 20px rgba(138, 43, 226, 0.3),
                    0 0 30px rgba(255, 20, 147, 0.2);
    }
    to {
        box-shadow: 0 0 30px rgb(105, 190, 255),
                    0 0 60px rgba(138, 43, 226, 0.9),
                    0 0 90px rgba(55, 20, 255, 0.7);
    }
}

/* Debug: show hotspots
.hotspot.debug {
    background: rgba(224, 50, 50, 0.461);
}*/

/* Grid overlay
#map-container::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.402) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.402) 1px, transparent 1px);
    background-size: 10% 10%;
    pointer-events: none;
    z-index: 0;
}*/

/*=============================
Dropdown MENU content
=============================*/

/* Dropdown container at the top left */
#dropdown-container {
    position: fixed;
    top: 20px;
    left: 20px;
    background-color: rgba(0,30,180,0.3);
    padding: 10px;
    border-radius: 5px;
    color: white;
    z-index: 999;  /* Ensure it appears above the map */
}

/* Style for select elements */
select {
    background-color: #0718b18f;
    color: white;
    border: none;
    padding: 5px;
    margin: 5px;
    border-radius: 5px;
    cursor: pointer;
}

select:focus {
    outline: none;
}

/* Search engine layout*/
#quest-search-container {
    margin-top: 10px;
    margin-right: 20px;
    width: 200px;
}
#quest-search {
    width: 100%;
    padding: 6px 8px;
    border-radius: 5px;
    border: none;
    background: rgb(0, 30, 180, 0.5);
    color: white;
    font-size: 14px;
}
#quest-search-results {
    margin-top: 5px;
    max-height: 240px;
    overflow-y: auto;
    background: rgba(0,30,180,0.4);
    border-radius: 5px;
}
.search-result {
    cursor: pointer;
    font-size: 15px;
    border-bottom: 1px solid rgba(255,255,255,0.15);
}
.search-result:last-child {
    border-bottom: none;
}
.search-result:hover {
    background: rgba(100,150,255,0.6);
}
.search-result strong {
    font-size: 13px;
    color: #cbd6ff;
    display: block;
}

.search-result span {
    font-size: 15px;
}

/* =======================================
   Quest Modal
   ======================================= */

/* Overlay darkening the map */
#quest-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4); /* semi-dark background */
    z-index: 2000;
    overflow-y: auto;
    padding: 20px;
}
.quest-overlay {
  display: flex;
  justify-content: center;
  align-items: center;
}
/* Quest box */
#quest-box {
    background-color: rgba(0,30,180,0.3); /* semi-dark blue */
    color: #fff;
    border-radius: 10px;
    padding: 15px;
    max-width: 900px;
    margin: auto;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    display: grid;
    grid-template-columns: repeat(12, 1fr); /* 12-column grid */
    grid-auto-rows: min-content;
    gap: 10px;
    position: relative;
}
/* Close button */
#close-quest {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    font-size: 20px;
}
/* Quest rows */
.quest-row {
    display: contents; /* children use grid columns */
}
/* Quest cells */
.quest-cell {
    background-color: rgba(0,30,180,0.3); /* slightly lighter blue boxes */
    border-radius: 8px;
    padding: 10px;
    color: #fff;
    border:2px solid rgba(100,150,255,0.7) /*light blue border*/
}
/*Quest box cells mvp */
#quest-box.mvp .quest-cell {
    background-color: rgba(214, 180, 26, 0.521); /* Gold */
    border-radius: 8px;
    padding: 10px;
    color: #fff;
    border:2px solid gold; /*gold border*/;
}
#quest-box.mvp .quest-cell:hover {
    border-color:rgb(182, 150, 9) !important; 
       
}
/*first row: difficulty aligned right*/
#quest-box  > .quest-row:nth-of-type(1) .quest-cell:nth-of-type(3) {
    grid-column: 10 / -1;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
/*Quest cell glow*/
.quest-cell:hover  {
    border-color:rgba(150,200,255,1); /* slightly ligther brighter blue*/
    box-shadow: 0 0 10px rgba(150,200,255,o.5); /*soft glow*/
    transition: all 0.3s ease; /*smooth animation*/
}
/* Full width cell */
.quest-cell.full { grid-column: 1 / 6; }
/*rationale*/
.rationale-cell {
   grid-column: 10 / 13;
    align-items: center;    /* vertical centering */
    justify-content: center; /* horizontal centering */
    text-align: center;   
}
/* Image, description, requirements */
#quest-text {
    text-align: justify;
    margin: 0%;
}
.image-cell { grid-column: 1 / 3; }
.description-cell { grid-column: 3 / 8; }

/*line 4)*/
.quest-cell.rubric-cell {
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
}
.requirements-cell { grid-column: 8 / 13; }
#quest-requirements {
    text-align: justify;
    margin: 0%;
}
/* Ensure prerequisites have bullets and padding */
#quest-overlay #quest-prereq-leads-prereq {
    list-style-type: disc; /* Bullet points */
    padding-left: 40px; /* Indent bullets */
    margin: 5;
}
/* Ensure individual list items are spaced out */
#quest-overlay #quest-prereq-leads-prereq li {
    margin-bottom: 10px; /* Space between list items */
}
/* Style for checked prerequisites */
#quest-overlay .prereq-check {
    margin-left: 10px;
}
/* Second row: Links + Rewards */
.quest-row:nth-of-type(4) {
    grid-column: 1 / -1; /* Full width */
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two columns: Links + Reward */
    gap: 10px;
}
.links-cell { grid-column: 1 / 5;}
.work-cell {grid-column: 5 / 8;
    display: flex;
    text-align: center;
    align-items: center;}
.reward-cell {
  grid-column: 8 / 13;
  display: flex;
  flex-direction: column;       /* stack label + value row */
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: clamp(17px, 4vw, 20px);

/* VALUE + ICON INLINE */
.reward-cell p {
  display: flex;
  align-items: center;
  gap: 6px;                     /* space between number and icon */
  margin: 0;
}
.reward-cell strong:last-child {
  margin-left: 6px;
}

}/* Stars */
.stars {
    display: inline-flex;
    gap: 2px;
}
.star.solid { color: gold; }
.star.outline { color: transparent; -webkit-text-stroke: 1px gold; }
/* Images in quest box */
#quest-character {
    width: 100%;
    height: auto;
    border-radius: 8px;
}
/*default quest box (blue)*/
#quest-box {
    background-color: rgb(0, 30, 180, 0.3);
    border-radius: 10px;
    border: 2px solid transparent;
}
/*MVP/Summaitve quests box colour*/
#quest-box.mvp {
    background-color: rgba(255, 208, 0, 0.2);
}
/*Inner cells for MVP*/
#quest-box.mvp .quest-cell {
    background-color: rgba(255, 165, 45, 0.2);
    border: 1px solid gold;
}
/* Links inside quest box */
#quest-box a {
    color: white; /* Change link text color to white */
    text-decoration: none; /* Optional: removes underline */
}
#quest-box a:hover {
    color: #ccc; /* Light grey when hovering, you can adjust this to any color */
}
/* Completed quest box (blue or MVP → gray) */
#quest-box.completed {
    background-color: rgba(0, 0, 0, 0.4); /* Gray background */
    border-color: silver; /* Silver border for completed quests */
    box-shadow: 0 0 10px rgba(150,200,255,o.5); /*soft glow*/
}
#quest-box.completed .quest-cell {
    background-color: rgba(0, 0, 0, 0.4); /* Lighter gray for inner cells */
    border-color: silver; /* Silver border for cells */
    box-shadow: 0 0 10px rgba(150,200,255,o.5); /*soft glow*/
}
#quest-box.completed .quest-cell:hover{
    border-color: rgba(182, 182, 182, 0.4);
}
/* Base styles for tab buttons */
.tab-button {
    padding: 10px;
    cursor: pointer;
    background-color: rgba(247, 247, 247, 0.4); /* Light background for inactive tabs */
    border: 1px solid #ccc; /* Light border */
    border-radius: 5px;
    transition: background-color 0.3s ease;
}
/* Active tab styles */
.tab-button.active {
    background-color: rgba(0, 0, 0, 0.315); /* Active tab color */
    color: white; /* White text for active tab */
    border: 1px solid #000000; /* Border color matching the active background */
}
/* Optional: Hover effect for inactive tabs */
.tab-button:hover {
    background-color: rgba(182, 182, 182, 0.4);
}
/* MVP Hotspot glow*/

.mvp-hotspot {
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.9);
    border-radius: 0%;
    animation: mvpGlow 0.5s infinite alternate;
}
@keyframes mvpGlow {
    from {
       box-shadow: 0 0 10px rgba(247, 255, 4, 0.5),
                    0 0 20px rgba(189, 245, 4, 0.3),
                    0 0 30px rgb(255, 1, 1);
    }
    to {
        box-shadow: 0 0 30px rgba(247, 255, 4, 1),
                    0 0 60px rgba(189, 245, 4, 0.9),
                    0 0 90px rgb(255, 1, 1);
    }
}

/* WELLCOME==========================================================================================*/
.welcome-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(0,0,0,0.7);
  z-index: 9999;
  background-image: url('map.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
/* Scroll wrapper */
.welcome-scroll {
  position: relative;
  width: 85%;
  max-width: 650px;
  height: 80vh;
  background: url('scroll.png') center/contain no-repeat;
  
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  will-change: transform, opacity;

  padding: 80px 60px;
  box-shadow: 0 25px 60px rgba(0,0,0,0.7);
  animation: float 5s ease-in-out infinite;
}
/* Body content */
.scroll-body {
  width: 100%;
  max-width: 680px;
  text-align: center;
  color: #000000;
  font-family: 'Georgia', serif;
  z-index: 2;

  /* AUTO FIT TEXT */
  font-size: clamp(16px, 2.2vw, 20px);

  /* SCROLL IF TOO LONG */
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 10px;
}
/* Scrollbar styling */
.scroll-body::-webkit-scrollbar {
  width: 8px;
}
.scroll-body::-webkit-scrollbar-thumb {
  background: rgba(125, 84, 35, 0.705);
  border-radius: 10px;
}
/* Float animation */
@keyframes float {
  0% { transform: translateY(-4px); }
  50% { transform: translateY(4px); }
  100% { transform: translateY(-4px); }
}
/* Text */
.welcome-scroll h1 {
  font-size: clamp(26px, 4vw, 42px);
  margin-bottom: 20px;
}
.welcome-scroll p {
  font-size: clamp(14px, 1.6vw, 18px);
  line-height: 1.6;
  margin-bottom: 20px;
}
/* Button */
#welcome-close {
  padding: 12px 28px;
  font-size: 18px;
  border: 2px solid #7b5a2b;
  background: #f0d9a7;
  cursor: pointer;
  border-radius: 10px;
}
/* Forgot Password Modal */
.forgot-password-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 20001;
    display: none;
    justify-content: center;
    align-items: center;
}

.forgot-password-content {
    background: linear-gradient(135deg, #1a1a3a 0%, #0f0f2a 100%);
    border-radius: 20px;
    width: 400px;
    max-width: 90%;
    padding: 30px;
    text-align: center;
    border: 1px solid rgba(255, 215, 0, 0.3);
}

.forgot-password-content h3 {
    color: gold;
    margin-bottom: 20px;
}

.forgot-password-content p {
    color: white;
    margin-bottom: 20px;
}

.forgot-password-input {
    width: 100%;
    padding: 12px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 10px;
    color: white;
    font-size: 16px;
    margin-bottom: 20px;
    box-sizing: border-box;
}

.forgot-password-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.forgot-password-cancel {
    padding: 10px 20px;
    background: rgba(100, 100, 130, 0.8);
    border: none;
    border-radius: 8px;
    color: white;
    cursor: pointer;
}

.forgot-password-submit {
    padding: 10px 20px;
    background: #4a6a8a;
    border: none;
    border-radius: 8px;
    color: white;
    cursor: pointer;
}

.forgot-password-message {
    margin-top: 15px;
    color: #4caf50;
    font-size: 14px;
}
/*character choosing*/
#characters-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 15px;
}
.character-card {
  cursor: pointer;
  border: 2px solid rgba(255,255,255,0.3);
  padding: 6px;
  border-radius: 12px;
}
.character-card img {
  width: 90px;
  height: 90px;
  object-fit: contain;
}
/* ===============================================================================================================================================================
   RUBRIC OVerlay (Quest-style)
   ============================================================================================================================================================= */
#rubric-overlay {
  z-index: 2500; /* above quest (2000), below rationale (10000) */
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  justify-content: center;
  align-items: center;
}

.rubric-box {
  position: relative;
  max-width: 1000px;
  max-height: 80vh;
  overflow-y: auto;
  background-color: rgba(0,30,180,0.3); /* semi-dark blue */
  color: #fff;
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 0 20px rgba(0,0,0,0.5);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: min-content;
  gap: 10px;
  margin: auto;
}

#rubric-title {
  grid-column: 1 / -1;
  text-align: center;
  margin: 0;
  padding: 10px 0;
  font-size: 26px;
  font-weight: bold;
  color: #fff;
  background: rgba(0,30,180,0.25);
}

/* Rubric content */
#rubric-content {
  grid-column: 1 / -1;
  background: rgba(0,30,180,0.25);
  border: 2px solid rgba(100,150,255,0.7);
  border-radius: 8px;
  padding: 15px;
}

/*hover glow like quest cells */
#rubric-content:hover {
  border-color: rgba(150,200,255,1);
  box-shadow: 0 0 10px rgba(150,200,255,0.5);
  transition: all 0.3s ease;
}
.rubric-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0px;
  
}

.rubric-table th,
.rubric-table td {
  border: 2px solid rgba(100,150,255,0.7);
  padding: 10px;
  background: rgba(0,30,180,0.2);
  color: white;
  text-align: left;
}

.rubric-table th {
  background: rgba(0,30,180,0.35);
  border: 20px;
}

.rubric-table tr:hover td {
  border-color: rgba(150,200,255,1);
  box-shadow: 0 0 10px rgba(150,200,255,0.5);
}
/* Close button inside rubric box */
#rubric-overlay .close-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 24px;
  color: white;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 10;
}
.rubric-table td.highlight {
  background-color: rgba(201, 175, 29, 0.726) !important;
  color: #000 !important;
}
.teacher-comment-section {
    margin-top: 15px;
    padding: 12px;
    background: rgba(13, 204, 172, 0.329);
    border: 1px solid rgba(13, 204, 172, 0.5);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.teacher-comment-section:hover {
    border-color: rgb(150, 241, 255);
    box-shadow: 0 0 10px rgba(150, 200, 255, 0.5);
}

.teacher-comment-label {
    font-size: 12px;
    color: #ffd700;
    margin-bottom: 8px;
    font-weight: bold;
}

.teacher-comment-content {
    font-size: 14px;
    color: #e0e0e0;
    line-height: 1.4;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* ===============================================================================================================================================================
                                                            END OF RUBRIC OVerlay (Quest-style)
   ============================================================================================================================================================= */



/* Parchment animation */

@keyframes unroll {
  0% {
    transform: scaleY(0.05) translateY(-40px);
    opacity: 0;
    filter: blur(3px);
  }
  60% {
    transform: scaleY(1.05) translateY(10px);
    opacity: 1;
    filter: blur(0.5px);
  }
  100% {
    transform: scaleY(1) translateY(0);
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes float {
  0% { transform: translateY(-4px); }
  50% { transform: translateY(4px); }
  100% { transform: translateY(-4px); }
}

/* Scroll animation */
.welcome-scroll,
.rationale-scroll {
  position: relative;
  transform-origin: top center;
  animation: float 5s ease-in-out infinite;
}

/* Stop text shimmer */
.welcome-scroll * ,
.rationale-scroll * {
  animation: none !important;
  transform: none !important;
}

/* Apply unroll to both popups */
.welcome-overlay[style*="display: flex"] .welcome-scroll,
.rationale-overlay[style*="display: flex"] .rationale-scroll {
  animation:
    unroll 0.9s ease-out,
    float 5s ease-in-out infinite 0.9s;
}
/*PROFILE=========================================================================================*/
/* PROFILE BUTTON */
.profile-btn {
  position: fixed;
  top: 25px;
  right: 20px;
  width: auto !important; /* Let it size based on image */
  height: auto !important;
  border: none;
  cursor: pointer;
  background: transparent !important;
  padding: 0;
  margin: 0;
/*  box-shadow: 0 4px 10px rgba(0,0,0,0.25); - square around the button*/
}

.profile-btn img {
  width: 80px; /* Set your desired size here */
  height: 80px;
  object-fit: contain;
  display: block;
  border-radius: 0; /* Remove any rounding */
}
/* OVERLAY (same as quest) */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0,0,0,0.65);
  z-index: 1000;
}

/* POPUP (match quest style) */
.popup {
  width: 85%;
  max-width: 1100px;
  background: rgba(0,30,180,0.3);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.25);
  position: relative;
}

/* CLOSE BUTTON */
.close-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  border: none;
  background: transparent;
  font-size: 28px;
  cursor: pointer;
  color: white;
}
.profile-title {
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  margin: 15px 0;
}

/* GRID */
.profile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  align-items: center;
}

/* LEFT COLUMN */
.profile-left {
  text-align: center;
}
.student-profile {
  display: flex;
  flex-direction: column;   /* stack vertically */
  align-items: center;      /* center horizontally */
  text-align: center;
}
.profile-left {
  display: flex;
  flex-direction: column;   /* stack avatar + name */
  align-items: center;      /* center horizontally */
  text-align: center;
}

.student-avatar {
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.student-avatar img {
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}


.student-name {
  margin-top: 10px;
  font-size: 22px;
  font-weight: bold;
  color: white;
}

/* CENTER COLUMN */
.radar-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* RIGHT COLUMN */
.profile-right {
  font-size: 16px;
  text-align: center;
  color: white;
}

.profile-right ul {
  list-style: none;
  padding: 0;
}

.profile-right li {
  margin: 8px 0;
}
/* Table Styles */
#standards-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  background-color: rgba(0, 30, 180, 0.3); /* semi-dark blue */
  color: #fff;
  border-radius: 30px;
  border:2px solid rgba(100,150,255,0.7); /*light blue border*/
  padding: 50px;
  max-width: 900px;
  margin: auto;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

#standards-table th,
#standards-table td {
  padding: 8px;
  text-align: center;
  border-bottom: 1px solid rgba(100,150,255,0.7);
}

#standards-table th {
  background-color: rgba(0, 30, 180, 0.5); /* darker blue for header */
  border-radius: 10px;
}

#standards-table td {
  font-size: 14px;
}

#standards-table tr:hover {
  background-color: rgba(0, 30, 180, 0.5); /* highlight rows when hovering */
}
.radar-tooltip {
  background: white;
  color:#000000;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13px;
  white-space: nowrap;
}
#radar-tooltip {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}
#radar-chart-container {
  position: relative;
}
/* ============================================
   PROFILE ACTION BUTTONS (Under Name)
   ============================================ */
.profile-action-buttons {
  display: flex;
  gap: 10px;
  margin-top: 15px;
  justify-content: center;
  width: 100%;
}
.profile-btn-small {
  padding: 8px 8px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: 'Times New Roman', serif;
  font-size: 0.9em;
  font-weight: bold;
  text-align: center;
  transition: all 0.2s ease;
  flex: 1;
  min-width: 80px;
  max-width: 100px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
  position: relative;
  overflow: hidden;
  color: #fff;
}
.profile-btn-small::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.1);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.profile-btn-small:hover::before {
  opacity: 1;
}
.save-btn {
  background: rgba(0, 30, 180, 0.342);
  border: 1px solid rgba(100, 150, 255, 0.7);
}
.save-btn:hover {
  background: linear-gradient(to bottom, rgba(40, 110, 210, 0.9), rgba(30, 80, 190, 0.9));
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(0, 30, 180, 0.4);
  border-color: rgba(120, 170, 255, 0.9);
}
.load-btn {
  background: rgba(0, 30, 180, 0.5);
  border: 1px solid rgba(100, 150, 255, 0.7);
  position: relative;
}
.load-btn:hover {
  background: linear-gradient(to bottom, rgba(40, 110, 210, 0.8), rgba(30, 80, 190, 0.8));
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(0, 30, 180, 0.4);
  border-color: rgba(120, 170, 255, 0.9);
}
.logout-btn {
    background: rgba(180, 30, 30, 0.5);
    border: 1px solid rgba(255, 100, 100, 0.7);
}
.logout-btn:hover {
    background: linear-gradient(to bottom, rgba(210, 40, 40, 0.9), rgba(190, 30, 30, 0.9));
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(180, 30, 30, 0.4);
    border-color: rgba(255, 120, 120, 0.9);
}
.file-input-hidden {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}
/* Save success animation */
@keyframes quickPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
.save-success {
  animation: quickPulse 0.3s ease;
}
/* Tooltip for buttons */
.profile-btn-small {
  position: relative;
}
.profile-btn-small:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.8em;
  white-space: nowrap;
  z-index: 1000;
  pointer-events: none;
}
/* Responsive adjustments */
@media (max-width: 768px) {
  .profile-action-buttons {
    gap: 8px;
    margin-top: 12px;
  }
  
  .profile-btn-small {
    padding: 6px 12px;
    font-size: 0.85em;
    min-width: 70px;
  }
}
/* Ensure the left column has proper spacing */
.profile-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1px;
}
.student-name {
  font-size: 1.2em;
  font-weight: bold;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  margin-bottom: 5px;
}
#characters-list img {
  width: 80px;
  margin: 5px;
  border: 2px solid transparent;
  border-radius: 10px;
}
#characters-list img:hover {
  border-color: gold;
}
#student-avatar {
  width: 120px;       /* smaller size */
  height: auto;       /* keep aspect ratio */
  max-height: 120px;  /* prevent too tall images */
  object-fit: contain; /* prevent distortion */
  border-radius: 10px;
}
.avatar-wrapper {
  position: relative;
  display: inline-block;
}
.avatar-wrapper img {
  width: 120px;
  height: auto;
  max-height: 120px;
  object-fit: contain;
  border-radius: 10px;
}
.avatar-gear {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-30%, -30%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.8);
  cursor: pointer;
  font-size: 18px;
}
.hide-setup-text .welcome-scroll h1,
.hide-setup-text .welcome-scroll p {
  display: none;
}
/*REWARD INSIDE PROFILE*/
.money-amount {
  display: inline-block;
  background: rgba(42, 16, 190, 0.2);
  border-radius: 5px;
  padding: 4px 1px;
  font-size: 24px;
  font-weight: bold;
  color: #ffffff; 
  text-align: center;
  min-width: 80px;
  margin-left: 10px;
}
.money-icon {
  font-size: 28px;
  vertical-align: center;
  color: white;
}
.profile-money {
  margin-top: 5px;
  text-align: center;
}
.money-link {
    color: white !important;
}
/* Deduct rewards button styling */
.deduct-btn {
    background: rgba(42, 16, 190, 0.2);
    color: white;
    border: 2px solid #19b7d3;
    border-radius: 8px;
    padding: 8px 15px;
    margin-top: 10px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    transition: all 0.3s;
    width: 100%;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}
.deduct-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 8px rgba(0,0,0,0.3);
}
.deduct-btn:active {
    transform: translateY(0);
}
.deduct-btn:disabled {
    background: #666;
    cursor: not-allowed;
    opacity: 0.6;
}

/* BADGE ROW - Full width below columns */
.badge-row {
    grid-column: 1 / -1;  /* Span all columns */
    width: 100%;
    margin-top: 25px;
    padding-top: 20px;
    border-top: 2px solid rgba(0, 187, 255, 0.3);  /* Subtle gold line */
    text-align: center;
}

.badge-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
    min-height: 70px;
    padding: 5px;
}
/* Individual Badge Styling */
.badge-slot {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    cursor: help;
    transition: all 0.2s ease;
    position: relative;
}

.badge-slot img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    border-radius: 50%;
}

/* Shadow state (before earning) */
.badge-slot.shadow img {
    opacity: 0.50;
    filter: grayscale(100%);
    border: 1px solid rgba(53, 48, 48, 0.676);
}

.badge-slot.shadow:hover img {
    opacity: 0.3;
    border-color: rgba(255,215,0,0.5);
}

/* Earned badge state */
.badge-slot.earned img {
    opacity: 1;
    filter: none;
    border: 2px solid #8B6B4D;
    box-shadow: 0 4px 8px rgba(0,0,0,0.5);
}

.badge-slot.earned:hover img {
    transform: scale(1.1);
    border-color: gold;
    box-shadow: 0 0 15px gold;
    z-index: 10;
}

/* Special border colors for earned progression badges */
.badge-slot.earned.progression-bronze img { border-color: #CD7F32; }
.badge-slot.earned.progression-silver img { border-color: #C0C0C0; }
.badge-slot.earned.progression-gold img { border-color: #FFD700; }
.badge-slot.earned.progression-diamond img { border-color: #B9F2FF;box-shadow: 0 0 15px #B9F2FF;}

/* Teacher-awarded badges have purple border */
.badge-slot.earned.teacher-awarded img {
    border-color: #9B30FF;
}

/* Tooltip styling */
.badge-slot::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(20, 20, 40, 0.95);
    color: white;
    padding: 8px 12px;
    border-radius: 20px;
    font-size: 12px;
    white-space: nowrap;
    border: 1px solid #8B6B4D;
    box-shadow: 0 4px 8px rgba(0,0,0,0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s;
    pointer-events: none;
    z-index: 1000;
    font-family: 'Arial', sans-serif;
    line-height: 1.4;
    text-align: center;
}
.badge-slot:hover::after {
    opacity: 1;
    visibility: visible;
}
/* Special tooltip positioning for edge badges */
.badge-slot:first-child::after {
    left: 0;
    transform: translateX(0);
}
.badge-slot:last-child::after {
    left: auto;
    right: 0;
    transform: translateX(0);
}
/* Empty state */
.badge-container.empty {
    color: rgb(1, 1, 1);
    font-style: italic;
    font-size: 14px;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Badge title with filigree */
.badge-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 15px;
    width: 100%;
}

.filigree-left, .filigree-right {
    color: #b3bec55d;
    font-size: 24px;
    font-family: "Times New Roman", serif;
}
.badge-title-text {
    color: #ffffff4c;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    padding: 5px 15px;
    border-radius: 30px;
    font-family: "Cinzel", "Times New Roman", serif;
}
.badge-title:hover .badge-title-text {
    box-shadow: 0 0 0px rgb(0,30,180,0.6), 0 0 20px rgba(150,200,255,1);
    color: #fff;
}
/* Optional: Different filigree symbols on hover */
.badge-title:hover .filigree-left {
    color: rgba(150,200,255,1);
    transition: all 0.3s;
}
.badge-title:hover .filigree-right {
    color: rgba(150,200,255,1);
    transition: all 0.3s;
}

/* Badge Notification Styles */
.badge-notification {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: linear-gradient(135deg, #4CAF50, #45a049);
    color: white;
    padding: 0;
    border-radius: 12px;
    z-index: 10000;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    animation: slideInRight 0.5s ease-out;
    cursor: pointer;
    transition: transform 0.2s;
}

.badge-notification:hover {
    transform: scale(1.05);
}

.badge-notification-content {
    padding: 15px 25px;
    font-weight: bold;
    font-size: 16px;
    text-align: center;
}

.badge-notification.fade-out {
    animation: fadeOut 0.5s ease-out forwards;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100%);
        visibility: hidden;
    }
}

/* Add a subtle pulse effect for new badges in the profile */
.badge-slot.new-badge {
    animation: pulse 0.5s ease-in-out 3;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7);
    }
    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(76, 175, 80, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
    }
}
/*=RATIONALE================================================================================ */
.rationale-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 10000;
}
/* Scroll body */
.rationale-scroll {
  background: #f5e1b0;
  border: 6px solid #b99b63;
  border-radius: 20px;
  max-width: 900px;
  width: 85%;
  max-height: 85vh;
  padding: 60px 70px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.8);
  color: #3d2a1b;
  font-family: 'Georgia', serif;
  position: relative;
  overflow-y: auto;
}
/* Title */
.rationale-scroll h1 {
  text-align: center;
  font-size: 80px;
  margin-bottom: 0px;
}
/* Close button */
#rationale-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
  color: #5b3c1c;
}
/* Mobile */
@media (max-width: 600px) {
  .rationale-scroll {
    padding: 40px 30px;
  }
  .rationale-scroll h1 {
    font-size: 26px;
  }
}
/*ACHIEVEMENTS==================================================================================*/
/* Achievements Button */
.achievements-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 14px 18px;
  font-size: 16px;
  border-radius: 12px;
  background: rgba(0,30,180,0.3);
  color: white;
  cursor: pointer;
  z-index: 1000;
  border: none;
  transition: background 0.2s;
}
.achievements-btn:hover {
    background: rgba(0, 50, 220, 0.5);
}
/* Achievements overlay */
#achievements-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    justify-content: center;
    align-items: center;
    z-index: 9999;
    padding: 20px;
}
/* Achievements container - */
   #achievements-overlay .quest-box {
    background-color: rgba(0,30,180,0.3);
    color: #fff;
    border-radius: 10px;
    padding: 15px;
    max-width: 900px;
    width: 100%;
    margin: auto;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: min-content;
    gap: 10px;
    position: relative;
}
/* Close Button */
#achievements-overlay .close-btn {
  position: absolute;
  top: 18px;
  right: 18px;
  font-size: 24px;
  cursor: pointer;
  color: #fff;
}
/* Tabs (same as quest header) */
#achievements-overlay .achievements-tabs {
  grid-column: 1 / -1;
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 0;
}
/* Tab buttons */
#achievements-overlay .tab-button {
  padding: 10px 16px;
  border: 2px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.08);
  color: #fff;
  cursor: pointer;
  border-radius: 8px;
}
#achievements-overlay .tab-button.active {
  background: rgba(255,255,255,0.15);
}
/* TAB CONTENT */
#achievements-overlay .tab-content {
  grid-column: 1 / -1;
  width: 100%;

}
/* Completed quests grid */
#achievements-overlay .completed-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 10px;
  max-height: none;
  height: auto;
}
/* Path column style*/
#achievements-overlay .completed-grid > div {
  border: 2px solid rgba(150,200,255,1);
  padding: 12px;
  border-radius: 10px;
  max-height: 70%;
  overflow: auto;
}

#achievements-overlay .completed-grid > div::-webkit-scrollbar {
    width: 8px;
}

#achievements-overlay .completed-grid > div::-webkit-scrollbar-thumb {
    background: rgba(100, 150, 255, 0.5);
    border-radius: 4px;
}

#achievements-overlay .completed-grid > div::-webkit-scrollbar-track {
    background: rgba(0, 30, 180, 0.1);
}
/* Path title */
#achievements-overlay .completed-grid h3 {
  margin-top: 0;
  margin-bottom: 10px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
}
/* Quest links inside columns */
#achievements-overlay .completed-grid a {
  display: block;
  padding: 10px;
  margin-bottom: 8px;
  border-radius: 8px;
  border: 2px solid rgba(255,255,255,0.2);
  background: rgba(0,0,0,0.15);
  color: #fff;
  text-decoration: none;
}
/* Hover effect like quest cells */
#achievements-overlay .completed-grid a:hover {
  border-color: rgba(150,200,255,1);
  background: rgba(0,0,0,0.25);
}
/* Achievements accordion style */
.achievement-item {
  border: 2px solid rgba(255,255,255,0.25);
  padding: 10px;
  margin-bottom: 10px;
  background: rgba(0,0,0,0.25);
  border-radius: 8px;
}
.achievement-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#achievements-list a {
  color: white !important;
  text-decoration: none;
}
#achievements-list a:hover {
  color: #ddd !important;
}
.achievement-quests {
  display: none;
  list-style: none;
  padding-left: 0;
  margin-top: 10px;
}
/* Achievements list*/
#achievements-list {
    max-height: 80vh;
    overflow-y: auto;
    padding-right: 8px;
}

/* Custom scrollbar for achievements list (match your theme) */
#achievements-list::-webkit-scrollbar {
    width: 8px;
}

#achievements-list::-webkit-scrollbar-thumb {
    background: rgba(100, 150, 255, 0.5);
    border-radius: 4px;
}

#achievements-list::-webkit-scrollbar-track {
    background: rgba(0, 30, 180, 0.1);
}
.achievement-item.expanded .achievement-quests {
  display: block;
}
.ach-check {
  color: white;
  margin-left: 10px; /* checkmark AFTER the title */
}
.achievement-expand {
  border: none;
  background: transparent;
  font-size: 18px;
  cursor: pointer;
  color: white;
}
/* Keep header as a single row */
.achievement-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* Note styling */
.achievement-note {
  font-size: 0.95em;
  opacity: 0.8;
  font-style: italic;
  margin-top: 6px;
  display: none;
  color:aquamarine;
}
/* Show note only when expanded */
.achievement-item.expanded .achievement-note {
  display: block;
}
/* ================================================================================================================
   TIMER VISUAL EFFECTS
================================================================================================================= */
/* 30% time left - GLOWING RED PULSE */
#quest-box.warning {
    animation: redWarningPulse 1.5s ease-in-out infinite;
    position: relative;
}
@keyframes redWarningPulse {
    0% {
        background: rgba(30, 80, 160, 0.9); /* your normal blue */
        box-shadow: 0 0 20px rgba(255, 0, 0, 0.3);
        border-color: rgba(255, 100, 100, 0.8);
    }
    50% {
        background: rgba(139, 0, 0, 0.8); /* deep red pulse */
        box-shadow: 0 0 40px rgba(255, 0, 0, 0.7);
        border-color: rgba(255, 50, 50, 1);
    }
    100% {
        background: rgba(30, 80, 160, 0.9);
        box-shadow: 0 0 20px rgba(255, 0, 0, 0.3);
        border-color: rgba(255, 100, 100, 0.8);
    }
}
/* Time's up - FULL SOLID RED */
#quest-box.times-up {
    background: rgba(139, 0, 0, 0.9) !important;
    border-color: #ff0000 !important;
    box-shadow: 0 0 50px rgba(255, 0, 0, 0.8) !important;
}
/* For MVP quests - overlay gold with red effects */
#quest-box.mvp.warning {
    animation: mvpWarningPulse 1.5s ease-in-out infinite;
}
@keyframes mvpWarningPulse {
    0% {
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.5), 0 0 20px rgba(255, 0, 0, 0.3);
        border-color: rgba(255, 215, 0, 0.8);
    }
    50% {
        box-shadow: 0 0 40px rgba(255, 215, 0, 0.7), 0 0 40px rgba(255, 0, 0, 0.7);
        border-color: rgba(255, 100, 100, 1);
    }
    100% {
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.5), 0 0 20px rgba(255, 0, 0, 0.3);
        border-color: rgba(255, 215, 0, 0.8);
    }
}
#quest-box.mvp.times-up {
    background: linear-gradient(135deg, rgba(139, 0, 0, 0.9) 0%, rgba(178, 34, 34, 0.9) 100%) !important;
    border-color: #ff0000 !important;
    box-shadow: 0 0 50px rgba(255, 0, 0, 0.8) !important;
}
/* Timer display styling for warning/expired states */
#quest-box.warning .timer-display {
    color: #ff4444;
    font-weight: bold;
    animation: timerPulse 1s infinite;
}
#quest-box.times-up .timer-display {
    color: #ff0000;
    font-weight: bold;
    animation: timerFlash 0.5s infinite alternate;
}
@keyframes timerPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}
@keyframes timerFlash {
    0% { opacity: 1; }
    100% { opacity: 0.5; }
}

/* Map warning glow - pulses when quest time is low */
.map-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Allows clicking through to the map */
    z-index: 100;
    transition: all 0.3s ease;
}

.map-overlay.warning {
    background: rgba(255, 0, 0, 0.15);
    box-shadow: 0 0 30px 10px rgba(255, 0, 0, 0.3);
    animation: warningPulse 1.5s ease-in-out infinite;
}

.map-overlay.times-up {
    background: rgba(255, 0, 0, 0.4);
    animation: none;
    box-shadow: none;
}

@keyframes warningPulse {
    0% {
        background: rgba(255, 0, 0, 0.05);
    }
    50% {
        background: rgba(255, 0, 0, 0.25);
    }
    100% {
        background: rgba(255, 0, 0, 0.05);
    }
}

/* COMPLETED QUEST OVERRIDES - must override timer states */
#quest-box.completed {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%) !important;
    border: 4px solid #666 !important;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.8) !important;
    animation: none !important;
    color: #ddd !important;
}
/* Override warning state when completed */
#quest-box.completed.warning,
#quest-box.completed.times-up {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%) !important;
    border: 4px solid #666 !important;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.8) !important;
    animation: none !important;
}
/* Override for MVP completed quests */
#quest-box.mvp.completed {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%) !important;
    border: 4px solid #666 !important;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.8) !important;
    animation: none !important;
    color: #ddd !important;
}
/* Timer checkbox styling for completed quests */
#quest-box.completed .timer-checkbox-label {
    opacity: 0.6;
    cursor: not-allowed;
}
#quest-box.completed .timer-checkbox {
    cursor: not-allowed;
    opacity: 0.5;
}
#quest-box.completed .timer-display {
    color: #888 !important;
    animation: none !important;
}
/* ==========================
   QUEST HEADER – SINGLE LINE
   ========================== */
/* Force FIRST quest row to be a real grid row */
#quest-box > .quest-row:first-child {
    display: grid;
    grid-template-columns: 5fr 2fr 2fr 3fr;
    grid-column: 1 / -1;
    align-items: center;
    gap: 10px;
}
/* Remove old column rules ONLY for first row */
#quest-box > .quest-row:first-child .quest-cell {
    grid-column: auto !important;
    white-space: nowrap;
    padding: 6px 8px;
    font-size: 14px;
}
/* =================================================
   QUEST HEADER – CUSTOM 2-LINE LAYOUT
   ================================================= */
/* ROW 1: Path | Completed | Difficulty */
#quest-box > .quest-row:nth-of-type(1) {
    display: grid;
    grid-template-columns: 6fr 2fr 2fr;
    grid-column: 1 / -1;
    gap: 10px;
    align-items: center;
}
/* ROW 2: Title | Time | Rationale */
#quest-box > .quest-row:nth-of-type(2) {
    display: grid;
    grid-template-columns: 6fr 2fr 2fr;
    grid-column: 1 / -1;
    gap: 10px;
    align-items: center;
}
/* Prevent wrapping in header rows */
#quest-box > .quest-row:nth-of-type(1) .quest-cell,
#quest-box > .quest-row:nth-of-type(2) .quest-cell {
    grid-column: auto !important;
    white-space: nowrap;
    padding: 6px 8px;
    font-size: 14px;
}
/* Difficulty + stars never wrap */
.stars,
.quest-difficulty {
    white-space: nowrap;
}
/* Time cell styling */
.timer-cell {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
/* Timer display styling */
.timer-display {
    font-weight: bold;
    font-size: 14px;
}
/* Rationale button centered */
.rationale-cell {
    display: flex;
    justify-content: center;
    align-items: center;

}
/*WELCOME TOUR===========================================================================================*/
/* Welcome Tour Styles - Integrated into map */
#welcome-tour-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9998; /* Above map but below overlays */
  pointer-events: none; /* Allow clicking through to map */
}
#welcome-tour-image-wrapper {
  position: absolute;
  z-index: 9999;
  pointer-events: none;
  transition: all 0.2s ease-in-out;
}
#welcome-tour-image {
  max-width: 1000px;
  max-height: 800px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0);
  pointer-events: none;
}
#welcome-tour-talk-bubble {
  position: fixed;
  background: rgba(35, 121, 14, 0.911);
  color: white;
  padding: 30px;
  border-radius: 100px;
  max-width: 500px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  z-index: 10000;
  pointer-events: auto;
  transition: all 0.2s ease-in-out;
  font-family: 'Georgia', serif;
}
#welcome-tour-talk-bubble:after {
  content: '';
  position: absolute;
  border-width: 15px;
  border-style: solid;
  
}
#welcome-tour-text {
  font-size: 18px;
  margin-bottom: 10px;
  line-height: 1.5;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  text-align: center;
}
#welcome-tour-counter {
  font-size: 14px;
  opacity: 0.8;
  font-style: italic;
  margin-bottom: 15px;
}
#welcome-tour-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
#welcome-tour-controls button {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(240, 240, 240, 0.9));
  color: #8B4513;
  border: 2px solid #8B4513;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Georgia', serif;
  min-width: 100px;
  font-weight: bold;
}
#welcome-tour-controls button:hover {
  background: linear-gradient(135deg, #8B4513, #A0522D);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
#welcome-tour-controls button:active {
  transform: translateY(0);
}
#welcome-tour-finish {
  background: linear-gradient(135deg, #228B22, #32CD32) !important;
  color: white !important;
  border-color: #228B22 !important;
}
#welcome-tour-skip {
  background: linear-gradient(135deg, #B22222, #DC143C) !important;
  color: white !important;
  border-color: #B22222 !important;
}
/* Highlight elements being explained */
.tour-highlight {
  animation: pulse .2s infinite;
  border-radius: 2px;
  position: relative;
  z-index: 9997;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 4px rgb(255, 0, 212); }
  50% { box-shadow: 0 0 0 8px rgba(255, 196, 0, 0.753); }
  100% { box-shadow: 0 0 0 4px rgba(60, 255, 1, 0.5); }
}
/* Add to your CSS */
.tour-active {
  pointer-events: none !important;
  cursor: not-allowed !important;
}
.tour-active * {
  pointer-events: none !important;
  cursor: not-allowed !important;
}
/* Allow tour elements to be clickable */
#welcome-tour-container,
#welcome-tour-container *,
#welcome-tour-talk-bubble,
#welcome-tour-talk-bubble *,
#welcome-tour-controls,
#welcome-tour-controls *,
#welcome-tour-prev,
#welcome-tour-next,
#welcome-tour-skip,
#welcome-tour-finish {
  pointer-events: auto !important;
  cursor: pointer !important;
}
.tour-btn {
  display: block;
  width: 30%;
  margin-top: 15px;
  padding: 10px 15px;
  background: rgba(15, 17, 177, 0.15);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}
.tour-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(15, 17, 177, 0.15);
}
.tour-btn:active {
  transform: translateY(0);
}
/* =======================================
   QUEST LIST TAB STYLES
   ======================================= */

/* Filter controls */
.questlist-filters {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 15px;
  background: rgba(0, 30, 180, 0.15);
  border-radius: 8px;
  border: 2px solid rgba(100, 150, 255, 0.3);
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.questlist-filters label {
  color: #fff;
  font-weight: bold;
  font-size: 14px;
}

#questlist-filter {
  background: rgba(0, 30, 180, 0.3);
  color: white;
  border: 2px solid rgba(100, 150, 255, 0.7);
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  min-width: 200px;
  font-size: 14px;
}

#questlist-filter:focus {
  outline: none;
  border-color: rgba(150, 200, 255, 1);
  box-shadow: 0 0 10px rgba(150, 200, 255, 0.5);
}

#questlist-filter option {
  background: rgba(0, 30, 180, 0.9);
  color: white;
}

.filter-stats {
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-style: italic;
}

/* Quest list container */
.questlist-container {
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 5px;
}

.questlist-container::-webkit-scrollbar {
  width: 8px;
}

.questlist-container::-webkit-scrollbar-thumb {
  background: rgba(100, 150, 255, 0.5);
  border-radius: 4px;
}

.questlist-container::-webkit-scrollbar-track {
  background: rgba(0, 30, 180, 0.1);
}

/* Individual quest item */
.questlist-item {
  background: rgba(0, 30, 180, 0.15);
  border: 2px solid rgba(100, 150, 255, 0.3);
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 10px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.questlist-item:hover {
  background: rgba(0, 30, 180, 0.25);
  border-color: rgba(150, 200, 255, 1);
  box-shadow: 0 0 15px rgba(150, 200, 255, 0.4);
  transform: translateY(-2px);
}

.questlist-item.active {
  border-color: rgba(255, 100, 100, 0.8);
  background: rgba(255, 0, 0, 0.1);
  animation: pulseActive 2s infinite;
}

@keyframes pulseActive {
  0% { box-shadow: 0 0 0 0 rgba(255, 100, 100, 0.4); }
  70% { box-shadow: 0 0 0 10px rgba(255, 100, 100, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 100, 100, 0); }
}

.questlist-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.questlist-title {
  font-size: 16px;
  font-weight: bold;
  color: white;
  margin: 0;
}

.questlist-id {
  font-size: 12px;
  color: rgba(200, 220, 255, 0.7);
  background: rgba(0, 30, 180, 0.3);
  padding: 2px 8px;
  border-radius: 4px;
}

.questlist-details {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: rgba(200, 220, 255, 0.8);
}

.questlist-path {
  display: inline-block;
  background: rgba(100, 150, 255, 0.2);
  padding: 2px 8px;
  border-radius: 4px;
  margin-right: 8px;
}

.questlist-timer {
  color: #ffcc00;
  font-weight: bold;
}

.questlist-timer.active {
  color: #ff4444;
  animation: blink 1s infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.questlist-completed {
  color: #00ff88;
  font-weight: bold;
}

/* Empty state */
.questlist-empty {
  text-align: center;
  padding: 40px;
  color: rgba(255, 255, 255, 0.5);
  font-style: italic;
}

/* Responsive styles */
@media (max-width: 768px) {
  .questlist-filters {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
  
  .filter-group {
    width: 100%;
  }
  
  #questlist-filter {
    width: 100%;
    min-width: unset;
  }
  
  .filter-stats {
    align-self: flex-end;
  }
  
  .questlist-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }
  
  .questlist-details {
    flex-direction: column;
    gap: 5px;
  }
}

@media (max-width: 480px) {
  .questlist-item {
    padding: 12px;
  }
  
  .questlist-title {
    font-size: 14px;
  }
  
  .questlist-details {
    font-size: 12px;
  }
}

/* =======================================
   RESPONSIVE BASE STYLES
   ======================================= */

/* Base responsive adjustments */
@media (max-width: 1200px) {
  /* Adjust for tablets and smaller laptops */
  #quest-box {
    max-width: 95%;
    grid-template-columns: repeat(8, 1fr) !important;
    padding: 10px;
  }
  
  .welcome-scroll,
  .rationale-scroll,
  .popup {
    width: 90%;
    padding: 40px 30px;
  }
}

@media (max-width: 992px) {
  /* Tablet landscape adjustments */
  #dropdown-container {
    top: 10px;
    left: 10px;
    padding: 8px;
    font-size: 14px;
  }
  
  .profile-btn {
    top: 15px;
    right: 15px;
    width: 60px !important;
    height: 60px !important;
  }
  
  .profile-btn img {
    width: 60px;
    height: 60px;
  }
    
  /* Quest box grid adjustment */
  #quest-box {
    grid-template-columns: repeat(6, 1fr) !important;
  }
  
  .image-cell {
    grid-column: 1 / 4 !important;
  }
  
  .description-cell {
    grid-column: 4 / 9 !important;
  }
  
  .requirements-cell {
    grid-column: 1 / 9 !important;
    margin-top: 10px;
  }
  
  /* Profile grid adjustment */
  .profile-grid {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
}

@media (max-width: 768px) {
  /* Tablet portrait and large phones */
  html, body {
    overflow-y: auto;
    touch-action: manipulation;
  }
  
  /* Increase touch target sizes */
  .hotspot {
    width: 6% !important;
    height: 1.5% !important;
    min-width: 24px;
    min-height: 24px;
  }
  
  /* Adjust dropdown container for mobile */
  #dropdown-container {
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 400px;
    text-align: center;
    z-index: 3000;
  }
  
  #map-switcher {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  
  #quest-search-container {
    width: 100%;
    margin-right: 0;
  }
  
  /* Quest overlay adjustments */
  #quest-overlay {
    padding: 10px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  #quest-box {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px;
    padding: 8px;
    margin: 0 auto;
    width: 100%;
  }
  
  /* Reorganize quest rows for mobile */
  .quest-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px;
  }
  
  .quest-cell {
    grid-column: 1 / -1 !important;
    width: 100%;
    margin-bottom: 5px;
  }
  
  /* Header rows - stack vertically */
  #quest-box > .quest-row:nth-of-type(1),
  #quest-box > .quest-row:nth-of-type(2) {
    grid-template-columns: 1fr !important;
    display: flex !important;
    flex-direction: column;
  }
  
  .timer-cell,
  .rationale-cell {
    justify-content: center !important;
    text-align: center;
  }
  
  /* Image, description, requirements stack vertically */
  #quest-box > .quest-row:nth-of-type(3) {
    display: flex;
    flex-direction: column;
  }
  
  .image-cell {
    width: 100%;
    text-align: center;
  }
  
  #quest-character {
    max-width: 200px;
    margin: 0 auto;
  }
  
  /* Prereq/leads tabs */
  .tabs {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }
  
  .tab-button {
    padding: 12px;
    font-size: 14px;
    min-height: 44px; /* Minimum touch target */
  }
  
  /* Profile popup adjustments */
  .profile-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  #radar-chart-container {
    order: 2;
  }
  
  .profile-right {
    order: 3;
  }
  
  .profile-left {
    order: 1;
  }
  
  /* Welcome tour adjustments */
  #welcome-tour-talk-bubble {
    max-width: 90%;
    padding: 15px;
    border-radius: 15px;
  }
  
  #welcome-tour-controls button {
    min-height: 44px;
    min-width: 44px;
    padding: 12px;
    font-size: 14px;
  }
  
  /* Achievements grid adjustment */
  #achievements-overlay .completed-grid {
    grid-template-columns: 1fr;
  }
  
  /* Quest list adjustments */
  .questlist-filters {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  
  .filter-group {
    width: 100%;
  }
  
  #questlist-filter {
    width: 100%;
  }
  
  .questlist-item {
    padding: 12px;
  }
  
  .questlist-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }
  
  .questlist-title {
    font-size: 15px;
  }
  
  .questlist-details {
    flex-direction: column;
    gap: 5px;
  }
}

@media (max-width: 576px) {
  /* Mobile phones */
  #dropdown-container {
    font-size: 12px;
  }
  
  select {
    padding: 8px 10px;
    font-size: 14px;
  }
  
  #quest-search {
    padding: 8px 10px;
    font-size: 14px;
  }
  
  /* Quest box further simplification */
  #quest-box {
    grid-template-columns: 1fr !important;
  }
  
  .quest-cell {
    padding: 8px;
    font-size: 14px;
  }
  
  #quest-title {
    font-size: 18px;
  }
  
  /* Profile adjustments */
  .profile-title {
    font-size: 20px;
  }
  
  .student-avatar {
    width: 100px;
    height: 100px;
  }
  
  .student-name {
    font-size: 18px;
  }
  
  .profile-btn-small {
    padding: 10px 12px;
    font-size: 14px;
    min-height: 44px;
  }
  
  /* Welcome/Setup overlays */
  .welcome-scroll,
  .rationale-scroll,
  .popup {
    padding: 25px 20px;
    width: 95%;
  }
  
  .scroll-body {
    padding: 15px;
  }
  
  .welcome-scroll h1,
  .rationale-scroll h1 {
    font-size: 22px;
  }
  
  /* Character selection */
  .character-card img {
    width: 70px;
    height: 70px;
  }
  
  /* Rubric table adjustments */
  .rubric-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .rubric-table th,
  .rubric-table td {
    padding: 6px;
    font-size: 12px;
  }
  
  /* Standards table adjustments */
  #standards-table {
    display: block;
    overflow-x: auto;
  }
  
  #standards-table th,
  #standards-table td {
    padding: 6px 4px;
    font-size: 12px;
  }
  
  /* Timer button adjustments */
  .timer-accept-btn {
    padding: 10px 15px;
    font-size: 14px;
    min-height: 44px;
    min-width: 120px;
  }
}

@media (max-width: 400px) {
  /* Small phones */
  #dropdown-container {
    padding: 5px;
  }
  
  .profile-btn {
    width: 50px !important;
    height: 50px !important;
    top: 10px;
    right: 10px;
  }
  
  .profile-btn img {
    width: 50px;
    height: 50px;
  }
    
  /* Quest overlay */
  #close-quest,
  .close-btn {
    width: 36px;
    height: 36px;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Tour controls */
  #welcome-tour-controls {
    flex-direction: column;
  }
  
  #welcome-tour-controls button {
    width: 100%;
  }
}
/* =======================================
   TOUCH OPTIMIZATIONS
   ======================================= */

/* Ensure all interactive elements are touch-friendly */
button,
select,
.tab-button,
.hotspot,
.character-card,
.search-result,
.questlist-item,
.achievement-header,
.profile-btn-small,
.deduct-btn {
  min-height: 44px; /* Apple's recommended minimum touch target */
  min-width: 44px;
  touch-action: manipulation; /* Prevent double-tap zoom */
}
/* EXCLUDE checkboxes from min-height rule */
input[type="checkbox"] {
  min-height: 20px !important;
  min-width: 20px !important;
  touch-action: manipulation;
}

/* Prevent text selection on interactive elements */
button, .hotspot, .tab-button {
  user-select: none;
  -webkit-user-select: none;
}

/* Improve touch feedback */
button:active,
.tab-button:active,
.hotspot:active,
.profile-btn-small:active {
  transform: scale(0.98);
  transition: transform 0.1s;
}

/* Quest checkbox specific styling */
#quest-check[type="checkbox"] {
    transform: scale(1) !important;
    margin: 0 5px !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
}

/* Better spacing for touch on mobile */
@media (max-width: 768px) {
  /* Increase spacing between interactive elements */
  button + button,
  .tab-button + .tab-button,
  .profile-btn-small + .profile-btn-small {
    margin-top: 8px;
  }
  
  /* Larger dropdown touch areas */
  select {
    padding: 12px;
    font-size: 16px; /* Prevents iOS zoom on focus */
  }
  
  /* Prevent hover-only interactions on mobile */
  @media (hover: none) and (pointer: coarse) {
    .quest-cell:hover {
      border-color: inherit !important;
      box-shadow: none !important;
    }
    
    .search-result:hover {
      background: inherit !important;
    }
  }
}

/* =======================================
   ORIENTATION SPECIFIC ADJUSTMENTS
   ======================================= */

@media (max-height: 600px) and (orientation: landscape) {
  /* Landscape mode on mobile */
  #dropdown-container {
    top: 5px;
    left: 5px;
    max-width: 250px;
  }
  
  .profile-btn {
    top: 5px;
    right: 5px;
  }
    
  /* Reduce vertical space in quest overlay */
  #quest-overlay {
    padding: 5px;
  }
  
  #quest-box {
    max-height: 90vh;
    overflow-y: auto;
  }
  
  .quest-cell {
    padding: 6px;
  }
  
  /* Profile in landscape */
  .profile-grid {
    grid-template-columns: 1fr 1fr;
    max-height: 80vh;
    overflow-y: auto;
  }
  
  .profile-left {
    grid-column: 1;
  }
  
  #radar-chart-container {
    grid-column: 2;
    grid-row: 1;
  }
  
  .profile-right {
    grid-column: 1 / span 2;
    grid-row: 2;
  }
}

/* =======================================
   HIGH DPI SCREENS
   ======================================= */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Crisper borders and shadows */
  .quest-cell,
  .tab-button,
  .profile-btn-small {
    border-width: 1.5px;
  }
  
  /* Sharper grid lines */
  #map-container::after {
    background-size: 8% 8%;
  }
}

/* =======================================
   ACCESSIBILITY IMPROVEMENTS
   ======================================= */

/* Focus styles for keyboard navigation */
button:focus,
select:focus,
input:focus,
.tab-button:focus {
  outline: 3px solid rgba(100, 150, 255, 0.7);
  outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .quest-cell {
    border: 2px solid white;
  }
  
  #quest-box.mvp .quest-cell {
    border: 2px solid yellow;
  }
  
  .profile-btn-small {
    border: 2px solid white;
  }
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .welcome-scroll,
  .rationale-scroll {
    animation: none !important;
  }
  
  .hotspot.mvp-glow,
  .mvp-hotspot {
    animation: none !important;
  }
  
  #quest-box.warning,
  #quest-box.mvp.warning {
    animation: none !important;
  }
}

/* =======================================
   SPECIFIC COMPONENT FIXES
   ======================================= */

/* Fix for iOS Safari 100vh issue */
@supports (-webkit-touch-callout: none) {
  .welcome-overlay,
  .overlay,
  #quest-overlay {
    height: -webkit-fill-available;
  }
}

/* Fix for Android Chrome tap highlight */
* {
  -webkit-tap-highlight-color: transparent;
}

/* Fix for Firefox scrollbars */
.questlist-container {
  scrollbar-width: thin;
  scrollbar-color: rgba(100, 150, 255, 0.5) rgba(0, 30, 180, 0.1);
}

/* Fix for Safari input zoom */
@media (max-width: 768px) {
  select,
  input[type="text"] {
    font-size: 16px; /* Prevents automatic zoom on iOS */
  }
}



/* ======================Work overlay styles =============================================================== */
#work-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.817);
    z-index: 10000;
    overflow-y: auto;
    padding: 20px;
    justify-content: center;
    align-items: center;
    min-height: 100%;
}

/* Work box */
#work-box {
    background-color: rgb(36, 180, 0);
    color: #fff;
    border-radius: 10px;
    padding: 25px;
    max-width: 900px;
    width: 90%;
    margin: auto;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    position: relative;
}
/* Close button */
.close-overlay {
  position: absolute;
  top: 12px;
  right: 450px;
  font-size: 24px;
  color: white;
  background: transparent;
  border: none;
  cursor: pointer;
    
}
/* Work rows */
.work-row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 10px;
    margin-bottom: 15px;
}
/* Work cells - matching quest-cell style */
.work-cell {
    background-color: rgba(0,30,180,0.3);
    border-radius: 8px;
    padding: 15px;
    color: #fff;
    border: 2px solid rgba(100,150,255,0.7);
    cursor: pointer;
    transition: background-color 0.2s;
}
.work-cell:hover {
    background-color: rgba(100,150,255,0.2);
}
/* Work image section */
.work-image-section label {
    display: block;
    font-weight: bold;
    color: #fff;
    text-align: center;
    font-size: 25px;
}
#image-preview {
  display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
    max-width: 100%;
    max-height: 300px;
    display: none;
    margin-top: 15px;
    border: 2px solid rgba(100,150,255,0.7);
    border-radius: 8px;
    background-color: rgba(0,30,180,0.2);
}
.delete-image-btn {
    background-color: rgba(220, 53, 69, 0.8);
    color: white;
    border: 2px solid rgba(255, 100, 100, 0.7);
    border-radius: 8px;
    cursor: pointer;
    margin-top: 4px;
    font-size: 12px;
    padding: 1px 4px; 
    font-weight: bold;
}
.delete-image-btn:hover {
    background-color: rgba(200, 35, 51, 0.9);
}
/* Save work button */
.save-work {
    background-color: rgba(40, 167, 69, 0.8);
    color: white;
    border: 2px solid rgba(100, 255, 100, 0.7);
    padding: 2px 4px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
    margin-top: 4px;
    transition: background-color 0.2s;
    margin-bottom: 5px;
}
.save-work:hover {
    background-color: rgba(33, 136, 56, 0.9);
}
/* Work saved indicator */
.work-saved-indicator {
    font-size: 12px;
    padding: 4px 8px;
    background-color: rgba(40, 167, 69, 0.8);
    color: white;
    border-radius: 12px;
    display: inline-block;
    border: 1px solid rgba(100, 255, 100, 0.7);
    margin-left: 10px;
  
}
/* Work main info grid */
.work-main-info {
    grid-column: span 12;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-bottom: 10px;
}
/* Field groups */
.field-group {
    background-color: rgba(0,30,180,0.3);
    border-radius: 8px;
    padding: 15px;
    border: 2px solid rgba(100,150,255,0.7);
}
.field-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #fff;
    text-align: center;
}
.field-group input,
.field-group textarea {
    width: 90%;
    padding: 8px 10px;
    background-color: rgba(255,255,255,0.1);
    border: 2px solid rgba(100,150,255,0.5);
    border-radius: 4px;
    font-size: 14px;
    color: #fff;
}
.field-group input:focus,
.field-group textarea:focus {
    outline: none;
    border-color: rgba(100,150,255,0.9);
    background-color: rgba(255,255,255,0.15);
}
.field-group textarea {
    resize: vertical;
    min-height: 40px;
}
#work-description{
  width: 97%;
}
/* Description help ============================================= */
.description-container {
  position: relative;
}
.description-header {
   display: flex;
  justify-content: space-between;  /* This pushes items to opposite ends */
  align-items: center;
  width: 100%;  /* Take full width of container */
  margin-bottom: 5px;
}
.description-header label {
  margin-bottom: 0;
  flex-shrink: 0;
}
.help-btn {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: #007bff34;
  color: white;
  border: none;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
  flex-shrink: 0;  /* Prevent button from shrinking */
  margin-left: auto;
}
.help-btn:hover {
  background-color: #0056b3;
}
/* Modal styles */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 54%;
  width: 50%;
  height: 100%;
  background-color: rgba(155, 28, 28, 0);
  z-index: 10000;
}
.modal-content {
  position: relative;
  background-color: white;
  margin: 5% auto;
  padding: 20px;
  width: 80%;
  max-width: 600px;
  max-height: 70vh;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-shrink: 0; 
}
.modal-body {
  line-height: 1.6;
  overflow-y: auto;  /* Add vertical scrollbar when needed */
  padding-right: 10px;  /* Add some padding for the scrollbar */
}
/*Style the scrollbar for better appearance */
.modal-body::-webkit-scrollbar {
  width: 8px;
}
.modal-body::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}
.modal-body::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}
.modal-body::-webkit-scrollbar-thumb:hover {
  background: #555;
}
/* Keep your existing styles for the content */
.modal-body h3 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 1.1rem;
  color: #333;
}

.modal-body h4 {
  margin: 10px 0 5px 0;
  font-size: 1rem;
  color: #666;
}

.modal-body ul {
  margin-bottom: 15px;
  padding-left: 20px;
}

.modal-body li {
  margin-bottom: 5px;
}

.example {
  background-color: #f5f5f5;
  padding: 15px;
  border-radius: 4px;
  font-style: italic;
  margin: 10px 0 20px 0;
}
/* Fullscreen Image Viewer */
.fullscreen-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 10000;
    display: none;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.fullscreen-container {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    background: transparent;
    border-radius: 8px;
    overflow: hidden;
    cursor: default;
}

.fullscreen-image {
    max-width: 90vw;
    max-height: 85vh;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    border-radius: 8px;
    box-shadow: 0 0 30px rgba(0,0,0,0.5);
}

.fullscreen-close {
    position: absolute;
    top: -40px;
    right: 0;
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    font-size: 32px;
    cursor: pointer;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    z-index: 10;
}

.fullscreen-close:hover {
    background: rgba(255,255,255,0.4);
    transform: scale(1.1);
}

.fullscreen-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
    color: white;
    padding: 20px;
    border-radius: 0 0 8px 8px;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.fullscreen-container:hover .fullscreen-info {
    transform: translateY(0);
}

.fullscreen-info h3 {
    margin: 0 0 5px 0;
    font-size: 18px;
}

.fullscreen-info p {
    margin: 5px 0;
    font-size: 14px;
    opacity: 0.9;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .fullscreen-info {
        padding: 12px;
    }
    
    .fullscreen-info h3 {
        font-size: 16px;
    }
    
    .fullscreen-info p {
        font-size: 12px;
    }
    
    .fullscreen-close {
        top: 10px;
        right: 10px;
        background: rgba(0,0,0,0.5);
    }
}
/* ==============================Gallery Overlay ===================================*/
#gallery-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 2000;
  overflow-y: auto;
  padding: 20px;
}

#gallery-box {
  background-color: rgba(0,30,180,0.3);
  color: #fff;
  border-radius: 10px;
  padding: 15px;
  max-width: 900px;
  width: 90%;
  margin: auto;
  box-shadow: 0 0 20px rgba(0,0,0,0.5);
  position: relative;
}

.gallery-header {
  text-align: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(100,150,255,0.7);
}

.gallery-header h2 {
  color: #fff;
  font-size: 24px;
  margin: 0;
}
/* Gallery Grid */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
  padding: 10px;
  max-height: 60vh;
  overflow-y: auto;
}

.gallery-item {
  background-color: rgba(0,30,180,0.3);
  border: 2px solid rgba(100,150,255,0.7);
  border-radius: 8px;
  padding: 10px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
}

.gallery-item:hover {
  transform: scale(1.02);
  box-shadow: 0 0 15px rgba(100,150,255,0.5);
}

.gallery-thumbnail {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 8px;
  background-color: rgba(0,0,0,0.2);
}

.gallery-title {
  text-align: center;
  font-size: 14px;
  color: #fff;
  margin-top: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gallery-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px;
  color: rgba(255,255,255,0.6);
  font-style: italic;
}
#close-gallery {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  font-size: 20px;
  color: #fff;
  z-index: 1;
}
.gallery-grid::-webkit-scrollbar {
  width: 8px;
}
.gallery-grid::-webkit-scrollbar-track {
  background: rgba(0,30,180,0.2);
  border-radius: 4px;
}
.gallery-grid::-webkit-scrollbar-thumb {
  background: rgba(100,150,255,0.5);
  border-radius: 4px;
}
.gallery-grid::-webkit-scrollbar-thumb:hover {
  background: rgba(100,150,255,0.7);
}
/* MVP Gallery Items - Gold theme */
.gallery-item.mvp {
    background-color: rgba(214, 180, 26, 0.521); /* Gold background */
    border: 2px solid gold; /* Gold border */
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
}
.gallery-item.mvp:hover {
    border-color: rgb(182, 150, 9) !important;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
}
.gallery-item.mvp .gallery-title {
    color: gold;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}
.gallery-item.mvp .gallery-thumbnail {
    border: 1px solid rgba(255, 215, 0, 0.5);
}

/*================================QUESTIONNAIRE STYLING ================================*/

/* Tabs should span full width */
#achievements-overlay .achievements-tabs {
    grid-column: 1 / -1;
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 0;
    flex-wrap: wrap; /* Allow wrapping on small screens */
}

/* Tab content should span full width and have scroll */
#achievements-overlay .tab-content {
    grid-column: 1 / -1;
    width: 100%;
    max-height: 50%;
    padding-right: 5px;
}

/* Custom scrollbar for tab content */
#achievements-overlay .tab-content::-webkit-scrollbar {
    width: 8px;
}

#achievements-overlay .tab-content::-webkit-scrollbar-thumb {
    background: rgba(100, 150, 255, 0.5);
    border-radius: 4px;
}

#achievements-overlay .tab-content::-webkit-scrollbar-track {
    background: rgba(0, 30, 180, 0.1);
}

/* Pathfinder container */
.pathfinder-container {
    width: 100%;
    padding: 5px;
    box-sizing: border-box;
}

/* Pathfinder intro - match questlist filter style */
#pathfinder-intro {
    background: rgba(0, 30, 180, 0.15);
    border-radius: 8px;
    border: 2px solid rgba(100, 150, 255, 0.3);
    padding: 15px;
    margin-bottom: 20px;
    color: white;
}

#pathfinder-intro h2 {
    margin-top: 0;
    color: white;
    font-size: 1.4em;
}

/* Questions container with scroll */
#pathfinder-questions-container {
    max-height: 45vh;
    overflow-y: auto;
    padding-right: 8px;
    margin-bottom: 15px;
}

/* Custom scrollbar for questions */
#pathfinder-questions-container::-webkit-scrollbar {
    width: 8px;
}

#pathfinder-questions-container::-webkit-scrollbar-thumb {
    background: rgba(100, 150, 255, 0.5);
    border-radius: 4px;
}

#pathfinder-questions-container::-webkit-scrollbar-track {
    background: rgba(0, 30, 180, 0.1);
}

/* Question styling - match quest item style */
.pathfinder-question {
    background: rgba(0, 30, 180, 0.15);
    border: 2px solid rgba(100, 150, 255, 0.3);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    transition: all 0.3s ease;
}

.pathfinder-question:hover {
    background: rgba(0, 30, 180, 0.25);
    border-color: rgba(150, 200, 255, 1);
    box-shadow: 0 0 15px rgba(150, 200, 255, 0.4);
}

.pathfinder-question h4 {
    margin: 0 0 5px 0;
    color: white;
    font-size: 1.1em;
}

.pathfinder-question-note {
    color: aqua;
    font-style: italic;
    font-size: 0.9em;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px dashed rgba(100, 150, 255, 0.3);
}

/* Answers container */
.pathfinder-answers {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Answer option styling */
.pathfinder-answer {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 6px;
    background: rgba(0, 30, 180, 0.2);
    border: 1px solid rgba(100, 150, 255, 0.2);
    cursor: pointer;
    transition: all 0.2s;
}

.pathfinder-answer:hover {
    background: rgba(0, 30, 180, 0.3);
    border-color: rgba(150, 200, 255, 0.6);
}

.pathfinder-answer.selected {
    background: rgba(0, 30, 180, 0.4);
    border: 2px solid aqua;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
}

.pathfinder-answer input[type="radio"] {
    margin-top: 3px;
    cursor: pointer;
    accent-color: aqua; /* Makes radio button match theme */
}

.pathfinder-answer label {
    flex: 1;
    cursor: pointer;
    color: white;
    line-height: 1.4;
}

.pathfinder-answer label strong {
    color: aqua;
    margin-right: 5px;
}

/* Submit button - match tab button style */
#pathfinder-submit {
    background: rgba(0, 30, 180, 0.3);
    border: 2px solid rgba(100, 150, 255, 0.7);
    color: white;
    padding: 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    transition: all 0.3s;
    width: 100%;
    margin-top: 10px;
}

#pathfinder-submit:hover {
    background: rgba(0, 30, 180, 0.5);
    border-color: aqua;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
}

/* Results container */
#pathfinder-results-container {
    width: 100%;
    
}

#pathfinder-result-message {
    background: rgba(0, 30, 180, 0.15);
    border: 2px solid rgba(100, 150, 255, 0.3);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
    border-left: 4px solid aqua;
    line-height: 1.5;
    color: white;
}

#pathfinder-result-message p {
    margin: 0;
}

/* Results quest list */
#pathfinder-quest-list {
    max-height: 40vh;
    overflow-y: auto;
    padding-right: 5px;
    margin-bottom: 15px;
}

/* Scrollbar for results list */
#pathfinder-quest-list::-webkit-scrollbar {
    width: 8px;
}

#pathfinder-quest-list::-webkit-scrollbar-thumb {
    background: rgba(100, 150, 255, 0.5);
    border-radius: 4px;
}

#pathfinder-quest-list::-webkit-scrollbar-track {
    background: rgba(0, 30, 180, 0.1);
}

/* Force results to be visible when displayed */
#pathfinder-results-container[style*="display: block"] {
    display: block !important;
}

/* Make sure questions are hidden when results show */
#pathfinder-questions-container[style*="display: none"] {
    display: none !important;
}

/* Debug outline to see if container is there but invisible */
#pathfinder-results-container {
    min-height: 100px;
    max-height: 90%;
    background: rgba(0,0,0,0.2);
}

/* Retake button */
#pathfinder-retake {
    background: rgba(0, 30, 180, 0.2);
    border: 2px solid rgba(100, 150, 255, 0.5);
    color: white;
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s;
}

#pathfinder-retake:hover {
    background: rgba(0, 30, 180, 0.4);
    border-color: aqua;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #achievements-overlay .quest-box {
        max-height: 90vh;
        padding: 10px;
    }
    
    #achievements-overlay .tab-content {
        max-height: 70vh;
    }
    
    #pathfinder-questions-container {
        max-height: 50vh;
    }
    
    .pathfinder-question {
        padding: 12px;
    }
    
    .pathfinder-answer {
        padding: 8px 10px;
    }
}

@media (max-width: 480px) {
    .pathfinder-question h4 {
        font-size: 1em;
    }
    
    .pathfinder-answer label {
        font-size: 0.9em;
    }
    
    #pathfinder-intro h2 {
        font-size: 1.2em;
    }
}

/*-------------------------------------- Rewards by Standard Overlay------------------------------------------- */
#rewards-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.847);
    z-index: 2100;
    overflow-y: auto;
    padding: 20px;
}

.rewards-overlay {
    display: flex;
    justify-content: center;
    align-items: center;
}

#rewards-box {
    background-color: rgba(0,30,180,0.3);
    color: #fff;
    border-radius: 10px;
    padding: 20px;
    max-width: 900px;
    width: 90%;
    margin: auto;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    position: relative;
    border: 2px solid rgba(100,150,255,0.7);
}

#close-rewards {
    position: absolute;
    top: 10px;
    right: 15px;
    cursor: pointer;
    font-size: 24px;
    color: #fff;
    z-index: 1;
}

#close-rewards:hover {
    color: #0707ef;
}

#rewards-title {
    text-align: center;
    margin-bottom: 20px;
    font-size: 1.5em;
    color: #fff;
    border-bottom: 2px solid rgba(100,150,255,0.5);
    padding-bottom: 10px;
}

#rewards-total-summary {
    text-align: right;
    margin-bottom: 15px;
    font-size: 1.2em;
    color: #ffd700;
    padding: 5px 10px;
    background: rgba(0,30,180,0.2);
    border-radius: 10px;
}

.rewards-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    
}

.rewards-table th,
.rewards-table td {
    padding: 5px;
    text-align: left;
    border: 1px solid rgba(100,150,255,0.3);
}

.rewards-table th {
    background-color: rgba(0,30,180,0.5);
    font-weight: bold;
    color: #fff;
}

.rewards-table td {
    background-color: rgba(0,30,180,0.2);
}

.rewards-table tr:hover td {
    background-color: rgba(100,150,255,0.2);
}

.reward-amount {
    font-weight: bold;
    color: #ffd700;
    text-align: right;
}

.standard-code {
    font-family: monospace;
    font-size: 1em;
    color: #aaddff;
}

.standard-name {
    font-size: 0.9em;
    opacity: 0.9;
}

.money-link {
    color: inherit;
    text-decoration: underline;
    text-decoration-style: dotted;
    cursor: pointer;
}

.money-link:hover {
    opacity: 0.8;
}
/* ======================================= Restriction Popup =================================================*/
.restriction-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}
.restriction-content {
    background: rgba(214, 180, 26, 0.521);;
    border: 2px solid #c9c87c;
    border-radius: 15px;
    padding: 25px;
    max-width: 400px;
    text-align: center;
    box-shadow: 0 0 30px rgba(201, 168, 124, 0.5);
    position: relative;
    animation: popIn 0.3s ease-out;
}

.restriction-content h3 {
    color: #ffd700;
    font-size: 24px;
    margin-top: 0;
    margin-bottom: 15px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    border-bottom: 2px solid #c9a87c;
    padding-bottom: 10px;
}

.restriction-content p {
    color: #f0e6d2;
    font-size: 18px;
    line-height: 1.5;
    margin-bottom: 20px;
}

.restriction-link {
    display: inline-block;
    color: #ffd700;
    font-size: 20px;
    font-weight: bold;
    text-decoration: none;
    padding: 10px 20px;
    background: rgba(0,0,0,0.3);
    border-radius: 8px;
    margin: 10px 0 20px 0;
    border: 1px solid #c9a87c;
    transition: all 0.3s ease;
}

.restriction-link:hover {
    background: rgba(255, 215, 0, 0.2);
    transform: scale(1.05);
    color: #fff;
    cursor: pointer;
}

.restriction-close {
    background: #c9a87c;
    color: #2a1e0f;
    border: none;
    padding: 8px 25px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 10px;
}

.restriction-close:hover {
    background: #e6c9a0;
    transform: scale(1.05);
}

@keyframes popIn {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* =================================New Quest Announcement Overlay ==============================================*/
.new-quest-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 2500; /* Higher than quest overlay */
    overflow-y: auto;
    padding: 20px;
    justify-content: center;
    align-items: center;
}

#new-quest-box {
    background-color: rgba(0,30,180,0.3);
    color: #fff;
    border-radius: 10px;
    padding: 20px;
    max-width: 500px;
    width: 90%;
    margin: auto;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255,255,255,0.2);
}

.new-quest-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.new-quest-header h2 {
    margin: 0;
    color: #ffd700;
    font-size: 1.5rem;
}

.close-new-quest {
    background: none;
    border: none;
    color: #fff;
    font-size: 28px;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.close-new-quest:hover {
    background: rgba(255,255,255,0.2);
}

.new-quest-content {
    margin-bottom: 20px;
}

.new-quest-content p {
    margin-top: 0;
    font-size: 1.1rem;
}

#new-quest-list {
    list-style: none;
    padding: 0;
    margin: 15px 0;
}

#new-quest-list li {
    margin: 12px 0;
    padding: 8px 12px;
    background: rgba(255,255,255,0.1);
    border-radius: 6px;
    border-left: 3px solid #ffd700;
}

#new-quest-list a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1rem;
    display: block;
}

#new-quest-list a:hover {
    color: #ffd700;
    text-decoration: underline;
}

.new-quest-footer {
    text-align: center;
}

.new-quest-btn {
    background: rgba(255,215,0,0.3);
    color: #fff;
    border: 1px solid #ffd700;
    padding: 10px 25px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: bold;
    transition: all 0.3s;
}

.new-quest-btn:hover {
    background: rgba(255,215,0,0.5);
    transform: scale(1.02);
}
.gallery-thumbnail-wrapper {
    position: relative;
    width: 100%;
    padding-top: 100%; /* Square aspect ratio */
    overflow: hidden;
    border-radius: 8px;
}

.gallery-thumbnail {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.gallery-thumbnail:hover {
    transform: scale(1.05);
}

.gallery-item {
    cursor: pointer;
    transition: transform 0.2s ease;
}

.gallery-item:hover {
    transform: translateY(-5px);
}

.gallery-info {
    font-size: 11px;
    color: rgba(255,255,255,0.7);
    margin-top: 4px;
}

/* ============================================================================================================
   LOGIN SECTION STYLES
   ============================================================================================================= */

.login-section {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.3);
    text-align: center;
}

.login-section h2 {
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: #ffffff;
}

.auth-input {
    width: 80%;
    padding: 12px;
    margin: 10px 0;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.3);
    background: rgba(0,0,0,0.6);
    color: white;
    font-size: 16px;
    box-sizing: border-box;
}

.auth-input:focus {
    outline: none;
    border-color: #ffd700;
    box-shadow: 0 0 5px rgba(255,215,0,0.5);
}

.auth-btn {
    width: 80%;
    padding: 12px;
    margin: 10px 0;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    transition: all 0.3s ease;
}

.auth-btn-primary {
    background: #af994c;
    color: white;
}

.auth-btn-primary:hover {
    background: #45a049;
    transform: scale(1.02);
}

.auth-link {
    margin-top: 15px;
    color: #ffffff;
    cursor: pointer;
    text-decoration: underline;
    font-size: 14px;
}

.auth-link:hover {
    color: #ffaa00;
}

.auth-message {
    color: #ffcc00;
    margin-top: 10px;
    font-size: 14px;
    text-align: center;
}

/* Logout button in profile */
#logout-profile-btn {
    margin-top: 15px;
    padding: 10px;
    background: #ff6b6b;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    width: 100%;
    font-size: 14px;
}

#logout-profile-btn:hover {
    background: #ff4757;
}
/* Teacher Name Display in Profile */
.profile-teacher-name {
    font-size: 12px;
    opacity: 0.8;
    margin-top: 8px;
    margin-bottom: 8px;
    text-align: center;
    color: #ffd700;
    background: rgba(0, 0, 0, 0.3);
    padding: 5px 10px;
    border-radius: 20px;
    display: inline-block;
    width: auto;
}

/* Empty Rubric Message (when teacher deselected all standards) */
.rubric-empty-message {
    text-align: center;
    padding: 40px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
}

.rubric-empty-message p {
    margin: 10px 0;
    color: #ffd700;
}

.rubric-empty-message p:first-child {
    font-size: 18px;
    font-weight: bold;
}
/* Login section - new layout */
.auth-links-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin: 15px 0;
}

.auth-links-row .auth-link {
    margin: 0;
    flex: 1;
    text-align: center;
}

.teacher-login-link {
    margin-top: 5px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
        
}
/* Style for login links - black, no underline */
.auth-link a,
.auth-link,
#forgot-password-link,
#create-profile-link,
#teacher-login-link a {
    color: #000000 !important;
    text-decoration: none !important;
}

.auth-link a:hover,
.auth-link:hover,
#forgot-password-link:hover,
#create-profile-link:hover,
#teacher-login-link a:hover {
    color: #333333 !important;
    text-decoration: none !important;
}

/* ==============================================================================================================
                                            ANALYTICS TAB STYLES
   ============================================================================================================== */

.analytics-section {
    padding: 20px;
}

.analytics-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.analytics-header h2 {
    margin: 0;
    color: #ffd700;
}

.export-btn {
    background: #4a6a8a;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    color: white;
    cursor: pointer;
    font-size: 14px;
}

.export-btn:hover {
    background: #5a7a9a;
}

/* Class Filter */
.analytics-filter {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.analytics-filter label {
    font-weight: bold;
    color: #ffd700;
}

.analytics-filter select {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 8px;
    padding: 8px 16px;
    color: white;
    cursor: pointer;
}

/* Analytics Cards */
.analytics-cards {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.analytics-card {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
    min-width: 180px;
    backdrop-filter: blur(5px);
}
.analytics-card .card-content {
    flex: 1;
    text-align: center; 
}

.card-icon {
    font-size: 32px;
}

.card-content {
    flex: 1;
}

.card-label {
    font-size: 12px;
    opacity: 0.7;
    margin-bottom: 5px;
    color: #f1f1f1;
}

.card-value {
    font-size: 28px;
    font-weight: bold;
    color: #ffd700;
}

.card-sub {
    font-size: 11px;
    opacity: 0.6;
    margin-top: 5px;
    color:#ddd
}
/* Analytics Time Values */
.time-values {
    margin-top: 8px;
    text-align: center;
}

.formative-time {
    font-size: 14px;
    color: #aaa;
}

.formative-label {
    font-size: 11px;
    color: #aaa;
}

.separator {
    font-size: 12px;
    color: #aaa;
    margin: 0 4px;
}

.summative-time {
    font-size: 24px;
    font-weight: bold;
    color: #ffd700;
}

.summative-label {
    font-size: 12px;
    color: #ffd700;
}

/* Average Grade 2x2 Grid */
.analytics-avg-grade {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 30px;
    text-align: center;
}

.analytics-avg-grade h3 {
    color: #ffd700;
    margin-bottom: 15px;
    font-size: 16px;
}

.grade-grid-2x2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    max-width: 500px;
    margin: 0 auto;
    
    
}

/* Pastel Colors for 2x2 Grids */
.grade-cell-creating,
.grade-cell-a,
.grade-cell-ao1 {
    background-color: #B3D9FF;
    padding: 12px;
    border-radius: 12px;
    text-align: center;
    color: #1a1a2e;
    font-weight: bold;
}

.grade-cell-presenting,
.grade-cell-b,
.grade-cell-ao2 {
    background-color: #D9B3FF;
    padding: 12px;
    border-radius: 12px;
    text-align: center;
    color: #1a1a2e;
    font-weight: bold;
}

.grade-cell-responding,
.grade-cell-c,
.grade-cell-ao3 {
    background-color: #FFB3B3;
    padding: 12px;
    border-radius: 12px;
    text-align: center;
    color: #1a1a2e;
    font-weight: bold;
}

.grade-cell-connecting,
.grade-cell-d,
.grade-cell-ao4 {
    background-color: #FFD9B3;
    padding: 12px;
    border-radius: 12px;
    text-align: center;
    color: #1a1a2e;
    font-weight: bold;
}

.grade-cell-label {
    font-size: 12px;
    opacity: 0.8;
    margin-bottom: 8px;
}

.grade-cell-value {
    font-size: 24px;
    font-weight: bold;
}

/* Analytics Tables */
.analytics-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    color: #EAEAEA;
}

.analytics-table th,
.analytics-table td {
    padding: 10px 8px;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    vertical-align: middle;
}

.analytics-table th {
    background: rgba(0, 0, 0, 0.3);
    color: #ffd700;
    font-weight: bold;
}

.analytics-table tbody tr:hover {
    background: rgba(255, 215, 0, 0.05);
}

/* Student Name and Quest Name Links */
.student-name-link,
.quest-name-link {
    cursor: pointer;
    color: #ffffff;
    font-size: 13px;
}

.student-name-link:hover,
.quest-name-link:hover {
    color: #19b7d3;
}

/* Active Quest Badge */
.active-quest-badge {
    background: rgba(76, 175, 80, 0.2);
    color: #4caf50;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    display: inline-block;
}

/* Domain Grades Mini Grid (inside table cells) */
.domain-mini-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    width: 120px;
}

.domain-mini-cell {
    padding: 4px;
    border-radius: 6px;
    text-align: center;
    font-size: 11px;
    font-weight: bold;
    color: #1a1a2e;
}

.domain-mini-label {
    font-size: 9px;
    opacity: 0.7;
}

/* Quest Table */
.analytics-quests {
    margin-top: 30px;
}

.analytics-quests h3 {
    color: #ffd700;
    margin-bottom: 15px;
}

/* Pagination */
.analytics-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.pagination-btn {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 6px;
    padding: 6px 12px;
    color: white;
    cursor: pointer;
    font-size: 12px;
}

.pagination-btn.active {
    background: #4a6a8a;
    border-color: #ffd700;
}

.pagination-btn:hover:not(.active) {
    background: rgba(255, 215, 0, 0.2);
}

/* Table Container for Scroll */
.table-container {
    overflow-x: auto;
    max-width: 100%;
}

/* Responsive */
@media (max-width: 768px) {
    .analytics-cards {
        flex-direction: column;
    }
    
    .grade-grid-2x2 {
        grid-template-columns: 1fr;
        max-width: 100%;
    }
    
    .analytics-table th,
    .analytics-table td {
        font-size: 11px;
        padding: 6px 4px;
    }
    
    .domain-mini-grid {
        width: 80px;
    }
}






















/*TEACHER DASHBOARD CSS INFO===================================================================================*/
/* === GLOBAL & LAYOUT === */
.teacher-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
    min-height: 100vh;
    background: url('map.jpg') no-repeat center center fixed;
    background-size: cover;
}

/* === HEADER === */
.teacher-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding: 15px 20px;
    background: rgba(0, 30, 180, 0.6);
    border-radius: 15px;
    border: 1px solid rgba(100, 150, 255, 0.5);
    backdrop-filter: blur(5px);
}

.teacher-header h1 {
    color: gold;
    margin: 0;
    font-size: 1.8rem;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.teacher-header .logout-btn {
    padding: 8px 16px;
    background: rgba(180, 30, 30, 0.8);
    border: 1px solid rgba(255, 100, 100, 0.7);
    border-radius: 8px;
    color: white;
    cursor: pointer;
    font-size: 14px;
}

.teacher-header .logout-btn:hover {
    background: rgba(210, 40, 40, 0.9);
}
/* === GLOBAL SCROLL BARS == */
/* Custom scrollbar for webkit browsers (Chrome, Edge, Safari) */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 170, 255, 0.5);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 170, 255, 0.5);
}

/* For Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 170, 255, 0.5) rgba(0, 0, 0, 0.2);
}
/* === MAIN TABS (Students / Quests) === */
.teacher-main-tabs {
    display: flex;
    gap: 5px;
    margin-bottom: 0;
    padding-bottom: 0;
}

.main-tab-btn {
    background: rgba(0, 30, 100, 0.5);
    border: 1px solid rgba(100, 150, 255, 0.3);
    border-bottom: none;
    padding: 10px 24px;
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    color: white;
    font-size: 16px;
    transition: all 0.2s;
}

.main-tab-btn:hover {
    background: rgba(0, 50, 150, 0.7);
}

.main-tab-btn.active {
    background: rgba(255, 215, 0, 0.2);
    border-color: gold;
    color: gold;
}

/* === TAB CONTENT (shared background) === */
.main-tab-content {
    background: rgba(0, 30, 180, 0.3);
    border-radius: 0 15px 15px 15px;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(100, 150, 255, 0.3);
    border-top: none;
    padding: 20px;
}

/* === STUDENTS SECTION === */
.teacher-student-list h2,
.teacher-quests-list h2 {
    color: gold;
    margin-bottom: 20px;
    font-size: 1.5rem;
}

.students-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.organize-classes-btn {
    background: #4a4a6a;
    border: none;
    color: white;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
}

.organize-classes-btn:hover {
    background: #5a5a7a;
}

/* Student Cards (for list view) */
#student-list-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.student-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 20px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s;
    border: 1px solid rgba(100, 150, 255, 0.3);
}

.student-card:hover {
    transform: translateX(5px);
    background: rgba(0, 30, 180, 0.5);
    border-color: gold;
}

.student-card img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid gold;
}

.student-info {
    flex: 1;
}

.student-info h3 {
    margin: 0;
    font-size: 1.1rem;
    color: white;
}

.student-info p {
    margin: 5px 0 0;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.7);
}

/* === CLASS ACCORDION (used in "My Students") === */
.class-accordion-item {
    margin-bottom: 12px;
    border-radius: 12px;
    background: rgba(0, 20, 80, 0.4);
    overflow: hidden;
}

.class-accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    background: rgba(0, 30, 100, 0.6);
    cursor: pointer;
    transition: background 0.2s;
}

.class-accordion-header:hover {
    background: rgba(0, 40, 120, 0.8);
}

.class-title {
    font-weight: bold;
    font-size: 16px;
    color: gold;
}

.class-stats {
    font-size: 12px;
    opacity: 0.7;
    margin-left: 10px;
}

.class-expand-icon {
    font-size: 18px;
    transition: transform 0.2s;
}

.class-accordion-header.expanded .class-expand-icon {
    transform: rotate(180deg);
}

.class-student-list {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.class-student-list.expanded {
    display: flex;
}

.class-student-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px 15px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.class-student-card:hover {
    background: rgba(0, 0, 0, 0.5);
    transform: translateX(5px);
}

.class-student-card img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid gold;
}

.class-student-name {
    font-weight: bold;
    font-size: 14px;
}

.class-student-email {
    font-size: 11px;
    opacity: 0.6;
}

.pending-dot-small {
    width: 10px;
    height: 10px;
    background: #ff4444;
    border-radius: 50%;
    margin-left: 8px;
    display: inline-block;
    animation: pulse 1.5s infinite;
}

/* ==============================================================================================================
                                          QUEST TAB STYLES
   ============================================================================================================== */
.quests-accordion-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
/* Quest Accordion Items */
.quest-accordion-item {
    background: rgba(0, 20, 80, 0.4);
    border-radius: 12px;
    overflow: hidden;
}

.quest-accordion-item.mvp {
    border: 1px solid gold;
    background: rgba(255, 215, 0, 0.1);
}

.quest-accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    background: rgba(0, 30, 100, 0.6);
    cursor: pointer;
    transition: background 0.2s;
}

.quest-accordion-header:hover {
    background: rgba(0, 40, 120, 0.8);
}

.quest-title {
    font-weight: bold;
    font-size: 16px;
    color: white;
}

.mvp .quest-title {
    color: gold;
}

.quest-path-badge {
    font-size: 12px;
    padding: 4px 10px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 20px;
    color: #ccc;
    margin-left: 10px;
}

.quest-expand-icon {
    font-size: 18px;
    transition: transform 0.2s;
    color: #aaa;
}

.quest-accordion-header.expanded .quest-expand-icon {
    transform: rotate(180deg);
}

/* Quest Accordion Content - SCROLLABLE */
.quest-accordion-content {
    padding: 16px;
    display: none;
    flex-direction: column;
    gap: 12px;
    max-height: 400px;
    overflow-y: auto;
}

.quest-accordion-content.expanded {
    display: flex;
}
/* Scrollbar for path content */
.quest-accordion-content::-webkit-scrollbar {
    width: 6px;
}

.quest-accordion-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 3px;
}

.quest-accordion-content::-webkit-scrollbar-thumb {
    background: rgba(255, 215, 0, 0.5);
    border-radius: 3px;
}

/* List of quests inside a path */
.quests-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.quest-link-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}
.quest-link-item:hover {
    background: rgba(0, 100, 200, 0.5);
    transform: translateX(5px);
}

.quest-link-item.mvp-quest-link {
    background: rgba(255, 217, 0, 0.176);
}
.quest-link-item.mvp-quest-link:hover{
    background: rgba(200, 183, 0, 0.68);
    transform: translateX(5px);
}

.quest-link-title {
    color: white;
    font-size: 14px;
}

.mvp-badge {
    color: gold;
    font-size: 12px;
    margin-left: 10px;
}

/* === BUTTONS (like View Details) === */
.quest-view-details-btn {
    background: rgba(0, 100, 200, 0.5);
    border: 1px solid rgba(100, 150, 255, 0.5);
    color: white;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    width: fit-content;
}

.quest-view-details-btn:hover {
    background: rgba(0, 100, 200, 0.8);
}
/* ==============================================================================================================
                                         END OF QUEST TAB STYLES
   ============================================================================================================== */
/* ==============================================================================================================
                                            CLASS MANAGEMENT STYLES
   ============================================================================================================== */
/* Class Management Tab Section */
.class-management-section {
    padding: 20px;
}

.class-management-section .class-mgmt-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    color: white;

}

.class-management-section .class-mgmt-actions {
    display: flex;
    gap: 10px;
    
}

/* Class Management Area */
#class-management-area {
    display: none;
    background: rgba(0, 30, 100, 0.3);
    border-radius: 15px;
    padding: 20px;
    backdrop-filter: blur(5px);
    margin-top: 20px;
    color: white;
}

/* Class Drop Zones Container */
.class-drop-zones {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding: 20px;
    min-height: 400px;
    color: white;
}

/* Individual Class Column */
.class-drop-zone {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    padding: 15px;
    min-width: 280px;
    width: 280px;
    border: 2px dashed transparent;
    transition: all 0.2s;
    color: white;
}

.class-drop-zone.drag-over {
    border-color: #4caf50;
    background: rgba(76, 175, 80, 0.1);
}

/* Class Header */
.class-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.class-title {
    font-weight: bold;
    font-size: 16px;
    color: #ffd700;
}

.class-student-count {
    font-size: 12px;
    opacity: 0.7;
    margin-left: 8px;
}

/* Delete Class Button */
.delete-class-btn {
    background: rgba(0, 0, 0, 0);
    border: none;
    border-radius: 5px;
    padding: 5px 8px;
    cursor: pointer;
    color: white;
    font-size: 14px;
}

.delete-class-btn:hover {
    background: rgba(0, 0, 0, 0);
}

/* Add New Class Button */
.add-class-btn {
    background: #4caf50;
    border: none;
    border-radius: 8px;
    padding: 12px 20px;
    color: white;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
}

.add-class-btn:hover {
    background: #45a049;
}
#create-class-modal {
    position: fixed ;
    top: 0;
    left: 0;
    width: 100%;
    height: 100% ;
    background: rgba(0, 0, 0, 0.475);
    z-index: 20000;
    display: none;
    align-items: center;
    justify-content: center;
    color: white;
    
}

#create-class-modal.open {
    display: flex !important;
}

#create-class-modal .teacher-work-modal-content {
    background: rgba(0, 30, 100, 0.553);
    border-radius: 12px;
    padding: 20px;
    max-width: 400px;
    width: 90%;
    border: 1px solid #ffd700;
    position: relative;
}/* For My Students Accordion - starts collapsed */
#class-accordion-container .class-student-list {
    display: none;
    flex-direction: column;
    gap: 8px;
    min-height: auto;
    max-height: 400px;
    overflow-y: auto;
}

#class-accordion-container .class-student-list.expanded {
    display: flex;
}

/* For Class Management Drag-Drop - always visible */
#class-drop-zones .class-student-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 200px;
    max-height: 400px;
    overflow-y: auto;
}

/* Student Card */
.class-student-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 8px;
    transition: all 0.2s;
}

.class-student-card[draggable="true"] {
    cursor: grab;
}

.class-student-card[draggable="true"]:active {
    cursor: grabbing;
}

.class-student-card:hover {
    background: rgba(0, 100, 200, 0.5);
}

.class-student-avatar {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    object-fit: cover;
}

.class-student-name {
    flex: 1;
    font-size: 14px;
    color: white;
}

/* Bulk & Delete Mode Checkboxes */
.bulk-student-checkbox,
.delete-student-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    margin-right: 5px;
}

/* Buttons */
.bulk-assign-btn {
    background: #4caf50;
    border: none;
    color: white;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
}

.bulk-assign-btn.active {
    background: #f44336;
}

.delete-students-btn {
    background: #712d28;
    border: none;
    color: white;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
}

.delete-students-btn.active {
    background: #ff9800;
}

.close-class-mgmt-btn {
    background: #666;
    border: none;
    color: white;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
}

/* Bulk Assign Panel */
.bulk-assign-panel {
    margin-top: 20px;
    padding: 15px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 12px;
    border: 1px solid #ffd700;
}

.bulk-student-list {
    margin: 12px 0;
}

.bulk-assign-controls {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    align-items: center;
}

.bulk-class-select {
    padding: 8px;
    border-radius: 6px;
    background: #1a1a2e;
    color: white;
    border: 1px solid #ffd700;
}

.bulk-cancel-btn {
    background: #666;
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    color: white;
    cursor: pointer;
}

/* Delete Confirm Panel */
.delete-confirm-panel {
    margin-top: 20px;
    padding: 16px;
    background: rgba(80, 30, 30, 0.9);
    border-radius: 8px;
    border: 1px solid #ff6666;
    display: none;
}

.delete-confirm-panel p {
    margin: 8px 0;
    color: #ffaaaa;
}

.delete-confirm-buttons {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

.confirm-delete-btn {
    background: #aa2a2a;
    border: none;
    color: white;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
}

.confirm-delete-btn:hover {
    background: #cc3a3a;
}

.cancel-delete-btn {
    background: #4a4a6a;
    border: none;
    color: white;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
}

/* Class Filter Buttons */
.class-filter-container {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
    
}

.class-filter-btn {
    background: #2a2a3a;
    border: none;
    color: #ccc;
    padding: 6px 12px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 12px;
}

.class-filter-btn.active {
    background: #4a6a8a;
    color: white;
}

/* New Class Input Modal */
.new-class-input {
    width: 100%;
    padding: 12px;
    margin: 16px 0;
    background: #2a2a3a;
    border: 1px solid #4a4a6a;
    border-radius: 6px;
    color: white;
}


/* Students Section */
.students-section {
    display: block;
}
/* ============================================
   FRAMEWORK SELECTOR STYLES
   ============================================ */

.framework-selector-section {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 2px solid rgba(255, 215, 0, 0.3);
}

.framework-header h3 {
    color: #ffd700;
    margin-bottom: 5px;
}

.framework-header p {
    font-size: 13px;
    opacity: 0.7;
    margin-bottom: 20px;
    color: white;
}

.framework-options {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.framework-option {
    cursor: pointer;
    flex: 1;
    min-width: 180px;
}

.framework-option input {
    display: none;
}

.framework-card {
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 15px;
    text-align: center;
    transition: all 0.2s;
    cursor: pointer;
}

.framework-option input:checked + .framework-card {
    border-color: #ffd700;
    background: rgba(255, 215, 0, 0.1);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

.framework-card:hover {
    background: rgba(255, 215, 0, 0.05);
    border-color: rgba(255, 215, 0, 0.5);
}

.framework-icon {
    font-size: 32px;
    display: block;
    margin-bottom: 10px;
}

.framework-info strong {
    display: block;
    color: white;
    font-size: 16px;
}

.framework-info small {
    font-size: 11px;
    opacity: 0.6;
}

.framework-warning {
    background: rgba(255, 0, 0, 0.2);
    border: 1px solid #ff4444;
    border-radius: 8px;
    padding: 12px;
    margin: 15px 0;
    color: #ffaaaa;
    font-size: 13px;
}

.save-framework-btn {
    background: #4a6a8a;
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    color: white;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    transition: background 0.2s;
}

.save-framework-btn:hover {
    background: #5a7a9a;
}

.framework-message {
    margin-top: 10px;
    font-size: 13px;
    padding: 8px;
    border-radius: 6px;
}

.framework-message.success {
    background: rgba(76, 175, 80, 0.2);
    color: #4caf50;
    border: 1px solid #4caf50;
}

.framework-message.error {
    background: rgba(255, 0, 0, 0.2);
    color: #ff6666;
    border: 1px solid #ff6666;
}

/* ============================================
   PASSWORD VERIFY MODAL
   ============================================ */
.password-verify-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 20000;
    display: none;
    justify-content: center;
    align-items: center;
}

.password-verify-content {
    background: linear-gradient(135deg, #1a1a3a 0%, #0f0f2a 100%);
    border-radius: 20px;
    width: 400px;
    max-width: 90%;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 215, 0, 0.3);
    overflow: hidden;
}

.password-verify-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    background: rgba(0, 30, 100, 0.5);
    border-bottom: 1px solid rgba(255, 215, 0, 0.3);
}

.password-verify-header h3 {
    margin: 0;
    color: gold;
    font-size: 1.3rem;
}

.password-verify-close {
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    color: #aaa;
    transition: color 0.2s;
}

.password-verify-close:hover {
    color: white;
}

.password-verify-body {
    padding: 25px;
}

.password-verify-body p {
    color: white;
    margin-bottom: 20px;
    font-size: 14px;
}

.password-verify-input {
    width: 100%;
    padding: 12px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 10px;
    color: white;
    font-size: 16px;
    margin-bottom: 25px;
    box-sizing: border-box;
}

.password-verify-input:focus {
    outline: none;
    border-color: gold;
    background: rgba(255, 255, 255, 0.15);
}

.password-verify-buttons {
    display: flex;
    gap: 15px;
    justify-content: flex-end;
}

.password-verify-cancel {
    padding: 10px 20px;
    background: rgba(100, 100, 130, 0.8);
    border: none;
    border-radius: 8px;
    color: white;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.2s;
}

.password-verify-cancel:hover {
    background: rgba(130, 130, 160, 0.9);
}

.password-verify-confirm {
    padding: 10px 20px;
    background: #4a6a8a;
    border: none;
    border-radius: 8px;
    color: white;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.2s;
}

.password-verify-confirm:hover {
    background: #5a7a9a;
}

/* ============================================
   TEACHER DASHBOARD CONTAINER
   ============================================ */
.teacher-dashboard-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
}


/* Details Panel */
.teacher-details-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 70%;
    max-width: 800px;
    height: 100%;
    background: rgba(10, 20, 50, 0.95);
    backdrop-filter: blur(10px);
    z-index: 2000;
    overflow-y: auto;
    padding: 20px;
    box-shadow: -5px 0 30px rgba(0,0,0,0.5);
    border-left: 1px solid gold;
}

.details-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid gold;
}

.details-header h2 {
    color: gold;
    margin: 0;
}

#close-details-btn {
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
}

#close-details-btn:hover {
    color: gold;
}

/* Tabs */
.teacher-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.tab-btn {
    padding: 10px 20px;
    background: rgba(0, 30, 180, 0.5);
    border: 1px solid rgba(100, 150, 255, 0.5);
    border-radius: 8px;
    cursor: pointer;
    color: white;
    font-size: 14px;
}

.tab-btn.active {
    background: rgba(255, 215, 0, 0.3);
    border-color: gold;
    color: gold;
}

/* Loading and empty states */
.loading, .no-students, .no-data {
    text-align: center;
    padding: 40px;
    color: rgba(255,255,255,0.7);
    font-size: 1.1rem;
}
/* Teacher Profile View */
.teacher-profile-view {
    display: flex;
    gap: 20px;
    padding: 15px;
    background: rgba(0,0,0,0.3);
    border-radius: 10px;
    margin-bottom: 20px;
}

.teacher-profile-avatar img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid gold;
}

.teacher-profile-info h3 {
    color: gold;
    margin: 0 0 10px 0;
}

.teacher-profile-info p {
    margin: 5px 0;
    color: rgba(255,255,255,0.8);
}

.teacher-profile-standards h4,
.teacher-profile-rewards h4,
.teacher-profile-badges h4 {
    color: gold;
    margin: 20px 0 10px 0;
}

.badges-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.badge-item {
    background: rgba(255,215,0,0.2);
    border: 1px solid gold;
    border-radius: 20px;
    padding: 5px 12px;
    font-size: 12px;
}

.total-rewards {
    font-size: 18px;
    color: gold;
}
/* Teacher Quests Tab */
.teacher-quest-item {
    background: rgba(0, 30, 180, 0.3);
    border-radius: 10px;
    margin-bottom: 10px;
    border: 1px solid rgba(100, 150, 255, 0.3);
}

.teacher-quest-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 15px;
    cursor: pointer;
}

.teacher-quest-title {
    font-weight: bold;
    flex: 1;
}

.teacher-quest-status {
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 12px;
    margin: 0 10px;
}

.teacher-quest-status.graded {
    background: rgba(76, 175, 80, 0.3);
    color: #4CAF50;
}

.teacher-quest-status.ungraded {
    background: rgba(255, 152, 0, 0.3);
    color: #FF9800;
}

.teacher-expand-btn {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 16px;
}

.teacher-quest-details {
    padding: 15px;
    border-top: 1px solid rgba(100, 150, 255, 0.3);
}

.teacher-quest-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.2);
}

.teacher-view-work-btn {
    padding: 8px 16px;
    background: rgba(0, 30, 180, 0.5);
    border: 1px solid rgba(100, 150, 255, 0.5);
    border-radius: 5px;
    color: white;
    cursor: pointer;
}

.teacher-view-work-btn:hover {
    background: rgba(0, 30, 180, 0.8);
}
.teacher-delete-quest-btn {
    background: #dc2626;
    border: none;
    border-radius: 6px;
    padding: 6px 12px;
    color: white;
    cursor: pointer;
    font-size: 12px;
    margin-left: 8px;
}

.teacher-delete-quest-btn:hover {
    background: #b91c1c;
}
/* Section headers for student quests list */
.quest-section-header {
    margin-top: 20px;
    margin-bottom: 10px;
}

.quest-section-header h3 {
    color: #ffd700;
    font-size: 16px;
    margin-bottom: 5px;
}

.quest-section-header hr {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, #ffd700, transparent);
    margin: 5px 0 15px 0;
}

/* Active quest status styling */
.teacher-quest-status.active {
    background: #4caf50;
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
}

/* Rubric Table */
.rubric-table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 8px;
}

.rubric-table th,
.rubric-table td {
    padding: 8px;
    text-align: left;
    border: 1px solid rgba(100, 150, 255, 0.3);
}

.rubric-table th {
    background: rgba(0, 30, 180, 0.5);
    color: gold;
}

.teacher-grade-input {
    width: 60px;
    padding: 4px;
    border-radius: 4px;
    border: 1px solid rgba(100, 150, 255, 0.5);
    background: rgba(0, 0, 0, 0.7);
    color: white;
    text-align: center;
}

.teacher-save-grades-btn {
    margin-top: 10px;
    padding: 8px 16px;
    background: rgba(76, 175, 80, 0.5);
    border: 1px solid #4CAF50;
    border-radius: 5px;
    color: white;
    cursor: pointer;
}

.teacher-save-grades-btn:hover {
    background: rgba(76, 175, 80, 0.8);
}
.student-card {
    position: relative;
}

.pending-dot {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 12px;
    height: 12px;
    background-color: #ff4444;
    border-radius: 50%;
    border: 2px solid white;
    z-index: 10;
    box-shadow: 0 0 4px rgba(0,0,0,0.3);
}
.quest-pending-dot {
    display: inline-block;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

.teacher-quest-status.pending {
    color: #ff9800;
    font-weight: bold;
}
/* Teacher Work View Modal */
.teacher-work-close {
    position: absolute;
    top: 12px;
    right: 20px;
    font-size: 28px;
    cursor: pointer;
    color: #aaa;
}
.teacher-work-close:hover { color: #fff; }
.teacher-work-image {
    text-align: center;
    margin: 20px 0;
}
.teacher-work-image img {
    max-width: 100%;
    border-radius: 8px;
}
.teacher-work-details p {
    margin: 8px 0;
}
/* Fix for student modal - must appear above map */
#teacher-work-modal {
    position: fixed;
    top: 0 ;
    left: 0 ;
    width: 100% ;
    height: 100% ;
    background: rgba(0, 0, 0, 0.85) ;
    z-index: 20000 ;
    display: none ;
    align-items: center ;
    justify-content: center ;
}

#teacher-work-modal .quest-box {
    position: relative ;
    z-index: 20001 ;
    background: rgba(56, 69, 23, 0.95) ;
    border: 2px solid rgba(153, 196, 36, 0.8) ;
    border-radius: 12px ;
    max-width: 500px ;
    width: 90% ;
}
/* Teacher Gallery Styles */
.teacher-gallery-item {
    display: flex;
    gap: 16px;
    background: rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 12px;
    align-items: center;
}

.teacher-gallery-thumbnail {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    background: #333;
}

.teacher-gallery-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.teacher-gallery-info {
    flex: 1;
}

.teacher-gallery-title {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 4px;
}

.teacher-gallery-quest {
    font-size: 12px;
    opacity: 0.7;
    margin-bottom: 8px;
}

.teacher-gallery-view-btn {
    background: #4a4a6a;
    border: none;
    color: white;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
}

.teacher-gallery-view-btn:hover {
    background: #6a6a8a;
}
/* =====================Quest Details Panel ===================================================================== */

.quest-profile-view {
    display: flex;
    gap: 20px;
    padding: 15px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    margin-bottom: 20px;
}

.quest-profile-avatar img {
    width: 80px;
    height: 80px;
    border-radius: 10px;
    object-fit: cover;
    border: 2px solid gold;
}

.quest-profile-info h3 {
    color: gold;
    margin: 0 0 10px 0;
}

.quest-profile-info p {
    margin: 5px 0;
    color: rgba(255, 255, 255, 0.8);
}

.quest-requirements-section,
.quest-rubric-section,
.quest-rationale-section {
    margin-bottom: 20px;
}
.quest-rationale-section p {
    color: white;
    line-height: 1.5;
}

.quest-rationale-section h2,
.quest-rationale-section h3 {
    color: gold;
    margin-top: 15px;
    margin-bottom: 10px;
}

.quest-rationale-section ul,
.quest-rationale-section ol {
    margin: 10px 0;
    padding-left: 20px;
}

.quest-rationale-section li {
    margin: 5px 0;
}

.quest-requirements-section h4,
.quest-rubric-section h4,
.quest-rationale-section h4 {
    color: gold;
    margin-bottom: 10px;
}

.quest-requirements-section ul {
    margin: 0;
    padding-left: 20px;
    color: white;
}

.quest-requirements-section li {
    margin: 5px 0;
}

/* Prerequisites/Leads To layout */
.prerequisites-container {
    display: flex;
    gap: 30px;
    padding: 15px;
}

.prerequisites-column,
.leads-to-column {
    flex: 1;
}

.prerequisites-column h4,
.leads-to-column h4 {
    color: gold;
    margin-bottom: 15px;
}

.prerequisites-list,
.leads-to-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.prerequisite-link,
.leads-to-link {
    display: block;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    color: white;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
}

.prerequisite-link:hover,
.leads-to-link:hover {
    background: rgba(0, 100, 200, 0.5);
    transform: translateX(5px);
}

/* Active/Completed Students lists */
.quest-students-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 15px;
}

.active-students-section h4,
.completed-students-section h4 {
    color: gold;
    margin-bottom: 15px;
}

.active-students-list,
.completed-students-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 200px;
    overflow-y: auto;
}

.quest-student-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.quest-student-card:hover {
    background: rgba(0, 100, 200, 0.5);
    transform: translateX(5px);
}

.quest-student-card img {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    object-fit: cover;
}

.quest-student-name {
    flex: 1;
    color: white;
    font-size: 14px;
}

/* ----------------------------------Standards Selection Styles------------------------------------------------- */
.standards-selection-container {
    padding: 20px;
}

.standards-info {
    background: rgba(0, 0, 0, 0.3);
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 14px;
    color: #ffd700;
}

.standards-checkbox-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 400px;
    overflow-y: auto;
    margin-bottom: 20px;
}

.standard-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.standard-checkbox:hover {
    background: rgba(0, 100, 200, 0.3);
}

.standard-checkbox input {
    margin-top: 2px;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.standard-checkbox .standard-code {
    font-weight: bold;
    min-width: 140px;
    color: #ffd700;
}

.standard-checkbox .standard-description {
    font-size: 13px;
    color: #ccc;
}

.standards-actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.teacher-reset-standards-btn {
    background: #666;
    border: none;
    border-radius: 6px;
    padding: 10px 20px;
    color: white;
    cursor: pointer;
    font-size: 14px;
}

.teacher-reset-standards-btn:hover {
    background: #888;
}
/* Standards Selection Table */
.standards-selection-table {
    margin-bottom: 20px;
}

.standards-selection-table th {
    background: rgba(0, 0, 0, 0.4);
}

.standards-selection-table td {
    vertical-align: middle;
}

.standard-select-checkbox {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.standard-code-cell {
    font-weight: bold;
    color: #ffd700;
    min-width: 180px;
}

.standard-select-row {
    transition: all 0.2s ease;
}

.standard-select-row:hover {
    background: rgba(0, 100, 200, 0.3) !important;
    opacity: 1 !important;
}
/* Export button styling (additional) */
.export-btn {
    background: #4a6a8a;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    color: white;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.2s;
}

.export-btn:hover {
    background: #5a7a9a;
}

.export-btn:active {
    transform: scale(0.98);
}
.analytics-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.analytics-header-buttons {
    display: flex;
    gap: 10px;
}
/* Style for quest details panel close button */
#close-quest-details-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 24px;
    font-weight: bold;
    color: #ffffff;
    cursor: pointer;
    background: none;
    border: none;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
    z-index: 10;
}

#close-quest-details-btn:hover {
    color: #ffd700;
}
/* ==============================================================================================================
                                         END OF QUEST TAB STYLES
   ============================================================================================================== */
/* ==============================================================================================================
                                         PRINT PROFILE FUNCTIONALITY
   ============================================================================================================== */

   /* Print Profile Button */
.print-profile-btn {
    background: #4a6a8a;
    border: none;
    border-radius: 8px;
    padding: 6px 12px;
    color: white;
    cursor: pointer;
    font-size: 13px;
    margin-right: 10px;
}

.print-profile-btn:hover {
    background: #5a7a9a;
}
/*--------------------------------Print Styles for PDF/Print------------------------------------------------------*/
@media print {
    /* Hide non-printable elements */
    .teacher-header,
    .teacher-main-tabs,
    .details-header button,
    .print-profile-btn,
    .export-btn,
    .close-btn,
    .teacher-tabs,
    .analytics-filter,
    .analytics-cards,
    .analytics-pagination,
    .table-container button,
    #student-details-panel .details-header button:not(.no-print) {
        display: none !important;
    }

    /* Force background colors to print - but don't bold everything */
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    
    /* Highlight styles - only these get bold */
    .highlight {
        background-color: #ffff99 !important;
        font-weight: bold !important;
    }
    
    /* Ensure body has white background */
    body {
        background: white !important;
        color: black !important;
    }

    /* Keep student details panel visible during print */
    #student-details-panel {
        display: block !important;
        position: relative !important;
        background: white !important;
        color: black !important;
        padding: 20px !important;
        box-shadow: none !important;
    }

    /* Table styles for print */
    .rubric-table,
    #teacher-standards-table,
    .badge-container {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 20px;
    }

    .rubric-table th,
    .rubric-table td,
    #teacher-standards-table th,
    #teacher-standards-table td {
        border: 1px solid #ccc !important;
        padding: 8px !important;
        text-align: left;
    }

    .rubric-table th,
    #teacher-standards-table th {
        background: #f0f0f0 !important;
        color: black !important;
    }
    
    /* Remove bold from all table cells by default */
    .rubric-table td,
    #teacher-standards-table td {
        font-weight: normal !important;
    }

    /* Keep badge images visible */
    .badge-container img {
        max-width: 60px;
        max-height: 60px;
    }

    /* Page breaks - avoid breaking inside tables */
    table {
        page-break-inside: avoid;
    }

    /* Quest sections */
    .quest-section {
        page-break-inside: avoid;
        margin-bottom: 30px;
        break-inside: avoid;
    }

    /* MVP quest styling */
    .quest-section.mvp {
        border-left: 4px solid #333;
        padding-left: 10px;
    }

    /* Student header */
    .print-student-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        border-bottom: 2px solid #333;
        padding-bottom: 10px;
    }

    .print-student-avatar img {
        width: 80px;
        height: 80px;
        border-radius: 0 !important;
        object-fit: contain;
    }

    /* Badge grid for print */
    .badge-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        margin-top: 10px;
    }

    .badge-item {
        text-align: center;
        width: 80px;
    }

    .badge-item img {
        width: 60px;
        height: 60px;
    }

    .badge-item .badge-name {
        font-size: 10px;
        margin-top: 5px;
        color: black;
    }
    
    /* Unearned badges */
    .badge-item.unearned img {
        opacity: 0.3 !important;
        filter: grayscale(100%) !important;
    }

    .badge-item.unearned .badge-name {
        color: #999 !important;
    }
}
/* ==============================================================================================================
                                         END OF PRINTING STYLES
   ============================================================================================================== */
/* ==============================================================================================================
                                         ASSIGNMENTS TARGET SETTINGS
   ============================================================================================================== */


/* Class Settings Section */
.class-settings-section {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 2px solid rgba(255, 215, 0, 0.3);
    color: white;
}

.class-settings-header h3 {
    color: #ffd700;
    margin-bottom: 5px;
}

.class-settings-header p {
    font-size: 13px;
    opacity: 0.7;
    margin-bottom: 20px;
}

.class-settings-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.class-settings-table th,
.class-settings-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.class-settings-table th {
    background: rgba(0, 0, 0, 0.3);
    color: #ffd700;
}

.class-settings-table input {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 6px;
    padding: 8px;
    color: white;
    width: 100px;
}

.class-settings-table input:focus {
    outline: none;
    border-color: #ffd700;
}

.save-settings-btn {
    background: #4a6a8a;
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    color: white;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
}

.save-settings-btn:hover {
    background: #5a7a9a;
}

.settings-message {
    margin-top: 10px;
    padding: 8px;
    border-radius: 6px;
    font-size: 13px;
}

.settings-message.success {
    background: rgba(76, 175, 80, 0.2);
    color: #4caf50;
    border: 1px solid #4caf50;
}

.settings-message.error {
    background: rgba(255, 0, 0, 0.2);
    color: #ff6666;
    border: 1px solid #ff6666;
}
/* ==============================================================================================================
                                         END OF ASSIGNMENTS TARGET SETTINGS
   ============================================================================================================== */
/* ==============================================================================================================
                                   TEACHER DASHBOARD STUDENT PROFILE SET UP
   ============================================================================================================== */
/* Add Student Modal */
.add-student-table-container {
    max-height: 400px;
    overflow-y: auto;
    margin: 15px 0;
}

.add-student-table {
    width: 100%;
    border-collapse: collapse;
}

.add-student-table th,
.add-student-table td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.add-student-table th {
    background: rgba(0, 0, 0, 0.3);
    color: #ffd700;
}

.add-student-table input,
.add-student-table select {
    width: 100%;
    padding: 6px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 4px;
    color: white;
}

.add-student-table input:focus,
.add-student-table select:focus {
    outline: none;
    border-color: #ffd700;
}

.add-student-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
    gap: 10px;
}

.add-student-btn-row {
    background: #4a6a8a;
    border: none;
    border-radius: 6px;
    padding: 6px 12px;
    color: white;
    cursor: pointer;
    font-size: 12px;
}

.add-student-btn-row:hover {
    background: #5a7a9a;
}

.submit-students-btn {
    background: #4caf50;
    border: none;
    border-radius: 6px;
    padding: 10px 20px;
    color: white;
    cursor: pointer;
    font-size: 14px;
}

.submit-students-btn:hover {
    background: #45a049;
}

.default-password-info {
    background: rgba(0, 0, 0, 0.3);
    padding: 8px;
    border-radius: 6px;
    font-size: 12px;
    margin-bottom: 10px;
    color: #ffd700;
}
.invite-student-btn {
    background: #2196f3;
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    color: white;
    cursor: pointer;
    font-size: 14px;
}

.invite-student-btn:hover {
    background: #1976d2;
}
/*Teacher class code in Class management*/
.teacher-code-display {
    font-size: 13px;
    margin-top: 8px;
    padding: 6px 12px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

#teacher-class-code {
    font-family: monospace;
    font-size: 16px;
    letter-spacing: 1px;
    font-weight: bold;
    color: #ffd700;
}

.class-code-hidden {
    filter: blur(4px);
    background: rgba(0, 0, 0, 0.2);
    padding: 0 8px;
    border-radius: 4px;
}

.class-code-visible {
    filter: blur(0);
}

.toggle-code-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    padding: 2px 6px;
    border-radius: 4px;
    transition: all 0.2s;
}

.toggle-code-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* ==============================================================================================================
                                   END OF TEACHER DASHBOARD STUDENT PROFILE SET UP
   ============================================================================================================== */
/* ==============================================================================================================
                                   CUSTOM QUEST IDENTIFIERS (Teacher Dashboard) SET UP
   ============================================================================================================== */

/* Custom quest item in quest list */
.custom-quest-item {
    background: rgba(42, 109, 44, 0.395);
}
.quest-link-item.custom-quest-item {
    padding: 0px 15px;  /* Reduced from 10px to 6px */
}

.custom-quest-item:hover {
    background: rgba(22, 70, 23, 0.61);
}

/* Custom quest badge */
.custom-quest-badge {
    background: #4caf50;
    color: white;
    font-size: 10px;
    border-radius: 12px;
    margin-left: 8px;
}
/* Create Custom Quest Button */
.create-custom-quest-btn {
    background: #4caf50;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    color: white;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
}

.create-custom-quest-btn:hover {
    background: #45a049;
}
.delete-custom-quest-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    padding: 0;
    margin-left: 8px;
    width: 20px;
    height: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s;
}

/* Custom Quest Hotspot */
.custom-quest-hotspot {
    position: absolute !important;
    transform: translate(-50%, -50%) !important;
    cursor: pointer !important;
    width: 4% !important;
    height: auto !important;
    min-height: 10px !important;
    aspect-ratio: 12 / 1 !important;
    background: rgba(76, 175, 80, 0.7) !important;
    border-radius: 0 !important;
    transition: all 0.2s ease !important;
    z-index: 100 !important;
    animation: customGlow 0.5s infinite alternate !important;
}
/* Glow animation for custom quest hotspots */
@keyframes customGlow {
    from {
        box-shadow: 0 0 5px rgba(76, 175, 80, 0.5),
                    0 0 10px rgba(76, 175, 80, 0.3);
    }
    to {
        box-shadow: 0 0 15px rgba(76, 175, 80, 1),
                    0 0 30px rgba(76, 175, 80, 0.7);
    }
}

@keyframes customGlowHover {
    from {
        box-shadow: 0 0 10px rgba(76, 175, 80, 0.8),
                    0 0 20px rgba(76, 175, 80, 0.5);
    }
    to {
        box-shadow: 0 0 25px rgba(76, 175, 80, 1),
                    0 0 50px rgba(76, 175, 80, 0.9);
    }
}

/* Custom Quest Badge in Quest List */
.custom-quest-badge {
    background: #4caf5700;
    color: rgb(94, 238, 145);
    font-size: 12px;
    border-radius: 10px;
    margin-left: 8px;
    padding: 2px 6px;
    display: inline-block;
    white-space: nowrap;
    line-height: 1.1;
}
/* Create Custom Quest Modal */
.custom-quest-modal .teacher-work-modal-content {
    max-width: 800px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
}

.custom-quest-modal .form-section {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.custom-quest-modal .form-section h4 {
    color: #ffd700;
    margin-bottom: 10px;
}

.custom-quest-modal label {
    display: block;
    margin-bottom: 5px;
    font-size: 13px;
}

.custom-quest-input,
.custom-quest-select,
.custom-quest-textarea {
    width: 100%;
    padding: 8px;
    margin-bottom: 15px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 4px;
    color: white;
}

.requirement-item,
.link-item {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.requirement-input {
    flex: 1;
    padding: 6px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 4px;
    color: white;
}

.link-type {
    width: 30%;
    padding: 6px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 4px;
    color: white;
}

.link-url {
    flex: 1;
    padding: 6px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 4px;
    color: white;
}

.remove-requirement-btn,
.remove-link-btn {
    background: #8a4a4a;
    border: none;
    border-radius: 4px;
    color: white;
    padding: 6px 12px;
    cursor: pointer;
}

.add-item-btn {
    background: #4a6a8a;
    border: none;
    border-radius: 4px;
    color: white;
    padding: 6px 12px;
    cursor: pointer;
    margin-top: 5px;
}

.form-note {
    font-size: 12px;
    opacity: 0.7;
    margin-bottom: 10px;
}

.rubric-preview-placeholder {
    background: rgba(0, 0, 0, 0.2);
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    color: #aaa;
}

.form-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 20px;
}

.cancel-custom-quest-btn {
    background: #666;
    border: none;
    border-radius: 6px;
    padding: 10px 20px;
    color: white;
    cursor: pointer;
}

.save-custom-quest-btn {
    background: #4caf50;
    border: none;
    border-radius: 6px;
    padding: 10px 20px;
    color: white;
    cursor: pointer;
}

.save-custom-quest-btn:hover {
    background: #45a049;
}
/* ================================================================================================================
                            END OF CUSTOM QUEST IDENTIFIERS (Teacher Dashboard) SET UP
   ============================================================================================================== */
/* ================================================================================================================
                                        CUSTOM QUEST GREEN THEME (Dark Forest)
   ============================================================================================================== */

/* Main quest box */
#quest-box.custom-quest {
    background-color: rgba(18, 53, 36, 0.4) !important;
    border: 2px solid #2e7d64 !important;
    box-shadow: 0 0 20px rgba(46, 125, 100, 0.3) !important;
}

/* Quest cells */
#quest-box.custom-quest .quest-cell {
    background-color: rgba(18, 53, 36, 0.5) !important;
    border: 2px solid rgba(46, 125, 100, 0.7) !important;
    color: #ffffff !important;
}

/* Hover effect for green theme */
#quest-box.custom-quest .quest-cell:hover {
    border-color: #3a9b7a !important;
    box-shadow: 0 0 10px rgba(46, 125, 100, 0.5) !important;
}

#quest-box.custom-quest #quest-accept:hover {
    background-color: #3a9b7a !important;
}

/* Timer display */
#quest-box.custom-quest .timer-display {
    background-color: rgba(18, 53, 36, 0.6) !important;
    border: 1px solid #2e7d64 !important;
    color: #ffffff !important;
}

/* Links */
#quest-box.custom-quest #quest-links a {
    color: #ffffff !important;
}

#quest-box.custom-quest #quest-links a:hover {
    color: #8ad4b0 !important;
}

/* Rubric link */
#quest-box.custom-quest #quest-rubric a {
    color: #ffffff !important;
}

#quest-box.custom-quest #quest-rubric a:hover {
    color: #8ad4b0 !important;
}

/* Rationale link */
#quest-box.custom-quest #quest-rationale a {
    color: #ffffff !important;
}

#quest-box.custom-quest #quest-rationale a:hover {
    color: #8ad4b0 !important;
}

/* Prerequisites links */
#quest-box.custom-quest #quest-prereq-leads-prereq a {
    color: #ffffff !important;
}

#quest-box.custom-quest #quest-prereq-leads-prereq a:hover {
    color: #8ad4b0 !important;
}

/* Leads to links */
#quest-box.custom-quest #quest-prereq-leads-to a {
    color: #ffffff !important;
}

#quest-box.custom-quest #quest-prereq-leads-to a:hover {
    color: #8ad4b0 !important;
}

/* Finished work button */
#quest-box.custom-quest #finished-work-btn {
    color: #ffffff!important;
}

#quest-box.custom-quest #finished-work-btn:hover {
    color: #8ad4b0 !important;
}

/* Reward */
#quest-box.custom-quest #quest-reward strong {
    color: #ffffff !important;
}

/* Tab buttons in quest overlay */
#quest-box.custom-quest .tab-button {
    background-color: rgba(18, 53, 36, 0.5) !important;
    border-color: #2e7d64 !important;
    color: #e0e0e0 !important;
}

#quest-box.custom-quest .tab-button.active {
    background-color: #2e7d64 !important;
    border-color: #6abf96 !important;
}

/* Close button */
#quest-box.custom-quest #close-quest {
    color: #ffffff !important;
}

#quest-box.custom-quest #close-quest:hover {
    color: #8ad4b0 !important;
}

/* MVP quest cells override (keep green but subtle) */
#quest-box.custom-quest.mvp .quest-cell {
    background-color: rgba(18, 53, 36, 0.6) !important;
    border: 2px solid rgba(46, 125, 100, 0.8) !important;
}

#quest-box.custom-quest.mvp .quest-cell:hover {
    border-color: #6abf96 !important;
}
/* Custon quest standard selection table visuals----------------------------------------*/
/* Ensure the standards selection table displays properly */
.standards-checkbox-list {
    display: block !important;
    width: 100%;
    overflow-x: auto;
}

.standards-selection-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.standards-selection-table th,
.standards-selection-table td {
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 10px;
    vertical-align: top;
}

.standards-selection-table th {
    background: rgba(0, 0, 0, 0.3);
    color: #ffd700;
    font-weight: bold;
}

.standards-selection-table input[type="text"] {
    width: 100%;
    min-width: 150px;
    padding: 8px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 4px;
    color: white;
    font-size: 12px;
}

.standards-selection-table input[type="text"]:focus {
    outline: none;
    border-color: #ffd700;
}

.standards-selection-table input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.standard-select-row {
    transition: all 0.2s ease;
}

.standard-select-row:hover {
    background: rgba(255, 215, 0, 0.1);
}

.standard-code-cell {
    font-weight: bold;
    min-width: 180px;
}

.grade-level-input {
    width: 100%;
}
/* ================================================================================================================
                            END OF CUSTOM QUEST GREEN THEME (Dark Forest)
   ============================================================================================================== */
/* ================================================================================================================
                                           TIMER SELECTION VISUALS
   ============================================================================================================== */
/* Timer Settings Section */
.timer-settings-section {
    margin-bottom: 20px;
    padding: 15px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    border: 1px solid rgba(255, 215, 0, 0.2);
}

.timer-settings-section h4 {
    color: #ffd700;
    margin-bottom: 10px;
    font-size: 16px;
}

.timer-settings-section label {
    color: #ffffff;
}

.timer-settings-section select,
.timer-settings-section input {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 4px;
    color: white;
    padding: 6px 10px;
}

.timer-settings-section select:focus,
.timer-settings-section input:focus {
    outline: none;
    border-color: #ffd700;
}

.timer-option {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.timer-info-text {
    font-size: 12px;
    opacity: 0.7;
    margin-top: 8px;
    color: #cccccc;
}

/* Separate timer section from standards table */
.standards-checkbox-list {
    margin-top: 10px;
}
   /* ================================================================================================================
                                        END OF TIMER SELECTION VISUALS
   ============================================================================================================== */
   /* ================================================================================================================
                                            SCHEDULE TAB STYLES
   ============================================================================================================== */

.schedule-section {
    padding: 20px;
    color: white;
}

.schedule-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.schedule-header h2 {
    margin: 0;
    color: #ffd700;
}

.import-ics-btn {
    background: #4a6a8a;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    color: white;
    cursor: pointer;
}

.import-ics-btn:hover {
    background: #5a7a9a;
}

/* Class Selector */
.schedule-class-selector {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.schedule-class-selector label {
    font-weight: bold;
    color: #ffd700;
}

.schedule-class-selector select {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 8px;
    padding: 8px 16px;
    color: white;
    cursor: pointer;
}

/* Global Settings */
.global-settings-section {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    padding: 20px;
}

.global-settings-section h3 {
    color: #ffd700;
    margin-bottom: 15px;
}

.settings-group {
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.settings-group h4 {
    color: #ffd700;
    margin-bottom: 10px;
    font-size: 16px;
}

.settings-group label {
    display: block;
    margin: 8px 0;
}

.day-checkboxes {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    margin: 10px 0;
}

.day-checkboxes label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.settings-apply {
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.save-schedule-btn {
    background: #4caf50;
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    color: white;
    cursor: pointer;
}

.save-schedule-btn:hover {
    background: #45a049;
}

.reset-schedule-btn {
    background: #d2881a;
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    color: white;
    cursor: pointer;
}

.reset-schedule-btn:hover {
    background: #f57c00;
}

/* Responsive */
@media (max-width: 768px) {
    .calendar-day {
        min-height: 60px;
        font-size: 12px;
    }
    
    .no-class-form {
        flex-direction: column;
    }
    
    .form-row {
        width: 100%;
    }
    
    .form-row input {
        width: 100%;
    }
}
/* Selected Class Indicator */
.selected-class-indicator {
    background: rgba(255, 215, 0, 0.15);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 8px;
    padding: 10px 15px;
    margin-bottom: 20px;
    text-align: center;
    color: #ffd700;
}

.selected-class-indicator strong {
    color: #ffd700;
}
/* No-Class Tabs */
.no-class-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 10px;
}

.no-class-tab {
    background: none;
    border: none;
    padding: 8px 16px;
    color: #ccc;
    cursor: pointer;
    font-size: 14px;
    border-radius: 6px;
    transition: all 0.2s;
}

.no-class-tab.active {
    background: #4a6a8a;
    color: #ffd700;
}

.no-class-tab:hover:not(.active) {
    background: rgba(74, 106, 138, 0.5);
}
.remove-range-btn {
    background: #712d28;
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    color: white;
    cursor: pointer;
}

.remove-range-btn:hover {
    background: #bf3c3c;
}

.remove-range-section {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.remove-range-section h4 {
    color: #ffd700;
    margin-bottom: 10px;
    font-size: 14px;
}
   /* ================================================================================================================
                                           END OF SCHEDULE TAB STYLES
   ============================================================================================================== */
   /* ================================================================================================================
                                           STUDENT'S CALENDAR MODAL
   ============================================================================================================== */

/* Calendar Button - same style as achievements button */
.calendar-btn {
    position: fixed;
    bottom: 85px;  /* Position above the achievements button */
    right: 20px;
    padding: 14px 18px;
    font-size: 16px;
    border-radius: 12px;
    background: rgba(0, 30, 180, 0.3);
    color: white;
    cursor: pointer;
    z-index: 1000;
    border: none;
    transition: background 0.2s;
}

.calendar-btn:hover {
    background: rgba(0, 50, 220, 0.5);
}
.calendar-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    
}

.calendar-nav-btn {
    background: #061627;
    border: none;
    border-radius: 4px;
    padding: 4px 8px;
    color: white;
    cursor: pointer;
    
}
#calendar-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.434);  /* Darker background */
    justify-content: center;
    align-items: center;
    z-index: 9999;
    padding: 20px;
        color: rgb(192, 192, 192);

}

/* Quest Active Period (light blue) */
.calendar-day.quest-active {
    background: rgba(0, 150, 255, 0.2);
}

/* Quest Due Date (darker blue) */
.calendar-day.quest-due {
    background: rgba(0, 150, 255, 0.5);
    position: relative;
}

/* Completed Quest Period (gray) */
.calendar-day.quest-completed {
    background: rgba(100, 100, 100, 0.3);
}

/* Completed checkmark */
.calendar-day.completed-on-time::after {
    content: "✅";
    position: absolute;
    bottom: 2px;
    right: 2px;
    font-size: 10px;
}

.calendar-day.completed-late::after {
    content: "⚠️";
    position: absolute;
    bottom: 2px;
    right: 2px;
    font-size: 10px;
}

/* Quest name on calendar */
.calendar-quest-name {
    font-size: 9px;
    margin-top: 4px;
    color: #ffd700;
    cursor: pointer;
    text-decoration: underline;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.calendar-quest-name:hover {
    color: #ffaa00;
}
.calendar-container {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    padding: 10px;
    margin-bottom: 30px;
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.calendar-nav-btn {
    background: #4a6a8a;
    border: none;
    border-radius: 6px;
    padding: 6px 12px;
    color: white;
    cursor: pointer;
}

.calendar-nav-btn:hover {
    background: #5a7a9a;
}

.calendar-month-year {
    color: #ffd700;
    font-size: 16px;
}

.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    margin-bottom: 10px;
    font-weight: bold;
}

.calendar-weekday {
    padding: 5px;
    color: #ccc;
    font-size: 11px;
}

.calendar-weekday.weekend {
    color: #66bb6a;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.calendar-day {
    min-height: 60px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    padding: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.calendar-day:hover {
    background: rgba(0, 100, 200, 0.4);
    transform: scale(1.02);
    cursor: pointer;
}

.calendar-day.weekend {
    background: rgba(82, 143, 82, 0.518);
    border: 1px solid rgba(100, 200, 100, 0.3);
}

.calendar-day.no-class {
    background: rgba(255, 0, 0, 0.094);
    border: 1px solid rgba(255, 0, 0, 0.137);
}
/* No-class day hover - stays red but brighter */
.calendar-day.no-class:hover {
    background: rgba(255, 0, 0, 0.119) !important;
}

.calendar-day.no-class .calendar-day-number {
    color: #ff8888 !important;
}

.calendar-day-number {
    font-weight: bold;
    margin-bottom: 5px;
}

.calendar-day-reason {
    font-size: 10px;
    color: #ff8888;
    word-wrap: break-word;
}
/* Calendar day with notes (green highlight) */
.calendar-day.has-notes {
    background: rgba(76, 175, 80, 0.15);
    border: 1px solid rgba(76, 175, 80, 0.3);
}

.calendar-day.has-notes:hover {
    background: rgba(76, 175, 80, 0.25);
}

.calendar-day-notes {
    font-size: 10px;
    color: #81c784;
    margin-top: 4px;
    word-wrap: break-word;
    font-style: italic;
}

/* No-class day with notes */
.calendar-day.no-class.has-notes {
    background: rgba(255, 0, 0, 0.15);
    border: 1px solid rgba(255, 0, 0, 0.3);
}

.calendar-day.no-class.has-notes .calendar-day-notes {
    color: #ff8888;
}
/* Completed quest period - gray background */
.calendar-day.quest-completed {
    background: rgba(100, 100, 100, 0.3);
}

.calendar-day.quest-completed:hover {
    background: rgba(100, 100, 100, 0.5);
}

/* Green checkmark for completion date */
.calendar-completed-check {
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 12px;
    filter: drop-shadow(0 0 1px rgba(0,0,0,0.5));
    background: none;
    z-index: 2;
}

/* Make sure calendar-day has relative positioning */
.calendar-day {
    position: relative;
    min-height: 80px;
    padding: 4px;
}

/* Calendar tooltip*/
.calendar-tooltip {
    position: fixed;
    background: rgba(0, 0, 0, 0.95);
    color: #ffd700;
    padding: 10px 15px;
    border-radius: 8px;
    font-size: 12px;
    z-index: 10000;
    pointer-events: none;
    white-space: pre-line;
    max-width: 300px;
    border: 1px solid rgba(255, 215, 0, 0.5);
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    display: none;
}
/* Add No-Class Panel */
.add-no-class-panel {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 30px;
}

.add-no-class-panel h3 {
    color: #ffd700;
    margin-bottom: 15px;
}

.no-class-form {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    align-items: flex-end;
}

.form-row {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.form-row label {
    font-size: 12px;
    opacity: 0.8;
}

.form-row input[type="date"],
.form-row input[type="text"] {
    padding: 8px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 6px;
    color: white;
}

.add-no-class-btn {
    background: #712d28;
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    color: white;
    cursor: pointer;
}

.add-no-class-btn:hover {
    background: #d32f2f;
}

   /* ================================================================================================================
                                          END OF  STUDENT'S CALENDAR MODAL
   ============================================================================================================== */


   /* Quest dates styling */
.teacher-quest-dates {
    font-size: 11px;
    color: #aaa;
    margin: 5px 0;
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.quest-date {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ==============================================
   TEACHER: CREATE CONTEST OVERLAY
   ============================================== */

#create-contest-overlay .form-group label {
    font-size: 13px;
}

#create-contest-overlay .auth-input {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 6px;
    padding: 10px;
    color: white;
    font-family: inherit;
}

#create-contest-overlay .auth-input:focus {
    outline: none;
    border-color: #ffd700;
}

#create-contest-overlay .auth-input[type="datetime-local"] {
    color-scheme: dark;
}

#create-contest-overlay textarea {
    resize: vertical;
}

#create-contest-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    display: none;
}

#create-contest-overlay .quest-box {
    position: relative;
    margin: 0 auto;
    max-width: 600px;
    width: 90%;
    max-height: 85vh;
    overflow-y: auto;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 12px;
    border: 1px solid rgba(255, 215, 0, 0.3);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

/* ==============================================
   TEACHER: CONTEST MANAGEMENT OVERLAY (BLUE THEME)
   ============================================== */

.teacher-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
    display: flex;
    justify-content: flex-end;
}

.teacher-profile-panel {
    width: 70%;
    max-width: 900px;
    height: 100%;
    background: rgba(17, 26, 73, 1);
    box-shadow: -5px 0 25px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(255, 215, 0, 0.3);
}

.panel-header h2 {
    color: #ffd700;
    margin: 0;
}

.close-panel-btn {
    background: none;
    border: none;
    color: #ffffff;
    font-size: 28px;
    cursor: pointer;
    transition: all 0.2s;
}

.close-panel-btn:hover {
    color: #ffd700;
}

/* Teacher Contest Tabs */
.teacher-tabs {
    display: flex;
    gap: 5px;
    padding: 15px 25px 0 25px;
    background: rgba(17, 26, 73, 1);
}

.tab-btn {
    background: rgba(0, 0, 0, 0.3);
    border: none;
    padding: 10px 20px;
    color: #ccc;
    cursor: pointer;
    border-radius: 8px 8px 0 0;
    transition: all 0.2s;
}

.tab-btn.active {
    background: rgba(255, 215, 0, 0.2);
    color: #ffd700;
}

.tab-badge {
    color: white;
    border-radius: 10px;
    padding: 2px 6px;
    font-size: 10px;
    margin-left: 5px;
}

/* Teacher Contest Tab Content */
.contest-tab-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px 25px;
}

/* Teacher Contest Profile */
.contest-info-section {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.contest-info-title {
    color: #ffd700;
    font-size: 18px;
    margin-bottom: 15px;
    padding-left: 10px;
}

.contest-info-row {
    display: flex;
    margin-bottom: 12px;
}

.contest-info-label {
    width: 140px;
    color: #aaa;
    font-weight: bold;
}

.contest-info-value {
    color: white;
    flex: 1;
}
/* Contest Info Profile - teacher dashboard */
.contest-info-section {
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
}

.contest-info-title {
    color: #ffd700;
    font-size: 18px;
    margin-bottom: 15px;
    padding-left: 10px;
}

.contest-info-row {
    display: flex;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.contest-info-label {
    width: 140px;
    color: #aaa;
    font-weight: bold;
}

.contest-info-value {
    color: white;
    flex: 1;
}
/* Contest Action Buttons (hide/delete contest - Teacher Side */
.contest-action-btn {
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    border: none;
    transition: all 0.3s ease;
    width: 100%;
}

.delete-btn {
    background: rgba(244, 67, 54, 0.2);
    border: 1px solid #f44336;
    color: #ff8888;
}

.delete-btn:hover {
    background: rgba(244, 67, 54, 0.4);
    transform: scale(1.02);
}

.hide-btn {
    background: rgba(255, 152, 0, 0.2);
    border: 1px solid #ff9800;
    color: #ffa726;
}

.hide-btn:hover {
    background: rgba(255, 152, 0, 0.4);
    transform: scale(1.02);
}

.unhide-btn {
    background: rgba(76, 175, 80, 0.2);
    border: 1px solid #4caf50;
    color: #81c784;
}

.unhide-btn:hover {
    background: rgba(76, 175, 80, 0.4);
    transform: scale(1.02);
}
/*Edit contest button*/
.edit-btn {
    background: rgba(33, 150, 243, 0.3);
    border: 1px solid #2196f3;
    color: #64b5f6;
}

.edit-btn:hover {
    background: rgba(33, 150, 243, 0.5);
}
/* Edit Contest Modal */
#edit-contest-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 20000;
    align-items: center;
    justify-content: center;
}

#edit-contest-modal .teacher-work-modal-content {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 12px;
    padding: 25px;
    max-width: 500px;
    width: 90%;
    border: 1px solid #ffd700;
    position: relative;
    max-height: 85vh;
    overflow-y: auto;
}

#edit-contest-modal .teacher-work-close {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 24px;
    cursor: pointer;
    color: white;
}

#edit-contest-modal .teacher-work-close:hover {
    color: #ffd700;
}

#edit-contest-modal .auth-input {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 6px;
    padding: 10px;
    color: white;
    width: 100%;
}

#edit-contest-modal .auth-input:focus {
    outline: none;
    border-color: #ffd700;
}
/* Teacher Submissions Grid */
.contest-submissions-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.contest-submission-card {
    display: flex;
    gap: 16px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 12px;
    align-items: center;
}

.contest-submission-card:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateX(5px);
}

.submission-thumbnail {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    background: #333;
}

.submission-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.submission-info {
    flex: 1;
}

.submission-title {
    font-weight: bold;
    font-size: 16px;
    color: white;
    margin-bottom: 4px;
}

.submission-student {
    font-size: 12px;
    opacity: 0.7;
    color: #ccc;
    margin-bottom: 8px;
}

.submission-description {
    font-size: 12px;
    color: #aaa;
    margin-bottom: 8px;
    line-height: 1.4;
}

.submission-actions {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}

.view-details-btn {
    background: #4a4a6a;
    border: none;
    color: white;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    width: auto;
}

.view-details-btn:hover {
    background: #6a6a8a;
}

/* Accept/Decline buttons for contest submissions */
.accept-btn {
    background: rgba(76, 175, 80, 0.3);
    border: 1px solid #4caf50;
    color: #81c784;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.accept-btn:hover {
    background: rgba(76, 175, 80, 0.6);
    transform: scale(1.02);
}

.decline-btn {
    background: rgba(244, 67, 54, 0.3);
    border: 1px solid #f44336;
    color: #ff8888;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.decline-btn:hover {
    background: rgba(244, 67, 54, 0.6);
    transform: scale(1.02);
}
/* ==============================================
   TEACHER: REJECT MODAL
   ============================================== */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 2100;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background: #1a1a2e;
    border-radius: 12px;
    padding: 25px;
    max-width: 450px;
    width: 90%;
    border: 1px solid #ffd700;
}

.modal-content h3 {
    color: #ffd700;
    margin-bottom: 15px;
}

.modal-content textarea {
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 6px;
    padding: 10px;
    color: white;
    margin-bottom: 20px;
    resize: vertical;
    font-family: inherit;
}

.modal-buttons {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.modal-btn {
    padding: 8px 16px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
}

.modal-btn:first-child {
    background: #666;
    color: white;
}

.reject-btn {
    background: #f44336;
    color: white;
}

/* ==============================================
   STUDENT: ART BATTLE OVERLAY (DARK ORANGE THEME)
   ============================================== */

#artbattle-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 2000;
    overflow-y: auto;
    padding: 20px;
    justify-content: center;
    align-items: center;
}

#artbattle-box {
    background-color: rgba(62, 76, 25, 0.25);
    color: #fff;
    border-radius: 10px;
    padding: 15px;
    max-width: 900px;
    width: 90%;
    margin: auto;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    position: relative;
    border: 1px solid rgba(114, 143, 34, 0.628);
}
#artbattle-box:hover{
        border: 1.5px solid rgba(153, 196, 36, 0.628);
}

#close-artbattle {
    position: absolute;
    top: 10px;
    right: 15px;
    cursor: pointer;
    font-size: 24px;
    color: white
}

#close-artbattle:hover {
    color: rgb(173, 232, 11);
    transform: rotate(90deg);
}

#artbattle-content {
    margin-top: 10px;
}
/* Student Contest Cards */
.artbattle-contest-card {
    background-color: rgba(56, 69, 23, 0.482);
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1.5px solid rgba(114, 143, 34, 0.628);
}
.artbattle-contest-card:hover {
    border-color: rgba(153, 196, 36, 0.628);
    transform: translateX(5px);
    background-color: rgba(115, 145, 31, 0.402);
}
.artbattle-contest-title {
    font-size: 18px;
    color: #ffffff;
    margin-bottom: 8px;
    font-weight: bold;
}
.artbattle-contest-dates {
    font-size: 11px;
    color: #ccc;
    margin-bottom: 8px;
}
.artbattle-contest-description {
    font-size: 13px;
    color: #fff;
}
/* Student Status Badges */
.artbattle-contest-status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 10px;
    margin-left: 10px;
}
.status-active {
    background: rgba(76, 175, 80, 0.3);
    color: #81c784;
    border: 1px solid #4caf50;
}
.status-upcoming {
    background: rgba(255, 152, 0, 0.3);
    color: #ffcc26;
    border: 1px solid #ff9800;
}
.status-ended {
    background: rgba(100, 100, 100, 0.3);
    color: #aaa;
    border: 1px solid #666;
}
/* Student Contest Detail View */
.contest-detail-view {
    padding: 5px;
}
.back-btn {
    background: rgba(56, 69, 23, 0.482);
    border: 1.5px solid rgba(114, 143, 34, 0.628);
    color: white;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    margin-bottom: 20px;
    transition: all 0.3s ease;
}
.back-btn:hover {
    border-color: rgba(153, 196, 36, 0.628);
    background-color: rgba(115, 145, 31, 0.402);
}
/* Student Submissions Grid */
.contest-submissions-section {
    margin-top: 20px;
}
.contest-submissions-section h3 {
    color: rgb(173, 232, 11);
    margin-bottom: 15px;
    padding-left: 10px;
}
.contest-submissions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 15px;
}
/* Student Submission Card */
.contest-submission-card {
    background-color: rgba(56, 69, 23, 0.482);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1.5px solid rgba(114, 143, 34, 0.628);
}

.contest-submission-card:hover {
    border-color: rgba(153, 196, 36, 0.628);
    box-shadow: 0 0 10px rgba(115, 145, 31, 0.402);
    transform: translateY(-5px);
}

.submission-thumbnail {
    width: 100%;
    height: 180px;
    overflow: hidden;
    background: #0a0a1a;
}

.submission-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.submission-info {
    padding: 12px;
}

.submission-title {
    font-weight: bold;
    font-size: 14px;
    color: white;
    margin-bottom: 5px;
}

.submission-student {
    font-size: 11px;
    opacity: 0.7;
    color: #ccc;
    margin-bottom: 5px;
}

.submission-votes {
    font-size: 12px;
    color: #296d31;
    margin: 8px 0;
}
/* Student Vote Button */
.vote-btn {
    background: rgba(56, 69, 23, 0.482);
    border: 1.5px solid rgba(114, 143, 34, 0.628);
    color: #f8f8f8;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    width: 100%;
    transition: all 0.3s ease;
}
.vote-btn:hover {
    border-color: rgba(153, 196, 36, 0.628);
    background-color: rgba(115, 145, 31, 0.402);
}
/* Student Submit Button */
.submit-artwork-btn {
    background: rgba(56, 69, 23, 0.482);
    border: 1.5px solid rgba(114, 143, 34, 0.628);
    color: whitesmoke;
    padding: 12px 24px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    width: 100%;
    transition: all 0.3s ease;
}

.submit-artwork-btn:hover {
    border-color: rgba(153, 196, 36, 0.628);
    background-color: rgba(115, 145, 31, 0.402);
}

/* Student Status Messages */
.already-submitted {
    background: rgba(56, 69, 23, 0.482);
    padding: 12px;
    border-radius: 8px;
    text-align: center;
    color: #81c784;
    border: 1px solid #4caf50;
}

.contest-status-message {
    background: rgba(56, 69, 23, 0.482);
    padding: 12px;
    border-radius: 8px;
    text-align: center;
    color: rgb(213, 213, 213);
    border: 1px solid rgba(153, 196, 36, 0.628);
}

.no-submissions {
    text-align: center;
    padding: 40px;
    color: #aaa;
    background: rgba(16, 20, 7, 0.381);
    border-radius: 8px;
}

/* Student Loading State */
.artbattle-loading {
    text-align: center;
    padding: 40px;
    color: #ffffff;
}

/* Contest Submission Modal - Student Green Theme */
#submit-contest-work-modal .quest-box:hover {
    border: 1.5px solid rgba(153, 196, 36, 0.628);
}

#submit-contest-work-modal .auth-input {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(114, 143, 34, 0.628);
    border-radius: 6px;
    padding: 10px;
    color: white;
    width: 100%;
}

#submit-contest-work-modal .auth-input:focus {
    outline: none;
    border-color: rgba(153, 196, 36, 0.628);
}

#submit-contest-work-modal .close-btn {
    color: white;
}

#submit-contest-work-modal .close-btn:hover {
    color: rgb(173, 232, 11);
}

#contest-submission-preview {
    max-width: 100%;
    margin-top: 10px;
    border-radius: 8px;
}
/* Force submission modal to be visible */
#submit-contest-work-modal {
    display: none;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.85) !important;
    z-index: 20000 !important;
    justify-content: center !important;
    align-items: center !important;
}

#submit-contest-work-modal .quest-box {
    background: rgba(56, 69, 23, 0.95) !important;
    border: 2px solid rgba(153, 196, 36, 0.8) !important;
    border-radius: 12px !important;
    max-width: 500px !important;
    width: 90% !important;
    position: relative !important;
    z-index: 20001 !important;
}

.delete-submission-btn {
    background: rgba(244, 67, 54, 0.3);
    border: 1px solid #f44336;
    color: #ff8888;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    flex: 1;
}

.delete-submission-btn:hover {
    background: rgba(244, 67, 54, 0.6);
}

.replace-submission-btn {
    background: rgba(255, 152, 0, 0.3);
    border: 1px solid #ff9800;
    color: #ffa726;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    flex: 1;
}

.replace-submission-btn:hover {
    background: rgba(255, 152, 0, 0.6);
}

/* Make vote buttons visible */
.vote-btn {
    display: inline-block !important;
    background: rgba(56, 69, 23, 0.8) !important;
    border: 1px solid rgba(153, 196, 36, 0.8) !important;
    color: white !important;
    padding: 8px 16px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    font-size: 14px !important;
    margin-top: 8px !important;
    width: 100% !important;
}

.vote-btn:hover {
    background: rgba(153, 196, 36, 0.6) !important;
    transform: scale(1.02) !important;
}

/* Make sure submission cards have enough height */
.contest-submission-card {
    min-height: 280px !important;
    display: flex !important;
    flex-direction: column !important;
}

.submission-info {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

.vote-btn {
    margin-top: auto !important;
}
/* Reject Modal - Teacher Blue/Gold Theme */
#reject-modal .modal-content {
    background: rgba(17, 26, 73, 1);
    border: 1px solid #ffd700;
}

#reject-modal h3 {
    color: #ffd700;
}

#reject-modal textarea {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 215, 0, 0.3);
    color: white;
}

#reject-modal .modal-btn:first-child {
    background: #666;
    color: white;
}

#reject-modal .reject-btn {
    background: #f44336;
    color: white;
}

/* Race Track Styles - Compact for many students */
.race-track-container {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    padding: 15px;
    margin: 15px 0;
    border: 1px solid rgba(114, 143, 34, 0.628);
    overflow-x: auto;
}

.race-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    padding: 0 5px;
    color: #ffd700;
    font-size: 12px;
    font-weight: bold;
}

.start-line, .finish-line {
    background: rgba(0, 0, 0, 0.5);
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 10px;
}

.race-track {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.race-lane {
    position: relative;
    min-height: 10px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    margin: 3px 0;
    padding: 3px 0;
}

.race-track-line {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1.5px;
    background: linear-gradient(90deg, #666, #888, #666);
    transform: translateY(-50%);
    z-index: 1;
}

.race-character {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: left 0.5s ease-out;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}

.race-avatar {
    position: relative;
    width: 32px;
    height: 32px;
    background: rgba(56, 69, 23, 0.8);
    border-radius: 50%;
    border: 1.5px solid rgba(153, 196, 36, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.race-avatar:hover {
    transform: scale(1.05);
    border-color: rgb(173, 232, 11);
}

.race-avatar img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
}

.race-name {
    position: absolute;
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.85);
    color: #ffd700;
    font-size: 8px;
    padding: 1px 3px;
    border-radius: 3px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 15;
    max-width: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.race-votes {
    position: absolute;
    top: -16px;
    right: -8px;
    background: rgba(56, 69, 23, 0.9);
    border: 1px solid rgba(153, 196, 36, 0.8);
    border-radius: 20px;
    padding: 1px 4px;
    font-size: 8px;
    color: #ffd700;
    font-weight: bold;
    white-space: nowrap;
}

.race-lane-label {
    position: absolute;
    left: -25px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 8px;
    color: #aaa;
    width: 20px;
    text-align: right;
}
/* Random movement animation for race track */
.race-character {
    transition: left 0.8s ease-in-out;
}

.race-character.racing {
    animation: randomMove 2s ease-in-out infinite;
}

@keyframes randomMove {
    0% { transform: translateY(-50%) translateX(0); }
    25% { transform: translateY(-50%) translateX(calc(var(--random-offset, 5px))); }
    50% { transform: translateY(-50%) translateX(0); }
    75% { transform: translateY(-50%) translateX(calc(-1 * var(--random-offset, 5px))); }
    100% { transform: translateY(-50%) translateX(0); }
}
/* Reset Race Button - Matching submit button style */
.refresh-race-btn {
    background: rgba(56, 69, 23, 0.8);
    border: 1.5px solid rgba(153, 196, 36, 0.8);
    color: whitesmoke;
    padding: 8px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    width: auto;
    transition: all 0.3s ease;
}

.refresh-race-btn:hover {
    border-color: rgba(153, 196, 36, 0.8);
    background-color: rgba(115, 145, 31, 0.6);
    transform: scale(1.02);
}
/* For very crowded screens - make even smaller on mobile */
@media (max-width: 768px) {
    .race-avatar {
        width: 28px;
        height: 28px;
    }
    .race-avatar img {
        width: 24px;
        height: 24px;
    }
    .race-name {
        font-size: 7px;
        bottom: -16px;
        max-width: 50px;
    }
    .race-votes {
        font-size: 7px;
        top: -14px;
        right: -6px;
    }
    .race-lane {
        min-height: 45px;
    }
}

/* Refresh indicator */
.race-refreshing {
    animation: pulse 0.5s ease;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.6; }
    100% { opacity: 1; }
}
/*Tie breaker mode*/
.vote-adjust-item {
    transition: all 0.2s ease;
}

.vote-adjust-item:hover {
    background: rgba(255, 215, 0, 0.1);
}

.add-vote-btn:hover {
    background: rgba(255, 215, 0, 0.6) !important;
    transform: scale(1.02);
}
/* Results View Styles */
.results-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(153, 196, 36, 0.3);
    padding-bottom: 10px;
}

.results-tab-btn {
    background: rgba(56, 69, 23, 0.5);
    border: 1px solid rgba(153, 196, 36, 0.5);
    color: white;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.results-tab-btn.active {
    background: rgba(153, 196, 36, 0.3);
    border-color: #ffd700;
    color: #ffd700;
}

.results-tab-btn:hover {
    background: rgba(153, 196, 36, 0.2);
}

/* Podium Container */
.podium-container {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 20px;
    margin: 30px 0;
    flex-wrap: wrap;
}

.podium-spot {
    text-align: center;
    padding: 15px;
    border-radius: 12px 12px 0 0;
    min-width: 120px;
}

.podium-spot.gold {
    background: linear-gradient(to bottom, #ffd700, #b8860b);
    height: 180px;
    order: 2;
}

.podium-spot.silver {
    background: linear-gradient(to bottom, #c0c0c0, #808080);
    height: 140px;
    order: 1;
}

.podium-spot.bronze {
    background: linear-gradient(to bottom, #cd7f32, #8b4513);
    height: 100px;
    order: 3;
}

.podium-medal {
    font-size: 30px;
    margin-bottom: 10px;
}

.podium-avatar img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid white;
    margin-bottom: 8px;
}

.podium-name {
    font-size: 12px;
    color: white;
    font-weight: bold;
    margin-bottom: 4px;
}

.podium-votes {
    font-size: 11px;
    color: #ffd700;
    margin-bottom: 8px;
}

.podium-thumbnail img {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid white;
}
/* Responsive podium */
@media (max-width: 768px) {
    .podium-spot {
        min-width: 90px;
        padding: 10px;
    }
    .podium-spot.gold { height: 140px; }
    .podium-spot.silver { height: 110px; }
    .podium-spot.bronze { height: 80px; }
    .podium-avatar img { width: 35px; height: 35px; }
    .podium-thumbnail img { width: 60px; height: 60px; }
    .podium-name { font-size: 10px; }
}
/*CSS for Contest PDF Format*/
.pdf-btn {
    background: rgba(255, 215, 0, 0.2) !important;
    border-color: #ffd700 !important;
}

.pdf-btn:hover {
    background: rgba(255, 215, 0, 0.4) !important;
}





/* ================================================================================================================
   UNIVERSAL MODAL FIXES - ALL MODALS CONSISTENT
   ============================================================================================================== */

/* All modals must have identical positioning */
#teacher-work-modal,
#date-modal,
#create-class-modal,
#create-custom-quest-modal,
#create-contest-overlay,
#edit-contest-modal,
#reject-modal,
#password-verify-modal,
#invite-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.85) !important;
    z-index: 20000 !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
}

/* All modal content boxes */
#teacher-work-modal .teacher-work-modal-content,
#date-modal .teacher-work-modal-content,
#create-class-modal .teacher-work-modal-content,
#create-custom-quest-modal .teacher-work-modal-content,
#create-contest-overlay .quest-box,
#edit-contest-modal .teacher-work-modal-content,
#reject-modal .modal-content,
#password-verify-modal .password-verify-content,
#invite-modal .teacher-work-modal-content {
    position: relative !important;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%) !important;
    border: 1px solid rgba(255, 215, 0, 0.3) !important;
    border-radius: 12px !important;
    padding: 20px !important;
    max-width: 600px !important;
    width: 90% !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
    z-index: 20001 !important;
    margin: auto !important;
    color: white !important;
}