/* CDK drag-drop */
.cdk-drag-preview {
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15);
  border-radius: 6px;
  background-color: var(--card);
  z-index: 10000 !important;
  pointer-events: none;
  opacity: 1;
  padding: 1rem;
}

.dark .cdk-drag-preview {
  border: 1px solid var(--border);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4);
}

.cdk-drag-placeholder {
  background-color: color-mix(in srgb, var(--primary) 12%, transparent);
  border: 2px dashed var(--primary);
  border-radius: 6px;
  opacity: 0.8;
  visibility: visible;
}

.cdk-drag-placeholder * {
  opacity: 0;
}

.cdk-drag-animating,
.cdk-drop-list-dragging .cdk-drag:not(.cdk-drag-placeholder) {
  transition: transform 100ms cubic-bezier(0, 0, 0.2, 1);
}

.cdk-drag-dragging {
  transition: none !important;
}

/* Modal print layout */
@media print {
  body > *:not(.cdk-overlay-container) {
    display: none !important;
  }

  .cdk-overlay-backdrop {
    display: none !important;
  }

  .cdk-overlay-pane {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    transform: none !important;
  }

  .z-modal-wrapper,
  z-modal {
    position: static !important;
    display: block !important;
  }

  .z-modal-header,
  .z-modal-footer,
  [zModalHeader],
  [zModalFooter],
  .z-modal__header,
  .z-modal__footer,
  .z-modal-close,
  .z-modal__close {
    display: none !important;
  }

  .z-modal-content,
  .z-modal__content,
  [zModalContent] {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
  }

  * {
    background: transparent !important;
    box-shadow: none !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}

/* Cho phép Blossom color picker thoát khỏi vùng overflow của drawer/modal. */
z-drawer:has(.bcp-core[aria-expanded='true']),
z-modal:has(.bcp-core[aria-expanded='true']) {
  overflow: visible !important;
}

z-drawer:has(.bcp-core[aria-expanded='true']) .ng-scroll-viewport,
z-modal:has(.bcp-core[aria-expanded='true']) .ng-scroll-viewport {
  overflow: visible !important;
}