/* admin.css */
body { background-color: #f0f2f5; }

.image-preview {
    width: 100%; height: 160px; border: 1px dashed #003366; background-color: #f8fafc;
    border-radius: 4px; display: flex; align-items: center; justify-content: center;
    color: #64748b; font-size: 0.8rem; overflow: hidden; transition: all 0.2s;
}
.image-preview:hover { background-color: #e2e8f0; border-color: #DA251D; }
.image-preview img { width: 100%; height: 100%; object-fit: cover; }

/* Các hiệu ứng loading chung */
.gemini-loading::after { content: ' .'; animation: dots 1s steps(5, end) infinite; }
@keyframes dots {
  0%, 20% { color: rgba(0,0,0,0); text-shadow: .25em 0 0 rgba(0,0,0,0), .5em 0 0 rgba(0,0,0,0); }
  40% { color: #1967d2; text-shadow: .25em 0 0 rgba(0,0,0,0), .5em 0 0 rgba(0,0,0,0); }
  60% { text-shadow: .25em 0 0 #1967d2, .5em 0 0 rgba(0,0,0,0); }
  80%, 100% { text-shadow: .25em 0 0 #1967d2, .5em 0 0 #1967d2; }
}

/* Quan trọng: CSS cho chức năng IN TEM */
@media print {
    body * { visibility: hidden; }
    #qr-modal-content, #qr-modal-content * { visibility: visible; }
    #qr-modal-content { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; border: none; box-shadow: none; }
    #qr-code-img { width: 300px; height: 300px; }
    #qr-batch-id-text { font-size: 2rem; font-weight: bold; margin-top: 20px; color: black; }
    #print-button, #close-modal-button, #download-qr-button { display: none; }
}