/* SNIPPET #2: Heatmap CSS */

.heatmap-grid {
  display: flex;
  gap: 2px;            /* space between columns */
  justify-content: center; /* centers columns horizontally */
  align-items: center;     /* centers columns vertically */
}

/* Each column is a vertical set of squares (7 squares tall) */
.heatmap-column {
  display: flex;
  flex-direction: column;
  gap: 2px;            /* space between squares in the column */
}

/* Each square (one day) */
.heatmap-square {
  width: 9px;
  height: 9px;
  background-color: #666; /* default color for 0 questions or missing date */
  position: relative;
  cursor: pointer;
  border-radius: 2px;
  transition: background-color 0.2s;
}

/* On hover, show a small tooltip above the square */
.heatmap-square:hover .heatmap-tooltip {
  visibility: visible;
  opacity: 1;
}

/* The tooltip itself */
.heatmap-tooltip {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: -32px; /* show above the square */
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: #fff;
  font-size: 0.75em;
  padding: 3px 6px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 0.15s;
  z-index: 99999;
}

    .choice-cell {
  /* Normal state */
  cursor: pointer;
  color: #2E4063;         /* some accent color for text */
  transition: background-color 0.2s, color 0.2s;
}

.choice-cell:hover {
  /* On hover */
  background-color: #eaf2ff; /* a light highlight */
  color: #1C2C4A;           /* slightly darker text on hover, optional */
}
    .choice-cell {
  /* Normal state */
  cursor: pointer;
  color: #2E4063;         /* some accent color for text */
  transition: background-color 0.2s, color 0.2s;
}

.choice-cell:hover {
  /* On hover */
  background-color: #eaf2ff; /* a light highlight */
  color: #1C2C4A;           /* slightly darker text on hover, optional */
}

 html, body {
      margin: 0;
      padding: 0;
      height: 100%; /* not strictly necessary, but often helpful */
    }

    /* The fixed sidebar */
    #testModeSidebar {
      position: fixed;
      top: 50px;             /* If you have a 50px header at top, otherwise 0 */
      left: 0;
      width: 200px;
      height: calc(100vh - 50px); /* Fill the visible screen minus the header */
      background-color: #fafafa;
      border-right: 2px solid #3852a4;
      overflow-y: auto;           /* Scroll only the sidebar if content too long */
      transform: translateX(-220px);
      transition: transform 0.3s ease;
      z-index: 9998;
    }

    /* Sidebar header styling */
    #testModeSidebarHeader {
      background-color: #2e4285;
      color: #fff;
      text-align: right;
    }


         #downloadBackupModalBackdrop {

      position: fixed;

      top: 0; left: 0;

      width: 100%; height: 100%;

      background: rgba(0,0,0,0.5);

      display: none;

      align-items: center; 

      justify-content: center;

      z-index: 9999; /* on top of other modals */

    }

    #downloadBackupModalContainer {

      background: #fff;

      width: 80%;

      max-width: 500px;

      border-radius: 12px;

      box-shadow: 0 8px 24px rgba(0,0,0,0.2);

      display: flex;

      flex-direction: column;

      animation: fadeInUp 0.3s ease-out;

      padding: 16px;

    }

    #downloadBackupModalContainer .modal-header {

      display: flex;

      justify-content: space-between;

      align-items: center;

      border-bottom: 1px solid #e2e2e2;

      margin-bottom: 8px;

    }

    #downloadBackupModalContainer .modal-body {

      margin-bottom: 8px;

      flex: 1;

    }

    #downloadBackupModalContainer .modal-footer {

      text-align: right;

      border-top: 1px solid #e2e2e2;

      padding-top: 8px;

    }

@media (min-width: 300px) {

  .page-body {

    width: 80%;

    margin: 0 auto;

    /* remove float: left; */

    padding-right: 100px; /* <--- Default 50px on the right */

  }

}



@keyframes spin {

  0%   { transform: rotate(0deg); }

  100% { transform: rotate(360deg); }

}



.main-content {

  margin-top: 50px;   /* Matches .top-bar-container or similar header height */

  padding: 20px;      /* Some spacing around content */

}



/* Overall body & HTML settings */

html, body {

  margin: 0;

  padding: 0;

  background-color: #f0f1f7;

  font-family: 'Roboto', sans-serif;

  line-height: 1.6;

  color: #333; /* Dark text for contrast */

}



/* Slightly bigger default padding for the React Calculator container (optional) */

#calculatorRoot > * {

  padding: 8px;

}



/* For text highlights, keep bright color for quick attention */

.highlighted {

  background-color: #fffd88; 

}



/* Remove highlight button is hidden by default; show on hover */

.remove-highlight-btn {

  display: none; 

}

.highlighted:hover .remove-highlight-btn {

  display: block; 

}



/* Scrollbar styling (WebKit) */

::-webkit-scrollbar {

  width: 8px; /* Thin scrollbar */

}

::-webkit-scrollbar-track {

  background: #f0f1f7;

  border-radius: 8px;

}

::-webkit-scrollbar-thumb {

  background-color: #3852a4;

  border-radius: 8px;

  border: 2px solid #f0f1f7; 

}

::-webkit-scrollbar-thumb:hover {

  background-color: #2e4285;

}



/* Scrollbar styling (Firefox) */

html {

  scrollbar-width: thin;

  scrollbar-color: #3852a4 #f0f1f7;

}



/* ==============================

   2) HEADERS & TYPOGRAPHY

   ============================== */



/* Container with white background + subtle shadow */

.container {

  max-width: 1200px;

  margin: 0 auto;

  padding: 30px;

  background-color: #fff;

  box-shadow: 0 0 4px rgba(0,0,0,0.1);

}



/* Modern headings */

h1, h2, h3, h4, h5, h6 {

  margin: 20px 0 10px;

  font-family: 'Roboto', sans-serif;

  font-weight: 700;

  color: #2E4063; /* deeper accent color */

  text-transform: capitalize; /* optional */

}



/* Normal paragraphs */

p {

  margin: 10px 0;

  font-size: 1.4em;

}



/* Lists */

ul, ol {

  padding-left: 30px;

  margin: 10px 0;

}

li {

  margin-bottom: 10px;

}



/* Figures, images, responsive tweaks */

figure {

  margin: 20px 0;

  text-align: center;

}

img {

  max-width: 100%;

  height: auto;

}

@media (max-width: 768px) {

  .container {

    padding: 20px;

  }

}



/* Basic structure tags */

header, footer, section, article {

  margin-bottom: 20px;

}

header {

  text-align: center;

}



/* Page title & description */

.page-title {

  font-size: 1.5em;

  font-weight: 700;

  color: #3852a4;

}

.page-description {

  font-size: 1.4em;

  color: #666;

}



/* ==============================

   3) QUESTION & SUMMARY ELEMENTS

   ============================== */



/* Modern <details> summary styling */

details summary {

  position: relative;

  font-weight: 600;

  cursor: pointer;

  color: #2E4063;  

  transition: color 0.2s ease-in-out;

}

details summary:hover {

  color: #1C2C4A; /* darker hover color */

}

details summary::-webkit-details-marker {

  display: none; 

}



.modal-container {

  /* 1) Provide a dual-background:

     - First layer (padding-box) for the modal's white background

     - Second layer (border-box) for the gradient border */

  background: 

    linear-gradient(#fff, #fff) padding-box, 

    linear-gradient(to right, #3852a4, #2e4285) border-box;



  /* 2) Standard modal settings */

  width: 80%;

  max-width: 600px;

  max-height: 80vh;

  overflow-y: auto;

  border-radius: 12px;

  box-shadow: 0 8px 24px rgba(0,0,0,0.2);

  display: flex;

  flex-direction: column;

  animation: fadeInUp 0.3s ease-out;



  /* 3) The “10px border” – but transparent,

       so we can show the gradient from 'border-box' */

  border: 10px solid transparent;



  /* 4) Important to clip the background layers properly */

  background-clip: border-box;

}



/* ==============================

   4) TABLE STYLING (MODERN)

   ============================== */



/* By default, if you want all tables to look consistent */

table {

  width: 100%;

  border-collapse: collapse;

  margin: 20px 0;

  font-size: 1.4em;

  background-color: #fff;

}

th, td {

  padding: 15px;

  border: 1px solid #ddd;

  text-align: left;

}



/* For more advanced separated style, you can define: */

table.simple-table {

  margin: 20px 0;

  width: 100%;

  border-collapse: separate; /* separate border model */

  border-spacing: 0 4px;     /* small vertical gap between rows */

}

table.simple-table thead th {

  background: linear-gradient(120deg, #ced9f7, #e6ebfa);

  border-bottom: 2px solid #3852a4;

  color: #2E4063;

  font-weight: 600;

  text-align: left;

  padding: 12px;

}

table.simple-table tbody tr {

  background-color: #fff;

  transition: background-color 0.2s;

}

table.simple-table tbody tr:hover {

  background-color: #f5f7fd; /* subtle highlight */

}

table.simple-table td {

  padding: 12px 16px;

  border: none; 

  font-size: 1em;

  color: #333;

}



/* ==============================

   5) TOP SEARCH BAR

   ============================== */



.search-container {

  background-color: #f0f1f7;

  padding: 10px;

  display: flex;

  gap: 5px;

  align-items: center;

  border-bottom: 2px solid #3852a4;

}

.search-container input {

  flex: 1;

  padding: 5px;

  font-size: 1em;

  border: 1px solid #ccc;

  border-radius: 4px;

}

.search-container button {

  font-family: 'Roboto', sans-serif;

  font-weight: 500;

  border: none;

  border-radius: 6px;

  padding: 8px 16px;

  cursor: pointer;

  background-color: #3852a4;

  color: #fff;

  transition: background-color 0.2s, box-shadow 0.2s;

}

.search-container button:hover {

  background-color: #2e4285;

}



/* Example: for Download/Upload buttons, a “secondary” style */

#downloadBackupBtn, #uploadBackupBtn {

  background-color: #f2f4ff;

  color: #2E4063;

  border: 1px solid #d1d6ea;

}

#downloadBackupBtn:hover, #uploadBackupBtn:hover {

  background-color: #e7ebfe;

  color: #18294b;

}



/* ==============================

   6) MODALS

   ============================== */



.modal-backdrop {

  position: fixed;

  top: 0; 

  left: 0;

  width: 100%; 

  height: 100%;

  background: rgba(0,0,0,0.5);

  display: none;

  align-items: center; 

  justify-content: center;

  z-index: 9999;

}



/* A more modern modal container */

.modal-container {

  background: #fff;

  width: 80%;

  max-width: 600px;

  max-height: 80vh;

  overflow-y: auto;

  border-radius: 12px;     /* smoother corners */

  box-shadow: 0 8px 24px rgba(0,0,0,0.2); /* deeper shadow */

  display: flex;

  flex-direction: column;

  animation: fadeInUp 0.3s ease-out;

}



@keyframes fadeInUp {

  from { opacity: 0; transform: translateY(12px); }

  to   { opacity: 1; transform: translateY(0); }

}



.modal-header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  border-bottom: 1px solid #e2e2e2;

}

.modal-header h2 {

  margin: 0;

  color: #3852a4; 

}

.modal-body {

  flex: 1;

  overflow-y: auto;

  margin-top: 10px;

  color: #333;

}

.modal-footer {

  margin-top: 10px;

  text-align: right;

  border-top: 1px solid #e2e2e2;

  padding-top: 10px;

}



/* Close button with a bright color for emphasis */

.modal-close-btn {

  background-color: #ff4d4d; 

  color: #fff;

  font-size: 1em;

  border: none;

  border-radius: 6px;

  padding: 6px 12px;

  cursor: pointer;

  transition: background-color 0.2s;

}

.modal-close-btn:hover {

  background-color: #cc0000;

}



/* ==============================

   7) SEARCH RESULTS & HOVER

   ============================== */



.search-result {

  margin-bottom: 6px;

  padding: 8px 10px;

  border-radius: 6px;

  border: 1px solid transparent;

  transition: background-color 0.2s, border 0.2s;

  cursor: pointer;

}

.search-result:hover {

  background-color: #f5f7fd;

  border: 1px solid #3852a4;

  text-decoration: none;

  color: #2E4063;

}



/* ==============================

   8) ANSWER UI BLOCK

   ============================== */



.answer-ui {

  margin: 16px 0;

  padding: 12px;

  background-color: #f9faff;

  border: 1px solid #e0e4f0;

  border-radius: 8px;

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 16px;

}

.answer-ui label {

  color: #2E4063;

  font-size: 0.95em;

  font-weight: 500;

  display: flex;

  align-items: center;

  gap: 6px;

}

.answer-ui select,

.answer-ui input[type="checkbox"] {

  transform: scale(1.05);

  cursor: pointer;

}

.answer-ui select {

  padding: 4px 8px;

  border: 1px solid #ccc;

  border-radius: 6px;

  transition: box-shadow 0.2s;

}

.answer-ui select:focus {

  outline: none;

  box-shadow: 0 0 4px rgba(56,82,164,0.5);

}



/* Icon container appended next to question IDs <strong> */

.iconContainer {

  margin-left: 8px;

  color: #3852a4;

}

.iconContainer svg {

  width: 1em;

  height: 1em;

  vertical-align: middle;

  margin-left: 4px;

}



/* ==============================

   9) PERFORMANCE STATS

   ============================== */



.performance-stat {

  margin-bottom: 10px;

  cursor: pointer;

  font-size: 1.2em;

  padding: 5px;

  border: 1px solid #ccc;

  border-radius: 4px;

  color: #3852a4;

  background-color: #f0f1f7; 

}

.performance-stat:hover {

  background-color: #e2e6f0;

}