/* 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;
}

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

/* File input styling */
.file-upload-area {
  border: 2px dashed #6c757d;
  padding: 40px;
  text-align: center;
  cursor: pointer;
  position: relative;
  border-radius: 0.375rem; /* Bootstrap 5 border radius */
}

.file-upload-area.border-primary {
  border-color: #007bff;
}

.file-input {
  display: none;
}

.file-input-label {
  display: block;
  font-weight: bold;
}
/* 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 */

/* Responsive image zoom */
img.zoomable {
  border-radius: 0.25em;
  display: block;
  margin: 1em auto;
  max-width: 50%;
  transition: max-width 0.25s ease, opacity 0.25s ease, transform 0s;
  cursor: zoom-in;
}

img.zoomable:hover {
  max-width: 100%;
  opacity: 1;
  cursor: zoom-out;
}
/* END Responsive image zoom */

/* 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);
}
/* 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; }
.ql-editor.ql-blank::before { color: var(--bs-secondary-color); opacity: 1; }
/* END Quill styling */