/* General Layout */
body { background-color: #f8f9fa; }
.card { border: none; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }

/* Upload Cards */
.upload-card { border: 1px dashed #ced4da; transition: 0.3s; position: relative; cursor: pointer; }
.upload-card:hover { border-color: #0d6efd; background: #e9ecef; }
.doc-status-icon { font-size: 2rem; margin-bottom: 5px; }

/* ID Card Design */
.id-card { 
    background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%); 
    border: 1px solid #dee2e6; 
    border-radius: 12px; 
    overflow: hidden; 
    max-width: 380px; 
    margin: 0 auto; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); 
    position: relative; /* Crucial for html2canvas */
}
.id-header { background: #0d6efd; color: white; padding: 20px; text-align: center; }
.id-photo { 
    width: 130px; 
    height: 130px; 
    border-radius: 50%; 
    object-fit: cover; 
    border: 5px solid white; 
    margin: -65px auto 10px; 
    display: block; 
    background: #fff; 
}
.id-body { padding: 10px 25px 25px; text-align: center; }
.id-label { font-size: 0.8rem; color: #6c757d; text-transform: uppercase; letter-spacing: 0.5px; }
.id-value { font-weight: 600; color: #212529; font-size: 0.95rem; }

/* Print Rules - Hides everything except ID card */
@media print {
    body * { visibility: hidden; }
    #printableCard, #printableCard * { visibility: visible; }
    #printableCard { 
        position: absolute; 
        left: 50%; 
        top: 20px; 
        transform: translateX(-50%); 
        width: 100%; 
        max-width: 350px; 
        border: 1px solid #ddd; 
    }
    button, .btn, .navbar, .nav-tabs, .alert { display: none !important; }
}