* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Plus Jakarta Sans', sans-serif; }
body { background-color: #f1f5f9; color: #1e293b; padding: 15px; }

.container { 
    max-width: 800px; 
    margin: 0 auto; 
    background: white; 
    padding: 20px; 
    border-radius: 12px; 
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); 
}

h1 { font-size: 20px; color: #0f172a; text-align: center; border-bottom: 2px solid #e2e8f0; padding-bottom: 15px; margin-bottom: 20px; }

.step-box { background: #f8fafc; border: 1px solid #cbd5e1; border-radius: 8px; padding: 15px; margin-bottom: 20px; }
.step-title { font-weight: 700; margin-bottom: 10px; color: #334155; font-size: 14px; }

input[type="file"] { width: 100%; padding: 10px; border: 1px dashed #94a3b8; border-radius: 6px; background: white; }

/* Area Kamera */
#reader { width: 100%; border-radius: 8px; overflow: hidden; border: none !important; }
#reader__dashboard_section_csr span { color: red !important; } 

/* Input Manual */
.manual-input-group {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}
.manual-input-group input {
    flex: 1;
    padding: 10px 15px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 14px;
}
.manual-input-group button {
    background-color: #475569;
    color: white;
    border: none;
    padding: 0 20px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
}
.manual-input-group button:active { background-color: #334155; }

/* Tabel Scrollable */
.table-responsive {
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
}
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { border-bottom: 1px solid #e2e8f0; border-right: 1px solid #e2e8f0; padding: 10px; text-align: left; }
th { background-color: #e2e8f0; color: #475569; font-weight: 600; position: sticky; top: 0; z-index: 10; }
td.sys-qty { text-align: center; font-weight: 600; color: #64748b; }
td.scan-qty { text-align: center; font-weight: 700; color: #059669; font-size: 16px; background-color: #ecfdf5; }

.empty-state { text-align: center; color: #94a3b8; padding: 20px !important; }

/* Highlight Animasi Baris */
.row-highlight {
    background-color: #fef08a !important;
    transition: background-color 0.5s ease;
}

.btn-export { display: block; width: 100%; background-color: #0284c7; color: white; border: none; padding: 15px; font-size: 16px; font-weight: bold; border-radius: 8px; margin-top: 20px; cursor: pointer; }
.btn-export:disabled { background-color: #94a3b8; cursor: not-allowed; }
.status-badge { display: inline-block; padding: 6px 12px; background: #dcfce7; color: #166534; border-radius: 6px; font-size: 13px; font-weight: 600; margin-top: 10px; }