#authStatusIndicator {
  color: #333;
  font-size: 0.85rem;
  font-weight: 500;
  text-align: center;
  padding: 2px 12px;
  border-radius: 0 0 6px 6px;
  margin-bottom: 8px;
  opacity: 0;
  transition: opacity 0.3s;
}

#userRoleIndicator {
  color: #333;
  font-size: 0.8rem;
  font-weight: 400;
  text-align: center;
  padding: 0;
  border: none;
  margin-bottom: 8px;
  display: none;
}
/* Ensure warning modal text is visible */
.modal-content.delete-account-modal strong,
.modal-content.warning-modal strong {
  color: #333 !important;
}
.modal-content.delete-account-modal p,
.modal-content.warning-modal p {
  color: #333 !important;
  font-weight: normal !important;
}
#questionsTableScroll {
  max-height: 240px;
  overflow-y: auto;
  overflow-x: auto;
  margin-bottom: 10px;
}
#importQuestionsBtn,
#exportQuestionsBtn {
  min-width: 140px;
  width: 140px;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 8px;
  padding-bottom: 8px;
}

@media (max-width: 600px) {
  #importQuestionsBtn,
  #exportQuestionsBtn {
    min-width: 120px !important;
    width: 120px !important;
    display: inline-block;
  }
}
#testOpenFromTime,
#testOpenUntilTime {
  width: calc(100% + 10px) !important;
  min-width: 70px;
}


/* Align parent of #testTimezone to right */
.testTimezone-parent {
  text-align: right;
}
.ql-toolbar button.ql-table {
  display: none !important;
}
.radio-content, #skillDistributionContent {
  font-weight: normal !important;
}
.test-manager-modal td, .test-manager-modal th {
  font-weight: normal !important;
}
/* Test editor labels and table cell text */
.test-manager-modal label,
.test-manager-modal td {
  color: #333 !important;
}
/* Filter input labels */
label[for="testFilterInput"],
label[for="classFilterInput"],
label[for="questionsFilterInput"],
label[for="csvFileInput"] {
  color: #333 !important;
}
#testTable th, #testsTable th {
  color: #fff !important;
  background: #333 !important;
}
.sort-icon {
  font-size: 1em;
  margin-left: 4px;
  color: #fff !important;
  user-select: none;
  transition: color 0.2s;
}
#testTable td, #testsTable td {
  color: #333 !important;
}
#testTable tbody tr:hover, #testsTable tbody tr:hover,
#testTable tbody tr.selected, #testsTable tbody tr.selected {
  background: #e6f3ff !important;
}
/* Ensure Quill table button icon is visible and black */
.ql-toolbar button.ql-table {
  color: #000 !important;
  background: #fff !important;
}
.ql-toolbar button.ql-table svg,
.ql-toolbar button.ql-table .ql-stroke,
.ql-toolbar button.ql-table .ql-fill,
.ql-toolbar button.ql-table .ql-even,
.ql-toolbar button.ql-table .ql-icon {
  color: #000 !important;
  fill: #000 !important;
  stroke: #000 !important;
}
/* Force Quill table button and icon to be black */
.ql-toolbar button.ql-table,
.ql-toolbar button.ql-table svg,
.ql-toolbar button.ql-table::before {
  color: #000 !important;
  fill: #000 !important;
}
/* Force math symbol dropdown button width and color */
.math-symbol-item {
  width: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  color: #000 !important;
  font-size: 16px !important;
  background: #fff !important;
  border: 1px solid #ddd !important;
  font-family: Arial, sans-serif !important;
}
/* Test Manager Modal UI improvements */
.test-manager-header-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 8px auto;
}
.test-manager-title {
  font-weight: bold;
  font-size: 1.2em;
  margin-left: 6px;
  margin-right: 2px;
}
.test-filter-input {
  flex: 1;
  max-width: 400px;
  padding: 8px;
  font-size: 1em;
  margin-right: 10px;
}
.test-create-btn {
  margin-left: 0;
}
#testTable {
  border-spacing: 0 !important;
  border: 2px solid #000 !important;
  border-radius: 8px;
  overflow: hidden;
}
#testTable th, #testTable td {
  text-align: left;
  padding: 8px;
  border: none !important;
  box-shadow: none !important;
}
#testTable td, #testTable th {
  border-right: none !important;
  border-left: none !important;
  background-clip: padding-box !important;
}
#testTable th {
  background-color: #333;
  color: #fff;
  font-weight: bold;
  border: none !important;
}
#testTable tr:last-child td {
  border-bottom: none;
}
#testTable tbody tr {
  transition: background 0.2s;
}
#testTable tbody tr:hover {
  background-color: #e6f0ff;
}
.ql-toolbar .ql-size {
  width: 68px !important;
  min-width: 68px !important;
  max-width: 68px !important;
}
.ql-snow .ql-picker.ql-size {
  min-width: 60px;
  max-width: 80px;
  font-size: 1em;
}
.ql-snow .ql-picker.ql-size .ql-picker-label,
.ql-snow .ql-picker.ql-size .ql-picker-item {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 1em;
  padding: 2px 8px;
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
  content: ".75";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
  content: "1.5";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
  content: "2.5";
}
.ql-snow .ql-picker.ql-size .ql-picker-label:not([data-value]),
.ql-snow .ql-picker.ql-size .ql-picker-item:not([data-value]) {
  content: "1";
}

.ql-snow .ql-picker.ql-size .ql-picker-label {
  width: 68px !important; /* or whatever width you need */
  min-width: 68px !important;
  max-width: 68px !important;
  margin: 0;
  display: inline-flex; /* ensures width is respected */
}

.ql-toolbar button.ql-bold,
.ql-toolbar button.ql-italic,
.ql-toolbar button.ql-underline,
.ql-toolbar button.ql-script,
.ql-toolbar button.ql-list,
.ql-toolbar button.ql-align {
  font-size: 1.7rem !important;
}
.modal-btn {
  font-size: 1.5rem !important;
}

.ql-toolbar button, .ql-toolbar .ql-formats button {
  font-size: 1.3rem !important;
}
.image-control-btn.active {
  background: #007bff !important;
    color: white !important;
  border-color: #007bff !important;
}
body {
    font-family: 'Georgia', serif;
    background-color: #f9f9f9;
    margin: 12px auto;
    color: #333;
    padding: 0 20px;
  }
  header {
    background-color: #007bff;
    color: white;
    padding: 12px 20px;
    margin: 0;
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .header-left {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .header-computer-icon {
    width: 42px;
    height: 42px;
  }

  .header-title-section {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .header-main-title {
    font-weight: bold;
    font-size: 1.4rem;
    line-height: 1;
  }

  .header-test-title {
    font-size: 1rem;
    font-weight: normal;
    line-height: 1.2;
    opacity: 0.95;
  }

  .header-username {
    font-size: 0.7rem;
    opacity: 0.85;
    line-height: 1;
  }


  /* Hamburger Menu Styles */
  .hamburger-menu {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 40px;
    height: 40px;
    cursor: pointer;
    align-self: flex-start;
    padding: 0;
    transition: all 0.3s ease;
  }

  .hamburger-line {
    width: 100%;
    height: 2px;
    background-color: white;
    transition: all 0.3s ease;
  }

  .hamburger-menu:hover .hamburger-line {
    background-color: #b9b7b7;
  }

  /* Slide-out Menu */
  .slide-menu {
    position: fixed;
    top: 0;
    right: -320px;
    width: 320px;
    height: 100vh;
    background-color: white;
    box-shadow: -2px 0 15px rgba(0, 0, 0, 0.1);
    transition: right 0.3s ease;
    z-index: 1000;
    overflow-y: auto;
  }

  .slide-menu.open {
    right: 0;
  }

  .menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 999;
  }

  .menu-overlay.active {
    opacity: 1;
    visibility: visible;
  }

  .menu-header {
    background: linear-gradient(135deg, #007bff, #0056b3);
    color: white;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }

  .user-profile {
    display: flex;
    align-items: center;
    gap: 15px;
  }

  .user-avatar {
    width: 50px;
    height: 50px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
  }

  .user-details {
    flex: 1;
  }

  .menu-user-name {
    font-weight: bold;
    font-size: 1.1rem;
    margin-bottom: 4px;
  }

  .menu-user-email {
    font-size: 0.9rem;
    opacity: 0.9;
    margin-bottom: 2px;
  }

  .menu-user-role {
    font-size: 0.8rem;
    background-color: rgba(255, 255, 255, 0.2);
    padding: 2px 8px;
    border-radius: 12px;
    display: inline-block;
  }

  .menu-close {
    font-size: 24px;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.3s;
    padding: 5px;
  }

  .menu-close:hover {
    opacity: 1;
  }

  .menu-nav {
    padding: 10px 0;
  }

  .menu-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 20px;
    cursor: pointer;
    transition: all 0.3s;
    border-left: 3px solid transparent;
  }

  .menu-item:hover {
    background-color: #f8f9fa;
    border-left-color: #007bff;
  }

  .menu-signout:hover {
    background-color: #ffe6e6;
    border-left-color: #dc3545;
  }

  .menu-icon {
    font-size: 20px;
    width: 24px;
    text-align: center;
  }

  .menu-text {
    font-size: 1rem;
    font-weight: 500;
    color: #333;
  }
  .header-icons {
    display: flex;
    gap: 12px;
    align-items: center;
  }

  .header-submit-button {
    display: none; /* Moved to navigation */
  }

  .timer-display {
    font-family: 'Courier New', monospace;
    font-size: 1.1rem;
    font-weight: bold;
    color: white;
    padding: 6px 12px;
    min-width: 60px;
    text-align: center;
  }
  .timer-display.warning {
    color: #ff6b6b;
  }
  .header-icon {
    cursor: pointer;
    transition: opacity 0.3s;
  }
  .header-icon:hover {
    opacity: 0.8;
  }
  #calculatorIcon {
    width: 36px;
    height: 36px;
  }
  #instructionsIcon {
    width: 36px;
    height: 36px;
  }
  #formulasIcon {
    width: 36px;
    height: 36px;
  }

  .quit-test-button {
    background: #d32f2f;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
    margin-left: 12px;
  }

  .quit-test-button:hover {
    background: #b71c1c;
  }

  .main-container {
    display: flex;
    width: 100%;
    background: white;
    box-shadow: 0 0 10px rgba(0,0,0,0.08);
    border-radius: 6px;
    padding: 10px;
    gap: 20px;
    box-sizing: border-box;
  }
  .left-half {
    flex: 1 1 70%;
    min-width: 40%;
    line-height: 1.6;
    font-size: 1.21rem;
    border: 0.5px solid lightgray;
    border-radius:5px;
    padding:8px;
  }

  .left-half p {
    margin: 0;
    padding: 0;
  }
  
  #questionElement {
    white-space: pre-wrap;
  }

  /* Quill editor alignment classes */
  .ql-align-center {
    text-align: center;
  }

  .ql-align-right {
    text-align: right;
  }

  .ql-align-left {
    text-align: left;
  }

  .ql-align-justify {
    text-align: justify;
  }

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

  .question-counter {
    font-weight: bold;
    text-align: left;
  }

  .underline-space {
    display: inline-block;
    border-bottom: 2px solid #333;
    width: 150px;
    margin: 0 5px;
    vertical-align: bottom;
  }

  .right-half {
    flex: 1 1 40%;
    min-width: 300px;
    max-width: 70%;
    display: flex;
    flex-direction: column;
    gap: 15px;
    font-size: 1.1rem;
  }

  .bookmark-container {
    font-weight: bold;
    cursor: pointer;
    user-select: none;
    transition: color 0.3s;
    display: flex;
    align-items: center;
    gap: 5px;
  }

  .bookmark-container.bookmarked {
    color: #007bff;
  }
  .bookmark-container.bookmarked .bookmark-icon {
    color: #ffd700;
  }
  
  /* MC choices container */
  #mcChoices {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
  }

  .mc-instructions {
    font-weight: 600;
    font-size: 0.95rem;
    color: #333;
    margin-bottom: 8px;
    font-style: italic;
  }
  
  .choice {
    border: 2px solid #007bff;
    border-radius: 5px;
    padding: 8px 12px;
    margin-bottom: 4px;
    cursor: pointer;
    user-select: none;
    transition: all 0.3s;
    background-color: white;
    text-align: left;
    display: flex;
    align-items: center;
    overflow-x: auto;
    white-space: nowrap;
  }
  
  .choice .katex-display {
    margin: 0 !important;
    text-align: left !important;
    display: inline !important;
  }
  
  .choice .katex {
    font-size: 1em !important;
    white-space: nowrap !important;
  }
  .choice:hover:not(.selected) {
    background-color: #e6f3ff;
    border-color: #0056b3;
  }
  .choice.selected {
    background-color: #007bff;
    color: white;
  }
  
  /* SPR (Student Produced Response) Styles */
  #sprInput {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
  }

  .spr-instructions {
    font-weight: 600;
    font-size: 0.95rem;
    color: #333;
    margin-bottom: 8px;
    font-style: italic;
  }
  
  .spr-label {
    font-weight: bold;
    color: #333;
  }
  
  .spr-input {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #007bff;
    border-radius: 5px;
    font-size: 1.1rem;
    background-color: white;
    transition: all 0.3s;
    box-sizing: border-box;
  }
  
  .spr-input:focus {
    outline: none;
    border-color: #0056b3;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
  }
  
  .spr-instructions {
    color: #666;
    font-style: italic;
    line-height: 1.4;
  }
  
  .navigation-wrapper {
    width: 100%;
    margin: 10px auto 10px;
  }

  .navigation-container {
    display: flex;
    justify-content: flex-start;
    gap: 15px;
    padding: 0 15px;
  }

  .problems-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
    font-weight: bold;
    font-size: 0.9rem;
    margin-top: 4px;
    padding: 3px 10px;
    background-color: #f8f9fa;
    border-radius: 5px;
    max-height: 90px;
    overflow-y: auto;
  }
  
  .nav-submit-button {
    background-color: #d3d3d3;
    color: #666;
    border: none;
    padding: 10px 4px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
    margin-left: 0;
  }
  
  .nav-submit-button.all-answered {
    background-color: #28a745;
    color: white;
  }
  
  .nav-submit-button.all-answered:hover {
    background-color: #218838;
  }
  
  .nav-button {
    width: 10%;
    min-width: 80px;
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 8px;
    font-size: 1.2rem;
    border-radius: 5px;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .nav-button:hover:not(:disabled) {
    background-color: #0056b3;
  }
  
  .nav-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .prev-button {
    margin-left: auto;
  }

    .prev-button {
    margin-left: auto;
  }


  
  .toggle-problems-button {
    display: none; /* Remove toggle button */
    background-color: transparent !important;
    color: #007bff !important;
    border: none;
    padding: 10px 20px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.3s;
    outline: none;
    white-space: nowrap;
    text-align: center;
    min-width: 160px;
    width: auto;
  }

  .toggle-problems-button:hover {
    opacity: 0.7;
  }

  .toggle-problems-button:focus {
    outline: none;
    background-color: transparent !important;
  }

  .toggle-problems-button:active {
    background-color: transparent !important;
  }
  .question-number {
    padding: 4px 8px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s;
    user-select: none;
    position: relative;
    color: #000;
    background-color: transparent;
  }
  
  .question-number.answered {
    color: #007bff;
    background-color: transparent;
  }
  
  .question-number.current {
    background-color: #007bff;
    color: white;
  }
  
  .question-number.answered.current {
    background-color: #007bff;
    color: white;
  }
  
  .question-number:hover:not(.current) {
    background-color: #e9ecef;
  }
  .question-number.bookmarked::after {
    content: "★";
    position: absolute;
    top: -8px;
    right: -5px;
    font-size: 20px;
    font-weight: bold;
    color: #ffd700;
    -webkit-text-stroke: 0.3px #000;
  }
  .question-number.correct {
    background-color: transparent;
    color: #28a745;
    border: none;
    padding: 4px;
    min-width: auto;
    width: auto;
  }
  .question-number.correct:hover {
    background-color: transparent;
    color: #218838;
    text-decoration: underline;
  }
  .question-number.incorrect {
    background-color: transparent;
    color: #dc3545;
    border: none;
    padding: 4px;
    min-width: auto;
    width: auto;
  }
  .question-number.incorrect:hover {
    background-color: transparent;
    color: #c82333;
    text-decoration: underline;
  }
  button {
    background-color: #333;
    color: white;
    border: none;
    padding: 8px 16px;
    font-size: 1rem;
    border-radius: 5px;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.3s;
    width: 140px;
    min-width: 140px;
    text-align: center;
  }
  button:hover {
    background-color: #555;
  }

/* Modal Styles */
.modal {
  display: none;
  position: fixed;
  z-index: 1001;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.5);
}

#questionPreviewModal {
  z-index: 1100 !important;
}

/* Remove paragraph margins in question preview modal */
#questionPreviewModal p {
  margin: 0 !important;
  padding: 0 !important;
}

/* Remove KaTeX display margins in question preview modal */
#questionPreviewModal .katex-display {
  margin: 0 !important;
  padding: 0 !important;
}

.ql-tooltip {
  z-index: 1200 !important;
}

.ql-tooltip.ql-editing::before {
  content: '' !important;
}

.ql-tooltip-editor::before {
  content: '' !important;
}

.ql-toolbar button, .ql-toolbar .ql-formats button {
  color: #000 !important;
}

/* Make toolbar button font white only when active */
.ql-toolbar button.ql-active, .ql-toolbar .ql-formats button.ql-active {
  color: white !important;
}

.modal-content {
  background-color: #fefefe;
  border: 1px solid #888;
  border-radius: 8px;
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
}

.calculator-modal {
  width: 900px;
  height: 500px;
  padding: 0;
  cursor: move;
  position: relative;
  overflow: hidden;
}

.calculator-modal .modal-header {
  background-color: #007bff;
  color: white;
  padding: 15px 20px;
  cursor: move;
  border-bottom: 1px solid #ddd;
  font-weight: bold;
  font-size: 1.2rem;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.calculator-modal iframe {
  width: 100%;
  height: 95%!important;
  border: none;
  display: block;
}

.window-controls {
  display: flex;
  gap: 10px;
  align-items: center;
}

.minimize-btn {
  color: #aaa;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 3px;
  transition: all 0.3s;
}

.minimize-btn:hover {
  background-color: #e0e0e0;
  color: #000;
}

.calculator-modal.minimized {
  height: 40px;
  overflow: hidden;
}

.calculator-modal.minimized iframe,
.calculator-modal.minimized .resize-handle {
  display: none;
}

.resize-handle {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 20px;
  height: 20px;
  background: linear-gradient(-45deg, transparent 0%, transparent 30%, #ccc 30%, #ccc 35%, transparent 35%, transparent 65%, #ccc 65%, #ccc 70%, transparent 70%);
  cursor: se-resize;
}

.calculator-modal iframe {
  width: 100%;
  height: calc(100% - 45px);
  border: none;
  margin-top: -45px;
  overflow: hidden;
}

.formulas-modal {
  width: 800px;
  max-width: 90%;
  padding: 0;
  position: relative;
  overflow-y: none;

}

.formulas-modal .modal-header {
  background-color: #007bff;
  color: white;
  padding: 15px 20px;
  cursor: move;
  border-bottom: 1px solid #ddd;
  font-weight: bold;
  font-size: 1.2rem;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.formulas-modal.minimized {
  height: 40px;
  overflow: hidden;
}

.formulas-modal.minimized .formulas-content,
.formulas-modal.minimized .resize-handle {
  display: none;
}

.formulas-content {
  padding: 4px 20px;
  text-align: center;
}

.reference-sheet-image {
  max-width: 100%;
  height: auto;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.instructions-modal {
  width: 800px;
  max-width: 90%;
  padding: 0;
  position: relative;
  max-height: 80vh;
  overflow-y: auto;
}

.instructions-content {
  padding: 4px 20px;
}

.instructions-content ul {
  margin: 15px 0;
  padding-left: 20px;
}

.instructions-content li {
  margin: 8px 0;
  line-height: 1.4;
}

.examples-table {
  width: 100%;
  border-collapse: collapse;
  margin: 15px 0;
  font-size: 0.9rem;
}

.examples-table th,
.examples-table td {
  border: 1px solid #333;
  padding: 8px;
  text-align: center;
  vertical-align: top;
}

.examples-table th {
  background-color: #f5f5f5;
  font-weight: bold;
}

.examples-table td {
  line-height: 1.3;
}

.instructions-modal h3 {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 1.1rem;
}

.instructions-modal h4 {
  margin: 10px 0 10px 0;
  text-align: center;
  font-size: 1rem;
}

.instructions-modal .modal-header {
  background-color: #007bff;
  color: white;
  padding: 15px 20px;
  cursor: move;
  border-bottom: 1px solid #ddd;
  font-weight: bold;
  font-size: 1.2rem;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.close {
  color: white;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 3px;
  z-index: 1001;
  margin-bottom:2px;
}

/* Authentication Styles */
.login-screen {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f8f9fa;
  padding: 10px;
}

.login-container {
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  padding: 10px;
  width: 100%;
  max-width: 420px;
  text-align: center;
  margin: 0 auto;
}

.login-header {
  margin-bottom: 10px;
}

.login-header .test-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 4px;
}

.login-header h1 {
  margin: 0 0 5px 0;
  font-size: 2rem;
  color: #333;
  font-family: 'Georgia', serif;
}

.login-header p {
  margin: 0;
  color: #666;
  font-size: 1.1rem;
}

.login-tabs {
  display: flex;
  margin-bottom: 15px;
  border-bottom: 2px solid #f1f1f1;
}

.tab-button {
  flex: 1;
  padding: 12px 20px;
  background: none;
  border: none;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s;
  color: #666;
  border-bottom: 2px solid transparent;
}

.tab-button.active {
  color: #007bff;
  border-bottom-color: #007bff;
  font-weight: 600;
}

.tab-button:hover:not(.active) {
  color: #0056b3;
  background-color: #f8f9fa;
}

.auth-form {
  text-align: left;
}

.auth-form .input-group {
  margin-bottom: 12px;
}

.auth-form .name-inputs {
  display: flex;
  gap: 12px;
  margin-bottom: 2px;
}

.auth-form label {
  display: block;
  margin-bottom: 2px;
  font-weight: 600;
  color: #333;
  font-size: 0.95rem;
}

.auth-form input,
.auth-form select {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid #e1e5e9;
  border-radius: 8px;
  font-size: 1rem;
  box-sizing: border-box;
  transition: all 0.3s;
  background-color: #fff;
}

.auth-form input:focus,
.auth-form select:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.auth-button {
  width: 100%;
  padding: 14px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  margin-top: 10px;
}

.auth-button:hover {
  background-color: #0056b3;
  transform: translateY(-1px);
}

.auth-button:active {
  transform: translateY(0);
}

.error-message {
  background-color: #f8d7da;
  color: #721c24;
  padding: 12px;
  border-radius: 6px;
  margin-top: 15px;
  border: 1px solid #f5c6cb;
  text-align: center;
  font-size: 0.9rem;
}

.success-message {
  background-color: #d4edda;
  color: #155724;
  padding: 12px;
  border-radius: 6px;
  margin-top: 15px;
  border: 1px solid #c3e6cb;
  text-align: center;
  font-size: 0.9rem;
}

.forgot-password-link {
  text-align: center;
  margin-top: 15px;
}

.forgot-password-link a {
  color: #007bff;
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.3s;
}

.forgot-password-link a:hover {
  color: #0056b3;
  text-decoration: underline;
}

.forgot-password-header {
  text-align: center;
  margin-bottom: 20px;
}

.forgot-password-header h3 {
  margin: 0 0 10px 0;
  color: #333;
  font-size: 1.3rem;
}

.forgot-password-header p {
  margin: 0;
  color: #666;
  font-size: 0.9rem;
  line-height: 1.4;
}

.back-to-login {
  text-align: center;
  margin-top: 20px;
}

.back-to-login a {
  color: #666;
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.3s;
}

.back-to-login a:hover {
  color: #007bff;
  text-decoration: underline;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 15px;
  color: white;
  font-size: 0.9rem;
}

.sign-out-btn, .delete-account-btn {
  background-color: rgba(255, 255, 255, 0.2);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.3s;
  margin-left: 8px;
}

.sign-out-btn:hover, .delete-account-btn:hover {
  background-color: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
}

.delete-account-btn {
  background-color: rgba(220, 53, 69, 0.8);
  border-color: rgba(220, 53, 69, 0.6);
}

.delete-account-btn:hover {
  background-color: rgba(220, 53, 69, 1);
  border-color: rgba(220, 53, 69, 0.8);
}

.teacher-only {
  display: none;
}

.student-only {
  display: block;
}

/* Delete Account Modal Styles */
.delete-account-modal {
  background-color: white;
  margin: 2% auto;
  padding: 0;
  border-radius: 8px;
  width: 500px;
  max-width: 90%;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.delete-account-modal .modal-header {
  background-color: #dc3545;
  color: white;
  padding: 4px;
  border-bottom: 1px solid #ddd;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 8px 8px 0 0;
}

.delete-account-modal .modal-body {
  padding: 2px 10px;
  text-align: center;
}

.delete-account-modal .warning-icon,
.submit-modal .warning-icon,
.quit-modal .warning-icon {
  font-size: 48px;
  margin-bottom: 15px;
}

.delete-account-modal h3,
.submit-modal h3,
.quit-modal h3 {
  margin: 0 0 15px 0;
  color: #dc3545;
  font-size: 1.3rem;
}

.delete-account-modal ul {
  color: #666;
  margin: 15px auto;
  max-width: 400px;
}

.delete-account-modal li {
  margin: 8px 0;
  line-height: 1.4;
}

.delete-button {
  background-color: #dc3545;
  color: white;
}

.delete-button:hover {
  background-color: #c82333;
}

.cancel-button {
  background-color: #6c757d;
  color: white;
}

.cancel-button:hover {
  background-color: #5a6268;
}

/* Account Modal Styles */
.account-modal {
  background-color: white;
  margin: 2% auto;
  padding: 0;
  border-radius: 8px;
  width: 600px;
  max-width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 1002;
}

.account-modal .modal-header {
  background-color: #007bff;
  color: white;
  padding: 10px 4px;
  border-bottom: 1px solid #ddd;
  font-weight: bold;
  font-size: 0.95rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.account-modal .modal-body {
  padding: 2px 10px 8px 10px;
}

.account-section {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #eee;
}

.account-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.account-section h4 {
  margin: 0 0 8px 0;
  color: #333;
  font-size: 1rem;
}

.account-info .info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid #f8f9fa;
  font-size: 0.9rem;
}

.account-info .info-row:last-child {
  border-bottom: none;
}

.account-info label {
  font-weight: 600;
  color: #666;
}

.password-change .input-group {
  margin-bottom: 10px;
}

.password-change label {
  display: block;
  margin-bottom: 3px;
  font-weight: 600;
  color: #333;
  font-size: 0.9rem;
}

.password-change input {
  width: 100%;
  padding: 7px 10px;
  border: 2px solid #e1e5e9;
  border-radius: 6px;
  font-size: 0.9rem;
  box-sizing: border-box;
  transition: border-color 0.3s;
}

.password-change input:focus {
  outline: none;
  border-color: #007bff;
}

.action-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s;
  font-weight: 600;
}

.change-password-btn {
  background-color: #28a745;
  color: white;
}

.change-password-btn:hover {
  background-color: #218838;
}

.danger-zone {
  background-color: #fff5f5;
  border: 1px solid #fed7d7;
  border-radius: 6px;
  padding: 12px !important;
}

.danger-zone h4 {
  color: #e53e3e !important;
}

.danger-zone p {
  color: #666;
  margin-bottom: 8px;
  font-size: 0.9rem;
}

.delete-account-btn {
  background-color: #dc3545;
  color: white;
}

.delete-account-btn:hover {
  background-color: #c82333;
}

/* Results History Modal */
.results-history-modal {
  background-color: white;
  margin: 2% auto;
  padding: 0;
  border-radius: 8px;
  width: 700px;
  max-width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.results-history-modal .modal-header {
  background-color: #28a745;
  color: white;
  padding: 15px 4px;
  border-bottom: 1px solid #ddd;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

footer {
  text-align: center;
  margin-top: 30px;
  padding: 20px 0;
  color: #666;
  font-size: 0.9rem;
  border-top: 1px solid #eee;
}

/* Start Screen Styles */
.start-screen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 0;
  text-align: center;
  background-color: #007bff;
  display: flex;
  flex-direction: column;
  z-index: 100;
}

.start-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0;
  padding: 0 20px;
  height: 100px !important;
  overflow: hidden;
  flex-shrink: 0;
  box-sizing: border-box;
}

.start-header-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.start-header-right {
  display: flex;
  align-items: flex-start;
}

.start-header .hamburger-menu .hamburger-line {
  background-color: white;
}

.start-header .hamburger-menu:hover .hamburger-line {
  background-color: #e6f3ff;
}

.test-icon {
  width: 60px;
  height: 60px;
}

.start-header h1 {
  margin: 0;
  font-size: 2rem;
  color: white;
  font-family: 'Georgia', serif;
}

.start-content-wrapper {
  width: 100%;
  margin: 0;
  background: white;
  padding: 20px;
  border-radius: 0;
  box-shadow: none;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
}

.start-user-info {
  padding: 2px 6px;
  border-radius: 6px;
  text-align: right;
}

.start-user-name {
  font-size: 1.1rem;
  font-weight: 600;
  color: white;
  margin-bottom: 4px;
}

.start-user-email {
  font-size: 0.95rem;
  color: white;
}

.start-main-content {
  display: flex;
  gap: 20px;
  flex: 1;
  overflow: hidden;
}

.start-classes-sidebar {
  width: 18%;
  border: 1px solid #007bff;
  border-radius: 6px;
  background: #e7ecee;
  padding: 0;
  overflow-y: auto;
}

.start-classes-section {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.start-section-header {
  background: #007bff;
  color: white;
  padding: 6px 16px;
  border-radius: 0;
  margin-bottom: 0;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

.start-section-header h3 {
  margin: 0;
  font-size: 1.2rem;
  color: white;
}

.start-owner-section,
.start-member-section {
  margin-bottom: 0;
  padding: 0px 0px 12px 0px;
}

.start-subsection-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 8px;
  background: #e7ecee;
  border-radius: 4px;
  margin-bottom: 8px;
  font-weight: 600;
  color: #333;
  font-size: 0.9rem;
}

.start-action-link {
  color: #007bff;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
}

.start-action-link:hover {
  text-decoration: underline;
}

.start-classes-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.start-class-item {
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-radius: 4px;
  font-size: 0.9rem;
  color: #333;
  cursor: pointer;
  transition: background 0.2s;
  text-align: left;
}

.start-class-item:hover {
  background: #cce5ff;
}

.start-tests-content {
  width: 82%;
  border: 1px solid #007bff;
  border-radius: 6px;
  background: white;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.start-tests-header {
  padding: 6px 16px;
  background: #007bff;
  color: white;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

.start-tests-header h3 {
  margin: 0;
  font-size: 1.2rem;
}

.start-tests-body {
  padding: 16px;
  overflow-y: auto;
  flex: 1;
}

.start-test-manager-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0px;
  gap: 10px;
}

.start-test-manager-header-row label {
  white-space: nowrap;
}

.start-test-manager-header-row input {
  flex: 1;
  min-width: 200px;
}

/* Start screen table styles */
#startMyClassTestsTable tbody tr:hover,
#startPublicTestsTable tbody tr:hover {
  background-color: #cce5ff;
}

#startMyClassTestsTable tbody tr[style*="cursor: pointer"],
#startPublicTestsTable tbody tr[style*="cursor: pointer"] {
  transition: background-color 0.2s;
}

.start-form {
  width:94%;
  margin-left:3%;
  background: white;
  padding: 10px 10px 40px 10px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.name-inputs {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.input-group {
  flex: 1;
  text-align: left;
}

.input-group label {
  display: block;
  margin-bottom: 2px;
  font-weight: bold;
  color: #333;
}

.input-group input,
.input-group select {
  width: 100%;
  padding: 12px;
  border: 2px solid #ddd;
  border-radius: 6px;
  font-size: 1rem;
  box-sizing: border-box;
  transition: border-color 0.3s;
}

.input-group input:focus,
.input-group select:focus {
  outline: none;
  border-color: #007bff;
}

.quiz-selection {
  margin-bottom: 20px;
}

#testSearchInput {
  box-sizing: border-box;
}

.test-table-container {
  max-height: 400px;
  overflow-y: auto;
  border: 1px solid #ddd;
  border-radius: 6px;
}

.test-select-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.test-select-table thead {
  position: sticky;
  top: 0;
  z-index: 10;
}

.test-select-table th {
  background-color: #333;
}


.test-select-table tbody tr {
  cursor: pointer;
  transition: background-color 0.2s;
}

.test-select-table tbody tr:nth-child(odd) {
  background-color: #f9f9f9;
}

.test-select-table tbody tr:nth-child(even) {
  background-color: #ffffff;
}

.test-select-table tbody tr:hover {
  background-color: #e3f2fd;
}

.test-select-table tbody tr.selected {
  background-color: #bbdefb;
}

.test-select-table td {
  padding: 6px 12px;
  border-bottom: 1px solid #e0e0e0;
  vertical-align: top;
  text-align: left;
}

.test-title {
  font-weight: 600;
  color: #333;
  margin: 0 0 1px 0;
  line-height: 1.3;
}

.test-description {
  font-size: 0.8rem;
  color: #495057;
  margin: 1px 0 0 0;
  line-height: 1.3;
}

.test-assigned-by {
  color: #555;
  text-align: left;
}

/* Domain Filters */
.domain-filters {
  margin: 20px 0;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 6px;
  border: 1px solid #dee2e6;
}

.domain-filters h3 {
  margin: 0 0 15px 0;
  font-size: 1.1rem;
  color: #333;
  font-weight: bold;
}

.domain-checkboxes {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.domain-checkbox-item {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  background-color: white;
  border-radius: 4px;
  border: 1px solid #dee2e6;
  transition: background-color 0.2s;
}

.domain-checkbox-item:hover {
  background-color: #e9ecef;
}

.domain-checkbox-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-right: 10px;
  cursor: pointer;
}

.domain-checkbox-item label {
  flex: 1;
  cursor: pointer;
  margin: 0;
  font-weight: normal;
  color: #495057;
}

.domain-checkbox-item input[type="checkbox"]:checked + label {
  color: #007bff;
  font-weight: 500;
}

.start-button {
  background-color: #000000;
  color: white;
  border: none;
  padding: 15px 40px;
  font-size: 1.2rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s;
  font-weight: bold;
  display: block;
  margin: 20px auto 0;
}

.start-button:hover {
  background-color: #333333;
}

.start-button:disabled {
  background-color: #6c757d;
  cursor: not-allowed;
}

/* Hide quiz screen initially */
.quiz-screen {
  display: none;
}

/* Quit, Submit, and Results Modal Styles */
.quit-modal, .submit-modal, .results-modal {
  background-color: white;
  margin: 2% auto;
  padding: 0;
  padding-bottom:6px;
  border-radius: 8px;
  width: 400px;
  max-width: 90%;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.quit-modal .modal-header {
  background-color: #dc3545;
  color: white;
  padding: 15px 20px;
  border-bottom: 1px solid #ddd;
  font-weight: bold;
  font-size: 1.2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 8px 8px 0 0;
}

.submit-modal .modal-header {
  background-color: #007bff;
  color: white;
  padding: 15px 20px;
  border-bottom: 1px solid #ddd;
  font-weight: bold;
  font-size: 1.2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-body {
  padding: 2px 4px 2px 4px;
  text-align: center;
}

.modal-body p {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 1.1rem;
}

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

.modal-button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1rem;
  min-width: 80px;
  transition: background-color 0.3s;
}

.confirm-button {
  background-color: #007bff;
  color: white;
}

.confirm-button:hover {
  background-color: #0056b3;
}

.quit-button {
  background-color: #dc3545;
  color: white;
}

.quit-button:hover {
  background-color: #c82333;
}

.cancel-button {
  background-color: #6c757d;
  color: white;
}

.cancel-button:hover {
  background-color: #5a6268;
}

.results-modal {
  width: 700px;
  max-width: 90%;
  max-height: 85vh;
  overflow: hidden;
}

.results-modal.expanded {
  width: 800px;
  height: 70vh;
  margin: 2px auto;
}

.results-modal .modal-header {
  background-color: #007bff;
  color: white;
  padding: 10px 15px;
  border-bottom: 1px solid #ddd;
  font-weight: bold;
  font-size: 1.1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.results-modal .modal-body {
  text-align: left;
  overflow-y: auto;
  max-height: calc(85vh - 50px);
  padding: 15px;
}

#resultsTitle {
  text-align: center;
  margin: 0 0 8px 0;
  color: #007bff;
  font-size: 1.3rem;
  font-weight: bold;
}

#resultsContent {
  font-size: 1.1rem;
  line-height: 1.4;
  margin-bottom: 8px;
}

.results-modal .modal-buttons {
  justify-content: center;
}

.question-review-nav {
  display: flex;
  gap: 15px;
  margin: 0;
}

.question-nav-btn {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px 25px;
  font-size: 1.2rem;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
  min-width: 80px;
}

.question-nav-btn:hover {
  background-color: #0056b3;
}

.question-nav-btn:disabled {
  background-color: #6c757d;
  cursor: not-allowed;
  opacity: 0.5;
}

/* Detailed Results within Results Modal */
#detailedResultsContent {
  margin-top: 15px;
  border-top: 1px solid #ddd;
  padding-top: 15px;
}

#detailedResultsInner {
  padding-right: 10px;
}

.question-review {
  margin-bottom: 12px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background-color: #f8f9fa;
}

.question-review h4 {
  margin: 0 0 8px 0;
  color: #333;
  font-size: 0.95em;
  font-weight: 600;
}

.question-review .question-text {
  margin-bottom: 10px;
  font-weight: 500;
  color: #495057;
  font-size: 0.9em;
}

.question-review .choices-review {
  margin-bottom: 10px;
}

.question-review .choice-review {
  padding: 6px 10px;
  margin: 3px 0;
  border-radius: 4px;
  background-color: #fff;
  font-size: 0.85em;
  display: flex;
  align-items: center;
  gap: 8px;
}

.question-review .choice-review.correct-answer {
  background-color: #e8f5e8;
  border: 1px solid #28a745;
}

.question-review .choice-review img {
  width: 16px;
  height: 16px;
}

.question-review .your-answer img {
  width: 12px;
  height: 12px;
}

.question-review .answer-info {
  display: flex;
  gap: 15px;
  margin-top: 8px;
  font-size: 0.8em;
}

.question-review .your-answer {
  color: #007bff;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}

.question-review .correct-answer-text {
  color: #28a745;
  font-weight: 500;
}

.question-review .spr-answer {
  font-family: monospace;
  font-size: 1.25em;
  margin-left: 5px;
}

/* Test Manager Styles */
.test-manager-modal {
  width: 96%;
  margin: 1% 0;
  height: 96vh;
  max-height: 96vh;
  overflow-y: hidden;
  display: flex;
  flex-direction: column;
}

.test-manager-modal .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 6px;
  background: #007bff;
  color: white;
  height: 58px;
  box-sizing: border-box;
}

.test-manager-modal .modal-header h3 {
  margin: 0;
  font-size: 1.2rem;
}

.test-manager-modal .modal-body {
  padding: 4px;
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.test-manager-actions {
  margin-bottom: 12px;
  display: flex;
  justify-content: flex-end;
}

.test-manager-actions #createNewTestBtn {
  max-width: 200px;
  white-space: nowrap;
}

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

.editor-header .editor-title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
}

.editor-header .back-btn {
  margin: 0;
}

#testEditorForm h4,
#questionEditorForm h4 {
  margin: 3px 0 3px 0;
  font-size: 1rem;
  text-align: left;
}

.test-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 20px;
}

.test-card {
  background: white;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 20px;
  transition: box-shadow 0.3s;
}

.test-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.test-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}

.test-card-header h4 {
  margin: 0;
  color: #333;
  flex: 1;
}

.test-badge {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.test-badge.public {
  background-color: #d4edda;
  color: #155724;
}

.test-badge.private {
  background-color: #f8d7da;
  color: #721c24;
}

.test-collection {
  color: #6c757d;
  font-size: 0.9rem;
  margin: 5px 0;
}

.test-stats {
  display: flex;
  gap: 15px;
  margin: 15px 0;
  font-size: 0.9rem;
  color: #6c757d;
}

.test-card-actions {
  display: flex;
  gap: 10px;
  margin-top: 15px;
  flex-wrap: wrap;
}

.action-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  text-align: center;
}

.primary-btn {
  background-color: #007bff;
  color: white;
}

.primary-btn:hover {
  background-color: #0056b3;
}

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

.secondary-btn:hover {
  background-color: #545b62;
}

.danger-btn {
  background-color: #dc3545;
  color: white;
}

.danger-btn:hover {
  background-color: #c82333;
}

.icon-btn {
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 5px;
  transition: transform 0.2s;
  width: 60px;
}

.icon-btn:hover {
  transform: scale(1.2);
}

.empty-state, .error-state {
  text-align: center;
  padding: 40px 20px;
  color: #6c757d;
  font-style: italic;
}

/* Form Styles */
.form-section {
  background: lightblue;
  border-radius: 6px;
  padding: 4px 15px 4px 15px;
  margin-bottom: 2px;
}

.form-section h4 {
  margin: 0 0 4px 0;
  color: #495057;
  font-size: 1rem;
  font-weight: 600;
}

.form-row {
  display: flex;
  gap: 15px;
  margin-bottom: 1px;
}

.form-row .form-group {
  flex: 1;
}

.form-group {
  margin-bottom: 4px;
}

.test-title-desc-row {
  display: flex;
  gap: 8px;
  width: 100%;
  margin-bottom: 10px;
}

.title-col,
.desc-col,
.password-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 0 1 auto;
}

.title-col label,
.desc-col label,
.password-col label {
  white-space: nowrap;
  font-size: 0.85rem;
  font-weight: 200;
  text-align: left;
}

.title-col input,
.desc-col input,
.password-col input,
.desc-col select {
  width: 100%;
  padding: 6px 8px;
  font-size: 0.85rem;
  box-sizing: border-box;
}

.title-col {
  flex-basis: 28%;
}

.desc-col {
  flex-basis: 42%;
}

.password-col {
  flex-basis: 28%;
}

/* Test Settings Grid - 3 columns */
.test-settings-grid {
  display: grid;
  grid-template-columns: 2fr 1.15fr 0.85fr;
  gap: 8px;
  margin-top: 2px;
  font-size: 0.85rem;
}

.settings-column {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.num-questions-control {
  display: flex;
  align-items: center;
  gap: 8px;
}

.num-questions-label {
  font-size: 0.85rem;
  color: #495057;
}

.num-questions-radio-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.radio-label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  font-size: 0.85rem;
}

.radio-label input[type="radio"] {
  width: 14px;
  height: 14px;
  cursor: pointer;
  margin: 0;
  flex-shrink: 0;
}

.radio-label input[type="number"] {
  width: 48px;
  padding: 3px 4px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 0.85rem;
}

.radio-text {
  font-size: 0.85rem;
  color: #495057;
  font-weight: normal;
}

.skill-input-group {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 0.75rem;
  width: fit-content;
}

.skill-input-group input {
  width: 35px;
  height: 20px;
  padding: 2px 4px;
  border: 1px solid #ddd;
  border-radius: 3px;
  box-sizing: border-box;
  font-size: 0.75rem;
  text-align: center;
  flex-shrink: 0;
}

.skill-input-group label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #495057;
  text-align: left;
}

#testNumQuestions {
  width: 45px;
  height: 25px;
  padding: 4px 4px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
}

#testNumQuestions::-webkit-inner-spin-button,
#testNumQuestions::-webkit-outer-spin-button {
  opacity: 1;
}

#testNumQuestions:disabled {
  background-color: #e9ecef;
  color: #6c757d;
  border-color: #ced4da;
  cursor: not-allowed;
  opacity: 0.6;
}

.settings-fieldset {
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 8px 10px;
  margin: 0;
}

.settings-fieldset legend {
  font-size: 0.85rem;
  font-weight: 500;
  color: #495057;
  padding: 0 6px;
}

.timer-control {
  display: flex;
  align-items: center;
  gap: 5px;
}

#testTimerDuration {
  width: 45px;
  height: 25px;
  padding: 4px 4px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
}

#testTimerDuration::-webkit-inner-spin-button,
#testTimerDuration::-webkit-outer-spin-button {
  opacity: 1;
}

#testTimerDuration:disabled {
  background-color: #e9ecef;
  color: #6c757d;
  border-color: #ced4da;
  cursor: not-allowed;
  opacity: 0.6;
}

#timerMinLabel {
  font-weight: normal;
  font-size: 0.85rem;
  color: #495057;
}

.section-label {
  display: block;
  margin-top: 8px;
  margin-bottom: 1px;
  font-weight: 600;
  color: #495057;
  font-size: 0.9rem;
  text-align: left;
}

.form-group label {
  display: block;
  margin-bottom: 2px;
  font-weight: 600;
  color: #495057;
  font-size: 0.9rem;
  text-align: left;
}

.form-group label.toggle-label {
  display: flex;
  margin-bottom: 0;
}

.form-group input[type="text"],
.form-group input[type="number"],
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  font-size: 0.95rem;
  box-sizing: border-box;
  transition: border-color 0.3s;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: #007bff;
}

.form-group small {
  display: block;
  margin-top: 2px;
  color: #6c757d;
  font-size: 0.8rem;
  line-height: 1.2;
}

.form-group textarea {
  resize: vertical;
  min-height: 50px;
}

/* Toggle Switch */
.toggle-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  text-align: left;
}

.toggle-label input[type="checkbox"] {
  position: relative;
  width: 36px;
  height: 18px;
  appearance: none;
  background: #ccc;
  border-radius: 9px;
  outline: none;
  cursor: pointer;
  transition: background 0.3s;
  flex-shrink: 0;
  margin: 0;
}

.toggle-label input[type="checkbox"]:checked {
  background: #007bff;
}

.toggle-label input[type="checkbox"]::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background: white;
  border-radius: 50%;
  transition: transform 0.3s;
  transform: translateX(0px);
}

.toggle-label input[type="checkbox"]:checked::before {
  transform: translateX(18px);
}

.toggle-slider {
  display: none;
}

.toggle-text {
  font-weight: normal;
  font-size: 0.85rem;
  line-height: 1;
  margin: 0;
  padding: 0;
}

/* Regular Checkbox Styles */
.checkbox-label {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  user-select: none;
  text-align: left;
}

.checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  margin: 0;
  flex-shrink: 0;
}

.checkbox-text {
  font-weight: normal;
  font-size: 0.85rem;
  line-height: 16px;
  margin: 0;
  padding: 0;
}

/* Class Checkboxes Grid - Responsive Columns */
.class-checkboxes-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px 12px;
  min-height: 40px;
}

.class-checkboxes-grid .form-group {
  margin-bottom: 0;
}

.class-checkboxes-grid .checkbox-label {
  gap: 4px;
}

.class-checkboxes-grid .checkbox-text {
  line-height: 16px;
}

@media (max-width: 800px) {
  .class-checkboxes-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 600px) {
  .class-checkboxes-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Questions Table */
.questions-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  font-size: 12px;
  table-layout: fixed;
}

.questions-table th,
.questions-table td {
  padding: 4px 6px;
  text-align: left;
  border: 1px solid #dee2e6;
  font-size: 12px;
  vertical-align: middle;
  line-height: 1.3;
  word-wrap: break-word;
  overflow-wrap: break-word;
  overflow: hidden;
  max-height: 100px;
}

.questions-table .even-row {
  background-color: #ffffff;
}

.questions-table .odd-row {
  background-color: #f8f9fa;
}

.questions-table th {
  background: #333;
  font-weight: 600;
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 1;
}

.questions-table .row-number,
.questions-table .edit-cell,
.questions-table .copy-cell,
.questions-table .delete-cell {
  text-align: center;
  padding: 2px;
}

.questions-table .edit-btn,
.questions-table .copy-btn {
  background: #007bff;
  border: none;
  color: white;
  padding: 4px 6px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.75rem;
  transition: background 0.2s;
  width: 36px;
  min-width: 36px;
}

.questions-table .delete-btn {
  background: #dc3545;
  border: none;
  color: white;
  padding: 4px 6px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.75rem;
  transition: background 0.2s;
  width: 36px;
  min-width: 36px;
}

.questions-table .edit-btn:hover,
.questions-table .copy-btn:hover {
  background: #0056b3;
}

.questions-table .delete-btn:hover {
  background: #c82333;
}

.questions-table .view-question-btn {
  background: none !important;
  border: none !important;
  color: #007bff !important;
  padding: 2px 6px !important;
  cursor: pointer !important;
  font-size: 18px !important;
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  display: inline-block !important;
}

.questions-table .view-question-btn:hover {
  color: #0056b3 !important;
}

/* Test Table Button Styles (same as questions table) */
#testTable .edit-cell,
#testTable .copy-cell,
#testTable .delete-cell {
  text-align: center !important;
  padding: 8px !important;
}

#testTable .edit-btn {
  display: inline-block !important;
  background: #007bff !important;
  border: none !important;
  color: white !important;
  padding: 6px 8px !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  font-size: 1rem !important;
  transition: background 0.2s !important;
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
}

#myTestsTable .edit-btn {
  display: inline-block !important;
  background: #d3d3d3 !important;
  border: none !important;
  color: #333 !important;
  padding: 6px 8px !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  font-size: 1rem !important;
  transition: background 0.2s !important;
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
}

/* Preview buttons for both tables */
#myTestsTable button[type="button"][title="Preview Test"],
#publicTestsTable button[type="button"][title="Preview Test"] {
  display: inline-block !important;
  background: #d3d3d3 !important;
  border: none !important;
  color: #333 !important;
  padding: 6px 8px !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  font-size: 1rem !important;
  transition: background 0.2s !important;
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
}

/* Copy buttons for public tests table */
#publicTestsTable button[type="button"]:not([title="Preview Test"]) {
  display: inline-block !important;
  background: #d3d3d3 !important;
  border: none !important;
  color: #333 !important;
  padding: 6px 8px !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  font-size: 1rem !important;
  transition: background 0.2s !important;
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
}

#testTable .copy-btn {
  display: inline-block !important;
  background: #007bff !important;
  border: none !important;
  color: white !important;
  padding: 6px 8px !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  font-size: 1rem !important;
  transition: background 0.2s !important;
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
}

#myTestsTable .copy-btn {
  display: inline-block !important;
  background: #d3d3d3 !important;
  border: none !important;
  color: #333 !important;
  padding: 6px 8px !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  font-size: 1rem !important;
  transition: background 0.2s !important;
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
}

#testTable .delete-btn {
  display: inline-block !important;
  background: #dc3545 !important;
  border: none !important;
  color: white !important;
  padding: 6px 8px !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  font-size: 1rem !important;
  transition: background 0.2s !important;
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
}

#myTestsTable .delete-btn {
  display: inline-block !important;
  background: red !important;
  border: none !important;
  color: white !important;
  padding: 6px 8px !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  font-size: 1rem !important;
  transition: background 0.2s !important;
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
}

#testTable .edit-btn:hover {
  background: #0056b3 !important;
}

#testTable .copy-btn:hover {
  background: #0056b3 !important;
}

#myTestsTable .edit-btn:hover {
  background: #b0b0b0 !important;
}

#myTestsTable button[type="button"][title="Preview Test"]:hover,
#publicTestsTable button[type="button"][title="Preview Test"]:hover {
  background: #b0b0b0 !important;
}

#publicTestsTable button[type="button"]:not([title="Preview Test"]):hover {
  background: #b0b0b0 !important;
}

#myTestsTable .copy-btn:hover {
  background: #b0b0b0 !important;
}

#testTable .delete-btn:hover {
  background: #c82333 !important;
}

#myTestsTable .delete-btn:hover {
  background: #cc0000 !important;
}

/* Override any inline styles from Quill HTML in all table cells */
.questions-table td *,
.questions-table td {
  font-size: 12px !important;
}

.questions-table td p {
  margin: 0 !important;
  padding: 0 !important;
}

/* Scale images in table to fit within row height */
.questions-table img {
  max-height: 90px;
  max-width: 100%;
  height: auto;
  width: auto;
  display: block;
  margin: 0 auto;
}

/* Classes table specific styles */
#classesTable th:nth-child(1),
#classesTable td:nth-child(1) {
  text-align: center !important;
}

#classesTable th:nth-child(2),
#classesTable td:nth-child(2) {
  text-align: left !important;
}

#classesTable th:nth-child(3),
#classesTable td:nth-child(3) {
  text-align: center !important;
}

#classesTable th:nth-child(4),
#classesTable td:nth-child(4) {
  text-align: center !important;
}

#classesTable th:nth-child(5),
#classesTable td:nth-child(5) {
  text-align: center !important;
}

#classesTable th:nth-child(6),
#classesTable td:nth-child(6) {
  text-align: center !important;
}

#classesTableContainer {
  width: 100%; /* Or a fixed width like 800px if needed */
}

#classesTable {
  width: 100%;
  table-layout: fixed;
  border-spacing: 0 !important;
  border: 2px solid #000 !important;
  border-radius: 8px;
  overflow: hidden;
}

#createNewClassBtn {
  max-width: 200px;
  white-space: nowrap;
}

#classesTable .edit-btn,
#classesTable .copy-btn,
#classesTable .results-btn {
  display: inline-block !important;
  background: #007bff !important;
  border: none !important;
  color: white !important;
  padding: 6px 8px !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  font-size: 1rem !important;
  transition: background 0.2s !important;
  width: 40px !important;
  min-width: 40px !important;
}

#classesTable .results-btn {
  background: #333 !important;
}

#classesTable .delete-btn {
  display: inline-block !important;
  background: #dc3545 !important;
  border: none !important;
  color: white !important;
  padding: 6px 8px !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  font-size: 1rem !important;
  transition: background 0.2s !important;
  width: 40px !important;
  min-width: 40px !important;
}

#classesTable .edit-btn:hover,
#classesTable .copy-btn:hover,
#classesTable .results-btn:hover {
  background: #0056b3 !important;
}

#classesTable .delete-btn:hover {
  background: #c82333 !important;
}

#classStudentsTable {
  width: 100%;
  border-spacing: 0 !important;
  border: 2px solid #000 !important;
  border-radius: 8px;
  overflow: hidden;
}

#classStudentsTable .delete-btn {
  display: inline-block !important;
  background: #dc3545 !important;
  border: none !important;
  color: white !important;
  padding: 6px 8px !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  font-size: 1rem !important;
  transition: background 0.2s !important;
  width: 40px !important;
  min-width: 40px !important;
}

#classStudentsTable .delete-btn:hover {
  background: #c82333 !important;
}

#classStudentsTable td:nth-child(1),
#classStudentsTable td:nth-child(2),
#classStudentsTable td:nth-child(3) {
  text-align: left !important;
}

#testsTable {
  width: 100%;
  border-spacing: 0 !important;
  border: 2px solid #000 !important;
  border-radius: 8px;
  overflow: hidden;
}

#testsTable td {
  text-align: left;
}

#testsTable tr:hover {
  background-color: #f5f5f5;
}

/* Teachers Table Styles */
#teachersTable {
  width: 100%;
  border-spacing: 0 !important;
  border: 2px solid #000 !important;
  border-radius: 8px;
  overflow: hidden;
}

#teachersTable td {
  text-align: left;
}

#teachersTable tr:hover {
  background-color: #f5f5f5;
}

#teachersTable .delete-btn:hover {
  background: #c82333 !important;
}

/* Teacher Requests Table Styles */
#teacherRequestsTable {
  width: 100%;
  border-spacing: 0 !important;
  border: 2px solid #000 !important;
  border-radius: 8px;
  overflow: hidden;
}

#teacherRequestsTable td {
  text-align: left;
}

#teacherRequestsTable tr:hover {
  background-color: #f5f5f5;
}

/* Request Badge */
.request-badge {
  background: #dc3545;
  color: white;
  padding: 4px 8px;
  border-radius: 50%;
  font-weight: bold;
  cursor: pointer;
  min-width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.75rem;
  transition: background-color 0.3s ease;
  margin-left: 8px;
}

.request-badge:hover {
  opacity: 0.9;
}

.request-badge.hidden {
  display: none;
}

/* Admin-only menu items */
.admin-only {
  display: none;
}

.symbol-btn {
  background: #333;
  color: white;
  border: 1px solid #555;
  padding: 0;
  height: 28px;
  min-width: 0;
  border-radius: 3px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.symbol-btn:hover {
  background: #555;
  border-color: #777;
}

.questions-table tbody tr:hover {
  background: #f8f9fa;
}

.type-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 600;
}

.type-badge.MC {
  background: #d1ecf1;
  color: #0c5460;
}

.type-badge.SPR {
  background: #d4edda;
  color: #155724;
}

/* Question Editor */
.choice-input {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.choice-label {
  font-weight: 600;
  min-width: 25px;
  color: #495057;
  font-size: 0.9rem;
}

.choice-text {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  font-size: 0.95rem;
}

.choice-text:focus {
  outline: none;
  border-color: #007bff;
}

/* Image Upload */
.image-upload-area {
  border: 2px dashed #ced4da;
  border-radius: 6px;
  padding: 12px;
  text-align: center;
  transition: border-color 0.3s;
}

.image-upload-area:hover {
  border-color: #007bff;
}

.image-preview {
  margin-top: 10px;
  position: relative;
  display: inline-block;
}

.image-preview img {
  max-width: 100%;
  max-height: 200px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.remove-btn {
  position: absolute;
  top: 5px;
  right: 5px;
  background: #dc3545;
  color: white;
  border: none;
  border-radius: 3px;
  padding: 3px 8px;
  cursor: pointer;
  font-size: 0.8rem;
}

.remove-btn:hover {
  background: #c82333;
}

/* CSV Upload */
.csv-upload-section {
  display: flex;
  gap: 8px;
}

.question-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.question-actions .action-btn {
  flex: 0 0 auto;
  padding: 8px 12px;
  justify-content: center;
  text-align: center;
}

/* Form Actions */
.form-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 15px;
  padding-top: 10px;
}

/* Question Editor Top Row Styles */
.question-editor-top-row {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 16px;
  align-items: flex-end;
  gap: 2px;
}

#top-row-d1,
#top-row-d2,
#top-row-d3,
#top-row-d4 {
  display: flex;
  flex-direction: column;
}

#top-row-d1 {
  min-width: 60px;
}

#top-row-d2 {
  min-width: 70px;
}

#top-row-d3 {
  flex: 1;
  min-width: 120px;
}

#top-row-d4 {
  flex: 1;
  min-width: 120px;
}

#top-row-d1 label,
#top-row-d2 label,
#top-row-d3 label,
#top-row-d4 label {
  font-weight: bold;
  font-size: 0.95em;
  margin-bottom: 2px;
  text-align: left;
}

#qeType,
#qeDifficulty {
  width: 70px;
  min-width: 70px;
}

/* Responsive */
@media (max-width: 700px) {
  .question-editor-top-row {
    gap: 12px;
  }
  #top-row-d1 {
    flex: 0 0 auto;
    min-width: 60px;
  }
  #top-row-d2 {
    flex: 0 0 auto;
    min-width: 70px;
  }
  #top-row-d3 {
    flex: 1 1 0;
    min-width: 120px;
  }
  #top-row-d4 {
    width: 100%;
    flex: 0 0 100%;
    min-width: 100%;
  }
}

@media (max-width: 450px) {
  #top-row-d1 {
    flex: 0 0 auto;
    min-width: 60px;
  }
  #top-row-d2 {
    flex: 0 0 auto;
    min-width: 70px;
  }
  #top-row-d3 {
    width: 100%;
    flex: 0 0 100%;
    min-width: 100%;
  }
}

/* Global styled-input class for consistent input styling */
.styled-input {
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1rem;
  background: #fff;
  color: #333;
  margin: 0;
}

select.styled-input {
  appearance: none;
  -webkit-appearance: none;
  background: #fff url('data:image/svg+xml;utf8,<svg fill="%23333" height="16" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>') no-repeat right 8px center/16px 16px;
}

/* Question Editor Modal Styles */
.question-editor-modal .modal-header {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.question-editor-modal .close {
  color: #fff;
  border-radius: 4px;
  width: auto;
  height: auto;
  padding: 2px 8px;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-left: 12px;
}

.question-editor-modal .close:hover {
  background: #a00;
}

.question-editor-modal .modal-content {
  border-radius: 10px;
  overflow: hidden;
}

.question-editor-modal .modal-body {
  padding: 18px 16px;
}

.question-editor-modal .question-editor-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.question-editor-modal .question-editor-col1 {
  flex: 1.75;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 2px 6px;
  text-align: left;
}

.question-editor-modal .question-editor-col2 {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 40px;
}

.question-editor-modal .question-editor-rows {
  gap: 8px;
}

.question-editor-modal .question-editor-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  width: 98%;
  margin-top: 24px;
  margin-bottom: 14px;
}

.question-editor-modal .quill-align-left .ql-toolbar {
  text-align: left !important;
}

/* Remove grey background from custom toolbars */
#qeTopToolbar,
#qeBottomToolbar {
  background: transparent !important;
  border: none !important;
}

/* Hide default Quill toolbars since we use custom containers */
#qeTextTop .ql-toolbar,
#qeTextBottom .ql-toolbar {
  display: none !important;
}

/* Remove borders from Quill editor containers */
#qeTextTop .ql-container,
#qeTextBottom .ql-container {
  border: none !important;
}

/* Reduce padding in Quill editor content by 50% */
#qeTextTop .ql-editor,
#qeTextBottom .ql-editor {
  padding: 1px !important;
  overflow-y: hidden !important;
  min-height: 40px;
}

/* Ensure Quill editors auto-grow with content */
#qeTextTop,
#qeTextBottom {
  display: flex;
  flex-direction: column;
}

#qeTextTop .ql-container,
#qeTextBottom .ql-container {
  height: auto !important;
}

#qeTextTop .ql-container,
#qeTextBottom .ql-container {
  flex: 1;
}

@media (max-width: 768px) {
  .test-list {
    grid-template-columns: 1fr;
  }
  
  .form-row {
    flex-direction: column;
  }
  
  .test-card-actions {
    flex-direction: column;
  }
 
}

@media (max-width: 600px) {
  .test-title-desc-row {
    flex-direction: column;
    gap: 10px;
  }
  
  .title-col,
  .desc-col {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 700px) {
  .question-editor-modal .modal-content {
    padding: 0;
  }
  
  .question-editor-modal .modal-header {
    flex-direction: row;
    padding: 10px 8px;
  }
  
  .question-editor-modal .question-editor-columns {
    flex-direction: column;
    gap: 12px;
  }
  
  .question-editor-modal .question-editor-actions {
    flex-direction: column;
    gap: 8px;
  }
  
  .question-editor-col2 {
    padding-top: 2px!important;
    gap:0;
  }
}

/* Quill Editor Customization */
.ql-toolbar {
  background: #f8f9fa !important;
  border: none !important;
  border-radius: 4px 4px 0 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.ql-toolbar button,
.ql-toolbar .ql-picker-label {
  width: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  height: 32px !important;
  border: 1px solid #ced4da !important;
  border-radius: 3px !important;
  margin: 2px !important;
  padding: 0 !important;
  flex: 0 0 32px !important;
  font-size: 14px !important;
  line-height: 32px !important;
  vertical-align: middle !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* SVG icons inside buttons */
.ql-toolbar button svg,
.ql-toolbar .ql-picker-label svg {
  width: 14px !important;
  height: 14px !important;
  display: block !important;
  margin: auto !important;
}

.ql-toolbar button:hover,
.ql-toolbar .ql-picker-label:hover {
  background: #dee2e6 !important;
}

.ql-toolbar button.ql-active,
.ql-toolbar .ql-picker-label.ql-active {
  background: #007bff !important;
  color: white !important;
}
.ql-toolbar .ql-stroke {
  stroke: #495057 !important;
}

.ql-toolbar button.ql-active .ql-stroke,
.ql-toolbar .ql-picker-label.ql-active .ql-stroke {
  stroke: white !important;
}

/* Formula help button to match Quill toolbar style */
.formula-help-btn {
  width: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  border: 1px solid #ced4da !important;
  border-radius: 3px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  background: white !important;
  color: #495057 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: bold !important;
  transition: background 0.2s !important;
  flex-shrink: 0 !important;
}

.formula-help-btn i {
  font-style: italic !important;
  font-weight: bold !important;
  font-size: 16px !important;
}

.formula-help-btn sub {
  font-size: 10px !important;
  font-weight: bold !important;
  position: relative !important;
  bottom: -1px !important;
}

/* Formula link styling */
.formula-link {
  color: #007bff !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-style: italic !important;
  font-weight: 500 !important;
  margin-left: 8px !important;
  margin-right: 12px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}

.formula-link:hover {
  text-decoration: underline !important;
}

.formula-help-btn:hover {
  background: #dee2e6 !important;
}

.formula-help-btn:active {
  background: #007bff !important;
  color: white !important;
}

.ql-toolbar .ql-fill {
  fill: #495057 !important;
}

.ql-toolbar button.ql-active .ql-fill,
.ql-toolbar .ql-picker-label.ql-active .ql-fill {
  fill: white !important;
}

.ql-toolbar .ql-picker {
  width: 32px !important;
  margin-right:5px;
}

.ql-toolbar .ql-picker-options {
  background: white !important;
  border: 1px solid #ced4da !important;
  border-radius: 4px !important;
  padding: 4px !important;
}

.ql-toolbar .ql-picker-item {
  padding: 4px 8px !important;
}

.ql-toolbar .ql-picker-item:hover {
  background: #e9ecef !important;
}

.ql-container {
  border: .5px solid #dee2e6 !important;
  border-radius: 4px !important;
  background: white !important;
  min-height: 40px !important;
  padding: 1px 8px !important;
}

.ql-editor {
  padding: 4px 8px !important;
  min-height: 40px !important;
}

/* Math symbol buttons */
.ql-toolbar .ql-math-symbol {
  font-size: 1rem !important;
  width: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  height: 32px !important;
  background: #e9ecef !important;
  border: 1px solid #ced4da !important;
  border-radius: 3px !important;
  margin: 2px !important;
  padding: 0 !important;
  cursor: pointer !important;
  flex: 0 0 32px !important;
  color: black !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.ql-picker + .ql-math-symbol {
  margin-left: 6px !important;
}

.ql-toolbar .ql-math-symbol:hover {
  background: #dee2e6 !important;
}

/* Image Control Buttons */
.image-control-btn {
  width: 32px;
  height: 32px;
  min-width: 32px;
  max-width: 32px;
  background: #e9ecef;
  border: 1px solid #ced4da;
  border-radius: 3px;
  cursor: pointer;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  padding: 0;
  flex-shrink: 0;
}

.image-control-btn:hover {
  background: #dee2e6;
  border-color: #ced4da;
}

.image-control-btn:active {
  background: #007bff;
  color: white;
}

/* Cropper.js container adjustments */
/* Ensure Cropper.js image container is compatible */
#qeImageWrapper {
  position: relative !important;
  min-width: 300px;
  display: block;
}

.image-preview {
  position: relative;
  min-width: 300px;
  display: block;
}

.image-preview img {
  display: block;
  max-width: 100%;
  max-height: 200px;
  margin: 0 auto;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.cropper-bg {
  background-image: none !important;
}

.cropper-view-box {
  outline: 2px solid #39f !important;
}


/* Question Review Choices */
.choice-review {
  transition: all 0.2s;
}

.choice-correct {
  background-color: #d4edda !important;
  border-color: #28a745 !important;
  color: #155724;
}

.choice-incorrect {
  background-color: #f8d7da !important;
  border-color: #dc3545 !important;
  color: #721c24;
}

.choice-correct-answer {
  background-color: #d1ecf1 !important;
  border-color: #17a2b8 !important;
  color: #0c5460;
}

.cropper-point {
  background-color: #39f !important;
  width: 8px !important;
  height: 8px !important;
}

.cropper-line {
  background-color: #39f !important;
}

.math-symbol-container .ql-math-symbol {
  font-size: .75rem !important;
}

/* Mobile responsive styles for Start Screen */
@media (max-width: 450px) {
  /* Fix scrolling - allow start-screen to scroll */
  .start-screen {
    overflow-y: auto;
  }
  
  /* Reduce header height */
  .start-header {
    height: 50px !important;
  }
  
  /* Make test icon smaller */
  .start-header .test-icon {
    width: 45px;
    height: 45px;
  }
  
  /* Reduce h1 title font size */
  .start-header h1 {
    font-size: 18px;
  }
  
  /* Hide user name and email */
  .start-user-info {
    display: none;
  }
  
  /* Reduce content wrapper padding */
  .start-content-wrapper {
    padding: 2px;
    overflow: visible;
  }
  
  /* Change layout to single column */
  .start-main-content {
    flex-direction: column;
    gap: 10px;
    overflow: visible;
  }
  
  /* Make classes sidebar full width */
  .start-classes-sidebar {
    width: 100%;
  }
  
  /* Make tests content full width */
  .start-tests-content {
    width: 100%;
  }
  
  /* Reduce padding in My Classes area */
  .start-section-header {
    padding: 6px 16px;
  }
  
  .start-subsection-header {
    padding: 2px 8px;
    margin-bottom: 0;
  }
  
  .start-owner-section,
  .start-member-section {
    padding: 0px 0px 2px 0px;
  }
  
  .start-class-item {
    padding: 2px 12px;
  }
  
  /* Reduce padding for tests body */
  .start-tests-body {
    padding: 2px;
  }
  
  /* Reduce font size in Tests area to match My Classes */
  .test-select-table {
    font-size: 14.4px;
  }
  
  .test-title {
    font-size: 14.4px;
  }
  
  .test-description {
    font-size: 12.96px;
  }
  
  /* Reduce padding in filter input */
  #startTestsFilterInput {
    padding: 2px !important;
  }
  
  /* Hide Class and Until columns in mobile view */
  .mobile-hide-column {
    display: none;
  }
  
  .mobile-hide-cell {
    display: none;
  }
  
  /* Quiz Screen Mobile Styles */
  body {
    margin: 0;
    padding: 2px;
  }
  
  /* Hide title elements in quiz header */
  .header-main-title,
  .header-test-title,
  .header-username {
    display: none;
  }
  
  /* Reduce header height */
  header {
    height: 50px;
    padding: 8px 12px;
    margin-bottom: 8px;
  }
  
  /* Reduce main container padding */
  .main-container {
    padding: 2px;
    flex-direction: column;
    gap: 8px;
  }
  
  /* Make left and right halves full width in single column */
  .left-half,
  .right-half {
    flex: 1 1 100%;
    min-width: 100%;
    max-width: 100%;
  }
  
  .left-half {
    padding: 2px;
    font-size: 0.9em;
    width: 100%;
    overflow-x: auto;
    box-sizing: border-box;
  }
  
  .right-half {
    font-size: 0.9em;
  }
  
  /* Test Manager Mobile Styles */
  .test-manager-modal .modal-header {
    height: 50px;
    padding: 10px 6px;
  }
  
  .test-manager-modal .modal-header h3 {
    font-size: 1rem;
  }
  
  /* Hide My Tests heading */
  #myTestsSection h4 {
    display: none;
  }
  
  /* Classes header row - show but hide My Classes label */
  .test-manager-header-row label {
    display: none !important;
  }
  
  /* Show Create New Class button on mobile */
  #createNewClassBtn {
    display: block !important;
  }
  
  /* Student Classes Modal Mobile Styles */
  #studentClassesModal .modal-content {
    max-width: 95% !important;
    width: 95% !important;
    margin: 0 auto !important;
  }
  
  #studentClassesModal .modal-header {
    padding: 8px 16px !important;
    font-size: 1.1rem !important;
  }
  
  #studentClassesModal .modal-header .close {
    top: 8px !important;
    right: 12px !important;
  }
  
  #studentClassesModal .modal-content > div:last-child {
    padding: 8px !important;
  }
  
  #studentClassesModal th,
  #studentClassesModal td {
    padding: 4px !important;
  }
  
  /* Classes Table Mobile Styles */
  #classesTable {
    font-size: 14.4px;
  }
  
  #classesTable th,
  #classesTable td {
    padding: 2px !important;
  }
  
  /* Adjust column widths - make Class column widest */
  #classesTable th:nth-child(2),
  #classesTable td:nth-child(2) {
    width: auto;
  }
  
  #classesTable th:nth-child(3),
  #classesTable td:nth-child(3) {
    width: 70px;
  }
  
  #classesTable th:nth-child(4),
  #classesTable td:nth-child(4) {
    width: 45px;
  }
  
  #classesTable th:nth-child(5),
  #classesTable td:nth-child(5) {
    width: 50px;
  }
  
  /* Gradebook Mobile Styles */
  #teacherGradebookModal label[for="teacherClassSelect"] {
    display: none;
  }
  
  #teacherClassSelect {
    width: 240px !important;
  }
  
  #teacherGradebookModal,
  #teacherGradebookModal * {
    font-size: 14.4px !important;
  }
  
  /* Users Modal Mobile Styles */
  #usersModal .modal-body > div:first-child {
    margin-bottom: 0 !important;
  }
  
  #toggleDeleteModeBtn {
    display: none !important;
  }
  
  #usersModal,
  #usersModal * {
    font-size: 14.4px !important;
  }
  
  #adminsTable th,
  #adminsTable td,
  #teachersTableUsers th,
  #teachersTableUsers td,
  #studentsTable th,
  #studentsTable td {
    padding: 2px !important;
  }
  
  #adminsTable,
  #teachersTableUsers,
  #studentsTable {
    table-layout: auto !important;
  }
  
  /* Settings Modal Mobile Styles */
  #adminSettingsModal,
  #adminSettingsModal * {
    font-size: 14.4px !important;
  }
  
  #adminSettingsModal .action-btn,
  #adminSettingsModal button.action-btn {
    width: 120px !important;
    height: 30px !important;
    padding: 4px 0 !important;
    box-sizing: border-box !important;
  }
  
  #newDomainInput {
    width: 180px !important;
    flex: none !important;
    box-sizing: border-box !important;
    min-width: 180px !important;
    max-width: 180px !important;
  }
  
  #adminSettingsModal .modal-body > div:nth-child(2) > div {
    gap: 4px !important;
  }
  
  /* Question Preview Mobile - Single Column Layout */
  #questionPreviewModal .modal-body > div {
    flex-direction: column !important;
    gap: 10px !important;
  }
  
  #questionPreviewContent,
  #questionPreviewAnswers {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    font-size: 0.9em !important;
  }
  
  /* Test Preview Modal - Single Column Layout */
  #previewMainContent {
    flex-direction: column !important;
  }
  
  #previewLeftHalf,
  #previewRightHalf {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    border-right: none !important;
    padding: 2px !important;
    font-size: 0.9em !important;
    width: 100%;
    overflow-x: auto;
    box-sizing: border-box;
  }
  
  /* Center the Previous/Next buttons */
  #previewNavigation > div:first-child {
    justify-content: center !important;
  }
}

/* Print styles for Item Analysis */
@media print {
  /* Set page size and margins */
  @page {
    size: letter;
    margin: 0.5in;
  }
  
  /* Hide everything */
  body > * {
    display: none !important;
  }
  
  /* Show only the modal we want to print */
  #allTestResultsModal {
    display: block !important;
    position: static !important;
    background: none !important;
  }
  
  #allTestResultsModal .modal-content {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: none !important;
  }
  
  #allTestResultsModal .modal-header {
    display: none !important;
  }
  
  #allTestResultsModal .modal-body {
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
  }
  
  /* Hide the print link and any links in the modal body */
  #allTestResultsModal a {
    display: none !important;
  }
  
  /* Show print title in normal flow */
  #printTestTitle {
    display: block !important;
    margin: 0 0 20px 0 !important;
    padding: 10px 0 !important;
    border-bottom: 2px solid #333 !important;
    page-break-after: avoid !important;
  }
  
  /* Hide all scrollbars */
  * {
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE and Edge */
  }
  
  *::-webkit-scrollbar {
    display: none !important; /* Chrome, Safari, Opera */
  }
  
  /* Show the sections we want to print */
  #itemAnalysisSection,
  #breakdownByCategorySection {
    display: block !important;
    width: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
    page-break-inside: auto !important;
    height: auto !important;
  }
  
  /* Remove scrolling and constraints from wrapper divs */
  #itemAnalysisSection > div,
  #breakdownByCategorySection > div {
    max-height: none !important;
    overflow: visible !important;
    height: auto !important;
    border: none !important;
    padding: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }
  
  /* Remove max-height from any divs containing tables */
  #itemAnalysisSection div,
  #breakdownByCategorySection div {
    max-height: none !important;
    overflow: visible !important;
    border: none !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }
  
  /* Specifically target the wrapper div to remove border-radius */
  #breakdownByCategorySection > div[style*="border-radius"] {
    border-radius: 0 !important;
    overflow: visible !important;
  }
  
  /* Ensure h4 headings don't have excessive margins */
  #itemAnalysisSection h4,
  #breakdownByCategorySection h4 {
    margin: 0 0 10px 0 !important;
    font-size: 1rem !important;
  }
  
  /* Reduce all font sizes for compact printing */
  #itemAnalysisSection,
  #breakdownByCategorySection {
    font-size: 10px !important;
  }
  
  #printTestTitle {
    font-size: 1.2rem !important;
  }
  
  /* Reduce table cell padding */
  #itemAnalysisTable th,
  #itemAnalysisTable td,
  #domainBreakdownTable th,
  #domainBreakdownTable td,
  #skillBreakdownTable th,
  #skillBreakdownTable td {
    padding: 4px !important;
    font-size: 10px !important;
  }
  
  /* Remove background colors from table body rows in print, but keep header backgrounds */
  #itemAnalysisTable tbody tr,
  #domainBreakdownTable tbody tr,
  #skillBreakdownTable tbody tr {
    background: white !important;
  }
  
  /* Keep header row backgrounds */
  #itemAnalysisTable thead tr,
  #domainBreakdownTable thead tr,
  #skillBreakdownTable thead tr {
    background: #333 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  
  /* Force consistent font size for all table content including Text1 and Text2 */
  #itemAnalysisTable td *,
  #domainBreakdownTable td *,
  #skillBreakdownTable td * {
    font-size: 10px !important;
  }
  
  /* Hide the View column in Item Analysis table */
  #itemAnalysisTable th:first-child,
  #itemAnalysisTable td:first-child {
    display: none !important;
  }
  
  /* Adjust column widths for Item Analysis table */
  #itemAnalysisTable {
    table-layout: fixed !important;
  }
  
  /* View column - minimal width */
  #itemAnalysisTable th:nth-child(1),
  #itemAnalysisTable td:nth-child(1) {
    width: 40px !important;
  }
  
  /* Image column - minimal width */
  #itemAnalysisTable th:nth-child(3),
  #itemAnalysisTable td:nth-child(3) {
    width: 40px !important;
  }
  
  /* Points column - minimal width */
  #itemAnalysisTable th:nth-child(5),
  #itemAnalysisTable td:nth-child(5) {
    width: 40px !important;
  }
  
  /* Total column - minimal width */
  #itemAnalysisTable th:nth-child(6),
  #itemAnalysisTable td:nth-child(6) {
    width: 40px !important;
  }
  
  /* Percent column - minimal width */
  #itemAnalysisTable th:nth-child(7),
  #itemAnalysisTable td:nth-child(7) {
    width: 65px !important;
  }
  
  /* Text 1 and Text 2 columns - equal remaining width */
  #itemAnalysisTable th:nth-child(2),
  #itemAnalysisTable td:nth-child(2),
  #itemAnalysisTable th:nth-child(4),
  #itemAnalysisTable td:nth-child(4) {
    width: auto !important;
  }
  
  /* Adjust column widths for Domain and Skill tables */
  #domainBreakdownTable,
  #skillBreakdownTable {
    table-layout: fixed !important;
  }
  
  /* Pts, Total, Percent columns - minimal width */
  #domainBreakdownTable th:nth-child(2),
  #domainBreakdownTable td:nth-child(2),
  #domainBreakdownTable th:nth-child(3),
  #domainBreakdownTable td:nth-child(3),
  #skillBreakdownTable th:nth-child(2),
  #skillBreakdownTable td:nth-child(2),
  #skillBreakdownTable th:nth-child(3),
  #skillBreakdownTable td:nth-child(3) {
    width: 40px !important;
  }
  
  #domainBreakdownTable th:nth-child(4),
  #domainBreakdownTable td:nth-child(4),
  #skillBreakdownTable th:nth-child(4),
  #skillBreakdownTable td:nth-child(4) {
    width: 65px !important;
  }
  
  /* Domain and Skill name columns - remaining width */
  #domainBreakdownTable th:nth-child(1),
  #domainBreakdownTable td:nth-child(1),
  #skillBreakdownTable th:nth-child(1),
  #skillBreakdownTable td:nth-child(1) {
    width: auto !important;
  }
  
  /* Force page break before category breakdown */
  #breakdownByCategorySection {
    page-break-before: always !important;
    margin-top: 0 !important;
    padding-top: 20px !important;
  }
  
  /* Ensure tables are fully visible and can expand */
  #itemAnalysisTable,
  #domainBreakdownTable,
  #skillBreakdownTable {
    page-break-inside: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    border-radius: 0 !important;
  }
  
  /* Force parent container overflow visible */
  #breakdownByCategorySection > div {
    overflow: visible !important;
  }
  
  /* Ensure tbody is fully visible */
  #itemAnalysisTable tbody,
  #domainBreakdownTable tbody,
  #skillBreakdownTable tbody {
    max-height: none !important;
    overflow: visible !important;
    height: auto !important;
    display: table-row-group !important;
  }
  
  /* Allow rows to break across pages if needed */
  #itemAnalysisTable tr,
  #domainBreakdownTable tr,
  #skillBreakdownTable tr {
    page-break-inside: avoid !important;
    page-break-after: auto !important;
  }
  
  /* Ensure table borders are visible */
  table, th, td {
    border: 1px solid #333 !important;
  }
  
  /* Preserve background colors */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}