/* ========================================================================
   DentalGenius editor + modal final guard
   Fixes Quill toolbar/editor after Bootstrap removal and forces native modals
   above the backdrop so calendar details remain readable/clickable.
   ======================================================================== */

/* Quill/Snow base reconstruction: pages already load Quill JS, but after the
   template purge the original snow CSS can be missing. Keep this global and
   intentionally scoped to Quill classes used by all admin editors. */
.ql-toolbar.ql-snow,
.ql-container.ql-snow {
  box-sizing: border-box !important;
  border-color: rgba(15, 36, 72, .10) !important;
  font-family: 'Public Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

.ql-toolbar.ql-snow {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: .35rem .5rem !important;
  padding: .75rem .85rem !important;
  border: 1px solid rgba(15, 36, 72, .10) !important;
  border-radius: 1.1rem 1.1rem 0 0 !important;
  background: linear-gradient(135deg, rgba(248, 253, 255, .98), rgba(239, 250, 252, .92)) !important;
}

.ql-toolbar.ql-snow .ql-formats {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: .2rem !important;
  margin: 0 .35rem 0 0 !important;
}

.ql-toolbar.ql-snow button {
  position: relative !important;
  display: inline-grid !important;
  place-items: center !important;
  width: 2rem !important;
  height: 2rem !important;
  min-width: 2rem !important;
  min-height: 2rem !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: .7rem !important;
  background: transparent !important;
  color: #51637f !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

.ql-toolbar.ql-snow button:hover,
.ql-toolbar.ql-snow button:focus-visible,
.ql-toolbar.ql-snow button.ql-active {
  color: #008d95 !important;
  background: rgba(0, 201, 189, .10) !important;
  outline: none !important;
}

.ql-toolbar.ql-snow button svg,
.ql-snow .ql-picker-label svg,
.ql-snow .ql-picker-item svg,
.ql-snow svg {
  display: block !important;
  width: 1.12rem !important;
  min-width: 1.12rem !important;
  max-width: 1.12rem !important;
  height: 1.12rem !important;
  min-height: 1.12rem !important;
  max-height: 1.12rem !important;
  margin: 0 !important;
  overflow: visible !important;
  transform: none !important;
}

.ql-snow .ql-stroke {
  fill: none !important;
  stroke: currentColor !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  stroke-width: 2 !important;
}

.ql-snow .ql-fill,
.ql-snow .ql-stroke.ql-fill {
  fill: currentColor !important;
  stroke: none !important;
}

.ql-snow .ql-picker {
  position: relative !important;
  display: inline-block !important;
  height: 2rem !important;
  min-width: 2.65rem !important;
  color: #51637f !important;
  font-size: .86rem !important;
  font-weight: 850 !important;
  line-height: 2rem !important;
  vertical-align: middle !important;
}

.ql-snow .ql-picker-label {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  width: 100% !important;
  height: 2rem !important;
  padding: 0 1.8rem 0 .65rem !important;
  border: 1px solid transparent !important;
  border-radius: .75rem !important;
  color: inherit !important;
  background: transparent !important;
  cursor: pointer !important;
}

.ql-snow .ql-picker-label:hover,
.ql-snow .ql-picker.ql-expanded .ql-picker-label {
  border-color: rgba(0, 201, 189, .20) !important;
  color: #008d95 !important;
  background: rgba(0, 201, 189, .10) !important;
}

.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) .ql-picker-label svg {
  position: absolute !important;
  top: 50% !important;
  right: .45rem !important;
  margin: 0 !important;
  transform: translateY(-50%) !important;
}

.ql-snow .ql-picker-options {
  position: absolute !important;
  top: calc(100% + .35rem) !important;
  left: 0 !important;
  z-index: 2147481200 !important;
  display: none !important;
  min-width: 12rem !important;
  max-height: 16rem !important;
  overflow: auto !important;
  padding: .45rem !important;
  border: 1px solid rgba(15, 36, 72, .10) !important;
  border-radius: .95rem !important;
  background: rgba(255, 255, 255, .98) !important;
  box-shadow: 0 1.1rem 2.8rem rgba(7, 26, 70, .16) !important;
}

.ql-snow .ql-picker.ql-expanded .ql-picker-options {
  display: grid !important;
  gap: .15rem !important;
}

.ql-snow .ql-picker-item {
  display: block !important;
  padding: .48rem .6rem !important;
  border-radius: .7rem !important;
  color: #071b4d !important;
  font-size: .86rem !important;
  line-height: 1.2 !important;
  cursor: pointer !important;
}

.ql-snow .ql-picker-item:hover,
.ql-snow .ql-picker-item.ql-selected {
  color: #008d95 !important;
  background: rgba(0, 201, 189, .10) !important;
}

.ql-container.ql-snow {
  min-height: 14rem !important;
  border: 1px solid rgba(15, 36, 72, .10) !important;
  border-top: 0 !important;
  border-radius: 0 0 1.1rem 1.1rem !important;
  background: #fff !important;
  overflow: hidden !important;
}

.ql-container.ql-snow .ql-editor {
  min-height: clamp(18rem, 42vh, 34rem) !important;
  padding: 1rem 1.05rem !important;
  color: #071b4d !important;
  font-size: .98rem !important;
  font-weight: 600 !important;
  line-height: 1.68 !important;
  overflow-wrap: anywhere !important;
}

.ql-editor.ql-blank::before {
  color: #94a3b8 !important;
  font-style: normal !important;
  font-weight: 700 !important;
  left: 1.05rem !important;
  right: 1.05rem !important;
}

.ql-editor p,
.ql-editor ol,
.ql-editor ul,
.ql-editor pre,
.ql-editor blockquote,
.ql-editor h1,
.ql-editor h2,
.ql-editor h3,
.ql-editor h4,
.ql-editor h5,
.ql-editor h6 {
  margin-top: 0 !important;
  margin-bottom: .85rem !important;
}

.ql-editor img {
  max-width: 100% !important;
  height: auto !important;
  border-radius: .9rem !important;
}

/* Keep native DentalGenius modals above their backdrop and above the fixed shell.
   Pointer-events on the generated backdrop stay disabled to avoid the overlay
   intercepting clicks on pages with very high z-index legacy layers. */
body > .modal-backdrop.dg-modal-backdrop,
body > .modal-backdrop[data-dg-modal-backdrop='1'],
body > .modal-backdrop.show[data-dg-modal-backdrop='1'] {
  z-index: 2147483300 !important;
  pointer-events: none !important;
  opacity: .52 !important;
  background: rgba(7, 27, 77, .62) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

body > .modal.dg-tw-modal,
body > .modal.dg-tw-lightbox,
body > .modal.dg-tw-modal.show,
body > .modal.dg-tw-lightbox.show {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483301 !important;
  pointer-events: auto !important;
  isolation: isolate !important;
}

body > .modal.dg-tw-modal .modal-dialog,
body > .modal.dg-tw-lightbox .modal-dialog {
  position: relative !important;
  z-index: 2 !important;
  pointer-events: auto !important;
}

body > .modal.dg-tw-modal .dg-tw-modal__content,
body > .modal.dg-tw-lightbox .dg-tw-modal__content {
  position: relative !important;
  z-index: 3 !important;
  pointer-events: auto !important;
}

body > .modal.dg-tw-modal.show ~ .modal-backdrop,
body > .modal.dg-tw-lightbox.show ~ .modal-backdrop {
  z-index: 2147483300 !important;
}

body:has(> .modal.dg-tw-modal.show) > .modal-backdrop,
body:has(> .modal.dg-tw-lightbox.show) > .modal-backdrop {
  z-index: 2147483300 !important;
  pointer-events: none !important;
}

.dg-tw-modal--ai-post {
  z-index: 2147483301 !important;
}

@media (max-width: 767.98px) {
  .ql-toolbar.ql-snow {
    padding: .65rem !important;
    gap: .25rem !important;
  }

  .ql-toolbar.ql-snow button,
  .ql-snow .ql-picker,
  .ql-snow .ql-picker-label {
    min-height: 1.9rem !important;
    height: 1.9rem !important;
  }

  .ql-container.ql-snow .ql-editor {
    min-height: 18rem !important;
    font-size: .95rem !important;
  }
}


/* -------------------------------------------------------------------------
   Quill emergency guard: keep the official Snow behaviour even when this file
   is loaded after other DentalGenius guard layers. This prevents oversized
   triangles, visible hidden link tooltips and the small stray textbox below
   editors.
   ------------------------------------------------------------------------- */
.ql-toolbar.ql-snow .ql-formats {
  display: inline-flex !important;
  align-items: center !important;
}

.ql-toolbar.ql-snow .ql-formats::before,
.ql-toolbar.ql-snow .ql-formats::after,
.ql-toolbar.ql-snow button::before,
.ql-toolbar.ql-snow button::after,
.ql-snow .ql-picker::before,
.ql-snow .ql-picker::after,
.ql-snow .ql-picker-label::before,
.ql-snow .ql-picker-label::after {
  content: none !important;
  display: none !important;
}

.ql-toolbar.ql-snow button svg,
.ql-snow .ql-picker-label svg,
.ql-snow .ql-picker-item svg {
  width: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
  fill: none;
  transform: none !important;
}

.ql-snow .ql-picker-options {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.ql-snow .ql-picker.ql-expanded .ql-picker-options {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.ql-snow .ql-tooltip {
  position: absolute !important;
  left: 1rem !important;
  top: auto !important;
  bottom: 1rem !important;
  z-index: 30 !important;
  display: flex !important;
  align-items: center !important;
  gap: .45rem !important;
  max-width: min(34rem, calc(100% - 2rem)) !important;
  padding: .65rem .75rem !important;
  border: 1px solid rgba(15, 36, 72, .10) !important;
  border-radius: .95rem !important;
  color: #071b4d !important;
  background: rgba(255, 255, 255, .98) !important;
  box-shadow: 0 1rem 2.4rem rgba(7, 26, 70, .16) !important;
  transform: none !important;
}

.ql-snow .ql-tooltip.ql-hidden,
.ql-snow .ql-tooltip:not(.ql-editing):not([data-mode]) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.ql-snow .ql-tooltip input[type='text'] {
  width: min(20rem, 100%) !important;
  height: 2.25rem !important;
  padding: 0 .8rem !important;
  border: 1px solid rgba(15, 36, 72, .14) !important;
  border-radius: .75rem !important;
  color: #071b4d !important;
  background: #fff !important;
  font: 800 .86rem/1.2 'Public Sans', system-ui, sans-serif !important;
}

.dg-admin-quill-shell,
.dg-newsletter-editor-wrapper,
.dg-ai-post-quill,
.dg-admin-quill,
.js-quill-editor,
.js-legal-document-quill,
.js-research-quill-editor,
.js-research-material-quill-editor {
  position: relative !important;
}

textarea.dg-newsletter-content-input,
textarea[aria-hidden='true'][tabindex='-1'],
input[type='hidden'][data-quill-input],
.ql-hidden-input {
  position: absolute !important;
  inset: auto auto 0 0 !important;
  width: 1px !important;
  min-width: 1px !important;
  max-width: 1px !important;
  height: 1px !important;
  min-height: 1px !important;
  max-height: 1px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  pointer-events: none !important;
}

@media (max-width: 575.98px) {
  .ql-toolbar.ql-snow {
    gap: .22rem !important;
    padding: .55rem !important;
  }

  .ql-toolbar.ql-snow button,
  .ql-snow .ql-picker-label {
    min-width: 2.2rem !important;
    height: 2.2rem !important;
  }

  .ql-container.ql-snow .ql-editor {
    min-height: 16rem !important;
    padding: .85rem !important;
  }
}