/*!
 * LC Frontend Overrides — 2025-08 Hotfix
 * Purpose:
 *  - Remove desktop internal scroll in the right preview panel (designer-canvas)
 *  - Align Fold Type tiles: image at top, title at bottom
 *  - Center the "?" inside tooltip icons
 *  - Harden preview containment to avoid scrollbars caused by theme CSS on server
 * Scope: all rules are scoped under #lc-labelconfig-root to avoid theme conflicts
 */

/* 1) Desktop: avoid inner scrolling in preview container by letting the canvas grow with page.
   Keep sticky top, but remove bottom constraint so height isn’t viewport-bounded. */
@media (min-width: 1025px) {
  #lc-labelconfig-root .designer-canvas {
    bottom: auto !important;
    overflow-y: visible !important;
    max-height: none !important;
  }
}

/* 2) Constrain preview frame and label so nothing overflows the canvas area (no nested scrollbars) */
#lc-labelconfig-root .preview-container {
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
}



/* 5) Fold type tiles: image at top, title at bottom (uniform alignment) */
#lc-labelconfig-root .label-type-buttons .label-type-button:has(img) {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: space-between !important; /* push title to bottom */
  gap: 8px !important;
  min-height: 140px !important; /* provide vertical space so layout is stable */
}
#lc-labelconfig-root .label-type-buttons .label-type-button:has(img) img {
  display: block !important;
  width: 64px !important;
  height: 64px !important;
  object-fit: contain !important;
  margin: 0 auto 0 auto !important; /* pinned at top by space-between */
}
#lc-labelconfig-root .label-type-buttons .label-type-button:has(img) > *:last-child {
  margin-top: 6px !important;
  font-weight: 700 !important;
  text-align: center !important;
  width: 100%;
}
/* Ensure "Label Type" tiles (without images) remain compact */
#lc-labelconfig-root .label-type-buttons .label-type-button:not(:has(img)) {
  justify-content: center !important;
  min-height: auto !important;
}

/* 6) Tooltip icon: keep the “?” perfectly centered inside the circle */
#lc-labelconfig-root .help-icon {
  display: inline-block !important;
  align-items: center !important;
  justify-content: center !important;
  width: 16px !important;
  height: 16px !important;
  line-height: 16px !important;
  font-weight: 700 !important;
  text-align: center !important;
  position: relative !important;
  padding: 0 !important;
  vertical-align: middle !important;
}

/* 7) Mobile preview modal: ensure no horizontal scrolling caused by theme resets */
@media (max-width: 768px) {
  .mobile-preview-modal > div {
    overflow-x: hidden !important;
  }
}