/* Foi necessário manter esse css personalizado para que o cabeçalho do orçamento exibisse a imagem com o gradiente por cima. */
.quote-header {
  background-image: url("/assets/header-quote-f0ff4e63.png"), linear-gradient(to bottom, rgba(74,144,226,0) 0%, rgba(74,144,226,0) 100%);
  background-position-x: 0%;
  background-position-y: 0%;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;
  min-height: 200px;

  h3 {
    font-size: 2rem;
    line-height: 1.5;
  }

  h5 {
    font-size: 1.25rem;
    line-height: 1.5;
  }
}

textarea.drag-over {
  border: 2px dashed #0d6efd !important;
  background-color: #e7f3ff !important;
  outline: none;
}

.quote-image {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1rem auto;
  border-radius: 4px;
  cursor: pointer;
}

/* Quote Image Carousel */
.quote-image-carousel {
  margin: 1.5rem auto;
  max-width: 100%;
  position: relative;
}

/* Fixed height prevents layout shift when switching between images of different proportions.
   JS (adjustCarouselHeight) overrides this with the correct height based on the tallest
   image's aspect ratio once images have loaded. */
.quote-image-carousel .carousel-inner {
  border-radius: 8px;
  background-color: #f8f9fa;
  height: 350px;
  touch-action: pan-y;
}

.quote-image-carousel .carousel-item {
  text-align: center;
  height: 100%;
}

.quote-image-carousel .carousel-item.active,
.quote-image-carousel .carousel-item.carousel-item-next,
.quote-image-carousel .carousel-item.carousel-item-prev {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

/* picture wraps the img — both need to fill the fixed-height slot */
.quote-image-carousel .carousel-item picture {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  max-height: 100%;
}

.quote-image-carousel .carousel-item picture img,
.quote-image-carousel .carousel-item > img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  margin: 0;
}

.quote-image-carousel .carousel-control-prev,
.quote-image-carousel .carousel-control-next {
  width: 8%;
  opacity: 0.5;
}

.quote-image-carousel .carousel-control-prev:hover,
.quote-image-carousel .carousel-control-next:hover {
  opacity: 0.8;
}

.quote-image-carousel .carousel-control-prev-icon,
.quote-image-carousel .carousel-control-next-icon {
  width: 1.6rem;
  height: 1.6rem;
  background-color: rgba(0, 0, 0, 0.35);
  border-radius: 50%;
  padding: 0.35rem;
}

/* Dots: dark pill overlay always on top of image, at the fixed bottom of the carousel */
.quote-image-carousel .carousel-indicators {
  position: absolute;
  right: auto;
  bottom: 0.75rem;
  left: 50%;
  z-index: 2;
  width: auto;
  margin: 0;
  padding: 0.2rem 0.35rem;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.35);
  border-radius: 999px;
  gap: 0.35rem;
}

.quote-image-carousel .carousel-indicators button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.45) !important;
  opacity: 1;
  border: none;
  margin: 0;
  transition: background-color 0.15s ease;
}

.quote-image-carousel .carousel-indicators button.active {
  background-color: #fff !important;
}

.quote-image.loading-lazy {
  width: 100%;
  min-height: 200px;
  background-color: #f0f0f0;
}

/* Quote Details - Markdown tables */
.quote-table-wrapper {
  overflow-x: auto;
  margin: 1.5rem 0;
}

.quote-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95em;
}

.quote-table th,
.quote-table td {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--falcon-border-color, #dee2e6);
  text-align: left;
  vertical-align: top;
}

/* O editor visual grava a linha de cabeçalho no corpo da tabela, sem `thead`. */
.quote-table th {
  background-color: var(--falcon-gray-200, #edf2f9);
  font-weight: 600;
}

.quote-table th > p:last-child,
.quote-table td > p:last-child {
  margin-bottom: 0;
}

.quote-table tbody tr:nth-child(even) {
  background-color: var(--falcon-gray-100, #f9fafd);
}

/* Quote Editor - Toolbar Sticky */
.quote-editor-toolbar {
  position: sticky;
  top: 73px;
  z-index: 99;
  background-color: var(--falcon-card-bg, #fff);
  padding: 0.75rem 0;
  margin-bottom: 0.5rem !important;
  border-bottom: 1px solid var(--falcon-border-color, #dee2e6);
  margin-left: -1rem;
  margin-right: -1rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Quote Editor - Preview Modal */
#quotePreviewModal .modal-content {
  background-color: #fff;
}

#quotePreviewModal .modal-header {
  background-color: var(--falcon-card-bg, #fff);
  border-bottom: 1px solid var(--falcon-border-color, #dee2e6);
  color: var(--falcon-heading-color, #000);
}

#quotePreviewModal .modal-title,
#quotePreviewModal .modal-title *,
#quotePreviewModal .modal-header h5 {
  color: var(--falcon-heading-color, #000) !important;
}

#quotePreviewModal .modal-body {
  padding: 1.5rem;
  background-color: #fff;
}

#quotePreviewModal .preview-content {
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
  font-size: 0.95rem;
  line-height: 1.6;
  background-color: #fff;
}

#quotePreviewModal .preview-content {
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
  font-size: 0.95rem;
  line-height: 1.6;
}

#quotePreviewModal .preview-content h3 {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 1.5rem;
  font-weight: 600;
}

#quotePreviewModal .preview-content h4 {
  margin-bottom: 0.75rem;
  font-size: 1.25rem;
}

/* Subtítulo dos detalhes do orçamento: em negrito, menor que o título e maior que o texto. */
[data-quote-config-target="detailsTemplate"] h4,
#quotePreviewModal .preview-content h4,
.quote-visual-editor-prose h4 {
  font-weight: 600;
}

#quotePreviewModal .preview-content p {
  margin-bottom: 1rem;
  line-height: 1.6;
  color: #212529;
}

#quotePreviewModal .preview-content ul,
#quotePreviewModal .preview-content ol {
  margin-bottom: 1rem;
  padding-left: 2rem;
  color: #212529;
}

#quotePreviewModal .preview-content li {
  margin-bottom: 0.5rem;
}

#quotePreviewModal .preview-content a {
  color: #0d6efd;
  text-decoration: underline;
}

#quotePreviewModal .preview-content a:hover {
  text-decoration: none;
}

#quotePreviewModal .preview-content blockquote {
  border-left: 4px solid #dee2e6;
  padding-left: 1rem;
  margin-left: 0;
  margin-bottom: 1rem;
  color: #6c757d;
  font-style: italic;
}

#quotePreviewModal .preview-content hr {
  border: none;
  border-top: 1px solid #6c757d;
  margin: 1.5rem 0;
  opacity: 0.6;
}

#quotePreviewModal .preview-content code {
  background-color: #f8f9fa;
  padding: 0.2rem 0.4rem;
  border-radius: 0.25rem;
  font-family: 'Courier New', monospace;
  font-size: 0.9em;
}

#quotePreviewModal .preview-content pre {
  background-color: #f8f9fa;
  padding: 1rem;
  border-radius: 0.375rem;
  overflow-x: auto;
  margin-bottom: 1rem;
}

#quotePreviewModal .preview-content pre code {
  background-color: transparent;
  padding: 0;
}

#quotePreviewModal .preview-content img,
#quotePreviewModal .preview-content picture {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1rem auto;
  border-radius: 4px;
}

#quotePreviewModal .preview-content picture img {
  cursor: default;
  border-radius: 4px;
}

/* Responsividade Mobile */
@media (max-width: 576px) {
  #quotePreviewModal .modal-dialog {
    margin: 0.5rem;
  }

  #quotePreviewModal .modal-body {
    padding: 1rem;
  }

  #quotePreviewModal .preview-content {
    font-size: 0.875rem;
  }

  #quotePreviewModal .preview-content h3 {
    font-size: 1.25rem;
  }

  #quotePreviewModal .preview-content h4 {
    font-size: 1.1rem;
  }

  .quote-image-carousel .carousel-inner {
    height: 220px;
  }

  .quote-image-carousel .carousel-control-prev-icon,
  .quote-image-carousel .carousel-control-next-icon {
    width: 1.25rem;
    height: 1.25rem;
  }

  .quote-image-carousel .carousel-indicators button {
    width: 6px;
    height: 6px;
  }
}

/* Editor visual dos detalhes: a área de edição cresce com o texto, como o campo de Markdown. */
.quote-visual-editor-content {
  min-height: 10rem;
  height: auto;
  cursor: text;
}

/* Na tela de toque, o navegador deixa o último botão tocado em :hover, e no tema o :hover tem o mesmo
   visual do botão ativo: o negrito desligado pelo toque continuaria parecendo ligado. Sem mouse, só a
   formatação ativa pinta o botão. */
@media (hover: none) {
  .quote-visual-editor .btn-toolbar .btn-outline-secondary:not(.active) {
    --falcon-btn-hover-color: var(--falcon-btn-color);
    --falcon-btn-hover-bg: var(--falcon-btn-bg);
    --falcon-btn-hover-border-color: var(--falcon-btn-border-color);
  }
}

/* O foco fica no texto editável, dentro do campo: o contorno vai no campo, como nos demais. */
.quote-visual-editor-content:focus-within {
  border-color: var(--falcon-primary);
  box-shadow: 0 0 0 var(--falcon-focus-ring-width) var(--falcon-focus-ring-color);
}

.quote-visual-editor-prose {
  min-height: 9rem;
  outline: none;
}

.quote-visual-editor-prose > :last-child,
.quote-visual-editor-prose li > p,
.quote-visual-editor-prose th > p,
.quote-visual-editor-prose td > p {
  margin-bottom: 0;
}

.quote-visual-editor-prose img {
  display: inline-block;
  max-width: 100%;
  max-height: 16rem;
  margin: 0.25rem;
  border-radius: 4px;
  vertical-align: bottom;
}

/* Imagens que viram carrossel na página do orçamento: contorno tracejado e uma etiqueta antes delas. */
.quote-visual-editor-prose img.quote-visual-editor-carousel-image {
  outline: 2px dashed var(--falcon-primary);
  outline-offset: 2px;
}

/* A etiqueta (um badge do tema) fica numa linha só dela, acima das imagens, para não desalinhar o grupo. */
.quote-visual-editor-carousel-label {
  display: block;
  width: fit-content;
  margin: 0.25rem;
  user-select: none;
}

.quote-visual-editor-prose img.ProseMirror-selectednode {
  outline: 3px solid var(--falcon-primary);
}

.quote-visual-editor-prose img.quote-visual-editor-uploading {
  opacity: 0.5;
}

.quote-visual-editor-prose table {
  width: 100%;
  margin: 0.5rem 0;
  border-collapse: collapse;
  table-layout: fixed;
}

.quote-visual-editor-prose th,
.quote-visual-editor-prose td {
  min-width: 4rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--falcon-border-color);
  vertical-align: top;
}

.quote-visual-editor-prose .selectedCell {
  background-color: var(--falcon-primary-bg-subtle);
}

.quote-visual-editor-prose.ProseMirror-focused .ProseMirror-gapcursor:after {
  border-top-color: var(--falcon-body-color);
}