/* Template loading optimizations */
.template-skeleton {
  background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
  width: 100%;
  height: 100%;
}

/* Smooth dragging optimizations */
.popup-panel {
  will-change: left, top;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.popup-panel.dragging {
  cursor: grabbing !important;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.popup-panel.resizing {
  cursor: se-resize !important;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* Popup dragging optimizations */
.popup-panel {
  transition: none !important;
  touch-action: none;
}

.popup-panel.dragging {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  z-index: 10000 !important;
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.template-image-loading {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.template-image-loaded {
  opacity: 1 !important;
}

/* Homepage-style slider */
#sfSize::-webkit-slider-thumb,
#servingSizeSize::-webkit-slider-thumb,
#servingsSize::-webkit-slider-thumb,
#dividerThickness::-webkit-slider-thumb,
#panelWidth::-webkit-slider-thumb,
#headerBorderWidth::-webkit-slider-thumb,
#tableHeaderSize::-webkit-slider-thumb {
  appearance: none;
  height: 14px;
  width: 14px;
  background: #fbbf24;
  border: 2px solid #d97706;
  cursor: pointer;
  transform: rotate(45deg);
}
#sfSize::-webkit-slider-thumb:hover,
#servingSizeSize::-webkit-slider-thumb:hover,
#servingsSize::-webkit-slider-thumb:hover,
#dividerThickness::-webkit-slider-thumb:hover,
#panelWidth::-webkit-slider-thumb:hover,
#headerBorderWidth::-webkit-slider-thumb:hover,
#tableHeaderSize::-webkit-slider-thumb:hover {
  background: #f59e0b;
}

/* Popup expand/collapse functionality */
.popup-title {
  cursor: pointer;
  user-select: none;
  transition: background-color 0.2s ease;
}

.popup-title:hover {
  background-color: #f3f4f6;
  border-radius: 4px;
  padding: 2px 4px;
  margin: -2px -4px;
}

.popup-title::after {
  content: ' ▼';
  font-size: 0.7em;
  opacity: 0.6;
  transition: transform 0.2s ease;
}

.popup-collapsed .popup-title::after {
  transform: rotate(-90deg);
}

.popup-content {
  transition: all 0.3s ease;
}

.popup-collapsed .popup-content {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
}

.popup-panel {
  transition: all 0.3s ease;
  overflow: hidden;
}

.popup-collapsed .popup-panel {
  min-width: 200px;
  height: auto !important;
}

.popup-collapsed .popup-resize-handle {
  display: none;
}

#sfSize::-moz-range-thumb,
#servingSizeSize::-moz-range-thumb,
#servingsSize::-moz-range-thumb,
#dividerThickness::-moz-range-thumb,
#panelWidth::-moz-range-thumb,
#headerBorderWidth::-moz-range-thumb,
#tableHeaderSize::-moz-range-thumb {
  height: 14px;
  width: 14px;
  background: #fbbf24;
  border: 2px solid #d97706;
  cursor: pointer;
  transform: rotate(45deg);
}
#sfSize::-webkit-slider-track,
#servingSizeSize::-webkit-slider-track,
#servingsSize::-webkit-slider-track,
#dividerThickness::-webkit-slider-track,
#panelWidth::-webkit-slider-track,
#headerBorderWidth::-webkit-slider-track,
#tableHeaderSize::-webkit-slider-track {
  background: #e5e7eb;
  height: 4px;
  border-radius: 2px;
  border: 1px solid #d1d5db;
}
#sfSize::-moz-range-track,
#servingSizeSize::-moz-range-track,
#servingsSize::-moz-range-track,
#dividerThickness::-moz-range-track,
#panelWidth::-moz-range-track,
#headerBorderWidth::-moz-range-track,
#tableHeaderSize::-moz-range-track {
  background: #e5e7eb;
  height: 4px;
  border-radius: 2px;
  border: 1px solid #d1d5db;
}

/* Popup focus effects */
#customPanel select:focus,
#customPanel input:focus,
#servingSizePanel select:focus,
#servingSizePanel input:focus,
#servingsPanel select:focus,
#servingsPanel input:focus,
#dividerPanel select:focus,
#dividerPanel input:focus {
  border-color: #fbbf24;
  box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.2);
}

/* Custom color input styling */
#sfColor::-webkit-color-swatch-wrapper,
#servingSizeColor::-webkit-color-swatch-wrapper,
#servingsColor::-webkit-color-swatch-wrapper,
#dividerColor::-webkit-color-swatch-wrapper {
  padding: 0;
}
#sfColor::-webkit-color-swatch,
#servingSizeColor::-webkit-color-swatch,
#servingsColor::-webkit-color-swatch,
#dividerColor::-webkit-color-swatch {
  border: 1px solid #d1d5db;
  border-radius: 4px;
}

/* Nutrient table header bottom border - now controlled by JavaScript */
/* #nutrientTableHead tr {
    border-bottom: 3px solid #000000;
} */

/* Nutrient table row separators - now controlled by JavaScript per row */

/* Fixed table layout to respect column widths */
.nutrient-table {
  table-layout: fixed;
  width: auto;
}

/* Column spacing is applied dynamically via JavaScript */

/* Table header vertical alignment */
#nutrientTableHead th {
  vertical-align: bottom;
}

/* Table body vertical alignment - align to bottom by default */
#nutrientTableBody td {
  vertical-align: bottom;
}

/* Prevent body scroll when modal is open */
body.modal-open {
  overflow: hidden;
}

/* Resize handle for panel */
.resize-handle {
  position: absolute;
  right: -4px;
  top: 0;
  bottom: 0;
  width: 8px;
  cursor: ew-resize;
  background-color: transparent;
  z-index: 10;
}

.resize-handle:hover {
  background-color: rgba(251, 191, 36, 0.3);
  border-right: 2px solid #fbbf24;
}

.resize-handle:active {
  background-color: rgba(251, 191, 36, 0.5);
}

/* Popup-specific resize handle styles */
.popup-resize-handle {
  z-index: 60;
  pointer-events: auto;
}

.popup-resize-handle:hover {
  opacity: 1 !important;
}

/* Prevent text selection during resize */
.popup-panel.resizing {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  pointer-events: none;
}

.popup-panel.resizing * {
  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  pointer-events: none !important;
}

/* Allow interaction with resize handle during resize */
.popup-panel.resizing .popup-resize-handle {
  pointer-events: auto !important;
}

/* Prevent text selection during drag as well */
.popup-panel.dragging {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.popup-panel.dragging * {
  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
}

/* Global body styles to prevent selection during interactions */
body.popup-interacting {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  cursor: default !important;
}

/* Prevent text selection during resize */
.popup-panel.resizing {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  pointer-events: none;
}

.popup-panel.resizing * {
  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  pointer-events: none !important;
}

/* Allow interaction with resize handle during resize */
.popup-panel.resizing .popup-resize-handle {
  pointer-events: auto !important;
}

/* Watermark System Styles */
/* Multi-layered watermark protection for preview popup only */

/* Base watermark container */
.watermark-overlay {
  pointer-events: none !important;
  user-select: none !important;
}

/* Text watermark layers */
.watermark-text-layer-0,
.watermark-text-layer-1,
.watermark-text-layer-2 {
  pointer-events: none !important;
  user-select: none !important;
}

/* Canvas watermark */
.watermark-canvas {
  pointer-events: none !important;
  user-select: none !important;
}

/* Additional watermark protection */
#previewContent {
  position: relative;
}

/* Prevent watermark removal via CSS */
#previewContent .watermark-overlay,
#previewContent [class*='watermark'],
#previewContent canvas[class*='watermark'] {
  display: block !important;
  visibility: visible !important;
  opacity: 0.15 !important;
}

/* Ensure watermarks stay on top */
#previewContent > .watermark-overlay,
#previewContent > [class*='watermark-text-layer'],
#previewContent > .watermark-canvas {
  z-index: 1000 !important;
}

/* Watermark text styling */
#previewContent [class*='watermark-text-layer'] div {
  font-family: Inter !important;
  font-weight: bold !important;
}

/* Responsive watermark scaling */
@media (max-width: 768px) {
  #previewContent [class*='watermark-text-layer'] div {
    font-size: 24px !important;
  }
}

@media (max-width: 480px) {
  #previewContent [class*='watermark-text-layer'] div {
    font-size: 18px !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  #previewContent .watermark-overlay {
    opacity: 0.3 !important;
  }

  #previewContent [class*='watermark-text-layer'] div {
    opacity: 0.4 !important;
    text-shadow: 0 0 3px rgba(255, 0, 0, 0.8) !important;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  #previewContent .watermark-overlay,
  #previewContent [class*='watermark-text-layer'] div {
    animation: none !important;
    transition: none !important;
  }
}

/* Enhanced Watermark Protection - Higher Specificity */
#previewContent::after {
  content: '';
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 100px,
    transparent 100px,
    transparent 200px
  ) !important;
  pointer-events: none !important;
  z-index: 9999 !important;
  display: block !important;
  visibility: visible !important;
}

/* Additional diagonal watermark pattern */
#previewContent::before {
  content: '';
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 80px,
    transparent 80px,
    transparent 160px
  ) !important;
  pointer-events: none !important;
  z-index: 9998 !important;
  display: block !important;
  visibility: visible !important;
}

/* Protect against CSS overrides */
#previewContent * {
  isolation: isolate;
}

/* Force watermark visibility */
#previewContent .watermark-overlay,
#previewContent [class*='watermark'],
#previewContent canvas[class*='watermark'] {
  display: block !important;
  visibility: visible !important;
  opacity: 0.15 !important;
  position: absolute !important;
  pointer-events: none !important;
  user-select: none !important;
  z-index: 10000 !important;
}

/* Ensure watermarks stay on top of everything */
#previewContent > .watermark-overlay,
#previewContent > [class*='watermark-text-layer'],
#previewContent > .watermark-canvas {
  z-index: 10000 !important;
  position: absolute !important;
}

/* Watermark text styling with higher specificity */
#previewContent [class*='watermark-text-layer'] div {
  font-family: Inter !important;
  font-weight: bold !important;
  position: absolute !important;
  pointer-events: none !important;
  user-select: none !important;
  z-index: 10001 !important;
}

/* Hanging indent for word-wrapped table cells - only applied during export/preview */
.export-preview .word-wrap-enabled td:first-child,
.word-wrap-enabled.export-preview td:first-child {
  padding-left: 1em;
  text-indent: -1em;
}

/* Force fixed table layout and prevent column expansion when word wrap is disabled */
.nutrient-table {
  table-layout: fixed !important;
}

.nutrient-table tr:not(.word-wrap-enabled) td {
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* Apply same rules to export preview */
.export-preview .nutrient-table {
  table-layout: fixed !important;
}

.export-preview .nutrient-table tr:not(.word-wrap-enabled) td {
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* Ensure export preview table cells also align to bottom */
.export-preview .nutrient-table #nutrientTableBody td {
  vertical-align: bottom !important;
}

/* Use Inter font only in preview and label preview panels */
#previewContent,
#labelPreview {
  font-family: Inter !important;
}

/* Responsive layout for supplement editor */
#labelPreview {
  max-width: 100%;
  /* width: min-content; REMOVED to allow manual resizing via JS */
}

/* Apply normal line-height to all text in label preview */
#labelPreview * {
  line-height: normal !important;
}

@media (max-width: 768px) {
  #labelPreview {
    width: 100% !important;
    margin: 0 !important;
  }

  .resize-handle {
    display: none;
  }
}

/* Color Inheritance for Label Preview */
#labelPreview hr {
  border-color: currentColor !important;
}

#labelPreview input,
#labelPreview textarea,
#labelPreview div[contenteditable='true'] {
  color: inherit !important;
}

#labelPreview table,
#labelPreview th,
#labelPreview td {
  border-color: currentColor !important;
}