/* Redeclaring some of Tailwind's colors so they can be reused here                                 */
/* The colors are the same of the Tailwind palette: https://tailwindcss.com/docs/customizing-colors */
:root {
  --green-100: #dff0d8;
  --green-700: #3c763d;
  --gray-900: #111827;
  --gray-300: #d1d5db;
  --gray-500: #6b7280;
}

html {
  overflow-y: scroll;
}

html.no-forced-scroll {
  overflow-y: auto;
}

/* Global scrollbar styling (light + dark mode) */
/* Firefox only: in Chromium 121+ these standard properties would disable the
   ::-webkit-scrollbar rules below and render invisible auto-hide scrollbars
   on macOS (including Anki's QtWebEngine webview). */
@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-width: thin;
    scrollbar-color: #9ca3af transparent;
  }

  html.dark * {
    scrollbar-color: #4b5563 transparent;
  }
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background-color: #9ca3af;
  border-radius: 4px;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: #6b7280;
}

html.dark *::-webkit-scrollbar-thumb {
  background-color: #4b5563;
}

html.dark *::-webkit-scrollbar-thumb:hover {
  background-color: #6b7280;
}

/* These styles are generated from project.scss. */
.alert {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
  margin: 4px;
  display: flex;
  justify-content: space-between;
}

.alert-success {
  color: var(--green-700);
  background-color: var(--green-100);
  border-color: #d6e9c6;
}

.alert-info {
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
}

.alert-warning {
  color: #8a6d3b;
  background-color: #fcf8e3;
  border-color: #faebcc;
}

.alert-error {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
}

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

.fade-in {
  opacity: 1;
  animation-name: fadeInOpacity;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-duration: 0.7s;
}

a:not([class]),
a:link:not([class]) {
  color: #0e5dff;
  /* blue-600 */
  text-decoration: underline;
}

a:not([class]):hover,
a:link:not([class]):hover {
  color: #1d4ed8;
  /* blue-700 */
  text-decoration: underline;
}

.dark a:not([class]),
.dark a:link:not([class]) {
  color: #6366f1;
  /* indigo-500 */
  text-decoration: underline;
}

.dark a:not([class]):hover,
.dark a:link:not([class]):hover {
  color: #818cf8;
  /* indigo-400 */
  text-decoration: underline;
}

a:visited:not([class]) {
  color: #551a8b;
  text-decoration: underline;
}

ins>u,
del>u {
  text-decoration: underline;
}

@keyframes fadeInOpacity {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.slide-right-to-left {
  animation-name: slideRightToLeft;
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
  animation-duration: 0.4s;
}

@keyframes slideRightToLeft {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(0px);
  }
}

.slide-left-to-right {
  transform: translateX(100%);
  animation-name: slideLeftToRight;
  animation-iteration-count: 1;
  animation-timing-function: ease-in-out;
  animation-duration: 0.4s;
}

@keyframes slideLeftToRight {
  from {
    transform: translateX(0px);
  }

  to {
    transform: translateX(100%);
  }
}

.hide-scrollbar {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

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

div.htmx-swapping div {
  opacity: 0;
  transition: opacity 0.5s ease-out;
}

.fields-section a {
  color: rgb(37 99 235);
  text-decoration-line: underline;
}

.fields-section a:hover {
  color: rgb(30 64 175);
}

.trumbowyg-box,
.trumbowyg-editor {
  min-height: 150px;
}

del,
del * {
  /* bg-red-500 */
  background-color: rgb(239 68 68);
}

ins,
ins * {
  /* bg-green-500 */
  background-color: rgb(34, 197, 94);
  text-decoration: none;
}

/* TODO: Remove these classes and replace them where this has been used */
.my-indicator.list-transition-elements {
  display: none;
}

.htmx-request.my-indicator.list-transition-elements {
  display: inline;
}

.list-transition-elements.htmx-request {
  display: none;
}

.trumbowyg-dark {
  /* tailwind bg-gray-950 */
  background-color: #030712;
  /* tailwind bg-gray-600 */
  border: 1px solid #4b5563;
}

.deletion-diff-dark del,
.deletion-diff-dark del * {
  /* tailwind bg-red-700 */
  background-color: #b91c1c;
}

.addition-diff-dark ins,
.addition-diff-dark ins * {
  /* tailwind bg-green-700 */
  background-color: #4d7c0f;
}

html.dark input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
}

/* Chat Support Expand Style */
.floating-chat.expand {
  max-height: 600px;
  height: 436px;
  border-radius: 12px;
  cursor: auto;
  opacity: 1;
  margin-bottom: 150px;
  margin-right: 12px;
  box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.1);
}

.floating-chat .chat.enter {
  opacity: 1;
  border-radius: 0;
  width: auto;
  height: auto;
}

@media only screen and (max-width: 640px) {
  .floating-chat.expand {
    max-height: 410px;
    margin-bottom: 120px;
  }
}

@media only screen and (max-height: 479px) {
  .floating-chat.expand {
    max-height: 260px;
    margin-bottom: 120px;
  }
}

#message-box::-webkit-scrollbar {
  width: 4px;
}

#message-box::-webkit-scrollbar-thumb {
  background-color: #d9d9d9;
  border-radius: 4px;
}

/* Onboarding Expand Style */
.floating-onboarding.expand {
  max-height: 584px;
  height: 584px;
  width: 400px;
  border-radius: 8px;
  cursor: auto;
  opacity: 1;
  margin-bottom: 163px;
  margin-right: 84px;
}

.floating-onboarding .onboarding-container.enter {
  opacity: 1;
  border-radius: 0;
  width: auto;
  height: auto;
}

#onboarding-tasks::-webkit-scrollbar {
  width: 4px;
}

#onboarding-tasks::-webkit-scrollbar-thumb {
  background-color: #d9d9d9;
  border-radius: 4px;
}

@media only screen and (max-width: 640px) {
  .floating-onboarding.expand {
    max-height: 600px;
    max-width: 350px;
    margin-bottom: 120px;
    margin-right: 12px;
  }
}

@media only screen and (max-height: 479px) {
  .floating-onboarding.expand {
    max-height: 300px;
    max-width: 350px;
    margin-bottom: 120px;
    margin-right: 12px;
  }
}


/* New loading state control classes */
.fade-in-out-loading-indicator {
  opacity: 0;
  transition: opacity 500ms ease-in;
}

.htmx-request.transitioned-on-loading.fade-in-out-loading-indicator.fade-in-on-loading {
  opacity: 1;
}

.htmx-request.transitioned-on-loading.fade-out-on-loading {
  opacity: 0;
}

.show-hide-loading-indicator {
  display: none;
  transition: display 500ms ease-in;
}

.htmx-request.transitioned-on-loading.show-hide-loading-indicator.show-on-loading {
  display: block;
}

.htmx-request.transitioned-on-loading.hide-on-loading {
  display: none;
}


.comments-section::-webkit-scrollbar-thumb,
.deck-wiki-section::-webkit-scrollbar,
.deck-updates-section::-webkit-scrollbar {
  width: 8px;
}

.comments-section::-webkit-scrollbar-thumb,
.deck-wiki-section::-webkit-scrollbar-thumb,
.deck-updates-section::-webkit-scrollbar-thumb {
  background-color: var(--gray-300);
  border-radius: 4px;
}

/* Discourse topic content syles */
.discourse-topic .emoji {
  width: 20px;
  height: 20px;
  vertical-align: text-bottom;
  display: inline-flex;
}

.discourse-topic h1 {
  display: block;
  font-size: 1.5em;
  margin: 30px 0 10px;
  margin-top: 0;
  font-weight: bold;
}

.discourse-topic h2 {
  display: block;
  font-size: 1.3em;
  margin-block-start: 0.83em;
  margin-block-end: 0.83em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: bold;
}

.discourse-topic h3 {
  display: block;
  font-size: 1.14em;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: bold;
  margin: 30px 0 10px;
}

.discourse-topic p {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

.discourse-topic p:first-child {
  display: block;
  margin-block-start: 0px;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

.discourse-topic ul {
  padding-left: 40px;
  list-style: disc;
}

.discourse-topic ol {
  padding-left: 40px;
  list-style: decimal;
}

.discourse-topic .cooked,
.d-editor-preview {
  word-wrap: break-word;
  line-height: var(--line-height-large);
}

.discourse-topic .md-table {
  overflow-y: auto;
  margin: 1em 0;
}

.discourse-topic table {
  display: table;
  box-sizing: border-box;
  text-indent: initial;
  border-spacing: 2px;
  border-color: gray;
  border-collapse: collapse;
  border-spacing: 0;
}

.discourse-topic thead {
  display: table-header-group;
  vertical-align: middle;
  border-color: inherit;
}

.discourse-topic tr {
  display: table-row;
  vertical-align: inherit;
  border-color: inherit;
  border-bottom: 1px solid #e9e9e9;
}

.discourse-topic .cooked table thead th,
.d-editor-preview table thead th {
  text-align: left;
  padding-bottom: 2px;
  font-weight: bold;
  color: #222222;
}

.discourse-topic th {
  display: table-cell;
  text-align: left;
}

.discourse-topic tbody {
  border-top: 3px solid #e9e9e9;
  display: table-row-group;
  vertical-align: middle;
  border-color: inherit;
}

/* TODO: Replace this card style to tailwind classes */
.grid-container {
  display: grid;
  grid-template-columns: 1fr;
}

.flip-card {
  overflow: hidden;
  perspective: 1000px;
  width: 100%;
}

.flip-card-inner {
  display: grid;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  width: 100%;
}

.flip-card-front,
.flip-card-back {
  grid-area: 1/1;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  width: 100%;
}

.flip-card-back {
  background-color: red;
  transform: rotateY(180deg);
}

.flip-card-inner.is-flipped {
  transform: rotateY(-180deg);
}

/*** Custom range slider ***/
/* The slider itself */
input[type="range"] {
  appearance: none;
  -webkit-appearance: none;
  background-color: #E5E7EB;
  border-radius: 50px;
  height: 0.25rem;
}


/* Track: webkit */
input[type="range"]::-webkit-slider-runnable-track {
  position: relative;
  height: 0.25rem;
  background-color: transparent;
  border-radius: 50px;
}

/* Track: Firefox */
input[type="range"]::-moz-range-track {
  position: relative;
  height: 0.25rem;
  background-color: transparent;
  border-radius: 50px;
}

/* Thumb: webkit */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  box-sizing: border-box;
  appearance: none;
  position: relative;
  background-color: #fff;
  cursor: pointer;
  border-radius: 50%;
  border: 1px solid #4F46E5;
  width: 16px;
  height: 16px;
  top: 50%;
  translate: 0 -50%;
}

/* Thumb: Firefox */
input[type="range"]::-moz-range-thumb {
  box-sizing: border-box;
  appearance: none;
  position: relative;
  background-color: #fff;
  cursor: pointer;
  border-radius: 50%;
  border: 1px solid #4F46E5;
  width: 16px;
  height: 16px;
}

.ai-slider-tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -3px;
  border-width: 3px;
  border-style: solid;
  border-color: #4F46E5 transparent transparent transparent;
}

/* File uploader drag and drop style */
#file-search-drop-area.dragged-over {
  /* bg-gray-200 */
  background-color: #e5e7eb;
}

/* Checkbox */
input[type="checkbox"] {
  /* Add if not using autoprefixer */
  -webkit-appearance: none;
  /* Remove most all native input styles */
  appearance: none;
  /* For iOS < 15 */
  background-color: white;
  /* Not removed via appearance */
  margin: 0;

  font: inherit;
  width: 1rem;
  height: 1rem;
  border: 1px solid #D1D5DB;
  border-radius: 0.25rem;

  display: flex;
  justify-content: space-around;
  align-items: center;

  position: relative;
}

html.dark input[type="checkbox"] {
  background-color: black;
}

input[type="checkbox"]::before {
  position: absolute;
  content: "";
  width: 1rem;
  height: 1rem;
  transform: scale(0);
  z-index: 1;
}

input[type="checkbox"]::after {
  position: absolute;
  content: "";
  width: 1rem;
  height: 1rem;
  transform: scale(0);
  border-radius: 0.25rem;
  z-index: 0;
}

input[type="checkbox"]:checked::before {
  background-color: #fff;
  clip-path: path("M12.7074 4.79303C12.8949 4.98056 13.0002 5.23487 13.0002 5.50003C13.0002 5.76519 12.8949 6.0195 12.7074 6.20703L7.70741 11.207C7.51988 11.3945 7.26557 11.4998 7.00041 11.4998C6.73524 11.4998 6.48094 11.3945 6.29341 11.207L4.29341 9.20703C4.11125 9.01843 4.01045 8.76583 4.01273 8.50363C4.01501 8.24143 4.12018 7.99062 4.30559 7.80521C4.491 7.6198 4.74181 7.51463 5.00401 7.51236C5.2662 7.51008 5.5188 7.61087 5.70741 7.79303L7.00041 9.08603L11.2934 4.79303C11.4809 4.60556 11.7352 4.50024 12.0004 4.50024C12.2656 4.50024 12.5199 4.60556 12.7074 4.79303Z");
  transform: scale(1);
}

input[type="checkbox"]:checked:not(:disabled)::after {
  background-color: #4F46E5;
  transform: scale(1);
}

input[type="checkbox"]:checked:disabled::after {
  background-color: #D1D5DB;
  transform: scale(1);
}

input[type="checkbox"]:not(:checked):disabled::after {
  background-color: #E5E7EB;
  transform: scale(1);
  border: 1px solid #D1D5DB;
}

input[type="checkbox"]:indeterminate::before {
  background-color: #fff;
  clip-path: rect(7px 12px 9px 4px round 1px);
  transform: scale(1);
}

input[type="checkbox"]:indeterminate::after {
  background-color: #4F46E5;
  transform: scale(1);
}

.tags-tree-level-0 {
  padding-left: 20px
}

.tags-tree-level-1 {
  padding-left: 40px
}

.tags-tree-level-2 {
  padding-left: 60px
}

.tags-tree-level-3 {
  padding-left: 80px
}

.tags-tree-level-3 {
  padding-left: 80px;
}

.tags-tree-level-4 {
  padding-left: 100px;
}

.tags-tree-level-5 {
  padding-left: 120px;
}

.tags-tree-level-6 {
  padding-left: 140px;
}

.tags-tree-level-7 {
  padding-left: 160px;
}

.tags-tree-level-8 {
  padding-left: 180px;
}

.tags-tree-level-9 {
  padding-left: 200px;
}

.tags-tree-level-10 {
  padding-left: 220px;
}

.tags-tree-level-11 {
  padding-left: 240px;
}

.tags-tree-level-12 {
  padding-left: 260px;
}

.tags-tree-level-13 {
  padding-left: 280px;
}

.tags-tree-level-14 {
  padding-left: 300px;
}

.tags-tree-level-15 {
  padding-left: 320px;
}

.tags-tree-level-16 {
  padding-left: 340px;
}

.tags-tree-level-17 {
  padding-left: 360px;
}

.tags-tree-level-18 {
  padding-left: 380px;
}

.tags-tree-level-19 {
  padding-left: 400px;
}

.tags-tree-level-20 {
  padding-left: 420px;
}

.tags-tree-level-22 {
  padding-left: 460px;
}

.tags-tree-level-23 {
  padding-left: 480px;
}

.tags-tree-level-24 {
  padding-left: 500px;
}

.tags-tree-level-25 {
  padding-left: 520px;
}

/* Chatbot styles */
.answer-content p {
  margin-bottom: 20px;
}

.answer-content p:not(:is(+ ul, + ol)) {
  margin-bottom: 8px;
}

.answer-content ul,
.answer-content ol {
  margin-left: 24px !important;
}

.answer-content .diagnosis-list {
  margin-left: 0 !important;
}

.answer-content li {
  list-style: disc;
}

.answer-content .diagnosis-list,
.answer-content .diagnosis-list li {
  list-style: none;
}

#usmle-answer-feedback ul {
  margin-left: 0 !important;
}

#usmle-answer-feedback li {
  list-style: none;
}

.ribbon {
  --f: .5em;
  /* control the folded part*/
  --r: .8em;
  /* control the ribbon shape */

  position: absolute;
  right: calc(-1*var(--f));
  padding-inline: 7px;
  line-height: 1.8;
  background: #15803D;
  border-top: var(--f) solid #052E16;
  border-left: var(--r) solid #15803D;
  box-shadow: 0px 2px 2px 0px #000000;
  clip-path:
    polygon(0 100%, 100% 100%, 100% var(--f), calc(100% - var(--f)) 0,
      calc(100% - var(--f)) var(--f), 0 var(--f),
      var(--r) calc(50% + var(--f)/2));
}


.dark .ribbon {
  background: #86EFAC;
  border-top: var(--f) solid #4ADE80;
  border-left: var(--r) solid #86EFAC;
}

/*
 * This is necessary to override the style of the input placeholder when using tagify in mix mode
 */
.tagify__input[data-placeholder]::before {
  content: attr(data-placeholder);
  /* Tailwind's gray-500 */
  color: var(--gray-500);
  position: absolute;
  pointer-events: none;
  /* Keep the (long, nowrap) placeholder inside its box so it can't spill onto
     the Search button when the field is narrow (tag selected, empty keyword). */
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

#chatbot-chat-container {
  padding-bottom: 120px
}


/* Note formatting in the search results rows. These classes are emitted from
   Python (decks/utils.py note_display_html), which Tailwind does not scan, so
   they are written out here rather than as utility classes. Scoped under
   .ah-note-text so they only dress the results rows: cards render the same
   .ah-cloze class and get their own styling from cardOverrideCss()
   (note_cards.html), which is scoped to the search-specific card variants. */
/* The row truncates, and overflow:hidden clips to the line box, which at the
   inherited 20px is shorter than the 24px cloze chip -- enough to cut its bottom
   border off. Inline padding and borders do not grow the line box themselves. */
.ah-note-text {
  line-height: 24px;
}

.ah-note-text .ah-cloze {
  padding: 2px 4px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  font-weight: 700;
  background-color: #eef2ff;
  border-bottom: 1px solid #4f46e5;
  color: #1e1b4b;
}

.dark .ah-note-text .ah-cloze {
  background-color: #1e1b4b;
  border-bottom-color: #818cf8;
  color: #eef2ff;
}

/* Link component per the design system: primary-600/800 on light, 400/200 on
   dark. Not state-qualified for colour, so :visited and :active keep the same
   colour instead of falling back to the browser's purple/red. */
.ah-note-text .ah-note-link {
  color: #4f46e5;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  border-radius: 4px;
  cursor: pointer;
}

.ah-note-text .ah-note-link:hover {
  color: #3730a3;
  text-decoration-thickness: 2px;
}

.ah-note-text .ah-note-link:focus-visible {
  outline: 2px solid #4f46e5;
  outline-offset: 0;
}

.ah-note-text .ah-note-link:focus-visible:hover {
  outline-color: #3730a3;
}

.dark .ah-note-text .ah-note-link {
  color: #818cf8;
}

.dark .ah-note-text .ah-note-link:hover {
  color: #c7d2fe;
}

.dark .ah-note-text .ah-note-link:focus-visible {
  outline-color: #818cf8;
}

.dark .ah-note-text .ah-note-link:focus-visible:hover {
  outline-color: #c7d2fe;
}

/* Inside a cloze the chip already draws a line under the text, and notes often
   wrap their links in <u> as well, so a third underline just stacks up. Keep the
   colour, drop our own line. */
.ah-note-text .ah-cloze .ah-note-link,
.ah-note-text .ah-cloze .ah-note-link:hover {
  text-decoration: none;
}

/* a11y-dialog: hide containers when not shown */
.a11y-dialog[aria-hidden="true"] {
  display: none;
}

/* a11y-dialog: prevent page scroll and stabilise scrollbar width while a dialog is open */
html:has([role='dialog']:not([aria-hidden='true'])) {
  overflow: hidden;
}

/* Desktop only: below `lg` the reserved gutter paints over the right edge of
   fixed drawers (e.g. the smart search filter drawer), hiding their scrollbar. */
@media (min-width: 1024px) {
  html:has([role='dialog']:not([aria-hidden='true'])) {
    scrollbar-gutter: stable;
  }
}

.toastify.ah-toast {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-width: 348px;
  min-height: 44px;
  padding: 4px 4px 4px 20px;
  border-radius: 4px;
  box-shadow: none;
  font-family: "Merriweather Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  cursor: default;
  /* Toastify's base .toastify rule paints a blue gradient via background-image;
     that layers on top of any background-color regardless of which rule wins
     for the color, so it has to be cleared explicitly for the per-level
     background classes set in showToast() (project.js) to actually show. */
  background-image: none;
}

.toastify.ah-toast .toast-close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  margin: 0;
  border-radius: 4px;
  opacity: 1;
  color: inherit;
  font-size: 16px;
  line-height: 1;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.toastify.ah-toast .toast-close:hover {
  /* Derived from the toast's text color so it stays visible on any toast
     background (the per-level colors are set in showToast(), project.js). */
  background: color-mix(in srgb, currentColor 10%, transparent);
}