/* These styles are generated from project.scss. */

.alert-debug {
  color: black;
  background-color: white;
  border-color: #d6e9c6;
}

.alert-error {
  color: #b94a48;
  background-color: #f2dede;
  border-color: #eed3d7;
}

/* A link marked .alert-link takes its alert's own link colour. The Minty theme paints alert
   links white (made for its solid alerts), which vanishes on our light alert backgrounds. */
.alert .alert-link {
  color: var(--bs-alert-link-color);
}

.canvas-container {
  /* Centers the canvas */
  margin: 0 auto;
}

/* File input styling — moved to custom.scss as .file-upload-area / .file-upload-icon /
   .file-input-label / .file-upload-formats. The hidden native input still needs
   display:none here since it's a third-party-style behavior, not theme. */
.file-input {
  display: none;
}
/* END File input styling */

/* Pulse Button */
@keyframes pulse {
  0% {
      transform: scale(1);
      box-shadow: 0 0 5px rgba(0, 123, 255, 0.7);
  }
  50% {
      transform: scale(1.05);
      box-shadow: 0 0 20px rgba(0, 123, 255, 0.7);
  }
  100% {
      transform: scale(1);
      box-shadow: 0 0 5px rgba(0, 123, 255, 0.7);
  }
}

.pulse-button {
  animation: pulse 1.5s infinite;
}
/* END Pulse Button */

/* Card images: centred, at most half the card wide. No hover enlargement — it made
   cards jump around while reading (removed 16.09.2026). */
img.zoomable {
  border-radius: 0.25em;
  display: block;
  margin: 1em auto;
  max-width: 50%;
}
/* END Card images */

/* "Move to position" field: no spinner arrows — ▲ would raise the number, i.e. move the card DOWN the list */
.flashcard-item input[name="position"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
.flashcard-item input[name="position"]::-webkit-outer-spin-button,
.flashcard-item input[name="position"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Deck page card rows. The grid itself is in minty-custom.css; the row's look lives here rather
   than in utility classes on the <li>, so the compact view below can override it plainly. */
#flashcardList {
  gap: 1rem;
}
.flashcard-item {
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  gap: 1rem;
  padding: 1rem;
  align-items: start;
  position: relative;
  background-color: var(--bs-tertiary-bg);
  border: var(--bs-border-width) solid var(--bs-border-color-translucent);  /* --bs-border-color is near-white in light mode */
  border-radius: var(--bs-border-radius-lg);
}
.flashcard-item .flashcard-rank {
  margin-bottom: 0.25rem;
}
.flashcard-item .bi-grip-vertical {
  font-size: 1.5rem;
}
/* Where the dragged card will land: a thin line between two cards, not a card-sized hole,
   so the list barely shifts while dragging and it reads as "insert here" */
#flashcardList .flashcard-drop-target {
  display: block;
  height: 0.5rem;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-top: 3px solid var(--bs-primary);
  border-radius: 0;
  background: transparent;
}
/* Moving the mouse with the button held would otherwise select text along the way */
body.flashcard-drag-in-progress {
  user-select: none;
}
.flashcard-item .drag-handle {
  user-select: none;
}
/* Sortable's copy of the dragged card stays hidden: the insertion line (and the cursor) are
   the whole feedback. (Shown, the copy took the slot's thin height and spilled its content.) */
.flashcard-dragging {
  display: none !important;  /* over .flashcard-item's display: grid */
}
/* The carousel card: a visible frame in both themes (Minty's default card border is #eceeef on
   #f7f7f9 in light mode, i.e. none) */
#flashcardCarousel .card {
  border: var(--bs-border-width) solid var(--bs-border-color-translucent);
  border-radius: var(--bs-border-radius-xl);
}
/* A card's open menu paints above the cards below it (rows are position: relative) */
.flashcard-item:has(.dropdown-menu.show) {
  z-index: 2;
}
/* Handle and action buttons show on hover or focus; touch screens have no hover, so always there */
.flashcard-item .drag-handle,
.flashcard-item .flashcard-actions {
  opacity: 0;
  transition: opacity 0.15s;
}
.flashcard-item:hover .drag-handle,
.flashcard-item:hover .flashcard-actions,
.flashcard-item:focus-within .drag-handle,
.flashcard-item:focus-within .flashcard-actions {
  opacity: 1;
}
@media (hover: none) {
  .flashcard-item .drag-handle,
  .flashcard-item .flashcard-actions {
    opacity: 1;
  }
}

/* Compact view (class on <body>, which survives the list swaps):
   one bordered block, one line per card with question | answer side by side. */
.flashcard-compact #flashcardList {
  gap: 0;
  border: var(--bs-border-width) solid var(--bs-border-color-translucent);  /* --bs-border-color is near-white in light mode */
  border-radius: var(--bs-border-radius-lg);
  overflow: hidden;
}
.flashcard-compact .flashcard-item {
  border-radius: 0;
  border-width: 0 0 var(--bs-border-width) 0;
  padding: 0.5rem 0.75rem;
  align-items: center;
}
.flashcard-compact .flashcard-item:last-of-type {
  border-bottom-width: 0;
}
/* The number and the grip share the narrow first column; small, so they set no row height */
.flashcard-compact .flashcard-rank {
  margin-bottom: 0;
}
.flashcard-compact .bi-grip-vertical {
  font-size: 1rem;
  line-height: 1;
}
.flashcard-compact .flashcard-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: center;
}
/* One line per side: everything inside flows inline and the line is cut with an ellipsis */
.flashcard-compact .flashcard-body > div {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.flashcard-compact .flashcard-body > div :is(p, div, ul, ol, li, h1, h2, h3, h4, h5, h6, blockquote, pre, table, tr, td, th) {
  display: inline;
  margin: 0;
  padding: 0;
}
.flashcard-compact .flashcard-body br {
  display: none;
}
/* Lists read "Breathing · Heart rate · Swallowing" */
.flashcard-compact .flashcard-body li + li::before {
  content: " · ";
  color: var(--bs-secondary-color);
}
.flashcard-compact .flashcard-body img {
  display: inline-block;  /* img.zoomable is a centred block in the comfortable rows */
  margin: 0 0.25rem;
  vertical-align: middle;
  max-height: 2rem !important;  /* the occlusion partials set max-height inline */
  width: auto;
}
/* One line means no tags, no audio buttons, no source button */
.flashcard-compact .flashcard-tags,
.flashcard-compact .flashcard-answer-divider,
.flashcard-compact .flashcard-body button,
.flashcard-compact .flashcard-source {
  display: none !important;
}
/* Multiple choice in compact: question | ✓ correct answer; the wrong options and the audio
   button are left out (Comfortable shows them all) */
.flashcard-compact .flashcard-body > .mc-answer {
  display: contents;
}
.flashcard-compact .mc-answer > button {
  display: none;
}
.flashcard-compact .mc-answer > div {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-top: 0 !important;
}
.flashcard-compact .mc-answer [data-index]:not([data-correct]) {
  display: none;
}
.flashcard-compact .mc-answer [data-correct] {
  border: 0;
  background: transparent;
  box-shadow: none !important;  /* .shadow-sm and .mb-2 are utilities */
  margin: 0 !important;
}
.flashcard-compact .mc-answer [data-correct] .card-body {
  padding: 0 !important;
}
.flashcard-compact .mc-answer [data-correct] .card-body > * {
  display: inline;  /* keeps the check mark on the same line as the answer */
}
.flashcard-compact .mc-answer [data-correct] .card-body::before {
  content: "\2713 ";
  color: var(--bs-success);
}
.flashcard-compact .flashcard-actions .btn {
  border-color: transparent;
}
@media (max-width: 760px) {
  .flashcard-compact .flashcard-body {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }
}

/* Pricing tooltip underline */
.pricing-tooltip {
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
  cursor: help;
}
/* END Pricing tooltip underline */

/* Navbar Offset Utilities */
:root {
  /* Default navbar height for mobile/smaller screens */
  --navbar-height: 56px;
}

/* Medium screens */
@media (min-width: 768px) {
  :root {
    --navbar-height: 60px;
  }
}

/* Large screens */
@media (min-width: 992px) {
  :root {
    --navbar-height: 68px;
  }
}

/* Extra large screens */
@media (min-width: 1200px) {
  :root {
    --navbar-height: 68px;
  }
}

/* Utility class for elements that need to be positioned just below the navbar */
.navbar-offset-top {
  top: var(--navbar-height);
}

/* Helper for content that needs top padding equal to navbar height */
.pt-navbar {
  padding-top: var(--navbar-height);
}

/* Helper for sticky containers that need margin top + navbar height */
.sticky-offset {
  top: calc(var(--navbar-height) + 1rem);
}

/* Bulk actions toolbar - positioned below header bar */
.bulk-actions-toolbar-sticky {
  top: calc(var(--navbar-height) + 4rem);
  z-index: 1019;
}

@media (max-width: 575.98px) {
  /* Slightly tighter offset on very small screens to avoid overlap */
  .bulk-actions-toolbar-sticky {
    top: calc(var(--navbar-height) + 3.5rem);
  }
}

/* Deck title in sticky header - responsive max-width */
.deck-title-truncate {
  max-width: 120px;
  cursor: pointer;
}

@media (min-width: 576px) {
  .deck-title-truncate {
    max-width: 180px;
  }
}

@media (min-width: 768px) {
  .deck-title-truncate {
    max-width: 250px;
  }
}

@media (min-width: 992px) {
  .deck-title-truncate {
    max-width: 350px;
  }
}
/* END Navbar Offset Utilities */

/* Quill styling (theme-aware via Bootstrap variables) */
.ql-toolbar.ql-snow {
  background-color: var(--bs-tertiary-bg);
  border: 1px solid var(--bs-border-color);
  border-bottom: 0;
  border-radius: .375rem .375rem 0 0;
  padding: .25rem .5rem;
}

.ql-snow .ql-stroke {
  stroke: var(--bs-body-color);
}

.ql-snow .ql-fill {
  fill: var(--bs-body-color);
}
/* Compact group spacing */
.ql-toolbar .ql-formats { margin-right: .5rem; }

/* Picker + button colors */
.ql-toolbar button,
.ql-toolbar .ql-picker-label { color: var(--bs-body-color); }
.ql-toolbar button:hover,
.ql-toolbar button.ql-active,
.ql-toolbar .ql-picker-label:hover { color: var(--bs-link-color); background-color: var(--bs-tertiary-bg); }

/* Button sizing + focus ring for accessibility */
.ql-toolbar button { padding: .25rem .4rem; border-radius: .25rem; }
.ql-toolbar button:focus-visible { outline: 0; box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color); }

/* Picker chrome */
.ql-snow .ql-picker { border-radius: .25rem; }
.ql-snow .ql-picker-options { background-color: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: .25rem; }

/* Header picker text adapts to theme */
.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before { color: var(--bs-body-color); }
.ql-snow .ql-picker.ql-header .ql-picker-label:hover::before,
.ql-snow .ql-picker.ql-header .ql-picker-item:hover::before,
.ql-snow .ql-picker.ql-header .ql-picker-item.ql-selected::before { color: var(--bs-link-color); }

/* Editor container */
.ql-container.ql-snow { border: 1px solid var(--bs-border-color); border-radius: 0 0 .375rem .375rem; background-color: var(--bs-body-bg); color: var(--bs-body-color); }
.ql-editor {
  min-height: 60px;
  font-family: var(--bs-body-font-family);
  font-size: var(--bs-body-font-size);
}
.ql-editor.ql-blank::before { color: var(--bs-secondary-color); opacity: 1; }
/* END Quill styling */

/* Code block styling */
pre {
  background-color: var(--bs-tertiary-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 0.375rem;
  padding: 1rem;
  overflow-x: auto;
  margin: 1rem 0;
}

code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.875em;
}

pre code {
  background-color: transparent;
  color: var(--bs-body-color);
  padding: 0;
  border: none;
}

/* Inline code styling */
p code, li code, td code {
  background-color: var(--bs-tertiary-bg);
  padding: 0.25em 0.5em;
  border-radius: 0.25rem;
  color: var(--bs-body-emphasis);
}

/* Pygments syntax highlighting for dark mode compatibility */
.highlight {
  background-color: var(--bs-tertiary-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 0.375rem;
  padding: 1rem;
  margin: 1rem 0;
  overflow-x: auto;
}

.highlight .c { color: var(--bs-secondary-color); } /* comment */
.highlight .k { color: #0066ff; font-weight: bold; } /* keyword */
.highlight .n { color: var(--bs-body-color); } /* name */
.highlight .s { color: #00aa00; } /* string */
.highlight .m { color: #ff6600; } /* number */
/* END Code block styling */

/* Custom instructions: a form-control box holding the text area and a footer (summary of chosen
   presets + "Presets" button), with the presets popover anchored below it. Theme tokens only. */
.ci [hidden] { display: none !important; }
.ci__box:focus-within {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25);
}
.ci__textarea { resize: vertical; }
.ci__textarea:focus { outline: 0; box-shadow: none; }
.ci__summary { min-width: 0; color: var(--bs-primary); }
.ci__summary .text-truncate { max-width: 100%; }
.ci__popover {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 1060;
  width: 320px;
  max-width: calc(100vw - 32px);
  max-height: min(440px, 60vh);
  overflow-y: auto;
}
.ci__popover--up { top: auto; bottom: calc(100% + 6px); }
.ci__option { min-height: 40px; cursor: pointer; }
.ci__option:hover { background: var(--bs-tertiary-bg); }
.ci__backdrop { position: fixed; inset: 0; z-index: 1059; background: rgba(0, 0, 0, .5); }
@media (max-width: 600px) {
  .ci__popover {
    position: fixed;
    left: 0; right: 0; top: auto; bottom: 0;
    width: auto; max-width: none; max-height: 75vh;
    padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    border-radius: 16px 16px 0 0 !important;
  }
}