/* css/style.css */

body {
    background-color: #e9ecef;
}

.control-panel {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* A4 Sheet Styling for Screen Preview */
.print-area {
    width: 210mm;          /* A4 Width */
    min-height: 297mm;     /* A4 Height */
    background: white;
    margin: 30px auto;
    
    /* यह पैडिंग 4 फोटोज को 100% परफेक्ट सेंटर में फिक्स कर देगी */
    padding: 15mm 27.5mm 15mm 27.5mm; 
    box-sizing: border-box; /* यह सुनिश्चित करेगा कि पैडिंग width के अंदर ही रहे */
    
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    display: flex;
    flex-wrap: wrap;       
    align-content: flex-start;
    gap: 5mm;              
}

/* Individual Photo Dimension */
.photo-box {
    width: 35mm;           
    height: 45mm;          
    border: 1px solid #aaa;
    padding: 2px;          
    box-sizing: border-box;
}

.photo-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;     
}

/* Print Media Query */
@media print {
    @page {
        size: A4 portrait; /* ब्राउज़र को बता रहे हैं कि पेज A4 ही है */
        margin: 0; 
    }
    html, body {
        margin: 0;
        padding: 0;
        background: white;
    }
    .no-print {
        display: none !important; 
    }
    .print-area {
        margin: 0;
        padding: 15mm 27.5mm; /* प्रिंट में भी वही सेंटरिंग लॉजिक */
        width: 210mm;
        box-sizing: border-box;
        box-shadow: none;
        
        /* 2 पेज वाली समस्या का समाधान */
        min-height: auto; 
        height: max-content; /* पेज की हाइट सिर्फ उतनी रहेगी जितनी फोटो हैं */
        page-break-after: avoid; 
    }
}