/* --- Game & Common Styles --- */
 :root { color-scheme: dark; }
    body {
      margin: 0;
      background: #111;
      font-family: Arial, sans-serif;
      color: #fff;
    }
    canvas {
      position: absolute;
      inset: 0;
      margin: auto;
      display: block;
      background: #222;
      z-index: 0;
    }

    /* --- New Initial Menu Styles --- */

/* The semi-transparent backdrop that fills the screen */

/* The actual popup box */
.menu-popup {
  background: #2a2a2e;
  padding: 30px 40px;
  border-radius: 12px;
  border: 1px solid #555;
  text-align: center;
  box-shadow: 0 5px 25px rgba(0,0,0,0.5);
}

.menu-popup h2 {
  margin-top: 0;
  margin-bottom: 24px;
  font-family: 'Inter', sans-serif;
  color: #eee;
}

/* The container for the buttons */
.menu-controls {
  display: flex;
  flex-direction: column; /* Stack buttons vertically */
  gap: 15px; /* Space between buttons */
}

/* Make buttons larger and more prominent */
.menu-controls button {
  padding: 12px 25px;
  font-size: 18px;
  min-width: 200px; /* Give buttons a consistent width */
}
   
    h1 { margin: 0 0 16px; font-weight: 700; }
    input[type="file"] {
      background: #333; border: 1px solid #444; border-radius: 8px; padding: 8px;
    }
    button {
      padding: 10px 18px; font-size: 16px; border: none; border-radius: 8px;
      cursor: pointer; background: #444; color: #fff; transition: background .2s;
    }
    button:hover { background: #666; }

    /* Patient info panel */
    #infoPanel {
      position: fixed;
      top: 0; right: -300px; height: 100%; width: 300px;
      background: #1e1e1e; border-left: 2px solid #333;
      padding: 20px;
      box-sizing: border-box;
      transition: right 0.3s ease;
      z-index: 2;
      overflow-y: auto;
    }
    #infoPanel.open { right: 0; }
    #infoPanel h2 { margin-top: 0; }
    #closeInfo {
      background: #444; color: #fff; border: none; border-radius: 6px;
      padding: 6px 12px; cursor: pointer; margin-top: 10px;
    }
        /* Patient info sidebar */
    #patientInfo {
    position: absolute;
    right: 0;
    top: 0;
    width: 220px;
    height: 100%;
    background: #222;
    color: white;
    padding: 15px;
    display: none; /* hidden until patient is clicked */
    z-index: 2;
    }
    #patientInfo h2 {
    margin-top: 0;
    }

    /* Room action sidebar */
    #roomMenu {
    position: absolute;
    right: 0;
    top: 0;
    width: 220px;
    height: 100%;
    background: #333;
    color: white;
    padding: 15px;
    display: none; /* hidden until zoom in */
    z-index: 2;
    box-sizing: border-box; /* <-- Add this line */

    }
    #roomMenu h2 {
    margin-top: 0;
    }
    #roomMenu button {
    display: block;
    width: 100%;
    margin: 8px 0;
    padding: 10px;
    font-size: 16px;
    background: #444;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    }
    #roomMenu button:hover {
    background: #666;
    }

/* --- NEW: Unified, lighter style for special action buttons --- */
.btn-special-action {
    background-color: #5a5a5e !important; /* Lighter than default buttons */
    font-weight: bold;
}
.btn-special-action:hover {
    background-color: #6b6b70 !important; /* Even lighter on hover */
}
    /* In index.html, inside the <style> tag */

.room {
  /* ... your existing styles for .room ... */
  border: 1px solid #444;
  padding: 10px;
  margin: 10px;
  border-radius: 8px;
  background-color: #2a2a2a;
  
  /* --- Add these lines --- */
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain; /* This makes the image fit inside the div */
}

    /* Style for the waiting room */
    #waiting-room {
      /* Change the url path here */
      background-image: url('/images/waiting_chair.png');
      background-size: 40%;
      background-position: center 60%;
    }

    /* Style for all patient rooms */
    .patient-room {
      /* And change the url path here */
      background-image: url('/images/patient_bed.png');
      background-size: 70%;
    }

    .game-ui {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 2; /* Ensures it's above the canvas */
    }
    /* Vitals Pop-up Menu */
#vitalsPopup {
  display: none; /* This makes it hidden by default */
  position: absolute;
  top: 15px;
  left: 15px;
  width: 220px;
  background: #2a2a2e;
  border: 1px solid #555;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  z-index: 10;
  font-size: 14px;
  
  /* Layout properties */
  max-height: 90vh;
  overflow-y: auto;
  flex-direction: column;
  padding: 0;
}
#vitalsPopup.zoomed-out-position {
    margin-top: 55px; /* The offset to avoid the top bar */
}

#vitalsHeader {
  padding: 12px 12px 0 12px;
  flex-shrink: 0;
}

#vitalsBody {
  padding: 12px;
  overflow-y: auto; /* This will stop the "popping out" */
}
#vitalsTitle {
  margin: 0 0 10px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid #555;
  text-align: center;
  font-size: 16px;
  color: #fff;
}
#vitalsContent div {
  padding: 4px 0;
  border-bottom: 1px solid #333;
}
#vitalsContent div:last-child {
  border-bottom: none;
}

/* Generic Submenu Styling */
/* Generic Submenu Styling */
/* Generic Submenu Styling */
.submenu {
  display: none; /* This correctly sets the default to hidden */
  position: absolute;
  top: 0;
  width: 200px;
  height: 100%;
  background: #2a2a2e;
  color: white;
  padding: 15px;
  z-index: 2;
  border-left: 2px solid #444;
  box-sizing: border-box;
  
  /* These properties will apply when it's made visible as a flex container */
  flex-direction: column;
}

.submenu h4 {
  margin-top: 0;
  text-align: center;
  border-bottom: 1px solid #555;
  padding-bottom: 10px;
}

.submenu button {
  display: block;
  width: 100%;
  margin: 8px 0;
  padding: 10px;
  font-size: 16px;
  background: #333;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.submenu button:hover {
  background: #555;
}

.submenu .menu-body {
    overflow-y: auto; /* Make the content area scrollable */
    padding: 15px;
}

/* --- NEW: ABCDE Akutrum Menu Styles --- */
/* Make the menu a full-height panel, just like #roomMenu */
#akutrumMenu {
    position: absolute;
    right: 0;
    top: 0;
    width: 220px;
    height: 100%;
    background: #333;
    color: white;
    padding: 15px;
    display: none; /* hidden until zoom in */
    z-index: 2;
    box-sizing: border-box;
}

#akutrumMenu h2 {
    margin-top: 0;
}

.abcde-header {
    /* Match the style of #roomMenu buttons */
    display: block;
    width: 100%;
    margin: 8px 0;
    padding: 10px;
    font-size: 16px;
    background: #444;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}
.abcde-header:hover {
    background: #666;
}

/* --- NEW: Styles for Akutrum Menu additions --- */
.menu-separator {
    border: none;
    border-top: 1px solid #555;
    margin: 15px 0;
}

#akutrumMenu #btnMedsAkutrum,
#akutrumMenu #btnAnamnesisAkutrum,
#akutrumMenu #btnContinueFromAkutrum,
#akutrumMenu #btnConsultAkutrum,
#akutrumMenu #btnHomeMedsAkutrum,
#akutrumMenu #btnRadiologyAkutrum {
    /* Make these buttons full-width, just like the others */
    display: block;
    width: 100%;
    margin: 8px 0;
    padding: 10px;
    font-size: 16px;
    background: #444;
    border: none; /* Ensure no border from other styles */
    border-radius: 6px;
    color: white; /* Ensure text is white */
}

#akutrumMenu #btnMedsAkutrum:hover,
#akutrumMenu #btnAnamnesisAkutrum:hover,
#akutrumMenu #btnContinueFromAkutrum:hover,
#akutrumMenu #btnConsultAkutrum:hover,
#akutrumMenu #btnHomeMedsAkutrum:hover,
#akutrumMenu #btnRadiologyAkutrum:hover {
    background: #666;
}

/* --- NEW: Make the Akutrum Disposition button full-width --- */
#akutrumMenu #btnDischargeAkutrum {
    display: block;
    width: 100%;
    margin-top: 8px; /* Add some space above it */
}

/* --- Akutrum Button Wrapper & Tooltips --- */
.btn-wrapper-with-tooltip {
    position: relative;
    width: 100%;
    margin: 8px 0; /* Match the margin of other buttons */
}

/* Override margin for buttons inside the wrapper to avoid double spacing */
.btn-wrapper-with-tooltip button {
    margin: 0 !important;
    padding-right: 35px !important; /* Make room for the icon */
}

.info-tooltip {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    color: #aaa;
    cursor: help;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

.info-tooltip:hover {
    color: #fff;
}

.info-tooltip .tooltip-text {
    visibility: hidden;
    width: 220px;
    background-color: #222;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 10px;
    position: absolute;
    z-index: 100;
    bottom: 130%; /* Position above the icon */
    right: -10px; /* Align roughly with the right edge */
    opacity: 0;
    transition: opacity 0.3s;
    border: 1px solid #555;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    font-size: 0.85rem;
    font-weight: normal;
    line-height: 1.4;
    pointer-events: none;
}

.info-tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

.abcde-content {
  padding: 10px;
  background-color: #2a2a2e;
  border: 1px solid #444;
  border-top: none;
  border-radius: 0 0 6px 6px;
  display: none; /* Hidden by default */
}

.abcde-search-input {
  /* Reuse existing search input style */
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
  border-radius: 6px;
  border: 1px solid #555;
  background: #1e1e1e;
  color: #fff;
  box-sizing: border-box;
}

/* Accordion Styling */
#vitalsBody .accordion:first-child {
  margin-top: 0;
}
.accordion {
  margin-top: 15px;
}
.accordion-header {
  background: #3c3c42;
  color: #fff;
  cursor: pointer;
  padding: 10px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
  border-radius: 6px;
}
.accordion-header:hover, .accordion-header.active {
  background-color: #4a4a52;
}
.accordion-header::after {
  content: ''; /* We're creating a shape, not using text */
  float: right;
  margin-left: 5px;
  margin-top: 5px; /* Adjust vertical alignment */
  
  /* This creates the arrow shape using borders */
  border: solid #ccc;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 3px;
  
  /* Point the arrow down by default (closed state) */
  transform: rotate(45deg);
  
  /* Add a smooth animation to the rotation */
  transition: transform 0.2s ease-out;
}

.accordion-header.active::after {
  /* Point the arrow up when the accordion is active (open state) */
  transform: rotate(-135deg);
}
.accordion-content {
  padding: 0 12px;
  background-color: #2a2a2e;
  max-height: 0;
  overflow: hidden;   
  transition: max-height 0.2s ease-out;
  font-size: 14px;
}
.accordion-content div {
  padding: 6px 0;
  border-bottom: 1px solid #3f3f44;
}
.accordion-content div:last-child {
  border-bottom: none;
}

.abnormal-text {
    color: #ff6b6b;
    font-weight: bold;
}
/* --- NEW: Styles for Physical Exam Image Icon --- */
.result-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.image-icon {
    cursor: pointer;
    color: #aaa;
    font-size: 1.1em;
    padding: 2px 5px;
    border-radius: 4px;
    transition: color 0.2s, background-color 0.2s;
}

.image-icon:hover {
    color: #fff;
    background-color: #4a4a52;
}

/* --- NEW: Styles for the Exam Image Modal --- */
/* --- REVISED: Make the exam image modal look like the EKG modal --- */
#examImageContainer {
    max-height: 60vh;
    overflow-y: auto;
    background-color: #111; /* Dark background for the image */
    padding: 10px;
    border-radius: 6px;
    margin: 15px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

#examModalImage {
    max-width: 100%;
    height: auto;
    display: block;
}

#examImageModal .btn-close { /* This is now identical to the EKG close button */
    position: absolute; top: 5px; right: 5px; background: transparent;
    border: none; font-size: 24px; color: #888; cursor: pointer;
}
/* --- NEW: Admin Panel Specific Styles for Image Input --- */
.form-grid-2-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* Styling for all search inputs inside submenus */
.submenu-search-input {
  border-bottom: none;
}


/* Styling for all search inputs inside submenus */
.submenu-search-input {
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
  border-radius: 6px;
  border: 1px solid #555; /* or var(--border-color) if you set that up */
  background: #1e1e1e;
  color: #fff;
  box-sizing: border-box;
}

/* Styling for the container that will hold the test buttons */
#labTestList {
  overflow-y: auto; /* Adds a scrollbar if the list is long */
  height: calc(100% - 80px); /* Fill remaining space */
}
.chief-complaint {
  font-style: italic;
  color: #eee; /* Brighter color */
  margin: 5px 0 10px 0;
  text-align: center;
  font-size: 15px; /* Slightly larger */
  border-bottom: 1px solid #444;
  padding-bottom: 10px;
  font-weight: 600; /* Bolder */
}

/* --- CHAT WINDOW STYLING --- */

/* Position the chat window in the shared submenu space */
#chatWindow {
  right: 220px;
  flex-direction: column; /* Stack items vertically */
}

/* The area where messages appear */
#chatMessages {
  flex-grow: 1; /* This is the key: it makes the message area expand to fill all available vertical space */
  background: #1e1e1e;
  border-radius: 6px;
  margin-bottom: 10px;
  padding: 8px;
  overflow-y: auto; /* Adds a scrollbar if messages get long */
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Container for the input and send button at the bottom */
.chat-input-area {
  display: flex;
  flex-direction: column; /* Stack input and button container vertically */
  gap: 10px; /* Add space between input and buttons */
}

/* NEW: Container for just the buttons */
.chat-button-container {
  display: flex;
  gap: 5px;
  justify-content: center; /* Center the buttons */
}

#chatInput {
  flex-grow: 1; /* Makes the input field take up most of the width */
  border: 1px solid #555;
  background: #1e1e1e;
  color: #fff;
  border-radius: 6px;
  padding: 8px;
}

#sendBtn {
  padding: 8px 12px;
}

/* --- CHAT BUBBLE STYLING (You should already have this) --- */
.chat-bubble {
  padding: 10px 15px;
  border-radius: 18px;
  max-width: 80%;
  word-wrap: break-word;
}
.user-bubble {
  background-color: #555;
  color: #fff;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}
.patient-bubble {
  background-color: #555;
  color: #fff;
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
/* --- NEW: Thinking Bubble Animation --- */
.thinking-bubble .dot {
    animation: thinking-dot 1.4s infinite;
    opacity: 0;
}
.thinking-bubble .dot:nth-child(1) {
    animation-delay: 0s;
}
.thinking-bubble .dot:nth-child(2) {
    animation-delay: 0.2s;
}
.thinking-bubble .dot:nth-child(3) {
    animation-delay: 0.4s;
}
@keyframes thinking-dot {
    0%, 80%, 100% {
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
}

.btn-action-final {
  /* margin-top: 20px !important; */ /* This was causing alignment issues in flex containers */
  background-color: #2c6e3b !important; /* A calm green */
}
.btn-action-final:hover {
  background-color: #3f8c53 !important;
}

.btn-action-final:disabled {
  background-color: #555 !important;
  color: #999;
  cursor: not-allowed;
}

/* --- NEW: Red Danger Button --- */
.btn-danger {
    background-color: #c0392b !important;
    color: #fff !important;
    border: none;
    border-radius: 6px;
}
.btn-danger:hover {
    background-color: #a93226 !important;
}

/* --- Styles for specific modals and their content --- */
.disposition-choices {
    display: flex;
    justify-content: center;
    align-items: baseline; /* ✅ Aligns the text inside the buttons */
    gap: 15px;
}

#closeFeedback {
  position: absolute;
  top: 5px;
  right: 5px;
  background: transparent;
  border: none;
  font-size: 24px;
  color: var(--text-color-muted);
  padding: 5px 10px;
  line-height: 1;
  box-shadow: none;
}

#closeFeedback:hover {
  color: #fff;
  background: var(--panel-background-alt);
}

/* --- Final Feedback Report Styling --- */
.feedback-section h4, #feedbackContent h4 {
  margin-top: 15px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 5px;
  color: var(--text-color);
}
/* --- New Feedback Report Grid Styles --- */
.feedback-grid {
  display: grid;
  /* Create responsive columns that are at least 250px wide 
     and automatically fill the available space. */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 10px; /* Sets the space between the grid items */
  margin-top: 10px;
}
/* Style for sub-headings in the feedback report */
.modal-content h5 {
  margin-top: 15px;
  margin-bottom: 5px;
  color: #ccc;
  border-bottom: 1px solid #444;
  padding-bottom: 4px;
}

/* Minor adjustment to the items inside the grid */
.feedback-grid .feedback-task {
  margin: 0; /* Remove the old vertical margin to keep grid spacing consistent */
}
.feedback-section p, #feedbackContent p {
  margin: 5px 0;
}
.feedback-task {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  margin: 4px 0;
  border-radius: 6px;
  background-color: var(--panel-background-alt);
  border: 1px solid transparent;
}
.task-icon {
  font-weight: bold;
  font-size: 16px;
  margin-right: 12px;
  width: 20px;
  text-align: center;
}
.task-name {
  flex-grow: 1;
}
.feedback-task.correct {
  background-color: #28362b;
  border-color: #34c759;
}
.feedback-task.correct .task-icon {
  color: #34c759;
}
.feedback-task.missed {
  background-color: #422727;
  border-color: #ff3b30;
}
.feedback-task.missed .task-icon {
  color: #ff3b30;
}
.feedback-task.neutral {
  background-color: #333;
  border-color: #888;
}
.feedback-task.neutral .task-icon {
  color: #888;
}
.feedback-unnecessary {
  color: #ff9500;
  list-style: none;
}
/* Position all submenus in the same shared space */
#generalSearchMenu,
#physicalExamMenu,
#labMenu,
#chatWindow,
#medsMenu,
#bedsideMenu,
#consultMenu,
#radiologyMenu {
  right: 220px;
  left: auto; /* Ensure left positioning is disabled */
}

/* --- NEW: Consultation Builder Styles --- */
.consultation-builder-container {
    display: flex;
    gap: 20px;
    background-color: var(--admin-bg-input);
    padding: 15px;
    border-radius: var(--admin-border-radius);
    border: 1px solid var(--admin-border-color);
}

.consultation-sidebar {
    width: 200px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.consultant-list {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.consultant-list-item {
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    background-color: var(--admin-bg-tertiary);
    transition: background-color 0.2s;
}

.consultant-list-item.active, .consultant-list-item:hover {
    background-color: var(--admin-accent-primary);
    color: #fff;
}

.consultation-builder {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.consultation-rule {
    background-color: var(--admin-bg-secondary);
    padding: 15px;
    border-radius: var(--admin-border-radius);
    border: 1px solid var(--admin-border-color);
}

.consultation-rule h5 {
    margin: 0 0 10px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--admin-border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.consultation-rule .btn-remove {
    padding: 2px 8px;
    font-size: 1em;
    line-height: 1;
    background-color: var(--admin-accent-danger);
}

#generalSearchResultList {
  flex-grow: 1; /* Allows the list to grow and fill available space */
  overflow-y: auto; /* Adds a vertical scrollbar only when needed */
  min-height: 0; /* Prevents a common flexbox scrolling issue */
}

#medsList {
  overflow-y: auto; /* Add a vertical scrollbar only when needed */
  height: calc(100% - 80px); /* Fill the remaining vertical space */
}
/* In index.html, in the <style> tag */
#ekgImageContainer {
    /* Set a maximum height for the image container */
    max-height: 60vh; /* Adjust this value as needed, e.g., 60% of viewport height */
    /* Enable vertical scrolling if content exceeds max-height */
    overflow-y: auto;
    /* Optional: Add some visual styling to the scrollable area */
    background-color: #f0f0f0; /* Light background for contrast */
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 15px; /* Add some space below the image container */
    display: flex;          /* Use flexbox for centering */
    justify-content: center;/* Center horizontally */
    align-items: center;    /* Center vertically */
}
/* NEW: Styles for when the EKG image is zoomed in */
#ekgImageContainer.zoomed-in {
    overflow-x: auto; /* Enable horizontal scroll when zoomed in */
    /* Remove flex centering when zoomed in to allow scrolling from the top-left */
    display: block;
    /* Change the cursor to indicate the user can pan the image */
    cursor: grab;
}

#ekgImage {
  /* The width is now controlled by the #ekgImageContainer img rule for better specificity management */
}
#ekgImageContainer img {
    /* Ensure the image scales down to fit the width of its container */
    max-width: 100%; /* This is for the default, non-zoomed state */
    /* Maintain the image's aspect ratio */
    height: auto;
    /* Remove any extra space below the image that might be caused by display: inline */
    display: block;
    transition: max-width 0.3s ease, height 0.3s ease; /* Smooth transition for zoom */
    cursor: zoom-in; /* Indicate it's zoomable */
}

#ekgImageContainer img.zoomed-in {
    max-width: none; /* This is the key: allow the image to render at its natural width */
    cursor: zoom-out;
}
#closeEkgModal {
  position: absolute; top: 5px; right: 5px; background: transparent;
  border: none; font-size: 24px; color: #888; cursor: pointer;
}
/* --- Make the EKG modal smaller --- */
#ekgModal .modal-content {
    /* Let content determine width, but cap it */
    width: fit-content; /* This is key for adapting to image width */
    max-width: 800px; /* Set a fixed max-width for the modal */
    max-height: 90vh; /* Cap the modal's overall height */
    height: auto; /* Let height adjust based on content, up to max-height */
    overflow: hidden; /* Hide modal's own scrollbars, image container handles it */

    text-align: center; /* Center the header and other content */
    display: flex; /* Use flexbox to arrange content vertically */
    flex-direction: column;
    justify-content: space-between; /* Distribute space between header, image, and footer */
}

/* --- New Score Display Styles --- */
.feedback-score-container {
  margin-bottom: 20px;
  text-align: center;
}

.feedback-score-container h3 {
  margin: 0;
  color: #ccc;
  font-weight: 600;
}

.score-circle {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  font-size: 28px;
  font-weight: bold;
  margin-top: 10px;
  color: #fff;
}

/* Add different border colors based on the score */
.score-circle.medium {
  border-color: #ffc107; /* Orange for medium scores */
}
.score-circle.low {
  border-color: #ff3b30; /* Red for low scores */
}
/* --- UI Feedback Styles --- */

/* The container for a result that is loading */
.pending-result {
  display: flex;
  align-items: center;
  color: #aaa; /* Muted color for pending text */
  font-style: italic;
  padding: 6px 0; /* Match other result rows */
  border-bottom: 1px solid #3f3f44; /* Match other result rows */
}

/* The spinner animation */
.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid #555; /* Light grey track */
  border-top-color: #fff; /* White moving part */
  border-radius: 50%;
  margin-left: 10px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.spinner-inline {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid #555;
    border-top-color: #fff;
    border-radius: 50%;
    margin-left: 8px;
    vertical-align: middle;
    animation: spin 1s linear infinite;
}


.feedback-task .task-icon {
  margin-right: 6px; /* Space between icon and text. */
  font-weight: bold;
}

/* Subheadings (e.g., "Critical", "Lab Tests") */
.feedback-category-title {
  font-size: 15px;
  margin-top: 8px;
  margin-bottom: 4px;
  font-weight: 600;
  color: #444;
  border-bottom: 1px solid #eee;
  padding-bottom: 3px;
}

/* --- Critical Patient Warning --- */
#critical-warning-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 0, 0, 0.15);
  pointer-events: none; /* Allows you to click through it */
  z-index: 1000;
  animation: critical-flash 1.2s infinite ease-in-out;
}

#critical-warning-overlay.hidden {
  display: none;
}

@keyframes critical-flash {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
/* style.css */

#loginForm {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  align-items: center;
}

#loginForm input {
  padding: 10px;
  font-size: 16px;
  width: 80%;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.error-message {
  color: #ff5252;
  font-size: 14px;
  margin-top: 10px;
  height: 20px; /* Reserve space to prevent layout shift */
}

.error-message.hidden {
  visibility: hidden;
}
/* Add these styles to your main stylesheet */

/* This rule applies to both your login screen and main menu */

/* Ensure your canvas has a lower z-index */
#gameCanvas {
  /* It might be a good idea to ensure the canvas is positioned too */
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.secondary-btn {
  background-color: #6c757d;
}
.secondary-btn:hover {
  background-color: #5a6268;
}

/* --- UNIFIED STYLES FOR ALL POPUP MENUS --- */

/* This styles the full-screen backdrop for any menu */
.menu-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  
  display: flex;
  /* --- FIX: Use space-evenly for perfectly balanced horizontal distribution --- */
  justify-content: space-evenly;
  align-items: flex-start; /* Aligns items to the top */
  padding: 15vh 5vw;      /* Add vertical and horizontal padding to prevent touching screen edges */
  box-sizing: border-box; /* Ensure padding is included in the total width/height */
    gap: 40px;              /* NEW: Add a gap between the menu panels */

  
  background-color: rgba(0, 0, 0, 0.5);
}

/* ✅ This is the crucial rule that hides the menu */
.menu-container.hidden, #top-ui-bar.hidden {
  display: none;
}

#loginControls.hidden {
  display: none;
}

.hidden {
  display: none !important;
}

/* --- NEW: Class to hide panels while preserving layout space --- */
.is-invisible {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: visibility 0s 0.2s, opacity 0.2s ease-in-out;
}

/* --- NEW: Unified style for all side panels on the main menu --- */
.side-panel {
    /* This class is now only for the LEFT panel (leaderboard) */
    width: 400px;
    max-width: 28vw; /* A consistent max-width based on viewport */
    flex-shrink: 0; /* Prevent panels from shrinking if space is tight */
}

/* --- NEW: Unified style for all RIGHT side panels --- */
.right-panel {
    width: 600px;
    max-width: 35vw;
}

/* --- NEW: Make panels fill height and allow internal scrolling --- */
.menu-panel .modal-body, .menu-panel .history-container {
    flex-grow: 1;
    overflow-y: auto;
    min-height: 0; /* Prevents flexbox overflow issues */
    padding-right: 10px; /* Space for scrollbar */
}

/* --- NEW: Styles for side panels on the main menu (Leaderboard) --- */
.menu-panel {
  background: #141517d0;
  color: #EAEAEA;
  padding: 20px 10px;
  border-radius: 8px;
  border: 1px solid #555;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  width: 400px;
  max-height: 80vh; /* Match other panels */
  display: flex;
  flex-direction: column;
}

.menu-panel h2 {
  color: #FFFFFF;
  margin: 0; /* Let the header handle spacing */
}

/* --- NEW: Ensure panel footers are styled correctly --- */
.menu-panel .modal-footer {
    flex-shrink: 0; /* Prevent footer from shrinking */
    margin-top: 15px;
    padding-top: 15px;
}

#feedbackModule {
    margin-top: 20px;
}

/* --- NEW DARK THEME FOR MAIN MENU --- */

/* The main container box for the menu */
.menu-popup {
  background: #141517d0;        /* --- NEW: A slightly darker background to match the patch notes better --- */
  color: #EAEAEA;            /* Light gray text for readability */
  padding: 20px 40px;
  border-radius: 8px;
  border: 1px solid #555;     /* Border color from vitals popup */
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  min-width: 350px;
  text-align: center;
}

/* The main title (e.g., "ER Simulator") */
.menu-popup h1 {
  color: #FFFFFF;
  margin: 0 0 25px 0;
  padding-bottom: 15px;
  border-bottom: 1px solid #555; /* Divider line like in vitals */
}

/* The main logo image */
.main-menu-logo {
  max-width: 100%;
  height: auto;
  margin: 0 0 10px 0;
  padding: 0;
  border: none;
}

/* This is the container for the main menu buttons */
#mainMenuControls {
  display: flex;
  flex-direction: column;
  gap: 12px; /* This adds space between each button */
}

/* General styles for all buttons in the menu */
#mainMenuControls > button {
  width: 100%;
  padding: 12px 20px;
  font-size: 18px;
  margin: 0;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* --- Button Colors --- */

/* Primary "Play" button */
#mainMenuControls > #playBtn {
  background-color: #4E95D9; /* --- NEW: Green to match available rooms --- */
  color: #FFFFFF;
}
#mainMenuControls > #playBtn:hover {
  background-color: #386d9e; /* --- NEW: Darker green for hover --- */
}

#mainMenuControls > button:disabled {
  background-color: #444; /* Darker gray for disabled state */
  color: #888;
  cursor: not-allowed;
}

#mainMenuControls > #settingsBtn,
#mainMenuControls > #caseHistoryBtn,
#mainMenuControls > #caseSelectionBtn,
#mainMenuControls > #leaderboardBtn,
#mainMenuControls > #patchNotesBtn {
  background-color: #555; /* Medium gray to match borders */
  color: #EAEAEA;
}
#mainMenuControls > #settingsBtn:hover,
#mainMenuControls > #caseSelectionBtn:hover,
#mainMenuControls > #caseHistoryBtn:hover,
#mainMenuControls > #leaderboardBtn:hover,
#mainMenuControls > #patchNotesBtn:hover {
  background-color: #666; /* Lighter gray for hover */
}
/* --- Custom Oxygen Slider Styles (Final) --- */
.slider-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px 0;
  gap: 15px;
}
.slider-wrapper {
  position: relative; /* Establishes a layering context */
  width: 80%;
  display: flex;
  align-items: center;
}
#oxygenFlowRateLabel {
  min-width: 60px;
  text-align: center;
  font-weight: bold;
  font-size: 18px;
}

#slider-ticks {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  z-index: 1; /* Layer 1: Ticks are in the back */
}
#slider-ticks span {
  width: 2px;
  height: 16px; /* Taller ticks to be visible behind the track */
  background: #888;
  border-radius: 2px;
}

#oxygenSlider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  background: #555; /* Opaque track color */
  border-radius: 5px;
  outline: none;
  margin: 0;
  position: relative; /* Required for z-index */
  z-index: 2; /* Layer 2: Track is on top of ticks */
}

#oxygenSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 24px;
  background: #cad2e0;
  cursor: grab;
  border-radius: 4px;
  margin-top: -8px;
  position: relative; /* Required for z-index */
  z-index: 3; /* Layer 3: Thumb is on top of everything */
}

#oxygenSlider::-moz-range-thumb {
  width: 16px;
  height: 24px;
  background: #cad2e0;
  cursor: grab;
  border: none;
  border-radius: 4px;
  position: relative;
  z-index: 3;
}

#oxygenSlider:active::-webkit-slider-thumb,
#oxygenSlider:active::-moz-range-thumb {
  cursor: grabbing;
}

/* --- Style for all scrollable lists inside submenus --- */
#medsList, #labTestList, #physicalExamList, #bedsideTestList, #radiologyTestList {
  flex-grow: 1; /* Allows the list to grow and fill available space */
  overflow-y: auto; /* Adds a vertical scrollbar only when needed */
  min-height: 0; /* Prevents a common flexbox scrolling issue */
}

/* --- Admission Plan Modal Styles --- */
.plan-form {
  text-align: left;
  margin-top: 20px;
}
.plan-section {
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #444;
}
.plan-section:last-child {
  border-bottom: none;
}
.plan-section h4 {
  margin-top: 0;
  margin-bottom: 12px;
  color: #ccc;
}
.plan-section label {
  display: block;
  margin: 10px 0 5px 0;
  font-size: 14px;
  color: #aaa;
}
.modal-content select,
.modal-content input[type="number"],
.modal-content textarea {
  width: 100%;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #555;
  background: #1e1e1e;
  color: #fff;
  box-sizing: border-box;
  font-size: 16px;
}

/* --- Scrollable Medication List in Admission Plan --- */
#planMedicationOrdersList {
    max-height: 25vh; /* Limit the height to 25% of the screen's height */
    overflow-y: auto;   /* Add a vertical scrollbar when needed */
    padding: 10px;
    margin-top: 10px;
    background-color: #1c1c1e; /* A slightly darker background for the list area */
    border-radius: 6px;
    border: 1px solid #444;
}
/* --- Admission Plan - Medication Order List Styles --- */
#planMedicationOrdersList .order-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  background-color: #1e1e1e;
  padding: 10px;
  border-radius: 6px;
  margin-bottom: 8px;
  border: 1px solid #444;
}
#planMedicationOrdersList .order-item .med-name {
  font-weight: bold;
  flex-grow: 1; /* Allow name to take up available space */
}
#planMedicationOrdersList .order-item .frequency-select {
  padding: 4px 6px;
  border-radius: 4px;
  border: 1px solid #555;
  background: #2a2a2e;
  color: #fff;
}
#planMedicationOrdersList .order-item .btn-remove-order {
  padding: 4px 10px;
  font-size: 14px;
  background-color: #7c3232;
}
#planMedicationOrdersList .order-item .btn-remove-order:hover {
  background-color: #a34141;
}

/* Style for the new pause button in the admission plan */
.order-item .btn-toggle-pause {
    padding: 4px 10px;
    font-size: 14px;
    background-color: #6c757d; /* A neutral gray */
}
.order-item .btn-toggle-pause:hover {
    background-color: #5a6268;
}

/* Style for the paused state */
.order-item.paused {
    opacity: 0.6;
    background-color: #222;
}
/* --- Admission Plan Checkbox Styles --- */
.checkbox-group {
  margin-top: 15px;
}
.checkbox-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.checkbox-item input[type="checkbox"] {
  width: auto;
  margin-right: 10px;
}
.checkbox-item label {
  margin: 0; /* Override default label margin */
  font-size: 16px;
  color: #fff;
}
#userInfo {
 display: flex;
  align-items: center;
  gap: 10px;
}
#user-session-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

#userInfo span {
    color: #fff;
    font-weight: bold;
    margin-right: 10px;
}

/* A general utility class to hide elements */
.hidden {
    display: none !important;
}

/* NEW STYLES for the top bar */
#top-ui-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    padding: 10px 20px;
    box-sizing: border-box; /* Ensures padding doesn't add to the width */
    display: flex;
    justify-content: space-between; /* Pushes children to opposite ends */
    align-items: center;
    z-index: 1000;
    transition: transform 0.3s ease-in-out; /* For smooth hiding/showing */
}

/* Add a rule for when the bar is hidden */
#top-ui-bar.hidden {
    transform: translateY(-100%); /* Slides the bar up out of view */
}

/* --- NEW: Session Stats in Top Bar --- */
#session-stats {
    display: flex;
    align-items: center;
    gap: 25px;
    /* This combination centers the element in the available space between the left and right controls */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #e0e0e0;
    font-size: 16px;
}

.stat-item i {
    color: #a0a0a0; /* A slightly dimmer color for the icon */
}


/* UPDATED STYLES for the user session controls */
#user-session-controls {
    /* REMOVE position: absolute, top, and right from the old rule */
    z-index: 1001;
    display: flex;
    align-items: center;
    gap: 10px;
}

#userInfo {
    display: flex;
    align-items: center; /* This is the key property for vertical alignment */
    gap: 10px;
}

#userInfo > * { /* This targets the <span> and <button> inside */
    margin: 0;   /* Removes any default browser margins */
}
.feedback-tabs {
    display: flex;
    border-bottom: 1px solid #555; /* A solid line to separate tabs from content */
}

/* Style for individual tab buttons (both active and inactive) */
.tab-link {
    padding: 10px 20px;
    cursor: pointer;
    border: 1px solid transparent; /* Start with a transparent border */
    border-bottom: none; /* No bottom border to start */
    background-color: #3a3a3a; /* Inactive background color */
    color: #ccc;
    font-size: 16px;
    border-radius: 6px 6px 0 0; /* Rounded top corners */
    margin-right: 5px;
    position: relative;
    top: 1px; /* Slightly push down to align with the bottom border */
}

.tab-link:hover {
    background-color: #4a4a4a;
}

/* Style for ONLY the active tab */
.tab-link.active {
    background-color: #2c2c2e; /* Match the content area background */
    border-color: #555; /* Give it a solid border */
    color: #fff;
    font-weight: bold;
}

.tab-content {
    display: none; /* Hide all tab content by default */
}

.tab-content.active {
    display: block; /* Show only the active tab's content */
}

/* --- Generic Modal Styles --- */

/* The semi-transparent backdrop */
.modal-backdrop {
    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: 2000;

    /* Hidden by default */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  pointer-events: none; /* NEW: Disable pointer events by default */

}

/* The state when the modal should be visible */
.modal-backdrop.visible {
    opacity: 1;
    visibility: visible;
  pointer-events: auto; /* RE-ENABLE pointer events only when visible */

}

/* The white content box inside the modal */
.modal-content {
    background-color: #2c2c2e;
    padding: 20px 30px;
    border-radius: 12px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5);
    width: 90%;
    max-width: 600px; /* Adjust as needed */
    opacity: flex; 

    /* A subtle pop-in animation */
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

.modal-backdrop.visible .modal-content {
    transform: scale(1) !important;
    opacity: 1 !important; 
    visibility: visible !important; 
}

#dosingModal.visible, #oxygenModal.visible {
    z-index: 2001;
}

.order-item {
    display: flex;            /* Aligns children in a row */
    align-items: center;      /* Vertically centers all items */
    gap: 15px;                /* Adds space between each item */
    padding: 10px;
    background-color: #3a3a3a;
    border-radius: 6px;
    margin-bottom: 8px;
}

.order-item .med-name {
    flex-grow: 1;             /* Allows the name to take up all extra space */
    font-weight: bold;
    color: #fff;
}

.order-item .med-dose {
    flex-shrink: 0;           /* Prevents the dose from shrinking */
    background-color: #2c2c2e;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.9em;
    color: #ccc;
}

.order-item .frequency-select {
    flex-shrink: 0;           /* Prevents the dropdown from shrinking */
    width: auto;              /* Fixes the "too wide" issue */
}

.order-item .btn-remove-order {
    flex-shrink: 0;           /* Prevents the button from shrinking */
}

/* --- Dosing Modal Style Overhaul --- */

/* Target the content box ONLY inside the dosing modal */
#dosingModal .modal-content {
    width: auto;          /* Let the content define the width */
    min-width: 300px;     /* Stop it from getting too narrow */
    text-align: center;   /* Center the "Set Dose for..." title */
}

/* This is the container for the preset dose buttons */
#doseChoices {
    display: flex;
    justify-content: center;
    gap: 12px;            /* Adds space between the buttons */
    margin-top: 20px;
    flex-wrap: wrap;      /* Allows buttons to wrap if needed */
}

/* A cleaner style for the dose buttons themselves */
#doseChoices .btn {
    background-color: #555;
    border: 1px solid #666;
    font-weight: bold;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

#doseChoices .btn:hover {
    background-color: #6a6a6a;
    transform: translateY(-2px); /* A subtle "lift" effect on hover */
}

/* --- Manual Dose Input Styles --- */

/* This is the container for the input box and the unit text (e.g., "mg") */
#manualDoseContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 20px 0;
}

/* This styles the actual input box */
#doseInput {
    width: 120px; /* You can adjust this width as needed */
    padding: 10px;
    font-size: 1.2em;
    font-weight: bold;
    text-align: center;
    border: 1px solid #555;
    background-color: #1c1c1e;
    color: #fff;
    border-radius: 6px;
}

/* This styles the unit text next to the box */
#doseUnitSpan {
    font-size: 1.1em;
    color: #ccc;
}

.modal-footer {
    display: flex;
    justify-content: center; /* This is the key property to center the buttons */
    align-items: center; /* This will vertically align the buttons */
    gap: 15px;               /* Adds some space between the buttons */
    margin-top: 25px;        /* Adds space above the buttons */
    padding-top: 15px;       /* Adds space above the buttons inside the border */
    border-top: 1px solid #444; /* Adds a nice separator line */
}

/* --- Style for the Admission Plan Medication Selection --- */

/* Target the button container specifically inside the 'Add Med' modal */
#addPlanMedModal .menu-button-grid {
    display: flex;
    flex-direction: column; /* This is the key: stack items vertically */
    gap: 5px;               /* Space between each button/row */
    margin-top: 15px;
    
    /* Make the list scrollable if it gets too long */
    max-height: 40vh;       /* Limit height to 40% of the viewport height */
    overflow-y: auto;       /* Add a scrollbar when needed */
    padding-right: 5px;     /* Add some space for the scrollbar */
}

/* Style the buttons inside the new column layout */
#addPlanMedModal .menu-button-grid .btn {
    width: 100%;              /* Make buttons fill the full width */
    text-align: left;         /* Align text to the left for a list-like feel */
    background-color: #3a3a3a;
    border: none;
    padding: 12px 15px;
}

#addPlanMedModal .menu-button-grid .btn:hover {
    background-color: #0d2e42; /* Highlight on hover */
    color: #fff;
}
/* --- Polishing the "Add Medication" Modal --- */

/* 1. Style for the Search Field */
.search-input {
    width: 100%;
    padding: 10px 15px;
    background-color: #1c1c1e;
    border: 1px solid #444;
    border-radius: 6px;
    color: #fff;
    font-size: 16px;
    box-sizing: border-box; /* Ensures padding is included in the width */
}

.search-input::placeholder {
    color: #888;
}

/* 2. Styles for the Modal Header and Close Button */
.modal-header {
    display: flex;
    justify-content: space-between; /* Pushes title and button to opposite ends */
    align-items: center;
    margin-bottom: 0px;
    border-bottom: 1px solid #444;
    padding-bottom: 10px;
}

.modal-header h2 {
    margin: 0; /* Remove default heading margin */
}

.btn-close {
    background: none;
    border: none;
    font-size: 2.2rem; /* Makes the '×' character larger */
    line-height: 1;
    color: #888;
    cursor: pointer;
    padding: 0 5px;
}

.btn-close:hover {
    color: #fff;
}

/* --- Fixed Size for "Add Medication" Modal --- */

/* Give the modal's content box a fixed height and turn it into a flex container */
#addPlanMedModal .modal-content {
    height: 75vh;          /* Set height to 75% of the viewport's height */
    max-height: 400px;     /* Set a max pixel height for very tall screens */
    display: flex;
    flex-direction: column;
}

/* Make the modal's body expand to fill the available vertical space */
#addPlanMedModal .modal-body {
    display: flex;
    flex-direction: column;
    gap: 15px; /* ✅ This creates consistent space between children */
    flex-grow: 1;
    overflow: hidden;
}

/* Make the scrollable list fill the new space inside the modal body */
#addPlanMedModal .menu-button-grid {
    flex-grow: 1;
    margin-bottom: 0;
}
/* --- Button Group Styles --- */
.button-group {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.btn-toggle {
    flex-grow: 1; /* Makes all buttons share the width equally */
    padding: 8px 12px;
    cursor: pointer;
    background-color: #3a3a3a; /* Default inactive style */
    border: 1px solid #555;
    color: #ccc;
    border-radius: 6px;
    font-size: 0.9em;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.btn-toggle:hover {
    background-color: #4a4a4a;
}

/* --- NEW: Consultation Speech Bubble --- */
.speech-bubble-popup {
    position: absolute;
    top: 33%; /* Position it higher up on the screen */
    right: 430px; /* Position it to the left of the consult menu (220px + 210px width) */
    width: 250px;
    background-color: #3a3a3a;
    border: 1px solid #555;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    z-index: 15;
    opacity: 0;
    transform: translateY(-50%) scale(0.95); /* Move it up by half its height to truly center it */
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none; /* Hidden by default */
}

.speech-bubble-popup.visible {
    opacity: 1;
    transform: translateY(-50%) scale(1);
    pointer-events: auto;
}

/* This creates the little triangle pointing to the right */
.speech-bubble-popup::after {
    content: '';
    position: absolute;
    top: 20px;
    left: 100%; /* Position it on the right edge of the bubble */
    margin-left: -1px; /* Overlap slightly to avoid gaps */
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent transparent #3a3a3a; /* Pointing left */
}

.speech-bubble-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    font-weight: bold;
    color: #fff;
    border-bottom: 1px solid #555;
}

.speech-bubble-content {
    padding: 15px;
    font-size: 0.9em;
    color: #e0e0e0;
    max-height: 300px;
    overflow-y: auto;
}

.btn-close-bubble {
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    color: #aaa;
    cursor: pointer;
    padding: 0;
    transition: color 0.2s ease;
}
.btn-close-bubble:hover {
    color: #fff;
}

.btn-toggle.active {
    background-color: #2274A5; /* Active/selected style */
    color: #fff;
    border-color: #2274A5;
}

/* --- Fieldset and Legend for Accessibility --- */
.plan-fieldset {
    border: none;
    padding: 0;
    margin: 10px 0 0 0;
}

.plan-legend {
    padding: 0;
    font-size: 14px;
    color: #aaa;
    margin-bottom: 5px;
}
/* --- Styles for the Disposition Modal --- */

/* Make the modal's content box shrink to fit its content */
#dispositionModal .modal-content {
    width: auto;      /* Let the content define the width */
    max-width: 500px; /* A smaller max-width for this simple modal */
    text-align: center;
}

/* This is the container for the "Send Home" and "Admit to Ward" buttons */
#dispositionModal .disposition-choices {
    display: flex;
    justify-content: center;
    gap: 15px;        /* Space between the buttons */
    margin: 20px 0;
    align-items: baseline;

}

/* --- Fixed Size for Feedback Modal --- */

/* Give the modal's content box a fixed height and make it a flex container */
#feedbackModal .modal-content {
    height: 80vh;          /* Set height to 80% of the viewport's height */
    max-height: 700px;     /* Set a max pixel height for very tall screens */
    display: flex;
    flex-direction: column;
}

/* Make the modal body (which contains tabs and content) fill the available space */
#feedbackModal .modal-body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
    overflow: hidden; /* Prevent the body itself from scrolling */
}

/* This is the container we added for the tab content panels */
.feedback-content-container {
    flex-grow: 1;           /* Make this container fill the space in the body */
    overflow-y: auto;       /* Make it scrollable */
    padding-right: 10px;    /* Add some space for the scrollbar */
}
 .feedback-task.solution {
    background-color: #333; /* A neutral background for the correct answer */
}
/* NEW: Use flexbox to arrange the monitoring buttons on the same row */
.button-toggle-group {
    display: flex;             /* Enable flexbox */
    flex-wrap: wrap;           /* Allow items to wrap to the next line */
    justify-content: flex-start; /* Align items to the start of the container */
    gap: 8px;                  /* NEW: Add an 8px gap between buttons, both horizontally and vertically */
    margin: 8px 0;             /* Adjust margin to be vertical only */
}


/* --- NEW: Style for checkbox items in modals --- */
.checkbox-item {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
  gap: 10px;
}
/* We can also make the buttons in this group not stretch to full width */
.button-toggle-group .btn-toggle {
    flex-grow: 0;
}
/* --- Styles for the Diagnosis Modal --- */

/* Make the modal's content box shrink to a more appropriate size */
#diagnosisModal .modal-content {
    width: auto;      /* Let the content define the width */
    max-width: 500px; /* Set a reasonable maximum width */
}

/* Style the text area for the diagnosis input */
#diagnosisModal #diagnosisInput {
    width: 100%;
    padding: 12px 15px; /* Adjust padding for a single line */
    font-size: 1em;
    box-sizing: border-box;
    
    /* Match the style of other inputs */
    background-color: #1c1c1e;
    border: 1px solid #444;
    border-radius: 6px;
    color: #fff;
    /* REMOVED min-height and resize properties */
}

/* --- Spacing Fix for Diagnosis Modal --- */

/* Turn the modal's content box into a flex container */
#diagnosisModal .modal-content {
    display: flex;
    flex-direction: column;
/* This will create consistent space between header, body, and footer */
}

/* This ensures the body of the diagnosis modal doesn't have extra empty space */
#diagnosisModal .modal-body {
    display: flex;
    flex-direction: column;
    flex-grow: 0; /* This is the key: it prevents the body from expanding unnecessarily */
}

/* --- Case Report Overhaul --- */

/* New Header Styles */
.feedback-header {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #444;
    margin-bottom: 15px;
    position: relative;
}

.close-button { /* Position the close button */
    position: absolute;
    top: -10px;
    right: -10px;
}
.score-circle {
    position: relative; /* This is essential */
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    
    /* The background is NOW ONLY the colored progress ring */
    background: conic-gradient(
        #4caf50 0%,
        #4caf50 var(--score-percent, 0%),
        var(--bad-score-color, #f44336) var(--score-percent, 0%),
        var(--bad-score-color, #f44336) 100%
    );
}

/* This ::before pseudo-element creates the "hole" in the middle */
.score-circle::before {
    content: '';
    position: absolute;
    border-radius: 50%;
    
    /* Make the hole slightly smaller than the main circle. 
       A width/height of 80% creates a ring that is 10% thick on each side. */
    width: 75%;
    height: 75%;
    
    /* Match the color of your modal's background */
    background-color: #2c2c2e;
}

.score-circle span {
    font-size: 1.4 em;
    font-weight: bold;
    color: #fff;
    
    /* We need to use z-index to make sure the text appears on top of the "hole" */
    position: relative; 
    z-index: 2;
}

.diagnosis-summary h2 {
    margin: 0 0 5px 0;
}

.correct-diagnosis {
    color: #ccc;
    font-size: 0.9em;
}

.correct-diagnosis span {
    font-weight: bold;
    color: #fff;
}


/* Minimalistic Content Styles */
.feedback-content-container h5, .feedback-content-container h6 {
    margin-top: 20px;
    margin-bottom: 10px;
    color: #ccc;
    border-bottom: 1px solid #444;
    padding-bottom: 5px;
}


.feedback-items-grid {
    display: grid; /* Use a grid layout instead of flex */
    
    /* Create as many columns as can fit, with a minimum width of 200px each */
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); 
    
    gap: 5px; /* Space between the items */
}

.feedback-task {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 6px; /* Slightly reduced padding */
    border-radius: 3px;
    background-color: #3a3a3a; /* Give each item a subtle background */
    border-left: 4px solid transparent;
}

.feedback-task.correct {
    border-left-color: #4caf50; /* Green for correct */
}

.feedback-task.missed {
    border-left-color: #f44336; /* Red for missed */
}

.task-icon {
    font-size: 1.2em;
}

/* --- Case Report Header Polish --- */

/* Style for the new summary section */
.feedback-summary {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 15px 0;
    margin-bottom: 15px;
    border-bottom: 1px solid #444;
}

.diagnosis-display {
    font-size: 2.0em;      /* Make the font size larger */
    font-weight: 300;      /* Use a lighter font weight for the "Correct Diagnosis:" text */
    color: #ccc;
    text-align: center;    /* Center the text for a more formal look */
    margin-top: 10px;      /* Add some space below the score circle */
}

/* This targets the <span> inside, which holds the actual diagnosis name */
.diagnosis-display span {
    display: block;        /* Puts the diagnosis on a new line */
    margin-top: 5px;       /* Adds space above the diagnosis text */
    font-weight: 600;      /* Make the diagnosis itself bold */
}

/* These color rules remain the same */
.diagnosis-display.diagnosis-correct span {
    color: #4caf50;
}

.diagnosis-display.diagnosis-incorrect span {
    color: #f44336;
}

.importance-columns {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Creates two equal-width columns */
    gap: 25px;                      /* Adds space between the columns */
    align-items: start;             /* Aligns columns to the top */
}

.column {
    /* This is the container for each column's content.
       You can add borders or backgrounds here if you like. */
}
.feedback-content-container h5 {
    font-size: 1.2em;      /* Make it larger */
    font-weight: 600;      /* Make it bolder */
    color: #ffffff;        /* Make it bright white */
    margin-top: 25px;      /* Add more space above it */
    margin-bottom: 0px;
    padding-bottom: 8px;
    border-bottom: 1px solid #555;
}

/* Style for the sub-category titles (e.g., "Critical") */
.feedback-content-container h6 {
    font-size: 0.9em;      /* Make it smaller */
    font-weight: 500;      /* Make it less bold */
    color: #aaa;           /* Make it a dimmer gray */
    margin-bottom: 10px;
    border-bottom: none;   /* Remove the underline to reduce visual noise */
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- Final Lab Result Layout --- */

/* --- Final, Consolidated Lab Result Styles --- */

/* --- Corrected Lab Result Layout --- */

/* --- Final Lab Result Layouts --- */

/* 1. DEFAULT STYLE for single-line results (e.g., B-Hemoglobin) */
.lab-result-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 8px 0;
    border-bottom: 1px solid #444;
}

.lab-result-name {
    font-weight: bold;
    color: #fff;
}

.lab-result-value {
    color: #ccc;
}

.lab-result-value.abnormal {
    color: #F86A6C;
    font-weight: bold;
}


/* 2. OVERRIDE STYLE for panel results (e.g., Arteriell Blodgas) */
.lab-result-item.is-panel {
    display: block; /* ✅ This breaks the flex row and stacks the items */
    padding: 10px 0;
}

.lab-result-item.is-panel .lab-result-name {
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid #555; /* Adds a separator line */
    display: block; /* Ensures it takes its own line */
}

.lab-result-item.is-panel .lab-result-value {
    text-align: left; /* Aligns the grid to the left */
}


/* 3. Style for the grid itself (remains the same) */
.abg-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 5px 15px; /* A bit more space */
    max-width: 250px; /* Prevents it from getting too wide */
}

.abg-grid span:nth-child(odd) {
    text-align: left;
    color: #ccc;
}

.abg-grid span:nth-child(even) {
    text-align: right;
    font-weight: bold;
    white-space: nowrap; /* --- FIX: Prevents the value and unit from wrapping to a new line --- */
}

.abg-grid span.abnormal {
    color: #F86A6C;
}
.patient-message-wrapper {
    align-self: flex-start;
    max-width: 80%;
}

.user-message-wrapper {
    align-self: flex-end;
    max-width: 80%;
}

.chat-bubble-label {
    font-size: 0.75rem;
    color: #888;
    margin-left: 10px;
    margin-bottom: 2px;
}


/* --- Prescription & Checkbox List Styles --- */

/* This turns the grid into a single, scrollable column */
.checkbox-grid {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 15px;
    
    /* This is the key to making it scrollable with a fixed height */
    height: 35vh; /* Limit height to 35% of the screen */
    overflow-y: auto;   /* Add a scrollbar when needed */
    padding: 5px;
    background-color: #1c1c1e; /* A slightly darker background for the list */
    border-radius: 6px;
    border: 1px solid #444;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background-color: #3a3a3a;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.checkbox-label:hover {
    background-color: #4a4a4a;
}

/* --- Selected Prescriptions Area --- */
#selectedPrescriptionsContainer {
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid #444;
}

#selectedPrescriptionsContainer h6 {
    margin: 0 0 10px 0;
    color: #aaa;
    font-size: 0.9em;
    text-transform: uppercase;
}

#selectedPrescriptionsList {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 24px; /* Prevents layout shift when empty */
}

.selected-item-tag {
    background-color: #2274A5; /* Use the same blue as toggle buttons */
    color: #fff;
    padding: 5px 10px;
    border-radius: 12px; /* Pill shape */
    font-size: 0.9em;
}

.no-items-message {
    color: #888;
    font-style: italic;
}

/* --- Button Group Styles --- */
.button-group {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}


.btn-secondary {
    background-color: #6c757d;
}

.btn-secondary:hover {
    background-color: #5a6268;
}

/* --- Case History Modal Styles --- */
.history-container {
    max-height: 60vh;
    overflow-y: auto;
    padding-right: 10px; /* Space for scrollbar */
}

.history-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}

.history-table th, .history-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #444;
}

.history-table th {
    background-color: #3a3a3c;
    font-weight: 600;
    color: #eee;
    position: sticky;
    top: 0;
    /* --- FIX: Give the header a higher stacking order than the table rows --- */
    z-index: 10;
}

.history-table tbody tr:hover {
    background-color: #3a3a3c;
}

.history-table .score-cell {
    font-weight: bold;
    text-align: right;
    font-size: 1.1em;
}

.history-table .no-items-message {
    padding: 20px;
    text-align: center;
}

.history-table .rank-cell {
    font-weight: bold;
    font-size: 1.2em;
    text-align: center;
}

.leaderboard-avatar {
    width: 40px;
    height: 40px;
    position: relative;
    /* Use the base image as a mask for the head shape */
    background-image: url('/images/character_base.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-blend-mode: multiply;
    -webkit-mask-image: url('/images/character_base.png');
    mask-image: url('/images/character_base.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.leaderboard-hair {
    position: absolute;
    width: 150%;
    height: 150%;
    top: -25%;
    left: -25%;
    background-blend-mode: multiply;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 1;
}

.leaderboard-hat {
    position: absolute;
    width: 150%;
    height: 150%;
    top: -25%;
    left: -25%;
    z-index: 2; /* On top of hair */

    /* Copy masking and blending properties */
    background-blend-mode: multiply;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.history-patient-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.history-patient-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    background-color: #444;
}

.score-cell-content {
    display: flex;
    align-items: center; /* This keeps the circle vertically centered */
    justify-content: center; /* --- FIX: Center the content horizontally --- */
    gap: 0; /* Gap is no longer needed */
}

.score-circle-small {
    position: relative;
    width: 36px; /* --- FIX: Increased size --- */
    height: 36px; /* --- FIX: Increased size --- */
    border-radius: 50%;
    display: grid; /* Use grid to center the text */
    place-items: center;
    background: conic-gradient(
        var(--good-score-color, #4caf50) 0%, /* Use the dynamic color */
        var(--good-score-color, #4caf50) var(--score-percent, 0%), /* Green part of the ring */
        var(--bad-score-color, #444) var(--score-percent, 0%), /* The "unfilled" part uses the new color */
        var(--bad-score-color, #444) 100%
    );
    flex-shrink: 0; /* Prevents the circle from shrinking */
}

.score-circle-small::before {
    content: '';
    position: absolute;
    border-radius: 50%;
    width: 75%;
    height: 75%;
    background-color: #3a3a3c; /* Match the table row hover color for the "hole" */
}

.score-circle-small span {
    position: relative;
    z-index: 2;
    font-size: 12px; /* --- FIX: Increased font size --- */
    font-weight: bold;
    color: #fff;
}

.history-table .history-main-row {
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.history-table .history-main-row:hover {
    background-color: #4f4f52; /* Slightly lighter for hover effect */
}

.history-details-row.hidden {
    display: none;
}

.history-details-row td {
    padding: 0;
    background-color: #222426; /* Darker background for the details panel */
}

.history-details-content {
    padding: 15px 25px;
}

.history-details-content h6 {
    margin: 0 0 10px 0;
    color: #ccc;
    font-size: 1em;
    font-weight: 600;
    border-bottom: 1px solid #444;
    padding-bottom: 5px;
    margin-top: 15px;
}

.history-details-content h6:first-child {
    margin-top: 0;
}

.history-details-content ul {
    margin: 0;
    padding-left: 20px;
}

/* --- Home Medication List Styles --- */
.home-med-item {
    display: flex;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #3f3f44;
    transition: opacity 0.3s ease;
}

.home-med-item.paused {
    opacity: 0.5;
}

.home-med-item.paused .home-med-name {
    text-decoration: line-through;
}

.home-med-item.pending-removal {
    background-color: #3a2e2e;
    justify-content: space-between;
    opacity: 1; /* Start fully visible */
}

.home-med-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.home-med-name {
    font-weight: bold;
    width: 120px; /* Give the name a fixed width */
    flex-shrink: 0; /* Prevent it from shrinking if space is tight */
    white-space: nowrap; /* Keep the name on one line */
    overflow: hidden; /* Hide any overflow */
    text-overflow: ellipsis; /* Add '...' if the name is too long */
}

.home-med-inputs {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
}

.home-med-dose-input, .home-med-freq-input {
    width: 75px !important;
    max-width: 75px !important;
    padding: 4px 6px;
    background-color: #1c1c1e;
    border: 1px solid #555;
    color: #fff;
    border-radius: 4px;
    text-align: center;
    font-size: 0.9em;
    box-sizing: border-box; /* This is the key fix */
}

.home-med-unit {
    color: #aaa;
    min-width: 25px;
}

.home-med-inputs .freq-separator {
    color: #aaa;
    font-weight: bold;
    margin: 0 5px;
}

.home-med-dose {
    font-size: 0.9em;
    color: #aaa;
}

.home-med-actions {
    margin-left: auto; /* This pushes the button's container to the far right */
}

.home-med-actions .btn-small {
    padding: 4px 8px;
    font-size: 0.8em;
    background-color: #555;
}
.home-med-actions .btn-small:hover {
    background-color: #666;
}

.home-med-actions .btn-remove {
    background-color: #7c3232;
}

.home-med-actions .btn-remove:hover {
    background-color: #a34141;
}

.undo-text {
    font-style: italic;
    color: #aaa;
}

.btn-undo {
    background-color: #6c757d !important; /* A neutral gray */
}

.btn-undo:hover {
    background-color: #5a6268 !important; /* A darker gray for hover */
}

/* --- Feedback Textarea --- */
.feedback-textarea {
    width: 100%;
    min-height: 80px;
    margin-top: 20px;
    padding: 10px;
    background-color: #1c1c1e;
    border: 1px solid #444;
    border-radius: 6px;
    color: #fff;
}

/* --- Star Rating Modal --- */
.star-rating-container {
    display: flex;
    justify-content: center;
    gap: 10px;
    font-size: 48px; /* Large stars */
    margin-top: 20px;
    color: #888; /* Default empty star color */
}

.star {
    cursor: pointer;
    transition: color 0.2s ease, transform 0.2s ease;
}

/* Style for stars when the container is hovered over */
.star-rating-container:hover .star {
    color: #FFC107; /* Yellow color for potential rating */
}

/* Style for stars that are "before" the one you are hovering on */
.star-rating-container .star:hover ~ .star {
    color: #888; /* Reset stars after the hovered one to empty */
}

.star.selected,
.star-rating-container .star.selected ~ .star {
    color: #FFC107;
}

.star:hover {
    transform: scale(1.2); /* Make the hovered star slightly larger */
}

/* --- Admin Page Styles --- */
.admin-container {
    display: flex;
    height: 100vh;
    background-color: #2c313a; /* A medium-dark blue-gray background */
}

.admin-sidebar {
    width: 250px;
    flex-shrink: 0;
    background-color: #21252b; /* A darker sidebar background */
    border-right: 1px solid #444;
    padding: 20px;
}

.btn-new-case {
    width: 100%;
    margin-bottom: 20px;
    background-color: #3d8d89; /* A slightly desaturated teal */
}

#patientList {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.patient-list-item {
    padding: 10px;
    background-color: #2c313a;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.patient-list-name {
    font-weight: bold;
}

.patient-list-rating {
    font-size: 0.8em;
    color: #888;
}

.patient-list-rating[style*="--rating: 0"] {
    color: #666; /* Even dimmer for no ratings */
}

.patient-list-item:hover {
    background-color: #4a4a4a;
}

.admin-main-content {
    flex-grow: 1;
    padding: 25px 40px;    
    color: #e0e0e0; /* Light text for the new dark background */
    overflow-y: auto;
}

#patientForm {
    margin-top: 20px;
}

#patientForm h3 {
    margin-top: 30px;
    margin-bottom: 10px;
    border-bottom: 1px solid #444;
    padding-bottom: 8px;
    color: #a9c5e8; /* Use the accent color for main headers */
}

.sub-header {
    font-size: 1.1em;
    color: #aaa;
    margin-top: 40px; /* More space above for separation */
    margin-bottom: 15px;
    border-top: 1px solid #444;
    padding-top: 15px;
}
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px 20px;
}

.compact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 15px 20px;
}
.form-group {
    display: flex;
    flex-direction: column;
}

.form-group label {
    margin-bottom: 5px;
    font-size: 0.9em;
    color: #aaa;
}

.form-group input[type="text"],
.form-group input[type="number"],
.form-group textarea {
    width: 100%;    
    padding: 8px;
    background-color: #1c1c1e;
    border: 1px solid #555;
    border-radius: 4px;
    color: #fff;
    font-size: 1em;
    box-sizing: border-box;
}
.form-group select {
    padding: 8px;
    background-color: #1c1c1e;
    border: 1px solid #555;
    border-radius: 4px;
    color: #fff;
    font-size: 1em;
}

.form-group textarea {
    resize: vertical;
    min-height: 60px;
    font-family: inherit;
}

.form-actions {
    margin-top: 30px;
    display: flex;
    gap: 15px;
}

.btn-remove {
    background-color: #a34141;
}

.admin-sidebar h3 {
    margin-top: 25px;
    margin-bottom: 10px;
    font-size: 1em;
    color: #8a9eb5; /* A softer blue-gray for sub-headers */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-top: 1px solid #444;
    padding-top: 15px;
}

#activePatientList {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 20px;
}

.active-patient-item {
    padding: 8px 10px;
    background-color: #2c3e50; /* A distinct blue for active items */
    border-left: 3px solid #3498db;
    border-radius: 4px;
    font-size: 0.9em;
}

/* --- Admin Page Action Selector Styles --- */
.form-group-full {
    grid-column: 1 / -1; /* Make this group span all columns */
}

.selected-actions-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px;
    background-color: #2a2a2e; /* A slightly lighter dark background for containers */
    border: 1px solid #444;
    border-radius: 6px;
    min-height: 40px;
    margin-bottom: 10px;
}

.action-tag {
    background-color: #3498db;
    color: #fff;
    padding: 5px 10px;
    border-radius: 12px;
    font-size: 0.9em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-select-actions {
    align-self: flex-start;
    background-color: #4a4a4a;
}

/* Modal specific styles */
#actionSelectorModal .modal-content {
    height: 80vh;
    display: flex;
    flex-direction: column;
}

#actionSelectorModal .modal-body {
    flex-grow: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#actionSelectorModal .search-input {
    margin-bottom: 15px; /* Space below search input */
}

.action-category-list-container { /* This is the scrollable part */
    flex-grow: 1;
    overflow-y: auto;
    padding-right: 10px; /* Space for scrollbar */
    display: flex;
    flex-direction: column;
    gap: 20px; /* Space between category groups */
}

.action-category-group h4 {
    margin-top: 0;
    margin-bottom: 10px;
    border-bottom: 1px solid #555;
    padding-bottom: 5px;
    color: #eee;
    font-size: 1.1em;
}

.action-checkbox-grid { /* Specific grid for actions within categories */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px;
}

/* Reuse existing .checkbox-label styles */
.action-checkbox-grid .checkbox-label {
    background-color: #3a3a3a;
    border: 1px solid #444;
    border-radius: 4px;
    padding: 8px 10px;
}

.action-checkbox-grid .checkbox-label:hover {
    background-color: #4a4a4a;
}

/* Style for OR group checkboxes in the modal */
.action-checkbox-grid .checkbox-label.is-or-group {
    grid-column: 1 / -1; /* Make the group span all columns */
    background-color: #2c3e50;
}

/* Style for checkboxes that are "frozen" during grouping mode */
.checkbox-label.is-frozen {
    background-color: #3a3a3a;
    border-style: dashed;
}

/* --- Styles for cross-category action indicators --- */
.checkbox-label.is-in-other-category {
    opacity: 0.6;
    background-color: #222;
    cursor: not-allowed;
    position: relative;
}

.checkbox-label.is-in-other-category::after {
    content: attr(data-other-category); /* Use the data attribute for the text */
    position: absolute;
    top: 2px;
    right: 5px;
    font-size: 0.7em;
    font-weight: bold;
    color: #fff;
    background-color: #6c757d; /* A neutral gray */
    padding: 2px 5px;
    border-radius: 8px;
}

.checkbox-label.is-in-other-category[data-other-category="Critical"]::after,
.checkbox-label.is-in-other-category[data-other-category="Contraindicated"]::after {
    background-color: #a34141; /* Red for more important categories */
}

/* --- Home Medication List Styles --- */
.item-list-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    background-color: #2a2a2e;
    border: 1px solid #444;
    border-radius: 6px;
    min-height: 40px;
    margin-bottom: 10px;
}

.home-med-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background-color: #3a3a3a;
    border-radius: 4px;
}

.home-med-list-item span {
    font-weight: bold;
}

/* --- Add Home Med Modal --- */
#addHomeMedModal .modal-content {
    max-width: 500px;
}
/* --- Make the Home Meds modal smaller --- */
#homeMedicationModal .modal-content {
    max-width: 500px; /* Set a reasonable max-width */
    height: auto;
    text-align: center; /* Center the header and other content */
}

.search-results-list {
    max-height: 150px;
    overflow-y: auto;
    background-color: #1c1c1e;
    border: 1px solid #555;
    border-radius: 4px;
    margin-top: 5px;
}

.search-result-item {
    padding: 10px;
    cursor: pointer;
}

.search-result-item:hover, .search-result-item.selected {
    background-color: #3498db;
    color: #fff;
}

.search-results-list:empty {
    display: none;
}

/* Styles for highlighted items in search results */
.search-result-item.is-critical {
    background-color: #2980b9; /* Blue for critical */
    color: #fff;
}

.search-result-item.is-contraindicated {
    background-color: #c0392b; /* Red for contraindicated */
    color: #fff;
}

/* Style for the unit display next to an input */
.input-unit-display {
    align-self: center;
    margin-left: -35px; /* Position it inside the input field area */
    color: #888;
    pointer-events: none; /* Make it non-interactive */
}

/* --- Anamnesis Checklist Styles --- */
.anamnesis-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background-color: #3a3a3a;
    border-radius: 4px;
}

.anamnesis-item-text {
    flex-grow: 1;
}

.anamnesis-item-text .question {
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
}

.anamnesis-item-text .keywords {
    font-size: 0.85em;
    color: #ccc;
    font-style: italic;
}

.anamnesis-item-actions .btn-secondary,
.anamnesis-item-actions .btn-remove {
    padding: 4px 8px;
    font-size: 0.8em;
    margin-left: 5px;
}

/* --- Anamnesis Modal --- */
.keyword-input-group {
    display: flex;
}

.keyword-tag-container {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 10px;
}

.keyword-tag {
    background-color: #555;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.9em;
    display: flex;
    align-items: center;
}

.keyword-tag .remove-keyword {
    margin-left: 8px;
    cursor: pointer;
    font-weight: bold;
    color: #aaa;
}

/* --- Rating Modal Text Container --- */
#ratingTextContainer {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
}

/* --- Admin Home Med Pause Recommendation Badge --- */
.pause-rec-badge {
    display: inline-block;
    padding: 2px 6px;
    font-size: 0.7em;
    font-weight: bold;
    border-radius: 8px;
    color: #fff;
    vertical-align: middle;
}
.pause-rec-badge.pause {
    background-color: #c0392b; /* Red */
}
.pause-rec-badge.continue {
    background-color: #27ae60; /* Green */
}
/* Style for the Arterial Blood Gas Grid */
.abg-grid {
  display: grid; /* Tells the browser to use a grid layout */
  grid-template-columns: auto 1fr; /* Two columns: label size adjusts, value takes remaining space */
  gap: 2px 10px; /* Spacing between rows and columns */
  margin-top: 5px;
  font-size: 0.9em;
}

/* Styles the individual value spans if they are abnormal */
.abg-grid .abnormal {
  color: #ff6b6b; /* Reddish color */
  font-weight: bold;
}

/* Ensures the container div handles the grid layout nicely */
.lab-result-item.is-panel {
    display: block; /* Override the default flex layout for panels */
}
.lab-result-item.is-panel .lab-result-name {
    display: block; /* Make the name take its own line */
    margin-bottom: 5px; /* Add space below the name */
}
.lab-result-item.is-panel .lab-result-value {
   /* No specific styles needed here now */
}

/* --- Admission Plan Modal Enhancements --- */

.plan-disposition-display {
  background-color: #1c1c1e; /* Darker background like an input field */
  border: 1px solid #444;
  border-radius: 6px;
  padding: 10px 15px;
  margin-bottom: 20px;
  font-size: 1em;
  color: #e0e0e0; /* Match h4 color */
}

.plan-disposition-display strong {
  color: #a0a0a0; /* Slightly different color for the "Intervention:" label */
  margin-right: 0.5em;
}

/* --- Large Modal Sizing --- */
.modal-content.large-modal {
    height: 85vh; /* Set a relative height */
    max-height: 800px; /* Set a max pixel height */
    display: flex;
    flex-direction: column;
}
.large-modal .modal-body {
    flex-grow: 1; /* Allow the body to fill the available space */
    overflow-y: auto; /* Make only the body scrollable */
    padding-right: 15px; /* Add some space for the scrollbar */
}

/* --- Patch Notes Styles --- */
#patchNotesContent {
    line-height: 1.6;
    color: #e0e0e0;
}

#patchNotesContent h1,
#patchNotesContent h2,
#patchNotesContent h3 {
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    padding-bottom: 0.3em;
    border-bottom: 1px solid #444;
    color: #fff;
}
#patchNotesContent ul { padding-left: 20px; }
#patchNotesContent code { background-color: #1c1c1e; padding: 2px 5px; border-radius: 4px; }

/* --- iPad Specific Adjustments --- */
body.ipad #app-container,
body.ipad #gameCanvas {
    width: 100vw;
    height: 100vh;
}

/* --- NEW: Ambulance Report Modal Style --- */
.report-content-box {
    background-color: rgba(0, 0, 0, 0.2); /* Use a semi-transparent dark background */
    border: 1px solid rgba(255, 255, 255, 0.1); /* A subtle light border */
    border-radius: 6px;
    padding: 12px 15px;
    margin-top: 10px;
    white-space: pre-wrap; /* This preserves line breaks from the textarea */
    max-height: 40vh;
    overflow-y: auto;
}

/* --- NEW: Subtle Notification Styles --- */
.subtle-notification {
    position: fixed; /* Position it relative to the viewport */
    top: 15px;
    left: 250px; /* Position it next to the vitals popup */
    color: #fff;
    padding: 10px 20px;
    background-color: #5a2d2d; /* Default: Dark red background */
    border: 2px solid #c0392b; /* Default: Red border */
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    z-index: 1500;
    cursor: pointer;
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform: translateY(-20px);
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

/* Default/Info (Blue) Style */
.subtle-notification.info {
    background-color: #2c3e50; /* A distinct blue color */
    border: 2px solid #3498db; /* A brighter blue for the border */
}

/* NEW: Intubation (Blue) Style */
.subtle-notification.intubation {
    background-color: #2c3e50; /* A distinct blue color */
    border: 2px solid #3498db; /* A brighter blue for the border */
}

/* NEW: Ambulance (Red) Style */
.subtle-notification.ambulance {
    background-color: #5a2d2d; 
    border: 2px solid #c0392b;
}

/* NEW: General Condition (Yellow/Orange) Style - Persistent */
.subtle-notification.general-condition {
    background-color: #5a4a2d; /* Darker orange/brown background */
    border: 2px solid #f39c12; /* Bright orange border */
    max-width: 200px; /* Smaller max width */
}

.subtle-notification.visible {
    transform: translateY(0);
    opacity: 1;
}

/* --- NEW: Adjust notification position when Top UI Bar is visible --- */
#top-ui-bar:not(.hidden) ~ .subtle-notification {
    top: 10px; /* Align with the buttons in the top bar */
}

.btn-close-notification {
    background: none;
    border: none;
    color: inherit;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    opacity: 0.7;
    transition: opacity 0.2s;
}
.btn-close-notification:hover {
    opacity: 1;
}

/* --- NEW: Unique styles for the New Player Hint Notification --- */
.player-hint-notification {
    position: fixed;
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%) scale(0.9); /* Center it and start slightly smaller */
    background-color: #3d4a58; /* A neutral, calm blue-gray */
    color: #e8f0f8;
    max-width: 450px; /* NEW: Set a max-width to make it narrower */
    padding: 20px 45px 20px 25px; /* A bit more padding */
    border-radius: 8px;
    border: 1px solid #5a6a7e;
    box-shadow: 0 5px 15px rgba(0,0,0,0.4);
    z-index: 2000;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: transform 0.3s ease-out, opacity 0.3s ease-out; /* Animate transform and opacity */
    opacity: 0; /* Start invisible */
    pointer-events: none; /* Don't interact with it when hidden */
}

.player-hint-notification.visible {
    transform: translate(-50%, -50%) scale(1); /* Pop to full size */
    opacity: 1; /* Fade in */
    pointer-events: auto; /* Allow interaction when visible */
}

/* --- NEW: Modifier class to position the hint next to the vitals popup --- */
.player-hint-notification.hint-position-vitals {
    top: 370px; /* Position it vertically centered with the vitals popup header */
    left: 250px; /* Position to the right of the vitals popup (15px left + 220px width + 15px margin) */
    max-width: 220px; /* NEW: Set a max-width to encourage text wrapping */
    border-radius: 6px; /* Slightly rounder corners for a softer look */
    /* Override the centering transform and animate from above */
    transform: translate(0, -50%) scale(0.9);
    opacity: 0;
}

.player-hint-notification.hint-position-vitals.visible {
    /* Animate into the new position */
    transform: translate(0, -50%) scale(1);
    opacity: 1;
}

.player-hint-notification.hint-position-room3 {
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    max-width: 200px;
    text-align: center;
    /* Override centering and animate from above */
    transform: translate(-50%, -150%) scale(0.9);
    opacity: 0;
}

.player-hint-notification.hint-position-room3.visible {
    /* Animate into the new position */
    transform: translate(-50%, 0) scale(1);
    opacity: 1;
}

.player-hint-notification.hint-position-anamnesis {
    top: 80px; /* Align with the anamnesis button */
    right: 235px; /* Position to the left of the 220px wide roomMenu */
    left: auto; /* Override the default left positioning */
    max-width: 180px;
    text-align: center;
    /* Override centering and animate from the right */
    transform: translateX(100%) scale(0.9);
    opacity: 0;
}

.player-hint-notification.hint-position-anamnesis.visible {
    transform: translateX(0) scale(1);
    opacity: 1;
}

/* --- NEW: Styles for the Ambulance Report Hint --- */
.ambulance-report-hint {
    flex-direction: column; /* Stack items vertically */
    align-items: stretch;   /* Make items fill the width */
    text-align: center;
    padding: 25px; /* Adjust padding */
    background-color: #222; /* Neutral dark gray/black */
    border: 1px solid #444; /* Neutral border */
}

.ambulance-report-hint h4 {
    margin: 0 0 10px 0;
    font-size: 1.2em;
}

.ambulance-report-hint p {
    margin: 0 0 5px 0;
    font-weight: normal;
    color: #f0d0d0;
}

.player-hint-notification p {
    margin: 0;
    font-weight: 600;
}

.btn-close-hint {
    position: absolute;
    top: 5px;
    right: 5px;
    background: none;
    border: none;
    font-size: 20px;
    color: #e8f0f8;
    opacity: 0.7;
    cursor: pointer;
}
.btn-close-hint:hover {
    opacity: 1;
}
.subtle-notification p {
    margin: 0;
    font-weight: bold;
}

/* --- Character Creator Styles --- */
.character-creator-container {
    display: flex;
    gap: 30px;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    background: #222;
    padding: 15px;
    border-radius: 8px;
    gap: 20px;
}

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

.avatar-wrapper {
    position: relative;
    width: 80px;
    height: 80px;
}

.avatar-head {
    width: 100%;
    height: 100%;
    background-color: #f1c27d; /* Default skin */
    position: relative;
    /* Add the image as a background to show contours */
    background-image: url('/images/character_base.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    /* Blend the background color (skin tone) with the image (contours) */
    background-blend-mode: multiply;
    /* Use the PNG as a mask so the background color fills the shape */
    -webkit-mask-image: url('/images/character_base.png');
    mask-image: url('/images/character_base.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.avatar-hair {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #4a3b2a; /* Default hair */
    z-index: 1;
}

.avatar-hat {
    position: absolute;
    width: 150%;
    height: 150%;
    top: -25%;
    left: -25%;
    background-color: #ffffff; /* Default hat color */
    z-index: 2; /* On top of hair */
    /* Masking and blending properties will be set by JS */
    display: none; /* Hidden by default */
}

.character-controls {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 200px;
}

.character-controls input[type="color"] {
    width: 100%;
    height: 40px;
    padding: 0;
    border: none;
    cursor: pointer;
}

/* --- Compact Character Creator Styles --- */
.form-group-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.form-group-row .form-group {
    flex: 1;
    align-items: center;
}

.form-group-row label {
    font-size: 0.8em;
    margin-bottom: 2px;
}

.form-group-row input[type="color"] {
    height: 30px;
    width: 100%;
}

/* --- Carousel Selector --- */
.carousel-control {
    display: flex;
    align-items: center;
    justify-content: center; /* Center everything */
    gap: 10px; /* Space between arrows and image */
    background-color: transparent; /* Remove background */
    border: none; /* Remove border */
    padding: 0;
}

.carousel-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 120px; /* Increased size */
    height: 100px; /* Reduced height since text is gone */
}

.carousel-display img {
    width: 100px; /* Increased size */
    height: 100px; /* Increased size */
    object-fit: contain;
    margin-bottom: 0;
}

.carousel-display span {
    font-size: 0.85em;
    color: #ccc; /* Slightly dimmer text */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Tighten spacing for character controls */
.character-controls .form-group {
    gap: 0;
}

.btn-carousel {
    background: transparent; /* Transparent background */
    border: none; /* No border */
    color: #888; /* Subtle arrow color */
    width: 24px;
    height: 24px;
    font-size: 1.2em; /* Larger arrow character */
    padding: 0;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: color 0.2s, transform 0.1s;
}

.btn-carousel:hover {
    color: #fff; /* Brighten on hover */
    transform: scale(1.2); /* Slight scale up */
    background: transparent; /* Ensure no background on hover */
}
/* Add this to your game-style.css file */

.review-question {
    margin-bottom: 25px;
}

.review-question p {
    margin: 0 0 10px 0;
    font-weight: 600;
    color: #e0e0e0;
}

.modal-body {
    /* --- NEW: Add space between header and body content --- */
    padding-top: 20px;
}

/* Star Rating */
.star-rating-group {
    display: inline-block;
    direction: rtl; /* Right to left to make the hover effect work correctly */
}
.star-rating-group input[type="radio"] {
    display: none;
}
.star-rating-group label {
    font-size: 36px;
    color: #888;
    cursor: pointer;
    transition: color 0.2s;
}
.star-rating-group input[type="radio"]:checked ~ label,
.star-rating-group label:hover,
.star-rating-group label:hover ~ label {
    color: #FFC107;
}

/* Number Rating (1-5) */
.number-rating-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
/* --- NEW: Center the rating groups --- */
.number-rating-group.centered-group {
    justify-content: center;
    gap: 20px; /* Add more space between labels and numbers */
}
.number-rating-group > span {
    font-size: 0.8em;
    color: #aaa;
    flex-shrink: 0;
}
.rating-numbers {
    display: flex;
    justify-content: center;
    flex-grow: 1;
}

/* --- NEW: Allow semester blocks to wrap --- */
.semester-group {
    flex-wrap: wrap;
    justify-content: flex-start; /* Align blocks to the start */
}
.rating-numbers input[type="radio"] {
    display: none;
}
.rating-numbers label {
    display: inline-block;
    width: 40px; /* Make the circles a bit larger */
    height: 40px;
    line-height: 40px;
    border: 1px solid #555;
    cursor: pointer;    margin-bottom: 8px; /* --- NEW: Add space between rows of semester buttons --- */
    margin: 0 5px; /* Add more space between circles */
    transition: background-color 0.2s, color 0.2s;
    /* --- REVISED: Make them squares --- */
    border-radius: 6px;
    /* --- NEW: Add a subtle background color to make buttons stand out --- */
    background-color: #3c3c42;
    text-align: center;
}
/* --- NEW: Make the 'Examen' button wider --- */
.rating-numbers label[for="sem-grad"] {
    width: auto; /* Let the width be determined by the content */
    padding: 0 15px; /* Add horizontal padding */
}

.rating-numbers label:hover {
    background-color: #4a4a4a;
}
.rating-numbers input[type="radio"]:checked + label {
    background-color: #2274A5;
    border-color: #2274A5;
    color: #fff;
}

/* Feedback Textarea */
.feedback-textarea {
    width: 100%;
    min-height: 80px;
    padding: 10px;
    background-color: #1c1c1e;
    border: 1px solid #444;
    border-radius: 6px;
    color: #fff;
    resize: vertical;
}

/* --- NEW: Styling for the review modal dropdown --- */
.review-select {
    width: 100%;
    padding: 10px;
    background-color: #1c1c1e;
    border: 1px solid #555;
    border-radius: 6px;
    color: #fff;
    font-size: 1em;
    -webkit-appearance: none; /* Removes default browser styling on iOS */
    appearance: none;
    cursor: pointer;
}
/* Add this to your game-style.css file */

.review-question {
    margin-bottom: 25px;
}

.review-question p {
    margin: 0 0 10px 0;
    font-weight: 600;
    color: #e0e0e0;
}

.modal-body {
    /* --- NEW: Add space between header and body content --- */
    padding-top: 20px;
}

/* Star Rating */
.star-rating-group {
    display: inline-block;
    direction: rtl; /* Right to left to make the hover effect work correctly */
}
.star-rating-group input[type="radio"] {
    display: none;
}
.star-rating-group label {
    font-size: 36px;
    color: #888;
    cursor: pointer;
    transition: color 0.2s;
}
.star-rating-group input[type="radio"]:checked ~ label,
.star-rating-group label:hover,
.star-rating-group label:hover ~ label {
    color: #FFC107;
}

/* Number Rating (1-5) */
.number-rating-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
/* --- NEW: Center the rating groups --- */
.number-rating-group.centered-group {
    justify-content: center;
    gap: 20px; /* Add more space between labels and numbers */
}
.number-rating-group > span {
    font-size: 0.8em;
    color: #aaa;
    flex-shrink: 0;
}
.rating-numbers {
    display: flex;
    justify-content: center;
    flex-grow: 1;
}

/* --- NEW: Allow semester blocks to wrap --- */
.semester-group {
    flex-wrap: wrap;
    justify-content: flex-start; /* Align blocks to the start */
}
.rating-numbers input[type="radio"] {
    display: none;
}
.rating-numbers label {
    display: inline-block;
    width: 40px; /* Make the circles a bit larger */
    height: 40px;
    line-height: 40px;
    border: 1px solid #555;
    cursor: pointer;    margin-bottom: 8px; /* --- NEW: Add space between rows of semester buttons --- */
    margin: 0 5px; /* Add more space between circles */
    transition: background-color 0.2s, color 0.2s;
    /* --- REVISED: Make them squares --- */
    border-radius: 6px;
    /* --- NEW: Add a subtle background color to make buttons stand out --- */
    background-color: #3c3c42;
    text-align: center;
}
/* --- NEW: Make the 'Examen' button wider --- */
.rating-numbers label[for="sem-grad"] {
    width: auto; /* Let the width be determined by the content */
    padding: 0 15px; /* Add horizontal padding */
}

.rating-numbers label:hover {
    background-color: #4a4a4a;
}
.rating-numbers input[type="radio"]:checked + label {
    background-color: #2274A5;
    border-color: #2274A5;
    color: #fff;
}

/* Feedback Textarea */
.feedback-textarea {
    width: 100%;
    min-height: 80px;
    padding: 10px;
    background-color: #1c1c1e;
    border: 1px solid #444;
    border-radius: 6px;
    color: #fff;
    resize: vertical;
}

/* --- NEW: Styling for the review modal dropdown --- */
.review-select {
    width: 100%;
    padding: 10px;
    background-color: #1c1c1e;
    border: 1px solid #555;
    border-radius: 6px;
    color: #fff;
    font-size: 1em;
    -webkit-appearance: none; /* Removes default browser styling on iOS */
    appearance: none;
    cursor: pointer;
}
/* --- NEW: Styling for the review modal dropdown --- */
.review-select {
    width: 100%;
    padding: 10px;
    background-color: #1c1c1e;
    border: 1px solid #555;
    border-radius: 6px;
    color: #fff;
    font-size: 1em;
    -webkit-appearance: none; /* Removes default browser styling on iOS */
    appearance: none;
    cursor: pointer;
}

/* --- NEW: Two-column layout specifically for the case selection modal --- */
#caseSelectionGrid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Create two equal-width columns */
    gap: 5px 15px; /* 5px space between rows, 15px space between columns */
    height: auto; /* Override the fixed height to let the content determine the size */
}

/* --- Game Review Modal Specific Styles --- */
#gameReviewModal .modal-content {
    width: auto; /* Let the content determine the width */
    max-width: 400px; /* Set a reasonable max-width */
    text-align: center; /* Center the header and other content */
}

/* --- Game Review Modal Star Styles --- */
#gameReviewModal .star-rating-group label,
#gameReviewModal_recommend .star-rating-group label {
    font-size: 40px;
    color: transparent; /* Make the star character itself transparent */
    -webkit-text-stroke: 1px #888; /* Create a 1px outline */
    text-stroke: 1px #888;
    text-shadow: none; /* Remove the old shadow */
    transition: transform 0.2s ease-in-out, -webkit-text-stroke-color 0.2s ease-in-out;
    display: inline-block;
}


/* Style for when stars are hovered or selected */
/* --- REVISED: Consolidated rule for all star modals to fix specificity issue --- */
#gameReviewModal .star-rating-group input[type="radio"]:checked ~ label,
#gameReviewModal_recommend .star-rating-group input[type="radio"]:checked ~ label,
#gameReviewModal .star-rating-group label:hover,
#gameReviewModal_recommend .star-rating-group label:hover,
#gameReviewModal .star-rating-group label:hover ~ label,
#gameReviewModal_recommend .star-rating-group label:hover ~ label {
    text-shadow: none;
    transform: scale(1.1);
    -webkit-text-stroke-color: #FFC107; /* Change the outline color to yellow */
    text-stroke-color: #FFC107;
}


#gameReviewModal .star-rating-group label:hover,
#gameReviewModal_recommend .star-rating-group label:hover {
    transform: scale(1.1);
}

/* --- Game Review Modal 2 Specific Styles --- */
#gameReviewModal2 .modal-content {
    width: auto; /* Let the content determine the width */
    max-width: 500px; /* A bit wider for the textarea */
    text-align: center; /* Center the header and other content */
}

/* --- NEW: Make bold text in case description more prominent --- */
#fallbeskrivning strong {
    font-weight: 900; /* Use a heavier font weight (standard bold is 700) */
    color: #f5f5f5;   /* Make the color slightly brighter than the surrounding text */
}


/* --- NEW: Make modals 2 and 3 look like the first one --- */
#gameReviewModal_recommend .modal-content {
    width: auto;
    max-width: 400px;
    text-align: center;
}

/* --- NEW: Profile Modal Specific Styles --- */
#profileModal .modal-content {
    width: auto;
    max-width: 450px;
    text-align: center;
}
#profileBtn i {
    margin-right: 0; /* Remove any default margin */
    font-size: 1.2em; /* Adjust the size as needed */
    vertical-align: middle; /* Vertically align the icon */
}
#finalHint {
    flex-direction: column;
    align-items: flex-start; /* Align text to the left */
    gap: 15px; /* Add some space between the paragraphs */
}

/* --- NEW: Patch Notes Container on Main Menu --- */
#patchNotesContainer {
    /* --- FIX: Remove absolute positioning to make it a flex item within .menu-container --- */
    /* --- FIX: Sizing is now handled by the .side-panel class --- */
    width: 450px;
    max-height: 80vh;
    z-index: 101;
    /* --- FIX: This container should NOT scroll. The inner content will. --- */
    overflow-y: hidden;
    background: transparent; /* It remains a transparent wrapper */
    border: none;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* --- FIX: Restore the background to the patch notes header --- */
#patchNotesContainer .modal-header {
    /* --- FIX: Match the style of the other main menu panels --- */
    background: #141517d0; /* Dark, semi-transparent background */
    border-radius: 8px; /* Match border radius */
    padding: 10px 15px; /* Adjust padding to align content */
    border: 1px solid #555; /* Add the same border */
}

/* --- NEW: Style for the individual patch note accordions --- */
#patchNotesContainer .accordion-header {
    width: 100%;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 10px;
    border: 1px solid #555;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    color: #fff;
    font-size: 1.1em;
    padding: 15px;
}
/* --- NEW: Add an arrow indicator to the accordion header --- */
#patchNotesContainer .accordion-header::after {
    content: '';
    float: right;
    margin-left: 5px;
    margin-top: 0px;
    border: solid #ccc;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(45deg); /* Points down (closed) */
    transition: transform 0.3s ease-out;
}

#patchNotesContainer .accordion-header.active::after {
    transform: rotate(-135deg); /* Points up (open) */
}

#patchNotesContainer .accordion-header.active {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* --- NEW: Add styles for the accordion content panel --- */
#patchNotesContainer .accordion-content {
    /* This is the outer container for the animation. It should have no background or padding. */
    max-height: 0;
    overflow: auto;
    transition: max-height 0.3s ease-out;
    background-color: transparent;
    padding: 0;
    border: none;
    border-radius: 0 0 10px 10px; /* Match the bottom radius of the content */
}

.patch-note-content {
    /* --- FIX: This is the scrollable content area INSIDE the accordion panel. --- */
    max-height: 60vh; /* Give the content a max height to make it scrollable */
    overflow-y: auto;   /* Allow this part to scroll */
    padding: 15px;
    background: rgba(20, 20, 22, 0.85); /* Slightly more opaque for better readability */
    border: 1px solid #555;
    border-top: none;
    border-radius: 0 0 10px 10px;
    line-height: 1.6; /* --- NEW: Increase line spacing for better readability --- */
}

/* --- NEW: Custom Scrollbar for Patch Notes --- */

/* This targets the scrollbar specifically within the patch notes content */
.patch-note-content::-webkit-scrollbar {
    width: 10px; /* Set the width of the scrollbar */
}

/* This styles the "track" or background of the scrollbar */
.patch-note-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2); /* A very dark, subtle track */
    border-radius: 0 0 10px 0; /* Match the corner radius of the container */
}

/* This styles the draggable "thumb" of the scrollbar */
.patch-note-content::-webkit-scrollbar-thumb {
    background-color: #555; /* Use the same gray as your borders */
    border-radius: 10px;
    border: 2px solid transparent; /* Creates padding around the thumb */
    background-clip: content-box;
}

.patch-note-content::-webkit-scrollbar-thumb:hover {
    background-color: #777; /* Make it slightly lighter on hover */
}