/* Custom Modern & Colorful Premium Theme Styles */

/* Transparency Grid with Modern Pattern */
.bg-checker {
  background-color: #f8fafc;
  background-image: 
    linear-gradient(45deg, #f1f5f9 25%, transparent 25%),
    linear-gradient(-45deg, #f1f5f9 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #f1f5f9 75%),
    linear-gradient(-45deg, transparent 75%, #f1f5f9 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

.dark .bg-checker {
  background-color: #030712;
  background-image: 
    linear-gradient(45deg, #0f172a 25%, transparent 25%),
    linear-gradient(-45deg, #0f172a 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #0f172a 75%),
    linear-gradient(-45deg, transparent 75%, #0f172a 75%);
}

/* Print Sheet Canvas Container Fix to remove extra padding */
#sheetCanvas {
  display: block;
  margin: auto;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

/* Premium Glass & Paper Shadows */
.paper-shadow {
  box-shadow: 0 10px 25px -5px rgba(225, 29, 72, 0.1), 0 5px 10px -5px rgba(0, 0, 0, 0.05);
}
.dark .paper-shadow {
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.8);
}

/* Crop Handles Premium Styling */
.crop-handle {
  position: absolute;
  width: 14px;
  height: 14px;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  border: 2px solid #ffffff;
  border-radius: 4px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
  z-index: 40;
  transition: transform 0.15s ease, background-color 0.15s ease;
}
.crop-handle:hover {
  transform: scale(1.35);
  background: linear-gradient(135deg, #2563eb, #1e40af);
}

/* Background Free Transform Handles */
.bg-handle {
  position: absolute;
  width: 12px;
  height: 12px;
  background: linear-gradient(135deg, #10b981, #059669);
  border: 2px solid #ffffff;
  border-radius: 4px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
  z-index: 35;
}

/* Custom Smooth Color Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: rgba(251, 207, 232, 0.4);
  border-radius: 9999px;
}
.dark ::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.6);
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #f43f5e, #fb7185);
  border-radius: 9999px;
}
.dark ::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #475569, #334155);
}