/* ================================== */
/* css/pdf-crop.css
/* Page-specific styles for Crop Tool
/* Theme: Indigo
/* ================================== */

/* 1. FORCE WHITE TEXT FOR PREVIEW BADGE */
#previewBadge {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* 2. Gradient Border Input Box (Theme: Indigo) */
.input-gradient-wrap {
    padding: 2px;
    border-radius: 0.6rem;
    background: linear-gradient(to bottom right, #6366f1, #3b82f6); /* Indigo to Blue */
    transition: all 0.3s ease;
}
.input-gradient-wrap:focus-within {
    box-shadow: 0 0 15px rgba(99, 102, 241, 0.5);
}

.input-gradient-wrap input {
    width: 100%;
    border: none !important;
    outline: none !important;
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    background-color: var(--bg-primary); 
    color: var(--text-primary);
    font-size: 0.9rem;
    font-family: 'Poppins', sans-serif;
}

body.dark .input-gradient-wrap input {
     background-color: var(--bg-secondary-hover);
}

/* 3. CropperJS Customization */
.cropper-container {
    width: 100% !important;
    height: 100% !important;
}

.cropper-view-box,
.cropper-face {
    border-radius: 0; /* Sharp edges for PDF crop */
}

.cropper-dashed {
    border-color: rgba(255, 255, 255, 0.8);
}

.cropper-point {
    background-color: #6366f1; /* Indigo */
    width: 8px;
    height: 8px;
}

/* Dark background for the canvas area */
#cropperContainer {
    background-image: 
        linear-gradient(45deg, #1f2937 25%, transparent 25%), 
        linear-gradient(-45deg, #1f2937 25%, transparent 25%), 
        linear-gradient(45deg, transparent 75%, #1f2937 75%), 
        linear-gradient(-45deg, transparent 75%, #1f2937 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
    background-color: #111827;
}