/* Content Form Styles */

/* Correct answer checkbox styling */
.correct-checkbox {
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.correct-checkbox .correct-icon {
  display: none;
  color: white;
  font-weight: bold;
}

.correct-checkbox.is-checked .correct-text {
  display: none;
}

.correct-checkbox.is-checked .correct-icon {
  display: inline;
}

/* Green background when checkbox is checked - using class added by JS */
.button.correct-checkbox.is-checked {
  background-color: #48c78e !important;
  color: white !important;
  border-color: #48c78e !important;
}

/* Also support browsers with :has */
.button.correct-checkbox:has(input[type="checkbox"]:checked) {
  background-color: #48c78e !important;
  color: white !important;
  border-color: #48c78e !important;
}

.button.correct-checkbox:has(input[type="checkbox"]:checked) .correct-text {
  display: none;
}

.button.correct-checkbox:has(input[type="checkbox"]:checked) .correct-icon {
  display: inline;
}

/* Trix editor styling */
trix-editor {
  border: 1px solid #dbdbdb !important;
  border-radius: 4px !important;
  padding: 0.75rem !important;
  min-height: 150px !important;
  max-height: 400px !important;
  overflow-y: auto !important;
}

trix-editor:focus {
  border-color: #485fc7;
  box-shadow: 0 0 0 0.125em rgba(72, 95, 199, 0.25);
}

trix-toolbar {
  border: 1px solid #dbdbdb !important;
  border-bottom: none !important;
  border-radius: 4px 4px 0 0 !important;
  background: #f5f5f5 !important;
}

/* Tag input styling */
.tag-input-container {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  min-height: 40px !important;
  height: auto !important;
  padding: 4px !important;
  cursor: text !important;
}

.tag-input-tags {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  margin-bottom: 0 !important;
}

.tag-input-field {
  border: none !important;
  outline: none !important;
  flex: 1 !important;
  min-width: 120px !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Tag dropdown menu */
.tag-dropdown-menu {
  width: 100% !important;
}

/* Sortable choice items */
.choice-item-sortable {
  cursor: move;
}

/* Difficulty selector */
.difficulty-selector {
  display: flex;
  align-items: center;
}

.star-button {
  padding: 0.5rem;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: transform 0.2s;
}

.star-button:hover {
  transform: scale(1.2);
}

.star-button.is-selected .icon {
  color: #ffdd57 !important;
}

/* Graded/Ungraded toggle buttons */
.button.is-selected {
  font-weight: bold;
}

/* Content grid view */
.contents-container.grid-view {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.contents-container.grid-view .content-item {
  margin-bottom: 0;
}

.contents-container.grid-view .columns {
  margin: 0;
}

.contents-container.grid-view .column.is-narrow:last-child {
  display: none; /* Hide dropdown in grid view */
}

.contents-container.grid-view .column.is-narrow:nth-last-child(2) {
  display: none; /* Hide usage column in grid view */
}

/* Pagination area spans full width of grid */
.contents-container .pagination-area {
  grid-column: 1 / -1;
  width: 100%;
}

/* Responsive grid */
@media screen and (max-width: 1024px) {
  .contents-container.grid-view {
    grid-template-columns: 1fr;
  }
}

/* Content title overflow handling */
.content-title {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  min-width: 0;
}

.content-title-link {
  display: block !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  vertical-align: top;
}

/* In grid view, allow wrapping for better readability */
.grid-view .content-title {
  max-width: 100%;
}

.grid-view .content-title-link {
  white-space: normal;
  word-wrap: break-word;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  max-width: 100%;
}

/* Fix level item overflow */
.content-item .level-item {
  max-width: 100%;
  overflow: hidden;
  flex-shrink: 1;
  min-width: 0;
}

/* Fix level-left to prevent overflow */
.content-item .level-left {
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
}

/* Ensure the div containing title can shrink */
.content-item .level-item > div {
  min-width: 0;
  overflow: hidden;
  width: 100%;
}
/*
 * Default Trix editor styles. See Action Text overwrites below.
*/

trix-editor {
  border: 1px solid #bbb;
  border-radius: 3px;
  margin: 0;
  padding: 0.4em 0.6em;
  min-height: 5em;
  outline: none; }

trix-toolbar * {
  box-sizing: border-box; }

trix-toolbar .trix-button-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  overflow-x: auto; }

trix-toolbar .trix-button-group {
  display: flex;
  margin-bottom: 10px;
  border: 1px solid #bbb;
  border-top-color: #ccc;
  border-bottom-color: #888;
  border-radius: 3px; }
  trix-toolbar .trix-button-group:not(:first-child) {
    margin-left: 1.5vw; }
    @media (max-width: 768px) {
      trix-toolbar .trix-button-group:not(:first-child) {
        margin-left: 0; } }

trix-toolbar .trix-button-group-spacer {
  flex-grow: 1; }
  @media (max-width: 768px) {
    trix-toolbar .trix-button-group-spacer {
      display: none; } }

trix-toolbar .trix-button {
  position: relative;
  float: left;
  color: rgba(0, 0, 0, 0.6);
  font-size: 0.75em;
  font-weight: 600;
  white-space: nowrap;
  padding: 0 0.5em;
  margin: 0;
  outline: none;
  border: none;
  border-bottom: 1px solid #ddd;
  border-radius: 0;
  background: transparent; }
  trix-toolbar .trix-button:not(:first-child) {
    border-left: 1px solid #ccc; }
  trix-toolbar .trix-button.trix-active {
    background: #cbeefa;
    color: black; }
  trix-toolbar .trix-button:not(:disabled) {
    cursor: pointer; }
  trix-toolbar .trix-button:disabled {
    color: rgba(0, 0, 0, 0.125); }
  @media (max-width: 768px) {
    trix-toolbar .trix-button {
      letter-spacing: -0.01em;
      padding: 0 0.3em; } }

trix-toolbar .trix-button--icon {
  font-size: inherit;
  width: 2.6em;
  height: 1.6em;
  max-width: calc(0.8em + 4vw);
  text-indent: -9999px; }
  @media (max-width: 768px) {
    trix-toolbar .trix-button--icon {
      height: 2em;
      max-width: calc(0.8em + 3.5vw); } }
  trix-toolbar .trix-button--icon::before {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.6;
    content: "";
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain; }
    @media (max-width: 768px) {
      trix-toolbar .trix-button--icon::before {
        right: 6%;
        left: 6%; } }
  trix-toolbar .trix-button--icon.trix-active::before {
    opacity: 1; }
  trix-toolbar .trix-button--icon:disabled::before {
    opacity: 0.125; }

trix-toolbar .trix-button--icon-attach::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M10.5%2018V7.5c0-2.25%203-2.25%203%200V18c0%204.125-6%204.125-6%200V7.5c0-6.375%209-6.375%209%200V18%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  top: 8%;
  bottom: 4%; }

trix-toolbar .trix-button--icon-bold::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6.522%2019.242a.5.5%200%200%201-.5-.5V5.35a.5.5%200%200%201%20.5-.5h5.783c1.347%200%202.46.345%203.24.982.783.64%201.216%201.562%201.216%202.683%200%201.13-.587%202.129-1.476%202.71a.35.35%200%200%200%20.049.613c1.259.56%202.101%201.742%202.101%203.22%200%201.282-.483%202.334-1.363%203.063-.876.726-2.132%201.12-3.66%201.12h-5.89ZM9.27%207.347v3.362h1.97c.766%200%201.347-.17%201.733-.464.38-.291.587-.716.587-1.27%200-.53-.183-.928-.513-1.198-.334-.273-.838-.43-1.505-.43H9.27Zm0%205.606v3.791h2.389c.832%200%201.448-.177%201.853-.497.399-.315.614-.786.614-1.423%200-.62-.22-1.077-.63-1.385-.418-.313-1.053-.486-1.905-.486H9.27Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-italic::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9%205h6.5v2h-2.23l-2.31%2010H13v2H6v-2h2.461l2.306-10H9V5Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-link::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M18.948%205.258a4.337%204.337%200%200%200-6.108%200L11.217%206.87a.993.993%200%200%200%200%201.41c.392.39%201.027.39%201.418%200l1.623-1.613a2.323%202.323%200%200%201%203.271%200%202.29%202.29%200%200%201%200%203.251l-2.393%202.38a3.021%203.021%200%200%201-4.255%200l-.05-.049a1.007%201.007%200%200%200-1.418%200%20.993.993%200%200%200%200%201.41l.05.049a5.036%205.036%200%200%200%207.091%200l2.394-2.38a4.275%204.275%200%200%200%200-6.072Zm-13.683%2013.6a4.337%204.337%200%200%200%206.108%200l1.262-1.255a.993.993%200%200%200%200-1.41%201.007%201.007%200%200%200-1.418%200L9.954%2017.45a2.323%202.323%200%200%201-3.27%200%202.29%202.29%200%200%201%200-3.251l2.344-2.331a2.579%202.579%200%200%201%203.631%200c.392.39%201.027.39%201.419%200a.993.993%200%200%200%200-1.41%204.593%204.593%200%200%200-6.468%200l-2.345%202.33a4.275%204.275%200%200%200%200%206.072Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-strike::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6%2014.986c.088%202.647%202.246%204.258%205.635%204.258%203.496%200%205.713-1.728%205.713-4.463%200-.275-.02-.536-.062-.781h-3.461c.398.293.573.654.573%201.123%200%201.035-1.074%201.787-2.646%201.787-1.563%200-2.773-.762-2.91-1.924H6ZM6.432%2010h3.763c-.632-.314-.914-.715-.914-1.273%200-1.045.977-1.739%202.432-1.739%201.475%200%202.52.723%202.617%201.914h2.764c-.05-2.548-2.11-4.238-5.39-4.238-3.145%200-5.392%201.719-5.392%204.316%200%20.363.04.703.12%201.02ZM4%2011a1%201%200%201%200%200%202h15a1%201%200%201%200%200-2H4Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-quote::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M4.581%208.471c.44-.5%201.056-.834%201.758-.995C8.074%207.17%209.201%207.822%2010%208.752c1.354%201.578%201.33%203.555.394%205.277-.941%201.731-2.788%203.163-4.988%203.56a.622.622%200%200%201-.653-.317c-.113-.205-.121-.49.16-.764.294-.286.567-.566.791-.835.222-.266.413-.54.524-.815.113-.28.156-.597.026-.908-.128-.303-.39-.524-.72-.69a3.02%203.02%200%200%201-1.674-2.7c0-.905.283-1.59.72-2.088Zm9.419%200c.44-.5%201.055-.834%201.758-.995%201.734-.306%202.862.346%203.66%201.276%201.355%201.578%201.33%203.555.395%205.277-.941%201.731-2.789%203.163-4.988%203.56a.622.622%200%200%201-.653-.317c-.113-.205-.122-.49.16-.764.294-.286.567-.566.791-.835.222-.266.412-.54.523-.815.114-.28.157-.597.026-.908-.127-.303-.39-.524-.72-.69a3.02%203.02%200%200%201-1.672-2.701c0-.905.283-1.59.72-2.088Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-heading-1::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21.5%207.5v-3h-12v3H14v13h3v-13h4.5ZM9%2013.5h3.5v-3h-10v3H6v7h3v-7Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-code::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3.293%2011.293a1%201%200%200%200%200%201.414l4%204a1%201%200%201%200%201.414-1.414L5.414%2012l3.293-3.293a1%201%200%200%200-1.414-1.414l-4%204Zm13.414%205.414%204-4a1%201%200%200%200%200-1.414l-4-4a1%201%200%201%200-1.414%201.414L18.586%2012l-3.293%203.293a1%201%200%200%200%201.414%201.414Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-bullet-list::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%207.5a1.5%201.5%200%201%200%200-3%201.5%201.5%200%200%200%200%203ZM8%206a1%201%200%200%201%201-1h11a1%201%200%201%201%200%202H9a1%201%200%200%201-1-1Zm1%205a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm0%206a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm-2.5-5a1.5%201.5%200%201%201-3%200%201.5%201.5%200%200%201%203%200ZM5%2019.5a1.5%201.5%200%201%200%200-3%201.5%201.5%200%200%200%200%203Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-number-list::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3%204h2v4H4V5H3V4Zm5%202a1%201%200%200%201%201-1h11a1%201%200%201%201%200%202H9a1%201%200%200%201-1-1Zm1%205a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm0%206a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm-3.5-7H6v1l-1.5%202H6v1H3v-1l1.667-2H3v-1h2.5ZM3%2017v-1h3v4H3v-1h2v-.5H4v-1h1V17H3Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-undo::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3%2014a1%201%200%200%200%201%201h6a1%201%200%201%200%200-2H6.257c2.247-2.764%205.151-3.668%207.579-3.264%202.589.432%204.739%202.356%205.174%205.405a1%201%200%200%200%201.98-.283c-.564-3.95-3.415-6.526-6.825-7.095C11.084%207.25%207.63%208.377%205%2011.39V8a1%201%200%200%200-2%200v6Zm2-1Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-redo::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21%2014a1%201%200%200%201-1%201h-6a1%201%200%201%201%200-2h3.743c-2.247-2.764-5.151-3.668-7.579-3.264-2.589.432-4.739%202.356-5.174%205.405a1%201%200%200%201-1.98-.283c.564-3.95%203.415-6.526%206.826-7.095%203.08-.513%206.534.614%209.164%203.626V8a1%201%200%201%201%202%200v6Zm-2-1Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-decrease-nesting-level::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%206a1%201%200%200%201%201-1h12a1%201%200%201%201%200%202H6a1%201%200%200%201-1-1Zm4%205a1%201%200%201%200%200%202h9a1%201%200%201%200%200-2H9Zm-3%206a1%201%200%201%200%200%202h12a1%201%200%201%200%200-2H6Zm-3.707-5.707a1%201%200%200%200%200%201.414l2%202a1%201%200%201%200%201.414-1.414L4.414%2012l1.293-1.293a1%201%200%200%200-1.414-1.414l-2%202Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-button--icon-increase-nesting-level::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%206a1%201%200%200%201%201-1h12a1%201%200%201%201%200%202H6a1%201%200%200%201-1-1Zm4%205a1%201%200%201%200%200%202h9a1%201%200%201%200%200-2H9Zm-3%206a1%201%200%201%200%200%202h12a1%201%200%201%200%200-2H6Zm-2.293-2.293%202-2a1%201%200%200%200%200-1.414l-2-2a1%201%200%201%200-1.414%201.414L3.586%2012l-1.293%201.293a1%201%200%201%200%201.414%201.414Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"); }

trix-toolbar .trix-dialogs {
  position: relative; }

trix-toolbar .trix-dialog {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  font-size: 0.75em;
  padding: 15px 10px;
  background: #fff;
  box-shadow: 0 0.3em 1em #ccc;
  border-top: 2px solid #888;
  border-radius: 5px;
  z-index: 5; }

trix-toolbar .trix-input--dialog {
  font-size: inherit;
  font-weight: normal;
  padding: 0.5em 0.8em;
  margin: 0 10px 0 0;
  border-radius: 3px;
  border: 1px solid #bbb;
  background-color: #fff;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none; }
  trix-toolbar .trix-input--dialog.validate:invalid {
    box-shadow: #F00 0px 0px 1.5px 1px; }

trix-toolbar .trix-button--dialog {
  font-size: inherit;
  padding: 0.5em;
  border-bottom: none; }

trix-toolbar .trix-dialog--link {
  max-width: 600px; }

trix-toolbar .trix-dialog__link-fields {
  display: flex;
  align-items: baseline; }
  trix-toolbar .trix-dialog__link-fields .trix-input {
    flex: 1; }
  trix-toolbar .trix-dialog__link-fields .trix-button-group {
    flex: 0 0 content;
    margin: 0; }

trix-editor [data-trix-mutable]:not(.attachment__caption-editor) {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

trix-editor [data-trix-mutable]::-moz-selection,
trix-editor [data-trix-cursor-target]::-moz-selection, trix-editor [data-trix-mutable] ::-moz-selection {
  background: none; }

trix-editor [data-trix-mutable]::selection,
trix-editor [data-trix-cursor-target]::selection, trix-editor [data-trix-mutable] ::selection {
  background: none; }

trix-editor .attachment__caption-editor:focus[data-trix-mutable]::-moz-selection {
  background: highlight; }

trix-editor .attachment__caption-editor:focus[data-trix-mutable]::selection {
  background: highlight; }

trix-editor [data-trix-mutable].attachment.attachment--file {
  box-shadow: 0 0 0 2px highlight;
  border-color: transparent; }

trix-editor [data-trix-mutable].attachment img {
  box-shadow: 0 0 0 2px highlight; }

trix-editor .attachment {
  position: relative; }
  trix-editor .attachment:hover {
    cursor: default; }

trix-editor .attachment--preview .attachment__caption:hover {
  cursor: text; }

trix-editor .attachment__progress {
  position: absolute;
  z-index: 1;
  height: 20px;
  top: calc(50% - 10px);
  left: 5%;
  width: 90%;
  opacity: 0.9;
  transition: opacity 200ms ease-in; }
  trix-editor .attachment__progress[value="100"] {
    opacity: 0; }

trix-editor .attachment__caption-editor {
  display: inline-block;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  color: inherit;
  text-align: center;
  vertical-align: top;
  border: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none; }

trix-editor .attachment__toolbar {
  position: absolute;
  z-index: 1;
  top: -0.9em;
  left: 0;
  width: 100%;
  text-align: center; }

trix-editor .trix-button-group {
  display: inline-flex; }

trix-editor .trix-button {
  position: relative;
  float: left;
  color: #666;
  white-space: nowrap;
  font-size: 80%;
  padding: 0 0.8em;
  margin: 0;
  outline: none;
  border: none;
  border-radius: 0;
  background: transparent; }
  trix-editor .trix-button:not(:first-child) {
    border-left: 1px solid #ccc; }
  trix-editor .trix-button.trix-active {
    background: #cbeefa; }
  trix-editor .trix-button:not(:disabled) {
    cursor: pointer; }

trix-editor .trix-button--remove {
  text-indent: -9999px;
  display: inline-block;
  padding: 0;
  outline: none;
  width: 1.8em;
  height: 1.8em;
  line-height: 1.8em;
  border-radius: 50%;
  background-color: #fff;
  border: 2px solid highlight;
  box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.25); }
  trix-editor .trix-button--remove::before {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.7;
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg%20height%3D%2224%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M19%206.41%2017.59%205%2012%2010.59%206.41%205%205%206.41%2010.59%2012%205%2017.59%206.41%2019%2012%2013.41%2017.59%2019%2019%2017.59%2013.41%2012z%22%2F%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 90%; }
  trix-editor .trix-button--remove:hover {
    border-color: #333; }
    trix-editor .trix-button--remove:hover::before {
      opacity: 1; }

trix-editor .attachment__metadata-container {
  position: relative; }

trix-editor .attachment__metadata {
  position: absolute;
  left: 50%;
  top: 2em;
  transform: translate(-50%, 0);
  max-width: 90%;
  padding: 0.1em 0.6em;
  font-size: 0.8em;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 3px; }
  trix-editor .attachment__metadata .attachment__name {
    display: inline-block;
    max-width: 100%;
    vertical-align: bottom;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; }
  trix-editor .attachment__metadata .attachment__size {
    margin-left: 0.2em;
    white-space: nowrap; }

.trix-content {
  line-height: 1.5;
  overflow-wrap: break-word;
  word-break: break-word; }
  .trix-content * {
    box-sizing: border-box;
    margin: 0;
    padding: 0; }
  .trix-content h1 {
    font-size: 1.2em;
    line-height: 1.2; }
  .trix-content blockquote {
    border: 0 solid #ccc;
    border-left-width: 0.3em;
    margin-left: 0.3em;
    padding-left: 0.6em; }
  .trix-content [dir=rtl] blockquote,
  .trix-content blockquote[dir=rtl] {
    border-width: 0;
    border-right-width: 0.3em;
    margin-right: 0.3em;
    padding-right: 0.6em; }
  .trix-content li {
    margin-left: 1em; }
  .trix-content [dir=rtl] li {
    margin-right: 1em; }
  .trix-content pre {
    display: inline-block;
    width: 100%;
    vertical-align: top;
    font-family: monospace;
    font-size: 0.9em;
    padding: 0.5em;
    white-space: pre;
    background-color: #eee;
    overflow-x: auto; }
  .trix-content img {
    max-width: 100%;
    height: auto; }
  .trix-content .attachment {
    display: inline-block;
    position: relative;
    max-width: 100%; }
    .trix-content .attachment a {
      color: inherit;
      text-decoration: none; }
      .trix-content .attachment a:hover, .trix-content .attachment a:visited:hover {
        color: inherit; }
  .trix-content .attachment__caption {
    text-align: center; }
    .trix-content .attachment__caption .attachment__name + .attachment__size::before {
      content: ' \2022 '; }
  .trix-content .attachment--preview {
    width: 100%;
    text-align: center; }
    .trix-content .attachment--preview .attachment__caption {
      color: #666;
      font-size: 0.9em;
      line-height: 1.2; }
  .trix-content .attachment--file {
    color: #333;
    line-height: 1;
    margin: 0 2px 2px 2px;
    padding: 0.4em 1em;
    border: 1px solid #bbb;
    border-radius: 5px; }
  .trix-content .attachment-gallery {
    display: flex;
    flex-wrap: wrap;
    position: relative; }
    .trix-content .attachment-gallery .attachment {
      flex: 1 0 33%;
      padding: 0 0.5em;
      max-width: 33%; }
    .trix-content .attachment-gallery.attachment-gallery--2 .attachment, .trix-content .attachment-gallery.attachment-gallery--4 .attachment {
      flex-basis: 50%;
      max-width: 50%; }

/*
 * We need to override trix.css’s image gallery styles to accommodate the
 * <action-text-attachment> element we wrap around attachments. Otherwise,
 * images in galleries will be squished by the max-width: 33%; rule.
*/
.trix-content .attachment-gallery > action-text-attachment,
.trix-content .attachment-gallery > .attachment {
  flex: 1 0 33%;
  padding: 0 0.5em;
  max-width: 33%;
}

.trix-content .attachment-gallery.attachment-gallery--2 > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--2 > .attachment, .trix-content .attachment-gallery.attachment-gallery--4 > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--4 > .attachment {
  flex-basis: 50%;
  max-width: 50%;
}

.trix-content action-text-attachment .attachment {
  padding: 0 !important;
  max-width: 100% !important;
}
/*
 * Admin-specific styles
 * Only loaded in admin layout
 */

/* JSON Viewer Styles for renderjson */
.json-viewer {
  padding: 10px;
  border-radius: 4px;
  background: #f8f9fa;
}

.json-viewer.json-initialized {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 13px;
  line-height: 1.5;
}

/* renderjson specific styles */
.json-viewer .renderjson {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 13px;
  line-height: 1.5;
}

.json-viewer .renderjson a.disclosure {
  color: #666;
  text-decoration: none;
  padding: 0 4px;
}

.json-viewer .renderjson a.disclosure:hover {
  background-color: #e9ecef;
  border-radius: 2px;
}

.json-viewer .renderjson .syntax {
  color: #999;
}

.json-viewer .renderjson .string {
  color: #d14;
}

.json-viewer .renderjson .number {
  color: #099;
}

.json-viewer .renderjson .boolean,
.json-viewer .renderjson .keyword {
  color: #219;
  font-weight: bold;
}

.json-viewer .renderjson .key {
  color: #333;
  font-weight: 600;
}

.json-viewer .renderjson .null {
  color: #708;
}

.json-viewer .renderjson .array,
.json-viewer .renderjson .object {
  margin-left: 1em;
}

/* Tab content styles */
.tab-content pre {
  max-width: 100%;
  overflow-x: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* Admin-specific Bulma overrides */
.tabs a[data-tab] {
  cursor: pointer;
}

.tabs a[data-tab]:hover {
  border-bottom-color: #3273dc;
}

/* API Log specific styles */
.api-log-details .box {
  margin-bottom: 1.5rem;
}

.api-log-details pre {
  font-size: 12px;
  line-height: 1.4;
}

/* Ensure proper scrolling for large JSON responses */
.json-viewer-container {
  max-height: 600px;
  overflow-y: auto;
  overflow-x: auto;
}

/* Error state for JSON parsing */
.json-parse-error {
  color: #dc3545;
  padding: 10px;
  background: #f8d7da;
  border: 1px solid #f5c6cb;
  border-radius: 4px;
}

/* Sortable.js styles for admin tables */
.sortable-row {
  cursor: move;
}

/* Inline button forms for action buttons */
.buttons form {
  display: inline-block;
  margin: 0;
}

.buttons form button {
  margin: 0;
}

.handle {
  cursor: grab;
}

.handle:hover {
  cursor: grab !important;
}

.handle:active {
  cursor: grabbing !important;
}

.sortable-ghost {
  opacity: 0.4;
  background: #f5f5f5;
}

.sortable-chosen {
  background: #f0f8ff;
}
/* Pricing Matrix Styles */

.pricing-matrix-table td {
  vertical-align: middle;
}

.pricing-matrix-table .field.has-addons {
  margin-bottom: 0 !important;
}

.pricing-input-disabled {
  background-color: #f5f5f5;
}
/* Sortable table styles */
.sortable-handle {
  cursor: move !important;
}

.sortable-row {
  transition: background-color 0.2s;
}

.sortable-row.sortable-ghost {
  opacity: 0.4;
  background-color: #f5f5f5;
}

.sortable-row.sortable-drag {
  opacity: 0.9;
  background-color: #fff;
  box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}

/* Ensure handle is visible and properly styled */
td.handle {
  width: 40px;
  text-align: center;
}

td.handle .icon {
  cursor: move;
  transition: color 0.2s;
}

td.handle:hover .icon {
  color: #3273dc !important;
}
/* Subscription Plans Admin Styles */

/* Scoped to admin subscription plans page to avoid affecting other tab implementations */
.subscription-plans-tabs .tab-content:not(.is-active) {
  display: none;
}

.configuration-fields {
  position: relative;
}

.configuration-fields .delete {
  position: absolute;
  right: 1rem;
  top: 1rem;
}

.rollover-settings {
  margin-top: 1rem;
  padding: 1rem;
  background-color: #f5f5f5;
  border-radius: 4px;
}
.answer-sheet-actions {
  align-items: stretch;
}

.answer-sheet-actions > .button,
.answer-sheet-actions > .answer-sheet-action-form {
  width: 100%;
}

.answer-sheet-action-form .button {
  width: 100%;
}
/* Common application styles */

/* Clickable card hover effect */
.is-clickable {
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.is-clickable:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Delete button cursor */
.delete {
  cursor: pointer;
}

/* Card minimum heights for consistency */
.card-content-min {
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.card-content-min-small {
  min-height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Image container styles */
.image-preview-container {
  object-fit: contain;
  border: 1px solid #dbdbdb;
  border-radius: 6px;
}

/* Processing placeholder */
.processing-placeholder {
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Fix Bulma tags.has-addons - remove gaps between tags */
.tags.has-addons {
  flex-wrap: wrap;
  gap: 0 !important;
}

/* Bulma's .tags adds margin to .tag elements - override with !important */
.tags.has-addons > .tag {
  margin-bottom: 0 !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
  margin-top: 0 !important;
  border-radius: 0;
}

/* First tag in has-addons should have left border-radius */
.tags.has-addons > .tag:first-child {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

/* Last tag in has-addons should have right border-radius */
.tags.has-addons > .tag:last-child {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
/* Team / Organization members avatar placeholder */
.avatar-placeholder {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7057ff 0%, #4a90e2 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.95rem;
  text-transform: uppercase;
  user-select: none;
  flex-shrink: 0;
}

.member-row.is-hidden {
  display: none !important;
}

.pending-invites .card {
  border-left: 3px solid hsl(48, 100%, 67%);
  box-shadow: 0 1px 2px rgba(10, 10, 10, 0.04);
}

/* Organization show page tabs — only the active tab content is visible */
[data-controller~="organization"] > .tab-content { display: none; }
[data-controller~="organization"] > .tab-content.is-active { display: block; }

/* Cart Panel Styles for Collection Field Selection */
.cart-panel {
  position: fixed;
  right: 0;
  top: 0;
  height: 100vh;
  width: 500px;
  background: white;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  transform: translateX(0);
  transition: transform 0.3s ease;
}

/* Collapsed state - shows only toggle button */
.cart-panel.collapsed {
  transform: translateX(100%);
}

/* Minimized state - completely hidden, only toggle visible */
.cart-panel.minimized {
  transform: translateX(500px);
}

/* Toggle button visible when collapsed or minimized */
.cart-toggle {
  position: absolute;
  left: -80px;
  top: 50%;
  transform: translateY(-50%);
  width: 60px;
  height: 60px;
  background: #3273dc;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: -2px 2px 8px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

/* Keep toggle visible when minimized */
.cart-panel.minimized .cart-toggle {
  left: -80px;
  opacity: 1;
}

.cart-toggle:hover {
  background: #2366d1;
  transform: translateY(-50%) scale(1.1);
}

.cart-toggle-count {
  position: absolute;
  top: 5px;
  right: 5px;
  background: #ff3860;
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 11px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Cart content wrapper */
.cart-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  opacity: 1;
  transition: opacity 0.3s ease;
  overflow: hidden;
}

.cart-panel.collapsed .cart-content,
.cart-panel.minimized .cart-content {
  opacity: 0;
  pointer-events: none;
}

.cart-header {
  padding: 1.5rem;
  border-bottom: 1px solid #e8e8e8;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f5f5f5;
}

.cart-header-left {
  flex: 1;
  min-width: 0; /* Allow text truncation */
}

.cart-header-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.cart-title {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 250px;
}

.cart-body {
  flex: 1;
  overflow-y: hidden;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
}

.cart-items {
  overflow-y: auto;
  overflow-x: hidden;
  margin-bottom: 1rem;
  padding-right: 0.5rem;
  flex: 1;
  min-height: 200px;
}

/* Custom scrollbar for cart items */
.cart-items::-webkit-scrollbar {
  width: 8px;
}

.cart-items::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.cart-items::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

.cart-items::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.cart-item {
  padding: 1rem;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  margin-bottom: 0.75rem;
  background: #fafafa;
  transition: all 0.2s ease;
}

.cart-item:hover {
  background: #f0f0f0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.cart-item-title {
  font-weight: 600;
  margin-bottom: 0.25rem;
  word-break: break-word;
  line-height: 1.4;
}

.cart-item-title span:not(.icon) {
  display: inline;
  word-break: break-word;
}

/* Collapsible sections */
.cart-collection-info .level,
.cart-group-settings .level {
  user-select: none;
  transition: background-color 0.2s ease;
  border-radius: 4px;
  padding: 0.25rem;
  margin: -0.25rem;
}

.cart-collection-info .level:hover,
.cart-group-settings .level:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.cart-collection-info .icon,
.cart-group-settings .icon {
  transition: transform 0.2s ease;
}

.cart-item .level {
  margin-bottom: 0;
}

.cart-item .points-input {
  width: 80px;
}

.cart-footer {
  padding: 1.5rem;
  border-top: 1px solid #e8e8e8;
  background: #f5f5f5;
}

/* No adjustment to main content - cart overlays */
body.cart-open .container-fluid {
  margin-right: 0;
}

body.cart-minimized .container-fluid {
  margin-right: 0;
}

/* Cart indicator in navbar */
#navbar-cart-indicator {
  display: none;
  position: relative;
  margin-right: 1rem;
}

#navbar-cart-indicator .icon {
  color: #3273dc;
}

#navbar-cart-indicator .cart-count {
  position: absolute;
  top: -8px;
  right: -8px;
  background: #ff3860;
  color: white;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 11px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .cart-panel {
    width: 100%;
  }
  
  .cart-panel.collapsed {
    transform: translateX(100%);
  }
  
  .cart-panel.minimized {
    transform: translateX(100%);
  }
}

/* Animations */
@keyframes slideIn {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(50, 115, 220, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(50, 115, 220, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(50, 115, 220, 0);
  }
}

@keyframes pulse-warning {
  0%, 100% {
    background-color: rgba(255, 221, 87, 0.2);
  }
  50% {
    background-color: rgba(255, 221, 87, 0.4);
  }
}

.cart-toggle.has-items {
  animation: pulse 2s infinite;
}
/* Enhanced Code Editor Styles */

.code-editor-container {
  position: relative;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: white;
  overflow: hidden;
}

.code-editor-header {
  background: #f8f9fa;
  border-bottom: 1px solid #e5e7eb;
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.editor-title {
  font-weight: 600;
  color: #374151;
  margin: 0;
  font-size: 14px;
}

.editor-controls {
  display: flex;
  gap: 8px;
  align-items: center;
}

.editor-control-btn {
  padding: 4px 8px;
  font-size: 12px;
  border: 1px solid #d1d5db;
  background: white;
  color: #6b7280;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.editor-control-btn:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
}

.editor-control-btn.active {
  background: #3b82f6;
  color: white;
  border-color: #3b82f6;
}

.code-editor-body {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 400px;
}

.code-editor-body.with-preview {
  grid-template-columns: 1fr 300px;
}

.editor-main {
  position: relative;
  overflow: hidden;
}

.editor-textarea {
  width: 100%;
  height: 100%;
  min-height: 400px;
  font-family: 'Fira Code', 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Consolas', monospace;
  font-size: 14px;
  line-height: 1.5;
  border: none;
  outline: none;
  resize: none;
  padding: 15px;
  background: transparent;
  color: transparent;
  caret-color: #374151;
  tab-size: 2;
  -moz-tab-size: 2;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.syntax-highlighter {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 15px;
  font-family: 'Fira Code', 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Consolas', monospace;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-wrap: break-word;
  pointer-events: none;
  background: white;
  overflow: auto;
  z-index: 1;
}

.line-numbers {
  position: absolute;
  left: 0;
  top: 0;
  width: 50px;
  background: #f8f9fa;
  border-right: 1px solid #e5e7eb;
  padding: 15px 8px;
  font-family: 'Fira Code', 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Consolas', monospace;
  font-size: 12px;
  line-height: 1.5;
  color: #9ca3af;
  text-align: right;
  user-select: none;
  pointer-events: none;
  overflow: hidden;
  z-index: 2;
}

.editor-with-line-numbers .editor-textarea,
.editor-with-line-numbers .syntax-highlighter {
  padding-left: 65px;
}

/* Syntax Highlighting Colors */
.syntax-command {
  color: #8b5cf6;
  font-weight: 600;
}

.syntax-string {
  color: #059669;
}

.syntax-number {
  color: #dc2626;
}

.syntax-option {
  color: #0891b2;
}

.syntax-keyword {
  color: #7c3aed;
  font-weight: 500;
}

.syntax-parameter {
  color: #374151;
}

.syntax-delimiter {
  color: #6b7280;
  font-weight: bold;
}

.syntax-comment {
  color: #9ca3af;
  font-style: italic;
}

.syntax-error {
  color: #dc2626;
  background: rgba(220, 38, 38, 0.1);
  border-radius: 2px;
  padding: 0 2px;
}

/* Auto-completion Suggestions */
.suggestions-popup {
  position: absolute;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  max-height: 200px;
  overflow-y: auto;
  z-index: 1000;
  min-width: 250px;
}

.suggestion-item {
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid #f3f4f6;
  transition: background-color 0.1s;
}

.suggestion-item:hover {
  background: #f8fafc;
}

.suggestion-item:last-child {
  border-bottom: none;
}

.suggestion-trigger {
  font-family: 'Fira Code', monospace;
  font-weight: 600;
  color: #8b5cf6;
  font-size: 13px;
}

.suggestion-description {
  font-size: 12px;
  color: #6b7280;
  margin-top: 2px;
}

/* Live Preview Panel */
.preview-panel {
  border-left: 1px solid #e5e7eb;
  background: #f8f9fa;
  overflow-y: auto;
  padding: 16px;
}

.preview-header {
  font-weight: 600;
  color: #374151;
  margin-bottom: 12px;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.preview-content {
  space-y: 8px;
}

.preview-empty {
  color: #9ca3af;
  font-style: italic;
  text-align: center;
  padding: 20px;
  font-size: 14px;
}

.preview-item {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 8px;
}

.preview-command {
  font-family: 'Fira Code', monospace;
  font-size: 12px;
  color: #8b5cf6;
  font-weight: 600;
  margin-bottom: 4px;
}

.preview-result {
  font-size: 13px;
  color: #374151;
  line-height: 1.4;
}

.preview-comment {
  color: #9ca3af;
  font-style: italic;
  margin: 8px 0;
  font-size: 13px;
}

/* Error Panel */
.error-panel {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 6px;
  padding: 12px;
  margin-top: 8px;
  display: none;
}

.error-panel.has-errors {
  display: block;
}

.error-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 13px;
}

.error-item:last-child {
  margin-bottom: 0;
}

.error-line {
  color: #991b1b;
  font-weight: 600;
  font-family: 'Fira Code', monospace;
  font-size: 12px;
  min-width: 60px;
}

.error-message {
  color: #dc2626;
  flex: 1;
}

/* Command Palette */
.command-palette {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 16px;
}

.palette-header {
  font-weight: 600;
  color: #374151;
  margin-bottom: 12px;
  font-size: 14px;
}

.command-snippets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px;
}

.snippet-item {
  background: #f8f9fa;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  padding: 8px 10px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 12px;
}

.snippet-item:hover {
  background: #e5e7eb;
  border-color: #9ca3af;
}

.snippet-command {
  font-family: 'Fira Code', monospace;
  color: #8b5cf6;
  font-weight: 600;
  margin-bottom: 2px;
}

.snippet-description {
  color: #6b7280;
  font-size: 11px;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .code-editor-body.with-preview {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
  }
  
  .preview-panel {
    border-left: none;
    border-top: 1px solid #e5e7eb;
    max-height: 200px;
  }
}

@media (max-width: 768px) {
  .editor-controls {
    flex-wrap: wrap;
    gap: 4px;
  }
  
  .editor-control-btn {
    font-size: 11px;
    padding: 3px 6px;
  }
  
  .line-numbers {
    width: 40px;
  }
  
  .editor-with-line-numbers .editor-textarea,
  .editor-with-line-numbers .syntax-highlighter {
    padding-left: 55px;
  }
}

/* Scrollbar Styling */
.syntax-highlighter::-webkit-scrollbar,
.editor-textarea::-webkit-scrollbar,
.preview-panel::-webkit-scrollbar {
  width: 8px;
}

.syntax-highlighter::-webkit-scrollbar-track,
.editor-textarea::-webkit-scrollbar-track,
.preview-panel::-webkit-scrollbar-track {
  background: #f1f5f9;
}

.syntax-highlighter::-webkit-scrollbar-thumb,
.editor-textarea::-webkit-scrollbar-thumb,
.preview-panel::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

.syntax-highlighter::-webkit-scrollbar-thumb:hover,
.editor-textarea::-webkit-scrollbar-thumb:hover,
.preview-panel::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Animation for smooth transitions */
.preview-item,
.suggestion-item,
.snippet-item {
  animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Focus indicators */
.editor-textarea:focus + .syntax-highlighter {
  box-shadow: inset 0 0 0 2px rgba(59, 130, 246, 0.3);
}

/* Selection styling */
.editor-textarea::selection {
  background: rgba(59, 130, 246, 0.3);
}

/* Dark mode support (optional) */
@media (prefers-color-scheme: dark) {
  .code-editor-container {
    border-color: #374151;
    background: #1f2937;
  }
  
  .code-editor-header {
    background: #374151;
    border-color: #4b5563;
  }
  
  .editor-title {
    color: #f9fafb;
  }
  
  .syntax-highlighter {
    background: #1f2937;
    color: #f9fafb;
  }
  
  .line-numbers {
    background: #374151;
    border-color: #4b5563;
    color: #9ca3af;
  }
  
  .preview-panel {
    background: #374151;
    border-color: #4b5563;
  }
  
  .preview-item {
    background: #1f2937;
    border-color: #4b5563;
  }
}
/* Scan Reviews Page Styles */

/* Scan thumbnail and card styles */
.scan-thumbnail {
  cursor: pointer;
  transition: transform 0.2s;
  object-fit: contain;
  height: 100%;
  width: 100%;
}

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

.scan-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.scan-card .card-content {
  flex: 1;
}

.scan-status-tag {
  position: absolute;
  top: 10px;
  right: 10px;
}

/* Review Modal specific styles */
.review-modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 2000 !important; /* Higher than sidebar toggle */
  width: 100vw !important;
  height: 100vh !important;
}

/* Ensure modal background covers everything */
.review-modal .modal-background,
#missing-attendees-modal .modal-background {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
}

.review-modal.is-active {
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 30px;
  padding-left: 290px; /* Account for sidebar width */
}

/* Review modal card - larger for split view */
.review-modal-card {
  position: relative;
  width: calc(100vw - 370px); /* Viewport minus sidebar (260px) and right padding (110px) */
  max-width: calc(100vw - 370px); /* Ensure it doesn't exceed available space */
  height: calc(100vh - 132px); /* Viewport minus navbar (52px) and padding (80px) */
  margin: 0 auto;
  margin-top: 26px; /* Half of navbar height to offset from top */
  display: flex;
  flex-direction: column;
}

/* Override Bulma's modal-card width restrictions */
.review-modal .modal-card {
  width: 100% !important;
  max-width: none !important;
}

.review-modal-card .modal-card-body {
  flex: 1;
  overflow: hidden;
  height: 100%;
}

/* Modal columns layout */
.review-modal-card .columns {
  height: 100%;
  margin: 0;
}

/* Modal left column - image viewer */
.review-modal-card .image-column {
  height: 100%;
  position: relative;
  overflow: hidden;
  border-right: 1px solid #dbdbdb;
}

.review-modal-card .image-container {
  height: 100%;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
}

.review-modal-card .scan-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  cursor: zoom-in;
  transition: transform 0.3s;
}

/* Modal right column - form */
.review-modal-card .form-column {
  height: 100%;
  overflow-y: auto;
}

/* Modal footer */
.review-modal-card .modal-card-foot .level {
  width: 100%;
}

/* Adjust when sidebar is collapsed */
body.sidebar-collapsed .review-modal.is-active {
  padding-left: 100px; /* Much less padding when sidebar collapsed (70px sidebar + 30px padding) */
}

body.sidebar-collapsed .review-modal-card {
  width: calc(100vw - 180px); /* Full width minus collapsed sidebar (70px) and padding (110px) */
  max-width: calc(100vw - 180px); /* Ensure it doesn't exceed available space */
}

/* Mobile responsive for review modal */
@media screen and (max-width: 768px) {
  .review-modal-card {
    width: calc(100vw - 40px);
    height: calc(100vh - 40px);
    margin-left: 0;
  }
  
  .review-modal.is-active {
    padding: 20px;
    padding-left: 20px; /* Reset padding for mobile */
  }
}

/* Right sidebar filter buttons */
.buttons.is-fullwidth .button {
  justify-content: flex-start;
}

.buttons.is-fullwidth .button .tag {
  margin-left: auto;
}

/* Placeholder image container */
.scan-placeholder {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Page number display */
.scan-page-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Missing Attendees Modal - separate styling */
#missing-attendees-modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 2000 !important; /* Higher than sidebar toggle */
  width: 100vw !important;
  height: 100vh !important;
}

#missing-attendees-modal.modal.is-active {
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0;
}

#missing-attendees-modal .modal-card {
  width: 90vw;
  max-width: 900px;
  max-height: 80vh;
  margin-top: 3rem;
}

#missing-attendees-modal .modal-card-body {
  max-height: calc(80vh - 200px);
  overflow-y: auto;
}
.collection-sidebar-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
}

.collection-sidebar-actions > .control {
  min-width: 0;
}

.collection-sidebar-actions > .control:not(:first-child) .button {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  margin-left: -1px;
}

.collection-sidebar-actions > .control:not(:last-child) .button {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}

.collection-sidebar-actions .button {
  justify-content: center;
  min-width: 0;
  white-space: nowrap;
  width: 100%;
}

.collection-sidebar-actions .button > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Configure Forms page styles */
.configure-forms-field label.checkbox,
.configure-forms-field label.radio {
  cursor: pointer;
  display: block;
  padding: 0.25rem 0;
}

.configure-forms-field label.checkbox:hover,
.configure-forms-field label.radio:hover {
  background-color: #f5f5f5;
  margin-left: -0.5rem;
  padding-left: 0.5rem;
  margin-right: -0.5rem;
  padding-right: 0.5rem;
  border-radius: 4px;
}

.configure-forms-field .help {
  font-size: 0.85rem;
}

.configure-forms-density {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.configure-forms-density label.radio {
  margin: 0;
  padding: 0.75rem;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  text-align: center;
  display: block;
}

.configure-forms-density label.radio:has(input:checked) {
  background-color: #f0f9ff;
  border-color: #3182ce;
}

.configure-forms-density label.radio input {
  display: none;
}

.configure-forms-density label.radio .label {
  display: block;
  font-weight: 500;
  margin-bottom: 0.125rem;
}

.configure-forms-density label.radio .description {
  font-size: 0.75rem;
  color: #6b7280;
}

.configure-forms-columns.is-sheet-config .column:not(:last-child) {
  border-right: 1px solid #e2e8f0;
  padding-right: 2rem;
}

.configure-forms-field-group h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: #4a5568;
}

.configure-forms-field-group h4 {
  font-size: 0.875rem;
  font-weight: 600;
  margin: 1rem 0 0.5rem;
  color: #718096;
  padding-top: 0.75rem;
  border-top: 1px solid #e2e8f0;
}

.configure-forms-custom-template {
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  padding: 1rem;
  margin-top: 1rem;
}

.configure-forms-custom-template .title {
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.configure-forms-custom-template .help {
  font-size: 0.8rem;
  color: #6c757d;
  margin-bottom: 0.75rem;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .configure-forms-columns.is-sheet-config .column:not(:last-child) {
    border-right: none;
    border-bottom: 1px solid #e2e8f0;
    padding-right: 0;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
  }
}

@media (max-width: 768px) {
  .configure-forms-density {
    grid-template-columns: 1fr;
  }
}
/* Field Bank Styles */

/* Category Tree */
.menu-list li ul {
  margin: 0;
  margin-left: 1.5em;
  padding-left: 0;
}

.menu-list a.is-active {
  background-color: #3273dc;
  color: #fff;
}

.menu-list a:hover {
  background-color: #f5f5f5;
}

.menu-list a.is-active:hover {
  background-color: #2366d1;
}

/* Field Items */
.field-item {
  transition: transform 0.2s, box-shadow 0.2s;
}

.field-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.field-item.selected {
  background-color: #f0f8ff;
  border-color: #3273dc;
}

/* Bulk Actions Bar */
.bulk-actions-bar {
  position: sticky;
  bottom: 20px;
  z-index: 10;
  margin-top: 20px;
}

/* Tag Pills */
.tags .tag {
  cursor: pointer;
}

.tags .tag:hover {
  background-color: #3273dc !important;
  color: white !important;
}

/* Field Type Badge */
.field-type-badge {
  display: inline-block;
  padding: 0.25em 0.5em;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 4px;
  text-transform: uppercase;
}

/* Category Sidebar */
.category-sidebar {
  position: sticky;
  top: 20px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}

/* Search Bar */
.field-search {
  position: relative;
}

.field-search .icon {
  pointer-events: none;
}

/* Grid View (when implemented) */
.fields-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
}

.fields-grid .field-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.fields-grid .field-card .card-content {
  flex: 1;
}

/* Empty State */
.empty-state {
  padding: 3rem;
  text-align: center;
}

.empty-state .icon {
  font-size: 4rem;
  color: #dbdbdb;
  margin-bottom: 1rem;
}

/* Filters */
.filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.filter-tags .tag {
  cursor: pointer;
}

.filter-tags .tag .delete {
  margin-left: 0.25rem;
}

/* Responsive */
@media screen and (max-width: 768px) {
  .columns.is-desktop {
    display: block;
  }
  
  .category-sidebar {
    position: static;
    max-height: none;
    margin-bottom: 2rem;
  }
}

/* Pagination override for consistent style */
.pagination {
  margin-top: 2rem;
}

/* Modal improvements */
.modal-card {
  width: 600px;
  max-width: 90%;
}

/* Loading state */
.is-loading-fields {
  position: relative;
  pointer-events: none;
  opacity: 0.5;
}

.is-loading-fields::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border: 4px solid #f5f5f5;
  border-top-color: #3273dc;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
/* Form Builder Styles */

.form-builder-container {
  display: grid;
  grid-template-columns: 200px 1fr 300px;
  grid-template-rows: auto 1fr;
  grid-template-areas: 
    "toolbar toolbar toolbar"
    "palette canvas properties";
  height: 800px; /* Fixed height instead of 100vh */
  gap: 10px;
  padding: 10px;
  background-color: #f8f9fa;
  margin: 20px 0;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.form-builder-toolbar {
  grid-area: toolbar;
  background: white;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.form-builder-toolbar h1 {
  margin: 0;
  font-size: 1.5rem;
  color: #333;
}

.toolbar-actions {
  display: flex;
  gap: 10px;
}

.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.2s;
}

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

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

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

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

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

.btn-success:hover {
  background-color: #1e7e34;
}

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

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

.btn-sm {
  padding: 4px 8px;
  font-size: 12px;
}

/* Component Palette */
.component-palette {
  grid-area: palette;
  background: white;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  overflow-y: auto;
}

.palette-title {
  font-weight: bold;
  margin-bottom: 15px;
  color: #333;
  font-size: 1.1rem;
}

.component-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 8px;
  margin-bottom: 8px;
  background: #f8f9fa;
  border: 2px solid #e9ecef;
  border-radius: 8px;
  cursor: grab;
  transition: all 0.2s;
  user-select: none;
}

.component-item:hover {
  background: #e9ecef;
  border-color: #007bff;
  transform: translateY(-2px);
}

.component-item:active {
  cursor: grabbing;
}

.component-icon {
  font-size: 24px;
  margin-bottom: 4px;
}

.component-label {
  font-size: 12px;
  text-align: center;
  color: #495057;
  font-weight: 500;
}

/* Canvas Area */
.form-canvas {
  grid-area: canvas;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  overflow: auto;
  position: relative;
}

.canvas-header {
  padding: 15px;
  border-bottom: 1px solid #e9ecef;
  background: #f8f9fa;
  border-radius: 8px 8px 0 0;
}

.canvas-title {
  font-weight: bold;
  color: #333;
  margin: 0;
}

.canvas-content {
  position: relative;
  min-height: 600px;
  padding: 20px;
}

/* Form Elements on Canvas */
.form-element {
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: all 0.2s;
  user-select: none;
}

.form-element:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transform: translateY(-1px);
}

.form-element.selected {
  border-color: #007bff !important;
  box-shadow: 0 0 0 3px rgba(0,123,255,0.25);
}

.element-preview {
  font-family: monospace;
  font-size: 14px;
  line-height: 1.4;
  color: #333;
}

/* Properties Panel */
.properties-panel {
  grid-area: properties;
  background: white;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  overflow-y: auto;
}

.properties-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e9ecef;
}

.properties-header h3 {
  margin: 0;
  font-size: 1.1rem;
  color: #333;
}

.properties-body {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group label {
  font-weight: 500;
  margin-bottom: 5px;
  color: #495057;
  font-size: 14px;
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 8px 12px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  font-size: 14px;
  transition: border-color 0.2s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0,123,255,0.25);
}

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

/* Mode Toggle */
.mode-toggle {
  display: flex;
  border: 1px solid #ced4da;
  border-radius: 4px;
  overflow: hidden;
}

.mode-toggle button {
  padding: 8px 16px;
  border: none;
  background: white;
  cursor: pointer;
  transition: background-color 0.2s;
}

.mode-toggle button.active {
  background: #007bff;
  color: white;
}

.mode-toggle button:hover:not(.active) {
  background: #f8f9fa;
}

/* Source Text Area */
.source-text-container {
  display: none;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.source-text-container.active {
  display: block;
}

.source-text-area {
  width: 100%;
  min-height: 400px;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  padding: 15px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  resize: vertical;
}

/* Responsive Design */
@media (max-width: 1200px) {
  .form-builder-container {
    grid-template-columns: 180px 1fr 250px;
  }
}

@media (max-width: 768px) {
  .form-builder-container {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas: 
      "toolbar"
      "palette"
      "canvas"
      "properties";
    height: auto;
  }
  
  .component-palette {
    max-height: 200px;
  }
  
  .properties-panel {
    max-height: 300px;
  }
}

/* Drag and Drop States */
.component-item.dragging {
  opacity: 0.5;
  transform: rotate(5deg);
}

.form-canvas.drag-over {
  background-color: rgba(0, 123, 255, 0.05);
}

.form-canvas.drag-over::after {
  content: "Drop component here";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 123, 255, 0.9);
  color: white;
  padding: 20px 40px;
  border-radius: 8px;
  font-weight: bold;
  pointer-events: none;
}

/* Loading States */
.loading {
  opacity: 0.6;
  pointer-events: none;
}

.loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
  border: 2px solid #f3f3f3;
  border-top: 2px solid #007bff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/* Navbar Layout - Force single row always */
.navbar {
  min-height: 3.25rem !important;
  max-height: 3.25rem !important;
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
  flex-wrap: nowrap !important;
}

.navbar > .container-fluid {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
}

.navbar-brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.navbar-menu {
  display: flex !important;
  flex-grow: 1 !important;
  align-items: center !important;
  box-shadow: none !important;
  padding: 0 !important;
  position: static !important;
  background-color: transparent !important;
}

/* Override Bulma's mobile-first responsive behavior */
@media screen and (max-width: 1023px) {
  .navbar-menu {
    display: flex !important;
    box-shadow: none !important;
    padding: 0 !important;
    position: static !important;
    background-color: transparent !important;
  }
}

.navbar-start {
  flex: 1;
  justify-content: flex-start;
  display: flex;
  align-items: center;
}

.navbar-end {
  justify-content: flex-end !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
  overflow: hidden !important;
  max-width: calc(100vw - 200px) !important;
}

/* Force burger menu to be hidden - we want horizontal layout always */
.navbar-burger {
  display: none !important;
}

/* Mobile responsive - keep items horizontal but smaller */
@media screen and (max-width: 768px) {
  .navbar-item {
    padding: 0.25rem 0.5rem;
  }
  
  .navbar-item .button {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    height: auto;
  }
  
  /* Hide button text on very small screens, keep icons */
  @media screen and (max-width: 480px) {
    .navbar-end .navbar-item .button span:not(.icon) {
      display: none;
    }
    
    .navbar-brand .has-text-weight-bold {
      font-size: 1rem !important;
    }
  }
}

/* Avatar in navbar */
.navbar-item img.is-rounded {
  max-height: 24px;
}

/* Extra compact navbar items */
.navbar-item {
  padding: 0.25rem 0.4rem;
  white-space: nowrap;
  font-size: 0.875rem;
}

.navbar-item .tags.has-addons.is-small {
  margin-bottom: 0;
}

.navbar-item .tag.is-small {
  font-size: 0.625rem;
  padding: 0.125rem 0.25rem;
  height: auto;
}

.navbar-item.has-dropdown .navbar-link {
  padding-right: 1.5rem;
  padding-left: 0.5rem;
}

/* Smaller icon size in navbar */
.navbar-item .icon.is-small {
  font-size: 0.8rem;
}

/* Extra compact buttons in navbar */
.navbar-item .button.is-small {
  font-size: 0.75rem;
  height: 1.8rem;
  padding: 0.25rem 0.5rem;
}

/* Make navbar text shorter */
.navbar-item .icon-text {
  gap: 0.25rem;
}

.navbar-item .icon-text span:not(.icon) {
  font-size: 0.875rem;
}

/* Ensure buttons in navbar-end don't wrap */
.navbar-end .buttons {
  margin-bottom: 0;
  align-items: center;
}

.navbar-end .buttons .button {
  margin-bottom: 0;
  height: 2.5rem !important;
  padding: 0.5rem 1rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  border-width: 1px !important;
}

.navbar-end .buttons .button .icon {
  margin-right: 0.5rem !important;
}

.navbar-end .buttons .button span:not(.icon) {
  line-height: 1 !important;
}

/* Make user dropdown more compact */
.navbar-item.has-dropdown .navbar-link .icon-text span {
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Navbar color rules moved to sidebar.css to avoid duplication */

/* === Brand area aligned with the sidebar column ===
   The brand sits at the very top-left, on top of the sidebar's vertical column.
   We make the brand block exactly as wide as the sidebar (260px expanded,
   60px collapsed) so its hover background reads as one continuous "column"
   with the sidebar below — instead of a small text-sized pill floating in the
   navbar. Negative margin cancels the container-fluid `px-3` padding so the
   block sits flush against the viewport edge. */
body:has(.dashboard-sidebar) .navbar.is-dark .navbar-brand {
  width: 16.25rem;          /* 260px - matches .dashboard-sidebar width */
  height: 3.25rem;          /* fills full navbar height (.navbar min/max-height) */
  align-self: stretch;      /* override the navbar's align-items: center */
  margin-left: -0.75rem;    /* cancels container-fluid .px-3 padding-left */
  flex-shrink: 0;
  transition: width 0.3s ease;
}

body:has(.dashboard-sidebar.collapsed:not(.hover-expanded)) .navbar.is-dark .navbar-brand {
  width: 3.75rem;           /* 60px - matches .dashboard-sidebar.collapsed width */
}

body:has(.dashboard-sidebar) .navbar.is-dark .navbar-brand > .navbar-item {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
  transition: background-color 0.15s ease;
}

/* Override the generic .navbar-item:hover (sidebar.css line 681) so the brand
   block uses a stronger fill that matches the sidebar toggle's hover color. */
body:has(.dashboard-sidebar) .navbar.is-dark .navbar-brand > .navbar-item:hover,
body:has(.dashboard-sidebar) .navbar.is-dark .navbar-brand > .navbar-item:focus {
  background-color: #34495e !important;
}

/* Hide the "Evallor" text when the sidebar is collapsed (and not hover-expanded),
   mirroring the sidebar's own label-hiding behavior. The chart icon stays. */
body:has(.dashboard-sidebar.collapsed:not(.hover-expanded)) .navbar.is-dark .navbar-brand .icon-text > span:not(.icon) {
  display: none;
}
/* Notification Sidebar Styles */
.notification-sidebar {
  position: fixed;
  top: 0;
  right: -400px;
  width: 400px;
  height: 100vh;
  background: white;
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
  z-index: 1040;
  transition: right 0.3s ease-in-out;
  display: flex;
  flex-direction: column;
}

.notification-sidebar.is-active {
  right: 0;
}

.notification-sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1039;
  display: none;
}

.notification-sidebar-overlay.is-active {
  display: block;
}

.notification-sidebar-header {
  padding: 1.25rem;
  border-bottom: 1px solid #e8e8e8;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f5f5f5;
}

.notification-sidebar-actions {
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid #e8e8e8;
  background: #fafafa;
}

.notification-sidebar-content {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

.notification-sidebar-footer {
  padding: 1rem;
  border-top: 1px solid #e8e8e8;
  background: #fafafa;
}

/* Notification Date Groups */
.notification-date-group {
  margin-bottom: 0.5rem;
}

.notification-date-header {
  padding: 0.5rem 1.25rem;
  background: #f8f9fa;
  font-size: 0.875rem;
  font-weight: 600;
  color: #6c757d;
  border-bottom: 1px solid #e8e8e8;
  position: sticky;
  top: 0;
  z-index: 1;
}

/* Notification Items */
.notification-item {
  display: flex;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: background-color 0.2s;
  position: relative;
}

.notification-item:hover {
  background-color: #f8f9fa;
}

.notification-item.is-unread {
  background-color: #f0f8ff;
  border-left: 3px solid #3273dc;
}

.notification-item.is-unread:hover {
  background-color: #e6f4ff;
}

.notification-item-icon {
  margin-right: 1rem;
  flex-shrink: 0;
}

.notification-item-icon .icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.notification-item.is-unread .notification-item-icon .icon {
  background: #e6f4ff;
}

.notification-item-content {
  flex: 1;
  min-width: 0;
}

.notification-item-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.notification-title {
  font-size: 0.95rem;
  line-height: 1.3;
  word-break: break-word;
}

.notification-message {
  font-size: 0.875rem;
  color: #6c757d;
  margin-bottom: 0.5rem;
  line-height: 1.4;
  word-break: break-word;
}

.notification-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
}

.notification-action {
  color: #3273dc;
  transition: color 0.2s;
}

.notification-action:hover {
  color: #2366d1;
}

.notification-item-actions {
  margin-left: 0.5rem;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.2s;
}

.notification-item:hover .notification-item-actions {
  opacity: 1;
}

/* Empty State */
.notification-empty {
  padding: 3rem 1rem;
}

/* Bell Icon Badge */
.notification-bell {
  position: relative;
}

.notification-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: #ff3860;
  color: white;
  border-radius: 10px;
  padding: 2px 6px;
  font-size: 0.7rem;
  font-weight: bold;
  min-width: 18px;
  text-align: center;
  display: none;
}

.notification-badge:not(:empty) {
  display: block;
}

/* Mobile Responsive */
@media screen and (max-width: 768px) {
  .notification-sidebar {
    width: 100%;
    right: -100%;
  }
  
  .notification-sidebar.is-active {
    right: 0;
  }
}

/* Icon color classes */
.text-danger { color: #ff3860; }
.text-success { color: #48c774; }
.text-warning { color: #ffdd57; }
.text-info { color: #3298dc; }
.text-primary { color: #00d1b2; }
.text-secondary { color: #6c757d; }
/* Pagination styles for Bulma */

/* Make Pagy's .is-current class inherit Bulma's .is-active styles */
.pagination-link.is-current {
  background-color: #3273dc;
  border-color: #3273dc;
  color: #fff;
}

/* Legacy Kaminari styles - can be removed if not needed */
.pagination {
  justify-content: center;
  margin: 2rem 0;
}

.pagination .page,
.pagination .next,
.pagination .last,
.pagination .first,
.pagination .prev {
  display: inline-block;
}

.pagination .page a,
.pagination .next a,
.pagination .last a,
.pagination .first a,
.pagination .prev a,
.pagination .current,
.pagination .gap {
  padding: 0.5em 0.75em;
  margin: 0 0.25em;
  border: 1px solid #dbdbdb;
  color: #363636;
  border-radius: 4px;
  text-decoration: none;
  display: inline-block;
  min-width: 2.5em;
  text-align: center;
  background-color: white;
  transition: all 0.2s;
}

.pagination .page a:hover,
.pagination .next a:hover,
.pagination .last a:hover,
.pagination .first a:hover,
.pagination .prev a:hover {
  border-color: #3273dc;
  color: #3273dc;
}

.pagination .current {
  background-color: #3273dc;
  border-color: #3273dc;
  color: white;
  cursor: default;
}

.pagination .gap {
  border: none;
  cursor: default;
  color: #b5b5b5;
}

.pagination .disabled a,
.pagination .disabled {
  color: #b5b5b5;
  cursor: not-allowed;
  opacity: 0.5;
}

.pagination .disabled a:hover {
  color: #b5b5b5;
  border-color: #dbdbdb;
}

/* Pagination container styles */
.pagination-list {
  flex-grow: 1;
  flex-shrink: 1;
  justify-content: center;
  order: 1;
}

.pagination-previous,
.pagination-next {
  padding-left: 0.75em;
  padding-right: 0.75em;
}

.pagination-link,
.pagination-ellipsis {
  margin: 0.25rem;
}

/* Mobile responsive */
@media screen and (max-width: 768px) {
  .pagination {
    flex-wrap: wrap;
  }
  
  .pagination .page a,
  .pagination .current {
    padding: 0.25em 0.5em;
    min-width: 2em;
    font-size: 0.875rem;
  }
}
@media print {
  nav, .navbar, .sidebar, .menu, .pagination, .buttons, .level-right {
    display: none !important;
  }
  .dashboard-sidebar,
  .sidebar-toggle-header {
    display: none !important;
  }
  .sidebar-content {
    margin-left: 0 !important;
  }
  body {
    margin: 0.25in;
    padding-top: 0 !important;
  }
  .container,
  .container-fluid,
  .table-container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  table {
    width: 100% !important;
  }
  .level,
  .columns {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .column {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .print-logo {
    display: block !important;
    margin-bottom: 1rem;
  }
}

.print-logo { display: none; }
/* Advanced Random Content Selector - modal styling
   Scoped under .random-selector-modal so it can't leak into other modals. */

.random-selector-modal .modal-card {
  width: 1100px;
  max-width: 95vw;
  border-radius: 6px;
  overflow: hidden;
}

.random-selector-modal .modal-card-head {
  background: #f5f5f5;
  border-bottom: 1px solid #dbdbdb;
}

.random-selector-modal .modal-card-head .modal-card-title {
  font-weight: 600;
  font-size: 1.25rem;
}

.random-selector-modal .modal-card-head .modal-card-title .icon {
  color: #3273dc;
}

.random-selector-modal .modal-card-body {
  background: #f7f8fa;
  padding: 1.25rem;
  max-height: 75vh;
  overflow-y: auto;
}

.random-selector-modal .modal-card-foot {
  border-top: 1px solid #dbdbdb;
}

/* Section panels */
.rs-section {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  padding: 1.25rem;
  margin-bottom: 1rem;
  box-shadow: 0 0.125em 0.25em rgba(10, 10, 10, 0.04);
}

.rs-section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: #363636;
  margin-bottom: 1rem;
}

.rs-section-title .icon {
  color: #3273dc;
}

.rs-section--exclusions .rs-section-title .icon { color: #f14668; }

/* Form fields */
.rs-section .label {
  font-weight: 600;
  color: #363636;
}

.rs-section .input,
.rs-section .select select {
  border-color: #dbdbdb;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.rs-section .input:focus,
.rs-section .select select:focus {
  border-color: #3273dc;
  box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.2);
}

.rs-help {
  color: #7a7a7a;
  font-size: 0.75rem;
  margin-top: 0.35rem;
  min-height: 1.1em;
}

/* Tabs */
.random-selector-modal .tabs.is-boxed {
  margin-bottom: 1rem;
}

.random-selector-modal .tabs.is-boxed li a {
  color: #4a4a4a;
}

.random-selector-modal .tabs.is-boxed li:hover a {
  background: #f5f5f5;
  color: #363636;
}

.random-selector-modal .tabs.is-boxed li.is-active a {
  background: #fff;
  color: #3273dc;
  font-weight: 600;
}

/* Tree-style scroll lists (categories / tags / collections) */
.rs-list {
  max-height: 200px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #dbdbdb;
  border-radius: 4px;
  padding: 0.5rem 0.6rem;
  font-size: 0.9rem;
}

.rs-list--include {
  border-color: #cfe8d7;
  background: #fbfefc;
}

.rs-list--exclude {
  border-color: #f4cfd6;
  background: #fffafb;
}

.rs-list--tags {
  max-height: 220px;
}

.rs-list::-webkit-scrollbar { width: 8px; }
.rs-list::-webkit-scrollbar-track { background: transparent; }
.rs-list::-webkit-scrollbar-thumb {
  background: #dbdbdb;
  border-radius: 4px;
}
.rs-list::-webkit-scrollbar-thumb:hover { background: #b5b5b5; }

.rs-list .checkbox {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.4rem;
  border-radius: 4px;
  transition: background 0.1s;
  margin-bottom: 0;
  font-size: 0.875rem;
  color: #363636;
}

.rs-list .checkbox:hover {
  background: #f5f5f5;
}

.rs-list--include .checkbox:hover { background: rgba(72, 199, 116, 0.1); }
.rs-list--exclude .checkbox:hover { background: rgba(241, 70, 104, 0.08); }

.rs-list .checkbox input[type="checkbox"] {
  accent-color: #3273dc;
}

.rs-list--include .checkbox input[type="checkbox"] { accent-color: #48c774; }
.rs-list--exclude .checkbox input[type="checkbox"] { accent-color: #f14668; }

.rs-list-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.35rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.rs-list-label--include { color: #257942; }
.rs-list-label--exclude { color: #b8324c; }

.rs-list-label .icon {
  font-size: 0.75rem;
}

.rs-list-group-label {
  color: #7a7a7a;
  font-size: 0.72rem;
  font-weight: 600;
  margin: 0.35rem 0 0.25rem;
  text-transform: uppercase;
}

.rs-list-group-label:first-child {
  margin-top: 0;
}

.rs-category-item {
  position: relative;
}

/* Custom distribution panel */
.rs-custom-distribution {
  background: #fffbeb;
  border: 1px solid #ffdd57;
  border-radius: 6px;
  padding: 1rem;
  margin-top: 1rem;
}

.rs-custom-distribution .label {
  color: #946800;
}

.rs-difficulty-pill {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  margin-bottom: 0.35rem;
}

.rs-difficulty-pill[data-level="1"] { background: #effaf3; color: #257942; }
.rs-difficulty-pill[data-level="2"] { background: #effaf3; color: #257942; }
.rs-difficulty-pill[data-level="3"] { background: #fffbeb; color: #8a6d00; }
.rs-difficulty-pill[data-level="4"] { background: #feecf0; color: #b8324c; }
.rs-difficulty-pill[data-level="5"] { background: #feecf0; color: #b8324c; }

/* Strong-emphasis toggles (the "Include ... contents" master switches) */
.rs-master-switch {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 0.75rem;
  background: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  font-weight: 600;
  color: #363636;
  cursor: pointer;
  transition: background 0.15s;
}

.rs-master-switch:hover {
  background: #eeeeee;
}

.rs-master-switch input[type="checkbox"] {
  accent-color: #3273dc;
  transform: scale(1.1);
}

/* Notifications / messages */
.random-selector-modal .notification {
  border-radius: 4px;
  padding: 0.75rem 2.5rem 0.75rem 1rem;
}

.random-selector-modal .modal-card-foot .button.is-primary {
  font-weight: 600;
}

/* Compact layout helpers */
.rs-grid-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.rs-source-toggle-row {
  grid-column: 1 / -1;
}

.rs-exclusion-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

@media (max-width: 768px) {
  .rs-grid-cols { grid-template-columns: 1fr; }
  .rs-exclusion-grid { grid-template-columns: 1fr; }
}
/* Review Form Styles */

.answer-grid {
  max-height: 400px;
  overflow-y: auto;
  padding: 0.5rem;
}

.answer-grid-compact {
  max-height: 400px;
  overflow-y: auto;
  padding: 0.25rem;
}

.answer-grid-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.5rem;
  background: white;
  border: 1px solid #f0f0f0;
  border-radius: 4px;
}

.answer-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  padding: 0.5rem;
  border: 1px solid #f0f0f0;
  border-radius: 4px;
  background: white;
}

.answer-item-compact {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;
  padding: 0.25rem;
  border-radius: 4px;
  border: 2px solid transparent;
  transition: all 0.2s ease;
}

.answer-item-compact.has-multiple-selection {
  background-color: #ffe6e6;
  border-color: #ff3860;
}

.select-button-container {
  display: inline-block;
  padding: 0.25rem;
  border-radius: 4px;
  border: 2px solid transparent;
  transition: all 0.2s ease;
}

.select-button-container.has-multiple-selection {
  background-color: #ffe6e6;
  border-color: #ff3860;
}

.answer-item-compact .tag {
  min-width: 35px;
  text-align: center;
}

.answer-item-compact .buttons {
  margin-bottom: 0;
}

.answer-item-compact .buttons .button {
  padding: 0.25rem 0.5rem;
  height: 28px;
  min-width: 30px;
}

.answer-item {
  margin-bottom: 1rem;
  padding: 0.75rem;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  background: white;
  transition: all 0.2s ease;
}

.answer-item:hover {
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.answer-choice {
  min-width: 40px;
  height: 32px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.answer-choice:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.answer-choice.is-primary {
  font-weight: bold;
}

.data-digit {
  font-family: 'Courier New', monospace;
  font-size: 1.2em;
  font-weight: bold;
  text-align: center;
}

.data-digit:focus {
  outline: none;
  border-color: #3273dc;
  box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25);
}

/* Multiple marks indicator */
.answer-item .tag.is-danger {
  position: absolute;
  right: 0.75rem;
  top: 0.75rem;
}

/* Corrections textarea */
.corrections-json {
  font-family: 'Courier New', monospace;
  font-size: 0.85rem;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
}

.corrections-json:focus {
  background: white;
  border-color: #3273dc;
}

/* Field type tags */
.box .tag {
  margin-left: 0.5rem;
}

.box .tag.is-primary {
  background-color: #00d1b2;
  color: white;
}

/* Cohort select */
.cohort-member-select {
  width: 100%;
}

/* Data field positioning */
.field.is-grouped.is-grouped-multiline {
  margin-bottom: 0.5rem;
}

.field.is-grouped.is-grouped-multiline .control {
  margin-right: 0.75rem;
  margin-bottom: 0.75rem;
}

/* Processing info box */
.box.has-background-light {
  background-color: #f5f5f5 !important;
  border: 1px solid #e0e0e0;
}

/* Notification styles */
.notification {
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Scan Review Styles */

/* Utility class to hide elements */
.is-hidden {
  display: none !important;
}


/* Answer choice buttons */
.answer-choice {
  min-width: 40px;
}

.answer-choice[data-choice=""] {
  min-width: 35px;
}

/* Compact answer grid for review form */
.answer-grid-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.answer-item-compact {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px;
  border-radius: 4px;
  background: #f5f5f5;
}

.answer-item-compact.has-multiple-selection {
  background: #fffacd;
  border: 1px solid #ffd700;
}

/* Data digit inputs */
.data-digit {
  width: 35px !important;
  text-align: center;
}

/* Select button container */
.select-button-container {
  display: inline-block;
}

.select-button-container.has-multiple-selection {
  background: #fffacd;
  padding: 5px;
  border-radius: 4px;
  border: 1px solid #ffd700;
}

/* Modal specific styles */
.review-modal .modal-card {
  width: 95vw;
  max-width: 1400px;
  height: 90vh;
}

.review-modal .modal-card-body {
  padding: 0;
  overflow: hidden;
}

.review-modal .image-column {
  position: relative;
  overflow: auto;
  height: calc(90vh - 120px);
}

.review-modal .form-column {
  overflow-y: auto;
  height: calc(90vh - 120px);
}

.review-modal .scan-image {
  cursor: zoom-in;
  transition: transform 0.3s ease;
  max-width: 100%;
  height: auto;
}

.review-modal .scan-image.zoomed {
  cursor: zoom-out;
  transform: scale(2);
  max-width: none;
}

/* Image version selector */
.image-version-selector {
  position: sticky;
  top: 0;
  background: white;
  z-index: 5;
  padding: 10px;
  border-bottom: 1px solid #dbdbdb;
}

/* Scan card thumbnails */
.scan-card {
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.scan-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.scan-thumbnail {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

/* Correction history */
.correction-history {
  max-height: 200px;
  overflow-y: auto;
  font-size: 0.875rem;
}

/* Student ID field highlight */
.student-identifier-field {
  background: #fffacd;
  border-color: #ffd700;
}

/* Cohort member select */
.cohort-member-select option:disabled {
  color: #999;
  background: #f5f5f5;
}
/* Sidebar Toggle Button - positioned at top of sidebar */
.sidebar-toggle-header {
  position: fixed;
  top: 3.25rem;
  left: 0;
  z-index: 1001;
  background: #2c3e50;
  color: white;
  border: none;
  cursor: pointer;
  transition: width 0.12s ease, background-color 0.3s ease, box-shadow 0.12s ease;
  height: 3rem; /* 48px */
  width: 16.25rem; /* 260px */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.sidebar-toggle-header:hover {
  background: #34495e;
}

/* Toggle icon animation */
.sidebar-toggle-header .fas {
  transition: transform 0.3s ease;
}

.sidebar-toggle-header.collapsed .fas {
  transform: rotate(180deg);
}

/* Collapsed state for toggle button */
.sidebar-toggle-header.collapsed {
  width: 3.75rem; /* 60px */
  height: 3rem; /* 48px - Explicitly set height to match expanded state */
  justify-content: center;
  padding: 0;
  transition: width 0.12s ease, box-shadow 0.12s ease;
}

/* Expand toggle button background when sidebar is hover-expanded - with shadow */
.sidebar-toggle-header.collapsed.hover-expanded {
  width: 16.25rem; /* 260px */
  box-shadow: 2px 0 15px rgba(0,0,0,0.3);
  height: 3rem; /* 48px - Ensure height stays consistent */
}

/* Adjust toggle button when impersonation banner is present */
body:has(.notification[style*="z-index: 1000"]) .sidebar-toggle-header {
  top: calc(3.25rem + 52px);
}

/* Main Sidebar Container */
.dashboard-sidebar {
  position: fixed;
  left: 0;
  top: calc(3.25rem + 48px);
  width: 260px;
  height: calc(100vh - 3.25rem - 48px);
  background: #2c3e50;
  color: white;
  display: flex;
  flex-direction: column;
  z-index: 998;
  transition: all 0.3s ease;
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: 2px 0 5px rgba(0,0,0,0.1);
}

/* Adjust sidebar when impersonation banner is present */
body:has(.notification[style*="z-index: 1000"]) .dashboard-sidebar {
  top: calc(3.25rem + 52px + 48px);
  height: calc(100vh - 3.25rem - 52px - 48px);
}

body:has(.notification[style*="z-index: 1000"]) .navbar {
  margin-top: 52px;
}

/* Collapsed State */
.dashboard-sidebar.collapsed {
  width: 3.75rem; /* 60px - Slightly wider for better icon display */
}

/* Hide text but keep containers for height consistency */
.dashboard-sidebar.collapsed:not(.hover-expanded) .profile-info {
  margin-top: 0; /* No top margin, spacing comes from avatar's bottom margin */
}

.dashboard-sidebar.collapsed:not(.hover-expanded) .profile-info p {
  visibility: hidden;
  height: 1.2em; /* Preserve height */
  margin: 0;
}

.dashboard-sidebar.collapsed:not(.hover-expanded) .profile-info .mt-2 {
  visibility: hidden;
  height: 1.5em; /* Preserve height */
}

.dashboard-sidebar.collapsed:not(.hover-expanded) .profile-info .icon.is-small,
.dashboard-sidebar.collapsed:not(.hover-expanded) .menu-text,
.dashboard-sidebar.collapsed:not(.hover-expanded) .menu-label,
.dashboard-sidebar.collapsed:not(.hover-expanded) .expand-icon,
.dashboard-sidebar.collapsed:not(.hover-expanded) .nav-mode-toggle-container,
.dashboard-sidebar.collapsed:not(.hover-expanded) .submenu,
.dashboard-sidebar.collapsed:not(.hover-expanded) .sidebar-bottom .menu-text {
  display: none !important;
}

/* Show abbreviated plan type in collapsed state */
.dashboard-sidebar.collapsed:not(.hover-expanded) .profile-info > .tag {
  display: inline-block !important;
  visibility: visible !important;
  font-size: 0.65rem;
  padding: 0.15rem 0.35rem;
  min-width: auto;
  margin: 0.25rem auto;
}

/* Style credits in collapsed state - just show number */
.dashboard-sidebar.collapsed:not(.hover-expanded) .profile-info .tags.has-addons {
  display: flex !important;
  visibility: visible !important;
  justify-content: center;
  margin-top: 0.5rem !important;
  min-height: 1.5rem;
}

.dashboard-sidebar.collapsed:not(.hover-expanded) .profile-info .tags.has-addons .tag.is-dark {
  display: none !important;
}

/* Keep credits visible in collapsed state - target success/danger/warning tags */
.dashboard-sidebar.collapsed:not(.hover-expanded) .profile-info .tags.has-addons .tag.is-success,
.dashboard-sidebar.collapsed:not(.hover-expanded) .profile-info .tags.has-addons .tag.is-danger,
.dashboard-sidebar.collapsed:not(.hover-expanded) .profile-info .tags.has-addons .tag.is-warning {
  display: inline-block !important;
  visibility: visible !important;
  font-size: 0.65rem;
  padding: 0.15rem 0.35rem;
  min-width: auto;
  border-radius: 4px;
}

/* Show only first letter of plan type in collapsed state */
.dashboard-sidebar.collapsed:not(.hover-expanded) .profile-info > .tag .tag-text {
  display: none !important;
}

.dashboard-sidebar.collapsed:not(.hover-expanded) .profile-info > .tag::after {
  content: attr(data-short);
  font-weight: 600;
}

/* Hide full credit text and show abbreviated in collapsed */
.dashboard-sidebar.collapsed:not(.hover-expanded) .profile-info .tags .tag-text {
  display: none !important;
}

.dashboard-sidebar.collapsed:not(.hover-expanded) .profile-info .tags .tag-short {
  display: inline !important;
}

/* Hide short text in expanded state */
.profile-info .tag-short {
  display: none;
}

.dashboard-sidebar.collapsed:not(.hover-expanded) .sidebar-profile {
  padding: 1.5rem 0.5rem; /* Keep vertical padding same as expanded */
}

.dashboard-sidebar.collapsed:not(.hover-expanded) .profile-avatar {
  margin-top: 0;
  margin-bottom: 0.75rem; /* Fixed bottom margin */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Keep avatar SAME size in collapsed state to prevent movement */
.dashboard-sidebar.collapsed:not(.hover-expanded) .profile-avatar img,
.dashboard-sidebar.collapsed:not(.hover-expanded) .profile-avatar .icon {
  width: 5rem !important; /* 80px */
  height: 5rem !important; /* 80px */
  font-size: 3rem !important;
}

.dashboard-sidebar.collapsed:not(.hover-expanded) .profile-avatar .icon.is-large {
  font-size: 3rem !important;
  height: 5rem !important; /* 80px */
  width: 5rem !important; /* 80px */
}

.dashboard-sidebar.collapsed:not(.hover-expanded) .profile-avatar .fa-3x {
  font-size: 3rem !important;
}

.dashboard-sidebar.collapsed:not(.hover-expanded) .menu-item {
  justify-content: center;
  padding: 0.75rem;
}

.dashboard-sidebar.collapsed:not(.hover-expanded) .menu-item .icon {
  margin-right: 0;
  font-size: 1.1rem;
}

/* Show active state in collapsed mode */
.dashboard-sidebar.collapsed:not(.hover-expanded) .menu-item.is-active,
.dashboard-sidebar.collapsed:not(.hover-expanded) .parent-item-wrapper.is-active .menu-item {
  background: rgba(255,255,255,0.2);
  position: relative;
}

.dashboard-sidebar.collapsed:not(.hover-expanded) .menu-item.is-active::before,
.dashboard-sidebar.collapsed:not(.hover-expanded) .parent-item-wrapper.is-active .menu-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #3498db;
}

.dashboard-sidebar.collapsed:not(.hover-expanded) .menu-section .menu-label {
  display: none;
}

.dashboard-sidebar.collapsed:not(.hover-expanded) .sidebar-bottom .button {
  padding: 0.375rem 0.5rem;
  justify-content: center;
  min-height: auto;
  height: auto;
}

.dashboard-sidebar.collapsed:not(.hover-expanded) .sidebar-bottom .button .icon {
  margin: 0 !important;
}

/* Profile Section */
.sidebar-profile {
  padding: 1.5rem;
  text-align: center;
  background: rgba(0,0,0,0.1);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  transition: opacity 0.12s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.profile-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem; /* Consistent bottom margin for all states */
}

.profile-avatar img {
  width: 5rem; /* 80px */
  height: 5rem; /* 80px */
  border: 3px solid rgba(255,255,255,0.2);
  transition: all 0.12s;
}

.profile-info {
  margin-top: 0; /* No top margin, spacing comes from avatar's bottom margin */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.profile-info p {
  margin-bottom: 0.25rem;
  color: white;
}

/* Menu Styles */
.sidebar-menu {
  flex: 1;
  /* No top padding — the first item must sit flush against the
     .sidebar-profile border-bottom so its hover background reaches that
     separator. Keeping a small bottom padding so the last item's separator
     doesn't kiss the scrollable container's edge. */
  padding: 0 0 0.5rem 0;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Custom Scrollbar for Sidebar Menu - Webkit browsers (Chrome, Safari, Edge) */
.sidebar-menu::-webkit-scrollbar {
  width: 6px;
}

.sidebar-menu::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 3px;
}

.sidebar-menu::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  transition: background 0.3s ease;
}

.sidebar-menu::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.35);
}

/* Firefox scrollbar styling */
.sidebar-menu {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) rgba(0, 0, 0, 0.1);
}

/* Optional: Completely hide scrollbar while maintaining scroll functionality
   Add class 'hide-scrollbar' to sidebar-menu element to use this */
.sidebar-menu.hide-scrollbar {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.sidebar-menu.hide-scrollbar::-webkit-scrollbar {
  display: none; /* Chrome, Safari and Opera */
}

.menu-section {
  margin-bottom: 0;
}

/* Bulma's .menu-list ships with `margin: 0.75em 0.75em 0` and browsers add
   default margin to <ul>/<li>. Both translate into a 12-16px visible gap above
   each section's first item — looked like padding between the hover background
   and the previous item's separator. Reset every wrapper element in the menu
   path so each item's hover fill runs flush from the line above to its own
   bottom border. */
.dashboard-sidebar .menu-list,
.dashboard-sidebar .menu-list li,
.dashboard-sidebar .menu-section > ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu-section .menu-label {
  color: rgba(255,255,255,0.6);
  font-size: 0.85rem;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  padding: 0 1.25rem;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 1rem 1.25rem;
  color: rgba(255,255,255,0.9);
  border-radius: 0;
  transition: all 0.3s;
  margin-bottom: 0;
  position: relative;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* Disable hover effects when collapsed (not hover-expanded) */
.dashboard-sidebar:not(.collapsed) .menu-item:hover,
.dashboard-sidebar.collapsed.hover-expanded .menu-item:hover {
  background: rgba(255,255,255,0.15);
  color: white;
  text-decoration: none;
}

/* No hover effect in collapsed state */
.dashboard-sidebar.collapsed:not(.hover-expanded) .menu-item:hover {
  background: transparent;
}

.menu-item.is-active {
  background: rgba(255,255,255,0.2);
  color: white;
  font-weight: 600;
}

.menu-item .icon {
  margin-right: 1rem;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
  font-size: 1.1rem;
}

.menu-item .menu-text {
  flex: 1;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  max-width: 100%;
}

.menu-item .tag {
  margin-left: auto;
  flex-shrink: 0;
}

/* Bottom Section */
.sidebar-bottom {
  padding: 1rem;
  border-top: 1px solid rgba(255,255,255,0.1);
  background: rgba(0,0,0,0.05);
}

.sidebar-bottom .button {
  transition: all 0.3s;
}

.sidebar-bottom .dropdown {
  margin-bottom: 0.5rem;
}

/* Organization Switcher Styles */
.sidebar-org-button {
  background: rgba(255,255,255,0.1);
  color: white;
  border: 1px solid rgba(255,255,255,0.2);
  justify-content: space-between;
}

.sidebar-org-button:hover {
  background: rgba(255,255,255,0.15);
  color: white;
  border-color: rgba(255,255,255,0.3);
}

.sidebar-org-settings {
  background: rgba(255,255,255,0.1);
  color: white;
  border: 1px solid rgba(255,255,255,0.2);
}

.sidebar-org-settings:hover {
  background: rgba(255,255,255,0.15);
  color: white;
  border-color: rgba(255,255,255,0.3);
}

/* Organization Dropdown Menu */
.sidebar-org-dropdown {
  width: 230px !important;
  left: 0 !important;
}

.sidebar-org-dropdown .dropdown-content {
  background: #2c3e50;
  padding: 0.5rem 0;
  border: 1px solid rgba(255,255,255,0.2);
  box-shadow: 0 -4px 10px rgba(0,0,0,0.3);
}

.sidebar-org-dropdown .dropdown-item {
  color: rgba(255,255,255,0.9);
  padding: 0.5rem 1rem;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s;
}

.sidebar-org-dropdown .dropdown-item:hover {
  background: rgba(255,255,255,0.1);
  color: white;
}

/* Collapsed state adjustments for organization switcher */
.dashboard-sidebar.collapsed:not(.hover-expanded) .sidebar-bottom .field.has-addons {
  flex-direction: column;
}

.dashboard-sidebar.collapsed:not(.hover-expanded) .sidebar-bottom .sidebar-org-button {
  padding: 0.5rem;
  justify-content: center;
}

.dashboard-sidebar.collapsed:not(.hover-expanded) .sidebar-bottom .sidebar-org-button .icon {
  margin: 0 !important;
}

/* Hide the up arrow icon in org button when collapsed */
.dashboard-sidebar.collapsed:not(.hover-expanded) .sidebar-bottom .sidebar-org-button .icon.is-small {
  display: none !important;
}

/* Hide org settings button when collapsed - keep org button as single icon */
.dashboard-sidebar.collapsed:not(.hover-expanded) .sidebar-bottom .sidebar-org-settings {
  display: none !important;
}

/* Ensure consistent button heights in collapsed state */
.dashboard-sidebar.collapsed:not(.hover-expanded) .sidebar-bottom .sidebar-org-button {
  padding: 0.375rem 0.5rem;
  min-height: auto;
  height: auto;
}

/* Tooltips for collapsed state */
.dashboard-sidebar.collapsed .menu-item[data-tooltip] {
  position: relative;
}

.dashboard-sidebar.collapsed .menu-item[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 0.5rem;
  background: rgba(0,0,0,0.9);
  color: white;
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
  white-space: nowrap;
  font-size: 0.875rem;
  z-index: 1000;
  pointer-events: none;
}

.dashboard-sidebar.collapsed .sidebar-bottom [data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 0.5rem;
  background: rgba(0,0,0,0.9);
  color: white;
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
  white-space: nowrap;
  font-size: 0.875rem;
  z-index: 1000;
  pointer-events: none;
}

/* Body adjustments for sidebar */
body.has-sidebar {
  padding-left: 0;
}

body.sidebar-collapsed {
  padding-left: 0;
}

/* Navbar should remain full-width across top - no margin adjustments */
body.has-sidebar .navbar,
body.sidebar-collapsed .navbar {
  margin-left: 0;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
}

/* Main content adjustment - using specific class instead of generic .section */
body.has-sidebar main.sidebar-content,
body.has-sidebar .sidebar-content {
  margin-left: 260px;
  width: calc(100% - 260px);
}

/* Only add transition when sidebar is being toggled */
body.sidebar-transitioning main.sidebar-content,
body.sidebar-transitioning .sidebar-content {
  transition: all 0.3s ease;
}

body.sidebar-collapsed main.sidebar-content,
body.sidebar-collapsed .sidebar-content {
  margin-left: 3.75rem; /* 60px */
  width: calc(100% - 3.75rem);
}

/* Breadcrumb adjustment for sidebar */
body.has-sidebar .breadcrumb {
  margin-left: 260px;
  width: calc(100% - 260px);
  margin-top: 3.25rem;
}

/* Only add transition when sidebar is being toggled */
body.sidebar-transitioning .breadcrumb {
  transition: all 0.3s ease;
}

body.sidebar-collapsed .breadcrumb {
  margin-left: 3.75rem; /* 60px */
  width: calc(100% - 3.75rem);
}

/* Flash notifications - no longer need margin since they're inside content container */
/* Removed notification margin adjustments as notifications render inside main content */

/* Dashboard specific styles */
.dashboard-container {
  display: flex;
  min-height: calc(100vh - 3.25rem);
  margin: 0;
}

.dashboard-main {
  flex: 1;
  padding: 2rem;
  background: #f5f5f5;
  overflow-y: auto;
  margin-left: 0;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .dashboard-sidebar {
    transform: translateX(-100%);
    box-shadow: none;
    top: 3.25rem;
    height: calc(100vh - 3.25rem);
  }
  
  .dashboard-sidebar.mobile-open {
    transform: translateX(0);
    box-shadow: 2px 0 10px rgba(0,0,0,0.3);
  }
  
  body.has-sidebar {
    padding-left: 0;
  }
  
  body.has-sidebar .navbar {
    margin-left: 0;
    width: 100%;
  }
  
  /* Reset sidebar-content margins on mobile */
  body.has-sidebar main.sidebar-content,
  body.has-sidebar .sidebar-content {
    margin-left: 0;
    width: 100%;
  }
  
  body.sidebar-collapsed main.sidebar-content,
  body.sidebar-collapsed .sidebar-content {
    margin-left: 0;
    width: 100%;
  }
  
  .sidebar-toggle-header {
    position: fixed;
    left: 1rem;
    top: 4.25rem;
    width: auto;
    padding: 0.5rem 1rem;
    height: 40px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
  
  /* Mobile overlay */
  .dashboard-sidebar.mobile-open::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: -1;
  }
}

/* Navbar color to match sidebar */
.navbar.is-dark {
  background-color: #2c3e50 !important;
}

.navbar.is-dark .navbar-item:hover {
  background-color: rgba(255,255,255,0.1) !important;
}

/* Parent item container styles */
.parent-item-container {
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

/* Dashboard row uses Bulma .columns/.column which add their own margin/padding.
   Strip those so the hover background of .parent-item-wrapper sits flush with
   the surrounding separator lines like the other sidebar items do. */
.dashboard-sidebar .parent-item-container > .columns {
  margin: 0;
}

.dashboard-sidebar .parent-item-container > .columns > .column {
  padding: 0;
}

.parent-item-wrapper {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
  transition: background-color 0.3s ease;
}

/* Only apply hover when expanded or hover-expanded */
.dashboard-sidebar:not(.collapsed) .parent-item-wrapper:hover,
.dashboard-sidebar.collapsed.hover-expanded .parent-item-wrapper:hover {
  background: rgba(255,255,255,0.1);
}

/* No hover in collapsed state */
.dashboard-sidebar.collapsed:not(.hover-expanded) .parent-item-wrapper:hover {
  background: transparent;
}

.parent-item-wrapper.is-active {
  background: rgba(255,255,255,0.12);
}

/* Parent menu item styles
   Vertical padding is the breathing room: it lives INSIDE the link, which sits
   inside .parent-item-wrapper, so the hover background still spans separator
   to separator while the icon/text get enough room not to feel cramped. */
.menu-item.parent-item {
  font-weight: 600;
  padding: 1.5rem 1.25rem;
  flex: 1;
  border-bottom: none;
  display: flex;
  align-items: center;
  background: transparent !important;
  width: 100%;
  white-space: nowrap !important;
  overflow: hidden;
}

.menu-item.parent-item:hover {
  background: transparent !important;
}

.menu-item.parent-item.is-active {
  background: transparent !important;
}

/* Expand icon styles */
.menu-item.parent-item .expand-icon {
  margin-left: auto;
  cursor: pointer;
  color: rgba(255,255,255,0.7);
  transition: all 0.3s ease;
  padding: 0.25rem;
  border-radius: 4px;
}

/* Only allow expand icon hover when sidebar is expanded or hover-expanded */
.dashboard-sidebar:not(.collapsed) .menu-item.parent-item .expand-icon:hover,
.dashboard-sidebar.collapsed.hover-expanded .menu-item.parent-item .expand-icon:hover {
  color: white;
  background: rgba(255,255,255,0.1);
}

/* Restore expand icon pointer events when hover-expanded */
.dashboard-sidebar.collapsed.hover-expanded .expand-icon {
  pointer-events: auto;
  visibility: visible;
}

.menu-item.parent-item .expand-icon i {
  font-size: 0.875rem;
  transition: transform 0.3s ease;
}


/* Submenu styles */
.submenu {
  display: none;
  background: rgba(0,0,0,0.15);
  border-left: 3px solid rgba(255,255,255,0.1);
  margin: 0;
  padding: 0;
}

.submenu.expanded {
  display: block;
}

.menu-item.submenu-item {
  padding: 0.875rem 1.25rem 0.875rem 1.5rem;
  font-size: 0.95rem;
  font-weight: 400;
  border-bottom: 1px solid rgba(255,255,255,0.02);
  white-space: nowrap !important;
  overflow: hidden;
}

.dashboard-sidebar:not(.collapsed) .menu-item.submenu-item:hover,
.dashboard-sidebar.collapsed.hover-expanded .menu-item.submenu-item:hover {
  background: rgba(255,255,255,0.08);
  border-left: 3px solid rgba(255,255,255,0.3);
  padding-left: calc(1.5rem - 3px);
}

.menu-item.submenu-item.is-active {
  background: rgba(255,255,255,0.12);
  border-left: 3px solid #3498db;
  padding-left: calc(1.5rem - 3px);
  color: white;
}

.menu-item.submenu-item .icon {
  margin-right: 0.875rem;
  width: 20px;
  font-size: 1rem;
}

/* Collapsed state adjustments */
.dashboard-sidebar.collapsed:not(.hover-expanded) .menu-item.parent-item .menu-text,
.dashboard-sidebar.collapsed:not(.hover-expanded) .expand-toggle {
  display: none;
}

.dashboard-sidebar.collapsed:not(.hover-expanded) .submenu {
  display: none !important;
}

.dashboard-sidebar.collapsed:not(.hover-expanded) .parent-item-wrapper {
  justify-content: center;
}

.dashboard-sidebar.collapsed:not(.hover-expanded) .menu-item.parent-item {
  justify-content: center;
  padding: 0.75rem;
  flex: none;
}

/* Keep submenus hidden during hover unless they were already expanded */
.dashboard-sidebar.collapsed.hover-expanded .submenu:not(.expanded) {
  display: none !important;
}

/* Prevent hover from triggering expand - only click should work */
.dashboard-sidebar.collapsed:not(.hover-expanded) .expand-icon {
  pointer-events: none;
  visibility: hidden;
}

/* Expanded state for chevron */
[data-collapsible-menu-expanded-value="true"] .menu-item.parent-item .expand-icon i {
  transform: rotate(180deg);
}

/* Smooth animations - only for sidebar toggle and hover effects */
.dashboard-sidebar {
  transition: width 0.3s ease;
}

/* Prevent accidental submenu expansion on hover */
.dashboard-sidebar .submenu {
  pointer-events: auto;
}

.dashboard-sidebar.collapsed:not(.hover-expanded) .submenu {
  pointer-events: none;
}

.menu-item,
.sidebar-toggle-header,
.sidebar-bottom .button {
  transition: background-color 0.3s ease, color 0.3s ease;
}

.submenu {
  transition: all 0.3s ease;
}

/* Dashboard column layout */
.dashboard-section .parent-item-container {
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.dashboard-section .columns {
  margin: 0;
  align-items: stretch;
  /* Matches the other parent items' new vertical breathing room
     (1.5rem padding × 2 + ~1.5rem icon line-height ≈ 4.5rem). */
  min-height: 4.5rem;
}

.dashboard-section .column {
  padding: 0;
  display: flex;
}

.dashboard-section .parent-item-wrapper {
  margin-right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  flex: 1;
}

/* Navigation mode toggle container and button */
.nav-mode-toggle-container {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border-left: 1px solid rgba(255,255,255,0.1);
  transition: all 0.3s ease;
  position: relative;
  cursor: pointer;
}

.nav-mode-toggle-container:hover {
  background: rgba(255,255,255,0.1);
}

.nav-mode-toggle-container:active {
  background: rgba(255,255,255,0.15);
}

.nav-mode-toggle {
  background: transparent !important;
  border: none;
  color: rgba(255,255,255,0.9);
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.3s ease;
  width: 100%;
  height: 100%;
  position: relative;
}

.nav-mode-toggle:hover {
  color: white;
  background: transparent !important;
}

.nav-mode-toggle:focus {
  outline: none;
  color: white;
}

.nav-mode-toggle .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  margin-right: 0;
  width: auto;
}

.nav-mode-toggle i {
  font-size: 1rem;
  transition: transform 0.2s ease;
}

.nav-mode-toggle:hover i {
  transform: scale(1.1);
}

/* Active state when Dashboard is active */
.parent-item-wrapper.is-active ~ .nav-mode-toggle-container {
  background: rgba(255,255,255,0.12);
  border-left-color: rgba(255,255,255,0.2);
}

/* Subtle visual indicator for the toggle - positioned correctly */
.nav-mode-toggle::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2rem;
  height: 2rem;
  border-radius: 0.25rem;
  background: rgba(255,255,255,0.05);
  transition: all 0.3s ease;
  z-index: 1;
}

.nav-mode-toggle-container:hover .nav-mode-toggle::before {
  background: rgba(255,255,255,0.08);
  transform: translate(-50%, -50%) scale(1.05);
}

/* Navigation mode styles */
.sidebar-menu {
  position: relative;
}

/* Default: Show library mode, hide domain mode */
.sidebar-menu .domain-navigation {
  display: none;
}

/* Domain mode: Hide library sections, show domain sections */
.sidebar-menu.domain-mode .library-navigation {
  display: none;
}

.sidebar-menu.domain-mode .domain-navigation {
  display: block;
}

/* Library mode: Show library sections, hide domain sections */
.sidebar-menu.library-mode .library-navigation {
  display: block;
}

.sidebar-menu.library-mode .domain-navigation {
  display: none;
}

/* Navigation mode transition */
.library-navigation,
.domain-navigation {
  transition: opacity 0.3s ease;
}

/* Hover Expansion for Collapsed Sidebar */
.dashboard-sidebar.collapsed.hover-expanded {
  width: 260px;
  position: fixed;
  box-shadow: 4px 0 20px rgba(0,0,0,0.4);
  z-index: 1010;
}

/* Only show expanded submenus when hover-expanded */
.dashboard-sidebar.collapsed.hover-expanded .submenu.expanded {
  display: block !important;
}

/* Faster transition for hover effect */
.dashboard-sidebar.collapsed {
  transition: width 0.12s ease, box-shadow 0.12s ease;
}
/* Variant Preview Styles */

/* Card styling */
.variant-preview-container .card {
  border-radius: 6px;
  overflow: visible;
  transition: all 0.2s ease;
  border: 1px solid #e8e8e8;
}

.variant-preview-container .card:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* Section message styling - toned down */
.variant-preview-container .message.is-light .message-header {
  background-color: #f5f5f5;
  color: #4a4a4a;
  font-weight: 500;
  border-radius: 6px 6px 0 0;
  padding: 0.75rem 1rem;
}

.variant-preview-container .message.is-light .message-body {
  background-color: #fafafa;
  border-color: #e8e8e8;
  padding: 1rem;
}

/* Drag handles */
.variant-preview-container .section-handle,
.variant-preview-container .content-handle,
.variant-preview-container .choice-handle {
  cursor: move;
  display: inline-flex;
  align-items: center;
  opacity: 0.5;
  transition: opacity 0.2s;
}

.variant-preview-container .section-handle:hover,
.variant-preview-container .content-handle:hover,
.variant-preview-container .choice-handle:hover {
  opacity: 1;
}

/* Sortable states */
.variant-preview-container .sortable-ghost {
  opacity: 0.4;
  background: #f5f5f5;
}

.variant-preview-container .sortable-chosen {
  background: rgba(74, 144, 226, 0.05);
}

/* Card headers */
.variant-preview-container .card-header {
  background-color: #fafafa;
  border-bottom: 1px solid #e8e8e8;
}

.variant-preview-container .card-header .card-header-title {
  font-weight: 500;
  padding: 0.75rem 1rem;
  font-size: 0.95rem;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  display: flex;
  align-items: flex-start;
}

.variant-preview-container .card-header .card-header-title span {
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

/* Question details */
.variant-preview-container .question-details {
  transition: all 0.3s ease;
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

.variant-preview-container .question-details .content {
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  max-width: 100%;
}

.variant-preview-container .question-details .choice-item .box {
  transition: all 0.2s;
  border: 1px solid transparent;
  padding: 0.5rem 0.75rem;
}

.variant-preview-container .question-details .choice-item .box:hover {
  border-color: #dbdbdb;
  transform: translateX(2px);
}

.variant-preview-container .question-details .choice-item .box.has-background-success-light {
  border-color: #48c78e;
}

/* Tags */
.variant-preview-container .tag.is-rounded {
  border-radius: 12px;
}

/* Status notification */
.variant-preview-container #save-status {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1000;
  padding: 0.75rem 1.25rem;
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

/* Button styling */
.variant-preview-container .button {
  border-radius: 4px;
  transition: all 0.2s;
}

.variant-preview-container .button:hover:not(:disabled) {
  transform: translateY(-1px);
}

/* Column controls */
.variant-preview-container .column-controls .field.has-addons .button {
  border-radius: 0;
}

.variant-preview-container .column-controls .field.has-addons .button:first-child {
  border-radius: 4px 0 0 4px;
}

.variant-preview-container .column-controls .field.has-addons .select select {
  border-radius: 0;
}

.variant-preview-container .column-controls .field.has-addons .control:last-child .button {
  border-radius: 0 4px 4px 0;
}

/* Visibility utility */
.variant-preview-container .is-hidden {
  display: none !important;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *



 */

/* Custom styles for HOMR application */
/* Bulma is loaded via CDN in the layout */

/* Switch Toggle Styles */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 28px;
}

.switch-input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 28px;
}

.switch-slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

.switch-input:checked + .switch-slider {
  background-color: #48c774;
}

.switch-input:focus + .switch-slider {
  box-shadow: 0 0 1px #48c774;
}

.switch-input:checked + .switch-slider:before {
  transform: translateX(32px);
}

/* Tag input in modals */
.modal .tag-dropdown-menu {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  z-index: 40 !important;
}